quasar-ui-danx 0.5.0 → 0.5.1

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>

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

@@ -0,0 +1,331 @@
+<template>
+  <div
+    class="dx-link-popover-overlay"
+    @click.self="onCancel"
+    @keydown.escape="onCancel"
+  >
+    <div
+      ref="popoverRef"
+      class="dx-link-popover"
+      :style="popoverStyle"
+    >
+      <div class="popover-header">
+        <h3>{{ isEditing ? 'Edit Link' : 'Insert Link' }}</h3>
+        <button
+          class="close-btn"
+          type="button"
+          aria-label="Close"
+          @click="onCancel"
+        >
+          <CloseIcon class="w-4 h-4" />
+        </button>
+      </div>
+
+      <div class="popover-content">
+        <div class="input-group">
+          <label for="link-url">URL</label>
+          <input
+            id="link-url"
+            ref="urlInputRef"
+            v-model="urlValue"
+            type="text"
+            placeholder="https://example.com"
+            @keydown.enter.prevent="onSubmit"
+            @keydown.escape="onCancel"
+          >
+        </div>
+
+        <div
+          v-if="!isEditing"
+          class="input-group"
+        >
+          <label for="link-label">Label</label>
+          <input
+            id="link-label"
+            v-model="labelValue"
+            type="text"
+            :placeholder="labelPlaceholder"
+            @keydown.enter.prevent="onSubmit"
+            @keydown.escape="onCancel"
+          >
+        </div>
+
+        <div
+          v-if="isEditing"
+          class="edit-hint"
+        >
+          Enter an empty URL to remove the link.
+        </div>
+      </div>
+
+      <div class="popover-footer">
+        <button
+          type="button"
+          class="btn-cancel"
+          @click="onCancel"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          class="btn-insert"
+          @click="onSubmit"
+        >
+          {{ isEditing ? 'Update' : 'Insert' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FaSolidXmark as CloseIcon } from "danx-icon";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import type { PopoverPosition } from "@/composables/markdown";
+
+export interface LinkPopoverProps {
+  position: PopoverPosition;
+  existingUrl?: string;
+  selectedText?: string;
+}
+
+const props = withDefaults(defineProps<LinkPopoverProps>(), {
+  existingUrl: "",
+  selectedText: ""
+});
+
+const emit = defineEmits<{
+  submit: [url: string, label?: string];
+  cancel: [];
+}>();
+
+// Refs
+const popoverRef = ref<HTMLElement | null>(null);
+const urlInputRef = ref<HTMLInputElement | null>(null);
+
+// State
+const urlValue = ref(props.existingUrl || "");
+const labelValue = ref("");
+
+// Computed
+const isEditing = computed(() => !!props.existingUrl);
+
+const labelPlaceholder = computed(() => {
+  if (props.selectedText) {
+    return props.selectedText;
+  }
+  return "Link text (optional)";
+});
+
+// Calculate popover position (below cursor by default, above if at bottom of viewport)
+const popoverStyle = computed(() => {
+  const popoverHeight = 200; // Approximate height
+  const popoverWidth = 320;
+  const padding = 10;
+
+  let top = props.position.y + padding;
+  let left = props.position.x - (popoverWidth / 2);
+
+  // Check if popover would extend below viewport
+  if (top + popoverHeight > window.innerHeight - padding) {
+    // Position above the cursor
+    top = props.position.y - popoverHeight - padding;
+  }
+
+  // Ensure popover doesn't go off left edge
+  if (left < padding) {
+    left = padding;
+  }
+
+  // Ensure popover doesn't go off right edge
+  if (left + popoverWidth > window.innerWidth - padding) {
+    left = window.innerWidth - popoverWidth - padding;
+  }
+
+  return {
+    top: `${top}px`,
+    left: `${left}px`
+  };
+});
+
+// Methods
+function onSubmit(): void {
+  const url = urlValue.value.trim();
+  const label = labelValue.value.trim() || undefined;
+  emit("submit", url, label);
+}
+
+function onCancel(): void {
+  emit("cancel");
+}
+
+// Handle Escape key at document level
+function handleDocumentKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape") {
+    onCancel();
+  }
+}
+
+// Auto-focus URL input on mount
+onMounted(() => {
+  nextTick(() => {
+    urlInputRef.value?.focus();
+    urlInputRef.value?.select();
+  });
+
+  document.addEventListener("keydown", handleDocumentKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleDocumentKeydown);
+});
+
+// Watch for existingUrl changes to update the input
+watch(() => props.existingUrl, (newUrl) => {
+  urlValue.value = newUrl || "";
+});
+</script>
+
+<style lang="scss">
+.dx-link-popover-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(1px);
+}
+
+.dx-link-popover {
+  position: fixed;
+  background: #2d2d2d;
+  border: 1px solid #404040;
+  border-radius: 0.5rem;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+  width: 320px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .popover-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.875rem 1rem;
+    border-bottom: 1px solid #404040;
+
+    h3 {
+      margin: 0;
+      font-size: 0.9375rem;
+      font-weight: 600;
+      color: #f3f4f6;
+    }
+
+    .close-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.5rem;
+      height: 1.5rem;
+      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;
+    display: flex;
+    flex-direction: column;
+    gap: 0.875rem;
+  }
+
+  .input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+
+    label {
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: #9ca3af;
+    }
+
+    input {
+      width: 100%;
+      padding: 0.5rem 0.75rem;
+      background: #1e1e1e;
+      border: 1px solid #404040;
+      border-radius: 0.375rem;
+      font-size: 0.875rem;
+      color: #f3f4f6;
+      outline: none;
+      transition: border-color 0.15s ease;
+
+      &::placeholder {
+        color: #6b7280;
+      }
+
+      &:focus {
+        border-color: #60a5fa;
+      }
+    }
+  }
+
+  .edit-hint {
+    font-size: 0.75rem;
+    color: #6b7280;
+    font-style: italic;
+  }
+
+  .popover-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border-top: 1px solid #404040;
+    background: rgba(0, 0, 0, 0.2);
+
+    button {
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      border-radius: 0.375rem;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .btn-cancel {
+      background: transparent;
+      border: 1px solid #404040;
+      color: #d4d4d4;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.05);
+        border-color: #525252;
+      }
+    }
+
+    .btn-insert {
+      background: #3b82f6;
+      border: 1px solid #3b82f6;
+      color: #ffffff;
+
+      &:hover {
+        background: #2563eb;
+        border-color: #2563eb;
+      }
+    }
+  }
+}
+</style>