@dxos/react-ui-editor 0.8.4-main.fffef41 → 0.9.0

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.fffef41",
-  "description": "Document editing experience within a DXOS shell.",
+  "version": "0.9.0",
+  "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -15,124 +22,124 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
-    "./types": {
-      "source": "./src/types/index.ts",
-      "types": "./dist/types/src/types/index.d.ts",
-      "browser": "./dist/lib/browser/types/index.mjs",
-      "node": "./dist/lib/node-esm/types/index.mjs"
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.1.2",
-    "@codemirror/autocomplete": "^6.19.0",
-    "@codemirror/commands": "^6.8.1",
+    "@automerge/automerge": "3.3.0-fragments.1",
+    "@codemirror/autocomplete": "^6.20.2",
+    "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-html": "^6.4.11",
-    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-markdown": "^6.3.4",
+    "@codemirror/lang-markdown": "6.5.0",
     "@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",
-    "@codemirror/search": "^6.5.11",
-    "@codemirror/state": "^6.5.2",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/language-data": "^6.5.2",
+    "@codemirror/lint": "6.9.6",
+    "@codemirror/search": "^6.7.0",
+    "@codemirror/state": "^6.6.0",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.38.4",
-    "@fluentui/react-tabster": "^9.24.2",
-    "@lezer/common": "^1.2.2",
-    "@lezer/generator": "^1.7.1",
-    "@lezer/highlight": "^1.2.1",
-    "@lezer/markdown": "^1.3.1",
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-react": "^3.3.0",
+    "@codemirror/view": "^6.43.0",
+    "@fluentui/react-tabster": "9.26.11",
+    "@lezer/common": "^1.5.2",
+    "@lezer/generator": "^1.8.0",
+    "@lezer/highlight": "^1.2.3",
+    "@lezer/markdown": "^1.6.3",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "@replit/codemirror-vim": "^6.2.1",
+    "@replit/codemirror-vim": "^6.3.0",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
     "@uiw/codemirror-theme-vscode": "^4.25.2",
-    "ajv": "^8.17.1",
-    "codemirror": "^6.0.1",
+    "ajv": "^8.18.0",
+    "bind-event-listener": "^3.0.0",
+    "codemirror": "^6.0.2",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.fffef41",
-    "@dxos/async": "0.8.4-main.fffef41",
-    "@dxos/client": "0.8.4-main.fffef41",
-    "@dxos/debug": "0.8.4-main.fffef41",
-    "@dxos/echo": "0.8.4-main.fffef41",
-    "@dxos/lit-ui": "0.8.4-main.fffef41",
-    "@dxos/context": "0.8.4-main.fffef41",
-    "@dxos/invariant": "0.8.4-main.fffef41",
-    "@dxos/display-name": "0.8.4-main.fffef41",
-    "@dxos/live-object": "0.8.4-main.fffef41",
-    "@dxos/log": "0.8.4-main.fffef41",
-    "@dxos/react-hooks": "0.8.4-main.fffef41",
-    "@dxos/react-ui-menu": "0.8.4-main.fffef41",
-    "@dxos/protocols": "0.8.4-main.fffef41",
-    "@dxos/react-ui-types": "0.8.4-main.fffef41",
-    "@dxos/util": "0.8.4-main.fffef41",
-    "@dxos/react-ui-stack": "0.8.4-main.fffef41"
+    "@dxos/app-graph": "0.9.0",
+    "@dxos/async": "0.9.0",
+    "@dxos/context": "0.9.0",
+    "@dxos/client": "0.9.0",
+    "@dxos/display-name": "0.9.0",
+    "@dxos/debug": "0.9.0",
+    "@dxos/echo": "0.9.0",
+    "@dxos/effect": "0.9.0",
+    "@dxos/invariant": "0.9.0",
+    "@dxos/log": "0.9.0",
+    "@dxos/lit-ui": "0.9.0",
+    "@dxos/echo-client": "0.9.0",
+    "@dxos/react-hooks": "0.9.0",
+    "@dxos/protocols": "0.9.0",
+    "@dxos/react-ui-mosaic": "0.9.0",
+    "@dxos/ui": "0.9.0",
+    "@dxos/ui-editor": "0.9.0",
+    "@dxos/ui-theme": "0.9.0",
+    "@dxos/react-ui-menu": "0.9.0",
+    "@dxos/util": "0.9.0"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.1.2",
-    "@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",
+    "@automerge/automerge": "3.3.0-fragments.1",
+    "@automerge/automerge-repo": "2.6.0-subduction.23",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.6.0-subduction.23",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/ai": "0.36.0",
+    "@effect/platform": "0.96.1",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/lodash.merge": "^4.6.6",
     "@types/lodash.sortby": "^4.7.7",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.18.3",
-    "happy-dom": "^13.3.1",
-    "jsdom": "^27.0.0",
+    "effect": "3.21.3",
+    "happy-dom": "^20.0.0",
+    "jsdom": "^29.1.1",
     "mocha": "^10.6.0",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "react-test-renderer": "~19.2.0",
-    "vite": "7.1.9",
+    "vite": "^8.0.16",
     "vite-plugin-top-level-await": "^1.6.0",
-    "vite-plugin-wasm": "^3.5.0",
-    "@dxos/echo": "0.8.4-main.fffef41",
-    "@dxos/config": "0.8.4-main.fffef41",
-    "@dxos/echo-signals": "0.8.4-main.fffef41",
-    "@dxos/keyboard": "0.8.4-main.fffef41",
-    "@dxos/random": "0.8.4-main.fffef41",
-    "@dxos/react-client": "0.8.4-main.fffef41",
-    "@dxos/react-ui-attention": "0.8.4-main.fffef41",
-    "@dxos/react-ui": "0.8.4-main.fffef41",
-    "@dxos/react-ui-stack": "0.8.4-main.fffef41",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.fffef41",
-    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
-    "@dxos/schema": "0.8.4-main.fffef41",
-    "@dxos/storybook-utils": "0.8.4-main.fffef41"
+    "vite-plugin-wasm": "^3.6.0",
+    "@dxos/ai": "0.9.0",
+    "@dxos/config": "0.9.0",
+    "@dxos/keyboard": "0.9.0",
+    "@dxos/echo": "0.9.0",
+    "@dxos/random": "0.9.0",
+    "@dxos/react-ui-attention": "0.9.0",
+    "@dxos/react-ui-syntax-highlighter": "0.9.0",
+    "@dxos/react-ui": "0.9.0",
+    "@dxos/react-client": "0.9.0",
+    "@dxos/schema": "0.9.0",
+    "@dxos/storybook-utils": "0.9.0",
+    "@dxos/ui-types": "0.9.0",
+    "@dxos/ui-theme": "0.9.0"
   },
   "peerDependencies": {
-    "@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.fffef41",
-    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
-    "@dxos/react-ui": "0.8.4-main.fffef41"
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.96.1",
+    "effect": "3.21.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-client": "0.9.0",
+    "@dxos/ui-theme": "0.9.0",
+    "@dxos/react-ui": "0.9.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -5,63 +5,65 @@
 import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { faker } from '@dxos/random';
+import { createDocAccessor, createObject } from '@dxos/echo-client';
+import { random } from '@dxos/random';
 import { useThemeContext } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Text } from '@dxos/schema';
 import {
+  automerge,
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
-} from '../../extensions';
-import { createMenuGroup } from '../EditorMenuProvider';
-
-import { Editor, type EditorContentProps } from './Editor';
+} from '@dxos/ui-editor';
 
