chore(line-numbers): granular dom updates

src/core/islands/Panel.mjs

@@ -9,6 +9,9 @@ import { Tooltip } from "./Tooltip.mjs";
 import { TopbarButton } from "./TopbarButton.mjs";
 import { Select } from "../menu/islands/Select.mjs";
 
+const topbarId = "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
+  coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082";
+
 // note: these islands are not reusable.
 // panel views can be added via addPanelView,
 // do not instantiate additional panels
@@ -135,8 +138,7 @@ function Panel({
       </aside>
     </div>`;
 
-  const topbarId = "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
-    topbarFavorite = ".notion-topbar .notion-topbar-favorite-button",
+  const topbarFavorite = ".notion-topbar .notion-topbar-favorite-button",
     $topbarToggle = html`<${TopbarButton}
       aria-label="Toggle side panel"
       icon="panel-right"
@@ -207,7 +209,11 @@ function Panel({
 
   const animationState = { ...closedWidth },
     animate = ($target, keyframes) => {
-      const opts = { fill: "forwards", duration: transitionDuration, easing: "ease" };
+      const opts = {
+        fill: "forwards",
+        duration: transitionDuration,
+        easing: "ease",
+      };
       $target.animate(keyframes, opts);
     },
     animatePanel = (to) => {
@@ -278,12 +284,11 @@ function Panel({
   // hovering over the peek trigger will temporarily
   // pop out an interactive preview of the panel
   let _peekDebounce, _peekPanelOnHover;
-  const coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
-    $peekTrigger = html`<div
-      class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
+  const $peekTrigger = html`<div
+    class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
     group-[&[data-peeked]]/panel:(w-[calc(var(--panel--width,0)+8px)])
     group-[&[data-pinned]]/panel:(w-[calc(var(--panel--width,0)+8px)])"
-    ></div>`;
+  ></div>`;
   modDatabase(coreId).then(async (db) => {
     _peekPanelOnHover = await db.get("peekPanelOnHover");
     if (_peekPanelOnHover) $panel.prepend($peekTrigger);

src/extensions/line-numbers/client.mjs

@@ -5,11 +5,14 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-function LineNumber({ number, height, ...props }) {
+function LineNumbers() {
   const { html } = globalThis.__enhancerApi;
-  return html`<span class="block text-right" style="height:${height}px">
-    ${number}
-  </span>`;
+  return html`<div
+    class="notion-enhancer--line-numbers flex-grow
+    text-([85%] [var(--theme--fg-secondary)] right)
+    font-[var(--font--code)] pt-[34px] pb-[32px]
+    overflow-hidden"
+  ></div>`;
 }
 
 export default async (api, db) => {
@@ -17,61 +20,75 @@ export default async (api, db) => {
     numberSingleLines = await db.get("numberSingleLines"),
     lineNumberDecoration = await db.get("lineNumberDecoration"),
     lineNumbersClass = "notion-enhancer--line-numbers",
-    codeBlockSelector = ".notion-code-block.line-numbers";
+    codeBlockSelector = ".notion-code-block.line-numbers > .notranslate";
+
+  // get character width in pixels
+  const getCharWidth = ($elem) => {
+      const $char = html`<span style="width:1ch"> </span>`;
+      $elem.append($char);
+      const charWidth = getComputedStyle($char).getPropertyValue("width");
+      $char.remove();
+      return parseFloat(charWidth);
+    },
+    // get line width in pixels
+    getLineWidth = ($elem) =>
+      parseFloat(getComputedStyle($elem).getPropertyValue("width")) -
+      parseFloat(getComputedStyle($elem).getPropertyValue("padding-left")) -
+      parseFloat(getComputedStyle($elem).getPropertyValue("padding-right")),
+    // get line height in pixels
+    getLineHeight = ($elem) =>
+      parseFloat(getComputedStyle($elem).getPropertyValue("line-height")),
+    // update inline styles without unnecessary dom updates
+    applyStyles = ($elem, styles) => {
+      for (const property in styles) {
+        if ($elem.style[property] === styles[property]) continue;
+        $elem.style[property] = styles[property];
+      }
+    };
 
   const numberLines = () => {
-    for (const $block of document.querySelectorAll(codeBlockSelector)) {
-      const $code = $block.lastElementChild,
-        computedStyles = getComputedStyle($code);
-
+    for (const $code of document.querySelectorAll(codeBlockSelector)) {
       const wrap = $code.style.wordBreak === "break-all",
         lines = $code.innerText.split("\n"),
         lineCount = Math.max(lines.length - 1, 1),
         lineNumDigits = (Math.log(lineCount) * Math.LOG10E + 1) | 0;
 
-      const update =
-        parseInt($block.dataset.lines) !== lineCount ||
-        $block.dataset.wrap !== String(wrap);
-      if (!update) continue;
-      $block.dataset.lines = lineCount;
-      $block.dataset.wrap = wrap;
+      const doUpdate =
+        $code.dataset.lines !== String(lineCount) ||
+        $code.dataset.wrap !== String(wrap);
+      if (!doUpdate) continue;
+      $code.dataset.lines = lineCount;
+      $code.dataset.wrap = wrap;
 
       // shrink block to allow space for numbers
-      $block.style.justifyContent = "flex-end";
-      $code.style.minWidth = `calc(100% - 32px - ${lineNumDigits}ch)`;
-      $code.style.maxWidth = $code.style.minWidth;
-
-      // get 1ch in pixels
-      const $tmp = html`<span style="width:1ch"> </span>`;
-      $code.append($tmp);
-      const charWidth = getComputedStyle($tmp).getPropertyValue("width");
-      $tmp.remove();
+      const width = `calc(100% - 32px - ${lineNumDigits}ch)`;
+      applyStyles($code.parentElement, { justifyContent: "flex-end" });
+      applyStyles($code, { minWidth: width, maxWidth: width });
 
       // work out height of wrapped lines
-      const lineWidth =
-          parseFloat(computedStyles.getPropertyValue("width")) -
-          parseFloat(computedStyles.getPropertyValue("padding-left")) -
-          parseFloat(computedStyles.getPropertyValue("padding-right")),
-        charsPerLine = Math.floor(lineWidth / parseFloat(charWidth)),
-        lineHeight = parseFloat(computedStyles.getPropertyValue("line-height"));
+      const lineHeight = getLineHeight($code),
+        charsPerLine = Math.floor(getLineWidth($code) / getCharWidth($code));
 
-      const $numbers = html`<div
-        class="${lineNumbersClass} font-[var(--font--code)] flex-grow
-          text-([85%] [var(--theme--fg-secondary)] right) pt-[34px] pb-[32px]"
-      ></div>`;
+      // update line numbers in dom
+      let totalHeight = 34;
+      $code._$lineNumbers ||= LineNumbers();
       for (let i = 1; i <= lineCount; i++) {
-        let lineSpan = 1;
-        if (wrap) lineSpan = Math.ceil(lines[i - 1].length / charsPerLine);
-        $numbers.append(
-          html`<${LineNumber}
-            number=${i}
-            height=${(lineSpan || 1) * lineHeight}
-          />`
-        );
+        let $n = $code._$lineNumbers.children[i - 1];
+        if (!$n) {
+          $n = html`<span class="block text-right">${i}</span>`;
+          $code._$lineNumbers.append($n);
+        }
+        const height =
+          wrap && lines[i - 1].length > charsPerLine
+            ? Math.ceil(lines[i - 1].length / charsPerLine) * lineHeight
+            : lineHeight;
+        applyStyles($n, { height: `${height}px` });
+        totalHeight += height;
       }
+      applyStyles($code._$lineNumbers, { height: `${totalHeight}px` });
 
-      const $prev = $block.getElementsByClassName(lineNumbersClass)[0];
-      $prev ? $prev.replaceWith($numbers) : $block.prepend($numbers);
+      if (!document.contains($code._$lineNumbers))
+        $code.before($code._$lineNumbers);
     }
   };
 

src/extensions/tweaks/client.css

@@ -1,18 +1,44 @@
 /**
  * notion-enhancer: tweaks
- * (c) 2024 1280px
  * (c) 2020 Arecsu
+ * (c) 2024 1280px
  * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+/* interface */
+
+/* pages */
+
+body[data-tweaks*=",normalisedDatabaseScrolling,"] {
+  .notion-page-content {
+    .notion-collection_view-block {
+      width: 100% !important;
+    }
+    .notion-board-view {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+    :is(.notion-collection_view-block, .notion-collection-view-body)
+      > [style*="padding"] {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      min-width: auto !important;
+    }
+  }
+}
+
+/* typography */
+
 .enhancer--tweak-responsive_breakpoint
   .notion-column_list-block
-  [style='display: flex;']
+  [style="display: flex;"]
   > div {
   width: 100% !important;
 }
-.enhancer--tweak-responsive_breakpoint .notion-column_list-block [style='display: flex;'] {
+.enhancer--tweak-responsive_breakpoint
+  .notion-column_list-block
+  [style="display: flex;"] {
   flex-direction: column !important;
 }
 .enhancer--tweak-responsive_breakpoint .notion-app-inner,
@@ -21,29 +47,6 @@
   --theme--page-padding: calc(48px + env(safe-area-inset-left));
 }
 
-.enhancer--tweak-normalise_table_scroll
-  .notion-frame
-  .notion-page-content
-  .notion-collection_view-block,
-.enhancer--tweak-normalise_table_scroll .notion-peek-renderer .notion-collection_view-block,
-.enhancer--tweak-normalise_table_scroll
-  .notion-page-template-modal
-  .notion-collection_view-block,
-.enhancer--tweak-normalise_table_dscroll .notion-collection-view-body .notion-table-view {
-  width: 100% !important;
-  padding: 0 !important;
-}
-.enhancer--tweak-normalise_table_scroll
-  .notion-collection_view-block
-  > [contenteditable]
-  > .notion-scroller
-  > [class$='view'][style*='padding'],
-.enhancer--tweak-normalise_table_scroll
-  .notion-collection_view-block
-  > :first-child[style*='padding-right'] {
-  padding: 1px !important;
-}
-
 .enhancer--tweak-snappy_transitions * {
   animation-duration: 0s !important;
   transition-duration: 0s !important;
@@ -57,26 +60,39 @@
 }
 
 .enhancer--tweak-hide_slash_for_commands [contenteditable]:empty:after {
-  content: ' ' !important;
+  content: " " !important;
 }
 
 .enhancer--tweak-hide_default_page_icons
-  .notion-sidebar a > div > div:has(.notion-record-icon svg.page),
+  .notion-sidebar
+  a
+  > div
+  > div:has(.notion-record-icon svg.page),
 .enhancer--tweak-hide_default_page_icons
-  .layout a > div > div > div > div:has(.notion-record-icon svg.page) {
+  .layout
+  a
+  > div
+  > div
+  > div
+  > div:has(.notion-record-icon svg.page) {
   display: none !important;
 }
 
-.enhancer--tweak-thicker_bold .notion-page-content span[style*='font-weight:600'] {
+.enhancer--tweak-thicker_bold
+  .notion-page-content
+  span[style*="font-weight:600"] {
   font-weight: 700 !important;
 }
 
-.enhancer--tweak-spaced_lines .notion-page-content .notion-selectable.notion-text-block {
+.enhancer--tweak-spaced_lines
+  .notion-page-content
+  .notion-selectable.notion-text-block {
   line-height: 1.65 !important;
   margin-top: 0.75em !important;
 }
 
-.enhancer--tweak-condensed_bullets .notion-selectable.notion-bulleted_list-block {
+.enhancer--tweak-condensed_bullets
+  .notion-selectable.notion-bulleted_list-block {
   margin-top: -1.5px !important;
   margin-bottom: -1.5px !important;
 }
@@ -85,12 +101,12 @@
   border-bottom: none !important;
 }
 .enhancer--tweak-bracketed_links .notion-link-token:before {
-  content: '[[';
+  content: "[[";
   opacity: 0.7;
   transition: opacity 100ms ease-in;
 }
 .enhancer--tweak-bracketed_links .notion-link-token:after {
-  content: ']]';
+  content: "]]";
   opacity: 0.7;
   transition: opacity 100ms ease-in;
 }
@@ -102,32 +118,42 @@
 .enhancer--tweak-accented_links .notion-link-token {
   color: var(--theme--accent_blue) !important;
 }
-.enhancer--tweak-accented_links .notion-link-token span[style*='border-bottom:0.05em'] {
+.enhancer--tweak-accented_links
+  .notion-link-token
+  span[style*="border-bottom:0.05em"] {
   opacity: 1 !important;
   border-color: var(--theme--accent_blue) !important;
 }
 
 .enhancer--tweak-quotation_marks
   .notion-quote-block
-  [style*='border-left: 3px solid currentcolor;'] {
+  [style*="border-left: 3px solid currentcolor;"] {
   position: relative;
   padding-left: 24px !important;
   padding-right: 18px !important;
 }
-.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::before,
-.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::after {
+.enhancer--tweak-quotation_marks
+  .notion-quote-block
+  [placeholder="Empty quote"]::before,
+.enhancer--tweak-quotation_marks
+  .notion-quote-block
+  [placeholder="Empty quote"]::after {
   font-family: Georgia, serif;
   font-size: 24px;
   font-weight: bold;
   position: absolute;
 }
-.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::before {
-  content: '\201C';
+.enhancer--tweak-quotation_marks
+  .notion-quote-block
+  [placeholder="Empty quote"]::before {
+  content: "\201C";
   left: 8px;
   top: -2px;
 }
-.enhancer--tweak-quotation_marks .notion-quote-block [placeholder='Empty quote']::after {
-  content: '\201D';
+.enhancer--tweak-quotation_marks
+  .notion-quote-block
+  [placeholder="Empty quote"]::after {
+  content: "\201D";
   right: 2px;
   bottom: -2px;
 }

src/extensions/tweaks/client.mjs

@@ -1,56 +1,17 @@
 /**
  * notion-enhancer: tweaks
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-'use strict';
+const tweaksId = "5174a483-c88d-4bf8-a95f-35cd330b76e2";
+export default async (api, db) => {
+  const { getMods } = api,
+    [{ options }] = await getMods((mod) => mod.id === tweaksId),
+    tweaks = options.filter((opt) => opt.key).map((opt) => opt.key);
 
-export default async function ({ web }, db) {
-  const cssInsert = await db.get(['insert.css']);
-  if (cssInsert?.filename) {
-    document.head.append(
-      web.html`<style id="enhancer--tweak-${cssInsert.filename}">${cssInsert.content}</style>`
-    );
-  }
-
-  const responsiveBreakpointPx = +(await db.get(['tweak.responsive_breakpoint_px'])),
-    responsiveBreakpointPercent =
-      screen.width * 0.01 * (await db.get(['tweak.responsive_breakpoint_percent'])),
-    addResponsiveBreakpoint = () => {
-      document.body.classList.remove('enhancer--tweak-responsive_breakpoint');
-      if (
-        window.innerWidth <= responsiveBreakpointPx ||
-        window.innerWidth <= responsiveBreakpointPercent
-      ) {
-        document.body.classList.add('enhancer--tweak-responsive_breakpoint');
-      }
-    };
-  addEventListener('resize', addResponsiveBreakpoint);
-  addResponsiveBreakpoint();
-
-  const tweaks = [
-    'full_width_pages',
-    'normalise_table_scroll',
-    'hide_help',
-    'hide_slash_for_commands',
-    'hide_default_page_icons',
-    'snappy_transitions',
-    'thicker_bold',
-    'spaced_lines',
-    'condensed_bullets',
-    'bracketed_links',
-    'accented_links',
-    'quotation_marks',
-  ];
-  for (const tweak of tweaks) {
-    if (await db.get([`tweak.${tweak}`])) {
-      document.body.classList.add(`enhancer--tweak-${tweak}`);
-    }
-  }
-
-  const imgAlignment = await db.get(['tweak.img_alignment']);
-  if (imgAlignment !== 'center') {
-    document.body.classList.add(`enhancer--tweak-img_alignment-${imgAlignment}`);
-  }
-}
+  // inc. leading & trailing comma for selectors (see client.css)
+  let enabled = ",";
+  for (const tweak of tweaks) if (await db.get(tweak)) enabled += tweak + ",";
+  document.body.dataset.tweaks = enabled;
+};

src/extensions/tweaks/mod.json

@@ -59,9 +59,9 @@
     },
     {
       "type": "toggle",
-      "key": "normalisedTableScrolling",
-      "description": "Forces horizontally scrollable inline tables to respect the width and padding of a page when they overflow.",
-      "value": false
+      "key": "normalisedDatabaseScrolling",
+      "description": "Forces horizontally scrollable inline tables to respect the width and padding of a page when they overflow. Enabling this is recommended if you are using panel mods, otherwise databases may overflow.",
+      "value": true
     },
     {
       "type": "number",
@@ -130,5 +130,7 @@
       "description": "Changes the default horizontal alignment of images embedded within pages. Note that this replaces Notion's built-in central alignment, i.e. setting this to left or right will remove the option to centre images entirely.",
       "values": ["Centre", "Left", "Right"]
     }
-  ]
+  ],
+  "clientStyles": ["client.css"],
+  "clientScripts": ["client.mjs"]
 }

src/init.js

@@ -6,12 +6,13 @@
 
 "use strict";
 
-const isElectron = () => {
-  try {
-    return typeof module !== "undefined";
-  } catch {}
-  return false;
-};
+const coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
+  isElectron = () => {
+    try {
+      return typeof module !== "undefined";
+    } catch {}
+    return false;
+  };
 
 if (isElectron()) {
   require("./api/system.js");
@@ -38,8 +39,8 @@ if (isElectron()) {
 
         // register user-provided javascript for execution in-app
         if (target === ".webpack/renderer/tab_browser_view/preload.js") {
-          const { webFrame } = require("electron"),
-            db = await modDatabase("0f0bf8b6-eae6-4273-b307-8fc43f2ee082"),
+          const db = await modDatabase(coreId),
+            { webFrame } = require("electron"),
             customScript = (await db.get("customScript"))?.content;
           if (customScript) webFrame.executeJavaScript(customScript);
         }
@@ -52,8 +53,12 @@ if (isElectron()) {
       const db = await modDatabase(mod.id);
       for (let [scriptTarget, script] of mod.electronScripts ?? []) {
         if (target !== scriptTarget) continue;
-        script = require(`./${mod._src}/${script}`);
-        script(__getApi(), db, __exports, __eval);
+        try {
+          script = require(`./${mod._src}/${script}`);
+          script(__getApi(), db, __exports, __eval);
+        } catch (err) {
+          console.error(err);
+        }
       }
     }
   };

src/load.mjs

@@ -72,7 +72,8 @@ export default (async () => {
       Promise.resolve(isCore || API_LOADED)
         .then(() => import(enhancerUrl(`${mod._src}/${script}`)))
         .then((script) => script.default(globalThis.__enhancerApi, db))
-        .then(() => !isCore || globalThis.__enhancerApi.onReady?.());
+        .then(() => !isCore || globalThis.__enhancerApi.onReady?.())
+        .catch((err) => console.error(err));
     }
   }