@grandaniel/vue-markdown-editor 1.0.0 → 1.1.0

package/package.json

@@ -1,23 +1,68 @@
 {
   "name": "@grandaniel/vue-markdown-editor",
-  "version": "1.0.0",
-  "main": "index.js",
+  "version": "1.1.0",
+  "description": "Vue 3 markdown editor component library.",
+  "main": "./dist/vue-markdown-editor.mjs",
+  "module": "./dist/vue-markdown-editor.mjs",
+  "private": false,
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-markdown-editor.mjs",
+      "default": "./dist/vue-markdown-editor.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "vue",
+    "vue3",
+    "markdown",
+    "editor",
+    "tiptap"
+  ],
   "author": "danielgran",
   "repository": {
-    "url": "https://github.com/danielgran/vue-markdown-editor"
+    "type": "git",
+    "url": "git+https://github.com/danielgran/vue-markdown-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/danielgran/vue-markdown-editor/issues"
+  },
+  "homepage": "https://github.com/danielgran/vue-markdown-editor#readme",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "engines": {
+    "node": ">=22"
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vue-tsc -p tsconfig.build.json && vite build",
     "type-check": "vue-tsc --noEmit",
     "preview": "vite preview",
     "test": "vitest run"
   },
   "license": "ISC",
-  "description": "",
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.vue"
+  ],
   "devDependencies": {
+    "@types/mdast": "^4.0.4",
     "@tsconfig/node22": "^22.0.5",
     "@types/node": "^22.19.19",
+    "@types/sortablejs": "^1.15.8",
+    "@types/turndown": "^5.0.5",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/coverage-v8": "^4.1.6",
     "@vue/test-utils": "^2.4.10",
@@ -38,6 +83,9 @@
     "@vueuse/core": "^14.3.0",
     "@vueuse/integrations": "^14.3.0",
     "marked": "^18.0.3",
+    "remark-parse": "^11.0.0",
+    "sortablejs": "^1.15.6",
+    "unified": "^11.0.5",
     "turndown": "^7.2.4"
   }
 }

package/src/components/MarkdownEditor/Composable/HeadlineTypeMap.ts

@@ -1,36 +0,0 @@
-import MarkdownNodeType from "../Types/MarkdownAstNodeType";
-
-export interface HeadlineTypeEntry {
-  prefix: string;
-  type: MarkdownNodeType;
-  depth: number;
-}
-
-export const HEADLINE_TYPE_MAP: HeadlineTypeEntry[] = [
-  {
-    prefix: "###",
-    type: MarkdownNodeType.HEADLINE3,
-    depth: 3,
-  },
-  {
-    prefix: "##",
-    type: MarkdownNodeType.HEADLINE2,
-    depth: 2,
-  },
-  {
-    prefix: "#",
-    type: MarkdownNodeType.HEADLINE1,
-    depth: 1,
-  },
-];
-
-export function detectHeadlineTypeFromContent(content: string, cursorPosition: number): MarkdownNodeType | null {
-  const matchedEntry = HEADLINE_TYPE_MAP.find(entry => content.startsWith(entry.prefix));
-  if (!matchedEntry) return null;
-
-  if (matchedEntry.prefix.length + 2 === cursorPosition) {
-    return matchedEntry.type;
-  }
-
-  return null;
-}

package/src/components/MarkdownEditor/Composable/useMarkdownEditor.ts

@@ -1,21 +0,0 @@
-import { type ModelRef, ref } from "vue";
-import useMarkdownProcessor from "./useMarkdownProcessor";
-
-export function useMarkdownEditor(initialContent: string = "") {
-  const markdownContent = ref<string>(initialContent);
-
-  const { markdownNodes, deleteNode, addBlankNode, replaceNodeType, moveNode } = useMarkdownProcessor(
-    markdownContent as ModelRef<string | undefined>,
-  );
-
-  return {
-    markdownContent,
-    markdownNodes,
-    deleteNode,
-    addBlankNode,
-    replaceNodeType,
-    moveNode,
-  };
-}
-
-export type MarkdownEditorInstance = ReturnType<typeof useMarkdownEditor>;

package/src/components/MarkdownEditor/Composable/useMarkdownProcessor.ts

