@dxos/react-ui-editor 0.3.11-main.ec7a2b3 → 0.3.11-main.ee2b64c

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

@@ -1,7 +1,7 @@
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
 export { type Extension } from '@codemirror/state';
-export { type EditorView } from '@codemirror/view';
+export { type EditorView, keymap } from '@codemirror/view';
 export * from './components';
 export * from './extensions';
 export * from './hooks';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE3D,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}

package/dist/types/src/styles/markdown.d.ts

@@ -1,6 +1,6 @@
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export declare const headings: Record<HeadingLevel, string[]>;
-export declare const heading: (level: HeadingLevel, readonly?: boolean) => string;
+export declare const headings: Record<HeadingLevel, string>;
+export declare const heading: (level: HeadingLevel) => string;
 export declare const text = "text-neutral-800 dark:text-neutral-200";
 export declare const light = "text-neutral-200 dark:text-neutral-800";
 export declare const mark: string;

package/dist/types/src/styles/markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/styles/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAIjD,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,EAAE,CAOnD,CAAC;AAEF,eAAO,MAAM,OAAO,UAAW,YAAY,aAAa,OAAO,WAG9D,CAAC;AAEF,eAAO,MAAM,IAAI,2CAA2C,CAAC;AAC7D,eAAO,MAAM,KAAK,2CAA2C,CAAC;AAE9D,eAAO,MAAM,IAAI,QAAmE,CAAC;AAErF,eAAO,MAAM,SAAS,UAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,cAAc,CAAC;AAChC,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,aAAa,iBAAiB,CAAC;AAE5C,eAAO,MAAM,IAAI,mEAAmE,CAAC;AACrF,eAAO,MAAM,QAAQ,+BAA+B,CAAC;AACrD,eAAO,MAAM,SAAS,kDAAkD,CAAC;AAEzE,eAAO,MAAM,SAAS,QAAmB,CAAC;AAE1C,eAAO,MAAM,UAAU,QAAsF,CAAC;AAE9G,eAAO,MAAM,cAAc,0GAC8E,CAAC;AAG1G,eAAO,MAAM,aAAa,wHAC6F,CAAC;AACxH,eAAO,MAAM,WAAW,+IACkH,CAAC;AAE3I,eAAO,MAAM,QAAQ,gDAAgD,CAAC"}
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/styles/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAIjD,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAOjD,CAAC;AAEF,eAAO,MAAM,OAAO,UAAW,YAAY,WAE1C,CAAC;AAEF,eAAO,MAAM,IAAI,2CAA2C,CAAC;AAC7D,eAAO,MAAM,KAAK,2CAA2C,CAAC;AAE9D,eAAO,MAAM,IAAI,QAAmE,CAAC;AAErF,eAAO,MAAM,SAAS,UAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,cAAc,CAAC;AAChC,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,aAAa,iBAAiB,CAAC;AAE5C,eAAO,MAAM,IAAI,mEAAmE,CAAC;AACrF,eAAO,MAAM,QAAQ,+BAA+B,CAAC;AACrD,eAAO,MAAM,SAAS,kDAAkD,CAAC;AAEzE,eAAO,MAAM,SAAS,QAAmB,CAAC;AAE1C,eAAO,MAAM,UAAU,QAAsF,CAAC;AAE9G,eAAO,MAAM,cAAc,0GAC8E,CAAC;AAG1G,eAAO,MAAM,aAAa,wHAC6F,CAAC;AACxH,eAAO,MAAM,WAAW,+IACkH,CAAC;AAE3I,eAAO,MAAM,QAAQ,gDAAgD,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,WAiO1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAO3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,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,WAoO1B,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/util.d.ts

