quasar-ui-danx 0.4.99 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.99",
+  "version": "0.5.0",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -15,7 +15,9 @@
     "build:bundle": "vite build",
     "build": "yarn clean && yarn build:types && yarn build:bundle",
     "preview": "vite preview",
-    "postversion": "yarn build && npm publish && cd .. && git add ui && git commit -m \"v$npm_package_version\" && git tag \"v$npm_package_version\" && git push"
+    "publish:patch": "./scripts/publish.sh patch",
+    "publish:minor": "./scripts/publish.sh minor",
+    "publish:major": "./scripts/publish.sh major"
   },
   "repository": {
     "type": "git",

package/scripts/publish.sh

@@ -0,0 +1,76 @@
+#!/bin/bash
+set -e
+
+# NOTE: npm now requires granular tokens with 2FA, max 90-day lifetime
+# Classic tokens have been revoked. If auth fails, you'll need to:
+# 1. Run `npm login` to create a new granular token
+# 2. Complete 2FA verification
+# See: https://gh.io/all-npm-classic-tokens-revoked
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+echo -e "${YELLOW}Checking npm authentication...${NC}"
+
+# Check if logged in by trying to get current user
+if ! npm whoami &>/dev/null; then
+    echo -e "${RED}Not logged in to npm or token expired.${NC}"
+    echo -e "${YELLOW}Please log in to npm:${NC}"
+    npm login
+
+    # Verify login succeeded
+    if ! npm whoami &>/dev/null; then
+        echo -e "${RED}Login failed. Aborting.${NC}"
+        exit 1
+    fi
+fi
+
+CURRENT_USER=$(npm whoami)
+echo -e "${GREEN}Logged in as: ${CURRENT_USER}${NC}"
+
+# Get the version bump type (default to patch)
+BUMP_TYPE=${1:-patch}
+
+if [[ ! "$BUMP_TYPE" =~ ^(patch|minor|major)$ ]]; then
+    echo -e "${RED}Invalid version bump type: ${BUMP_TYPE}${NC}"
+    echo "Usage: ./scripts/publish.sh [patch|minor|major]"
+    exit 1
+fi
+
+echo -e "${YELLOW}Bumping version (${BUMP_TYPE})...${NC}"
+
+# Build first to catch any errors before version bump
+echo -e "${YELLOW}Building...${NC}"
+yarn build
+
+# Bump version (this updates package.json)
+npm version $BUMP_TYPE --no-git-tag-version
+
+# Get the new version
+NEW_VERSION=$(node -p "require('./package.json').version")
+echo -e "${GREEN}New version: ${NEW_VERSION}${NC}"
+
+# Publish to npm
+echo -e "${YELLOW}Publishing to npm...${NC}"
+if npm publish; then
+    echo -e "${GREEN}Published successfully!${NC}"
+
+    # Git operations
+    echo -e "${YELLOW}Committing and tagging...${NC}"
+    cd ..
+    git add ui
+    git commit -m "v${NEW_VERSION}"
+    git tag "v${NEW_VERSION}"
+    git push
+    git push --tags
+
+    echo -e "${GREEN}Done! Published v${NEW_VERSION}${NC}"
+else
+    echo -e "${RED}Publish failed!${NC}"
+    echo -e "${YELLOW}Rolling back version in package.json...${NC}"
+    git checkout package.json
+    exit 1
+fi

package/src/components/Utility/Code/MarkdownContent.vue

@@ -44,8 +44,29 @@
         <li
           v-for="(item, itemIndex) in token.items"
           :key="itemIndex"
-          v-html="parseInlineContent(item)"
-        />
+        >
+          <span v-html="parseInlineContent(item.content)" />
+          <template v-if="item.children && item.children.length > 0">
+            <template v-for="(child, childIndex) in item.children" :key="'child-' + childIndex">
+              <!-- Nested unordered list -->
+              <ul v-if="child.type === 'ul'">
+                <li
+                  v-for="(nestedItem, nestedIndex) in child.items"
+                  :key="nestedIndex"
+                  v-html="renderListItem(nestedItem)"
+                />
+              </ul>
+              <!-- Nested ordered list -->
+              <ol v-else-if="child.type === 'ol'" :start="child.start">
+                <li
+                  v-for="(nestedItem, nestedIndex) in child.items"
+                  :key="nestedIndex"
+                  v-html="renderListItem(nestedItem)"
+                />
+              </ol>
+            </template>
+          </template>
+        </li>
       </ul>
 
       <!-- Ordered lists -->
@@ -56,10 +77,86 @@
         <li
           v-for="(item, itemIndex) in token.items"
           :key="itemIndex"
-          v-html="parseInlineContent(item)"
-        />
+        >
+          <span v-html="parseInlineContent(item.content)" />
+          <template v-if="item.children && item.children.length > 0">
+            <template v-for="(child, childIndex) in item.children" :key="'child-' + childIndex">
+              <!-- Nested unordered list -->
+              <ul v-if="child.type === 'ul'">
+                <li
+                  v-for="(nestedItem, nestedIndex) in child.items"
+                  :key="nestedIndex"
+                  v-html="renderListItem(nestedItem)"
+                />
+              </ul>
+              <!-- Nested ordered list -->
+              <ol v-else-if="child.type === 'ol'" :start="child.start">
+                <li
+                  v-for="(nestedItem, nestedIndex) in child.items"
+                  :key="nestedIndex"
+                  v-html="renderListItem(nestedItem)"
+                />
+              </ol>
+            </template>
+          </template>
+        </li>
       </ol>
 
+      <!-- Task lists -->
+      <ul
+        v-else-if="token.type === 'task_list'"
+        class="task-list"
+      >
+        <li
+          v-for="(item, itemIndex) in token.items"
+          :key="itemIndex"
+          class="task-list-item"
+        >
+          <input
+            type="checkbox"
+            :checked="item.checked"
+            disabled
+          />
+          <span v-html="parseInlineContent(item.content)" />
+        </li>
+      </ul>
+
+      <!-- Tables -->
+      <table v-else-if="token.type === 'table'">
+        <thead>
+          <tr>
+            <th
+              v-for="(header, hIndex) in token.headers"
+              :key="hIndex"
+              :style="token.alignments[hIndex] ? { textAlign: token.alignments[hIndex] } : {}"
+              v-html="parseInlineContent(header)"
+            />
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, rIndex) in token.rows" :key="rIndex">
+            <td
+              v-for="(cell, cIndex) in row"
+              :key="cIndex"
+              :style="token.alignments[cIndex] ? { textAlign: token.alignments[cIndex] } : {}"
+              v-html="parseInlineContent(cell)"
+            />
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Definition lists -->
+      <dl v-else-if="token.type === 'dl'">
+        <template v-for="(item, itemIndex) in token.items" :key="itemIndex">
+          <dt v-html="parseInlineContent(item.term)" />
+          <dd
+            v-for="(def, defIndex) in item.definitions"
+            :key="'def-' + defIndex"
+            v-html="parseInlineContent(def)"
+          />
+        </template>
+      </dl>
+
       <!-- Horizontal rules -->
       <hr v-else-if="token.type === 'hr'" />
 
