@dxos/react-ui-editor 0.8.4-main.c1de068 → 0.8.4-main.c85a9c8dae

package/package.json

@@ -1,28 +1,23 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.c1de068",
-  "description": "Document editing experience within a DXOS shell.",
+  "version": "0.8.4-main.c85a9c8dae",
+  "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
-    },
-    "./types": {
-      "types": "./dist/types/src/types/index.d.ts",
-      "browser": "./dist/lib/browser/types/index.mjs",
-      "node": "./dist/lib/node-esm/types/index.mjs"
-    },
-    "./testing": {
-      "types": "./dist/types/src/testing/index.d.ts",
-      "browser": "./dist/lib/browser/testing/index.mjs",
-      "node": "./dist/lib/node-esm/testing/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -34,100 +29,109 @@
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.0.0",
-    "@codemirror/autocomplete": "^6.18.1",
-    "@codemirror/commands": "^6.6.2",
-    "@codemirror/lang-javascript": "^6.2.2",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-markdown": "^6.3.0",
-    "@codemirror/language": "^6.10.3",
+    "@automerge/automerge": "3.2.3",
+    "@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.2",
-    "@codemirror/search": "^6.5.6",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.34.1",
-    "@fluentui/react-tabster": "^9.24.2",
+    "@codemirror/lint": "6.8.5",
+    "@codemirror/search": "^6.5.11",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.38.4",
+    "@fluentui/react-tabster": "9.26.11",
     "@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.2.0",
     "@radix-ui/react-context": "1.1.1",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
     "@replit/codemirror-vim": "^6.2.1",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
-    "ajv": "^8.17.1",
+    "@uiw/codemirror-theme-vscode": "^4.25.2",
+    "ajv": "^8.18.0",
+    "bind-event-listener": "^3.0.0",
     "codemirror": "^6.0.1",
     "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.c1de068",
-    "@dxos/async": "0.8.4-main.c1de068",
-    "@dxos/context": "0.8.4-main.c1de068",
-    "@dxos/debug": "0.8.4-main.c1de068",
-    "@dxos/display-name": "0.8.4-main.c1de068",
-    "@dxos/echo-schema": "0.8.4-main.c1de068",
-    "@dxos/lit-ui": "0.8.4-main.c1de068",
-    "@dxos/live-object": "0.8.4-main.c1de068",
-    "@dxos/protocols": "0.8.4-main.c1de068",
-    "@dxos/log": "0.8.4-main.c1de068",
-    "@dxos/react-hooks": "0.8.4-main.c1de068",
-    "@dxos/react-ui-menu": "0.8.4-main.c1de068",
-    "@dxos/react-ui-stack": "0.8.4-main.c1de068",
-    "@dxos/util": "0.8.4-main.c1de068",
-    "@dxos/invariant": "0.8.4-main.c1de068"
+    "@dxos/app-graph": "0.8.4-main.c85a9c8dae",
+    "@dxos/client": "0.8.4-main.c85a9c8dae",
+    "@dxos/async": "0.8.4-main.c85a9c8dae",
+    "@dxos/context": "0.8.4-main.c85a9c8dae",
+    "@dxos/debug": "0.8.4-main.c85a9c8dae",
+    "@dxos/display-name": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo": "0.8.4-main.c85a9c8dae",
+    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo-db": "0.8.4-main.c85a9c8dae",
+    "@dxos/protocols": "0.8.4-main.c85a9c8dae",
+    "@dxos/lit-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/log": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-hooks": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-menu": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-editor": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-mosaic": "0.8.4-main.c85a9c8dae",
+    "@dxos/util": "0.8.4-main.c85a9c8dae"
   },
   "devDependencies": {
-    "@automerge/automerge": "3.0.0",
-    "@automerge/automerge-repo": "2.0.8",
-    "@automerge/automerge-repo-network-broadcastchannel": "2.0.8",
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.0",
+    "@automerge/automerge": "3.2.3",
+    "@automerge/automerge-repo": "2.5.1",
+    "@automerge/automerge-repo-network-broadcastchannel": "2.5.1",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
     "@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": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@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.17.0",
-    "happy-dom": "^13.3.1",
-    "jsdom": "^24.0.0",
+    "effect": "3.19.16",
+    "happy-dom": "^20.0.0",
+    "jsdom": "^27.0.0",
     "mocha": "^10.6.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "react-test-renderer": "~18.2.0",
-    "vite": "5.4.7",
-    "vite-plugin-top-level-await": "^1.4.1",
-    "vite-plugin-wasm": "^3.3.0",
-    "@dxos/config": "0.8.4-main.c1de068",
-    "@dxos/echo": "0.8.4-main.c1de068",
-    "@dxos/echo-signals": "0.8.4-main.c1de068",
-    "@dxos/keyboard": "0.8.4-main.c1de068",
-    "@dxos/random": "0.8.4-main.c1de068",
-    "@dxos/react-client": "0.8.4-main.c1de068",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-attention": "0.8.4-main.c1de068",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
-    "@dxos/schema": "0.8.4-main.c1de068",
-    "@dxos/storybook-utils": "0.8.4-main.c1de068"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "react-test-renderer": "~19.2.0",
+    "vite": "^7.1.11",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "vite-plugin-wasm": "^3.5.0",
+    "@dxos/config": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo-atom": "0.8.4-main.c85a9c8dae",
+    "@dxos/keyboard": "0.8.4-main.c85a9c8dae",
+    "@dxos/random": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-attention": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c85a9c8dae",
+    "@dxos/schema": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-types": "0.8.4-main.c85a9c8dae",
+    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "^0.80.12",
-    "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.8.4-main.c1de068",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,95 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+
+import { createDocAccessor, createObject } from '@dxos/echo-db';
+import { faker } 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 { Text } from '@dxos/schema';
+import {
+  automerge,
+  createBasicExtensions,
+  createMarkdownExtensions,
+  createThemeExtensions,
+  decorateMarkdown,
+} from '@dxos/ui-editor';
+
+import { createMenuGroup } from '../EditorMenuProvider';
+
+import { Editor, type EditorContentProps } from './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.
+
+faker.seed(1234);
+
+const initialValue = ['# Blue Monday', '', 'How does it **feel**?', ''].join('\n');
+
+const items = faker.helpers.multiple(faker.commerce.productName, { count: 10 }).sort();
+
+// TODO(burdon): Adapter other tests in react-ui-editor/stories to use this pattern.
+const withExtensions: Decorator<EditorContentProps> = (Story, { args }) => {
+  const { themeMode } = useThemeContext();
+  const extensions = useMemo(
+    () => [
+      createBasicExtensions(),
+      createThemeExtensions({ themeMode }),
+      createMarkdownExtensions(),
+      decorateMarkdown(),
+      automerge(createDocAccessor(createObject(Text.make(args.initialValue)), ['content'])),
+    ],
+    [themeMode],
+  );
+
+  return <Story args={{ ...args, extensions }} />;
+};
+
+const meta = {
+  title: 'ui/react-ui-editor/Editor',
+  component: Editor.Content,
+  decorators: [withExtensions, withTheme(), withLayout({ layout: 'column' }), withAttention()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    initialValue,
+  },
+} satisfies Meta<typeof Editor.Content>;
+
+export default meta;
+
+type Story = StoryObj<EditorContentProps>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Editor.Root>
+      <Editor.Content {...args} />
+    </Editor.Root>
+  ),
+};
+
+export const WithToolbar: Story = {
+  render: (args) => (
+    <Editor.Root>
+      <Editor.Toolbar />
+      <Editor.Content {...args} />
+    </Editor.Root>
+  ),
+};
+
+export const WithPopover: Story = {
+  render: (args) => (
+    <Editor.Root trigger={['@']} getMenu={({ text }) => [createMenuGroup({ items, filter: text })]}>
+      <Editor.Viewport>
+        <Editor.Toolbar />
+        <Editor.Content {...args} />
+      </Editor.Viewport>
+    </Editor.Root>
+  ),
+};

