@dxos/react-ui-editor 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/src/extensions/awareness/awareness.ts

@@ -95,17 +95,17 @@ export class RemoteSelectionsDecorator implements PluginValue {
     });
   }
 
-  destroy() {
+  destroy(): void {
     void this._ctx.dispose();
     this._provider.close();
   }
 
-  update(update: ViewUpdate) {
+  update(update: ViewUpdate): void {
     this._updateLocalSelection(update.view);
     this._updateRemoteSelections(update.view);
   }
 
-  private _updateLocalSelection(view: EditorView) {
+  private _updateLocalSelection(view: EditorView): void {
     const hasFocus = view.hasFocus && view.dom.ownerDocument.hasFocus();
     const { anchor = undefined, head = undefined } = hasFocus ? view.state.selection.main : {};
     if (this._lastAnchor === anchor && this._lastHead === head) {
@@ -125,7 +125,7 @@ export class RemoteSelectionsDecorator implements PluginValue {
     );
   }
 
-  private _updateRemoteSelections(view: EditorView) {
+  private _updateRemoteSelections(view: EditorView): void {
     const decorations: Range<Decoration>[] = [
       // TODO(burdon): Factor out for testing.
       // {
@@ -239,11 +239,11 @@ class RemoteCaretWidget extends WidgetType {
     return span;
   }
 
-  override updateDOM() {
+  override updateDOM(): boolean {
     return false;
   }
 
-  override eq(widget: this) {
+  override eq(widget: this): boolean {
     return widget._color === this._color;
   }
 
@@ -251,7 +251,7 @@ class RemoteCaretWidget extends WidgetType {
     return -1;
   }
 
-  override ignoreEvent() {
+  override ignoreEvent(): boolean {
     return true;
   }
 }

package/src/extensions/blast.ts

@@ -136,7 +136,7 @@ class Blaster {
     return this._node;
   }
 
-  initialize() {
+  initialize(): void {
     // console.log('initialize');
     invariant(!this._canvas && !this._ctx);
 
@@ -155,7 +155,7 @@ class Blaster {
     this.resize();
   }
 
-  destroy() {
+  destroy(): void {
     this.stop();
     // console.log('destroy');
     if (this._canvas) {
@@ -165,7 +165,7 @@ class Blaster {
     }
   }
 
-  resize() {
+  resize(): void {
     if (this._node.parentElement && this._canvas) {
       const { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = this._node.parentElement;
       this._canvas.style.top = `${y}px`;
@@ -175,20 +175,20 @@ class Blaster {
     }
   }
 
-  start() {
+  start(): void {
     // console.log('start');
     invariant(this._canvas && this._ctx);
     this._running = true;
     this.loop();
   }
 
-  stop() {
+  stop(): void {
     // console.log('stop');
     this._running = false;
     this._node.style.transform = 'translate(0px, 0px)';
   }
 
-  loop() {
+  loop(): void {
     if (!this._running || !this._canvas || !this._ctx) {
       return;
     }
@@ -230,7 +230,7 @@ class Blaster {
     }
   }, 100);
 
-  drawParticles() {
+  drawParticles(): void {
     for (let i = this._particles.length; i--; i > 0) {
       const particle = this._particles[i];
       if (!particle) {
@@ -282,7 +282,7 @@ class Effect1 extends Effect {
     };
   }
 
-  update(ctx: CanvasRenderingContext2D, particle: Particle) {
+  update(ctx: CanvasRenderingContext2D, particle: Particle): void {
     particle.vy += this._options.particleGravity;
     particle.x += particle.vx;
     particle.y += particle.vy;
@@ -313,7 +313,7 @@ class Effect2 extends Effect {
     };
   }
 
-  update(ctx: CanvasRenderingContext2D, particle: Particle) {
+  update(ctx: CanvasRenderingContext2D, particle: Particle): void {
     particle.vy += this._options.particleGravity;
     particle.x += particle.vx;
     particle.y += particle.vy;

package/src/extensions/command/command.ts

@@ -7,7 +7,6 @@ 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';
 
 // TODO(burdon): Create knowledge base for CM notes and ideas.
@@ -15,14 +14,13 @@ import { commandConfig, commandState, type PopupOptions } from './state';
 // 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>;
+export type CommandOptions = Partial<PopupOptions & HintOptions>;
 
 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 }) : [],
     EditorView.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;

package/src/extensions/command/hint.ts

@@ -15,7 +15,7 @@ export type HintOptions = {
 export const hintViewPlugin = ({ onHint }: HintOptions) =>
   ViewPlugin.fromClass(
     class {
-      deco = Decoration.none;
+      decorations = Decoration.none;
       update(update: ViewUpdate) {
         const builder = new RangeSetBuilder<Decoration>();
         const cState = update.view.state.field(commandState, false);
@@ -28,25 +28,25 @@ export const hintViewPlugin = ({ onHint }: HintOptions) =>
           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) }));
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new Hint(hint) }));
             }
           }
         }
 
-        this.deco = builder.finish();
+        this.decorations = builder.finish();
       }
     },
     {
-      provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.deco ?? Decoration.none)],
+      provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)],
     },
   );
 
-class CommandHint extends WidgetType {
+export class Hint extends WidgetType {
   constructor(readonly content: string | HTMLElement) {
     super();
   }
 
-  toDOM() {
+  toDOM(): HTMLSpanElement {
     const wrap = document.createElement('span');
     wrap.className = 'cm-placeholder';
     wrap.style.pointerEvents = 'none';
@@ -76,7 +76,7 @@ class CommandHint extends WidgetType {
     return rect;
   }
 
-  override ignoreEvent() {
+  override ignoreEvent(): boolean {
     return false;
   }
 }

package/src/extensions/command/index.ts

@@ -4,3 +4,5 @@
 
 export * from './action';
 export * from './command';
+export * from './menu';
+export * from './typeahead';

package/src/extensions/command/menu.ts

@@ -2,41 +2,44 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type BlockInfo, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
-import { closeEffect, openCommand, openEffect } from './action';
-import { type RenderCallback } from '../../types';
+import { closeEffect, openEffect } from './action';
 
 export type FloatingMenuOptions = {
-  renderMenu: RenderCallback<{ onAction: () => void }>;
+  icon?: string;
+  height?: number;
+  padding?: number;
 };
 
-// TODO(burdon): Trigger completion on click.
-// TODO(burdon): Hide when dialog is open.
-export const floatingMenu = (options: FloatingMenuOptions) =>
+export const floatingMenu = (options: FloatingMenuOptions = {}) => [
   ViewPlugin.fromClass(
     class {
-      button: HTMLElement;
       view: EditorView;
+      tag: HTMLElement;
       rafId: number | null = null;
 
       constructor(view: EditorView) {
         this.view = view;
 
-        // Position context: scrollDOM
+        // Position context.
         const container = view.scrollDOM;
         if (getComputedStyle(container).position === 'static') {
           container.style.position = 'relative';
         }
 
-        // Render menu externally.
-        this.button = document.createElement('div');
-        this.button.style.position = 'absolute';
-        this.button.style.zIndex = '10';
-        this.button.style.display = 'none';
+        const icon = document.createElement('dx-icon');
+        icon.setAttribute('icon', options.icon ?? 'ph--dots-three-outline--regular');
 
-        options.renderMenu(this.button, { onAction: () => openCommand(view) }, view);
-        container.appendChild(this.button);
+        const button = document.createElement('button');
+        button.appendChild(icon);
+        button.classList.add('grid', 'items-center', 'justify-center', 'w-8', 'h-8');
+
+        // TODO(burdon): Custom tag/styles?
+        this.tag = document.createElement('dx-ref-tag');
+        this.tag.classList.add('border-none', 'fixed', 'p-0');
+        this.tag.appendChild(button);
+        container.appendChild(this.tag);
 
         // Listen for scroll events.
         container.addEventListener('scroll', this.scheduleUpdate.bind(this));
@@ -46,58 +49,49 @@ export const floatingMenu = (options: FloatingMenuOptions) =>
       update(update: ViewUpdate) {
         // TODO(burdon): Timer to fade in/out.
         if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
-          this.button.style.display = 'none';
+          this.tag.style.display = 'none';
         } else if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
-          this.button.style.display = 'block';
+          this.tag.style.display = 'block';
         } else if (update.selectionSet || update.viewportChanged || update.docChanged || update.geometryChanged) {
           this.scheduleUpdate();
         }
       }
 
-      scheduleUpdate() {
-        if (this.rafId != null) {
-          cancelAnimationFrame(this.rafId);
-        }
-
-        this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
-      }
-
       updateButtonPosition() {
-        const pos = this.view.state.selection.main.head;
-        const lineBlock: BlockInfo = this.view.lineBlockAt(pos);
-        const domInfo = this.view.domAtPos(lineBlock.from);
+        const { x, width } = this.view.contentDOM.getBoundingClientRect();
 
-        // Find nearest HTMLElement for the line block
-        let node: Node | null = domInfo.node;
-        while (node && !(node instanceof HTMLElement)) {
-          node = node.parentNode;
-        }
-
-        if (!node) {
-          this.button.style.display = 'none';
+        const pos = this.view.state.selection.main.head;
+        const line = this.view.lineBlockAt(pos);
+        const coords = this.view.coordsAtPos(line.from);
+        if (!coords) {
           return;
         }
 
-        const lineRect = (node as HTMLElement).getBoundingClientRect();
-        const containerRect = this.view.scrollDOM.getBoundingClientRect();
+        const lineHeight = coords.bottom - coords.top;
+        const dy = (lineHeight - (options.height ?? 32)) / 2;
 
-        // Account for scroll and padding/margin in scrollDOM.
-        const offsetTop = lineRect.top - containerRect.top + this.view.scrollDOM.scrollTop;
-        const offsetLeft = this.view.scrollDOM.clientWidth + this.view.scrollDOM.scrollLeft - lineRect.x;
+        const offsetTop = coords.top + dy;
+        const offsetLeft = x + width + (options.padding ?? 8);
+
+        this.tag.style.top = `${offsetTop}px`;
+        this.tag.style.left = `${offsetLeft}px`;
+        this.tag.style.display = 'block';
+      }
 
-        // TODO(burdon): Position is incorrect if cursor is in fenced code block.
-        // console.log('offsetTop', lineRect, containerRect);
+      scheduleUpdate() {
+        if (this.rafId != null) {
+          cancelAnimationFrame(this.rafId);
+        }
 
-        this.button.style.top = `${offsetTop}px`;
-        this.button.style.left = `${offsetLeft}px`;
-        this.button.style.display = 'block';
+        this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
       }
 
       destroy() {
-        this.button.remove();
+        this.tag.remove();
         if (this.rafId != null) {
           cancelAnimationFrame(this.rafId);
         }
       }
     },
-  );
+  ),
+];

package/src/extensions/command/typeahead.ts

@@ -0,0 +1,116 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { EditorSelection, Prec, RangeSetBuilder, type Extension } from '@codemirror/state';
+import {
+  type Command,
+  Decoration,
+  type DecorationSet,
+  type EditorView,
+  keymap,
+  ViewPlugin,
+  type ViewUpdate,
+} from '@codemirror/view';
+
+import { Hint } from './hint';
+
+export type TypeaheadContext = { line: string };
+
+// TODO(burdon): Option to complete only at end of line?
+export type TypeaheadOptions = {
+  onComplete?: (context: TypeaheadContext) => string | undefined;
+};
+
+/**
+ * CodeMirror extension for typeahead completion.
+ */
+export const typeahead = ({ onComplete }: TypeaheadOptions = {}): Extension => {
+  let hint: string | undefined;
+
+  const complete: Command = (view: EditorView) => {
+    if (!hint) {
+      return false;
+    }
+
+    const selection = view.state.selection.main;
+    view.dispatch({
+      changes: [{ from: selection.from, to: selection.to, insert: hint }],
+      selection: EditorSelection.cursor(selection.from + hint.length),
+    });
+
+    return true;
+  };
+
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet = Decoration.none;
+        update(update: ViewUpdate) {
+          const builder = new RangeSetBuilder<Decoration>();
+          const selection = update.view.state.selection.main;
+          const line = update.view.state.doc.lineAt(selection.from);
+
+          // TODO(burdon): Check at end of line and matches start of previous word.
+          // TODO(burdon): Context grammar.
+          if (selection.from === selection.to && selection.from === line.to) {
+            const str = update.state.sliceDoc(line.from, selection.from);
+            hint = onComplete?.({ line: str });
+            if (hint) {
+              builder.add(selection.from, selection.to, Decoration.widget({ widget: new Hint(hint) }));
+            }
+          }
+
+          this.decorations = builder.finish();
+        }
+      },
+      {
+        decorations: (v) => v.decorations,
+      },
+    ),
+
+    // Keys.
+    Prec.highest(
+      keymap.of([
+        {
+          key: 'Tab',
+          preventDefault: true,
+          run: complete,
+        },
+        {
+          key: 'ArrowRight',
+          preventDefault: true,
+          run: complete,
+        },
+      ]),
+    ),
+  ];
+};
+
+/**
+ * Util to match current line to a static list of completions.
+ */
+export const staticCompletion =
+  (completions: string[], defaultCompletion?: string) =>
+  ({ line }: TypeaheadContext) => {
+    if (line.length === 0 && defaultCompletion) {
+      return defaultCompletion;
+    }
+
+    const words = line.split(/\s+/).filter(Boolean);
+    if (words.length) {
+      const word = words.at(-1)!;
+      for (const completion of completions) {
+        const match = matchCompletion(completion, word);
+        if (match) {
+          return match;
+        }
+      }
+    }
+  };
+
+export const matchCompletion = (completion: string, word: string): string | undefined => {
+  if (completion.length > word.length && completion.startsWith(word)) {
+    return completion.slice(word.length);
+  }
+};

package/src/extensions/comments.ts

@@ -3,14 +3,7 @@
 //
 
 import { invertedEffects } from '@codemirror/commands';
-import {
-  type ChangeDesc,
-  type EditorState,
-  type Extension,
-  StateEffect,
-  StateField,
-  type Text,
-} from '@codemirror/state';
+import { type ChangeDesc, type Extension, StateEffect, StateField, type Text } from '@codemirror/state';
 import {
   hoverTooltip,
   keymap,
@@ -22,17 +15,15 @@ import {
   ViewPlugin,
 } from '@codemirror/view';
 import sortBy from 'lodash.sortby';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 
 import { debounce, type CleanupFn } from '@dxos/async';
-import { type Live } 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 { Cursor, overlap, singleValueFacet, callbackWrapper } from '../util';
+import { Cursor, singleValueFacet, callbackWrapper } from '../util';
 
 //
 // State management.
@@ -156,7 +147,7 @@ const commentsDecorations = EditorView.decorations.compute([commentsState], (sta
   return Decoration.set(decorations);
 });
 
-const commentClickedEffect = StateEffect.define<string>();
+export const commentClickedEffect = StateEffect.define<string>();
 
 const handleCommentClick = EditorView.domEventHandlers({
   click: (event, view) => {
@@ -545,30 +536,6 @@ export const scrollThreadIntoView = (view: EditorView, id: string, center = true
   }
 };
 
-/**
- * Query the editor state for the active formatting at the selection.
- */
-export const selectionOverlapsComment = (state: EditorState): boolean => {
-  // May not be defined if thread plugin not installed.
-  const commentState = state.field(commentsState, false);
-  if (commentState === undefined) {
-    return false;
-  }
-
-  const { selection } = state;
-  for (const range of selection.ranges) {
-    if (commentState.comments.some(({ range: commentRange }) => overlap(commentRange, range))) {
-      return true;
-    }
-  }
-
-  return false;
-};
-
-const hasActiveSelection = (state: EditorState): boolean => {
-  return state.selection.ranges.some((range) => !range.empty);
-};
-
 /**
  * Manages external comment synchronization for the editor.
  * This class subscribes to external comment updates and applies them to the editor view.
@@ -606,19 +573,6 @@ export const createExternalCommentSync = (
     },
   );
 
-export const useCommentState = (state: Live<EditorToolbarState>): Extension => {
-  return useMemo(
-    () =>
-      EditorView.updateListener.of((update) => {
-        if (update.docChanged || update.selectionSet) {
-          state.comment = selectionOverlapsComment(update.state);
-          state.selection = hasActiveSelection(update.state);
-        }
-      }),
-    [state],
-  );
-};
-
 /**
  * @deprecated This hook will be removed in future versions. Use the new comment sync extension instead.
  * Update comments state field.
@@ -636,22 +590,3 @@ export const useComments = (view: EditorView | null | undefined, id: string, com
     }
   });
 };
-
-/**
- * Hook provides an extension to listen for comment clicks and invoke a handler.
- */
-export const useCommentClickListener = (onCommentClick: (commentId: string) => void): Extension => {
-  return useMemo(
-    () =>
-      EditorView.updateListener.of((update) => {
-        update.transactions.forEach((transaction) => {
-          transaction.effects.forEach((effect) => {
-            if (effect.is(commentClickedEffect)) {
-              onCommentClick(effect.value);
-            }
-          });
-        });
-      }),
-    [onCommentClick],
-  );
-};

package/src/extensions/factories.ts

@@ -11,6 +11,7 @@ import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
 import {
   EditorView,
   type KeyBinding,
+  ViewPlugin,
   drawSelection,
   dropCursor,
   highlightActiveLine,
@@ -59,6 +60,7 @@ export type BasicExtensionsOptions = {
   indentWithTab?: boolean;
   keymap?: null | 'default' | 'standard';
   lineNumbers?: boolean;
+  /** If false then do not set a max-width or side margin on the editor. */
   lineWrapping?: boolean;
   placeholder?: string;
   /** If true user cannot edit the text, but they can still select and copy it. */
@@ -149,6 +151,9 @@ export type ThemeExtensionsOptions = {
     editor?: {
       className?: string;
     };
+    scroll?: {
+      className?: string;
+    };
     content?: {
       className?: string;
     };
@@ -179,6 +184,14 @@ export const createThemeExtensions = ({
       (themeMode === 'dark' ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)),
     slots.editor?.className && EditorView.editorAttributes.of({ class: slots.editor.className }),
     slots.content?.className && EditorView.contentAttributes.of({ class: slots.content.className }),
+    slots.scroll?.className &&
+      ViewPlugin.fromClass(
+        class {
+          constructor(view: EditorView) {
+            view.scrollDOM.classList.add(slots.scroll.className);
+          }
+        },
+      ),
   ].filter(isNotFalsy);
 };
 

package/src/extensions/index.ts

@@ -14,10 +14,12 @@ export * from './dnd';
 export * from './factories';
 export * from './focus';
 export * from './folding';
+export * from './json';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
+export * from './outliner';
 export * from './preview';
 export * from './selection';
 export * from './typewriter';