quasar-ui-danx 0.4.99 → 0.5.1

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/index.ts

@@ -2,5 +2,5 @@ export * from "./datetime";
 export * from "./highlightSyntax";
 export * from "./numbers";
 export * from "./parsers";
-export * from "./renderMarkdown";
+export * from "./markdown";
 export * from "./strings";

package/src/helpers/formats/markdown/escapeHtml.ts

@@ -0,0 +1,15 @@
+/**
+ * HTML entity escaping for XSS prevention
+ */
+
+/**
+ * Escape HTML entities to prevent XSS
+ */
+export function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#039;");
+}

package/src/helpers/formats/markdown/escapeSequences.ts

@@ -0,0 +1,60 @@
+/**
+ * Markdown escape sequence handling
+ * Maps backslash-escaped characters to Unicode placeholders and back
+ * Using Private Use Area characters (U+E000-U+F8FF) to avoid conflicts
+ */
+
+/**
+ * Escape sequences mapping - character to Unicode placeholder
+ */
+export const ESCAPE_MAP: Record<string, string> = {
+	"\\*": "\uE000",
+	"\\_": "\uE001",
+	"\\~": "\uE002",
+	"\\`": "\uE003",
+	"\\[": "\uE004",
+	"\\]": "\uE005",
+	"\\#": "\uE006",
+	"\\&gt;": "\uE007", // Escaped > becomes &gt; after HTML escaping
+	"\\-": "\uE008",
+	"\\+": "\uE009",
+	"\\.": "\uE00A",
+	"\\!": "\uE00B",
+	"\\=": "\uE00C",
+	"\\^": "\uE00D"
+};
+
+/**
+ * Reverse mapping - placeholder back to literal character
+ * Generated from ESCAPE_MAP for DRY compliance
+ */
+export const UNESCAPE_MAP: Record<string, string> = Object.fromEntries(
+	Object.entries(ESCAPE_MAP).map(([escaped, placeholder]) => {
+		// Extract the literal character from the escape sequence
+		// "\\*" -> "*", "\\&gt;" -> "&gt;" (special case for HTML-escaped >)
+		const literal = escaped.startsWith("\\&") ? escaped.slice(1) : escaped.slice(1);
+		return [placeholder, literal];
+	})
+);
+
+/**
+ * Apply escape sequences - convert backslash-escaped characters to placeholders
+ */
+export function applyEscapes(text: string): string {
+	let result = text;
+	for (const [pattern, placeholder] of Object.entries(ESCAPE_MAP)) {
+		result = result.split(pattern).join(placeholder);
+	}
+	return result;
+}
+
+/**
+ * Revert escape sequences - convert placeholders back to literal characters
+ */
+export function revertEscapes(text: string): string {
+	let result = text;
+	for (const [placeholder, literal] of Object.entries(UNESCAPE_MAP)) {
+		result = result.split(placeholder).join(literal);
+	}
+	return result;
+}

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

@@ -0,0 +1,41 @@
+/**
+ * HTML heading to markdown converter
+ * Converts h1-h6 elements to markdown # syntax
+ */
+
+/**
+ * Check if an element is a heading element (h1-h6)
+ */
+export function isHeadingElement(element: Element): boolean {
+	const tagName = element.tagName.toLowerCase();
+	return /^h[1-6]$/.test(tagName);
+}
+
+/**
+ * Get the heading level from an element (1-6, or 0 if not a heading)
+ */
+export function getHeadingLevel(element: Element): number {
+	const tagName = element.tagName.toLowerCase();
+	const match = tagName.match(/^h([1-6])$/);
+	return match ? parseInt(match[1], 10) : 0;
+}
+
+/**
+ * Convert an HTML heading element to markdown
+ * @param element - The heading element (h1-h6)
+ * @returns Markdown string with appropriate # prefix
+ */
+export function convertHeading(element: Element): string {
+	const level = getHeadingLevel(element);
+	if (level === 0) {
+		return "";
+	}
+
+	const content = element.textContent?.trim() || "";
+	if (!content) {
+		return "";
+	}
+
+	const prefix = "#".repeat(level);
+	return `${prefix} ${content}\n\n`;
+}