@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/extensions/automerge/defs.ts

@@ -4,9 +4,10 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { type Heads, type Prop } from '@automerge/automerge';
 import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
 
+import { type Heads, type Prop } from '@dxos/automerge/automerge';
+
 export type State = {
   path: Prop[];
   lastHeads: Heads;

package/src/extensions/automerge/sync.ts

@@ -4,10 +4,10 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
+import { next as A } from '@dxos/automerge/automerge';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { getLastHeads, getPath, isReconcile, reconcileAnnotation, type State, updateHeads } from './defs';
@@ -57,15 +57,15 @@ export class Syncer {
   onAutomergeChange(view: EditorView) {
     // Get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const oldHeads = getLastHeads(view.state, this._state);
-    const newHeads = A.getHeads(this._handle.doc()!);
-    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.doc()!, oldHeads, newHeads);
+    const newHeads = A.getHeads(this._handle.docSync()!);
+    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.docSync()!, oldHeads, newHeads);
 
     const selection = view.state.selection;
     const path = getPath(view.state, this._state);
     updateCodeMirror(view, selection, path, diff);
 
     // TODO(burdon): Test conflicts?
-    // A.getConflicts(this._handle.doc()!, path[0]);
+    // A.getConflicts(this._handle.docSync()!, path[0]);
 
     view.dispatch({
       effects: updateHeads(newHeads),

package/src/extensions/automerge/update-automerge.ts

@@ -4,9 +4,9 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { next as A, type Heads } from '@automerge/automerge';
 import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
 
+import { next as A, type Heads } from '@dxos/automerge/automerge';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { type State } from './defs';

package/src/extensions/automerge/update-codemirror.ts

@@ -4,6 +4,9 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
+
 import {
   type DelPatch,
   type InsertPatch,
@@ -11,9 +14,7 @@ import {
   type Prop,
   type PutPatch,
   type SpliceTextPatch,
-} from '@automerge/automerge';
-import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
+} from '@dxos/automerge/automerge';
 
 import { reconcileAnnotation } from './defs';
 

package/src/extensions/command/command.ts

@@ -5,25 +5,35 @@
 import { type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
-import { closeEffect, commandKeyBindings } from './action';
-import { hintViewPlugin, type HintOptions } from './hint';
-import { floatingMenu, type FloatingMenuOptions } from './menu';
-import { commandConfig, commandState, type PopupOptions } from './state';
+import { hintViewPlugin } from './hint';
+import { floatingMenu } from './menu';
+import { preview, type PreviewOptions } from './preview';
+import { closeEffect, commandConfig, commandKeyBindings, commandState } from './state';
 
 // TODO(burdon): Create knowledge base for CM notes and ideas.
 // https://discuss.codemirror.net/t/inline-code-hints-like-vscode/5533/4
 // https://github.com/saminzadeh/codemirror-extension-inline-suggestion
 // https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/ui/components/text_editor/config.ts#L370
 
-export type CommandOptions = Partial<PopupOptions & FloatingMenuOptions & HintOptions>;
+// TODO(burdon): Discriminated union.
+export type CommandAction = {
+  insert?: string;
+};
+
+export type CommandOptions = {
+  onHint: () => string | undefined;
+  onRenderDialog: (el: HTMLElement, cb: (action?: CommandAction) => void) => void;
+  onRenderMenu: (el: HTMLElement, cb: () => void) => void;
+} & Pick<PreviewOptions, 'onRenderPreview'>;
 
-export const command = (options: CommandOptions = {}): Extension => {
+export const command = (options: CommandOptions): Extension => {
   return [
-    keymap.of(commandKeyBindings),
     commandConfig.of(options),
     commandState,
-    options.renderMenu ? floatingMenu({ renderMenu: options.renderMenu }) : [],
-    options.onHint ? hintViewPlugin({ onHint: options.onHint }) : [],
+    keymap.of(commandKeyBindings),
+    preview(options),
+    floatingMenu(options),
+    hintViewPlugin(options),
     EditorView.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;
     }),
@@ -31,6 +41,14 @@ export const command = (options: CommandOptions = {}): Extension => {
       '.cm-tooltip': {
         background: 'transparent',
       },
+      '.cm-preview': {
+        marginLeft: '-1rem',
+        marginRight: '-1rem',
+        padding: '1rem',
+        borderRadius: '1rem',
+        background: 'var(--dx-modalSurface)',
+        border: '1px solid var(--dx-separator)',
+      },
     }),
   ];
 };

package/src/extensions/command/hint.ts

@@ -5,42 +5,10 @@
 import { RangeSetBuilder } from '@codemirror/state';
 import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
 
+import { type CommandOptions } from './command';
 import { commandState } from './state';
 import { clientRectsFor, flattenRect } from '../../util';
 
-export type HintOptions = {
-  onHint: () => string | undefined;
-};
-
-export const hintViewPlugin = ({ onHint }: HintOptions) =>
-  ViewPlugin.fromClass(
-    class {
-      deco = Decoration.none;
-      update(update: ViewUpdate) {
-        const builder = new RangeSetBuilder<Decoration>();
-        const cState = update.view.state.field(commandState, false);
-        if (!cState?.tooltip) {
-          const selection = update.view.state.selection.main;
-          const line = update.view.state.doc.lineAt(selection.from);
-          // Only show if blank line.
-          // TODO(burdon): Clashes with placeholder if pos === 0.
-          // TODO(burdon): Show after delay or if blank line above?
-          if (selection.from === selection.to && line.from === line.to) {
-            const hint = onHint();
-            if (hint) {
-              builder.add(selection.from, selection.to, Decoration.widget({ widget: new CommandHint(hint) }));
-            }
-          }
-        }
-
-        this.deco = builder.finish();
-      }
-    },
-    {
-      provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)],
-    },
-  );
-
 class CommandHint extends WidgetType {
   constructor(readonly content: string | HTMLElement) {
     super();
@@ -80,3 +48,32 @@ class CommandHint extends WidgetType {
     return false;
   }
 }
+
+export const hintViewPlugin = ({ onHint }: CommandOptions) =>
+  ViewPlugin.fromClass(
+    class {
+      deco = Decoration.none;
+      update(update: ViewUpdate) {
+        const builder = new RangeSetBuilder<Decoration>();
+        const cState = update.view.state.field(commandState, false);
+        if (!cState?.tooltip) {
+          const selection = update.view.state.selection.main;
+          const line = update.view.state.doc.lineAt(selection.from);
+          // Only show if blank line.
+          // TODO(burdon): Clashes with placeholder if pos === 0.
+          // TODO(burdon): Show after delay or if blank line above?
+          if (selection.from === selection.to && line.from === line.to) {
+            const hint = onHint();
+            if (hint) {
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new CommandHint(hint) }));
+            }
+          }
+        }
+
+        this.deco = builder.finish();
+      }
+    },
+    {
+      provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)],
+    },
+  );

