quasar-ui-danx 0.5.1 → 0.5.3

package/src/helpers/formats/highlightCSS.ts

@@ -0,0 +1,236 @@
+/**
+ * Lightweight syntax highlighting for CSS
+ * Returns HTML string with syntax highlighting spans
+ * Uses character-by-character tokenization for accurate parsing
+ */
+
+/**
+ * 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;");
+}
+
+/**
+ * CSS parsing context states
+ */
+type CSSContext = "selector" | "property" | "value" | "at-rule";
+
+/**
+ * Highlight CSS syntax by tokenizing character-by-character
+ * This prevents issues with regex replacing content inside already-matched strings
+ */
+export function highlightCSS(code: string): string {
+	if (!code) return "";
+
+	const result: string[] = [];
+	let i = 0;
+	let context: CSSContext = "selector";
+	let buffer = "";
+	// Track brace depth for nested blocks (e.g., @media)
+	let braceDepth = 0;
+	// Track if we're inside an at-rule name
+	let inAtRuleName = false;
+
+	/**
+	 * Flush the current buffer with appropriate highlighting
+	 */
+	function flushBuffer(): void {
+		if (!buffer) return;
+
+		const trimmed = buffer.trim();
+		if (!trimmed) {
+			// Whitespace only - just escape and add
+			result.push(escapeHtml(buffer));
+			buffer = "";
+			return;
+		}
+
+		// Determine what type of content this is based on context
+		switch (context) {
+			case "selector":
+				result.push(`<span class="syntax-selector">${escapeHtml(buffer)}</span>`);
+				break;
+			case "property":
+				result.push(`<span class="syntax-property">${escapeHtml(buffer)}</span>`);
+				break;
+			case "value":
+				result.push(`<span class="syntax-value">${escapeHtml(buffer)}</span>`);
+				break;
+			case "at-rule":
+				result.push(`<span class="syntax-at-rule">${escapeHtml(buffer)}</span>`);
+				break;
+		}
+		buffer = "";
+	}
+
+	while (i < code.length) {
+		const char = code[i];
+
+		// Handle comments: /* ... */
+		if (char === "/" && code[i + 1] === "*") {
+			flushBuffer();
+			const startIndex = i;
+			i += 2; // Skip /*
+
+			// Find closing */
+			while (i < code.length) {
+				if (code[i] === "*" && code[i + 1] === "/") {
+					i += 2; // Include */
+					break;
+				}
+				i++;
+			}
+
+			const comment = code.slice(startIndex, i);
+			result.push(`<span class="syntax-comment">${escapeHtml(comment)}</span>`);
+			continue;
+		}
+
+		// Handle strings (single or double quoted)
+		if (char === '"' || char === "'") {
+			flushBuffer();
+			const quoteChar = char;
+			const startIndex = i;
+			i++; // Skip opening quote
+
+			// Find 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] === quoteChar) {
+					i++; // Include closing quote
+					break;
+				} else {
+					i++;
+				}
+			}
+
+			const str = code.slice(startIndex, i);
+			result.push(`<span class="syntax-string">${escapeHtml(str)}</span>`);
+			continue;
+		}
+
+		// Handle at-rules: @media, @import, @keyframes, etc.
+		if (char === "@") {
+			flushBuffer();
+			buffer = "@";
+			i++;
+			inAtRuleName = true;
+			context = "at-rule";
+			continue;
+		}
+
+		// If we're building an at-rule name, continue until whitespace or {
+		if (inAtRuleName) {
+			if (/\s/.test(char) || char === "{" || char === ";") {
+				flushBuffer();
+				inAtRuleName = false;
+				// Don't increment i, let the character be processed normally
+				// After at-rule name, we're in selector context (for params) until { or ;
+				context = "selector";
+			} else {
+				buffer += char;
+				i++;
+				continue;
+			}
+		}
+
+		// Handle opening brace
+		if (char === "{") {
+			flushBuffer();
+			result.push(`<span class="syntax-punctuation">${escapeHtml(char)}</span>`);
+			braceDepth++;
+			// After {, we're in property context
+			context = "property";
+			i++;
+			continue;
+		}
+
+		// Handle closing brace
+		if (char === "}") {
+			flushBuffer();
+			result.push(`<span class="syntax-punctuation">${escapeHtml(char)}</span>`);
+			braceDepth--;
+			// After }, we're back to selector context
+			context = "selector";
+			i++;
+			continue;
+		}
+
+		// Handle colon (property: value separator)
+		if (char === ":") {
+			// Check if this is a pseudo-selector (::before, :hover, etc.)
+			// A colon is a pseudo-selector if we're in selector context
+			if (context === "selector") {
+				// This is part of a selector (pseudo-class/element)
+				buffer += char;
+				i++;
+				continue;
+			}
+			// Otherwise it's a property-value separator
+			flushBuffer();
+			result.push(`<span class="syntax-punctuation">${escapeHtml(char)}</span>`);
+			// After :, we're in value context
+			context = "value";
+			i++;
+			continue;
+		}
+
+		// Handle semicolon (declaration terminator)
+		if (char === ";") {
+			flushBuffer();
+			result.push(`<span class="syntax-punctuation">${escapeHtml(char)}</span>`);
+			// After ;, we're back to property context (still inside braces)
+			if (braceDepth > 0) {
+				context = "property";
+			} else {
+				context = "selector";
+			}
+			i++;
+			continue;
+		}
+
+		// Handle comma
+		if (char === ",") {
+			flushBuffer();
+			result.push(`<span class="syntax-punctuation">${escapeHtml(char)}</span>`);
+			i++;
+			continue;
+		}
+
+		// Handle parentheses (for functions like url(), rgb(), etc.)
+		if (char === "(" || char === ")") {
+			flushBuffer();
+			result.push(`<span class="syntax-punctuation">${escapeHtml(char)}</span>`);
+			i++;
+			continue;
+		}
+
+		// Handle whitespace
+		if (/\s/.test(char)) {
+			// If buffer has content, flush it first
+			if (buffer.trim()) {
+				flushBuffer();
+			}
+			// Add whitespace directly
+			result.push(escapeHtml(char));
+			i++;
+			continue;
+		}
+
+		// Accumulate regular characters into buffer
+		buffer += char;
+		i++;
+	}
+
+	// Flush any remaining buffer
+	flushBuffer();
+
+	return result.join("");
+}

