@dxos/ui-editor 0.8.4-main.1068cf700f → 0.8.4-main.2244d791bb

package/dist/lib/browser/index.mjs

@@ -501,13 +501,12 @@ var typeahead = ({ onComplete } = {}) => {
   ];
 };
 
-// src/extensions/autoscroll.ts
-import { StateEffect as StateEffect2 } from "@codemirror/state";
+// src/extensions/auto-scroll.ts
 import { EditorView as EditorView5, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
-import { debounce } from "@dxos/async";
+import { addEventListener, combine } from "@dxos/async";
 import { Domino } from "@dxos/ui";
 
-// src/extensions/scrolling.ts
+// src/extensions/smooth-scroll.ts
 import { StateEffect } from "@codemirror/state";
 import { EditorView as EditorView4, ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 var scrollToLineEffect = StateEffect.define();
@@ -525,8 +524,8 @@ var smoothScroll = ({ offset = 0, position = "start" } = {}) => {
     */
     scrollToLine(lineNumber, options) {
       const { offset: animOffset = 0, position: animPosition, behavior } = options;
-      const doc = this.view.state.doc;
       const scroller = this.view.scrollDOM;
+      const doc = this.view.state.doc;
       const targetLine = Math.max(0, lineNumber - 1);
       if (behavior === "instant") {
         requestAnimationFrame(() => {
@@ -539,6 +538,10 @@ var smoothScroll = ({ offset = 0, position = "start" } = {}) => {
         });
         return;
       }
+      if (lineNumber === -1) {
+        this.animateScroll(scroller, scroller.scrollHeight - scroller.clientHeight);
+        return;
+      }
       if (targetLine >= doc.lines) {
         const targetScrollTop2 = scroller.scrollHeight - scroller.clientHeight + (animOffset || 0);
         this.animateScroll(scroller, targetScrollTop2);
@@ -568,10 +571,12 @@ var smoothScroll = ({ offset = 0, position = "start" } = {}) => {
       if (Math.abs(targetScrollTop - element.scrollTop) < 1) {
         return;
       }
-      element.scrollTo({
-        top: targetScrollTop,
-        behavior: "smooth"
-      });
+      setTimeout(() => {
+        element.scrollTo({
+          top: targetScrollTop,
+          behavior: "smooth"
+        });
+      }, 100);
     }
   });
   return [
@@ -605,88 +610,71 @@ var scrollToLine = (view, line, options) => {
   });
 };
 
-// src/extensions/autoscroll.ts
-var scrollToBottomEffect = StateEffect2.define();
-var autoScroll = ({ autoScroll: autoScroll2 = true, threshold = 100, throttleDelay = 1e3, onAutoScroll } = {}) => {
+// src/extensions/auto-scroll.ts
+var autoScroll = ({ pinned = true, threshold = 100, throttleDelay = 500, onAutoScroll } = {}) => {
   let buttonContainer;
-  let hideTimeout;
-  let lastScrollTop = 0;
-  let isPinned = true;
-  const setPinned = (pin) => {
-    isPinned = pin;
-    buttonContainer?.classList.toggle("opacity-0", pin);
-  };
-  const hideScrollbar = (view) => {
-    view.scrollDOM.classList.add("cm-hide-scrollbar");
-    clearTimeout(hideTimeout);
-    hideTimeout = setTimeout(() => {
-      view.scrollDOM.classList.remove("cm-hide-scrollbar");
-    }, 1e3);
+  let isPinned = pinned;
+  const setPinned = (pinned2) => {
+    buttonContainer?.classList.toggle("opacity-0", pinned2);
+    isPinned = pinned2;
   };
   const scrollToBottom = (view, behavior) => {
     setPinned(true);
-    hideScrollbar(view);
-    const line = view.state.doc.lineAt(view.state.doc.length);
     view.dispatch({
-      selection: {
-        anchor: line.to,
-        head: line.to
-      },
       effects: scrollToLineEffect.of({
-        line: line.number,
+        line: -1,
         options: {
           position: "end",
-          offset: threshold,
           behavior
         }
       })
     });
   };
-  const checkDistance = debounce((view) => {
-    const scrollerRect = view.scrollDOM.getBoundingClientRect();
-    const coords = view.coordsAtPos(view.state.doc.length);
-    const distanceFromBottom = coords ? coords.bottom - scrollerRect.bottom : 0;
-    setPinned(distanceFromBottom < 0);
-  }, 1e3);
-  const triggerUpdate = debounce((view) => scrollToBottom(view), throttleDelay);
+  const triggerUpdate = intervalUntilQuiet((view) => {
+    if (isPinned) {
+      scrollToBottom(view);
+    }
+  }, throttleDelay);
   return [
     // Update listener for logging when scrolling is needed.
-    EditorView5.updateListener.of(({ view, transactions, heightChanged }) => {
-      transactions.forEach((transaction) => {
-        for (const effect of transaction.effects) {
-          if (effect.is(scrollToBottomEffect)) {
-            scrollToBottom(view, effect.value);
+    EditorView5.updateListener.of(({ view, heightChanged, state }) => {
+      if (heightChanged) {
+        if (isPinned) {
+          const coords = view.coordsAtPos(view.state.doc.length);
+          const scrollerRect = view.scrollDOM.getBoundingClientRect();
+          const distanceFromBottom = coords ? scrollerRect.bottom - coords.bottom : 0;
+          if (distanceFromBottom < threshold) {
+            const shouldScroll = onAutoScroll?.({
+              view,
+              distanceFromBottom
+            }) ?? true;
+            if (shouldScroll) {
+              triggerUpdate(view);
+            }
+          } else if (distanceFromBottom < 0) {
+            setPinned(false);
           }
-        }
-      });
-      if (heightChanged && isPinned) {
-        const coords = view.coordsAtPos(view.state.doc.length);
-        const scrollerRect = view.scrollDOM.getBoundingClientRect();
-        const distanceFromBottom = coords ? scrollerRect.bottom - coords.bottom : 0;
-        if (autoScroll2 && distanceFromBottom < threshold) {
-          const shouldScroll = onAutoScroll?.({
-            view,
-            distanceFromBottom
-          }) ?? true;
-          if (shouldScroll) {
-            triggerUpdate(view);
+        } else {
+          if (state.doc.length === 0) {
+            setPinned(true);
           }
-        } else if (distanceFromBottom < 0) {
-          setPinned(false);
         }
       }
     }),
-    // Detect user scroll.
-    EditorView5.domEventHandlers({
-      scroll: (event, view) => {
-        const currentScrollTop = view.scrollDOM.scrollTop;
-        const scrollingUp = currentScrollTop < lastScrollTop;
-        lastScrollTop = currentScrollTop;
-        if (scrollingUp) {
-          setPinned(false);
-        } else {
-          checkDistance(view);
-        }
+    // Detect user scroll and unpin (or re-pin if scrolled to the bottom).
+    ViewPlugin6.fromClass(class {
+      cleanup;
+      constructor(view) {
+        this.cleanup = createUserScrollDetector(view.scrollDOM, () => {
+          requestAnimationFrame(() => {
+            const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+            const atBottom = scrollHeight - scrollTop - clientHeight < threshold;
+            setPinned(atBottom);
+          });
+        });
+      }
+      destroy() {
+        this.cleanup();
       }
     }),
     // Scroll button.
@@ -706,15 +694,22 @@ var autoScroll = ({ autoScroll: autoScroll2 = true, threshold = 100, throttleDel
     }),
     // Styles.
     EditorView5.theme({
-      ".cm-scroller": {
-        scrollbarWidth: "thin"
+      ".cm-content": {
+        paddingBottom: `${threshold}px`
       },
-      ".cm-scroller.cm-hide-scrollbar": {
-        scrollbarWidth: "none"
+      ".cm-scroller": {
+        paddingBottom: "0"
       },
       ".cm-scroller.cm-hide-scrollbar::-webkit-scrollbar": {
         display: "none"
       },
+      ".cm-scroller::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        transition: "background 0.15s"
+      },
+      "&:hover .cm-scroller::-webkit-scrollbar-thumb": {
+        background: "var(--dx-scrollbarThumb)"
+      },
       ".cm-scroll-button": {
         position: "absolute",
         bottom: "0.5rem",
@@ -723,6 +718,37 @@ var autoScroll = ({ autoScroll: autoScroll2 = true, threshold = 100, throttleDel
     })
   ];
 };
+function createUserScrollDetector(element, onUserScroll) {
+  return combine(addEventListener(element, "wheel", () => onUserScroll(), {
+    passive: true
+  }), addEventListener(element, "pointerdown", (event) => {
+    if (event.clientX > element.getBoundingClientRect().right - (element.offsetWidth - element.clientWidth)) {
+      onUserScroll();
+    }
+  }));
+}
+function intervalUntilQuiet(fn, interval) {
+  let timer = null;
+  let quietTimer = null;
+  let latestArgs;
+  return (...args) => {
+    latestArgs = args;
+    if (quietTimer) {
+      clearTimeout(quietTimer);
+    }
+    quietTimer = setTimeout(() => {
+      if (timer) {
+        clearInterval(timer);
+        timer = null;
+      }
+      quietTimer = null;
+    }, interval);
+    if (!timer) {
+      fn(...latestArgs);
+      timer = setInterval(() => fn(...latestArgs), interval);
+    }
+  };
+}
 
 // src/extensions/automerge/automerge.ts
 import { next as A3 } from "@automerge/automerge";
@@ -768,10 +794,10 @@ var cursorConverter = (accessor) => ({
 });
 
 // src/extensions/automerge/defs.ts
-import { Annotation, StateEffect as StateEffect3 } from "@codemirror/state";
+import { Annotation, StateEffect as StateEffect2 } from "@codemirror/state";
 var getPath = (state, field) => state.field(field).path;
 var getLastHeads = (state, field) => state.field(field).lastHeads;
-var updateHeadsEffect = StateEffect3.define({});
+var updateHeadsEffect = StateEffect2.define({});
 var updateHeads = (newHeads) => updateHeadsEffect.of({
   newHeads
 });
@@ -1806,13 +1832,13 @@ var blocks = () => [
 ];
 
 // src/extensions/bookmarks.ts
-import { Prec as Prec3, StateEffect as StateEffect4, StateField as StateField2 } from "@codemirror/state";
+import { Prec as Prec3, StateEffect as StateEffect3, StateField as StateField2 } from "@codemirror/state";
 import { keymap as keymap4 } from "@codemirror/view";
 import { log as log5 } from "@dxos/log";
 var __dxlog_file7 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/bookmarks.ts";
-var addBookmark = StateEffect4.define();
-var removeBookmark = StateEffect4.define();
-var clearBookmarks = StateEffect4.define();
+var addBookmark = StateEffect3.define();
+var removeBookmark = StateEffect3.define();
+var clearBookmarks = StateEffect3.define();
 var bookmarks = () => {
   return [
     bookmarksField,
@@ -1876,17 +1902,17 @@ var bookmarksField = StateField2.define({
 
 // src/extensions/comments.ts
 import { invertedEffects } from "@codemirror/commands";
-import { StateEffect as StateEffect5, StateField as StateField3 } from "@codemirror/state";
+import { StateEffect as StateEffect4, StateField as StateField3 } from "@codemirror/state";
 import { Decoration as Decoration7, EditorView as EditorView11, ViewPlugin as ViewPlugin10, hoverTooltip, keymap as keymap6 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
-import { debounce as debounce3 } from "@dxos/async";
+import { debounce as debounce2 } from "@dxos/async";
 import { log as log6 } from "@dxos/log";
 import { isNonNullable } from "@dxos/util";
 
 // src/extensions/selection.ts
 import { Transaction as Transaction3 } from "@codemirror/state";
 import { EditorView as EditorView10, keymap as keymap5 } from "@codemirror/view";
-import { debounce as debounce2 } from "@dxos/async";
+import { debounce } from "@dxos/async";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { isTruthy } from "@dxos/util";
 var __dxlog_file8 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/selection.ts";
@@ -1930,7 +1956,7 @@ var createEditorStateStore = (keyPrefix) => ({
   }
 });
 var selectionState = ({ getState, setState } = {}) => {
-  const setStateDebounced = debounce2(setState, 1e3);
+  const setStateDebounced = debounce(setState, 1e3);
   return [
     // TODO(burdon): Track scrolling (currently only updates when cursor moves).
     // EditorView.domEventHandlers({
@@ -1978,9 +2004,9 @@ var selectionState = ({ getState, setState } = {}) => {
 
 // src/extensions/comments.ts
 var __dxlog_file9 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/comments.ts";
-var setComments = StateEffect5.define();
-var setSelection = StateEffect5.define();
-var setCommentState = StateEffect5.define();
+var setComments = StateEffect4.define();
+var setSelection = StateEffect4.define();
+var setCommentState = StateEffect4.define();
 var commentsState = StateField3.define({
   create: (state) => ({
     id: state.facet(documentId),
@@ -2062,7 +2088,7 @@ var commentsDecorations = EditorView11.decorations.compute([
   }).filter(isNonNullable);
   return Decoration7.set(decorations2);
 });
-var commentClickedEffect = StateEffect5.define();
+var commentClickedEffect = StateEffect4.define();
 var handleCommentClick = EditorView11.domEventHandlers({
   click: (event, view) => {
     let target = event.target;
@@ -2180,7 +2206,7 @@ var mapTrackedComment = (comment, changes) => ({
   from: changes.mapPos(comment.from, 1),
   to: changes.mapPos(comment.to, 1)
 });
-var restoreCommentEffect = StateEffect5.define({
+var restoreCommentEffect = StateEffect4.define({
   map: mapTrackedComment
 });
 var createComment = (view) => {
@@ -2214,7 +2240,7 @@ var createComment = (view) => {
 var optionsFacet = singleValueFacet();
 var comments = (options = {}) => {
   const { key: shortcut = "meta-'" } = options;
-  const handleSelect = debounce3((state) => options.onSelect?.(state), 200);
+  const handleSelect = debounce2((state) => options.onSelect?.(state), 200);
   return [
     optionsFacet.of(options),
     options.id ? documentId.of(options.id) : void 0,
@@ -2485,6 +2511,9 @@ var fontMono = getToken("fontFamily.mono");
 
 // src/styles/theme.ts
 var baseTheme = EditorView13.baseTheme({
+  /**
+  * Outer frame.
+  */
   "&": {},
   "&.cm-focused": {
     outline: "none"
@@ -2492,8 +2521,17 @@ var baseTheme = EditorView13.baseTheme({
   /**
   * Scroller
   */
-  ".cm-scroller": {
-    overflowY: "auto"
+  ".cm-scroller": {},
+  ".cm-scroller::-webkit-scrollbar": {
+    width: "8px"
+  },
+  ".cm-scroller::-webkit-scrollbar-track": {},
+  ".cm-scroller::-webkit-scrollbar-thumb": {
+    background: "transparent",
+    transition: "background 0.15s"
+  },
+  "&:hover .cm-scroller::-webkit-scrollbar-thumb": {
+    background: "var(--dx-scrollbarThumb)"
   },
   /**
   * Content
@@ -2716,9 +2754,9 @@ var createFontTheme = ({ monospace } = {}) => EditorView13.theme({
 });
 
 // src/extensions/focus.ts
-import { StateEffect as StateEffect6, StateField as StateField5 } from "@codemirror/state";
+import { StateEffect as StateEffect5, StateField as StateField5 } from "@codemirror/state";
 import { EditorView as EditorView14 } from "@codemirror/view";
-var focusEffect = StateEffect6.define();
+var focusEffect = StateEffect5.define();
 var focusField = StateField5.define({
   create: () => false,
   update: (value, tr) => {
@@ -4484,7 +4522,7 @@ var convertTreeToJson = (state) => {
 
 // src/extensions/markdown/decorate.ts
 import { syntaxTree as syntaxTree7 } from "@codemirror/language";
-import { Prec as Prec4, RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect7 } from "@codemirror/state";
+import { Prec as Prec4, RangeSetBuilder as RangeSetBuilder5, StateEffect as StateEffect6 } from "@codemirror/state";
 import { Decoration as Decoration11, EditorView as EditorView23, ViewPlugin as ViewPlugin14, WidgetType as WidgetType7 } from "@codemirror/view";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { mx as mx6 } from "@dxos/ui-theme";
@@ -5439,7 +5477,7 @@ var buildDecorations2 = (view, options, focus2) => {
     atomicDeco: atomicDeco.finish()
   };
 };
-var forceUpdate = StateEffect7.define();
+var forceUpdate = StateEffect6.define();
 var decorateMarkdown = (options = {}) => {
   return [
     ViewPlugin14.fromClass(class {
@@ -5573,8 +5611,8 @@ var mention = ({ debug, onSearch }) => {
 };
 
 // src/extensions/modal.ts
-import { StateEffect as StateEffect8, StateField as StateField9 } from "@codemirror/state";
-var modalStateEffect = StateEffect8.define();
+import { StateEffect as StateEffect7, StateField as StateField9 } from "@codemirror/state";
+var modalStateEffect = StateEffect7.define();
 var modalStateField = StateField9.define({
   create: () => false,
   update: (value, tr) => {
@@ -6392,7 +6430,7 @@ var editor = () => [
 
 // src/extensions/outliner/menu.ts
 import { EditorView as EditorView24, ViewPlugin as ViewPlugin16 } from "@codemirror/view";
-import { addEventListener } from "@dxos/async";
+import { addEventListener as addEventListener2 } from "@dxos/async";
 var menu = (options = {}) => [
   ViewPlugin16.fromClass(class {
     view;
@@ -6414,7 +6452,7 @@ var menu = (options = {}) => [
       }
       container.appendChild(this.tag);
       const handler = () => this.scheduleUpdate();
-      this.cleanup = addEventListener(container, "scroll", handler);
+      this.cleanup = addEventListener2(container, "scroll", handler);
       this.scheduleUpdate();
     }
     destroy() {
@@ -6892,7 +6930,7 @@ var mixedParser = (registry) => {
 };
 
 // src/extensions/tags/streamer.ts
-import { StateEffect as StateEffect9, StateField as StateField12 } from "@codemirror/state";
+import { StateEffect as StateEffect8, StateField as StateField12 } from "@codemirror/state";
 import { Decoration as Decoration14, EditorView as EditorView28, ViewPlugin as ViewPlugin18, WidgetType as WidgetType9 } from "@codemirror/view";
 import { Domino as Domino3 } from "@dxos/ui";
 import { isTruthy as isTruthy4 } from "@dxos/util";
@@ -6904,7 +6942,7 @@ var streamer = (options = {}) => {
   ].filter(isTruthy4);
 };
 var cursor = () => {
-  const hideCursor = StateEffect9.define();
+  const hideCursor = StateEffect8.define();
   const showCursor = StateField12.define({
     create: () => true,
     update: (value, tr) => {
@@ -6976,7 +7014,7 @@ var fadeIn = (options = {}) => {
   const FADE_IN_DURATION = 1e3;
   const DEFAULT_REMOVAL_DELAY = 5e3;
   const removalDelay = options.removalDelay ?? DEFAULT_REMOVAL_DELAY;
-  const removeDecoration = StateEffect9.define();
+  const removeDecoration = StateEffect8.define();
   const fadeField = StateField12.define({
     create: () => Decoration14.none,
     update: (decorations2, tr) => {
@@ -7086,7 +7124,7 @@ var fadeIn = (options = {}) => {
 
 // src/extensions/tags/xml-tags.ts
 import { syntaxTree as syntaxTree11 } from "@codemirror/language";
-import { Prec as Prec7, RangeSetBuilder as RangeSetBuilder7, StateEffect as StateEffect10, StateField as StateField13 } from "@codemirror/state";
+import { Prec as Prec7, RangeSetBuilder as RangeSetBuilder7, StateEffect as StateEffect9, StateField as StateField13 } from "@codemirror/state";
 import { Decoration as Decoration15, EditorView as EditorView29, ViewPlugin as ViewPlugin19, WidgetType as WidgetType10, keymap as keymap13 } from "@codemirror/view";
 import { invariant as invariant7 } from "@dxos/invariant";
 import { log as log10 } from "@dxos/log";
@@ -7161,15 +7199,15 @@ var nodeToJson = (state, node) => {
 
 // src/extensions/tags/xml-tags.ts
 var __dxlog_file16 = "/__w/dxos/dxos/packages/ui/ui-editor/src/extensions/tags/xml-tags.ts";
-var navigatePreviousEffect = StateEffect10.define();
-var navigateNextEffect = StateEffect10.define();
+var navigatePreviousEffect = StateEffect9.define();
+var navigateNextEffect = StateEffect9.define();
 var getXmlTextChild = (children) => {
   const child = children?.[0];
   return typeof child === "string" ? child : null;
 };
-var xmlTagContextEffect = StateEffect10.define();
-var xmlTagResetEffect = StateEffect10.define();
-var xmlTagUpdateEffect = StateEffect10.define();
+var xmlTagContextEffect = StateEffect9.define();
+var xmlTagResetEffect = StateEffect9.define();
+var xmlTagUpdateEffect = StateEffect9.define();
 var widgetContextStateField = StateField13.define({
   create: () => void 0,
   update: (value, tr) => {
@@ -7739,7 +7777,6 @@ export {
   removeStyle,
   replacer,
   scrollThreadIntoView,
-  scrollToBottomEffect,
   scrollToLine,
   scrollToLineEffect,
   selectionState,