@dxos/react-ui-editor 0.3.11-main.dd122a6 → 0.3.11-main.e0dc42b

package/src/components/TextEditor/TextEditor.tsx

@@ -15,6 +15,7 @@ import React, {
   useEffect,
   useImperativeHandle,
   useState,
+  useRef,
 } from 'react';
 
 import { generateName } from '@dxos/display-name';
@@ -34,15 +35,10 @@ export type CursorInfo = {
   to: number;
   line: number;
   lines: number;
+  length: number;
   after?: string;
 };
 
-export type TextEditorRef = {
-  root: HTMLDivElement | null;
-  state?: EditorState;
-  view?: EditorView;
-};
-
 export type TextEditorSlots = {
   root?: Omit<ComponentProps<'div'>, 'ref'>;
   editor?: {
@@ -56,6 +52,8 @@ export type TextEditorSlots = {
 
 export type TextEditorProps = {
   model: EditorModel;
+  focus?: boolean;
+  selection?: { anchor: number; head?: number };
   readonly?: boolean; // TODO(burdon): Move into model.
   comments?: CommentRange[]; // TODO(burdon): Move into extension.
   extensions?: Extension[];
@@ -65,17 +63,26 @@ export type TextEditorProps = {
 
 /**
  * Base text editor.
- * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
-export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, readonly, comments, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
-    const { themeMode } = useThemeContext();
+export const BaseTextEditor = forwardRef<EditorView, TextEditorProps>(
+  (
+    { model, focus, selection, readonly, comments, extensions = [], editorMode, slots = defaultSlots },
+    forwardedRef,
+  ) => {
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
-    const [root, setRoot] = useState<HTMLDivElement | null>(null);
-    const [{ state = undefined, view = undefined } = {}, setEditor] = useState<
-      { state?: EditorState; view?: EditorView } | undefined
-    >();
-    useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
+    const { themeMode } = useThemeContext();
+
+    // The editor view ref should only be used as an escape hatch.
+    const rootRef = useRef<HTMLDivElement>(null);
+    const [view, setView] = useState<EditorView | null>(null);
+    useImperativeHandle<EditorView | null, EditorView | null>(forwardedRef, () => view, [view]);
+
+    // Focus.
+    useEffect(() => {
+      if (view && focus) {
+        view.focus();
+      }
+    }, [view, focus]);
 
     // TODO(burdon): Factor out as extension.
     const { awareness, peer } = model;
@@ -99,7 +106,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     }, [view, comments]);
 
     useEffect(() => {
-      if (!root) {
+      if (!model || !rootRef.current) {
         return;
       }
 
@@ -107,6 +114,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
         doc: model.text(),
+        selection,
         extensions: [
           readonly && EditorState.readOnly.of(readonly),
 
@@ -131,36 +139,35 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
       // If the new state is derived from the old state, it will likely not be visible other than the cursor resetting.
       // Ideally this should not happen except when changing between text objects.
       view?.destroy();
-      setEditor({
+      const newView = new EditorView({
+        parent: rootRef.current,
         state,
-        view: new EditorView({
-          state,
-          parent: root,
-          // NOTE: Uncomment to spy on all transactions.
-          // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-          // dispatch: (transaction, view) => {
-          //   view.update([transaction]);
-          // },
-        }),
+        // NOTE: Uncomment to spy on all transactions.
+        // https://codemirror.net/docs/ref/#view.EditorView.dispatch
+        // dispatch: (transaction, view) => {
+        //   view.update([transaction]);
+        // },
       });
 
+      setView(newView);
       return () => {
-        view?.destroy();
-        setEditor(undefined);
+        newView?.destroy();
+        setView(null);
       };
-    }, [root, model, readonly, editorMode, themeMode]);
+    }, [rootRef, model, readonly, editorMode, themeMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {
         const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
         switch (key) {
-          case 'Enter': {
-            view?.contentDOM.focus();
-            break;
-          }
+          // TODO(burdon): ???
+          // case 'Enter': {
+          //   view?.contentDOM.focus();
+          //   break;
+          // }
 
           case 'Escape': {
-            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
+            editorMode === 'vim' && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
             break;
           }
         }
@@ -171,7 +178,7 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     return (
       <div
         key={model.id}
-        ref={setRoot}
+        ref={rootRef}
         tabIndex={0}
         {...slots?.root}
         {...(editorMode !== 'vim' && tabsterDOMAttribute)}
@@ -181,32 +188,39 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
   },
 );
 
-export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+export const TextEditor = forwardRef<EditorView, TextEditorProps>(
+  ({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultTextSlots);
+    const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[basicBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
-        slots={slots}
+        extensions={[
+          basicBundle({ readonly, themeMode, placeholder: updatedSlots?.editor?.placeholder }),
+          ...extensions,
+        ]}
+        slots={updatedSlots}
         {...props}
       />
     );
   },
 );
 
-export const MarkdownEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+// TODO(burdon): Remove (Just provide bundle, slots).
+export const MarkdownEditor = forwardRef<EditorView, TextEditorProps>(
+  ({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
-    const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
+    const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[markdownBundle({ readonly, themeMode, placeholder: slots?.editor?.placeholder }), ...extensions]}
-        slots={slots}
+        extensions={[
+          markdownBundle({ readonly, themeMode, placeholder: updatedSlots?.editor?.placeholder }),
+          ...extensions,
+        ]}
+        slots={updatedSlots}
         {...props}
       />
     );

package/src/extensions/autocomplete.ts

@@ -13,6 +13,7 @@ import {
   type CompletionContext,
   type CompletionResult,
 } from '@codemirror/autocomplete';
+import { markdownLanguage } from '@codemirror/lang-markdown';
 import { keymap } from '@codemirror/view';
 
 export type AutocompleteResult = Completion;
@@ -28,32 +29,32 @@ 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
+    // TODO(burdon): Set custom keymap.
     keymap.of(completionKeymap),
 
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      // TODO(burdon): Set custom keymap.
-      // defaultKeymap: false,
+      defaultKeymap: false,
 
       // Don't start unless key press.
       activateOnTyping: false,
+    }),
 
-      // TODO(burdon): Option to create new page?
-      // TODO(burdon): Optional decoration via addToOptions
-      override: [
-        (context: CompletionContext): CompletionResult | null => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || (match.from === match.to && !context.explicit)) {
-            return null;
-          }
-
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase()),
-          };
-        },
-      ],
+    // TODO(burdon): Option to create new page?
+    // TODO(burdon): Optional decoration via addToOptions
+    markdownLanguage.data.of({
+      autocomplete: (context: CompletionContext): CompletionResult | null => {
+        const match = context.matchBefore(/\w*/);
+        if (!match || (match.from === match.to && !context.explicit)) {
+          return null;
+        }
+
+        return {
+          from: match.from,
+          options: onSearch(match.text.toLowerCase()),
+        };
+      },
     }),
   ];
 };

