quasar-ui-danx 0.5.0 → 0.5.2

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

@@ -0,0 +1,428 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { useBlockquotes } from "./useBlockquotes";
+import { createTestEditor, TestEditorResult } from "../../../test/helpers/editorTestUtils";
+
+describe("useBlockquotes", () => {
+	let editor: TestEditorResult;
+	let onContentChange: ReturnType<typeof vi.fn>;
+
+	afterEach(() => {
+		if (editor) {
+			editor.destroy();
+		}
+	});
+
+	function createBlockquotes() {
+		return useBlockquotes({
+			contentRef: editor.contentRef,
+			onContentChange
+		});
+	}
+
+	describe("toggleBlockquote", () => {
+		describe("wrapping in blockquote", () => {
+			beforeEach(() => {
+				onContentChange = vi.fn();
+			});
+
+			it("wraps paragraph in blockquote", () => {
+				editor = createTestEditor("<p>Hello world</p>");
+				const blockquotes = createBlockquotes();
+				editor.setCursorInBlock(0, 5);
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<blockquote><p>Hello world</p></blockquote>");
+				expect(onContentChange).toHaveBeenCalled();
+			});
+
+			it("wraps h1 in blockquote", () => {
+				editor = createTestEditor("<h1>Hello world</h1>");
+				const blockquotes = createBlockquotes();
+				editor.setCursorInBlock(0, 0);
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<blockquote><h1>Hello world</h1></blockquote>");
+				expect(onContentChange).toHaveBeenCalled();
+			});
+
+			it("wraps h2 in blockquote", () => {
+				editor = createTestEditor("<h2>Test heading</h2>");
+				const blockquotes = createBlockquotes();
+				editor.setCursorInBlock(0, 0);
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<blockquote><h2>Test heading</h2></blockquote>");
+			});
+
+			it("wraps div in blockquote", () => {
+				editor = createTestEditor("<div>Div content</div>");
+				const blockquotes = createBlockquotes();
+				editor.setCursorInBlock(0, 0);
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<blockquote><div>Div content</div></blockquote>");
+			});
+
+			it("preserves cursor position after wrapping", () => {
+				editor = createTestEditor("<p>Hello world</p>");
+				const blockquotes = createBlockquotes();
+				editor.setCursorInBlock(0, 5);
+
+				blockquotes.toggleBlockquote();
+
+				// Verify cursor is still at offset 5
+				const sel = window.getSelection();
+				expect(sel).not.toBeNull();
+				expect(sel!.rangeCount).toBeGreaterThan(0);
+			});
+
+			it("only wraps current block, not siblings", () => {
+				editor = createTestEditor("<p>First</p><p>Second</p><p>Third</p>");
+				const blockquotes = createBlockquotes();
+				editor.setCursorInBlock(1, 0); // Cursor in second paragraph
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<p>First</p><blockquote><p>Second</p></blockquote><p>Third</p>");
+			});
+		});
+
+		describe("unwrapping from blockquote", () => {
+			beforeEach(() => {
+				onContentChange = vi.fn();
+			});
+
+			it("unwraps paragraph from blockquote", () => {
+				editor = createTestEditor("<blockquote><p>Hello world</p></blockquote>");
+				const blockquotes = createBlockquotes();
+				// Set cursor inside the paragraph within blockquote
+				const p = editor.container.querySelector("blockquote p");
+				if (p?.firstChild) {
+					editor.setCursor(p.firstChild, 5);
+				}
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<p>Hello world</p>");
+				expect(onContentChange).toHaveBeenCalled();
+			});
+
+			it("unwraps heading from blockquote", () => {
+				editor = createTestEditor("<blockquote><h1>Heading</h1></blockquote>");
+				const blockquotes = createBlockquotes();
+				const h1 = editor.container.querySelector("blockquote h1");
+				if (h1?.firstChild) {
+					editor.setCursor(h1.firstChild, 0);
+				}
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<h1>Heading</h1>");
+			});
+
+			it("preserves cursor position after unwrapping", () => {
+				editor = createTestEditor("<blockquote><p>Hello world</p></blockquote>");
+				const blockquotes = createBlockquotes();
+				const p = editor.container.querySelector("blockquote p");
+				if (p?.firstChild) {
+					editor.setCursor(p.firstChild, 5);
+				}
+
+				blockquotes.toggleBlockquote();
+
+				const sel = window.getSelection();
+				expect(sel).not.toBeNull();
+				expect(sel!.rangeCount).toBeGreaterThan(0);
+			});
+
+			it("unwraps only the blockquote, keeps other blocks", () => {
+				editor = createTestEditor("<p>Before</p><blockquote><p>Quoted</p></blockquote><p>After</p>");
+				const blockquotes = createBlockquotes();
+				const quotedP = editor.container.querySelector("blockquote p");
+				if (quotedP?.firstChild) {
+					editor.setCursor(quotedP.firstChild, 0);
+				}
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<p>Before</p><p>Quoted</p><p>After</p>");
+			});
+		});
+
+		describe("with inline formatting preserved", () => {
+			beforeEach(() => {
+				onContentChange = vi.fn();
+			});
+
+			it("preserves bold formatting when wrapping", () => {
+				editor = createTestEditor("<p>Hello <strong>bold</strong> world</p>");
+				const blockquotes = createBlockquotes();
+				editor.setCursorInBlock(0, 0);
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<blockquote><p>Hello <strong>bold</strong> world</p></blockquote>");
+			});
+
+			it("preserves italic formatting when wrapping", () => {
+				editor = createTestEditor("<p>Hello <em>italic</em> world</p>");
+				const blockquotes = createBlockquotes();
+				editor.setCursorInBlock(0, 0);
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<blockquote><p>Hello <em>italic</em> world</p></blockquote>");
+			});
+
+			it("preserves nested formatting when wrapping", () => {
+				editor = createTestEditor("<p>Hello <strong><em>bold italic</em></strong> world</p>");
+				const blockquotes = createBlockquotes();
+				editor.setCursorInBlock(0, 0);
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<blockquote><p>Hello <strong><em>bold italic</em></strong> world</p></blockquote>");
+			});
+
+			it("preserves bold formatting when unwrapping", () => {
+				editor = createTestEditor("<blockquote><p>Hello <strong>bold</strong> world</p></blockquote>");
+				const blockquotes = createBlockquotes();
+				const p = editor.container.querySelector("blockquote p");
+				if (p?.firstChild) {
+					editor.setCursor(p.firstChild, 0);
+				}
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<p>Hello <strong>bold</strong> world</p>");
+			});
+
+			it("preserves link formatting when wrapping", () => {
+				editor = createTestEditor("<p>Hello <a href=\"https://example.com\">link</a> world</p>");
+				const blockquotes = createBlockquotes();
+				editor.setCursorInBlock(0, 0);
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<blockquote><p>Hello <a href=\"https://example.com\">link</a> world</p></blockquote>");
+			});
+
+			it("preserves code formatting when wrapping", () => {
+				editor = createTestEditor("<p>Hello <code>code</code> world</p>");
+				const blockquotes = createBlockquotes();
+				editor.setCursorInBlock(0, 0);
+
+				blockquotes.toggleBlockquote();
+
+				expect(editor.getHtml()).toBe("<blockquote><p>Hello <code>code</code> world</p></blockquote>");
+			});
+		});
+	});
+
+	describe("isInBlockquote", () => {
+		beforeEach(() => {
+			onContentChange = vi.fn();
+		});
+
+		it("returns false when cursor is in plain paragraph", () => {
+			editor = createTestEditor("<p>Hello world</p>");
+			const blockquotes = createBlockquotes();
+			editor.setCursorInBlock(0, 5);
+
+			expect(blockquotes.isInBlockquote()).toBe(false);
+		});
+
+		it("returns true when cursor is inside blockquote", () => {
+			editor = createTestEditor("<blockquote><p>Hello world</p></blockquote>");
+			const blockquotes = createBlockquotes();
+			const p = editor.container.querySelector("blockquote p");
+			if (p?.firstChild) {
+				editor.setCursor(p.firstChild, 5);
+			}
+
+			expect(blockquotes.isInBlockquote()).toBe(true);
+		});
+
+		it("returns false when cursor is outside blockquote", () => {
+			editor = createTestEditor("<p>Outside</p><blockquote><p>Inside</p></blockquote>");
+			const blockquotes = createBlockquotes();
+			editor.setCursorInBlock(0, 0); // Cursor in first paragraph
+
+			expect(blockquotes.isInBlockquote()).toBe(false);
+		});
+
+		it("returns true for nested content inside blockquote", () => {
+			editor = createTestEditor("<blockquote><p><strong>Bold text</strong></p></blockquote>");
+			const blockquotes = createBlockquotes();
+			const strong = editor.container.querySelector("blockquote strong");
+			if (strong?.firstChild) {
+				editor.setCursor(strong.firstChild, 2);
+			}
+
+			expect(blockquotes.isInBlockquote()).toBe(true);
+		});
+
+		it("returns false when contentRef is null", () => {
+			editor = createTestEditor("<p>Hello world</p>");
+			const { isInBlockquote } = useBlockquotes({
+				contentRef: { value: null },
+				onContentChange
+			});
+
+			expect(isInBlockquote()).toBe(false);
+		});
+
+		it("returns false when no selection exists", () => {
+			editor = createTestEditor("<blockquote><p>Hello world</p></blockquote>");
+			const blockquotes = createBlockquotes();
+			window.getSelection()?.removeAllRanges();
+
+			expect(blockquotes.isInBlockquote()).toBe(false);
+		});
+	});
+
+	describe("edge cases", () => {
+		beforeEach(() => {
+			onContentChange = vi.fn();
+		});
+
+		it("does nothing when contentRef is null", () => {
+			editor = createTestEditor("<p>Hello world</p>");
+			const { toggleBlockquote } = useBlockquotes({
+				contentRef: { value: null },
+				onContentChange
+			});
+
+			toggleBlockquote();
+
+			expect(editor.getHtml()).toBe("<p>Hello world</p>");
+			expect(onContentChange).not.toHaveBeenCalled();
+		});
+
+		it("does nothing when selection is outside content area", () => {
+			editor = createTestEditor("<p>Hello world</p>");
+			const blockquotes = createBlockquotes();
+
+			// Create a selection outside the editor
+			const externalDiv = document.createElement("div");
+			externalDiv.textContent = "External text";
+			document.body.appendChild(externalDiv);
+
+			const range = document.createRange();
+			range.selectNodeContents(externalDiv);
+			const sel = window.getSelection();
+			sel?.removeAllRanges();
+			sel?.addRange(range);
+
+			blockquotes.toggleBlockquote();
+
+			expect(editor.getHtml()).toBe("<p>Hello world</p>");
+			expect(onContentChange).not.toHaveBeenCalled();
+
+			externalDiv.remove();
+		});
+
+		it("does nothing when no selection exists", () => {
+			editor = createTestEditor("<p>Hello world</p>");
+			const blockquotes = createBlockquotes();
+			window.getSelection()?.removeAllRanges();
+
+			blockquotes.toggleBlockquote();
+
+			expect(editor.getHtml()).toBe("<p>Hello world</p>");
+			expect(onContentChange).not.toHaveBeenCalled();
+		});
+
+		it("handles empty paragraph", () => {
+			editor = createTestEditor("<p></p>");
+			const blockquotes = createBlockquotes();
+			const p = editor.getBlock(0);
+			if (p) {
+				const range = document.createRange();
+				range.selectNodeContents(p);
+				range.collapse(true);
+				const sel = window.getSelection();
+				sel?.removeAllRanges();
+				sel?.addRange(range);
+			}
+
+			blockquotes.toggleBlockquote();
+
+			expect(editor.getHtml()).toBe("<blockquote><p></p></blockquote>");
+		});
+
+		it("handles whitespace-only content", () => {
+			editor = createTestEditor("<p>   </p>");
+			const blockquotes = createBlockquotes();
+			editor.setCursorInBlock(0, 1);
+
+			blockquotes.toggleBlockquote();
+
+			expect(editor.getHtml()).toBe("<blockquote><p>   </p></blockquote>");
+		});
+	});
+
+	describe("round-trip toggle", () => {
+		beforeEach(() => {
+			onContentChange = vi.fn();
+		});
+
+		it("toggle wrap then unwrap returns to original", () => {
+			editor = createTestEditor("<p>Hello world</p>");
+			const blockquotes = createBlockquotes();
+			editor.setCursorInBlock(0, 5);
+
+			// First toggle - wrap
+			blockquotes.toggleBlockquote();
+			expect(editor.getHtml()).toBe("<blockquote><p>Hello world</p></blockquote>");
+
+			// Set cursor again inside the blockquote
+			const p = editor.container.querySelector("blockquote p");
+			if (p?.firstChild) {
+				editor.setCursor(p.firstChild, 5);
+			}
+
+			// Second toggle - unwrap
+			blockquotes.toggleBlockquote();
+			expect(editor.getHtml()).toBe("<p>Hello world</p>");
+		});
+
+		it("toggle unwrap then wrap returns to original", () => {
+			editor = createTestEditor("<blockquote><p>Hello world</p></blockquote>");
+			const blockquotes = createBlockquotes();
+			const p = editor.container.querySelector("blockquote p");
+			if (p?.firstChild) {
+				editor.setCursor(p.firstChild, 5);
+			}
+
+			// First toggle - unwrap
+			blockquotes.toggleBlockquote();
+			expect(editor.getHtml()).toBe("<p>Hello world</p>");
+
+			// Set cursor in the unwrapped paragraph
+			editor.setCursorInBlock(0, 5);
+
+			// Second toggle - wrap
+			blockquotes.toggleBlockquote();
+			expect(editor.getHtml()).toBe("<blockquote><p>Hello world</p></blockquote>");
+		});
+	});
+
+	describe("return type", () => {
+		beforeEach(() => {
+			onContentChange = vi.fn();
+			editor = createTestEditor("<p>test</p>");
+		});
+
+		it("returns both functions", () => {
+			const blockquotes = createBlockquotes();
+
+			expect(typeof blockquotes.toggleBlockquote).toBe("function");
+			expect(typeof blockquotes.isInBlockquote).toBe("function");
+		});
+	});
+});

