@dxos/react-ui-editor 0.6.5 → 0.6.6-staging.23d123d

package/dist/types/src/extensions/markdown/action.d.ts

@@ -1,5 +1,5 @@
 import { type EditorView } from '@codemirror/view';
-export type ActionType = 'blockquote' | 'strong' | 'codeblock' | 'comment' | 'heading' | 'image' | 'emphasis' | 'code' | 'link' | 'list-bullet' | 'list-ordered' | 'list-task' | 'mention' | 'prompt' | 'strikethrough' | 'table';
+export type ActionType = 'view-mode' | 'blockquote' | 'strong' | 'codeblock' | 'comment' | 'heading' | 'image' | 'emphasis' | 'code' | 'link' | 'list-bullet' | 'list-ordered' | 'list-task' | 'mention' | 'prompt' | 'strikethrough' | 'table';
 export type Action = {
     type: ActionType;
     data?: any;

package/dist/types/src/extensions/markdown/action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/action.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAsBnD,MAAM,MAAM,UAAU,GAClB,YAAY,GACZ,QAAQ,GACR,WAAW,GACX,SAAS,GACT,SAAS,GACT,OAAO,GACP,UAAU,GACV,MAAM,GACN,MAAM,GACN,aAAa,GACb,cAAc,GACd,WAAW,GACX,SAAS,GACT,QAAQ,GACR,eAAe,GACf,OAAO,CAAC;AAEZ,MAAM,MAAM,MAAM,GAAG;IACnB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEvE,eAAO,MAAM,aAAa,EAAE,aA4D3B,CAAC"}
+{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/action.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAsBnD,MAAM,MAAM,UAAU,GAClB,WAAW,GACX,YAAY,GACZ,QAAQ,GACR,WAAW,GACX,SAAS,GACT,SAAS,GACT,OAAO,GACP,UAAU,GACV,MAAM,GACN,MAAM,GACN,aAAa,GACb,cAAc,GACd,WAAW,GACX,SAAS,GACT,QAAQ,GACR,eAAe,GACf,OAAO,CAAC;AAEZ,MAAM,MAAM,MAAM,GAAG;IACnB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;AAEvE,eAAO,MAAM,aAAa,EAAE,aA4D3B,CAAC"}

package/dist/types/src/extensions/modes.d.ts

@@ -1,12 +1,15 @@
 import { type Extension, Facet } from '@codemirror/state';
 export declare const focusEvent = "focus.container";
-export type EditorMode = 'default' | 'vim' | 'vscode' | undefined;
-export type EditorConfig = {
+export declare const EditorViewModes: readonly ["preview", "readonly", "source"];
+export type EditorViewMode = (typeof EditorViewModes)[number];
+export declare const EditorInputModes: readonly ["default", "vim", "vscode"];
+export type EditorInputMode = (typeof EditorInputModes)[number];
+export type EditorInputConfig = {
     type: string;
     noTabster?: boolean;
 };
-export declare const editorMode: Facet<EditorConfig, EditorConfig>;
-export declare const EditorModes: {
+export declare const editorInputMode: Facet<EditorInputConfig, EditorInputConfig>;
+export declare const InputModeExtensions: {
     [mode: string]: Extension;
 };
 //# sourceMappingURL=modes.d.ts.map

package/dist/types/src/extensions/modes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modes.d.ts","sourceRoot":"","sources":["../../../../src/extensions/modes.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAK1D,eAAO,MAAM,UAAU,oBAAoB,CAAC;AAE5C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAElE,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAErB,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;CAsBpD,CAAC"}
+{"version":3,"file":"modes.d.ts","sourceRoot":"","sources":["../../../../src/extensions/modes.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAK1D,eAAO,MAAM,UAAU,oBAAoB,CAAC;AAE5C,eAAO,MAAM,eAAe,4CAA6C,CAAC;AAC1E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9D,eAAO,MAAM,gBAAgB,uCAAwC,CAAC;AACtE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,eAAe,6CAE1B,CAAC;AAEH,eAAO,MAAM,mBAAmB,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;CAsB5D,CAAC"}

package/dist/types/src/hooks/{useTextEditor.stories.d.ts → InputMode.stories.d.ts}

@@ -1,15 +1,13 @@
 /// <reference types="react" />
 import '@dxosTheme';
+import { type UseTextEditorProps } from './useTextEditor';
 type StoryProps = {
-    autoFocus?: boolean;
     placeholder?: string;
-    doc?: string;
     readonly?: boolean;
-};
+} & UseTextEditorProps;
 declare const _default: {
     title: string;
     decorators: import("@storybook/react/*").Decorator[];
-    render: (args: StoryProps) => JSX.Element;
     parameters: {
         translations: {
             'en-US': {
@@ -31,24 +29,26 @@ declare const _default: {
                     'heading level label_zero': string;
                     'heading level label_one': string;
                     'heading level label_other': string;
+                    'view mode label': string;
+                    'preview mode label': string;
+                    'readonly mode label': string;
+                    'source mode label': string;
                 };
             };
         }[];
         layout: string;
     };
+    render: ({ autoFocus, initialValue, placeholder, readonly }: StoryProps) => JSX.Element;
 };
 export default _default;
 export declare const Default: {
     render: () => JSX.Element;
 };
-export declare const Basic: {
-    render: () => JSX.Element;
-};
 export declare const Markdown: {
     args: {
         autoFocus: boolean;
         placeholder: string;
-        doc: string;
+        initialValue: string;
     };
 };
-//# sourceMappingURL=useTextEditor.stories.d.ts.map
+//# sourceMappingURL=InputMode.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputMode.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/InputMode.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AASpB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAgBzE,KAAK,UAAU,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EpF,wBAKE;AAEF,eAAO,MAAM,OAAO;;CAanB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC"}

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

@@ -1,28 +1,16 @@
+/// <reference types="react" />
 import '@dxosTheme';
-import { type EditorView } from 'codemirror';
-import React from 'react';
-import { type TextEditorProps } from './TextEditor';
-import { type Comment } from '../../extensions';
+import { type UseTextEditorProps } from './useTextEditor';
 type StoryProps = {
     id?: string;
     text?: string;
-    comments?: Comment[];
     readonly?: boolean;
     placeholder?: string;
-} & Pick<TextEditorProps, 'selection' | 'extensions'>;
+} & Pick<UseTextEditorProps, 'selection' | 'extensions'>;
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Pick<import("@codemirror/state").EditorStateConfig, "doc" | "selection" | "extensions"> & {
-        id?: string | undefined;
-        className?: string | undefined;
-        autoFocus?: boolean | undefined;
-        scrollTo?: import("@codemirror/state").StateEffect<unknown> | undefined;
-        moveToEndOfLine?: boolean | undefined;
-        debug?: boolean | undefined;
-        dataTestId?: string | undefined;
-    } & React.RefAttributes<EditorView | null>>;
     decorators: import("@storybook/react/*").Decorator[];
-    render: ({ id, text, comments, extensions: _extensions, readonly, placeholder, ...props }: StoryProps) => JSX.Element;
+    render: ({ id, text, extensions: _extensions, readonly, placeholder, selection, }: StoryProps) => JSX.Element;
     parameters: {
         translations: {
             'en-US': {
@@ -44,6 +32,10 @@ declare const _default: {
                     'heading level label_zero': string;
                     'heading level label_one': string;
                     'heading level label_other': string;
+                    'view mode label': string;
+                    'preview mode label': string;
+                    'readonly mode label': string;
+                    'source mode label': string;
                 };
             };
         }[];

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/TextEditor.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAmBpB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA0NzE,KAAK,UAAU,GAAG;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,GAAG,YAAY,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCzD,wBAKE;AAeF,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAEpB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAExB,CAAC;AASF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAIF,eAAO,MAAM,SAAS;;CAUrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAE/B,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,IAAI;;CAEhB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAIjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAYxB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAWxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAWnB,CAAC;AAmDF,eAAO,MAAM,OAAO;;CAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAsCpB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAOf,CAAC;AAEF,eAAO,MAAM,WAAW;;CAEvB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAaf,CAAC;AAIF,eAAO,MAAM,QAAQ;;CAgBpB,CAAC;AAEF,eAAO,MAAM,UAAU;;CAOtB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAqBjB,CAAC"}

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

@@ -1,7 +1,8 @@
+import { type EditorStateConfig, type StateEffect } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { type DependencyList, type KeyboardEventHandler, type RefObject } from 'react';
-import { type TextEditorProps } from '../components';
+import { type MaybeFunction } from '@dxos/util';
 export type UseTextEditor = {
     parentRef: RefObject<HTMLDivElement>;
     view?: EditorView;
@@ -10,9 +11,25 @@ export type UseTextEditor = {
         onKeyUp: KeyboardEventHandler<HTMLDivElement>;
     };
 };
-export type UseTextEditorProps = Omit<TextEditorProps, 'moveToEndOfLine' | 'dataTestId'>;
+export type CursorInfo = {
+    from: number;
+    to: number;
+    line: number;
+    lines: number;
+    length: number;
+    after?: string;
+};
+export type UseTextEditorProps = Pick<EditorStateConfig, 'selection' | 'extensions'> & {
+    id?: string;
+    initialValue?: string;
+    className?: string;
+    autoFocus?: boolean;
+    scrollTo?: StateEffect<unknown>;
+    moveToEndOfLine?: boolean;
+    debug?: boolean;
+};
 /**
  * Hook for creating editor.
  */
-export declare const useTextEditor: (cb?: () => UseTextEditorProps, deps?: DependencyList) => UseTextEditor;
+export declare const useTextEditor: (props?: MaybeFunction<UseTextEditorProps>, deps?: DependencyList) => UseTextEditor;
 //# sourceMappingURL=useTextEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,GAAG;QACtD,QAAQ,EAAE,CAAC,CAAC;QACZ,OAAO,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,YAAY,CAAC,CAAC;AAEzF;;GAEG;AACH,eAAO,MAAM,aAAa,QAAQ,MAAM,kBAAkB,4BAA2C,aA+FpG,CAAC"}
+{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAK5D,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,GAAG;QACtD,QAAQ,EAAE,CAAC,CAAC;QACZ,OAAO,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,YAAY,CAAC,GAAG;IACrF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,aAAa,WACjB,cAAc,kBAAkB,CAAC,4BAEvC,aA6HF,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,WAgQ1B,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,WAgR1B,CAAC"}

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

@@ -19,6 +19,10 @@ declare const _default: {
             'heading level label_zero': string;
             'heading level label_one': string;
             'heading level label_other': string;
+            'view mode label': string;
+            'preview mode label': string;
+            'readonly mode label': string;
+            'source mode label': string;
         };
     };
 }[];

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

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAEhD,wBAwBE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEhD,wBA4BE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.6.5",
+  "version": "0.6.6-staging.23d123d",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -21,7 +21,7 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.17.0",
+    "@codemirror/autocomplete": "^6.18.0",
     "@codemirror/commands": "^6.6.0",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-markdown": "^6.2.5",
@@ -35,7 +35,7 @@
     "@fluentui/react-tabster": "^9.19.0",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
-    "@lezer/markdown": "^1.2.0",
+    "@lezer/markdown": "^1.3.0",
     "@radix-ui/react-context": "^1.0.0",
     "@replit/codemirror-vim": "^6.0.14",
     "@replit/codemirror-vscode-keymap": "^6.0.2",
@@ -47,19 +47,19 @@
     "lodash.sortby": "^4.7.0",
     "react-dropzone": "^14.2.3",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.6.5",
-    "@dxos/context": "0.6.5",
-    "@dxos/debug": "0.6.5",
-    "@dxos/display-name": "0.6.5",
-    "@dxos/echo-schema": "0.6.5",
-    "@dxos/automerge": "0.6.5",
-    "@dxos/log": "0.6.5",
-    "@dxos/invariant": "0.6.5",
-    "@dxos/protocols": "0.6.5",
-    "@dxos/react-ui-theme": "0.6.5",
-    "@dxos/react-ui": "0.6.5",
-    "@dxos/react-async": "0.6.5",
-    "@dxos/util": "0.6.5"
+    "@dxos/async": "0.6.6-staging.23d123d",
+    "@dxos/context": "0.6.6-staging.23d123d",
+    "@dxos/automerge": "0.6.6-staging.23d123d",
+    "@dxos/debug": "0.6.6-staging.23d123d",
+    "@dxos/echo-schema": "0.6.6-staging.23d123d",
+    "@dxos/display-name": "0.6.6-staging.23d123d",
+    "@dxos/protocols": "0.6.6-staging.23d123d",
+    "@dxos/log": "0.6.6-staging.23d123d",
+    "@dxos/react-ui": "0.6.6-staging.23d123d",
+    "@dxos/invariant": "0.6.6-staging.23d123d",
+    "@dxos/react-async": "0.6.6-staging.23d123d",
+    "@dxos/react-ui-theme": "0.6.6-staging.23d123d",
+    "@dxos/util": "0.6.6-staging.23d123d"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -85,22 +85,22 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.5.0",
-    "@dxos/automerge": "0.6.5",
-    "@dxos/config": "0.6.5",
-    "@dxos/echo-signals": "0.6.5",
-    "@dxos/keyboard": "0.6.5",
-    "@dxos/echo-typegen": "0.6.5",
-    "@dxos/react-ui": "0.6.5",
-    "@dxos/random": "0.6.5",
-    "@dxos/react-client": "0.6.5",
-    "@dxos/storybook-utils": "0.6.5",
-    "@braneframe/types": "0.6.5"
+    "@dxos/automerge": "0.6.6-staging.23d123d",
+    "@dxos/config": "0.6.6-staging.23d123d",
+    "@braneframe/types": "0.6.6-staging.23d123d",
+    "@dxos/echo-signals": "0.6.6-staging.23d123d",
+    "@dxos/echo-typegen": "0.6.6-staging.23d123d",
+    "@dxos/random": "0.6.6-staging.23d123d",
+    "@dxos/keyboard": "0.6.6-staging.23d123d",
+    "@dxos/react-ui": "0.6.6-staging.23d123d",
+    "@dxos/storybook-utils": "0.6.6-staging.23d123d",
+    "@dxos/react-client": "0.6.6-staging.23d123d"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/react-client": "0.6.5"
+    "@dxos/react-client": "0.6.6-staging.23d123d"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -10,13 +10,14 @@ import { TextType } from '@braneframe/types';
 import { create } from '@dxos/echo-schema';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { createDocAccessor } from '@dxos/react-client/echo';
+import { createDocAccessor, createEchoObject } from '@dxos/react-client/echo';
 import { Tooltip, useThemeContext } from '@dxos/react-ui';
 import { textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
 import {
+  type Action,
   type Comment,
   comments,
   createBasicExtensions,
@@ -24,6 +25,7 @@ import {
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
+  type EditorViewMode,
   formattingKeymap,
   image,
   table,
@@ -37,15 +39,16 @@ faker.seed(101);
 
 const Story: FC<{ content: string }> = ({ content }) => {
   const { themeMode } = useThemeContext();
-  const [text] = useState(create(TextType, { content }));
+  const [text] = useState(createEchoObject(create(TextType, { content })));
   const [formattingState, formattingObserver] = useFormattingState();
+  const [viewMode, setViewMode] = useState<EditorViewMode>('preview');
   const { parentRef, view } = useTextEditor(() => {
     return {
       id: text.id,
-      doc: text.content,
+      initialValue: text.content,
       extensions: [
         formattingObserver,
-        createBasicExtensions(),
+        createBasicExtensions({ readonly: viewMode === 'readonly' }),
         createMarkdownExtensions({ themeMode }),
         createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2' } } }),
         createDataExtensions({ id: text.id, text: createDocAccessor(text, ['content']) }),
@@ -56,15 +59,21 @@ const Story: FC<{ content: string }> = ({ content }) => {
             return id;
           },
         }),
-        decorateMarkdown(),
         formattingKeymap(),
         image(),
-        table(),
+        ...(viewMode !== 'source' ? [decorateMarkdown(), table()] : []),
       ],
     };
-  }, [text, formattingObserver, themeMode]);
+  }, [text, formattingObserver, viewMode, themeMode]);
 
-  const handleAction = useActionHandler(view);
+  const handleToolbarAction = useActionHandler(view);
+  const handleAction = (action: Action) => {
+    if (action.type === 'view-mode') {
+      setViewMode(action.data);
+    } else {
+      handleToolbarAction?.(action);
+    }
+  };
 
   const [_comments, setComments] = useState<Comment[]>([]);
   useComments(view, text.id, _comments);
@@ -73,6 +82,7 @@ const Story: FC<{ content: string }> = ({ content }) => {
     <Tooltip.Provider>
       <div role='none' className='fixed inset-0 flex flex-col'>
         <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
+          <Toolbar.View mode={viewMode} />
           <Toolbar.Markdown />
           <Toolbar.Custom onUpload={async (file) => ({ url: file.name })} />
           <Toolbar.Separator />

package/src/components/Toolbar/Toolbar.tsx

@@ -26,6 +26,9 @@ import {
   TextItalic,
   CaretDown,
   Check,
+  PencilSimpleSlash,
+  MarkdownLogo,
+  PencilSimple,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';
@@ -45,7 +48,7 @@ import {
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { type Action, type ActionType, type Formatting } from '../../extensions';
+import { type EditorViewMode, type Action, type ActionType, type Formatting, EditorViewModes } from '../../extensions';
 import { translationKey } from '../../translations';
 
 const iconStyles = getSize(5);
@@ -60,7 +63,7 @@ const ToolbarSeparator = () => <div role='separator' className='grow' />;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
-    state: (Formatting & { comment?: boolean; selection?: boolean }) | undefined;
+    state: (Formatting & { comment?: boolean; mode?: EditorViewMode; selection?: boolean }) | undefined;
     onAction?: (action: Action) => void;
   }>
 >;
@@ -72,7 +75,10 @@ const ToolbarRoot = ({ children, onAction, classNames, state }: ToolbarProps) =>
     <ToolbarContextProvider onAction={onAction} state={state}>
       <DensityProvider density='fine'>
         <ElevationProvider elevation='chrome'>
-          <NaturalToolbar.Root classNames={['is-full shrink-0 overflow-x-auto overflow-y-hidden p-1', classNames]}>
+          <NaturalToolbar.Root
+            classNames={['p-1 is-full shrink-0 overflow-x-auto overflow-y-hidden', classNames]}
+            style={{ contain: 'layout' }}
+          >
             {children}
           </NaturalToolbar.Root>
         </ElevationProvider>
@@ -134,6 +140,89 @@ const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   );
 };
 
+//
+// View Mode
+//
+
+const ViewModeIcons: Record<EditorViewMode, Icon> = {
+  preview: PencilSimple,
+  readonly: PencilSimpleSlash,
+  source: MarkdownLogo,
+};
+
+const MarkdownView = ({ mode }: { mode: EditorViewMode }) => {
+  const { t } = useTranslation(translationKey);
+  const { onAction } = useToolbarContext('ViewMode');
+  const ModeIcon = ViewModeIcons[mode ?? 'preview'];
+  const suppressNextTooltip = useRef<boolean>(false);
+  const [tooltipOpen, setTooltipOpen] = useState<boolean>(false);
+  const [selectOpen, setSelectOpen] = useState<boolean>(false);
+  return (
+    <Tooltip.Root
+      open={tooltipOpen}
+      onOpenChange={(nextOpen) => {
+        if (nextOpen && suppressNextTooltip.current) {
+          suppressNextTooltip.current = false;
+          return setTooltipOpen(false);
+        } else {
+          return setTooltipOpen(nextOpen);
+        }
+      }}
+    >
+      {/* TODO(thure): `Select` encounters a ref error if used here (repro: select a heading, then select another
+            heading). Determine the root cause and fix or report to Radix. */}
+      <DropdownMenu.Root
+        open={selectOpen}
+        onOpenChange={(nextOpen: boolean) => {
+          if (!nextOpen) {
+            suppressNextTooltip.current = true;
+          }
+          return setSelectOpen(nextOpen);
+        }}
+      >
+        <Tooltip.Trigger asChild>
+          <NaturalToolbar.Button asChild>
+            <DropdownMenu.Trigger asChild>
+              <Button variant='ghost' classNames={buttonStyles}>
+                <span className='sr-only'>{t('mode label')}</span>
+                <ModeIcon className={iconStyles} />
+                <CaretDown />
+              </Button>
+            </DropdownMenu.Trigger>
+          </NaturalToolbar.Button>
+        </Tooltip.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content classNames='is-min md:is-min' onCloseAutoFocus={(e) => e.preventDefault()}>
+            <DropdownMenu.Viewport>
+              {EditorViewModes.map((value) => {
+                const Icon = ViewModeIcons[value];
+                return (
+                  <DropdownMenu.CheckboxItem
+                    key={value}
+                    checked={value === mode}
+                    onClick={() => onAction?.({ type: 'view-mode', data: value })}
+                  >
+                    <Icon className={iconStyles} />
+                    <span className='whitespace-nowrap grow'>{t(`${value} mode label`)}</span>
+                    <Check className={value === mode ? 'visible' : 'invisible'} />
+                  </DropdownMenu.CheckboxItem>
+                );
+              })}
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {t('view mode label')}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
 //
 // Heading
 //
@@ -420,6 +509,7 @@ export const Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
+  View: MarkdownView,
   Markdown: MarkdownStandard,
   Custom: MarkdownCustom,
   Actions: MarkdownActions,

package/src/components/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './TextEditor';
 export * from './Toolbar';

package/src/extensions/autocomplete.ts

@@ -19,13 +19,14 @@ import { keymap } from '@codemirror/view';
 export type AutocompleteResult = Completion;
 
 export type AutocompleteOptions = {
+  activateOnTyping?: boolean;
   onSearch: (text: string) => Completion[];
 };
 
 /**
  * Autocomplete extension.
  */
-export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
+export const autocomplete = ({ activateOnTyping, onSearch }: AutocompleteOptions) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -35,7 +36,7 @@ export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      activateOnTyping: false,
+      activateOnTyping,
 
       // closeOnBlur: false,
       // defaultKeymap: false,
@@ -44,7 +45,6 @@ export const autocomplete = ({ onSearch }: AutocompleteOptions) => {
       tooltipClass: () => 'shadow rounded',
     }),
 
-    // TODO(burdon): Option to create new page?
     // TODO(burdon): Optional decoration via addToOptions
     markdownLanguage.data.of({
       autocomplete: (context: CompletionContext): CompletionResult | null => {

package/src/extensions/automerge/automerge.stories.tsx

@@ -12,15 +12,15 @@ import { Repo } from '@dxos/automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
 import { create, type Expando } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
-import { Filter, DocAccessor, createDocAccessor, useSpace } from '@dxos/react-client/echo';
+import { Filter, DocAccessor, createDocAccessor, useSpace, useQuery, type Space } from '@dxos/react-client/echo';
+import { useIdentity, type Identity } from '@dxos/react-client/halo';
 import { ClientRepeater } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { automerge } from './automerge';
 import { useTextEditor } from '../../hooks';
 import translations from '../../translations';
-import { createBasicExtensions, createThemeExtensions } from '../factories';
+import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '../factories';
 
 const initialContent = 'Hello world!';
 
@@ -31,17 +31,26 @@ type TestObject = {
 type EditorProps = {
   source: DocAccessor;
   autoFocus?: boolean;
+  space?: Space;
+  identity?: Identity;
 };
 
-const Editor = ({ source, autoFocus }: EditorProps) => {
+const Editor = ({ source, autoFocus, space, identity }: EditorProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef } = useTextEditor(
     () => ({
-      doc: DocAccessor.getValue(source),
+      initialValue: DocAccessor.getValue(source),
       extensions: [
         createBasicExtensions({ placeholder: 'Type here...' }),
-        createThemeExtensions({ themeMode, slots: { editor: { className: 'w-full p-2 bg-white dark:bg-black' } } }),
-        automerge(source),
+        createThemeExtensions({
+          themeMode,
+          slots: {
+            editor: { className: 'w-full bg-white dark:bg-black' },
+            // TODO(burdon): Sufficient padding so indicator isn't clipped.
+            content: { className: '!m-8' },
+          },
+        }),
+        createDataExtensions({ id: 'test', text: source, space, identity }),
       ],
       autoFocus,
     }),
@@ -94,25 +103,23 @@ export default {
 };
 
 const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
+  const identity = useIdentity();
   const space = useSpace(spaceKey);
   const [source, setSource] = useState<DocAccessor>();
+  const objects = useQuery<Expando>(space, Filter.from({ type: 'test' }));
+
   useEffect(() => {
-    setTimeout(async () => {
-      if (space) {
-        const { objects = [] } = await space.db.query<Expando>(Filter.from({ type: 'test' })).run();
-        if (objects.length) {
-          const source = createDocAccessor(objects[0].content, ['content']);
-          setSource(source);
-        }
-      }
-    });
-  }, [space]);
+    if (!source && objects.length) {
+      const source = createDocAccessor(objects[0].content, ['content']);
+      setSource(source);
+    }
+  }, [objects, source]);
 
   if (!source) {
     return null;
   }
 
-  return <Editor source={source} />;
+  return <Editor source={source} space={space} identity={identity ?? undefined} />;
 };
 
 export const Default = {};