quasar-ui-danx 0.4.99 → 0.5.1

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/components/Utility/Code/index.ts

@@ -3,3 +3,6 @@ export { default as CodeViewerCollapsed } from "./CodeViewerCollapsed.vue";
 export { default as CodeViewerFooter } from "./CodeViewerFooter.vue";
 export { default as LanguageBadge } from "./LanguageBadge.vue";
 export { default as MarkdownContent } from "./MarkdownContent.vue";
+
+// Re-export Markdown editor components
+export * from "../Markdown";

package/src/components/Utility/Markdown/ContextMenu.vue

@@ -0,0 +1,314 @@
+<template>
+  <div
+    class="dx-context-menu-overlay"
+    @click.self="onClose"
+    @keydown.escape="onClose"
+  >
+    <div
+      ref="menuRef"
+      class="dx-context-menu"
+      :style="menuStyle"
+    >
+      <template v-for="(item, itemIndex) in items" :key="item.id">
+        <!-- Divider -->
+        <div v-if="item.divider" class="context-menu-divider" />
+
+        <!-- Regular menu item or submenu trigger -->
+        <template v-else>
+          <div
+            class="context-menu-item-wrapper"
+            @mouseenter="handleItemHover(item, itemIndex)"
+            @mouseleave="handleItemLeave"
+          >
+            <button
+              class="context-menu-item"
+              :class="{ disabled: item.disabled, 'has-children': item.children?.length }"
+              type="button"
+              :disabled="item.disabled"
+              @click="onItemClick(item)"
+            >
+              <span class="item-label">{{ item.label }}</span>
+              <span v-if="item.shortcut && !item.children" class="item-shortcut">{{ item.shortcut }}</span>
+              <span v-if="item.children?.length" class="item-chevron">&#9656;</span>
+            </button>
+
+            <!-- Nested submenu -->
+            <div
+              v-if="item.children?.length && activeSubmenuId === item.id"
+              ref="submenuRefs"
+              class="dx-context-submenu"
+              :class="{ 'open-left': submenuOpenLeft }"
+              :data-item-id="item.id"
+              @mouseenter="handleSubmenuEnter"
+              @mouseleave="handleSubmenuLeave"
+            >
+              <template v-for="child in item.children" :key="child.id">
+                <!-- Child divider -->
+                <div v-if="child.divider" class="context-menu-divider" />
+
+                <!-- Child item -->
+                <button
+                  v-else
+                  class="context-menu-item"
+                  :class="{ disabled: child.disabled }"
+                  type="button"
+                  :disabled="child.disabled"
+                  @click="onItemClick(child)"
+                >
+                  <span class="item-label">{{ child.label }}</span>
+                  <span v-if="child.shortcut" class="item-shortcut">{{ child.shortcut }}</span>
+                </button>
+              </template>
+            </div>
+          </div>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import type { ContextMenuItem } from "./types";
+import type { PopoverPosition } from "@/composables/markdown";
+
+export interface ContextMenuProps {
+  position: PopoverPosition;
+  items: ContextMenuItem[];
+}
+
+const props = defineProps<ContextMenuProps>();
+
+const emit = defineEmits<{
+  close: [];
+  action: [item: ContextMenuItem];
+}>();
+
+const menuRef = ref<HTMLElement | null>(null);
+const activeSubmenuId = ref<string | null>(null);
+const submenuOpenLeft = ref(false);
+let hoverTimeout: ReturnType<typeof setTimeout> | null = null;
+
+// Calculate menu position with viewport boundary detection
+const menuStyle = computed(() => {
+  const menuHeight = 400; // Approximate max height for nested menus
+  const menuWidth = 320; // Match CSS max-width
+  const padding = 10;
+
+  let top = props.position.y;
+  let left = props.position.x;
+
+  // Check if menu would extend below viewport
+  if (top + menuHeight > window.innerHeight - padding) {
+    // Position above the cursor
+    top = Math.max(padding, props.position.y - menuHeight);
+  }
+
+  // Ensure menu doesn't go off left edge
+  if (left < padding) {
+    left = padding;
+  }
+
+  // Ensure menu doesn't go off right edge
+  if (left + menuWidth > window.innerWidth - padding) {
+    left = window.innerWidth - menuWidth - padding;
+  }
+
+  // Determine if submenus should open to the left
+  // (if menu is positioned near right edge, submenus should open left)
+  submenuOpenLeft.value = left + menuWidth + menuWidth > window.innerWidth - padding;
+
+  return {
+    top: `${top}px`,
+    left: `${left}px`
+  };
+});
+
+function handleItemHover(item: ContextMenuItem, _index: number): void {
+  // Clear any pending timeout
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout);
+    hoverTimeout = null;
+  }
+
+  // If item has children, show submenu after a small delay
+  if (item.children?.length) {
+    hoverTimeout = setTimeout(() => {
+      activeSubmenuId.value = item.id;
+    }, 100);
+  } else {
+    // Immediately hide submenu for non-parent items
+    activeSubmenuId.value = null;
+  }
+}
+
+function handleItemLeave(): void {
+  // Clear pending timeout
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout);
+    hoverTimeout = null;
+  }
+
+  // Set a timeout to close submenu (will be cancelled if mouse enters submenu)
+  hoverTimeout = setTimeout(() => {
+    activeSubmenuId.value = null;
+  }, 150);
+}
+
+function handleSubmenuEnter(): void {
+  // Cancel any pending close timeout when entering the submenu
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout);
+    hoverTimeout = null;
+  }
+}
+
+function handleSubmenuLeave(): void {
+  // Start timeout to close submenu when leaving
+  hoverTimeout = setTimeout(() => {
+    activeSubmenuId.value = null;
+  }, 150);
+}
+
+function onItemClick(item: ContextMenuItem): void {
+  if (item.disabled) return;
+
+  // If item has children, don't close - just toggle submenu
+  if (item.children?.length) {
+    activeSubmenuId.value = activeSubmenuId.value === item.id ? null : item.id;
+    return;
+  }
+
+  // Execute action if available
+  if (item.action) {
+    emit("action", item);
+    item.action();
+  }
+  emit("close");
+}
+
+function onClose(): void {
+  emit("close");
+}
+
+// Handle Escape key at document level
+function handleDocumentKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape") {
+    onClose();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("keydown", handleDocumentKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleDocumentKeydown);
+  if (hoverTimeout) {
+    clearTimeout(hoverTimeout);
+  }
+});
+</script>
+
+<style lang="scss">
+.dx-context-menu-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  // Transparent overlay - no visual background
+}
+
+.dx-context-menu {
+  position: fixed;
+  background: #2d2d2d;
+  border: 1px solid #404040;
+  border-radius: 0.375rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
+  min-width: 200px;
+  max-width: 320px;
+  overflow: visible;
+  padding: 0.25rem 0;
+
+  .context-menu-divider {
+    height: 1px;
+    background: #404040;
+    margin: 0.25rem 0;
+  }
+
+  .context-menu-item-wrapper {
+    position: relative;
+  }
+
+  .context-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: transparent;
+    border: none;
+    color: #d4d4d4;
+    font-size: 0.875rem;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover:not(.disabled) {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    &.disabled {
+      color: #6b7280;
+      cursor: not-allowed;
+    }
+
+    &.has-children {
+      padding-right: 0.5rem;
+    }
+
+    .item-label {
+      flex: 1;
+      white-space: nowrap;
+    }
+
+    .item-shortcut {
+      font-size: 0.75rem;
+      color: #6b7280;
+      font-family: 'Consolas', 'Monaco', monospace;
+      margin-left: 1rem;
+      white-space: nowrap;
+    }
+
+    .item-chevron {
+      font-size: 0.75rem;
+      color: #6b7280;
+      margin-left: 0.5rem;
+    }
+  }
+
+  // Submenu styling
+  .dx-context-submenu {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    margin-left: 2px;
+    background: #2d2d2d;
+    border: 1px solid #404040;
+    border-radius: 0.375rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
+    min-width: 280px;
+    max-width: 360px;
+    overflow: hidden;
+    padding: 0.25rem 0;
+    z-index: 1001;
+
+    // Open to the left when near right viewport edge
+    &.open-left {
+      left: auto;
+      right: 100%;
+      margin-left: 0;
+      margin-right: 2px;
+    }
+  }
+}
+</style>