-// TODO(burdon): PreviewPopoverProvider (MarkdownStream, Preview story).
-// TODO(burdon): Adapt Markdown plugin to use new Editor (plan first to check fit).
-// TODO(burdon): Remove redundant hooks and simplify props.
+import { createMenuGroup } from '../EditorMenuProvider';
+import { Editor, type EditorViewProps } from './Editor';
 
-faker.seed(1234);
+random.seed(1234);
 
 const initialValue = ['# Blue Monday', '', 'How does it **feel**?', ''].join('\n');
 
-// TODO(burdon): Adapter other tests in react-ui-editor/stories to use this pattern.
-const withExtensions: Decorator = (Story, { args }) => {
+const items = random.helpers.multiple(random.commerce.productName, { count: 10 }).sort();
+
+const withExtensions: Decorator<EditorViewProps> = (Story, { args }) => {
   const { themeMode } = useThemeContext();
   const extensions = useMemo(
     () => [
-      // Basic extensions.
       createBasicExtensions(),
       createThemeExtensions({ themeMode }),
       createMarkdownExtensions(),
       decorateMarkdown(),
+      automerge(createDocAccessor(createObject(Text.make({ content: args.initialValue })), ['content'])),
     ],
     [themeMode],
   );
 
-  return <Story args={{ ...args, extensions, initialValue }} />;
+  return <Story args={{ ...args, extensions }} />;
 };
 
 const meta = {
   title: 'ui/react-ui-editor/Editor',
-  component: Editor.Content,
-  decorators: [withExtensions, withTheme, withLayout({ container: 'column' }), withAttention],
+  component: Editor.View,
+  decorators: [withExtensions, withTheme(), withLayout({ layout: 'column' }), withAttention()],
   parameters: {
     layout: 'fullscreen',
   },
-} satisfies Meta<typeof Editor.Content>;
+  args: {
+    initialValue,
+  },
+} satisfies Meta<typeof Editor.View>;
 
 export default meta;
 