package/src/extensions/automerge/index.ts

@@ -4,3 +4,4 @@
 
 export { automerge } from './automerge';
 export { type IDocHandle } from './defs';
+export { cursorConverter } from './cursor';

package/src/extensions/awareness.ts

@@ -208,24 +208,22 @@ export class RemoteSelectionsDecorator implements PluginValue {
 }
 
 class RemoteCaretWidget extends WidgetType {
-  constructor(public name: string, public color: string) {
+  constructor(private readonly _name: string, private readonly _color: string) {
     super();
-    this.name = name;
-    this.color = color;
   }
 
-  toDOM(): HTMLElement {
+  override toDOM(): HTMLElement {
     const span = document.createElement('span');
     span.className = 'cm-ySelectionCaret';
-    span.style.backgroundColor = this.color;
-    span.style.borderColor = this.color;
+    span.style.backgroundColor = this._color;
+    span.style.borderColor = this._color;
 
     const dot = document.createElement('div');
     dot.className = 'cm-ySelectionCaretDot';
 
     const info = document.createElement('div');
     info.className = 'cm-ySelectionInfo';
-    info.innerText = this.name;
+    info.innerText = this._name;
 
     span.appendChild(document.createTextNode('\u2060'));
     span.appendChild(dot);
@@ -236,18 +234,14 @@ class RemoteCaretWidget extends WidgetType {
     return span;
   }
 
-  override eq(widget: this) {
-    return widget.color === this.color;
-  }
-
-  compare(widget: this) {
-    return widget.color === this.color;
-  }
-
   override updateDOM() {
     return false;
   }
 
+  override eq(widget: this) {
+    return widget._color === this._color;
+  }
+
   override get estimatedHeight() {
     return -1;
   }
@@ -255,6 +249,11 @@ class RemoteCaretWidget extends WidgetType {
   override ignoreEvent() {
     return true;
   }
+
+  // TODO(burdon): Not used?
+  compare(widget: this) {
+    return widget._color === this._color;
+  }
 }
 
 // TODO(burdon): Rename prefix (y for yjs?)

package/src/extensions/code.ts

@@ -55,7 +55,7 @@ const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
 export const code = () => {
   const getDecorations = (view: EditorView) => {
     const decorations: Range<Decoration>[] = [];
-    if (view.state.readOnly) {
+    if (!view.hasFocus || view.state.readOnly) {
       const text = view.state.doc.sliceString(0);
       const matches = text.matchAll(CODE_REGEX);
       const blocks = view.viewportLineBlocks;
@@ -78,13 +78,21 @@ export const code = () => {
   return [
     ViewPlugin.fromClass(
       class {
+        hasFocus = false;
         decorations: DecorationSet;
         constructor(view: EditorView) {
           this.decorations = getDecorations(view);
         }
 
         update(update: ViewUpdate) {
-          if (update.docChanged || update.viewportChanged) {
+          if (
+            // TODO(burdon): Generalize for other extensions.
+            this.hasFocus !== update.view.hasFocus ||
+            update.startState.readOnly !== update.view.state.readOnly ||
+            update.docChanged ||
+            update.viewportChanged
+          ) {
+            this.hasFocus = update.view.hasFocus;
             this.decorations = getDecorations(update.view);
           }
         }

package/src/extensions/comments.ts

@@ -7,14 +7,14 @@ import {
   hoverTooltip,
   keymap,
   type Command,
-  type DecorationSet,
-  type ViewUpdate,
   Decoration,
+  type DecorationSet,
   EditorView,
   MatchDecorator,
+  type Rect,
+  type ViewUpdate,
   ViewPlugin,
   WidgetType,
-  type Rect,
 } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
 
@@ -159,17 +159,13 @@ const highlightDecorations = EditorView.decorations.compute([commentsStateField]
  * May correspond to a markdown bookmark.
  */
 class BookmarkWidget extends WidgetType {
-  constructor(
-    private readonly _anchor: number,
-    private readonly _id: string,
-    private readonly _handleClick?: () => void,
-  ) {
+  constructor(private readonly _id: string, private readonly _handleClick?: () => void) {
     super();
     invariant(this._id);
   }
 
-  override eq(other: BookmarkWidget) {
-    return this._anchor === other._anchor && this._id === other._id;
+  override eq(other: this) {
+    return this._id === other._id;
   }
 
   override toDOM() {
@@ -197,7 +193,7 @@ export type CommentsOptions = {
   /**
    * Called to render tooltip.
    */
-  onHover?: (el: Element) => void;
+  onHover?: (el: Element, shortcut: string) => void;
 };
 
 /**
@@ -213,6 +209,8 @@ export type CommentsOptions = {
  * 6). Optionally, implements a hoverTooltip to show hints when creating a selection range.
  */
 export const comments = (options: CommentsOptions = {}): Extension => {
+  const { key: shortcut = "meta-'" } = options;
+
   const handleSelect = debounce((state: CommentsState) => options.onSelect?.(state), 200);
 
   /**
@@ -257,38 +255,37 @@ export const comments = (options: CommentsOptions = {}): Extension => {
   /**
    * Bookmark widget decoration.
    */
-  const bookmarksViewPlugin = ViewPlugin.fromClass(
-    class BookmarkViewPlugin {
-      // Match markdown footnotes (option).
-      // https://www.markdownguide.org/extended-syntax/#footnotes
-      static bookmarkMatcher = new MatchDecorator({
-        regexp: /\[\^(\w+)\]/g,
-        decoration: (match, view, pos) => {
-          const id = match[1];
-          return Decoration.replace({
-            id,
-            widget: new BookmarkWidget(pos, id),
+  const bookmarksViewPlugin = options.footnote
+    ? ViewPlugin.fromClass(
+        class BookmarkViewPlugin {
+          // Match markdown footnotes (option).
+          // https://www.markdownguide.org/extended-syntax/#footnotes
+          static bookmarkMatcher = new MatchDecorator({
+            regexp: /\[\^(\w+)\]/g,
+            decoration: (match) => {
+              const id = match[1];
+              return Decoration.replace({ id, widget: new BookmarkWidget(id) });
+            },
           });
-        },
-      });
 
-      bookmarks: DecorationSet;
-      constructor(view: EditorView) {
-        this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
-      }
+          bookmarks: DecorationSet;
+          constructor(view: EditorView) {
+            this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.createDeco(view);
+          }
 
-      update(update: ViewUpdate) {
-        this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update, this.bookmarks);
-      }
-    },
-    {
-      decorations: (instance) => instance.bookmarks,
-      provide: (plugin) =>
-        EditorView.atomicRanges.of((view) => {
-          return view.plugin(plugin)?.bookmarks || Decoration.none;
-        }),
-    },
-  );
+          update(update: ViewUpdate) {
+            this.bookmarks = BookmarkViewPlugin.bookmarkMatcher.updateDeco(update, this.bookmarks);
+          }
+        },
+        {
+          decorations: (instance) => instance.bookmarks,
+          provide: (plugin) =>
+            EditorView.atomicRanges.of((view) => {
+              return view.plugin(plugin)?.bookmarks || Decoration.none;
+            }),
+        },
+      )
+    : [];
 
   return [
     bookmarksViewPlugin,
@@ -302,7 +299,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     options.onCreate
       ? keymap.of([
           {
-            key: options?.key ?? "meta-'",
+            key: shortcut,
             run: callbackWrapper(createCommentThread),
           },
         ])
@@ -324,7 +321,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
                 create: () => {
                   // TODO(burdon): Dispatch to react callback to render (or use SSR)?
                   const el = document.createElement('div');
-                  options.onHover?.(el);
+                  options.onHover?.(el, shortcut);
                   return { dom: el, offset: { x: 0, y: 8 } };
                 },
               };
@@ -392,6 +389,8 @@ export const comments = (options: CommentsOptions = {}): Extension => {
           }
         });
 
+        // TODO(burdon): Fire debounced callback if range selected (to show hint).
+
         if (selected.active !== active || selected.closest !== closest) {
           view.dispatch({ effects: setSelection.of(selected) });
 

package/src/extensions/hr.ts

@@ -28,11 +28,11 @@ class HorizontalRuleWidget extends WidgetType {
     super();
   }
 
-  override eq(other: WidgetType) {
+  override eq(other: this) {
     return this._pos === (other as any as HorizontalRuleWidget)._pos;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     // TODO(burdon): Create <hr> element? Does this clash with markdown parser?
     const el = document.createElement('div');
     el.className = 'cm-hr';

package/src/extensions/image.ts

@@ -72,11 +72,11 @@ class ImageWidget extends WidgetType {
     super();
   }
 
-  override eq(other: WidgetType) {
+  override eq(other: this) {
     return this._url === (other as any as ImageWidget)._url;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const img = document.createElement('img');
     img.setAttribute('src', this._url);
     img.setAttribute('class', 'cm-image');

package/src/extensions/link.ts

@@ -93,11 +93,11 @@ class LinkButton extends WidgetType {
     super();
   }
 
-  override eq(other: LinkButton) {
+  override eq(other: this) {
     return this._url === other._url;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const el = document.createElement('span');
     this._onAttach!(el, this._url);
     return el;
@@ -109,11 +109,11 @@ class LinkText extends WidgetType {
     super();
   }
 
-  override eq(other: LinkText) {
+  override eq(other: this) {
     return this._url === other._url;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const link = document.createElement('a');
     link.setAttribute('class', 'cm-link');
     link.textContent = this._text;

package/src/extensions/table.ts

@@ -81,7 +81,6 @@ const update = (state: EditorState, options: TableOptions) => {
         table.from,
         table.to,
         Decoration.replace({
-          block: true,
           widget: new TableWidget(table),
         }),
       );
@@ -98,14 +97,14 @@ class TableWidget extends WidgetType {
     super();
   }
 
-  override eq(other: TableWidget) {
+  override eq(other: this) {
     return (
       this._table.header?.join() === other._table.header?.join() &&
       this._table.rows?.join() === other._table.rows?.join()
     );
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const table = document.createElement('table');
 
     {
@@ -132,4 +131,8 @@ class TableWidget extends WidgetType {
 
     return table;
   }
+
+  override ignoreEvent(e: Event) {
+    return !/^mouse/.test(e.type);
+  }
 }

package/src/extensions/tasklist.ts

@@ -29,11 +29,11 @@ class CheckboxWidget extends WidgetType {
     super();
   }
 
-  override eq(other: CheckboxWidget) {
+  override eq(other: this) {
     return this._checked === other._checked && this._indent === other._indent;
   }
 
-  toDOM(view: EditorView) {
+  override toDOM(view: EditorView) {
     const wrap = document.createElement('span');
     wrap.className = 'cm-task-item';
     wrap.setAttribute('aria-hidden', 'true');

package/src/hooks/useTextModel.ts

@@ -66,7 +66,7 @@ export type UseTextModelProps = {
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export const useTextModel = (props: UseTextModelProps): EditorModel | undefined => {
   const { identity, space, text } = props;
-  const [model, setModel] = useState<EditorModel | undefined>(() => createModel(props));
+  const [model, setModel] = useState<EditorModel | undefined>();
   useEffect(() => setModel(createModel(props)), [identity, space, text]);
   return model;
 };

package/src/index.ts

@@ -5,9 +5,11 @@
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
 export { type Extension } from '@codemirror/state';
+export { type EditorView } from '@codemirror/view';
 
 export * from './components';
 export * from './extensions';
 export * from './hooks';
 export { getToken } from './styles';
 export * from './themes';
+export * from './util';