@dxos/react-ui-editor 0.3.10-next.ef70620 → 0.3.11-main.008b7c6

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,CAmB1D;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,WAGzE,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/themes/default.d.ts

@@ -0,0 +1,17 @@
+import { type ThemeStyles } from '../styles';
+/**
+ * Minimal styles.
+ * https://codemirror.net/examples/styling
+ *
+ * Examples:
+ * - https://github.com/codemirror/view/blob/main/src/theme.ts
+ * - https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts
+ *
+ * NOTE: Use one of '&', '&light', and '&dark' prefix to scope instance.
+ * NOTE: `light` and `dark` selectors are preprocessed by CodeMirror and can only be in the base theme.
+ */
+export declare const defaultTheme: ThemeStyles;
+export declare const textTheme: ThemeStyles;
+export declare const markdownTheme: ThemeStyles;
+export declare const codeTheme: ThemeStyles;
+//# sourceMappingURL=default.d.ts.map

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,WA8P1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAK3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC"}

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

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

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/cursor.d.ts

@@ -0,0 +1,17 @@
+import { Facet } from '@codemirror/state';
+/**
+ * Converts indexes into the text document into stable peer-independent cursors.
+ *
+ * See:
+ *  - https://automerge.org/automerge/api-docs/js/functions/next.getCursor.html
+ *  - https://github.com/yjs/yjs?tab=readme-ov-file#relative-positions
+ *
+ * @param {assoc} number Negative values will associate the cursor with the previous character
+ *                       while positive - with the next one.
+ */
+export interface CursorConverter {
+    toCursor(position: number, assoc?: -1 | 1 | undefined): string;
+    fromCursor(cursor: string): number;
+}
+export declare const CursorConverter: Facet<CursorConverter, CursorConverter>;
+//# sourceMappingURL=cursor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cursor.d.ts","sourceRoot":"","sources":["../../../../src/util/cursor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;CACpC;AAOD,eAAO,MAAM,eAAe,yCAE1B,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './cursor';
+export * from './util';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,5 @@
+/**
+ * CodeMirror callbacks swallow errors so wrap handlers.
+ */
+export declare const callbackWrapper: <T extends Function>(fn: T) => T;
+//# sourceMappingURL=util.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/util/util.ts"],"names":[],"mappings":"AAMA;;GAEG;AAEH,eAAO,MAAM,eAAe,kCAOR,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.10-next.ef70620",
+  "version": "0.3.11-main.008b7c6",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,66 +23,62 @@
     "@codemirror/state": "^6.3.3",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.2",
-    "@fluentui/react-tabster": "^9.12.0",
+    "@fluentui/react-tabster": "^9.16.1",
     "@lezer/common": "^1.1.1",
     "@lezer/highlight": "^1.2.0",
     "@lezer/markdown": "^1.1.1",
     "@replit/codemirror-vim": "^6.0.14",
-    "@tiptap/core": "2.0.0-beta.220",
-    "@tiptap/extension-collaboration": "2.0.0-beta.220",
-    "@tiptap/extension-collaboration-cursor": "2.0.0-beta.220",
-    "@tiptap/extension-heading": "2.0.0-beta.220",
-    "@tiptap/extension-list-item": "2.0.0-beta.220",
-    "@tiptap/extension-placeholder": "2.0.0-beta.220",
-    "@tiptap/pm": "2.0.0-beta.220",
-    "@tiptap/react": "2.0.0-beta.220",
-    "@tiptap/starter-kit": "2.0.0-beta.220",
     "codemirror": "6.0.1",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.get": "^4.4.2",
-    "prosemirror-model": "^1.19.0",
-    "prosemirror-state": "^1.4.2",
-    "prosemirror-view": "^1.30.1",
+    "lodash.pick": "^4.4.0",
+    "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
     "y-codemirror.next": "^0.3.2",
