@dxos/react-ui-editor 0.4.6-main.3500f01 → 0.4.6-main.3724cc4

package/dist/lib/browser/index.mjs

@@ -32,7 +32,7 @@ import { tags as tags2 } from "@lezer/highlight";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView14, scrollPastEnd } from "@codemirror/view";
+import { EditorView as EditorView14 } 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, useMemo as useMemo2 } from "react";
@@ -1140,8 +1140,9 @@ 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] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden";
-var editorFillLayoutRoot = "bs-full relative";
-var editorFillLayoutEditor = "!absolute inset-0";
+var editorFillLayoutRoot = "bs-full overflow-hidden grid";
+var editorFillLayoutEditor = "bs-full overflow-hidden [&>.cm-scroller]:bs-full [&>.cm-scroller]:overflow-y-auto";
+var editorHalfViewportOverscrollContent = "after:block after:min-bs-[50dvh] after:pointer-events-none";
 
 // packages/ui/react-ui-editor/src/util.ts
 import { log as log2 } from "@dxos/log";
@@ -3601,17 +3602,13 @@ var defaultTheme = {
   "&.cm-focused": {
     outline: "none"
   },
-  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
   ".cm-scroller": {
-    // TODO(burdon): Reconcile with docs: https://codemirror.net/docs/guide
-    //  Inside of that is the scroller element. If the editor has its own scrollbar, this one should be styled with overflow: auto. But it doesn't have to—the editor also supports growing to accomodate its content, or growing up to a certain max-height and then scrolling.
-    overflowY: "auto",
+    // overflow: 'visible',
     fontFamily: get3(tokens, "fontFamily.mono", []).join(","),
-    lineHeight: 1.5
+    lineHeight: 1.4
   },
   ".cm-content": {
-    // TODO(burdon): Is it possible to remove the padding value from CM's default theme?
-    // padding: 'unset',
+    padding: 0,
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: "16px"
   },
@@ -3817,7 +3814,7 @@ var codeTheme = {
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo = EditorView14.scrollIntoView(0), moveToEndOfLine, selection, theme, slots = defaultSlots, extensions = [], scrollPastEnd: _scrollPastEnd, debug }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
@@ -3828,7 +3825,15 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     view
   ]);
   useEffect2(() => {
-    if (autoFocus) {
+    if (autoFocus && !view?.hasFocus) {
+      if (view?.state.selection.main?.from === 0) {
+        const { to } = view.state.doc.lineAt(0);
+        view?.dispatch({
+          selection: {
+            anchor: to
+          }
+        });
+      }
       view?.focus();
     }
   }, [
@@ -3847,24 +3852,22 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         EditorView14.exceptionSink.of((err) => {
           log3.catch(err, void 0, {
             F: __dxlog_file4,
-            L: 122,
+            L: 113,
             S: void 0,
             C: (f, a) => f(...a)
           });
         }),
         // Theme.
-        // TODO(burdon): Make base theme configurable.
+        // TODO(burdon): Make configurable.
         EditorView14.baseTheme(defaultTheme),
-        theme && EditorView14.theme(theme),
+        EditorView14.theme(theme ?? {}),
         EditorView14.darkTheme.of(themeMode === "dark"),
-        slots.editor?.className && EditorView14.editorAttributes.of({
-          class: slots.editor.className
+        EditorView14.editorAttributes.of({
+          class: slots.editor?.className ?? ""
         }),
-        slots.content?.className && EditorView14.contentAttributes.of({
-          class: slots.content.className
+        EditorView14.contentAttributes.of({
+          class: slots.content?.className ?? ""
         }),
-        // NOTE: Assumes default line height.
-        _scrollPastEnd && scrollPastEnd(),
         // Focus.
         EditorView14.updateListener.of((update2) => {
           update2.transactions.forEach((transaction) => {
@@ -3883,33 +3886,26 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         ...extensions
       ].filter(isNotFalsy4)
     });
-    const view2 = new EditorView14({
+    const newView = new EditorView14({
       state,
       parent: rootRef.current,
       scrollTo,
       // NOTE: Uncomment to debug/monitor all transactions.
       // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-      dispatchTransactions: (trs, view3) => {
+      dispatchTransactions: (trs, view2) => {
         if (debug) {
           logChanges(trs);
         }
-        view3.update(trs);
+        view2.update(trs);
       }
     });
-    setView(view2);
-    if (moveToEndOfLine) {
-      const { to } = view2.state.doc.lineAt(0);
-      view2?.dispatch({
-        selection: {
-          anchor: to
-        }
-      });
-    }
+    view?.destroy();
+    setView(newView);
     if (state.facet(editorMode).noTabster) {
       rootRef.current.removeAttribute("data-tabster");
     }
     return () => {
-      view2?.destroy();
+      newView?.destroy();
       setView(null);
     };
   }, [
@@ -3993,7 +3989,7 @@ var defaultSlots = {
     className: focusRing
   },
   editor: {
-    className: "bs-full"
+    className: "min-bs-full"
   }
 };
 var defaultTextSlots = {
@@ -4006,7 +4002,7 @@ var defaultMarkdownSlots = {
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
 import { ChatText, Code, CodeBlock, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, Quotes } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
-import React2, { useRef as useRef2, useState as useState3 } from "react";
+import React2 from "react";
 import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
 var tooltipProps = {
@@ -4064,29 +4060,9 @@ var MarkdownHeading = () => {
   const header = blockType && /heading(\d)/.exec(blockType);
   const value = header ? header[1] : blockType === "paragraph" || !blockType ? "0" : void 0;
   const HeadingIcon = HeadingIcons[value ?? "0"];
-  const suppressNextTooltip = useRef2(false);
-  const [tooltipOpen, setTooltipOpen] = useState3(false);
-  const [selectOpen, setSelectOpen] = useState3(false);
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
-    open: tooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (nextOpen && suppressNextTooltip.current) {
-        suppressNextTooltip.current = false;
-        return setTooltipOpen(false);
-      } else {
-        return setTooltipOpen(nextOpen);
-      }
-    }
-  }, /* @__PURE__ */ React2.createElement(Select.Root, {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Select.Root, {
     disabled: value === null,
     value: value ?? "0",
-    open: selectOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen) {
-        suppressNextTooltip.current = true;
-      }
-      return setSelectOpen(nextOpen);
-    },
     onValueChange: (value2) => onAction?.({
       type: "heading",
       data: parseInt(value2)
@@ -4430,10 +4406,10 @@ var useActionHandler = (view) => {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useEditorView.ts
-import { useRef as useRef3, useState as useState4 } from "react";
+import { useRef as useRef2, useState as useState3 } from "react";
 var useEditorView = (id) => {
-  const editorRef = useRef3(null);
-  const [prev, setPrev] = useState4([
+  const editorRef = useRef2(null);
+  const [prev, setPrev] = useState3([
     null,
     ""
   ]);
@@ -4452,14 +4428,14 @@ var useEditorView = (id) => {
 // packages/ui/react-ui-editor/src/hooks/useTextEditor.ts
 import { EditorSelection as EditorSelection2, EditorState as EditorState3 } from "@codemirror/state";
 import { EditorView as EditorView15 } from "@codemirror/view";
-import { useEffect as useEffect3, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
 import { log as log5 } from "@dxos/log";
 import { isNotFalsy as isNotFalsy5 } from "@dxos/util";
 var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextEditor.ts";
 var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions } = {}) => {
-  const onUpdate = useRef4();
-  const [view, setView] = useState5();
-  const parentRef = useRef4(null);
+  const onUpdate = useRef3();
+  const [view, setView] = useState4();
+  const parentRef = useRef3(null);
   useEffect3(() => {
     let view2;
     if (parentRef.current) {
@@ -4471,7 +4447,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
           EditorView15.exceptionSink.of((err) => {
             log5.catch(err, void 0, {
               F: __dxlog_file6,
-              L: 61,
+              L: 60,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -4501,7 +4477,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
       view2?.destroy();
     };
   }, [
-    doc,
+    parentRef,
     extensions
   ]);
   useEffect3(() => {
@@ -4560,7 +4536,7 @@ var createThemeExtensions = ({ theme, themeMode, slots } = {}) => {
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
 import get4 from "lodash.get";
-import { useState as useState6, useMemo as useMemo3 } 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";
@@ -4568,7 +4544,7 @@ 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) => useMemo3(() => createModel(props), Object.values(props));
 var useInMemoryTextModel = ({ id, defaultContent }) => {
-  const [content, setContent] = useState6(defaultContent ?? "");
+  const [content, setContent] = useState5(defaultContent ?? "");
   return {
     id,
     content,
@@ -4670,6 +4646,7 @@ export {
   defaultTheme,
   editorFillLayoutEditor,
   editorFillLayoutRoot,
+  editorHalfViewportOverscrollContent,
   editorMode,
   editorWithToolbarLayout,
   focusComment,