@dxos/react-ui-editor 0.8.4-main.5ea62a8 → 0.8.4-main.72ec0f3

package/src/components/Popover/RefPopover.tsx

@@ -1,99 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { createContext } from '@radix-ui/react-context';
-import React, {
-  type PropsWithChildren,
-  type RefObject,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-
-import { addEventListener } from '@dxos/async';
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
-import { Popover } from '@dxos/react-ui';
-
-import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
-
-const customEventOptions = { capture: true, passive: false };
-
-export type RefPopoverProps = PropsWithChildren<{
-  modal?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  onActivate?: (event: DxRefTagActivate) => void;
-}>;
-
-export const RefPopover = forwardRef<DxRefTag | null, RefPopoverProps>(
-  ({ children, open, onOpenChange, modal, onActivate }, ref) => {
-    const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
-
-    useEffect(() => {
-      if (!rootRef || !onActivate) {
-        return;
-      }
-
-      return addEventListener(rootRef, 'dx-ref-tag-activate' as any, onActivate, customEventOptions);
-    }, [rootRef, onActivate]);
-
-    return (
-      <Popover.Root open={open} onOpenChange={onOpenChange} modal={modal}>
-        <Popover.VirtualTrigger virtualRef={ref as unknown as RefObject<HTMLButtonElement>} />
-        <div role='none' className='contents' ref={setRootRef}>
-          {children}
-        </div>
-      </Popover.Root>
-    );
-  },
-);
-
-// Create a context for the dxn value.
-type RefPopoverValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
-
-const REF_POPOVER = 'RefPopover';
-const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>(REF_POPOVER, {});
-
-type PreviewProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
-
-const PreviewProvider = ({ children, onLookup }: PreviewProviderProps) => {
-  const trigger = useRef<DxRefTag | null>(null);
-  const [value, setValue] = useState<RefPopoverValue>({});
-  const [open, setOpen] = useState(false);
-
-  const handleDxRefTagActivate = useCallback(
-    (event: DxRefTagActivate) => {
-      const { refId, label, trigger: dxTrigger } = event;
-      setValue((value) => ({
-        ...value,
-        link: { label, ref: refId },
-        pending: true,
-      }));
-      trigger.current = dxTrigger;
-      queueMicrotask(() => setOpen(true));
-      void onLookup?.({ label, ref: refId }).then((target) =>
-        setValue((value) => ({
-          ...value,
-          target: target ?? undefined,
-          pending: false,
-        })),
-      );
-    },
-    [onLookup],
-  );
-
-  return (
-    <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <RefPopover ref={trigger} open={open} onOpenChange={setOpen} onActivate={handleDxRefTagActivate}>
-        {children}
-      </RefPopover>
-    </RefPopoverContextProvider>
-  );
-};
-
-export { PreviewProvider, useRefPopover };
-
-export type { PreviewProviderProps, RefPopoverValue };

package/src/components/Popover/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './CommandMenu';
-export * from './RefPopover';
-export * from './RefDropdownMenu';

package/src/extensions/autocomplete.ts

@@ -1,69 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import {
-  type Completion,
-  type CompletionContext,
-  type CompletionResult,
-  type CompletionSource,
-  autocompletion,
-  completionKeymap,
-} from '@codemirror/autocomplete';
-import { markdownLanguage } from '@codemirror/lang-markdown';
-import { type Extension } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
-
-export type AutocompleteResult = Completion;
-
-export type AutocompleteOptions = {
-  activateOnTyping?: boolean;
-  override?: CompletionSource[];
-  onSearch?: (text: string) => Completion[];
-};
-
-// https://codemirror.net/examples/autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.Completion
-
-/**
- * Autocomplete extension.
- */
-export const autocomplete = ({ activateOnTyping, override, onSearch }: AutocompleteOptions = {}): Extension => {
-  const extensions: Extension[] = [
-    // https://codemirror.net/docs/ref/#view.keymap
-    // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
-    // TODO(burdon): Set custom keymap.
-    keymap.of(completionKeymap),
-
-    // https://codemirror.net/examples/autocompletion
-    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
-    autocompletion({
-      override,
-      activateOnTyping,
-      // closeOnBlur: false,
-      // tooltipClass: () => 'rounded-be pbe-1 border-separator',
-    }),
-  ];
-
-  if (onSearch) {
-    extensions.push(
-      // TODO(burdon): Optional decoration via addToOptions.
-      markdownLanguage.data.of({
-        autocomplete: (context: CompletionContext): CompletionResult | null => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || (match.from === match.to && !context.explicit)) {
-            return null;
-          }
-
-          return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase()),
-          };
-        },
-      }),
-    );
-  }
-
-  return extensions;
-};