package/src/extensions/command/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './action';
 export * from './command';

package/src/extensions/command/menu.ts

@@ -4,16 +4,12 @@
 
 import { type BlockInfo, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
-import { closeEffect, openCommand, openEffect } from './action';
-import { type RenderCallback } from '../../types';
-
-export type FloatingMenuOptions = {
-  renderMenu: RenderCallback<{ onAction: () => void }>;
-};
+import { type CommandOptions } from './command';
+import { closeEffect, openCommand, openEffect } from './state';
 
 // TODO(burdon): Trigger completion on click.
 // TODO(burdon): Hide when dialog is open.
-export const floatingMenu = (options: FloatingMenuOptions) =>
+export const floatingMenu = (options: CommandOptions) =>
   ViewPlugin.fromClass(
     class {
       button: HTMLElement;
@@ -35,11 +31,13 @@ export const floatingMenu = (options: FloatingMenuOptions) =>
         this.button.style.zIndex = '10';
         this.button.style.display = 'none';
 
-        options.renderMenu(this.button, { onAction: () => openCommand(view) }, view);
+        options.onRenderMenu(this.button, () => {
+          openCommand(view);
+        });
         container.appendChild(this.button);
 
         // Listen for scroll events.
-        container.addEventListener('scroll', this.scheduleUpdate.bind(this));
+        container.addEventListener('scroll', this.scheduleUpdate);
         this.scheduleUpdate();
       }
 
@@ -58,8 +56,7 @@ export const floatingMenu = (options: FloatingMenuOptions) =>
         if (this.rafId != null) {
           cancelAnimationFrame(this.rafId);
         }
-
-        this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
+        this.rafId = requestAnimationFrame(() => this.updateButtonPosition());
       }
 
       updateButtonPosition() {

package/src/extensions/command/preview.ts

@@ -0,0 +1,79 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import {
+  type EditorState,
+  type Extension,
+  type RangeSet,
+  RangeSetBuilder,
+  StateField,
+  type Transaction,
+} from '@codemirror/state';
+import { Decoration, type DecorationSet, EditorView, WidgetType } from '@codemirror/view';
+
+export type PreviewOptions = {
+  onRenderPreview: (el: HTMLElement, props: { url: string; text: string }) => void;
+};
+
+/**
+ * Create image decorations.
+ */
+export const preview = (options: PreviewOptions): Extension => {
+  return [
+    StateField.define<DecorationSet>({
+      create: (state) => buildDecorations(state, options),
+      update: (_: RangeSet<Decoration>, tr: Transaction) => buildDecorations(tr.state, options),
+      // TODO(burdon): Make atomic.
+      provide: (field) => EditorView.decorations.from(field),
+    }),
+  ];
+};
+
+// TODO(burdon): Make atomic.
+const buildDecorations = (state: EditorState, options: PreviewOptions) => {
+  const builder = new RangeSetBuilder<Decoration>();
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (node.name === 'Link') {
+        const urlNode = node.node.getChild('URL');
+        if (urlNode) {
+          const text = state.sliceDoc(node.from + 1, urlNode.from - 2);
+          const url = state.sliceDoc(urlNode.from, urlNode.to);
+          builder.add(
+            node.from,
+            node.to,
+            Decoration.replace({
+              block: true, // Prevent cursor from entering.
+              widget: new PreviewWidget(options.onRenderPreview, url, text),
+            }),
+          );
+        }
+      }
+    },
+  });
+
+  return builder.finish();
+};
+
+class PreviewWidget extends WidgetType {
+  constructor(
+    readonly _onRenderPreview: PreviewOptions['onRenderPreview'],
+    readonly _url: string,
+    readonly _text: string,
+  ) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this._url === (other as any as PreviewWidget)._url;
+  }
+
+  override toDOM(view: EditorView) {
+    const root = document.createElement('div');
+    root.classList.add('cm-preview');
+    this._onRenderPreview(root, { url: this._url, text: this._text });
+    return root;
+  }
+}

