@dxos/react-ui-editor 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.548089c",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -40,10 +40,12 @@
     "@automerge/automerge": "3.1.2",
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-html": "^6.4.11",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-markdown": "^6.3.4",
     "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.11.3",
     "@codemirror/language-data": "^6.5.1",
     "@codemirror/lint": "^6.8.5",
@@ -70,28 +72,29 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.406dc2a",
-    "@dxos/async": "0.8.4-main.406dc2a",
-    "@dxos/debug": "0.8.4-main.406dc2a",
-    "@dxos/context": "0.8.4-main.406dc2a",
-    "@dxos/display-name": "0.8.4-main.406dc2a",
-    "@dxos/echo": "0.8.4-main.406dc2a",
-    "@dxos/invariant": "0.8.4-main.406dc2a",
-    "@dxos/lit-ui": "0.8.4-main.406dc2a",
-    "@dxos/log": "0.8.4-main.406dc2a",
-    "@dxos/protocols": "0.8.4-main.406dc2a",
-    "@dxos/live-object": "0.8.4-main.406dc2a",
-    "@dxos/react-hooks": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-menu": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-stack": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-types": "0.8.4-main.406dc2a",
-    "@dxos/util": "0.8.4-main.406dc2a"
+    "@dxos/app-graph": "0.8.4-main.548089c",
+    "@dxos/client": "0.8.4-main.548089c",
+    "@dxos/async": "0.8.4-main.548089c",
+    "@dxos/context": "0.8.4-main.548089c",
+    "@dxos/display-name": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/invariant": "0.8.4-main.548089c",
+    "@dxos/debug": "0.8.4-main.548089c",
+    "@dxos/live-object": "0.8.4-main.548089c",
+    "@dxos/log": "0.8.4-main.548089c",
+    "@dxos/lit-ui": "0.8.4-main.548089c",
+    "@dxos/protocols": "0.8.4-main.548089c",
+    "@dxos/react-hooks": "0.8.4-main.548089c",
+    "@dxos/react-ui-menu": "0.8.4-main.548089c",
+    "@dxos/react-ui-stack": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c",
+    "@dxos/react-ui-types": "0.8.4-main.548089c"
   },
   "devDependencies": {
     "@automerge/automerge": "3.1.2",
-    "@automerge/automerge-repo": "2.3.1",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.3.1",
-    "@effect-rx/rx-react": "0.42.4",
+    "@automerge/automerge-repo": "2.4.0",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.4.0",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "0.92.1",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
@@ -99,7 +102,7 @@
     "@types/lodash.merge": "^4.6.6",
     "@types/lodash.sortby": "^4.7.7",
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@types/react-dom": "~19.2.2",
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
@@ -113,29 +116,29 @@
     "vite": "7.1.9",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0",
-    "@dxos/echo": "0.8.4-main.406dc2a",
-    "@dxos/config": "0.8.4-main.406dc2a",
-    "@dxos/echo-signals": "0.8.4-main.406dc2a",
-    "@dxos/keyboard": "0.8.4-main.406dc2a",
-    "@dxos/random": "0.8.4-main.406dc2a",
-    "@dxos/react-client": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-attention": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-stack": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/schema": "0.8.4-main.406dc2a",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a"
+    "@dxos/config": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/echo-signals": "0.8.4-main.548089c",
+    "@dxos/react-client": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/keyboard": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-attention": "0.8.4-main.548089c",
+    "@dxos/react-ui-stack": "0.8.4-main.548089c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/schema": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-client": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a"
+    "@dxos/react-client": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Editor/Editor.stories.tsx

@@ -8,8 +8,8 @@ import { useMemo } from 'react';
 
 import { createDocAccessor, createObject } from '@dxos/client/echo';
 import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-import { DataType } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Text } from '@dxos/schema';
 
 import { automerge, createBasicExtensions, createThemeExtensions } from '../../extensions';
 import { Editor } from '../Editor';
@@ -17,10 +17,7 @@ import { Editor } from '../Editor';
 const meta = {
   title: 'ui/react-ui-editor/Editor',
   component: Editor,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'column',
-  },
+  decorators: [withTheme, withLayout({ container: 'column' })],
 } satisfies Meta<typeof Editor>;
 
 export default meta;
@@ -56,7 +53,7 @@ export const Automerge: Story = {
         // Basic extensions.
         createBasicExtensions(),
         createThemeExtensions({ themeMode }),
-        automerge(createDocAccessor(createObject(DataType.makeText(value)), ['content'])),
+        automerge(createDocAccessor(createObject(Text.make(value)), ['content'])),
       ],
       [],
     );

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -2,11 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import React, { memo, useMemo } from 'react';
 
 import { rxFromSignal } from '@dxos/app-graph';
