@grandaniel/vue-markdown-editor 1.1.3-dev.bc50199 → 1.1.3-dev.df4d480

package/README.md

@@ -204,6 +204,64 @@ Returns a reactive editor instance:
 | `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. |
 
 ---
 

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

@@ -0,0 +1,2 @@
+import type { MarkdownAstNode } from "../Types/MarkdownAstNode";
+export declare function parseMarkdown(markdown: string): MarkdownAstNode[];

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

@@ -0,0 +1,2 @@
+import type { MarkdownAstNode } from "../Types/MarkdownAstNode";
+export declare function serializeMarkdown(nodes: MarkdownAstNode[]): string;

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/';