@dxos/react-ui-editor 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/src/extensions/command/command.ts

@@ -2,11 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Extension } from '@codemirror/state';
+import { Prec, type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
+import { isNonNullable } from '@dxos/util';
+
 import { closeEffect, commandKeyBindings } from './action';
-import { hintViewPlugin, type HintOptions } from './hint';
+import { hint, type HintOptions } from './hint';
 import { commandConfig, commandState, type PopupOptions } from './state';
 
 // TODO(burdon): Create knowledge base for CM notes and ideas.
@@ -18,17 +20,15 @@ export type CommandOptions = Partial<PopupOptions & HintOptions>;
 
 export const command = (options: CommandOptions = {}): Extension => {
   return [
-    keymap.of(commandKeyBindings),
+    Prec.highest(keymap.of(commandKeyBindings)),
     commandConfig.of(options),
     commandState,
-    options.onHint ? hintViewPlugin({ onHint: options.onHint }) : [],
-    EditorView.focusChangeEffect.of((_, focusing) => {
-      return focusing ? closeEffect.of(null) : null;
-    }),
+    options.onHint && hint(options),
+    EditorView.focusChangeEffect.of((_, focusing) => (focusing ? closeEffect.of(null) : null)),
     EditorView.theme({
       '.cm-tooltip': {
         background: 'transparent',
       },
     }),
-  ];
+  ].filter(isNonNullable);
 };

package/src/extensions/command/{menu.ts → floating-menu.ts}

@@ -34,7 +34,6 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
         {
           const icon = document.createElement('dx-icon');
           icon.setAttribute('icon', options.icon ?? 'ph--dots-three-vertical--regular');
-
           const button = document.createElement('button');
           button.appendChild(icon);
 
@@ -123,9 +122,6 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
     '[data-has-focus] & .cm-ref-tag': {
       opacity: '1',
     },
-    '[data-is-attention-source] & .cm-ref-tag': {
-      opacity: '1',
-    },
     '.cm-ref-tag button': {
       display: 'grid',
       alignItems: 'center',

package/src/extensions/command/hint.ts

@@ -1,5 +1,6 @@
 //
 // Copyright 2024 DXOS.org
+// Based on https://github.com/codemirror/view/blob/main/src/placeholder.ts
 //
 
 import { RangeSetBuilder } from '@codemirror/state';
@@ -9,37 +10,56 @@ import { commandState } from './state';
 import { clientRectsFor, flattenRect } from '../../util';
 
 export type HintOptions = {
-  onHint: () => string | undefined;
+  delay?: number;
+  onHint?: () => string | undefined;
 };
 
-export const hintViewPlugin = ({ onHint }: HintOptions) =>
-  ViewPlugin.fromClass(
+export const hint = ({ delay = 3_000, onHint }: HintOptions) => {
+  return ViewPlugin.fromClass(
     class {
       decorations = Decoration.none;
+      timeout: ReturnType<typeof setTimeout> | undefined;
+
       update(update: ViewUpdate) {
+        if (this.timeout) {
+          clearTimeout(this.timeout);
+          this.timeout = undefined;
+        }
+
         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 Hint(hint) }));
-            }
+            // Set timeout to add decoration after delay.
+            this.timeout = setTimeout(() => {
+              const hint = onHint?.();
+              if (hint) {
+                const builder = new RangeSetBuilder<Decoration>();
+                builder.add(selection.from, selection.to, Decoration.widget({ widget: new Hint(hint) }));
+                this.decorations = builder.finish();
+                update.view.update([]);
+              }
+            }, delay);
           }
         }
 
         this.decorations = builder.finish();
       }
+
+      destroy() {
+        if (this.timeout) {
+          clearTimeout(this.timeout);
+        }
+      }
     },
     {
       provide: (plugin) => [EditorView.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)],
     },
   );
