@dxos/react-ui-editor 0.8.2-main.f081794 → 0.8.2-main.fbd8ed0

package/src/components/EditorToolbar/lists.ts

@@ -2,11 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type EditorView } from '@codemirror/view';
+
 import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
-import { type PayloadType } from '../../extensions';
+import { addList, List, removeList } from '../../extensions';
 
 const listStyles = {
   bullet: 'ph--list-bullets--regular',
@@ -21,15 +23,32 @@ const createListGroupAction = (value: string) =>
     value,
   } as ToolbarMenuActionGroupProperties);
 
-const createListActions = (value: string) =>
-  Object.entries(listStyles).map(([listStyle, icon]) =>
-    createEditorAction({ type: `list-${listStyle}` as PayloadType, checked: value === listStyle }, icon),
-  );
+const createListActions = (value: string, getView: () => EditorView) =>
+  Object.entries(listStyles).map(([listStyle, icon]) => {
+    const checked = value === listStyle;
+    return createEditorAction(
+      `list-${listStyle}`,
+      () => {
+        const view = getView();
+        if (!view) {
+          return;
+        }
+
+        const listType = listStyle === 'ordered' ? List.Ordered : listStyle === 'bullet' ? List.Bullet : List.Task;
+        if (checked) {
+          removeList(listType)(view);
+        } else {
+          addList(listType)(view);
+        }
+      },
+      { checked, icon },
+    );
+  });
 