@@ -69,13 +166,30 @@
         v-html="parseInlineContent(token.content).replace(/\n/g, '<br />')"
       />
     </template>
+
+    <!-- Footnotes section -->
+    <section v-if="hasFootnotes" class="footnotes">
+      <hr />
+      <ol class="footnote-list">
+        <li
+          v-for="fn in sortedFootnotes"
+          :key="fn.id"
+          :id="'fn-' + fn.id"
+          class="footnote-item"
+        >
+          <span v-html="parseInlineContent(fn.content)" />
+          <a :href="'#fnref-' + fn.id" class="footnote-backref">&#8617;</a>
+        </li>
+      </ol>
+    </section>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, reactive } from "vue";
 import { parse as parseYAML, stringify as stringifyYAML } from "yaml";
-import { tokenizeBlocks, parseInline, renderMarkdown, BlockToken } from "../../../helpers/formats/renderMarkdown";
+import { tokenizeBlocks, parseInline, renderMarkdown, getFootnotes, resetParserState } from "../../../helpers/formats/markdown";
+import type { BlockToken, ListItem } from "../../../helpers/formats/markdown";
 import { highlightJSON, highlightYAML } from "../../../helpers/formats/highlightSyntax";
 import LanguageBadge from "./LanguageBadge.vue";
 
@@ -96,9 +210,30 @@ const convertedContent = reactive<Record<number, string>>({});
 // Tokenize the markdown content
 const tokens = computed<BlockToken[]>(() => {
   if (!props.content) return [];
+  // Reset parser state before tokenizing to clear refs from previous content
+  // This ensures link refs and footnotes are freshly parsed for this content
+  resetParserState();
   return tokenizeBlocks(props.content);
 });
 
