@grandaniel/vue-markdown-editor 1.0.0 → 1.1.0

package/src/components/MarkdownEditor/MarkdownComponentRegistry.ts

@@ -1,48 +0,0 @@
-import type { Component } from "vue";
-import MarkdownModuleHeadline1 from "./Modules/MarkdownModuleHeadline1.vue";
-import MarkdownModuleHeadline2 from "./Modules/MarkdownModuleHeadline2.vue";
-import MarkdownModuleHeadline3 from "./Modules/MarkdownModuleHeadline3.vue";
-import MarkdownModuleImage from "./Modules/MarkdownModuleImage.vue";
-import MarkdownModuleImageState from "./Modules/MarkdownModuleImageState";
-import MarkdownModuleParagraph from "./Modules/MarkdownModuleParagraph.vue";
-import MarkdownModuleTextState from "./Modules/MarkdownModuleTextState";
-import type { MarkdownAstNode } from "./Types/MarkdownAstNode";
-import MarkdownNodeType from "./Types/MarkdownAstNodeType";
-
-type MarkdownComponentRegistryEntry = {
-  component: Component;
-  stateType: new (
-    object: MarkdownModuleTextState | MarkdownModuleImageState,
-  ) => MarkdownModuleTextState | MarkdownModuleImageState;
-};
-
-const registry: Record<MarkdownNodeType, MarkdownComponentRegistryEntry> = {
-  [MarkdownNodeType.PARAGRAPH]: {
-    component: MarkdownModuleParagraph,
-    stateType: MarkdownModuleTextState,
-  },
-  [MarkdownNodeType.HEADLINE1]: {
-    component: MarkdownModuleHeadline1,
-    stateType: MarkdownModuleTextState,
-  },
-  [MarkdownNodeType.HEADLINE2]: {
-    component: MarkdownModuleHeadline2,
-    stateType: MarkdownModuleTextState,
-  },
-  [MarkdownNodeType.HEADLINE3]: {
-    component: MarkdownModuleHeadline3,
-    stateType: MarkdownModuleTextState,
-  },
-  [MarkdownNodeType.IMAGE]: {
-    component: MarkdownModuleImage,
-    stateType: MarkdownModuleImageState,
-  },
-};
-
-export function isTextNodeState(
-  state: MarkdownAstNode,
-): state is MarkdownAstNode & { componentState: MarkdownModuleTextState } {
-  return state.componentState instanceof MarkdownModuleTextState;
-}
-
-export default registry;

package/src/components/MarkdownEditor/MarkdownEditor.vue

