@dxos/react-ui-editor 0.8.4-main.b97322e → 0.8.4-main.dedc0f3

package/src/components/Popover/RefDropdownMenu.tsx

@@ -3,40 +3,45 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useRef, useState, useEffect, useCallback, type RefObject } from 'react';
+import React, { type PropsWithChildren, type RefObject, useCallback, useEffect, useRef, useState } from 'react';
 
 import { addEventListener } from '@dxos/async';
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { type DxAnchor, type DxAnchorActivate } from '@dxos/lit-ui';
 import { DropdownMenu } from '@dxos/react-ui';
 
 import { type PreviewLinkRef, type PreviewLinkTarget, type PreviewLookup } from '../../extensions';
 
-// TODO(burdon): Reconcile this file with RefPopover?
+// TODO(burdon): Move to @dxos/lit-ui
 
-const customEventOptions = { capture: true, passive: false };
+//
+// Context
+//
 
-// Create a context for the dxn value.
 type RefDropdownMenuValue = Partial<{
   link: PreviewLinkRef;
   target: PreviewLinkTarget;
   pending: boolean;
 }>;
 
-const REF_DROPDOWN_MENU = 'RefDropdownMenu';
-const [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext<RefDropdownMenuValue>(REF_DROPDOWN_MENU, {});
+const [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext<RefDropdownMenuValue>('RefDropdownMenu', {});
+
+//
+// Context Provider
+// NOTE: This is handled by the preview-plugin.
+//
 
 type RefDropdownMenuProviderProps = PropsWithChildren<{
   onLookup?: PreviewLookup;
 }>;
 
 const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProviderProps) => {
-  const trigger = useRef<DxRefTag | null>(null);
+  const trigger = useRef<DxAnchor | null>(null);
   const [value, setValue] = useState<RefDropdownMenuValue>({});
   const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
   const [open, setOpen] = useState(false);
 
-  const handleDxRefTagActivate = useCallback(
-    (event: DxRefTagActivate) => {
+  const handleDxAnchorActivate = useCallback(
+    (event: DxAnchorActivate) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value) => ({
         ...value,
@@ -61,7 +66,10 @@ const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProvider
       return;
     }
 
-    return addEventListener(rootRef, 'dx-ref-tag-activate' as any, handleDxRefTagActivate, customEventOptions);
+    return addEventListener(rootRef, 'dx-anchor-activate' as any, handleDxAnchorActivate, {
+      capture: true,
+      passive: false,
+    });
   }, [rootRef]);
 
   return (
@@ -76,10 +84,6 @@ const RefDropdownMenuProvider = ({ children, onLookup }: RefDropdownMenuProvider
   );
 };
 
-export const RefDropdownMenu = {
-  Provider: RefDropdownMenuProvider,
-};
-
-export { useRefDropdownMenu };
+export { RefDropdownMenuProvider };
 
 export type { RefDropdownMenuProviderProps, RefDropdownMenuValue };

package/src/components/Popover/RefPopover.tsx

@@ -5,67 +5,49 @@
 import { createContext } from '@radix-ui/react-context';
 import React, {
   type PropsWithChildren,
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
   type RefObject,
   forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
 } from 'react';
 
 import { addEventListener } from '@dxos/async';
-import { type DxRefTag, type DxRefTagActivate } from '@dxos/lit-ui';
+import { type DxAnchor, type DxAnchorActivate } 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 };
+// TODO(burdon): Move to @dxos/lit-ui
 
-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]);
+//
+// Context
+//
 
-    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>
-    );
-  },
-);
+type RefPopoverValue = Partial<{
+  link: PreviewLinkRef;
+  target: PreviewLinkTarget;
+  pending: boolean;
+}>;
 
-// Create a context for the dxn value.
-type RefPopoverValue = Partial<{ link: PreviewLinkRef; target: PreviewLinkTarget; pending: boolean }>;
+const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>('RefPopover', {});
 
-const REF_POPOVER = 'RefPopover';
-const [RefPopoverContextProvider, useRefPopover] = createContext<RefPopoverValue>(REF_POPOVER, {});
+//
+// ContextProvider
+//
 
