@dxos/react-ui-editor 0.3.10-main.8aaa303 → 0.3.10-main.8fd45da

package/src/components/TextEditor/extensions/comments.ts

@@ -0,0 +1,173 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  keymap,
+  MatchDecorator,
+  type Rect,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+} from '@codemirror/view';
+
+import { invariant } from '@dxos/invariant';
+
+// 1. TODO(burdon): Make atomic (for tasklist also).
+//    - https://discuss.codemirror.net/t/easily-track-remove-content-with-decorations/4606
+//    - https://discuss.codemirror.net/t/creating-atomic-replace-decorations/2961
+//    - https://codemirror.net/docs/ref/#state.EditorState%5EtransactionFilter (transaction filter: move, delete).
+// 2. TODO(burdon): Create/track threads in composer (change global state). Select/follow. Scroll with page.
+//    - Separate from chat/search.
+// 3. TODO(burdon): Support multiple threads in sidebar?
+// 4. TODO(burdon): Anchor AI thread when creating section.
+// 5. TODO(burdon): Button to resolve thread to close comments.
+
+// 6. TODO(burdon): Perf: Update existing rangeset.
+//  https://discuss.codemirror.net/t/rangeset-with-metadata-and-different-decorations/3874
+
+// TODO(burdon): Import note (performance):
+//  Easily track & remove content with decorations
+//  https://discuss.codemirror.net/t/easily-track-remove-content-with-decorations/4606
+
+class BookmarkWidget extends WidgetType {
+  constructor(private readonly _pos: number, private readonly _id: string) {
+    super();
+    invariant(this._id);
+  }
+
+  override eq(other: BookmarkWidget) {
+    return this._id === other._id;
+  }
+
+  // TODO(burdon): Click to select.
+  override toDOM() {
+    const span = document.createElement('span');
+    span.className = 'cm-bookmark';
+    // https://emojifinder.com/comment
+    span.textContent = '💬';
+    return span;
+  }
+}
+
+// TODO(burdon): Reconcile with theme.
+const styles = EditorView.baseTheme({
+  '& .cm-bookmark': {
+    cursor: 'pointer',
+    margin: '4px',
+    padding: '4px',
+    backgroundColor: 'yellow',
+  },
+});
+
+export type CommentsOptions = {
+  key?: string;
+  onCreate?: () => string | void;
+  onUpdate?: (info: { items: string[]; active: string; pos: number; location: Rect }) => void;
+};
+
+// https://www.markdownguide.org/extended-syntax/#footnotes
+// TODO(burdon): Record span in automerge model?
+// TODO(burdon): Extended markdown: https://www.markdownguide.org/extended-syntax
+export const comments = (options: CommentsOptions = {}): Extension => {
+  const bookmarkMatcher = new MatchDecorator({
+    regexp: /\[\^(\w+)\]/g,
+    decoration: (match, view, pos) => {
+      const id = match[1];
+      return Decoration.replace({
+        id,
+        widget: new BookmarkWidget(pos, id),
+      });
+    },
+  });
+
+  const bookmarks = ViewPlugin.fromClass(
+    class {
+      bookmarks: DecorationSet;
+      constructor(view: EditorView) {
+        this.bookmarks = bookmarkMatcher.createDeco(view);
+      }
+
+      update(update: ViewUpdate) {
+        this.bookmarks = bookmarkMatcher.updateDeco(update, this.bookmarks);
+      }
+    },
+    {
+      decorations: (instance) => instance.bookmarks,
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.bookmarks || Decoration.none;
+        }),
+    },
+  );
+
+  return [
+    keymap.of([
+      {
+        key: options?.key ?? 'alt-meta-c',
+        run: (view) => {
+          // Insert footnote.
+          const id = options.onCreate?.();
+          if (id) {
+            const pos = view.state.selection.main.head;
+            const tag = `[^${id}]`;
+            view.dispatch({
+              changes: { from: pos, insert: tag },
+              selection: { anchor: pos + tag.length },
+            });
+
+            return true;
+          }
+
+          return false;
+        },
+      },
+    ]),
+
+    bookmarks,
+
+    // Monitor cursor movement.
+    EditorView.updateListener.of((update) => {
+      const view = update.view;
+      const pos = view.state.selection.main.head;
+
+      const decorations: { from: number; to: number; value: Decoration }[] = [];
+      const rangeSet = view.plugin(bookmarks)?.bookmarks;
+      rangeSet?.between(pos, pos + 1, (from, to, value) => {
+        if (value.spec.widget) {
+          decorations.push({ from, to, value });
+        }
+      });
+
+      if (decorations.length) {
+        const {
+          from,
+          value: {
+            spec: { id },
+          },
+        } = decorations[0];
+        const location = view.coordsAtPos(from);
+        if (location) {
+          options.onUpdate?.({
+            items: decorations.map(
+              ({
+                value: {
+                  spec: { id },
+                },
+              }) => id,
+            ),
+            active: id,
+            pos,
+            location,
+          });
+        }
+      }
+    }),
+
+    styles,
+  ];
+};

