@dxos/react-ui-editor 0.3.11-main.a996413 → 0.3.11-main.b225571

package/src/extensions/comments.ts

@@ -3,20 +3,7 @@
 //
 
 import { type Extension, StateEffect, StateField } from '@codemirror/state';
-import {
-  hoverTooltip,
-  keymap,
-  type Command,
-  type DecorationSet,
-  type ViewUpdate,
-  Decoration,
-  EditorView,
-  MatchDecorator,
-  ViewPlugin,
-  WidgetType,
-  type Rect,
-} from '@codemirror/view';
-import get from 'lodash.get';
+import { hoverTooltip, keymap, type Command, Decoration, EditorView, type Rect } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
 
 import { debounce } from '@dxos/async';
@@ -24,29 +11,21 @@ import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
-import { callbackWrapper } from './util';
-import { type CommentRange, type EditorModel, modelState, type Range } from '../hooks';
-import { tokens } from '../styles';
+import { Cursor } from './cursor';
+import { type CommentRange, type EditorModel, type Range } from '../hooks';
+import { getToken } from '../styles';
+import { callbackWrapper } from '../util';
 
 // TODO(burdon): Handle delete, cut, copy, and paste (separately) text that includes comment range.
 // TODO(burdon): Consider breaking into separate plugin (since not standalone)? Like mermaid?
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
-  '& .cm-bookmark': {
-    cursor: 'pointer',
-    margin: '4px',
-    padding: '4px',
-    backgroundColor: 'yellow',
-  },
-  '& .cm-bookmark-selected': {
-    backgroundColor: 'orange',
-  },
   '& .cm-comment': {
-    backgroundColor: get(tokens, 'extend.colors.yellow.50'),
+    backgroundColor: getToken('extend.colors.yellow.50'),
   },
   '& .cm-comment-active': {
-    backgroundColor: get(tokens, 'extend.colors.yellow.100'),
+    backgroundColor: getToken('extend.colors.yellow.100'),
   },
 });
 