@@ -1,333 +0,0 @@
-<template>
-  <div
-    ref="editorContainerRef"
-    class="markdown-editor"
-    @click="handleClickBlankArea"
-    @mouseup="handleMouseUp"
-  >
-    <MarkdownEditorModule
-      v-for="(node, index) in markdownNodes"
-      :key="node.id"
-      :node="node"
-      :focused="focusedNode === node"
-      @click.stop
-      @keydown="handleKeyDownOnNode(node, $event)"
-      @focus="handleFocusOnNode(node)"
-      @update:cursor-position="(pos) => handleUpdateCursorPosition(node, pos)"
-      @change-type="handleChangeType"
-    >
-      <template #focus-controls>
-        <span
-          class="drag-handle"
-          title="Drag to reorder"
-        >
-          ⠿
-        </span>
-        <button
-          type="button"
-          tabindex="-1"
-          @click="deleteNode(index)"
-        >
-          🗑️
-        </button>
-        <button
-          type="button"
-          tabindex="-1"
-          @click="addBlankNode(index)"
-        >
-          +
-        </button>
-      </template>
-      <template #after-controls>
-        <slot name="after-controls" />
-      </template>
-    </MarkdownEditorModule>
-
-    <MarkdownEditorTextSelectionContextMenu
-      v-if="showContextMenu"
-      :x="contextMenuPosition.x"
-      :y="contextMenuPosition.y"
-      :is-active="contextMenuActiveStates"
-      @toggle-bold="toggleBold"
-      @toggle-italic="toggleItalic"
-      @toggle-underline="toggleUnderline"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useSortable } from "@vueuse/integrations/useSortable";
-import { nextTick, ref, useTemplateRef, type PropType } from "vue";
-import type { MarkdownEditorInstance } from "./Composable/useMarkdownEditor";
-import MarkdownEditorTextSelectionContextMenu from "./ContextMenu/MarkdownEditorTextSelectionContextMenu.vue";
-import { isTextNodeState as isTextishNode } from "./MarkdownComponentRegistry";
-import MarkdownEditorModule from "./MarkdownEditorModule.vue";
-import type { MarkdownAstNode } from "./Types/MarkdownAstNode";
-import type MarkdownNodeType from "./Types/MarkdownAstNodeType";
-
-const props = defineProps({
-  editor: {
-    type: Object as PropType<MarkdownEditorInstance>,
-    required: true,
-  },
-  focusedNode: {
-    type: Object as PropType<MarkdownAstNode | null>,
-    required: false,
-    default: null,
-  },
-});
-
-const emit = defineEmits<{
-  (e: "update:focused-node", value: MarkdownAstNode | null): void;
-}>();
-
-const { markdownNodes, deleteNode, addBlankNode, replaceNodeType, moveNode } = props.editor;
-
-const editorContainerRef = useTemplateRef("editorContainerRef");
-useSortable(editorContainerRef, markdownNodes, {
-  handle: ".drag-handle",
-  animation: 150,
-  onUpdate: (e) => {
-    moveNode(e.oldIndex!, e.newIndex!);
-  },
-});
-const focusedNode = ref<MarkdownAstNode | null>(props.focusedNode);
-
-// Context menu state
-const showContextMenu = ref(false);
-const contextMenuPosition = ref({ x: 0, y: 0 });
-const contextMenuActiveStates = ref({
-  bold: false,
-  italic: false,
-  underline: false,
-});
-let selectionDebounceTimer: ReturnType<typeof setTimeout> | null = null;
-
-function handleUpdateCursorPosition(node: MarkdownAstNode, position: number) {
-  node.editingState.cursorPosition = position;
-}
-
-function handleChangeType(node: MarkdownAstNode, newType: MarkdownNodeType) {
-  const result = replaceNodeType(node, newType);
-
-  if (result) {
-    if (isTextishNode(result.newNode)) {
-      result.newNode.componentState.text = node.componentState.text.slice(node.editingState.cursorPosition);
-    }
-    focusNodeByIndex(result.index);
-  }
-}
-
-function handleKeyDownOnNode(node: MarkdownAstNode, event: KeyboardEvent) {
-  const nodeIndex = markdownNodes.value.indexOf(node);
-
-  if (event.key === "Enter") {
-    handleEnter(nodeIndex, event);
-  } else if (event.key === "Backspace") {
-    handleBackspace(nodeIndex);
-  } else if (event.key === "ArrowUp") {
-    moveFocusOneUp();
-    event.preventDefault();
-  } else if (event.key === "ArrowDown") {
-    moveFocusOneDown();
-    event.preventDefault();
-  } else if (event.key === "Delete") {
-    handleDelete(nodeIndex);
-  }
-}
-
-function handleFocusOnNode(node: MarkdownAstNode) {
-  focusedNode.value = node;
-  emit("update:focused-node", node);
-}
-
-function handleEnter(nodeIndex: number, event: KeyboardEvent) {
-  addBlankNode(nodeIndex);
-  moveFocusOneDown();
-  event.preventDefault();
-}
-
-function handleBackspace(index: number) {
-  const node = getNodeByIndex(index);
-
-  if (!isTextishNode(node)) return;
-  if (node.componentState.text !== "") return;
-
-  deleteNode(index);
-
-  nextTick(() => {
-    const newIndex = index > 0 ? index - 1 : 0;
-    focusNodeByIndex(newIndex);
-  });
-}
-
-function handleDelete(index: number) {
-  const node = getNodeByIndex(index);
-
-  if (!isTextishNode(node)) return;
-  if (node.componentState.text !== "") return;
-
-  deleteNode(index);
-  focusNodeByIndex(index);
-}
-
-function handleClickBlankArea() {
-  const lastNode = markdownNodes.value[markdownNodes.value.length - 1];
-  if (lastNode && isTextishNode(lastNode) && lastNode.componentState.text === "") {
-    focusedNode.value = lastNode;
-    return;
-  }
-
-  const newIndex = markdownNodes.value.length;
-
-  addBlankNode(newIndex);
-  focusNodeByIndex(newIndex);
-}
-
-function focusNodeByIndex(index: number) {
-  const node = markdownNodes.value[index];
-  if (!node) return;
-  nextTick(() => {
-    focusedNode.value = node;
-  });
-}
-
-function getNodeByIndex(index: number): MarkdownAstNode {
-  const node = markdownNodes.value[index];
-  if (!node) throw new Error("Node not found at index " + index);
-  return node;
-}
-
-function moveFocusOneUp() {
-  if (!focusedNode.value) return;
-
-  nextTick(() => {
-    const currentNode = focusedNode.value;
-    if (!currentNode) return;
-
-    const index = markdownNodes.value.indexOf(currentNode);
-    if (index > 0) {
-      focusedNode.value = getNodeByIndex(index - 1);
-    }
-  });
-}
-
-function moveFocusOneDown() {
-  if (!focusedNode.value) return;
-
-  nextTick(() => {
-    const currentNode = focusedNode.value;
-    if (!currentNode) return;
-    const index = markdownNodes.value.indexOf(currentNode);
-    if (index < markdownNodes.value.length - 1) {
-      focusedNode.value = getNodeByIndex(index + 1);
-    }
-  });
-}
-
-// Context menu handlers
-function handleMouseUp() {
-  // Clear existing timer
-  if (selectionDebounceTimer) {
-    clearTimeout(selectionDebounceTimer);
-  }
-
-  const selection = window.getSelection();
-
-  if (!selection || selection.isCollapsed || selection.toString().trim() === "") {
-    showContextMenu.value = false;
-    return;
-  }
-
-  // Debounce: wait 500ms before showing context menu
-  selectionDebounceTimer = setTimeout(() => {
-    const range = selection.getRangeAt(0);
-    const rect = range.getBoundingClientRect();
-
-    // Position the context menu above the selection
-    contextMenuPosition.value = {
-      x: rect.left + rect.width / 2 - 75, // Center and offset
-      y: rect.top - 50, // Position above selection
-    };
-
-    // Detect active formatting states
-    const parentElement = range.commonAncestorContainer.parentElement;
-    if (parentElement) {
-      contextMenuActiveStates.value = {
-        bold: isElementOrParentTagName(parentElement, ["STRONG", "B"]),
-        italic: isElementOrParentTagName(parentElement, ["EM", "I"]),
-        underline: isElementOrParentTagName(parentElement, ["U"]),
-      };
-    }
-
-    showContextMenu.value = true;
-  }, 500);
-}
-
-function isElementOrParentTagName(element: HTMLElement, tagNames: string[]): boolean {
-  let current: HTMLElement | null = element;
-  while (current) {
-    if (tagNames.includes(current.tagName)) {
-      return true;
-    }
-    current = current.parentElement;
-  }
-  return false;
-}
-
-function toggleBold() {
-  document.execCommand("bold");
-  showContextMenu.value = false;
-}
-
-function toggleItalic() {
-  document.execCommand("italic");
-  showContextMenu.value = false;
-}
-
-function toggleUnderline() {
-  document.execCommand("underline");
-  showContextMenu.value = false;
-}
-</script>
-
-<style>
-/* Basic global style  */
-p {
-  margin: 0.5rem 0;
-}
-
-strong,
-b {
-  font-weight: bold;
-}
-
-em,
-i {
-  font-style: italic;
-}
-
-code {
-  font-family: monospace;
-  background: rgba(127, 127, 127, 0.15);
-  padding: 0.1em 0.3em;
-  border-radius: 3px;
-  font-size: 0.9em;
-  color: green;
-}
-
-h1 {
-  font-size: 2em;
-  margin: 0;
-}
-
-h2 {
-  font-size: 1.5em;
-  margin: 0;
-}
-
-h3 {
-  font-size: 1.17em;
-  margin: 0;
-}
-</style>

