@dxos/react-ui-editor 0.8.3-main.7f5a14c → 0.8.3

package/src/extensions/command/menu.ts

@@ -1,439 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { RangeSetBuilder, StateField, StateEffect, Prec } from '@codemirror/state';
-import { EditorView, ViewPlugin, type ViewUpdate, Decoration, keymap, type DecorationSet } from '@codemirror/view';
-import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
-
-import { type CleanupFn, addEventListener } from '@dxos/async';
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
-import { type MaybePromise } from '@dxos/util';
-
-import { closeEffect, openEffect } from './action';
-import { getItem, getNextItem, getPreviousItem, type CommandMenuGroup, type CommandMenuItem } from '../../components';
-import { type Range } from '../../types';
-import { multilinePlaceholder } from '../placeholder';
-
-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',
-    },
-  }),
-];
-
-type CommandState = {
-  trigger: string;
-  range: Range;
-};
-
-// State effects for managing command menu state.
-export const commandRangeEffect = StateEffect.define<CommandState | null>();
-
-// State field to track the active command menu range.
-const commandMenuState = StateField.define<CommandState | null>({
-  create: () => null,
-  update: (value, tr) => {
-    let newValue = value;
-
-    for (const effect of tr.effects) {
-      if (effect.is(commandRangeEffect)) {
-        newValue = effect.value;
-      }
-    }
-
-    return newValue;
-  },
-});
-
-export type CommandMenuOptions = {
-  trigger: string | string[];
-  placeholder?: Parameters<typeof multilinePlaceholder>[0];
-  onArrowDown?: () => void;
-  onArrowUp?: () => void;
-  onDeactivate?: () => void;
-  onEnter?: () => void;
-  onTextChange?: (trigger: string, text: string) => void;
-};
-
-export const commandMenu = (options: CommandMenuOptions) => {
-  const commandMenuPlugin = ViewPlugin.fromClass(
-    class {
-      decorations: DecorationSet = Decoration.none;
-
-      constructor(readonly view: EditorView) {}
-
-      // TODO(wittjosiah): The decorations are repainted on every update, this occasionally causes menu to flicker.
-      update(update: ViewUpdate) {
-        const builder = new RangeSetBuilder<Decoration>();
-        const selection = update.view.state.selection.main;
-        const { range: activeRange, trigger } = update.view.state.field(commandMenuState) ?? {};
-
-        // Check if we should show the widget - only if cursor is within the active command range.
-        const shouldShowWidget = activeRange && selection.head >= activeRange.from && selection.head <= activeRange.to;
-        if (shouldShowWidget) {
-          // Create mark decoration that wraps the entire line content in a dx-ref-tag.
-          builder.add(
-            activeRange.from,
-            activeRange.to,
-            Decoration.mark({
-              tagName: 'dx-ref-tag',
-              class: 'cm-ref-tag',
-              attributes: {
-                'data-auto-trigger': 'true',
-                'data-trigger': trigger!,
-              },
-            }),
-          );
-        }
-
-        const activeRangeChanged = update.transactions.some((tr) =>
-          tr.effects.some((effect) => effect.is(commandRangeEffect)),
-        );
-        if (activeRange && activeRangeChanged && trigger) {
-          const content = update.view.state.sliceDoc(
-            activeRange.from + 1, // Skip the trigger character.
-            activeRange.to,
-          );
-          options.onTextChange?.(trigger, content);
-        }
-
-        this.decorations = builder.finish();
-      }
-    },
-    {
-      decorations: (v) => v.decorations,
-    },
-  );
-
-  const triggers = Array.isArray(options.trigger) ? options.trigger : [options.trigger];
-  const commandKeymap = keymap.of([
-    ...triggers.map((trigger) => ({
-      key: trigger,
-      run: (view: EditorView) => {
-        const selection = view.state.selection.main;
-        const line = view.state.doc.lineAt(selection.head);
-
-        // Check if we should trigger the command menu:
-        // 1. Empty lines or at the beginning of a line
-        // 2. When there's a preceding space
-        const shouldTrigger =
-          line.text.trim() === '' ||
-          selection.head === line.from ||
-          (selection.head > line.from && line.text[selection.head - line.from - 1] === ' ');
-
-        if (shouldTrigger) {
-          view.dispatch({
-            changes: { from: selection.head, insert: trigger },
-            selection: { anchor: selection.head + 1, head: selection.head + 1 },
-            effects: commandRangeEffect.of({ trigger, range: { from: selection.head, to: selection.head + 1 } }),
-          });
-          return true;
-        }
-
-        return false;
-      },
-    })),
-    {
-      key: 'Enter',
-      run: (view) => {
-        const activeRange = view.state.field(commandMenuState)?.range;
-        if (activeRange) {
-          view.dispatch({ changes: { from: activeRange.from, to: activeRange.to, insert: '' } });
-          options.onEnter?.();
-          return true;
-        }
-
-        return false;
-      },
-    },
-    {
-      key: 'ArrowDown',
-      run: (view) => {
-        const activeRange = view.state.field(commandMenuState)?.range;
-        if (activeRange) {
-          options.onArrowDown?.();
-          return true;
-        }
-
-        return false;
-      },
-    },
-    {
-      key: 'ArrowUp',
-      run: (view) => {
-        const activeRange = view.state.field(commandMenuState)?.range;
-        if (activeRange) {
-          options.onArrowUp?.();
-          return true;
-        }
-
-        return false;
-      },
-    },
-  ]);
-
-  // Listen for selection and document changes to clean up the command menu.
-  const updateListener = EditorView.updateListener.of((update) => {
-    const { trigger, range: activeRange } = update.view.state.field(commandMenuState) ?? {};
-    if (!activeRange || !trigger) {
-      return;
-    }
-
-    const selection = update.view.state.selection.main;
-    const firstChar = update.view.state.doc.sliceString(activeRange.from, activeRange.from + 1);
-    const shouldRemove =
-      firstChar !== trigger || // Trigger deleted.
-      selection.head < activeRange.from || // Cursor moved before the range.
-      selection.head > activeRange.to + 1; // Cursor moved after the range (+1 to handle selection changing before doc).
-
-    const nextRange = shouldRemove
-      ? null
-      : update.docChanged
-        ? { from: activeRange.from, to: selection.head }
-        : activeRange;
-    if (nextRange !== activeRange) {
-      update.view.dispatch({ effects: commandRangeEffect.of(nextRange ? { trigger, range: nextRange } : null) });
-    }
-
-    if (shouldRemove) {
-      options.onDeactivate?.();
-    }
-  });
-
-  return [
-    multilinePlaceholder(
-      options.placeholder ??
-        `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`,
-    ),
-    Prec.highest(commandKeymap),
-    updateListener,
-    commandMenuState,
-    commandMenuPlugin,
-  ];
-};
-
-export type UseCommandMenuOptions = {
-  viewRef: RefObject<EditorView | undefined>;
-  trigger: string | string[];
-  placeholder?: Parameters<typeof multilinePlaceholder>[0];
-  getGroups: (trigger: string, query?: string) => MaybePromise<CommandMenuGroup[]>;
-};
-
-export const useCommandMenu = ({ viewRef, trigger, placeholder, getGroups }: 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 [_, update] = useState({});
-
-  const handleOpenChange = useCallback(
-    async (open: boolean, trigger?: string) => {
-      if (open && trigger) {
-        groupsRef.current = await getGroups(trigger);
-      }
-      setOpen(open);
-      if (!open) {
-        triggerRef.current = null;
-        setCurrentItem(undefined);
-        viewRef.current?.dispatch({ effects: [commandRangeEffect.of(null)] });
-      }
-    },
-    [getGroups],
-  );
-
-  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(
-    () =>
-      commandMenu({
-        trigger,
-        placeholder,
-        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;
-          });
-        },
-        onDeactivate: () => handleOpenChange(false),
-        onEnter: () => {
-          if (currentRef.current) {
-            handleSelect(currentRef.current);
-          }
-        },
-        onTextChange: async (trigger, text) => {
-          groupsRef.current = await getGroups(trigger, text);
-          const firstItem = groupsRef.current.filter((group) => group.items.length > 0)[0]?.items[0];
-          if (firstItem) {
-            setCurrentItem(firstItem.id);
-            currentRef.current = firstItem;
-          }
-          update({});
-        },
-      }),
-    [handleOpenChange, getGroups, serializedTrigger, placeholder],
-  );
-
-  return {
-    commandMenu: _commandMenu,
-    currentItem,
-    groupsRef,
-    ref: triggerRef,
-    open,
-    onActivate: handleActivate,
-    onOpenChange: setOpen,
-    onSelect: handleSelect,
-  };
-};

