@dxos/react-ui-editor 0.8.2-main.5ca3450 → 0.8.2-main.600d381

package/dist/types/src/components/EditorToolbar/lists.d.ts

@@ -1,14 +1,15 @@
+import { type EditorView } from '@codemirror/view';
 import { type NodeArg } from '@dxos/app-graph';
 import { type EditorToolbarState } from './util';
-export declare const createLists: (state: EditorToolbarState) => {
+export declare const createLists: (state: EditorToolbarState, getView: () => EditorView) => {
     nodes: (Readonly<Omit<Readonly<{
         id: string;
         type: string;
         cacheable?: string[];
-        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties & import("../..").EditorActionPayload>;
+        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties>;
         data: import("@dxos/app-graph").ActionData;
     }>, "properties"> & {
-        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties & import("../..").EditorActionPayload>;
+        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties>;
     }> | NodeArg<any>)[];
     edges: {
         source: string;

package/dist/types/src/components/EditorToolbar/lists.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lists.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/lists.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG/C,OAAO,EAA+C,KAAK,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAqB9F,eAAO,MAAM,WAAW,GAAI,OAAO,kBAAkB;;;;;;;;;;;;;;CAWpD,CAAC"}
+{"version":3,"file":"lists.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/lists.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG/C,OAAO,EAA+C,KAAK,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAsC9F,eAAO,MAAM,WAAW,GAAI,OAAO,kBAAkB,EAAE,SAAS,MAAM,UAAU;;;;;;;;;;;;;;CAW/E,CAAC"}

package/dist/types/src/components/EditorToolbar/search.d.ts

@@ -0,0 +1,17 @@
+import { type EditorView } from '@codemirror/view';
+export declare const createSearch: (getView: () => EditorView) => {
+    nodes: Readonly<Omit<Readonly<{
+        id: string;
+        type: string;
+        cacheable?: string[];
+        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties>;
+        data: import("@dxos/app-graph").ActionData;
+    }>, "properties"> & {
+        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties>;
+    }>[];
+    edges: {
+        source: string;
+        target: string;
+    }[];
+};
+//# sourceMappingURL=search.d.ts.map

package/dist/types/src/components/EditorToolbar/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/search.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAUnD,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,UAAU;;;;;;;;;;;;;;CAGpD,CAAC"}

package/dist/types/src/components/EditorToolbar/util.d.ts

@@ -1,7 +1,9 @@
+import { type EditorView } from '@codemirror/view';
+import { type Action } from '@dxos/app-graph';
 import { type Live } from '@dxos/live-object';
-import { type Label, type ThemedClassName } from '@dxos/react-ui';
-import { type MenuSeparator, type MenuItemGroup, type ToolbarMenuActionGroupProperties, type MenuActionProperties, type ActionGraphProps } from '@dxos/react-ui-menu';
-import type { EditorAction, EditorActionPayload, EditorViewMode, Formatting } from '../../extensions';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type MenuSeparator, type MenuItemGroup, type ToolbarMenuActionGroupProperties, type ActionGraphProps, type MenuActionProperties } from '@dxos/react-ui-menu';
+import type { EditorAction, EditorViewMode, Formatting } from '../../extensions';
 export type EditorToolbarState = Formatting & Partial<{
     comment: boolean;
     viewMode: EditorViewMode;
@@ -13,26 +15,27 @@ export type EditorToolbarFeatureFlags = Partial<{
     formatting: boolean;
     lists: boolean;
     blocks: boolean;
-    comment: boolean;
     search: boolean;
-    viewMode: boolean;
+    comment: boolean;
+    image: () => void;
+    viewMode: (mode: EditorViewMode) => void;
 }>;
 export type EditorToolbarActionGraphProps = {
     state: Live<EditorToolbarState>;
+    getView: () => EditorView;
     customActions?: () => ActionGraphProps;
-    onAction: (action: EditorAction) => void;
 };
 export type EditorToolbarProps = ThemedClassName<EditorToolbarActionGraphProps & EditorToolbarFeatureFlags & {
     attendableId?: string;
     role?: string;
 }>;
 export type EditorToolbarItem = EditorAction | MenuItemGroup | MenuSeparator;
-export declare const createEditorAction: (payload: EditorActionPayload & Partial<MenuActionProperties>, icon: string, label?: Label, id?: string) => EditorAction;
+export declare const createEditorAction: (id: string, invoke: () => void, properties: Partial<MenuActionProperties>) => Action<MenuActionProperties>;
 export declare const createEditorActionGroup: (id: string, props: Omit<ToolbarMenuActionGroupProperties, "icon">, icon?: string) => {
     id: string;
     type: string;
     properties: {
-        label: Label;
+        label: import("@dxos/react-ui").Label;
         value: string | (string & string[]);
         classNames?: import("@dxos/react-ui-types").ClassNameValue;
         hidden?: boolean | undefined;
@@ -46,13 +49,4 @@ export declare const createEditorActionGroup: (id: string, props: Omit<ToolbarMe
     };
     data: typeof import("@dxos/app-graph").actionGroupSymbol;
 };
-export declare const editorToolbarSearch: Readonly<Omit<Readonly<{
-    id: string;
-    type: string;
-    cacheable?: string[];
-    properties: Readonly<MenuActionProperties & EditorActionPayload>;
-    data: import("@dxos/app-graph").ActionData;
-}>, "properties"> & {
-    properties: Readonly<MenuActionProperties & EditorActionPayload>;
-}>;
 //# sourceMappingURL=util.d.ts.map

package/dist/types/src/components/EditorToolbar/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/util.ts"],"names":[],"mappings":"AAMA,OAAO,EAAQ,KAAK,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,gCAAgC,EACrC,KAAK,oBAAoB,EAGzB,KAAK,gBAAgB,EACtB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGtG,MAAM,MAAM,kBAAkB,GAAG,UAAU,GACzC,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,cAAc,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAE9E,eAAO,MAAM,qBAAqB,GAAI,eAAc,OAAO,CAAC,kBAAkB,CAAM,6BAEnF,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAEhC,aAAa,CAAC,EAAE,MAAM,gBAAgB,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAC9C,6BAA6B,GAAG,yBAAyB,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CACrG,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;AAE7E,eAAO,MAAM,kBAAkB,GAC7B,SAAS,mBAAmB,GAAG,OAAO,CAAC,oBAAoB,CAAC,EAC5D,MAAM,MAAM,EACZ,QAAO,KAAyD,EAChE,KAAI,MAAqB,KAC+B,YAAY,CAAC;AAEvE,eAAO,MAAM,uBAAuB,GAClC,IAAI,MAAM,EACV,OAAO,IAAI,CAAC,gCAAgC,EAAE,MAAM,CAAC,EACrD,OAAO,MAAM;;;;;;;;;;;;;;;;;CACiD,CAAC;AAEjE,eAAO,MAAM,mBAAmB;;;;;;;;EAA0E,CAAC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/util.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAQ,KAAK,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,gCAAgC,EAGrC,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EAC1B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGjF,MAAM,MAAM,kBAAkB,GAAG,UAAU,GACzC,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,cAAc,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAE9E,eAAO,MAAM,qBAAqB,GAAI,eAAc,OAAO,CAAC,kBAAkB,CAAM,6BAEnF,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC;IAC9C,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAEhB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;CAC1C,CAAC,CAAC;AAEH,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,UAAU,CAAC;IAE1B,aAAa,CAAC,EAAE,MAAM,gBAAgB,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAC9C,6BAA6B,GAAG,yBAAyB,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CACrG,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;AAE7E,eAAO,MAAM,kBAAkB,GAAI,IAAI,MAAM,EAAE,QAAQ,MAAM,IAAI,EAAE,YAAY,OAAO,CAAC,oBAAoB,CAAC,KAE/C,MAAM,CAAC,oBAAoB,CACvF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,IAAI,MAAM,EACV,OAAO,IAAI,CAAC,gCAAgC,EAAE,MAAM,CAAC,EACrD,OAAO,MAAM;;;;;;;;;;;;;;;;;CACiD,CAAC"}

package/dist/types/src/components/EditorToolbar/view-mode.d.ts

@@ -1,14 +1,15 @@
 import { type NodeArg } from '@dxos/app-graph';
 import { type EditorToolbarState } from './util';
-export declare const createViewMode: (state: EditorToolbarState) => {
+import { type EditorViewMode } from '../../extensions';
+export declare const createViewMode: (state: EditorToolbarState, onViewModeChange: (mode: EditorViewMode) => void) => {
     nodes: (Readonly<Omit<Readonly<{
         id: string;
         type: string;
         cacheable?: string[];
-        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties & import("../..").EditorActionPayload>;
+        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties>;
         data: import("@dxos/app-graph").ActionData;
     }>, "properties"> & {
-        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties & import("../..").EditorActionPayload>;
+        properties: Readonly<import("@dxos/react-ui-menu").MenuActionProperties>;
     }> | NodeArg<any>)[];
     edges: {
         source: string;

package/dist/types/src/components/EditorToolbar/view-mode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-mode.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/view-mode.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG/C,OAAO,EAA+C,KAAK,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AA6B9F,eAAO,MAAM,cAAc,GAAI,OAAO,kBAAkB;;;;;;;;;;;;;;CAWvD,CAAC"}
+{"version":3,"file":"view-mode.d.ts","sourceRoot":"","sources":["../../../../../src/components/EditorToolbar/view-mode.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG/C,OAAO,EAA+C,KAAK,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC9F,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA6BvD,eAAO,MAAM,cAAc,GAAI,OAAO,kBAAkB,EAAE,kBAAkB,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI;;;;;;;;;;;;;;CAWzG,CAAC"}

package/dist/types/src/hooks/index.d.ts

@@ -1,3 +1,2 @@
-export * from './useActionHandler';
 export * from './useTextEditor';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.2-main.5ca3450",
+  "version": "0.8.2-main.600d381",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -57,21 +57,21 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.2-main.5ca3450",
-    "@dxos/async": "0.8.2-main.5ca3450",
-    "@dxos/context": "0.8.2-main.5ca3450",
-    "@dxos/automerge": "0.8.2-main.5ca3450",
-    "@dxos/debug": "0.8.2-main.5ca3450",
-    "@dxos/echo-schema": "0.8.2-main.5ca3450",
-    "@dxos/display-name": "0.8.2-main.5ca3450",
-    "@dxos/live-object": "0.8.2-main.5ca3450",
-    "@dxos/invariant": "0.8.2-main.5ca3450",
-    "@dxos/lit-ui": "0.8.2-main.5ca3450",
-    "@dxos/log": "0.8.2-main.5ca3450",
-    "@dxos/protocols": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-menu": "0.8.2-main.5ca3450",
-    "@dxos/react-hooks": "0.8.2-main.5ca3450",
-    "@dxos/util": "0.8.2-main.5ca3450"
+    "@dxos/async": "0.8.2-main.600d381",
+    "@dxos/automerge": "0.8.2-main.600d381",
+    "@dxos/context": "0.8.2-main.600d381",
+    "@dxos/debug": "0.8.2-main.600d381",
+    "@dxos/app-graph": "0.8.2-main.600d381",
+    "@dxos/display-name": "0.8.2-main.600d381",
+    "@dxos/echo-schema": "0.8.2-main.600d381",
+    "@dxos/invariant": "0.8.2-main.600d381",
+    "@dxos/lit-ui": "0.8.2-main.600d381",
+    "@dxos/live-object": "0.8.2-main.600d381",
+    "@dxos/log": "0.8.2-main.600d381",
+    "@dxos/protocols": "0.8.2-main.600d381",
+    "@dxos/react-hooks": "0.8.2-main.600d381",
+    "@dxos/react-ui-menu": "0.8.2-main.600d381",
+    "@dxos/util": "0.8.2-main.600d381"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -95,24 +95,24 @@
     "vite": "5.4.7",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "@dxos/automerge": "0.8.2-main.5ca3450",
-    "@dxos/config": "0.8.2-main.5ca3450",
-    "@dxos/echo-signals": "0.8.2-main.5ca3450",
-    "@dxos/keyboard": "0.8.2-main.5ca3450",
-    "@dxos/random": "0.8.2-main.5ca3450",
-    "@dxos/react-client": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-theme": "0.8.2-main.5ca3450",
-    "@dxos/react-ui": "0.8.2-main.5ca3450",
-    "@dxos/storybook-utils": "0.8.2-main.5ca3450"
+    "@dxos/automerge": "0.8.2-main.600d381",
+    "@dxos/config": "0.8.2-main.600d381",
+    "@dxos/echo-signals": "0.8.2-main.600d381",
+    "@dxos/keyboard": "0.8.2-main.600d381",
+    "@dxos/random": "0.8.2-main.600d381",
+    "@dxos/react-ui": "0.8.2-main.600d381",
+    "@dxos/react-ui-theme": "0.8.2-main.600d381",
+    "@dxos/react-client": "0.8.2-main.600d381",
+    "@dxos/storybook-utils": "0.8.2-main.600d381"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-theme": "0.8.2-main.5ca3450",
-    "@dxos/react-client": "0.8.2-main.5ca3450"
+    "@dxos/react-ui-theme": "0.8.2-main.600d381",
+    "@dxos/react-client": "0.8.2-main.600d381",
+    "@dxos/react-ui": "0.8.2-main.600d381"
   },
   "publishConfig": {
     "access": "public"

package/src/components/EditorToolbar/EditorToolbar.stories.tsx

@@ -0,0 +1,90 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useCallback, useState } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { useThemeContext } from '@dxos/react-ui';
+import { attentionSurface, mx } from '@dxos/react-ui-theme';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { EditorToolbar, useEditorToolbarState } from '..';
+import {
+  type EditorInputMode,
+  decorateMarkdown,
+  createMarkdownExtensions,
+  formattingKeymap,
+  useFormattingState,
+  createBasicExtensions,
+  createThemeExtensions,
+  InputModeExtensions,
+  type EditorViewMode,
+} from '../../extensions';
+import { useTextEditor, type UseTextEditorProps } from '../../hooks';
+import translations from '../../translations';
+
+type StoryProps = { placeholder?: string } & UseTextEditorProps;
+
+const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
+  const { themeMode } = useThemeContext();
+  const toolbarState = useEditorToolbarState({ viewMode: 'source' });
+  const viewMode = toolbarState.viewMode;
+  const trackFormatting = useFormattingState(toolbarState);
+  // TODO(wittjosiah): Provide way to change the input mode.
+  const [editorInputMode, _setEditorInputMode] = useState<EditorInputMode>('default');
+  const { parentRef, view } = useTextEditor(
+    () => ({
+      autoFocus,
+      initialValue,
+      moveToEndOfLine: true,
+      extensions: [
+        editorInputMode ? InputModeExtensions[editorInputMode] : [],
+        createBasicExtensions({ placeholder, lineWrapping: true, readOnly: viewMode === 'readonly' }),
+        createMarkdownExtensions({ themeMode }),
+        createThemeExtensions({ themeMode, syntaxHighlighting: true }),
+        viewMode === 'source' ? [] : decorateMarkdown(),
+        formattingKeymap(),
+        trackFormatting,
+      ],
+    }),
+    [editorInputMode, viewMode, themeMode, placeholder],
+  );
+
+  const getView = useCallback(() => {
+    invariant(view);
+    return view;
+  }, [view]);
+
+  const handleViewModeChange = useCallback((mode: EditorViewMode) => {
+    toolbarState.viewMode = mode;
+  }, []);
+
+  // TODO(marijn): This doesn't update the state on view changes.
+  //  Also not sure if view is even guaranteed to exist at this point.
+  return (
+    <div role='none' className={mx('fixed inset-0 flex flex-col')}>
+      {toolbarState && <EditorToolbar state={toolbarState} getView={getView} viewMode={handleViewModeChange} />}
+      <div role='none' className='grow overflow-hidden'>
+        <div className={attentionSurface} ref={parentRef} />
+      </div>
+    </div>
+  );
+};
+
+export const Default = {
+  args: {
+    autoFocus: true,
+    placeholder: 'Text...',
+    initialValue: '# Demo\n\nThis is a document.\n\n',
+  },
+};
+
+export default {
+  title: 'ui/react-ui-editor/EditorToolbar',
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+  parameters: { translations, layout: 'fullscreen' },
+};

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -2,63 +2,60 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React, { memo, useCallback } from 'react';
 
 import { type NodeArg } from '@dxos/app-graph';
 import { ElevationProvider } from '@dxos/react-ui';
-import {
-  type MenuActionHandler,
-  MenuProvider,
-  ToolbarMenu,
-  createGapSeparator,
-  useMenuActions,
-} from '@dxos/react-ui-menu';
+import { MenuProvider, ToolbarMenu, createGapSeparator, useMenuActions } from '@dxos/react-ui-menu';
 import { textBlockWidth } from '@dxos/react-ui-theme';
 
 import { createBlocks } from './blocks';
 import { createComment } from './comment';
 import { createFormatting } from './formatting';
 import { createHeadings } from './headings';
+import { createImageUpload } from './image';
 import { createLists } from './lists';
-import {
-  type EditorToolbarActionGraphProps,
-  type EditorToolbarFeatureFlags,
-  type EditorToolbarProps,
-  editorToolbarSearch,
-} from './util';
+import { createSearch } from './search';
+import { type EditorToolbarActionGraphProps, type EditorToolbarFeatureFlags, type EditorToolbarProps } from './util';
 import { createViewMode } from './view-mode';
 import { stackItemContentToolbarClassNames } from '../../defaults';
 
 const createToolbar = ({
+  getView,
   state,
   customActions,
   ...features
-}: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'state' | 'customActions'>): {
+}: EditorToolbarFeatureFlags & Pick<EditorToolbarActionGraphProps, 'getView' | 'state' | 'customActions'>): {
   nodes: NodeArg<any>[];
   edges: { source: string; target: string }[];
 } => {
   const nodes = [];
   const edges = [];
   if (features.headings ?? true) {
-    const headings = createHeadings(state);
+    const headings = createHeadings(state, getView);
     nodes.push(...headings.nodes);
     edges.push(...headings.edges);
   }
   if (features.formatting ?? true) {
-    const formatting = createFormatting(state);
+    const formatting = createFormatting(state, getView);
     nodes.push(...formatting.nodes);
     edges.push(...formatting.edges);
   }
   if (features.lists ?? true) {
-    const lists = createLists(state);
+    const lists = createLists(state, getView);
     nodes.push(...lists.nodes);
     edges.push(...lists.edges);
   }
   if (features.blocks ?? true) {
-    const blocks = createBlocks(state);
+    const blocks = createBlocks(state, getView);
     nodes.push(...blocks.nodes);
     edges.push(...blocks.edges);
   }
+  if (features.image) {
+    const image = createImageUpload(features.image);
+    nodes.push(...image.nodes);
+    edges.push(...image.edges);
+  }
   if (customActions) {
     const custom = customActions();
     nodes.push(...custom.nodes);
@@ -67,31 +64,33 @@ const createToolbar = ({
   const editorToolbarGap = createGapSeparator();
   nodes.push(...editorToolbarGap.nodes);
   edges.push(...editorToolbarGap.edges);
-  if (features.comment ?? true) {
-    const comment = createComment(state);
+  if (features.comment) {
+    const comment = createComment(state, getView);
     nodes.push(...comment.nodes);
     edges.push(...comment.edges);
   }
   if (features.search ?? true) {
-    nodes.push(editorToolbarSearch);
-    edges.push({ source: 'root', target: editorToolbarSearch.id });
+    const search = createSearch(getView);
+    nodes.push(...search.nodes);
+    edges.push(...search.edges);
   }
-  if (features.viewMode ?? true) {
-    const viewMode = createViewMode(state);
+  if (features.viewMode) {
+    const viewMode = createViewMode(state, features.viewMode);
     nodes.push(...viewMode.nodes);
     edges.push(...viewMode.edges);
   }
   return { nodes, edges };
 };
 
-const useEditorToolbarActionGraph = ({ onAction, ...props }: EditorToolbarProps) => {
+// 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 = useCallback(() => createToolbar(props), [props]);
-  const { resolveGroupItems } = useMenuActions(menuCreator);
-
-  return { resolveGroupItems, onAction: onAction as MenuActionHandler };
+  return useMenuActions(menuCreator);
 };
 
-export const EditorToolbar = ({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
+export const EditorToolbar = memo(({ classNames, attendableId, role, ...props }: EditorToolbarProps) => {
   const menuProps = useEditorToolbarActionGraph(props);
   return (
     <div role='none' className={stackItemContentToolbarClassNames(role)}>
@@ -102,4 +101,4 @@ export const EditorToolbar = ({ classNames, attendableId, role, ...props }: Edit
       </ElevationProvider>
     </div>
   );
-};
+});

package/src/components/EditorToolbar/blocks.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 { removeBlockquote, addBlockquote, removeCodeblock, addCodeblock, insertTable } from '../../extensions';
 
 const createBlockGroupAction = (value: string) =>
   createEditorActionGroup('block', {
@@ -15,22 +17,41 @@ const createBlockGroupAction = (value: string) =>
     value,
   } as ToolbarMenuActionGroupProperties);
 
-const createBlockActions = (value: string, blankLine?: boolean) =>
+const createBlockActions = (value: string, getView: () => EditorView, blankLine?: boolean) =>
   Object.entries({
     blockquote: 'ph--quotes--regular',
     codeblock: 'ph--code-block--regular',
     table: 'ph--table--regular',
   }).map(([type, icon]) => {
+    const checked = type === value;
     return createEditorAction(
-      { type: type as PayloadType, checked: type === value, ...(type === 'table' && { disabled: !!blankLine }) },
-      icon,
+      type,
+      () => {
+        const view = getView();
+        if (!view) {
+          return;
+        }
+
+        switch (type) {
+          case 'blockquote':
+            checked ? removeBlockquote(view) : addBlockquote(view);
+            break;
+          case 'codeblock':
+            checked ? removeCodeblock(view) : addCodeblock(view);
+            break;
+          case 'table':
+            insertTable(view);
+            break;
+        }
+      },
+      { checked, ...(type === 'table' && { disabled: !!blankLine }), icon },
     );
   });
 
-export const createBlocks = (state: EditorToolbarState) => {
+export const createBlocks = (state: EditorToolbarState, getView: () => EditorView) => {
   const value = state?.blockQuote ? 'blockquote' : state.blockType ?? '';
   const blockGroupAction = createBlockGroupAction(value);
-  const blockActions = createBlockActions(value, state.blankLine);
+  const blockActions = createBlockActions(value, getView, state.blankLine);
   return {
     nodes: [blockGroupAction as NodeArg<any>, ...blockActions],
     edges: [

package/src/components/EditorToolbar/comment.ts

@@ -2,9 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type EditorView } from '@codemirror/view';
+
 import { type Label } from '@dxos/react-ui';
 
 import { createEditorAction, type EditorToolbarState } from './util';
+import { createComment as nativeCreateComment } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const commentLabel = (comment?: boolean, selection?: boolean) =>
@@ -14,10 +17,14 @@ const commentLabel = (comment?: boolean, selection?: boolean) =>
       ? 'select text to comment label'
       : 'comment label';
 
-const createCommentAction = (label: Label) =>
-  createEditorAction({ type: 'comment', testId: 'editor.toolbar.comment' }, 'ph--chat-text--regular', label);
+const createCommentAction = (label: Label, getView: () => EditorView) =>
+  createEditorAction('comment', () => nativeCreateComment(getView()), {
+    testId: 'editor.toolbar.comment',
+    icon: 'ph--chat-text--regular',
+    label,
+  });
 
-export const createComment = (state: EditorToolbarState) => ({
-  nodes: [createCommentAction([commentLabel(state.comment, state.selection), { ns: translationKey }])],
+export const createComment = (state: EditorToolbarState, getView: () => EditorView) => ({
+  nodes: [createCommentAction([commentLabel(state.comment, state.selection), { ns: translationKey }], getView)],
   edges: [{ source: 'root', target: 'comment' }],
 });

package/src/components/EditorToolbar/formatting.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 Formatting, type PayloadType } from '../../extensions';
+import { addLink, Inline, removeLink, setStyle, type Formatting } from '../../extensions';
 
 const formats = {
   strong: 'ph--text-b--regular',
@@ -23,14 +25,39 @@ const createFormattingGroup = (formatting: Formatting) =>
     value: Object.keys(formats).filter((key) => !!formatting[key as keyof Formatting]),
   } as ToolbarMenuActionGroupProperties);
 
-const createFormattingActions = (formatting: Formatting) =>
-  Object.entries(formats).map(([type, icon]) =>
-    createEditorAction({ type: type as PayloadType, checked: !!formatting[type as keyof Formatting] }, icon),
-  );
+const createFormattingActions = (formatting: Formatting, getView: () => EditorView) =>
+  Object.entries(formats).map(([type, icon]) => {
+    const checked = !!formatting[type as keyof Formatting];
+    return createEditorAction(
+      type,
+      () => {
+        const view = getView();
+        if (!view) {
+          return;
+        }
+
+        if (type === 'link') {
+          checked ? removeLink(view) : addLink()(view);
+          return;
+        }
+
+        const inlineType =
+          type === 'strong'
+            ? Inline.Strong
+            : type === 'emphasis'
+              ? Inline.Emphasis
+              : type === 'strikethrough'
+                ? Inline.Strikethrough
+                : Inline.Code;
+        setStyle(inlineType, !checked)(view);
+      },
+      { checked, icon },
+    );
+  });
 
-export const createFormatting = (state: EditorToolbarState) => {
+export const createFormatting = (state: EditorToolbarState, getView: () => EditorView) => {
   const formattingGroupAction = createFormattingGroup(state);
-  const formattingActions = createFormattingActions(state);
+  const formattingActions = createFormattingActions(state, getView);
   return {
     nodes: [formattingGroupAction as NodeArg<any>, ...formattingActions],
     edges: [