quasar-ui-danx 0.4.99 → 0.5.1

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
+	};
+}

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

@@ -0,0 +1,369 @@
+import { Quasar } from "quasar";
+import { App, computed, createApp, h, nextTick, onUnmounted, ref, Ref, watch } from "vue";
+import CodeViewer from "../../../components/Utility/Code/CodeViewer.vue";
+import { CodeBlockState } from "./useCodeBlocks";
+
+/**
+ * Options for useCodeBlockManager composable
+ */
+export interface UseCodeBlockManagerOptions {
+	/** Reference to the contenteditable container */
+	contentRef: Ref<HTMLElement | null>;
+	/** Reactive map of code block states */
+	codeBlocks: Map<string, CodeBlockState>;
+	/** Callback to update code block content */
+	updateCodeBlockContent: (id: string, content: string) => void;
+	/** Callback to update code block language */
+	updateCodeBlockLanguage: (id: string, language: string) => void;
+	/** Callback when a code block requests to exit (e.g., double-Enter at end) */
+	onCodeBlockExit?: (id: string) => void;
+	/** Callback when a code block requests to be deleted (e.g., Backspace/Delete on empty) */
+	onCodeBlockDelete?: (id: string) => void;
+	/** Callback when a code block is mounted */
+	onCodeBlockMounted?: (id: string, wrapper: HTMLElement) => void;
+}
+
+/**
+ * Return type for useCodeBlockManager composable
+ */
+export interface UseCodeBlockManagerReturn {
+	/** Mount CodeViewer instances for all unmounted code blocks */
+	mountCodeViewers: () => void;
+	/** Unmount a specific CodeViewer instance */
+	unmountCodeViewer: (id: string) => void;
+	/** Unmount all CodeViewer instances */
+	unmountAllCodeViewers: () => void;
+	/** Get mounted instance count */
+	getMountedCount: () => number;
+}
+
+/**
+ * Mounted CodeViewer instance tracking
+ */
+interface MountedInstance {
+	app: App;
+	mountPoint: HTMLElement;
+}
+
+/**
+ * Map language aliases to CodeViewer format
+ */
+function mapLanguageToFormat(language: string): string {
+	const formatMap: Record<string, string> = {
+		js: "javascript",
+		ts: "typescript",
+		py: "python",
+		rb: "ruby",
+		yml: "yaml",
+		md: "markdown",
+		sh: "bash",
+		shell: "bash"
+	};
+
+	return formatMap[language] || language || "text";
+}
+
+/**
+ * Composable for managing CodeViewer instances within the markdown editor.
+ * Handles mounting/unmounting Vue apps for code block "islands".
+ */
+export function useCodeBlockManager(options: UseCodeBlockManagerOptions): UseCodeBlockManagerReturn {
+	const { contentRef, codeBlocks, updateCodeBlockContent, updateCodeBlockLanguage, onCodeBlockExit, onCodeBlockDelete, onCodeBlockMounted } = options;
+
+	// Track mounted instances by code block ID
+	const mountedInstances = new Map<string, MountedInstance>();
+
+	// Track watchers for cleanup
+	const mountedWatchers = new Map<string, () => void>();
+
+	// MutationObserver to watch for new code block wrappers
+	let observer: MutationObserver | null = null;
+
+	/**
+	 * Create and mount a CodeViewer instance for a code block
+	 */
+	function mountCodeViewer(wrapper: HTMLElement): void {
+		const id = wrapper.getAttribute("data-code-block-id");
+		if (!id) return;
+
+		// Skip if already mounted
+		if (mountedInstances.has(id)) return;
+
+		const mountPoint = wrapper.querySelector(".code-viewer-mount-point") as HTMLElement;
+		if (!mountPoint) return;
+
+		// Get state from the codeBlocks map
+		const state = codeBlocks.get(id);
+
+		// If no state in map, try to get from data attributes (initial load)
+		const initialContent = state?.content ?? mountPoint.getAttribute("data-content") ?? "";
+		const initialLanguage = state?.language ?? mountPoint.getAttribute("data-language") ?? "";
+
+		// Ensure state exists in the map
+		if (!state) {
+			codeBlocks.set(id, {
+				id,
+				content: initialContent,
+				language: initialLanguage
+			});
+		}
+
+		// Create reactive refs for the CodeViewer props
+		// These will be updated by watchers when the codeBlocks map changes
+		const reactiveContent = ref(initialContent);
+		const reactiveLanguage = ref(initialLanguage);
+
+		// Set up watchers to track changes to this code block's state
+		// We need separate watchers for content and language to ensure Vue properly
+		// tracks the reactive properties accessed within each getter function
+		const stopContentWatcher = watch(
+			() => codeBlocks.get(id)?.content,
+			(newContent) => {
+				if (newContent !== undefined) {
+					reactiveContent.value = newContent;
+				}
+			}
+		);
+
+		const stopLanguageWatcher = watch(
+			() => codeBlocks.get(id)?.language,
+			(newLanguage) => {
+				if (newLanguage !== undefined) {
+					reactiveLanguage.value = newLanguage;
+				}
+			}
+		);
+
+		// Combined cleanup function for both watchers
+		const stopWatcher = () => {
+			stopContentWatcher();
+			stopLanguageWatcher();
+		};
+
+		// Store the watcher cleanup function
+		mountedWatchers.set(id, stopWatcher);
+
+		// Create Vue app for CodeViewer
+		const app = createApp({
+			setup() {
+				// Handle model value updates
+				const onUpdateModelValue = (value: object | string | null) => {
+					const content = typeof value === "string" ? value : JSON.stringify(value);
+					updateCodeBlockContent(id, content);
+				};
+
+				// Handle format/language updates
+				const onUpdateFormat = (format: string) => {
+					updateCodeBlockLanguage(id, format);
+				};
+
+				// Handle exit (double-Enter at end of code block)
+				const onExit = () => {
+					if (onCodeBlockExit) {
+						onCodeBlockExit(id);
+					}
+				};
+
+				// Handle delete (Backspace/Delete on empty code block)
+				const onDelete = () => {
+					if (onCodeBlockDelete) {
+						onCodeBlockDelete(id);
+					}
+				};
+
+				// Create a computed for the format to ensure proper reactivity tracking
+				// The render function needs a computed that Vue can track for re-renders
+				const computedFormat = computed(() => mapLanguageToFormat(reactiveLanguage.value));
+
+				return () => h(CodeViewer, {
+					modelValue: reactiveContent.value,
+					format: computedFormat.value,
+					canEdit: true,
+					editable: true,
+					allowAnyLanguage: true,
+					class: "code-block-island",
+					"onUpdate:modelValue": onUpdateModelValue,
+					"onUpdate:format": onUpdateFormat,
+					onExit,
+					onDelete
+				});
+			}
+		});
+
+		// Install Quasar on the dynamically created app
+		// This is required because createApp() doesn't inherit plugins from the parent app
+		app.use(Quasar, { plugins: {} });
+
+		// Clear mount point content (remove data attributes div structure)
+		mountPoint.innerHTML = "";
+
+		// Mount the app
+		app.mount(mountPoint);
+
+		// Track the instance
+		mountedInstances.set(id, { app, mountPoint });
+
+		// Notify that the code block was mounted (after nextTick to ensure DOM is ready)
+		if (onCodeBlockMounted) {
+			nextTick(() => {
+				onCodeBlockMounted(id, wrapper);
+			});
+		}
+	}
+
+	/**
+	 * Unmount a specific CodeViewer instance
+	 */
+	function unmountCodeViewer(id: string): void {
+		// Clean up watcher
+		const stopWatcher = mountedWatchers.get(id);
+		if (stopWatcher) {
+			stopWatcher();
+			mountedWatchers.delete(id);
+		}
+
+		// Unmount Vue app
+		const instance = mountedInstances.get(id);
+		if (instance) {
+			instance.app.unmount();
+			mountedInstances.delete(id);
+		}
+	}
+
+	/**
+	 * Unmount all CodeViewer instances
+	 */
+	function unmountAllCodeViewers(): void {
+		// Clean up all watchers
+		for (const [id, stopWatcher] of mountedWatchers) {
+			stopWatcher();
+			mountedWatchers.delete(id);
+		}
+
+		// Unmount all Vue apps
+		for (const [id, instance] of mountedInstances) {
+			instance.app.unmount();
+			mountedInstances.delete(id);
+		}
+	}
+
+	/**
+	 * Mount CodeViewer instances for all unmounted code blocks
+	 */
+	function mountCodeViewers(): void {
+		if (!contentRef.value) return;
+
+		const wrappers = contentRef.value.querySelectorAll("[data-code-block-id]");
+		wrappers.forEach((wrapper) => {
+			mountCodeViewer(wrapper as HTMLElement);
+		});
+	}
+
+	/**
+	 * Get mounted instance count
+	 */
+	function getMountedCount(): number {
+		return mountedInstances.size;
+	}
+
+	/**
+	 * Handle mutations to the content element
+	 */
+	function handleMutations(mutations: MutationRecord[]): void {
+		for (const mutation of mutations) {
+			// Check for added nodes that are code block wrappers
+			for (const node of Array.from(mutation.addedNodes)) {
+				if (node.nodeType === Node.ELEMENT_NODE) {
+					const element = node as HTMLElement;
+
+					// Check if the added node is a code block wrapper
+					if (element.hasAttribute && element.hasAttribute("data-code-block-id")) {
+						nextTick(() => mountCodeViewer(element));
+					}
+
+					// Check children for code block wrappers
+					const childWrappers = element.querySelectorAll?.("[data-code-block-id]");
+					if (childWrappers && childWrappers.length > 0) {
+						childWrappers.forEach((wrapper) => {
+							nextTick(() => mountCodeViewer(wrapper as HTMLElement));
+						});
+					}
+				}
+			}
+
+			// Check for removed nodes that were code block wrappers
+			for (const node of Array.from(mutation.removedNodes)) {
+				if (node.nodeType === Node.ELEMENT_NODE) {
+					const element = node as HTMLElement;
+
+					// Check if the removed node is a code block wrapper
+					const id = element.getAttribute?.("data-code-block-id");
+					if (id) {
+						unmountCodeViewer(id);
+					}
+
+					// Check children for code block wrappers
+					const childWrappers = element.querySelectorAll?.("[data-code-block-id]");
+					if (childWrappers) {
+						childWrappers.forEach((wrapper) => {
+							const childId = wrapper.getAttribute("data-code-block-id");
+							if (childId) {
+								unmountCodeViewer(childId);
+							}
+						});
+					}
+				}
+			}
+		}
+	}
+
+	/**
+	 * Start observing for DOM changes
+	 */
+	function startObserver(): void {
+		if (!contentRef.value || observer) return;
+
+		observer = new MutationObserver(handleMutations);
+		observer.observe(contentRef.value, {
+			childList: true,
+			subtree: true
+		});
+	}
+
+	/**
+	 * Stop observing DOM changes
+	 */
+	function stopObserver(): void {
+		if (observer) {
+			observer.disconnect();
+			observer = null;
+		}
+	}
+
+	// Watch for contentRef changes to set up/tear down observer
+	watch(contentRef, (newRef, oldRef) => {
+		if (oldRef && !newRef) {
+			// Content ref was removed - clean up
+			stopObserver();
+			unmountAllCodeViewers();
+		} else if (newRef && !oldRef) {
+			// Content ref was added - set up
+			startObserver();
+			// Mount any existing code blocks
+			nextTick(() => mountCodeViewers());
+		}
+	}, { immediate: true });
+
+	// Clean up on unmount
+	onUnmounted(() => {
+		stopObserver();
+		unmountAllCodeViewers();
+	});
+
+	return {
+		mountCodeViewers,
+		unmountCodeViewer,
+		unmountAllCodeViewers,
+		getMountedCount
+	};
+}