+// Computed properties for footnotes
+// IMPORTANT: Access tokens.value to ensure tokenizeBlocks runs first,
+// which populates currentFootnotes and currentLinkRefs
+const footnotes = computed(() => {
+  // Force dependency on tokens - this ensures tokenizeBlocks has run
+  // and populated the module-level currentFootnotes before we read it
+  tokens.value;
+  return getFootnotes();
+});
+
+const hasFootnotes = computed(() => Object.keys(footnotes.value).length > 0);
+
+const sortedFootnotes = computed(() => {
+  return Object.entries(footnotes.value)
+    .sort((a, b) => a[1].index - b[1].index)
+    .map(([id, fn]) => ({ id, content: fn.content, index: fn.index }));
+});
+
 // Check if a language is toggleable (json or yaml)
 function isToggleableLanguage(language: string): boolean {
   if (!language) return false;
@@ -222,9 +357,28 @@ function parseInlineContent(text: string): string {
   return parseInline(text, true);
 }
 
+// Render a list item with potential nested children
+function renderListItem(item: ListItem): string {
+  let html = parseInline(item.content, true);
+  if (item.children && item.children.length > 0) {
+    for (const child of item.children) {
+      if (child.type === "ul") {
+        const items = child.items.map((i) => `<li>${renderListItem(i)}</li>`).join("");
+        html += `<ul>${items}</ul>`;
+      } else if (child.type === "ol") {
+        const items = child.items.map((i) => `<li>${renderListItem(i)}</li>`).join("");
+        const startAttr = child.start !== 1 ? ` start="${child.start}"` : "";
+        html += `<ol${startAttr}>${items}</ol>`;
+      }
+    }
+  }
+  return html;
+}
+
 // Render blockquote content (can contain nested markdown)
+// Use preserveState to keep link refs and footnotes from parent document
 function renderBlockquote(content: string): string {
-  return renderMarkdown(content);
+  return renderMarkdown(content, { preserveState: true });
 }
 </script>
 

package/src/helpers/formats/index.ts

@@ -2,5 +2,5 @@ export * from "./datetime";
 export * from "./highlightSyntax";
 export * from "./numbers";
 export * from "./parsers";
-export * from "./renderMarkdown";
+export * from "./markdown";
 export * from "./strings";

package/src/helpers/formats/markdown/escapeHtml.ts

@@ -0,0 +1,15 @@
+/**
+ * HTML entity escaping for XSS prevention
+ */
+
+/**
+ * Escape HTML entities to prevent XSS
+ */
+export function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, "&")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#039;");
+}

package/src/helpers/formats/markdown/escapeSequences.ts

@@ -0,0 +1,60 @@
+/**
+ * Markdown escape sequence handling
+ * Maps backslash-escaped characters to Unicode placeholders and back
+ * Using Private Use Area characters (U+E000-U+F8FF) to avoid conflicts
+ */
+
+/**
+ * Escape sequences mapping - character to Unicode placeholder
+ */
+export const ESCAPE_MAP: Record<string, string> = {
+	"\\*": "\uE000",
+	"\\_": "\uE001",
+	"\\~": "\uE002",
+	"\\`": "\uE003",
+	"\\[": "\uE004",
+	"\\]": "\uE005",
+	"\\#": "\uE006",
+	"\\&gt;": "\uE007", // Escaped > becomes &gt; after HTML escaping
+	"\\-": "\uE008",
+	"\\+": "\uE009",
+	"\\.": "\uE00A",
+	"\\!": "\uE00B",
+	"\\=": "\uE00C",
+	"\\^": "\uE00D"
+};
+
+/**
+ * Reverse mapping - placeholder back to literal character
+ * Generated from ESCAPE_MAP for DRY compliance
+ */
+export const UNESCAPE_MAP: Record<string, string> = Object.fromEntries(
+	Object.entries(ESCAPE_MAP).map(([escaped, placeholder]) => {
+		// Extract the literal character from the escape sequence
+		// "\\*" -> "*", "\\&gt;" -> "&gt;" (special case for HTML-escaped >)
+		const literal = escaped.startsWith("\\&") ? escaped.slice(1) : escaped.slice(1);
+		return [placeholder, literal];
+	})
+);
+
+/**
+ * Apply escape sequences - convert backslash-escaped characters to placeholders
+ */
+export function applyEscapes(text: string): string {
+	let result = text;
+	for (const [pattern, placeholder] of Object.entries(ESCAPE_MAP)) {
+		result = result.split(pattern).join(placeholder);
+	}
+	return result;
+}
+
+/**
+ * Revert escape sequences - convert placeholders back to literal characters
+ */
+export function revertEscapes(text: string): string {
+	let result = text;
+	for (const [placeholder, literal] of Object.entries(UNESCAPE_MAP)) {
+		result = result.split(placeholder).join(literal);
+	}
+	return result;
+}

