Fix code line wrapping + other improvements (#275)

mods/code-line-numbers/mod.js

@@ -14,7 +14,7 @@ module.exports = {
   tags: ['extension'],
   name: 'code line numbers',
   desc: 'adds line numbers to code blocks.',
-  version: '1.0.0',
+  version: '1.1.0',
   author: 'CloudHill',
   options: [
     {
@@ -37,21 +37,37 @@ module.exports = {
           childList: true,
           subtree: true,
         });
+
+        const resizeObserver = new ResizeObserver(
+          (list, observer) => number(list[0].target)
+        );
+
         function handle(list) {
           queue = [];
           for (let { addedNodes } of list) {
             if (
               addedNodes[0] &&
-              addedNodes[0].dataset &&
-              addedNodes[0].dataset.tokenIndex &&
-              addedNodes[0].parentElement
-            ) {
-              const block = addedNodes[0].parentElement.parentElement;
-              if (
-                block &&
-                block.classList &&
-                block.classList.contains('notion-code-block')
+              (
+                addedNodes[0].className === 'notion-page-content' ||
+                (
+                  addedNodes[0].querySelector &&
+                  addedNodes[0].querySelector('.notion-code-block.line-numbers')
+                )
+              )
             ) {
+              resizeObserver.disconnect();
+              const codeBlocks = document.querySelectorAll('.notion-code-block.line-numbers');
+              codeBlocks.forEach(block => {
+                number(block);
+                resizeObserver.observe(block);
+              })
+            }
+          }
+        }
+        
+        function number(block) {
+          let codeLineNumbers = ''
+
           let numbers = block.querySelector('#code-line-numbers');
           if (!numbers) {
             numbers = createElement(
@@ -63,26 +79,38 @@ module.exports = {
             numbers.style.bottom = blockStyle.paddingBottom;
             
             block.append(numbers);
+          }
 
           const temp = createElement('<div>A</div>');
           block.children[0].append(temp);
-                  block.lineHeight = temp.getBoundingClientRect().height;
+          const lineWidth = temp.getBoundingClientRect().width;
+          temp.style.display = 'inline';
+          const charWidth = temp.getBoundingClientRect().width;
           temp.remove();
+
+          let codeString = ''
+          let lineCounter = 0;
+
+          const codeSpans = block.firstChild.querySelectorAll('span');
+          codeSpans.forEach(s => codeString += s.innerText)
+          const lines = codeString.split(/\r\n|\r|\n/);
+
+          for (let i = 0; i < lines.length - 1; i++) {
+            lineCounter++;
+            codeLineNumbers += `${lineCounter}\n`;
+
+            const lineWrap = (lines[i].length * charWidth) / lineWidth;
+            for (let j = 1; j < Math.ceil(lineWrap); j++)
+              codeLineNumbers += '\n';
           }
           
-                const lines = Math.round(
-                  numbers.getBoundingClientRect().height / block.lineHeight
-                );
-
-                if (lines > 1) {
+          console.log(codeLineNumbers.length)
+          if (store().single_lined || codeLineNumbers.length > 2) {
             block.children[0].classList.add('code-numbered');
-                  numbers.innerText = Array.from(
-                    Array(lines),
-                    (e, i) => i + 1
-                  ).join('\n');
-                }
-              }
-            }
+            numbers.innerText = codeLineNumbers;
+          } else {
+            block.children[0].classList.remove('code-numbered');
+            numbers.innerText = ''
           }
         }
       });