@ng-doc/utils 16.5.1 → 16.6.1

package/html/helpers/index.d.ts

@@ -2,3 +2,7 @@ export * from './attr-value';
 export * from './has-class';
 export * from './has-link-ancestor';
 export * from './is-code-node';
+export * from './is-element';
+export * from './is-text';
+export * from './line-break';
+export * from './text-element';

package/html/helpers/is-element.d.ts

@@ -0,0 +1,6 @@
+import { Element, ElementContent } from 'hast';
+/**
+ *
+ * @param node
+ */
+export declare function isElement(node?: ElementContent): node is Element;

package/html/helpers/is-text.d.ts

@@ -0,0 +1,6 @@
+import { ElementContent, Text } from 'hast';
+/**
+ *
+ * @param element
+ */
+export declare function isText(element?: ElementContent): element is Text;

package/html/helpers/line-break.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'hast';
+/**
+ * Creates a line break
+ */
+export declare function lineBreak(): Text;

package/html/helpers/text-element.d.ts

@@ -0,0 +1,6 @@
+import { Text } from 'hast';
+/**
+ *
+ * @param value
+ */
+export declare function textElement(value: string): Text;

package/html/plugins/code-block-lines.plugin.d.ts

@@ -0,0 +1,5 @@
+import { Root } from 'hast';
+/**
+ * Adds lines to code blocks
+ */
+export default function codeBlockLinesPlugin(): (tree: Root) => void;

package/html/plugins/highlight-code-lines.d.ts

@@ -0,0 +1,5 @@
+import { Root } from 'hast';
+/**
+ * Highlight code lines
+ */
+export default function highlightCodeLines(): (tree: Root) => void;

package/index.js

