@grandaniel/vue-markdown-editor 1.0.0

package/src/components/MarkdownEditor/Modules/MarkdownModuleHeadline2.vue

@@ -0,0 +1,60 @@
+<template>
+  <EditorContent
+    ref="editorRef"
+    :editor="editor"
+  />
+</template>
+
+<script lang="ts" setup>
+import StarterKit from "@tiptap/starter-kit";
+import { EditorContent, useEditor } from "@tiptap/vue-3";
+import { ref } from "vue";
+import useReflectiveState from "../Composable/useReflectiveState";
+import { HeadingDocument, PreventNewline } from "../TipTap/SingleLineExtension";
+import type { TextishEmits } from "../Types/TextishEmits";
+import type MarkdownModuleTextState from "./MarkdownModuleTextState";
+
+const modelValue = defineModel<MarkdownModuleTextState>({
+  required: true,
+});
+
+const editorRef = ref<InstanceType<typeof EditorContent>>();
+
+const emit = defineEmits<TextishEmits>();
+
+const state = useReflectiveState({
+  modelRef: modelValue,
+  emit,
+  editorRef,
+});
+
+const editor = useEditor({
+  extensions: [
+    HeadingDocument,
+    StarterKit.configure({
+      document: false,
+      paragraph: false,
+      heading: {
+        levels: [2],
+      },
+      codeBlock: false,
+      blockquote: false,
+      horizontalRule: false,
+      hardBreak: false,
+      bulletList: false,
+      orderedList: false,
+      listItem: false,
+    }),
+    PreventNewline,
+  ],
+  content: `<h2>${state.editorContent.value}</h2>`,
+  onUpdate: (event) => state.handleTipTapUpdateEvent(event),
+});
+
+defineExpose(state.expose);
+</script>
+
+<style lang="scss" scoped>
+@use "../Styles/Mixins.scss" as *;
+@include reset-contenteditable;
+</style>

package/src/components/MarkdownEditor/Modules/MarkdownModuleHeadline3.vue

@@ -0,0 +1,61 @@
+<template>
+  <EditorContent
+    ref="editorRef"
+    :editor="editor"
+  />
+</template>
+
+<script lang="ts" setup>
+import StarterKit from "@tiptap/starter-kit";
+import { EditorContent, useEditor } from "@tiptap/vue-3";
+import { ref } from "vue";
+import useReflectiveState from "../Composable/useReflectiveState";
+import { HeadingDocument, PreventNewline } from "../TipTap/SingleLineExtension";
+import type { TextishEmits } from "../Types/TextishEmits";
+import type MarkdownModuleTextState from "./MarkdownModuleTextState";
+
+const modelValue = defineModel<MarkdownModuleTextState>({
+  required: true,
+});
+
+const editorRef = ref<InstanceType<typeof EditorContent>>();
+
+const emit = defineEmits<TextishEmits>();
+
+const state = useReflectiveState({
+  modelRef: modelValue,
+  emit,
+  editorRef,
+});
+
+const editor = useEditor({
+  extensions: [
+    HeadingDocument,
+    StarterKit.configure({
+
+      document: false,
+      paragraph: false,
+      heading: {
+        levels: [3],
+      },
+      codeBlock: false,
+      blockquote: false,
+      horizontalRule: false,
+      hardBreak: false,
+      bulletList: false,
+      orderedList: false,
+      listItem: false,
+    }),
+    PreventNewline,
+  ],
+  content: `<h3>${state.editorContent.value}</h3>`,
+  onUpdate: (event) => state.handleTipTapUpdateEvent(event),
+});
+
+defineExpose(state.expose);
+</script>
+
+<style lang="scss" scoped>
+@use "../Styles/Mixins.scss" as *;
+@include reset-contenteditable;
+</style>

package/src/components/MarkdownEditor/Modules/MarkdownModuleImage.vue

