bedazzlr 0.2.0 → 0.2.2

package/README.md

@@ -1,3 +1,3 @@
 ## bedazzlr
 
-Syntax highlight for `<code />` blocks on webpages powered by BABLR
+Syntax highlighter for `<code />` blocks on webpages powered by BABLR

package/lib/index.js

@@ -1,6 +1,5 @@
-/* global document window */
+/* global document window console */
 
-import { spam as m } from '@bablr/boot';
 import emptyStack from '@iter-tools/imm-stack';
 import classNames from 'classnames';
 import { streamParse } from 'bablr';
@@ -8,34 +7,80 @@ import { streamParse } from 'bablr';
 import { CloseNodeTag, LiteralTag, OpenNodeTag, ReferenceTag } from '@bablr/agast-helpers/symbols';
 import { printSelfClosingNodeTag } from '@bablr/agast-helpers/print';
 import { buildOpenNodeTag, nodeFlags, tokenFlags } from '@bablr/agast-helpers/builders';
+import {
+  buildTreeNodeMatcher,
+  buildNodeFlags,
+  buildTreeNodeMatcherOpen,
+  buildPropertyMatcher,
+  buildBoundNodeMatcher,
+  buildReferenceMatcher,
+} from '@bablr/helpers/builders';
+import { buildEmbeddedMatcher } from '@bablr/agast-vm-helpers/builders';
+import { hoistTrivia } from '@bablr/agast-helpers/stream';
 
