quasar-ui-danx 0.4.99 → 0.5.1

package/src/styles/themes/danx/markdown.scss

@@ -94,6 +94,24 @@
     list-style-type: decimal;
   }
 
+  // Task lists
+  .task-list {
+    list-style: none;
+    padding-left: 0;
+
+    .task-list-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5em;
+      margin: 0.25em 0;
+
+      input[type="checkbox"] {
+        margin-top: 0.3em;
+        cursor: default;
+      }
+    }
+  }
+
   // Links
   a {
     color: #60a5fa; // blue-400
@@ -121,6 +139,32 @@
   strong { font-weight: 600; }
   em { font-style: italic; }
 
+  // Strikethrough
+  del {
+    text-decoration: line-through;
+    opacity: 0.7;
+  }
+
+  // Highlight
+  mark {
+    background: rgba(250, 204, 21, 0.4); // yellow-400 with opacity
+    padding: 0.1em 0.2em;
+    border-radius: 2px;
+  }
+
+  // Subscript/Superscript
+  sub, sup {
+    font-size: 0.75em;
+  }
+
+  sub {
+    vertical-align: sub;
+  }
+
+  sup {
+    vertical-align: super;
+  }
+
   // Tables
   table {
     border-collapse: collapse;
@@ -142,4 +186,56 @@
       background: rgba(255, 255, 255, 0.05);
     }
   }
