nxt-highlightjs 19.0.5 → 20.0.0

package/fesm2022/nxt-highlightjs.mjs

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, PendingTasks, Injectable, ElementRef, effect, SecurityContext, Directive, input, signal, booleanAttribute, output, NgModule } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, DOCUMENT, PendingTasks, Injectable, ElementRef, effect, SecurityContext, Directive, input, signal, output, booleanAttribute, NgModule } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { from } from 'rxjs';
-import { DOCUMENT } from '@angular/common';
 
 const NXT_HIGHLIGHT_OPTIONS = new InjectionToken('NXT_HIGHLIGHT_OPTIONS');
 function provideHighlightOptions(options) {
@@ -24,21 +23,297 @@ var LoaderErrors;
     LoaderErrors["NO_FULL_AND_NO_CORE_IMPORTS"] = "Highlight.js library was not imported!";
 })(LoaderErrors || (LoaderErrors = {}));
 
+// @ts-nocheck
+const BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
+/**
+ * The contents of this file is from highlight.js, with a small modification to HTMLRenderer to make sure spans don't contain line breaks (important to improve performance of line numbers).
+ */
+/** @typedef {{scope?: string, language?: string, children: Node[]} | string} Node */
+/** @typedef {{scope?: string, language?: string, children: Node[]} } DataNode */
+/** @typedef {import('highlight.js').Emitter} Emitter */
+/**  */
+/** @returns */
+const newNode = (opts = {}) => {
+    /** @type DataNode */
+    const result = { children: [] };
+    Object.assign(result, opts);
+    return result;
+};
+class TokenTree {
+    constructor() {
+        /** @type DataNode */
+        this.rootNode = newNode();
+        this.stack = [this.rootNode];
+    }
+    get top() {
+        return this.stack[this.stack.length - 1];
+    }
+    get root() {
+        return this.rootNode;
+    }
+    /** @param node */
+    add(node) {
+        this.top.children.push(node);
+    }
+    /** @param scope */
+    openNode(scope) {
+        /** @type Node */
+        const node = newNode({ scope });
+        this.add(node);
+        this.stack.push(node);
+    }
+    closeNode() {
+        if (this.stack.length > 1) {
+            return this.stack.pop();
+        }
+        return undefined;
+    }
+    closeAllNodes() {
+        while (this.closeNode())
+            ;
+    }
+    toJSON() {
+        return JSON.stringify(this.rootNode, null, 4);
+    }
+    /**
+     * @typedef { import("./html_renderer").Renderer } Renderer
+     * @param builder
+     */
+    walk(builder) {
+        // this does not
+        return this.constructor._walk(builder, this.rootNode);
+        // this works
+        // return TokenTree._walk(builder, this.rootNode);
+    }
+    /**
+     * @param builder
+     * @param node
+     */
+    static _walk(builder, node) {
+        if (typeof node === 'string') {
+            builder.addText(node);
+        }
+        else if (node.children) {
+            builder.openNode(node);
+            node.children.forEach((child) => this._walk(builder, child));
+            builder.closeNode(node);
+        }
+        return builder;
+    }
+    /**
+     * @param node
+     */
+    static _collapse(node) {
+        if (typeof node === 'string')
+            return;
+        if (!node.children)
+            return;
+        if (node.children.every(el => typeof el === 'string')) {
+            // node.text = node.children.join("");
+            // delete node.children;
+            node.children = [node.children.join('')];
+        }
+        else {
+            node.children.forEach((child) => {
+                TokenTree._collapse(child);
+            });
+        }
+    }
+}
+/**
+  Currently this is all private API, but this is the minimal API necessary
+  that an Emitter must implement to fully support the parser.
+
+  Minimal interface:
+
+  - addText(text)
+  - __addSublanguage(emitter, subLanguageName)
+  - startScope(scope)
+  - endScope()
+  - finalize()
+  - toHTML()
+
+ */
+/**
+ * @implements {Emitter}
+ */
+class TokenTreeEmitter extends TokenTree {
+    /**
+     * @param options
+     */
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+    /**
+     * @param text
+     */
+    addText(text) {
+        if (text === '') {
+            return;
+        }
+        this.add(text);
+    }
+    /** @param scope */
+    startScope(scope) {
+        this.openNode(scope);
+    }
+    endScope() {
+        this.closeNode();
+    }
+    /**
+     * @param emitter
+     * @param name
+     */
+    __addSublanguage(emitter, name) {
+        /** @type DataNode */
+        const node = emitter.root;
+        if (name)
+            node.scope = `language:${name}`;
+        this.add(node);
+    }
+    toHTML() {
+        const renderer = new HTMLRenderer(this, this.options);
+        return renderer.value();
+    }
+    finalize() {
+        this.closeAllNodes();
+        return true;
+    }
+}
+/**
+ * @typedef {object} Renderer
+ * @property {(text: string) => void} addText
+ * @property {(node: Node) => void} openNode
+ * @property {(node: Node) => void} closeNode
+ * @property {() => string} value
+ */
+/** @typedef {{scope?: string, language?: string, sublanguage?: boolean}} Node */
+/** @typedef {{walk: (r: Renderer) => void}} Tree */
+/** */
+const SPAN_CLOSE = '</span>';
+/**
+ * Determines if a node needs to be wrapped in <span>
+ *
+ * @param node */
+const emitsWrappingTags = (node) => 
+// rarely we can have a sublanguage where language is undefined
+// TODO: track down why
+!!node.scope;
+/**
+ *
+ * @param name
+ * @param options
+ */
+const scopeToCSSClass = (name, { prefix }) => {
+    // sub-language
+    if (name.startsWith('language:')) {
+        return name.replace('language:', 'language-');
+    }
+    // tiered scope: comment.line
+    if (name.includes('.')) {
+        const pieces = name.split('.');
+        return [
+            `${prefix}${pieces.shift()}`,
+            ...(pieces.map((x, i) => `${x}${'_'.repeat(i + 1)}`))
+        ].join(' ');
+    }
+    // simple scope
+    return `${prefix}${name}`;
+};
+/** @type {Renderer} */
+class HTMLRenderer {
+    /**
+     * Creates a new HTMLRenderer
+     *
+     * @param parseTree - the parse tree (must support `walk` API)
+     * @param options
+     */
+    constructor(parseTree, options) {
+        this.buffer = '';
+        this.classPrefix = options.classPrefix;
+        this.openStack = [];
+        parseTree.walk(this);
+    }
+    /**
+     * Adds texts to the output stream
+     *
+     * @param text */
+    addText(text) {
+        const lines = text.split(BREAK_LINE_REGEXP).map(escapeHTML);
+        const lineBreak = new Array(this.openStack.length).fill(SPAN_CLOSE).join('') + '\n' + this.openStack.join('');
+        this.buffer += lines.join(lineBreak);
+    }
+    /**
+     * Adds a node open to the output stream (if needed)
+     *
+     * @param node */
+    openNode(node) {
+        if (!emitsWrappingTags(node))
+            return;
+        const className = scopeToCSSClass(node.scope, { prefix: this.classPrefix });
+        this.span(className);
+    }
+    /**
+     * Adds a node close to the output stream (if needed)
+     *
+     * @param node */
+    closeNode(node) {
+        if (!emitsWrappingTags(node))
+            return;
+        this.buffer += SPAN_CLOSE;
+        this.openStack.pop();
+    }
+    /**
+     * returns the accumulated buffer
+     */
+    value() {
+        return this.buffer;
+    }
+    // helpers
+    /**
+     * Builds a span element
+     *
+     * @param className */
+    span(className) {
+        const span = `<span class="${className}">`;
+        this.buffer += span;
+        this.openStack.push(span);
+    }
+}
+/**
+ * @param value
+ * @returns
+ */
+function escapeHTML(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#x27;');
+}
+
 class HighlightLoader {
     constructor() {
         this.document = inject(DOCUMENT);
         this.options = inject(NXT_HIGHLIGHT_OPTIONS, { optional: true });
         this.pendingTasks = inject(PendingTasks);
-        this.ready = this.pendingTasks.run(() => this.loadLibrary()
+        this._t = this.pendingTasks.add();
+        this.ready = this.loadLibrary()
             .then(async (hljs) => {
             if (this.options?.lineNumbersLoader) {
                 const plugin = await this.options.lineNumbersLoader();
                 hljs.lineNumbersBlock = plugin.activateLineNumbers(this.document);
             }
+            hljs.configure({
+                __emitter: TokenTreeEmitter
+            });
             if (this.options?.highlightOptions)
                 hljs.configure(this.options.highlightOptions);
             return hljs;
-        }));
+        })
+            .finally(this._t);
         if (this.options?.themePath) {
             this.loadTheme(this.options.themePath);
         }