-    "y-prosemirror": "~1.0.20",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.10",
-    "@dxos/debug": "0.3.10-next.ef70620",
-    "@dxos/automerge": "0.3.10-next.ef70620",
-    "@dxos/display-name": "0.3.10-next.ef70620",
-    "@dxos/echo-schema": "0.3.10-next.ef70620",
-    "@dxos/invariant": "0.3.10-next.ef70620",
-    "@dxos/log": "0.3.10-next.ef70620",
-    "@dxos/react-async": "0.3.10-next.ef70620",
-    "@dxos/react-ui": "0.3.10-next.ef70620",
-    "@dxos/react-ui-theme": "0.3.10-next.ef70620",
-    "@dxos/protocols": "0.3.10-next.ef70620",
-    "@dxos/util": "0.3.10-next.ef70620",
-    "@dxos/text-model": "0.3.10-next.ef70620"
+    "@dxos/automerge": "0.3.11-main.008b7c6",
+    "@dxos/async": "0.3.11-main.008b7c6",
+    "@dxos/context": "0.3.11-main.008b7c6",
+    "@dxos/display-name": "0.3.11-main.008b7c6",
+    "@dxos/debug": "0.3.11-main.008b7c6",
+    "@dxos/echo-schema": "0.3.11-main.008b7c6",
+    "@dxos/invariant": "0.3.11-main.008b7c6",
+    "@dxos/log": "0.3.11-main.008b7c6",
+    "@dxos/react-async": "0.3.11-main.008b7c6",
+    "@dxos/protocols": "0.3.11-main.008b7c6",
+    "@dxos/react-ui": "0.3.11-main.008b7c6",
+    "@dxos/react-ui-theme": "0.3.11-main.008b7c6",
+    "@dxos/util": "0.3.11-main.008b7c6",
+    "@dxos/text-model": "0.3.11-main.008b7c6"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
+    "@faker-js/faker": "^8.0.2",
     "@phosphor-icons/react": "^2.0.5",
     "@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-next.ef70620",
