quasar-ui-danx 0.5.0 → 0.5.1

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>

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

@@ -0,0 +1,259 @@
+<template>
+  <div
+    ref="overlayRef"
+    class="dx-hotkey-help-overlay"
+    tabindex="-1"
+    @click.self="$emit('close')"
+    @keydown.escape="$emit('close')"
+  >
+    <div class="dx-hotkey-help-popover">
+      <div class="popover-header">
+        <h3>Keyboard Shortcuts</h3>
+        <button
+          class="close-btn"
+          type="button"
+          aria-label="Close"
+          @click="$emit('close')"
+        >
+          <CloseIcon class="w-4 h-4" />
+        </button>
+      </div>
+
+      <div class="popover-content">
+        <div class="hotkey-groups-grid">
+          <div
+            v-for="group in groupedHotkeys"
+            :key="group.name"
+            class="hotkey-group"
+          >
+            <h4>{{ group.label }}</h4>
+            <div class="hotkey-list">
+              <div
+                v-for="hotkey in group.hotkeys"
+                :key="hotkey.key"
+                class="hotkey-item"
+              >
+                <span class="hotkey-description">{{ hotkey.description }}</span>
+                <kbd class="hotkey-key">{{ formatKey(hotkey.key) }}</kbd>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FaSolidXmark as CloseIcon } from "danx-icon";
+import { computed, onMounted, ref } from "vue";
+import { HotkeyDefinition, HotkeyGroup } from "../../../composables/markdown/useMarkdownHotkeys";
+
+const overlayRef = ref<HTMLDivElement | null>(null);
+
+onMounted(() => {
+  // Focus the overlay so it can receive keyboard events
+  overlayRef.value?.focus();
+});
+
+export interface HotkeyHelpPopoverProps {
+  hotkeys: HotkeyDefinition[];
+}
+
+interface HotkeyGroupDisplay {
+  name: HotkeyGroup;
+  label: string;
+  hotkeys: HotkeyDefinition[];
+}
+
+const GROUP_LABELS: Record<HotkeyGroup, string> = {
+  headings: "Headings",
+  formatting: "Formatting",
+  lists: "Lists",
+  blocks: "Blocks",
+  tables: "Tables",
+  other: "Other"
+};
+
+const GROUP_ORDER: HotkeyGroup[] = ["headings", "formatting", "lists", "blocks", "tables", "other"];
+
+const props = defineProps<HotkeyHelpPopoverProps>();
+
+defineEmits<{
+  close: [];
+}>();
+
+const groupedHotkeys = computed<HotkeyGroupDisplay[]>(() => {
+  const groups = new Map<HotkeyGroup, HotkeyDefinition[]>();
+
+  // Initialize groups
+  for (const group of GROUP_ORDER) {
+    groups.set(group, []);
+  }
+
+  // Distribute hotkeys into groups
+  for (const hotkey of props.hotkeys) {
+    const group = groups.get(hotkey.group);
+    if (group) {
+      group.push(hotkey);
+    }
+  }
+
+  // Convert to display format, filtering empty groups
+  return GROUP_ORDER
+    .filter(name => (groups.get(name)?.length || 0) > 0)
+    .map(name => ({
+      name,
+      label: GROUP_LABELS[name],
+      hotkeys: groups.get(name) || []
+    }));
+});
+
+/**
+ * Format a key combination for display
+ * Converts 'ctrl+1' to 'Ctrl + 1'
+ */
+function formatKey(key: string): string {
+  return key
+    .split("+")
+    .map(part => {
+      const lower = part.toLowerCase();
+      switch (lower) {
+        case "ctrl":
+        case "control":
+          return "Ctrl";
+        case "shift":
+          return "Shift";
+        case "alt":
+        case "option":
+          return "Alt";
+        case "meta":
+        case "cmd":
+        case "command":
+          return "Cmd";
+        default:
+          return part.toUpperCase();
+      }
+    })
+    .join(" + ");
+}
+</script>
+
+<style lang="scss">
+.dx-hotkey-help-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+}
+
+.dx-hotkey-help-popover {
+  background: #2d2d2d;
+  border: 1px solid #404040;
+  border-radius: 0.5rem;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+  min-width: 320px;
+  max-width: 90vw;
+  max-height: 80vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .popover-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid #404040;
+
+    h3 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 600;
+      color: #f3f4f6;
+    }
+
+    .close-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.75rem;
+      height: 1.75rem;
+      padding: 0;
+      background: transparent;
+      border: none;
+      border-radius: 0.25rem;
+      color: #9ca3af;
+      cursor: pointer;
+      transition: all 0.15s ease;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: #f3f4f6;
+      }
+    }
+  }
+
+  .popover-content {
+    padding: 1rem 1.25rem;
+    overflow-y: auto;
+  }
+
+  .hotkey-groups-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1.5rem 2rem;
+
+    // For wider screens, limit to 3 columns max
+    @media (min-width: 800px) {
+      grid-template-columns: repeat(3, minmax(200px, 1fr));
+    }
+  }
+
+  .hotkey-group {
+    h4 {
+      margin: 0 0 0.75rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: #9ca3af;
+    }
+  }
+
+  .hotkey-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .hotkey-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+
+    .hotkey-description {
+      flex: 1;
+      color: #d4d4d4;
+      font-size: 0.875rem;
+    }
+
+    .hotkey-key {
+      flex-shrink: 0;
+      padding: 0.25rem 0.5rem;
+      background: #1e1e1e;
+      border: 1px solid #404040;
+      border-radius: 0.25rem;
+      font-family: 'Consolas', 'Monaco', monospace;
+      font-size: 0.75rem;
+      color: #9ca3af;
+      white-space: nowrap;
+    }
+  }
+}
+</style>