@dxos/react-ui-editor 0.3.10-main.3645708 → 0.3.10-main.375af01

package/dist/lib/browser/index.mjs

@@ -1,6 +1,6 @@
 // packages/ui/react-ui-editor/src/index.ts
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
-import { Doc, YText as YText2, YXmlFragment } from "@dxos/text-model";
+import { Doc, YText, YXmlFragment } from "@dxos/text-model";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/index.ts
 import { tags as tags2 } from "@lezer/highlight";
@@ -692,7 +692,6 @@ import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep from "lodash.defaultsdeep";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
-import { yCollab } from "y-codemirror.next";
 import { generateName } from "@dxos/display-name";
 import { useThemeContext } from "@dxos/react-ui";
 import { getColorForValue, inputSurface, mx as mx2 } from "@dxos/react-ui-theme";
@@ -705,10 +704,10 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const { provider, peer } = model;
+  const { awareness, peer } = model;
   useEffect(() => {
-    if (provider && peer) {
-      provider.awareness.setLocalStateField("user", {
+    if (awareness && peer) {
+      awareness.setLocalStateField("user", {
         name: peer.name ?? generateName(peer.id),
         color: getColorForValue({
           value: peer.id,
@@ -722,7 +721,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots
       });
     }
   }, [
-    provider,
+    awareness,
     peer,
     themeMode
   ]);
@@ -753,7 +752,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots
         // TODO(burdon): themeMode doesn't change in storybooks.
         EditorView5.darkTheme.of(themeMode === "dark"),
         // Storage and replication.
-        yCollab(model.content, model.provider?.awareness),
+        model.extension,
         // Custom.
         ...extensions
       ].filter(Boolean)
@@ -771,7 +770,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots
     };
   }, [
     root,
-    model.content,
+    model,
     themeMode,
     editorMode
   ]);
@@ -844,23 +843,22 @@ var defaultTextSlots = {
   }
 };
 
-// packages/ui/react-ui-editor/src/hooks/useCollaboration.ts
+// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+import get3 from "lodash.get";
 import { useEffect as useEffect2, useState as useState2 } from "react";