@@ -1,186 +0,0 @@
-import type { PhrasingContent } from "mdast";
-import remarkParse from "remark-parse";
-import { unified } from "unified";
-import { type ModelRef, nextTick, ref, watch } from "vue";
-import MarkdownNodeFactory from "../Factory/MarkdownNodeFactory";
-import { isTextNodeState } from "../MarkdownComponentRegistry";
-import type { MarkdownAstNode } from "../Types/MarkdownAstNode";
-import MarkdownNodeType, { isTextNodeType } from "../Types/MarkdownAstNodeType";
-
-function useMarkdownProcessor(modelValue: ModelRef<string | undefined>) {
-  const markdownNodes = ref<Array<MarkdownAstNode>>([]);
-  const isInternalUpdate = ref(false);
-
-  compileMarkdown(modelValue.value ?? "");
-
-  watch(
-    markdownNodes,
-    () => {
-      isInternalUpdate.value = true;
-      modelValue.value = serializeMarkdown();
-      nextTick(() => {
-        isInternalUpdate.value = false;
-      });
-    },
-    { deep: true },
-  );
-
-  watch(modelValue, (newValue) => {
-    if (isInternalUpdate.value) return;
-    markdownNodes.value = [];
-    compileMarkdown(newValue ?? "");
-  });
-
-  function compileMarkdown(markdown: string) {
-    const processor = unified().use(remarkParse);
-    const tree = processor.parse(markdown);
-
-    for (const node of tree.children) {
-      if (node.type === "paragraph" && node.children[0]?.type === "text") {
-        const text = node.children[0].value ?? "";
-
-        // Custom Component Syntax here
-        // eslint-disable-next-line @stylistic/quotes
-        if (text.startsWith('"""') && text.endsWith('"""')) {
-          const moduleName = (text.split("\n")[0] ?? "").slice(3).trim();
-          if (moduleName === "MarkdownModuleImage") {
-            const srcMatch = text.match(/src:\s*(\S+)/);
-            const altMatch = text.match(/alt:\s*(.+)/);
-            const captionMatch = text.match(/caption:\s*(.+)/);
-
-            markdownNodes.value.push(
-              MarkdownNodeFactory.createImageNode(
-                srcMatch?.[1] ?? "",
-                altMatch?.[1] ?? "",
-                captionMatch?.[1] ?? "",
-              ),
-            );
-            continue;
-          }
-        }
-
-        // Regular text node
-
-        const phrasingContent = phrasingContentToText(node.children);
-
-        markdownNodes.value.push(MarkdownNodeFactory.createTextNode(MarkdownNodeType.PARAGRAPH, phrasingContent));
-      } else if (node.type === "heading" && node.depth === 1) {
-        const phrasingContent = phrasingContentToText(node.children);
-
-        markdownNodes.value.push(MarkdownNodeFactory.createTextNode(MarkdownNodeType.HEADLINE1, phrasingContent));
-      } else if (node.type === "heading" && node.depth === 2) {
-        markdownNodes.value.push(
-          MarkdownNodeFactory.createTextNode(MarkdownNodeType.HEADLINE2, phrasingContentToText(node.children)),
-        );
-      } else if (node.type === "heading" && node.depth === 3) {
-        markdownNodes.value.push(
-          MarkdownNodeFactory.createTextNode(MarkdownNodeType.HEADLINE3, phrasingContentToText(node.children)),
-        );
-      }
-    }
-  }
-
-  function serializeMarkdown(): string {
-    return markdownNodes.value
-      .map((node) => {
-        if (isTextNodeType(node.type)) {
-          const prefix = {
-            [MarkdownNodeType.PARAGRAPH]: "",
-            [MarkdownNodeType.LIST]: "",
-            [MarkdownNodeType.HEADLINE1]: "# ",
-            [MarkdownNodeType.HEADLINE2]: "## ",
-            [MarkdownNodeType.HEADLINE3]: "### ",
-          }[node.type];
-          return `${prefix}${node.componentState.text}`;
-        }
-        if (node.type === MarkdownNodeType.IMAGE) {
-          return `"""MarkdownModuleImage
-src: ${node.componentState.src}
-alt: ${node.componentState.alt}
-caption: ${node.componentState.caption}
-"""`;
-        }
-        return "";
-      })
-      .join("\n\n");
-  }
-
-  function deleteNode(nodeIndex: number) {
-    nextTick(() => {
-      markdownNodes.value.splice(nodeIndex, 1);
-    });
-  }
-
-  function addBlankNode(nodeIndex: number) {
-    const newNode = MarkdownNodeFactory.createBlankParagraph();
-
-    if (nodeIndex !== undefined) {
-      markdownNodes.value.splice(nodeIndex + 1, 0, newNode);
-    } else {
-      markdownNodes.value.push(newNode);
-    }
-
-    return nodeIndex + 1;
-  }
-
-  function createNodeWithType(text: string, newType: MarkdownNodeType): MarkdownAstNode {
-    if (isTextNodeType(newType)) {
-      return MarkdownNodeFactory.createTextNode(newType, text);
-    } else if (newType === MarkdownNodeType.IMAGE) {
-      return MarkdownNodeFactory.createImageNode("", "", "");
-    } else {
-      throw new Error(`Unsupported node type: ${newType}`);
-    }
-  }
-
-  function replaceNodeType(
-    node: MarkdownAstNode,
-    newType: MarkdownNodeType,
-  ): { newNode: MarkdownAstNode; index: number } | null {
-    // If the node is already of the desired type, do nothing
-    if (node.type === newType) return null;
-
-    const nodeIndex = markdownNodes.value.indexOf(node);
-    if (nodeIndex === -1) return null;
-
-    const currentText = isTextNodeState(node) ? node.componentState.text : "";
-    const newNode = createNodeWithType(currentText, newType);
-
-    markdownNodes.value.splice(nodeIndex, 1, newNode);
-
-    return { newNode, index: nodeIndex };
-  }
-
-  function moveNode(fromIndex: number, toIndex: number) {
-    const [node] = markdownNodes.value.splice(fromIndex, 1);
-    if (node) markdownNodes.value.splice(toIndex, 0, node);
-  }
-
-  return {
-    markdownNodes,
-    deleteNode,
-    addBlankNode,
-    replaceNodeType,
-    moveNode,
-  };
-}
-
-export default useMarkdownProcessor;
-
-function phrasingContentToText(phrasingContent: PhrasingContent[]): string {
-  let result = "";
-
-  for (const content of phrasingContent) {
-    if (content.type === "text") {
-      result += content.value;
-    }
-    if (content.type === "strong") {
-      result += `**${phrasingContentToText(content.children)}**`;
-    }
-    if (content.type === "emphasis") {
-      result += `*${phrasingContentToText(content.children)}*`;
-    }
-  }
-
-  return result;
-}

