quasar-ui-danx 0.5.0 → 0.5.2

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

@@ -1,5 +1,5 @@
 // Code Viewer Theme
-// Dark theme with syntax highlighting for JSON/YAML
+// Supports dark (default) and light themes with syntax highlighting for JSON/YAML
 
 .dx-code-viewer {
   width: 100%;
@@ -134,6 +134,58 @@
     color: #808080;
   }
 
+  // Comments - Muted green
+  .syntax-comment {
+    color: #6a9955;
+  }
+
+  // CSS/HTML specific
+  .syntax-selector {
+    color: #d7ba7d; // Gold/yellow
+  }
+
+  .syntax-property {
+    color: #9cdcfe; // Light blue (same as key)
+  }
+
+  .syntax-value {
+    color: #ce9178; // Orange (same as number)
+  }
+
+  .syntax-at-rule {
+    color: #c586c0; // Purple/magenta
+  }
+
+  // JavaScript specific
+  .syntax-keyword {
+    color: #569cd6; // Blue
+  }
+
+  .syntax-operator {
+    color: #d4d4d4; // Gray/white
+  }
+
+  .syntax-regex {
+    color: #d16969; // Red
+  }
+
+  .syntax-template {
+    color: #ce9178; // Orange (same as string/number)
+  }
+
+  // HTML specific
+  .syntax-tag {
+    color: #569cd6; // Blue
+  }
+
+  .syntax-attribute {
+    color: #9cdcfe; // Light blue
+  }
+
+  .syntax-doctype {
+    color: #808080; // Gray
+  }
+
 
   // ==========================================
   // Editable mode (contenteditable)
@@ -155,4 +207,208 @@
     // Caret color
     caret-color: #d4d4d4;
   }
+
+  // ==========================================
+  // LIGHT THEME VARIANT
+  // ==========================================
+  &.theme-light {
+    .code-collapsed {
+      background-color: #f5f5f5;
+
+      &:hover {
+        background-color: #ebebeb;
+      }
+
+      .code-collapsed-preview {
+        color: #333333;
+      }
+    }
+
+    .code-content {
+      background-color: #f8fafc;
+      color: #1e293b;
+      border: 1px solid #e2e8f0;
+    }
+
+    .code-footer {
+      background-color: #f1f5f9;
+      border-top: 1px solid #e2e8f0;
+
+      &.has-error {
+        background-color: #fee2e2;
+        border-top: 1px solid #ef4444;
+      }
+    }
+
+    .language-badge {
+      background-color: #e2e8f0;
+      color: #64748b;
+    }
+
+    // Light theme syntax highlighting
+    .syntax-key {
+      color: #0369a1;
+    }
+
+    .syntax-string {
+      color: #15803d;
+    }
+
+    .syntax-number {
+      color: #c2410c;
+    }
+
+    .syntax-boolean {
+      color: #7c3aed;
+    }
+
+    .syntax-null {
+      color: #7c3aed;
+    }
+
+    .syntax-punctuation {
+      color: #64748b;
+    }
+
+    // Light theme - Comments
+    .syntax-comment {
+      color: #6a9955;
+    }
+
+    // Light theme - CSS/HTML specific
+    .syntax-selector {
+      color: #b45309; // Amber/brown
+    }
+
+    .syntax-property {
+      color: #0369a1; // Blue (same as key)
+    }
+
+    .syntax-value {
+      color: #c2410c; // Orange (same as number)
+    }
+
+    .syntax-at-rule {
+      color: #7c3aed; // Purple
+    }
+
+    // Light theme - JavaScript specific
+    .syntax-keyword {
+      color: #0369a1; // Blue
+    }
+
+    .syntax-operator {
+      color: #64748b; // Gray
+    }
+
+    .syntax-regex {
+      color: #be123c; // Red/rose
+    }
+
+    .syntax-template {
+      color: #c2410c; // Orange
+    }
+
+    // Light theme - HTML specific
+    .syntax-tag {
+      color: #0369a1; // Blue
+    }
+
+    .syntax-attribute {
+      color: #0891b2; // Cyan
+    }
+
+    .syntax-doctype {
+      color: #64748b; // Gray
+    }
+
+    .code-content.is-editable {
+      caret-color: #1e293b;
+
+      &:focus {
+        border-color: rgba(14, 165, 233, 0.6);
+      }
+
+      &:hover:not(:focus) {
+        border-color: rgba(14, 165, 233, 0.3);
+      }
+    }
+
+    // Light theme - Language badge component overrides
+    .dx-language-badge-container {
+      // Container needs no background changes
+    }
+
+    .dx-language-badge {
+      background: rgba(0, 0, 0, 0.08);
+      color: #64748b;
+
+      &.is-active {
+        background: rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .dx-language-option {
+      background: rgba(0, 0, 0, 0.06);
+      color: #64748b;
+      border-right: 1px solid rgba(0, 0, 0, 0.1);
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.12);
+        color: #1e293b;
+      }
+    }
+
+    .dx-language-search-trigger {
+      // Inherits from dx-language-option
+    }
+
+    .dx-language-search-panel {
+      background: #f8fafc;
+      border: 1px solid #e2e8f0;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .dx-language-search-input {
+      background: #f1f5f9;
+      border-bottom: 1px solid #e2e8f0;
+      color: #1e293b;
+
+      &::placeholder {
+        color: #94a3b8;
+      }
+
+      &:focus {
+        background: #e2e8f0;
+      }
+    }
+
+    .dx-language-search-list {
+      &::-webkit-scrollbar-track {
+        background: #f1f5f9;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #cbd5e1;
+
+        &:hover {
+          background: #94a3b8;
+        }
+      }
+    }
+
+    .dx-language-search-item {
+      color: #64748b;
+
+      &:hover,
+      &.is-selected {
+        background: #e2e8f0;
+        color: #1e293b;
+      }
+    }
+
+    .dx-language-search-empty {
+      color: #94a3b8;
+    }
+  }
 }

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