-import { ElevationProvider } from '@dxos/react-ui';
+import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
 import {
   type ActionGraphProps,
   MenuProvider,
@@ -15,121 +15,121 @@ import {
   useMenuActions,
 } from '@dxos/react-ui-menu';
 
+import { type EditorViewMode } from '../../types';
+
 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, type EditorToolbarFeatureFlags, type EditorToolbarProps } from './util';
+import { type EditorToolbarActionGraphProps } from './util';
 import { createViewMode } from './view-mode';
 
+export type EditorToolbarFeatureFlags = Partial<{
+  showHeadings: boolean;
+  showFormatting: boolean;
+  showLists: boolean;
+  showBlocks: boolean;
+  showSearch: boolean;
+
+  // TODO(wittjosiah): Factor out (depends on plugin-level capabilities.)
+  onImageUpload: () => void;
+  onViewModeChange: (mode: EditorViewMode) => void;
+}>;
+
+export type EditorToolbarProps = ThemedClassName<
+  {
+    role?: string;
+    attendableId?: string;
+  } & (EditorToolbarActionGraphProps & EditorToolbarFeatureFlags)
+>;
+
+// TODO(burdon): Remove role dependency.
+export const EditorToolbar = memo(({ classNames, role, attendableId, ...props }: EditorToolbarProps) => {
+  const menuProps = useEditorToolbarActionGraph(props);
+
+  return (
+    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
+      <MenuProvider {...menuProps} attendableId={attendableId}>
+        <ToolbarMenu classNames={classNames} textBlockWidth />
+      </MenuProvider>
+    </ElevationProvider>
+  );
+});
+
+type ToolbarActionsProps = Pick<EditorToolbarActionGraphProps, 'state' | 'getView' | 'customActions'> &
+  EditorToolbarFeatureFlags;
+
+// TODO(wittjosiah): Toolbar re-rendering is causing this graph to be recreated and breaking reactivity in some cases.
+//   E.g. for toolbar dropdowns which use active icon, the icon is not updated when the active item changes.
+//   This is currently only happening in the markdown plugin usage and should be reproduced in an editor story.
+const useEditorToolbarActionGraph = ({ state, getView, customActions, ...features }: ToolbarActionsProps) => {
+  const menuCreator = useMemo(
+    () => createToolbarActions({ state, getView, customActions, ...features }),
+    [
+      state,
+      getView,
+      customActions,
+      features?.showHeadings,
+      features?.showFormatting,
+      features?.showLists,
+      features?.showBlocks,
+      features?.showSearch,
+      features?.onImageUpload,
+      features?.onViewModeChange,
+    ],
+  );
+
+  return useMenuActions(menuCreator);
+};
+
 const createToolbarActions = ({
-  getView,
   state,
+  getView,
   customActions,
   ...features
-}: EditorToolbarFeatureFlags &
-  Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): Rx.Rx<ActionGraphProps> => {
-  return Rx.make((get) => {
+}: ToolbarActionsProps): Atom.Atom<ActionGraphProps> => {
+  return Atom.make((get) => {
     const graph: ActionGraphProps = {
       nodes: [],
       edges: [],
     };
 
-    if (features.headings ?? true) {
-      const headings = get(rxFromSignal(() => createHeadings(state, getView)));
-      graph.nodes.push(...headings.nodes);
-      graph.edges.push(...headings.edges);
-    }
-    if (features.formatting ?? true) {
-      const formatting = get(rxFromSignal(() => createFormatting(state, getView)));
-      graph.nodes.push(...formatting.nodes);
-      graph.edges.push(...formatting.edges);
+    // TODO(burdon): Builder pattern?
+    const addSubGraph = (graph: ActionGraphProps, subGraph: ActionGraphProps) => {
+      graph.nodes.push(...subGraph.nodes);
+      graph.edges.push(...subGraph.edges);
+    };
+
+    if (features?.showHeadings ?? true) {
+      addSubGraph(graph, get(rxFromSignal(() => createHeadings(state, getView))));
     }
-    if (features.lists ?? true) {
-      const lists = get(rxFromSignal(() => createLists(state, getView)));
-      graph.nodes.push(...lists.nodes);
-      graph.edges.push(...lists.edges);
+    if (features?.showFormatting ?? true) {
+      addSubGraph(graph, get(rxFromSignal(() => createFormatting(state, getView))));
     }
-    if (features.blocks ?? true) {
-      const blocks = get(rxFromSignal(() => createBlocks(state, getView)));
-      graph.nodes.push(...blocks.nodes);
-      graph.edges.push(...blocks.edges);
+    if (features?.showLists ?? true) {
+      addSubGraph(graph, get(rxFromSignal(() => createLists(state, getView))));
     }
-    if (features.image) {
-      const image = get(rxFromSignal(() => createImageUpload(features.image!)));
-      graph.nodes.push(...image.nodes);
-      graph.edges.push(...image.edges);
+    if (features?.showBlocks ?? true) {
+      addSubGraph(graph, get(rxFromSignal(() => createBlocks(state, getView))));
     }
-    {
-      const gap = createGapSeparator();
-      graph.nodes.push(...gap.nodes);
-      graph.edges.push(...gap.edges);
+    if (features?.onImageUpload) {
+      addSubGraph(graph, get(rxFromSignal(() => createImageUpload(features.onImageUpload!))));
     }
+
+    addSubGraph(graph, createGapSeparator());
+
     if (customActions) {
-      const custom = get(customActions);
-      graph.nodes.push(...custom.nodes);
-      graph.edges.push(...custom.edges);
+      addSubGraph(graph, get(customActions));
     }
-    if (features.search ?? true) {
-      const search = get(rxFromSignal(() => createSearch(getView)));
-      graph.nodes.push(...search.nodes);
-      graph.edges.push(...search.edges);
+    if (features?.showSearch ?? true) {
+      addSubGraph(graph, get(rxFromSignal(() => createSearch(getView))));
     }
-    if (features.viewMode) {
-      const viewMode = get(rxFromSignal(() => createViewMode(state, features.viewMode!)));
-      graph.nodes.push(...viewMode.nodes);
-      graph.edges.push(...viewMode.edges);
+    if (features?.onViewModeChange) {
+      addSubGraph(graph, get(rxFromSignal(() => createViewMode(state, features.onViewModeChange!))));
     }
 
     return graph;
   });
 };
-
-// TODO(wittjosiah): Toolbar re-rendering is causing this graph to be recreated and breaking reactivity in some cases.
-//   E.g. for toolbar dropdowns which use active icon, the icon is not updated when the active item changes.
-//   This is currently only happening in the markdown plugin usage and should be reproduced in an editor story.
-const useEditorToolbarActionGraph = (props: EditorToolbarProps) => {
-  const menuCreator = useMemo(
-    () =>
-      createToolbarActions({
-        getView: props.getView,
-        state: props.state,
-        customActions: props.customActions,
-        headings: props.headings,
-        formatting: props.formatting,
-        lists: props.lists,
-        blocks: props.blocks,
-        image: props.image,
-        search: props.search,
-        viewMode: props.viewMode,
-      }),
-    [
-      props.getView,
-      props.state,
-      props.customActions,
-      props.headings,
-      props.formatting,
-      props.lists,
-      props.blocks,
-      props.image,
-      props.search,
-      props.viewMode,
-    ],
-  );
-
-  return useMenuActions(menuCreator);
-};
-
-export const EditorToolbar = memo(({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
-  const menuProps = useEditorToolbarActionGraph(props);
-
-  return (
-    <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...menuProps} attendableId={attendableId}>
-        <ToolbarMenu classNames={classNames} textBlockWidth />
-      </MenuProvider>
-    </ElevationProvider>
-  );
-});

package/src/components/EditorToolbar/headings.ts

@@ -19,12 +19,13 @@ const createHeadingGroupAction = (value: string) =>
       variant: 'dropdownMenu',
       applyActive: true,
       selectCardinality: 'single',
+      // TODO(wittjosiah): Remove? Not sure this does anything.
       value,
     } as ToolbarMenuActionGroupProperties,
     'ph--text-h--regular',
   );
 
-const createHeadingActions = (getView: () => EditorView) =>
+const createHeadingActions = (currentLevel: string, getView: () => EditorView) =>
   Object.entries({
     '0': 'ph--paragraph--regular',
     '1': 'ph--text-h-one--regular',
@@ -40,6 +41,7 @@ const createHeadingActions = (getView: () => EditorView) =>
       {
         label: ['heading level label', { count: level, ns: translationKey }],
         icon,
+        checked: levelStr === currentLevel,
       },
       () => setHeading(level)(getView()),
     );
@@ -47,14 +49,14 @@ const createHeadingActions = (getView: () => EditorView) =>
 
 const computeHeadingValue = (state: EditorToolbarState) => {
   const blockType = state ? state.blockType : 'paragraph';
-  const header = blockType && /heading(\d)/.exec(blockType);
-  return header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : '';
+  const heading = blockType && /heading(\d)/.exec(blockType);
+  return heading ? heading[1] : blockType === 'paragraph' || !blockType ? '0' : '';
 };
 
 export const createHeadings = (state: EditorToolbarState, getView: () => EditorView) => {
   const headingValue = computeHeadingValue(state);
   const headingGroupAction = createHeadingGroupAction(headingValue);
-  const headingActions = createHeadingActions(getView);
+  const headingActions = createHeadingActions(headingValue, getView);
   return {
     nodes: [headingGroupAction as NodeArg<any>, ...headingActions],
     edges: [

package/src/components/EditorToolbar/util.ts

@@ -3,12 +3,11 @@
 //
 
 import { type EditorView } from '@codemirror/view';
-import { type Rx } from '@effect-rx/rx-react';
+import { type Atom } from '@effect-atom/atom-react';
 import { useMemo } from 'react';
 
 import { type Action } from '@dxos/app-graph';
 import { type Live, live } from '@dxos/live-object';
-import { type ThemedClassName } from '@dxos/react-ui';
 import {
   type ActionGraphProps,
   type MenuActionProperties,
@@ -23,34 +22,19 @@ import type { EditorAction, Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 import { type EditorViewMode } from '../../types';
 
-export type EditorToolbarState = Formatting & Partial<{ viewMode: EditorViewMode }>;
+export type EditorToolbarState = { viewMode?: EditorViewMode } & Formatting;
 
-export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}) => {
+export const useEditorToolbarState = (initialState: Partial<EditorToolbarState> = {}): Live<EditorToolbarState> => {
   return useMemo(() => live<EditorToolbarState>(initialState), []);
 };
 
-export type EditorToolbarFeatureFlags = Partial<{
-  headings: boolean;
-  formatting: boolean;
-  lists: boolean;
-  blocks: boolean;
-  search: boolean;
-  // TODO(wittjosiah): Factor out. Depend on plugin-level capabilities.
-  image: () => void;
-  viewMode: (mode: EditorViewMode) => void;
-}>;
-
 export type EditorToolbarActionGraphProps = {
   state: Live<EditorToolbarState>;
   getView: () => EditorView;
   // TODO(wittjosiah): Control positioning.
-  customActions?: Rx.Rx<ActionGraphProps>;
+  customActions?: Atom.Atom<ActionGraphProps>;
 };
 
-export type EditorToolbarProps = ThemedClassName<
-  EditorToolbarActionGraphProps & EditorToolbarFeatureFlags & { attendableId?: string; role?: string }
->;
-
 export type EditorToolbarItem = EditorAction | MenuItemGroup | MenuSeparator;
 
 export const createEditorAction = (id: string, props: Partial<MenuActionProperties>, invoke: () => void) => {

package/src/extensions/autocomplete/autocomplete.ts

@@ -207,14 +207,14 @@ class InlineSuggestionWidget extends WidgetType {
     super();
   }
 
-  override toDOM(): HTMLSpanElement {
+  override eq(other: this) {
+    return this.suffix === other.suffix;
+  }
+
+  override toDOM() {
     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

@@ -50,7 +50,7 @@ const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
     [source, themeMode],
   );
 
-  return <div ref={parentRef} className='flex w-full' />;
+  return <div ref={parentRef} className='flex is-full' />;
 };
 
 const DefaultStory = () => {

package/src/extensions/automerge/automerge.ts

@@ -8,7 +8,7 @@ import { next as A } from '@automerge/automerge';
 import { type Extension, StateField, Transaction } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-import { DocAccessor } from '@dxos/react-client/echo';
+import { DocAccessor } from '@dxos/client/echo';
 
 import { Cursor } from '../../util';
 import { initialSync } from '../state';

package/src/extensions/automerge/cursor.ts

@@ -2,8 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type DocAccessor, fromCursor, toCursor } from '@dxos/client/echo';
 import { log } from '@dxos/log';
-import { type DocAccessor, fromCursor, toCursor } from '@dxos/react-client/echo';
 
 import { type CursorConverter } from '../../util';
 

package/src/extensions/automerge/sync.ts

@@ -8,8 +8,8 @@ import { next as A } from '@automerge/automerge';
 import { type StateField } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
+import { type IDocHandle } from '@dxos/client/echo';
 import { log } from '@dxos/log';
-import { type IDocHandle } from '@dxos/react-client/echo';
 
 import { type State, getLastHeads, getPath, isReconcile, reconcileAnnotation, updateHeads } from './defs';
 import { updateAutomerge } from './update-automerge';

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

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