@@ -99,10 +374,10 @@ class HighlightLoader {
         this.themeLinkElement.media = 'screen,print';
         this.document.head.appendChild(this.themeLinkElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightLoader, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightLoader, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightLoader, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -204,10 +479,10 @@ class HighlightJS {
             hljs.lineNumbersBlock(el, options);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightJS, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightJS, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightJS, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightJS, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightJS, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightJS, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -273,35 +548,30 @@ class HighlightBase {
     setInnerHTML(content) {
         this.nativeElement.innerHTML = trustedHTMLFromStringBypass(this.sanitizer.sanitize(SecurityContext.HTML, content || null) || '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.3", type: HighlightBase, isStandalone: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: HighlightBase, isStandalone: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
-class HighlightDirective extends HighlightBase {
+class HighlightAutoDirective extends HighlightBase {
     constructor() {
         super(...arguments);
         /**
          * Code to highlight
          */
-        this.code = input(undefined, { alias: 'nxtHighlight' });
+        this.code = input(undefined, { alias: 'nxtHighlightAuto' });
         /**
          * Highlighted result
          */
         this.highlightResult = signal(undefined);
         /**
-         * The language name highlight only one language
-         */
-        this.language = input.required();
-        /**
-         * An optional flag, when set to true it forces highlighting to finish even in case of detecting
-         * illegal syntax for the language instead of throwing an exception
+         * An optional array of language names and aliases restricting detection to only those languages
+         *
+         * The subset can also be set with configure, but the local parameter overrides the option if set.
          */
-        this.ignoreIllegals = input(undefined, {
-            transform: booleanAttribute
-        });
+        this.languages = input();
         /**
          * Stream that emits when code string is highlighted
          */
@@ -309,42 +579,44 @@ class HighlightDirective extends HighlightBase {
     }
     highlightElement(code) {
         const hljs = this.hljs.hljs();
-        return hljs?.highlight(code, {
-            language: this.language(),
-            ignoreIllegals: this.ignoreIllegals()
-        });
+        return hljs?.highlightAuto(code, this.languages());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: HighlightDirective, isStandalone: true, selector: "[nxtHighlight]", inputs: { code: { classPropertyName: "code", publicName: "nxtHighlight", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: true, transformFunction: null }, ignoreIllegals: { classPropertyName: "ignoreIllegals", publicName: "ignoreIllegals", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { highlighted: "highlighted" }, host: { properties: { "class.hljs": "true" } }, providers: [{ provide: HighlightBase, useExisting: HighlightDirective }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightAutoDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: HighlightAutoDirective, isStandalone: true, selector: "[nxtHighlightAuto]", inputs: { code: { classPropertyName: "code", publicName: "nxtHighlightAuto", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { highlighted: "highlighted" }, host: { properties: { "class.hljs": "true" } }, providers: [{ provide: HighlightBase, useExisting: HighlightAutoDirective }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightAutoDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[nxtHighlight]',
-                    providers: [{ provide: HighlightBase, useExisting: HighlightDirective }],
+                    selector: '[nxtHighlightAuto]',
+                    providers: [{ provide: HighlightBase, useExisting: HighlightAutoDirective }],
                     host: {
                         '[class.hljs]': 'true'
                     }
                 }]
         }] });
 
-class HighlightAutoDirective extends HighlightBase {
+class HighlightDirective extends HighlightBase {
     constructor() {
         super(...arguments);
         /**
          * Code to highlight
          */
-        this.code = input(undefined, { alias: 'nxtHighlightAuto' });
+        this.code = input(undefined, { alias: 'nxtHighlight' });
         /**
          * Highlighted result
          */
         this.highlightResult = signal(undefined);
         /**
-         * An optional array of language names and aliases restricting detection to only those languages
-         *
-         * The subset can also be set with configure, but the local parameter overrides the option if set.
+         * The language name highlight only one language
          */
-        this.languages = input();
+        this.language = input.required();
+        /**
+         * An optional flag, when set to true it forces highlighting to finish even in case of detecting
+         * illegal syntax for the language instead of throwing an exception
+         */
+        this.ignoreIllegals = input(undefined, {
+            transform: booleanAttribute
+        });
         /**
          * Stream that emits when code string is highlighted
          */
@@ -352,16 +624,19 @@ class HighlightAutoDirective extends HighlightBase {
     }
     highlightElement(code) {
         const hljs = this.hljs.hljs();
-        return hljs?.highlightAuto(code, this.languages());
+        return hljs?.highlight(code, {
+            language: this.language(),
+            ignoreIllegals: this.ignoreIllegals()
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightAutoDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.3", type: HighlightAutoDirective, isStandalone: true, selector: "[nxtHighlightAuto]", inputs: { code: { classPropertyName: "code", publicName: "nxtHighlightAuto", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { highlighted: "highlighted" }, host: { properties: { "class.hljs": "true" } }, providers: [{ provide: HighlightBase, useExisting: HighlightAutoDirective }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: HighlightDirective, isStandalone: true, selector: "[nxtHighlight]", inputs: { code: { classPropertyName: "code", publicName: "nxtHighlight", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: true, transformFunction: null }, ignoreIllegals: { classPropertyName: "ignoreIllegals", publicName: "ignoreIllegals", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { highlighted: "highlighted" }, host: { properties: { "class.hljs": "true" } }, providers: [{ provide: HighlightBase, useExisting: HighlightDirective }], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightAutoDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[nxtHighlightAuto]',
-                    providers: [{ provide: HighlightBase, useExisting: HighlightAutoDirective }],
+                    selector: '[nxtHighlight]',
+                    providers: [{ provide: HighlightBase, useExisting: HighlightDirective }],
                     host: {
                         '[class.hljs]': 'true'
                     }
@@ -369,11 +644,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
         }] });
 
 class HighlightModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.3", ngImport: i0, type: HighlightModule, imports: [HighlightDirective, HighlightAutoDirective], exports: [HighlightDirective, HighlightAutoDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: HighlightModule, imports: [HighlightDirective, HighlightAutoDirective], exports: [HighlightDirective, HighlightAutoDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: HighlightModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: HighlightModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [HighlightDirective, HighlightAutoDirective],