quasar-ui-danx 0.5.1 → 0.5.3

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

@@ -41,6 +41,19 @@ function processInlineContent(element: Element): string {
 		} else if (child.nodeType === Node.ELEMENT_NODE) {
 			const el = child as Element;
 			const tagName = el.tagName.toLowerCase();
+
+			// Handle color-preview spans - skip the swatch, return only the hex code text
+			if (tagName === "span" && el.classList.contains("color-preview")) {
+				// Get text content directly, skipping the color-swatch span
+				parts.push(el.textContent || "");
+				continue;
+			}
+
+			// Skip color-swatch spans entirely (they're purely decorative)
+			if (tagName === "span" && el.classList.contains("color-swatch")) {
+				continue;
+			}
+
 			const content = processInlineContent(el);
 
 			// Skip empty formatting elements
@@ -364,11 +377,36 @@ function processNode(node: Node): string {
 					break;
 				}
 
-				// Divs and other containers - just process children
-				case "div":
-				case "span":
-					parts.push(processNode(element));
+				// 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 - handle special cases first
+				case "span": {
+					// Color preview: return only the hex color text
+					if (element.classList.contains("color-preview")) {
+						parts.push(element.textContent || "");
+					}
+					// Color swatch: skip entirely (purely decorative)
+					else if (element.classList.contains("color-swatch")) {
+						// Skip - don't output anything
+					}
+					// Default: process children
+					else {
+						parts.push(processNode(element));
+					}
+					break;
+				}
 
 				// Tables
 				case "table":

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/helpers/formats/markdown/parseInline.ts

@@ -28,13 +28,26 @@ export function parseInline(text: string, sanitize: boolean = true): string {
 	// 2. HARD LINE BREAKS - Two trailing spaces + newline becomes <br />
 	result = result.replace(/ {2,}\n/g, "<br />\n");
 
-	// 3. AUTOLINKS - Must be before regular link parsing
+	// 3. HEX COLOR PREVIEW - Display color swatch before hex color codes
+	// Match 6-digit hex colors first (more specific), then 3-digit
+	// Use word boundary to avoid matching inside URLs or other contexts
+	// The pattern must NOT match 4, 5, 7+ digit hex codes
+	result = result.replace(
+		/(?<![&\w])#([0-9a-fA-F]{6})(?![0-9a-fA-F])/g,
+		'<span class="color-preview"><span class="color-swatch" style="background-color: #$1"></span>#$1</span>'
+	);
+	result = result.replace(
+		/(?<![&\w])#([0-9a-fA-F]{3})(?![0-9a-fA-F])/g,
+		'<span class="color-preview"><span class="color-swatch" style="background-color: #$1"></span>#$1</span>'
+	);
+
+	// 4. AUTOLINKS - Must be before regular link parsing
 	// URL autolinks: <https://example.com>
 	result = result.replace(/&lt;(https?:\/\/[^&]+)&gt;/g, '<a href="$1">$1</a>');
 	// Email autolinks: <user@example.com>
 	result = result.replace(/&lt;([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})&gt;/g, '<a href="mailto:$1">$1</a>');
 
-	// 4. FOOTNOTE REFERENCES: [^id]
+	// 5. FOOTNOTE REFERENCES: [^id]
 	// Must be before regular link/image parsing to avoid conflicts
 	result = result.replace(/\[\^([^\]]+)\]/g, (match, fnId) => {
 		const fn = currentFootnotes[fnId];
@@ -44,19 +57,19 @@ export function parseInline(text: string, sanitize: boolean = true): string {
 		return match; // Keep original if footnote not defined
 	});
 
-	// 5. IMAGES: ![alt](url) - must be before links
+	// 6. IMAGES: ![alt](url) - must be before links
 	result = result.replace(
 		/!\[([^\]]*)\]\(([^)]+)\)/g,
 		'<img src="$2" alt="$1" />'
 	);
 
-	// 6. INLINE LINKS: [text](url)
+	// 7. INLINE LINKS: [text](url)
 	result = result.replace(
 		/\[([^\]]+)\]\(([^)]+)\)/g,
 		'<a href="$2">$1</a>'
 	);
 
-	// 7. REFERENCE-STYLE LINKS - Process after regular links
+	// 8. REFERENCE-STYLE LINKS - Process after regular links
 	// Full reference: [text][ref-id]
 	result = result.replace(/\[([^\]]+)\]\[([^\]]+)\]/g, (match, text, refId) => {
 		const ref = currentLinkRefs[refId.toLowerCase()];
@@ -88,30 +101,30 @@ export function parseInline(text: string, sanitize: boolean = true): string {
 		return match;
 	});
 
-	// 8. INLINE CODE: `code`
+	// 9. INLINE CODE: `code`
 	result = result.replace(/`([^`]+)`/g, "<code>$1</code>");
 
-	// 9. STRIKETHROUGH: ~~text~~ - Must be before subscript (single tilde)
+	// 10. STRIKETHROUGH: ~~text~~ - Must be before subscript (single tilde)
 	result = result.replace(/~~([^~]+)~~/g, "<del>$1</del>");
 
-	// 10. HIGHLIGHT: ==text==
+	// 11. HIGHLIGHT: ==text==
 	result = result.replace(/==([^=]+)==/g, "<mark>$1</mark>");
 
-	// 11. SUPERSCRIPT: X^2^ - Must be before subscript
+	// 12. SUPERSCRIPT: X^2^ - Must be before subscript
 	result = result.replace(/\^([^\^]+)\^/g, "<sup>$1</sup>");
 
-	// 12. SUBSCRIPT: H~2~O - Single tilde, use negative lookbehind/lookahead to avoid ~~
+	// 13. SUBSCRIPT: H~2~O - Single tilde, use negative lookbehind/lookahead to avoid ~~
 	result = result.replace(/(?<!~)~([^~]+)~(?!~)/g, "<sub>$1</sub>");
 
-	// 13. BOLD + ITALIC: ***text*** or ___text___
+	// 14. BOLD + ITALIC: ***text*** or ___text___
 	result = result.replace(/\*\*\*([^*]+)\*\*\*/g, "<strong><em>$1</em></strong>");
 	result = result.replace(/___([^_]+)___/g, "<strong><em>$1</em></strong>");
 
-	// 14. BOLD: **text** or __text__
+	// 15. BOLD: **text** or __text__
 	result = result.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
 	result = result.replace(/__([^_]+)__/g, "<strong>$1</strong>");
 
-	// 15. ITALIC: *text* or _text_ (but not inside words for underscores)
+	// 16. 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

package/src/helpers/routes.ts

@@ -40,7 +40,9 @@ export function useActionRoutes(baseUrl: string, extend?: object): ListControlsR
 				...options,
 				ignoreAbort: true
 			};
-			fields && (options.params = { fields });
+			if (fields) {
+				options.params = { ...options.params, fields };
+			}
 			const item = await request.get(`${baseUrl}/${target.id}/details`, options);
 			return storeObject(item);
 		},

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";