-type Story = StoryObj<EditorContentProps>;
+type Story = StoryObj<EditorViewProps>;
 
 export const Default: Story = {
   render: (args) => (
     <Editor.Root>
-      <Editor.Content {...args} />
+      <Editor.View {...args} />
     </Editor.Root>
   ),
 };
@@ -70,20 +72,18 @@ export const WithToolbar: Story = {
   render: (args) => (
     <Editor.Root>
       <Editor.Toolbar />
-      <Editor.Content {...args} />
+      <Editor.View {...args} />
     </Editor.Root>
   ),
 };
 
-const items = faker.helpers.multiple(faker.commerce.productName, { count: 10 }).sort();
-
 export const WithPopover: Story = {
   render: (args) => (
     <Editor.Root trigger={['@']} getMenu={({ text }) => [createMenuGroup({ items, filter: text })]}>
-      <Editor.Viewport>
+      <Editor.Content>
         <Editor.Toolbar />
-        <Editor.Content {...args} />
-      </Editor.Viewport>
+        <Editor.View {...args} />
+      </Editor.Content>
     </Editor.Root>
   ),
 };

package/src/components/Editor/Editor.tsx

@@ -3,27 +3,33 @@
 //
 
 import { type Extension } from '@codemirror/state';
+import { Atom } from '@effect-atom/atom-react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 import {
-  type EditorController,
-  EditorContent as NaturalEditorContent,
-  type EditorContentProps as NaturalEditorContentProps,
-  noopController,
-} from '../EditorContent';
-import { EditorMenuProvider, type UseEditorMenuProps, useEditorMenu } from '../EditorMenuProvider';
+  EditorMenuProvider,
+  type EditorMenuProviderProps,
+  type UseEditorMenuProps,
+  useEditorMenu,
+} from '../EditorMenuProvider';
 import {
   type EditorToolbarState,
   EditorToolbar as NaturalEditorToolbar,
   type EditorToolbarProps as NaturalEditorToolbarProps,
-  useEditorToolbar,
 } from '../EditorToolbar';
+import {
+  type EditorController,
+  EditorView as NaturalEditorContent,
+  type EditorViewProps as NaturalEditorContentProps,
+  createEditorController,
+  noopController,
+} from './EditorView';
 
 //
 // Context
@@ -33,30 +39,48 @@ type EditorContextValue = {
   controller?: EditorController;
   setController: (controller: EditorController) => void;
   extensions?: Extension[];
-} & Pick<NaturalEditorToolbarProps, 'state'>;
+  state: Atom.Writable<EditorToolbarState>;
+};
 
 const [EditorContextProvider, useEditorContext] = createContext<EditorContextValue>('Editor');
 
+/**
+ * Access the editor context. Must be used within `Editor.Root`.
+ */
+export { useEditorContext };
+
 //
 // Root
 //
 
-type EditorRootProps = PropsWithChildren<Omit<UseEditorMenuProps, 'viewRef'> & Pick<EditorToolbarState, 'viewMode'>>;
+type EditorRootProps = PropsWithChildren<
+  Pick<EditorContextValue, 'extensions'> &
+    Omit<UseEditorMenuProps, 'viewRef'> &
+    Pick<EditorMenuProviderProps, 'numItems'> & {
+      viewMode?: EditorToolbarState['viewMode'];
+    }
+>;
 
 /**
  * Root component for the Editor compound component.
  * Provides context for all child components and manages the editor controller state.
  */
 const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
