quasar-ui-danx 0.5.0 → 0.5.2

package/src/composables/useCodeViewerEditor.ts

@@ -10,6 +10,14 @@ export interface UseCodeViewerEditorOptions {
 	editable: Ref<boolean>;
 	onEmitModelValue: (value: object | string | null) => void;
 	onEmitEditable: (editable: boolean) => void;
+	/** Callback when format changes (e.g., cycling languages) */
+	onEmitFormat?: (format: CodeFormat) => void;
+	/** Callback when user wants to exit the code block (Ctrl+Enter) */
+	onExit?: () => void;
+	/** Callback when user wants to delete the code block (Backspace/Delete on empty) */
+	onDelete?: () => void;
+	/** Callback when user wants to open the language search panel (Ctrl+Alt+Shift+L) */
+	onOpenLanguageSearch?: () => void;
 }
 
 export interface UseCodeViewerEditorReturn {
@@ -167,11 +175,27 @@ function getSmartIndent(lineInfo: { indent: string; lineContent: string }, forma
 	return indent;
 }
 
+/**
+ * Get available formats that can be cycled through based on current format.
+ * YAML/JSON formats cycle between each other only.
+ * Text/Markdown formats cycle between each other only.
+ * Other formats don't cycle.
+ */
+function getAvailableFormats(format: CodeFormat): CodeFormat[] {
+	if (format === "json" || format === "yaml") {
+		return ["yaml", "json"];
+	}
+	if (format === "text" || format === "markdown") {
+		return ["text", "markdown"];
+	}
+	return [format];
+}
+
 /**
  * Composable for CodeViewer editor functionality
  */
 export function useCodeViewerEditor(options: UseCodeViewerEditorOptions): UseCodeViewerEditorReturn {
-	const { codeRef, codeFormat, currentFormat, canEdit, editable, onEmitModelValue, onEmitEditable } = options;
+	const { codeRef, codeFormat, currentFormat, canEdit, editable, onEmitModelValue, onEmitEditable, onEmitFormat, onExit, onDelete, onOpenLanguageSearch } = options;
 
 	// Debounce timeout handles
 	let validationTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -231,10 +255,18 @@ export function useCodeViewerEditor(options: UseCodeViewerEditorOptions): UseCod
 		}
 	}
 
-	// Update editing content when format changes
+	// Update editing content when format changes and re-apply syntax highlighting
 	function updateEditingContentOnFormatChange(): void {
 		if (isEditing.value) {
 			editingContent.value = codeFormat.formattedContent.value;
+			// Update the cached highlighted content with new format
+			cachedHighlightedContent.value = highlightSyntax(editingContent.value, { format: currentFormat.value });
+			// Re-apply syntax highlighting with new format in the DOM
+			nextTick(() => {
+				if (codeRef.value) {
+					codeRef.value.innerHTML = cachedHighlightedContent.value;
+				}
+			});
 		}
 	}
 
@@ -256,6 +288,10 @@ export function useCodeViewerEditor(options: UseCodeViewerEditorOptions): UseCod
 		highlightTimeout = setTimeout(() => {
 			if (!codeRef.value || !isEditing.value) return;
 
+			// Check if document has active focus on the codeRef before replacing innerHTML
+			const activeElement = document.activeElement;
+			const hasFocus = activeElement === codeRef.value || codeRef.value.contains(activeElement);
+
 			// Save cursor position
 			const cursorOffset = getCursorOffset(codeRef.value);
 
@@ -264,6 +300,12 @@ export function useCodeViewerEditor(options: UseCodeViewerEditorOptions): UseCod
 
 			// Restore cursor position
 			setCursorOffset(codeRef.value, cursorOffset);
+
+			// Ensure the element maintains focus after innerHTML replacement
+			// This is important because innerHTML replacement can cause focus loss
+			if (hasFocus && document.activeElement !== codeRef.value) {
+				codeRef.value.focus();
+			}
 		}, 300);
 	}
 
@@ -339,31 +381,116 @@ export function useCodeViewerEditor(options: UseCodeViewerEditorOptions): UseCod
 		}
 	}
 
