@dxos/react-ui-editor 0.8.4-main.f9ba587 → 0.8.4-main.fcc0d83b33

package/src/extensions/command/floating-menu.ts

@@ -1,133 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-import { type CleanupFn, addEventListener } from '@dxos/async';
-
-import { closeEffect, openEffect } from './action';
-
-export type FloatingMenuOptions = {
-  icon?: string;
-  height?: number;
-  padding?: number;
-};
-
-export const floatingMenu = (options: FloatingMenuOptions = {}) => [
-  ViewPlugin.fromClass(
-    class {
-      view: EditorView;
-      tag: HTMLElement;
-      rafId?: number | null;
-      cleanup?: CleanupFn;
-
-      constructor(view: EditorView) {
-        this.view = view;
-
-        // Position context.
-        const container = view.scrollDOM;
-        if (getComputedStyle(container).position === 'static') {
-          container.style.position = 'relative';
-        }
-
-        {
-          const icon = document.createElement('dx-icon');
-          icon.setAttribute('icon', options.icon ?? 'ph--dots-three-vertical--regular');
-          const button = document.createElement('button');
-          button.appendChild(icon);
-
-          this.tag = document.createElement('dx-ref-tag');
-          this.tag.classList.add('cm-ref-tag');
-          this.tag.appendChild(button);
-        }
-
-        container.appendChild(this.tag);
-
-        // Listen for scroll events.
-        const handler = () => this.scheduleUpdate();
-        this.cleanup = addEventListener(container, 'scroll', handler);
-        this.scheduleUpdate();
-      }
-
-      destroy() {
-        this.cleanup?.();
-        this.tag.remove();
-        if (this.rafId != null) {
-          cancelAnimationFrame(this.rafId);
-        }
-      }
-
-      update(update: ViewUpdate) {
-        this.tag.dataset.focused = update.view.hasFocus ? 'true' : 'false';
-        if (!update.view.hasFocus) {
-          return;
-        }
-
-        // TODO(burdon): Timer to fade in/out.
-        if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
-          this.tag.style.display = 'none';
-          this.tag.classList.add('opacity-10');
-        } else if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
-          this.tag.style.display = 'block';
-        } else if (
-          update.docChanged ||
-          update.focusChanged ||
-          update.geometryChanged ||
-          update.selectionSet ||
-          update.viewportChanged
-        ) {
-          this.scheduleUpdate();
-        }
-      }
-
-      updateButtonPosition() {
-        const { x, width } = this.view.contentDOM.getBoundingClientRect();
-
-        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 lineHeight = coords.bottom - coords.top;
-        const dy = (lineHeight - (options.height ?? 32)) / 2;
-
-        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';
-      }
-
-      scheduleUpdate() {
-        if (this.rafId != null) {
-          cancelAnimationFrame(this.rafId);
-        }
-
-        this.rafId = requestAnimationFrame(this.updateButtonPosition.bind(this));
-      }
-    },
-  ),
-
-  EditorView.theme({
-    '.cm-ref-tag': {
-      position: 'fixed',
-      padding: '0',
-      border: 'none',
-      opacity: '0',
-    },
-    '[data-has-focus] & .cm-ref-tag': {
-      opacity: '1',
-    },
-    '.cm-ref-tag button': {
-      display: 'grid',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '2rem',
-      height: '2rem',
-    },
-  }),
-];

package/src/extensions/command/hint.ts

@@ -1,102 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-// Based on https://github.com/codemirror/view/blob/main/src/placeholder.ts
-//
-
-import { RangeSetBuilder } from '@codemirror/state';
-import { Decoration, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';
-
-import { commandState } from './state';
-import { clientRectsFor, flattenRect } from '../../util';
-
-export type HintOptions = {
-  delay?: number;
-  onHint?: () => string | undefined;
-};
-
-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.
-          if (selection.from === selection.to && line.from === line.to) {
-            // 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) {
-    super();
-  }
-
-  toDOM(): HTMLSpanElement {
-    const wrap = document.createElement('span');
-    wrap.className = 'cm-placeholder';
-    wrap.style.pointerEvents = 'none';
-    wrap.appendChild(typeof this.content === 'string' ? document.createTextNode(this.content) : this.content);
-    if (typeof this.content === 'string') {
-      wrap.setAttribute('aria-label', 'placeholder ' + this.content);
-    } else {
-      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(): boolean {
-    return false;
-  }
-}

package/src/extensions/command/index.ts

@@ -1,10 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './action';
-export * from './command';
-export * from './command-menu';
-export * from './floating-menu';
-export * from './typeahead';
-export * from './useCommandMenu';

package/src/extensions/command/placeholder.ts

@@ -1,113 +0,0 @@
-//
-// 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

@@ -1,89 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { StateField } from '@codemirror/state';
-import { showTooltip, type EditorView, 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;
-};
-
-export const commandState = StateField.define<CommandState>({
-  create: () => ({}),
-  update: (state, tr) => {
-    for (const effect of tr.effects) {
-      if (effect.is(closeEffect)) {
-        return {};
-      }
-
-      const { renderDialog } = tr.state.facet(commandConfig);
-      if (effect.is(openEffect) && renderDialog) {
-        const { pos, fullWidth } = effect.value;
-        const tooltip: Tooltip = {
-          pos,
-          above: false,
-          arrow: false,
-          strictSide: true,
-          create: (view: EditorView) => {
-            const root = document.createElement('div');
-            const tooltipView: TooltipView = {
-              dom: root,
-              mount: (view: EditorView) => {
-                if (fullWidth) {
-                  const parent = root.parentElement!;
-                  const { paddingLeft, paddingRight } = window.getComputedStyle(parent);
-                  const widthWithoutPadding = parent.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
-                  root.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,
-                );
-              },
-            };
-
-            return tooltipView;
-          },
-        };
-
-        return { tooltip };
-      }
-    }
-
-    return state;
-  },
-  provide: (field) => [showTooltip.from(field, (value) => value.tooltip ?? null)],
-});

package/src/extensions/command/typeahead.ts

@@ -1,129 +0,0 @@
-//
-// 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,
-        },
-      ]),
-    ),
-  ];
-};
-
-type CompletionOptions = {
-  default?: string;
-  minLength?: number;
-};
-
-/**
- * Util to match current line to a static list of completions.
- */
-export const staticCompletion =
-  (completions: string[], options: CompletionOptions = {}) =>
-  ({ line }: TypeaheadContext) => {
-    if (line.length === 0 && options.default) {
-      return options.default;
-    }
-
-    const parts = line.split(/\s+/).filter(Boolean);
-    if (parts.length) {
-      const str = parts.at(-1)!;
-      if (str.length >= (options.minLength ?? 0)) {
-        for (const completion of completions) {
-          const match = matchCompletion(completion, str);
-          if (match) {
-            return match;
-          }
-        }
-      }
-    }
-  };
-
-export const matchCompletion = (completion: string, str: string, minLength = 0): string | undefined => {
-  if (
-    str.length >= minLength &&
-    completion.length > str.length &&
-    completion.startsWith(str)
-    // TODO(burdon): If case insensitive, need to replace existing chars.
-    // completion.toLowerCase().startsWith(str.toLowerCase())
-  ) {
-    return completion.slice(str.length);
-  }
-};

package/src/extensions/command/useCommandMenu.ts

@@ -1,118 +0,0 @@
-//
-// 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,
-  };
-};