@dxos/react-ui-editor 0.3.11-main.1d8382a → 0.3.11-main.2c83f41

package/dist/lib/browser/index.mjs

@@ -11,7 +11,7 @@ import { EditorView as EditorView12 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, useRef } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
 import { generateName } from "@dxos/display-name";
 import { useThemeContext } from "@dxos/react-ui";
 import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
@@ -2531,23 +2531,21 @@ var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, readonly, comments: comments2, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, comments: comments2, extensions = [], editorMode, slots = defaultSlots }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const { themeMode } = useThemeContext();
-  const rootRef = useRef(null);
-  const [view, setView] = useState(null);
-  useImperativeHandle(forwardedRef, () => view, [
-    view
-  ]);
-  useEffect(() => {
-    if (focus && view) {
-      view.focus();
-    }
-  }, [
-    focus,
+  const [root, setRoot] = useState(null);
+  const [{ state = void 0, view = void 0 } = {}, setEditor] = useState();
+  useImperativeHandle(forwardedRef, () => ({
+    root,
+    state,
     view
+  }), [
+    view,
+    state,
+    root
   ]);
   const { awareness: awareness2, peer } = model;
   useEffect(() => {
@@ -2584,10 +2582,10 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, readonly, comme
     comments2
   ]);
   useEffect(() => {
-    if (!model || !rootRef.current) {
+    if (!root) {
       return;
     }
-    const state = EditorState2.create({
+    const state2 = EditorState2.create({
       doc: model.text(),
       extensions: [
         readonly && EditorState2.readOnly.of(readonly),
@@ -2605,17 +2603,19 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, readonly, comme
       ].filter(Boolean)
     });
     view?.destroy();
-    const newView = new EditorView12({
-      parent: rootRef.current,
-      state
+    setEditor({
+      state: state2,
+      view: new EditorView12({
+        state: state2,
+        parent: root
+      })
     });
-    setView(newView);
     return () => {
-      newView?.destroy();
-      setView(null);
+      view?.destroy();
+      setEditor(void 0);
     };
   }, [
-    rootRef,
+    root,
     model,
     readonly,
     editorMode,
@@ -2624,8 +2624,12 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, readonly, comme
   const handleKeyUp = useCallback((event) => {
     const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
     switch (key) {
+      case "Enter": {
+        view?.contentDOM.focus();
+        break;
+      }
       case "Escape": {
-        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && rootRef.current?.focus();
+        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
         break;
       }
     }
@@ -2635,16 +2639,16 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, focus, readonly, comme
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     key: model.id,
-    ref: rootRef,
+    ref: setRoot,
     tabIndex: 0,
     ...slots?.root,
     ...editorMode !== "vim" && tabsterDOMAttribute,
     onKeyUp: handleKeyUp
   });
 });
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
+  const slots = defaultsDeep2({}, _slots, defaultTextSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
@@ -2652,17 +2656,17 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots,
       basicBundle({
         readonly,
         themeMode,
-        placeholder: updatedSlots?.editor?.placeholder
+        placeholder: slots?.editor?.placeholder
       }),
       ...extensions
     ],
-    slots: updatedSlots,
+    slots,
     ...props
   });
 });
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots, ...props }, forwardedRef) => {
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
+  const slots = defaultsDeep2({}, _slots, defaultMarkdownSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
@@ -2670,11 +2674,11 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], sl
       markdownBundle({
         readonly,
         themeMode,
-        placeholder: updatedSlots?.editor?.placeholder
+        placeholder: slots?.editor?.placeholder
       }),
       ...extensions
     ],
-    slots: updatedSlots,
+    slots,
     ...props
   });
 });
@@ -2980,7 +2984,7 @@ var modelState = StateField5.define({
 });
 var useTextModel = (props) => {
   const { identity, space, text } = props;
-  const [model, setModel] = useState2();
+  const [model, setModel] = useState2(() => createModel(props));
   useEffect2(() => setModel(createModel(props)), [
     identity,
     space,