src/core/islands/Panel.mjs

@@ -9,9 +9,6 @@ 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
@@ -138,7 +135,8 @@ function Panel({
       </aside>
     </div>`;
 
-  const topbarFavorite = ".notion-topbar .notion-topbar-favorite-button",
+  const topbarId = "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
+    topbarFavorite = ".notion-topbar .notion-topbar-favorite-button",
     $topbarToggle = html`<${TopbarButton}
       aria-label="Toggle side panel"
       icon="panel-right"
@@ -209,11 +207,7 @@ 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) => {
@@ -284,11 +278,12 @@ function Panel({
   // hovering over the peek trigger will temporarily
   // pop out an interactive preview of the panel
   let _peekDebounce, _peekPanelOnHover;
-  const $peekTrigger = html`<div
-    class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
+  const coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
+    $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,14 +5,11 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-function LineNumbers() {
+function LineNumber({ number, height, ...props }) {
   const { html } = globalThis.__enhancerApi;
-  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>`;
+  return html`<span class="block text-right" style="height:${height}px">
+    ${number}
+  </span>`;
 }
 
 export default async (api, db) => {
@@ -20,75 +17,61 @@ 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 > .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];
-      }
-    };
+    codeBlockSelector = ".notion-code-block.line-numbers";
 
   const numberLines = () => {
-    for (const $code of document.querySelectorAll(codeBlockSelector)) {
+    for (const $block of document.querySelectorAll(codeBlockSelector)) {
+      const $code = $block.lastElementChild,
+        computedStyles = getComputedStyle($code);
+
       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 doUpdate =
-        $code.dataset.lines !== String(lineCount) ||
-        $code.dataset.wrap !== String(wrap);
-      if (!doUpdate) continue;
-      $code.dataset.lines = lineCount;
-      $code.dataset.wrap = wrap;
+      const update =
+        parseInt($block.dataset.lines) !== lineCount ||
+        $block.dataset.wrap !== String(wrap);
+      if (!update) continue;
+      $block.dataset.lines = lineCount;
+      $block.dataset.wrap = wrap;
 
       // shrink block to allow space for numbers
-      const width = `calc(100% - 32px - ${lineNumDigits}ch)`;
-      applyStyles($code.parentElement, { justifyContent: "flex-end" });
-      applyStyles($code, { minWidth: width, maxWidth: width });
+      $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();
 
       // work out height of wrapped lines
-      const lineHeight = getLineHeight($code),
-        charsPerLine = Math.floor(getLineWidth($code) / getCharWidth($code));
+      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"));
 
-      // update line numbers in dom
-      let totalHeight = 34;
-      $code._$lineNumbers ||= LineNumbers();
+      const $numbers = html`<div
+        class="${lineNumbersClass} font-[var(--font--code)] flex-grow
+          text-([85%] [var(--theme--fg-secondary)] right) pt-[34px] pb-[32px]"
+      ></div>`;
       for (let i = 1; i <= lineCount; i++) {
-        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;
+        let lineSpan = 1;
+        if (wrap) lineSpan = Math.ceil(lines[i - 1].length / charsPerLine);
+        $numbers.append(
+          html`<${LineNumber}
+            number=${i}
+            height=${(lineSpan || 1) * lineHeight}
+          />`
+        );
       }
-      applyStyles($code._$lineNumbers, { height: `${totalHeight}px` });
 
-      if (!document.contains($code._$lineNumbers))
-        $code.before($code._$lineNumbers);
+      const $prev = $block.getElementsByClassName(lineNumbersClass)[0];
+      $prev ? $prev.replaceWith($numbers) : $block.prepend($numbers);
     }
   };
 

src/extensions/tweaks/client.css

@@ -1,44 +1,18 @@
 /**
  * notion-enhancer: tweaks
- * (c) 2020 Arecsu
  * (c) 2024 1280px
+ * (c) 2020 Arecsu
  * (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,
@@ -47,6 +21,29 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] {
   --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;
@@ -60,39 +57,26 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] {
 }
 
 .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;
 }
@@ -101,12 +85,12 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] {
   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;
 }
@@ -118,42 +102,32 @@ body[data-tweaks*=",normalisedDatabaseScrolling,"] {
 .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,17 +1,56 @@
 /**
  * notion-enhancer: tweaks
- * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-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);
+'use strict';
 
-  // 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;
-};
+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}`);
+  }
+}

src/extensions/tweaks/mod.json

@@ -59,9 +59,9 @@
     },
     {
       "type": "toggle",
-      "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
+      "key": "normalisedTableScrolling",
+      "description": "Forces horizontally scrollable inline tables to respect the width and padding of a page when they overflow.",
+      "value": false
     },
     {
       "type": "number",
@@ -130,7 +130,5 @@
       "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,13 +6,12 @@
 
 "use strict";
 
-const coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
-  isElectron = () => {
-    try {
-      return typeof module !== "undefined";
-    } catch {}
-    return false;
-  };
+const isElectron = () => {
+  try {
+    return typeof module !== "undefined";
+  } catch {}
+  return false;
+};
 
 if (isElectron()) {
   require("./api/system.js");
@@ -39,8 +38,8 @@ if (isElectron()) {
 
         // register user-provided javascript for execution in-app
         if (target === ".webpack/renderer/tab_browser_view/preload.js") {
-          const db = await modDatabase(coreId),
-            { webFrame } = require("electron"),
+          const { webFrame } = require("electron"),
+            db = await modDatabase("0f0bf8b6-eae6-4273-b307-8fc43f2ee082"),
             customScript = (await db.get("customScript"))?.content;
           if (customScript) webFrame.executeJavaScript(customScript);
         }
@@ -53,12 +52,8 @@ if (isElectron()) {
       const db = await modDatabase(mod.id);
       for (let [scriptTarget, script] of mod.electronScripts ?? []) {
         if (target !== scriptTarget) continue;
-        try {
-          script = require(`./${mod._src}/${script}`);
-          script(__getApi(), db, __exports, __eval);
-        } catch (err) {
-          console.error(err);
-        }
+        script = require(`./${mod._src}/${script}`);
+        script(__getApi(), db, __exports, __eval);
       }
     }
   };

src/load.mjs

@@ -72,8 +72,7 @@ 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?.())
-        .catch((err) => console.error(err));
+        .then(() => !isCore || globalThis.__enhancerApi.onReady?.());
     }
   }