@dxos/react-ui-editor 0.3.11-main.bd26370 → 0.3.11-main.c244d7e

package/dist/types/src/testing/replicator.d.ts

@@ -1,10 +1,10 @@
 import { Observable } from 'lib0/observable';
-import * as awarenessProtocol from 'y-protocols/awareness';
+import * as YP from 'y-protocols/awareness';
 import { Doc } from 'yjs';
 import { Event } from '@dxos/async';
 import { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 import { type EditorModel } from '../hooks';
-type Awareness = awarenessProtocol.Awareness;
+type Awareness = YP.Awareness;
 /**
  * Yjs awareness provider in-memory.
  */

package/dist/types/src/testing/replicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"replicator.d.ts","sourceRoot":"","sources":["../../../../src/testing/replicator.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEzD,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAM7C;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACpD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoB;IAClD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAM;gBAEf,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA+BtG,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IA0CpB,OAAO,CAAC,mBAAmB;CAG5B;AAED;;GAEG;AACH,qBAAa,UAAU;IAIT,OAAO,CAAC,QAAQ,CAAC,KAAK;IAHlC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,MAAM,CAAqB;gBAEN,KAAK,EAAE,QAAQ;IAE5C,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE;IAI7B,UAAU,OAAQ,MAAM,QAAO,GAAG,KAAe,WAAW,CAoB1D;CACH;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,UAAU,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,4BAA6B,kBAAkB,KAAG,WAEzE,CAAC"}
+{"version":3,"file":"replicator.d.ts","sourceRoot":"","sources":["../../../../src/testing/replicator.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAEtE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,KAAK,SAAS,GAAG,EAAE,CAAC,SAAS,CAAC;AAM9B;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,UAAU,CAAC,GAAG,CAAC;IACpD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoB;IAClD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAY;IACvC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAM;gBAEf,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAAC,GAAG,EAAE,GAAG,CAAC;QAAC,SAAS,CAAC,EAAE,SAAS,CAAA;KAAE;IA4BtG,IAAI,SAAS,IAAI,SAAS,CAEzB;IAED,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IA0CpB,OAAO,CAAC,mBAAmB;CAG5B;AAED;;GAEG;AACH,qBAAa,UAAU;IAIT,OAAO,CAAC,QAAQ,CAAC,KAAK;IAHlC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,OAAO,CAAC,MAAM,CAAqB;gBAEN,KAAK,EAAE,QAAQ;IAE5C,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE;IAI7B,UAAU,OAAQ,MAAM,QAAO,GAAG,KAAe,WAAW,CAoB1D;CACH;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,UAAU,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,WAAW,4BAA6B,kBAAkB,KAAG,WAEzE,CAAC"}

package/dist/types/src/{components/TextEditor/themes → themes}/default.d.ts

@@ -1,4 +1,4 @@
-import { type ThemeStyles } from '../../../styles';
+import { type ThemeStyles } from '../styles';
 /**
  * Minimal styles.
  * https://codemirror.net/examples/styling

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

@@ -0,0 +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,WAiO1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAO3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/themes/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { Transaction } from '@codemirror/state';
+/**
+ * CodeMirror callbacks swallow errors so wrap handlers.
+ */
+export declare const callbackWrapper: <T extends Function>(fn: T) => T;
+export declare const logChanges: (trs: readonly Transaction[]) => void;
+//# sourceMappingURL=util.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AAEH,eAAO,MAAM,eAAe,kCAOR,CAAC;AAErB,eAAO,MAAM,UAAU,QAAS,SAAS,WAAW,EAAE,SAmBrD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.11-main.bd26370",
+  "version": "0.3.11-main.c244d7e",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -15,7 +15,7 @@
   "dependencies": {
     "@codemirror/autocomplete": "^6.11.1",
     "@codemirror/commands": "^6.3.2",
-    "@codemirror/lang-markdown": "^6.2.3",
+    "@codemirror/lang-markdown": "^6.2.4",
     "@codemirror/language": "^6.9.3",
     "@codemirror/language-data": "^6.3.1",
     "@codemirror/lint": "^6.4.2",
@@ -38,23 +38,24 @@
     "y-codemirror.next": "^0.3.2",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.10",
-    "@dxos/async": "0.3.11-main.bd26370",
-    "@dxos/automerge": "0.3.11-main.bd26370",
-    "@dxos/display-name": "0.3.11-main.bd26370",
-    "@dxos/echo-schema": "0.3.11-main.bd26370",
-    "@dxos/invariant": "0.3.11-main.bd26370",
-    "@dxos/debug": "0.3.11-main.bd26370",
-    "@dxos/protocols": "0.3.11-main.bd26370",
-    "@dxos/react-async": "0.3.11-main.bd26370",
-    "@dxos/react-ui": "0.3.11-main.bd26370",
-    "@dxos/react-ui-theme": "0.3.11-main.bd26370",
-    "@dxos/text-model": "0.3.11-main.bd26370",
-    "@dxos/util": "0.3.11-main.bd26370",
-    "@dxos/log": "0.3.11-main.bd26370"
+    "@dxos/async": "0.3.11-main.c244d7e",
+    "@dxos/automerge": "0.3.11-main.c244d7e",
+    "@dxos/context": "0.3.11-main.c244d7e",
+    "@dxos/debug": "0.3.11-main.c244d7e",
+    "@dxos/display-name": "0.3.11-main.c244d7e",
+    "@dxos/echo-schema": "0.3.11-main.c244d7e",
+    "@dxos/invariant": "0.3.11-main.c244d7e",
+    "@dxos/log": "0.3.11-main.c244d7e",
+    "@dxos/protocols": "0.3.11-main.c244d7e",
+    "@dxos/react-ui-theme": "0.3.11-main.c244d7e",
+    "@dxos/react-async": "0.3.11-main.c244d7e",
+    "@dxos/react-ui": "0.3.11-main.c244d7e",
+    "@dxos/text-model": "0.3.11-main.c244d7e",
+    "@dxos/util": "0.3.11-main.c244d7e"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@phosphor-icons/react": "^2.0.5",
     "@preact/signals-react": "^1.3.6",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -66,18 +67,19 @@
     "deepsignal": "1.4.0-shallow.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/config": "0.3.11-main.bd26370",
-    "@dxos/echo-signals": "0.3.11-main.bd26370",
-    "@dxos/react-client": "0.3.11-main.bd26370",
-    "@dxos/echo-typegen": "0.3.11-main.bd26370",
-    "@dxos/react-ui": "0.3.11-main.bd26370",
-    "@dxos/storybook-utils": "0.3.11-main.bd26370"
+    "@dxos/config": "0.3.11-main.c244d7e",
+    "@dxos/echo-signals": "0.3.11-main.c244d7e",
+    "@dxos/echo-typegen": "0.3.11-main.c244d7e",
+    "@dxos/storybook-utils": "0.3.11-main.c244d7e",
+    "@dxos/react-ui": "0.3.11-main.c244d7e",
+    "@dxos/react-client": "0.3.11-main.c244d7e",
+    "@dxos/keyboard": "0.3.11-main.c244d7e"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.11-main.bd26370"
+    "@dxos/react-client": "0.3.11-main.c244d7e"
   },
   "publishConfig": {
     "access": "public"

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

@@ -4,7 +4,7 @@
 
 import '@dxosTheme';
 
-import { EditorView } from '@codemirror/view';
+import { type EditorView } from '@codemirror/view';
 import { faker } from '@faker-js/faker';
 import { ArrowSquareOut } from '@phosphor-icons/react';
 import defaultsDeep from 'lodash.defaultsdeep';
@@ -12,11 +12,12 @@ import React, { type FC, StrictMode, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
+import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { fixedInsetFlexLayout, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { MarkdownEditor, type TextEditorProps, type TextEditorRef } from './TextEditor';
+import { MarkdownEditor, type TextEditorProps } from './TextEditor';
 import {
   autocomplete,
   blast,
@@ -25,19 +26,17 @@ import {
   defaultOptions,
   hr,
   image,
-  listener,
   link,
   mention,
   table,
   tasklist,
-  tooltip,
   typewriter,
   type CommentsOptions,
-  type TooltipOptions,
   type LinkOptions,
-  mermaid,
-} from './extensions';
-import { type CommentRange, useTextModel } from '../../hooks';
+  outliner,
+  useComments,
+} from '../../extensions';
+import { type Comment, useTextModel } from '../../hooks';
 
 // Extensions:
 // TODO(burdon): Table of contents.
@@ -57,8 +56,8 @@ const text = {
     '- [x] decorator',
     '- [ ] checkbox',
     '  - [ ] state',
-    '  - [ ] indent',
-    '  - [x] style',
+    '    - [ ] indent',
+    '    - [x] style',
     '',
   ),
 
@@ -125,8 +124,6 @@ const text = {
 
   paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
 
-  mermaid: str('```mermaid', 'graph TD;', 'A-->B;', 'A-->C;', 'B-->D;', 'C-->D;', '```'),
-
   footer: str('', '', '', '', '')
 };
 
@@ -166,10 +163,12 @@ const links = [
   { label: 'StackEdit', apply: '[StackEdit](https://stackedit.io/app)' },
 ];
 
+const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
+
 const hover =
   'rounded-sm text-base text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
 
-const onTooltipHover: TooltipOptions['onHover'] = (el, url) => {
+const onHoverLinkTooltip: LinkOptions['onHover'] = (el, url) => {
   const web = new URL(url);
   createRoot(el).render(
     <StrictMode>
@@ -187,26 +186,26 @@ const Key: FC<{ char: string }> = ({ char }) => (
   </span>
 );
 
-const onCommentsHover: CommentsOptions['onHover'] = (el) => {
+const onCommentsHover: CommentsOptions['onHover'] = (el, shortcut) => {
   createRoot(el).render(
     <StrictMode>
       <div className='flex items-center gap-2 px-2 py-2 bg-neutral-700 text-white text-xs rounded'>
         <div>Create comment</div>
-        {/* TODO(burdon): Unify shortcuts. */}
         <div className='flex gap-1'>
-          <Key char='⌘' />
-          <Key char="'" />
+          {keySymbols(parseShortcut(shortcut)).map((char) => (
+            <Key key={char} char={char} />
+          ))}
         </div>
       </div>
     </StrictMode>,
   );
 };
 
-const onLinkRender: LinkOptions['onRender'] = (el, url) => {
+const onRenderLink: LinkOptions['onRender'] = (el, url) => {
   createRoot(el).render(
     <StrictMode>
       <a href={url} target='_blank' rel='noreferrer' className={hover}>
-        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 mb-1')} />
+        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 mb-[2px]')} />
       </a>
     </StrictMode>,
   );
@@ -214,23 +213,24 @@ const onLinkRender: LinkOptions['onRender'] = (el, url) => {
 
 type StoryProps = {
   text?: string;
+  comments?: Comment[];
   automerge?: boolean;
-} & Pick<TextEditorProps, 'comments' | 'readonly' | 'extensions' | 'slots'>;
+} & Pick<TextEditorProps, 'readonly' | 'placeholder' | 'slots' | 'extensions'>;
 
-const Story = ({ text, automerge, ...props }: StoryProps) => {
-  const ref = useRef<TextEditorRef>(null);
+const Story = ({ text, comments, automerge, placeholder = 'New document.', ...props }: StoryProps) => {
   const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
+  const view = useRef<EditorView>(null);
   const model = useTextModel({ text: item.text });
+  useComments(view.current, comments);
   if (!model) {
     return null;
   }
 
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center overflow-y-scroll'>
-        <div className='flex flex-col w-[800px] py-16'>
-          <MarkdownEditor ref={ref} model={model} {...props} />
-          <div className='flex shrink-0 h-[300px]'></div>
+      <div className='flex h-full justify-center'>
+        <div className='flex flex-col h-full w-[800px]'>
+          <MarkdownEditor ref={view} model={model} placeholder={placeholder} {...props} />
         </div>
       </div>
     </div>
@@ -244,47 +244,59 @@ export default {
   render: Story,
 };
 
-const extensions = [
+const defaults = [
   autocomplete({
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
   code(),
   hr(),
   image(),
-  link({ onRender: onLinkRender }),
+  link({ onRender: onRenderLink, onHover: onHoverLinkTooltip }),
+  // mention({
+  //   onSearch: (text) => names.filter((name) => name.toLowerCase().startsWith(text.toLowerCase())),
+  // }),
   table(),
   tasklist(),
-  tooltip({ onHover: onTooltipHover }),
 ];
 
 export const Default = {
-  render: () => <Story text={document} extensions={extensions} />,
+  render: () => <Story text={document} extensions={defaults} />,
 };
 
 export const Readonly = {
-  render: () => <Story text={document} extensions={extensions} readonly />,
+  render: () => <Story text={document} extensions={defaults} readonly />,
+};
+
+const large = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
+
+export const Large = {
+  render: () => <Story text={str('# Large Document', '', large)} extensions={[]} />,
+};
+
+export const Empty = {
+  render: () => <Story />,
 };
 
 export const NoExtensions = {
   render: () => <Story text={document} />,
 };
 
-// TODO(burdon): Cursor bug if no newline after BR (cursor down just loops back to start of each paragraph).
 export const HorizontalRule = {
   render: () => (
     <Story
-      text={str('# Horizontal Rule', '', text.paragraphs, '---', '', text.paragraphs, '---', '', text.paragraphs)}
+      text={str('# Horizontal Rule', '', text.paragraphs, '---', text.paragraphs, '---', text.paragraphs)}
       extensions={[hr()]}
     />
   ),
 };
 
-export const Tooltips = {
-  render: () => <Story text={str(text.links, text.footer)} extensions={[tooltip({ onHover: onTooltipHover })]} />,
-};
-
 export const Links = {
-  render: () => <Story text={str(text.links, text.footer)} extensions={[link({ onRender: onLinkRender })]} />,
+  render: () => (
+    <Story
+      text={str(text.links, text.footer)}
+      extensions={[link({ onHover: onHoverLinkTooltip, onRender: onRenderLink })]}
+    />
+  ),
 };
 
 export const Code = {
@@ -299,18 +311,17 @@ export const Image = {
   render: () => <Story text={str(text.image, text.footer)} readonly extensions={[image()]} />,
 };
 
-export const Tasklist = {
+export const Lists = {
+  render: () => (
+    <Story text={str(text.tasks, '', text.list, '', text.numbered, text.footer)} extensions={[tasklist()]} />
+  ),
+};
+
+export const Outliner = {
   render: () => (
     <Story
-      text={str(text.tasks, '', text.list, text.footer)}
-      extensions={[
-        tasklist(),
-        listener({
-          onChange: (text) => {
-            console.log(text);
-          },
-        }),
-      ]}
+      text={str('# Outliner', '', 'Block', ': this is a block', ': with multiple lines', text.footer)}
+      extensions={[outliner()]}
     />
   ),
 };
@@ -318,9 +329,9 @@ export const Tasklist = {
 export const Autocomplete = {
   render: () => (
     <Story
-      text={str('# Autocomplete', '', 'Press CTRL-SPACE', text.footer)}
+      text={str('# Autocomplete', '', 'Press Ctrl-Space...', text.footer)}
       extensions={[
-        link({ onRender: onLinkRender }),
+        link({ onRender: onRenderLink }),
         autocomplete({
           onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
         }),
@@ -329,8 +340,6 @@ export const Autocomplete = {
   ),
 };
 
-const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
-
 export const Mention = {
   render: () => (
     <Story
@@ -344,24 +353,20 @@ export const Mention = {
   ),
 };
 
-export const Mermaid = {
-  render: () => <Story text={str('# Mermaid', '', text.mermaid, text.footer)} extensions={[code(), mermaid()]} />,
-};
-
 export const Comments = {
   render: () => {
-    const [commentsStates, setCommentStates] = useState<CommentRange[]>([]);
+    const [commentRanges, setCommentRanges] = useState<Comment[]>([]);
 
     return (
       <Story
         text={str('# Comments', '', text.paragraphs, text.footer)}
-        comments={commentsStates}
+        comments={commentRanges}
         extensions={[
           comments({
             onHover: onCommentsHover,
-            onCreate: (relPos) => {
+            onCreate: (range) => {
               const id = PublicKey.random().toHex();
-              setCommentStates((comments) => [...comments, { id, cursor: relPos }]);
+              setCommentRanges((commentRanges) => [...commentRanges, { id, cursor: range }]);
               return id;
             },
             onSelect: (state) => {
@@ -370,9 +375,9 @@ export const Comments = {
                 console.log(
                   'update',
                   JSON.stringify({
-                    active: state.active?.slice(0, 8),
-                    closest: state.closest?.slice(0, 8),
-                    ranges: state.ranges.length,
+                    comments: state.comments.length,
+                    active: state.selection.active?.slice(0, 8),
+                    closest: state.selection.closest?.slice(0, 8),
                   }),
                 );
               }
@@ -384,8 +389,15 @@ export const Comments = {
   },
 };
 
+const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
+
 export const Typewriter = {
-  render: () => <Story text={str('# Typewriter', '', text.paragraphs, text.footer)} extensions={[typewriter()]} />,
+  render: () => (
+    <Story
+      text={str('# Typewriter', '', text.paragraphs, text.footer)}
+      extensions={[typewriter({ items: typewriterItems })]}
+    />
+  ),
 };
 
 export const Blast = {
@@ -393,9 +405,7 @@ export const Blast = {
     <Story
       text={str('# Blast', '', text.paragraphs, text.code, text.paragraphs)}
       extensions={[
-        typewriter({
-          items: localStorage.getItem('dxos.composer.extension.demo')?.split(','),
-        }),
+        typewriter({ items: typewriterItems }),
         blast(
           defaultsDeep(
             {
@@ -412,17 +422,3 @@ export const Blast = {
     />
   ),
 };
-
-export const Diagnostics = {
-  render: () => (
-    <Story
-      text={document}
-      extensions={[
-        // Cursor moved.
-        EditorView.updateListener.of((update) => {
-          console.log('update', update.view.state.selection.main.head);
-        }),
-      ]}
-    />
-  ),
-};

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

@@ -4,15 +4,14 @@
 
 import '@dxosTheme';
 
-import defaultsDeep from 'lodash.defaultsdeep';
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 
 import { TextObject } from '@dxos/echo-schema';
 import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { defaultSlots, TextEditor, type TextEditorProps, type TextEditorRef, type TextEditorSlots } from './TextEditor';
-import { textTheme } from './themes';
+import { TextEditor, type TextEditorProps } from './TextEditor';
+import { listener } from '../../extensions';
 import { useTextModel } from '../../hooks';
 
 const initialText = [
@@ -29,8 +28,7 @@ const Story = ({
   text,
   automerge,
   ...props
-}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
-  const ref = useRef<TextEditorRef>(null);
+}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'placeholder' | 'slots'>) => {
   const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
@@ -39,10 +37,9 @@ const Story = ({
 
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center overflow-y-scroll'>
+      <div className='flex justify-center'>
         <div className='flex flex-col w-[800px] py-16'>
-          <TextEditor ref={ref} model={model} {...props} />
-          <div className='flex shrink-0 h-[300px]'></div>
+          <TextEditor model={model} {...props} />
         </div>
       </div>
     </div>
@@ -57,37 +54,19 @@ export default {
 };
 
 export const Default = {
-  render: () => (
-    <Story
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
-  ),
+  render: () => <Story placeholder='Enter text...' />,
 };
 
 export const Text = {
-  render: () => (
-    <Story
-      text={initialText}
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
-  ),
+  render: () => <Story text={initialText} placeholder='Enter text...' />,
 };
 
 export const Automerge = {
+  render: () => <Story text={initialText} placeholder='Enter text...' automerge />,
+};
+
+export const Listener = {
   render: () => (
-    <Story
-      automerge
-      text={initialText}
-      slots={defaultsDeep(
-        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
-        defaultSlots,
-      )}
-    />
+    <Story placeholder='Enter text...' extensions={[listener({ onChange: (text) => console.log(text) })]} />
   ),
 };