quasar-ui-danx 0.5.0 → 0.5.2

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

@@ -9,29 +9,17 @@
       />
 
       <!-- Code blocks with syntax highlighting -->
-      <div
+      <CodeViewer
         v-else-if="token.type === 'code_block'"
-        class="dx-markdown-code-block"
-      >
-        <!-- Language toggle badge (only for json/yaml) -->
-        <LanguageBadge
-          v-if="isToggleableLanguage(token.language)"
-          :format="getCodeBlockFormat(index, token.language)"
-          :available-formats="['json', 'yaml']"
-          :toggleable="true"
-          @change="(fmt) => setCodeBlockFormat(index, fmt)"
-        />
-        <LanguageBadge
-          v-else-if="token.language"
-          :format="token.language"
-          :available-formats="[]"
-          :toggleable="false"
-        />
-        <pre><code
-          :class="'language-' + getCodeBlockFormat(index, token.language)"
-          v-html="highlightCodeBlock(index, token.content, token.language)"
-        ></code></pre>
-      </div>
+        :model-value="token.content"
+        :format="normalizeLanguage(token.language)"
+        :default-code-format="defaultCodeFormat"
+        :can-edit="false"
+        :collapsible="false"
+        hide-footer
+        allow-any-language
+        class="markdown-code-block"
+      />
 
       <!-- Blockquotes (recursive) -->
       <blockquote
@@ -186,12 +174,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive } from "vue";
-import { parse as parseYAML, stringify as stringifyYAML } from "yaml";
+import { computed } from "vue";
 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";
+import CodeViewer from "./CodeViewer.vue";
 
 export interface MarkdownContentProps {
   content: string;
@@ -202,10 +188,21 @@ const props = withDefaults(defineProps<MarkdownContentProps>(), {
   content: ""
 });
 
-// Track format overrides for each code block (for toggling json<->yaml)
-const codeBlockFormats = reactive<Record<number, string>>({});
-// Cache converted content for each code block
-const convertedContent = reactive<Record<number, string>>({});
+// Normalize language aliases to standard names
+function normalizeLanguage(lang?: string): string {
+  if (!lang) return "text";
+  const aliases: Record<string, string> = {
+    js: "javascript",
+    ts: "typescript",
+    py: "python",
+    rb: "ruby",
+    yml: "yaml",
+    md: "markdown",
+    sh: "bash",
+    shell: "bash"
+  };
+  return aliases[lang.toLowerCase()] || lang.toLowerCase();
+}
 
 // Tokenize the markdown content
 const tokens = computed<BlockToken[]>(() => {
@@ -234,124 +231,6 @@ const sortedFootnotes = computed(() => {
     .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;
-  const lang = language.toLowerCase();
-  return lang === "json" || lang === "yaml";
-}
-
-// Get the current format for a code block (respecting user toggle, then default override, then original)
-function getCodeBlockFormat(index: number, originalLanguage: string): string {
-  // If user has toggled this block, use their choice
-  if (codeBlockFormats[index]) {
-    return codeBlockFormats[index];
-  }
-
-  // If a default is set and this is a toggleable language, use the default
-  const lang = originalLanguage?.toLowerCase();
-  if (props.defaultCodeFormat && (lang === "json" || lang === "yaml")) {
-    return props.defaultCodeFormat;
-  }
-
-  // Otherwise use the original language
-  return lang || "text";
-}
-
-// Get converted content for a code block (handles initial conversion for defaultCodeFormat)
-function getConvertedContent(index: number, originalContent: string, originalLang: string): string {
-  const format = getCodeBlockFormat(index, originalLang);
-
-  // If format matches original, no conversion needed
-  if (format === originalLang || !isToggleableLanguage(originalLang)) {
-    return originalContent;
-  }
-
-  // Convert from original to target format
-  try {
-    let parsed: unknown;
-
-    if (originalLang === "json") {
-      parsed = JSON.parse(originalContent);
-    } else if (originalLang === "yaml") {
-      parsed = parseYAML(originalContent);
-    }
-
-    if (parsed !== undefined) {
-      if (format === "json") {
-        return JSON.stringify(parsed, null, 2);
-      } else if (format === "yaml") {
-        return stringifyYAML(parsed as object);
-      }
-    }
-  } catch {
-    // Conversion failed, return original
-  }
-
-  return originalContent;
-}
-
-// Set format for a code block (converts content to the new format)
-function setCodeBlockFormat(index: number, newFormat: string) {
-  const token = tokens.value[index];
-  if (token?.type !== "code_block") return;
-
-  const originalLang = token.language?.toLowerCase() || "json";
-  const current = getCodeBlockFormat(index, originalLang);
-
-  // No change needed if already in target format
-  if (current === newFormat) return;
-
-  // Convert the content
-  try {
-    // Use the currently displayed content (which may already be converted due to defaultCodeFormat)
-    const sourceContent = convertedContent[index] || getConvertedContent(index, token.content, originalLang);
-    let parsed: unknown;
-
-    // Parse from current format
-    if (current === "json") {
-      parsed = JSON.parse(sourceContent);
-    } else {
-      parsed = parseYAML(sourceContent);
-    }
-
-    // Convert to new format
-    if (newFormat === "json") {
-      convertedContent[index] = JSON.stringify(parsed, null, 2);
-    } else {
-      convertedContent[index] = stringifyYAML(parsed as object);
-    }
-
-    codeBlockFormats[index] = newFormat;
-  } catch {
-    // If conversion fails, just set the format without converting
-    codeBlockFormats[index] = newFormat;
-  }
-}
-
-// Highlight code block content based on format
-function highlightCodeBlock(index: number, originalContent: string, originalLanguage: string): string {
-  const format = getCodeBlockFormat(index, originalLanguage);
-  const originalLang = originalLanguage?.toLowerCase() || "text";
-
-  // Get the content (converted if needed, or from cache if user toggled)
-  const content = convertedContent[index] || getConvertedContent(index, originalContent, originalLang);
-
-  // Apply syntax highlighting
-  switch (format) {
-    case "json":
-      return highlightJSON(content);
-    case "yaml":
-      return highlightYAML(content);
-    default:
-      // For other languages, just escape HTML
-      return content
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-  }
-}
-
 // Parse inline markdown (bold, italic, links, etc.)
 function parseInlineContent(text: string): string {
   return parseInline(text, true);
@@ -383,23 +262,12 @@ function renderBlockquote(content: string): string {
 </script>
 
 <style lang="scss">
-.dx-markdown-code-block {
-  position: relative;
+.markdown-code-block {
   margin: 1em 0;
 
-  pre {
-    margin: 0;
-    background: rgba(0, 0, 0, 0.3);
-    padding: 1em;
-    border-radius: 6px;
-    overflow-x: auto;
-
-    code {
-      background: transparent;
-      padding: 0;
-      font-size: 0.875em;
-      font-family: 'Fira Code', 'Monaco', monospace;
-    }
+  // Ensure auto-height instead of 100%
+  &.dx-code-viewer {
+    height: auto;
   }
 }
 </style>

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>