package/src/components/TextEditor/extensions/experimental.tsx

@@ -19,6 +19,7 @@ import {
 // TODO(burdon): Add-on: dialog.
 // TODO(burdon): Comments: https://codemirror.net/5/doc/manual.html#setBookmark
 // TODO(burdon): Split view: https://codemirror.net/examples/split
+// TODO(burdon): https://codemirror.net/5/demo/simplemode.html
 
 // https://codemirror.net/examples/autocompletion
 // https://codemirror.net/docs/ref/#autocomplete.autocompletion

package/src/components/TextEditor/extensions/index.ts

@@ -4,6 +4,7 @@
 
 export * from './autocomplete';
 export * from './basic';
+export * from './comments';
 export * from './link';
 export * from './listener';
 export * from './markdown';

package/src/components/TextEditor/extensions/link.ts

@@ -77,6 +77,11 @@ class LinkText extends WidgetType {
   }
 }
 
+/**
+ * Range sets provide a data structure that can hold a collection of tagged,
+ * possibly overlapping ranges in such a way that they can efficiently be mapped though document changes.
+ * https://codemirror.net/docs/ref/#state
+ */
 const update = (state: EditorState, options: LinkOptions) => {
   const builder = new RangeSetBuilder();
   const cursor = state.selection.main.head;
@@ -89,6 +94,9 @@ const update = (state: EditorState, options: LinkOptions) => {
 
         const urlNode = node.node.getChild('URL');
         const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
+        if (!url) {
+          return false;
+        }
 
         if (cursor < node.from || cursor > node.to) {
           builder.add(
@@ -109,9 +117,9 @@ const update = (state: EditorState, options: LinkOptions) => {
             }),
           );
         }
-      }
 
-      return true;
+        return false;
+      }
     },
   });
 

package/src/components/TextEditor/extensions/listener.ts

@@ -9,6 +9,7 @@ export type TextListener = (text: string) => void;
 /**
  * Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
  */