+
+  // Definition lists
+  dl {
+    margin: 1em 0;
+  }
+
+  dt {
+    font-weight: 600;
+    margin-top: 1em;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  dd {
+    margin-left: 2em;
+    margin-top: 0.25em;
+  }
+
+  // Footnotes
+  .footnote-ref {
+    font-size: 0.75em;
+    vertical-align: super;
+    line-height: 0;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  .footnotes {
+    margin-top: 2em;
+    font-size: 0.875em;
+
+    hr {
+      margin-bottom: 1em;
+    }
+
+    .footnote-list {
+      padding-left: 1.5em;
+    }
+
+    .footnote-item {
+      margin: 0.5em 0;
+    }
+
+    .footnote-backref {
+      margin-left: 0.5em;
+      text-decoration: none;
+    }
+  }
 }

package/src/test/helpers/editorTestUtils.spec.ts

@@ -0,0 +1,296 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { createTestEditor, TestEditorResult } from './editorTestUtils';
+
+describe('editorTestUtils', () => {
+	let editor: TestEditorResult;
+
+	afterEach(() => {
+		if (editor) {
+			editor.destroy();
+		}
+	});
+
+	describe('createTestEditor', () => {
+		it('should create a contenteditable container', () => {
+			editor = createTestEditor('<p>Hello World</p>');
+
+			expect(editor.container).toBeInstanceOf(HTMLElement);
+			expect(editor.container.getAttribute('contenteditable')).toBe('true');
+			expect(editor.container.innerHTML).toBe('<p>Hello World</p>');
+		});
+
+		it('should trim whitespace from initial HTML', () => {
+			editor = createTestEditor('  <p>Test</p>  ');
+
+			expect(editor.container.innerHTML).toBe('<p>Test</p>');
+		});
+	});
+
+	describe('getHtml', () => {
+		it('should return current HTML content', () => {
+			editor = createTestEditor('<p>Initial</p>');
+
+			expect(editor.getHtml()).toBe('<p>Initial</p>');
+
+			// Modify content
+			editor.container.innerHTML = '<p>Modified</p>';
+			expect(editor.getHtml()).toBe('<p>Modified</p>');
+		});
+	});
+
+	describe('getMarkdown', () => {
+		it('should convert HTML to markdown', () => {
+			editor = createTestEditor('<p>Hello <strong>bold</strong> text</p>');
+
+			const markdown = editor.getMarkdown();
+			expect(markdown).toBe('Hello **bold** text');
+		});
+
+		it('should handle headings', () => {
+			editor = createTestEditor('<h2>Heading Two</h2>');
+
+			expect(editor.getMarkdown()).toBe('## Heading Two');
+		});
+
+		it('should handle lists', () => {
+			editor = createTestEditor('<ul><li>Item 1</li><li>Item 2</li></ul>');
+
+			const markdown = editor.getMarkdown();
+			expect(markdown).toContain('- Item 1');
+			expect(markdown).toContain('- Item 2');
+		});
+	});
+
+	describe('getBlock and getBlocks', () => {
+		beforeEach(() => {
+			editor = createTestEditor('<p>First</p><p>Second</p><p>Third</p>');
+		});
+
+		it('should get a block by index', () => {
+			const block0 = editor.getBlock(0);
+			const block1 = editor.getBlock(1);
+			const block2 = editor.getBlock(2);
+
+			expect(block0?.textContent).toBe('First');
+			expect(block1?.textContent).toBe('Second');
+			expect(block2?.textContent).toBe('Third');
+		});
+
+		it('should return null for invalid index', () => {
+			expect(editor.getBlock(10)).toBeNull();
+			expect(editor.getBlock(-1)).toBeNull();
+		});
+
+		it('should get all blocks', () => {
+			const blocks = editor.getBlocks();
+
+			expect(blocks).toHaveLength(3);
+			expect(blocks[0].textContent).toBe('First');
+			expect(blocks[2].textContent).toBe('Third');
+		});
+	});
+
+	describe('setCursor and getCursorPosition', () => {
+		beforeEach(() => {
+			editor = createTestEditor('<p>Hello World</p>');
+		});
+
+		it('should set cursor position in a text node', () => {
+			const textNode = editor.getBlock(0)?.firstChild;
+			if (!textNode) throw new Error('Text node not found');
+
+			editor.setCursor(textNode, 5);
+
+			const pos = editor.getCursorPosition();
+			expect(pos.node).toBe(textNode);
+			expect(pos.offset).toBe(5);
+		});
+
+		it('should return null node when no selection', () => {
+			// Clear any existing selection
+			window.getSelection()?.removeAllRanges();
+
+			const pos = editor.getCursorPosition();
+			expect(pos.node).toBeNull();
+			expect(pos.offset).toBe(0);
+		});
+	});
+
+	describe('setCursorInBlock and getCursorOffsetInBlock', () => {
+		beforeEach(() => {
+			editor = createTestEditor('<p>First paragraph</p><p>Second paragraph</p>');
+		});
+
+		it('should set cursor at offset within a block', () => {
+			editor.setCursorInBlock(0, 6);
+
+			const offset = editor.getCursorOffsetInBlock(0);
+			expect(offset).toBe(6); // After "First "
+		});
+
+		it('should set cursor in second block', () => {
+			editor.setCursorInBlock(1, 7);
+
+			const offset = editor.getCursorOffsetInBlock(1);
+			expect(offset).toBe(7); // After "Second "
+		});
+
+		it('should return -1 for invalid block index', () => {
+			editor.setCursorInBlock(0, 0);
+
+			expect(editor.getCursorOffsetInBlock(10)).toBe(-1);
+		});
+
+		it('should return -1 when cursor is not in the specified block', () => {
+			editor.setCursorInBlock(0, 0);
+
+			expect(editor.getCursorOffsetInBlock(1)).toBe(-1);
+		});
+	});
+
+	describe('selectRange and selectInBlock', () => {
+		beforeEach(() => {
+			editor = createTestEditor('<p>Hello World</p>');
+		});
+
+		it('should select a text range', () => {
+			const textNode = editor.getBlock(0)?.firstChild;
+			if (!textNode) throw new Error('Text node not found');
+
+			editor.selectRange(textNode, 0, textNode, 5);
+
+			const sel = window.getSelection();
+			expect(sel?.toString()).toBe('Hello');
+		});
+
+		it('should select text within a block by offsets', () => {
+			editor.selectInBlock(0, 6, 11);
+
+			const sel = window.getSelection();
+			expect(sel?.toString()).toBe('World');
+		});
+	});
+
+	describe('pressKey', () => {
+		beforeEach(() => {
+			editor = createTestEditor('<p>Test</p>');
+		});
+
+		it('should dispatch keydown event', () => {
+			let receivedEvent: KeyboardEvent | null = null;
+			editor.container.addEventListener('keydown', (e) => {
+				receivedEvent = e;
+			});
+
+			editor.pressKey('a');
+
+			expect(receivedEvent).not.toBeNull();
+			expect(receivedEvent!.key).toBe('a');
+			expect(receivedEvent!.code).toBe('KeyA');
+		});
+
+		it('should include modifier keys', () => {
+			let receivedEvent: KeyboardEvent | null = null;
+			editor.container.addEventListener('keydown', (e) => {
+				receivedEvent = e;
+			});
+
+			editor.pressKey('b', { ctrl: true, shift: true });
+
+			expect(receivedEvent!.ctrlKey).toBe(true);
+			expect(receivedEvent!.shiftKey).toBe(true);
+			expect(receivedEvent!.altKey).toBe(false);
+			expect(receivedEvent!.metaKey).toBe(false);
+		});
+
+		it('should handle special keys', () => {
+			let receivedEvent: KeyboardEvent | null = null;
+			editor.container.addEventListener('keydown', (e) => {
+				receivedEvent = e;
+			});
+
+			editor.pressKey('Enter');
+
+			expect(receivedEvent!.key).toBe('Enter');
+			expect(receivedEvent!.code).toBe('Enter');
+		});
+	});
+
+	describe('type', () => {
+		beforeEach(() => {
+			editor = createTestEditor('<p>Hello</p>');
+		});
+
+		it('should insert text at cursor position', () => {
+			const textNode = editor.getBlock(0)?.firstChild;
+			if (!textNode) throw new Error('Text node not found');
+
+			editor.setCursor(textNode, 5);
+			editor.type(' World');
+
+			expect(editor.container.textContent).toContain('Hello');
+			expect(editor.container.textContent).toContain('World');
+		});
+
+		it('should dispatch input event', () => {
+			let inputFired = false;
+			editor.container.addEventListener('input', () => {
+				inputFired = true;
+			});
+
+			const textNode = editor.getBlock(0)?.firstChild;
+			if (!textNode) throw new Error('Text node not found');
+
+			editor.setCursor(textNode, 0);
+			editor.type('X');
+
+			expect(inputFired).toBe(true);
+		});
+	});
+
+	describe('contentRef', () => {
+		it('should provide a Vue ref to the container', () => {
+			editor = createTestEditor('<p>Test</p>');
+
+			expect(editor.contentRef.value).toBe(editor.container);
+		});
+	});
+
+	describe('destroy', () => {
+		it('should remove the container from DOM', () => {
+			editor = createTestEditor('<p>Test</p>');
+			const container = editor.container;
+
+			expect(document.body.contains(container)).toBe(true);
+
+			editor.destroy();
+
+			expect(document.body.contains(container)).toBe(false);
+		});
+	});
+
+	describe('complex content handling', () => {
+		it('should handle nested inline formatting', () => {
+			editor = createTestEditor('<p>This is <strong><em>bold italic</em></strong> text</p>');
+
+			editor.selectInBlock(0, 8, 19);
+
+			const sel = window.getSelection();
+			expect(sel?.toString()).toBe('bold italic');
+		});
+
+		it('should handle multiple blocks with cursor operations', () => {
+			editor = createTestEditor('<p>Line 1</p><p>Line 2</p><p>Line 3</p>');
+
+			// Set cursor in middle block
+			editor.setCursorInBlock(1, 3);
+
+			const offset = editor.getCursorOffsetInBlock(1);
+			expect(offset).toBe(3);
+
+			// Verify cursor is not in other blocks
+			expect(editor.getCursorOffsetInBlock(0)).toBe(-1);
+			expect(editor.getCursorOffsetInBlock(2)).toBe(-1);
+		});
+	});
+});

package/src/test/helpers/editorTestUtils.ts

@@ -0,0 +1,253 @@
+import { ref } from 'vue';
+import { htmlToMarkdown } from '../../helpers/formats/markdown/htmlToMarkdown';
+
+export interface TestEditorResult {
+	/** The contenteditable container element */
+	container: HTMLElement;
+	/** Get the current HTML content */
+	getHtml: () => string;
+	/** Get the markdown output from current HTML */
+	getMarkdown: () => string;
+	/** Get cursor position as { node, offset } */
+	getCursorPosition: () => { node: Node | null; offset: number };
+	/** Get cursor offset within a specific block */
+	getCursorOffsetInBlock: (blockIndex: number) => number;
+	/** Set cursor at a position in a specific text node */
+	setCursor: (node: Node, offset: number) => void;
+	/** Set cursor at offset within block's text content */
+	setCursorInBlock: (blockIndex: number, offset: number) => void;
+	/** Select text range */
+	selectRange: (startNode: Node, startOffset: number, endNode: Node, endOffset: number) => void;
+	/** Select text within a block by offsets */
+	selectInBlock: (blockIndex: number, startOffset: number, endOffset: number) => void;
+	/** Simulate a keydown event */
+	pressKey: (key: string, modifiers?: { ctrl?: boolean; shift?: boolean; alt?: boolean; meta?: boolean }) => void;
+	/** Type text at current cursor position */
+	type: (text: string) => void;
+	/** Get block element by index */
+	getBlock: (index: number) => Element | null;
+	/** Get all block elements */
+	getBlocks: () => Element[];
+	/** Get the contentRef as a Vue ref (for composables) */
+	contentRef: ReturnType<typeof ref<HTMLElement | null>>;
+	/** Cleanup function */
+	destroy: () => void;
+}
+
+/**
+ * Find a text node at a given offset within an element's text content.
+ * Returns the text node and the offset within that node.
+ */
+function findTextNodeAtOffset(element: Element, targetOffset: number): { node: Text; offset: number } | null {
+	let currentOffset = 0;
+	const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+	let node: Text | null;
+	let lastNode: Text | null = null;
+
+	while ((node = walker.nextNode() as Text)) {
+		lastNode = node;
+		const nodeLength = node.textContent?.length || 0;
+		if (currentOffset + nodeLength >= targetOffset) {
+			return { node, offset: targetOffset - currentOffset };
+		}
+		currentOffset += nodeLength;
+	}
+
+	// If we're past the content, return end of last text node
+	if (lastNode) {
+		return { node: lastNode, offset: lastNode.textContent?.length || 0 };
+	}
+
+	return null;
+}
+
+/**
+ * Get the key code string for common keys
+ */
+function getKeyCode(key: string): string {
+	const keyCodes: Record<string, string> = {
+		'Enter': 'Enter',
+		'Backspace': 'Backspace',
+		'Delete': 'Delete',
+		'Tab': 'Tab',
+		'Escape': 'Escape',
+		'ArrowUp': 'ArrowUp',
+		'ArrowDown': 'ArrowDown',
+		'ArrowLeft': 'ArrowLeft',
+		'ArrowRight': 'ArrowRight',
+		' ': 'Space',
+	};
+
+	if (keyCodes[key]) {
+		return keyCodes[key];
+	}
+
+	// For single letters, use KeyX format
+	if (key.length === 1 && /[a-zA-Z]/.test(key)) {
+		return `Key${key.toUpperCase()}`;
+	}
+
+	// For digits
+	if (key.length === 1 && /[0-9]/.test(key)) {
+		return `Digit${key}`;
+	}
+
+	return key;
+}
+
+/**
+ * Create a test editor with initial HTML content
+ */
+export function createTestEditor(initialHtml: string): TestEditorResult {
+	// Create container
+	const container = document.createElement('div');
+	container.setAttribute('contenteditable', 'true');
+	container.innerHTML = initialHtml.trim();
+	document.body.appendChild(container);
+
+	// Create Vue ref for composables
+	const contentRef = ref<HTMLElement | null>(container);
+
+	function getHtml(): string {
+		return container.innerHTML;
+	}
+
+	function getMarkdown(): string {
+		return htmlToMarkdown(container);
+	}
+
+	function getCursorPosition(): { node: Node | null; offset: number } {
+		const sel = window.getSelection();
+		if (!sel || sel.rangeCount === 0) {
+			return { node: null, offset: 0 };
+		}
+		const range = sel.getRangeAt(0);
+		return { node: range.startContainer, offset: range.startOffset };
+	}
+
+	function getBlock(index: number): Element | null {
+		const blocks = Array.from(container.children);
+		return blocks[index] || null;
+	}
+
+	function getBlocks(): Element[] {
+		return Array.from(container.children);
+	}
+
+	function getCursorOffsetInBlock(blockIndex: number): number {
+		const block = getBlock(blockIndex);
+		if (!block) return -1;
+
+		const sel = window.getSelection();
+		if (!sel || sel.rangeCount === 0) return -1;
+
+		const range = sel.getRangeAt(0);
+		if (!block.contains(range.startContainer)) return -1;
+
+		// Calculate offset within block's text content
+		const preRange = document.createRange();
+		preRange.selectNodeContents(block);
+		preRange.setEnd(range.startContainer, range.startOffset);
+		return preRange.toString().length;
+	}
+
+	function setCursor(node: Node, offset: number): void {
+		const range = document.createRange();
+		range.setStart(node, offset);
+		range.collapse(true);
+
+		const sel = window.getSelection();
+		sel?.removeAllRanges();
+		sel?.addRange(range);
+	}
+
+	function setCursorInBlock(blockIndex: number, offset: number): void {
+		const block = getBlock(blockIndex);
+		if (!block) return;
+
+		const result = findTextNodeAtOffset(block, offset);
+		if (result) {
+			setCursor(result.node, result.offset);
+		}
+	}
+
+	function selectRange(startNode: Node, startOffset: number, endNode: Node, endOffset: number): void {
+		const range = document.createRange();
+		range.setStart(startNode, startOffset);
+		range.setEnd(endNode, endOffset);
+
+		const sel = window.getSelection();
+		sel?.removeAllRanges();
+		sel?.addRange(range);
+	}
+
+	function selectInBlock(blockIndex: number, startOffset: number, endOffset: number): void {
+		const block = getBlock(blockIndex);
+		if (!block) return;
+
+		const start = findTextNodeAtOffset(block, startOffset);
+		const end = findTextNodeAtOffset(block, endOffset);
+
+		if (start && end) {
+			selectRange(start.node, start.offset, end.node, end.offset);
+		}
+	}
+
+	function pressKey(key: string, modifiers: { ctrl?: boolean; shift?: boolean; alt?: boolean; meta?: boolean } = {}): void {
+		const event = new KeyboardEvent('keydown', {
+			key,
+			code: getKeyCode(key),
+			ctrlKey: modifiers.ctrl || false,
+			shiftKey: modifiers.shift || false,
+			altKey: modifiers.alt || false,
+			metaKey: modifiers.meta || false,
+			bubbles: true,
+			cancelable: true,
+		});
+
+		container.dispatchEvent(event);
+	}
+
+	function type(text: string): void {
+		// Insert text at cursor position
+		const sel = window.getSelection();
+		if (!sel || sel.rangeCount === 0) return;
+
+		const range = sel.getRangeAt(0);
+		range.deleteContents();
+
+		const textNode = document.createTextNode(text);
+		range.insertNode(textNode);
+
+		// Move cursor after inserted text
+		range.setStartAfter(textNode);
+		range.collapse(true);
+		sel.removeAllRanges();
+		sel.addRange(range);
+
+		// Dispatch input event
+		container.dispatchEvent(new InputEvent('input', { bubbles: true }));
+	}
+
+	function destroy(): void {
+		container.remove();
+	}
+
+	return {
+		container,
+		getHtml,
+		getMarkdown,
+		getCursorPosition,
+		getCursorOffsetInBlock,
+		setCursor,
+		setCursorInBlock,
+		selectRange,
+		selectInBlock,
+		pressKey,
+		type,
+		getBlock,
+		getBlocks,
+		contentRef,
+		destroy,
+	};
+}

package/src/test/helpers/index.ts

@@ -0,0 +1 @@
+export * from './editorTestUtils';

package/src/test/setup.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+
+describe('Vitest Setup', () => {
+  it('should run tests successfully', () => {
+    expect(true).toBe(true);
+  });
+
+  it('should have access to jsdom environment', () => {
+    expect(typeof window).toBe('object');
+    expect(typeof document).toBe('object');
+  });
+});

package/src/test/setup.ts

@@ -0,0 +1,12 @@
+import { vi } from 'vitest';
+
+// Mock window.getSelection for jsdom
+// jsdom's Selection API is limited, so we may need to enhance it
+if (typeof window !== 'undefined') {
+  // Ensure getSelection exists
+  if (!window.getSelection) {
+    window.getSelection = vi.fn(() => null);
+  }
+}
+
+// Global test utilities can be added here

package/vitest.config.ts

@@ -0,0 +1,19 @@
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    include: ['src/**/*.{test,spec}.{js,ts}'],
+    setupFiles: ['./src/test/setup.ts'],
+    root: fileURLToPath(new URL('./', import.meta.url)),
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});