feat(line-numbers): calc size + pos of numbers for wrapped code

- fix: #900, #897
- todo: optimise
- todo: re-implement styles/opts

src/extensions/code-line-numbers/client.mjs

@@ -1,62 +0,0 @@
-/**
- * notion-enhancer: code line numbers
- * (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
- * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
- * (https://notion-enhancer.github.io/) under the MIT license
- */
-
-export default async function ({ web }, db) {
-  const singleLined = await db.get(['single_lined']),
-    codeBlockSelector = '.notion-code-block.line-numbers',
-    numbersClass = `code_line_numbers--${await db.get(['style'])}`,
-    $temp = web.html`<span></span>`;
-
-  const numberCodeBlock = ($codeBlock) => {
-      const $numbers =
-        $codeBlock.querySelector(`.${numbersClass}`) ||
-        web.html`<span class="${numbersClass}">1</span>`;
-      if (!$codeBlock.contains($numbers)) $codeBlock.prepend($numbers);
-
-      const lines = $codeBlock.lastElementChild.innerText.split(/\r\n|\r|\n/),
-        wordWrap = $codeBlock.lastElementChild.style.wordBreak === 'break-all';
-      if (lines.reverse()[0] === '') lines.pop();
-
-      let lineNumbers = '';
-      for (let i = 1; i <= lines.length + 1; i++) {
-        lineNumbers += `${i}\n`;
-        if (wordWrap && lines[i - 1]) {
-          $temp.innerText = lines[i - 1];
-          web.render($codeBlock.lastElementChild, $temp);
-          const height = parseFloat($temp.getBoundingClientRect().height);
-          $temp.remove();
-          for (let j = 1; j < height / 20.4; j++) lineNumbers += '\n';
-        }
-      }
-
-      if (!singleLined && lines.length < 2) lineNumbers = '';
-      if ($numbers.innerText !== lineNumbers) $numbers.innerText = lineNumbers;
-    },
-    numberAllCodeBlocks = () => {
-      for (const $codeBlock of document.querySelectorAll(codeBlockSelector)) {
-        numberCodeBlock($codeBlock);
-      }
-    },
-    observeCodeBlocks = (event) => {
-      const tempEvent = [...event.addedNodes, ...event.removedNodes].includes($temp),
-        numbersEvent =
-          event.target.classList.contains(numbersClass) ||
-          [...event.addedNodes, ...event.removedNodes].some(($node) =>
-            $node?.classList?.contains(numbersClass)
-          ),
-        codeEvent = event.target.matches(`${codeBlockSelector}, ${codeBlockSelector} *`);
-      if (tempEvent || numbersEvent || !codeEvent) return;
-
-      let $codeBlock = event.target;
-      while (!$codeBlock.matches(codeBlockSelector)) $codeBlock = $codeBlock.parentElement;
-      numberCodeBlock($codeBlock);
-    };
-
-  await web.whenReady();
-  numberAllCodeBlocks();
-  web.addDocumentObserver(observeCodeBlocks, [codeBlockSelector]);
-}

src/extensions/code-line-numbers/mod.json

@@ -1,36 +0,0 @@
-{
-  "name": "code line numbers",
-  "id": "d61dc8a7-b195-465b-935f-53eea9efe74e",
-  "version": "0.4.0",
-  "description": "adds line numbers to code blocks.",
-  "preview": "code-line-numbers.png",
-  "tags": ["extension", "usability"],
-  "authors": [
-    {
-      "name": "CloudHill",
-      "email": "rh.cloudhill@gmail.com",
-      "homepage": "https://github.com/CloudHill",
-      "avatar": "https://avatars.githubusercontent.com/u/54142180"
-    }
-  ],
-  "js": {
-    "client": ["client.mjs"]
-  },
-  "css": {
-    "client": ["client.css"]
-  },
-  "options": [
-    {
-      "type": "toggle",
-      "key": "single_lined",
-      "label": "number single-lined code blocks",
-      "value": false
-    },
-    {
-      "type": "select",
-      "key": "style",
-      "label": "line number style",
-      "values": ["plain", "background", "border"]
-    }
-  ]
-}