package/src/extensions/placeholder.ts

@@ -1,82 +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 } from '@codemirror/view';
-
-import { clientRectsFor, flattenRect } from '../util';
-
-class Placeholder extends WidgetType {
-  constructor(readonly content: string | HTMLElement | ((view: EditorView) => HTMLElement)) {
-    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;
-  }
-}
-
-export function multilinePlaceholder(content: string | HTMLElement | ((view: EditorView) => HTMLElement)): Extension {
-  const plugin = ViewPlugin.fromClass(
-    class {
-      constructor(readonly view: EditorView) {}
-
-      declare update: () => void; // Kludge to convince TypeScript that this is a plugin value
-
-      get decorations() {
-        // Check if the active line (where cursor is) is empty
-        const activeLine = this.view.state.doc.lineAt(this.view.state.selection.main.head);
-        const isEmpty = activeLine.text.trim() === '';
-
-        if (!isEmpty || !content) {
-          return Decoration.none;
-        }
-
-        // Create widget decoration at the start of the current line
-        const lineStart = activeLine.from;
-        return Decoration.set([
-          Decoration.widget({
-            widget: new Placeholder(content),
-            side: 1,
-          }).range(lineStart),
-        ]);
-      }
-    },
-    { decorations: (v) => v.decorations },
-  );
-  return typeof content === 'string'
-    ? [plugin, EditorView.contentAttributes.of({ 'aria-placeholder': content })]
-    : plugin;
-}