@@ -1,5 +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

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAMA;;GAEG;AAEH,eAAO,MAAM,eAAe,kCAOR,CAAC"}
+{"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.ec7a2b3",
+  "version": "0.3.11-main.ee2b64c",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,20 +13,21 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.11.1",
-    "@codemirror/commands": "^6.3.2",
-    "@codemirror/lang-markdown": "^6.2.3",
-    "@codemirror/language": "^6.9.3",
+    "@codemirror/autocomplete": "^6.12.0",
+    "@codemirror/commands": "^6.3.3",
+    "@codemirror/lang-markdown": "^6.2.4",
+    "@codemirror/language": "^6.10.0",
     "@codemirror/language-data": "^6.3.1",
     "@codemirror/lint": "^6.4.2",
     "@codemirror/search": "^6.5.5",
-    "@codemirror/state": "^6.3.3",
+    "@codemirror/state": "^6.4.0",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.22.2",
-    "@fluentui/react-tabster": "^9.16.1",
-    "@lezer/common": "^1.1.1",
+    "@codemirror/view": "^6.23.0",
+    "@fluentui/react-tabster": "^9.18.0",
+    "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
-    "@lezer/markdown": "^1.1.1",
+    "@lezer/markdown": "^1.2.0",
+    "@radix-ui/react-context": "^1.0.0",
     "@replit/codemirror-vim": "^6.0.14",
     "codemirror": "6.0.1",
     "lib0": "^0.2.65",
@@ -35,56 +36,65 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "y-codemirror.next": "^0.3.2",
-    "y-protocols": "^1.0.5",
-    "yjs": "^13.6.10",
-    "@dxos/async": "0.3.11-main.ec7a2b3",
-    "@dxos/automerge": "0.3.11-main.ec7a2b3",
-    "@dxos/context": "0.3.11-main.ec7a2b3",
-    "@dxos/debug": "0.3.11-main.ec7a2b3",
-    "@dxos/display-name": "0.3.11-main.ec7a2b3",
-    "@dxos/invariant": "0.3.11-main.ec7a2b3",
-    "@dxos/echo-schema": "0.3.11-main.ec7a2b3",
-    "@dxos/log": "0.3.11-main.ec7a2b3",
-    "@dxos/protocols": "0.3.11-main.ec7a2b3",
-    "@dxos/react-async": "0.3.11-main.ec7a2b3",
-    "@dxos/react-ui": "0.3.11-main.ec7a2b3",
-    "@dxos/react-ui-theme": "0.3.11-main.ec7a2b3",
-    "@dxos/util": "0.3.11-main.ec7a2b3",
-    "@dxos/text-model": "0.3.11-main.ec7a2b3"
+    "@dxos/automerge": "0.3.11-main.ee2b64c",
+    "@dxos/async": "0.3.11-main.ee2b64c",
+    "@dxos/context": "0.3.11-main.ee2b64c",
+    "@dxos/debug": "0.3.11-main.ee2b64c",
+    "@dxos/echo-schema": "0.3.11-main.ee2b64c",
+    "@dxos/display-name": "0.3.11-main.ee2b64c",
+    "@dxos/invariant": "0.3.11-main.ee2b64c",
+    "@dxos/log": "0.3.11-main.ee2b64c",
+    "@dxos/protocols": "0.3.11-main.ee2b64c",
+    "@dxos/react-async": "0.3.11-main.ee2b64c",
+    "@dxos/react-ui-theme": "0.3.11-main.ee2b64c",
+    "@dxos/react-ui": "0.3.11-main.ee2b64c",
+    "@dxos/util": "0.3.11-main.ee2b64c",
+    "@dxos/text-model": "0.3.11-main.ee2b64c"
   },
   "devDependencies": {
-    "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
-    "@faker-js/faker": "^8.0.2",
+    "@automerge/automerge-repo-network-broadcastchannel": "^1.1.0",
+    "@faker-js/faker": "^8.3.1",
     "@phosphor-icons/react": "^2.0.5",
     "@preact/signals-react": "^1.3.6",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/lodash.get": "^4.4.7",
     "@types/lodash.pick": "^4.4.7",
     "@types/lodash.sortby": "^4.7.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "@types/react-test-renderer": "^17.0.2",
+    "@vitest/ui": "^1.2.1",
     "deepsignal": "1.4.0-shallow.0",
+    "happy-dom": "^13.3.1",
+    "jsdom": "^20.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/config": "0.3.11-main.ec7a2b3",
-    "@dxos/echo-signals": "0.3.11-main.ec7a2b3",
-    "@dxos/keyboard": "0.3.11-main.ec7a2b3",
-    "@dxos/react-client": "0.3.11-main.ec7a2b3",
-    "@dxos/storybook-utils": "0.3.11-main.ec7a2b3",
-    "@dxos/react-ui": "0.3.11-main.ec7a2b3",
-    "@dxos/echo-typegen": "0.3.11-main.ec7a2b3"
+    "react-test-renderer": "^18.2.0",
+    "vite": "^5.0.12",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vite-plugin-wasm": "^3.3.0",
+    "vitest": "^1.2.1",
+    "@dxos/config": "0.3.11-main.ee2b64c",
+    "@dxos/echo-signals": "0.3.11-main.ee2b64c",
+    "@dxos/echo-typegen": "0.3.11-main.ee2b64c",
+    "@dxos/keyboard": "0.3.11-main.ee2b64c",
+    "@dxos/react-client": "0.3.11-main.ee2b64c",
+    "@dxos/react-ui": "0.3.11-main.ee2b64c",
+    "@dxos/storybook-utils": "0.3.11-main.ee2b64c"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.11-main.ec7a2b3"
+    "@dxos/react-client": "0.3.11-main.ee2b64c"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "prebuild": "dxtype src/testing/proto/schema.proto src/testing/proto/gen/schema.ts"
+    "vitest": "vitest --ui"
   }
 }

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