-  ({ children, viewMode, ...props }, forwardedRef) => {
-    const state = useEditorToolbar({ viewMode });
-
-    const [controller, setController] = useState<EditorController>();
-    useImperativeHandle(forwardedRef, () => controller ?? noopController, [controller]);
+  ({ children, extensions: extensionsProp, viewMode, numItems, ...props }, forwardedRef) => {
+    // TODO(wittjosiah): Including initialState in the deps causes reactivity issues.
+    const state = useMemo(() => Atom.make<EditorToolbarState>({ viewMode }), [viewMode]);
 
     // TODO(burdon): Consider lighter-weight approach if EditorMenuProvider is not needed.
     const { groupsRef, extension, ...menuProps } = useEditorMenu(props);
-    const extensions = useMemo(() => [extension], [extension]);
+    const extensions = useMemo(
+      () => [extension, extensionsProp].filter(isNonNullable).flat(),
+      [extension, extensionsProp],
+    );
+
+    // External controller.
+    const [controller, setController] = useState<EditorController>(noopController);
+    useImperativeHandle(forwardedRef, () => controller, [controller]);
+    const getView = useCallback(() => controller?.view ?? null, [controller]);
 
     return (
       <EditorContextProvider
@@ -65,7 +89,7 @@ const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
         extensions={extensions}
         state={state}
       >
-        <EditorMenuProvider view={controller?.view} groups={groupsRef.current} {...menuProps}>
+        <EditorMenuProvider getView={getView} groups={groupsRef.current} numItems={numItems} {...menuProps}>
           {children}
         </EditorMenuProvider>
       </EditorContextProvider>
@@ -76,37 +100,36 @@ const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
 EditorRoot.displayName = 'Editor.Root';
 
 //
-// Viewport
+// Content
 //
 
-type EditorViewportProps = ThemedClassName<PropsWithChildren<{}>>;
+const EDITOR_CONTENT_NAME = 'Editor.Content';
+
+type EditorContentProps = ThemedClassName<PropsWithChildren<{}>>;
 
 /**
- * Viewport component that wraps the toolbar and editor content area.
+ * Content component that wraps the toolbar and editor view area.
  */
-const EditorViewport = ({ classNames, children }: EditorViewportProps) => {
-  return (
-    <div role='none' className={mx('grid grid-rows-[min-content_1fr] bs-full overflow-hidden', classNames)}>
-      {children}
-    </div>
-  );
+const EditorContent = ({ classNames, children }: EditorContentProps) => {
+  return <div className={mx('grid grid-rows-[min-content_1fr] h-full overflow-hidden', classNames)}>{children}</div>;
 };
 
-EditorViewport.displayName = 'Editor.Viewport';
+EditorContent.displayName = EDITOR_CONTENT_NAME;
 
 //
-// Content
+// View
 //
 
-type EditorContentProps = Omit<NaturalEditorContentProps, 'ref'>;
+const EDITOR_VIEW_NAME = 'Editor.View';
+
+type EditorViewProps = Omit<NaturalEditorContentProps, 'ref'>;
 
 /**
- * Content component that renders the actual CodeMirror editor.
+ * View component that renders the actual CodeMirror editor.
  * Automatically registers the editor controller with the context.
  */
-const EditorContent = ({ extensions: providedExtensions, ...props }: EditorContentProps) => {
-  const { extensions: additionalExtensions = [], setController } = useEditorContext(EditorContent.displayName);
-
+const EditorView = ({ extensions: providedExtensions, ...props }: EditorViewProps) => {
+  const { extensions: additionalExtensions = [], setController } = useEditorContext(EDITOR_VIEW_NAME);
   const extensions = useMemo(
     () => [additionalExtensions, providedExtensions].filter(isNonNullable).flat(),
     [providedExtensions, additionalExtensions],
@@ -115,12 +138,14 @@ const EditorContent = ({ extensions: providedExtensions, ...props }: EditorConte
   return <NaturalEditorContent {...props} extensions={extensions} ref={setController} />;
 };
 
-EditorContent.displayName = 'Editor.Content';
+EditorView.displayName = EDITOR_VIEW_NAME;
 
 //
 // Toolbar
 //
 
+const EDITOR_TOOLBAR_NAME = 'Editor.Toolbar';
+
 type EditorToolbarProps = Omit<NaturalEditorToolbarProps, 'getView' | 'state'>;
 
 /**
@@ -128,9 +153,7 @@ type EditorToolbarProps = Omit<NaturalEditorToolbarProps, 'getView' | 'state'>;
  * Automatically connects to the editor view through context.
  */
 const EditorToolbar = (props: EditorToolbarProps) => {
-  const { controller, state } = useEditorContext(EditorToolbar.displayName);
-
-  // TODO(burdon): Fix invariant.
+  const { controller, state } = useEditorContext(EDITOR_TOOLBAR_NAME);
   const getView = useCallback(() => {
     invariant(controller?.view);
     return controller?.view;
@@ -139,36 +162,26 @@ const EditorToolbar = (props: EditorToolbarProps) => {
   return <NaturalEditorToolbar {...props} getView={getView} state={state} />;
 };
 
-EditorToolbar.displayName = 'Editor.Toolbar';
+EditorToolbar.displayName = EDITOR_TOOLBAR_NAME;
 
 //
 // Editor
 //
 
-/**
- * Compound editor component following the Radix UI pattern.
- *
- * @example
- * ```tsx
- * EditorMenuGroup.Root>
- *   EditorMenuGroup.Toolbar />
- *   EditorMenuGroup.Viewport>
- *     EditorMenuGroup.Content extensions={[...]} />
- *   </Editor.Viewport>
- * </Editor.Root>
- * ```
- */
 export const Editor = {
   Root: EditorRoot,
-  Viewport: EditorViewport,
-  Content: EditorContent,
   Toolbar: EditorToolbar,
+  Content: EditorContent,
+  View: EditorView,
 };
 
 export type {
   EditorController,
   EditorRootProps,
-  EditorViewportProps,
   EditorContentProps,
-  // EditorToolbarProps, // TODO(burdon): Restore once removed deprecated props.
+  EditorViewProps,
+  EditorToolbarProps,
+  EditorToolbarState,
 };
+
+export { createEditorController };