@dxos/react-ui-editor 0.4.6 → 0.4.7-main.06facb4

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

@@ -1,4 +1,4 @@
-import { type Extension, StateField } from '@codemirror/state';
+import { type Extension } from '@codemirror/state';
 import { type DocAccessor } from '@dxos/echo-schema';
 export type Range = {
     from: number;
@@ -8,19 +8,13 @@ export type Comment = {
     id: string;
     cursor?: string;
 };
+/**
+ * @deprecated
+ */
 export type EditorModel = {
     id: string;
     text: () => string;
-    extension?: Extension;
     content: string | DocAccessor;
-    peer?: {
-        id: string;
-        name?: string;
-    };
+    extension?: Extension;
 };
-/**
- * State field makes the model available to other extensions.
- * @deprecated
- */
-export declare const modelState: StateField<EditorModel | undefined>;
 //# sourceMappingURL=defs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/hooks/defs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAGF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IAGtB,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAG9B,IAAI,CAAC,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACH,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,UAAU,qCAGrB,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/hooks/defs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAGF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AAEH,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useEditorView.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useEditorView.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAEhE;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,aAAa,OAAQ,MAAM,KAAG,CAAC,iBAAiB,UAAU,GAAG,IAAI,CAAC,EAAE,OAAO,CAQvF,CAAC"}
+{"version":3,"file":"useEditorView.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useEditorView.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,KAAK,gBAAgB,EAAoB,MAAM,OAAO,CAAC;AAEhE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,aAAa,OAAQ,MAAM,KAAG,CAAC,iBAAiB,UAAU,GAAG,IAAI,CAAC,EAAE,OAAO,CAQvF,CAAC"}

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

@@ -16,16 +16,31 @@ export type UseTextEditor = {
  * Hook for creating editor.
  */
 export declare const useTextEditor: ({ autoFocus, scrollTo, debug, doc, selection, extensions }?: UseTextEditorOptions, deps?: DependencyList) => UseTextEditor;
-export type DataExtensionsOptions = {
+/**
+ * https://codemirror.net/docs/extensions
+ * https://github.com/codemirror/basic-setup
+ */
+export type BasicExtensionsOptions = {
+    allowMultipleSelections?: boolean;
+    bracketMatching?: boolean;
+    closeBrackets?: boolean;
+    crosshairCursor?: boolean;
+    dropCursor?: boolean;
+    drawSelection?: boolean;
+    editable?: boolean;
+    highlightActiveLine?: boolean;
+    history?: boolean;
+    lineNumbers?: boolean;
+    lineWrapping?: boolean;
+    placeholder?: string;
     readonly?: boolean;
+    scrollPastEnd?: boolean;
+    tabSize?: number;
 };
-export declare const createDataExtensions: ({ readonly }?: {
-    readonly?: boolean | undefined;
-}) => Extension;
+export declare const createBasicExtensions: (_props?: BasicExtensionsOptions) => Extension;
 export type ThemeExtensionsOptions = {
     theme?: ThemeStyles;
     themeMode?: ThemeMode;
-    lineWrap?: boolean;
     slots?: {
         editor?: {
             className?: string;

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,4 @@
 import '@dxosTheme';
-import React from 'react';
 type StoryProps = {
     autoFocus?: boolean;
     placeholder?: string;
@@ -8,7 +7,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 +40,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;AAGxD,OAAO,EAAE,KAAK,WAAW,EAAc,MAAM,QAAQ,CAAC;AAEtD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAGhE,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,EAmBlG,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/styles/index.d.ts

@@ -1,4 +1,3 @@
-export * from './cursors';
 export * from './markdown';
 export * from './tokens';
 export * from './layout';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,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,WAgP1B,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.6",
+  "version": "0.4.7-main.06facb4",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,7 +23,7 @@
     "@codemirror/search": "^6.5.5",
     "@codemirror/state": "^6.4.0",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@codemirror/view": "^6.23.0",
+    "@codemirror/view": "^6.25.0",
     "@fluentui/react-tabster": "^9.19.0",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
@@ -37,20 +37,20 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/automerge": "0.4.6",
-    "@dxos/async": "0.4.6",
-    "@dxos/debug": "0.4.6",
-    "@dxos/context": "0.4.6",
-    "@dxos/echo-schema": "0.4.6",
-    "@dxos/invariant": "0.4.6",
-    "@dxos/log": "0.4.6",
-    "@dxos/protocols": "0.4.6",
-    "@dxos/react-async": "0.4.6",
-    "@dxos/display-name": "0.4.6",
-    "@dxos/react-ui-theme": "0.4.6",
-    "@dxos/text-model": "0.4.6",
-    "@dxos/react-ui": "0.4.6",
-    "@dxos/util": "0.4.6"
+    "@dxos/async": "0.4.7-main.06facb4",
+    "@dxos/context": "0.4.7-main.06facb4",
+    "@dxos/automerge": "0.4.7-main.06facb4",
+    "@dxos/debug": "0.4.7-main.06facb4",
+    "@dxos/display-name": "0.4.7-main.06facb4",
+    "@dxos/echo-schema": "0.4.7-main.06facb4",
+    "@dxos/invariant": "0.4.7-main.06facb4",
+    "@dxos/log": "0.4.7-main.06facb4",
+    "@dxos/protocols": "0.4.7-main.06facb4",
+    "@dxos/react-async": "0.4.7-main.06facb4",
+    "@dxos/react-ui-theme": "0.4.7-main.06facb4",
+    "@dxos/text-model": "0.4.7-main.06facb4",
+    "@dxos/util": "0.4.7-main.06facb4",
+    "@dxos/react-ui": "0.4.7-main.06facb4"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
@@ -78,14 +78,14 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.2.2",
-    "@dxos/config": "0.4.6",
-    "@dxos/echo-signals": "0.4.6",
-    "@dxos/keyboard": "0.4.6",
-    "@dxos/echo-typegen": "0.4.6",
-    "@dxos/react-client": "0.4.6",
-    "@dxos/random": "0.4.6",
-    "@dxos/react-ui": "0.4.6",
-    "@dxos/storybook-utils": "0.4.6"
+    "@dxos/echo-typegen": "0.4.7-main.06facb4",
+    "@dxos/keyboard": "0.4.7-main.06facb4",
+    "@dxos/react-client": "0.4.7-main.06facb4",
+    "@dxos/config": "0.4.7-main.06facb4",
+    "@dxos/storybook-utils": "0.4.7-main.06facb4",
+    "@dxos/random": "0.4.7-main.06facb4",
+    "@dxos/react-ui": "0.4.7-main.06facb4",
+    "@dxos/echo-signals": "0.4.7-main.06facb4"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
@@ -93,7 +93,7 @@
     "@vitest/ui": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.6"
+    "@dxos/react-client": "0.4.7-main.06facb4"
   },
   "publishConfig": {
     "access": "public"

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

@@ -3,36 +3,43 @@
 //
 
 import '@dxosTheme';
+
 import { type EditorView } from '@codemirror/view';
-import { ArrowSquareOut } from '@phosphor-icons/react';
+import { ArrowSquareOut, X } from '@phosphor-icons/react';
 import defaultsDeep from 'lodash.defaultsdeep';
-import React, { type FC, StrictMode, useRef, useState } from 'react';
+import React, { type FC, type KeyboardEvent, StrictMode, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import { TextObject } from '@dxos/echo-schema';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { faker } from '@dxos/random';
-import { getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
+import { Button, DensityProvider, Input, ThemeProvider } from '@dxos/react-ui';
+import { baseSurface, defaultTx, getSize, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { MarkdownEditor, type TextEditorProps } from './TextEditor';
 import {
-  type CommentsOptions,
+  annotations,
   autocomplete,
   blast,
-  decorateMarkdown,
+  command,
   comments,
+  decorateMarkdown,
   defaultOptions,
+  dnd,
+  formatting,
   image,
   linkTooltip,
   mention,
   table,
   typewriter,
   useComments,
-  formatting,
-  annotations,
   EditorModes,
+  type CommandAction,
+  type CommandOptions,
+  type CommentsOptions,
+  listener,
 } from '../../extensions';
 import { type Comment, useTextModel } from '../../hooks';
 import translations from '../../translations';
@@ -238,7 +245,7 @@ const Story = ({ id = 'test', text, comments, placeholder = 'New document.', ...
       placeholder={placeholder}
       slots={{
         root: { className: mx(textBlockWidth, 'min-bs-dvh') },
-        editor: { className: 'min-bs-dvh p-2 bg-white dark:bg-black' },
+        editor: { className: 'min-bs-dvh px-8 bg-white dark:bg-black' },
       }}
       {...props}
     />
@@ -353,6 +360,64 @@ export const Mention = {
   ),
 };
 
+const CommandDialog: FC<{ onClose: (action?: CommandAction) => void }> = ({ onClose }) => {
+  const [text, setText] = useState('');
+  const handleInsert = () => {
+    onClose(text.length ? { insert: text + '\n' } : undefined);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    switch (event.key) {
+      case 'Enter': {
+        handleInsert();
+        break;
+      }
+      case 'Escape': {
+        onClose();
+        break;
+      }
+    }
+  };
+
+  return (
+    <DensityProvider density='fine'>
+      <div className={mx('flex items-center p-2 gap-2 border rounded-md', baseSurface)}>
+        <Input.Root>
+          <Input.TextInput
+            autoFocus={true}
+            placeholder='Enter command.'
+            value={text}
+            onChange={({ target: { value } }) => setText(value)}
+            onKeyDown={handleKeyDown}
+          />
+        </Input.Root>
+        <Button variant='ghost' classNames='pli-0' onClick={() => onClose()}>
+          <X className={getSize(5)} />
+        </Button>
+      </div>
+    </DensityProvider>
+  );
+};
+
+const renderCommandDialog: CommandOptions['onRender'] = (el, onClose) => {
+  createRoot(el).render(
+    <StrictMode>
+      <ThemeProvider tx={defaultTx}>
+        <CommandDialog onClose={onClose} />
+      </ThemeProvider>
+    </StrictMode>,
+  );
+};
+
+export const Command = {
+  render: () => (
+    <Story
+      text={str('# Command', '')}
+      extensions={[command({ onRender: renderCommandDialog, onHint: () => 'Press / for commands.' })]}
+    />
+  ),
+};
+
 export const Comments = {
   render: () => {
     const [_comments, setComments] = useState<Comment[]>([]);
@@ -402,8 +467,30 @@ export const Annotations = {
   render: () => <Story text={str('# Annotations', '', large)} extensions={[annotations({ match: /volup/gi })]} />,
 };
 
+export const DND = {
+  render: () => <Story text={str('# DND', '')} extensions={[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}
@@ -220,15 +221,20 @@ 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],
     );
 
@@ -245,6 +251,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
   },
 );
 
+// TODO(burdon): Replace with hooks.
 export const MarkdownEditor = forwardRef<EditorView | null, TextEditorProps>(
   ({ readonly, placeholder, theme = markdownTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();

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}
       />
     );
   },