@@ -99,6 +78,8 @@ const setCommentState = StateEffect.define<CommentsState>();
 const commentsStateField = StateField.define<CommentsState>({
   create: () => ({ ranges: [] }),
   update: (value, tr) => {
+    const cursorConverter = tr.state.facet(Cursor.converter);
+
     for (const effect of tr.effects) {
       // Update selection.
       if (effect.is(setSelection)) {
@@ -107,10 +88,10 @@ const commentsStateField = StateField.define<CommentsState>({
 
       // Update range from store.
       if (effect.is(setCommentRange)) {
-        const { model, comments } = effect.value;
+        const { comments } = effect.value;
         const ranges: ExtendedCommentRange[] = comments
           .map((comment) => {
-            const range = model.getRangeFromCursor!(comment.cursor);
+            const range = Cursor.getRangeFromCursor(cursorConverter, comment.cursor);
             return range && { ...comment, ...range };
           })
           .filter(nonNullable);
@@ -153,42 +134,13 @@ const highlightDecorations = EditorView.decorations.compute([commentsStateField]
   return Decoration.set(decorations);
 });
 
-/**
- * Optional bookmark widget at the start/end of the selection.
- * May correspond to a markdown bookmark.
- */
-class BookmarkWidget extends WidgetType {
-  constructor(
-    private readonly _anchor: number,
-    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 toDOM() {
-    const span = document.createElement('span');
-    span.className = 'cm-bookmark';
-    span.textContent = '※';
-    if (this._handleClick) {
-      span.onclick = () => this._handleClick!();
-    }
-    return span;
-  }
-}
-
 export type CommentsOptions = {
   key?: string;
   footnote?: boolean;
   /**
    * Called to create a new thread and return the thread id.
    */
-  onCreate?: (range: string) => string | undefined;
+  onCreate?: (cursor: string, location?: Rect | null) => string | undefined;
   /**
    * Called to notify which thread is currently closest to the cursor.
    */
@@ -196,7 +148,7 @@ export type CommentsOptions = {
   /**
    * Called to render tooltip.
    */
-  onHover?: (el: Element) => void;
+  onHover?: (el: Element, shortcut: string) => void;
 };
 
 /**
@@ -212,23 +164,26 @@ 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);
 
   /**
    * Create comment thread action.
    */
   const createCommentThread: Command = (view) => {
+    const cursorConverter = view.state.facet(Cursor.converter);
+
     invariant(options.onCreate);
     const { head, from, to } = view.state.selection.main;
     if (from === to) {
       return false;
     }
 
-    const model = view.state.field(modelState);
-    const relPos = model?.getCursorFromRange?.({ from, to });
-    if (relPos) {
+    const cursor = Cursor.getCursorFromRange(cursorConverter, { from, to });
+    if (cursor) {
       // Create thread via callback.
-      const id = callbackWrapper(options.onCreate)(relPos);
+      const id = callbackWrapper(options.onCreate)(cursor, view.coordsAtPos(from));
       if (id) {
         // Update range.
         view.dispatch({
@@ -252,44 +207,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     return false;
   };
 
-  /**
-   * 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),
-          });
-        },
-      });
-
-      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;
-        }),
-    },
-  );
-
   return [
-    bookmarksViewPlugin,
     commentsStateField,
     highlightDecorations,
     styles,
@@ -300,7 +218,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     options.onCreate
       ? keymap.of([
           {
-            key: options?.key ?? "meta-'",
+            key: shortcut,
             run: callbackWrapper(createCommentThread),
           },
         ])
@@ -322,7 +240,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 } };
                 },
               };
@@ -338,19 +256,19 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     // Monitor cursor movement and text updates.
     // TODO(burdon): Is there a better (finer grained) way to do this?
     //
-    EditorView.updateListener.of(({ view, state, startState, changes }) => {
+    EditorView.updateListener.of(({ view, state, changes }) => {
+      const cursorConverter = view.state.facet(Cursor.converter);
+
       //
       // Test if need to recompute indexed range if document changes before the end of the range.
       //
       {
         let mod = false;
-        const model = state.field(modelState);
         const { active, ranges } = state.field(commentsStateField);
         changes.iterChanges((from, to, from2, to2) => {
-          invariant(model);
           ranges.forEach((range) => {
             if (from2 === to2) {
-              const newRange = model.getRangeFromCursor!(range.cursor);
+              const newRange = Cursor.getRangeFromCursor(cursorConverter, range.cursor);
               if (!newRange || newRange.to - newRange.from === 0) {
                 // TODO(burdon): Delete range if empty.
                 log.info('deleted comment', { thread: range.id });
@@ -358,7 +276,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
             }
 
             if (from <= range.to) {
-              const newRange = model.getRangeFromCursor!(range.cursor);
+              const newRange = Cursor.getRangeFromCursor(cursorConverter, range.cursor);
               Object.assign(range, newRange);
               mod = true;
             }
@@ -390,6 +308,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/cursor.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Facet } from '@codemirror/state';
+
+import type { Range } from '../hooks';
+
+/**
+ * Converts indexes into the text document into stable peer-independent cursors.
+ *
+ * See:
+ *  - https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
+ *  - https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
+ *
+ * @param {assoc} number Negative values will associate the cursor with the previous character
+ *                       while positive - with the next one.
+ */
+export interface CursorConverter {
+  toCursor(position: number, assoc?: -1 | 1 | undefined): string;
+  fromCursor(cursor: string): number;
+}
+
+const defaultCursorConverter: CursorConverter = {
+  toCursor: (position) => position.toString(),
+  fromCursor: (cursor) => parseInt(cursor),
+};
+
+export class Cursor {
+  static readonly converter = Facet.define<CursorConverter, CursorConverter>({
+    combine: (providers) => providers[0] ?? defaultCursorConverter,
+  });
+
+  static readonly getCursorFromRange = (cursorConverter: CursorConverter, range: Range) => {
+    const from = cursorConverter.toCursor(range.from);
+    const to = cursorConverter.toCursor(range.to, -1);
+    return [from, to].join(':');
+  };
+
+  static readonly getRangeFromCursor = (cursorConverter: CursorConverter, cursor: string) => {
+    const parts = cursor.split(':');
+    const from = cursorConverter.fromCursor(parts[0]);
+    const to = cursorConverter.fromCursor(parts[1]);
+    return from !== undefined && to !== undefined ? { from, to } : undefined;
+  };
+}

package/src/extensions/hr.ts

@@ -11,16 +11,15 @@ import {
   type ViewUpdate,
   WidgetType,
 } from '@codemirror/view';
-import get from 'lodash.get';
 
-import { tokens } from '../styles';
+import { getToken } from '../styles';
 
 // TODO(burdon): Reconcile with theme.
 const styles = EditorView.baseTheme({
   '& .cm-hr': {
     // TODO(burdon): ???
     // Note that block-level decorations should not have vertical margins,
-    borderBottom: `1px solid ${get(tokens, 'extend.colors.neutral.200')}`,
+    borderBottom: `1px solid ${getToken('extend.colors.neutral.200')}`,
   },
 });
 
@@ -29,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

@@ -3,28 +3,45 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
-import { Decoration, EditorView, WidgetType } from '@codemirror/view';
+import { type EditorState, type Extension, StateField, type Transaction, type Range } from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
 
 export type ImageOptions = {};
 
 export const image = (options: ImageOptions = {}): Extension => {
-  return StateField.define<RangeSet<any>>({
-    create: (state) => update(state, options),
-    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, options),
+  return StateField.define<DecorationSet>({
+    create: (state) => {
+      return Decoration.set(buildDecorations(0, state.doc.length, state));
+    },
+    update: (value: DecorationSet, tr: Transaction) => {
+      if (!tr.docChanged && !tr.selection) {
+        return value;
+      }
+      // Find range of changes and cursor changes.
+      const cursor = tr.state.selection.main.head;
+      const oldCursor = tr.changes.mapPos(tr.startState.selection.main.head);
+      let from = Math.min(cursor, oldCursor);
+      let to = Math.max(cursor, oldCursor);
+      tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+        from = Math.min(from, fromB);
+        to = Math.max(to, toB);
+      });
+      // Expand to cover lines
+      from = tr.state.doc.lineAt(from).from;
+      to = tr.state.doc.lineAt(to).to;
+      return value.map(tr.changes).update({
+        filterFrom: from,
+        filterTo: to,
+        filter: () => false,
+        add: buildDecorations(from, to, tr.state),
+      });
+    },
     provide: (field) => EditorView.decorations.from(field),
   });
 };
 
-const update = (state: EditorState, options: ImageOptions) => {
-  const builder = new RangeSetBuilder();
+const buildDecorations = (from: number, to: number, state: EditorState) => {
+  const decorations: Range<Decoration>[] = [];
   const cursor = state.selection.main.head;
 
   syntaxTree(state).iterate({
@@ -34,20 +51,20 @@ const update = (state: EditorState, options: ImageOptions) => {
         if (urlNode) {
           const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
-          builder.add(
-            hide ? node.from : node.to,
-            node.to,
+          decorations.push(
             Decoration.replace({
               block: true, // Prevent cursor from entering.
               widget: new ImageWidget(url),
-            }),
+            }).range(hide ? node.from : node.to, node.to),
           );
         }
       }
     },
+    from,
+    to,
   });
 
-  return builder.finish();
+  return decorations;
 };
 
 class ImageWidget extends WidgetType {
@@ -55,15 +72,16 @@ class ImageWidget extends WidgetType {
     super();
   }
 
-  // TODO(burdon): Does this need to be unique for each position?
-  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');
+    // Images are hidden until successfully loaded to avoid flickering effects.
+    img.onload = () => img.classList.add('cm-loaded-image');
     return img;
   }
 }

package/src/extensions/index.ts

@@ -3,17 +3,20 @@
 //
 
 export * from './autocomplete';
+export * from './automerge';
+export * from './awareness';
 export * from './basic';
 export * from './blast';
 export * from './code';
 export * from './comments';
+export * from './cursor';
 export * from './hr';
 export * from './image';
 export * from './link';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
-export * from './mermaid';
 export * from './table';
 export * from './tasklist';
 export * from './typewriter';
+export * from './yjs';