package/src/helpers/formats/markdown/index.ts

@@ -0,0 +1,85 @@
+/**
+ * Lightweight markdown to HTML renderer
+ * Zero external dependencies, XSS-safe by default
+ *
+ * Supports:
+ * - Headings (# through ###### and setext-style with === or ---)
+ * - Paragraphs (double newlines)
+ * - Code blocks (```language ... ``` and indented with 4 spaces or tab)
+ * - Blockquotes (> text)
+ * - Unordered lists (-, *, +)
+ * - Ordered lists (1., 2., etc.)
+ * - Task lists (- [ ] unchecked, - [x] checked)
+ * - Definition lists (Term followed by : Definition)
+ * - Tables (| col | col | with alignment support)
+ * - Horizontal rules (---, ***, ___)
+ * - Bold (**text** or __text__)
+ * - Italic (*text* or _text_)
+ * - Bold+Italic (***text***)
+ * - Inline code (`code`)
+ * - Links [text](url)
+ * - Reference-style links ([text][ref], [text][], [ref] with [ref]: url definitions)
+ * - Images ![alt](url)
+ * - Escape sequences (\* \_ \~ etc.)
+ * - Hard line breaks (two trailing spaces)
+ * - Autolinks (<https://...> and <email@...>)
+ * - Strikethrough (~~text~~)
+ * - Highlight (==text==)
+ * - Superscript (X^2^)
+ * - Subscript (H~2~O)
+ * - Footnotes ([^id] with [^id]: content definitions)
+ */
+
+// Re-export types
+export type {
+	MarkdownRenderOptions,
+	LinkReference,
+	FootnoteDefinition,
+	ListItem,
+	BlockToken,
+	TableAlignment,
+	ParseResult
+} from "./types";
+
+// Re-export state management
+export { getFootnotes, resetParserState } from "./state";
+
+// Re-export parsers
+export { parseInline } from "./parseInline";
+export { tokenizeBlocks } from "./tokenize";
+
+// Re-export renderers
+export { renderTokens } from "./render";
+
+// Import for main function
+import type { MarkdownRenderOptions } from "./types";
+import { getFootnotes, resetParserState } from "./state";
+import { tokenizeBlocks } from "./tokenize";
+import { renderTokens } from "./render";
+import { renderFootnotesSection } from "./render/renderFootnotes";
+
+/**
+ * Convert markdown text to HTML
+ */
+export function renderMarkdown(markdown: string, options?: MarkdownRenderOptions): string {
+	if (!markdown) return "";
+
+	const sanitize = options?.sanitize ?? true;
+	const preserveState = options?.preserveState ?? false;
+
+	// Reset state for fresh document parse (unless preserving for nested rendering)
+	if (!preserveState) {
+		resetParserState();
+	}
+
+	const tokens = tokenizeBlocks(markdown);
+	let html = renderTokens(tokens, sanitize);
+
+	// Append footnotes section if any exist (only for top-level rendering)
+	const footnotes = getFootnotes();
+	if (!preserveState && Object.keys(footnotes).length > 0) {
+		html += renderFootnotesSection(footnotes, sanitize);
+	}
+
+	return html;
+}

package/src/helpers/formats/markdown/parseInline.ts