package/src/extensions/command/action.ts

@@ -1,56 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { StateEffect } from '@codemirror/state';
-import { type Command, type EditorView, type KeyBinding } from '@codemirror/view';
-
-import { commandState } from './state';
-
-export type Action =
-  | {
-      type: 'insert';
-      text: string;
-    }
-  | {
-      type: 'cancel';
-    };
-
-export type ActionHandler = (action: Action) => void;
-
-export const openEffect = StateEffect.define<{ pos: number; fullWidth?: boolean }>();
-export const closeEffect = StateEffect.define<null>();
-
-export const openCommand: Command = (view: EditorView) => {
-  if (view.state.field(commandState, false)) {
-    const selection = view.state.selection.main;
-    const line = view.state.doc.lineAt(selection.from);
-    if (line.from === selection.from && line.from === line.to) {
-      view.dispatch({ effects: openEffect.of({ pos: selection.anchor, fullWidth: true }) });
-      return true;
-    }
-  }
-
-  return false;
-};
-
-export const closeCommand: Command = (view: EditorView) => {
-  if (view.state.field(commandState, false)) {
-    view.dispatch({ effects: closeEffect.of(null) });
-    return true;
-  }
-
-  return false;
-};
-
-export const commandKeyBindings: readonly KeyBinding[] = [
-  {
-    key: '/',
-    preventDefault: true,
-    run: openCommand,
-  },
-  {
-    key: 'Escape',
-    run: closeCommand,
-  },
-];

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

@@ -1,211 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { Prec, RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
-import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, keymap } from '@codemirror/view';
-
-import { type Range } from '../../types';
-
-import { type PlaceholderOptions, placeholder } from './placeholder';
-
-export type CommandMenuOptions = {
-  trigger: string | string[];
-  placeholder?: Partial<PlaceholderOptions>;
-
-  // TODO(burdon): Replace with onKey?
-  onClose?: () => void;
-  onArrowDown?: () => void;
-  onArrowUp?: () => 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,
-      preventDefault: true,
-      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
-        if (
-          line.text.trim() === '' ||
-          selection.head === line.from ||
-          (selection.head > line.from && line.text[selection.head - line.from - 1] === ' ')
-        ) {
-          // Insert and select the trigger.
-          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) });
-    }
-
-    // TODO(burdon): Should delete if user presses escape? How else to insert the trigger character?
-    if (shouldRemove) {
-      options.onClose?.();
-    }
-  });
-
-  return [
-    Prec.highest(commandKeymap),
-    placeholder(
-      Object.assign(
-        {
-          content: `Press '${Array.isArray(options.trigger) ? options.trigger[0] : options.trigger}' for commands`,
-        },
-        options.placeholder,
-      ),
-    ),
-    updateListener,
-    commandMenuState,
-    commandMenuPlugin,
-  ];
-};
-
-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;
-  },
-});

package/src/extensions/command/command.ts

@@ -1,34 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Extension, Prec } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
-
-import { isNonNullable } from '@dxos/util';
-
-import { closeEffect, commandKeyBindings } from './action';
-import { type HintOptions, hint } from './hint';
-import { type PopupOptions, commandConfig, commandState } from './state';
-
-// TODO(burdon): Create knowledge base for CM notes and ideas.
-// https://discuss.codemirror.net/t/inline-code-hints-like-vscode/5533/4
-// 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 & HintOptions>;
-
-export const command = (options: CommandOptions = {}): Extension => {
-  return [
-    Prec.highest(keymap.of(commandKeyBindings)),
-    commandConfig.of(options),
-    commandState,
-    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/hint.ts

@@ -1,103 +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 { clientRectsFor, flattenRect } from '../../util';
-
-import { commandState } from './state';
-
-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/state.ts

@@ -1,90 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { StateField } from '@codemirror/state';
-import { type EditorView, type Tooltip, type TooltipView, showTooltip } from '@codemirror/view';
-
-import { type RenderCallback } from '../../types';
-import { singleValueFacet } from '../../util';
-
-import { type Action, closeEffect, openEffect } from './action';
-import { type CommandOptions } from './command';
-
-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)],
-});