@@ -14166,7 +14166,7 @@ function looksLikeAVFileValue(value) {
  * @returns
  *   Whether `node` is an element and passes a test.
  */
-const isElement =
+const isElement$1 =
   /**
    * @type {(
    *   (() => false) &
@@ -14726,7 +14726,7 @@ function hasClass(node, cls) {
  * @param ancestors
  */
 function hasLinkAncestor(ancestors) {
-  return ancestors.some(ancestor => isElement(ancestor, 'a'));
+  return ancestors.some(ancestor => isElement$1(ancestor, 'a'));
 }
 
 /**
@@ -14734,7 +14734,44 @@ function hasLinkAncestor(ancestors) {
  * @param node
  */
 function isCodeNode(node) {
-  return isElement(node, 'code') || isElement(node, 'ng-doc-code');
+  return isElement$1(node, 'code') || isElement$1(node, 'ng-doc-code');
+}
+
+/**
+ *
+ * @param node
+ */
+function isElement(node) {
+  return node?.type === 'element';
+}
+
+/**
+ *
+ * @param element
+ */
+function isText(element) {
+  return element?.type === 'text';
+}
+
+/**
+ * Creates a line break
+ */
+function lineBreak() {
+  return {
+    type: 'text',
+    value: '\n'
+  };
+}
+
+/**
+ *
+ * @param value
+ */
+function textElement(value) {
+  return {
+    type: 'text',
+    value
+  };
 }
 
 const languages = ['typescript', 'ts'];
@@ -14752,7 +14789,7 @@ function keywordsPlugin(config) {
     if (!isCodeNode(node)) {
       return;
     }
-    const isInlineCode = !isElement(ancestors[ancestors.length - 1], 'pre');
+    const isInlineCode = !isElement$1(ancestors[ancestors.length - 1], 'pre');
     const lang = node.properties?.['lang']?.toString() || '';
     if (isInlineCode || languages.includes(lang)) {
       visitParents(node, 'text', (node, ancestors) => {
@@ -15168,7 +15205,7 @@ const NO_ANCHOR_CLASS = 'no-anchor';
  */
 function autolinkHeading(route) {
   return tree => visit(tree, 'element', node => {
-    if (route && isElement(node, HEADINGS) && node.properties && node.properties['id'] && !hasClass(node, NO_ANCHOR_CLASS)) {
+    if (route && isElement$1(node, HEADINGS) && node.properties && node.properties['id'] && !hasClass(node, NO_ANCHOR_CLASS)) {
       node.children.push({
         type: 'element',
         tagName: 'a',
@@ -15191,6 +15228,106 @@ function autolinkHeading(route) {
   });
 }
 
+/**
+ * Adds lines to code blocks
+ */
+function codeBlockLinesPlugin() {
+  return tree => {
+    visit(tree, 'element', (node, _i, parent) => {
+      if (parent?.type === 'element' && parent.tagName === 'pre' && node.tagName === 'code') {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        node.properties['className'] = [...(node.properties?.['className'] ?? []), 'code-lines'];
+        // Wraps each line in a span
+        node.children = addLines(node);
+        // Adds a line break to the end of each line
+        node.children.forEach(child => {
+          if (child.type === 'element' && child.tagName === 'span') {
+            const lastChild = child.children[child.children.length - 1];
+            if (!isText(lastChild) || isText(lastChild) && !hasLineBreak(lastChild)) {
+              child.children.push(lineBreak());
+            }
+          }
+        });
+      }
+    });
+  };
+}
+/**
+ * Adds lines to a node recursively and returns them
+ *
+ * @param node - The node to add lines to
+ * @param lines - The current lines
+ * @param copyParent - Whether to copy the parent node to save the original node styles
+ */
+function addLines(node, lines = [], copyParent) {
+  const line = () => lines[lines.length - 1] ?? (lines.push(createLine()) && lines[lines.length - 1]);
+  node.children.forEach(child => {
+    if (isText(child) && hasLineBreak(child)) {
+      const split = child.value.split(/\n/);
+      split.forEach((content, i) => {
+        copyParent ? line().children.push({
+          ...node,
+          children: [textElement(content)]
+        }) : line().children.push(textElement(content));
+        i !== split.length - 1 && lines.push(createLine());
+      });
+    } else if (isElement(child) && child.children.some(hasLineBreak)) {
+      addLines(child, lines, true);
+    } else {
+      line().children.push(child);
+    }
+  });
+  return lines;
+}
+/**
+ * Creates a new line element
+ *
+ * @param children - The children the line should have initially
+ */
+function createLine(...children) {
+  return {
+    type: 'element',
+    tagName: 'span',
+    properties: {
+      class: ['line']
+    },
+    children
+  };
+}
+/**
+ * Checks if a node has a line break
+ *
+ * @param node - The node to check
+ */
+function hasLineBreak(node) {
+  return isText(node) && /\r?\n/.test(node.value) || isElement(node) && node.children.some(hasLineBreak);
+}
+
+/**
+ * Highlight code lines
+ */
+function highlightCodeLines() {
+  return tree => {
+    visit(tree, 'element', (node, _i, parent) => {
+      if (parent?.type === 'element' && parent.tagName === 'pre' && node.tagName === 'code') {
+        const highlightedLines = JSON.parse(attrValue(node, 'highlightedLines') ?? '[]');
+        highlightedLines.length && node.children.forEach((child, i) => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          if (isElement(child) && child.properties.class?.includes('line')) {
+            if (highlightedLines.includes(i + 1)) {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              child.properties.class.push('highlighted');
+            }
+          }
+        });
+      }
+    });
+  };
+}
+
 /**
  *
  * @param tree
@@ -15236,7 +15373,7 @@ async function htmlProcessor(html, config) {
     languages: {
       twig
     }
-  }).use(sluggerPlugin, config.addAnchor, config.headings).use(rehypeMinifyWhitespace).use(autolinkHeading, config.route).process(html).then(file => file.toString());
+  }).use(codeBlockLinesPlugin).use(highlightCodeLines).use(sluggerPlugin, config.addAnchor, config.headings).use(rehypeMinifyWhitespace).use(autolinkHeading, config.route).process(html).then(file => file.toString());
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-doc/utils",
-  "version": "16.5.1",
+  "version": "16.6.1",
   "type": "module",
   "dependencies": {
     "rehype": "12.0.1",