-const getCommonParent = (a, b) => {
-  if (!a) return b;
-  if (!b) return a;
+let anchorStyle =
+  'display: inline-block; position: relative; vertical-align: top; pointer-events: none;';
 
-  let node = a;
+function* siblingsFor(range) {
+  let { 0: left, 1: right } = range;
+  let el = left || right;
+
+  if (!el) return;
+
+  let backwards = left.compareDocumentPosition(right) === 2;
+
+  do {
+    yield el;
+    let nextSibling = backwards ? el.previousElementSibling : el.nextElementSibling;
+    if (!right || el === right || !nextSibling) break;
+    el = nextSibling;
+  } while (true);
+}
+
+const getCommonParentSiblings = (a, b) => {
+  if (!a && !b) return [];
+  if (!a) return [b, b];
+  if (!b || a === b) return [a, a];
+
+  let anode = a;
+  let bnode = b;
+  let rootNode = anode;
+  do {
+    let position = rootNode.compareDocumentPosition(b);
+    if (!position || position & 0x10) {
+      break;
+    }
+    anode = rootNode;
+  } while ((rootNode = rootNode.parentNode));
+
+  rootNode = bnode;
   do {
-    let position = node.compareDocumentPosition(b);
+    let position = rootNode.compareDocumentPosition(a);
     if (!position || position & 0x10) {
-      return node;
+      break;
     }
-  } while ((node = node.parentNode));
+    bnode = rootNode;
+  } while ((rootNode = rootNode.parentNode));
 
-  return null;
+  return [anode, bnode];
 };
 
 const countIndents = (root) => {
   let el = root;
   let indents = 0;
   while (el) {
-    if (el.getAttribute('type') === 'LeftOffset') {
-      el = el.lastElementChild;
+    if (el.classList.contains('trivia')) {
+      let leftOffset = el.firstElementChild;
+
+      if (leftOffset?.getAttribute('name') !== 'LeftOffset') return Infinity;
+
+      el = leftOffset.firstElementChild;
 
-      while (el) {
+      while (el && el.getAttribute('name') === 'Indent') {
         indents++;
-        el = el.previousElementSibling;
+        el = el.nextElementSibling;
       }
-      return indents + 1;
+      return indents;
     } else {
       el =
         el.previousElementSibling ||
@@ -43,7 +88,7 @@ const countIndents = (root) => {
     }
   }
 
-  return 0;
+  return Infinity;
 };
 
 let callbacks = {};
@@ -69,83 +114,89 @@ export const removeDocumentListeners = () => {
   }
 };
 
-export const highlightCode = (language, el) => {
-  let tags = streamParse(language, m`<Document />`, el.innerText)[Symbol.iterator]();
+export const highlightCode = (el, language, matcher = language.defaultMatcher) => {
+  let tags = hoistTrivia(
+    streamParse(language, matcher, el.innerText, null, { holdShiftedNodes: true }),
+  )[Symbol.iterator]();
 
   let open;
   let referenceTag = null;
   let range = document.createRange();
-  range.selectNodeContents(el.childNodes[0].lastChild);
+  range.selectNodeContents(el.lastChild);
   let stack = emptyStack;
 
   let bindingTag;
 
   let step = tags.next();
 
-  outer: while (!step.done) {
+  while (!step.done) {
     let tag = step.value;
 
-    switch (tag.type) {
-      case OpenNodeTag: {
-        range = range.cloneRange();
-        range.setStart(el.childNodes[0].lastChild, 0);
-        range.setEnd(el.childNodes[0].lastChild, 0);
+    if (tag.type === OpenNodeTag) {
+      range = range.cloneRange();
+      range.setStart(el.lastChild, 0);
+      range.setEnd(el.lastChild, 0);
 
-        open = tag;
+      open = tag;
 
-        stack = stack.push({
-          open,
-          range,
-          referenceTag,
-          // langs: stack.value.langs.concat(bindingTag?.value.languagePath ?? []),
-        });
-        break;
-      }
-
-      case ReferenceTag: {
-        referenceTag = tag;
-        break;
+      if (tag.value.literalValue) {
+        range.setEnd(range.startContainer, range.endOffset + tag.value.literalValue.length);
       }
 
-      case LiteralTag: {
-        let { value } = tag;
-        range.setEnd(range.startContainer, range.startOffset + value.length);
-        break;
-      }
+      stack = stack.push({
+        open,
+        range,
+        referenceTag,
+        // langs: stack.value.langs.concat(bindingTag?.value.segments ?? []),
+      });
+    }
 
-      case CloseNodeTag: {
-        if (stack.size > 1) {
-          // if (doneFrame.langs.size) {
-
-          let doneRange = range;
-
-          let node = document.createElement('node');
-          let names = classNames({
-            escape: referenceTag.value.type === '@',
-            token: open.value.flags.token,
-            trivia: referenceTag.value.type === '#',
-            hasGap: open.value.flags.hasGap,
-          });
-          node.setAttribute('type', open.value.type.description);
-          if (names) {
-            node.setAttribute('class', names);
-          }
+    if (tag.type === ReferenceTag) {
+      referenceTag = tag;
+    }
 
-          range.surroundContents(node);
-          // } else {
-          //   let el = document.createElement(doneFrame.type.description);
+    if (tag.type === LiteralTag) {
+      let { value } = tag;
+      range.setEnd(range.startContainer, range.endOffset + value.length);
+    }
 
-          //   doneFrame.range.surroundContents(el);
-          // }
+    if (tag.type === CloseNodeTag || (tag.type === OpenNodeTag && tag.value.selfClosing)) {
+      if (stack.size > 1) {
+        // if (doneFrame.langs.size) {
 
-          stack = stack.pop();
-          ({ open, range, referenceTag } = stack.value);
+        let doneRange = range;
 
-          // range.setStart(doneRange.startContainer, doneRange.startOffset);
-          range.setEnd(doneRange.endContainer, doneRange.endOffset);
-        } else {
-          break outer;
+        let node = document.createElement('node');
+        let names = classNames({
+          escape: referenceTag?.value.type === '@',
+          token: open.value.flags.token,
+          trivia: referenceTag?.value.type === '#',
+          intrinsic: referenceTag?.value.flags.intrinsic || false,
+          hasGap: open.value.flags.hasGap,
+        });
+        if (open.value.name) {
+          node.setAttribute('name', open.value.name?.description);
+        }
+        if (open.value.name) {
+          node.setAttribute('name', open.value.name?.description);
+        }
+        if (names) {
+          node.setAttribute('class', names);
         }
+
+        range.surroundContents(node);
+        // } else {
+        //   let el = document.createElement(doneFrame.name.description);
+
+        //   doneFrame.range.surroundContents(el);
+        // }
+
+        stack = stack.pop();
+        ({ open, range, referenceTag } = stack.value);
+
+        // range.setStart(doneRange.startContainer, doneRange.startOffset);
+        range.setEnd(doneRange.endContainer, doneRange.endOffset);
+      } else {
         break;
       }
     }
@@ -159,60 +210,114 @@ export const highlightCode = (language, el) => {
     set(value) {
       let { 0: start, 1: end } = value;
 
-      let commonParent = getCommonParent(start, end);
+      let newValue = value;
 
-      if (store._selectedRange) {
-        let prevParent = store._selectedRangeCommonParent;
-        if (prevParent) {
-          prevParent.classList.remove('selected');
-          let indentClass = [...prevParent.classList.values()].find((val) =>
+      if (start && !end) {
+        end = store._selectedRange?.[1];
+        newValue = [start, end];
+      }
+
+      let siblingRange = getCommonParentSiblings(start, end);
+
+      let { 0: leftBound, 1: rightBound } = siblingRange;
+      let commonParent =
+        leftBound === rightBound || !rightBound
+          ? leftBound
+          : leftBound?.parentNode || rightBound?.parentNode;
+
+      // are any selected nodes intrinsic
+
+      if (store._selectedSiblingRange) {
+        for (let prevEl of siblingsFor(store._selectedSiblingRange)) {
+          prevEl.classList.remove('selected');
+          let indentClass = [...prevEl.classList.values()].find((val) =>
             val.startsWith('indent-depth-'),
           );
-          prevParent.classList.remove(indentClass);
+          prevEl.classList.remove(indentClass);
 
-          let prevAnchor = prevParent.childNodes[0];
-          let child = [...prevAnchor.childNodes].find((child) =>
-            child.classList.contains('tooltip'),
-          );
-          if (child) prevAnchor.removeChild(child);
+          let prevAnchor = prevEl.previousSibling;
+          if (prevAnchor?.tagName === 'A') {
+            prevAnchor.remove();
+          }
         }
+      } else {
+        document.getSelection().empty();
       }
-      store._selectedRange = value;
+
+      store._selectedRange = newValue;
+      store._selectedSiblingRange = siblingRange;
       store._selectedRangeCommonParent = commonParent;
 
       if (commonParent) {
-        commonParent.classList.add('selected');
-        commonParent.classList.add('indent-depth-' + countIndents(commonParent));
+        let intrinsicSelection = false;
 
-        let parentRange = document.createRange();
+        let indentDepth = Infinity;
 
-        parentRange.selectNode(commonParent);
-
-        document.getSelection().empty();
-        document.getSelection().addRange(parentRange);
+        for (let siblingNode of siblingsFor(siblingRange)) {
+          intrinsicSelection =
+            siblingNode.classList.contains('intrinsic') &&
+            !siblingNode.classList.contains('trivia');
+          indentDepth = Math.min(indentDepth, countIndents(siblingNode));
+          if (intrinsicSelection) break;
+        }
 
-        let anchor;
-        if (commonParent.childNodes[0]?.tagName === 'A') {
-          anchor = commonParent.childNodes[0];
-        } else {
-          anchor = document.createElement('a');
-          anchor.style = 'display: inline-block; position: relative; vertical-align: top';
-          commonParent.prepend(anchor);
+        if (intrinsicSelection) {
+          store._selectedSiblingRange = [commonParent, commonParent];
         }
 
-        let tooltip = document.createElement('span');
-        tooltip.classList.add('tooltip');
-        tooltip.prepend(
-          printSelfClosingNodeTag(
-            buildOpenNodeTag(
-              commonParent.classList.contains('token') ? tokenFlags : nodeFlags,
-              commonParent.getAttribute('type'),
+        if (!leftBound || !rightBound || intrinsicSelection) {
+          commonParent.classList.add('selected');
+          commonParent.classList.add('indent-depth-' + countIndents(commonParent));
+
+          let anchor;
+          if (commonParent.previousSibling?.tagName === 'A') {
+            anchor = commonParent.previousSibling;
+          } else {
+            anchor = document.createElement('a');
+            anchor.style = anchorStyle;
+            commonParent.before(anchor);
+          }
+
+          let parentRange = document.createRange();
+
+          parentRange.selectNode(commonParent);
+
+          document.getSelection().empty();
+          document.getSelection().addRange(parentRange);
+
+          let tooltip = document.createElement('span');
+          tooltip.classList.add('tooltip');
+          tooltip.prepend(
+            printSelfClosingNodeTag(
+              buildOpenNodeTag(
+                commonParent.classList.contains('token') ? tokenFlags : nodeFlags,
+                commonParent.getAttribute('name'),
+              ),
             ),
-          ),
-        );
-        tooltip.style = `position: absolute; top: -20px`;
+          );
+          tooltip.style = `position: absolute; top: -20px`;
+
+          anchor.prepend(tooltip);
+        } else {
+          for (let siblingNode of siblingsFor(siblingRange)) {
+            siblingNode.classList.add('selected');
+            siblingNode.classList.add('indent-depth-' + indentDepth);
+          }
+
+          let range = document.createRange();
+
+          if (leftBound.compareDocumentPosition(rightBound) === 2) {
+            range.setStartBefore(rightBound);
+            range.setEndAfter(leftBound);
+          } else {
+            range.setStartBefore(leftBound);
+            range.setEndAfter(rightBound);
+          }
 
-        anchor.prepend(tooltip);
+          // select siblings
+          document.getSelection().empty();
+          document.getSelection().addRange(range);
+        }
       }
     },
 
@@ -226,9 +331,9 @@ export const highlightCode = (language, el) => {
       let el = value;
 
       if (store._hoverTarget) {
-        let prevEl = store._hoverTarget.childNodes[0];
-        let child = [...prevEl.childNodes].find((child) => child.classList.contains('hover'));
-        if (child) prevEl.removeChild(child);
+        let prevEl = store._hoverTarget;
+        let anchor = prevEl.previousSibling;
+        if (anchor.tagName === 'A') prevEl.parentElement.removeChild(anchor);
       }
 
       store._hoverTarget = value;
@@ -239,12 +344,13 @@ export const highlightCode = (language, el) => {
         hover.style = `position: absolute; top: 0px`;
 
         let anchor;
-        if (el.childNodes[0]?.tagName === 'A') {
-          anchor = el.childNodes[0];
+        if (el.previousSibling?.tagName === 'A') {
+          anchor = el.previousSibling;
         } else {
           anchor = document.createElement('a');
-          anchor.style = 'display: inline-block; position: relative; vertical-align: top';
-          el.prepend(anchor);
+          anchor.style = anchorStyle;
+
+          el.before(anchor);
         }
 
         anchor.prepend(hover);
@@ -276,11 +382,8 @@ export const highlightCode = (language, el) => {
     if (store.selectionState === 'selecting') {
       let selected = store.selectedRange;
 
-      if (e.fromElement?.tagName !== 'NODE' && store.outTimeout) {
+      if (e.fromElement?.tagName !== 'NODE') {
         if (e.toElement?.tagName === 'NODE') {
-          window.clearTimeout(store.outTimeout);
-          store.outTimeout = null;
-
           let startTokenNode = selected[0];
 
           if (startTokenNode) {
@@ -291,7 +394,7 @@ export const highlightCode = (language, el) => {
 
           store.selectedRange = range;
         } else {
-          store.selectedRange = [selected[0], selected[0]];
+          store.selectedRange = [selected[0], null];
         }
       }
     }
@@ -306,57 +409,54 @@ export const highlightCode = (language, el) => {
   el.addEventListener('mouseout', (e) => {
     if (store.selectionState === 'selecting') {
       let selected = store.selectedRange;
-      if (store.outTimeout) {
-        window.clearTimeout(store.outTimeout);
-        store.outTimeout = null;
-      }
 
-      if (e.toElement.tagName === 'NODE') {
+      if (e.toElement?.tagName === 'NODE') {
         let range;
 
-        if (e.target.tagName === 'NODE') {
-          window.clearTimeout(store.outTimeout);
-          store.outTimeout = null;
-        }
-
         let startTokenNode = selected[0];
 
         if (startTokenNode) {
           range = [startTokenNode, e.toElement];
         } else {
-          range = [e.toElement, e.toElement];
+          range = [e.toElement, null];
         }
 
         store.selectedRange = range;
       } else {
-        // with tall line-height there are little gaps between lines where the event lands on `el`
-        // suppress strobe-like flashing that occurs while dragging a selection over these gaps
-        store.outTimeout = window.setTimeout(() => {
-          if (e.toElement.tagName === 'NODE') {
-            store.selectedRange = [store.selectedRange[0], store.selectedRange[0]];
-          } else {
-            store.selectedRange = [store.selectedRange[0], null];
-          }
-        }, 65);
+        if (e.toElement?.tagName === 'NODE') {
+          store.selectedRange = [store.selectedRange[0], store.selectedRange[0]];
+        } else {
+          store.selectedRange = [store.selectedRange[0], null];
+        }
       }
     }
   });
 
-  el.addEventListener('mouseup', (e) => {
-    store.selectionState = store.selectedRange ? 'selected' : 'none';
-  });
-
-  addDocumentEventListener('selectionchanged', (e) => {
-    let selection = document.getSelection();
+  addDocumentEventListener('mouseout', (e) => {
+    let { target } = e;
 
-    if (selection.isCollapsed) {
-      if (!selection.anchorNode || !(selection.anchorNode.compareDocumentPosition(el) & 0x10)) {
-        store.selectedRange = [null, null];
+    if (store.hoverTarget) {
+      let position = target.compareDocumentPosition(el);
+      if (!position || position & 0x10) {
+        store.hoverTarget = null;
       }
     }
   });
 
+  // addDocumentEventListener('selectionchange', (e) => {
+  //   let selection = document.getSelection();
+
+  //   store.hoverTarget = selection.anchorNode;
+
+  //   if (selection.isCollapsed) {
+  //     if (!selection.anchorNode || !(selection.anchorNode.compareDocumentPosition(el) & 0x10)) {
+  //       store.selectedRange = [null, null];
+  //     }
+  //   }
+  // });
+
   addDocumentEventListener('mouseup', (e) => {
+    store.selectionState = store.selectedRange ? 'selected' : 'none';
     if (e.target.compareDocumentPosition(el) & 0x10) {
       store.selectedRange = [null, null];
       document.getSelection().empty();
@@ -372,10 +472,37 @@ export const highlightCode = (language, el) => {
   });
 };
 
-export const highlightAll = () => {
+export const highlightAll = (languages) => {
   let codeBlocks = document.querySelectorAll('code');
 
   for (let block of codeBlocks) {
-    highlightCode(block);
+    let canonicalURL = block.getAttribute('bablr-lang');
+    let language = languages.get(canonicalURL);
+    let flags = block.getAttribute('bablr-ref-flags');
+
+    let name = block.getAttribute('bablr-prod');
+
+    if (!language) continue;
+    if (!name && !language.defaultMatcher) continue;
+
+    try {
+      highlightCode(
+        block,
+        language,
+        name
+          ? buildEmbeddedMatcher(
+              buildPropertyMatcher(
+                buildReferenceMatcher('_', null, flags),
+                buildBoundNodeMatcher(
+                  [],
+                  buildTreeNodeMatcher(buildTreeNodeMatcherOpen(buildNodeFlags(), null, name)),
+                ),
+              ),
+            )
+          : language.defaultMatcher,
+      );
+    } catch (e) {
+      console.warn(e);
+    }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bedazzlr",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Code block syntax highlighting using BABLR",
   "author": "Conrad Buck<conartist6@gmail.com>",
   "type": "module",
@@ -15,11 +15,12 @@
     "test": "mocha test/*.test.js"
   },
   "dependencies": {
-    "@bablr/agast-helpers": "0.9.0",
-    "@bablr/boot": "0.10.0",
-    "@bablr/helpers": "0.24.0",
+    "@bablr/agast-helpers": "0.10.2",
+    "@bablr/agast-vm-helpers": "0.10.2",
+    "@bablr/boot": "0.11.1",
+    "@bablr/helpers": "0.25.1",
     "@iter-tools/imm-stack": "1.2.0",
-    "bablr": "0.10.1",
+    "bablr": "0.11.2",
     "classnames": "2.5.1"
   },
   "devDependencies": {