@@ -1,10 +1,10 @@
-@import "action-table";
-@import "buttons";
-@import "carousels";
-@import "code";
-@import "dialogs";
-@import "forms";
-@import "markdown";
-@import "panels";
-@import "sidebar";
-@import "toolbar";
+@use "action-table";
+@use "buttons";
+@use "carousels";
+@use "code";
+@use "dialogs";
+@use "forms";
+@use "markdown";
+@use "panels";
+@use "sidebar";
+@use "toolbar";

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

@@ -238,4 +238,63 @@
       text-decoration: none;
     }
   }
+
+  // ==========================================
+  // LIGHT THEME VARIANT
+  // ==========================================
+  &.theme-light {
+    color: #1e293b;
+
+    // Inline code - light theme
+    code {
+      background: #f1f5f9;
+      color: #0f172a;
+    }
+
+    // Code blocks - light theme
+    pre {
+      background: #f8fafc;
+      border: 1px solid #e2e8f0;
+
+      code {
+        background: transparent;
+      }
+    }
+
+    // Blockquotes - light theme
+    blockquote {
+      border-left-color: #cbd5e1;
+      color: #475569;
+    }
+
+    // Links - light theme
+    a {
+      color: #0369a1;
+    }
+
+    // Horizontal rules - light theme
+    hr {
+      border-top-color: #e2e8f0;
+    }
+
+    // Tables - light theme
+    table {
+      th, td {
+        border-color: #e2e8f0;
+      }
+
+      th {
+        background: #f1f5f9;
+      }
+
+      tr:nth-child(even) {
+        background: #f8fafc;
+      }
+    }
+
+    // Highlight - light theme
+    mark {
+      background: rgba(250, 204, 21, 0.5);
+    }
+  }
 }

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