quasar-ui-danx 0.5.1 → 0.5.3

package/src/composables/markdown/features/useCodeBlocks.spec.ts

@@ -26,6 +26,29 @@ describe("useCodeBlocks", () => {
 		});
 	}
 
+	/**
+	 * Helper to verify code block wrapper structure
+	 * The new implementation creates wrapper divs with mount points instead of <pre><code>
+	 */
+	function expectCodeBlockWrapper(content: string, language = "") {
+		const wrapper = editor.container.querySelector(".code-block-wrapper");
+		expect(wrapper).not.toBeNull();
+		expect(wrapper?.getAttribute("contenteditable")).toBe("false");
+		expect(wrapper?.hasAttribute("data-code-block-id")).toBe(true);
+
+		const mountPoint = wrapper?.querySelector(".code-viewer-mount-point");
+		expect(mountPoint).not.toBeNull();
+		expect(mountPoint?.getAttribute("data-content")).toBe(content);
+		expect(mountPoint?.getAttribute("data-language")).toBe(language);
+	}
+
+	/**
+	 * Helper to check if a code block wrapper exists
+	 */
+	function hasCodeBlockWrapper(): boolean {
+		return editor.container.querySelector(".code-block-wrapper") !== null;
+	}
+
 	describe("toggleCodeBlock", () => {
 		beforeEach(() => {
 			onContentChange = vi.fn();
@@ -38,7 +61,7 @@ describe("useCodeBlocks", () => {
 
 			codeBlocks.toggleCodeBlock();
 
-			expect(editor.getHtml()).toBe("<pre><code>Hello world</code></pre>");
+			expectCodeBlockWrapper("Hello world");
 			expect(onContentChange).toHaveBeenCalled();
 		});
 
@@ -49,7 +72,7 @@ describe("useCodeBlocks", () => {
 
 			codeBlocks.toggleCodeBlock();
 
-			expect(editor.getHtml()).toBe("<pre><code>Hello world</code></pre>");
+			expectCodeBlockWrapper("Hello world");
 			expect(onContentChange).toHaveBeenCalled();
 		});
 
@@ -60,7 +83,7 @@ describe("useCodeBlocks", () => {
 
 			codeBlocks.toggleCodeBlock();
 
-			expect(editor.getHtml()).toBe("<pre><code>Hello world</code></pre>");
+			expectCodeBlockWrapper("Hello world");
 			expect(onContentChange).toHaveBeenCalled();
 		});
 
@@ -71,7 +94,7 @@ describe("useCodeBlocks", () => {
 
 			codeBlocks.toggleCodeBlock();
 
-			expect(editor.getHtml()).toBe("<pre><code>Hello world</code></pre>");
+			expectCodeBlockWrapper("Hello world");
 			expect(onContentChange).toHaveBeenCalled();
 		});
 
@@ -97,7 +120,7 @@ describe("useCodeBlocks", () => {
 
 			codeBlocks.toggleCodeBlock();
 
-			expect(editor.getHtml()).toBe("<pre><code>const x = 1;</code></pre>");
+			expectCodeBlockWrapper("const x = 1;");
 		});
 
 		it("preserves content when toggling from code block", () => {
@@ -128,7 +151,7 @@ describe("useCodeBlocks", () => {
 
 			codeBlocks.toggleCodeBlock();
 
-			expect(editor.getHtml()).toBe("<pre><code></code></pre>");
+			expectCodeBlockWrapper("");
 		});
 
 		it("does not convert list items directly", () => {
@@ -152,17 +175,18 @@ describe("useCodeBlocks", () => {
 			onContentChange = vi.fn();
 		});
 
-		it("converts ``` to code block with cursor anchor", () => {
+		it("does not convert just ``` 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
 			editor = createTestEditor("<p>```</p>");
 			const codeBlocks = createCodeBlocks();
 			editor.setCursorInBlock(0, 3);
 
 			const result = codeBlocks.checkAndConvertCodeBlockPattern();
 
-			expect(result).toBe(true);
-			// Code element contains a zero-width space as cursor anchor
-			expect(editor.getHtml()).toBe(`<pre><code>${CURSOR_ANCHOR}</code></pre>`);
-			expect(onContentChange).toHaveBeenCalled();
+			expect(result).toBe(false);
+			expect(editor.getHtml()).toBe("<p>```</p>");
+			expect(onContentChange).not.toHaveBeenCalled();
 		});
 
 		it("converts ```javascript to code block with language", () => {
@@ -173,7 +197,7 @@ describe("useCodeBlocks", () => {
 			const result = codeBlocks.checkAndConvertCodeBlockPattern();
 
 			expect(result).toBe(true);
-			expect(editor.getHtml()).toBe(`<pre><code class="language-javascript">${CURSOR_ANCHOR}</code></pre>`);
+			expectCodeBlockWrapper("", "javascript");
 			expect(onContentChange).toHaveBeenCalled();
 		});
 
@@ -185,7 +209,7 @@ describe("useCodeBlocks", () => {
 			const result = codeBlocks.checkAndConvertCodeBlockPattern();
 
 			expect(result).toBe(true);
-			expect(editor.getHtml()).toBe(`<pre><code class="language-python">${CURSOR_ANCHOR}</code></pre>`);
+			expectCodeBlockWrapper("", "python");
 		});
 
 		it("converts ```typescript to code block with language", () => {
@@ -196,7 +220,7 @@ describe("useCodeBlocks", () => {
 			const result = codeBlocks.checkAndConvertCodeBlockPattern();
 
 			expect(result).toBe(true);
-			expect(editor.getHtml()).toBe(`<pre><code class="language-typescript">${CURSOR_ANCHOR}</code></pre>`);
+			expectCodeBlockWrapper("", "typescript");
 		});
 
 		it("returns false when no pattern is present", () => {
@@ -237,7 +261,7 @@ describe("useCodeBlocks", () => {
 			expect(onContentChange).not.toHaveBeenCalled();
 		});
 
-		it("does not convert if already a heading", () => {
+		it("converts heading with code fence pattern", () => {
 			editor = createTestEditor("<h1>```javascript</h1>");
 			const codeBlocks = createCodeBlocks();
 			editor.setCursorInBlock(0, 13);
@@ -246,7 +270,7 @@ describe("useCodeBlocks", () => {
 
 			// Headings ARE convertible blocks, so this should convert
 			expect(result).toBe(true);
-			expect(editor.getHtml()).toBe(`<pre><code class="language-javascript">${CURSOR_ANCHOR}</code></pre>`);
+			expectCodeBlockWrapper("", "javascript");
 		});
 
 		it("converts DIV elements (browser default)", () => {
@@ -257,7 +281,7 @@ describe("useCodeBlocks", () => {
 			const result = codeBlocks.checkAndConvertCodeBlockPattern();
 
 			expect(result).toBe(true);
-			expect(editor.getHtml()).toBe(`<pre><code class="language-rust">${CURSOR_ANCHOR}</code></pre>`);
+			expectCodeBlockWrapper("", "rust");
 		});
 
 		it("does not convert list items", () => {
@@ -275,25 +299,19 @@ describe("useCodeBlocks", () => {
 			expect(onContentChange).not.toHaveBeenCalled();
 		});
 
-		it("positions cursor inside code element after conversion", () => {
+		it("creates wrapper structure after conversion", () => {
 			editor = createTestEditor("<p>```javascript</p>");
 			const codeBlocks = createCodeBlocks();
 			editor.setCursorInBlock(0, 13);
 
 			codeBlocks.checkAndConvertCodeBlockPattern();
 
-			// Verify cursor is positioned inside the code element
-			const sel = window.getSelection();
-			expect(sel).not.toBeNull();
-			expect(sel?.rangeCount).toBe(1);
-
-			const range = sel?.getRangeAt(0);
-			const code = editor.container.querySelector("code");
+			// Verify wrapper structure is created
+			expectCodeBlockWrapper("", "javascript");
 
-			// The cursor should be in the code element's text node (the cursor anchor)
-			expect(range?.startContainer.parentElement).toBe(code);
-			// Position should be at the end of the cursor anchor (after the zero-width space)
-			expect(range?.startOffset).toBe(1);
+			// Verify the wrapper has an id that can be used for mounting
+			const wrapper = editor.container.querySelector(".code-block-wrapper");
+			expect(wrapper?.getAttribute("data-code-block-id")).toBeTruthy();
 		});
 
 		it("cursor anchor is stripped during markdown conversion", () => {
@@ -761,7 +779,15 @@ describe("useCodeBlocks", () => {
 
 			codeBlocks.toggleCodeBlock();
 
-			expect(editor.getHtml()).toBe("<p>First</p><pre><code>Second</code></pre><p>Third</p>");
+			// Verify only the second block was converted
+			const html = editor.getHtml();
+			expect(html).toContain("<p>First</p>");
+			expect(html).toContain("<p>Third</p>");
+			expect(html).toContain("code-block-wrapper");
+
+			// Verify the wrapper has the correct content
+			const mountPoint = editor.container.querySelector(".code-viewer-mount-point");
+			expect(mountPoint?.getAttribute("data-content")).toBe("Second");
 		});
 
 		it("handles multiline content in code block", () => {
@@ -771,9 +797,9 @@ describe("useCodeBlocks", () => {
 
 			codeBlocks.toggleCodeBlock();
 
-			// Content should be preserved as-is
-			const code = editor.container.querySelector("code");
-			expect(code?.textContent).toBe("Line 1\nLine 2\nLine 3");
+			// Content should be preserved in the data-content attribute
+			const mountPoint = editor.container.querySelector(".code-viewer-mount-point");
+			expect(mountPoint?.getAttribute("data-content")).toBe("Line 1\nLine 2\nLine 3");
 		});
 	});
 });

package/src/composables/markdown/features/useLinks.spec.ts

@@ -2,6 +2,19 @@ import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 import { useLinks } from "./useLinks";
 import { createTestEditor, TestEditorResult } from "../../../test/helpers/editorTestUtils";
 
+// Mock getBoundingClientRect for Range since jsdom doesn't implement it
+Range.prototype.getBoundingClientRect = vi.fn(() => ({
+	x: 0,
+	y: 0,
+	width: 100,
+	height: 20,
+	top: 0,
+	right: 100,
+	bottom: 20,
+	left: 0,
+	toJSON: () => ({})
+}));
+
 describe("useLinks", () => {
 	let editor: TestEditorResult;
 	let onContentChange: ReturnType<typeof vi.fn>;
@@ -34,7 +47,7 @@ describe("useLinks", () => {
 
 				links.insertLink();
 
-				expect(editor.getHtml()).toBe('<p><a href="https://example.com">Hello</a> world</p>');
+				expect(editor.getHtml()).toBe('<p><a href="https://example.com" target="_blank" rel="noopener noreferrer">Hello</a> world</p>');
 				expect(onContentChange).toHaveBeenCalled();
 			});
 
@@ -46,7 +59,7 @@ describe("useLinks", () => {
 
 				links.insertLink();
 
-				expect(editor.getHtml()).toBe('<p>Hello <a href="https://test.com">beautiful</a> world</p>');
+				expect(editor.getHtml()).toBe('<p>Hello <a href="https://test.com" target="_blank" rel="noopener noreferrer">beautiful</a> world</p>');
 			});
 
 			it("trims whitespace from URL", () => {
@@ -57,7 +70,7 @@ describe("useLinks", () => {
 
 				links.insertLink();
 
-				expect(editor.getHtml()).toBe('<p><a href="https://example.com">Hello</a> world</p>');
+				expect(editor.getHtml()).toBe('<p><a href="https://example.com" target="_blank" rel="noopener noreferrer">Hello</a> world</p>');
 			});
 
 			it("does nothing when user cancels prompt", () => {
@@ -96,7 +109,7 @@ describe("useLinks", () => {
 				expect(onContentChange).not.toHaveBeenCalled();
 			});
 
-			it("selects the wrapped content after wrapping", () => {
+			it("wraps content and link is properly created", () => {
 				editor = createTestEditor("<p>Hello world</p>");
 				vi.spyOn(window, "prompt").mockReturnValue("https://example.com");
 				const links = createLinks();
@@ -104,8 +117,11 @@ describe("useLinks", () => {
 
 				links.insertLink();
 
-				const selection = window.getSelection();
-				expect(selection?.toString()).toBe("Hello");
+				// Verify the link was created with correct text
+				const linkEl = editor.container.querySelector("a");
+				expect(linkEl).not.toBeNull();
+				expect(linkEl?.textContent).toBe("Hello");
+				expect(linkEl?.getAttribute("href")).toBe("https://example.com");
 			});
 		});
 
@@ -122,7 +138,7 @@ describe("useLinks", () => {
 
 				links.insertLink();
 
-				expect(editor.getHtml()).toContain('<a href="https://example.com">https://example.com</a>');
+				expect(editor.getHtml()).toContain('<a href="https://example.com" target="_blank" rel="noopener noreferrer">https://example.com</a>');
 				expect(onContentChange).toHaveBeenCalled();
 			});
 
@@ -150,7 +166,7 @@ describe("useLinks", () => {
 				expect(onContentChange).not.toHaveBeenCalled();
 			});
 
-			it("selects the inserted link text after insertion", () => {
+			it("inserts link and link is properly created", () => {
 				editor = createTestEditor("<p>Hello world</p>");
 				vi.spyOn(window, "prompt").mockReturnValue("https://example.com");
 				const links = createLinks();
@@ -158,8 +174,11 @@ describe("useLinks", () => {
 
 				links.insertLink();
 
-				const selection = window.getSelection();
-				expect(selection?.toString()).toBe("https://example.com");
+				// Verify the link was created with URL as text
+				const linkEl = editor.container.querySelector("a");
+				expect(linkEl).not.toBeNull();
+				expect(linkEl?.textContent).toBe("https://example.com");
+				expect(linkEl?.getAttribute("href")).toBe("https://example.com");
 			});
 		});
 

package/src/composables/markdown/useMarkdownEditor.ts

@@ -323,10 +323,15 @@ export function useMarkdownEditor(options: UseMarkdownEditorOptions): UseMarkdow
 		codeBlocks.toggleCodeBlock();
 	}
 
-	// Computed character count
-	const charCount = computed(() => {
-		return contentRef.value?.textContent?.length || 0;
-	});
+	// Character count - updated on each input since textContent is not reactive
+	const charCount = ref(0);
+
+	/**
+	 * Update the character count from the current content
+	 */
+	function updateCharCount(): void {
+		charCount.value = contentRef.value?.textContent?.length || 0;
+	}
 
 	// Reactive hotkey definitions for UI
 	const hotkeyDefinitions = computed(() => {
@@ -738,6 +743,9 @@ export function useMarkdownEditor(options: UseMarkdownEditorOptions): UseMarkdow
 	 * Note: Code fence patterns (```) are only converted on Enter key press, not on input
 	 */
 	function onInput(): void {
+		// Update character count immediately for responsive UI
+		updateCharCount();
+
 		// Check for heading pattern (e.g., "# " -> H1)
 		let converted = headings.checkAndConvertHeadingPattern();
 
@@ -860,8 +868,8 @@ export function useMarkdownEditor(options: UseMarkdownEditorOptions): UseMarkdow
 	function onKeyDown(event: KeyboardEvent): void {
 		// Don't handle events that originate from inside code block wrappers
 		// (CodeViewer handles its own keyboard events like Ctrl+A for select-all)
-		const target = event.target as HTMLElement;
-		const isInCodeBlock = target.closest("[data-code-block-id]");
+		const target = event.target as HTMLElement | null;
+		const isInCodeBlock = target?.closest("[data-code-block-id]");
 
 		// SPECIAL CASE: Handle Ctrl+Alt+L for code block language cycling
 		// This is a fallback in case the CodeViewer's handler doesn't receive the event
@@ -873,7 +881,7 @@ export function useMarkdownEditor(options: UseMarkdownEditorOptions): UseMarkdow
 			event.stopPropagation();
 
 			// Find the code block ID and cycle its language
-			const wrapper = target.closest("[data-code-block-id]");
+			const wrapper = target?.closest("[data-code-block-id]");
 			const codeBlockId = wrapper?.getAttribute("data-code-block-id");
 
 			if (codeBlockId) {
@@ -1007,6 +1015,7 @@ export function useMarkdownEditor(options: UseMarkdownEditorOptions): UseMarkdow
 		nextTick(() => {
 			if (contentRef.value) {
 				contentRef.value.innerHTML = sync.renderedHtml.value;
+				updateCharCount();
 			}
 		});
 	}

package/src/composables/useCodeFormat.ts

@@ -2,7 +2,10 @@ import { computed, ref, Ref } from "vue";
 import { parse as parseYAML, stringify as yamlStringify } from "yaml";
 import { fJSON, parseMarkdownJSON, parseMarkdownYAML } from "../helpers/formats/parsers";
 
-export type CodeFormat = "json" | "yaml" | "text" | "markdown";
+// Version for HMR cache busting
+export const USE_CODE_FORMAT_VERSION = "1.0.4";
+
+export type CodeFormat = "json" | "yaml" | "text" | "markdown" | "html" | "css" | "javascript";
 
 export interface UseCodeFormatOptions {
 	initialFormat?: CodeFormat;
@@ -58,8 +61,8 @@ export function useCodeFormat(options: UseCodeFormatOptions = {}): UseCodeFormat
 	function formatValueToString(value: object | string | null, targetFormat: CodeFormat = format.value): string {
 		if (!value) return "";
 
-		// Text and markdown formats - just return as-is
-		if (targetFormat === "text" || targetFormat === "markdown") {
+		// Text, markdown, and code formats (CSS, JavaScript, HTML) - just return as-is
+		if (targetFormat === "text" || targetFormat === "markdown" || targetFormat === "css" || targetFormat === "javascript" || targetFormat === "html") {
 			return typeof value === "string" ? value : JSON.stringify(value, null, 2);
 		}
 
@@ -79,11 +82,12 @@ export function useCodeFormat(options: UseCodeFormatOptions = {}): UseCodeFormat
 	}
 
 	// Validate string content for a format
+	// v2: Added CSS/JavaScript/HTML as always-valid formats
 	function validateContent(content: string, targetFormat: CodeFormat = format.value): boolean {
 		if (!content) return true;
 
-		// Text and markdown formats are always valid
-		if (targetFormat === "text" || targetFormat === "markdown") return true;
+		// Text, markdown, and code formats are always valid
+		if (targetFormat === "text" || targetFormat === "markdown" || targetFormat === "css" || targetFormat === "javascript" || targetFormat === "html") return true;
 
 		try {
 			if (targetFormat === "json") {
@@ -98,11 +102,12 @@ export function useCodeFormat(options: UseCodeFormatOptions = {}): UseCodeFormat
 	}
 
 	// Validate and return error details if invalid
+	// v2: Added CSS/JavaScript/HTML as always-valid formats
 	function validateContentWithError(content: string, targetFormat: CodeFormat = format.value): ValidationError | null {
 		if (!content) return null;
 
-		// Text and markdown formats are always valid
-		if (targetFormat === "text" || targetFormat === "markdown") return null;
+		// Text, markdown, and code formats are always valid
+		if (targetFormat === "text" || targetFormat === "markdown" || targetFormat === "css" || targetFormat === "javascript" || targetFormat === "html") return null;
 
 		try {
 			if (targetFormat === "json") {
@@ -144,16 +149,18 @@ export function useCodeFormat(options: UseCodeFormatOptions = {}): UseCodeFormat
 
 	// Initialize with value if provided
 	if (options.initialValue) {
-		rawContent.value = formatValueToString(options.initialValue, format.value);
+		const formatted = formatValueToString(options.initialValue, format.value);
+		rawContent.value = formatted;
 	}
 
 	// Computed: parsed object from raw content
 	const parsedValue = computed(() => parseContent(rawContent.value));
 
 	// Computed: formatted string
-	// For text and markdown formats, return rawContent directly without parsing
+	// v3: For text, markdown, and code formats (CSS, JavaScript, HTML), return rawContent directly without parsing
 	const formattedContent = computed(() => {
-		if (format.value === "text" || format.value === "markdown") {
+		const isStringFormat = format.value === "text" || format.value === "markdown" || format.value === "css" || format.value === "javascript" || format.value === "html";
+		if (isStringFormat) {
 			return rawContent.value;
 		}
 		return formatValueToString(parsedValue.value, format.value);

package/src/composables/useCodeViewerCollapse.ts

@@ -54,6 +54,13 @@ export function useCodeViewerCollapse(options: UseCodeViewerCollapseOptions): Us
 		const maxLength = 100;
 		let preview = "";
 
+		// For text and markdown formats, just show the first line - no parsing
+		if (format.value === "text" || format.value === "markdown") {
+			const firstLine = content.split("\n")[0].trim();
+			preview = firstLine.length > maxLength ? firstLine.slice(0, maxLength) + "..." : firstLine;
+			return preview;
+		}
+
 		if (format.value === "json") {
 			// For JSON, show compact inline format
 			try {

package/src/composables/useFileNavigation.ts

@@ -10,7 +10,11 @@ export function useFileNavigation(initialFile: Ref<UploadedFile | null>, initial
 	const currentFile = ref<UploadedFile | null>(initialFile.value);
 	const relatedFiles = ref<UploadedFile[]>(initialRelatedFiles.value);
 	const parentStack = ref<FileNavigationParent[]>([]);
-	const currentIndex = ref(0);
+	const currentIndex = ref(
+		initialFile.value
+			? Math.max(0, initialRelatedFiles.value.findIndex(f => f.id === initialFile.value!.id))
+			: 0
+	);
 
 	// Computed properties
 	const hasParent = computed(() => parentStack.value.length > 0);