@koobiq/components 21.0.0 → 21.0.1

package/fesm2022/koobiq-components-code-block.mjs

@@ -20,6 +20,7 @@ import { KbqTabsModule } from '@koobiq/components/tabs';
 import * as i5 from '@koobiq/components/tooltip';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
 import { take, merge, fromEvent, map, debounceTime, filter } from 'rxjs';
+import plaintext from 'highlight.js/lib/languages/plaintext';
 
 /**
  * The highlight.js line numbers plugin, kept apart from the code that calls it until code blocks number their lines
@@ -350,9 +351,21 @@ function highlightJSLineNumbersPlugin(d, w) {
     }
 }
 
-const defaultHljsLoader = () => import('highlight.js');
+// The core and not the full bundle: a bundler emits a chunk for every `import()` it finds, called or not, so the
+// full bundle has to be imported by the application that asks for it. An instance of its own, as the module is one
+// object for the whole process, the full bundle included: the languages one configuration registers on it would reach
+// every other, and every later server render.
+const defaultHljsLoader = async () => ({
+    default: (await import('highlight.js/lib/core')).default.newInstance()
+});
 // The key of the default configuration: `config ?? {}` would make a new key on every call.
 const DEFAULT_CONFIG = {};
+/**
+ * Language the loader registers on every instance, the fallback of a file the code block cannot highlight otherwise.
+ *
+ * @internal
+ */
+const PLAIN_TEXT_LANGUAGE = 'plaintext';
 /**
  * Loads highlight.js once per configuration and installs its line numbers plugin once per application.
  *
@@ -403,14 +416,18 @@ class KbqCodeBlockHighlightJsLoader {
         // The plugin cannot take empty markup: it reads the last of no lines.
         return html ? this.lineNumbersPlugin().lineNumbersValue(html, options) : html;
     }
-    async importInstance({ core, languages }) {
-        const { default: instance } = await (core ?? defaultHljsLoader)();
-        if (languages) {
-            await Promise.all(Object.entries(languages).map(async ([name, loader]) => {
-                const { default: language } = await loader();
-                instance.registerLanguage(name, language);
-            }));
-        }
+    async importInstance({ core, languages = {} }) {
+        const entries = Object.entries(languages);
+        // The languages do not need the core to load, so they load alongside it.
+        const [{ default: instance }, loaded] = await Promise.all([
+            (core ?? defaultHljsLoader)(),
+            Promise.all(entries.map(([, loader]) => loader()))
+        ]);
+        entries.forEach(([name], index) => instance.registerLanguage(name, loaded[index].default));
+        // The directive falls back to plain text, and highlight.js throws on a language it has not registered, as the
+        // core has none.
+        if (!instance.getLanguage(PLAIN_TEXT_LANGUAGE))
+            instance.registerLanguage(PLAIN_TEXT_LANGUAGE, plaintext);
         return instance;
     }
     /**
@@ -454,7 +471,6 @@ const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG = new InjectionToken('KBQ_CODE_BLOCK_HI
  * ```ts
  * providers: [
  *   kbqCodeBlockHighlightJsConfigProvider({
- *     core: () => import('highlight.js/lib/core'),
  *     languages: {
  *       typescript: () => import('highlight.js/lib/languages/typescript'),
  *       css: () => import('highlight.js/lib/languages/css'),
@@ -469,11 +485,13 @@ const kbqCodeBlockHighlightJsConfigProvider = (options) => ({
     useValue: options
 });
 /**
- * Fallback language for code block if language is not supported/specified.
+ * Fallback language for code block if language is not supported/specified. It has to be registered in `languages` of
+ * `KbqCodeBlockHighlightJsConfig`, unless it is plain text or the full bundle of highlight.js is loaded, or the code
+ * block falls back to `plaintext`.
  *
- * See the [list of supported languages](https://highlightjs.readthedocs.io/en/stable/supported-languages.html).
+ * See the [list of supported languages](https://github.com/highlightjs/highlight.js/blob/11-stable/SUPPORTED_LANGUAGES.md).
  */
-const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE = new InjectionToken('KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE', { factory: () => 'plaintext' });
+const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE = new InjectionToken('KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE', { factory: () => PLAIN_TEXT_LANGUAGE });
 /** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`. */
 const kbqCodeBlockFallbackFileLanguageProvider = (language) => ({
     provide: KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE,
@@ -565,18 +583,21 @@ class KbqCodeBlockHighlight {
         let { language } = file;
         const isKnownLanguage = !!language && !!hljs.getLanguage(language);
         if (!language || !isKnownLanguage) {
+            const fallbackLanguage = this.fallbackLanguage(hljs);
             // A file without a language is plain text by design; only a language the core lacks is a mistake.
             if (language) {
-                this.warn(`[KbqCodeBlock] Unknown file language: "${language}". Fall back to "${this.fallbackFileLanguage}".`, file);
+                this.warn(`[KbqCodeBlock] Unknown file language: "${language}". Fall back to "${fallbackLanguage}".`, file);
             }
-            language = this.fallbackFileLanguage;
+            language = fallbackLanguage;
         }
         const { value: highlightedHTML, language: highlightedLanguage, illegal, relevance } = hljs.highlight(file.content, { language });
         if (illegal) {
             this.warn('[KbqCodeBlock] File content contains illegal characters.', file);
         }
-        // Plain text has no syntax to score, so its relevance is always 0 — even for the fallback itself.
-        if (relevance === 0 && isKnownLanguage && highlightedLanguage !== 'plaintext') {
+        // Plain text and an empty file have no syntax to score, so their relevance is always 0. Plain text is compared by
+        // definition: highlight.js returns the name the file gives, which may be an alias such as `text`.
+        const isPlainText = hljs.getLanguage(language) === hljs.getLanguage(PLAIN_TEXT_LANGUAGE);
+        if (relevance === 0 && isKnownLanguage && !isPlainText && file.content.trim()) {
             this.warn('[KbqCodeBlock] File content does not match the specified programming language.', file);
         }
         const safeHTML = this.domSanitizer.sanitize(SecurityContext.HTML, highlightedHTML) ?? '';
@@ -586,6 +607,13 @@ class KbqCodeBlockHighlight {
         this.renderer.setAttribute(this.nativeElement, HIGHLIGHTED_MARKUP_ATTRIBUTE, '');
         this._pending.set(false);
     }
+    /** The fallback language, or plain text, which the loader registers on every instance, if it is unknown too. */
+    fallbackLanguage(hljs) {
+        if (hljs.getLanguage(this.fallbackFileLanguage))
+            return this.fallbackFileLanguage;
+        this.warn(`[KbqCodeBlock] Unknown fallback language: "${this.fallbackFileLanguage}". Fall back to "${PLAIN_TEXT_LANGUAGE}".`);
+        return PLAIN_TEXT_LANGUAGE;
+    }
     warn(...messages) {
         if (!isDevMode())
             return;