package/src/components/MarkdownEditor/Composable/useReflectiveState.ts

@@ -1,84 +0,0 @@
-import type { EditorContent, EditorEvents } from "@tiptap/vue-3";
-import { marked } from "marked";
-import TurndownService from "turndown";
-import { nextTick, ref, type ModelRef, type Ref } from "vue";
-import type MarkdownModuleTextState from "../Modules/MarkdownModuleTextState";
-import type { TextishEmitFunction } from "../Types/TextishEmits";
-import { detectHeadlineTypeFromContent } from "./HeadlineTypeMap";
-
-const turndownService = new TurndownService();
-// Override the default escape function to prevent escaping of special characters,
-turndownService.escape = (text: string) => text;
-
-// Headings and paragraphs are represented by MarkdownNodeType, not by the content text itself.
-// Only inline markup (bold, italic, etc.) should be preserved as markdown syntax.
-// Without this, TurndownService would convert <h2>text</h2> → "## text", which would be stored
-// in componentState.text and cause the heading prefix to appear literally inside the TipTap editor
-// on the next initialization (especially visible after HMR).
-turndownService.addRule("blockElementsToInline", {
-  filter: ["h1", "h2", "h3", "h4", "h5", "h6", "p"],
-  replacement: (content) => content,
-});
-
-function markdownToHtml(markdown: string): string {
-  return marked.parseInline(markdown) as string;
-}
-
-function htmlToMarkdown(html: string): string {
-  return turndownService.turndown(html);
-}
-
-function useReflectiveState<T extends MarkdownModuleTextState>(options: {
-  modelRef: ModelRef<T>;
-  emit: TextishEmitFunction;
-  editorRef?: Ref<InstanceType<typeof EditorContent> | undefined>;
-  containingHtmlElementRef?: Ref<HTMLElement | undefined>;
-}) {
-  const editorContent = ref(markdownToHtml(options.modelRef.value.text));
-
-  async function handleTipTapUpdateEvent(event: EditorEvents["update"]) {
-    emitHtml(event.editor.getHTML());
-    emitCursorPosition(event.transaction.selection.anchor);
-
-    // Wait for the DOM to update with the new content before trying to detect type changes
-    await nextTick();
-    const markdown = htmlToMarkdown(event.editor.getHTML());
-    detectInlineTypeChange(markdown, event.transaction.selection.anchor);
-  }
-
-  function detectInlineTypeChange(markdown: string, cursorPosition: number) {
-    const detectedType = detectHeadlineTypeFromContent(markdown, cursorPosition);
-    if (!detectedType) return;
-
-    options.emit("change-type", detectedType);
-  }
-
-  function handleKeyDown(event: KeyboardEvent) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      return;
-    }
-  }
-  function emitHtml(html: string) {
-    const markdown = htmlToMarkdown(html);
-    options.modelRef.value.text = markdown;
-    options.emit("update:model-value", { text: markdown });
-  }
-
-  function emitCursorPosition(cursorPosition: number) {
-    options.emit("update:cursor-position", cursorPosition);
-  }
-
-  function focus() {
-    if (options.editorRef?.value?.editor) {
-      options.editorRef.value.editor.commands.focus();
-      return;
-    }
-    options.containingHtmlElementRef?.value?.focus();
-  }
-
-  return { handleTipTapUpdateEvent, handleKeyDown, editorContent, expose: { focus } };
-}
-
-export { markdownToHtml };
-export default useReflectiveState;

