@tailng-ui/components 0.1.0

package/src/lib/utility/code-block/tng-code-block.component.js

@@ -0,0 +1,586 @@
+import { __decorate } from "tslib";
+import { booleanAttribute, Component, computed, effect, inject, input, output, signal, } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { TngCodeBlock as TngCodeBlockPrimitive, TngCodeBlockBody as TngCodeBlockBodyPrimitive, TngCodeBlockCode as TngCodeBlockCodePrimitive, TngCodeBlockGutter as TngCodeBlockGutterPrimitive, TngCodeBlockHeader as TngCodeBlockHeaderPrimitive, TngCopy, } from '@tailng-ui/primitives';
+import { escapeTngCodeHtml, normalizeTngCodeLanguage, resolveTngCodeHighlightResult, TNG_CODE_HIGHLIGHTING_CONFIG, } from './highlighting';
+const defaultCopyResetDuration = 1500;
+const highlightModeSet = new Set(['auto', 'off', 'on']);
+function normalizeOptionalString(value) {
+    if (value === null || value === undefined) {
+        return null;
+    }
+    const normalized = value.trim();
+    return normalized.length > 0 ? normalized : null;
+}
+function toRoundedPositiveNumber(value) {
+    return Math.max(0, Math.round(value));
+}
+function coerceOptionalBoolean(value) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    return booleanAttribute(value);
+}
+function coercePositiveInteger(value, fallback) {
+    const numericValue = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(numericValue)) {
+        return fallback;
+    }
+    return Math.max(1, Math.round(numericValue));
+}
+function coerceOptionalPositiveNumber(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    const numericValue = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(numericValue)) {
+        return undefined;
+    }
+    return toRoundedPositiveNumber(numericValue);
+}
+function coerceTngCodeBlockCopyMode(value) {
+    if (value === 'auto' || value === undefined || value === null) {
+        return 'auto';
+    }
+    if (value === '' || value === true || value === 'true') {
+        return true;
+    }
+    if (value === false || value === 'false') {
+        return false;
+    }
+    return 'auto';
+}
+function coerceTngCodeBlockLineNumbersMode(value) {
+    if (value === 'auto') {
+        return 'auto';
+    }
+    if (value === undefined || value === null) {
+        return false;
+    }
+    if (value === '' || value === true || value === 'true') {
+        return true;
+    }
+    if (value === false || value === 'false') {
+        return false;
+    }
+    return false;
+}
+function coerceTngCodeBlockSanitizeHtml(value) {
+    if (value === undefined || value === null || value === 'auto') {
+        return 'auto';
+    }
+    if (value === '' || value === true || value === 'true') {
+        return true;
+    }
+    if (value === false || value === 'false') {
+        return false;
+    }
+    return 'auto';
+}
+function normalizeHighlightLineNumber(value) {
+    if (!Number.isFinite(value)) {
+        return null;
+    }
+    const normalized = Math.round(value);
+    return normalized > 0 ? normalized : null;
+}
+function toNormalizedHighlightLineSet(value) {
+    if (value === undefined || value === null || value.length === 0) {
+        return new Set();
+    }
+    const normalizedValues = new Set();
+    for (const entry of value) {
+        if (typeof entry === 'number') {
+            const normalized = normalizeHighlightLineNumber(entry);
+            if (normalized !== null) {
+                normalizedValues.add(normalized);
+            }
+            continue;
+        }
+        const [start, end] = entry;
+        const normalizedStart = normalizeHighlightLineNumber(start);
+        const normalizedEnd = normalizeHighlightLineNumber(end);
+        if (normalizedStart === null || normalizedEnd === null) {
+            continue;
+        }
+        const from = Math.min(normalizedStart, normalizedEnd);
+        const to = Math.max(normalizedStart, normalizedEnd);
+        for (let current = from; current <= to; current += 1) {
+            normalizedValues.add(current);
+        }
+    }
+    return normalizedValues;
+}
+function tokenClassNameToAttributeValue(className) {
+    if (className === null || className === undefined) {
+        return '';
+    }
+    return className
+        .trim()
+        .split(/\s+/)
+        .filter((token) => token.length > 0)
+        .join(' ');
+}
+function renderToken(token) {
+    const escapedContent = escapeTngCodeHtml(token.content);
+    const normalizedClassName = tokenClassNameToAttributeValue(token.className);
+    if (normalizedClassName.length === 0) {
+        return escapedContent;
+    }
+    return `<span class="${escapeTngCodeHtml(normalizedClassName)}">${escapedContent}</span>`;
+}
+function renderTokenLine(line) {
+    return line.map((token) => renderToken(token)).join('');
+}
+function splitCodeLines(code) {
+    if (code.length === 0) {
+        return [''];
+    }
+    const lines = code.split('\n');
+    if (lines.length > 1 && lines[lines.length - 1] === '') {
+        lines.pop();
+    }
+    return lines;
+}
+function toNormalizedCopyError(value) {
+    if (value instanceof Error) {
+        return value;
+    }
+    if (typeof value === 'object' && value !== null && 'error' in value) {
+        const nestedError = value.error;
+        if (nestedError instanceof Error) {
+            return nestedError;
+        }
+    }
+    return new Error('Copy failed.');
+}
+function toCssSizeValue(value) {
+    if (value === undefined || value === null) {
+        return null;
+    }
+    if (typeof value === 'number') {
+        if (!Number.isFinite(value)) {
+            return null;
+        }
+        return `${Math.max(0, value)}px`;
+    }
+    const normalized = value.trim();
+    return normalized.length > 0 ? normalized : null;
+}
+function shouldHighlight(mode) {
+    return mode === 'auto' || mode === 'on';
+}
+export function coerceTngCodeBlockHighlightMode(value) {
+    if (highlightModeSet.has(value)) {
+        return value;
+    }
+    return 'auto';
+}
+export function coerceTngCodeBlockCopyResetDuration(value) {
+    const numericValue = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(numericValue)) {
+        return defaultCopyResetDuration;
+    }
+    return toRoundedPositiveNumber(numericValue);
+}
+export function coerceTngCodeBlockStartingLineNumber(value) {
+    return coercePositiveInteger(value, 1);
+}
+export function normalizeTngCodeBlockCode(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    return value.replace(/\r\n?/g, '\n');
+}
+export function toTngCodeBlockLineNumbers(code, startingLineNumber = 1) {
+    const normalizedStart = Math.max(1, Math.round(startingLineNumber));
+    return splitCodeLines(code).map((_, index) => normalizedStart + index);
+}
+let TngCodeBlockComponent = class TngCodeBlockComponent {
+    adapter = input(null);
+    caption = input(null);
+    code = input('');
+    copyMode = input('auto', {
+        alias: 'copy',
+        transform: coerceTngCodeBlockCopyMode,
+    });
+    copyLabel = input('Copy code');
+    copiedLabel = input('Copied');
+    copyResetDuration = input(defaultCopyResetDuration, {
+        transform: coerceTngCodeBlockCopyResetDuration,
+    });
+    copySuccessDurationMs = input(undefined, {
+        transform: coerceOptionalPositiveNumber,
+    });
+    copyText = input(null);
+    errorLabel = input('Copy failed');
+    focusLines = input(false, {
+        transform: booleanAttribute,
+    });
+    highlight = input(true, {
+        transform: booleanAttribute,
+    });
+    highlightDebounceMs = input(0, {
+        transform: coerceTngCodeBlockCopyResetDuration,
+    });
+    highlightLines = input(null);
+    highlightMode = input('auto', {
+        transform: coerceTngCodeBlockHighlightMode,
+    });
+    language = input(null);
+    lineNumbersMode = input(false, {
+        alias: 'lineNumbers',
+        transform: coerceTngCodeBlockLineNumbersMode,
+    });
+    maxHeight = input(null);
+    sanitizeHtml = input('auto', {
+        transform: coerceTngCodeBlockSanitizeHtml,
+    });
+    showHeader = input(true, {
+        transform: booleanAttribute,
+    });
+    showLanguageBadge = input(true, {
+        transform: booleanAttribute,
+    });
+    showLineNumbers = input(undefined, {
+        transform: coerceOptionalBoolean,
+    });
+    startingLineNumber = input(1, {
+        transform: coerceTngCodeBlockStartingLineNumber,
+    });
+    theme = input(null);
+    title = input(null);
+    variant = input('default');
+    wrap = input(false, {
+        transform: booleanAttribute,
+    });
+    copy = output();
+    copyError = output();
+    copySuccess = output();
+    renderStateChange = output();
+    tngCopied = output();
+    tngCopyError = output();
+    copyButtonLabel = computed(() => {
+        const state = this.copyState();
+        if (state === 'copied') {
+            return this.copiedLabel();
+        }
+        if (state === 'error') {
+            return this.errorLabel();
+        }
+        return this.copyLabel();
+    });
+    copyPayload = computed(() => {
+        const value = this.copyText();
+        if (typeof value === 'function') {
+            try {
+                return value({
+                    code: this.normalizedCode(),
+                    language: this.languageForBadge(),
+                    theme: normalizeTngCodeLanguage(this.theme()),
+                });
+            }
+            catch {
+                return this.normalizedCode();
+            }
+        }
+        if (typeof value === 'string') {
+            return value;
+        }
+        return this.normalizedCode();
+    });
+    dataHasCopy = computed(() => this.shouldShowCopyAction() ? 'true' : 'false');
+    dataHasTitle = computed(() => this.titleText() === null ? 'false' : 'true');
+    dataHighlighted = computed(() => this.renderState() === 'highlighted' ? 'true' : 'false');
+    dataWrap = computed(() => (this.wrap() ? 'true' : 'false'));
+    effectiveCopyResetDuration = computed(() => {
+        return this.copySuccessDurationMs() ?? this.copyResetDuration();
+    });
+    effectiveLineNumbers = computed(() => {
+        const legacyValue = this.showLineNumbers();
+        if (legacyValue !== undefined) {
+            return legacyValue;
+        }
+        const mode = this.lineNumbersMode();
+        if (mode === 'auto') {
+            return splitCodeLines(this.normalizedCode()).length > 1;
+        }
+        return mode;
+    });
+    hasHeaderContent = computed(() => {
+        return this.titleText() !== null || this.hasLanguageBadge() || this.shouldShowCopyAction();
+    });
+    hasLanguageBadge = computed(() => {
+        return this.showLanguageBadge() && this.languageForBadge() !== null;
+    });
+    highlightLineSet = computed(() => toNormalizedHighlightLineSet(this.highlightLines()));
+    isHighlighting = computed(() => this.renderState() === 'highlighting');
+    languageForBadge = computed(() => {
+        return this.resolvedLanguage() ?? this.normalizedLanguage();
+    });
+    languageLabel = computed(() => {
+        return this.languageForBadge() ?? 'text';
+    });
+    lineNumbers = computed(() => {
+        return this.renderedLines().map((line) => line.lineNumber);
+    });
+    maxHeightCssValue = computed(() => toCssSizeValue(this.maxHeight()));
+    normalizedCode = computed(() => normalizeTngCodeBlockCode(this.code()));
+    renderState = signal('idle');
+    renderedLines = computed(() => {
+        const baseLines = this.baseLineHtml();
+        const start = this.startingLineNumber();
+        const highlightSet = this.highlightLineSet();
+        const shouldDim = this.focusLines() && highlightSet.size > 0;
+        return baseLines.map((html, index) => {
+            const lineNumber = start + index;
+            const highlighted = highlightSet.has(lineNumber);
+            return {
+                dimmed: shouldDim && !highlighted,
+                highlighted,
+                html,
+                lineNumber,
+            };
+        });
+    });
+    shouldRenderBodyLineNumbers = computed(() => this.effectiveLineNumbers());
+    shouldRenderHeader = computed(() => {
+        return this.showHeader() && this.hasHeaderContent();
+    });
+    shouldShowCopyAction = computed(() => {
+        const mode = this.copyMode();
+        if (mode === 'auto') {
+            return this.normalizedCode().length > 0;
+        }
+        return mode;
+    });
+    titleText = computed(() => normalizeOptionalString(this.title()));
+    baseLineHtml = signal(['']);
+    copyState = signal('idle');
+    domSanitizer = inject(DomSanitizer);
+    highlightingConfig = inject(TNG_CODE_HIGHLIGHTING_CONFIG);
+    normalizedLanguage = computed(() => normalizeTngCodeLanguage(this.language()));
+    resolvedLanguage = signal(null);
+    copyResetTimer = null;
+    destroyed = false;
+    highlightDebounceTimer = null;
+    highlightRequestId = 0;
+    lastEmittedRenderState = 'idle';
+    renderCache = new Map();
+    constructor() {
+        effect(() => {
+            const request = {
+                adapter: normalizeTngCodeLanguage(this.adapter()),
+                code: this.normalizedCode(),
+                includeLineWrappers: this.shouldIncludeLineWrappers(),
+                language: this.normalizedLanguage(),
+                theme: normalizeTngCodeLanguage(this.theme()),
+            };
+            this.enqueueRenderRequest({
+                request,
+                shouldHighlight: this.shouldHighlightCode(),
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        this.highlightRequestId += 1;
+        this.clearCopyResetTimer();
+        this.clearHighlightDebounceTimer();
+    }
+    onPrimitiveCopy(...args) {
+        const [event] = args;
+        if (typeof event === 'object' &&
+            event !== null &&
+            'text' in event &&
+            'trigger' in event &&
+            typeof event.text === 'string' &&
+            typeof event.trigger === 'string') {
+            this.copy.emit(event);
+        }
+    }
+    onPrimitiveCopyError(...args) {
+        const [event] = args;
+        const normalizedError = toNormalizedCopyError(event);
+        this.copyState.set('error');
+        this.tngCopyError.emit(normalizedError);
+        if (typeof event === 'object' && event !== null && 'error' in event) {
+            this.copyError.emit(event);
+        }
+        else {
+            this.copyError.emit({ error: normalizedError });
+        }
+        this.scheduleCopyStateReset();
+    }
+    onPrimitiveCopySuccess(...args) {
+        const [event] = args;
+        if (typeof event !== 'object' ||
+            event === null ||
+            !('text' in event) ||
+            !('method' in event) ||
+            typeof event.text !== 'string' ||
+            typeof event.method !== 'string') {
+            return;
+        }
+        const payload = event;
+        this.copyState.set('copied');
+        this.copySuccess.emit(payload);
+        this.tngCopied.emit(payload.text);
+        this.scheduleCopyStateReset();
+    }
+    applyPlainText(code, language) {
+        this.resolvedLanguage.set(language);
+        this.baseLineHtml.set(splitCodeLines(code).map((line) => escapeTngCodeHtml(line)));
+    }
+    applyResolvedHighlightResult(result, request) {
+        this.resolvedLanguage.set(result.language ?? request.language);
+        if (result.kind === 'tokens') {
+            if (result.tokens.length === 0) {
+                return false;
+            }
+            this.baseLineHtml.set(result.tokens.map((line) => renderTokenLine(line)));
+            return true;
+        }
+        const htmlLines = result.html.split('\n');
+        if (htmlLines.length === 0 || (htmlLines.length === 1 && htmlLines[0].length === 0)) {
+            return false;
+        }
+        const shouldBypassSanitization = this.sanitizeHtml() === false && result.trustedHtml;
+        if (shouldBypassSanitization) {
+            this.baseLineHtml.set(htmlLines.map((line) => this.domSanitizer.bypassSecurityTrustHtml(line)));
+            return true;
+        }
+        this.baseLineHtml.set(htmlLines);
+        return true;
+    }
+    buildCacheKey(request) {
+        return [
+            request.adapter ?? '',
+            request.language ?? '',
+            request.theme ?? '',
+            request.includeLineWrappers ? '1' : '0',
+            request.code,
+        ].join('\u241f');
+    }
+    clearCopyResetTimer() {
+        if (this.copyResetTimer === null) {
+            return;
+        }
+        clearTimeout(this.copyResetTimer);
+        this.copyResetTimer = null;
+    }
+    clearHighlightDebounceTimer() {
+        if (this.highlightDebounceTimer === null) {
+            return;
+        }
+        clearTimeout(this.highlightDebounceTimer);
+        this.highlightDebounceTimer = null;
+    }
+    enqueueRenderRequest(input) {
+        this.clearHighlightDebounceTimer();
+        const debounceMs = this.highlightDebounceMs();
+        if (debounceMs <= 0) {
+            void this.renderRequest(input);
+            return;
+        }
+        this.highlightDebounceTimer = setTimeout(() => {
+            this.highlightDebounceTimer = null;
+            void this.renderRequest(input);
+        }, debounceMs);
+    }
+    isStaleRequest(requestId) {
+        return this.destroyed || requestId !== this.highlightRequestId;
+    }
+    scheduleCopyStateReset() {
+        this.clearCopyResetTimer();
+        this.copyResetTimer = setTimeout(() => {
+            this.copyState.set('idle');
+            this.copyResetTimer = null;
+        }, this.effectiveCopyResetDuration());
+    }
+    setRenderState(state, error) {
+        this.renderState.set(state);
+        if (this.lastEmittedRenderState === state) {
+            return;
+        }
+        this.lastEmittedRenderState = state;
+        if (state === 'error') {
+            this.renderStateChange.emit({ error, state });
+            return;
+        }
+        this.renderStateChange.emit({ state });
+    }
+    shouldHighlightCode() {
+        if (!this.highlight()) {
+            return false;
+        }
+        return shouldHighlight(this.highlightMode());
+    }
+    shouldIncludeLineWrappers() {
+        return this.effectiveLineNumbers() || this.highlightLineSet().size > 0 || this.focusLines();
+    }
+    toHighlightRequest(request) {
+        return {
+            adapter: request.adapter,
+            code: request.code,
+            includeLineWrappers: request.includeLineWrappers,
+            language: request.language,
+            theme: request.theme,
+        };
+    }
+    async renderRequest(input) {
+        const requestId = this.highlightRequestId + 1;
+        this.highlightRequestId = requestId;
+        if (!input.shouldHighlight) {
+            this.applyPlainText(input.request.code, input.request.language);
+            this.setRenderState('idle');
+            return;
+        }
+        this.setRenderState('highlighting');
+        try {
+            const cacheKey = this.buildCacheKey(input.request);
+            let resolvedResult = this.renderCache.get(cacheKey);
+            if (resolvedResult === undefined) {
+                resolvedResult = await resolveTngCodeHighlightResult(this.toHighlightRequest(input.request), this.highlightingConfig);
+                this.renderCache.set(cacheKey, resolvedResult);
+            }
+            if (this.isStaleRequest(requestId)) {
+                return;
+            }
+            if (resolvedResult === null) {
+                this.applyPlainText(input.request.code, input.request.language);
+                this.setRenderState('highlighted');
+                return;
+            }
+            const didRenderHighlight = this.applyResolvedHighlightResult(resolvedResult, input.request);
+            if (!didRenderHighlight) {
+                this.applyPlainText(input.request.code, input.request.language);
+            }
+            this.setRenderState('highlighted');
+        }
+        catch (error) {
+            if (this.isStaleRequest(requestId)) {
+                return;
+            }
+            this.applyPlainText(input.request.code, input.request.language);
+            this.setRenderState('error', error);
+        }
+    }
+};
+TngCodeBlockComponent = __decorate([
+    Component({
+        selector: 'tng-code-block',
+        imports: [
+            TngCodeBlockPrimitive,
+            TngCodeBlockHeaderPrimitive,
+            TngCodeBlockBodyPrimitive,
+            TngCodeBlockGutterPrimitive,
+            TngCodeBlockCodePrimitive,
+            TngCopy,
+        ],
+        templateUrl: './tng-code-block.component.html',
+        styleUrl: './tng-code-block.component.css',
+    })
+], TngCodeBlockComponent);
+export { TngCodeBlockComponent };
+//# sourceMappingURL=tng-code-block.component.js.map