@dxos/react-ui-editor 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/components/EditorContent/EditorContent.tsx

@@ -0,0 +1,83 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Transaction } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { initialSync } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
+
+import { type UseTextEditorProps, useTextEditor } from '../../hooks';
+
+import { type EditorController, createEditorController } from './controller';
+
+export type EditorContentProps = ThemedClassName<
+  {
+    focusable?: boolean;
+    value?: string;
+    onChange?: (value: string) => void;
+  } & UseTextEditorProps
+>;
+
+/**
+ * Minimal text editor.
+ * NOTE: This shouold not be used with the automerge extension.
+ * @deprecated Use Editor.Content
+ */
+export const EditorContent = forwardRef<EditorController, EditorContentProps>(
+  ({ classNames, id, extensions, selectionEnd, focusable = true, value, onChange, ...props }, forwardedRef) => {
+    const { parentRef, focusAttributes, view } = useTextEditor(
+      () => ({
+        id,
+        initialValue: value,
+        selectionEnd,
+        extensions: [
+          extensions ?? [],
+          EditorView.updateListener.of(({ view, docChanged, transactions }) => {
+            const isInitialSync = transactions.some((tr) => tr.annotation(Transaction.userEvent) === initialSync.value);
+            if (!isInitialSync && docChanged) {
+              onChange?.(view.state.doc.toString());
+            }
+          }),
+        ],
+        ...props,
+      }),
+      [id, extensions, selectionEnd, onChange],
+    );
+
+    // External controller.
+    useImperativeHandle(forwardedRef, () => {
+      return createEditorController(view);
+    }, [id, view]);
+
+    // Set initial value and cursor position.
+    useEffect(() => {
+      requestAnimationFrame(() => {
+        view?.dispatch({
+          annotations: initialSync,
+          changes: value ? [{ from: 0, to: view?.state.doc.length ?? 0, insert: value ?? '' }] : [],
+          selection: selectionEnd ? { anchor: view?.state.doc.length ?? 0 } : undefined,
+        });
+
+        if (selectionEnd) {
+          view?.focus();
+        }
+      });
+    }, [view, value, selectionEnd]);
+
+    return (
+      <div
+        role='none'
+        className={mx(
+          'is-full outline-none focus:border-accentSurface focus-within:border-neutralFocusIndicator',
+          classNames,
+        )}
+        ref={parentRef}
+        {...(focusable ? focusAttributes : {})}
+      />
+    );
+  },
+);

package/src/components/EditorContent/controller.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type EditorView } from '@codemirror/view';
+
+export interface EditorController {
+  get view(): EditorView | null;
+  getText: () => string;
+  setText: (text: string, focus?: boolean) => void;
+  focus: () => void;
+}
+
+export const noopController: EditorController = {
+  get view() {
+    return null;
+  },
+  getText: () => '',
+  setText: () => {},
+  focus: () => {},
+};
+
+export const createEditorController = (view: EditorView | null): EditorController => {
+  return {
+    get view() {
+      return view;
+    },
+    getText: () => {
+      return view?.state.doc.toString() ?? '';
+    },
+    setText: (text: string, focus?: boolean) => {
+      view?.dispatch({
+        changes: {
+          from: 0,
+          to: view?.state.doc.length ?? 0,
+          insert: text,
+        },
+        selection: {
+          anchor: text.length,
+          head: text.length,
+        },
+      });
+
+      if (focus) {
+        view?.focus();
+      }
+    },
+    focus: () => view?.focus(),
+  };
+};

package/src/components/EditorContent/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './controller';
+export * from './EditorContent';

package/src/{extensions/popover/PopoverMenuProvider.tsx → components/EditorMenuProvider/EditorMenuProvider.tsx}

