@dxos/react-ui-editor 0.4.1 → 0.4.2-main.16babdb

package/src/extensions/annotations.ts

@@ -0,0 +1,78 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorState, type Extension, StateField } from '@codemirror/state';
+import { Decoration, EditorView } from '@codemirror/view';
+
+import { isNotFalsy } from '@dxos/util';
+
+import { Cursor } from './cursor';
+
+type Annotation = {
+  cursor: string;
+};
+
+export type AnnotationOptions = {
+  match?: RegExp; // TODO(burdon): Update via hook (e.g., for search).
+};
+
+const annotationMark = Decoration.mark({ class: 'cm-annotation' });
+
+export const annotations = (options: AnnotationOptions = {}): Extension => {
+  // TODO(burdon): Build index of matches and cursors (in background function).
+  //  Define annotation action in prompt. E.g., extract company names. Find links, etc.
+  //  Show popover card. A16Z chain demo. Identify, extract, research, link. Multi-agent.
+  const match = (state: EditorState) => {
+    const annotations: Annotation[] = [];
+    const text = state.doc.toString();
+    if (options.match) {
+      const matches = text.matchAll(options.match);
+      for (const match of matches) {
+        const from = match.index!;
+        const to = from + match[0].length;
+        const cursor = Cursor.getCursorFromRange(state, { from, to });
+        annotations.push({ cursor });
+      }
+    }
+
+    return annotations;
+  };
+
+  const annotationsState = StateField.define<Annotation[]>({
+    create: (state) => {
+      return match(state);
+    },
+    update: (value, tr) => {
+      if (!tr.changes.empty) {
+        return match(tr.state);
+      }
+
+      return value;
+    },
+  });
+
+  return [
+    annotationsState,
+    EditorView.decorations.compute([annotationsState], (state) => {
+      const annotations = state.field(annotationsState);
+      const decorations = annotations
+        .map((annotation) => {
+          const range = Cursor.getRangeFromCursor(state, annotation.cursor);
+          return range && annotationMark.range(range.from, range.to);
+        })
+        .filter(isNotFalsy);
+
+      return Decoration.set(decorations);
+    }),
+    styles,
+  ];
+};
+
+const styles = EditorView.baseTheme({
+  '.cm-annotation': {
+    textDecoration: 'underline',
+    textDecorationStyle: 'wavy',
+    textDecorationColor: 'red',
+  },
+});

package/src/extensions/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './annotations';
 export * from './autocomplete';
 export * from './automerge';
 export * from './awareness';

package/src/hooks/useTextModel.ts

@@ -47,6 +47,10 @@ export const useInMemoryTextModel = ({
 };
 
 const createModel = ({ space, identity, text }: UseTextModelProps) => {
+  if (!text) {
+    return undefined;
+  }
+
   invariant(isAutomergeObject(text));
   const obj = text as any as AutomergeTextCompat;
   const doc = getRawDoc(obj, [obj.field]);
@@ -64,11 +68,7 @@ const createModel = ({ space, identity, text }: UseTextModelProps) => {
       peerId: identity?.identityKey.toHex() ?? 'Anonymous',
     });
 
-  const extensions = [
-    //
-    modelState.init(() => model),
-    automerge({ handle: doc.handle, path: doc.path }),
-  ];
+  const extensions = [modelState.init(() => model), automerge({ handle: doc.handle, path: doc.path })];
   if (awarenessProvider) {
     extensions.push(awareness(awarenessProvider));
   }