quasar-ui-danx 0.5.0 → 0.5.2

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>

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

@@ -0,0 +1,226 @@
+<template>
+  <div ref="menuRef" class="dx-line-type-menu" :class="{ 'is-open': isOpen }">
+    <button
+      class="line-type-trigger"
+      :title="currentTypeLabel"
+      type="button"
+      @mousedown.prevent="toggleMenu"
+    >
+      <span class="type-icon">{{ typeIcon }}</span>
+    </button>
+
+    <div v-if="isOpen" ref="dropdownRef" class="line-type-dropdown" :class="{ 'open-upward': openUpward }">
+      <button
+        v-for="option in LINE_TYPE_OPTIONS"
+        :key="option.value"
+        class="line-type-option"
+        :class="{ active: option.value === currentType }"
+        type="button"
+        @mousedown.prevent="selectType(option.value)"
+      >
+        <span class="option-icon">{{ option.icon }}</span>
+        <span class="option-label">{{ option.label }}</span>
+        <span class="option-shortcut">{{ option.shortcut }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onUnmounted, ref, watch } from "vue";
+import type { LineType, LineTypeOption } from "./types";
+
+export interface LineTypeMenuProps {
+  currentType: LineType;
+}
+
+const LINE_TYPE_OPTIONS: LineTypeOption[] = [
+  { value: "paragraph", label: "Paragraph", icon: "\u00B6", shortcut: "Ctrl+0" },
+  { value: "h1", label: "Heading 1", icon: "H1", shortcut: "Ctrl+1" },
+  { value: "h2", label: "Heading 2", icon: "H2", shortcut: "Ctrl+2" },
+  { value: "h3", label: "Heading 3", icon: "H3", shortcut: "Ctrl+3" },
+  { value: "h4", label: "Heading 4", icon: "H4", shortcut: "Ctrl+4" },
+  { value: "h5", label: "Heading 5", icon: "H5", shortcut: "Ctrl+5" },
+  { value: "h6", label: "Heading 6", icon: "H6", shortcut: "Ctrl+6" },
+  { value: "ul", label: "Bullet List", icon: "\u2022", shortcut: "Ctrl+Shift+[" },
+  { value: "ol", label: "Numbered List", icon: "1.", shortcut: "Ctrl+Shift+]" },
+  { value: "code", label: "Code Block", icon: "</>", shortcut: "Ctrl+Shift+K" },
+  { value: "blockquote", label: "Blockquote", icon: ">", shortcut: "Ctrl+Shift+Q" }
+];
+
+const props = defineProps<LineTypeMenuProps>();
+
+const emit = defineEmits<{
+  change: [type: LineType];
+}>();
+
+const isOpen = ref(false);
+const menuRef = ref<HTMLElement | null>(null);
+const dropdownRef = ref<HTMLElement | null>(null);
+const openUpward = ref(false);
+
+const currentOption = computed(() => {
+  return LINE_TYPE_OPTIONS.find(o => o.value === props.currentType) || LINE_TYPE_OPTIONS[0];
+});
+
+const currentTypeLabel = computed(() => currentOption.value.label);
+const typeIcon = computed(() => currentOption.value.icon);
+
+function toggleMenu() {
+  isOpen.value = !isOpen.value;
+}
+
+function selectType(type: LineType) {
+  emit("change", type);
+  isOpen.value = false;
+}
+
+/**
+ * Check if dropdown would overflow the editor container and adjust positioning
+ */
+function checkDropdownPosition() {
+  if (!dropdownRef.value || !menuRef.value) return;
+
+  // Find the editor container (walk up to find .dx-markdown-editor or similar scrollable container)
+  const editor = menuRef.value.closest(".dx-markdown-editor") || menuRef.value.closest("[class*='editor']");
+  if (!editor) {
+    openUpward.value = false;
+    return;
+  }
+
+  const editorRect = editor.getBoundingClientRect();
+  const dropdownRect = dropdownRef.value.getBoundingClientRect();
+
+  // Check if dropdown extends below editor
+  if (dropdownRect.bottom > editorRect.bottom) {
+    openUpward.value = true;
+  } else {
+    openUpward.value = false;
+  }
+}
+
+// Close menu on click outside
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as Node;
+  if (menuRef.value && !menuRef.value.contains(target)) {
+    isOpen.value = false;
+  }
+}
+
+// Close menu on Escape key
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === "Escape") {
+    isOpen.value = false;
+  }
+}
+
+// Add/remove event listeners when menu opens/closes
+watch(isOpen, async (open) => {
+  if (open) {
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    // Wait for dropdown to render, then check position
+    await nextTick();
+    checkDropdownPosition();
+  } else {
+    document.removeEventListener("mousedown", handleClickOutside);
+    document.removeEventListener("keydown", handleKeyDown);
+    // Reset position when closed
+    openUpward.value = false;
+  }
+});
+
+// Cleanup on unmount
+onUnmounted(() => {
+  document.removeEventListener("mousedown", handleClickOutside);
+  document.removeEventListener("keydown", handleKeyDown);
+});
+</script>
+
+<style lang="scss">
+.dx-line-type-menu {
+  position: relative;
+  display: inline-block;
+
+  .line-type-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    background: rgba(255, 255, 255, 0.05);
+    border: none;
+    border-radius: 0.2rem;
+    color: #6b7280;
+    font-size: 0.625rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: #9ca3af;
+    }
+  }
+
+  .line-type-dropdown {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    z-index: 100;
+    min-width: 240px;
+    margin-left: 0.25rem;
+    background: #2d2d2d;
+    border: 1px solid #404040;
+    border-radius: 0.375rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+
+    // When dropdown would overflow editor bottom, open upward instead
+    &.open-upward {
+      top: auto;
+      bottom: 0;
+    }
+  }
+
+  .line-type-option {
+    display: flex;
+    align-items: center;
+    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 {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    &.active {
+      background: rgba(56, 139, 253, 0.2);
+      color: #58a6ff;
+    }
+
+    .option-icon {
+      width: 1.5rem;
+      font-weight: 700;
+      font-size: 0.75rem;
+      color: #9ca3af;
+    }
+
+    .option-label {
+      flex: 1;
+    }
+
+    .option-shortcut {
+      font-size: 0.75rem;
+      color: #6b7280;
+      font-family: 'Consolas', 'Monaco', monospace;
+    }
+  }
+}
+</style>