+// TODO(burdon): Expose options.
 export const listener = (onChange: TextListener) =>
   StateField.define({
     create: () => null,

package/src/components/TextEditor/extensions/markdown/bundle.ts

@@ -3,17 +3,10 @@
 //
 
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { defaultKeymap, history, indentWithTab } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
-import {
-  bracketMatching,
-  defaultHighlightStyle,
-  foldKeymap,
-  indentOnInput,
-  syntaxHighlighting,
-} from '@codemirror/language';
+import { bracketMatching, defaultHighlightStyle, indentOnInput, syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { lintKeymap } from '@codemirror/lint';
 import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
@@ -50,7 +43,6 @@ export const markdownBundle = ({ themeMode, placeholder: _placeholder }: Markdow
     EditorState.allowMultipleSelections.of(true),
     EditorView.lineWrapping,
 
-    // autocompletion(),
     crosshairCursor(),
     dropCursor(),
     drawSelection(),
@@ -62,13 +54,13 @@ export const markdownBundle = ({ themeMode, placeholder: _placeholder }: Markdow
     indentOnInput(),
     rectangularSelection(),
 
+    // TODO(burdon): Review.
     keymap.of([
       ...closeBracketsKeymap,
-      // ...completionKeymap,
       ...defaultKeymap,
-      ...foldKeymap,
-      ...historyKeymap,
-      ...lintKeymap,
+      // ...foldKeymap,
+      // ...historyKeymap,
+      // ...lintKeymap,
       ...searchKeymap,
       indentWithTab,
     ]),

package/src/components/TextEditor/extensions/markdown/highlight.ts

@@ -134,10 +134,11 @@ export const markdownHighlightStyle = HighlightStyle.define(
       class: codeMark,
     },
 
-    // The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
+    // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
     // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
     // when a language is specified. In this case, the syntax highlighting extensions will colorize
     // the code, but all other CSS properties will be inherited.
+    // IMPORTANT: Therefore, the fenced code block will use the base editor font.
     {
       tag: [markdownTags.CodeText, markdownTags.InlineCode],
       class: code,

package/src/components/TextEditor/extensions/tasklist.ts

@@ -2,112 +2,106 @@
 // Copyright 2023 DXOS.org
 //
 
-import { syntaxTree } from '@codemirror/language';
 import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
-import { EditorView, Decoration, WidgetType } from '@codemirror/view';
+  EditorView,
+  Decoration,
+  WidgetType,
+  MatchDecorator,
+  ViewPlugin,
+  type DecorationSet,
+  type ViewUpdate,
+} from '@codemirror/view';
 
 class CheckboxWidget extends WidgetType {
-  constructor(private readonly _pos: number, private readonly _getCursor: () => number, private _checked: boolean) {
+  constructor(
+    private readonly _pos: number,
+    private _checked: boolean,
+    private readonly _indent: number,
+    private readonly _onCheck: (check: boolean) => void,
+  ) {
     super();
   }
 
   override eq(other: CheckboxWidget) {
-    // Uniqueness based on position; also checks state.
-    // TODO(burdon): Is this efficient? Check life-cycle.
-    return this._pos === other._pos && this._checked === other._checked;
+    return this._pos === other._pos && this._checked === other._checked && this._indent === other._indent;
   }
 
   toDOM(view: EditorView) {
-    // console.log('toDom', this._pos);
     const wrap = document.createElement('span');
-    wrap.setAttribute('aria-hidden', 'true');
     wrap.className = 'cm-task-item';
+    wrap.setAttribute('aria-hidden', 'true');
+    wrap.style.setProperty('margin-left', this._indent * 24 + 'px');
 
-    const box = wrap.appendChild(document.createElement('input'));
-    box.type = 'checkbox';
-    box.checked = this._checked;
-    box.onclick = (event) => {
-      this._checked = !isChecked(view.state, this._pos);
-      view.dispatch({
-        changes: {
-          from: this._pos + 1,
-          to: this._pos + 2,
-          insert: this._checked ? 'x' : ' ',
-        },
-        // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
-        selection: {
-          anchor: this._pos + 4,
-          // anchor: this._getCursor(),
-        },
-      });
+    const input = wrap.appendChild(document.createElement('input'));
+    input.type = 'checkbox';
+    input.checked = this._checked;
+    input.onchange = (event: Event) => {
+      this._onCheck((event.target as any).checked);
       return true;
     };
 
     return wrap;
   }
 
-  // TODO(burdon): Remove listener?
-  // override destroy() {
-  // console.log('destroy', this._pos);
-  // }
-
   override ignoreEvent() {
     return false;
   }
 }
 
-const isChecked = (state: EditorState, pos: number) => {
-  return state.sliceDoc(pos, pos + 3).toLowerCase() === '[x]';
-};
+// TODO(burdon): Reconcile with theme.
+const styles = EditorView.baseTheme({
+  '& .cm-task-item': {
+    paddingLeft: '4px',
+    paddingRight: '8px',
+  },
+});
 
-export const statefield = (): Extension => {
-  let lastPosition: number = 0;
-  const listener = EditorView.updateListener.of((update) => {
-    lastPosition = update.startState.selection.main.head;
+export const tasklist = () => {
+  // TODO(burdon): Matcher isn't as precise as syntax tree.
+  //  Allows for indents to be greater than AST would allow.
+  const taskMatcher = new MatchDecorator({
+    regexp: /^(\s*)- \[([ xX])\]\s/g,
+    decoration: (match, view, pos) => {
+      const indent = Math.floor(match[1].length / 2);
+      const checked = match[2] === 'x' || match[2] === 'X';
+      return Decoration.replace({
+        widget: new CheckboxWidget(pos, checked, indent, (checked) => {
+          const idx = pos + match[0].indexOf('[') + 1;
+          view.dispatch({
+            changes: {
+              from: idx,
+              to: idx + 1,
+              insert: checked ? 'x' : ' ',
+            },
+            // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
+            selection: {
+              anchor: idx + 3,
+            },
+          });
+        }),
+      });
+    },
   });
 
-  const checkbox = (state: EditorState) => {
-    const builder = new RangeSetBuilder();
-    syntaxTree(state).iterate({
-      enter: (node) => {
-        // console.log(node.name, node.from, node.to);
-        if (node.name === 'TaskMarker') {
-          builder.add(
-            node.from,
-            node.to,
-            Decoration.replace({
-              widget: new CheckboxWidget(node.from, () => lastPosition, isChecked(state, node.from)),
-            }),
-          );
-        }
-      },
-    });
+  const tasks = ViewPlugin.fromClass(
+    class {
+      tasks: DecorationSet;
+      constructor(view: EditorView) {
+        this.tasks = taskMatcher.createDeco(view);
+      }
 
-    return builder.finish();
-  };
+      update(update: ViewUpdate) {
+        this.tasks = taskMatcher.updateDeco(update, this.tasks);
+      }
+    },
+    {
+      decorations: (instance) => instance.tasks,
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.tasks || Decoration.none;
+        }),
+    },
+  );
 
-  return [
-    listener,
-    StateField.define<RangeSet<any>>({
-      create: (state) => checkbox(state),
-      update: (_: RangeSet<any>, tr: Transaction) => checkbox(tr.state),
-      provide: (field) => EditorView.decorations.from(field),
-    }),
-  ];
+  return [tasks, styles];
 };
-
-// TODO(burdon): Reconcile with theme.
-export const styles = EditorView.baseTheme({
-  '& .cm-task-item': {
-    padding: '0 4px',
-  },
-});
-
-export const tasklist = () => [statefield(), styles];

package/src/components/TextEditor/themes/default.ts

@@ -159,6 +159,18 @@ export const textTheme: {
   '& .cm-scroller': {
     fontFamily: get(tokens, 'fontFamily.body', []).join(','),
   },
+  '& .cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+};
+
+export const markdownTheme: {
+  [selector: string]: StyleSpec;
+} = {
+  // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
+  '& .cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
 };
 
 export const codeTheme: {
@@ -167,4 +179,7 @@ export const codeTheme: {
   '& .cm-scroller': {
     fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
   },
+  '& .cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.mono', []).join(','),
+  },
 };

package/src/hooks/useTextModel.ts

@@ -29,6 +29,7 @@ type Awareness = awarenessProtocol.Awareness;
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export type EditorModel = {
   id: string;
+  // TODO(burdon): Remove.
   content: string | YText | YXmlFragment | DocAccessor;
   text: () => string;
   extension?: Extension;
@@ -57,28 +58,30 @@ export const useTextModel = ({ identity, space, text }: UseTextModelOptions): Ed
 };
 
 const createModel = (options: UseTextModelOptions) => {
-  const { space, text } = options;
-
+  const { text } = options;
   if (isActualAutomergeObject(text)) {
     return createAutomergeModel(options);
   } else {
-    if (!space || !text?.doc || !text?.content) {
+    if (!text?.doc) {
       return undefined;
     }
+
     return createYjsModel(options);
   }
 };
 
 const createYjsModel = ({ identity, space, text }: UseTextModelOptions): EditorModel => {
-  invariant(space && text?.doc && text?.content);
-  const provider = new SpaceAwarenessProvider({ space, doc: text.doc, channel: `yjs.awareness.${text.id}` });
+  invariant(text?.doc && text?.content);
+  const provider = space
+    ? new SpaceAwarenessProvider({ space, doc: text.doc, channel: `yjs.awareness.${text.id}` })
+    : undefined;
 
   return {
     id: text.doc.guid,
     content: text.content,
     text: () => text.content!.toString(),
-    extension: yCollab(text.content as YText, provider.awareness),
-    awareness: provider.awareness,
+    extension: yCollab(text.content as YText, provider?.awareness),
+    awareness: provider?.awareness,
     peer: identity
       ? {
           id: identity.identityKey.toHex(),
@@ -88,7 +91,7 @@ const createYjsModel = ({ identity, space, text }: UseTextModelOptions): EditorM
   };
 };
 
-const createAutomergeModel = ({ identity, space, text }: UseTextModelOptions): EditorModel => {
+const createAutomergeModel = ({ identity, text }: UseTextModelOptions): EditorModel => {
   const obj = text as any as AutomergeTextCompat;
   const doc = getRawDoc(obj, [obj.field]);
 

package/src/testing/replicator.ts

@@ -163,16 +163,17 @@ export class Replicator {
       colorLight: cursorColor.light,
     });
 
+    const field = 'content';
+    const content = this._kind === TextKind.PLAIN ? doc.getText(field) : doc.getXmlFragment(field);
     const model: EditorModel = {
       id: doc.guid,
-      content: this._kind === TextKind.PLAIN ? doc.getText('content') : doc.getXmlFragment('content'),
-      text: () => model.content.toString(),
+      text: () => content.toString(),
+      content,
       awareness: provider.awareness,
       peer: { id },
     };
 
     this._peers.push(model);
-
     return model;
   };
 }
@@ -184,6 +185,5 @@ export type UseYjsModelOptions = {
 };
 
 export const useYjsModel = ({ replicator, id, doc }: UseYjsModelOptions): EditorModel => {
-  const peer = useMemo(() => replicator.createPeer(id, doc), [doc]);
-  return peer;
+  return useMemo(() => replicator.createPeer(id, doc), [doc]);
 };