feat(line-numbers): border & bg decoration styles

src/extensions/line-numbers/client.css

@@ -1,63 +0,0 @@
-/**
- * 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
- */
-
-.notion-code-block.line-numbers {
-  position: relative;
-}
-.code_line_numbers--plain:not(:empty) + div,
-.code_line_numbers--background:not(:empty) + div,
-.code_line_numbers--border:not(:empty) + div {
-  padding-left: 64px !important;
-}
-
-.code_line_numbers--plain,
-.code_line_numbers--background,
-.code_line_numbers--border {
-  position: absolute;
-  left: 0;
-  right: calc(100% - 64px);
-  top: 34px;
-  bottom: 32px;
-  padding-right: 27px;
-
-  font-size: 85%;
-  font-family: var(--theme--font_code);
-  text-align: right;
-  line-height: 1.5;
-  opacity: 0.8;
-  color: var(--theme--text_secondary);
-
-  overflow: hidden;
-  pointer-events: none;
-}
-.code_line_numbers--plain:empty,
-.code_line_numbers--background:empty,
-.code_line_numbers--border:empty {
-  display: none;
-}
-.code_line_numbers--background::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 7.25px;
-  width: calc(100% - 27px);
-  height: 100%;
-  display: block;
-  background-color: var(--theme--bg);
-  border-radius: 4px;
-  z-index: -1;
-}
-.code_line_numbers--border::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: calc(100% - 52px);
-  width: 2px;
-  height: 100%;
-  display: block;
-  background-color: var(--theme--ui_divider);
-}

src/extensions/line-numbers/client.mjs

@@ -5,21 +5,27 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
-function LineNumbers() {
-  const { html } = globalThis.__enhancerApi;
+function LineNumbers({ decorationStyle = "None" }) {
+  const { html } = globalThis.__enhancerApi,
+    decorations = {
+      Border: `pr-[16px] border-r-([2px]
+      [color:var(--theme--bg-hover)])`,
+      Background: `pr-[4px] before:(absolute block
+      h-full w-[calc(100%-24px)] rounded-[4px] right-0
+      content-empty bg-[var(--theme--bg-hover)] z-[-1])`,
+    };
   return html`<div
-    class="notion-enhancer--line-numbers flex-grow
+    class="notion-enhancer--line-numbers mt-[34px]
     text-([85%] [var(--theme--fg-secondary)] right)
-    font-[var(--font--code)] pt-[34px] pb-[32px]
-    overflow-hidden"
+    font-[var(--font--code)] overflow-hidden select-none
+    relative flex-grow ${decorations[decorationStyle] || ""}"
   ></div>`;
 }
 
 export default async (api, db) => {
   const { html, addMutationListener } = api,
+    decorationStyle = await db.get("decorationStyle"),
     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
@@ -50,45 +56,48 @@ export default async (api, db) => {
     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;
+        numLines = Math.max(lines.length - 1, 1),
+        numChars = lines.map((line) => line.length).join(","),
+        numDigits = (Math.log(numLines) * 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;
+      if ($code.dataset.lines === wrap + "," + numChars) continue;
+      $code.dataset.lines = wrap + "," + numChars;
 
+      // do not add to single-line blocks if disabled
+      const visible = numberSingleLines || numLines > 1,
+        width = visible
+          ? decorationStyle === "Border"
+            ? `calc(100% - 50px - ${numDigits}ch)`
+            : `calc(100% - 32px - ${numDigits}ch)`
+          : "",
+        paddingLeft = visible && decorationStyle === "Border" ? "16px" : "32px";
       // 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 });
+      applyStyles($code, { minWidth: width, maxWidth: width, paddingLeft });
 
-      // work out height of wrapped lines
+      // calculate heights of wrapped lines and render line nums
+      let totalHeight = 0;
       const lineHeight = getLineHeight($code),
         charsPerLine = Math.floor(getLineWidth($code) / getCharWidth($code));
-
-      // update line numbers in dom
-      let totalHeight = 34;
-      $code._$lineNumbers ||= LineNumbers();
-      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 =
+      $code._$lineNumbers ||= html`<${LineNumbers}...${{ decorationStyle }} />`;
+      for (let i = 1; i <= numLines; i++) {
+        const $n = $code._$lineNumbers.children[i - 1] || html`<p>${i}</p>`;
+        if (!$code._$lineNumbers.contains($n)) $code._$lineNumbers.append($n);
+        const wrappedHeight =
           wrap && lines[i - 1].length > charsPerLine
             ? Math.ceil(lines[i - 1].length / charsPerLine) * lineHeight
             : lineHeight;
-        applyStyles($n, { height: `${height}px` });
-        totalHeight += height;
+        applyStyles($n, { height: `${wrappedHeight}px` });
+        totalHeight += wrappedHeight;
       }
-      applyStyles($code._$lineNumbers, { height: `${totalHeight}px` });
+      applyStyles($code._$lineNumbers, {
+        display: visible ? "" : "none",
+        height: `${totalHeight}px`,
+      });
 
-      if (!document.contains($code._$lineNumbers))
+      if (visible && !document.contains($code._$lineNumbers)) {
         $code.before($code._$lineNumbers);
+      } else if (!visible) $code._$lineNumbers.style.display = "none";
     }
   };
 

src/extensions/line-numbers/mod.json

@@ -25,8 +25,8 @@
     },
     {
       "type": "select",
-      "key": "lineNumberDecoration",
-      "description": "Select a decoration style to distinguish line numbers from code block content.",
+      "key": "decorationStyle",
+      "description": "Decorate line numbers with additional styling to distinguish them from code block content.",
       "values": ["Border", "Background", "None"]
     }
   ],