@@ -4,11 +4,11 @@
 
 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';
-import React, { type FC, StrictMode, useState } from 'react';
+import React, { type FC, StrictMode, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
@@ -19,27 +19,25 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type TextEditorProps } from './TextEditor';
 import {
+  type CommentsOptions,
+  type LinkOptions,
   autocomplete,
   blast,
   code,
   comments,
   defaultOptions,
+  heading,
   hr,
   image,
-  listener,
   link,
   mention,
   table,
   tasklist,
   typewriter,
-  type CommentsOptions,
-  type LinkOptions,
+  useComments,
+  formatting,
 } from '../../extensions';
-import { type CommentRange, useTextModel } from '../../hooks';
-
-// Extensions:
-// TODO(burdon): Table of contents.
-// TODO(burdon): Front-matter
+import { type Comment, useTextModel } from '../../hooks';
 
 faker.seed(101);
 
@@ -55,8 +53,8 @@ const text = {
     '- [x] decorator',
     '- [ ] checkbox',
     '  - [ ] state',
-    '  - [ ] indent',
-    '  - [x] style',
+    '    - [ ] indent',
+    '    - [x] style',
     '',
   ),
 
@@ -82,7 +80,7 @@ const text = {
     '## Code',
     '',
     '```',
-    'const x = 100;',
+    '$ ls -las',
     '```',
     '',
     '```tsx',
@@ -162,6 +160,8 @@ 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';
 
@@ -210,12 +210,14 @@ const onRenderLink: LinkOptions['onRender'] = (el, url) => {
 
 type StoryProps = {
   text?: string;
-  automerge?: boolean;
-} & Pick<TextEditorProps, 'comments' | 'readonly' | 'extensions' | 'slots'>;
+  comments?: Comment[];
+} & Pick<TextEditorProps, 'readonly' | 'placeholder' | 'slots' | 'extensions'>;
 
-const Story = ({ text, automerge, ...props }: StoryProps) => {
-  const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
+const Story = ({ text, comments, placeholder = 'New document.', ...props }: StoryProps) => {
+  const [item] = useState({ text: new TextObject(text) });
+  const view = useRef<EditorView>(null);
   const model = useTextModel({ text: item.text });
+  useComments(view.current, comments);
   if (!model) {
     return null;
   }
@@ -224,7 +226,7 @@ const Story = ({ text, automerge, ...props }: StoryProps) => {
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
       <div className='flex h-full justify-center'>
         <div className='flex flex-col h-full w-[800px]'>
-          <MarkdownEditor model={model} {...props} />
+          <MarkdownEditor ref={view} model={model} placeholder={placeholder} {...props} />
         </div>
       </div>
     </div>
@@ -238,11 +240,13 @@ export default {
   render: Story,
 };
 
-const extensions = [
+const defaults = [
   autocomplete({
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
   code(),
+  formatting(),
+  heading(),
   hr(),
   image(),
   link({ onRender: onRenderLink, onHover: onHoverLinkTooltip }),
@@ -251,35 +255,25 @@ const extensions = [
 ];
 
 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 NoExtensions = {
+  render: () => <Story text={document} />,
 };
 
+const large = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
+
 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)}
-      extensions={[hr()]}
-    />
-  ),
+export const Scrolling = {
+  render: () => <Story text={str('# Large Document', '', large)} extensions={[]} />,
 };
 
 export const Links = {
@@ -292,37 +286,36 @@ export const Links = {
 };
 
 export const Code = {
-  render: () => <Story text={str(text.code, text.footer)} extensions={[code()]} readonly />,
-};
-
-export const Table = {
-  render: () => <Story text={str(text.table, text.footer)} extensions={[table()]} />,
+  render: () => <Story text={str(text.code, text.footer)} extensions={[code()]} />,
 };
 
 export const Image = {
-  render: () => <Story text={str(text.image, text.footer)} readonly extensions={[image()]} />,
+  render: () => <Story text={str(text.image, text.footer)} extensions={[image()]} />,
 };
 
-export const Tasklist = {
+export const Lists = {
   render: () => (
-    <Story
-      text={str(text.tasks, '', text.list, text.footer)}
-      extensions={[
-        tasklist(),
-        listener({
-          onChange: (text) => {
-            console.log(text);
-          },
-        }),
-      ]}
-    />
+    <Story text={str(text.tasks, '', text.list, '', text.numbered, text.footer)} extensions={[tasklist()]} />
   ),
 };
 
+export const Table = {
+  render: () => <Story text={str(text.table, text.footer)} extensions={[table()]} />,
+};
+
+// export const Outliner = {
+//   render: () => (
+//     <Story
+//       text={str('# Outliner', '', 'Block', ': this is a block', ': with multiple lines', text.footer)}
+//       extensions={[outliner()]}
+//     />
+//   ),
+// };
+
 export const Autocomplete = {
   render: () => (
     <Story
-      text={str('# Autocomplete', '', 'Press CTRL-SPACE', text.footer)}
+      text={str('# Autocomplete', '', 'Press Ctrl-Space...', text.footer)}
       extensions={[
         link({ onRender: onRenderLink }),
         autocomplete({
@@ -333,8 +326,6 @@ export const Autocomplete = {
   ),
 };
 
-const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
-
 export const Mention = {
   render: () => (
     <Story
@@ -350,18 +341,18 @@ export const Mention = {
 
 export const Comments = {
   render: () => {
-    const [commentRanges, setCommentRanges] = useState<CommentRange[]>([]);
+    const [_comments, setComments] = useState<Comment[]>([]);
 
     return (
       <Story
         text={str('# Comments', '', text.paragraphs, text.footer)}
-        comments={commentRanges}
+        comments={_comments}
         extensions={[
           comments({
             onHover: onCommentsHover,
             onCreate: (range) => {
               const id = PublicKey.random().toHex();
-              setCommentRanges((commentRanges) => [...commentRanges, { id, cursor: range }]);
+              setComments((commentRanges) => [...commentRanges, { id, cursor: range }]);
               return id;
             },
             onSelect: (state) => {
@@ -370,9 +361,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.current?.slice(0, 8),
+                    closest: state.selection.closest?.slice(0, 8),
                   }),
                 );
               }
@@ -384,8 +375,24 @@ export const Comments = {
   },
 };
 
+export const HorizontalRule = {
+  render: () => (
+    <Story
+      text={str('# Horizontal Rule', '', text.paragraphs, '---', text.paragraphs, '---', text.paragraphs)}
+      extensions={[hr()]}
+    />
+  ),
+};
+
+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 +400,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 +417,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);
-        }),
-      ]}
-    />
-  ),
-};