@grandaniel/vue-markdown-editor 1.1.1 → 1.1.3-dev.25ab77b

package/README.md

@@ -1,6 +1,41 @@
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="docs/img/editor-1.png">
+  <img alt="vue-markdown-editor — A block-based, Notion-like markdown editor for Vue 3" src="docs/img/editor-1.png">
+</picture>
+
 # @grandaniel/vue-markdown-editor
 
-Vue 3 markdown editor component library.
+> A block-based, Notion-like Markdown editor for Vue 3. UI-first. Powered by [TipTap](https://tiptap.dev/).
+
+**@grandaniel/vue-markdown-editor** is a rich block-editing experience where every Markdown element — headlines, paragraphs, lists, images — is its own independently editable, draggable block. Built for content-first workflows: write, reorder, and format with keyboard shortcuts and an always-visible drag handle.
+
+Images are first-class citizens: paste an image to auto-upload, then edit its **src**, **alt text**, and **caption** in a dedicated modal. The editor serializes back to clean Markdown automatically.
+
+---
+
+## Table of Contents
+
+- [Who uses it](#who-uses-it)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Keyboard Shortcuts](#keyboard-shortcuts)
+- [Image Upload](#image-upload)
+- [API Reference](#api-reference)
+- [Custom Styling](#custom-styling)
+- [Supply Chain Security](#supply-chain-security)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+## Who uses it
+
+| Project | How |
+|---|---|
+| **[heartbeat.systems](https://heartbeat.systems)** | Admin utility — content editors manage help articles, release notes, and in-app documentation through the block editor. |
+| **[markdownstud.io](https://markdownstud.io)** | AI writing assistant — the editor serves as the primary composition surface where users draft, review, and polish AI-generated content. |
+
+---
 
 ## Installation
 
@@ -8,16 +43,34 @@ Vue 3 markdown editor component library.
 npm install @grandaniel/vue-markdown-editor
 ```
 
+> **Peer dependency:** Vue `^3.5.0`  
+> **Node:** `>=22`  
+
+Import the component **and** the stylesheet:
+
+```ts
+import { MarkdownEditor, useMarkdownEditor } from "@grandaniel/vue-markdown-editor";
+import "@grandaniel/vue-markdown-editor/style.css";
+```
+
+---
+
 ## Quick Start
 
+The editor is driven by a composable: `useMarkdownEditor()` creates the reactive state, and `<MarkdownEditor>` renders it.
+
 ```vue
 <script setup lang="ts">
 import { ref } from "vue";
-import { MarkdownEditor, useMarkdownEditor } from "@grandaniel/vue-markdown-editor";
-import "@grandaniel/vue-markdown-editor/dist/vue-markdown-editor.css";
+import {
+  MarkdownEditor,
+  useMarkdownEditor,
+  type MarkdownAstNode,
+} from "@grandaniel/vue-markdown-editor";
+import "@grandaniel/vue-markdown-editor/style.css";
 
-const editor = useMarkdownEditor("# Hello\n\nStart writing...");
-const focusedNode = ref(null);
+const editor = useMarkdownEditor("# Hello, world!\n\nStart writing here…");
+const focusedNode = ref<MarkdownAstNode | null>(null);
 </script>
 
 <template>
@@ -27,3 +80,308 @@ const focusedNode = ref(null);
   />
 </template>
 ```
+
+### Reading the output
+
+The composable keeps the raw Markdown in sync automatically. Read it at any time:
+
+```ts
+console.log(editor.markdownContent.value);
+// "# Hello, world!\n\nStart writing here…"
+```
+
+You can also **programmatically set** the content:
+
+```ts
+editor.markdownContent.value = "## New heading\n\nFresh content.";
+```
+
+---
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|---|---|
+| <kbd>↑</kbd> / <kbd>↓</kbd> | Move focus between blocks |
+| <kbd>Enter</kbd> | Split current block → insert new paragraph below |
+| <kbd>Backspace</kbd> (empty block) | Delete the block, focus moves up |
+| <kbd>Delete</kbd> (empty block) | Delete the block, focus stays at same index |
+| Click blank area | Append a new empty paragraph at the bottom |
+
+### Auto type‑detection
+
+Type `# `, `## `, or `### ` at the start of a paragraph and the block auto‑converts to the matching heading level.
+
+---
+
+## Image Upload
+
+Images are first-class blocks with **src**, **alt text**, and **caption** fields. Right‑click any image → **Edit Attributes** to open the editing modal.
+
+### Paste‑to‑upload
+
+Pass an `imageUploadFunction` prop — any pasted image (`Ctrl+V`) from the clipboard will be sent through your upload handler and inserted as a new image block:
+
+```vue
+<script setup lang="ts">
+async function uploadImage(file: File): Promise<string> {
+  const formData = new FormData();
+  formData.append("image", file);
+
+  const res = await fetch("/api/upload", { method: "POST", body: formData });
+  const { url } = await res.json();
+  return url;
+}
+</script>
+
+<template>
+  <MarkdownEditor
+    :editor="editor"
+    :image-upload-function="uploadImage"
+  />
+</template>
+```
+
+The serialized Markdown uses a custom block syntax for images:
+
+```markdown
+"""MarkdownModuleImage
+src: https://example.com/photo.jpg
+alt: A scenic mountain view
+caption: Photo taken during the 2026 summit
+"""
+```
+
+> **Note:** `imageUploadFunction` is optional. Without it, pasted images from the clipboard are ignored.
+
+---
+
+## API Reference
+
+### `useMarkdownEditor(initialContent?: string)`
+
+Returns a reactive editor instance:
+
+| Member | Type | Description |
+|---|---|---|
+| `markdownContent` | `Ref<string>` | Reactive raw Markdown. Read to serialize, write to load content. |
+| `markdownNodes` | `Ref<MarkdownAstNode[]>` | Reactive array of AST nodes. |
+| `deleteNode(index)` | `(index: number) => void` | Remove the node at `index`. |
+| `addBlankNode(index?)` | `(index?: number) => number` | Insert an empty paragraph at `index` (or end). Returns the new index. |
+| `addNodeWithType(index, type, content?)` | `(index: number, type: MarkdownNodeType, content?: string) => number` | Insert a typed node. Returns the new index. |
+| `replaceNodeType(node, newType)` | `(node: MarkdownAstNode, type: MarkdownNodeType) => { newNode, index } \| null` | Convert between block types (e.g. paragraph → heading). |
+| `moveNode(from, to)` | `(fromIndex: number, toIndex: number) => void` | Programmatically reorder a block. |
+
+### `MarkdownEditor` props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `editor` | `MarkdownEditorInstance` | ✓ | Instance from `useMarkdownEditor()`. |
+| `focusedNode` | `MarkdownAstNode \| null` | — | For `v-model:focused-node` tracking. |
+| `imageUploadFunction` | `(file: File) => Promise<string>` | — | Async callback for paste‑to‑upload. |
+
+### `MarkdownEditor` emits
+
+| Event | Payload | Description |
+|---|---|---|
+| `update:focused-node` | `MarkdownAstNode \| null` | Fires when focus moves to a new block. |
+
+### `MarkdownEditor` slots
+
+| Slot | Description |
+|---|---|
+| `after-controls` | Injected inside every block, after the drag‑handle / add / delete controls. |
+
+### Exported types & utilities
+
+| Export | Kind |
+|---|---|
+| `MarkdownEditorInstance` | Type — return type of `useMarkdownEditor()`. |
+| `MarkdownAstNode` | Class — AST node with `id`, `type`, `componentState`, `editingState`. |
+| `MarkdownAstNodeType` | Enum — `PARAGRAPH`, `HEADLINE1`, `HEADLINE2`, `HEADLINE3`, `IMAGE`, `LIST`. |
+| `ImageNode` | Type alias — `MarkdownAstNode<MarkdownModuleImageState>`. |
+| `TextNode` | Type alias — `MarkdownAstNode<MarkdownModuleTextState>`. |
+| `TextishNodeType` | Type — union of `PARAGRAPH \| HEADLINE1 \| HEADLINE2 \| HEADLINE3 \| LIST`. |
+| `isTextNodeState(node)` | Type guard for text‑based nodes. |
+| `isTextNodeType(type)` | Type guard for text‑based node types. |
+| `MarkdownRenderer` | Component — renders Markdown to plain HTML. SSR‑safe. |
+
+---
+
+## MarkdownRenderer
+
+`<MarkdownRenderer>` converts a Markdown string to plain HTML. It uses the same `remark-parse` pipeline as the editor, so custom module blocks (like `"""MarkdownModuleImage"""`) render as rich `<figure>` elements automatically.
+
+The renderer is **SSR‑safe** — no browser APIs, no TipTap. It works in `nuxt generate`, `vite-ssg`, and any server‑side rendering context.
+
+```vue
+<script setup lang="ts">
+import { MarkdownRenderer } from "@grandaniel/vue-markdown-editor";
+
+const markdown = `# Hello World
+
+This is a **paragraph** with *inline* formatting.
+
+- List item 1
+- List item 2
+
+"""MarkdownModuleImage
+src: https://example.com/photo.jpg
+alt: A scenic view
+caption: Photo caption
+"""
+`;
+</script>
+
+<template>
+  <MarkdownRenderer :markdown="markdown" />
+</template>
+```
+
+### Live preview alongside the editor
+
+Bind the editor's reactive `markdownContent` to the renderer:
+
+```vue
+<script setup lang="ts">
+import { MarkdownEditor, MarkdownRenderer, useMarkdownEditor } from "@grandaniel/vue-markdown-editor";
+
+const editor = useMarkdownEditor("# Start writing…");
+</script>
+
+<template>
+  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+    <MarkdownEditor :editor="editor" />
+    <MarkdownRenderer :markdown="editor.markdownContent.value" />
+  </div>
+</template>
+```
+
+### Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `markdown` | `string` | ✓ | Raw Markdown string to render as HTML. |
+
+---
+
+## Custom Styling
+
+All components use scoped SCSS. To override styles, use **global CSS** with higher specificity, or Vue's `:deep()` combinator from a parent component.
+
+### CSS class reference
+
+| Class | Applies to |
+|---|---|
+| `.markdown-editor` | Root editor container |
+| `.markdown-editor-module` | Individual block wrapper — `.is-focused` when active |
+| `.markdown-editor-module-controls` | Left control bar (drag handle + add/delete buttons) |
+| `.markdown-editor-module-content` | Content area inside a block |
+| `.markdown-editor-module-content-focused` | Content area when the block is focused |
+| `.markdown-editor-focus-controls` | Row containing drag‑handle, delete, and add buttons |
+| `.drag-handle` | SortableJS drag handle (⠿) |
+| `.focus-control-btn` | Delete / Add buttons in the control bar |
+| `.markdown-editor-context-menu` | Floating block context menu (`z-index: 1000`) |
+| `.markdown-editor-context-menu-block-item` | Full‑width context menu button |
+| `.markdown-editor-context-menu-inline-item` | Inline toolbar button (`.is-active` when toggled) |
+| `.markdown-editor-modal-overlay` | Modal backdrop (`z-index: 9999`) |
+| `.markdown-editor-modal` | Modal container |
+| `.markdown-editor-modal-header` | Modal title bar |
+| `.markdown-editor-modal-title` | Modal heading text |
+| `.markdown-editor-modal-close` | Close (✕) button |
+| `.markdown-editor-modal-body` | Modal content area |
+| `.markdown-editor-modal-footer` | Modal action bar |
+| `.markdown-editor-modal-button` | Base modal button |
+| `.markdown-editor-modal-button-primary` | Primary (Save) button — blue |
+| `.markdown-editor-modal-button-secondary` | Secondary (Cancel) button — gray |
+| `.markdown-module-image` | Image block wrapper |
+| `.markdown-module-image-form` | Image edit form inside the modal |
+| `.markdown-module-image-form-field` | Form field group (label + input) |
+
+### Styling TipTap content
+
+Each text‑based block hosts its own TinyMCE‑style TipTap editor. Target `.tiptap` inside a block's content area:
+
+```css
+/* Make all TipTap editors use your font */
+.markdown-editor-module-content .tiptap {
+  font-family: "Georgia", serif;
+  font-size: 1.1rem;
+  line-height: 1.8;
+}
+```
+
+### Do's
+
+- ✅ Import the stylesheet: `import "@grandaniel/vue-markdown-editor/style.css"`
+- ✅ Use **global** (unscoped) CSS or `:deep()` from a parent to override styles
+- ✅ Target `.tiptap` inside `.markdown-editor-module-content` for editor typography
+- ✅ Use `z-index` values above `1000` / `9999` for anything that must layer **above** context menus and modals
+
+### Don'ts
+
+- ❌ Don't rely on CSS custom properties — the editor uses hard‑coded Tailwind‑scale colors (grays and blues)
+- ❌ Don't override `z-index` on `.markdown-editor-context-menu` or `.markdown-editor-modal-overlay` — it will break layering
+- ❌ Don't use `display: contents` on `.markdown-editor-module` — it interferes with SortableJS drag logic
+- ❌ Don't set `outline: none` on `.markdown-editor-module-content` globally — the focus ring is intentional for keyboard navigation
+
+---
+
+## Supply Chain Security
+
+We take package integrity seriously.
+
+| Measure | Status |
+|---|---|
+| **npm package provenance** | ✅ Enabled — every publish includes [provenance attestations](https://docs.npmjs.com/generating-provenance-statements) via GitHub Actions and Sigstore. |
+| **CI/CD** | ✅ GitHub Actions runs `npm ci` → `npm test` → `npm run build` → publish on every push to `dev` and `main`. |
+| **Prerelease tags** | ✅ Non‑main branches publish with a `dev` dist‑tag (e.g. `1.1.3-dev.abc1234`). |
+| **Dependabot** | 🔜 Planned — automated dependency update PRs will be enabled via `.github/dependabot.yml`. |
+
+To verify provenance locally:
+
+```bash
+npm audit signatures
+```
+
+---
+
+## Contributing
+
+We welcome contributions! Please follow the guidelines below.
+
+### PR Policy
+
+1. **Fork** the repository and create a feature branch off `dev`.
+2. **Keep changes focused** — one feature or fix per PR.
+3. **Add tests** for any new functionality. The project uses [Vitest](https://vitest.dev/) + [`@vue/test-utils`](https://test-utils.vuejs.org/).
+4. **Run the full check** before pushing:
+
+   ```bash
+   npm ci
+   npm run test
+   npm run type-check
+   npm run build
+   ```
+
+5. **Open a PR** against the `dev` branch with a clear description of what changed and why.
+
+### Dev setup
+
+```bash
+# Clone and install
+git clone https://github.com/danielgran/vue-markdown-editor.git
+cd vue-markdown-editor
+npm ci
+
+# Start the dev server
+npm run dev
+```
+
+The dev server launches at `http://localhost:4010`. The entry point is `dev/App.vue` — a full showcase that demonstrates every editor feature: block types, drag & drop, image upload, context menus, keyboard navigation, and Markdown output serialization. Use it as a playground while developing.
+
+---
+
+## License
+
+[ISC](LICENSE) © 2026 [danielgran](https://github.com/danielgran)

package/dist/components/MarkdownEditor/Composable/activeEditorStore.d.ts

@@ -0,0 +1,7 @@
+import { type ShallowRef } from "vue";
+import type { Editor } from "@tiptap/vue-3";
+/**
+ * Singleton reactive reference to the currently focused TipTap editor.
+ * Set by each TipTap module on focus, read by the text selection context menu.
+ */
+export declare const activeEditor: ShallowRef<Editor | null>;

package/dist/components/MarkdownEditor/Composable/useMarkdownEditor.d.ts

@@ -17,6 +17,7 @@ export declare function useMarkdownEditor(initialContent?: string): {
     }[]>;
     deleteNode: (nodeIndex: number) => void;
     addBlankNode: (nodeIndex: number) => number;
+    addNodeWithType: (nodeIndex: number, type: import("..").MarkdownAstNodeType, content?: string) => number;
     replaceNodeType: (node: import("..").MarkdownAstNode, newType: import("..").MarkdownAstNodeType) => {
         newNode: import("..").MarkdownAstNode;
         index: number;

package/dist/components/MarkdownEditor/Composable/useMarkdownProcessor.d.ts

@@ -19,6 +19,7 @@ declare function useMarkdownProcessor(modelValue: ModelRef<string | undefined>):
     }[]>;
     deleteNode: (nodeIndex: number) => void;
     addBlankNode: (nodeIndex: number) => number;
+    addNodeWithType: (nodeIndex: number, type: MarkdownNodeType, content?: string) => number;
     replaceNodeType: (node: MarkdownAstNode, newType: MarkdownNodeType) => {
         newNode: MarkdownAstNode;
         index: number;

package/dist/components/MarkdownEditor/ContextMenu/MarkdownEditorImageContextMenu.vue.d.ts

@@ -3,9 +3,11 @@ type __VLS_Props = {
     y: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "edit-attributes": () => any;
+    editAttributes: () => any;
+    close: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onEdit-attributes"?: (() => any) | undefined;
+    onEditAttributes?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/MarkdownEditor/MarkdownEditor.vue.d.ts

@@ -15,6 +15,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
         default: null;
     };
+    imageUploadFunction: {
+        type: PropType<(file: File) => Promise<string>>;
+        required: false;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:focused-node": (value: MarkdownAstNode<object> | null) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -27,6 +31,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         required: false;
         default: null;
     };
+    imageUploadFunction: {
+        type: PropType<(file: File) => Promise<string>>;
+        required: false;
+    };
 }>> & Readonly<{
     "onUpdate:focused-node"?: ((value: MarkdownAstNode<object> | null) => any) | undefined;
 }>, {

package/dist/components/MarkdownEditor/Modules/MarkdownModuleHeadline1.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_ModelProps = {
     modelValue: MarkdownModuleTextState;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {
+    editor: import("vue").ShallowRef<import("@tiptap/vue-3").Editor | undefined, import("@tiptap/vue-3").Editor | undefined>;
     focus: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:model-value": (componentState: MarkdownModuleTextState) => any;

package/dist/components/MarkdownEditor/Modules/MarkdownModuleHeadline2.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_ModelProps = {
     modelValue: MarkdownModuleTextState;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {
+    editor: import("vue").ShallowRef<import("@tiptap/vue-3").Editor | undefined, import("@tiptap/vue-3").Editor | undefined>;
     focus: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:model-value": (componentState: MarkdownModuleTextState) => any;

package/dist/components/MarkdownEditor/Modules/MarkdownModuleHeadline3.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_ModelProps = {
     modelValue: MarkdownModuleTextState;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {
+    editor: import("vue").ShallowRef<import("@tiptap/vue-3").Editor | undefined, import("@tiptap/vue-3").Editor | undefined>;
     focus: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:model-value": (componentState: MarkdownModuleTextState) => any;

package/dist/components/MarkdownEditor/Modules/MarkdownModuleList.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_ModelProps = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {
     focus(): void;
+    editor: import("vue").ShallowRef<import("@tiptap/vue-3").Editor | undefined, import("@tiptap/vue-3").Editor | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: MarkdownModuleListState) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{

package/dist/components/MarkdownEditor/Modules/MarkdownModuleParagraph.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_ModelProps = {
     modelValue: MarkdownModuleTextState;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {
+    editor: import("vue").ShallowRef<import("@tiptap/vue-3").Editor | undefined, import("@tiptap/vue-3").Editor | undefined>;
     focus: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:model-value": (componentState: MarkdownModuleTextState) => any;

package/dist/components/MarkdownRenderer/MarkdownRenderComponentRegistry.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from "vue";
+import MarkdownNodeType from "../MarkdownEditor/Types/MarkdownAstNodeType";
+type RenderComponent = Component<{
+    state: any;
+}>;
+declare const RenderComponentRegistry: Record<MarkdownNodeType, RenderComponent>;
+export default RenderComponentRegistry;

package/dist/components/MarkdownRenderer/MarkdownRenderer.vue.d.ts

@@ -0,0 +1,13 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    markdown: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    markdown: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MarkdownRenderer/RenderModules/MarkdownModuleHeadline1Render.vue.d.ts

@@ -0,0 +1,7 @@
+import type MarkdownModuleTextState from "../../MarkdownEditor/Modules/MarkdownModuleTextState";
+type __VLS_Props = {
+    state: MarkdownModuleTextState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MarkdownRenderer/RenderModules/MarkdownModuleHeadline2Render.vue.d.ts

@@ -0,0 +1,7 @@
+import type MarkdownModuleTextState from "../../MarkdownEditor/Modules/MarkdownModuleTextState";
+type __VLS_Props = {
+    state: MarkdownModuleTextState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MarkdownRenderer/RenderModules/MarkdownModuleHeadline3Render.vue.d.ts

@@ -0,0 +1,7 @@
+import type MarkdownModuleTextState from "../../MarkdownEditor/Modules/MarkdownModuleTextState";
+type __VLS_Props = {
+    state: MarkdownModuleTextState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MarkdownRenderer/RenderModules/MarkdownModuleImageRender.vue.d.ts

@@ -0,0 +1,7 @@
+import type MarkdownModuleImageState from "../../MarkdownEditor/Modules/MarkdownModuleImageState";
+type __VLS_Props = {
+    state: MarkdownModuleImageState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MarkdownRenderer/RenderModules/MarkdownModuleListRender.vue.d.ts

@@ -0,0 +1,7 @@
+import type MarkdownModuleListState from "../../MarkdownEditor/Modules/MarkdownModuleListState";
+type __VLS_Props = {
+    state: MarkdownModuleListState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MarkdownRenderer/RenderModules/MarkdownModuleParagraphRender.vue.d.ts

@@ -0,0 +1,7 @@
+import type MarkdownModuleTextState from "../../MarkdownEditor/Modules/MarkdownModuleTextState";
+type __VLS_Props = {
+    state: MarkdownModuleTextState;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/MarkdownRenderer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MarkdownRenderer } from "./MarkdownRenderer.vue";
+export { default as RenderComponentRegistry } from "./MarkdownRenderComponentRegistry";

package/dist/components/index.d.ts

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

package/dist/vue-markdown-editor.css

@@ -1,2 +1,2 @@
-.markdown-editor-context-menu[data-v-05f519e0]{z-index:1000;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;gap:.25rem;padding:.25rem;display:flex;position:fixed;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.markdown-editor-context-menu-inline-item[data-v-4e53d049]{cursor:pointer;color:#374151;background:0 0;border:none;border-radius:.375rem;justify-content:center;align-items:center;min-width:2rem;min-height:2rem;padding:.5rem;font-size:.875rem;font-weight:500;transition:all .15s;display:flex}.markdown-editor-context-menu-inline-item[data-v-4e53d049]:hover{background:#f3f4f6}.markdown-editor-context-menu-inline-item.is-active[data-v-4e53d049]{color:#1e40af;background:#dbeafe}.markdown-editor-context-menu-inline-item[data-v-4e53d049]:active{transform:scale(.95)}.markdown-editor-focus-controls[data-v-ce3a9e83]{flex-direction:row;align-items:center;height:100%;display:flex}.markdown-editor-focus-controls .drag-handle[data-v-ce3a9e83]{cursor:grab;-webkit-user-select:none;user-select:none;opacity:.4;padding:0 .2rem;font-size:1rem;line-height:1}.markdown-editor-focus-controls .drag-handle[data-v-ce3a9e83]:active{cursor:grabbing}.markdown-editor-focus-controls .focus-control-btn[data-v-ce3a9e83]{cursor:pointer;opacity:.6;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;width:1.4rem;height:1.4rem;padding:0;font-size:.75rem;line-height:1;transition:opacity .1s,background .1s;display:inline-flex}.markdown-editor-focus-controls .focus-control-btn[data-v-ce3a9e83]:hover{opacity:1;background:#00000012}[data-v-aa7529af],[data-v-0d04047d]{background:0 0;border:none;outline:none}.markdown-editor-modal-overlay[data-v-3e773d7f]{z-index:9999;background:#00000080;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.markdown-editor-modal[data-v-3e773d7f]{background:#fff;border-radius:.75rem;flex-direction:column;width:100%;max-width:32rem;max-height:90vh;display:flex;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.markdown-editor-modal-header[data-v-3e773d7f]{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.markdown-editor-modal-title[data-v-3e773d7f]{color:#111827;margin:0;font-size:1.125rem;font-weight:600}.markdown-editor-modal-close[data-v-3e773d7f]{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:.375rem;justify-content:center;align-items:center;width:2rem;height:2rem;padding:0;font-size:1.75rem;line-height:1;transition:all .15s;display:flex}.markdown-editor-modal-close[data-v-3e773d7f]:hover{color:#111827;background:#f3f4f6}.markdown-editor-modal-body[data-v-3e773d7f]{flex:1;padding:1.5rem;overflow-y:auto}.markdown-editor-modal-footer[data-v-3e773d7f]{border-top:1px solid #e5e7eb;justify-content:flex-end;gap:.75rem;padding:1.25rem 1.5rem;display:flex}.markdown-editor-modal-button[data-v-3e773d7f]{cursor:pointer;border:none;border-radius:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;transition:all .15s}.markdown-editor-modal-button[data-v-3e773d7f]:active{transform:scale(.98)}.markdown-editor-modal-button-secondary[data-v-3e773d7f]{color:#374151;background:#f3f4f6}.markdown-editor-modal-button-secondary[data-v-3e773d7f]:hover{background:#e5e7eb}.markdown-editor-modal-button-primary[data-v-3e773d7f]{color:#fff;background:#3b82f6}.markdown-editor-modal-button-primary[data-v-3e773d7f]:hover{background:#2563eb}.markdown-module-image[data-v-a762fc53]{cursor:pointer;text-align:center;position:relative}.markdown-module-image img[data-v-a762fc53]{max-width:100%;height:auto}.markdown-module-image span[data-v-a762fc53]{color:#6b7280;margin-top:.25rem;font-size:.875rem;display:block}.markdown-module-image-form[data-v-a762fc53]{flex-direction:column;gap:1.25rem;display:flex}.markdown-module-image-form-field[data-v-a762fc53]{flex-direction:column;gap:.5rem;display:flex}.markdown-module-image-form-field label[data-v-a762fc53]{color:#374151;font-size:.875rem;font-weight:500}.markdown-module-image-form-field input[data-v-a762fc53]{color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:.5rem;padding:.625rem .875rem;font-size:.875rem;transition:all .15s}.markdown-module-image-form-field input[data-v-a762fc53]:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.markdown-module-image-form-field input[data-v-a762fc53]::placeholder{color:#9ca3af}[data-v-a762fc53]{background:0 0;border:none;outline:none}[data-v-4cf48f83] .tiptap ul{margin:0;padding-left:1.5rem}.markdown-editor-module[data-v-965b9a8c]{flex-direction:row;display:flex}.markdown-editor-module[data-v-965b9a8c] .tiptap{outline:none}.markdown-editor-module .markdown-editor-module-content[data-v-965b9a8c]{outline:none;width:100%}.markdown-editor-module .markdown-editor-module-controls[data-v-965b9a8c]{visibility:hidden;min-width:5rem;max-width:5rem}.markdown-editor-module[data-v-965b9a8c]:hover{background:#9e95950d}.markdown-editor-module:hover .markdown-editor-module-controls[data-v-965b9a8c],.markdown-editor-module.is-focused .markdown-editor-module-controls[data-v-965b9a8c]{visibility:visible}.markdown-editor-module .markdown-editor-module-content-focused[data-v-965b9a8c]{background-color:#9e95950d}.markdown-editor[data-v-700c129f]{padding-left:6rem}.markdown-editor[data-v-700c129f] p{margin:.5rem 0}.markdown-editor[data-v-700c129f] strong,.markdown-editor[data-v-700c129f] b{font-weight:700}.markdown-editor[data-v-700c129f] em,.markdown-editor[data-v-700c129f] i{font-style:italic}.markdown-editor[data-v-700c129f] code{color:green;background:#7f7f7f26;border-radius:3px;padding:.1em .3em;font-family:monospace;font-size:.9em}.markdown-editor[data-v-700c129f] h1{margin:0;font-size:2em}.markdown-editor[data-v-700c129f] h2{margin:0;font-size:1.5em}.markdown-editor[data-v-700c129f] h3{margin:0;font-size:1.17em}
+.markdown-editor-context-menu[data-v-05f519e0]{z-index:1000;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;gap:.25rem;padding:.25rem;display:flex;position:fixed;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.markdown-editor-context-menu-inline-item[data-v-7dc94914]{cursor:pointer;color:#374151;background:0 0;border:none;border-radius:.375rem;justify-content:center;align-items:center;min-width:2rem;min-height:2rem;padding:.5rem;font-size:.875rem;font-weight:500;transition:all .15s;display:flex}.markdown-editor-context-menu-inline-item[data-v-7dc94914]:hover{background:#f3f4f6}.markdown-editor-context-menu-inline-item.is-active[data-v-7dc94914]{color:#1e40af;background:#dbeafe}.markdown-editor-context-menu-inline-item[data-v-7dc94914]:active{transform:scale(.95)}.markdown-editor-focus-controls[data-v-ce3a9e83]{flex-direction:row;align-items:center;height:100%;display:flex}.markdown-editor-focus-controls .drag-handle[data-v-ce3a9e83]{cursor:grab;-webkit-user-select:none;user-select:none;opacity:.4;padding:0 .2rem;font-size:1rem;line-height:1}.markdown-editor-focus-controls .drag-handle[data-v-ce3a9e83]:active{cursor:grabbing}.markdown-editor-focus-controls .focus-control-btn[data-v-ce3a9e83]{cursor:pointer;opacity:.6;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;width:1.4rem;height:1.4rem;padding:0;font-size:.75rem;line-height:1;transition:opacity .1s,background .1s;display:inline-flex}.markdown-editor-focus-controls .focus-control-btn[data-v-ce3a9e83]:hover{opacity:1;background:#00000012}[data-v-cf2b20ee],[data-v-6cb21ae4]{background:0 0;border:none;outline:none}.markdown-editor-context-menu-block-item[data-v-770b13bc]{cursor:pointer;color:#374151;text-align:left;white-space:nowrap;background:0 0;border:none;border-radius:.375rem;align-items:center;gap:.5rem;width:100%;padding:.625rem .875rem;font-size:.875rem;font-weight:500;transition:all .15s;display:flex}.markdown-editor-context-menu-block-item[data-v-770b13bc]:hover{background:#f3f4f6}.markdown-editor-context-menu-block-item[data-v-770b13bc]:active{transform:scale(.98)}.markdown-editor-image-context-menu-content[data-v-fbe7317c]{flex-direction:column;gap:.125rem;min-width:10rem;display:flex}.markdown-editor-modal-overlay[data-v-3e773d7f]{z-index:9999;background:#00000080;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.markdown-editor-modal[data-v-3e773d7f]{background:#fff;border-radius:.75rem;flex-direction:column;width:100%;max-width:32rem;max-height:90vh;display:flex;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.markdown-editor-modal-header[data-v-3e773d7f]{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.markdown-editor-modal-title[data-v-3e773d7f]{color:#111827;margin:0;font-size:1.125rem;font-weight:600}.markdown-editor-modal-close[data-v-3e773d7f]{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:.375rem;justify-content:center;align-items:center;width:2rem;height:2rem;padding:0;font-size:1.75rem;line-height:1;transition:all .15s;display:flex}.markdown-editor-modal-close[data-v-3e773d7f]:hover{color:#111827;background:#f3f4f6}.markdown-editor-modal-body[data-v-3e773d7f]{flex:1;padding:1.5rem;overflow-y:auto}.markdown-editor-modal-footer[data-v-3e773d7f]{border-top:1px solid #e5e7eb;justify-content:flex-end;gap:.75rem;padding:1.25rem 1.5rem;display:flex}.markdown-editor-modal-button[data-v-3e773d7f]{cursor:pointer;border:none;border-radius:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;transition:all .15s}.markdown-editor-modal-button[data-v-3e773d7f]:active{transform:scale(.98)}.markdown-editor-modal-button-secondary[data-v-3e773d7f]{color:#374151;background:#f3f4f6}.markdown-editor-modal-button-secondary[data-v-3e773d7f]:hover{background:#e5e7eb}.markdown-editor-modal-button-primary[data-v-3e773d7f]{color:#fff;background:#3b82f6}.markdown-editor-modal-button-primary[data-v-3e773d7f]:hover{background:#2563eb}.markdown-module-image[data-v-9489f41b]{cursor:pointer;text-align:center;position:relative}.markdown-module-image img[data-v-9489f41b]{max-width:100%;height:auto}.markdown-module-image span[data-v-9489f41b]{color:#6b7280;margin-top:.25rem;font-size:.875rem;display:block}.markdown-module-image-form[data-v-9489f41b]{flex-direction:column;gap:1.25rem;display:flex}.markdown-module-image-form-field[data-v-9489f41b]{flex-direction:column;gap:.5rem;display:flex}.markdown-module-image-form-field label[data-v-9489f41b]{color:#374151;font-size:.875rem;font-weight:500}.markdown-module-image-form-field input[data-v-9489f41b]{color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:.5rem;padding:.625rem .875rem;font-size:.875rem;transition:all .15s}.markdown-module-image-form-field input[data-v-9489f41b]:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.markdown-module-image-form-field input[data-v-9489f41b]::placeholder{color:#9ca3af}[data-v-9489f41b]{background:0 0;border:none;outline:none}[data-v-2f49655e] .tiptap ul{margin:0;padding-left:1.5rem}.markdown-editor-module[data-v-965b9a8c]{flex-direction:row;display:flex}.markdown-editor-module[data-v-965b9a8c] .tiptap{outline:none}.markdown-editor-module .markdown-editor-module-content[data-v-965b9a8c]{outline:none;width:100%}.markdown-editor-module .markdown-editor-module-controls[data-v-965b9a8c]{visibility:hidden;min-width:5rem;max-width:5rem}.markdown-editor-module[data-v-965b9a8c]:hover{background:#9e95950d}.markdown-editor-module:hover .markdown-editor-module-controls[data-v-965b9a8c],.markdown-editor-module.is-focused .markdown-editor-module-controls[data-v-965b9a8c]{visibility:visible}.markdown-editor-module .markdown-editor-module-content-focused[data-v-965b9a8c]{background-color:#9e95950d}.markdown-editor[data-v-1f5fcb46]{padding-left:6rem}.markdown-editor[data-v-1f5fcb46] p{margin:.5rem 0}.markdown-editor[data-v-1f5fcb46] strong,.markdown-editor[data-v-1f5fcb46] b{font-weight:700}.markdown-editor[data-v-1f5fcb46] em,.markdown-editor[data-v-1f5fcb46] i{font-style:italic}.markdown-editor[data-v-1f5fcb46] code{color:green;background:#7f7f7f26;border-radius:3px;padding:.1em .3em;font-family:monospace;font-size:.9em}.markdown-editor[data-v-1f5fcb46] h1{margin:0;font-size:2em}.markdown-editor[data-v-1f5fcb46] h2{margin:0;font-size:1.5em}.markdown-editor[data-v-1f5fcb46] h3{margin:0;font-size:1.17em}
 /*$vite$:1*/