quasar-ui-danx 0.5.1 → 0.5.2

package/src/helpers/formats/highlightJavaScript.ts

@@ -0,0 +1,346 @@
+/**
+ * Lightweight syntax highlighting for JavaScript
+ * 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;");
+}
+
+/**
+ * JavaScript keywords that should be highlighted
+ */
+const JS_KEYWORDS = new Set([
+	// Declarations
+	"const", "let", "var", "function", "class", "extends", "static",
+	// Control flow
+	"if", "else", "switch", "case", "default", "for", "while", "do",
+	"break", "continue", "return", "throw", "try", "catch", "finally",
+	// Operators/values
+	"new", "delete", "typeof", "instanceof", "in", "of", "void",
+	// Async
+	"async", "await", "yield",
+	// Module
+	"import", "export", "from", "as",
+	// Other
+	"this", "super", "debugger", "with"
+]);
+
+/**
+ * JavaScript built-in values
+ */
+const JS_BUILTINS = new Set([
+	"true", "false", "null", "undefined", "NaN", "Infinity"
+]);
+
+/**
+ * Check if character can start an identifier
+ */
+function isIdentifierStart(char: string): boolean {
+	return /[a-zA-Z_$]/.test(char);
+}
+
+/**
+ * Check if character can be part of an identifier
+ */
+function isIdentifierPart(char: string): boolean {
+	return /[a-zA-Z0-9_$]/.test(char);
+}
+
+/**
+ * Check if a character could precede a regex literal
+ * Regex can appear after: ( [ { , ; : ! & | = + - * / ? ~ ^ %
+ * or at the start of a statement (after newline, return, etc.)
+ */
+function canPrecedeRegex(lastToken: string): boolean {
+	if (!lastToken) return true;
+	const operators = ["(", "[", "{", ",", ";", ":", "!", "&", "|", "=", "+", "-", "*", "/", "?", "~", "^", "%", "<", ">"];
+	const keywords = ["return", "throw", "case", "delete", "void", "typeof", "instanceof", "in", "of", "new"];
+	return operators.includes(lastToken) || keywords.includes(lastToken);
+}
+
+/**
+ * Highlight JavaScript syntax by tokenizing character-by-character
+ */
+export function highlightJavaScript(code: string): string {
+	if (!code) return "";
+
+	const result: string[] = [];
+	let i = 0;
+	let lastToken = ""; // Track last significant token for regex detection
+
+	while (i < code.length) {
+		const char = code[i];
+
+		// Handle single-line comments: // ...
+		if (char === "/" && code[i + 1] === "/") {
+			const startIndex = i;
+			i += 2; // Skip //
+
+			// Find end of line
+			while (i < code.length && code[i] !== "\n") {
+				i++;
+			}
+
+			const comment = code.slice(startIndex, i);
+			result.push(`<span class="syntax-comment">${escapeHtml(comment)}</span>`);
+			lastToken = "";
+			continue;
+		}
+
+		// Handle multi-line comments: /* ... */
+		if (char === "/" && code[i + 1] === "*") {
+			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>`);
+			lastToken = "";
+			continue;
+		}
+
+		// Handle template literals: `...`
+		if (char === "`") {
+			const startIndex = i;
+			i++; // Skip opening backtick
+
+			// Find closing backtick, handling escape sequences and ${} expressions
+			while (i < code.length) {
+				if (code[i] === "\\" && i + 1 < code.length) {
+					i += 2; // Skip escaped character
+				} else if (code[i] === "$" && code[i + 1] === "{") {
+					// Template expression - for now, just include it in the string
+					// A more sophisticated approach would recursively highlight the expression
+					let braceDepth = 1;
+					i += 2; // Skip ${
+					while (i < code.length && braceDepth > 0) {
+						if (code[i] === "{") braceDepth++;
+						else if (code[i] === "}") braceDepth--;
+						i++;
+					}
+				} else if (code[i] === "`") {
+					i++; // Include closing backtick
+					break;
+				} else {
+					i++;
+				}
+			}
+
+			const str = code.slice(startIndex, i);
+			result.push(`<span class="syntax-template">${escapeHtml(str)}</span>`);
+			lastToken = "string";
+			continue;
+		}
+
+		// Handle strings (single or double quoted)
+		if (char === '"' || char === "'") {
+			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 if (code[i] === "\n") {
+					// Unterminated string - stop at newline
+					break;
+				} else {
+					i++;
+				}
+			}
+
+			const str = code.slice(startIndex, i);
+			result.push(`<span class="syntax-string">${escapeHtml(str)}</span>`);
+			lastToken = "string";
+			continue;
+		}
+
+		// Handle regex literals: /pattern/flags
+		if (char === "/" && canPrecedeRegex(lastToken)) {
+			// Check if this looks like a regex (not division)
+			// A regex must be followed by at least one character that's not / or *
+			if (code[i + 1] && code[i + 1] !== "/" && code[i + 1] !== "*") {
+				const startIndex = i;
+				i++; // Skip opening /
+
+				// Find closing / handling escape sequences and character classes
+				let inCharClass = false;
+				while (i < code.length) {
+					if (code[i] === "\\" && i + 1 < code.length) {
+						i += 2; // Skip escaped character
+					} else if (code[i] === "[" && !inCharClass) {
+						inCharClass = true;
+						i++;
+					} else if (code[i] === "]" && inCharClass) {
+						inCharClass = false;
+						i++;
+					} else if (code[i] === "/" && !inCharClass) {
+						i++; // Include closing /
+						// Include flags (g, i, m, s, u, y, d)
+						while (i < code.length && /[gimsuy]/.test(code[i])) {
+							i++;
+						}
+						break;
+					} else if (code[i] === "\n") {
+						// Unterminated regex - stop at newline
+						break;
+					} else {
+						i++;
+					}
+				}
+
+				const regex = code.slice(startIndex, i);
+				result.push(`<span class="syntax-regex">${escapeHtml(regex)}</span>`);
+				lastToken = "regex";
+				continue;
+			}
+		}
+
+		// Handle numbers
+		if (/\d/.test(char) || (char === "." && /\d/.test(code[i + 1] || ""))) {
+			const startIndex = i;
+
+			// Check for hex, octal, binary
+			if (char === "0" && code[i + 1]) {
+				const next = code[i + 1].toLowerCase();
+				if (next === "x") {
+					// Hex: 0x[0-9a-f]+
+					i += 2;
+					while (i < code.length && /[0-9a-fA-F_]/.test(code[i])) i++;
+				} else if (next === "b") {
+					// Binary: 0b[01]+
+					i += 2;
+					while (i < code.length && /[01_]/.test(code[i])) i++;
+				} else if (next === "o") {
+					// Octal: 0o[0-7]+
+					i += 2;
+					while (i < code.length && /[0-7_]/.test(code[i])) i++;
+				} else {
+					// Regular number or legacy octal
+					i++;
+				}
+			} else {
+				i++;
+			}
+
+			// Continue with decimal part
+			while (i < code.length && /[\d_]/.test(code[i])) i++;
+
+			// Decimal point
+			if (code[i] === "." && /\d/.test(code[i + 1] || "")) {
+				i++;
+				while (i < code.length && /[\d_]/.test(code[i])) i++;
+			}
+
+			// Exponent
+			if ((code[i] === "e" || code[i] === "E") && /[\d+-]/.test(code[i + 1] || "")) {
+				i++;
+				if (code[i] === "+" || code[i] === "-") i++;
+				while (i < code.length && /[\d_]/.test(code[i])) i++;
+			}
+
+			// BigInt suffix
+			if (code[i] === "n") i++;
+
+			const num = code.slice(startIndex, i);
+			result.push(`<span class="syntax-number">${escapeHtml(num)}</span>`);
+			lastToken = "number";
+			continue;
+		}
+
+		// Handle identifiers and keywords
+		if (isIdentifierStart(char)) {
+			const startIndex = i;
+			while (i < code.length && isIdentifierPart(code[i])) {
+				i++;
+			}
+
+			const identifier = code.slice(startIndex, i);
+
+			if (JS_KEYWORDS.has(identifier)) {
+				result.push(`<span class="syntax-keyword">${escapeHtml(identifier)}</span>`);
+				lastToken = identifier;
+			} else if (JS_BUILTINS.has(identifier)) {
+				if (identifier === "true" || identifier === "false") {
+					result.push(`<span class="syntax-boolean">${escapeHtml(identifier)}</span>`);
+				} else {
+					result.push(`<span class="syntax-null">${escapeHtml(identifier)}</span>`);
+				}
+				lastToken = identifier;
+			} else {
+				// Regular identifier
+				result.push(escapeHtml(identifier));
+				lastToken = "identifier";
+			}
+			continue;
+		}
+
+		// Handle operators
+		const operators = ["===", "!==", "==", "!=", "<=", ">=", "&&", "||", "??",
+			"++", "--", "+=", "-=", "*=", "/=", "%=", "**=", "&=", "|=", "^=",
+			"<<=", ">>=", ">>>=", "=>", "...", "**", "<<", ">>", ">>>",
+			"+", "-", "*", "/", "%", "&", "|", "^", "~", "!", "<", ">", "=", "?", ":"
+		];
+
+		let matchedOp = "";
+		for (const op of operators) {
+			if (code.slice(i, i + op.length) === op) {
+				if (op.length > matchedOp.length) {
+					matchedOp = op;
+				}
+			}
+		}
+
+		if (matchedOp) {
+			result.push(`<span class="syntax-operator">${escapeHtml(matchedOp)}</span>`);
+			lastToken = matchedOp;
+			i += matchedOp.length;
+			continue;
+		}
+
+		// Handle punctuation
+		if (/[{}()\[\];,.]/.test(char)) {
+			result.push(`<span class="syntax-punctuation">${escapeHtml(char)}</span>`);
+			lastToken = char;
+			i++;
+			continue;
+		}
+
+		// Handle whitespace
+		if (/\s/.test(char)) {
+			result.push(escapeHtml(char));
+			// Don't reset lastToken for whitespace
+			i++;
+			continue;
+		}
+
+		// Default: just escape and add
+		result.push(escapeHtml(char));
+		lastToken = char;
+		i++;
+	}
+
+	return result.join("");
+}

