@dxos/react-ui-editor 0.4.7-main.85d9ee7 → 0.4.7-main.aa6dc1f

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":"AAIA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAGzF,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,iBAAiB,CAAC;AAGtB,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,aAAa,gEACoC,oBAAoB,SACzE,cAAc,KACpB,aAuEF,CAAC;AAIF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAGF,eAAO,MAAM,oBAAoB;;MAAgC,SAMhE,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE;YACP,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;KACH,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,qBAAqB,iCAAiC,sBAAsB,KAAQ,SAShG,CAAC"}
+{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAOA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAIL,UAAU,EAKX,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAGzF,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,iBAAiB,CAAC;AAGtB,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,aAAa,gEACoC,oBAAoB,4BAE/E,aAuEF,CAAC;AAIF;;;GAGG;AAEH,MAAM,MAAM,sBAAsB,GAAG;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAWF,eAAO,MAAM,qBAAqB,YAAa,sBAAsB,KAAG,SAuBvE,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE;YACP,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;KACH,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,qBAAqB,iCAAiC,sBAAsB,KAAQ,SAQhG,CAAC"}

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

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import '@dxosTheme';
-import React from 'react';
 type StoryProps = {
     autoFocus?: boolean;
     placeholder?: string;
@@ -8,7 +8,6 @@ type StoryProps = {
 };
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./TextEditor").TextEditorProps & React.RefAttributes<import("@codemirror/view").EditorView | null>>;
     decorators: import("@storybook/react").Decorator[];
     render: (args: StoryProps) => JSX.Element;
     parameters: {
@@ -42,4 +41,4 @@ export declare const Default: {
         doc: string;
     };
 };
-//# sourceMappingURL=hooks.stories.d.ts.map
+//# sourceMappingURL=useTextEditor.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AA8BpB,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;;;;mBAiFe,UAAU;;;;;;;;;;;;;;;;;;;;;;;;AAJ3B,wBAUE;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC"}

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;AAEnD,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAqB,MAAM,OAAO,CAAC;AAK9E,OAAO,EAAqB,KAAK,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAKxD,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,QAAQ,CAAC;AAEtD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,CAAC;AAGF,eAAO,MAAM,iBAAiB,kCAAmC,sBAAsB,KAAG,SAAS,EAsBlG,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,WAAW,GAAG,SACb,CAAC;AAE1D;;;GAGG;AACH,eAAO,MAAM,oBAAoB;QAI3B,MAAM;;;gBAEoB,SAAS,eAAe,MAAM,CAAC,CAAC;CAG/D,CAAC"}
+{"version":3,"file":"useTextModel.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAqB,MAAM,OAAO,CAAC;AAK9E,OAAO,EAAqB,KAAK,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAKxD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB,CAAC;AAGF,eAAO,MAAM,iBAAiB,kCAAmC,sBAAsB,KAAG,SAAS,EAsBlG,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,WAAW,GAAG,SACb,CAAC;AAE1D;;;GAGG;AAEH,eAAO,MAAM,oBAAoB;QAI3B,MAAM;;;gBAEoB,SAAS,eAAe,MAAM,CAAC,CAAC;CAG/D,CAAC"}

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

@@ -1,6 +1,7 @@
 import translations from './translations';
 export { type Extension, type EditorState } from '@codemirror/state';
 export { type EditorView, keymap } from '@codemirror/view';
+export { tags } from '@lezer/highlight';
 export { TextKind } from '@dxos/protocols/proto/dxos/echo/model/text';
 export { Doc, YText, YXmlFragment } from '@dxos/text-model';
 export * from './components';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE3D,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,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAC3G,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,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,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAC3G,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,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,WA+O1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAO3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAwP1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,WAO3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAOvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.7-main.85d9ee7",
+  "version": "0.4.7-main.aa6dc1f",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -19,7 +19,7 @@
     "@codemirror/lang-markdown": "^6.2.4",
     "@codemirror/language": "^6.10.1",
     "@codemirror/language-data": "^6.3.1",
-    "@codemirror/lint": "^6.4.2",
+    "@codemirror/lint": "^6.5.0",
     "@codemirror/search": "^6.5.5",
     "@codemirror/state": "^6.4.0",
     "@codemirror/theme-one-dark": "^6.1.2",
@@ -37,20 +37,20 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.4.7-main.85d9ee7",
-    "@dxos/automerge": "0.4.7-main.85d9ee7",
-    "@dxos/debug": "0.4.7-main.85d9ee7",
-    "@dxos/context": "0.4.7-main.85d9ee7",
-    "@dxos/display-name": "0.4.7-main.85d9ee7",
-    "@dxos/echo-schema": "0.4.7-main.85d9ee7",
-    "@dxos/invariant": "0.4.7-main.85d9ee7",
-    "@dxos/log": "0.4.7-main.85d9ee7",
-    "@dxos/protocols": "0.4.7-main.85d9ee7",
-    "@dxos/react-async": "0.4.7-main.85d9ee7",
-    "@dxos/react-ui": "0.4.7-main.85d9ee7",
-    "@dxos/react-ui-theme": "0.4.7-main.85d9ee7",
-    "@dxos/text-model": "0.4.7-main.85d9ee7",
-    "@dxos/util": "0.4.7-main.85d9ee7"
+    "@dxos/context": "0.4.7-main.aa6dc1f",
+    "@dxos/async": "0.4.7-main.aa6dc1f",
+    "@dxos/automerge": "0.4.7-main.aa6dc1f",
+    "@dxos/display-name": "0.4.7-main.aa6dc1f",
+    "@dxos/debug": "0.4.7-main.aa6dc1f",
+    "@dxos/echo-schema": "0.4.7-main.aa6dc1f",
+    "@dxos/invariant": "0.4.7-main.aa6dc1f",
+    "@dxos/protocols": "0.4.7-main.aa6dc1f",
+    "@dxos/log": "0.4.7-main.aa6dc1f",
+    "@dxos/react-async": "0.4.7-main.aa6dc1f",
+    "@dxos/react-ui": "0.4.7-main.aa6dc1f",
+    "@dxos/react-ui-theme": "0.4.7-main.aa6dc1f",
+    "@dxos/util": "0.4.7-main.aa6dc1f",
+    "@dxos/text-model": "0.4.7-main.aa6dc1f"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
@@ -66,34 +66,34 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/react-test-renderer": "^17.0.2",
-    "@vitest/browser": "^1.2.2",
-    "@vitest/ui": "^1.2.2",
+    "@vitest/browser": "^1.3.1",
+    "@vitest/ui": "^1.3.1",
     "deepsignal": "^1.5.0",
     "happy-dom": "^13.3.1",
     "jsdom": "^20.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "vite": "^5.1.3",
+    "vite": "^5.1.5",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "vitest": "^1.2.2",
-    "@dxos/echo-typegen": "0.4.7-main.85d9ee7",
-    "@dxos/echo-signals": "0.4.7-main.85d9ee7",
-    "@dxos/config": "0.4.7-main.85d9ee7",
-    "@dxos/keyboard": "0.4.7-main.85d9ee7",
-    "@dxos/random": "0.4.7-main.85d9ee7",
-    "@dxos/react-client": "0.4.7-main.85d9ee7",
-    "@dxos/react-ui": "0.4.7-main.85d9ee7",
-    "@dxos/storybook-utils": "0.4.7-main.85d9ee7"
+    "vitest": "^1.3.1",
+    "@dxos/config": "0.4.7-main.aa6dc1f",
+    "@dxos/echo-signals": "0.4.7-main.aa6dc1f",
+    "@dxos/echo-typegen": "0.4.7-main.aa6dc1f",
+    "@dxos/keyboard": "0.4.7-main.aa6dc1f",
+    "@dxos/random": "0.4.7-main.aa6dc1f",
+    "@dxos/react-client": "0.4.7-main.aa6dc1f",
+    "@dxos/storybook-utils": "0.4.7-main.aa6dc1f",
+    "@dxos/react-ui": "0.4.7-main.aa6dc1f"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
-    "@vitest/browser": "^1.2.2",
-    "@vitest/ui": "^1.2.2",
+    "@vitest/browser": "^1.3.1",
+    "@vitest/ui": "^1.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.7-main.85d9ee7"
+    "@dxos/react-client": "0.4.7-main.aa6dc1f"
   },
   "publishConfig": {
     "access": "public"

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

@@ -20,25 +20,26 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type TextEditorProps } from './TextEditor';
 import {
-  type CommentsOptions,
+  annotations,
   autocomplete,
   blast,
-  decorateMarkdown,
+  command,
   comments,
+  decorateMarkdown,
   defaultOptions,
   dnd,
-  command,
+  formatting,
   image,
   linkTooltip,
   mention,
   table,
   typewriter,
   useComments,
-  formatting,
-  annotations,
   EditorModes,
-  type CommandOptions,
   type CommandAction,
+  type CommandOptions,
+  type CommentsOptions,
+  listener,
 } from '../../extensions';
 import { type Comment, useTextModel } from '../../hooks';
 import translations from '../../translations';
@@ -472,6 +473,24 @@ export const DND = {
 
 const typewriterItems = localStorage.getItem('dxos.org/plugin/markdown/typewriter')?.split(',');
 
+export const Listener = {
+  render: () => (
+    <Story
+      text={str('# Listener', '', text.footer)}
+      extensions={[
+        listener({
+          onFocus: (focusing) => {
+            console.log({ focusing });
+          },
+          onChange: (text) => {
+            console.log({ text });
+          },
+        }),
+      ]}
+    />
+  ),
+};
+
 export const Typewriter = {
   render: () => (
     <Story

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

@@ -11,7 +11,6 @@ import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor, type TextEditorProps } from './TextEditor';
-import { listener } from '../../extensions';
 import { useTextModel } from '../../hooks';
 import translations from '../../translations';
 
@@ -57,19 +56,5 @@ export default {
 };
 
 export const Default = {
-  render: () => <Story placeholder='Enter text...' />,
-};
-
-export const Text = {
   render: () => <Story text={initialText} placeholder='Enter text...' />,
 };
-
-export const Automerge = {
-  render: () => <Story text={initialText} placeholder='Enter text...' automerge />,
-};
-
-export const Listener = {
-  render: () => (
-    <Story placeholder='Enter text...' extensions={[listener({ onChange: (text) => console.log(text) })]} />
-  ),
-};

package/src/components/TextEditor/TextEditor.tsx

@@ -18,13 +18,14 @@ import React, {
   useMemo,
 } from 'react';
 
+import { DocAccessor } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { useThemeContext } from '@dxos/react-ui';
 import { focusRing } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
-import { createBasicBundle, createMarkdownExtensions, editorMode } from '../../extensions';
-import { type EditorModel } from '../../hooks';
+import { createMarkdownExtensions, editorMode } from '../../extensions';
+import { createBasicExtensions, createThemeExtensions, type EditorModel } from '../../hooks';
 import { type ThemeStyles } from '../../styles';
 import { defaultTheme, markdownTheme, textTheme } from '../../themes';
 import { logChanges } from '../../util';
@@ -114,7 +115,7 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       //
       const state = EditorState.create({
-        doc: model.text(),
+        doc: typeof model.content === 'string' ? model.content : DocAccessor.getValue(model.content),
         selection,
         extensions: [
           // TODO(burdon): Doesn't catch errors in keymap functions.
@@ -210,7 +211,7 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
       <div
         role='none'
         ref={rootRef}
-        key={model.id}
+        key={model.id} // TODO(burdon): Remove?
         tabIndex={0}
         onKeyUp={handleKeyUp}
         {...slots.root}
@@ -223,13 +224,17 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
 // TODO(burdon): Replace with hooks.
 export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
   (
-    { readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions: _extensions, ...props },
+    { readonly, placeholder, lineWrapping = true, theme = textTheme, slots, extensions: _extensions, ...props },
     forwardedRef,
   ) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
     const extensions = useMemo(
-      () => [createBasicBundle({ themeMode, placeholder, lineWrapping }), ...(_extensions ?? [])],
+      () => [
+        createBasicExtensions({ lineWrapping, placeholder }),
+        createThemeExtensions({ themeMode }),
+        ...(_extensions ?? []),
+      ],
       [themeMode, placeholder, lineWrapping, _extensions],
     );
 

package/src/components/TextEditor/index.ts

@@ -2,7 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export { tags } from '@lezer/highlight';
-export { type Extension } from '@codemirror/state';
-
 export * from './TextEditor';

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

@@ -61,12 +61,13 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
   }
 
   return (
-    <div role='none' className={mx('fixed inset-0 flex flex-col')}>
+    <div role='none' className='fixed inset-0 flex flex-col'>
       <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
         <Toolbar.Markdown />
         <Toolbar.Separator />
         <Toolbar.Extended />
       </Toolbar.Root>
+
       <MarkdownEditor
         ref={editorRef}
         model={model}

package/src/{components/TextEditor → extensions/automerge}/automerge.stories.tsx

@@ -6,22 +6,19 @@ import '@dxosTheme';
 
 import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-network-broadcastchannel';
 import '@preact/signals-react';
-import { EditorView } from '@codemirror/view'; // Register react integration.
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Repo } from '@dxos/automerge/automerge-repo';
-import { Filter } from '@dxos/echo-schema';
+import { createDocAccessor, Filter } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
 import { Expando, TextObject, useSpace } from '@dxos/react-client/echo';
-import { useIdentity } 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 { MarkdownEditor } from './TextEditor';
-import { automerge, awareness, createBasicBundle } from '../../extensions';
-import { DocAccessor } from '../../extensions/automerge/defs';
-import { useTextEditor, useTextModel } from '../../hooks';
-import { defaultTheme } from '../../themes';
+import { automerge } from './automerge';
+import { DocAccessor } from './defs';
+import { createBasicExtensions, createThemeExtensions, useTextEditor } from '../../hooks';
 import translations from '../../translations';
 
 const initialContent = 'Hello world!';
@@ -32,24 +29,24 @@ type TestObject = {
 
 type EditorProps = {
   source: DocAccessor;
+  autoFocus?: boolean;
 };
 
-const Editor = ({ source }: EditorProps) => {
+const Editor = ({ source, autoFocus }: EditorProps) => {
+  const { themeMode } = useThemeContext();
   const extensions = useMemo(
     () => [
-      EditorView.baseTheme(defaultTheme),
-      EditorView.editorAttributes.of({ class: 'p-2 bg-white' }),
-      createBasicBundle({ placeholder: 'Type here...' }),
+      createBasicExtensions({ placeholder: 'Type here...' }),
+      createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2 bg-white dark:bg-black' } } }),
       automerge(source),
-      awareness(),
     ],
-    [source],
+    [themeMode, source],
   );
 
   const { parentRef } = useTextEditor({
-    autoFocus: true,
     doc: DocAccessor.getValue(source),
     extensions,
+    autoFocus,
   });
 
   return <div ref={parentRef} />;
@@ -61,12 +58,8 @@ const Story = () => {
 
   useEffect(() => {
     queueMicrotask(async () => {
-      const repo1 = new Repo({
-        network: [new BroadcastChannelNetworkAdapter()],
-      });
-      const repo2 = new Repo({
-        network: [new BroadcastChannelNetworkAdapter()],
-      });
+      const repo1 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
+      const repo2 = new Repo({ network: [new BroadcastChannelNetworkAdapter()] });
 
       const object1 = repo1.create();
       object1.change((doc: TestObject) => {
@@ -86,8 +79,8 @@ const Story = () => {
   }
 
   return (
-    <div role='none' className='grid grid-cols-2 bs-full is-full gap-2'>
-      <Editor source={object1} />
+    <div role='none' className='grid grid-cols-2 bs-full is-full divide-x divide-neutral-500'>
+      <Editor source={object1} autoFocus />
       <Editor source={object2} />
     </div>
   );
@@ -96,36 +89,39 @@ const Story = () => {
 export default {
   title: 'react-ui-editor/Automerge',
   component: Editor,
+  decorators: [withTheme],
   render: () => <Story />,
   parameters: { translations, layout: 'fullscreen' },
 };
 
-export const Default = {};
-
 const EchoStory = ({ spaceKey }: { spaceKey: PublicKey }) => {
-  const identity = useIdentity();
+  // TODO(burdon): Test identity.
+  // const identity = useIdentity();
   const space = useSpace(spaceKey);
-  // TODO(dmaretskyi): useQuery doesn't work.
-  const [obj] = space?.db.query(Filter.from({ type: 'test' })).objects ?? [];
-  const model = useTextModel({
-    identity,
-    space,
-    text: obj?.content,
-  });
-
-  if (!model) {
+  const source = useMemo<DocAccessor | undefined>(() => {
+    const { objects = [] } = space?.db.query(Filter.from({ type: 'test' })) ?? {};
+    if (objects.length) {
+      return createDocAccessor(objects[0].content);
+    }
+  }, [space]);
+
+  if (!source) {
     return null;
   }
 
-  return <MarkdownEditor model={model} />;
+  return <Editor source={source} />;
 };
 
+export const Default = {};
+
+// TODO(burdon): Feed already added error.
 export const WithEcho = {
   decorators: [withTheme],
   render: () => {
     return (
       <ClientRepeater
         count={2}
+        component={EchoStory}
         createSpace
         onCreateSpace={async (space) => {
           space.db.add(
@@ -135,7 +131,6 @@ export const WithEcho = {
             }),
           );
         }}
-        component={EchoStory}
       />
     );
   },

package/src/extensions/command/command.ts

@@ -6,15 +6,13 @@ import { type Extension } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 
 import { hintViewPlugin } from './hint';
-import { closeEffect, commandConfig, commandKeymap, commandState } from './state';
+import { closeEffect, commandConfig, commandKeyBindings, commandState } from './state';
 
-// TODO(burdon): Create knowledge base for notes.
+// TODO(burdon): Create knowledge base for CM notes and ideas.
 // https://discuss.codemirror.net/t/inline-code-hints-like-vscode/5533/4
 // https://github.com/saminzadeh/codemirror-extension-inline-suggestion
 // https://github.com/ChromeDevTools/devtools-frontend/blob/main/front_end/ui/components/text_editor/config.ts#L370
 
-// TODO(burdon): Insert text at cursor.
-
 export type CommandAction = {
   insert?: string;
 };
@@ -26,13 +24,12 @@ export type CommandOptions = {
 
 export const command = (options: CommandOptions): Extension => {
   return [
+    commandConfig.of(options),
     commandState,
-    keymap.of(commandKeymap),
+    keymap.of(commandKeyBindings),
     hintViewPlugin(options),
-    // Close tooltip on focus change.
     EditorView.focusChangeEffect.of((_, focusing) => {
       return focusing ? closeEffect.of(null) : null;
     }),
-    commandConfig.of(options),
   ];
 };

package/src/extensions/command/hint.ts

@@ -57,6 +57,7 @@ export const hintViewPlugin = ({ onHint }: CommandOptions) =>
           const selection = update.view.state.selection.main;
           const line = update.view.state.doc.lineAt(selection.from);
           // Only show if blank line.
+          // TODO(burdon): Clashes with placeholder if pos === 0.
           // TODO(burdon): Show after delay or if blank line above?
           if (selection.from === selection.to && line.from === line.to) {
             const hint = onHint();

package/src/extensions/command/state.ts

@@ -59,7 +59,7 @@ export const commandState = StateField.define<CommandState>({
                       selection: { anchor: pos + action.insert.length },
                     });
                   }
-                  // TODO(burdon): Truncates text if focus immediately.
+                  // TODO(burdon): Truncates text if set focus immediately.
                   setTimeout(() => view.focus());
                 });
               },
@@ -100,7 +100,7 @@ export const closeCommand: Command = (view: EditorView) => {
   return false;
 };
 
-export const commandKeymap: readonly KeyBinding[] = [
+export const commandKeyBindings: readonly KeyBinding[] = [
   { key: '/', run: openCommand },
   { key: 'Escape', run: closeCommand },
 ];

package/src/extensions/cursor-line-margin.ts

@@ -18,7 +18,8 @@ export const cursorLineMarginFacet = Facet.define<number, number>({
 
 const annotation = 'cursorLineMargin';
 const lineAtPos = (s: EditorState, pos: number) => s.doc.lineAt(pos).number;
-// seems to the best approximation of CM5's `cursorScrollMargin`
+
+// Seems to the best approximation of CM5's `cursorScrollMargin`
 // https://discuss.codemirror.net/t/cursorscrollmargin-for-v6/7448
 export const cursorLineMargin: Extension = EditorView.updateListener.of(
   ({ transactions, state, selectionSet, startState, view }) => {

package/src/extensions/index.ts

@@ -6,7 +6,6 @@ export * from './annotations';
 export * from './autocomplete';
 export * from './automerge';
 export * from './awareness';
-export * from './basic';
 export * from './blast';
 export * from './command';
 export * from './comments';

package/src/extensions/listener.ts

@@ -6,7 +6,7 @@ import { type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 
 export type ListenerOptions = {
-  onFocus?: (focused: boolean) => void;
+  onFocus?: (focusing: boolean) => void;
   onChange?: (text: string) => void;
 };
 
@@ -18,8 +18,8 @@ export const listener = ({ onFocus, onChange }: ListenerOptions): Extension => {
 
   onFocus &&
     extensions.push(
-      EditorView.focusChangeEffect.of((_, focused) => {
-        onFocus(focused);
+      EditorView.focusChangeEffect.of((_, focusing) => {
+        onFocus(focusing);
         return null;
       }),
     );

package/src/extensions/markdown/bundle.ts

@@ -10,17 +10,9 @@ import { languages } from '@codemirror/language-data';
 import { searchKeymap } from '@codemirror/search';
 import { EditorState, type Extension } from '@codemirror/state';
 import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import {
-  crosshairCursor,
-  drawSelection,
-  dropCursor,
-  EditorView,
-  highlightActiveLine,
-  keymap,
-  placeholder,
-} from '@codemirror/view';
+import { EditorView, drawSelection, dropCursor, keymap, placeholder } from '@codemirror/view';
 
-import type { ThemeMode } from '@dxos/react-ui';
+import { type ThemeMode } from '@dxos/react-ui';
 import { isNotFalsy } from '@dxos/util';
 
 import { markdownHighlightStyle, markdownTagsExtensions } from './highlight';
@@ -28,7 +20,7 @@ import { type TextEditorProps } from '../../components';
 
 export type MarkdownBundleOptions = {
   themeMode?: ThemeMode;
-} & Pick<TextEditorProps, 'placeholder' | 'lineWrapping'>;
+} & Pick<TextEditorProps, 'lineWrapping' | 'placeholder'>;
 
 /**
  * Markdown bundle.
@@ -42,17 +34,15 @@ export const createMarkdownExtensions = ({
   lineWrapping = true,
 }: MarkdownBundleOptions = {}): Extension[] => {
   return [
+    // TODO(burdon): Reconcile with createBasicExtensions.
     lineWrapping && EditorView.lineWrapping,
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
 
-    // https://github.com/codemirror/basic-setup
     bracketMatching(),
     closeBrackets(),
-    crosshairCursor(),
     dropCursor(),
     drawSelection(),
-    highlightActiveLine(),
     history(),
     indentOnInput(),
     _placeholder && placeholder(_placeholder),