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

package/src/components/EditorPreviewProvider/EditorPreviewProvider.tsx

@@ -0,0 +1,81 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, type RefObject, useCallback, useEffect, useRef, useState } from 'react';
+
+import { addEventListener } from '@dxos/async';
+import { DX_ANCHOR_ACTIVATE, type DxAnchorActivate, Popover } from '@dxos/react-ui';
+import { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/ui-editor';
+
+type EditorPreviewPopoverValue = Partial<{
+  link: PreviewLinkRef;
+  target: PreviewLinkTarget;
+  pending: boolean;
+}>;
+
+const [EditorPreviewContextProvider, useEditorPreview] = createContext<EditorPreviewPopoverValue>('PreviewPopover', {});
+
+export type EditorPreviewProviderProps = PropsWithChildren<{
+  onLookup?: (link: PreviewLinkRef) => Promise<PreviewLinkTarget | null | undefined>;
+}>;
+
+/**
+ * NOTE: In Composer, the DeckPlugin provides the Popover.Root as part of the DeckLayout.
+ */
+// TOOD(burdon): Reconcile with PreviewPlugin.
+export const EditorPreviewProvider = ({ children, onLookup }: EditorPreviewProviderProps) => {
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const [value, setValue] = useState<EditorPreviewPopoverValue>({});
+  const [open, setOpen] = useState(false);
+
+  const handleActivate = useCallback(
+    (event: DxAnchorActivate) => {
+      const { refId, label, trigger: dxTrigger } = event;
+      setValue((value) => ({
+        ...value,
+        link: { label, ref: refId },
+        pending: true,
+      }));
+
+      triggerRef.current = dxTrigger;
+      queueMicrotask(() => setOpen(true));
+      void onLookup?.({ label, ref: refId }).then((target) =>
+        setValue((value) => ({
+          ...value,
+          target: target ?? undefined,
+          pending: false,
+        })),
+      );
+    },
+    [onLookup],
+  );
+
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (!root || !handleActivate) {
+      return;
+    }
+
+    return addEventListener(root, DX_ANCHOR_ACTIVATE as any, handleActivate, {
+      capture: true,
+      passive: false,
+    });
+  }, [root, handleActivate]);
+
+  return (
+    <EditorPreviewContextProvider pending={value.pending} link={value.link} target={value.target}>
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.VirtualTrigger virtualRef={triggerRef as unknown as RefObject<HTMLButtonElement>} />
+
+        {/* Content */}
+        <div ref={setRoot} role='none' className='contents'>
+          {children}
+        </div>
+      </Popover.Root>
+    </EditorPreviewContextProvider>
+  );
+};
+
+export { useEditorPreview };

package/src/components/EditorPreviewProvider/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './EditorPreviewProvider';

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -2,28 +2,29 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { type EditorView } from '@codemirror/view';
+import { Atom } from '@effect-atom/atom-react';
 import React, { memo, useMemo } from 'react';
 
-import { rxFromSignal } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
 import {
   type ActionGraphProps,
+  type MenuAction,
   MenuProvider,
   ToolbarMenu,
   createGapSeparator,
   useMenuActions,
 } from '@dxos/react-ui-menu';
+import { type EditorViewMode } from '@dxos/ui-editor';
 
-import { type EditorViewMode } from '../../types';
-
+import { createLists } from './actions';
 import { createBlocks } from './blocks';
 import { createFormatting } from './formatting';
 import { createHeadings } from './headings';
 import { createImageUpload } from './image';
-import { createLists } from './lists';
 import { createSearch } from './search';