package/src/components/MarkdownEditor/MarkdownEditorModal.vue

@@ -1,169 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div
-      v-if="show"
-      class="markdown-editor-modal-overlay"
-      @click.self="emit('close')"
-    >
-      <div class="markdown-editor-modal">
-        <div class="markdown-editor-modal-header">
-          <h3 class="markdown-editor-modal-title">
-            {{ title }}
-          </h3>
-          <button
-            type="button"
-            class="markdown-editor-modal-close"
-            @click="emit('close')"
-          >
-            ×
-          </button>
-        </div>
-
-        <div class="markdown-editor-modal-body">
-          <slot />
-        </div>
-
-        <div class="markdown-editor-modal-footer">
-          <button
-            type="button"
-            class="markdown-editor-modal-button markdown-editor-modal-button-secondary"
-            @click="emit('close')"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            class="markdown-editor-modal-button markdown-editor-modal-button-primary"
-            @click="emit('confirm')"
-          >
-            Save
-          </button>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  show: boolean;
-  title: string;
-}>();
-
-const emit = defineEmits<{
-  close: [];
-  confirm: [];
-}>();
-</script>
-
-<style lang="scss" scoped>
-.markdown-editor-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-  padding: 1rem;
-}
-
-.markdown-editor-modal {
-  background: #ffffff;
-  border-radius: 0.75rem;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  max-width: 32rem;
-  width: 100%;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.markdown-editor-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1.25rem 1.5rem;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.markdown-editor-modal-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #111827;
-  margin: 0;
-}
-
-.markdown-editor-modal-close {
-  background: transparent;
-  border: none;
-  font-size: 1.75rem;
-  line-height: 1;
-  color: #6b7280;
-  cursor: pointer;
-  padding: 0;
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.375rem;
-  transition: all 0.15s ease;
-
-  &:hover {
-    background: #f3f4f6;
-    color: #111827;
-  }
-}
-
-.markdown-editor-modal-body {
-  padding: 1.5rem;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.markdown-editor-modal-footer {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-  padding: 1.25rem 1.5rem;
-  border-top: 1px solid #e5e7eb;
-}
-
-.markdown-editor-modal-button {
-  padding: 0.625rem 1.25rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 0.5rem;
-  border: none;
-  cursor: pointer;
-  transition: all 0.15s ease;
-
-  &:active {
-    transform: scale(0.98);
-  }
-}
-
-.markdown-editor-modal-button-secondary {
-  background: #f3f4f6;
-  color: #374151;
-
-  &:hover {
-    background: #e5e7eb;
-  }
-}
-
-.markdown-editor-modal-button-primary {
-  background: #3b82f6;
-  color: #ffffff;
-
-  &:hover {
-    background: #2563eb;
-  }
-}
-</style>

package/src/components/MarkdownEditor/MarkdownEditorModule.vue

@@ -1,129 +0,0 @@
-<template>
-  <div
-    ref="markdownEditorModuleRef"
-    class="markdown-editor-module"
-  >
-    <div class="markdown-editor-module-controls">
-      <template v-if="focused || mouseOver">
-        <slot name="focus-controls" />
-      </template>
-    </div>
-    <div
-      ref="contentRef"
-      class="markdown-editor-module-content"
-      :class="{
-        'markdown-editor-module-content-focused': props.focused,
-      }"
-    >
-      <component
-        :is="ComponentRegistry[props.node.type].component"
-        v-if="ComponentRegistry[props.node.type]"
-        ref="moduleComponentRef"
-        :model-value="props.node.componentState"
-        @update:model-value="emit('update:node', $event)"
-        @change-type="(newType: MarkdownAstNodeType) => emit('change-type', props.node, newType)"
-        @update:cursor-position="emit('update:cursor-position', $event)"
-        @click="emit('focus')"
-      />
-    </div>
-    <slot name="after-controls" />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useFocusWithin, useMouseInElement } from "@vueuse/core";
-import { computed, onMounted, ref, useTemplateRef, watch, type PropType } from "vue";
-import type { MarkdownAstNode } from "./Types/MarkdownAstNode";
-
-import ComponentRegistry from "./MarkdownComponentRegistry";
-import type MarkdownAstNodeType from "./Types/MarkdownAstNodeType";
-
-const props = defineProps({
-  node: {
-    type: Object as PropType<MarkdownAstNode>,
-    required: true,
-  },
-  focused: {
-    type: Boolean,
-    required: true,
-  },
-});
-
-onMounted(() => {
-  if (moduleComponentRef.value && props.focused) {
-    moduleComponentRef.value.focus();
-  }
-});
-
-const emit = defineEmits<{
-  "focus": [];
-  "update:cursor-position": [number];
-  "update:node": [Record<string, unknown>];
-  "change-type": [MarkdownAstNode, number];
-}>();
-
-const markdownEditorModuleRef = useTemplateRef("markdownEditorModuleRef");
-const contentRef = useTemplateRef("contentRef");
-const moduleComponentRef = ref<{ focus: () => void } | null>(null);
-const innerElementFocus = useFocusWithin(contentRef);
-const mouseInTarget = useMouseInElement(markdownEditorModuleRef);
-const mouseOver = computed(() => !mouseInTarget.isOutside.value);
-
-// Handle external focus changes
-watch(
-  () => props.focused,
-  (nowFocused) => {
-    if (nowFocused && moduleComponentRef.value) {
-      moduleComponentRef.value.focus();
-    }
-  },
-);
-
-// Focus detection root
-watch(innerElementFocus.focused, (isFocused) => {
-  if (isFocused) {
-    emit("focus");
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.markdown-editor-module {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-
-  :deep(.tiptap) {
-    outline: none;
-  }
-
-  .markdown-editor-module-content {
-    width: 100%;
-    outline: none;
-  }
-
-  .drag-handle {
-    cursor: grab;
-    padding: 0 0.25rem;
-    user-select: none;
-    font-size: 1rem;
-    opacity: 0.5;
-
-    &:active {
-      cursor: grabbing;
-    }
-  }
-
-  .markdown-editor-module-controls {
-    width: 6rem;
-    display: flex;
-    flex-direction: row;
-    gap: 0.25rem;
-    align-items: center;
-  }
-
-  .markdown-editor-module-content-focused {
-    background-color: rgba(158, 149, 149, 0.05);
-  }
-}
-</style>