quasar-ui-danx 0.5.0 → 0.5.2

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>

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

@@ -0,0 +1,233 @@
+<template>
+  <div class="dx-markdown-editor" :class="[{ 'is-readonly': readonly }, props.theme === 'light' ? 'theme-light' : '']">
+    <div class="dx-markdown-editor-body" @contextmenu="contextMenu.show">
+      <!-- Floating line type menu positioned next to current block -->
+      <div
+        ref="menuContainerRef"
+        class="dx-line-type-menu-container"
+        :style="lineTypeMenu.menuStyle.value"
+      >
+        <LineTypeMenu
+          :current-type="lineTypeMenu.currentLineType.value"
+          @change="lineTypeMenu.onLineTypeChange"
+        />
+      </div>
+
+      <MarkdownEditorContent
+        ref="contentRef"
+        :html="editor.renderedHtml.value"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        @input="editor.onInput"
+        @keydown="editor.onKeyDown"
+        @blur="editor.onBlur"
+      />
+    </div>
+
+    <MarkdownEditorFooter
+      v-if="!hideFooter"
+      :char-count="editor.charCount.value"
+      @show-hotkeys="editor.showHotkeyHelp"
+    />
+
+    <HotkeyHelpPopover
+      v-if="editor.isShowingHotkeyHelp.value"
+      :hotkeys="editor.hotkeyDefinitions.value"
+      @close="editor.hideHotkeyHelp"
+    />
+
+    <LinkPopover
+      v-if="linkPopover.isVisible.value"
+      :position="linkPopover.position.value"
+      :existing-url="linkPopover.existingUrl.value"
+      :selected-text="linkPopover.selectedText.value"
+      @submit="linkPopover.submit"
+      @cancel="linkPopover.cancel"
+    />
+
+    <TablePopover
+      v-if="tablePopover.isVisible.value"
+      :position="tablePopover.position.value"
+      @submit="tablePopover.submit"
+      @cancel="tablePopover.cancel"
+    />
+
+    <ContextMenu
+      v-if="contextMenu.isVisible.value"
+      :position="contextMenu.position.value"
+      :items="contextMenu.items.value"
+      @close="contextMenu.hide"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { useContextMenu } from "../../../composables/markdown/features/useContextMenu";
+import { useFocusTracking } from "../../../composables/markdown/features/useFocusTracking";
+import { useLineTypeMenu } from "../../../composables/markdown/features/useLineTypeMenu";
+import { useLinkPopover, useTablePopover } from "../../../composables/markdown/features/usePopoverManager";
+import { useMarkdownEditor } from "../../../composables/markdown/useMarkdownEditor";
+import ContextMenu from "./ContextMenu.vue";
+import HotkeyHelpPopover from "./HotkeyHelpPopover.vue";
+import LineTypeMenu from "./LineTypeMenu.vue";
+import LinkPopover from "./LinkPopover.vue";
+import MarkdownEditorContent from "./MarkdownEditorContent.vue";
+import MarkdownEditorFooter from "./MarkdownEditorFooter.vue";
+import TablePopover from "./TablePopover.vue";
+
+export interface MarkdownEditorProps {
+  modelValue?: string;
+  placeholder?: string;
+  readonly?: boolean;
+  minHeight?: string;
+  maxHeight?: string;
+  theme?: "dark" | "light";
+  hideFooter?: boolean;
+}
+
+const props = withDefaults(defineProps<MarkdownEditorProps>(), {
+  modelValue: "",
+  placeholder: "Start typing...",
+  readonly: false,
+  minHeight: "100px",
+  maxHeight: "none",
+  theme: "dark",
+  hideFooter: false
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+// Reference to the content component
+const contentRef = ref<InstanceType<typeof MarkdownEditorContent> | null>(null);
+
+// Reference to the menu container for focus handling
+const menuContainerRef = ref<HTMLElement | null>(null);
+
+// Get the actual HTMLElement from the content component
+const contentElementRef = computed(() => contentRef.value?.containerRef || null);
+
+// Initialize popover managers
+const linkPopover = useLinkPopover();
+const tablePopover = useTablePopover();
+
+// Initialize the markdown editor composable
+const editor = useMarkdownEditor({
+  contentRef: contentElementRef,
+  initialValue: props.modelValue,
+  onEmitValue: (markdown: string) => {
+    emit("update:modelValue", markdown);
+  },
+  onShowLinkPopover: linkPopover.show,
+  onShowTablePopover: tablePopover.show
+});
+
+// Initialize focus tracking
+const focusTracking = useFocusTracking({
+  contentRef: contentElementRef,
+  menuContainerRef,
+  onSelectionChange: () => lineTypeMenu.updatePositionAndState()
+});
+
+// Initialize line type menu
+const lineTypeMenu = useLineTypeMenu({
+  contentRef: contentElementRef,
+  editor,
+  isEditorFocused: focusTracking.isEditorFocused
+});
+
+// Initialize context menu
+const contextMenu = useContextMenu({
+  editor,
+  readonly: computed(() => props.readonly)
+});
+
+// Setup line type menu listeners on mount
+onMounted(() => {
+  lineTypeMenu.setupListeners();
+});
+
+// Cleanup line type menu listeners on unmount
+onUnmounted(() => {
+  lineTypeMenu.cleanupListeners();
+});
+
+// Watch for external value changes
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    // Skip if this change originated from the editor itself (internal update)
+    // This prevents cursor jumping when the watch triggers after typing
+    if (editor.isInternalUpdate.value) {
+      editor.isInternalUpdate.value = false;
+      return;
+    }
+
+    // Only update if the value is different from current
+    if (newValue !== undefined) {
+      editor.setMarkdown(newValue);
+    }
+  }
+);
+
+// NOTE: Content is already initialized in useMarkdownEditor with initialValue.
+// The v-html binding renders it, and the MutationObserver mounts CodeViewers.
+// Calling setMarkdown again here would replace the DOM and cause race conditions
+// with CodeViewer mounting. Only call setMarkdown for external value changes.
+
+// Expose the editor for parent components that may need access
+defineExpose({
+  editor,
+  setMarkdown: editor.setMarkdown
+});
+</script>
+
+<style lang="scss">
+.dx-markdown-editor {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: 0.375rem;
+  overflow: hidden;
+
+  &.is-readonly {
+    .dx-markdown-editor-content {
+      cursor: default;
+    }
+
+    .dx-line-type-menu-container {
+      display: none;
+    }
+  }
+
+  // Body container with floating menu and content side by side
+  .dx-markdown-editor-body {
+    display: flex;
+    position: relative;
+    flex: 1;
+    overflow: visible;
+  }
+
+  // Floating line type menu container - positioned outside editor bounds
+  .dx-line-type-menu-container {
+    position: absolute;
+    left: -1.75rem;
+    z-index: 10;
+    width: 1.75rem;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 0.25rem;
+    transition: top 0.1s ease-out, opacity 0.15s ease;
+  }
+
+  // Apply min/max height to content area (no left margin needed - menu is outside)
+  .dx-markdown-editor-content {
+    flex: 1;
+    min-height: v-bind(minHeight);
+    max-height: v-bind(maxHeight);
+  }
+}
+</style>