package/src/components/MarkdownEditor/ContextMenu/MarkdownEditorContextMenu.vue

@@ -1,38 +0,0 @@
-<template>
-  <div
-    class="markdown-editor-context-menu"
-    :style="positionStyle"
-  >
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = defineProps<{
-  x: number;
-  y: number;
-}>();
-
-const positionStyle = computed(() => ({
-  left: `${props.x}px`,
-  top: `${props.y}px`,
-}));
-</script>
-
-<style lang="scss" scoped>
-.markdown-editor-context-menu {
-  position: fixed;
-  z-index: 1000;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.5rem;
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  padding: 0.25rem;
-  display: flex;
-  gap: 0.25rem;
-}
-</style>

package/src/components/MarkdownEditor/ContextMenu/MarkdownEditorContextMenuBlockItem.vue

@@ -1,43 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="markdown-editor-context-menu-block-item"
-    @click="$emit('click')"
-  >
-    <slot />
-  </button>
-</template>
-
-<script setup lang="ts">
-defineEmits<{
-  click: [];
-}>();
-</script>
-
-<style lang="scss" scoped>
-.markdown-editor-context-menu-block-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 0.875rem;
-  border: none;
-  background: transparent;
-  border-radius: 0.375rem;
-  cursor: pointer;
-  color: #374151;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.15s ease;
-  width: 100%;
-  text-align: left;
-  white-space: nowrap;
-
-  &:hover {
-    background: #f3f4f6;
-  }
-
-  &:active {
-    transform: scale(0.98);
-  }
-}
-</style>

package/src/components/MarkdownEditor/ContextMenu/MarkdownEditorContextMenuInlineItem.vue

@@ -1,52 +0,0 @@
-<template>
-  <button
-    type="button"
-    class="markdown-editor-context-menu-inline-item"
-    :class="{ 'is-active': active }"
-    @click="$emit('click')"
-  >
-    <slot />
-  </button>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  active?: boolean;
-}>();
-
-defineEmits<{
-  click: [];
-}>();
-</script>
-
-<style lang="scss" scoped>
-.markdown-editor-context-menu-inline-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-  border: none;
-  background: transparent;
-  border-radius: 0.375rem;
-  cursor: pointer;
-  color: #374151;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.15s ease;
-  min-width: 2rem;
-  min-height: 2rem;
-
-  &:hover {
-    background: #f3f4f6;
-  }
-
-  &.is-active {
-    background: #dbeafe;
-    color: #1e40af;
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-}
-</style>

package/src/components/MarkdownEditor/ContextMenu/MarkdownEditorImageContextMenu.vue

