@dxos/react-ui-editor 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/extensions/command-menu/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, ViewPlugin, type ViewUpdate, WidgetType } 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-menu/useCommandMenu.ts

@@ -1,134 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
-
-import { type DxAnchorActivate } from '@dxos/react-ui';
-import { type MaybePromise } from '@dxos/util';
-
-import { type CommandMenuGroup, type CommandMenuItem, getItem, getNextItem, getPreviousItem } from '../../components';
-
-import { commandMenu, commandRangeEffect } from './command-menu';
-import { type PlaceholderOptions } from './placeholder';
-
-export type UseCommandMenuOptions = {
-  // TODO(burdon): Extensions should not depend directly on the editor view.
-  viewRef: RefObject<EditorView | null>;
-  trigger: string | string[];
-  placeholder?: Partial<PlaceholderOptions>;
-  getMenu: (trigger: string, query?: string) => MaybePromise<CommandMenuGroup[]>;
-};
-
-export type UseCommandMenu = {
-  groupsRef: RefObject<CommandMenuGroup[]>;
-  commandMenu: Extension;
-  currentItem: string | undefined;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onActivate: (event: DxAnchorActivate) => void;
-  onSelect: (item: CommandMenuItem) => void;
-};
-
-export const useCommandMenu = ({ viewRef, trigger, placeholder, getMenu }: UseCommandMenuOptions): UseCommandMenu => {
-  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) {
-        setCurrentItem(undefined);
-        viewRef.current?.dispatch({ effects: [commandRangeEffect.of(null)] });
-      }
-    },
-    [getMenu],
-  );
-
-  const handleActivate = useCallback<UseCommandMenu['onActivate']>(
-    async (event) => {
-      const item = getItem(groupsRef.current, currentItem);
-      if (item) {
-        currentRef.current = item;
-      }
-
-      const triggerKey = event.trigger.getAttribute('data-trigger');
-      if (!open && triggerKey) {
-        await handleOpenChange(true, triggerKey);
-      }
-    },
-    [open, handleOpenChange],
-  );
-
-  // TODO(burdon): Move outside.
-  const handleSelect = useCallback<UseCommandMenu['onSelect']>((item) => {
-    if (!viewRef.current) {
-      return;
-    }
-
-    const selection = viewRef.current.state.selection.main;
-    void item.onSelect?.(viewRef.current, selection.head);
-  }, []);
-
-  const serializedTrigger = Array.isArray(trigger) ? trigger.join(',') : trigger;
-
-  const memoizedCommandMenu = useMemo<Extension>(() => {
-    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) => {
-        if (/\W/.test(text)) {
-          return queueMicrotask(() => handleOpenChange(false));
-        }
-
-        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 {
-    groupsRef,
-    commandMenu: memoizedCommandMenu,
-    currentItem,
-    open,
-    onOpenChange: setOpen,
-    onActivate: handleActivate,
-    onSelect: handleSelect,
-  };
-};