@dxos/react-ui-editor 0.3.10-main.11cdcf4 → 0.3.10-main.279fbbe

package/src/components/TextEditor/TextEditor.tsx

@@ -16,15 +16,13 @@ import React, {
   useImperativeHandle,
   useState,
 } from 'react';
-import { yCollab } from 'y-codemirror.next';
 
 import { generateName } from '@dxos/display-name';
 import { useThemeContext } from '@dxos/react-ui';
 import { getColorForValue, inputSurface, mx } from '@dxos/react-ui-theme';
-import { type YText } from '@dxos/text-model';
 
 import { basicBundle, markdownBundle } from './extensions';
-import { defaultTheme, textTheme } from './themes';
+import { defaultTheme, markdownTheme, textTheme } from './themes';
 import { type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 
@@ -72,23 +70,22 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
 
-    // TODO(burdon): Factor out extension (remove logic from react-ui-editor).
-    // const collaboration = useCollaboration(model, themeMode);
-    const { provider, peer } = model;
+    const [root, setRoot] = useState<HTMLDivElement | null>(null);
+    const [state, setState] = useState<EditorState>();
+    const [view, setView] = useState<EditorView>();
+    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
+
+    // TODO(burdon): Factor out?
+    const { awareness, peer } = model;
     useEffect(() => {
-      if (provider && peer) {
-        provider.awareness.setLocalStateField('user', {
+      if (awareness && peer) {
+        awareness.setLocalStateField('user', {
           name: peer.name ?? generateName(peer.id),
           color: getColorForValue({ value: peer.id, type: 'color' }),
           colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
         });
       }
-    }, [provider, peer, themeMode]);
-
-    const [root, setRoot] = useState<HTMLDivElement | null>(null);
-    const [state, setState] = useState<EditorState>();
-    const [view, setView] = useState<EditorView>();
-    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
+    }, [awareness, peer, themeMode]);
 
     useEffect(() => {
       if (!root) {
@@ -108,7 +105,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           EditorView.darkTheme.of(themeMode === 'dark'),
 
           // Storage and replication.
-          yCollab(model.content as YText, model.provider?.awareness),
+          model.extension,
 
           // Custom.
           ...extensions,
@@ -127,7 +124,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
         setView(undefined);
         setState(undefined);
       };
-    }, [root, model.content, themeMode, editorMode]);
+    }, [root, model, themeMode, editorMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
@@ -179,7 +176,7 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
 export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
   ({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultSlots);
+    const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
@@ -203,3 +200,10 @@ export const defaultTextSlots: TextEditorSlots = {
     theme: textTheme,
   },
 };
+
+export const defaultMarkdownSlots: TextEditorSlots = {
+  ...defaultSlots,
+  editor: {
+    theme: markdownTheme,
+  },
+};

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

@@ -23,14 +23,16 @@ import {
 } from '@codemirror/autocomplete';
 import { keymap } from '@codemirror/view';
 
+export type AutocompleteResult = Completion;
+
 export type AutocompleteOptions = {
-  getOptions: (text: string) => Completion[];
+  onSearch: (text: string) => Completion[];
 };
 
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ getOptions }: AutocompleteOptions) => {
+export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -57,7 +59,7 @@ export const autocomplete = ({ getOptions }: AutocompleteOptions) => {
           // TODO(burdon): Option to convert to links?
           return {
             from: word.from,
-            options: getOptions(word.text.toLowerCase()),
+            options: onSearch(word.text.toLowerCase()),
             // options: [
             //   { label: 'apple', type: 'keyword' },
             //   { label: 'amazon', type: 'keyword' },

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/{automerge → hooks/automerge}/automerge.stories.tsx

@@ -12,7 +12,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import { type Prop } from '@dxos/automerge/automerge';
 import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
 
-import { type IDocHandle, automergePlugin } from './automerge-plugin';
+import { type IDocHandle } from './handle';
+import { automergePlugin } from './plugin';
 
 type EditorProps = {
   handle: IDocHandle;

package/src/hooks/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './useCollaboration';
 export * from './useTextModel';
 export * from './yjs';