@dxos/react-ui-editor 0.3.11-main.e8c477a → 0.3.11-main.f14932f

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