-import { yCollab as yCollab2 } from "y-codemirror.next";
-import { generateName as generateName2 } from "@dxos/display-name";
-import { isDocAccessor } from "@dxos/echo-schema";
-import { getColorForValue as getColorForValue2 } from "@dxos/react-ui-theme";
-import { YText } from "@dxos/text-model";
+import { yCollab } from "y-codemirror.next";
+import { invariant } from "@dxos/invariant";
+import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/plugin.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
 import { Annotation, Facet, StateEffect, StateField as StateField4 } from "@codemirror/state";
 import { ViewPlugin } from "@codemirror/view";
 import * as automerge2 from "@dxos/automerge/automerge";
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/PatchSemaphore.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
 import { next as automerge } from "@dxos/automerge/automerge";
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/amToCodemirror.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/amToCodemirror.ts
 import { ChangeSet } from "@codemirror/state";
 var amToCodemirror_default = (view, selection, target, patches) => {
   for (const patch of patches) {
@@ -967,7 +965,7 @@ var charPath = (textPath, candidatePath) => {
   return null;
 };
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/codeMirrorToAm.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/codeMirrorToAm.ts
 import { next as am } from "@dxos/automerge/automerge";
 var codeMirrorToAm_default = (field, handle, transactions, state) => {
   const { lastHeads, path } = state.field(field);
@@ -990,7 +988,7 @@ var codeMirrorToAm_default = (field, handle, transactions, state) => {
   return newHeads ?? void 0;
 };
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/PatchSemaphore.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
 var PatchSemaphore = class {
   constructor(field) {
     this._inReconcile = false;
@@ -1031,7 +1029,7 @@ var PatchSemaphore = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/plugin.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
 var effectType = StateEffect.define({});
 var updateHeads = (newHeads) => effectType.of({
   newHeads
@@ -1102,45 +1100,6 @@ var automergePlugin = (handle, path) => {
 var reconcileAnnotationType = Annotation.define();
 var isReconcileTx = (tr) => !!tr.annotation(reconcileAnnotationType);
 
-// packages/ui/react-ui-editor/src/hooks/useCollaboration.ts
-var useCollaboration = (model, themeMode) => {
-  const { content, provider, peer } = model;
-  const [extension] = useState2(() => {
-    if (content instanceof YText) {
-      return yCollab2(content, provider?.awareness);
-    } else if (isDocAccessor(content)) {
-      return automergePlugin(content.handle, content.path);
-    } else {
-      return void 0;
-    }
-  });
-  useEffect2(() => {
-    if (provider && peer) {
-      provider.awareness.setLocalStateField("user", {
-        name: peer.name ?? generateName2(peer.id),
-        color: getColorForValue2({
-          value: peer.id,
-          type: "color"
-        }),
-        colorLight: getColorForValue2({
-          value: peer.id,
-          themeMode,
-          type: "highlight"
-        })
-      });
-    }
-  }, [
-    provider,
-    peer,
-    themeMode
-  ]);
-  return extension;
-};
-
-// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import { useMemo } from "react";
-import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
-
 // packages/ui/react-ui-editor/src/hooks/yjs/cursors.ts
 import * as random from "lib0/random";
 var cursorColors = [
@@ -1280,57 +1239,74 @@ var SpaceAwarenessProvider = class extends Observable {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
 var useTextModel = ({ identity, space, text }) => {
-  const provider = useMemo(() => {
-    if (isActualAutomergeObject(text)) {
-      return void 0;
-    }
-    if (!space || !text?.doc) {
-      return void 0;
-    }
-    return new SpaceAwarenessProvider({
+  const [model, setModel] = useState2(() => createModel({
+    identity,
+    space,
+    text
+  }));
+  useEffect2(() => {
+    setModel(createModel({
+      identity,
       space,
-      doc: text.doc,
-      channel: `yjs.awareness.${text.id}`
-    });
+      text
+    }));
   }, [
     identity,
     space,
-    text,
-    text?.doc
-  ]);
-  const content = useMemo(() => {
-    if (isActualAutomergeObject(text)) {
-      const obj = text;
-      return getRawDoc(obj, [
-        obj.field
-      ]);
-    } else {
-      return text?.content;
-    }
-  }, [
     text
   ]);
-  if (!text?.doc || !text?.content) {
-    return void 0;
-  }
+  return model;
+};
+var createModel = (options) => {
+  const { space, text } = options;
   if (isActualAutomergeObject(text)) {
-    const obj = text;
-    return {
-      id: obj.id,
-      content,
-      text: () => content.toString(),
-      provider: void 0,
-      peer: identity ? {
-        id: identity.identityKey.toHex(),
-        name: identity.profile?.displayName
-      } : void 0
-    };
+    return createAutomergeModel(options);
+  } else {
+    if (!space || !text?.doc || !text?.content) {
+      return void 0;
+    }
+    return createYjsModel(options);
   }
+};
+var createYjsModel = ({ identity, space, text }) => {
+  invariant(space && text?.doc && text?.content, void 0, {
+    F: __dxlog_file2,
+    L: 73,
+    S: void 0,
+    A: [
+      "space && text?.doc && text?.content",
+      ""
+    ]
+  });
+  const provider = new SpaceAwarenessProvider({
+    space,
+    doc: text.doc,
+    channel: `yjs.awareness.${text.id}`
+  });
   return {
     id: text.doc.guid,
     content: text.content,
     text: () => text.content.toString(),
+    extension: yCollab(text.content, provider.awareness),
+    awareness: provider.awareness,
+    peer: identity ? {
+      id: identity.identityKey.toHex(),
+      name: identity.profile?.displayName
+    } : void 0
+  };
+};
+var createAutomergeModel = ({ identity, space, text }) => {
+  const obj = text;
+  const doc = getRawDoc(obj, [
+    obj.field
+  ]);
+  return {
+    id: obj.id,
+    content: doc,
+    text: () => get3(doc.handle.docSync(), doc.path),
+    extension: automergePlugin(doc.handle, doc.path),
     peer: identity ? {
       id: identity.identityKey.toHex(),
       name: identity.profile?.displayName
@@ -1345,7 +1321,7 @@ export {
   SpaceAwarenessProvider,
   TextEditor,
   TextKind,
-  YText2 as YText,
+  YText,
   YXmlFragment,
   autocomplete,
   basicBundle,
@@ -1366,7 +1342,6 @@ export {
   tasklist,
   textTheme,
   tooltip,
-  useCollaboration,
   useTextModel
 };
 //# sourceMappingURL=index.mjs.map