@dxos/react-ui-editor 0.3.10 → 0.3.11-main.3f845e1

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

@@ -1,19 +1,27 @@
-import { type Extension } from '@codemirror/state';
+import { type Extension, StateField } from '@codemirror/state';
 import type * as awarenessProtocol from 'y-protocols/awareness';
 import { type DocAccessor, type Space, type TextObject } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
 import type { YText, YXmlFragment } from '@dxos/text-model';
 type Awareness = awarenessProtocol.Awareness;
-export type DocumentRange = {
-    id: string;
+/**
+ * State field makes the model available to other extensions.
+ */
+export declare const modelState: StateField<EditorModel | undefined>;
+export type Range = {
     from: number;
     to: number;
 };
+export type CommentRange = {
+    id: string;
+    cursor: string;
+};
 export type EditorModel = {
     id: string;
     content: string | YText | YXmlFragment | DocAccessor;
     text: () => string;
-    ranges: DocumentRange[];
+    getCursorFromRange?: (value: Range) => string;
+    getRangeFromCursor?: (cursor: string) => Range;
     extension?: Extension;
     awareness?: Awareness;
     peer?: {
@@ -21,11 +29,11 @@ export type EditorModel = {
         name?: string;
     };
 };
-export type UseTextModelOptions = {
+export type UseTextModelProps = {
     identity?: Identity | null;
     space?: Space;
     text?: TextObject;
 };
-export declare const useTextModel: ({ identity, space, text }: UseTextModelOptions) => EditorModel | undefined;
+export declare const useTextModel: (props: UseTextModelProps) => EditorModel | undefined;
 export {};
 //# sourceMappingURL=useTextModel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTextModel.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,OAAO,KAAK,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAGhE,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,KAAK,EACV,KAAK,UAAU,EAIhB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAM5D,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAE7C,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAGF,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IAEX,OAAO,EAAE,MAAM,GAAG,KAAK,GAAG,YAAY,GAAG,WAAW,CAAC;IACrD,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAIF,eAAO,MAAM,YAAY,8BAA+B,mBAAmB,KAAG,WAAW,GAAG,SAM3F,CAAC"}
+{"version":3,"file":"useTextModel.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/D,OAAO,KAAK,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAIhE,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,KAAK,EACV,KAAK,UAAU,EAIhB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAO5D,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAE7C;;GAEG;AAEH,eAAO,MAAM,UAAU,qCAGrB,CAAC;AAEH,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IAEX,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAGF,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IAEX,OAAO,EAAE,MAAM,GAAG,KAAK,GAAG,YAAY,GAAG,WAAW,CAAC;IACrD,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;IAC9C,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC;IAC/C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAGF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAIF,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,WAAW,GAAG,SAKrE,CAAC"}

package/dist/types/src/hooks/yjs/yjs.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=yjs.test.d.ts.map

package/dist/types/src/hooks/yjs/yjs.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"yjs.test.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/yjs/yjs.test.ts"],"names":[],"mappings":""}

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

@@ -1,5 +1,6 @@
 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 * from './components';
 export * from './hooks';
 //# sourceMappingURL=index.d.ts.map

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;AAE5D,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,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;AAEnD,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

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,CAqB1D;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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.10",
+  "version": "0.3.11-main.3f845e1",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -32,24 +32,25 @@
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.get": "^4.4.2",
+    "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/automerge": "0.3.10",
-    "@dxos/async": "0.3.10",
-    "@dxos/debug": "0.3.10",
-    "@dxos/display-name": "0.3.10",
-    "@dxos/invariant": "0.3.10",
-    "@dxos/echo-schema": "0.3.10",
-    "@dxos/protocols": "0.3.10",
-    "@dxos/react-async": "0.3.10",
-    "@dxos/log": "0.3.10",
-    "@dxos/react-ui": "0.3.10",
-    "@dxos/react-ui-theme": "0.3.10",
-    "@dxos/text-model": "0.3.10",
-    "@dxos/util": "0.3.10"
+    "@dxos/async": "0.3.11-main.3f845e1",
+    "@dxos/debug": "0.3.11-main.3f845e1",
+    "@dxos/automerge": "0.3.11-main.3f845e1",
+    "@dxos/display-name": "0.3.11-main.3f845e1",
+    "@dxos/echo-schema": "0.3.11-main.3f845e1",
+    "@dxos/invariant": "0.3.11-main.3f845e1",
+    "@dxos/log": "0.3.11-main.3f845e1",
+    "@dxos/protocols": "0.3.11-main.3f845e1",
+    "@dxos/react-async": "0.3.11-main.3f845e1",
+    "@dxos/react-ui": "0.3.11-main.3f845e1",
+    "@dxos/react-ui-theme": "0.3.11-main.3f845e1",
+    "@dxos/util": "0.3.11-main.3f845e1",
+    "@dxos/text-model": "0.3.11-main.3f845e1"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
@@ -58,22 +59,25 @@
     "@preact/signals-react": "^1.3.6",
     "@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",
+    "deepsignal": "1.4.0-shallow.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/config": "0.3.10",
-    "@dxos/echo-typegen": "0.3.10",
-    "@dxos/react-ui": "0.3.10",
-    "@dxos/storybook-utils": "0.3.10",
-    "@dxos/react-client": "0.3.10"
+    "@dxos/echo-signals": "0.3.11-main.3f845e1",
+    "@dxos/echo-typegen": "0.3.11-main.3f845e1",
+    "@dxos/config": "0.3.11-main.3f845e1",
+    "@dxos/react-client": "0.3.11-main.3f845e1",
+    "@dxos/storybook-utils": "0.3.11-main.3f845e1",
+    "@dxos/react-ui": "0.3.11-main.3f845e1"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.10"
+    "@dxos/react-client": "0.3.11-main.3f845e1"
   },
   "publishConfig": {
     "access": "public"

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

@@ -8,7 +8,7 @@ import { EditorView } from '@codemirror/view';
 import { faker } from '@faker-js/faker';
 import { ArrowSquareOut } from '@phosphor-icons/react';
 import defaultsDeep from 'lodash.defaultsdeep';
-import React, { StrictMode, useRef, 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,28 +19,32 @@ import { withTheme } from '@dxos/storybook-utils';
 import { MarkdownEditor, type TextEditorProps, type TextEditorRef } from './TextEditor';
 import {
   autocomplete,
+  blast,
+  code,
+  comments,
+  defaultOptions,
+  hr,
+  image,
   listener,
   link,
+  mention,
+  table,
   tasklist,
   tooltip,
+  typewriter,
+  type CommentsOptions,
   type TooltipOptions,
   type LinkOptions,
-  comments,
-  table,
-  image,
-  mention,
-  blast,
-  demo,
-  defaultOptions,
-  highlight,
-  code,
+  mermaid,
 } from './extensions';
-import { useTextModel } from '../../hooks';
+import { type CommentRange, useTextModel } from '../../hooks';
 
 // Extensions:
 // TODO(burdon): Table of contents.
 // TODO(burdon): Front-matter
 
+faker.seed(101);
+
 const str = (...lines: string[]) => lines.join('\n');
 
 const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
@@ -55,6 +59,7 @@ const text = {
     '  - [ ] state',
     '  - [ ] indent',
     '  - [x] style',
+    '',
   ),
 
   list: str(
@@ -63,6 +68,7 @@ const text = {
     '- new york',
     '- london',
     '- tokyo',
+    '',
   ),
 
   numbered: str(
@@ -87,8 +93,8 @@ const text = {
     '',
     '  return () => <div>Test</div>;',
     '};',
+    '```',
     '',
-    '```'
   ),
 
   links: str(
@@ -103,11 +109,11 @@ const text = {
   table: str(
     '# Table',
     '',
-    `| ${faker.lorem.word().padStart(8)} | ${faker.lorem.word().padStart(8)} | ${faker.lorem.word().padStart(8)} |`,
-    '|----------|----------|----------|',
-    `| ${num().padStart(8)} | ${num().padStart(8)} | ${num().padStart(8)} |`,
-    `| ${num().padStart(8)} | ${num().padStart(8)} | ${num().padStart(8)} |`,
-    `| ${num().padStart(8)} | ${num().padStart(8)} | ${num().padStart(8)} |`,
+    `| ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} | ${faker.lorem.word().padStart(12)} |`,
+    `|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|-${''.padStart(12, '-')}-|`,
+    `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
+    `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
+    `| ${num().padStart(12)} | ${num().padStart(12)} | ${num().padStart(12)} |`,
     '', // TODO(burdon): Possible GFM parsing bug if no newline?
   ),
 
@@ -119,6 +125,8 @@ 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('', '', '', '', '')
 };
 
@@ -147,7 +155,6 @@ const document = str(
   text.table,
   '---',
   text.image,
-  '',
   text.footer,
 );
 
@@ -162,7 +169,7 @@ const links = [
 const hover =
   'rounded-sm text-base text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
 
-const onHover: TooltipOptions['onHover'] = (el, url) => {
+const onTooltipHover: TooltipOptions['onHover'] = (el, url) => {
   const web = new URL(url);
   createRoot(el).render(
     <StrictMode>
@@ -174,7 +181,28 @@ const onHover: TooltipOptions['onHover'] = (el, url) => {
   );
 };
 
-const onRender: LinkOptions['onRender'] = (el, url) => {
+const Key: FC<{ char: string }> = ({ char }) => (
+  <span className='flex justify-center items-center w-[24px] h-[24px] rounded text-xs bg-neutral-200 text-black'>
+    {char}
+  </span>
+);
+
+const onCommentsHover: CommentsOptions['onHover'] = (el) => {
+  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="'" />
+        </div>
+      </div>
+    </StrictMode>,
+  );
+};
+
+const onLinkRender: LinkOptions['onRender'] = (el, url) => {
   createRoot(el).render(
     <StrictMode>
       <a href={url} target='_blank' rel='noreferrer' className={hover}>
@@ -184,14 +212,14 @@ const onRender: LinkOptions['onRender'] = (el, url) => {
   );
 };
 
-// TODO(burdon): Pass in model.
-const Story = ({
-  text,
-  automerge,
-  ...props
-}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'readonly' | 'extensions' | 'slots'>) => {
+type StoryProps = {
+  text?: string;
+  automerge?: boolean;
+} & Pick<TextEditorProps, 'comments' | 'readonly' | 'extensions' | 'slots'>;
+
+const Story = ({ text, automerge, ...props }: StoryProps) => {
   const ref = useRef<TextEditorRef>(null);
-  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: automerge }) });
+  const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
     return null;
@@ -221,11 +249,12 @@ const extensions = [
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
   code(),
+  hr(),
   image(),
-  link({ onRender }),
+  link({ onRender: onLinkRender }),
   table(),
   tasklist(),
-  tooltip({ onHover }),
+  tooltip({ onHover: onTooltipHover }),
 ];
 
 export const Default = {
@@ -236,12 +265,26 @@ export const Readonly = {
   render: () => <Story text={document} extensions={extensions} readonly />,
 };
 
+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 Tooltips = {
-  render: () => <Story text={str(text.links, text.footer)} extensions={[tooltip({ onHover })]} />,
+  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 })]} />,
+  render: () => <Story text={str(text.links, text.footer)} extensions={[link({ onRender: onLinkRender })]} />,
 };
 
 export const Code = {
@@ -256,7 +299,7 @@ export const Image = {
   render: () => <Story text={str(text.image, text.footer)} readonly extensions={[image()]} />,
 };
 
-export const TaskList = {
+export const Tasklist = {
   render: () => (
     <Story
       text={str(text.tasks, '', text.list, text.footer)}
@@ -277,7 +320,7 @@ export const Autocomplete = {
     <Story
       text={str('# Autocomplete', '', 'Press CTRL-SPACE', text.footer)}
       extensions={[
-        link({ onRender }),
+        link({ onRender: onLinkRender }),
         autocomplete({
           onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
         }),
@@ -301,48 +344,56 @@ export const Mention = {
   ),
 };
 
-const mark = () => `[^${PublicKey.random().toHex()}]`;
-export const Comments = {
-  render: () => (
-    <Story
-      text={str(text.paragraphs, mark(), '', mark(), text.footer)}
-      extensions={[
-        comments({
-          onCreate: () => PublicKey.random().toHex(),
-          onUpdate: (info) => {
-            // console.log('update', info);
-          },
-        }),
-        highlight(),
-      ]}
-    />
-  ),
+export const Mermaid = {
+  render: () => <Story text={str('# Mermaid', '', text.mermaid, text.footer)} extensions={[code(), mermaid()]} />,
 };
 
-export const Diagnostics = {
-  render: () => (
-    <Story
-      text={document}
-      extensions={[
-        // Cursor moved.
-        EditorView.updateListener.of((update) => {
-          console.log('update', update.view.state.selection.main.head);
-        }),
-      ]}
-    />
-  ),
+export const Comments = {
+  render: () => {
+    const [commentsStates, setCommentStates] = useState<CommentRange[]>([]);
+
+    return (
+      <Story
+        text={str('# Comments', '', text.paragraphs, text.footer)}
+        comments={commentsStates}
+        extensions={[
+          comments({
+            onHover: onCommentsHover,
+            onCreate: (relPos) => {
+              const id = PublicKey.random().toHex();
+              setCommentStates((comments) => [...comments, { id, cursor: relPos }]);
+              return id;
+            },
+            onSelect: (state) => {
+              const debug = false;
+              if (debug) {
+                console.log(
+                  'update',
+                  JSON.stringify({
+                    active: state.active?.slice(0, 8),
+                    closest: state.closest?.slice(0, 8),
+                    ranges: state.ranges.length,
+                  }),
+                );
+              }
+            },
+          }),
+        ]}
+      />
+    );
+  },
 };
 
-export const Demo = {
-  render: () => <Story text={str(text.paragraphs, text.footer)} extensions={[demo()]} />,
+export const Typewriter = {
+  render: () => <Story text={str('# Typewriter', '', text.paragraphs, text.footer)} extensions={[typewriter()]} />,
 };
 
 export const Blast = {
   render: () => (
     <Story
-      text={str(text.paragraphs, text.code, text.paragraphs)}
+      text={str('# Blast', '', text.paragraphs, text.code, text.paragraphs)}
       extensions={[
-        demo({
+        typewriter({
           items: localStorage.getItem('dxos.composer.extension.demo')?.split(','),
         }),
         blast(
@@ -362,6 +413,16 @@ export const Blast = {
   ),
 };
 
-export const NoExtensions = {
-  render: () => <Story text={document} />,
+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

@@ -31,7 +31,7 @@ const Story = ({
   ...props
 }: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
   const ref = useRef<TextEditorRef>(null);
-  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: automerge }) });
+  const [item] = useState({ text: new TextObject(text, undefined, undefined, { automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
     return null;

package/src/components/TextEditor/TextEditor.tsx

@@ -21,9 +21,9 @@ import { generateName } from '@dxos/display-name';
 import { useThemeContext } from '@dxos/react-ui';
 import { getColorForValue, inputSurface, mx } from '@dxos/react-ui-theme';
 
-import { basicBundle, markdownBundle } from './extensions';
+import { basicBundle, markdownBundle, setCommentRange } from './extensions';
 import { defaultTheme, markdownTheme, textTheme } from './themes';
-import { type EditorModel } from '../../hooks';
+import { type CommentRange, type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 
 export const EditorModes = ['default', 'vim'] as const;
@@ -56,6 +56,7 @@ export type TextEditorSlots = {
 
 export type TextEditorProps = {
   model: EditorModel;
+  comments?: CommentRange[];
   readonly?: boolean;
   editorMode?: EditorMode;
   extensions?: Extension[];
@@ -67,13 +68,13 @@ export type TextEditorProps = {
  * NOTE: Rather than adding properties, try to create extensions that can be reused.
  */
 export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
-  ({ model, readonly, editorMode, extensions = [], slots = defaultSlots }, forwardedRef) => {
+  ({ model, comments, readonly, editorMode, extensions = [], slots = defaultSlots }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const tabsterDOMAttribute = useFocusableGroup({ tabBehavior: 'limited' });
-
     const [root, setRoot] = useState<HTMLDivElement | null>(null);
-    const [state, setState] = useState<EditorState>();
-    const [view, setView] = useState<EditorView>();
+    const [{ state = undefined, view = undefined } = {}, setEditor] = useState<
+      { state?: EditorState; view?: EditorView } | undefined
+    >();
     useImperativeHandle(forwardedRef, () => ({ root, state, view }), [view, state, root]);
 
     // TODO(burdon): Factor out?
@@ -88,30 +89,34 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
       }
     }, [awareness, peer, themeMode]);
 
-    // TODO(burdon): Get from model.
-    // useHighlights(view, [
-    //   { id: 'c-1', from: 0, to: 20 },
-    //   { id: 'c-2', from: 100, to: 120 },
-    // ]);
+    // TODO(burdon): Factor out as extension.
+    useEffect(() => {
+      if (view && comments?.length) {
+        view.dispatch({
+          effects: setCommentRange.of({ model, comments }),
+        });
+      }
+    }, [view, comments]);
 
     useEffect(() => {
       if (!root) {
         return;
       }
 
+      // TODO(burdon): Remember cursor position.
+      // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
         doc: model.text(),
         extensions: [
           readonly && EditorState.readOnly.of(readonly),
 
-          // TODO(burdon): Factor out VIM mode?
+          // TODO(burdon): Factor out VIM mode? (manage via MarkdownPlugin).
           editorMode === 'vim' && vim(),
 
           // Theme.
-          // TODO(burdon): Make optional.
+          // TODO(burdon): Make theme configurable.
           EditorView.baseTheme(defaultTheme),
           EditorView.theme(slots?.editor?.theme ?? {}),
-          // TODO(burdon): themeMode doesn't change in storybooks.
           EditorView.darkTheme.of(themeMode === 'dark'),
 
           // Storage and replication.
@@ -124,10 +129,11 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
 
       // NOTE: This repaints the editor.
       // If the new state is derived from the old state, it will likely not be visible other than the cursor resetting.
-      // Ideally this should not be hit except when changing between text objects.
+      // Ideally this should not happen except when changing between text objects.
       view?.destroy();
-      setView(
-        new EditorView({
+      setEditor({
+        state,
+        view: new EditorView({
           state,
           parent: root,
           // NOTE: Uncomment to spy on all transactions.
@@ -136,15 +142,13 @@ export const BaseTextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           //   view.update([transaction]);
           // },
         }),
-      );
-      setState(state);
+      });
 
       return () => {
         view?.destroy();
-        setView(undefined);
-        setState(undefined);
+        setEditor(undefined);
       };
-    }, [root, model, themeMode, readonly, editorMode]);
+    }, [root, model, readonly, editorMode, themeMode]);
 
     const handleKeyUp = useCallback(
       (event: KeyboardEvent) => {