@@ -0,0 +1,185 @@
+<template>
+  <div
+    ref="divRef"
+    class="markdown-module-image"
+    @click="handleClick"
+  >
+    <img
+      :src="modelValue.src"
+      :alt="modelValue.alt"
+    >
+    <span v-if="modelValue.alt">{{ modelValue.caption }}</span>
+
+    <MarkdownEditorImageContextMenu
+      v-if="showContextMenu"
+      :x="contextMenuPosition.x"
+      :y="contextMenuPosition.y"
+      @edit-attributes="openAttributesModal"
+    />
+
+    <MarkdownEditorModal
+      :show="showModal"
+      title="Edit Image Attributes"
+      @close="closeModal"
+      @confirm="saveAttributes"
+    >
+      <div class="markdown-module-image-form">
+        <div class="markdown-module-image-form-field">
+          <label for="image-src">Image Source (URL)</label>
+          <input
+            id="image-src"
+            v-model="editForm.src"
+            type="text"
+            placeholder="https://example.com/image.jpg"
+          >
+        </div>
+
+        <div class="markdown-module-image-form-field">
+          <label for="image-alt">Alt Text</label>
+          <input
+
+            id="image-alt"
+            v-model="editForm.alt"
+            type="text"
+            placeholder="Description of the image"
+          >
+        </div>
+
+        <div class="markdown-module-image-form-field">
+          <label for="image-caption">Caption</label>
+          <input
+            id="image-caption"
+            v-model="editForm.caption"
+            type="text"
+            placeholder="Optional caption"
+          >
+        </div>
+      </div>
+    </MarkdownEditorModal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import MarkdownEditorModal from "../MarkdownEditorModal.vue";
+import type MarkdownModuleImageState from "./MarkdownModuleImageState";
+
+const divRef = ref<HTMLDivElement>();
+
+const modelValue = defineModel<MarkdownModuleImageState>({
+  required: true,
+});
+
+// Context menu state
+const showContextMenu = ref(false);
+const contextMenuPosition = ref({ x: 0, y: 0 });
+
+// Modal state
+const showModal = ref(false);
+const editForm = ref({
+  src: "",
+  alt: "",
+  caption: "",
+});
+
+function handleClick(event: MouseEvent) {
+  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  contextMenuPosition.value = {
+    x: event.clientX,
+    y: rect.bottom + 5,
+  };
+  showContextMenu.value = true;
+}
+
+function openAttributesModal() {
+  showContextMenu.value = false;
+  editForm.value = {
+    src: modelValue.value.src || "",
+    alt: modelValue.value.alt || "",
+    caption: modelValue.value.caption || "",
+  };
+  showModal.value = true;
+}
+
+function closeModal() {
+  showModal.value = false;
+}
+
+function saveAttributes() {
+  modelValue.value.src = editForm.value.src;
+  modelValue.value.alt = editForm.value.alt;
+  modelValue.value.caption = editForm.value.caption;
+  showModal.value = false;
+}
+
+function focus() {
+  if (divRef.value) {
+    divRef.value.focus();
+  }
+}
+
+defineExpose({ focus });
+</script>
+
+<style lang="scss" scoped>
+.markdown-module-image {
+  cursor: pointer;
+  position: relative;
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  span {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+}
+
+.markdown-module-image-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.markdown-module-image-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #374151;
+  }
+
+  input {
+    padding: 0.625rem 0.875rem;
+    font-size: 0.875rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    background: #ffffff;
+    color: #111827;
+    transition: all 0.15s ease;
+
+    &:focus {
+      outline: none;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    &::placeholder {
+      color: #9ca3af;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+@use "../Styles/Mixins.scss" as *;
+@include reset-contenteditable;
+</style>

package/src/components/MarkdownEditor/Modules/MarkdownModuleImageState.ts

@@ -0,0 +1,10 @@
+export default class MarkdownModuleImageState {
+  src: string;
+  alt: string;
+  caption: string;
+
+  constructor(object: MarkdownModuleImageState) {
+    Object.assign(this, object);
+  }
+}
+

package/src/components/MarkdownEditor/Modules/MarkdownModuleList.vue

@@ -0,0 +1,7 @@
+<template>
+  <div />
+</template>
+
+<script lang="ts" setup></script>
+
+<style></style>

package/src/components/MarkdownEditor/Modules/MarkdownModuleListState.ts

@@ -0,0 +1,10 @@
+import type MarkdownModuleTextState from "./MarkdownModuleTextState";
+
+export default class MarkdownModuleListState {
+  items: MarkdownModuleTextState[];
+
+  constructor(object: MarkdownModuleListState) {
+    Object.assign(this, object);
+  }
+}
+

package/src/components/MarkdownEditor/Modules/MarkdownModuleParagraph.vue

@@ -0,0 +1,54 @@
+<template>
+  <EditorContent
+    ref="editorRef"
+    :editor="editor"
+  />
+</template>
+
+<script lang="ts" setup>
+import { Placeholder } from "@tiptap/extensions";
+import StarterKit from "@tiptap/starter-kit";
+import { EditorContent, useEditor } from "@tiptap/vue-3";
+import { ref } from "vue";
+import useReflectiveState from "../Composable/useReflectiveState";
+import { PreventNewline } from "../TipTap/SingleLineExtension";
+import type { TextishEmits } from "../Types/TextishEmits";
+import type MarkdownModuleTextState from "./MarkdownModuleTextState";
+
+const modelValue = defineModel<MarkdownModuleTextState>({
+  required: true,
+});
+
+const editorRef = ref<InstanceType<typeof EditorContent>>();
+
+const emit = defineEmits<TextishEmits>();
+
+const state = useReflectiveState({
+  modelRef: modelValue,
+  emit,
+  editorRef,
+});
+
+const editor = useEditor({
+  extensions: [
+    Placeholder.configure({
+      placeholder: "Type something...",
+    }),
+    StarterKit.configure({
+      heading: false,
+      codeBlock: false,
+      blockquote: false,
+      horizontalRule: false,
+      hardBreak: false,
+    }),
+    PreventNewline,
+  ],
+  content: state.editorContent.value,
+  onUpdate: (event) => state.handleTipTapUpdateEvent(event),
+});
+
+defineExpose(state.expose);
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/MarkdownEditor/Modules/MarkdownModuleTextState.ts

@@ -0,0 +1,8 @@
+export default class MarkdownModuleTextState {
+  text: string;
+
+  constructor(object: MarkdownModuleTextState) {
+    Object.assign(this, object);
+  }
+}
+

package/src/components/MarkdownEditor/Modules/__tests__/MarkdownModuleHeadline1.test.js

@@ -0,0 +1,20 @@
+import { shallowMount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import MarkdownModuleHeadline1 from "../MarkdownModuleHeadline1.vue";
+import MarkdownModuleTextState from "../MarkdownModuleTextState";
+describe("MarkdownModuleHeadline1", () => {
+    function getComponent() {
+        return shallowMount(MarkdownModuleHeadline1, {
+            props: {
+                modelValue: new MarkdownModuleTextState({ text: "" }),
+            },
+        });
+    }
+    it("renders correctly with default props", async () => {
+        // Arrange
+        const wrapper = getComponent();
+        // Act
+        // Assert
+        expect(wrapper.element).toMatchSnapshot();
+    });
+});

package/src/components/MarkdownEditor/Modules/__tests__/MarkdownModuleHeadline1.test.ts

@@ -0,0 +1,25 @@
+import { shallowMount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import MarkdownModuleHeadline1 from "../MarkdownModuleHeadline1.vue";
+import MarkdownModuleTextState from "../MarkdownModuleTextState";
+
+describe("MarkdownModuleHeadline1", () => {
+  function getComponent() {
+    return shallowMount(MarkdownModuleHeadline1, {
+      props: {
+        modelValue: new MarkdownModuleTextState({ text: "" }),
+      },
+    });
+  }
+
+  it("renders correctly with default props", async () => {
+    // Arrange
+    const wrapper = getComponent();
+
+    // Act
+
+    // Assert
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
+

package/src/components/MarkdownEditor/Modules/__tests__/__snapshots__/MarkdownModuleHeadline1.test.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MarkdownModuleHeadline1 > renders correctly with default props 1`] = `
+<editor-content-stub
+  data-v-e0053ac5=""
+/>
+`;

package/src/components/MarkdownEditor/Styles/Mixins.scss

@@ -0,0 +1,7 @@
+@mixin reset-contenteditable {
+  * {
+    outline: none;
+    border: none;
+    background: transparent;
+  }
+}

package/src/components/MarkdownEditor/TipTap/SingleLineExtension.ts

@@ -0,0 +1,21 @@
+import { Extension } from "@tiptap/core";
+import { Document } from "@tiptap/extension-document";
+
+export const SingleLineDocument = Document.extend({
+  content: "block",
+});
+
+export const HeadingDocument = Document.extend({
+  content: "heading+",
+});
+
+export const PreventNewline = Extension.create({
+  name: "preventNewline",
+  addKeyboardShortcuts() {
+    return {
+      "Enter": () => true,
+      "Shift-Enter": () => true,
+    };
+  },
+});
+

package/src/components/MarkdownEditor/Types/MarkdownAstNode.ts

@@ -0,0 +1,22 @@
+import type MarkdownModuleImageState from "../Modules/MarkdownModuleImageState";
+import type MarkdownModuleTextState from "../Modules/MarkdownModuleTextState";
+import type MarkdownNodeType from "./MarkdownAstNodeType";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class MarkdownAstNode<TState extends object = Record<string, any>> {
+  id: symbol;
+  type: MarkdownNodeType;
+  componentState: TState;
+
+  editingState: {
+    cursorPosition: number;
+  };
+
+  constructor(value: Omit<MarkdownAstNode<TState>, "id">) {
+    Object.assign(this, value);
+    this.id = Symbol();
+  }
+}
+
+export type TextNode = MarkdownAstNode<MarkdownModuleTextState>;
+export type ImageNode = MarkdownAstNode<MarkdownModuleImageState>;

package/src/components/MarkdownEditor/Types/MarkdownAstNodeType.ts

@@ -0,0 +1,28 @@
+enum MarkdownNodeType {
+  PARAGRAPH,
+  HEADLINE1,
+  HEADLINE2,
+  HEADLINE3,
+  IMAGE,
+  LIST,
+}
+
+export type TextishNodeType
+  = | MarkdownNodeType.PARAGRAPH
+    | MarkdownNodeType.LIST
+    | MarkdownNodeType.HEADLINE1
+    | MarkdownNodeType.HEADLINE2
+    | MarkdownNodeType.HEADLINE3;
+
+export function isTextNodeType(type: MarkdownNodeType): type is TextishNodeType {
+  return (
+    type === MarkdownNodeType.PARAGRAPH
+    || type === MarkdownNodeType.LIST
+    || type === MarkdownNodeType.HEADLINE1
+    || type === MarkdownNodeType.HEADLINE2
+    || type === MarkdownNodeType.HEADLINE3
+  );
+}
+
+export default MarkdownNodeType;
+

package/src/components/MarkdownEditor/Types/TextishEmits.ts

@@ -0,0 +1,14 @@
+import type MarkdownModuleTextState from "../Modules/MarkdownModuleTextState";
+import type MarkdownAstNodeType from "./MarkdownAstNodeType";
+
+export interface TextishEmits {
+  "update:model-value": [componentState: MarkdownModuleTextState];
+  "update:cursor-position": [cursorPosition: number];
+  "change-type": [newType: MarkdownAstNodeType];
+}
+
+export interface TextishEmitFunction {
+  (event: "update:model-value", value: MarkdownModuleTextState): void;
+  (event: "update:cursor-position", value: number): void;
+  (event: "change-type", value: MarkdownAstNodeType): void;
+}

package/src/components/MarkdownEditor/index.ts

@@ -0,0 +1 @@
+export { default as MarkdownEditor } from './MarkdownEditor.vue';

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './MarkdownEditor/';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components/';

package/tsconfig.app.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+  }
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "include": ["vite.config.ts", "eslint.config.ts"],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

package/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { fileURLToPath, URL } from 'node:url';
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  build: {
+    emptyOutDir: false,
+    lib: {
+        formats: ['es'],
+        entry: resolve(import.meta.dirname, 'src', 'index.ts'),
+        fileName: 'vue-markdown-editor',
+    },
+    rollupOptions: {
+        external: ['vue', 'date-fns', '@date-fns/tz', '@floating-ui/vue', '@vueuse/core'],
+    },
+},
+});

package/vitest.config.ts

@@ -0,0 +1,21 @@
+import { fileURLToPath } from 'node:url';
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config';
+import viteConfig from './vite.config';
+import { resolve } from 'node:path';
+
+export default mergeConfig(
+    viteConfig,
+    defineConfig({
+        test: {
+            environment: 'happy-dom',
+            include: ['src/**/*.test.ts'],
+            root: fileURLToPath(new URL('./', import.meta.url)),
+            coverage: {
+                reporter: ['lcov'],
+                reportsDirectory: resolve(__dirname, 'coverage'),
+                include: ['src/**/*.ts', 'src/**/*.vue'],
+                exclude: ['src/types'],
+            },
+        },
+    }),
+);