-export const createLists = (state: EditorToolbarState) => {
+export const createLists = (state: EditorToolbarState, getView: () => EditorView) => {
   const value = state.listStyle ?? '';
   const listGroupAction = createListGroupAction(value);
-  const listActionsMap = createListActions(value);
+  const listActionsMap = createListActions(value, getView);
   return {
     nodes: [listGroupAction as NodeArg<any>, ...listActionsMap],
     edges: [

package/src/components/EditorToolbar/search.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { openSearchPanel } from '@codemirror/search';
+import { type EditorView } from '@codemirror/view';
+
+import { createEditorAction } from './util';
+
+const createSearchAction = (getView: () => EditorView) =>
+  createEditorAction('search', () => openSearchPanel(getView()), {
+    testId: 'editor.toolbar.search',
+    icon: 'ph--magnifying-glass--regular',
+  });
+
+export const createSearch = (getView: () => EditorView) => ({
+  nodes: [createSearchAction(getView)],
+  edges: [{ source: 'root', target: 'search' }],
+});

package/src/components/EditorToolbar/util.ts

@@ -2,21 +2,23 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type EditorView } from '@codemirror/view';
 import { useMemo } from 'react';
 
+import { type Action } from '@dxos/app-graph';
 import { live, type Live } from '@dxos/live-object';
-import { type Label, type ThemedClassName } from '@dxos/react-ui';
+import { type ThemedClassName } from '@dxos/react-ui';
 import {
   type MenuSeparator,
   type MenuItemGroup,
   type ToolbarMenuActionGroupProperties,
-  type MenuActionProperties,
   createMenuAction,
   createMenuItemGroup,
   type ActionGraphProps,
+  type MenuActionProperties,
 } from '@dxos/react-ui-menu';
 
-import type { EditorAction, EditorActionPayload, EditorViewMode, Formatting } from '../../extensions';
+import type { EditorAction, EditorViewMode, Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
 export type EditorToolbarState = Formatting &
@@ -31,16 +33,18 @@ export type EditorToolbarFeatureFlags = Partial<{
   formatting: boolean;
   lists: boolean;
   blocks: boolean;
-  comment: boolean;
   search: boolean;
-  viewMode: boolean;
+  // TODO(wittjosiah): Factor out. Depend on plugin-level capabilities.
+  comment: boolean;
+  image: () => void;
+  viewMode: (mode: EditorViewMode) => void;
 }>;
 
 export type EditorToolbarActionGraphProps = {
   state: Live<EditorToolbarState>;
+  getView: () => EditorView;
   // TODO(wittjosiah): Control positioning.
   customActions?: () => ActionGraphProps;
-  onAction: (action: EditorAction) => void;
 };
 
 export type EditorToolbarProps = ThemedClassName<
@@ -49,17 +53,13 @@ export type EditorToolbarProps = ThemedClassName<
 
 export type EditorToolbarItem = EditorAction | MenuItemGroup | MenuSeparator;
 
-export const createEditorAction = (
-  payload: EditorActionPayload & Partial<MenuActionProperties>,
-  icon: string,
-  label: Label = [`${payload.type} label`, { ns: translationKey }],
-  id: string = payload.type,
-) => createMenuAction(id, { icon, label, ...payload }) as EditorAction;
+export const createEditorAction = (id: string, invoke: () => void, properties: Partial<MenuActionProperties>) => {
+  const { label = [`${id} label`, { ns: translationKey }], ...rest } = properties;
+  return createMenuAction(id, invoke, { label, ...rest }) as Action<MenuActionProperties>;
+};
 
 export const createEditorActionGroup = (
   id: string,
   props: Omit<ToolbarMenuActionGroupProperties, 'icon'>,
   icon?: string,
 ) => createMenuItemGroup(id, { icon, iconOnly: true, ...props });
-
-export const editorToolbarSearch = createEditorAction({ type: 'search' }, 'ph--magnifying-glass--regular');

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

@@ -6,6 +6,7 @@ import { type NodeArg } from '@dxos/app-graph';
 import { type ToolbarMenuActionGroupProperties } from '@dxos/react-ui-menu';
 
 import { createEditorAction, createEditorActionGroup, type EditorToolbarState } from './util';
+import { type EditorViewMode } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const createViewModeGroupAction = (value: string) =>
@@ -20,24 +21,24 @@ const createViewModeGroupAction = (value: string) =>
     'ph--eye--regular',
   );
 
-const createViewModeActions = (value: string) =>
+const createViewModeActions = (value: string, onViewModeChange: (mode: EditorViewMode) => void) =>
   Object.entries({
     preview: 'ph--eye--regular',
     source: 'ph--pencil-simple--regular',
     readonly: 'ph--pencil-slash--regular',
   }).map(([viewMode, icon]) => {
-    return createEditorAction(
-      { type: 'view-mode', data: viewMode, checked: viewMode === value },
+    const checked = viewMode === value;
+    return createEditorAction(`view-mode--${viewMode}`, () => onViewModeChange(viewMode as EditorViewMode), {
+      label: [`${viewMode} mode label`, { ns: translationKey }],
+      checked,
       icon,
-      [`${viewMode} mode label`, { ns: translationKey }],
-      `view-mode--${viewMode}`,
-    );
+    });
   });
 
-export const createViewMode = (state: EditorToolbarState) => {
+export const createViewMode = (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void) => {
   const value = state.viewMode ?? 'source';
   const viewModeGroupAction = createViewModeGroupAction(value);
-  const viewModeActions = createViewModeActions(value);
+  const viewModeActions = createViewModeActions(value, onViewModeChange);
   return {
     nodes: [viewModeGroupAction as NodeArg<any>, ...viewModeActions],
     edges: [

package/src/defaults.ts

@@ -52,6 +52,6 @@ export const stackItemContentEditorClassNames = (role?: string) =>
 
 export const stackItemContentToolbarClassNames = (role?: string) =>
   mx(
-    'attention-surface is-full border-be !border-separator relative z-[1]',
+    'relative z-[1] flex is-full bg-toolbarSurface border-be border-separator',
     role === 'section' && 'sticky block-start-0 -mbe-px min-is-0',
   );

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

@@ -5,12 +5,13 @@
 import '@dxos-theme';
 
 import '@preact/signals-react';
+
+import { Repo } from '@automerge/automerge-repo';
+import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import React, { useEffect, useState } from 'react';
 
-import { Repo } from '@dxos/automerge/automerge-repo';
-import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
 import { Expando } from '@dxos/echo-schema';
-import { DocAccessor, Filter, live, createDocAccessor, useQuery, useSpace, type Space } from '@dxos/react-client/echo';
+import { DocAccessor, live, 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 { useThemeContext } from '@dxos/react-ui';
@@ -71,11 +72,12 @@ const Story = () => {
         doc.text = initialContent;
       });
 
-      const object2 = repo2.find<TestObject>(object1.url);
+      const object2 = await repo2.find<TestObject>(object1.url);
       await object2.whenReady();
 
-      setObject1({ handle: object1, path: ['text'] });
-      setObject2({ handle: object2, path: ['text'] });
+      // TODO(mykola): Fix types.
+      setObject1({ handle: object1 as any, path: ['text'] });
+      setObject2({ handle: object2 as any, path: ['text'] });
     });
   }, []);
 
@@ -103,7 +105,7 @@ const EchoStory = ({ spaceKey }: ClientRepeatedComponentProps) => {
   const identity = useIdentity();
   const space = useSpace(spaceKey);
   const [source, setSource] = useState<DocAccessor>();
-  const objects = useQuery<Expando>(space, Filter.from({ type: 'test' }));
+  const objects = useQuery(space, Query.type(Expando, { type: 'test' }));
 
   useEffect(() => {
     if (!source && objects.length) {

package/src/extensions/automerge/automerge.test.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type DocHandle, Repo } from '@automerge/automerge-repo';
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { render, screen } from '@testing-library/react';
@@ -12,8 +13,6 @@ import get from 'lodash.get';
 import React, { type FC, useEffect, useRef, useState } from 'react';
 import { describe, test } from 'vitest';
 
-import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
-
 import { automerge } from './automerge';
 
 type TestObject = {
@@ -36,7 +35,8 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
   const [view, setView] = useState<EditorView>();
   useEffect(() => {
     const extensions = [
-      automerge({ handle, path }),
+      // TODO(mykola): Fix types.
+      automerge({ handle: handle as any, path }),
       EditorView.updateListener.of((update) => {
         if (view.state.doc.toString() === 'hello!') {
           // Update editor.
@@ -46,7 +46,7 @@ const Test: FC<{ handle: DocHandle<TestObject>; generator: Generator }> = ({ han
     ];
 
     const view = new EditorView({
-      state: EditorState.create({ doc: get(handle.docSync()!, path), extensions }),
+      state: EditorState.create({ doc: get(handle.doc()!, path), extensions }),
       parent: ref.current!,
     });
 

package/src/extensions/automerge/automerge.ts

@@ -4,10 +4,10 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { next as A } from '@automerge/automerge';
 import { StateField, type Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { next as A } from '@dxos/automerge/automerge';
 import { type DocAccessor } from '@dxos/react-client/echo';
 
 import { cursorConverter } from './cursor';
@@ -19,7 +19,7 @@ export const automerge = (accessor: DocAccessor): Extension => {
   const syncState = StateField.define<State>({
     create: () => ({
       path: accessor.path.slice(),
-      lastHeads: A.getHeads(accessor.handle.docSync()!),
+      lastHeads: A.getHeads(accessor.handle.doc()!),
       unreconciledTransactions: [],
     }),
 

package/src/extensions/automerge/defs.ts

@@ -4,10 +4,9 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { type Heads, type Prop } from '@automerge/automerge';
 import { Annotation, StateEffect, type StateField, type EditorState, type Transaction } from '@codemirror/state';
 
-import { type Heads, type Prop } from '@dxos/automerge/automerge';
-
 export type State = {
   path: Prop[];
   lastHeads: Heads;

package/src/extensions/automerge/sync.ts

@@ -4,10 +4,10 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
-import { next as A } from '@dxos/automerge/automerge';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { getLastHeads, getPath, isReconcile, reconcileAnnotation, type State, updateHeads } from './defs';
@@ -57,15 +57,15 @@ export class Syncer {
   onAutomergeChange(view: EditorView) {
     // Get the diff between the updated state of the document and the heads and apply that to the codemirror doc.
     const oldHeads = getLastHeads(view.state, this._state);
-    const newHeads = A.getHeads(this._handle.docSync()!);
-    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.docSync()!, oldHeads, newHeads);
+    const newHeads = A.getHeads(this._handle.doc()!);
+    const diff = A.equals(oldHeads, newHeads) ? [] : A.diff(this._handle.doc()!, oldHeads, newHeads);
 
     const selection = view.state.selection;
     const path = getPath(view.state, this._state);
     updateCodeMirror(view, selection, path, diff);
 
     // TODO(burdon): Test conflicts?
-    // A.getConflicts(this._handle.docSync()!, path[0]);
+    // A.getConflicts(this._handle.doc()!, path[0]);
 
     view.dispatch({
       effects: updateHeads(newHeads),

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

@@ -4,9 +4,9 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
+import { next as A, type Heads } from '@automerge/automerge';
 import { type EditorState, type StateField, type Transaction, type Text } from '@codemirror/state';
 
-import { next as A, type Heads } from '@dxos/automerge/automerge';
 import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { type State } from './defs';

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

@@ -4,9 +4,6 @@
 // Ref: https://github.com/automerge/automerge-codemirror
 //
 
-import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-
 import {
   type DelPatch,
   type InsertPatch,
@@ -14,7 +11,9 @@ import {
   type Prop,
   type PutPatch,
   type SpliceTextPatch,
-} from '@dxos/automerge/automerge';
+} from '@automerge/automerge';
+import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
 
 import { reconcileAnnotation } from './defs';
 

package/src/extensions/markdown/changes.ts

@@ -56,8 +56,9 @@ export const adjustChanges = () => {
                 // Check for URL.
                 const url = getValidUrl(update.view.state.sliceDoc(fromB, toB));
                 if (url) {
+                  // Check if pasting inside existing link.
                   const node = tree.resolveInner(fromA, -1);
-                  const invalidPositions = new Set(['Link', 'LinkMark', 'Code', 'CodeText', 'FencedCode', 'URL']);
+                  const invalidPositions = new Set(['Code', 'CodeText', 'FencedCode', 'Link', 'LinkMark', 'URL']);
                   if (!invalidPositions.has(node?.name)) {
                     const replacedText = tr.startState.sliceDoc(fromA, toA);
                     adjustments.push({ from: fromA, to: toB, insert: createLink(url, replacedText) });
@@ -84,7 +85,7 @@ export const adjustChanges = () => {
           }
         }
 
-        // TODO(burdon): Is this the right way to augment changes?
+        // TODO(burdon): Is this the right way to augment changes? Alt: EditorState.transactionFilter
         if (adjustments.length) {
           setTimeout(() => {
             update.view.dispatch(

package/src/extensions/markdown/decorate.ts

@@ -129,10 +129,10 @@ class TextWidget extends WidgetType {
 }
 
 const hide = Decoration.replace({});
-const blockQuote = Decoration.line({ class: mx('cm-blockquote') });
-const fencedCodeLine = Decoration.line({ class: mx('cm-code cm-codeblock-line') });
-const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-first') });
-const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-last') });
+const blockQuote = Decoration.line({ class: 'cm-blockquote' });
+const fencedCodeLine = Decoration.line({ class: 'cm-code cm-codeblock-line' });
+const fencedCodeLineFirst = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-start') });
+const fencedCodeLineLast = Decoration.line({ class: mx('cm-code cm-codeblock-line', 'cm-codeblock-end') });
 const commentBlockLine = fencedCodeLine;
 const commentBlockLineFirst = fencedCodeLineFirst;
 const commentBlockLineLast = fencedCodeLineLast;
@@ -277,7 +277,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
         // Set indentation.
         const list = getCurrentListLevel();
         const width = list.type === 'OrderedList' ? orderedListIndentationWidth : bulletListIndentationWidth;
-        const offset = ((list.level ?? 0) + 1) * width;
+        const offset = (options?.listPaddingLeft ?? 0) + ((list.level ?? 0) + 1) * width;
         if (node.from === line.to - 1) {
           // Abort if only the hyphen is typed.
           return false;
@@ -285,7 +285,6 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
 
         // Add line decoration for the continuation indent.
         // TODO(burdon): Bug if indentation is more than one indentation unit (e.g., 4 spaces) from the previous line.
-
         deco.add(
           line.from,
           line.from,
@@ -406,7 +405,7 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           }
 
           const first = block.from <= node.from;
-          const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
+          const last = block.to >= node.to && /```$/.test(state.doc.sliceString(block.from, block.to));
           deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
 
           const editing = editingRange(state, node, focus);
@@ -521,6 +520,8 @@ export interface DecorateOptions {
   selectionChangeDelay?: number;
   numberedHeadings?: { from: number; to?: number };
   renderLinkButton?: RenderCallback<{ url: string }>;
+  // TODO(burdon): Additional padding for each line.
+  listPaddingLeft?: number;
 }
 
 export const decorateMarkdown = (options: DecorateOptions = {}) => {

package/src/extensions/markdown/formatting.ts

@@ -5,13 +5,13 @@
 import { snippet } from '@codemirror/autocomplete';
 import { syntaxTree } from '@codemirror/language';
 import {
-  type Extension,
-  type StateCommand,
-  type EditorState,
   type ChangeSpec,
-  type Text,
   EditorSelection,
+  type Extension,
+  type EditorState,
   type Line,
+  type StateCommand,
+  type Text,
 } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { type SyntaxNodeRef, type SyntaxNode } from '@lezer/common';

package/src/extensions/markdown/index.ts

@@ -10,4 +10,5 @@ export * from './formatting';
 export * from './highlight';
 export * from './image';
 export * from './link';
+export * from './outliner';
 export * from './table';