@@ -0,0 +1,124 @@
+/**
+ * Inline markdown element parser
+ * Handles: bold, italic, strikethrough, highlight, superscript, subscript,
+ * links, images, reference-style links, footnotes, autolinks, code
+ */
+
+import { escapeHtml } from "./escapeHtml";
+import { applyEscapes, revertEscapes } from "./escapeSequences";
+import { getLinkRefs, getFootnotes } from "./state";
+
+/**
+ * Parse inline markdown elements within text
+ * Order matters: more specific patterns first
+ */
+export function parseInline(text: string, sanitize: boolean = true): string {
+	if (!text) return "";
+
+	const currentLinkRefs = getLinkRefs();
+	const currentFootnotes = getFootnotes();
+
+	// Escape HTML if sanitizing (before applying markdown)
+	let result = sanitize ? escapeHtml(text) : text;
+
+	// 1. ESCAPE SEQUENCES - Pre-process backslash escapes to placeholders
+	// Must be first so escaped characters aren't treated as markdown
+	result = applyEscapes(result);
+
+	// 2. HARD LINE BREAKS - Two trailing spaces + newline becomes <br />
+	result = result.replace(/ {2,}\n/g, "<br />\n");
+
+	// 3. AUTOLINKS - Must be before regular link parsing
+	// URL autolinks: <https://example.com>
+	result = result.replace(/&lt;(https?:\/\/[^&]+)&gt;/g, '<a href="$1">$1</a>');
+	// Email autolinks: <user@example.com>
+	result = result.replace(/&lt;([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})&gt;/g, '<a href="mailto:$1">$1</a>');
+
+	// 4. FOOTNOTE REFERENCES: [^id]
+	// Must be before regular link/image parsing to avoid conflicts
+	result = result.replace(/\[\^([^\]]+)\]/g, (match, fnId) => {
+		const fn = currentFootnotes[fnId];
+		if (fn) {
+			return `<sup class="footnote-ref"><a href="#fn-${fnId}" id="fnref-${fnId}">[${fn.index}]</a></sup>`;
+		}
+		return match; // Keep original if footnote not defined
+	});
+
+	// 5. IMAGES: ![alt](url) - must be before links
+	result = result.replace(
+		/!\[([^\]]*)\]\(([^)]+)\)/g,
+		'<img src="$2" alt="$1" />'
+	);
+
+	// 6. INLINE LINKS: [text](url)
+	result = result.replace(
+		/\[([^\]]+)\]\(([^)]+)\)/g,
+		'<a href="$2">$1</a>'
+	);
+
+	// 7. REFERENCE-STYLE LINKS - Process after regular links
+	// Full reference: [text][ref-id]
+	result = result.replace(/\[([^\]]+)\]\[([^\]]+)\]/g, (match, text, refId) => {
+		const ref = currentLinkRefs[refId.toLowerCase()];
+		if (ref) {
+			const title = ref.title ? ` title="${escapeHtml(ref.title)}"` : "";
+			return `<a href="${ref.url}"${title}>${text}</a>`;
+		}
+		return match; // Keep original if ref not found
+	});
+
+	// Collapsed reference: [text][]
+	result = result.replace(/\[([^\]]+)\]\[\]/g, (match, text) => {
+		const ref = currentLinkRefs[text.toLowerCase()];
+		if (ref) {
+			const title = ref.title ? ` title="${escapeHtml(ref.title)}"` : "";
+			return `<a href="${ref.url}"${title}>${text}</a>`;
+		}
+		return match;
+	});
+
+	// Shortcut reference: [ref] alone (must not match [text](url) or [text][ref])
+	// Only match [word] not followed by ( or [
+	result = result.replace(/\[([^\]]+)\](?!\(|\[)/g, (match, text) => {
+		const ref = currentLinkRefs[text.toLowerCase()];
+		if (ref) {
+			const title = ref.title ? ` title="${escapeHtml(ref.title)}"` : "";
+			return `<a href="${ref.url}"${title}>${text}</a>`;
+		}
+		return match;
+	});
+
+	// 8. INLINE CODE: `code`
+	result = result.replace(/`([^`]+)`/g, "<code>$1</code>");
+
+	// 9. STRIKETHROUGH: ~~text~~ - Must be before subscript (single tilde)
+	result = result.replace(/~~([^~]+)~~/g, "<del>$1</del>");
+
+	// 10. HIGHLIGHT: ==text==
+	result = result.replace(/==([^=]+)==/g, "<mark>$1</mark>");
+
+	// 11. SUPERSCRIPT: X^2^ - Must be before subscript
+	result = result.replace(/\^([^\^]+)\^/g, "<sup>$1</sup>");
+
+	// 12. SUBSCRIPT: H~2~O - Single tilde, use negative lookbehind/lookahead to avoid ~~
+	result = result.replace(/(?<!~)~([^~]+)~(?!~)/g, "<sub>$1</sub>");
+
+	// 13. BOLD + ITALIC: ***text*** or ___text___
+	result = result.replace(/\*\*\*([^*]+)\*\*\*/g, "<strong><em>$1</em></strong>");
+	result = result.replace(/___([^_]+)___/g, "<strong><em>$1</em></strong>");
+
+	// 14. BOLD: **text** or __text__
+	result = result.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+	result = result.replace(/__([^_]+)__/g, "<strong>$1</strong>");
+
+	// 15. 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");
+
+	// LAST: Restore escaped characters from placeholders to literals
+	result = revertEscapes(result);
+
+	return result;
+}