fix: position floating buttons relative to help button without wrapping it

(changing help button dom parent makes notion error when inserting elements relative to it)

src/api/interface.mjs

@@ -287,7 +287,6 @@ const _tokens = new Set(),
     if (_stylesheet.innerHTML !== res.css) _stylesheet.innerHTML = res.css;
   };
 addMutationListener("*", (mutation) => {
-  const targets = [];
   if (mutation.type === "childList") {
     for (const node of mutation.addedNodes) extractTokens(node);
   } else if (mutation.type === "attributes") extractTokens(mutation.target);

src/core/islands/FloatingButton.mjs

@@ -9,19 +9,23 @@ const setupWrapper = () => {
     const notionHelp = ".notion-help-button",
       { html, addMutationListener } = globalThis.__enhancerApi,
       { removeMutationListener } = globalThis.__enhancerApi;
-    return (__$wrapper ??= new Promise((res, rej) => {
+    return (__$wrapper ??= new Promise((res) => {
       const addToDom = () => {
         const $help = document.querySelector(notionHelp);
         if (!$help) return;
-        const $wrapper = html`<div
+        const gap = 12,
-          class="notion-enhancer--floating-buttons z-50
+          computedStyles = getComputedStyle($help),
-          absolute bottom-[calc(26px+env(safe-area-inset-bottom))]
+          visible = computedStyles.getPropertyValue("display") !== "none",
-          flex gap-[12px] important:[&>.notion-help-button]:static"
+          width = computedStyles.getPropertyValue("width"),
-          style="right:${$help.style.right}"
+          right = computedStyles.getPropertyValue("right"),
-        ></div>`;
+          offset = visible ? parseInt(width) + parseInt(right) + gap : 26,
+          $wrapper = html`<div
+            class="notion-enhancer--floating-buttons z-50 gap-[${gap}px]
+            flex absolute bottom-[calc(26px+env(safe-area-inset-bottom))]"
+            style="right:${offset}px"
+          ></div>`;
         removeMutationListener(addToDom);
-        $help.replaceWith($wrapper);
+        $help.after($wrapper);
-        $wrapper.append($help);
         res($wrapper);
       };
       addMutationListener(notionHelp, addToDom);

src/core/islands/Panel.mjs

@@ -303,22 +303,34 @@ function Panel({
   // moves help button out of the way of open panel.
   // normally would place outside of an island, but in
   // this case is necessary for syncing up animations
-  const floatingButtons =
+  const notionHelp = ".notion-help-button",
-      ".notion-enhancer--floating-buttons, .notion-help-button",
+    floatingButtons = ".notion-enhancer--floating-buttons",
-    repositionFloatingButtons = async (width) => {
+    repositionCorner = async (offset) => {
-      const $floatingButtons = document.querySelector(floatingButtons);
+      const $help = document.querySelector(notionHelp),
-      if (!$floatingButtons) return;
+        $floating = document.querySelector(floatingButtons);
-      width ??= await getWidth();
+      offset ??= await getWidth();
-      if (isNaN(width)) width = minWidth;
+      if (isNaN(offset)) offset = minWidth;
-      if (!isPinned()) width = 0;
+      if (!isPinned()) offset = 0;
-      const to = `${26 + width}px`,
+      // offset help from panel edge
-        from = $floatingButtons.style.getPropertyValue("right");
+      offset += 26;
-      if (from === to) return;
+      for (const $btn of [$help, $floating]) {
-      $floatingButtons.style.setProperty("right", to);
+        if (!$btn) continue;
-      animate($floatingButtons, [({ right: from }, { right: to })]);
+        const computedStyles = getComputedStyle($btn),
-      removeMutationListener(repositionFloatingButtons);
+          visible = computedStyles.getPropertyValue("display") !== "none";
+        if (!visible) continue;
+        const width = computedStyles.getPropertyValue("width"),
+          from = computedStyles.getPropertyValue("right"),
+          to = offset + "px";
+        // offset floating buttons from help
+        offset += 12 + parseInt(width);
+        if (from === to) continue;
+        $btn.style.setProperty("right", to);
+        animate($btn, [({ right: from }, { right: to })]);
+      }
+      if ($help || $floating) removeMutationListener(repositionCorner);
     };
-  addMutationListener(floatingButtons, repositionFloatingButtons);
+  const corner = `${notionHelp}, ${floatingButtons}`;
+  addMutationListener(corner, repositionCorner, { subtree: false });
 
   $panel.pin = () => {
     if (isPinned() || !panelViews.length) return;
@@ -380,7 +392,7 @@ function Panel({
     const $parent = $panel.parentElement || $panel;
     $parent.style.setProperty("--panel--width", `${width}px`);
     if ($parent !== $panel) $panel.style.removeProperty("--panel--width");
-    repositionFloatingButtons(width);
+    repositionCorner(width);
   };
 
   useState(["panelViews"], async ([panelViews = []]) => {

src/extensions/outliner/client.mjs

@@ -11,7 +11,7 @@ import { PanelDescription } from "./islands/PanelDescription.mjs";
 export default async (api, db) => {
   const { html, debounce, addMutationListener, addPanelView } = api,
     behavior = (await db.get("smoothScrolling")) ? "smooth" : "auto",
-    scroller = ".notion-frame > .notion-scroller",
+    scroller = ".notion-frame .notion-scroller",
     equation = ".notion-text-equation-token",
     annotation = (await db.get("equationRendering"))
       ? ".katex-html"
@@ -78,10 +78,9 @@ export default async (api, db) => {
         $heading._$outline = html`<${Heading}
           indent=${getHeadingLevel($heading)}
           onclick=${() => {
-            $scroller.scrollTo({
+            if (!$scroller) return;
-              top: getBlockOffset($heading) - 24,
+            const top = getBlockOffset($heading) - 24;
-              behavior,
+            $scroller.scrollTo({ top, behavior });
-            });
           }}
           >${getHeadingTitle($heading)}
         <//>`;
@@ -96,6 +95,7 @@ export default async (api, db) => {
       size-[6px] rounded-full bg-[color:var(--theme--fg-secondary)]"
     ></span>`,
     onScroll = () => {
+      if (!$scroller) return;
       const $h = getHeadings().find(($h) => {
         return $scroller.scrollTop < getBlockOffset($h) - 16;
       })?._$outline;

src/extensions/scroller/client.mjs

@@ -1,5 +1,5 @@
 /**
- * notion-enhancer: scroll to top
+ * notion-enhancer: scroller
  * (c) 2021 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
  * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
@@ -14,7 +14,7 @@ export default async (api, db) => {
     distanceUntilShown = await db.get("distanceUntilScrollToTopShown"),
     scrollUnit = await db.get("scrollDistanceUnit"),
     behavior = (await db.get("smoothScrolling")) ? "smooth" : "auto",
-    scroller = ".notion-frame > .notion-scroller";
+    scroller = ".notion-frame .notion-scroller";
 
   let $scroller;
   const scrollTo = (top) => $scroller?.scroll({ top, behavior }),

src/extensions/tweaks/mod.json

@@ -21,7 +21,7 @@
     },
     {
       "type": "toggle",
-      "key": "HidelashMenu",
+      "key": "hideSlashMenu",
       "description": "Hide the commands popup when typing '/'.",
       "value": false
     },