@dxos/react-ui-editor 0.4.8-main.6919ef3 → 0.4.8-main.6dbc1f1

package/dist/types/src/extensions/markdown/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/image.ts"],"names":[],"mappings":"AAKA,OAAO,EAAoB,KAAK,SAAS,EAA4C,MAAM,mBAAmB,CAAC;AAG/G,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;AAE9B,eAAO,MAAM,KAAK,aAAa,YAAY,KAAQ,SA8BlD,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/image.ts"],"names":[],"mappings":"AAKA,OAAO,EAAoB,KAAK,SAAS,EAA4C,MAAM,mBAAmB,CAAC;AAG/G,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;AAE9B,eAAO,MAAM,KAAK,aAAa,YAAY,KAAQ,SA8BlD,CAAC;AA4DF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,WAAW,aAAa,YAAY,SAAY,CAAC"}

package/dist/types/src/extensions/markdown/index.d.ts

@@ -1,3 +1,4 @@
+export * from './action';
 export * from './bundle';
 export * from './decorate';
 export * from './formatting';

package/dist/types/src/extensions/markdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}

package/dist/types/src/extensions/modes.d.ts

@@ -1,6 +1,6 @@
 import { type Extension, Facet } from '@codemirror/state';
 export declare const focusEvent = "focus.container";