package/src/components/Editor/Editor.tsx

@@ -2,38 +2,184 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type EditorView } from '@codemirror/view';
-import React, { forwardRef, useImperativeHandle } from 'react';
+import { type Extension } from '@codemirror/state';
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
 
-import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { type DataType } from '@dxos/schema';
+import { invariant } from '@dxos/invariant';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
 
-import { useTextEditor, type UseTextEditorProps } from '../../hooks';
+import {
+  type EditorController,
+  EditorContent as NaturalEditorContent,
+  type EditorContentProps as NaturalEditorContentProps,
+  noopController,
+} from '../EditorContent';
+import { EditorMenuProvider, type UseEditorMenuProps, useEditorMenu } from '../EditorMenuProvider';
+import {
+  type EditorToolbarState,
+  EditorToolbar as NaturalEditorToolbar,
+  type EditorToolbarProps as NaturalEditorToolbarProps,
+  useEditorToolbar,
+} from '../EditorToolbar';
 
-export type EditorProps = ThemedClassName<
-  {
-    id: string;
-    text: DataType.Text;
-  } & Omit<UseTextEditorProps, 'id'>
+//
+// Context
+//
+
+type EditorContextValue = {
+  controller?: EditorController;
+  setController: (controller: EditorController) => void;
+  extensions?: Extension[];
+} & Pick<NaturalEditorToolbarProps, 'state'>;
+
+const [EditorContextProvider, useEditorContext] = createContext<EditorContextValue>('Editor');
+
+//
+// Root
+//
+
+type EditorRootProps = PropsWithChildren<
+  Pick<EditorContextValue, 'extensions'> & Omit<UseEditorMenuProps, 'viewRef'> & Pick<EditorToolbarState, 'viewMode'>
 >;
 
 /**
- * Minimal text editor.
+ * Root component for the Editor compound component.
+ * Provides context for all child components and manages the editor controller state.
  */