-	// Handle keyboard shortcuts in edit mode
+	// Handle keyboard shortcuts (some work in any mode, some only in edit mode)
 	function onKeyDown(event: KeyboardEvent): void {
+		// Check for Ctrl/Cmd + Alt + L combinations (with or without Shift)
+		// These should work even when not in edit mode
+		const isCtrlAltL = (event.ctrlKey || event.metaKey) && event.altKey && event.key.toLowerCase() === "l";
+
+		if (isCtrlAltL) {
+			event.preventDefault();
+			event.stopPropagation();
+
+			// Ctrl/Cmd + Alt + Shift + L - open language search panel
+			if (event.shiftKey && onOpenLanguageSearch) {
+				onOpenLanguageSearch();
+				return;
+			}
+
+			// Ctrl/Cmd + Alt + L (without Shift) - cycle through available formats/languages
+			if (!event.shiftKey && onEmitFormat) {
+				const availableFormats = getAvailableFormats(currentFormat.value);
+				if (availableFormats.length > 1) {
+					const currentIndex = availableFormats.indexOf(currentFormat.value);
+					const nextIndex = (currentIndex + 1) % availableFormats.length;
+					const nextFormat = availableFormats[nextIndex];
+					onEmitFormat(nextFormat);
+				}
+			}
+			return;
+		}
+
+		// All other shortcuts require edit mode
 		if (!isEditing.value) return;
 
+		// Backspace/Delete on empty content - delete the code block
+		if ((event.key === "Backspace" || event.key === "Delete") && onDelete) {
+			const content = editingContent.value.trim();
+			if (content === "") {
+				event.preventDefault();
+				onDelete();
+				return;
+			}
+		}
+
+		// Ctrl/Cmd + Enter - exit the code block immediately
+		if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+			event.preventDefault();
+			if (onExit) {
+				// Emit the current value before exiting
+				const parsed = codeFormat.parse(editingContent.value);
+				if (parsed) {
+					onEmitModelValue(parsed);
+				} else {
+					onEmitModelValue(editingContent.value);
+				}
+				onExit();
+			}
+			return;
+		}
+
 		// Enter key - smart indentation
 		if (event.key === "Enter") {
-			const lineInfo = getCurrentLineInfo(editingContent.value, codeRef.value);
-			if (lineInfo) {
-				event.preventDefault();
-				const smartIndent = getSmartIndent(lineInfo, currentFormat.value);
-
-				const selection = window.getSelection();
-				if (selection && selection.rangeCount > 0) {
-					const range = selection.getRangeAt(0);
-					range.deleteContents();
-					const textNode = document.createTextNode("\n" + smartIndent);
-					range.insertNode(textNode);
-					range.setStartAfter(textNode);
-					range.setEndAfter(textNode);
-					selection.removeAllRanges();
-					selection.addRange(range);
-
-					codeRef.value?.dispatchEvent(new Event("input", { bubbles: true }));
+			const selection = window.getSelection();
+
+			// If no selection, try to ensure we have one by focusing the element
+			if (!selection || selection.rangeCount === 0) {
+				// Fallback: position cursor at end of content
+				if (codeRef.value) {
+					const range = document.createRange();
+					range.selectNodeContents(codeRef.value);
+					range.collapse(false);
+					selection?.removeAllRanges();
+					selection?.addRange(range);
 				}
 			}
+
+			// Re-check selection - if still none, let browser handle it
+			if (!selection || selection.rangeCount === 0) {
+				return;
+			}
+
+			event.preventDefault();
+
+			// Check if the range is actually valid and positioned within our codeRef
+			let range = selection.getRangeAt(0);
+			const isWithinCodeRef = codeRef.value?.contains(range.startContainer);
+
+			// If selection is not within codeRef, re-create it at the end of content
+			// This can happen after innerHTML replacement in debouncedHighlight
+			if (!isWithinCodeRef && codeRef.value) {
+				range = document.createRange();
+				range.selectNodeContents(codeRef.value);
+				range.collapse(false);
+				selection.removeAllRanges();
+				selection.addRange(range);
+			}
+
+			// IMPORTANT: Always use the DOM's actual content, not editingContent.value
+			// editingContent.value may be stale if isUserEditing is false (e.g., after debounced highlight)
+			const domTextContent = codeRef.value?.innerText || "";
+			const lineInfo = getCurrentLineInfo(domTextContent, codeRef.value);
+			const smartIndent = lineInfo ? getSmartIndent(lineInfo, currentFormat.value) : "";
+
+			range.deleteContents();
+			const textNode = document.createTextNode("\n" + smartIndent);
+			range.insertNode(textNode);
+			range.setStartAfter(textNode);
+			range.setEndAfter(textNode);
+			selection.removeAllRanges();
+			selection.addRange(range);
+
+			codeRef.value?.dispatchEvent(new Event("input", { bubbles: true }));
 		}
 
 		// Tab key - insert spaces instead of moving focus
@@ -384,6 +511,33 @@ export function useCodeViewerEditor(options: UseCodeViewerEditorOptions): UseCod
 			event.preventDefault();
 			onContentEditableBlur();
 		}
+
+		// Ctrl/Cmd + A - select all content within this CodeViewer only
+		if ((event.ctrlKey || event.metaKey) && event.key === "a") {
+			event.preventDefault();
+			event.stopPropagation();
+
+			// Select all content in the current contenteditable element
+			const selection = window.getSelection();
+			if (selection && codeRef.value) {
+				const range = document.createRange();
+				range.selectNodeContents(codeRef.value);
+				selection.removeAllRanges();
+				selection.addRange(range);
+			}
+		}
+	}
+
+	// Initialize editing content when starting in edit mode
+	// This handles the case where editable=true is passed as initial prop
+	if (isEditing.value) {
+		editingContent.value = codeFormat.formattedContent.value;
+		// Set the pre element content after it mounts
+		nextTick(() => {
+			if (codeRef.value) {
+				codeRef.value.innerHTML = highlightSyntax(editingContent.value, { format: currentFormat.value });
+			}
+		});
 	}
 
 	// Cleanup timeouts on unmount

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("");
+}