src/extensions/line-numbers/client.css

@@ -1,7 +1,7 @@
 /**
- * notion-enhancer: code line numbers
+ * notion-enhancer: line numbers
  * (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
- * (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
  */
 

src/extensions/line-numbers/client.mjs

@@ -0,0 +1,79 @@
+/**
+ * notion-enhancer: line numbers
+ * (c) 2020 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
+ */
+
+function LineNumber({ number, height, ...props }) {
+  const { html } = globalThis.__enhancerApi;
+  return html`<span class="block text-right" style="height:${height}px">
+    ${number}
+  </span>`;
+}
+
+export default async (api, db) => {
+  const { html, addMutationListener } = api,
+    numberSingleLines = await db.get("numberSingleLines"),
+    lineNumberDecoration = await db.get("lineNumberDecoration"),
+    lineNumbersClass = "notion-enhancer--line-numbers",
+    codeBlockSelector = ".notion-code-block.line-numbers";
+
+  const numberLines = () => {
+    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 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
+      $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 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 $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 lineSpan = 1;
+        if (wrap) lineSpan = Math.ceil(lines[i - 1].length / charsPerLine);
+        $numbers.append(
+          html`<${LineNumber}
+            number=${i}
+            height=${(lineSpan || 1) * lineHeight}
+          />`
+        );
+      }
+
+      const $prev = $block.getElementsByClassName(lineNumbersClass)[0];
+      $prev ? $prev.replaceWith($numbers) : $block.prepend($numbers);
+    }
+  };
+
+  addMutationListener(codeBlockSelector, numberLines);
+};

src/extensions/line-numbers/mod.json

@@ -0,0 +1,34 @@
+{
+  "name": "Line Numbers",
+  "id": "d61dc8a7-b195-465b-935f-53eea9efe74e",
+  "version": "0.5.0",
+  "description": "Adds line numbers to code blocks.",
+  "tags": ["code-line-numbers"],
+  "authors": [
+    {
+      "name": "dragonwocky",
+      "homepage": "https://dragonwocky.me/",
+      "avatar": "https://dragonwocky.me/avatar.jpg"
+    },
+    {
+      "name": "CloudHill",
+      "homepage": "https://github.com/CloudHill",
+      "avatar": "https://avatars.githubusercontent.com/u/54142180"
+    }
+  ],
+  "options": [
+    {
+      "type": "toggle",
+      "key": "numberSingleLines",
+      "description": "Add line numbers to code blocks with only one line.",
+      "value": true
+    },
+    {
+      "type": "select",
+      "key": "lineNumberDecoration",
+      "description": "Select a decoration style to distinguish line numbers from code block content.",
+      "values": ["Border", "Background", "None"]
+    }
+  ],
+  "clientScripts": ["client.mjs"]
+}

src/extensions/no-peeking/client.css

@@ -1,5 +1,5 @@
 /**
- * notion-enhancer: no-peeking
+ * notion-enhancer: no peeking
  * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */

src/extensions/word-counter/islands/Stat.mjs

@@ -1,10 +1,10 @@
 /**
- * notion-enhancer: word-counter
+ * notion-enhancer: word counter
  * (c) 2024 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-function Stat({ unit, countable, ...props }, ...children) {
+function Stat({ unit, countable, ...props }) {
   const { html } = globalThis.__enhancerApi,
     $count = html`<b></b>`,
     $unit = html`<span></span>`,

src/registry.json

@@ -6,6 +6,7 @@
   "extensions/scroller",
   "extensions/outliner",
   "extensions/word-counter",
+  "extensions/line-numbers",
   "extensions/no-peeking",
   "extensions/focus",
   "themes/classic-dark"