-export const Editor = forwardRef<EditorView | undefined, EditorProps>(
-  ({ classNames, id, text, ...props }, forwardedRef) => {
-    const { themeMode } = useThemeContext();
-    const { parentRef, focusAttributes, view } = useTextEditor(
-      () => ({
-        id,
-        initialValue: text.content,
-        ...props,
-      }),
-      [id, text, themeMode],
+const EditorRoot = forwardRef<EditorController | null, EditorRootProps>(
+  ({ children, extensions: extensionsProp, viewMode, ...props }, forwardedRef) => {
+    const state = useEditorToolbar({ viewMode });
+
+    const [controller, setController] = useState<EditorController>();
+    useImperativeHandle(forwardedRef, () => controller ?? noopController, [controller]);
+
+    // TODO(burdon): Consider lighter-weight approach if EditorMenuProvider is not needed.
+    const { groupsRef, extension, ...menuProps } = useEditorMenu(props);
+    const extensions = useMemo(
+      () => [extension, extensionsProp].filter(isNonNullable).flat(),
+      [extension, extensionsProp],
     );
 
-    useImperativeHandle(forwardedRef, () => view, [view]);
-    return <div ref={parentRef} className={mx(classNames)} {...focusAttributes} />;
+    return (
+      <EditorContextProvider
+        controller={controller}
+        setController={setController}
+        extensions={extensions}
+        state={state}
+      >
+        <EditorMenuProvider view={controller?.view} groups={groupsRef.current} {...menuProps}>
+          {children}
+        </EditorMenuProvider>
+      </EditorContextProvider>
+    );
   },
 );
+
+EditorRoot.displayName = 'Editor.Root';
+
+//
+// Viewport
+//
+
+const EDITOR_VIEWPORT_NAME = 'Editor.Viewport';
+
+type EditorViewportProps = ThemedClassName<PropsWithChildren<{}>>;
+
+/**
+ * Viewport component that wraps the toolbar and editor content area.
+ */
+const EditorViewport = ({ classNames, children }: EditorViewportProps) => {
+  return (
+    <div role='none' className={mx('grid grid-rows-[min-content_1fr] h-full overflow-hidden', classNames)}>
+      {children}
+    </div>
+  );
+};
+
+EditorViewport.displayName = EDITOR_VIEWPORT_NAME;
+
+//
+// Content
+//
+
+const EDITOR_CONTENT_NAME = 'Editor.Content';
+
+type EditorContentProps = Omit<NaturalEditorContentProps, 'ref'>;
+
+/**
+ * Content 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(EDITOR_CONTENT_NAME);
+
+  const extensions = useMemo(
+    () => [additionalExtensions, providedExtensions].filter(isNonNullable).flat(),
+    [providedExtensions, additionalExtensions],
+  );
+
+  return <NaturalEditorContent {...props} extensions={extensions} ref={setController} />;
+};
+
+EditorContent.displayName = EDITOR_CONTENT_NAME;
+
+//
+// Toolbar
+//
+
+const EDITOR_TOOLBAR_NAME = 'Editor.Toolbar';
+
+type EditorToolbarProps = Omit<NaturalEditorToolbarProps, 'getView' | 'state'>;
+
+/**
+ * Toolbar component that provides editor formatting and control actions.
+ * Automatically connects to the editor view through context.
+ */
+const EditorToolbar = (props: EditorToolbarProps) => {
+  const { controller, state } = useEditorContext(EDITOR_TOOLBAR_NAME);
+
+  // TODO(burdon): Fix invariant.
+  const getView = useCallback(() => {
+    invariant(controller?.view);
+    return controller?.view;
+  }, [controller]);
+
+  return <NaturalEditorToolbar {...props} getView={getView} state={state} />;
+};
+
+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,
+};
+
+export type {
+  EditorController,
+  EditorRootProps,
+  EditorViewportProps,
+  EditorContentProps,
+  // EditorToolbarProps, // TODO(burdon): Restore once removed deprecated props.
+};

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(
+          'w-full outline-hidden focus:border-accent-surface focus-within:border-neutral-focus-indicator',
+          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';