@dxos/react-ui-editor 0.8.4-main.dedc0f3 → 0.8.4-main.e098934

package/dist/lib/node-esm/index.mjs

@@ -520,9 +520,10 @@ var scrollToBottomEffect = StateEffect.define();
 var autoScroll = ({ overscroll = 4 * lineHeight, throttle: throttle2 = 2e3 } = {}) => {
   let isThrottled = false;
   let isPinned = true;
-  let lastScrollTop = 0;
   let timeout;
   let buttonContainer;
+  let lastScrollTop = 0;
+  let scrollCounter = 0;
   const hideScrollbar = (view) => {
     view.scrollDOM.classList.add("cm-hide-scrollbar");
     clearTimeout(timeout);
@@ -532,6 +533,7 @@ var autoScroll = ({ overscroll = 4 * lineHeight, throttle: throttle2 = 2e3 } = {
   };
   const scrollToBottom = (view) => {
     isPinned = true;
+    scrollCounter = 0;
     buttonContainer?.classList.add("opacity-0");
     requestAnimationFrame(() => {
       hideScrollbar(view);
@@ -563,7 +565,7 @@ var autoScroll = ({ overscroll = 4 * lineHeight, throttle: throttle2 = 2e3 } = {
       });
       if (update2.docChanged && isPinned && !isThrottled) {
         const distanceFromBottom = calcDistance(update2.view.scrollDOM);
-        if (distanceFromBottom > overscroll) {
+        if (distanceFromBottom >= overscroll) {
           isThrottled = true;
           requestAnimationFrame(() => {
             scrollToBottom(update2.view);
@@ -574,18 +576,24 @@ var autoScroll = ({ overscroll = 4 * lineHeight, throttle: throttle2 = 2e3 } = {
         }
       }
     }),
+    // Detect user scroll.
+    // NOTE: Multiple scroll events are triggered during programmatic smooth scrolling.
     EditorView3.domEventHandlers({
       scroll: (event, view) => {
         const scroller = view.scrollDOM;
+        if (lastScrollTop > scroller.scrollTop) {
+          scrollCounter++;
+        }
+        lastScrollTop = scroller.scrollTop;
         const distanceFromBottom = calcDistance(scroller);
         if (distanceFromBottom === 0) {
           isPinned = true;
           buttonContainer?.classList.add("opacity-0");
-        } else if (scroller.scrollTop < lastScrollTop) {
+          scrollCounter = 0;
+        } else if (scrollCounter > 3) {
           isPinned = false;
           buttonContainer?.classList.remove("opacity-0");
         }
-        lastScrollTop = scroller.scrollTop;
       }
     }),
     EditorView3.theme({
@@ -1748,7 +1756,6 @@ var closeCommand = (view) => {
 var commandKeyBindings = [
   {
     key: "/",
-    preventDefault: true,
     run: openCommand
   },
   {
@@ -2001,7 +2008,7 @@ var commandMenu = (options) => {
       if (shouldShowWidget) {
         builder.add(activeRange.from, activeRange.to, Decoration6.mark({
           tagName: "dx-anchor",
-          class: "cm-ref-tag",
+          class: "cm-floating-menu-trigger",
           attributes: {
             "data-auto-trigger": "true",
             "data-trigger": trigger
@@ -2182,7 +2189,7 @@ var floatingMenu = (options = {}) => [
         this.tag.style.display = "none";
         this.tag.classList.add("opacity-10");
       } else if (update2.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
-        this.tag.style.display = "block";
+        this.tag.style.display = "";
       } else if (update2.docChanged || update2.focusChanged || update2.geometryChanged || update2.selectionSet || update2.viewportChanged) {
         this.scheduleUpdate();
       }
@@ -2201,7 +2208,7 @@ var floatingMenu = (options = {}) => [
       const offsetLeft = x + width + (options.padding ?? 8);
       this.tag.style.top = `${offsetTop}px`;
       this.tag.style.left = `${offsetLeft}px`;
-      this.tag.style.display = "block";
+      this.tag.style.display = "";
     }
     scheduleUpdate() {
       if (this.rafId != null) {
@@ -2222,11 +2229,9 @@ var floatingMenu = (options = {}) => [
       {
         const icon = document.createElement("dx-icon");
         icon.setAttribute("icon", options.icon ?? "ph--dots-three-vertical--regular");
-        const button = document.createElement("button");
-        button.appendChild(icon);
         this.tag = document.createElement("dx-anchor");
-        this.tag.classList.add("cm-ref-tag");
-        this.tag.appendChild(button);
+        this.tag.classList.add("cm-floating-menu-trigger");
+        this.tag.appendChild(icon);
       }
       container.appendChild(this.tag);
       const handler = () => this.scheduleUpdate();
@@ -2235,21 +2240,18 @@ var floatingMenu = (options = {}) => [
     }
   }),
   EditorView11.theme({
-    ".cm-ref-tag": {
+    ".cm-floating-menu-trigger": {
       position: "fixed",
       padding: "0",
       border: "none",
-      opacity: "0"
-    },
-    "[data-has-focus] & .cm-ref-tag": {
-      opacity: "1"
-    },
-    ".cm-ref-tag button": {
+      opacity: "0",
       display: "grid",
-      alignItems: "center",
-      justifyContent: "center",
+      placeContent: "center",
       width: "2rem",
       height: "2rem"
+    },
+    "&:focus-within .cm-floating-menu-trigger": {
+      opacity: "1"
     }
   })
 ];
@@ -2355,7 +2357,6 @@ var matchCompletion = (completion, str, minLength = 0) => {
 // src/extensions/command/useCommandMenu.ts
 import { useCallback, useMemo, useRef, useState } from "react";
 var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu }) => {
-  const triggerRef = useRef(null);
   const currentRef = useRef(null);
   const groupsRef = useRef([]);
   const [currentItem, setCurrentItem] = useState();
@@ -2367,7 +2368,6 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu })
     }
     setOpen(open2);
     if (!open2) {
-      triggerRef.current = null;
       setCurrentItem(void 0);
       viewRef.current?.dispatch({
         effects: [
@@ -2383,7 +2383,6 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu })
     if (item) {
       currentRef.current = item;
     }
-    triggerRef.current = event.trigger;
     const triggerKey = event.trigger.getAttribute("data-trigger");
     if (!open && triggerKey) {
       await handleOpenChange(true, triggerKey);
@@ -2401,7 +2400,7 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu })
     void item.onSelect?.(view, selection.head);
   }, []);
   const serializedTrigger = Array.isArray(trigger) ? trigger.join(",") : trigger;
-  const _commandMenu = useMemo(() => {
+  const memoizedCommandMenu = useMemo(() => {
     return commandMenu({
       trigger,
       placeholder: placeholder3,
@@ -2442,10 +2441,9 @@ var useCommandMenu = ({ viewRef, trigger, placeholder: placeholder3, getMenu })
     placeholder3
   ]);
   return {
-    commandMenu: _commandMenu,
+    commandMenu: memoizedCommandMenu,
     currentItem,
     groupsRef,
-    ref: triggerRef,
     open,
     onActivate: handleActivate,
     onOpenChange: setOpen,
@@ -6045,6 +6043,9 @@ var linkTooltip = (renderTooltip) => {
       return null;
     }
     const urlText = view.state.sliceDoc(url.from, url.to);
+    if (urlText.startsWith("dxn")) {
+      return null;
+    }
     return {
       pos: link.from,
       end: link.to,
@@ -7023,7 +7024,7 @@ var decorations = () => [
     ".cm-list-item-focused": {
       borderColor: "var(--dx-accentFocusIndicator)"
     },
-    "[data-has-focus] & .cm-list-item-selected": {
+    "&:focus-within .cm-list-item-selected": {
       borderColor: "var(--dx-separator)"
     }
   }))
@@ -7843,7 +7844,7 @@ var useTextEditor = (props = {}, deps = []) => {
         id
       }, {
         F: __dxlog_file15,
-        L: 134,
+        L: 122,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -7860,7 +7861,7 @@ var useTextEditor = (props = {}, deps = []) => {
             selection
           }, {
             F: __dxlog_file15,
-            L: 143,
+            L: 131,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -8380,22 +8381,60 @@ var EditorToolbar = /* @__PURE__ */ memo(({ classNames, attendableId, role, ...p
   }
 });
 
-// src/components/Popover/CommandMenu.tsx
+// src/components/CommandMenu/CommandMenu.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import React5, { Fragment, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React5, { Fragment, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { addEventListener as addEventListener2 } from "@dxos/async";
 import { Icon as Icon2, Popover, toLocalizedString, useThemeContext as useThemeContext2, useTranslation } from "@dxos/react-ui";
-var CommandMenu = ({ groups, currentItem, onSelect }) => {
+var CommandMenuProvider = ({ groups, onSelect, onActivate, currentItem, children, open: propsOpen, onOpenChange, defaultOpen }) => {
   var _effect = _useSignals3();
   try {
     const { tx } = useThemeContext2();
     const groupsWithItems = groups.filter((group) => group.items.length > 0);
-    return /* @__PURE__ */ React5.createElement(Popover.Portal, null, /* @__PURE__ */ React5.createElement(Popover.Content, {
+    const trigger = useRef3(null);
+    const [open, setOpen] = useControllableState({
+      prop: propsOpen,
+      onChange: onOpenChange,
+      defaultProp: defaultOpen
+    });
+    const handleDxAnchorActivate = useCallback4((event) => {
+      const { trigger: dxTrigger, refId } = event;
+      if (!refId) {
+        trigger.current = dxTrigger;
+        if (onActivate) {
+          onActivate(event);
+        } else {
+          queueMicrotask(() => setOpen(true));
+        }
+      }
+    }, [
+      onActivate
+    ]);
+    const [rootRef, setRootRef] = useState3(null);
+    useEffect3(() => {
+      if (!rootRef || !handleDxAnchorActivate) {
+        return;
+      }
+      return addEventListener2(rootRef, "dx-anchor-activate", handleDxAnchorActivate, {
+        capture: true,
+        passive: false
+      });
+    }, [
+      rootRef,
+      handleDxAnchorActivate
+    ]);
+    return /* @__PURE__ */ React5.createElement(Popover.Root, {
+      modal: false,
+      open,
+      onOpenChange: setOpen
+    }, /* @__PURE__ */ React5.createElement(Popover.Portal, null, /* @__PURE__ */ React5.createElement(Popover.Content, {
       align: "start",
       onOpenAutoFocus: (event) => event.preventDefault(),
       classNames: tx("menu.content", "menu--exotic-unfocusable", {
         elevation: "positioned"
       }, [
-        "max-h-[300px] overflow-y-auto"
+        "max-bs-80 overflow-y-auto"
       ])
     }, /* @__PURE__ */ React5.createElement(Popover.Viewport, {
       classNames: tx("menu.viewport", "menu__viewport--exotic-unfocusable", {})
@@ -8407,7 +8446,13 @@ var CommandMenu = ({ groups, currentItem, onSelect }) => {
       onSelect
     }), index < groupsWithItems.length - 1 && /* @__PURE__ */ React5.createElement("div", {
       className: tx("menu.separator", "menu__item", {})
-    })))))));
+    }))))), /* @__PURE__ */ React5.createElement(Popover.Arrow, null))), /* @__PURE__ */ React5.createElement(Popover.VirtualTrigger, {
+      virtualRef: trigger
+    }), /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      className: "contents",
+      ref: setRootRef
+    }, children));
   } finally {
     _effect.f();
   }
@@ -8644,157 +8689,8 @@ var linkSlashCommands = {
     }
   ]
 };
-
-// src/components/Popover/RefPopover.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import { createContext } from "@radix-ui/react-context";
-import React6, { forwardRef as forwardRef2, useCallback as useCallback5, useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
-import { addEventListener as addEventListener2 } from "@dxos/async";
-import { Popover as Popover2 } from "@dxos/react-ui";
-var [RefPopoverContextProvider, useRefPopover] = createContext("RefPopover", {});
-var PreviewProvider = ({ children, onLookup }) => {
-  var _effect = _useSignals4();
-  try {
-    const trigger = useRef4(null);
-    const [value, setValue] = useState3({});
-    const [open, setOpen] = useState3(false);
-    const handleDxAnchorActivate = useCallback5((event) => {
-      const { refId, label, trigger: dxTrigger } = event;
-      setValue((value2) => ({
-        ...value2,
-        link: {
-          label,
-          ref: refId
-        },
-        pending: true
-      }));
-      trigger.current = dxTrigger;
-      queueMicrotask(() => setOpen(true));
-      void onLookup?.({
-        label,
-        ref: refId
-      }).then((target) => setValue((value2) => ({
-        ...value2,
-        target: target ?? void 0,
-        pending: false
-      })));
-    }, [
-      onLookup
-    ]);
-    return /* @__PURE__ */ React6.createElement(RefPopoverContextProvider, {
-      pending: value.pending,
-      link: value.link,
-      target: value.target
-    }, /* @__PURE__ */ React6.createElement(RefPopover, {
-      ref: trigger,
-      open,
-      onOpenChange: setOpen,
-      onActivate: handleDxAnchorActivate
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var RefPopover = /* @__PURE__ */ forwardRef2(({ children, open, onOpenChange, modal, onActivate }, ref) => {
-  var _effect = _useSignals4();
-  try {
-    const [rootRef, setRootRef] = useState3(null);
-    useEffect4(() => {
-      if (!rootRef || !onActivate) {
-        return;
-      }
-      return addEventListener2(rootRef, "dx-anchor-activate", onActivate, {
-        capture: true,
-        passive: false
-      });
-    }, [
-      rootRef,
-      onActivate
-    ]);
-    return /* @__PURE__ */ React6.createElement(Popover2.Root, {
-      open,
-      onOpenChange,
-      modal
-    }, /* @__PURE__ */ React6.createElement(Popover2.VirtualTrigger, {
-      virtualRef: ref
-    }), /* @__PURE__ */ React6.createElement("div", {
-      role: "none",
-      className: "contents",
-      ref: setRootRef
-    }, children));
-  } finally {
-    _effect.f();
-  }
-});
-
-// src/components/Popover/RefDropdownMenu.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import { createContext as createContext2 } from "@radix-ui/react-context";
-import React7, { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef5, useState as useState4 } from "react";
-import { addEventListener as addEventListener3 } from "@dxos/async";
-import { DropdownMenu } from "@dxos/react-ui";
-var [RefDropdownMenuContextProvider, useRefDropdownMenu] = createContext2("RefDropdownMenu", {});
-var RefDropdownMenuProvider = ({ children, onLookup }) => {
-  var _effect = _useSignals5();
-  try {
-    const trigger = useRef5(null);
-    const [value, setValue] = useState4({});
-    const [rootRef, setRootRef] = useState4(null);
-    const [open, setOpen] = useState4(false);
-    const handleDxAnchorActivate = useCallback6((event) => {
-      const { refId, label, trigger: dxTrigger } = event;
-      setValue((value2) => ({
-        ...value2,
-        link: {
-          label,
-          ref: refId
-        },
-        pending: true
-      }));
-      trigger.current = dxTrigger;
-      queueMicrotask(() => setOpen(true));
-      void onLookup?.({
-        label,
-        ref: refId
-      }).then((target) => setValue((value2) => ({
-        ...value2,
-        target: target ?? void 0,
-        pending: false
-      })));
-    }, [
-      onLookup
-    ]);
-    useEffect5(() => {
-      if (!rootRef) {
-        return;
-      }
-      return addEventListener3(rootRef, "dx-anchor-activate", handleDxAnchorActivate, {
-        capture: true,
-        passive: false
-      });
-    }, [
-      rootRef
-    ]);
-    return /* @__PURE__ */ React7.createElement(RefDropdownMenuContextProvider, {
-      pending: value.pending,
-      link: value.link,
-      target: value.target
-    }, /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
-      open,
-      onOpenChange: setOpen
-    }, /* @__PURE__ */ React7.createElement(DropdownMenu.VirtualTrigger, {
-      virtualRef: trigger
-    }), /* @__PURE__ */ React7.createElement("div", {
-      role: "none",
-      className: "contents",
-      ref: setRootRef
-    }, children)));
-  } finally {
-    _effect.f();
-  }
-};
 export {
-  CommandMenu,
+  CommandMenuProvider,
   Cursor,
   Domino,
   Editor,
@@ -8808,9 +8704,6 @@ export {
   Inline,
   InputModeExtensions,
   List,
-  PreviewProvider,
-  RefDropdownMenuProvider,
-  RefPopover,
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
   TextKind,
@@ -8956,7 +8849,6 @@ export {
   useComments,
   useEditorToolbarState,
   useFormattingState,
-  useRefPopover,
   useTextEditor,
   wrapWithCatch,
   xmlTagContextEffect,