@dxos/react-ui-editor 0.4.4-main.e05bf88 → 0.4.4-main.e80efb0

package/dist/lib/browser/index.mjs

@@ -11,7 +11,7 @@ import { EditorState as EditorState2 } from "@codemirror/state";
 import { EditorView as EditorView15 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import defaultsDeep2 from "lodash.defaultsdeep";
-import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
+import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2, useMemo as useMemo2 } from "react";
 import { log as log3 } from "@dxos/log";
 import { useThemeContext } from "@dxos/react-ui";
 import { focusRing } from "@dxos/react-ui-theme";
@@ -715,10 +715,10 @@ import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@cod
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
 import { drawSelection, EditorView as EditorView4, highlightActiveLine, placeholder } from "@codemirror/view";
 import { isNotFalsy as isNotFalsy2 } from "@dxos/util";
-var createBasicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping = true } = {}) => [
+var createBasicBundle = ({ themeMode, placeholder: _placeholder, lineWrapping = true, bracketMatching: _bracketMatching = true } = {}) => [
   lineWrapping && EditorView4.lineWrapping,
   // https://codemirror.net/docs/ref/#codemirror.minimalSetup
-  bracketMatching(),
+  _bracketMatching && bracketMatching(),
   closeBrackets(),
   drawSelection(),
   highlightActiveLine(),
@@ -1115,7 +1115,7 @@ var tokens = tailwindConfig({}).theme;
 var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
 
 // packages/ui/react-ui-editor/src/styles/layout.ts
-var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden";
+var editorWithToolbarLayout = "grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
 var editorFillLayoutRoot = "min-bs-full grid";
 var editorFillLayoutEditor = "min-bs-full";
 var editorHalfViewportOverscrollContent = "after:block after:min-bs-[50dvh] after:pointer-events-none";
@@ -3945,7 +3945,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         EditorView15.exceptionSink.of((err) => {
           log3.catch(err, void 0, {
             F: __dxlog_file4,
-            L: 112,
+            L: 113,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -4003,6 +4003,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     };
   }, [
     rootRef,
+    extensions,
     model,
     readonly,
     themeMode
@@ -4028,38 +4029,49 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     ...tabsterDOMAttribute
   });
 });
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping, theme = textTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultTextSlots);
+  const extensions = useMemo2(() => [
+    createBasicBundle({
+      themeMode,
+      placeholder: placeholder3,
+      lineWrapping
+    }),
+    ..._extensions ?? []
+  ], [
+    themeMode,
+    placeholder3,
+    lineWrapping,
+    _extensions
+  ]);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
-    extensions: [
-      createBasicBundle({
-        themeMode,
-        placeholder: placeholder3,
-        lineWrapping
-      }),
-      ...extensions
-    ],
+    extensions,
     theme,
     slots: updatedSlots,
     ...props
   });
 });
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, theme = markdownTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const updatedSlots = defaultsDeep2({}, slots, defaultMarkdownSlots);
+  const extensions = useMemo2(() => [
+    createMarkdownExtensions({
+      themeMode,
+      placeholder: placeholder3
+    }),
+    ..._extensions ?? []
+  ], [
+    themeMode,
+    placeholder3,
+    _extensions
+  ]);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
     readonly,
-    extensions: [
-      createMarkdownExtensions({
-        themeMode,
-        placeholder: placeholder3
-      }),
-      ...extensions
-    ],
+    extensions,
     theme,
     slots: updatedSlots,
     ...props
@@ -4533,6 +4545,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
   const [view, setView] = useState4();
   const parentRef = useRef3(null);
   useEffect3(() => {
+    let view2;
     if (parentRef.current) {
       const state = EditorState3.create({
         doc,
@@ -4542,7 +4555,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
           EditorView16.exceptionSink.of((err) => {
             log5.catch(err, void 0, {
               F: __dxlog_file6,
-              L: 57,
+              L: 60,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -4553,7 +4566,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
           })
         ].filter(isNotFalsy5)
       });
-      const view2 = new EditorView16({
+      view2 = new EditorView16({
         parent: parentRef.current,
         scrollTo,
         state,
@@ -4569,10 +4582,11 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
       setView(view2);
     }
     return () => {
-      view?.destroy();
+      view2?.destroy();
     };
   }, [
-    parentRef
+    parentRef,
+    extensions
   ]);
   useEffect3(() => {
     if (view) {
@@ -4630,13 +4644,13 @@ var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
 import get4 from "lodash.get";
-import { useState as useState5, useMemo as useMemo2 } from "react";
+import { useState as useState5, useMemo as useMemo3 } from "react";
 import { generateName } from "@dxos/display-name";
 import { getRawDoc } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isAutomergeObject } from "@dxos/react-client/echo";
 var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
-var useTextModel = (props) => useMemo2(() => createModel(props), Object.values(props));
+var useTextModel = (props) => useMemo3(() => createModel(props), Object.values(props));
 var useInMemoryTextModel = ({ id, defaultContent }) => {
   const [content, setContent] = useState5(defaultContent ?? "");
   return {