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

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 } from "@codemirror/view";
+import { EditorView as EditorView14, scrollPastEnd } 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,9 +1140,8 @@ 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 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";
+var editorFillLayoutRoot = "bs-full relative";
+var editorFillLayoutEditor = "!absolute inset-0";
 
 // packages/ui/react-ui-editor/src/util.ts
 import { log as log2 } from "@dxos/log";
@@ -3602,13 +3601,17 @@ var defaultTheme = {
   "&.cm-focused": {
     outline: "none"
   },
+  // NOTE: See https://codemirror.net/docs/guide (DOM Structure).
   ".cm-scroller": {
-    // overflow: 'visible',
+    // 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",
     fontFamily: get3(tokens, "fontFamily.mono", []).join(","),
-    lineHeight: 1.4
+    lineHeight: 1.5
   },
   ".cm-content": {
-    padding: 0,
+    // TODO(burdon): Is it possible to remove the padding value from CM's default theme?
+    // padding: 'unset',
     // NOTE: Base font size (otherwise defined by HTML tag, which might be different for storybook).
     fontSize: "16px"
   },
@@ -3814,7 +3817,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, selection, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo = EditorView14.scrollIntoView(0), moveToEndOfLine, selection, theme, slots = defaultSlots, extensions = [], scrollPastEnd: _scrollPastEnd, debug }, forwardedRef) => {
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
   });
@@ -3825,15 +3828,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     view
   ]);
   useEffect2(() => {
-    if (autoFocus && !view?.hasFocus) {
-      if (view?.state.selection.main?.from === 0) {
-        const { to } = view.state.doc.lineAt(0);
-        view?.dispatch({
-          selection: {
-            anchor: to
-          }
-        });
-      }
+    if (autoFocus) {
       view?.focus();
     }
   }, [
@@ -3852,22 +3847,24 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         EditorView14.exceptionSink.of((err) => {
           log3.catch(err, void 0, {
             F: __dxlog_file4,
-            L: 113,
+            L: 122,
             S: void 0,
             C: (f, a) => f(...a)
           });
         }),
         // Theme.
-        // TODO(burdon): Make configurable.
+        // TODO(burdon): Make base theme configurable.
         EditorView14.baseTheme(defaultTheme),
-        EditorView14.theme(theme ?? {}),
+        theme && EditorView14.theme(theme),
         EditorView14.darkTheme.of(themeMode === "dark"),
-        EditorView14.editorAttributes.of({
-          class: slots.editor?.className ?? ""
+        slots.editor?.className && EditorView14.editorAttributes.of({
+          class: slots.editor.className
         }),
-        EditorView14.contentAttributes.of({
-          class: slots.content?.className ?? ""
+        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) => {
@@ -3886,26 +3883,33 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         ...extensions
       ].filter(isNotFalsy4)
     });
-    const newView = new EditorView14({
+    const view2 = new EditorView14({
       state,
       parent: rootRef.current,
       scrollTo,
       // NOTE: Uncomment to debug/monitor all transactions.
       // https://codemirror.net/docs/ref/#view.EditorView.dispatch
-      dispatchTransactions: (trs, view2) => {
+      dispatchTransactions: (trs, view3) => {
         if (debug) {
           logChanges(trs);
         }
-        view2.update(trs);
+        view3.update(trs);
       }
     });
-    view?.destroy();
-    setView(newView);
+    setView(view2);
+    if (moveToEndOfLine) {
+      const { to } = view2.state.doc.lineAt(0);
+      view2?.dispatch({
+        selection: {
+          anchor: to
+        }
+      });
+    }
     if (state.facet(editorMode).noTabster) {
       rootRef.current.removeAttribute("data-tabster");
     }
     return () => {
-      newView?.destroy();
+      view2?.destroy();
       setView(null);
     };
   }, [
@@ -3989,7 +3993,7 @@ var defaultSlots = {
     className: focusRing
   },
   editor: {
-    className: "min-bs-full"
+    className: "bs-full"
   }
 };
 var defaultTextSlots = {
@@ -4002,7 +4006,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 from "react";
+import React2, { useRef as useRef2, useState as useState3 } from "react";
 import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
 var tooltipProps = {
@@ -4060,9 +4064,29 @@ 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"];
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Select.Root, {
+  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, {
     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)
@@ -4406,10 +4430,10 @@ var useActionHandler = (view) => {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useEditorView.ts
-import { useRef as useRef2, useState as useState3 } from "react";
+import { useRef as useRef3, useState as useState4 } from "react";
 var useEditorView = (id) => {
-  const editorRef = useRef2(null);
-  const [prev, setPrev] = useState3([
+  const editorRef = useRef3(null);
+  const [prev, setPrev] = useState4([
     null,
     ""
   ]);
@@ -4428,14 +4452,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 useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState5 } 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 = useRef3();
-  const [view, setView] = useState4();
-  const parentRef = useRef3(null);
+  const onUpdate = useRef4();
+  const [view, setView] = useState5();
+  const parentRef = useRef4(null);
   useEffect3(() => {
     let view2;
     if (parentRef.current) {
@@ -4447,7 +4471,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
           EditorView15.exceptionSink.of((err) => {
             log5.catch(err, void 0, {
               F: __dxlog_file6,
-              L: 60,
+              L: 61,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -4477,7 +4501,7 @@ var useTextEditor = ({ autoFocus, scrollTo, debug, doc, selection, extensions }
       view2?.destroy();
     };
   }, [
-    parentRef,
+    doc,
     extensions
   ]);
   useEffect3(() => {
@@ -4536,7 +4560,7 @@ 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 useMemo3 } from "react";
+import { useState as useState6, useMemo as useMemo3 } from "react";
 import { generateName } from "@dxos/display-name";
 import { getRawDoc } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
@@ -4544,7 +4568,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] = useState5(defaultContent ?? "");
+  const [content, setContent] = useState6(defaultContent ?? "");
   return {
     id,
     content,
@@ -4646,7 +4670,6 @@ export {
   defaultTheme,
   editorFillLayoutEditor,
   editorFillLayoutRoot,
-  editorHalfViewportOverscrollContent,
   editorMode,
   editorWithToolbarLayout,
   focusComment,