@dxos/react-ui-editor 0.3.10-main.3645708 → 0.3.10-main.396fa89

package/dist/types/src/components/TextEditor/extensions/tasklist.d.ts

@@ -1,5 +1,3 @@
-import { type Extension } from '@codemirror/state';
-export declare const statefield: () => Extension;
-export declare const styles: Extension;
-export declare const tasklist: () => Extension[];
+export type TasklistOptions = {};
+export declare const tasklist: (options?: TasklistOptions) => import("@codemirror/state").Extension[];
 //# sourceMappingURL=tasklist.d.ts.map

package/dist/types/src/components/TextEditor/extensions/tasklist.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tasklist.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/tasklist.ts"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,mBAAmB,CAAC;AAyD3B,eAAO,MAAM,UAAU,QAAO,SAkC7B,CAAC;AAGF,eAAO,MAAM,MAAM,WAIjB,CAAC;AAEH,eAAO,MAAM,QAAQ,mBAA+B,CAAC"}
+{"version":3,"file":"tasklist.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/tasklist.ts"],"names":[],"mappings":"AA+DA,MAAM,MAAM,eAAe,GAAG,EAAE,CAAC;AAEjC,eAAO,MAAM,QAAQ,aAAa,eAAe,4CAuDhD,CAAC"}

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

@@ -2,6 +2,11 @@ import { type StyleSpec } from 'style-mod';
 /**
  * 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.
  */
