quasar-ui-danx 0.4.95 → 0.4.99

package/src/helpers/formats/highlightSyntax.ts

@@ -0,0 +1,327 @@
+/**
+ * Lightweight syntax highlighting for JSON and YAML
+ * Returns HTML string with syntax highlighting spans
+ */
+
+export type HighlightFormat = "json" | "yaml" | "text" | "markdown";
+
+export interface HighlightOptions {
+	format: HighlightFormat;
+}
+
+/**
+ * Escape HTML entities to prevent XSS
+ */
+function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#039;");
+}
+
+/**
+ * Highlight JSON syntax by tokenizing first, then applying highlights
+ * This prevents issues with regex replacing content inside already-matched strings
+ */
+export function highlightJSON(code: string): string {
+	if (!code) return "";
+
+	const result: string[] = [];
+	let i = 0;
+
+	while (i < code.length) {
+		const char = code[i];
+
+		// String (starts with ")
+		if (char === '"') {
+			const startIndex = i;
+			i++; // skip opening quote
+
+			// Find the closing quote, handling escape sequences
+			while (i < code.length) {
+				if (code[i] === '\\' && i + 1 < code.length) {
+					i += 2; // skip escaped character
+				} else if (code[i] === '"') {
+					i++; // include closing quote
+					break;
+				} else {
+					i++;
+				}
+			}
+
+			const str = code.slice(startIndex, i);
+			const escapedStr = escapeHtml(str);
+
+			// Check if this is a key (followed by colon)
+			const afterString = code.slice(i).match(/^(\s*):/);
+			if (afterString) {
+				result.push(`<span class="syntax-key">${escapedStr}</span>`);
+				// Add the whitespace and colon
+				result.push(`<span class="syntax-punctuation">${escapeHtml(afterString[1])}:</span>`);
+				i += afterString[0].length;
+			} else {
+				// It's a string value
+				result.push(`<span class="syntax-string">${escapedStr}</span>`);
+			}
+			continue;
+		}
+
+		// Number (starts with digit or minus followed by digit)
+		if (/[-\d]/.test(char)) {
+			const numMatch = code.slice(i).match(/^-?\d+(\.\d+)?([eE][+-]?\d+)?/);
+			if (numMatch) {
+				result.push(`<span class="syntax-number">${escapeHtml(numMatch[0])}</span>`);
+				i += numMatch[0].length;
+				continue;
+			}
+		}
+
+		// Boolean true
+		if (code.slice(i, i + 4) === 'true') {
+			result.push(`<span class="syntax-boolean">true</span>`);
+			i += 4;
+			continue;
+		}
+
+		// Boolean false
+		if (code.slice(i, i + 5) === 'false') {
+			result.push(`<span class="syntax-boolean">false</span>`);
+			i += 5;
+			continue;
+		}
+
+		// Null
+		if (code.slice(i, i + 4) === 'null') {
+			result.push(`<span class="syntax-null">null</span>`);
+			i += 4;
+			continue;
+		}
+
+		// Punctuation
+		if (/[{}\[\],:]/.test(char)) {
+			result.push(`<span class="syntax-punctuation">${escapeHtml(char)}</span>`);
+			i++;
+			continue;
+		}
+
+		// Whitespace and other characters
+		result.push(escapeHtml(char));
+		i++;
+	}
+
+	return result.join('');
+}
+
+/**
+ * Highlight a YAML value based on its type
+ */
+function highlightYAMLValue(value: string): string {
+	if (!value) return value;
+
+	// Quoted string (complete)
+	if (/^(&quot;.*&quot;|&#039;.*&#039;)$/.test(value) || /^["'].*["']$/.test(value)) {
+		return `<span class="syntax-string">${value}</span>`;
+	}
+	// Number (strict format: integers, decimals, scientific notation)
+	if (/^-?\d+(\.\d+)?([eE][+-]?\d+)?$/.test(value)) {
+		return `<span class="syntax-number">${value}</span>`;
+	}
+	// Boolean
+	if (/^(true|false)$/i.test(value)) {
+		return `<span class="syntax-boolean">${value}</span>`;
+	}
+	// Null
+	if (/^(null|~)$/i.test(value)) {
+		return `<span class="syntax-null">${value}</span>`;
+	}
+	// Block scalar indicators - don't wrap, handle continuation separately
+	if (/^[|>][-+]?\d*$/.test(value)) {
+		return `<span class="syntax-punctuation">${value}</span>`;
+	}
+	// Unquoted string
+	return `<span class="syntax-string">${value}</span>`;
+}
+
+/**
+ * Check if a line is a continuation of a multi-line string
+ * (indented content following a block scalar or inside a quoted string)
+ */
+function getIndentLevel(line: string): number {
+	const match = line.match(/^(\s*)/);
+	return match ? match[1].length : 0;
+}
+
+/**
+ * Highlight YAML syntax with multi-line string support
+ */
+export function highlightYAML(code: string): string {
+	if (!code) return "";
+
+	const lines = code.split("\n");
+	const highlightedLines: string[] = [];
+
+	// State tracking for multi-line constructs
+	let inBlockScalar = false;
+	let blockScalarIndent = 0;
+	let inQuotedString = false;
+	let quoteChar = "";
+	let inUnquotedMultiline = false;
+	let unquotedMultilineKeyIndent = 0;
+
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+		const escaped = escapeHtml(line);
+		const currentIndent = getIndentLevel(line);
+		const trimmedLine = line.trim();
+
+		// Handle block scalar continuation (| or > style)
+		if (inBlockScalar) {
+			// Block scalar ends when we hit a line with less or equal indentation (and content)
+			if (trimmedLine && currentIndent <= blockScalarIndent) {
+				inBlockScalar = false;
+				// Fall through to normal processing
+			} else {
+				// This is a continuation line - highlight as string
+				highlightedLines.push(`<span class="syntax-string">${escaped}</span>`);
+				continue;
+			}
+		}
+
+		// Handle quoted string continuation
+		if (inQuotedString) {
+			// Check if this line closes the quote
+			const escapedQuote = quoteChar === '"' ? '&quot;' : '&#039;';
+
+			// Count unescaped quotes in this line
+			let closed = false;
+			let searchLine = escaped;
+			while (searchLine.includes(escapedQuote)) {
+				const idx = searchLine.indexOf(escapedQuote);
+				// Check if preceded by backslash (escaped)
+				if (idx > 0 && searchLine[idx - 1] === '\\') {
+					searchLine = searchLine.slice(idx + escapedQuote.length);
+					continue;
+				}
+				closed = true;
+				break;
+			}
+
+			if (closed) {
+				// Find position of closing quote
+				const closeIdx = escaped.indexOf(escapedQuote);
+				const beforeClose = escaped.slice(0, closeIdx + escapedQuote.length);
+				const afterClose = escaped.slice(closeIdx + escapedQuote.length);
+
+				highlightedLines.push(`<span class="syntax-string">${beforeClose}</span>${afterClose}`);
+				inQuotedString = false;
+			} else {
+				// Still in quoted string
+				highlightedLines.push(`<span class="syntax-string">${escaped}</span>`);
+			}
+			continue;
+		}
+
+		// Handle unquoted multi-line string continuation
+		if (inUnquotedMultiline) {
+			// Unquoted multiline ends when we hit a line with <= indentation to the key
+			// or when the line contains a colon (new key-value pair)
+			if (trimmedLine && currentIndent <= unquotedMultilineKeyIndent) {
+				inUnquotedMultiline = false;
+				// Fall through to normal processing
+			} else if (trimmedLine) {
+				// This is a continuation line - highlight as string
+				highlightedLines.push(`<span class="syntax-string">${escaped}</span>`);
+				continue;
+			} else {
+				// Empty line within multiline - keep it
+				highlightedLines.push(escaped);
+				continue;
+			}
+		}
+
+		// Comments
+		if (/^\s*#/.test(line)) {
+			highlightedLines.push(`<span class="syntax-punctuation">${escaped}</span>`);
+			continue;
+		}
+
+		// Key-value pairs
+		const keyValueMatch = escaped.match(/^(\s*)([^:]+?)(:)(\s*)(.*)$/);
+		if (keyValueMatch) {
+			const [, indent, key, colon, space, value] = keyValueMatch;
+
+			// Check for block scalar start
+			if (/^[|>][-+]?\d*$/.test(value.trim())) {
+				inBlockScalar = true;
+				blockScalarIndent = currentIndent;
+				const highlightedValue = `<span class="syntax-punctuation">${value}</span>`;
+				highlightedLines.push(`${indent}<span class="syntax-key">${key}</span><span class="syntax-punctuation">${colon}</span>${space}${highlightedValue}`);
+				continue;
+			}
+
+			// Check for start of multi-line quoted string
+			const startsWithQuote = /^(&quot;|&#039;|"|')/.test(value);
+			const endsWithQuote = /(&quot;|&#039;|"|')$/.test(value);
+
+			if (startsWithQuote && !endsWithQuote && value.length > 1) {
+				// Multi-line quoted string starts here
+				inQuotedString = true;
+				quoteChar = value.startsWith('&quot;') || value.startsWith('"') ? '"' : "'";
+				highlightedLines.push(`${indent}<span class="syntax-key">${key}</span><span class="syntax-punctuation">${colon}</span>${space}<span class="syntax-string">${value}</span>`);
+				continue;
+			}
+
+			// Check for start of unquoted multi-line string
+			// If value is an unquoted string and next line is more indented, it's a multiline
+			if (value && !startsWithQuote && i + 1 < lines.length) {
+				const nextLine = lines[i + 1];
+				const nextIndent = getIndentLevel(nextLine);
+				const nextTrimmed = nextLine.trim();
+				// Next line must be more indented than current key and not be a new key-value or array item
+				if (nextTrimmed && nextIndent > currentIndent && !nextTrimmed.includes(':') && !nextTrimmed.startsWith('-')) {
+					inUnquotedMultiline = true;
+					unquotedMultilineKeyIndent = currentIndent;
+					highlightedLines.push(`${indent}<span class="syntax-key">${key}</span><span class="syntax-punctuation">${colon}</span>${space}<span class="syntax-string">${value}</span>`);
+					continue;
+				}
+			}
+
+			// Normal single-line value
+			const highlightedValue = highlightYAMLValue(value);
+			highlightedLines.push(`${indent}<span class="syntax-key">${key}</span><span class="syntax-punctuation">${colon}</span>${space}${highlightedValue}`);
+			continue;
+		}
+
+		// Array items (lines starting with -)
+		const arrayMatch = escaped.match(/^(\s*)(-)(\s*)(.*)$/);
+		if (arrayMatch) {
+			const [, indent, dash, space, value] = arrayMatch;
+			const highlightedValue = value ? highlightYAMLValue(value) : "";
+			highlightedLines.push(`${indent}<span class="syntax-punctuation">${dash}</span>${space}${highlightedValue}`);
+			continue;
+		}
+
+		highlightedLines.push(escaped);
+	}
+
+	return highlightedLines.join("\n");
+}
+
+/**
+ * Highlight code based on format
+ */
+export function highlightSyntax(code: string, options: HighlightOptions): string {
+	if (!code) return "";
+
+	switch (options.format) {
+		case "json":
+			return highlightJSON(code);
+		case "yaml":
+			return highlightYAML(code);
+		case "text":
+		default:
+			return escapeHtml(code);
+	}
+}

package/src/helpers/formats/index.ts

@@ -1,4 +1,6 @@
 export * from "./datetime";
+export * from "./highlightSyntax";
 export * from "./numbers";
-export * from "./strings";
 export * from "./parsers";
+export * from "./renderMarkdown";
+export * from "./strings";

package/src/helpers/formats/renderMarkdown.ts

@@ -0,0 +1,338 @@
+/**
+ * Lightweight markdown to HTML renderer
+ * Zero external dependencies, XSS-safe by default
+ */
+
+export interface MarkdownRenderOptions {
+	sanitize?: boolean; // XSS protection (default: true)
+}
+
+/**
+ * Escape HTML entities to prevent XSS
+ */
+function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#039;");
+}
+
+/**
+ * Token types for block-level parsing
+ */
+export type BlockToken =
+	| { type: "heading"; level: number; content: string }
+	| { type: "code_block"; language: string; content: string }
+	| { type: "blockquote"; content: string }
+	| { type: "ul"; items: string[] }
+	| { type: "ol"; items: string[]; start: number }
+	| { type: "hr" }
+	| { type: "paragraph"; content: string };
+
+/**
+ * Parse inline markdown elements within text
+ * Order matters: more specific patterns first
+ */
+export function parseInline(text: string, sanitize: boolean = true): string {
+	if (!text) return "";
+
+	// Escape HTML if sanitizing (before applying markdown)
+	let result = sanitize ? escapeHtml(text) : text;
+
+	// Images: ![alt](url) - must be before links
+	result = result.replace(
+		/!\[([^\]]*)\]\(([^)]+)\)/g,
+		'<img src="$2" alt="$1" />'
+	);
+
+	// Links: [text](url)
+	result = result.replace(
+		/\[([^\]]+)\]\(([^)]+)\)/g,
+		'<a href="$2">$1</a>'
+	);
+
+	// Inline code: `code` (escape the content again if already escaped)
+	result = result.replace(/`([^`]+)`/g, "<code>$1</code>");
+
+	// Bold + Italic: ***text*** or ___text___
+	result = result.replace(/\*\*\*([^*]+)\*\*\*/g, "<strong><em>$1</em></strong>");
+	result = result.replace(/___([^_]+)___/g, "<strong><em>$1</em></strong>");
+
+	// Bold: **text** or __text__
+	result = result.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+	result = result.replace(/__([^_]+)__/g, "<strong>$1</strong>");
+
+	// Italic: *text* or _text_ (but not inside words for underscores)
+	// For asterisks, match any single asterisk pairs
+	result = result.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+	// For underscores, only match at word boundaries
+	result = result.replace(/(^|[^a-zA-Z0-9])_([^_]+)_([^a-zA-Z0-9]|$)/g, "$1<em>$2</em>$3");
+
+	return result;
+}
+
+/**
+ * Tokenize markdown into block-level elements
+ */
+export function tokenizeBlocks(markdown: string): BlockToken[] {
+	const tokens: BlockToken[] = [];
+	const lines = markdown.split("\n");
+	let i = 0;
+
+	while (i < lines.length) {
+		const line = lines[i];
+		const trimmedLine = line.trim();
+
+		// Skip empty lines between blocks
+		if (!trimmedLine) {
+			i++;
+			continue;
+		}
+
+		// Code blocks: ```language ... ```
+		if (trimmedLine.startsWith("```")) {
+			const language = trimmedLine.slice(3).trim();
+			const contentLines: string[] = [];
+			i++;
+
+			while (i < lines.length && !lines[i].trim().startsWith("```")) {
+				contentLines.push(lines[i]);
+				i++;
+			}
+
+			tokens.push({
+				type: "code_block",
+				language,
+				content: contentLines.join("\n")
+			});
+
+			// Skip closing ```
+			if (i < lines.length) i++;
+			continue;
+		}
+
+		// Headings: # through ######
+		const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+		if (headingMatch) {
+			tokens.push({
+				type: "heading",
+				level: headingMatch[1].length,
+				content: headingMatch[2]
+			});
+			i++;
+			continue;
+		}
+
+		// Horizontal rules: ---, ***, ___
+		if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmedLine)) {
+			tokens.push({ type: "hr" });
+			i++;
+			continue;
+		}
+
+		// Blockquotes: > text
+		if (trimmedLine.startsWith(">")) {
+			const quoteLines: string[] = [];
+
+			while (i < lines.length && lines[i].trim().startsWith(">")) {
+				// Remove the leading > and optional space
+				quoteLines.push(lines[i].trim().replace(/^>\s?/, ""));
+				i++;
+			}
+
+			tokens.push({
+				type: "blockquote",
+				content: quoteLines.join("\n")
+			});
+			continue;
+		}
+
+		// Unordered lists: -, *, +
+		if (/^[-*+]\s+/.test(trimmedLine)) {
+			const items: string[] = [];
+
+			while (i < lines.length) {
+				const listLine = lines[i].trim();
+				const listMatch = listLine.match(/^[-*+]\s+(.+)$/);
+
+				if (listMatch) {
+					items.push(listMatch[1]);
+					i++;
+				} else if (listLine === "") {
+					// Empty line might end the list or just be spacing
+					i++;
+					// Check if next non-empty line continues the list
+					const nextNonEmpty = lines.slice(i).find((l) => l.trim() !== "");
+					if (!nextNonEmpty || !/^[-*+]\s+/.test(nextNonEmpty.trim())) {
+						break;
+					}
+				} else {
+					break;
+				}
+			}
+
+			tokens.push({ type: "ul", items });
+			continue;
+		}
+
+		// Ordered lists: 1., 2., etc.
+		const orderedMatch = trimmedLine.match(/^(\d+)\.\s+(.+)$/);
+		if (orderedMatch) {
+			const items: string[] = [];
+			const startNum = parseInt(orderedMatch[1], 10);
+
+			while (i < lines.length) {
+				const listLine = lines[i].trim();
+				const listMatch = listLine.match(/^\d+\.\s+(.+)$/);
+
+				if (listMatch) {
+					items.push(listMatch[1]);
+					i++;
+				} else if (listLine === "") {
+					i++;
+					// Check if next non-empty line continues the list
+					const nextNonEmpty = lines.slice(i).find((l) => l.trim() !== "");
+					if (!nextNonEmpty || !/^\d+\.\s+/.test(nextNonEmpty.trim())) {
+						break;
+					}
+				} else {
+					break;
+				}
+			}
+
+			tokens.push({ type: "ol", items, start: startNum });
+			continue;
+		}
+
+		// Paragraph: collect consecutive non-empty lines
+		const paragraphLines: string[] = [];
+
+		while (i < lines.length) {
+			const pLine = lines[i];
+			const pTrimmed = pLine.trim();
+
+			// Stop on empty line or block-level element
+			if (!pTrimmed) {
+				i++;
+				break;
+			}
+
+			// Check for block-level starters
+			if (
+				pTrimmed.startsWith("#") ||
+				pTrimmed.startsWith("```") ||
+				pTrimmed.startsWith(">") ||
+				/^[-*+]\s+/.test(pTrimmed) ||
+				/^\d+\.\s+/.test(pTrimmed) ||
+				/^(-{3,}|\*{3,}|_{3,})$/.test(pTrimmed)
+			) {
+				break;
+			}
+
+			paragraphLines.push(pLine);
+			i++;
+		}
+
+		if (paragraphLines.length > 0) {
+			tokens.push({
+				type: "paragraph",
+				content: paragraphLines.join("\n")
+			});
+		}
+	}
+
+	return tokens;
+}
+
+/**
+ * Render tokens to HTML
+ */
+function renderTokens(tokens: BlockToken[], sanitize: boolean): string {
+	const htmlParts: string[] = [];
+
+	for (const token of tokens) {
+		switch (token.type) {
+			case "heading": {
+				const content = parseInline(token.content, sanitize);
+				htmlParts.push(`<h${token.level}>${content}</h${token.level}>`);
+				break;
+			}
+
+			case "code_block": {
+				// Always escape code block content for safety
+				const escapedContent = escapeHtml(token.content);
+				const langAttr = token.language ? ` class="language-${escapeHtml(token.language)}"` : "";
+				htmlParts.push(`<pre><code${langAttr}>${escapedContent}</code></pre>`);
+				break;
+			}
+
+			case "blockquote": {
+				// Recursively parse blockquote content
+				const innerTokens = tokenizeBlocks(token.content);
+				const innerHtml = renderTokens(innerTokens, sanitize);
+				htmlParts.push(`<blockquote>${innerHtml}</blockquote>`);
+				break;
+			}
+
+			case "ul": {
+				const items = token.items
+					.map((item) => `<li>${parseInline(item, sanitize)}</li>`)
+					.join("");
+				htmlParts.push(`<ul>${items}</ul>`);
+				break;
+			}
+
+			case "ol": {
+				const items = token.items
+					.map((item) => `<li>${parseInline(item, sanitize)}</li>`)
+					.join("");
+				const startAttr = token.start !== 1 ? ` start="${token.start}"` : "";
+				htmlParts.push(`<ol${startAttr}>${items}</ol>`);
+				break;
+			}
+
+			case "hr": {
+				htmlParts.push("<hr />");
+				break;
+			}
+
+			case "paragraph": {
+				const content = parseInline(token.content, sanitize);
+				// Convert single newlines to <br> within paragraphs
+				const withBreaks = content.replace(/\n/g, "<br />");
+				htmlParts.push(`<p>${withBreaks}</p>`);
+				break;
+			}
+		}
+	}
+
+	return htmlParts.join("\n");
+}
+
+/**
+ * Convert markdown text to HTML
+ *
+ * Supports:
+ * - Headings (# through ######)
+ * - Paragraphs (double newlines)
+ * - Code blocks (```language ... ```)
+ * - Blockquotes (> text)
+ * - Unordered lists (-, *, +)
+ * - Ordered lists (1., 2., etc.)
+ * - Horizontal rules (---, ***, ___)
+ * - Bold (**text** or __text__)
+ * - Italic (*text* or _text_)
+ * - Bold+Italic (***text***)
+ * - Inline code (`code`)
+ * - Links [text](url)
+ * - Images ![alt](url)
+ */
+export function renderMarkdown(markdown: string, options?: MarkdownRenderOptions): string {
+	if (!markdown) return "";
+
+	const sanitize = options?.sanitize ?? true;
+	const tokens = tokenizeBlocks(markdown);
+	return renderTokens(tokens, sanitize);
+}

package/src/styles/danx.scss

@@ -1,3 +1,6 @@
+@import "themes/danx/scrollbar";
+@import "themes/danx/code";
+
 .dx-action-table {
 	.dx-column-shrink {
 		width: 1px;