-import { type EditorToolbarActionGraphProps } from './util';
+import { type EditorToolbarState } from './useEditorToolbar';
 import { createViewMode } from './view-mode';
 
 export type EditorToolbarFeatureFlags = Partial<{
@@ -38,20 +39,29 @@ export type EditorToolbarFeatureFlags = Partial<{
   onViewModeChange: (mode: EditorViewMode) => void;
 }>;
 
+export type EditorToolbarActionGraphProps = {
+  state: Atom.Atom<EditorToolbarState>;
+  getView: () => EditorView;
+  // TODO(wittjosiah): Control positioning.
+  customActions?: Atom.Atom<ActionGraphProps>;
+};
+
 export type EditorToolbarProps = ThemedClassName<
   {
     role?: string;
     attendableId?: string;
+    /** Handler for executing actions. Required when customActions use Operation.invoke. */
+    onAction?: (action: MenuAction, params: Node.InvokeProps) => void;
   } & (EditorToolbarActionGraphProps & EditorToolbarFeatureFlags)
 >;
 
 // TODO(burdon): Remove role dependency.
-export const EditorToolbar = memo(({ classNames, role, attendableId, ...props }: EditorToolbarProps) => {
+export const EditorToolbar = memo(({ classNames, role, attendableId, onAction, ...props }: EditorToolbarProps) => {
   const menuProps = useEditorToolbarActionGraph(props);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menuProps} attendableId={attendableId}>
+      <MenuProvider {...menuProps} attendableId={attendableId} onAction={onAction}>
         <ToolbarMenu classNames={classNames} textBlockWidth />
       </MenuProvider>
     </ElevationProvider>
@@ -89,8 +99,8 @@ const createToolbarActions = ({
   getView,
   customActions,
   ...features
-}: ToolbarActionsProps): Rx.Rx<ActionGraphProps> => {
-  return Rx.make((get) => {
+}: ToolbarActionsProps): Atom.Atom<ActionGraphProps> => {
+  return Atom.make((get) => {
     const graph: ActionGraphProps = {
       nodes: [],
       edges: [],
@@ -102,20 +112,23 @@ const createToolbarActions = ({
       graph.edges.push(...subGraph.edges);
     };
 
+    // Subscribe to state changes.
+    const stateSnapshot = get(state);
+
     if (features?.showHeadings ?? true) {
-      addSubGraph(graph, get(rxFromSignal(() => createHeadings(state, getView))));
+      addSubGraph(graph, createHeadings(stateSnapshot, getView));
     }
     if (features?.showFormatting ?? true) {
-      addSubGraph(graph, get(rxFromSignal(() => createFormatting(state, getView))));
+      addSubGraph(graph, createFormatting(stateSnapshot, getView));
     }
     if (features?.showLists ?? true) {
-      addSubGraph(graph, get(rxFromSignal(() => createLists(state, getView))));
+      addSubGraph(graph, createLists(stateSnapshot, getView));
     }
     if (features?.showBlocks ?? true) {
-      addSubGraph(graph, get(rxFromSignal(() => createBlocks(state, getView))));
+      addSubGraph(graph, createBlocks(stateSnapshot, getView));
     }
     if (features?.onImageUpload) {
-      addSubGraph(graph, get(rxFromSignal(() => createImageUpload(features.onImageUpload!))));
+      addSubGraph(graph, createImageUpload(features.onImageUpload!));
     }
 
     addSubGraph(graph, createGapSeparator());
@@ -124,10 +137,10 @@ const createToolbarActions = ({
       addSubGraph(graph, get(customActions));
     }
     if (features?.showSearch ?? true) {
-      addSubGraph(graph, get(rxFromSignal(() => createSearch(getView))));
+      addSubGraph(graph, createSearch(getView));
     }
     if (features?.onViewModeChange) {
-      addSubGraph(graph, get(rxFromSignal(() => createViewMode(state, features.onViewModeChange!))));
+      addSubGraph(graph, createViewMode(stateSnapshot, features.onViewModeChange!));
     }
 
     return graph;

package/src/components/EditorToolbar/{lists.ts → actions.ts}

@@ -4,12 +4,19 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
-import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type Node } from '@dxos/app-graph';
+import {
+  type MenuItemGroup,
+  type ToolbarMenuActionGroupProperties,
+  createMenuAction,
+  createMenuItemGroup,
+} from '@dxos/react-ui-menu';
+import { List, addList, removeList } from '@dxos/ui-editor';
+import { type MenuActionProperties } from '@dxos/ui-types';
 
-import { List, addList, removeList } from '../../extensions';
+import { translationKey } from '../../translations';
 
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { type EditorToolbarState } from './useEditorToolbar';
 
 const listStyles = {
   bullet: 'ph--list-bullets--regular',
@@ -17,6 +24,43 @@ const listStyles = {
   task: 'ph--list-checks--regular',
 };
 
+export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
+  const value = state.listStyle ?? '';
+  const listGroupAction = createListGroupAction(value);
+  const listActionsMap = createListActions(value, getView);
+  return {
+    nodes: [listGroupAction as Node.NodeArg<any>, ...listActionsMap],
+    edges: [
+      { source: 'root', target: 'list' },
+      ...listActionsMap.map(({ id }) => ({ source: listGroupAction.id, target: id })),
+    ],
+  };
+};
+
+export const createEditorAction = (id: string, props: Partial<MenuActionProperties>, invoke: () => void) => {
+  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
+
+  return createMenuAction(id, invoke, {
+    label,
+    ...rest,
+  }) as Node.Action<MenuActionProperties>;
+};
+
+export const createEditorActionGroup = (
+  id: string,
+  props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
+  icon?: string,
+): MenuItemGroup<ToolbarMenuActionGroupProperties> => {
+  const { label = [`${id} label`, { ns: translationKey }], ...rest } = props;
+
+  return createMenuItemGroup(id, {
+    label,
+    icon,
+    iconOnly: true,
+    ...rest,
+  }) as MenuItemGroup<ToolbarMenuActionGroupProperties>;
+};
+
 const createListGroupAction = (value: string) =>
   createEditorActionGroup('list', {
     variant: 'toggleGroup',
@@ -41,16 +85,3 @@ const createListActions = (value: string, getView: () => EditorView) =>
       }
     });
   });
-
-export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
-  const value = state.listStyle ?? '';
-  const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value, getView);
-  return {
-    nodes: [listGroupAction as NodeArg<any>, ...listActionsMap],
-    edges: [
-      { source: 'root', target: 'list' },
-      ...listActionsMap.map(({ id }) => ({ source: listGroupAction.id, target: id })),
-    ],
-  };
-};

package/src/components/EditorToolbar/blocks.ts

@@ -4,12 +4,12 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '@dxos/ui-editor';
 
-import { addBlockquote, addCodeblock, insertTable, removeBlockquote, removeCodeblock } from '../../extensions';
-
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { createEditorAction, createEditorActionGroup } from './actions';
+import { type EditorToolbarState } from './useEditorToolbar';
 
 const createBlockGroupAction = (value: string) =>
   createEditorActionGroup('block', {
@@ -50,7 +50,7 @@ export const createBlocks = (state: EditorToolbarState, getView: () => EditorVie
   const blockGroupAction = createBlockGroupAction(value);
   const blockActions = createBlockActions(value, getView, state.blankLine);
   return {
-    nodes: [blockGroupAction as NodeArg<any>, ...blockActions],
+    nodes: [blockGroupAction as Node.NodeArg<any>, ...blockActions],
     edges: [
       { source: 'root', target: 'block' },
       ...blockActions.map(({ id }) => ({ source: blockGroupAction.id, target: id })),

package/src/components/EditorToolbar/formatting.ts

@@ -4,12 +4,12 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type Formatting, Inline, addLink, removeLink, setStyle } from '@dxos/ui-editor';
 
-import { type Formatting, Inline, addLink, removeLink, setStyle } from '../../extensions';
-
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { createEditorAction, createEditorActionGroup } from './actions';
+import { type EditorToolbarState } from './useEditorToolbar';
 
 const formats = {
   strong: 'ph--text-b--regular',
@@ -56,7 +56,7 @@ export const createFormatting = (state: EditorToolbarState, getView: () => Edito
   const formattingGroupAction = createFormattingGroup(state);
   const formattingActions = createFormattingActions(state, getView);
   return {
-    nodes: [formattingGroupAction as NodeArg<any>, ...formattingActions],
+    nodes: [formattingGroupAction as Node.NodeArg<any>, ...formattingActions],
     edges: [
       { source: 'root', target: 'formatting' },
       ...formattingActions.map(({ id }) => ({ source: formattingGroupAction.id, target: id })),

package/src/components/EditorToolbar/headings.ts

@@ -4,13 +4,14 @@
 
 import { type EditorView } from '@codemirror/view';
 
-import { type NodeArg } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { setHeading } from '@dxos/ui-editor';
 
-import { setHeading } from '../../extensions';
 import { translationKey } from '../../translations';
 
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { createEditorAction, createEditorActionGroup } from './actions';
+import { type EditorToolbarState } from './useEditorToolbar';
 
 const createHeadingGroupAction = (value: string) =>
   createEditorActionGroup(
@@ -58,7 +59,7 @@ export const createHeadings = (state: EditorToolbarState, getView: () => EditorV
   const headingGroupAction = createHeadingGroupAction(headingValue);
   const headingActions = createHeadingActions(headingValue, getView);
   return {
-    nodes: [headingGroupAction as NodeArg<any>, ...headingActions],
+    nodes: [headingGroupAction as Node.NodeArg<any>, ...headingActions],
     edges: [
       { source: 'root', target: 'heading' },
       ...headingActions.map(({ id }) => ({ source: headingGroupAction.id, target: id })),

package/src/components/EditorToolbar/image.ts

@@ -2,7 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { createEditorAction } from './util';
+import { type Node } from '@dxos/app-graph';
+
+import { createEditorAction } from './actions';
 
 const createImageUploadAction = (onImageUpload: () => void) =>
   createEditorAction(
@@ -14,7 +16,12 @@ const createImageUploadAction = (onImageUpload: () => void) =>
     onImageUpload,
   );
 
-export const createImageUpload = (onImageUpload: () => void) => ({
+export const createImageUpload = (
+  onImageUpload: () => void,
+): {
+  nodes: Node.NodeArg<any>[];
+  edges: Array<{ source: string; target: string }>;
+} => ({
   nodes: [createImageUploadAction(onImageUpload)],
   edges: [{ source: 'root', target: 'image' }],
 });

package/src/components/EditorToolbar/index.ts

@@ -3,10 +3,6 @@
 //
 
 export * from './EditorToolbar';
-export {
-  type EditorToolbarState,
-  type EditorToolbarActionGraphProps,
-  useEditorToolbarState,
-  createEditorAction,
-  createEditorActionGroup,
-} from './util';
+
+export { createEditorAction, createEditorActionGroup } from './actions';
+export { type EditorToolbarState, useEditorToolbar } from './useEditorToolbar';

package/src/components/EditorToolbar/search.ts

@@ -5,7 +5,9 @@
 import { openSearchPanel } from '@codemirror/search';
 import { type EditorView } from '@codemirror/view';
 
-import { createEditorAction } from './util';
+import { type Node } from '@dxos/app-graph';
+
+import { createEditorAction } from './actions';
 
 const createSearchAction = (getView: () => EditorView) =>
   createEditorAction(
@@ -17,7 +19,12 @@ const createSearchAction = (getView: () => EditorView) =>
     () => openSearchPanel(getView()),
   );
 
-export const createSearch = (getView: () => EditorView) => ({
+export const createSearch = (
+  getView: () => EditorView,
+): {
+  nodes: Node.NodeArg<any>[];
+  edges: Array<{ source: string; target: string }>;
+} => ({
   nodes: [createSearchAction(getView)],
   edges: [{ source: 'root', target: 'search' }],
 });

package/src/components/EditorToolbar/useEditorToolbar.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import { useMemo } from 'react';
+
+import { type EditorViewMode, type Formatting } from '@dxos/ui-editor';
+
+// TODO(burdon): Move to extensions.
+export type EditorToolbarState = { viewMode?: EditorViewMode } & Formatting;
+
+/**
+ * Creates an atom for editor toolbar state.
+ * @deprecated Use Editor.Root
+ */
+export const useEditorToolbar = (initialState: EditorToolbarState = {}): Atom.Writable<EditorToolbarState> => {
+  // TODO(wittjosiah): Including initialState in the deps causes reactivity issues.
+  return useMemo(() => Atom.make<EditorToolbarState>(initialState), []);
+};

package/src/components/EditorToolbar/view-mode.ts

@@ -2,13 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type NodeArg } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
+import { type EditorViewMode } from '@dxos/ui-editor';
 
 import { translationKey } from '../../translations';
-import { type EditorViewMode } from '../../types';
 
-import { type EditorToolbarState, createEditorAction, createEditorActionGroup } from './util';
+import { createEditorAction, createEditorActionGroup } from './actions';
+import { type EditorToolbarState } from './useEditorToolbar';
 
 const createViewModeGroupAction = (value: string) =>
   createEditorActionGroup(
@@ -45,7 +46,7 @@ export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mod
   const viewModeGroupAction = createViewModeGroupAction(value);
   const viewModeActions = createViewModeActions(value, onViewModeChange);
   return {
-    nodes: [viewModeGroupAction as NodeArg<any>, ...viewModeActions],
+    nodes: [viewModeGroupAction as Node.NodeArg<any>, ...viewModeActions],
     edges: [
       { source: 'root', target: 'viewMode' },
       ...viewModeActions.map(({ id }) => ({ source: viewModeGroupAction.id, target: id })),

package/src/components/index.ts

@@ -3,4 +3,9 @@
 //
 
 export * from './Editor';
-export * from './EditorToolbar';
+
+// TODO(burdon): Remove once Editor is fully migrated.
+export { EditorContent, createEditorController } from './EditorContent';
+export * from './EditorMenuProvider';
+export * from './EditorPreviewProvider';
+export { EditorToolbar, type EditorToolbarProps, type EditorToolbarState, useEditorToolbar } from './EditorToolbar';

package/src/hooks/useTextEditor.ts

@@ -17,11 +17,15 @@ import {
 } from 'react';
 
 import { log } from '@dxos/log';
+import {
+  type EditorSelection,
+  createEditorStateTransaction,
+  debugDispatcher,
+  documentId,
+  modalStateField,
+} from '@dxos/ui-editor';
 import { type MaybeProvider, getProviderValue, isTruthy } from '@dxos/util';
 
-import { type EditorSelection, createEditorStateTransaction, documentId, modalStateField } from '../extensions';
-import { debugDispatcher } from '../util';
-
 let instanceCount = 0;
 
 export type CursorInfo = {
@@ -46,7 +50,7 @@ export type UseTextEditorProps = Pick<EditorStateConfig, 'extensions'> & {
   autoFocus?: boolean;
   scrollTo?: number;
   selection?: EditorSelection;
-  moveToEndOfLine?: boolean;
+  selectionEnd?: boolean;
   debug?: boolean;
 };
 
@@ -57,7 +61,7 @@ export const useTextEditor = (
   props: MaybeProvider<UseTextEditorProps> = {},
   deps: DependencyList = [],
 ): UseTextEditor => {
-  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } =
+  const { id, doc, initialValue, extensions, autoFocus, scrollTo, selection, selectionEnd, debug } =
     useMemo<UseTextEditorProps>(() => getProviderValue(props), deps ?? []);
 
   // NOTE: Increments by 2 in strict mode.
@@ -75,7 +79,7 @@ export const useTextEditor = (
         if (selection.anchor <= initialValue.length && (selection?.head ?? 0) <= initialValue.length) {
           initialSelection = selection;
         }
-      } else if (moveToEndOfLine && selection === undefined) {
+      } else if (selectionEnd && selection === undefined) {
         const index = initialValue?.indexOf('\n');
         const anchor = !index || index === -1 ? 0 : index;
         initialSelection = { anchor };
@@ -104,7 +108,7 @@ export const useTextEditor = (
       });
 
       // Move to end of line after document loaded (unless selection is specified).
-      if (moveToEndOfLine && !initialSelection) {
+      if (selectionEnd && !initialSelection) {
         const { to } = view.state.doc.lineAt(0);
         if (to) {
           view.dispatch({ selection: { anchor: to } });
@@ -156,7 +160,9 @@ export const useTextEditor = (
           element?.focus();
           break;
         }
+
         case 'Enter': {
+          event.preventDefault();
           if (target === currentTarget) {
             view?.focus();
           }

package/src/index.ts

@@ -4,17 +4,7 @@
 
 import { translations } from './translations';
 
-export { type Extension, EditorState } from '@codemirror/state';
-export { EditorView, keymap } from '@codemirror/view';
-export { tags } from '@lezer/highlight';
-
-export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
-
 export * from './components';
-export * from './defaults';
-export * from './extensions';
 export * from './hooks';
-export * from './types';
-export * from './util';
 
 export { translations };