+};
 
 export class Hint extends WidgetType {
   constructor(readonly content: string | HTMLElement) {

package/src/extensions/command/index.ts

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

package/src/extensions/command/placeholder.ts

@@ -0,0 +1,113 @@
+//
+// Copyright 2025 DXOS.org
+// Based on https://github.com/codemirror/view/blob/main/src/placeholder.ts
+//
+
+import { type Extension } from '@codemirror/state';
+import { Decoration, EditorView, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+
+import { clientRectsFor, flattenRect } from '../../util';
+
+type Content = string | HTMLElement | ((view: EditorView) => HTMLElement);
+
+export type PlaceholderOptions = {
+  delay?: number;
+  content: Content;
+};
+
+export const placeholder = ({ delay = 3_000, content }: PlaceholderOptions): Extension => {
+  const plugin = ViewPlugin.fromClass(
+    class {
+      decorations = Decoration.none;
+      timeout: ReturnType<typeof setTimeout> | undefined;
+
+      update(update: ViewUpdate) {
+        if (this.timeout) {
+          window.clearTimeout(this.timeout);
+          this.timeout = undefined;
+        }
+
+        // Check if the active line (where cursor is) is empty.
+        const activeLine = update.view.state.doc.lineAt(update.view.state.selection.main.head);
+        const isEmpty = activeLine.text.trim() === '';
+        if (isEmpty) {
+          // Create widget decoration at the start of the current line.
+          const lineStart = activeLine.from;
+          this.timeout = setTimeout(() => {
+            this.decorations = Decoration.set([
+              Decoration.widget({
+                widget: new Placeholder(content),
+                side: 1,
+              }).range(lineStart),
+            ]);
+
+            update.view.update([]);
+          }, delay);
+        }
+
+        this.decorations = Decoration.none;
+      }
+
+      destroy() {
+        if (this.timeout) {
+          clearTimeout(this.timeout);
+        }
+      }
+    },
+    {
+      provide: (plugin) => {
+        return [EditorView.decorations.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)];
+      },
+    },
+  );
+
+  return typeof content === 'string'
+    ? [plugin, EditorView.contentAttributes.of({ 'aria-placeholder': content })]
+    : plugin;
+};
+
+class Placeholder extends WidgetType {
+  constructor(readonly content: Content) {
+    super();
+  }
+
+  toDOM(view: EditorView) {
+    const wrap = document.createElement('span');
+    wrap.className = 'cm-placeholder';
+    wrap.style.pointerEvents = 'none';
+    wrap.appendChild(
+      typeof this.content === 'string'
+        ? document.createTextNode(this.content)
+        : typeof this.content === 'function'
+          ? this.content(view)
+          : this.content.cloneNode(true),
+    );
+    wrap.setAttribute('aria-hidden', 'true');
+    return wrap;
+  }
+
+  override coordsAt(dom: HTMLElement) {
+    const rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+    if (!rects.length) {
+      return null;
+    }
+
+    const style = window.getComputedStyle(dom.parentNode as HTMLElement);
+    const rect = flattenRect(rects[0], style.direction !== 'rtl');
+    const lineHeight = parseInt(style.lineHeight);
+    if (rect.bottom - rect.top > lineHeight * 1.5) {
+      return {
+        left: rect.left,
+        right: rect.right,
+        top: rect.top,
+        bottom: rect.top + lineHeight,
+      };
+    }
+
+    return rect;
+  }
+
+  override ignoreEvent() {
+    return false;
+  }
+}

package/src/extensions/command/state.ts

@@ -17,7 +17,7 @@ export type PopupOptions = {
 };
 
 type CommandState = {
-  tooltip?: Tooltip | null;
+  tooltip?: Tooltip;
 };
 
 export const commandState = StateField.define<CommandState>({
@@ -38,7 +38,6 @@ export const commandState = StateField.define<CommandState>({
           strictSide: true,
           create: (view: EditorView) => {
             const root = document.createElement('div');
-
             const tooltipView: TooltipView = {
               dom: root,
               mount: (view: EditorView) => {

package/src/extensions/command/useCommandMenu.ts

@@ -0,0 +1,118 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
+
+import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { type MaybePromise } from '@dxos/util';
+
+import { commandMenu, commandRangeEffect } from './command-menu';
+import { type PlaceholderOptions } from './placeholder';
+import { getItem, getNextItem, getPreviousItem, type CommandMenuGroup, type CommandMenuItem } from '../../components';
+
+export type UseCommandMenuOptions = {
+  viewRef: RefObject<EditorView | undefined>;
+  trigger: string | string[];
+  placeholder?: Partial<PlaceholderOptions>;
+  getMenu: (trigger: string, query?: string) => MaybePromise<CommandMenuGroup[]>;
+};
+
+export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCommandMenuOptions) => {
+  const triggerRef = useRef<DxRefTag | null>(null);
+  const currentRef = useRef<CommandMenuItem | null>(null);
+  const groupsRef = useRef<CommandMenuGroup[]>([]);
+  const [currentItem, setCurrentItem] = useState<string>();
+  const [open, setOpen] = useState(false);
+  const [_, refresh] = useState({});
+
+  const handleOpenChange = useCallback(
+    async (open: boolean, trigger?: string) => {
+      if (open && trigger) {
+        groupsRef.current = await getMenu(trigger);
+      }
+      setOpen(open);
+      if (!open) {
+        triggerRef.current = null;
+        setCurrentItem(undefined);
+        viewRef.current?.dispatch({ effects: [commandRangeEffect.of(null)] });
+      }
+    },
+    [getMenu],
+  );
+
+  const handleActivate = useCallback(
+    async (event: DxRefTagActivate) => {
+      const item = getItem(groupsRef.current, currentItem);
+      if (item) {
+        currentRef.current = item;
+      }
+
+      triggerRef.current = event.trigger;
+      const triggerKey = event.trigger.getAttribute('data-trigger');
+      if (!open && triggerKey) {
+        await handleOpenChange(true, triggerKey);
+      }
+    },
+    [open, handleOpenChange],
+  );
+
+  const handleSelect = useCallback((item: CommandMenuItem) => {
+    const view = viewRef.current;
+    if (!view) {
+      return;
+    }
+
+    const selection = view.state.selection.main;
+    void item.onSelect?.(view, selection.head);
+  }, []);
+
+  const serializedTrigger = Array.isArray(trigger) ? trigger.join(',') : trigger;
+  const _commandMenu = useMemo(() => {
+    return commandMenu({
+      trigger,
+      placeholder,
+      onClose: () => handleOpenChange(false),
+      onArrowDown: () => {
+        setCurrentItem((currentItem) => {
+          const next = getNextItem(groupsRef.current, currentItem);
+          currentRef.current = next;
+          return next.id;
+        });
+      },
+      onArrowUp: () => {
+        setCurrentItem((currentItem) => {
+          const previous = getPreviousItem(groupsRef.current, currentItem);
+          currentRef.current = previous;
+          return previous.id;
+        });
+      },
+      onEnter: () => {
+        if (currentRef.current) {
+          handleSelect(currentRef.current);
+        }
+      },
+      onTextChange: async (trigger, text) => {
+        groupsRef.current = await getMenu(trigger, text);
+        const firstItem = groupsRef.current.filter((group) => group.items.length > 0)[0]?.items[0];
+        if (firstItem) {
+          setCurrentItem(firstItem.id);
+          currentRef.current = firstItem;
+        }
+        refresh({});
+      },
+    });
+  }, [handleOpenChange, getMenu, serializedTrigger, placeholder]);
+
+  return {
+    commandMenu: _commandMenu,
+    currentItem,
+    groupsRef,
+    ref: triggerRef,
+    open,
+    onActivate: handleActivate,
+    onOpenChange: setOpen,
+    onSelect: handleSelect,
+  };
+};

package/src/extensions/factories.ts

@@ -34,6 +34,7 @@ import { hexToHue, isNotFalsy } from '@dxos/util';
 import { automerge } from './automerge';
 import { SpaceAwarenessProvider, awareness } from './awareness';
 import { focus } from './focus';
+import { editorGutter, editorMonospace } from '../defaults';
 import { type ThemeStyles, defaultTheme } from '../styles';
 
 //
@@ -62,6 +63,7 @@ export type BasicExtensionsOptions = {
   lineNumbers?: boolean;
   /** If false then do not set a max-width or side margin on the editor. */
   lineWrapping?: boolean;
+  monospace?: boolean;
   placeholder?: string;
   /** If true user cannot edit the text, but they can still select and copy it. */
   readOnly?: boolean;
@@ -107,8 +109,9 @@ export const createBasicExtensions = (_props?: BasicExtensionsOptions): Extensio
     props.focus && focus,
     props.highlightActiveLine && highlightActiveLine(),
     props.history && history(),
-    props.lineNumbers && lineNumbers(),
+    props.lineNumbers && [lineNumbers(), editorGutter],
     props.lineWrapping && EditorView.lineWrapping,
+    props.monospace && editorMonospace,
     props.placeholder && placeholder(props.placeholder),
     props.readOnly !== undefined && EditorState.readOnly.of(props.readOnly),
     props.scrollPastEnd && scrollPastEnd(),

package/src/extensions/markdown/bundle.ts

@@ -7,7 +7,6 @@ import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 import { markdownLanguage, markdown } from '@codemirror/lang-markdown';
 import { syntaxHighlighting } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { lintKeymap } from '@codemirror/lint';
 import { type Extension } from '@codemirror/state';
 import { keymap } from '@codemirror/view';
 
@@ -66,7 +65,6 @@ export const createMarkdownExtensions = (options: MarkdownBundleOptions = {}): E
         // https://codemirror.net/docs/ref/#commands.defaultKeymap
         ...defaultKeymap,
         ...completionKeymap,
-        ...lintKeymap,
       ].filter(isNotFalsy),
     ),
   ];

package/src/extensions/outliner/outliner.ts

@@ -161,9 +161,6 @@ const decorations = () => [
       '[data-has-focus] & .cm-list-item-selected': {
         borderColor: 'var(--dx-separator)',
       },
-      '[data-is-attention-source] & .cm-list-item-selected': {
-        borderColor: 'var(--dx-separator)',
-      },
     }),
   ),
 ];

package/src/extensions/outliner/tree.test.ts

@@ -4,7 +4,7 @@
 
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { EditorState } from '@codemirror/state';
-import { describe, test } from 'vitest';
+import { beforeEach, describe, test } from 'vitest';
 
 import { outlinerTree, treeFacet, listItemToString, type Item } from './tree';
 import { str } from '../../testing';
@@ -71,7 +71,11 @@ describe('tree (boundary conditions)', () => {
 });
 
 describe('tree (advanced)', () => {
-  const state = EditorState.create({ doc: str(...lines), extensions });
+  let state: EditorState;
+
+  beforeEach(() => {
+    state = EditorState.create({ doc: str(...lines), extensions });
+  });
 
   test('traverse', ({ expect }) => {
     const tree = state.facet(treeFacet);
@@ -80,15 +84,15 @@ describe('tree (advanced)', () => {
       console.log(listItemToString(item, level));
       count++;
     });
-    expect(count).toBe(9);
+    expect(count).to.eq(9);
   });
 
   test('continguous', ({ expect }) => {
     const tree = state.facet(treeFacet);
     const ranges: Range[] = [];
     tree.traverse((item) => {
-      ranges.push(item.lineRange);
       console.log(listItemToString(item));
+      ranges.push(item.lineRange);
     });
 
     // Check no gaps between ranges.
@@ -97,18 +101,17 @@ describe('tree (advanced)', () => {
     for (let i = 0; i < ranges.length - 1; i++) {
       const current = ranges[i];
       const next = ranges[i + 1];
-      expect(current.to + 1).toBe(next.from);
+      expect(current.to + 1).to.eq(next.from);
     }
   });
 
   test('find', ({ expect }) => {
     const tree = state.facet(treeFacet);
-
     expect(tree.find(0)).to.include({ type: 'task' });
     expect(tree.find(state.doc.length)).to.include({ type: 'task' });
 
     expect(tree.find(getPos(1))).to.include({ type: 'task' });
-    expect(tree.find(getPos(1))).toBe(tree.find(getPos(1) + 4));
+    expect(tree.find(getPos(1))).to.eq(tree.find(getPos(1) + 4));
     expect(tree.find(getPos(5))).to.include({ type: 'bullet' });
   });
 
@@ -148,17 +151,17 @@ describe('tree (advanced)', () => {
     const tree = state.facet(treeFacet);
     {
       const item = tree.find(getPos(0))!;
-      expect(tree.lastDescendant(item).index).toBe(item.index);
+      expect(tree.lastDescendant(item).index).to.eq(item.index);
     }
     {
       const item = tree.find(getPos(1))!;
       const last = tree.find(getPos(7))!;
-      expect(tree.lastDescendant(item).index).toBe(last.index);
+      expect(tree.lastDescendant(item).index).to.eq(last.index);
     }
     {
       const item = tree.find(getPos(3))!;
       const last = tree.find(getPos(6))!;
-      expect(tree.lastDescendant(item).index).toBe(last.index);
+      expect(tree.lastDescendant(item).index).to.eq(last.index);
     }
   });
 });

package/src/extensions/outliner/tree.ts

@@ -69,8 +69,8 @@ export class Tree implements Item {
   traverse<T = any>(cb: (item: Item, level: number) => T | void): T | undefined;
   traverse<T = any>(item: Item, cb: (item: Item, level: number) => T | void): T | undefined;
   traverse<T = any>(
-    itemOrCb: Item | ((item: Item, level: number) => T | void),
-    maybeCb?: (item: Item, level: number) => T | void,
+    itemOrCb: Item | ((item: Item, level: number) => T | undefined | void),
+    maybeCb?: (item: Item, level: number) => T | undefined | void,
   ): T | undefined {
     if (typeof itemOrCb === 'function') {
       return traverse<T>(this, itemOrCb);
@@ -83,7 +83,7 @@ export class Tree implements Item {
    * Return the closest item.
    */
   find(pos: number): Item | undefined {
-    return this.traverse((item) => (item.lineRange.from <= pos && item.lineRange.to >= pos ? item : undefined));
+    return this.traverse<Item>((item) => (item.lineRange.from <= pos && item.lineRange.to >= pos ? item : undefined));
   }
 
   /**
@@ -148,6 +148,8 @@ export const traverse = <T = any>(root: Item, cb: (item: Item, level: number) =>
         return value;
       }
     }
+
+    return undefined;
   };
 
   return t(root, root.type === 'root' ? -1 : 0);