package/src/helpers/formats/highlightHTML.ts

@@ -0,0 +1,483 @@
+/**
+ * Lightweight syntax highlighting for HTML
+ * Returns HTML string with syntax highlighting spans
+ * Supports embedded CSS (<style>) and JavaScript (<script>) highlighting
+ */
+
+import { highlightCSS } from "./highlightCSS";
+import { highlightJavaScript } from "./highlightJavaScript";
+
+/**
+ * Escape HTML entities to prevent XSS
+ */
+function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#039;");
+}
+
+/**
+ * HTML parsing states
+ */
+type HTMLState = "text" | "tag-open" | "tag-name" | "attribute-name" | "attribute-equals" | "attribute-value" | "tag-close" | "comment" | "doctype";
+
+/**
+ * Highlight HTML syntax by tokenizing character-by-character
+ * Delegates to CSS and JavaScript highlighters for embedded content
+ */
+export function highlightHTML(code: string): string {
+	if (!code) return "";
+
+	const result: string[] = [];
+	let i = 0;
+	let state: HTMLState = "text";
+	let buffer = "";
+	let currentTagName = "";
+	let inClosingTag = false;
+	let quoteChar = "";
+
+	/**
+	 * Flush the current buffer with appropriate highlighting
+	 */
+	function flushBuffer(className?: string): void {
+		if (!buffer) return;
+
+		if (className) {
+			result.push(`<span class="${className}">${escapeHtml(buffer)}</span>`);
+		} else {
+			result.push(escapeHtml(buffer));
+		}
+		buffer = "";
+	}
+
+	/**
+	 * Find the closing tag for style or script
+	 * Returns the index of the closing tag or -1 if not found
+	 */
+	function findClosingTag(tagName: string, startIndex: number): number {
+		const closePattern = new RegExp(`<\\s*/\\s*${tagName}\\s*>`, "i");
+		const remaining = code.slice(startIndex);
+		const match = remaining.match(closePattern);
+		if (match && match.index !== undefined) {
+			return startIndex + match.index;
+		}
+		return -1;
+	}
+
+	while (i < code.length) {
+		const char = code[i];
+
+		// Handle comments: <!-- ... -->
+		if (state === "text" && code.slice(i, i + 4) === "<!--") {
+			flushBuffer();
+			const startIndex = i;
+			i += 4; // Skip <!--
+
+			// Find closing -->
+			while (i < code.length) {
+				if (code.slice(i, i + 3) === "-->") {
+					i += 3; // Include -->
+					break;
+				}
+				i++;
+			}
+
+			const comment = code.slice(startIndex, i);
+			result.push(`<span class="syntax-comment">${escapeHtml(comment)}</span>`);
+			continue;
+		}
+
+		// Handle DOCTYPE: <!DOCTYPE ...>
+		if (state === "text" && code.slice(i, i + 9).toUpperCase() === "<!DOCTYPE") {
+			flushBuffer();
+			const startIndex = i;
+
+			// Find closing >
+			while (i < code.length && code[i] !== ">") {
+				i++;
+			}
+			if (code[i] === ">") i++; // Include >
+
+			const doctype = code.slice(startIndex, i);
+			result.push(`<span class="syntax-doctype">${escapeHtml(doctype)}</span>`);
+			continue;
+		}
+
+		// Handle CDATA sections: <![CDATA[ ... ]]>
+		if (state === "text" && code.slice(i, i + 9) === "<![CDATA[") {
+			flushBuffer();
+			const startIndex = i;
+			i += 9; // Skip <![CDATA[
+
+			// Find closing ]]>
+			while (i < code.length) {
+				if (code.slice(i, i + 3) === "]]>") {
+					i += 3; // Include ]]>
+					break;
+				}
+				i++;
+			}
+
+			const cdata = code.slice(startIndex, i);
+			result.push(`<span class="syntax-comment">${escapeHtml(cdata)}</span>`);
+			continue;
+		}
+
+		// Handle tag opening: <
+		if (state === "text" && char === "<") {
+			flushBuffer();
+			buffer = "<";
+			i++;
+
+			// Check for closing tag
+			if (code[i] === "/") {
+				inClosingTag = true;
+				buffer += "/";
+				i++;
+			} else {
+				inClosingTag = false;
+			}
+
+			state = "tag-name";
+			currentTagName = "";
+			continue;
+		}
+
+		// Handle tag name
+		if (state === "tag-name") {
+			if (/[a-zA-Z0-9-]/.test(char)) {
+				buffer += char;
+				currentTagName += char.toLowerCase();
+				i++;
+				continue;
+			}
+
+			// Tag name complete
+			flushBuffer("syntax-tag");
+
+			// Check for style or script tags (only opening tags)
+			if (!inClosingTag && (currentTagName === "style" || currentTagName === "script")) {
+				// Find the end of the opening tag
+				let tagEndIndex = i;
+				while (tagEndIndex < code.length && code[tagEndIndex] !== ">") {
+					tagEndIndex++;
+				}
+				tagEndIndex++; // Include >
+
+				// Highlight the rest of the opening tag (attributes)
+				const tagRemainder = code.slice(i, tagEndIndex);
+				result.push(highlightHTMLAttributes(tagRemainder));
+				i = tagEndIndex;
+
+				// Find the closing tag
+				const closingTagIndex = findClosingTag(currentTagName, i);
+
+				if (closingTagIndex !== -1) {
+					// Extract and highlight the embedded content
+					const embeddedContent = code.slice(i, closingTagIndex);
+
+					if (currentTagName === "style") {
+						result.push(highlightCSS(embeddedContent));
+					} else if (currentTagName === "script") {
+						result.push(highlightJavaScript(embeddedContent));
+					}
+
+					i = closingTagIndex;
+				}
+
+				state = "text";
+				continue;
+			}
+
+			if (/\s/.test(char)) {
+				result.push(escapeHtml(char));
+				i++;
+				state = "attribute-name";
+			} else if (char === ">") {
+				result.push(`<span class="syntax-tag">${escapeHtml(char)}</span>`);
+				i++;
+				state = "text";
+			} else if (char === "/" && code[i + 1] === ">") {
+				result.push(`<span class="syntax-tag">/&gt;</span>`);
+				i += 2;
+				state = "text";
+			} else {
+				state = "attribute-name";
+			}
+			continue;
+		}
+
+		// Handle attribute name
+		if (state === "attribute-name") {
+			if (/\s/.test(char)) {
+				flushBuffer("syntax-attribute");
+				result.push(escapeHtml(char));
+				i++;
+				continue;
+			}
+
+			if (char === "=") {
+				flushBuffer("syntax-attribute");
+				result.push(`<span class="syntax-punctuation">=</span>`);
+				i++;
+				state = "attribute-equals";
+				continue;
+			}
+
+			if (char === ">") {
+				flushBuffer("syntax-attribute");
+				result.push(`<span class="syntax-tag">&gt;</span>`);
+				i++;
+				state = "text";
+				continue;
+			}
+
+			if (char === "/" && code[i + 1] === ">") {
+				flushBuffer("syntax-attribute");
+				result.push(`<span class="syntax-tag">/&gt;</span>`);
+				i += 2;
+				state = "text";
+				continue;
+			}
+
+			if (/[a-zA-Z0-9\-_:@.]/.test(char)) {
+				buffer += char;
+				i++;
+				continue;
+			}
+
+			// Unknown character in attribute context
+			flushBuffer("syntax-attribute");
+			result.push(escapeHtml(char));
+			i++;
+			continue;
+		}
+
+		// Handle after equals sign (before attribute value)
+		if (state === "attribute-equals") {
+			if (/\s/.test(char)) {
+				result.push(escapeHtml(char));
+				i++;
+				continue;
+			}
+
+			if (char === '"' || char === "'") {
+				quoteChar = char;
+				buffer = char;
+				i++;
+				state = "attribute-value";
+				continue;
+			}
+
+			// Unquoted attribute value
+			if (char !== ">" && char !== "/") {
+				buffer = "";
+				state = "attribute-value";
+				quoteChar = "";
+				continue;
+			}
+
+			// No value, go back to attribute name state
+			state = "attribute-name";
+			continue;
+		}
+
+		// Handle attribute value
+		if (state === "attribute-value") {
+			if (quoteChar) {
+				// Quoted attribute value
+				buffer += char;
+				i++;
+
+				if (char === quoteChar) {
+					flushBuffer("syntax-string");
+					state = "attribute-name";
+					quoteChar = "";
+				}
+				continue;
+			} else {
+				// Unquoted attribute value
+				if (/\s/.test(char) || char === ">" || (char === "/" && code[i + 1] === ">")) {
+					flushBuffer("syntax-string");
+					state = "attribute-name";
+					continue;
+				}
+
+				buffer += char;
+				i++;
+				continue;
+			}
+		}
+
+		// Default text handling
+		if (state === "text") {
+			if (char === "<") {
+				// Will be handled at the top of the loop
+				continue;
+			}
+
+			buffer += char;
+			i++;
+		} else {
+			// Unknown state, just advance
+			buffer += char;
+			i++;
+		}
+	}
+
+	// Flush any remaining buffer
+	if (buffer) {
+		if (state === "text") {
+			flushBuffer();
+		} else if (state === "tag-name") {
+			flushBuffer("syntax-tag");
+		} else if (state === "attribute-name") {
+			flushBuffer("syntax-attribute");
+		} else if (state === "attribute-value") {
+			flushBuffer("syntax-string");
+		} else {
+			flushBuffer();
+		}
+	}
+
+	return result.join("");
+}
+
+/**
+ * Highlight HTML attributes (everything between tag name and >)
+ * This is a helper for processing the remainder of a tag after the name
+ */
+function highlightHTMLAttributes(code: string): string {
+	if (!code) return "";
+
+	const result: string[] = [];
+	let i = 0;
+	let state: "space" | "attribute-name" | "equals" | "value" = "space";
+	let buffer = "";
+	let quoteChar = "";
+
+	while (i < code.length) {
+		const char = code[i];
+
+		// Handle end of tag
+		if (char === ">" || (char === "/" && code[i + 1] === ">")) {
+			// Flush buffer
+			if (buffer) {
+				if (state === "attribute-name") {
+					result.push(`<span class="syntax-attribute">${escapeHtml(buffer)}</span>`);
+				} else if (state === "value") {
+					result.push(`<span class="syntax-string">${escapeHtml(buffer)}</span>`);
+				} else {
+					result.push(escapeHtml(buffer));
+				}
+				buffer = "";
+			}
+
+			if (char === "/" && code[i + 1] === ">") {
+				result.push(`<span class="syntax-tag">/&gt;</span>`);
+				i += 2;
+			} else {
+				result.push(`<span class="syntax-tag">&gt;</span>`);
+				i++;
+			}
+			continue;
+		}
+
+		// Handle whitespace
+		if (/\s/.test(char) && state !== "value") {
+			if (buffer && state === "attribute-name") {
+				result.push(`<span class="syntax-attribute">${escapeHtml(buffer)}</span>`);
+				buffer = "";
+			}
+			result.push(escapeHtml(char));
+			i++;
+			state = "space";
+			continue;
+		}
+
+		// Handle equals sign
+		if (char === "=" && state !== "value") {
+			if (buffer) {
+				result.push(`<span class="syntax-attribute">${escapeHtml(buffer)}</span>`);
+				buffer = "";
+			}
+			result.push(`<span class="syntax-punctuation">=</span>`);
+			i++;
+			state = "equals";
+			continue;
+		}
+
+		// Handle quote start
+		if ((char === '"' || char === "'") && (state === "equals" || state === "space")) {
+			quoteChar = char;
+			buffer = char;
+			i++;
+			state = "value";
+			continue;
+		}
+
+		// Handle quoted value
+		if (state === "value" && quoteChar) {
+			buffer += char;
+			if (char === quoteChar) {
+				result.push(`<span class="syntax-string">${escapeHtml(buffer)}</span>`);
+				buffer = "";
+				quoteChar = "";
+				state = "space";
+			}
+			i++;
+			continue;
+		}
+
+		// Handle unquoted value
+		if (state === "value" && !quoteChar) {
+			if (/\s/.test(char)) {
+				result.push(`<span class="syntax-string">${escapeHtml(buffer)}</span>`);
+				buffer = "";
+				result.push(escapeHtml(char));
+				state = "space";
+				i++;
+				continue;
+			}
+			buffer += char;
+			i++;
+			continue;
+		}
+
+		// Attribute name
+		if (state === "space" || state === "attribute-name") {
+			buffer += char;
+			state = "attribute-name";
+			i++;
+			continue;
+		}
+
+		// Unquoted value after equals
+		if (state === "equals") {
+			buffer += char;
+			state = "value";
+			i++;
+			continue;
+		}
+
+		// Default
+		result.push(escapeHtml(char));
+		i++;
+	}
+
+	// Flush remaining buffer
+	if (buffer) {
+		if (state === "attribute-name") {
+			result.push(`<span class="syntax-attribute">${escapeHtml(buffer)}</span>`);
+		} else if (state === "value") {
+			result.push(`<span class="syntax-string">${escapeHtml(buffer)}</span>`);
+		} else {
+			result.push(escapeHtml(buffer));
+		}
+	}
+
+	return result.join("");
+}