-type PreviewProviderProps = PropsWithChildren<{ onLookup?: PreviewLookup }>;
+type PreviewProviderProps = PropsWithChildren<{
+  onLookup?: PreviewLookup;
+}>;
 
 const PreviewProvider = ({ children, onLookup }: PreviewProviderProps) => {
-  const trigger = useRef<DxRefTag | null>(null);
+  const trigger = useRef<DxAnchor | null>(null);
   const [value, setValue] = useState<RefPopoverValue>({});
   const [open, setOpen] = useState(false);
 
-  const handleDxRefTagActivate = useCallback(
-    (event: DxRefTagActivate) => {
+  const handleDxAnchorActivate = useCallback(
+    (event: DxAnchorActivate) => {
       const { refId, label, trigger: dxTrigger } = event;
       setValue((value) => ({
         ...value,
@@ -87,13 +69,49 @@ const PreviewProvider = ({ children, onLookup }: PreviewProviderProps) => {
 
   return (
     <RefPopoverContextProvider pending={value.pending} link={value.link} target={value.target}>
-      <RefPopover ref={trigger} open={open} onOpenChange={setOpen} onActivate={handleDxRefTagActivate}>
+      <RefPopover ref={trigger} open={open} onOpenChange={setOpen} onActivate={handleDxAnchorActivate}>
         {children}
       </RefPopover>
     </RefPopoverContextProvider>
   );
 };
 
-export { PreviewProvider, useRefPopover };
+//
+// Popover
+//
+
+type RefPopoverProps = PropsWithChildren<{
+  modal?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onActivate?: (event: DxAnchorActivate) => void;
+}>;
+
+/**
+ * Wraps components that contain <dx-anchor> elements?
+ */
+const RefPopover = forwardRef<DxAnchor | null, RefPopoverProps>(
+  ({ children, open, onOpenChange, modal, onActivate }, ref) => {
+    const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
+    useEffect(() => {
+      if (!rootRef || !onActivate) {
+        return;
+      }
+
+      return addEventListener(rootRef, 'dx-anchor-activate' as any, onActivate, { capture: true, passive: false });
+    }, [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>
+    );
+  },
+);
+
+export { RefPopover, PreviewProvider, useRefPopover };
 
-export type { PreviewProviderProps, RefPopoverValue };
+export type { RefPopoverProps, PreviewProviderProps, RefPopoverValue };

package/src/defaults.ts

@@ -28,7 +28,9 @@ export const editorSlots: ThemeExtensionsOptions['slots'] = {
 
 export const editorGutter = EditorView.theme({
   '.cm-gutters': {
-    background: 'var(--dx-baseSurface)',
+    // NOTE: Color required to cover content if scrolling horizontally.
+    // TODO(burdon): Non-transparent background clips the focus ring.
+    background: 'var(--dx-baseSurface) !important',
     paddingRight: '1rem',
   },
 });
@@ -42,8 +44,9 @@ export const editorMonospace = EditorView.theme({
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
 
+// NOTE: Padding is added to the editor to account for the focus ring (since otherwise the CM gutter will clip it)
 export const stackItemContentEditorClassNames = (role?: string) =>
   mx(
-    'attention-surface dx-focus-ring-inset data-[toolbar=disabled]:pbs-2',
+    'p-0.5 dx-focus-ring-inset attention-surface data-[toolbar=disabled]:pbs-2',
     role === 'section' ? '[&_.cm-scroller]:overflow-hidden [&_.cm-scroller]:min-bs-24' : 'min-bs-0',
   );

package/src/extensions/autocomplete.ts

@@ -1,69 +1,219 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
+import { type Extension, Prec } from '@codemirror/state';
 import {
-  autocompletion,
-  completionKeymap,
-  type CompletionSource,
-  type Completion,
-  type CompletionContext,
-  type CompletionResult,
-} from '@codemirror/autocomplete';
-import { markdownLanguage } from '@codemirror/lang-markdown';
-import { type Extension } from '@codemirror/state';
-import { keymap } from '@codemirror/view';
-
-export type AutocompleteResult = Completion;
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+  keymap,
+} from '@codemirror/view';
 
 export type AutocompleteOptions = {
-  activateOnTyping?: boolean;
-  override?: CompletionSource[];
-  onSearch?: (text: string) => Completion[];
-};
+  fireIfEmpty?: boolean;
+
+  /**
+   * Callback triggered when Enter is pressed.
+   * @param text The current text in the editor
+   * @returns true if the editor should reset the document.
+   */
+  onSubmit?: (text: string) => boolean | void;
 
-// https://codemirror.net/examples/autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.autocompletion
-// https://codemirror.net/docs/ref/#autocomplete.Completion
+  /**
+   * Function that returns a list of suggestions based on the current text.
+   * @param text The current text before the cursor
+   * @returns Array of suggestion strings
+   */
+  onSuggest?: (text: string) => string[];
+
+  /**
+   * ESC pressed.
+   */
+  onCancel?: () => void;
+};
 
 /**
- * Autocomplete extension.
+ * Creates an autocomplete extension that shows inline suggestions.
+ * Pressing Tab will complete the suggestion.
  */
-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',
+export const autocomplete = ({ fireIfEmpty, onSubmit, onSuggest, onCancel }: AutocompleteOptions): Extension => {
+  const suggest = ViewPlugin.fromClass(
+    class {
+      _decorations: DecorationSet;
+      _currentSuggestion: string | null = null;
+
+      constructor(view: EditorView) {
+        this._decorations = this.computeDecorations(view);
+      }
+
+      update(update: ViewUpdate) {
+        if (update.docChanged || update.selectionSet) {
+          this._decorations = this.computeDecorations(update.view);
+        }
+      }
+
+      private computeDecorations(view: EditorView): DecorationSet {
+        const text = view.state.doc.toString();
+        const suggestions = onSuggest?.(text) ?? [];
+        if (!suggestions.length) {
+          this._currentSuggestion = null;
+          return Decoration.none;
+        }
+
+        // Get the first suggestion.
+        this._currentSuggestion = suggestions[0];
+        const suffix = this._currentSuggestion.slice(text.length);
+        if (!suffix) {
+          return Decoration.none;
+        }
+
+        // Always show ghost text at the end of the document.
+        return Decoration.set([
+          Decoration.widget({
+            widget: new InlineSuggestionWidget(suffix),
+            side: 1,
+          }).range(view.state.doc.length),
+        ]);
+      }
+
+      completeSuggestion(view: EditorView): boolean {
+        if (!this._currentSuggestion) {
+          return false;
+        }
+
+        const text = view.state.doc.toString();
+        const suffix = this._currentSuggestion.slice(text.length);
+        if (!suffix) {
+          return false;
+        }
+
+        view.dispatch({
+          changes: {
+            from: view.state.doc.length,
+            insert: suffix,
+          },
+          selection: {
+            anchor: view.state.doc.length + suffix.length,
+          },
+        });
+
+        return true;
+      }
+    },
+    {
+      decorations: (v) => v._decorations,
+    },
+  );
+
+  return [
+    suggest,
+    EditorView.theme({
+      '.cm-inline-suggestion': {
+        opacity: 0.4,
+      },
     }),
-  ];
 
-  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()),
-          };
+    Prec.highest(
+      keymap.of([
+        {
+          key: 'Tab',
+          preventDefault: true,
+          run: (view) => {
+            const plugin = view.plugin(suggest);
+            return plugin?.completeSuggestion(view) ?? false;
+          },
         },
-      }),
-    );
-  }
+        {
+          key: 'ArrowRight',
+          preventDefault: true,
+          run: (view) => {
+            // Only complete if cursor is at the end
+            if (view.state.selection.main.head !== view.state.doc.length) {
+              return false;
+            }
+
+            const plugin = view.plugin(suggest);
+            return plugin?.completeSuggestion(view) ?? false;
+          },
+        },
+        {
+          key: 'Enter',
+          preventDefault: true,
+          run: (view) => {
+            const text = view.state.doc.toString().trim();
+            if (onSubmit && (fireIfEmpty || text.length > 0)) {
+              const reset = onSubmit(text);
+
+              // Clear the document after calling onEnter.
+              if (reset) {
+                view.dispatch({
+                  changes: {
+                    from: 0,
+                    to: view.state.doc.length,
+                    insert: '',
+                  },
+                });
+              }
+            }
 
-  return extensions;
+            return true;
+          },
+        },
+        {
+          key: 'Shift-Enter',
+          preventDefault: true,
+          run: (view) => {
+            view.dispatch({
+              changes: {
+                from: view.state.selection.main.head,
+                insert: '\n',
+              },
+              selection: {
+                anchor: view.state.selection.main.head + 1,
+                head: view.state.selection.main.head + 1,
+              },
+            });
+            return true;
+          },
+        },
+        {
+          key: 'Escape',
+          preventDefault: true,
+          run: (view) => {
+            // Clear the entire document.
+            view.dispatch({
+              changes: {
+                from: 0,
+                to: view.state.doc.length,
+                insert: '',
+              },
+            });
+            onCancel?.();
+            return true;
+          },
+        },
+      ]),
+    ),
+  ];
 };
+
+class InlineSuggestionWidget extends WidgetType {
+  constructor(private suffix: string) {
+    super();
+  }
+
+  override toDOM(): HTMLSpanElement {
+    const span = document.createElement('span');
+    span.textContent = this.suffix;
+    span.className = 'cm-inline-suggestion';
+    return span;
+  }
+
+  override eq(other: InlineSuggestionWidget): boolean {
+    return other.suffix === this.suffix;
+  }
+}

package/src/extensions/automerge/automerge.stories.tsx

@@ -8,14 +8,15 @@ import '@preact/signals-react';
 
 import { Repo } from '@automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
 import { Obj, Ref, Type } from '@dxos/echo';
-import { DocAccessor, createDocAccessor, useQuery, useSpace, type Space, Query } from '@dxos/react-client/echo';
-import { useIdentity, type Identity } from '@dxos/react-client/halo';
-import { ClientRepeater, type ClientRepeatedComponentProps } from '@dxos/react-client/testing';
+import { DocAccessor, Query, type Space, createDocAccessor, useQuery, useSpace } from '@dxos/react-client/echo';
+import { type Identity, useIdentity } from '@dxos/react-client/halo';
+import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { render, withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { editorSlots } from '../../defaults';
 import { useTextEditor } from '../../hooks';
@@ -41,7 +42,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
     () => ({
       initialValue: DocAccessor.getValue(source),
       extensions: [
-        createBasicExtensions({ placeholder: 'Type here...' }),
+        createBasicExtensions({ placeholder: 'Type here...', search: true }),
         createThemeExtensions({ themeMode, slots: editorSlots }),
         createDataExtensions({ id: 'test', text: source, space, identity }),
       ],
@@ -53,7 +54,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
   return <div ref={parentRef} className='flex w-full' />;
 };
 
-const Story = () => {
+const DefaultStory = () => {
   const [object1, setObject1] = useState<DocAccessor<TestObject>>();
   const [object2, setObject2] = useState<DocAccessor<TestObject>>();
 
@@ -88,16 +89,6 @@ const Story = () => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-editor/Automerge',
-  component: Editor,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: () => <Story />,
-  parameters: {
-    translations,
-  },
-};
-
 const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
@@ -118,9 +109,25 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   return <Editor source={source} space={space} identity={identity ?? undefined} />;
 };
 
-export const Default = {};
+const meta = {
+  title: 'ui/react-ui-editor/Automerge',
+  component: Editor as any,
+  render: render(DefaultStory),
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
 
-export const WithEcho = {
+export const WithEcho: Story = {
   decorators: [withTheme],
   render: () => {
     return (

package/src/extensions/automerge/automerge.ts

@@ -5,15 +5,16 @@
 //
 
 import { next as A } from '@automerge/automerge';
-import { StateField, type Extension } from '@codemirror/state';
+import { type Extension, StateField } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
 import { type DocAccessor } from '@dxos/react-client/echo';
 
+import { Cursor } from '../../util';
+
 import { cursorConverter } from './cursor';
-import { updateHeadsEffect, isReconcile, type State } from './defs';
+import { type State, isReconcile, updateHeadsEffect } from './defs';
 import { Syncer } from './sync';
-import { Cursor } from '../../util';
 
 export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({

package/src/extensions/automerge/defs.ts

@@ -5,7 +5,7 @@
 //
 
 import { type Heads, type Prop } from '@automerge/automerge';
-import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
+import { Annotation, type EditorState, StateEffect, type StateField, type Transaction } from '@codemirror/state';
 
 export type State = {
   path: Prop[];

package/src/extensions/automerge/sync.ts

@@ -10,7 +10,7 @@ import { type EditorView } from '@codemirror/view';
 
 import { type IDocHandle } from '@dxos/react-client/echo';
 
-import { getLastHeads, getPath, isReconcile, reconcileAnnotation, type State, updateHeads } from './defs';
+import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, updateHeads } from './defs';
 import { updateAutomerge } from './update-automerge';
 import { updateCodeMirror } from './update-codemirror';
 

package/src/extensions/automerge/update-automerge.ts

@@ -5,7 +5,7 @@
 //
 
 import { next as A, type Heads } from '@automerge/automerge';
-import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
+import { type EditorState, type StateField, type Text, type Transaction } from '@codemirror/state';
 
 import { type IDocHandle } from '@dxos/react-client/echo';