package/src/composables/markdown/features/useBlockquotes.ts

@@ -0,0 +1,248 @@
+import { Ref } from "vue";
+
+/**
+ * Options for useBlockquotes composable
+ */
+export interface UseBlockquotesOptions {
+	contentRef: Ref<HTMLElement | null>;
+	onContentChange: () => void;
+}
+
+/**
+ * Return type for useBlockquotes composable
+ */
+export interface UseBlockquotesReturn {
+	/** Toggle blockquote on the current block */
+	toggleBlockquote: () => void;
+	/** Check if cursor is inside a blockquote */
+	isInBlockquote: () => boolean;
+}
+
+/**
+ * Block-level tags that can be wrapped in or unwrapped from blockquotes
+ */
+const BLOCK_TAGS = ["P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV"];
+
+/**
+ * Find the nearest block-level element containing the cursor
+ */
+function findCurrentBlock(node: Node | null, contentRef: HTMLElement): Element | null {
+	if (!node) return null;
+
+	let current: Node | null = node;
+	while (current && current !== contentRef) {
+		if (current.nodeType === Node.ELEMENT_NODE) {
+			const element = current as Element;
+			if (BLOCK_TAGS.includes(element.tagName) || element.tagName === "BLOCKQUOTE") {
+				return element;
+			}
+		}
+		current = current.parentNode;
+	}
+
+	return null;
+}
+
+/**
+ * Find the blockquote ancestor if one exists
+ */
+function findBlockquoteAncestor(node: Node | null, contentRef: HTMLElement): HTMLQuoteElement | null {
+	if (!node) return null;
+
+	let current: Node | null = node;
+	while (current && current !== contentRef) {
+		if (current.nodeType === Node.ELEMENT_NODE && (current as Element).tagName === "BLOCKQUOTE") {
+			return current as HTMLQuoteElement;
+		}
+		current = current.parentNode;
+	}
+
+	return null;
+}
+
+/**
+ * Get the cursor offset within a block element's text content
+ */
+function getCursorOffset(element: HTMLElement): number {
+	const selection = window.getSelection();
+	if (!selection || !selection.rangeCount) return 0;
+
+	const range = selection.getRangeAt(0);
+	const preCaretRange = document.createRange();
+	preCaretRange.selectNodeContents(element);
+	preCaretRange.setEnd(range.startContainer, range.startOffset);
+
+	return preCaretRange.toString().length;
+}
+
+/**
+ * Set cursor to a specific offset within an element's text content
+ */
+function setCursorOffset(element: HTMLElement, targetOffset: number): void {
+	const selection = window.getSelection();
+	if (!selection) return;
+
+	let currentOffset = 0;
+	const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+	let node = walker.nextNode();
+
+	while (node) {
+		const nodeLength = node.textContent?.length || 0;
+		if (currentOffset + nodeLength >= targetOffset) {
+			const range = document.createRange();
+			range.setStart(node, targetOffset - currentOffset);
+			range.collapse(true);
+			selection.removeAllRanges();
+			selection.addRange(range);
+			return;
+		}
+		currentOffset += nodeLength;
+		node = walker.nextNode();
+	}
+
+	// If offset not found, place cursor at end
+	const range = document.createRange();
+	range.selectNodeContents(element);
+	range.collapse(false);
+	selection.removeAllRanges();
+	selection.addRange(range);
+}
+
+/**
+ * Composable for blockquote operations in markdown editor
+ */
+export function useBlockquotes(options: UseBlockquotesOptions): UseBlockquotesReturn {
+	const { contentRef, onContentChange } = options;
+
+	/**
+	 * Check if the cursor is currently inside a blockquote
+	 */
+	function isInBlockquote(): boolean {
+		if (!contentRef.value) return false;
+
+		const selection = window.getSelection();
+		if (!selection || !selection.rangeCount) return false;
+
+		const range = selection.getRangeAt(0);
+		return findBlockquoteAncestor(range.startContainer, contentRef.value) !== null;
+	}
+
+	/**
+	 * Toggle blockquote on the current block
+	 *
+	 * Behavior:
+	 * - If cursor is inside a blockquote: unwrap the block from the blockquote
+	 * - If cursor is not in a blockquote: wrap the current block in a blockquote
+	 * - Preserves cursor position after transformation
+	 */
+	function toggleBlockquote(): void {
+		if (!contentRef.value) return;
+
+		const selection = window.getSelection();
+		if (!selection || !selection.rangeCount) return;
+
+		const range = selection.getRangeAt(0);
+
+		// Check if selection is within our content area
+		if (!contentRef.value.contains(range.startContainer)) return;
+
+		const blockquote = findBlockquoteAncestor(range.startContainer, contentRef.value);
+
+		if (blockquote) {
+			unwrapBlockquote(blockquote);
+		} else {
+			wrapInBlockquote();
+		}
+
+		onContentChange();
+	}
+
+	/**
+	 * Unwrap content from a blockquote
+	 */
+	function unwrapBlockquote(blockquote: HTMLQuoteElement): void {
+		const parent = blockquote.parentNode;
+		if (!parent) return;
+
+		// Save cursor position
+		const selection = window.getSelection();
+		let cursorOffset = 0;
+		let targetBlock: Element | null = null;
+
+		if (selection && selection.rangeCount > 0) {
+			const range = selection.getRangeAt(0);
+			const currentBlock = findCurrentBlock(range.startContainer, contentRef.value!);
+
+			// If the current block is inside the blockquote, get its offset
+			if (currentBlock && blockquote.contains(currentBlock)) {
+				targetBlock = currentBlock;
+				cursorOffset = getCursorOffset(currentBlock as HTMLElement);
+			} else if (currentBlock === blockquote) {
+				// Cursor is directly in blockquote text node
+				cursorOffset = getCursorOffset(blockquote);
+			}
+		}
+
+		// Move all children out of the blockquote
+		const children = Array.from(blockquote.childNodes);
+		let firstMovedElement: Element | null = null;
+
+		for (const child of children) {
+			const insertedNode = parent.insertBefore(child, blockquote);
+			if (!firstMovedElement && insertedNode.nodeType === Node.ELEMENT_NODE) {
+				firstMovedElement = insertedNode as Element;
+			}
+		}
+
+		// Remove the empty blockquote
+		parent.removeChild(blockquote);
+
+		// Restore cursor position
+		if (targetBlock && parent.contains(targetBlock)) {
+			setCursorOffset(targetBlock as HTMLElement, cursorOffset);
+		} else if (firstMovedElement) {
+			setCursorOffset(firstMovedElement as HTMLElement, cursorOffset);
+		}
+	}
+
+	/**
+	 * Wrap the current block in a blockquote
+	 */
+	function wrapInBlockquote(): void {
+		if (!contentRef.value) return;
+
+		const selection = window.getSelection();
+		if (!selection || !selection.rangeCount) return;
+
+		const range = selection.getRangeAt(0);
+		const currentBlock = findCurrentBlock(range.startContainer, contentRef.value);
+
+		if (!currentBlock) return;
+
+		// Don't wrap if already in a blockquote
+		if (currentBlock.tagName === "BLOCKQUOTE") return;
+
+		// Save cursor position
+		const cursorOffset = getCursorOffset(currentBlock as HTMLElement);
+
+		// Create blockquote and wrap the block
+		const blockquote = document.createElement("blockquote");
+
+		// Insert blockquote before the current block
+		const parent = currentBlock.parentNode;
+		if (!parent) return;
+
+		parent.insertBefore(blockquote, currentBlock);
+
+		// Move the block into the blockquote
+		blockquote.appendChild(currentBlock);
+
+		// Restore cursor position
+		setCursorOffset(currentBlock as HTMLElement, cursorOffset);
+	}
+
+	return {
+		toggleBlockquote,
+		isInBlockquote
+	};
+}