package/src/extensions/command/state.ts

@@ -2,24 +2,25 @@
 // Copyright 2024 DXOS.org
 //
 
-import { StateField } from '@codemirror/state';
-import { showTooltip, type EditorView, type Tooltip, type TooltipView } from '@codemirror/view';
+import { StateEffect, StateField } from '@codemirror/state';
+import {
+  showTooltip,
+  type Command,
+  type EditorView,
+  type KeyBinding,
+  type Tooltip,
+  type TooltipView,
+} from '@codemirror/view';
 
-import { closeEffect, type Action, openEffect } from './action';
 import { type CommandOptions } from './command';
-import { type RenderCallback } from '../../types';
 import { singleValueFacet } from '../../util';
 
-export const commandConfig = singleValueFacet<CommandOptions>();
-
-export type PopupOptions = {
-  renderDialog: RenderCallback<{ onAction: (action?: Action) => void }>;
-};
-
 type CommandState = {
   tooltip?: Tooltip | null;
 };
 
+export const commandConfig = singleValueFacet<CommandOptions>();
+
 export const commandState = StateField.define<CommandState>({
   create: () => ({}),
   update: (state, tr) => {
@@ -28,8 +29,8 @@ export const commandState = StateField.define<CommandState>({
         return {};
       }
 
-      const { renderDialog } = tr.state.facet(commandConfig);
-      if (effect.is(openEffect) && renderDialog) {
+      if (effect.is(openEffect)) {
+        const options = tr.state.facet(commandConfig);
         const { pos, fullWidth } = effect.value;
         const tooltip: Tooltip = {
           pos,
@@ -37,49 +38,38 @@ export const commandState = StateField.define<CommandState>({
           arrow: false,
           strictSide: true,
           create: (view: EditorView) => {
-            const root = document.createElement('div');
-
+            const dom = document.createElement('div');
             const tooltipView: TooltipView = {
-              dom: root,
+              dom,
               mount: (view: EditorView) => {
                 if (fullWidth) {
-                  const parent = root.parentElement!;
+                  const parent = dom.parentElement!;
                   const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
                   const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
-                  root.style.width = `${widthWithoutPadding}px`;
+                  dom.style.width = `${widthWithoutPadding}px`;
                 }
 
                 // Render react component.
-                renderDialog(
-                  root,
-                  {
-                    onAction: (action) => {
-                      view.dispatch({ effects: closeEffect.of(null) });
-                      switch (action?.type) {
-                        case 'insert': {
-                          // Insert into editor.
-                          const text = action.text + '\n';
-                          view.dispatch({
-                            changes: { from: pos, insert: text },
-                            selection: { anchor: pos + text.length },
-                          });
-                          break;
-                        }
-                      }
-
-                      // NOTE: Truncates text if set focus immediately.
-                      requestAnimationFrame(() => view.focus());
-                    },
-                  },
-                  view,
-                );
+                options.onRenderDialog(dom, (action) => {
+                  view.dispatch({ effects: closeEffect.of(null) });
+                  if (action?.insert?.length) {
+                    // Insert into editor.
+                    const text = action.insert + '\n';
+                    view.dispatch({
+                      changes: { from: pos, insert: text },
+                      selection: { anchor: pos + text.length },
+                    });
+                  }
+
+                  // NOTE: Truncates text if set focus immediately.
+                  requestAnimationFrame(() => view.focus());
+                });
               },
             };
 
             return tooltipView;
           },
         };
-
         return { tooltip };
       }
     }
@@ -88,3 +78,33 @@ export const commandState = StateField.define<CommandState>({
   },
   provide: (field) => [showTooltip.from(field, (value) => value.tooltip ?? null)],
 });
+
+export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();
+export const closeEffect = StateEffect.define<null>();
+
+export const openCommand: Command = (view: EditorView) => {
+  if (view.state.field(commandState, false)) {
+    const selection = view.state.selection.main;
+    const line = view.state.doc.lineAt(selection.from);
+    if (line.from === selection.from && line.from === line.to) {
+      view.dispatch({ effects: openEffect.of({ pos: selection.anchor, fullWidth: true }) });
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export const closeCommand: Command = (view: EditorView) => {
+  if (view.state.field(commandState, false)) {
+    view.dispatch({ effects: closeEffect.of(null) });
+    return true;
+  }
+
+  return false;
+};
+
+export const commandKeyBindings: readonly KeyBinding[] = [
+  { key: '/', run: openCommand },
+  { key: 'Escape', run: closeCommand },
+];

package/src/extensions/comments.ts

@@ -25,13 +25,13 @@ import sortBy from 'lodash.sortby';
 import { useEffect, useMemo } from 'react';
 
 import { debounce, type CleanupFn } from '@dxos/async';
-import { type Live } from '@dxos/live-object';
+import { type ReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { isNonNullable } from '@dxos/util';
 
 import { documentId } from './selection';
 import { type EditorToolbarState } from '../components';
-import { type RenderCallback, type Comment, type Range } from '../types';
+import { type Comment, type Range } from '../types';
 import { Cursor, overlap, singleValueFacet, callbackWrapper } from '../util';
 
 //
@@ -345,10 +345,6 @@ export type CommentsOptions = {
    * Key shortcut to create a new thread.
    */
   key?: string;
-  /**
-   * Called to render tooltip.
-   */
-  renderTooltip?: RenderCallback<{ shortcut: string }>;
   /**
    * Called to create a new thread and return the thread id.
    */
@@ -365,6 +361,10 @@ export type CommentsOptions = {
    * Called to notify which thread is currently closest to the cursor.
    */
   onSelect?: (state: CommentsState) => void;
+  /**
+   * Called to render tooltip.
+   */
+  onHover?: (el: Element, shortcut: string) => void;
 };
 
 const optionsFacet = singleValueFacet<CommentsOptions>();
@@ -408,7 +408,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
     // Hover tooltip (for key shortcut hints, etc.)
     // TODO(burdon): Factor out to generic hints extension for current selection/line.
     //
-    options.renderTooltip &&
+    options.onHover &&
       hoverTooltip(
         (view, pos) => {
           const selection = view.state.selection.main;
@@ -419,7 +419,7 @@ export const comments = (options: CommentsOptions = {}): Extension => {
               above: true,
               create: () => {
                 const el = document.createElement('div');
-                options.renderTooltip!(el, { shortcut }, view);
+                options.onHover!(el, shortcut);
                 return { dom: el, offset: { x: 0, y: 8 } };
               },
             };
@@ -606,7 +606,7 @@ export const createExternalCommentSync = (
     },
   );
 
-export const useCommentState = (state: Live<EditorToolbarState>): Extension => {
+export const useCommentState = (state: ReactiveObject<EditorToolbarState>): Extension => {
   return useMemo(
     () =>
       EditorView.updateListener.of((update) => {

package/src/extensions/folding.tsx

@@ -29,7 +29,7 @@ export const folding = (_props: FoldingOptions = {}): Extension => [
       const el = createElement('div', { className: 'flex h-full items-center' });
       return renderRoot(
         el,
-        <Icon icon='ph--caret-right--bold' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
+        <Icon icon='ph--caret-right--regular' size={3} classNames={['mx-3 cursor-pointer', open && 'rotate-90']} />,
       );
     },
   }),

package/src/extensions/index.ts

@@ -18,6 +18,5 @@ export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
-export * from './preview';
 export * from './selection';
 export * from './typewriter';

package/src/extensions/markdown/changes.ts

@@ -56,9 +56,8 @@ export const adjustChanges = () => {
                 // Check for URL.
                 const url = getValidUrl(update.view.state.sliceDoc(fromB, toB));
                 if (url) {
-                  // Check if pasting inside existing link.
                   const node = tree.resolveInner(fromA, -1);
-                  const invalidPositions = new Set(['Code', 'CodeText', 'FencedCode', 'Link', 'LinkMark', 'URL']);
+                  const invalidPositions = new Set(['Link', 'LinkMark', 'Code', 'CodeText', 'FencedCode', 'URL']);
                   if (!invalidPositions.has(node?.name)) {
                     const replacedText = tr.startState.sliceDoc(fromA, toA);
                     adjustments.push({ from: fromA, to: toB, insert: createLink(url, replacedText) });
@@ -85,7 +84,7 @@ export const adjustChanges = () => {
           }
         }
 
-        // TODO(burdon): Is this the right way to augment changes? Alt: EditorState.transactionFilter
+        // TODO(burdon): Is this the right way to augment changes?
         if (adjustments.length) {
           setTimeout(() => {
             update.view.dispatch(