-    "@dxos/react-client": "0.3.10-next.ef70620",
-    "@dxos/react-ui": "0.3.10-next.ef70620",
-    "@dxos/echo-typegen": "0.3.10-next.ef70620",
-    "@dxos/storybook-utils": "0.3.10-next.ef70620"
+    "@dxos/echo-signals": "0.3.11-main.008b7c6",
+    "@dxos/config": "0.3.11-main.008b7c6",
+    "@dxos/echo-typegen": "0.3.11-main.008b7c6",
+    "@dxos/react-client": "0.3.11-main.008b7c6",
+    "@dxos/react-ui": "0.3.11-main.008b7c6",
+    "@dxos/storybook-utils": "0.3.11-main.008b7c6"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.10-next.ef70620"
+    "@dxos/react-client": "0.3.11-main.008b7c6"
   },
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,426 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { 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, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { TextObject } from '@dxos/echo-schema';
+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 {
+  autocomplete,
+  blast,
+  code,
+  comments,
+  defaultOptions,
+  hr,
+  image,
+  listener,
+  link,
+  mention,
+  table,
+  tasklist,
+  typewriter,
+  type CommentsOptions,
+  type LinkOptions,
+  mermaid,
+} from '../../extensions';
+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();
+
+// prettier-ignore
+const text = {
+  tasks: str(
+    '## Tasks',
+    '',
+    '- [x] decorator',
+    '- [ ] checkbox',
+    '  - [ ] state',
+    '  - [ ] indent',
+    '  - [x] style',
+    '',
+  ),
+
+  list: str(
+    '## List',
+    '',
+    '- new york',
+    '- london',
+    '- tokyo',
+    '',
+  ),
+
+  numbered: str(
+    '## Numbered',
+    '',
+    '1. one',
+    '2. two',
+    '3. three',
+    ''
+  ),
+
+  code: str(
+    '## Code',
+    '',
+    '```',
+    'const x = 100;',
+    '```',
+    '',
+    '```tsx',
+    'const Component = () => {',
+    '  const x = 100;',
+    '',
+    '  return () => <div>Test</div>;',
+    '};',
+    '```',
+    '',
+  ),
+
+  links: str(
+    '## Links',
+    '',
+    'This is a naked link https://dxos.org within a sentence.',
+    '',
+    'Take a look at [DXOS](https://dxos.org) and how to [get started](https://docs.dxos.org/guide/getting-started.html).',
+    '',
+  ),
+
+  table: str(
+    '# Table',
+    '',
+    `| ${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?
+  ),
+
+  image: str('# Image', '', '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)'),
+
+  headings: str(
+    ...[1, 2, 3, 4, 5, 6].map((level) => ['#'.repeat(level) + ` Heading ${level}`, faker.lorem.sentences(), '']).flat(),
+  ),
+
+  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('', '', '', '', '')
+};
+
+const document = str(
+  '# Markdown',
+  '',
+  '> This is a block quote.',
+  '',
+  'This is all about https://dxos.org and related technologies.',
+  '',
+  'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.',
+  '',
+  '---',
+  text.links,
+  '---',
+  text.list,
+  '---',
+  text.tasks,
+  '---',
+  text.numbered,
+  '---',
+  text.code,
+  '---',
+  text.headings,
+  '---',
+  text.table,
+  '---',
+  text.image,
+  text.footer,
+);
+
+const links = [
+  { label: 'DXOS', apply: '[DXOS](https://dxos.org)' },
+  { label: 'GitHub', apply: '[DXOS GitHub](https://github.com/dxos)' },
+  { label: 'Automerge', apply: '[Automerge](https://automerge.org/)' },
+  { label: 'IPFS', apply: '[Protocol Labs](https://docs.ipfs.tech)' },
+  { label: 'StackEdit', apply: '[StackEdit](https://stackedit.io/app)' },
+];
+
+const hover =
+  'rounded-sm text-base text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
+
+const onHoverLinkTooltip: LinkOptions['onHover'] = (el, url) => {
+  const web = new URL(url);
+  createRoot(el).render(
+    <StrictMode>
+      <a href={url} target='_blank' rel='noreferrer' className={hover}>
+        {web.origin}
+        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1')} />
+      </a>
+    </StrictMode>,
+  );
+};
+
+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 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')} />
+      </a>
+    </StrictMode>,
+  );
+};
+
+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, { automerge }) });
+  const model = useTextModel({ text: item.text });
+  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>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'react-ui-editor/MarkdownEditor',
+  component: MarkdownEditor,
+  decorators: [withTheme],
+  render: Story,
+};
+
+const extensions = [
+  autocomplete({
+    onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+  }),
+  code(),
+  hr(),
+  image(),
+  link({ onRender: onRenderLink, onHover: onHoverLinkTooltip }),
+  table(),
+  tasklist(),
+];
+
+export const Default = {
+  render: () => <Story text={document} extensions={extensions} />,
+};
+
+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 Links = {
+  render: () => (
+    <Story
+      text={str(text.links, text.footer)}
+      extensions={[link({ onHover: onHoverLinkTooltip, onRender: onRenderLink })]}
+    />
+  ),
+};
+
+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()]} />,
+};
+
+export const Image = {
+  render: () => <Story text={str(text.image, text.footer)} readonly extensions={[image()]} />,
+};
+
+export const Tasklist = {
+  render: () => (
+    <Story
+      text={str(text.tasks, '', text.list, text.footer)}
+      extensions={[
+        tasklist(),
+        listener({
+          onChange: (text) => {
+            console.log(text);
+          },
+        }),
+      ]}
+    />
+  ),
+};
+
+export const Autocomplete = {
+  render: () => (
+    <Story
+      text={str('# Autocomplete', '', 'Press CTRL-SPACE', text.footer)}
+      extensions={[
+        link({ onRender: onRenderLink }),
+        autocomplete({
+          onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+        }),
+      ]}
+    />
+  ),
+};
+
+const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', 'shoko'];
+
+export const Mention = {
+  render: () => (
+    <Story
+      text={str('# Mention', '', 'Type @...', text.footer)}
+      extensions={[
+        mention({
+          onSearch: (text) => names.filter((name) => name.toLowerCase().startsWith(text.toLowerCase())),
+        }),
+      ]}
+    />
+  ),
+};
+
+export const Mermaid = {
+  render: () => <Story text={str('# Mermaid', '', text.mermaid, text.footer)} extensions={[code(), mermaid()]} />,
+};
+
+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 Typewriter = {
+  render: () => <Story text={str('# Typewriter', '', text.paragraphs, text.footer)} extensions={[typewriter()]} />,
+};
+
+export const Blast = {
+  render: () => (
+    <Story
+      text={str('# Blast', '', text.paragraphs, text.code, text.paragraphs)}
+      extensions={[
+        typewriter({
+          items: localStorage.getItem('dxos.composer.extension.demo')?.split(','),
+        }),
+        blast(
+          defaultsDeep(
+            {
+              effect: 2,
+              particleGravity: 0.2,
+              particleShrinkRate: 0.995,
+              color: () => [faker.number.int({ min: 100, max: 200 }), 0, 0],
+              // color: () => [faker.number.int(256), faker.number.int(256), faker.number.int(256)],
+            },
+            defaultOptions,
+          ),
+        ),
+      ]}
+    />
+  ),
+};
+
+export const Diagnostics = {
+  render: () => (
+    <Story
+      text={document}
+      extensions={[
+        // Cursor moved.
+        EditorView.updateListener.of((update) => {
+          console.log('update', update.view.state.selection.main.head);
+        }),
+      ]}
+    />
+  ),
+};