@@ -11,6 +16,9 @@ export declare const defaultTheme: {
 export declare const textTheme: {
     [selector: string]: StyleSpec;
 };
+export declare const markdownTheme: {
+    [selector: string]: StyleSpec;
+};
 export declare const codeTheme: {
     [selector: string]: StyleSpec;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/themes/default.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAI3C;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE;IACzB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAyI/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE;IACtB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAK/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE;IACtB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAK/B,CAAC"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/themes/default.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAI3C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE;IACzB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAiO/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE;IACtB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAQ/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE;IAC1B,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAM/B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE;IACtB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;CAQ/B,CAAC"}

package/dist/types/src/{automerge/automerge-plugin → hooks/automerge}/PatchSemaphore.d.ts

@@ -5,6 +5,9 @@ import { type Field } from './plugin';
 type Doc<T> = automerge.Doc<T>;
 type Heads = automerge.Heads;
 type ChangeFn = (atHeads: Heads, change: (doc: Doc<unknown>) => void) => Heads | undefined;
+/**
+ * TODO(burdon): Comment.
+ */
 export declare class PatchSemaphore {
     _field: Field;
     _inReconcile: boolean;

package/dist/types/src/hooks/automerge/PatchSemaphore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatchSemaphore.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/automerge/PatchSemaphore.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,KAAK,KAAK,EAA8E,MAAM,UAAU,CAAC;AAGlH,KAAK,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC/B,KAAK,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;AAE7B,KAAK,QAAQ,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,OAAO,CAAC,KAAK,IAAI,KAAK,KAAK,GAAG,SAAS,CAAC;AAE3F;;GAEG;AACH,qBAAa,cAAc;IACzB,MAAM,EAAG,KAAK,CAAC;IACf,YAAY,UAAS;IACrB,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAM;gBAEjB,KAAK,CAAC,EAAE,KAAK;IAMzB,SAAS,WAAY,UAAU,QAAQ,UAAU,UA0C/C;CACH"}

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

@@ -0,0 +1,16 @@
+import '@preact/signals-react';
+import { type Prop } from '@dxos/automerge/automerge';
+import { type IDocHandle } from './handle';
+type EditorProps = {
+    handle: IDocHandle;
+    path: Prop[];
+};
+declare const _default: {
+    title: string;
+    component: ({ handle, path }: EditorProps) => JSX.Element;
+};
+export default _default;
+export declare const Default: {
+    render: () => JSX.Element;
+};
+//# sourceMappingURL=automerge.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"automerge.stories.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/automerge/automerge.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,uBAAuB,CAAC;AAQ/B,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,KAAK,WAAW,GAAG;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,IAAI,EAAE,CAAC;CACd,CAAC;;;;;AA+DF,wBAGE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

package/dist/types/src/hooks/automerge/handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/automerge/handle.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,CAAC,MAAM,2BAA2B,CAAC;AAEpD,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,OAAO,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAChC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACpE,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;IAEtG,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;IACzD,cAAc,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;CAC7D,CAAC"}

package/dist/types/src/{automerge/automerge-plugin → hooks/automerge}/index.d.ts

@@ -1,3 +1,3 @@
-export { automergePlugin, type AutomergePlugin } from './plugin';
 export { type IDocHandle } from './handle';
+export { automergePlugin, type AutomergePlugin } from './plugin';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/automerge/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC"}

package/dist/types/src/hooks/automerge/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/automerge/plugin.ts"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,SAAS,EAEd,WAAW,EACX,UAAU,EACV,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,wBAAwB,EAAE,WAAW,EAAE,CAAC;CACzC,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,KAAK,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,UAAU,0DAAsC,CAAC;AAE9D,eAAO,MAAM,WAAW,sCAAsB,YAAY,WAAW,CAAgC,CAAC;AAEtG,eAAO,MAAM,YAAY,UAAW,WAAW,uCAAsD,CAAC;AAEtG,eAAO,MAAM,OAAO,UAAW,WAAW,mBAAiB,IAAI,EAA6B,CAAC;AAE7F,MAAM,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;AAMtC,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,UAAU,QAAQ,IAAI,EAAE,KAAG,eA+DlE,CAAC;AAEF,eAAO,MAAM,uBAAuB,qDAA+B,CAAC;AAEpE,eAAO,MAAM,aAAa,OAAQ,WAAW,KAAG,OAAmD,CAAC;AAEpG,eAAO,MAAM,aAAa,OAAQ,eAAe,SAchD,CAAC"}

package/dist/types/src/hooks/automerge/translation/automerge-to-codemirror.d.ts

@@ -0,0 +1,5 @@
+import { type EditorSelection } from '@codemirror/state';
+import { type EditorView } from '@codemirror/view';
+import { type Patch, type Prop } from '@dxos/automerge/automerge';
+export declare const automergeToCodemirror: (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => void;
+//# sourceMappingURL=automerge-to-codemirror.d.ts.map

package/dist/types/src/hooks/automerge/translation/automerge-to-codemirror.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"automerge-to-codemirror.d.ts","sourceRoot":"","sources":["../../../../../../src/hooks/automerge/translation/automerge-to-codemirror.ts"],"names":[],"mappings":"AAMA,OAAO,EAA8B,KAAK,eAAe,EAAoB,MAAM,mBAAmB,CAAC;AACvG,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAGL,KAAK,KAAK,EACV,KAAK,IAAI,EAGV,MAAM,2BAA2B,CAAC;AAInC,eAAO,MAAM,qBAAqB,SAC1B,UAAU,aACL,eAAe,UAClB,IAAI,EAAE,WACL,KAAK,EAAE,SAkBjB,CAAC"}

package/dist/types/src/hooks/automerge/translation/codemirror-to-automerge.d.ts

@@ -0,0 +1,6 @@
+import { type EditorState, type Transaction } from '@codemirror/state';
+import { type Heads } from '@dxos/automerge/automerge';
+import { type IDocHandle } from '../handle';
+import { type Field } from '../plugin';
+export declare const codemirrorToAutomerge: (field: Field, handle: IDocHandle, transactions: Transaction[], state: EditorState) => Heads | undefined;
+//# sourceMappingURL=codemirror-to-automerge.d.ts.map

package/dist/types/src/hooks/automerge/translation/codemirror-to-automerge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codemirror-to-automerge.d.ts","sourceRoot":"","sources":["../../../../../../src/hooks/automerge/translation/codemirror-to-automerge.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAa,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAElF,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC,eAAO,MAAM,qBAAqB,yBAExB,UAAU,gBACJ,WAAW,EAAE,SACpB,WAAW,KACjB,KAAK,GAAG,SAyBV,CAAC"}

package/dist/types/src/hooks/automerge/translation/index.d.ts

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

package/dist/types/src/hooks/automerge/translation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/hooks/automerge/translation/index.ts"],"names":[],"mappings":"AAIA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC"}

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

@@ -1,4 +1,3 @@
-export * from './useCollaboration';
 export * from './useTextModel';
 export * from './yjs';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,OAAO,CAAC"}

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

@@ -1,16 +1,21 @@
+import { type Extension } 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;
-type Provider = {
-    awareness: Awareness;
+export type DocumentRange = {
+    id: string;
+    from: number;
+    to: number;
 };
 export type EditorModel = {
     id: string;
     content: string | YText | YXmlFragment | DocAccessor;
     text: () => string;
-    provider?: Provider;
+    ranges: DocumentRange[];
+    extension?: Extension;
+    awareness?: Awareness;
     peer?: {
         id: string;
         name?: string;

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":"AAKA,OAAO,KAAK,KAAK,iBAAiB,MAAM,uBAAuB,CAAC;AAEhE,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;AAK5D,KAAK,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;AAC7C,KAAK,QAAQ,GAAG;IAAE,SAAS,EAAE,SAAS,CAAA;CAAE,CAAC;AAGzC,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,GAAG,KAAK,GAAG,YAAY,GAAG,WAAW,CAAC;IACrD,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,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;AAKF,eAAO,MAAM,YAAY,8BAA+B,mBAAmB,KAAG,WAAW,GAAG,SAuD3F,CAAC"}
+{"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"}

package/dist/types/src/{components/TextEditor → hooks/yjs}/yjs.stories.d.ts

@@ -1,12 +1,12 @@
 import '@dxosTheme';
 import React from 'react';
 declare const _default: {
-    component: React.ForwardRefExoticComponent<import("./TextEditor").TextEditorProps & React.RefAttributes<import("./TextEditor").TextEditorRef>>;
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../../components").TextEditorProps & React.RefAttributes<import("../../components").TextEditorRef>>;
     decorators: import("@storybook/react").Decorator[];
 };
 export default _default;
 export declare const Default: {
-    title: string;
     render: () => JSX.Element;
 };
 //# sourceMappingURL=yjs.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"yjs.stories.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/yjs/yjs.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;AAWxC,wBAIE;AA+BF,eAAO,MAAM,OAAO;;CAGnB,CAAC"}

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

@@ -1,5 +1,6 @@
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export declare const heading: Record<HeadingLevel, string>;
+export declare const headings: Record<HeadingLevel, string[]>;
+export declare const heading: (level: HeadingLevel, readonly?: boolean) => 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;
@@ -12,7 +13,7 @@ export declare const codeMark = "font-mono text-primary-500";
 export declare const codeBlock = "mlb-2 font-mono bg-neutral-500/10 p-3 rounded";
 export declare const inlineUrl: string;
 export declare const blockquote: string;
-export declare const horizontalRule = "flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-500/50";
+export declare const horizontalRule = "flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-200 dark:border-neutral-800";
 export declare const unorderedList = "mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[attr(marker)] [&>li:before]:mlb-1 [&>li:before]:mie-2";
 export declare const orderedList = "mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[counters(section,_\".\")_\"._\"] [counter-reset:section] [&>li:before]:mlb-1";
 export declare const listItem = "contents before:[counter-increment:section]";

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;AAGjD,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAOhD,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;AAG1C,eAAO,MAAM,UAAU,QAAsF,CAAC;AAG9G,eAAO,MAAM,cAAc,qFAAqF,CAAC;AAGjH,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,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;AAG1C,eAAO,MAAM,UAAU,QAAsF,CAAC;AAG9G,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/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,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,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"}

package/package.json

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

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

@@ -3,37 +3,58 @@
 //
 
 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, { 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, listener, link, tasklist, tooltip, type TooltipOptions, type LinkOptions } from './extensions';
+import {
+  autocomplete,
+  listener,
+  link,
+  tasklist,
+  tooltip,
+  type TooltipOptions,
+  type LinkOptions,
+  comments,
+  table,
+  image,
+  mention,
+  blast,
+  demo,
+  defaultOptions,
+  highlight,
+  code,
+} from './extensions';
 import { useTextModel } from '../../hooks';
 
-// TODO(burdon): Read-only render mode (presentation).
-// TODO(burdon): Slides.
-// TODO(burdon): Autocomplete.
-// TODO(burdon): Block quote.
-// TODO(burdon): Images.
-// TODO(burdon): Tables.
+// Extensions:
+// TODO(burdon): Table of contents.
+// TODO(burdon): Front-matter
 
 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] parsing',
-    '- [ ] styling',
-    '- [ ] rendering',
+    '- [x] decorator',
+    '- [ ] checkbox',
+    '  - [ ] state',
+    '  - [ ] indent',
+    '  - [x] style',
   ),
 
   list: str(
@@ -63,8 +84,10 @@ const text = {
     '```tsx',
     'const Component = () => {',
     '  const x = 100;',
+    '',
     '  return () => <div>Test</div>;',
     '};',
+    '',
     '```'
   ),
 
@@ -77,9 +100,26 @@ 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)} |`,
+    '', // 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()),
+
+  footer: str('', '', '', '', '')
 };
 
 const document = str(
@@ -89,9 +129,7 @@ const document = str(
   '',
   'This is all about https://dxos.org and related technologies.',
   '',
-  'This this is **bold**, __underlined__, _italic_, and `f(INLINE)`.',
-  '',
-  '__NOTE__: Fenced code uses the base font.',
+  'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.',
   '',
   '---',
   text.links,
@@ -105,6 +143,12 @@ const document = str(
   text.code,
   '---',
   text.headings,
+  '---',
+  text.table,
+  '---',
+  text.image,
+  '',
+  text.footer,
 );
 
 const links = [
@@ -140,11 +184,12 @@ const onRender: LinkOptions['onRender'] = (el, url) => {
   );
 };
 
+// TODO(burdon): Pass in model.
 const Story = ({
   text,
   automerge,
   ...props
-}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
+}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'readonly' | 'extensions' | 'slots'>) => {
   const ref = useRef<TextEditorRef>(null);
   const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: automerge }) });
   const model = useTextModel({ text: item.text });
@@ -171,42 +216,56 @@ export default {
   render: Story,
 };
 
+const extensions = [
+  autocomplete({
+    onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+  }),
+  code(),
+  image(),
+  link({ onRender }),
+  table(),
+  tasklist(),
+  tooltip({ onHover }),
+];
+
 export const Default = {
-  render: () => (
-    <Story
-      text={document}
-      extensions={[
-        link({ onRender }),
-        tooltip({ onHover }),
-        tasklist(),
-        autocomplete({
-          getOptions: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
-        }),
-      ]}
-    />
-  ),
+  render: () => <Story text={document} extensions={extensions} />,
 };
 
-export const Simple = {
-  render: () => <Story text={document} />,
+export const Readonly = {
+  render: () => <Story text={document} extensions={extensions} readonly />,
 };
 
 export const Tooltips = {
-  render: () => <Story text={text.links} extensions={[tooltip({ onHover })]} />,
+  render: () => <Story text={str(text.links, text.footer)} extensions={[tooltip({ onHover })]} />,
 };
 
 export const Links = {
-  render: () => <Story text={text.links} extensions={[link({ onRender })]} />,
+  render: () => <Story text={str(text.links, text.footer)} extensions={[link({ onRender })]} />,
+};
+
+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={str(text.tasks, '', text.list, text.footer)}
       extensions={[
         tasklist(),
-        listener((text) => {
-          console.log(text);
+        listener({
+          onChange: (text) => {
+            console.log(text);
+          },
         }),
       ]}
     />
@@ -216,17 +275,50 @@ export const TaskList = {
 export const Autocomplete = {
   render: () => (
     <Story
-      text={str('# Autocomplete', '', '', '', '', '', '')}
+      text={str('# Autocomplete', '', 'Press CTRL-SPACE', text.footer)}
       extensions={[
         link({ onRender }),
         autocomplete({
-          getOptions: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+          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())),
+        }),
+      ]}
+    />
+  ),
+};
+
+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 Diagnostics = {
   render: () => (
     <Story
@@ -240,3 +332,36 @@ export const Diagnostics = {
     />
   ),
 };
+
+export const Demo = {
+  render: () => <Story text={str(text.paragraphs, text.footer)} extensions={[demo()]} />,
+};
+
+export const Blast = {
+  render: () => (
+    <Story
+      text={str(text.paragraphs, text.code, text.paragraphs)}
+      extensions={[
+        demo({
+          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 NoExtensions = {
+  render: () => <Story text={document} />,
+};

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

@@ -57,6 +57,17 @@ export default {
 };
 
 export const Default = {
+  render: () => (
+    <Story
+      slots={defaultsDeep(
+        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
+        defaultSlots,
+      )}
+    />
+  ),
+};
+
+export const Text = {
   render: () => (
     <Story
       text={initialText}
@@ -71,12 +82,12 @@ export const Default = {
 export const Automerge = {
   render: () => (
     <Story
+      automerge
       text={initialText}
       slots={defaultsDeep(
         { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
         defaultSlots,
       )}
-      automerge
     />
   ),
 };