@@ -1,35 +0,0 @@
-<template>
-  <MarkdownEditorContextMenu
-    :x="x"
-    :y="y"
-  >
-    <div class="markdown-editor-image-context-menu-content">
-      <MarkdownEditorContextMenuBlockItem @click="emit('edit-attributes')">
-        Edit Attributes
-      </MarkdownEditorContextMenuBlockItem>
-      <MarkdownEditorContextMenuBlockItem @click="emit('edit-attributes')">
-        Edit Attributes
-      </MarkdownEditorContextMenuBlockItem>
-    </div>
-  </MarkdownEditorContextMenu>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  x: number;
-  y: number;
-}>();
-
-const emit = defineEmits<{
-  "edit-attributes": [];
-}>();
-</script>
-
-<style lang="scss" scoped>
-.markdown-editor-image-context-menu-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  min-width: 10rem;
-}
-</style>

package/src/components/MarkdownEditor/ContextMenu/MarkdownEditorTextSelectionContextMenu.vue

@@ -1,45 +0,0 @@
-<template>
-  <MarkdownEditorContextMenu
-    :x="x"
-    :y="y"
-  >
-    <MarkdownEditorContextMenuInlineItem
-      :active="isActive.bold"
-      @click="emit('toggle-bold')"
-    >
-      <strong>B</strong>
-    </MarkdownEditorContextMenuInlineItem>
-
-    <MarkdownEditorContextMenuInlineItem
-      :active="isActive.italic"
-      @click="emit('toggle-italic')"
-    >
-      <em>I</em>
-    </MarkdownEditorContextMenuInlineItem>
-
-    <MarkdownEditorContextMenuInlineItem
-      :active="isActive.underline"
-      @click="emit('toggle-underline')"
-    >
-      <span style="text-decoration: underline">U</span>
-    </MarkdownEditorContextMenuInlineItem>
-  </MarkdownEditorContextMenu>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  x: number;
-  y: number;
-  isActive: {
-    bold: boolean;
-    italic: boolean;
-    underline: boolean;
-  };
-}>();
-
-const emit = defineEmits<{
-  "toggle-bold": [];
-  "toggle-italic": [];
-  "toggle-underline": [];
-}>();
-</script>

package/src/components/MarkdownEditor/Factory/MarkdownNodeFactory.ts

@@ -1,49 +0,0 @@
-import registry from "../MarkdownComponentRegistry";
-import type MarkdownModuleImageState from "../Modules/MarkdownModuleImageState";
-import type MarkdownModuleListState from "../Modules/MarkdownModuleListState";
-import MarkdownModuleTextState from "../Modules/MarkdownModuleTextState";
-import { MarkdownAstNode } from "../Types/MarkdownAstNode";
-import MarkdownNodeType, { type TextishNodeType } from "../Types/MarkdownAstNodeType";
-
-class MarkdownNodeFactory {
-  private createNode<TState extends object>(
-    type: MarkdownNodeType,
-    stateData: Partial<TState>,
-  ): MarkdownAstNode<TState> {
-    const StateConstructor = registry[type].stateType as unknown as new (object: Partial<TState>) => TState;
-
-    const componentState = new StateConstructor(stateData as TState);
-
-    return new MarkdownAstNode<TState>({
-      type,
-      componentState,
-      editingState: {
-        cursorPosition: 0,
-      },
-    });
-  }
-
-  createTextNode(type: TextishNodeType, text: string): MarkdownAstNode<MarkdownModuleTextState> {
-    return this.createNode<MarkdownModuleTextState>(type, { text });
-  }
-
-  createImageNode(src: string, alt: string, caption: string = ""): MarkdownAstNode<MarkdownModuleImageState> {
-    return this.createNode<MarkdownModuleImageState>(MarkdownNodeType.IMAGE, {
-      src,
-      alt,
-      caption,
-    } as MarkdownModuleImageState);
-  }
-
-  createListNode(items: string[]): MarkdownAstNode<MarkdownModuleListState> {
-    return this.createNode<MarkdownModuleListState>(MarkdownNodeType.LIST, {
-      items: items.map(text => new MarkdownModuleTextState({ text })),
-    } as MarkdownModuleListState);
-  }
-
-  createBlankParagraph(): MarkdownAstNode<MarkdownModuleTextState> {
-    return this.createTextNode(MarkdownNodeType.PARAGRAPH, "");
-  }
-}
-
-export default new MarkdownNodeFactory();