quasar-ui-danx 0.5.0 → 0.5.2

package/src/composables/markdown/useMarkdownHotkeys.ts

@@ -0,0 +1,266 @@
+import { Ref, ref } from "vue";
+
+/**
+ * Hotkey group categories for organization
+ */
+export type HotkeyGroup = "headings" | "formatting" | "lists" | "blocks" | "tables" | "other";
+
+/**
+ * Definition for a registered hotkey
+ */
+export interface HotkeyDefinition {
+	/** Key combination string, e.g., 'ctrl+1', 'ctrl+shift+b' */
+	key: string;
+	/** Action to execute when hotkey is triggered */
+	action: () => void;
+	/** Human-readable description for help display */
+	description: string;
+	/** Category group for help organization */
+	group: HotkeyGroup;
+}
+
+/**
+ * Options for useMarkdownHotkeys composable
+ */
+export interface UseMarkdownHotkeysOptions {
+	contentRef: Ref<HTMLElement | null>;
+	onShowHotkeyHelp: () => void;
+}
+
+/**
+ * Return type for useMarkdownHotkeys composable
+ */
+export interface UseMarkdownHotkeysReturn {
+	registerHotkey: (def: HotkeyDefinition) => void;
+	unregisterHotkey: (key: string) => void;
+	handleKeyDown: (event: KeyboardEvent) => boolean;
+	getHotkeyDefinitions: () => HotkeyDefinition[];
+}
+
+/**
+ * Parsed key combination for matching
+ */
+export interface ParsedKey {
+	key: string;
+	ctrl: boolean;
+	shift: boolean;
+	alt: boolean;
+	meta: boolean;
+}
+
+/**
+ * Parse a key combination string into its components
+ * Supports: ctrl, shift, alt, meta/cmd
+ *
+ * Examples:
+ * - 'ctrl+1' -> { key: '1', ctrl: true, ... }
+ * - 'ctrl+shift+b' -> { key: 'b', ctrl: true, shift: true, ... }
+ * - 'cmd+s' -> { key: 's', meta: true, ... } (Mac)
+ */
+export function parseKeyCombo(combo: string): ParsedKey {
+	const parts = combo.toLowerCase().split("+");
+	const result: ParsedKey = {
+		key: "",
+		ctrl: false,
+		shift: false,
+		alt: false,
+		meta: false
+	};
+
+	for (const part of parts) {
+		switch (part) {
+			case "ctrl":
+			case "control":
+				result.ctrl = true;
+				break;
+			case "shift":
+				result.shift = true;
+				break;
+			case "alt":
+			case "option":
+				result.alt = true;
+				break;
+			case "meta":
+			case "cmd":
+			case "command":
+			case "win":
+			case "windows":
+				result.meta = true;
+				break;
+			default:
+				// This is the actual key
+				result.key = part;
+		}
+	}
+
+	return result;
+}
+
+/**
+ * Check if a keyboard event matches a parsed key combination
+ * Handles cross-platform modifier differences (Ctrl on Windows/Linux, Cmd on Mac)
+ */
+export function matchesKeyCombo(event: KeyboardEvent, parsed: ParsedKey): boolean {
+	// Normalize the event key
+	let eventKey = event.key.toLowerCase();
+
+	// Normalize arrow keys: ArrowUp -> up, ArrowDown -> down, etc.
+	if (eventKey.startsWith("arrow")) {
+		eventKey = eventKey.replace("arrow", "");
+	}
+
+	// Special handling for shifted keys
+	// When shift is held, some keys produce different characters
+	const shiftedKeys: Record<string, string> = {
+		">": ".",
+		"<": ",",
+		"?": "/",
+		"!": "1",
+		"@": "2",
+		"#": "3",
+		"$": "4",
+		"%": "5",
+		"^": "6",
+		"&": "7",
+		"*": "8",
+		"(": "9",
+		")": "0",
+		"{": "[",
+		"}": "]"
+	};
+
+	// If the parsed key expects a shifted character, check if we have the right combination
+	if (shiftedKeys[parsed.key]) {
+		// User wants to match '>' which is shift+.
+		if (eventKey === parsed.key) {
+			// Browser reports the shifted character directly
+			return matchesModifiers(event, { ...parsed, shift: true });
+		}
+		// Or check if shift+base key matches
+		if (event.shiftKey && eventKey === shiftedKeys[parsed.key]) {
+			return matchesModifiers(event, { ...parsed, shift: true });
+		}
+	}
+
+	// Handle case where browser reports shifted character but hotkey expects base key with shift
+	// e.g., hotkey "ctrl+shift+[" but browser reports "{" when Ctrl+Shift+[ is pressed
+	if (shiftedKeys[eventKey] && shiftedKeys[eventKey] === parsed.key) {
+		// The event key is a shifted character (e.g., "{") that maps to the parsed key (e.g., "[")
+		return matchesModifiers(event, parsed);
+	}
+
+	// Handle number keys (both main keyboard and numpad)
+	if (/^[0-6]$/.test(parsed.key)) {
+		if (eventKey !== parsed.key && event.code !== `Digit${parsed.key}` && event.code !== `Numpad${parsed.key}`) {
+			return false;
+		}
+	} else if (eventKey !== parsed.key) {
+		return false;
+	}
+
+	return matchesModifiers(event, parsed);
+}
+
+/**
+ * Check if modifier keys match
+ * On Mac, treat Cmd (metaKey) as equivalent to Ctrl for cross-platform support
+ */
+function matchesModifiers(event: KeyboardEvent, parsed: ParsedKey): boolean {
+	const isMac = navigator.platform.toLowerCase().includes("mac");
+
+	// For cross-platform support:
+	// - If hotkey specifies 'ctrl', match either ctrlKey or metaKey (on Mac)
+	// - If hotkey specifies 'meta', match metaKey only
+	let ctrlMatch: boolean;
+	if (parsed.ctrl) {
+		if (isMac) {
+			// On Mac, ctrl+key can be either Ctrl+key or Cmd+key
+			ctrlMatch = event.ctrlKey || event.metaKey;
+		} else {
+			ctrlMatch = event.ctrlKey;
+		}
+	} else if (parsed.meta) {
+		ctrlMatch = event.metaKey;
+	} else {
+		// No modifier required, ensure neither is pressed
+		ctrlMatch = !event.ctrlKey && !event.metaKey;
+	}
+
+	// Check other modifiers exactly
+	const shiftMatch = parsed.shift === event.shiftKey;
+	const altMatch = parsed.alt === event.altKey;
+
+	return ctrlMatch && shiftMatch && altMatch;
+}
+
+/**
+ * Composable for hotkey registration and dispatch in markdown editor
+ */
+export function useMarkdownHotkeys(options: UseMarkdownHotkeysOptions): UseMarkdownHotkeysReturn {
+	const { onShowHotkeyHelp } = options;
+
+	// Registry of all hotkeys
+	const hotkeys = ref<Map<string, HotkeyDefinition>>(new Map());
+
+	// Pre-parsed key combinations for performance
+	const parsedKeys = new Map<string, ParsedKey>();
+
+	/**
+	 * Register a new hotkey
+	 */
+	function registerHotkey(def: HotkeyDefinition): void {
+		const normalizedKey = def.key.toLowerCase();
+		hotkeys.value.set(normalizedKey, def);
+		parsedKeys.set(normalizedKey, parseKeyCombo(normalizedKey));
+	}
+
+	/**
+	 * Unregister a hotkey
+	 */
+	function unregisterHotkey(key: string): void {
+		const normalizedKey = key.toLowerCase();
+		hotkeys.value.delete(normalizedKey);
+		parsedKeys.delete(normalizedKey);
+	}
+
+	/**
+	 * Get all registered hotkey definitions for help display
+	 */
+	function getHotkeyDefinitions(): HotkeyDefinition[] {
+		return Array.from(hotkeys.value.values());
+	}
+
+	/**
+	 * Handle a keydown event and dispatch to registered hotkey
+	 * Returns true if a hotkey was matched and handled
+	 */
+	function handleKeyDown(event: KeyboardEvent): boolean {
+		// Check for help shortcut first (Ctrl/Cmd + / or Ctrl/Cmd + ?)
+		// Supports both Ctrl+/ (without shift) and Ctrl+? (which is Ctrl+Shift+/)
+		if ((event.ctrlKey || event.metaKey) && (event.key === "?" || event.key === "/")) {
+			event.preventDefault();
+			onShowHotkeyHelp();
+			return true;
+		}
+
+		// Check all registered hotkeys
+		for (const [key, def] of hotkeys.value) {
+			const parsed = parsedKeys.get(key);
+
+			if (parsed && matchesKeyCombo(event, parsed)) {
+				event.preventDefault();
+				def.action();
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	return {
+		registerHotkey,
+		unregisterHotkey,
+		handleKeyDown,
+		getHotkeyDefinitions
+	};
+}

package/src/composables/markdown/useMarkdownSelection.ts

@@ -0,0 +1,219 @@
+import { Ref } from "vue";
+
+/**
+ * Cursor position tracking for markdown editor
+ */
+export interface CursorPosition {
+	/** Index of the block element containing the cursor */
+	blockIndex: number;
+	/** Character offset within the block */
+	charOffset: number;
+}
+
+/**
+ * Return type for useMarkdownSelection composable
+ */
+export interface UseMarkdownSelectionReturn {
+	saveCursorPosition: () => CursorPosition | null;
+	restoreCursorPosition: (position: CursorPosition) => void;
+	getCurrentBlock: () => Element | null;
+	getBlockIndex: () => number;
+}
+
+/**
+ * Get cursor offset in plain text within a contenteditable element
+ * Adapted from useCodeViewerEditor.ts
+ */
+function getCursorOffset(element: HTMLElement | null): number {
+	const selection = window.getSelection();
+	if (!selection || !selection.rangeCount || !element) return 0;
+
+	const range = selection.getRangeAt(0);
+	const preCaretRange = document.createRange();
+	preCaretRange.selectNodeContents(element);
+	preCaretRange.setEnd(range.startContainer, range.startOffset);
+
+	// Count characters by walking text nodes
+	let offset = 0;
+	const walker = document.createTreeWalker(preCaretRange.commonAncestorContainer, NodeFilter.SHOW_TEXT);
+	let node = walker.nextNode();
+	while (node) {
+		if (preCaretRange.intersectsNode(node)) {
+			const nodeRange = document.createRange();
+			nodeRange.selectNodeContents(node);
+			if (preCaretRange.compareBoundaryPoints(Range.END_TO_END, nodeRange) >= 0) {
+				offset += node.textContent?.length || 0;
+			} else {
+				// Partial node - cursor is in this node
+				offset += range.startOffset;
+				break;
+			}
+		}
+		node = walker.nextNode();
+	}
+	return offset;
+}
+
+/**
+ * Set cursor to offset in plain text within a contenteditable element
+ * Adapted from useCodeViewerEditor.ts
+ */
+function setCursorOffset(element: HTMLElement | null, targetOffset: number): void {
+	if (!element) return;
+
+	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 at end
+	const range = document.createRange();
+	range.selectNodeContents(element);
+	range.collapse(false);
+	selection.removeAllRanges();
+	selection.addRange(range);
+}
+
+/**
+ * Get the block-level parent element (p, h1-h6, li, blockquote, etc.) containing the cursor
+ */
+function findBlockParent(node: Node | null, contentRef: HTMLElement): Element | null {
+	if (!node) return null;
+
+	const blockTags = ["P", "H1", "H2", "H3", "H4", "H5", "H6", "LI", "BLOCKQUOTE", "PRE", "DIV"];
+
+	let current: Node | null = node;
+	while (current && current !== contentRef) {
+		if (current.nodeType === Node.ELEMENT_NODE) {
+			const element = current as Element;
+			if (blockTags.includes(element.tagName)) {
+				return element;
+			}
+		}
+		current = current.parentNode;
+	}
+
+	return null;
+}
+
+/**
+ * Get all direct block children of the content element
+ */
+function getBlockElements(contentRef: HTMLElement): Element[] {
+	const blocks: Element[] = [];
+	const blockTags = ["P", "H1", "H2", "H3", "H4", "H5", "H6", "UL", "OL", "BLOCKQUOTE", "PRE", "DIV", "TABLE", "HR"];
+
+	for (const child of Array.from(contentRef.children)) {
+		if (blockTags.includes(child.tagName)) {
+			blocks.push(child);
+		}
+	}
+
+	return blocks;
+}
+
+/**
+ * Composable for cursor and selection management in markdown editor
+ */
+export function useMarkdownSelection(contentRef: Ref<HTMLElement | null>): UseMarkdownSelectionReturn {
+	/**
+	 * Get the current block element containing the cursor
+	 */
+	function getCurrentBlock(): Element | null {
+		if (!contentRef.value) return null;
+
+		const selection = window.getSelection();
+		if (!selection || !selection.rangeCount) return null;
+
+		const range = selection.getRangeAt(0);
+		return findBlockParent(range.startContainer, contentRef.value);
+	}
+
+	/**
+	 * Get the index of the current block within the content element
+	 */
+	function getBlockIndex(): number {
+		if (!contentRef.value) return -1;
+
+		const currentBlock = getCurrentBlock();
+		if (!currentBlock) return -1;
+
+		const blocks = getBlockElements(contentRef.value);
+		return blocks.indexOf(currentBlock);
+	}
+
+	/**
+	 * Save current cursor position as block index + character offset
+	 */
+	function saveCursorPosition(): CursorPosition | null {
+		if (!contentRef.value) return null;
+
+		const selection = window.getSelection();
+		if (!selection || !selection.rangeCount) return null;
+
+		const currentBlock = getCurrentBlock();
+		if (!currentBlock) {
+			// Cursor is not in a block, save position relative to content root
+			return {
+				blockIndex: -1,
+				charOffset: getCursorOffset(contentRef.value)
+			};
+		}
+
+		const blocks = getBlockElements(contentRef.value);
+		const blockIndex = blocks.indexOf(currentBlock);
+		const charOffset = getCursorOffset(currentBlock as HTMLElement);
+
+		return { blockIndex, charOffset };
+	}
+
+	/**
+	 * Restore cursor position from saved state
+	 */
+	function restoreCursorPosition(position: CursorPosition): void {
+		if (!contentRef.value) return;
+
+		if (position.blockIndex === -1) {
+			// Restore to content root level
+			setCursorOffset(contentRef.value, position.charOffset);
+			return;
+		}
+
+		const blocks = getBlockElements(contentRef.value);
+		if (position.blockIndex >= 0 && position.blockIndex < blocks.length) {
+			const block = blocks[position.blockIndex] as HTMLElement;
+			setCursorOffset(block, position.charOffset);
+		} else {
+			// Block no longer exists, place cursor at end
+			const range = document.createRange();
+			range.selectNodeContents(contentRef.value);
+			range.collapse(false);
+			const selection = window.getSelection();
+			selection?.removeAllRanges();
+			selection?.addRange(range);
+		}
+	}
+
+	return {
+		saveCursorPosition,
+		restoreCursorPosition,
+		getCurrentBlock,
+		getBlockIndex
+	};
+}