package/src/helpers/formats/highlightSyntax.ts

@@ -1,9 +1,13 @@
 /**
- * Lightweight syntax highlighting for JSON and YAML
+ * Lightweight syntax highlighting for JSON, YAML, HTML, CSS, and JavaScript
  * Returns HTML string with syntax highlighting spans
  */
 
-export type HighlightFormat = "json" | "yaml" | "text" | "markdown";
+import { highlightCSS } from "./highlightCSS";
+import { highlightJavaScript } from "./highlightJavaScript";
+import { highlightHTML } from "./highlightHTML";
+
+export type HighlightFormat = "json" | "yaml" | "text" | "markdown" | "html" | "css" | "javascript";
 
 export interface HighlightOptions {
 	format: HighlightFormat;
@@ -25,7 +29,7 @@ function escapeHtml(text: string): string {
  * 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 {
+function highlightJSON(code: string): string {
 	if (!code) return "";
 
 	const result: string[] = [];
@@ -156,7 +160,7 @@ function getIndentLevel(line: string): number {
 /**
  * Highlight YAML syntax with multi-line string support
  */
-export function highlightYAML(code: string): string {
+function highlightYAML(code: string): string {
 	if (!code) return "";
 
 	const lines = code.split("\n");
@@ -320,7 +324,14 @@ export function highlightSyntax(code: string, options: HighlightOptions): string
 			return highlightJSON(code);
 		case "yaml":
 			return highlightYAML(code);
+		case "html":
+			return highlightHTML(code);
+		case "css":
+			return highlightCSS(code);
+		case "javascript":
+			return highlightJavaScript(code);
 		case "text":
+		case "markdown":
 		default:
 			return escapeHtml(code);
 	}

package/src/helpers/formats/index.ts

@@ -1,5 +1,8 @@
 export * from "./datetime";
 export * from "./highlightSyntax";
+export * from "./highlightCSS";
+export * from "./highlightJavaScript";
+export * from "./highlightHTML";
 export * from "./numbers";
 export * from "./parsers";
 export * from "./markdown";

package/src/helpers/formats/markdown/htmlToMarkdown/index.ts

@@ -364,8 +364,21 @@ function processNode(node: Node): string {
 					break;
 				}
 
-				// Divs and other containers - just process children
-				case "div":
+				// Divs - check for code block wrapper first
+				case "div": {
+					// Handle code block wrapper structure
+					if (element.hasAttribute("data-code-block-id")) {
+						const mountPoint = element.querySelector(".code-viewer-mount-point");
+						const content = mountPoint?.getAttribute("data-content") || "";
+						const language = mountPoint?.getAttribute("data-language") || "";
+						parts.push(`\`\`\`${language}\n${content}\n\`\`\`\n\n`);
+					} else {
+						parts.push(processNode(element));
+					}
+					break;
+				}
+
+				// Spans - just process children
 				case "span":
 					parts.push(processNode(element));
 					break;

package/src/helpers/formats/markdown/linePatterns.spec.ts

@@ -204,8 +204,10 @@ describe('linePatterns', () => {
 	});
 
 	describe('detectCodeFenceStart', () => {
-		it('detects code fence without language', () => {
-			expect(detectCodeFenceStart('```')).toEqual({ language: '' });
+		it('returns null for code fence without language (requires language identifier)', () => {
+			// Implementation intentionally requires at least one character in language identifier
+			// to avoid triggering on just "```" before user finishes typing the language
+			expect(detectCodeFenceStart('```')).toBeNull();
 		});
 
 		it('detects code fence with javascript language', () => {
@@ -426,8 +428,9 @@ describe('linePatterns', () => {
 		});
 
 		describe('code block patterns', () => {
-			it('detects code block without language', () => {
-				expect(detectLinePattern('```')).toEqual({ type: 'code-block', language: '' });
+			it('returns null for code block without language (requires language identifier)', () => {
+				// Implementation intentionally requires language identifier
+				expect(detectLinePattern('```')).toBeNull();
 			});
 
 			it('detects code block with language', () => {

package/src/styles/danx.scss

@@ -1,6 +1,6 @@
-@import "themes/danx/scrollbar";
-@import "themes/danx/code";
-@import "themes/danx/markdown";
+@use "themes/danx/scrollbar";
+@use "themes/danx/code";
+@use "themes/danx/markdown";
 
 .dx-action-table {
 	.dx-column-shrink {

package/src/styles/index.scss

@@ -1,8 +1,8 @@
+@use "quasar-reset";
+@use "general";
+@use "transitions";
+@use "danx";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@import "quasar-reset";
-@import "general";
-@import "transitions";
-@import "danx";