@@ -9,6 +9,7 @@ import React, { Fragment, type PropsWithChildren, useCallback, useEffect, useRef
 import { addEventListener } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
 import {
+  DX_ANCHOR_ACTIVATE,
   type DxAnchorActivate,
   Icon,
   Popover,
@@ -18,18 +19,18 @@ import {
   useTranslation,
 } from '@dxos/react-ui';
 
-import { type PopoverMenuGroup, type PopoverMenuItem } from './menu';
+import { type EditorMenuGroup, type EditorMenuItem } from './menu';
 
-export type PopoverMenuProviderProps = PropsWithChildren<{
+export type EditorMenuProviderProps = PropsWithChildren<{
   view?: EditorView | null;
-  groups?: PopoverMenuGroup[];
+  groups?: EditorMenuGroup[];
   currentItem?: string;
   open?: boolean;
   defaultOpen?: boolean;
   numItems?: number;
   onOpenChange?: (event: { view: EditorView; open: boolean; trigger?: string }) => void;
   onActivate?: (event: { view: EditorView; trigger?: string }) => void;
-  onSelect?: (event: { view: EditorView; item: PopoverMenuItem }) => void;
+  onSelect?: (event: { view: EditorView; item: EditorMenuItem }) => void;
   onCancel?: (event: { view: EditorView }) => void;
 }>;
 
@@ -40,25 +41,25 @@ export type PopoverMenuProviderProps = PropsWithChildren<{
  * NOTE: We don't use DropdownMenu because the command menu needs to manage focus explicitly.
  * I.e., focus must remain in the editor while displaying the menu (for type-ahead).
  */
-export const PopoverMenuProvider = ({
+export const EditorMenuProvider = ({
   children,
   view,
   groups,
   currentItem,
-  open: openParam,
+  open: openProp,
   defaultOpen,
   numItems = 8,
   onOpenChange,
   onActivate,
   onSelect,
   onCancel,
-}: PopoverMenuProviderProps) => {
+}: EditorMenuProviderProps) => {
   const { tx } = useThemeContext();
   const triggerRef = useRef<HTMLButtonElement | null>(null);
-  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+
   const viewRef = useDynamicRef(view);
   const [open, setOpen] = useControllableState({
-    prop: openParam,
+    prop: openProp,
     defaultProp: defaultOpen,
     onChange: (open) => {
       invariant(viewRef.current);
@@ -66,6 +67,7 @@ export const PopoverMenuProvider = ({
     },
   });
 
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
   useEffect(() => {
     if (!root) {
       return;
@@ -74,7 +76,7 @@ export const PopoverMenuProvider = ({
     // Listen for trigger.
     return addEventListener(
       root,
-      'dx-anchor-activate' as any,
+      DX_ANCHOR_ACTIVATE as any,
       (event: DxAnchorActivate) => {
         const { trigger, refId } = event;
 
@@ -108,6 +110,8 @@ export const PopoverMenuProvider = ({
   return (
     <Popover.Root modal={false} open={open} onOpenChange={setOpen}>
       <Popover.VirtualTrigger virtualRef={triggerRef} />
+
+      {/* Menu. */}
       <Popover.Portal>
         <Popover.Content
           align='start'
@@ -135,6 +139,7 @@ export const PopoverMenuProvider = ({
         </Popover.Content>
       </Popover.Portal>
 
+      {/* Content */}
       <div ref={setRoot} role='none' className='contents'>
         {children}
       </div>
@@ -147,7 +152,7 @@ export const PopoverMenuProvider = ({
 //
 
 type MenuProps = {
-  groups: PopoverMenuGroup[];
+  groups: EditorMenuGroup[];
 } & Pick<MenuGroupProps, 'currentItem' | 'onSelect'>;
 
 const Menu = ({ groups, currentItem, onSelect }: MenuProps) => {
@@ -164,8 +169,12 @@ const Menu = ({ groups, currentItem, onSelect }: MenuProps) => {
   );
 };
 
+//
+// Menu Group
+//
+
 type MenuGroupProps = {
-  group: PopoverMenuGroup;
+  group: EditorMenuGroup;
   currentItem?: string;
 } & Pick<MenuItemProps, 'onSelect'>;
 
@@ -188,10 +197,14 @@ const MenuGroup = ({ group, currentItem, onSelect }: MenuGroupProps) => {
   );
 };
 
+//
+// Menu Item
+//
+
 type MenuItemProps = {
-  item: PopoverMenuItem;
+  item: EditorMenuItem;
   current: boolean;
-  onSelect?: (item: PopoverMenuItem) => void;
+  onSelect?: (item: EditorMenuItem) => void;
 };
 
 const MenuItem = ({ item, current, onSelect }: MenuItemProps) => {

package/src/components/EditorMenuProvider/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './menu';
+export * from './menu-presets';
+export * from './popover';
+
+export * from './EditorMenuProvider';
+export * from './useEditorMenu';

package/src/{extensions/popover → components/EditorMenuProvider}/menu-presets.ts

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { popoverRangeEffect } from '../../extensions';
+import { insertAtLineStart } from '@dxos/ui-editor';
 
-import { type PopoverMenuGroup } from './menu';
-import { insertAtLineStart } from './util';
+import { type EditorMenuGroup } from './menu';
+import { popoverRangeEffect } from './popover';
 
-export const formattingCommands: PopoverMenuGroup = {
+export const formattingCommands: EditorMenuGroup = {
   id: 'markdown',
   label: 'Markdown',
   items: [
@@ -15,78 +15,78 @@ export const formattingCommands: PopoverMenuGroup = {
       id: 'heading-1',
       label: 'Heading 1',
       icon: 'ph--text-h-one--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '# '),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '# '),
     },
     {
       id: 'heading-2',
       label: 'Heading 2',
       icon: 'ph--text-h-two--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '## '),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '## '),
     },
     {
       id: 'heading-3',
       label: 'Heading 3',
       icon: 'ph--text-h-three--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '### '),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '### '),
     },
     {
       id: 'heading-4',
       label: 'Heading 4',
       icon: 'ph--text-h-four--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '#### '),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '#### '),
     },
     {
       id: 'heading-5',
       label: 'Heading 5',
       icon: 'ph--text-h-five--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '##### '),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '##### '),
     },
     {
       id: 'heading-6',
       label: 'Heading 6',
       icon: 'ph--text-h-six--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '###### '),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '###### '),
     },
     {
       id: 'bullet-list',
       label: 'Bullet List',
       icon: 'ph--list-bullets--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '- '),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '- '),
     },
     {
       id: 'numbered-list',
       label: 'Numbered List',
       icon: 'ph--list-numbers--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '1. '),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '1. '),
     },
     {
       id: 'task-list',
       label: 'Task List',
       icon: 'ph--list-checks--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '- [ ] '),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '- [ ] '),
     },
     {
       id: 'quote',
       label: 'Quote',
       icon: 'ph--quotes--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '> '),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '> '),
     },
     {
       id: 'code-block',
       label: 'Code Block',
       icon: 'ph--code-block--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '```\n\n```'),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '```\n\n```'),
     },
     {
       id: 'table',
       label: 'Table',
       icon: 'ph--table--regular',
-      onSelect: (view, head) => insertAtLineStart(view, head, '| | | |\n|---|---|---|\n| | | |'),
+      onSelect: ({ view, head }) => insertAtLineStart(view, head, '| | | |\n|---|---|---|\n| | | |'),
     },
   ],
 };
 
-export const linkSlashCommands: PopoverMenuGroup = {
+export const linkSlashCommands: EditorMenuGroup = {
   id: 'link',
   label: 'Link',
   items: [
@@ -94,7 +94,7 @@ export const linkSlashCommands: PopoverMenuGroup = {
       id: 'inline-link',
       label: 'Inline link',
       icon: 'ph--link--regular',
-      onSelect: (view, head) => {
+      onSelect: ({ view, head }) => {
         view.dispatch({
           changes: { from: head, insert: '@' },
           selection: { anchor: head + 1, head: head + 1 },
@@ -109,7 +109,7 @@ export const linkSlashCommands: PopoverMenuGroup = {
       id: 'block-embed',
       label: 'Block embed',
       icon: 'ph--lego--regular',
-      onSelect: (view, head) => {
+      onSelect: ({ view, head }) => {
         view.dispatch({
           changes: { from: head, insert: '@@' },
           selection: { anchor: head + 2, head: head + 2 },

package/src/{extensions/popover → components/EditorMenuProvider}/menu.ts

@@ -5,34 +5,33 @@
 import { type EditorView } from '@codemirror/view';
 
 import { type Label } from '@dxos/react-ui';
+import { insertAtCursor } from '@dxos/ui-editor';
 import { type MaybePromise } from '@dxos/util';
 
-import { insertAtCursor } from './util';
-
-export type PopoverMenuGroup = {
+export type EditorMenuGroup = {
   id: string;
   label?: Label;
-  items: PopoverMenuItem[];
+  items: EditorMenuItem[];
 };
 
-export type PopoverMenuItem = {
+export type EditorMenuItem = {
   id: string;
   label: Label;
   icon?: string;
-  onSelect?: (view: EditorView, head: number) => MaybePromise<void>;
+  onSelect?: (event: { view: EditorView; head: number }) => MaybePromise<void>;
 };
 
-export const getMenuItem = (groups: PopoverMenuGroup[], id?: string): PopoverMenuItem | undefined => {
+export const getMenuItem = (groups: EditorMenuGroup[], id?: string): EditorMenuItem | undefined => {
   return groups.flatMap((group) => group.items).find((item) => item.id === id);
 };
 
-export const getNextMenuItem = (groups: PopoverMenuGroup[], id?: string): PopoverMenuItem => {
+export const getNextMenuItem = (groups: EditorMenuGroup[], id?: string): EditorMenuItem => {
   const items = groups.flatMap((group) => group.items);
   const index = items.findIndex((item) => item.id === id);
   return index < items.length - 1 ? items[index + 1] : items[index];
 };
 
-export const getPreviousMenuItem = (groups: PopoverMenuGroup[], id?: string): PopoverMenuItem => {
+export const getPreviousMenuItem = (groups: EditorMenuGroup[], id?: string): EditorMenuItem => {
   const items = groups.flatMap((group) => group.items);
   const index = items.findIndex((item) => item.id === id);
   return index > 0 ? items[index - 1] : items[index];
@@ -41,25 +40,29 @@ export const getPreviousMenuItem = (groups: PopoverMenuGroup[], id?: string): Po
 export const createMenuGroup = ({
   id = 'menu',
   label,
+  filter,
   items,
 }: {
   id?: string;
   label?: Label;
+  filter?: string;
   items: string[];
-}): PopoverMenuGroup => ({
+}): EditorMenuGroup => ({
   id,
   label,
-  items: items.map((item, i) => ({
-    id: `${id}-${i}`,
-    label: item,
-    onSelect: (view, head) => insertAtCursor(view, head, item),
-  })),
+  items: items
+    .filter((item) => !filter || item.toLowerCase().includes(filter.toLowerCase()))
+    .map((item, i) => ({
+      id: `${id}-${i}`,
+      label: item,
+      onSelect: ({ view, head }) => insertAtCursor(view, head, item),
+    })),
 });
 
 export const filterMenuGroups = (
-  groups: PopoverMenuGroup[],
-  filter: (item: PopoverMenuItem) => boolean,
-): PopoverMenuGroup[] => {
+  groups: EditorMenuGroup[],
+  filter: (item: EditorMenuItem) => boolean,
+): EditorMenuGroup[] => {
   return groups.map((group) => ({
     ...group,
     items: group.items.filter(filter),

package/src/{extensions/popover → components/EditorMenuProvider}/popover.ts

@@ -13,13 +13,9 @@ import {
   keymap,
 } from '@codemirror/view';
 
+import { type PlaceholderOptions, type Range, modalStateField, placeholder } from '@dxos/ui-editor';
 import { isNonNullable, isTruthy } from '@dxos/util';
 
-import { type Range } from '../../types';
-import { type PlaceholderOptions, placeholder } from '../autocomplete';
-
-import { modalStateField } from './modal';
-
 const DELIMITERS = [' ', ':'];
 
 export type PopoverOptions = {
@@ -107,8 +103,8 @@ const popoverKeymap = (options: PopoverOptions) => {
         key: trigger,
         run: (view: EditorView) => {
           // Determine if we should trigger the popover:
-          // 1. Empty lines or at the beginning of a line
-          // 2. When there's a preceding space
+          // 1. Empty lines or at the beginning of a line.
+          // 2. When there's a preceding space.
           const selection = view.state.selection.main;
           const line = view.state.doc.lineAt(selection.head);
           if (

package/src/{extensions/popover/usePopoverMenu.ts → components/EditorMenuProvider/useEditorMenu.ts}

@@ -7,13 +7,13 @@ import { type EditorState } from '@codemirror/state';
 import { type RefObject, useCallback, useMemo, useRef, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
+import { modalStateEffect } from '@dxos/ui-editor';
 import { type MaybePromise } from '@dxos/util';
 
-import { type PopoverMenuGroup, type PopoverMenuItem } from './menu';
+import { type EditorMenuProviderProps } from './EditorMenuProvider';
+import { type EditorMenuGroup, type EditorMenuItem } from './menu';
 import { filterMenuGroups, getMenuItem, getNextMenuItem, getPreviousMenuItem } from './menu';
-import { modalStateEffect } from './modal';
 import { type PopoverOptions, popover, popoverRangeEffect, popoverStateField } from './popover';
-import { type PopoverMenuProviderProps } from './PopoverMenuProvider';
 
 export type GetMenuContext = {
   state: EditorState;
@@ -22,36 +22,36 @@ export type GetMenuContext = {
   trigger?: string;
 };
 
-export type UsePopoverMenuProps = {
+export type UseEditorMenuProps = {
   filter?: boolean;
-  getMenu?: (context: GetMenuContext) => MaybePromise<PopoverMenuGroup[]>;
+  getMenu?: (context: GetMenuContext) => MaybePromise<EditorMenuGroup[]>;
 } & Pick<PopoverOptions, 'trigger' | 'triggerKey' | 'placeholder'>;
 
-export type UsePopoverMenu = {
-  groupsRef: RefObject<PopoverMenuGroup[]>;
+export type UseEditorMenu = {
+  groupsRef: RefObject<EditorMenuGroup[]>;
   extension: Extension;
-} & Pick<PopoverMenuProviderProps, 'currentItem' | 'open' | 'onOpenChange' | 'onActivate' | 'onSelect' | 'onCancel'>;
+} & Pick<EditorMenuProviderProps, 'currentItem' | 'open' | 'onOpenChange' | 'onActivate' | 'onSelect' | 'onCancel'>;
 
 /**
  * ```tsx
- * const { groupsRef, extension, ...menuProps } = usePopoverMenu();
+ * const { groupsRef, extension, ...menuProps } = useEditorMenu();
  * const { parentRef, viewRef } = useTextEditor({ extensions: [extension] });
  * return (
- *   <PopoverMenuProvider view={viewRef.current} groups={groupsRef.current} {...menuProps}>
+ *   <EditorMenuProvider view={viewRef.current} groups={groupsRef.current} {...menuProps}>
  *     <div ref={parentRef} />
- *   </PopoverMenuProvider>
+ *   </EditorMenuProvider>
  * );
  * ```
  */
-export const usePopoverMenu = ({
+export const useEditorMenu = ({
   trigger,
   triggerKey,
   placeholder,
   filter = true,
   getMenu,
-}: UsePopoverMenuProps): UsePopoverMenu => {
-  const groupsRef = useRef<PopoverMenuGroup[]>([]);
-  const currentRef = useRef<PopoverMenuItem | null>(null);
+}: UseEditorMenuProps): UseEditorMenu => {
+  const groupsRef = useRef<EditorMenuGroup[]>([]);
+  const currentRef = useRef<EditorMenuItem | null>(null);
   const [currentItem, setCurrentItem] = useState<string>();
   const [open, setOpen] = useState(false);
   const [_, refresh] = useState({});
@@ -59,7 +59,7 @@ export const usePopoverMenu = ({
   /**
    * Get filtered options.
    */
-  const getMenuOptions = useCallback<NonNullable<UsePopoverMenuProps['getMenu']>>(
+  const getMenuOptions = useCallback<NonNullable<UseEditorMenuProps['getMenu']>>(
     async ({ text, trigger, ...props }) => {
       const groups = (await getMenu?.({ text, trigger, ...props })) ?? [];
       return filter
@@ -71,7 +71,7 @@ export const usePopoverMenu = ({
     [getMenu, filter],
   );
 
-  const handleOpenChange = useCallback<NonNullable<UsePopoverMenu['onOpenChange']>>(
+  const handleOpenChange = useCallback<NonNullable<UseEditorMenu['onOpenChange']>>(
     async ({ view, open }) => {
       invariant(view);
       setOpen(open);
@@ -93,7 +93,7 @@ export const usePopoverMenu = ({
     [getMenuOptions],
   );
 
-  const handleActivate = useCallback<NonNullable<UsePopoverMenu['onActivate']>>(
+  const handleActivate = useCallback<NonNullable<UseEditorMenu['onActivate']>>(
     async ({ view, trigger }) => {
       const item = getMenuItem(groupsRef.current, currentItem);
       if (item) {
@@ -107,11 +107,11 @@ export const usePopoverMenu = ({
     [open, handleOpenChange],
   );
 
-  const handleSelect = useCallback<NonNullable<UsePopoverMenu['onSelect']>>(({ view, item }) => {
-    void item.onSelect?.(view, view.state.selection.main.head);
+  const handleSelect = useCallback<NonNullable<UseEditorMenu['onSelect']>>(({ view, item }) => {
+    void item.onSelect?.({ view, head: view.state.selection.main.head });
   }, []);
 
-  const handleCancel = useCallback<NonNullable<UsePopoverMenu['onCancel']>>(({ view }) => {
+  const handleCancel = useCallback<NonNullable<UseEditorMenu['onCancel']>>(({ view }) => {
     // Delete trigger.
     const { range, trigger } = view.state.field(popoverStateField) ?? {};
     if (range && trigger) {