quasar-ui-danx 0.4.94 → 0.4.99

package/src/helpers/formats/renderMarkdown.ts

@@ -0,0 +1,338 @@
+/**
+ * Lightweight markdown to HTML renderer
+ * Zero external dependencies, XSS-safe by default
+ */
+
+export interface MarkdownRenderOptions {
+	sanitize?: boolean; // XSS protection (default: true)
+}
+
+/**
+ * Escape HTML entities to prevent XSS
+ */
+function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#039;");
+}
+
+/**
+ * Token types for block-level parsing
+ */
+export type BlockToken =
+	| { type: "heading"; level: number; content: string }
+	| { type: "code_block"; language: string; content: string }
+	| { type: "blockquote"; content: string }
+	| { type: "ul"; items: string[] }
+	| { type: "ol"; items: string[]; start: number }
+	| { type: "hr" }
+	| { type: "paragraph"; content: string };
+
+/**
+ * Parse inline markdown elements within text
+ * Order matters: more specific patterns first
+ */
+export function parseInline(text: string, sanitize: boolean = true): string {
+	if (!text) return "";
+
+	// Escape HTML if sanitizing (before applying markdown)
+	let result = sanitize ? escapeHtml(text) : text;
+
+	// Images: ![alt](url) - must be before links
+	result = result.replace(
+		/!\[([^\]]*)\]\(([^)]+)\)/g,
+		'<img src="$2" alt="$1" />'
+	);
+
+	// Links: [text](url)
+	result = result.replace(
+		/\[([^\]]+)\]\(([^)]+)\)/g,
+		'<a href="$2">$1</a>'
+	);
+
+	// Inline code: `code` (escape the content again if already escaped)
+	result = result.replace(/`([^`]+)`/g, "<code>$1</code>");
+
+	// Bold + Italic: ***text*** or ___text___
+	result = result.replace(/\*\*\*([^*]+)\*\*\*/g, "<strong><em>$1</em></strong>");
+	result = result.replace(/___([^_]+)___/g, "<strong><em>$1</em></strong>");
+
+	// Bold: **text** or __text__
+	result = result.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+	result = result.replace(/__([^_]+)__/g, "<strong>$1</strong>");
+
+	// Italic: *text* or _text_ (but not inside words for underscores)
+	// For asterisks, match any single asterisk pairs
+	result = result.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+	// For underscores, only match at word boundaries
+	result = result.replace(/(^|[^a-zA-Z0-9])_([^_]+)_([^a-zA-Z0-9]|$)/g, "$1<em>$2</em>$3");
+
+	return result;
+}
+
+/**
+ * Tokenize markdown into block-level elements
+ */
+export function tokenizeBlocks(markdown: string): BlockToken[] {
+	const tokens: BlockToken[] = [];
+	const lines = markdown.split("\n");
+	let i = 0;
+
+	while (i < lines.length) {
+		const line = lines[i];
+		const trimmedLine = line.trim();
+
+		// Skip empty lines between blocks
+		if (!trimmedLine) {
+			i++;
+			continue;
+		}
+
+		// Code blocks: ```language ... ```
+		if (trimmedLine.startsWith("```")) {
+			const language = trimmedLine.slice(3).trim();
+			const contentLines: string[] = [];
+			i++;
+
+			while (i < lines.length && !lines[i].trim().startsWith("```")) {
+				contentLines.push(lines[i]);
+				i++;
+			}
+
+			tokens.push({
+				type: "code_block",
+				language,
+				content: contentLines.join("\n")
+			});
+
+			// Skip closing ```
+			if (i < lines.length) i++;
+			continue;
+		}
+
+		// Headings: # through ######
+		const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+		if (headingMatch) {
+			tokens.push({
+				type: "heading",
+				level: headingMatch[1].length,
+				content: headingMatch[2]
+			});
+			i++;
+			continue;
+		}
+
+		// Horizontal rules: ---, ***, ___
+		if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmedLine)) {
+			tokens.push({ type: "hr" });
+			i++;
+			continue;
+		}
+
+		// Blockquotes: > text
+		if (trimmedLine.startsWith(">")) {
+			const quoteLines: string[] = [];
+
+			while (i < lines.length && lines[i].trim().startsWith(">")) {
+				// Remove the leading > and optional space
+				quoteLines.push(lines[i].trim().replace(/^>\s?/, ""));
+				i++;
+			}
+
+			tokens.push({
+				type: "blockquote",
+				content: quoteLines.join("\n")
+			});
+			continue;
+		}
+
+		// Unordered lists: -, *, +
+		if (/^[-*+]\s+/.test(trimmedLine)) {
+			const items: string[] = [];
+
+			while (i < lines.length) {
+				const listLine = lines[i].trim();
+				const listMatch = listLine.match(/^[-*+]\s+(.+)$/);
+
+				if (listMatch) {
+					items.push(listMatch[1]);
+					i++;
+				} else if (listLine === "") {
+					// Empty line might end the list or just be spacing
+					i++;
+					// Check if next non-empty line continues the list
+					const nextNonEmpty = lines.slice(i).find((l) => l.trim() !== "");
+					if (!nextNonEmpty || !/^[-*+]\s+/.test(nextNonEmpty.trim())) {
+						break;
+					}
+				} else {
+					break;
+				}
+			}
+
+			tokens.push({ type: "ul", items });
+			continue;
+		}
+
+		// Ordered lists: 1., 2., etc.
+		const orderedMatch = trimmedLine.match(/^(\d+)\.\s+(.+)$/);
+		if (orderedMatch) {
+			const items: string[] = [];
+			const startNum = parseInt(orderedMatch[1], 10);
+
+			while (i < lines.length) {
+				const listLine = lines[i].trim();
+				const listMatch = listLine.match(/^\d+\.\s+(.+)$/);
+
+				if (listMatch) {
+					items.push(listMatch[1]);
+					i++;
+				} else if (listLine === "") {
+					i++;
+					// Check if next non-empty line continues the list
+					const nextNonEmpty = lines.slice(i).find((l) => l.trim() !== "");
+					if (!nextNonEmpty || !/^\d+\.\s+/.test(nextNonEmpty.trim())) {
+						break;
+					}
+				} else {
+					break;
+				}
+			}
+
+			tokens.push({ type: "ol", items, start: startNum });
+			continue;
+		}
+
+		// Paragraph: collect consecutive non-empty lines
+		const paragraphLines: string[] = [];
+
+		while (i < lines.length) {
+			const pLine = lines[i];
+			const pTrimmed = pLine.trim();
+
+			// Stop on empty line or block-level element
+			if (!pTrimmed) {
+				i++;
+				break;
+			}
+
+			// Check for block-level starters
+			if (
+				pTrimmed.startsWith("#") ||
+				pTrimmed.startsWith("```") ||
+				pTrimmed.startsWith(">") ||
+				/^[-*+]\s+/.test(pTrimmed) ||
+				/^\d+\.\s+/.test(pTrimmed) ||
+				/^(-{3,}|\*{3,}|_{3,})$/.test(pTrimmed)
+			) {
+				break;
+			}
+
+			paragraphLines.push(pLine);
+			i++;
+		}
+
+		if (paragraphLines.length > 0) {
+			tokens.push({
+				type: "paragraph",
+				content: paragraphLines.join("\n")
+			});
+		}
+	}
+
+	return tokens;
+}
+
+/**
+ * Render tokens to HTML
+ */
+function renderTokens(tokens: BlockToken[], sanitize: boolean): string {
+	const htmlParts: string[] = [];
+
+	for (const token of tokens) {
+		switch (token.type) {
+			case "heading": {
+				const content = parseInline(token.content, sanitize);
+				htmlParts.push(`<h${token.level}>${content}</h${token.level}>`);
+				break;
+			}
+
+			case "code_block": {
+				// Always escape code block content for safety
+				const escapedContent = escapeHtml(token.content);
+				const langAttr = token.language ? ` class="language-${escapeHtml(token.language)}"` : "";
+				htmlParts.push(`<pre><code${langAttr}>${escapedContent}</code></pre>`);
+				break;
+			}
+
+			case "blockquote": {
+				// Recursively parse blockquote content
+				const innerTokens = tokenizeBlocks(token.content);
+				const innerHtml = renderTokens(innerTokens, sanitize);
+				htmlParts.push(`<blockquote>${innerHtml}</blockquote>`);
+				break;
+			}
+
+			case "ul": {
+				const items = token.items
+					.map((item) => `<li>${parseInline(item, sanitize)}</li>`)
+					.join("");
+				htmlParts.push(`<ul>${items}</ul>`);
+				break;
+			}
+
+			case "ol": {
+				const items = token.items
+					.map((item) => `<li>${parseInline(item, sanitize)}</li>`)
+					.join("");
+				const startAttr = token.start !== 1 ? ` start="${token.start}"` : "";
+				htmlParts.push(`<ol${startAttr}>${items}</ol>`);
+				break;
+			}
+
+			case "hr": {
+				htmlParts.push("<hr />");
+				break;
+			}
+
+			case "paragraph": {
+				const content = parseInline(token.content, sanitize);
+				// Convert single newlines to <br> within paragraphs
+				const withBreaks = content.replace(/\n/g, "<br />");
+				htmlParts.push(`<p>${withBreaks}</p>`);
+				break;
+			}
+		}
+	}
+
+	return htmlParts.join("\n");
+}
+
+/**
+ * Convert markdown text to HTML
+ *
+ * Supports:
+ * - Headings (# through ######)
+ * - Paragraphs (double newlines)
+ * - Code blocks (```language ... ```)
+ * - Blockquotes (> text)
+ * - Unordered lists (-, *, +)
+ * - Ordered lists (1., 2., etc.)
+ * - Horizontal rules (---, ***, ___)
+ * - Bold (**text** or __text__)
+ * - Italic (*text* or _text_)
+ * - Bold+Italic (***text***)
+ * - Inline code (`code`)
+ * - Links [text](url)
+ * - Images ![alt](url)
+ */
+export function renderMarkdown(markdown: string, options?: MarkdownRenderOptions): string {
+	if (!markdown) return "";
+
+	const sanitize = options?.sanitize ?? true;
+	const tokens = tokenizeBlocks(markdown);
+	return renderTokens(tokens, sanitize);
+}