-export type EditorMode = 'default' | 'vim' | undefined;
+export type EditorMode = 'default' | 'vim' | 'vscode' | undefined;
 export type EditorConfig = {
     type: string;
     noTabster?: boolean;

package/dist/types/src/extensions/modes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modes.d.ts","sourceRoot":"","sources":["../../../../src/extensions/modes.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1D,eAAO,MAAM,UAAU,oBAAoB,CAAC;AAE5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAErB,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;CAgBpD,CAAC"}
+{"version":3,"file":"modes.d.ts","sourceRoot":"","sources":["../../../../src/extensions/modes.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAK1D,eAAO,MAAM,UAAU,oBAAoB,CAAC;AAE5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAElE,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAErB,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;CAsBpD,CAAC"}

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

@@ -1,4 +1,4 @@
-import type { EditorView } from '@codemirror/view';
-import type { ToolbarProps } from '../components';
+import { type EditorView } from '@codemirror/view';
+import { type ToolbarProps } from '../components';
 export declare const useActionHandler: (view?: EditorView | null) => ToolbarProps['onAction'];
 //# sourceMappingURL=useActionHandler.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useActionHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useActionHandler.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqBlD,eAAO,MAAM,gBAAgB,UAAW,UAAU,GAAG,IAAI,KAAG,YAAY,CAAC,UAAU,CAiElF,CAAC"}
+{"version":3,"file":"useActionHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useActionHandler.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGlD,eAAO,MAAM,gBAAgB,UAAW,UAAU,GAAG,IAAI,KAAG,YAAY,CAAC,UAAU,CAElF,CAAC"}

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

@@ -1,5 +1,7 @@
-import { type DocAccessor, type TextObject } from '@dxos/echo-schema';
-export declare const useDocAccessor: <T = any>(text: TextObject) => {
+import { type DocAccessor, type TextObject, type EchoReactiveObject } from '@dxos/echo-schema';
+export declare const useDocAccessor: <T = any>(text: TextObject | EchoReactiveObject<{
+    content: string;
+}>) => {
     id: string;
     doc: string | undefined;
     accessor: DocAccessor<T>;

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

@@ -1 +1 @@
-{"version":3,"file":"useDocAccessor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDocAccessor.ts"],"names":[],"mappings":"AAMA,OAAO,EAAqB,KAAK,WAAW,EAAkB,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGzG,eAAO,MAAM,cAAc,kBACnB,UAAU;QACT,MAAM;SAAO,MAAM,GAAG,SAAS;;CASvC,CAAC"}
+{"version":3,"file":"useDocAccessor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDocAccessor.ts"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,UAAU,EACf,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAG3B,eAAO,MAAM,cAAc,kBACnB,UAAU,GAAG,mBAAmB;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;QACnD,MAAM;SAAO,MAAM,GAAG,SAAS;;CASvC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAC;AAKlG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,YAAY,CAAC,CAAC;AAEzF;;GAEG;AACH,eAAO,MAAM,aAAa,QAAQ,MAAM,kBAAkB,4BAA2C,aAyEpG,CAAC"}
+{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAC;AAKlG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,YAAY,CAAC,CAAC;AAEzF;;GAEG;AACH,eAAO,MAAM,aAAa,QAAQ,MAAM,kBAAkB,4BAA2C,aA4EpG,CAAC"}

package/dist/types/src/hooks/useTextEditor.stories.d.ts

@@ -24,6 +24,7 @@ declare const _default: {
                     'blockquote label': string;
                     'codeblock label': string;
                     'comment label': string;
+                    'image label': string;
                     'heading label': string;
                     'table label': string;
                 };

package/dist/types/src/hooks/useTextEditor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAwBpB,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;mBA2Ee,UAAU;;;;;;;;;;;;;;;;;;;;;;;;AAH3B,wBASE;AAEF,eAAO,MAAM,OAAO;;CAKnB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAQjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC"}
+{"version":3,"file":"useTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAwBpB,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;mBA2Ee,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;AAH3B,wBASE;AAEF,eAAO,MAAM,OAAO;;CAKnB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAQjB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC"}

package/dist/types/src/themes/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAgP1B,CAAC"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAgQ1B,CAAC"}

package/dist/types/src/translations.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
             'blockquote label': string;
             'codeblock label': string;
             'comment label': string;
+            'image label': string;
             'heading label': string;
             'table label': string;
         };

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;AAEhD,wBAoBE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;AAEhD,wBAqBE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.8-main.6919ef3",
+  "version": "0.4.8-main.6dbc1f1",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,27 +30,29 @@
     "@lezer/markdown": "^1.2.0",
     "@radix-ui/react-context": "^1.0.0",
     "@replit/codemirror-vim": "^6.0.14",
+    "@replit/codemirror-vscode-keymap": "^6.0.2",
     "codemirror": "^6.0.1",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
+    "react-dropzone": "^14.2.3",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.4.8-main.6919ef3",
-    "@dxos/automerge": "0.4.8-main.6919ef3",
-    "@dxos/context": "0.4.8-main.6919ef3",
-    "@dxos/debug": "0.4.8-main.6919ef3",
-    "@dxos/display-name": "0.4.8-main.6919ef3",
-    "@dxos/log": "0.4.8-main.6919ef3",
-    "@dxos/echo-schema": "0.4.8-main.6919ef3",
-    "@dxos/protocols": "0.4.8-main.6919ef3",
-    "@dxos/invariant": "0.4.8-main.6919ef3",
-    "@dxos/react-async": "0.4.8-main.6919ef3",
-    "@dxos/react-ui": "0.4.8-main.6919ef3",
-    "@dxos/react-ui-theme": "0.4.8-main.6919ef3",
-    "@dxos/text-model": "0.4.8-main.6919ef3",
-    "@dxos/util": "0.4.8-main.6919ef3"
+    "@dxos/async": "0.4.8-main.6dbc1f1",
+    "@dxos/automerge": "0.4.8-main.6dbc1f1",
+    "@dxos/context": "0.4.8-main.6dbc1f1",
+    "@dxos/debug": "0.4.8-main.6dbc1f1",
+    "@dxos/display-name": "0.4.8-main.6dbc1f1",
+    "@dxos/echo-schema": "0.4.8-main.6dbc1f1",
+    "@dxos/log": "0.4.8-main.6dbc1f1",
+    "@dxos/invariant": "0.4.8-main.6dbc1f1",
+    "@dxos/protocols": "0.4.8-main.6dbc1f1",
+    "@dxos/react-async": "0.4.8-main.6dbc1f1",
+    "@dxos/react-ui": "0.4.8-main.6dbc1f1",
+    "@dxos/react-ui-theme": "0.4.8-main.6dbc1f1",
+    "@dxos/util": "0.4.8-main.6dbc1f1",
+    "@dxos/text-model": "0.4.8-main.6dbc1f1"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
@@ -77,20 +79,20 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.3.1",
-    "@dxos/config": "0.4.8-main.6919ef3",
-    "@dxos/echo-signals": "0.4.8-main.6919ef3",
-    "@dxos/echo-typegen": "0.4.8-main.6919ef3",
-    "@dxos/keyboard": "0.4.8-main.6919ef3",
-    "@dxos/random": "0.4.8-main.6919ef3",
-    "@dxos/react-ui": "0.4.8-main.6919ef3",
-    "@dxos/storybook-utils": "0.4.8-main.6919ef3",
-    "@dxos/react-client": "0.4.8-main.6919ef3"
+    "@dxos/config": "0.4.8-main.6dbc1f1",
+    "@dxos/echo-typegen": "0.4.8-main.6dbc1f1",
+    "@dxos/keyboard": "0.4.8-main.6dbc1f1",
+    "@dxos/echo-signals": "0.4.8-main.6dbc1f1",
+    "@dxos/react-client": "0.4.8-main.6dbc1f1",
+    "@dxos/react-ui": "0.4.8-main.6dbc1f1",
+    "@dxos/random": "0.4.8-main.6dbc1f1",
+    "@dxos/storybook-utils": "0.4.8-main.6dbc1f1"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.8-main.6919ef3"
+    "@dxos/react-client": "0.4.8-main.6dbc1f1"
   },
   "publishConfig": {
     "access": "public"

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -13,6 +13,7 @@ import { createRoot } from 'react-dom/client';
 import { TextObject } from '@dxos/echo-schema';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
+import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
 import { Button, DensityProvider, Input, ThemeProvider, useThemeContext } from '@dxos/react-ui';
 import { baseSurface, defaultTx, getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
@@ -32,7 +33,7 @@ import {
   createThemeExtensions,
   decorateMarkdown,
   defaultOptions,
-  dnd,
+  dropFile,
   formattingKeymap,
   image,
   linkTooltip,
@@ -501,7 +502,18 @@ export const Annotations = {
 };
 
 export const DND = {
-  render: () => <Story text={str('# DND', '')} extensions={[dnd()]} />,
+  render: () => (
+    <Story
+      text={str('# DND', '')}
+      extensions={[
+        dropFile({
+          onDrop: (view, event) => {
+            log.info('drop', event);
+          },
+        }),
+      ]}
+    />
+  ),
 };
 
 const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');

package/src/components/TextEditor/TextEditor.tsx

@@ -85,7 +85,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
     // Create editor state and view.
     // The view is recreated if the model or extensions are changed.
     useEffect(() => {
-      log('updating', { id, instanceId });
+      log('create', { id, instanceId });
 
       //
       // EditorState
@@ -147,8 +147,8 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
       setView(view);
 
       return () => {
+        log('destroy', { id, instanceId });
         view?.destroy();
-        setView(null);
       };
     }, [doc, selection, extensions]);
 

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -16,17 +16,17 @@ import { withTheme } from '@dxos/storybook-utils';
 import { Toolbar } from './Toolbar';
 import {
   type Comment,
-  decorateMarkdown,
   comments,
   createBasicExtensions,
   createDataExtensions,
+  createMarkdownExtensions,
   createThemeExtensions,
+  decorateMarkdown,
   formattingKeymap,
+  image,
   table,
   useComments,
   useFormattingState,
-  createMarkdownExtensions,
-  image,
 } from '../../extensions';
 import { useActionHandler, useDocAccessor, useTextEditor } from '../../hooks';
 import translations from '../../translations';
@@ -34,15 +34,17 @@ import translations from '../../translations';
 faker.seed(101);
 
 const Story: FC<{ content: string }> = ({ content }) => {
+  console.log('STORY');
   const { themeMode } = useThemeContext();
   const [item] = useState({ text: new TextObject(content) });
   const { id, doc, accessor } = useDocAccessor(item.text);
   const [formattingState, formattingObserver] = useFormattingState();
-  const { parentRef, view } = useTextEditor(
-    () => ({
+  const { parentRef, view } = useTextEditor(() => {
+    return {
       id,
       doc,
       extensions: [
+        formattingObserver,
         createBasicExtensions(),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2' } } }),
@@ -58,39 +60,36 @@ const Story: FC<{ content: string }> = ({ content }) => {
         formattingKeymap(),
         image(),
         table(),
-        formattingObserver,
       ],
-    }),
-    [id, accessor, themeMode],
-  );
+    };
+  }, [id, accessor, formattingObserver, themeMode]);
+
+  const handleAction = useActionHandler(view);
 
   const [_comments, setComments] = useState<Comment[]>([]);
   useComments(view, id, _comments);
 
-  const handleAction = useActionHandler(view);
-
   return (
-    <div role='none' className='fixed inset-0 flex flex-col'>
-      <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
-        <Toolbar.Markdown />
-        <Toolbar.Separator />
-        <Toolbar.Extended />
-      </Toolbar.Root>
-      <div role='textbox' ref={parentRef} className={textBlockWidth} />;
-    </div>
+    <Tooltip.Provider>
+      <div role='none' className='fixed inset-0 flex flex-col'>
+        <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+          <Toolbar.Markdown />
+          <Toolbar.Custom onUpload={async (file) => ({ url: file.name })} />
+          <Toolbar.Separator />
+          <Toolbar.Actions />
+        </Toolbar.Root>
+        <div ref={parentRef} className={textBlockWidth} />
+      </div>
+    </Tooltip.Provider>
   );
 };
 
 export default {
   title: 'react-ui-editor/Toolbar',
   component: Toolbar,
-  render: (args: any) => (
-    <Tooltip.Provider>
-      <Story {...args} />
-    </Tooltip.Provider>
-  ),
   decorators: [withTheme],
   parameters: { translations, layout: 'fullscreen' },
+  render: (args: any) => <Story {...args} />,
 };
 
 const content = [

package/src/components/Toolbar/Toolbar.tsx

@@ -7,11 +7,13 @@ import {
   ChatText,
   Code,
   CodeBlock,
+  Image,
   Link,
   ListBullets,
   ListChecks,
   ListNumbers,
   Paragraph,
+  Quotes,
   TextStrikethrough,
   Table,
   TextB,
@@ -22,24 +24,25 @@ import {
   TextHFive,
   TextHSix,
   TextItalic,
-  Quotes,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useRef, useState } from 'react';
+import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
 
 import {
   DensityProvider,
   ElevationProvider,
   Select,
-  type ThemedClassName,
   Toolbar as NaturalToolbar,
   Tooltip,
-  type ToolbarToggleGroupItemProps,
+  type ThemedClassName,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
+  type ToolbarButtonProps as NaturalToolbarButtonProps,
   useTranslation,
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { type Formatting } from '../../extensions';
+import { type Action, type ActionType, type Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
@@ -54,33 +57,9 @@ const HeadingIcons: { [key: string]: Icon } = {
   '6': TextHSix,
 };
 
-// TODO(burdon): Revert to string to make extensible?
-export type ActionType =
-  | 'blockquote'
-  | 'strong'
-  | 'codeblock'
-  | 'comment'
-  | 'heading'
-  | 'image'
-  | 'emphasis'
-  | 'code'
-  | 'link'
-  | 'list-bullet'
-  | 'list-ordered'
-  | 'list-task'
-  | 'mention'
-  | 'prompt'
-  | 'strikethrough'
-  | 'table';
-
-export type Action = {
-  type: ActionType;
-  data?: any;
-};
-
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
-    state: Formatting | null;
+    state: Formatting | undefined;
     onAction?: (action: Action) => void;
   }>
 >;
@@ -111,9 +90,9 @@ type ButtonProps = {
   disabled?: (state: Formatting) => boolean;
 };
 
-type ToolbarButtonProps = ToolbarToggleGroupItemProps & { Icon: Icon };
+type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & { Icon: Icon };
 
-const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
+const ToolbarToggleButton = ({ Icon, children, ...props }: ToolbarToggleButtonProps) => {
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
@@ -132,6 +111,27 @@ const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   );
 };
 
+type ToolbarButtonProps = NaturalToolbarButtonProps & { Icon: Icon };
+
+const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.Button variant='ghost' {...props} classNames={buttonStyles}>
+          <Icon className={iconStyles} />
+          <span className='sr-only'>{children}</span>
+        </NaturalToolbar.Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
 const ToolbarSeparator = () => <div role='separator' className='grow' />;
 
 const MarkdownHeading = () => {
@@ -227,7 +227,7 @@ const MarkdownStyles = () => {
       value={markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
     >
       {markdownStyles.map(({ type, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
@@ -235,7 +235,7 @@ const MarkdownStyles = () => {
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -253,14 +253,14 @@ const MarkdownLists = () => {
   return (
     <NaturalToolbar.ToggleGroup type='single' value={state?.listStyle ? `list-${state.listStyle}` : ''}>
       {markdownLists.map(({ type, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -292,7 +292,7 @@ const MarkdownBlocks = () => {
   return (
     <NaturalToolbar.ToggleGroup type='single' value={value?.type ?? ''}>
       {markdownBlocks.map(({ type, disabled, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
@@ -300,7 +300,7 @@ const MarkdownBlocks = () => {
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -315,38 +315,80 @@ const MarkdownStandard = () => (
   </>
 );
 
-const MarkdownExtended = () => {
+// TODO(burdon): Make extensible.
+export type MarkdownCustomOptions = {
+  onUpload?: (file: File) => Promise<{ url?: string }>;
+};
+
+const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
   const { onAction } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
+  // https://react-dropzone.js.org/#src
+  const { acceptedFiles, getInputProps, open } = useDropzone({
+    multiple: false,
+    noDrag: true,
+    accept: {
+      'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
+    },
+  });
+
+  useEffect(() => {
+    if (onUpload && acceptedFiles.length) {
+      requestAnimationFrame(async () => {
+        // NOTE: Clone file since react-dropzone patches in a non-standard `path` property, which confuses IPFS.
+        const f = acceptedFiles[0];
+        const file = new File([f], f.name, {
+          type: f.type,
+          lastModified: f.lastModified,
+        });
+
+        const { url } = await onUpload(file);
+        if (url) {
+          onAction?.({ type: 'image', data: url });
+        }
+      });
+    }
+  }, [acceptedFiles]);
+
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <NaturalToolbar.Button
-          variant='ghost'
-          data-testid='editor.toolbar.comment'
-          onClick={() => onAction?.({ type: 'comment' })}
-          classNames={buttonStyles}
-        >
-          <ChatText className={iconStyles} />
-          <span className='sr-only'>{t('comment label')}</span>
-        </NaturalToolbar.Button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipProps}>
-          {t('comment label')}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <>
+      <input {...getInputProps()} />
+      <ToolbarButton value='image' Icon={Image} onClick={() => open()}>
+        {t('image label')}
+      </ToolbarButton>
+    </>
+  );
+};
+
+// TODO(burdon): Make extensible.
+const MarkdownActions = () => {
+  const { onAction } = useToolbarContext('MarkdownStyles');
+  const { t } = useTranslation(translationKey);
+  return (
+    <>
+      {/* TODO(burdon): Toggle readonly state. */}
+      {/* <ToolbarButton value='comment' Icon={BookOpenText} onClick={() => onAction?.({ type: 'comment' })}> */}
+      {/*  {t('comment label')} */}
+      {/* </ToolbarButton> */}
+      <ToolbarButton
+        value='comment'
+        Icon={ChatText}
+        data-testid='editor.toolbar.comment'
+        onClick={() => onAction?.({ type: 'comment' })}
+      >
+        {t('comment label')}
+      </ToolbarButton>
+    </>
   );
 };
 
 export const Toolbar = {
   Root: ToolbarRoot,
-  Button: ToolbarButton,
+  Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
   Markdown: MarkdownStandard,
-  Extended: MarkdownExtended,
+  Custom: MarkdownCustom,
+  Actions: MarkdownActions,
 };
 
 export { useToolbarContext };

package/src/extensions/automerge/automerge.ts

@@ -60,16 +60,16 @@ export const automerge = (accessor: DocAccessor): Extension => {
     ViewPlugin.fromClass(
       class {
         constructor(private readonly _view: EditorView) {
-          accessor.handle.addListener('change', this._handleChange.bind(this));
+          accessor.handle.addListener('change', this._handleChange);
         }
 
         destroy() {
-          accessor.handle.removeListener('change', this._handleChange.bind(this));
+          accessor.handle.removeListener('change', this._handleChange);
         }
 
-        _handleChange() {
+        readonly _handleChange = () => {
           syncer.reconcile(this._view, false);
-        }
+        };
       },
     ),
 

package/src/extensions/command/state.ts

@@ -59,8 +59,8 @@ export const commandState = StateField.define<CommandState>({
                       selection: { anchor: pos + action.insert.length },
                     });
                   }
-                  // TODO(burdon): Truncates text if set focus immediately.
-                  setTimeout(() => view.focus());
+                  // NOTE: Truncates text if set focus immediately.
+                  requestAnimationFrame(() => view.focus());
                 });
               },
             };