package/src/helpers/objectStore.ts

@@ -25,7 +25,12 @@ export function storeObject<T extends TypedObject>(newObject: T, recentlyStoredO
 
 	const id = newObject?.id || newObject?.name;
 	const type = newObject?.__type;
-	if (!id || !type) return shallowReactive(newObject);
+	if (!id || !type) {
+		// Still process children to store any nested TypedObjects
+		const reactiveObject = shallowReactive(newObject);
+		storeObjectChildren(newObject, recentlyStoredObjects, reactiveObject);
+		return reactiveObject;
+	}
 
 	if (!newObject.__id) {
 		newObject.__id = uid();
@@ -88,7 +93,7 @@ function storeObjectChildren<T extends TypedObject>(object: T, recentlyStoredObj
 	applyToObject = applyToObject || object;
 	for (const key of Object.keys(object)) {
 		const value = object[key];
-		if (Array.isArray(value) && value.length > 0) {
+		if (Array.isArray(value)) {
 			for (const index in value) {
 				if (value[index] && typeof value[index] === "object") {
 					if (!applyToObject[key]) {
@@ -101,6 +106,9 @@ function storeObjectChildren<T extends TypedObject>(object: T, recentlyStoredObj
 		} else if (value?.__type) {
 			// @ts-expect-error __type is guaranteed to be set in this case
 			applyToObject[key] = storeObject(value as TypedObject, recentlyStoredObjects);
+		} else if (value && typeof value === "object") {
+			// Handle plain objects/dictionaries - recurse to find nested TypedObjects at any depth
+			storeObjectChildren(value, recentlyStoredObjects, applyToObject[key]);
 		}
 	}
 }

package/src/styles/danx.scss

@@ -1,3 +1,6 @@
+@import "themes/danx/scrollbar";
+@import "themes/danx/code";
+
 .dx-action-table {
 	.dx-column-shrink {
 		width: 1px;

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

@@ -0,0 +1,158 @@
+// Code Viewer Theme
+// Dark theme with syntax highlighting for JSON/YAML
+
+.dx-code-viewer {
+  width: 100%;
+  height: 100%;
+
+  // ==========================================
+  // Collapsible mode
+  // ==========================================
+  &.is-collapsed {
+    height: auto;
+  }
+
+  // Collapsed view - inline preview
+  .code-collapsed {
+    background-color: #1e1e1e;
+    border-radius: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    font-family: 'Consolas', 'Monaco', 'Menlo', 'Ubuntu Mono', 'source-code-pro', monospace;
+    font-size: 0.875rem;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: #252526;
+    }
+
+    .code-collapsed-preview {
+      color: #d4d4d4;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  // Collapse toggle button in expanded view
+  .collapse-toggle {
+    transition: color 0.15s ease;
+  }
+
+  // Clickable header area to collapse when expanded
+  .collapse-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1.5rem;
+    cursor: pointer;
+    z-index: 5;
+  }
+
+  // Code content area - the main display
+  .code-content {
+    // When collapsible, add padding for the collapse toggle button
+    &.is-collapsible {
+      padding-top: 1rem;
+      padding-left: 1rem;
+    }
+
+    background-color: #1e1e1e;
+    color: #d4d4d4;
+    width: 100%;
+    min-height: 0;
+    font-family: 'Consolas', 'Monaco', 'Menlo', 'Ubuntu Mono', 'source-code-pro', monospace;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    border-radius: 0.375rem 0.375rem 0 0;
+    padding: 1rem;
+    overflow: auto;
+    margin: 0;
+    box-sizing: border-box;
+
+    code {
+      white-space: pre-wrap;
+      word-break: break-word;
+      background: transparent;
+      color: inherit;
+    }
+  }
+
+  // Footer area
+  .code-footer {
+    background-color: #252526;
+    border-radius: 0 0 0.375rem 0.375rem;
+    padding: 0.25rem 0.5rem;
+    transition: background-color 0.2s ease;
+
+    &.has-error {
+      background-color: #5a1d1d;
+      border-top: 1px solid #be1100;
+    }
+  }
+
+  // Language badge
+  .language-badge {
+    background-color: #333333;
+    color: #808080;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.7em;
+    text-transform: uppercase;
+  }
+
+  // ==========================================
+  // Syntax highlighting classes
+  // ==========================================
+
+  // Keys (property names) - Light blue
+  .syntax-key {
+    color: #9cdcfe;
+  }
+
+  // Strings - Soft green
+  .syntax-string {
+    color: #9ae6b4;
+  }
+
+  // Numbers - Orange/salmon
+  .syntax-number {
+    color: #ce9178;
+  }
+
+  // Booleans - Blue
+  .syntax-boolean {
+    color: #569cd6;
+  }
+
+  // Null - Blue
+  .syntax-null {
+    color: #569cd6;
+  }
+
+  // Punctuation - Gray
+  .syntax-punctuation {
+    color: #808080;
+  }
+
+
+  // ==========================================
+  // Editable mode (contenteditable)
+  // ==========================================
+  .code-content.is-editable {
+    cursor: text;
+    outline: none;
+    border: 2px solid transparent;
+    transition: border-color 0.2s ease;
+
+    &:focus {
+      border-color: rgba(86, 156, 214, 0.6);
+    }
+
+    &:hover:not(:focus) {
+      border-color: rgba(86, 156, 214, 0.3);
+    }
+
+    // Caret color
+    caret-color: #d4d4d4;
+  }
+}

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

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

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

@@ -0,0 +1,145 @@
+// Markdown Content Theme
+// Styles for rendered markdown content
+
+.dx-markdown-content {
+  // Base styling
+  line-height: 1.6;
+  color: inherit;
+
+  // Headings
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    font-weight: 600;
+    line-height: 1.25;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h1 { font-size: 2em; }
+  h2 { font-size: 1.5em; }
+  h3 { font-size: 1.25em; }
+  h4 { font-size: 1em; }
+  h5 { font-size: 0.875em; }
+  h6 { font-size: 0.85em; }
+
+  // Paragraphs
+  p {
+    margin: 1em 0;
+
+    &:first-child { margin-top: 0; }
+    &:last-child { margin-bottom: 0; }
+  }
+
+  // Inline code
+  code {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-size: 0.9em;
+    font-family: 'Fira Code', 'Monaco', monospace;
+  }
+
+  // Code blocks
+  pre {
+    background: rgba(0, 0, 0, 0.3);
+    padding: 1em;
+    border-radius: 6px;
+    overflow-x: auto;
+    margin: 1em 0;
+
+    code {
+      background: transparent;
+      padding: 0;
+      font-size: 0.875em;
+    }
+  }
+
+  // Blockquotes
+  blockquote {
+    border-left: 4px solid rgba(255, 255, 255, 0.3);
+    margin: 1em 0;
+    padding: 0.5em 1em;
+    color: rgba(255, 255, 255, 0.7);
+
+    p:first-child { margin-top: 0; }
+    p:last-child { margin-bottom: 0; }
+  }
+
+  // Lists
+  ul, ol {
+    margin: 1em 0;
+    padding-left: 2em;
+  }
+
+  li {
+    margin: 0.25em 0;
+  }
+
+  ul {
+    list-style-type: disc;
+
+    ul {
+      list-style-type: circle;
+
+      ul {
+        list-style-type: square;
+      }
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  // Links
+  a {
+    color: #60a5fa; // blue-400
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  // Images
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  // Horizontal rules
+  hr {
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    margin: 2em 0;
+  }
+
+  // Bold and italic
+  strong { font-weight: 600; }
+  em { font-style: italic; }
+
+  // Tables
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1em 0;
+
+    th, td {
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      padding: 0.5em 1em;
+      text-align: left;
+    }
+
+    th {
+      background: rgba(255, 255, 255, 0.1);
+      font-weight: 600;
+    }
+
+    tr:nth-child(even) {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
+}