@dskripchenko/markdown-editor 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## 0.2.0
+
+### Minor Changes
+
+- 127c7b2: `image-base` and `link-base`: a document's relative pictures show from its folder in the visual editor and the preview and are saved back as written (`img/a.png`, `../a.png`); relative links of the preview resolve against `link-base`. `fromMarkdown`, `toMarkdown` and `normalize` take `{ imageBase }`; `relativeTo` is exported.
+
+## 0.1.0
+
+### Minor Changes
+
+- 37932ce: The first release: `MarkdownEditor` — Markdown as the value, edited in the `@dskripchenko/wysiwyg` editor, with Markdown and side-by-side modes; a lossless round trip that keeps what the editor cannot hold (headings below h3, task lists, callouts, HTML blocks, footnotes, reference links) as written; Markdown pasted as plain text arrives formatted; `fromMarkdown`, `toMarkdown`, `normalize`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Denis Skripchenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,54 @@
-# Temporary Holding Version
+# @dskripchenko/markdown-editor
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/@dskripchenko/markdown-editor.svg)](https://www.npmjs.com/package/@dskripchenko/markdown-editor)
+[![license](https://img.shields.io/npm/l/@dskripchenko/markdown-editor.svg)](LICENSE)
+
+A Markdown editor for Vue 3 that edits like a word processor. The value is
+**Markdown**; the editing is the [`@dskripchenko/wysiwyg`](https://github.com/dskripchenko/wysiwyg)
+engine — its toolbar, slash menu, shortcuts and live blocks — with a
+**Markdown** mode and a **side-by-side** mode with a live preview.
+
+[**English**](docs/en/getting-started.md) · [Русский](docs/ru/getting-started.md) · [Deutsch](docs/de/getting-started.md) · [中文](docs/zh/getting-started.md)
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { MarkdownEditor } from '@dskripchenko/markdown-editor'
+import '@dskripchenko/ui/styles/all.css'
+import '@dskripchenko/wysiwyg/style.css'
+import '@dskripchenko/markdown-editor/style.css'
+
+const text = ref('# Release notes\n\nVersion **3.1**.')
+</script>
+
+<template>
+  <MarkdownEditor v-model="text" />
+</template>
+```
+
+- **A lossless round trip.** Markdown goes into the editor and comes back as
+  Markdown: the first save puts it in canonical form (`-` for lists, `**`
+  for bold), every later one changes nothing. Plain text keeps its dots,
+  dashes and brackets.
+- **Nothing is lost.** What the visual editor cannot hold — headings below
+  h3, task lists, callouts, HTML blocks, footnotes, reference-style links —
+  stays as written: shown as a block of Markdown and saved byte for byte.
+- **Pasting Markdown** as plain text gives formatted text; pasting from a
+  page or a document is cleaned by the editor's sanitizer.
+- Live blocks (```` ```mermaid ```` and others) through `blockRenderers` —
+  the same renderers in the editor and in the preview.
+- No runtime dependencies: Vue, [`@dskripchenko/ui`](https://github.com/dskripchenko/ui)
+  and `@dskripchenko/wysiwyg` are peer dependencies. Russian and English.
+
+## Install
+
+```bash
+npm i @dskripchenko/markdown-editor @dskripchenko/wysiwyg @dskripchenko/ui vue
+```
+
+→ [Getting started](docs/en/getting-started.md): props, events, modes,
+the round trip, the conversion functions.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,420 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let vue = require("vue");
+let _dskripchenko_ui = require("@dskripchenko/ui");
+let _dskripchenko_wysiwyg = require("@dskripchenko/wysiwyg");
+// src/convert.ts
+/**
+* Markdown ↔ the editor's HTML.
+*
+* `fromMarkdown` renders Markdown with the kit's renderer into the HTML the
+* WYSIWYG editor edits; `toMarkdown` writes the editor's HTML back with the
+* editor's own converter. What the editor cannot hold — headings below h3,
+* task lists, callouts, HTML blocks, footnotes, reference-style links — is
+* kept as a source block: a code block of the language {@link SOURCE_LANG}
+* that shows the Markdown as written and comes back out byte for byte.
+*
+* The first round normalises the document (list markers, emphasis markers,
+* spacing); every later round changes nothing.
+*/
+/** The code-block language of Markdown kept as written. */
+var SOURCE_LANG = "x-markdown";
+var FENCE = /^\s{0,3}(`{3,}|~{3,})/;
+var LIST_ITEM = /^(\s*)([-*+]|\d+[.)])\s+/;
+var TASK_ITEM = /^\s*([-*+]|\d+[.)])\s+\[[ xX]\]\s/;
+var HTML_BLOCK = /^\s{0,3}<(?:[A-Za-z][\w-]*[\s/>]|[A-Za-z][\w-]*$|\/[A-Za-z]|!--)/;
+var FOOTNOTE = /^\s{0,3}\[\^[^\]]+\]:/;
+var LINK_DEFINITION = /^\s{0,3}\[[^\]^][^\]]*\]:\s*\S/;
+var REFERENCE = /\]\[[^\]]*\]|\[[^\]]+\]\[\]/;
+/**
+* The document in top-level blocks, each marked as edited in the editor or
+* kept as written. Blank lines between blocks belong to no block.
+*/
+function splitBlocks(markdown) {
+	const lines = markdown.replace(/\r\n?/g, "\n").split("\n");
+	const blocks = [];
+	let i = 0;
+	const take = (from, to, source) => {
+		blocks.push({
+			lines: lines.slice(from, to),
+			source
+		});
+	};
+	while (i < lines.length) {
+		const line = lines[i] ?? "";
+		if (line.trim() === "") {
+			i++;
+			continue;
+		}
+		const start = i;
+		const fence = FENCE.exec(line);
+		if (fence) {
+			const marker = fence[1] ?? "```";
+			const indent = line.length - line.trimStart().length;
+			i++;
+			while (i < lines.length) {
+				const l = lines[i] ?? "";
+				const t = l.trim();
+				i++;
+				if (l.length - l.trimStart().length <= indent + 3 && t.length >= marker.length && t[0] === marker[0] && /^(`+|~+)$/.test(t)) break;
+			}
+			take(start, i, false);
+			continue;
+		}
+		if (LIST_ITEM.test(line)) {
+			i++;
+			while (i < lines.length) {
+				const l = lines[i] ?? "";
+				if (l.trim() === "") {
+					const next = lines[i + 1] ?? "";
+					if (next.trim() !== "" && (LIST_ITEM.test(next) || /^\s{2,}\S/.test(next))) {
+						i++;
+						continue;
+					}
+					break;
+				}
+				if (LIST_ITEM.test(l) || /^\s{2,}\S/.test(l)) {
+					i++;
+					continue;
+				}
+				break;
+			}
+			const block = lines.slice(start, i);
+			take(start, i, block.some((l) => TASK_ITEM.test(l)) || block.some((l) => REFERENCE.test(l)));
+			continue;
+		}
+		if (/^\s{0,3}>/.test(line)) {
+			i++;
+			while (i < lines.length && /^\s{0,3}>/.test(lines[i] ?? "")) i++;
+			const block = lines.slice(start, i);
+			take(start, i, /^\s{0,3}>\s*\[![A-Za-z]+\]/.test(line) || block.some((l) => REFERENCE.test(l)));
+			continue;
+		}
+		if (/^\s{0,3}#{4,6}(\s|$)/.test(line)) {
+			take(start, ++i, true);
+			continue;
+		}
+		if (FOOTNOTE.test(line) || LINK_DEFINITION.test(line)) {
+			i++;
+			while (i < lines.length && (/^\s{2,}\S/.test(lines[i] ?? "") || FOOTNOTE.test(lines[i] ?? "") || LINK_DEFINITION.test(lines[i] ?? ""))) i++;
+			take(start, i, true);
+			continue;
+		}
+		if (HTML_BLOCK.test(line)) {
+			i++;
+			while (i < lines.length && (lines[i] ?? "").trim() !== "") i++;
+			take(start, i, true);
+			continue;
+		}
+		i++;
+		if (!/^\s{0,3}#{1,3}\s/.test(line)) while (i < lines.length) {
+			const l = lines[i] ?? "";
+			if (l.trim() === "" || FENCE.test(l) || /^\s{0,3}(#{1,6}\s|>)/.test(l) || LIST_ITEM.test(l) && !/^\s*\d+[.)]/.test(l) || HTML_BLOCK.test(l)) break;
+			i++;
+		}
+		const block = lines.slice(start, i);
+		take(start, i, block.some((l) => REFERENCE.test(l)) || block.some((l) => /\[\^[^\]]+\]/.test(l)));
+	}
+	return blocks.map((b) => ({
+		kind: b.source ? "source" : "markdown",
+		text: b.lines.join("\n")
+	}));
+}
+function escapeHtml(text) {
+	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+/**
+* A URL back to a path relative to `base`, when both share the origin:
+* `<base>img/a.png` → `img/a.png`, `<base's parent>up.png` → `../up.png`.
+* Anything else stays as it is.
+*/
+function relativeTo(url, base) {
+	let u;
+	let b;
+	try {
+		u = new URL(url);
+		b = new URL(base);
+	} catch {
+		return url;
+	}
+	if (u.protocol !== b.protocol || u.host !== b.host) return url;
+	const from = b.pathname.split("/").slice(0, -1);
+	const to = u.pathname.split("/");
+	let i = 0;
+	while (i < from.length && i < to.length - 1 && from[i] === to[i]) i++;
+	if (i === 0 && from.length > 1) return url;
+	const rel = [...Array(from.length - i).fill(".."), ...to.slice(i)].join("/");
+	return decodeURI(rel) + u.search + u.hash;
+}
+/** Markdown → the HTML the editor edits; source blocks become code blocks of {@link SOURCE_LANG}. */
+function fromMarkdown(markdown, options = {}) {
+	const out = [];
+	let pending = [];
+	const flush = () => {
+		if (pending.length) out.push((0, _dskripchenko_ui.renderMarkdown)(pending.join("\n\n"), options.imageBase ? { imageBase: options.imageBase } : {}));
+		pending = [];
+	};
+	for (const block of splitBlocks(markdown)) {
+		if (block.kind === "markdown") {
+			pending.push(block.text);
+			continue;
+		}
+		flush();
+		out.push(`<pre><code class="language-${SOURCE_LANG}">${escapeHtml(block.text)}</code></pre>`);
+	}
+	flush();
+	return out.join("\n");
+}
+var SOURCE_FENCE = new RegExp(`^(\`{3,})${SOURCE_LANG}\\n([\\s\\S]*?)\\n\\1$`, "gm");
+/** The editor's HTML → Markdown; source blocks come back as written, pictures by their relative paths. */
+function toMarkdown(html, options = {}) {
+	const base = options.imageBase;
+	const relative = base ? html.replace(/(<img\b[^>]*?\ssrc=")([^"]*)(")/gi, (_m, head, src, tail) => {
+		return head + relativeTo(src.replace(/&amp;/g, "&"), base).replace(/&/g, "&amp;") + tail;
+	}) : html;
+	const md = (0, _dskripchenko_wysiwyg.htmlToMarkdown)(relative).replace(SOURCE_FENCE, (_m, _fence, text) => text);
+	return md === "" ? "" : `${md}\n`;
+}
+/** One round: what saving a document unchanged in the editor gives. */
+function normalize(markdown, options = {}) {
+	return toMarkdown(fromMarkdown(markdown, options), options);
+}
+// src/locale.ts
+var en = {
+	visual: "Visual",
+	source: "Markdown",
+	split: "Side by side",
+	modes: "Editing mode",
+	preview: "Preview",
+	sourceBlock: "Markdown kept as written — edit it in the Markdown mode"
+};
+var ru = {
+	visual: "Визуально",
+	source: "Markdown",
+	split: "Рядом",
+	modes: "Режим правки",
+	preview: "Просмотр",
+	sourceBlock: "Markdown как написан — правится в режиме Markdown"
+};
+var markdownEditorLocales = {
+	en,
+	ru
+};
+function labelsFor(locale) {
+	return locale?.toLowerCase().startsWith("ru") ? ru : en;
+}
+// src/MarkdownEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = ["aria-pressed", "onClick"];
+var _hoisted_3 = ["data-source-label"];
+var _hoisted_4 = {
+	key: 2,
+	class: "dsk-md__panes"
+};
+var _hoisted_5 = [
+	"value",
+	"placeholder",
+	"readonly",
+	"aria-label"
+];
+var _hoisted_6 = ["aria-label"];
+// src/MarkdownEditor.vue
+var MarkdownEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "MarkdownEditor",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		modelValue: { default: "" },
+		modes: { default: () => [
+			"visual",
+			"source",
+			"split"
+		] },
+		placeholder: { default: void 0 },
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		minHeight: { default: "240px" },
+		maxHeight: { default: void 0 },
+		blockRenderers: { default: void 0 },
+		toolbarItems: { default: void 0 },
+		slashCommands: { default: void 0 },
+		locale: { default: void 0 },
+		labels: { default: void 0 },
+		imageBase: { default: void 0 },
+		linkBase: { default: void 0 }
+	}, {
+		"mode": { default: "visual" },
+		"modeModifiers": {}
+	}),
+	emits: /*@__PURE__*/ (0, vue.mergeModels)(["update:modelValue", "change"], ["update:mode"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const mode = (0, vue.useModel)(__props, "mode");
+		const kitLocale = (0, _dskripchenko_ui.useLocale)();
+		const t = (0, vue.computed)(() => ({
+			...labelsFor(props.locale ?? kitLocale.value.code),
+			...props.labels
+		}));
+		const options = (0, vue.computed)(() => ({ imageBase: props.imageBase ?? null }));
+		const markdown = (0, vue.ref)(props.modelValue);
+		const html = (0, vue.ref)(fromMarkdown(props.modelValue, options.value));
+		const wysiwyg = (0, vue.ref)(null);
+		const area = (0, vue.ref)(null);
+		(0, vue.watch)(() => props.modelValue, (next) => {
+			if (next === markdown.value) return;
+			markdown.value = next;
+			html.value = fromMarkdown(next, options.value);
+		});
+		(0, vue.watch)(() => props.imageBase, () => {
+			html.value = fromMarkdown(markdown.value, options.value);
+		});
+		function commit(next) {
+			if (next === markdown.value) return;
+			markdown.value = next;
+			emit("update:modelValue", next);
+			emit("change", next);
+		}
+		function onHtml(next) {
+			html.value = next;
+			commit(toMarkdown(next, options.value));
+		}
+		function onSource(event) {
+			commit(event.target.value);
+		}
+		function setMode(next) {
+			if (next === mode.value) return;
+			if (next === "visual") html.value = fromMarkdown(markdown.value, options.value);
+			mode.value = next;
+		}
+		/** Text that reads as Markdown: pasted into the visual editor, it arrives formatted. */
+		const MARKDOWN_HINT = /(^|\n)\s{0,3}(#{1,6}\s|[-*+]\s|\d+[.)]\s|>|```|~~~|\|.*\|)|\*\*[^*]+\*\*|\[[^\]]+\]\([^)]+\)|`[^`]+`/;
+		function onPaste(event) {
+			if (props.readonly || mode.value !== "visual") return;
+			const data = event.clipboardData;
+			if (!data || data.types.includes("text/html")) return;
+			const text = data.getData("text/plain");
+			if (!text || !MARKDOWN_HINT.test(text)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			document.execCommand("insertHTML", false, fromMarkdown(text, options.value));
+		}
+		function onTab(event) {
+			if (event.key !== "Tab" || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return;
+			event.preventDefault();
+			const el = event.target;
+			el.setRangeText("  ", el.selectionStart, el.selectionEnd, "end");
+			commit(el.value);
+		}
+		/** Focus the editor of the current mode. */
+		function focus() {
+			if (mode.value === "visual") wysiwyg.value?.controller?.chain().focus().run();
+			else area.value?.focus();
+		}
+		/** Insert Markdown at the caret (the source's caret in the Markdown modes). */
+		function insert(text) {
+			if (mode.value === "visual") {
+				focus();
+				document.execCommand("insertHTML", false, fromMarkdown(text, options.value));
+				return;
+			}
+			const el = area.value;
+			if (!el) return;
+			el.focus();
+			el.setRangeText(text, el.selectionStart, el.selectionEnd, "end");
+			commit(el.value);
+		}
+		__expose({
+			focus,
+			insert,
+			get value() {
+				return markdown.value;
+			}
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				class: (0, vue.normalizeClass)(["dsk-md", [`dsk-md--${mode.value}`, { "dsk-md--readonly": __props.readonly }]]),
+				style: (0, vue.normalizeStyle)({
+					"--dsk-md-min-h": __props.minHeight,
+					"--dsk-md-max-h": __props.maxHeight
+				})
+			}, [__props.modes.length > 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				class: "dsk-md__modes",
+				role: "group",
+				"aria-label": t.value.modes
+			}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.modes, (m) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					key: m,
+					type: "button",
+					class: (0, vue.normalizeClass)(["dsk-md__mode", { "dsk-md__mode--on": m === mode.value }]),
+					"aria-pressed": m === mode.value,
+					onClick: ($event) => setMode(m)
+				}, (0, vue.toDisplayString)(t.value[m]), 11, _hoisted_2);
+			}), 128))], 8, _hoisted_1)) : (0, vue.createCommentVNode)("", true), mode.value === "visual" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 1,
+				class: "dsk-md__visual",
+				"data-source-label": t.value.sourceBlock,
+				onPasteCapture: onPaste
+			}, [(0, vue.createVNode)((0, vue.unref)(_dskripchenko_wysiwyg.DskWysiwyg), {
+				ref_key: "wysiwyg",
+				ref: wysiwyg,
+				"model-value": html.value,
+				placeholder: __props.placeholder,
+				readonly: __props.readonly,
+				"min-height": __props.minHeight,
+				"max-height": __props.maxHeight,
+				"block-renderers": __props.blockRenderers,
+				"toolbar-items": __props.toolbarItems,
+				"slash-commands": __props.slashCommands,
+				locale: __props.locale,
+				"onUpdate:modelValue": onHtml
+			}, null, 8, [
+				"model-value",
+				"placeholder",
+				"readonly",
+				"min-height",
+				"max-height",
+				"block-renderers",
+				"toolbar-items",
+				"slash-commands",
+				"locale"
+			])], 40, _hoisted_3)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [(0, vue.createElementVNode)("textarea", {
+				ref_key: "area",
+				ref: area,
+				class: "dsk-md__source",
+				value: markdown.value,
+				placeholder: __props.placeholder,
+				readonly: __props.readonly,
+				"aria-label": t.value.source,
+				spellcheck: "false",
+				onInput: onSource,
+				onKeydown: onTab
+			}, null, 40, _hoisted_5), mode.value === "split" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				key: 0,
+				class: "dsk-md__preview",
+				"aria-label": t.value.preview
+			}, [(0, vue.createVNode)((0, vue.unref)(_dskripchenko_ui.UidMarkdown), {
+				source: markdown.value,
+				"block-renderers": __props.blockRenderers,
+				"image-base": __props.imageBase,
+				"link-base": __props.linkBase
+			}, null, 8, [
+				"source",
+				"block-renderers",
+				"image-base",
+				"link-base"
+			])], 8, _hoisted_6)) : (0, vue.createCommentVNode)("", true)]))], 6);
+		};
+	}
+});
+exports.MarkdownEditor = MarkdownEditor_default;
+exports.SOURCE_LANG = SOURCE_LANG;
+exports.fromMarkdown = fromMarkdown;
+exports.labelsFor = labelsFor;
+exports.markdownEditorLocales = markdownEditorLocales;
+exports.normalize = normalize;
+exports.relativeTo = relativeTo;
+exports.splitBlocks = splitBlocks;
+exports.toMarkdown = toMarkdown;
+
+//# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -0,0 +1,130 @@
+import { BlockRenderer } from '@dskripchenko/wysiwyg';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { DskWysiwyg } from '@dskripchenko/wysiwyg';
+import { PublicProps } from 'vue';
+import { SlashCommand } from '@dskripchenko/wysiwyg';
+import { ToolbarItem } from '@dskripchenko/wysiwyg';
+
+declare const __VLS_export: DefineComponent<__VLS_PublicProps, {
+    focus: typeof focus_2;
+    insert: typeof insert;
+    readonly value: string;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (markdown: string) => any;
+    change: (markdown: string) => any;
+    "update:mode": (value: MarkdownEditorMode) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((markdown: string) => any) | undefined;
+    onChange?: ((markdown: string) => any) | undefined;
+    "onUpdate:mode"?: ((value: MarkdownEditorMode) => any) | undefined;
+}>, {
+    imageBase: string;
+    modelValue: string;
+    placeholder: string;
+    toolbarItems: ToolbarItem[];
+    readonly: boolean;
+    minHeight: string;
+    maxHeight: string;
+    blockRenderers: Readonly<Record<string, BlockRenderer>>;
+    slashCommands: SlashCommand[];
+    locale: MarkdownEditorLocale;
+    labels: Partial<MarkdownEditorLabels>;
+    modes: MarkdownEditorMode[];
+    linkBase: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type __VLS_ModelProps = {
+    'mode'?: MarkdownEditorMode;
+};
+
+declare type __VLS_Props = {
+    modelValue?: string;
+    modes?: MarkdownEditorMode[];
+    placeholder?: string;
+    readonly?: boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    blockRenderers?: BlockRenderers;
+    toolbarItems?: ToolbarItems;
+    slashCommands?: SlashCommands;
+    locale?: MarkdownEditorLocale;
+    labels?: Partial<MarkdownEditorLabels>;
+    /** The folder relative pictures resolve against (a URL ending in `/`); saved back relative. */
+    imageBase?: string;
+    /** The base of relative links in the preview. */
+    linkBase?: string;
+};
+
+declare type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+
+declare type BlockRenderers = InstanceType<typeof DskWysiwyg>['$props']['blockRenderers'];
+
+/** Where the document's relative pictures resolve while it is edited. */
+export declare interface ConvertOptions {
+    /** A folder URL (ending in `/`): `img/a.png` shows as `<imageBase>img/a.png` and is saved back as `img/a.png`. */
+    imageBase?: string | null;
+}
+
+/** Focus the editor of the current mode. */
+declare function focus_2(): void;
+
+/** Markdown → the HTML the editor edits; source blocks become code blocks of {@link SOURCE_LANG}. */
+export declare function fromMarkdown(markdown: string, options?: ConvertOptions): string;
+
+/** Insert Markdown at the caret (the source's caret in the Markdown modes). */
+declare function insert(text: string): void;
+
+export declare function labelsFor(locale: string | undefined): MarkdownEditorLabels;
+
+export declare interface MarkdownBlock {
+    /** `source` — kept as written; `markdown` — edited in the editor. */
+    kind: 'markdown' | 'source';
+    text: string;
+}
+
+export declare const MarkdownEditor: typeof __VLS_export;
+
+export declare interface MarkdownEditorLabels {
+    visual: string;
+    source: string;
+    split: string;
+    modes: string;
+    preview: string;
+    sourceBlock: string;
+}
+
+export declare type MarkdownEditorLocale = 'en' | 'ru';
+
+export declare const markdownEditorLocales: Record<MarkdownEditorLocale, MarkdownEditorLabels>;
+
+export declare type MarkdownEditorMode = 'visual' | 'source' | 'split';
+
+/** One round: what saving a document unchanged in the editor gives. */
+export declare function normalize(markdown: string, options?: ConvertOptions): string;
+
+/**
+ * A URL back to a path relative to `base`, when both share the origin:
+ * `<base>img/a.png` → `img/a.png`, `<base's parent>up.png` → `../up.png`.
+ * Anything else stays as it is.
+ */
+export declare function relativeTo(url: string, base: string): string;
+
+declare type SlashCommands = InstanceType<typeof DskWysiwyg>['$props']['slashCommands'];
+
+/** The code-block language of Markdown kept as written. */
+export declare const SOURCE_LANG = "x-markdown";
+
+/**
+ * The document in top-level blocks, each marked as edited in the editor or
+ * kept as written. Blank lines between blocks belong to no block.
+ */
+export declare function splitBlocks(markdown: string): MarkdownBlock[];
+
+/** The editor's HTML → Markdown; source blocks come back as written, pictures by their relative paths. */
+export declare function toMarkdown(html: string, options?: ConvertOptions): string;
+
+declare type ToolbarItems = InstanceType<typeof DskWysiwyg>['$props']['toolbarItems'];
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,411 @@
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, useModel, watch } from "vue";
+import { UidMarkdown, renderMarkdown, useLocale } from "@dskripchenko/ui";
+import { DskWysiwyg, htmlToMarkdown } from "@dskripchenko/wysiwyg";
+// src/convert.ts
+/**
+* Markdown ↔ the editor's HTML.
+*
+* `fromMarkdown` renders Markdown with the kit's renderer into the HTML the
+* WYSIWYG editor edits; `toMarkdown` writes the editor's HTML back with the
+* editor's own converter. What the editor cannot hold — headings below h3,
+* task lists, callouts, HTML blocks, footnotes, reference-style links — is
+* kept as a source block: a code block of the language {@link SOURCE_LANG}
+* that shows the Markdown as written and comes back out byte for byte.
+*
+* The first round normalises the document (list markers, emphasis markers,
+* spacing); every later round changes nothing.
+*/
+/** The code-block language of Markdown kept as written. */
+var SOURCE_LANG = "x-markdown";
+var FENCE = /^\s{0,3}(`{3,}|~{3,})/;
+var LIST_ITEM = /^(\s*)([-*+]|\d+[.)])\s+/;
+var TASK_ITEM = /^\s*([-*+]|\d+[.)])\s+\[[ xX]\]\s/;
+var HTML_BLOCK = /^\s{0,3}<(?:[A-Za-z][\w-]*[\s/>]|[A-Za-z][\w-]*$|\/[A-Za-z]|!--)/;
+var FOOTNOTE = /^\s{0,3}\[\^[^\]]+\]:/;
+var LINK_DEFINITION = /^\s{0,3}\[[^\]^][^\]]*\]:\s*\S/;
+var REFERENCE = /\]\[[^\]]*\]|\[[^\]]+\]\[\]/;
+/**
+* The document in top-level blocks, each marked as edited in the editor or
+* kept as written. Blank lines between blocks belong to no block.
+*/
+function splitBlocks(markdown) {
+	const lines = markdown.replace(/\r\n?/g, "\n").split("\n");
+	const blocks = [];
+	let i = 0;
+	const take = (from, to, source) => {
+		blocks.push({
+			lines: lines.slice(from, to),
+			source
+		});
+	};
+	while (i < lines.length) {
+		const line = lines[i] ?? "";
+		if (line.trim() === "") {
+			i++;
+			continue;
+		}
+		const start = i;
+		const fence = FENCE.exec(line);
+		if (fence) {
+			const marker = fence[1] ?? "```";
+			const indent = line.length - line.trimStart().length;
+			i++;
+			while (i < lines.length) {
+				const l = lines[i] ?? "";
+				const t = l.trim();
+				i++;
+				if (l.length - l.trimStart().length <= indent + 3 && t.length >= marker.length && t[0] === marker[0] && /^(`+|~+)$/.test(t)) break;
+			}
+			take(start, i, false);
+			continue;
+		}
+		if (LIST_ITEM.test(line)) {
+			i++;
+			while (i < lines.length) {
+				const l = lines[i] ?? "";
+				if (l.trim() === "") {
+					const next = lines[i + 1] ?? "";
+					if (next.trim() !== "" && (LIST_ITEM.test(next) || /^\s{2,}\S/.test(next))) {
+						i++;
+						continue;
+					}
+					break;
+				}
+				if (LIST_ITEM.test(l) || /^\s{2,}\S/.test(l)) {
+					i++;
+					continue;
+				}
+				break;
+			}
+			const block = lines.slice(start, i);
+			take(start, i, block.some((l) => TASK_ITEM.test(l)) || block.some((l) => REFERENCE.test(l)));
+			continue;
+		}
+		if (/^\s{0,3}>/.test(line)) {
+			i++;
+			while (i < lines.length && /^\s{0,3}>/.test(lines[i] ?? "")) i++;
+			const block = lines.slice(start, i);
+			take(start, i, /^\s{0,3}>\s*\[![A-Za-z]+\]/.test(line) || block.some((l) => REFERENCE.test(l)));
+			continue;
+		}
+		if (/^\s{0,3}#{4,6}(\s|$)/.test(line)) {
+			take(start, ++i, true);
+			continue;
+		}
+		if (FOOTNOTE.test(line) || LINK_DEFINITION.test(line)) {
+			i++;
+			while (i < lines.length && (/^\s{2,}\S/.test(lines[i] ?? "") || FOOTNOTE.test(lines[i] ?? "") || LINK_DEFINITION.test(lines[i] ?? ""))) i++;
+			take(start, i, true);
+			continue;
+		}
+		if (HTML_BLOCK.test(line)) {
+			i++;
+			while (i < lines.length && (lines[i] ?? "").trim() !== "") i++;
+			take(start, i, true);
+			continue;
+		}
+		i++;
+		if (!/^\s{0,3}#{1,3}\s/.test(line)) while (i < lines.length) {
+			const l = lines[i] ?? "";
+			if (l.trim() === "" || FENCE.test(l) || /^\s{0,3}(#{1,6}\s|>)/.test(l) || LIST_ITEM.test(l) && !/^\s*\d+[.)]/.test(l) || HTML_BLOCK.test(l)) break;
+			i++;
+		}
+		const block = lines.slice(start, i);
+		take(start, i, block.some((l) => REFERENCE.test(l)) || block.some((l) => /\[\^[^\]]+\]/.test(l)));
+	}
+	return blocks.map((b) => ({
+		kind: b.source ? "source" : "markdown",
+		text: b.lines.join("\n")
+	}));
+}
+function escapeHtml(text) {
+	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+/**
+* A URL back to a path relative to `base`, when both share the origin:
+* `<base>img/a.png` → `img/a.png`, `<base's parent>up.png` → `../up.png`.
+* Anything else stays as it is.
+*/
+function relativeTo(url, base) {
+	let u;
+	let b;
+	try {
+		u = new URL(url);
+		b = new URL(base);
+	} catch {
+		return url;
+	}
+	if (u.protocol !== b.protocol || u.host !== b.host) return url;
+	const from = b.pathname.split("/").slice(0, -1);
+	const to = u.pathname.split("/");
+	let i = 0;
+	while (i < from.length && i < to.length - 1 && from[i] === to[i]) i++;
+	if (i === 0 && from.length > 1) return url;
+	const rel = [...Array(from.length - i).fill(".."), ...to.slice(i)].join("/");
+	return decodeURI(rel) + u.search + u.hash;
+}
+/** Markdown → the HTML the editor edits; source blocks become code blocks of {@link SOURCE_LANG}. */
+function fromMarkdown(markdown, options = {}) {
+	const out = [];
+	let pending = [];
+	const flush = () => {
+		if (pending.length) out.push(renderMarkdown(pending.join("\n\n"), options.imageBase ? { imageBase: options.imageBase } : {}));
+		pending = [];
+	};
+	for (const block of splitBlocks(markdown)) {
+		if (block.kind === "markdown") {
+			pending.push(block.text);
+			continue;
+		}
+		flush();
+		out.push(`<pre><code class="language-${SOURCE_LANG}">${escapeHtml(block.text)}</code></pre>`);
+	}
+	flush();
+	return out.join("\n");
+}
+var SOURCE_FENCE = new RegExp(`^(\`{3,})${SOURCE_LANG}\\n([\\s\\S]*?)\\n\\1$`, "gm");
+/** The editor's HTML → Markdown; source blocks come back as written, pictures by their relative paths. */
+function toMarkdown(html, options = {}) {
+	const base = options.imageBase;
+	const relative = base ? html.replace(/(<img\b[^>]*?\ssrc=")([^"]*)(")/gi, (_m, head, src, tail) => {
+		return head + relativeTo(src.replace(/&amp;/g, "&"), base).replace(/&/g, "&amp;") + tail;
+	}) : html;
+	const md = htmlToMarkdown(relative).replace(SOURCE_FENCE, (_m, _fence, text) => text);
+	return md === "" ? "" : `${md}\n`;
+}
+/** One round: what saving a document unchanged in the editor gives. */
+function normalize(markdown, options = {}) {
+	return toMarkdown(fromMarkdown(markdown, options), options);
+}
+// src/locale.ts
+var en = {
+	visual: "Visual",
+	source: "Markdown",
+	split: "Side by side",
+	modes: "Editing mode",
+	preview: "Preview",
+	sourceBlock: "Markdown kept as written — edit it in the Markdown mode"
+};
+var ru = {
+	visual: "Визуально",
+	source: "Markdown",
+	split: "Рядом",
+	modes: "Режим правки",
+	preview: "Просмотр",
+	sourceBlock: "Markdown как написан — правится в режиме Markdown"
+};
+var markdownEditorLocales = {
+	en,
+	ru
+};
+function labelsFor(locale) {
+	return locale?.toLowerCase().startsWith("ru") ? ru : en;
+}
+// src/MarkdownEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = ["aria-pressed", "onClick"];
+var _hoisted_3 = ["data-source-label"];
+var _hoisted_4 = {
+	key: 2,
+	class: "dsk-md__panes"
+};
+var _hoisted_5 = [
+	"value",
+	"placeholder",
+	"readonly",
+	"aria-label"
+];
+var _hoisted_6 = ["aria-label"];
+// src/MarkdownEditor.vue
+var MarkdownEditor_default = /* @__PURE__ */ defineComponent({
+	__name: "MarkdownEditor",
+	props: /*@__PURE__*/ mergeModels({
+		modelValue: { default: "" },
+		modes: { default: () => [
+			"visual",
+			"source",
+			"split"
+		] },
+		placeholder: { default: void 0 },
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		minHeight: { default: "240px" },
+		maxHeight: { default: void 0 },
+		blockRenderers: { default: void 0 },
+		toolbarItems: { default: void 0 },
+		slashCommands: { default: void 0 },
+		locale: { default: void 0 },
+		labels: { default: void 0 },
+		imageBase: { default: void 0 },
+		linkBase: { default: void 0 }
+	}, {
+		"mode": { default: "visual" },
+		"modeModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["update:modelValue", "change"], ["update:mode"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const mode = useModel(__props, "mode");
+		const kitLocale = useLocale();
+		const t = computed(() => ({
+			...labelsFor(props.locale ?? kitLocale.value.code),
+			...props.labels
+		}));
+		const options = computed(() => ({ imageBase: props.imageBase ?? null }));
+		const markdown = ref(props.modelValue);
+		const html = ref(fromMarkdown(props.modelValue, options.value));
+		const wysiwyg = ref(null);
+		const area = ref(null);
+		watch(() => props.modelValue, (next) => {
+			if (next === markdown.value) return;
+			markdown.value = next;
+			html.value = fromMarkdown(next, options.value);
+		});
+		watch(() => props.imageBase, () => {
+			html.value = fromMarkdown(markdown.value, options.value);
+		});
+		function commit(next) {
+			if (next === markdown.value) return;
+			markdown.value = next;
+			emit("update:modelValue", next);
+			emit("change", next);
+		}
+		function onHtml(next) {
+			html.value = next;
+			commit(toMarkdown(next, options.value));
+		}
+		function onSource(event) {
+			commit(event.target.value);
+		}
+		function setMode(next) {
+			if (next === mode.value) return;
+			if (next === "visual") html.value = fromMarkdown(markdown.value, options.value);
+			mode.value = next;
+		}
+		/** Text that reads as Markdown: pasted into the visual editor, it arrives formatted. */
+		const MARKDOWN_HINT = /(^|\n)\s{0,3}(#{1,6}\s|[-*+]\s|\d+[.)]\s|>|```|~~~|\|.*\|)|\*\*[^*]+\*\*|\[[^\]]+\]\([^)]+\)|`[^`]+`/;
+		function onPaste(event) {
+			if (props.readonly || mode.value !== "visual") return;
+			const data = event.clipboardData;
+			if (!data || data.types.includes("text/html")) return;
+			const text = data.getData("text/plain");
+			if (!text || !MARKDOWN_HINT.test(text)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			document.execCommand("insertHTML", false, fromMarkdown(text, options.value));
+		}
+		function onTab(event) {
+			if (event.key !== "Tab" || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return;
+			event.preventDefault();
+			const el = event.target;
+			el.setRangeText("  ", el.selectionStart, el.selectionEnd, "end");
+			commit(el.value);
+		}
+		/** Focus the editor of the current mode. */
+		function focus() {
+			if (mode.value === "visual") wysiwyg.value?.controller?.chain().focus().run();
+			else area.value?.focus();
+		}
+		/** Insert Markdown at the caret (the source's caret in the Markdown modes). */
+		function insert(text) {
+			if (mode.value === "visual") {
+				focus();
+				document.execCommand("insertHTML", false, fromMarkdown(text, options.value));
+				return;
+			}
+			const el = area.value;
+			if (!el) return;
+			el.focus();
+			el.setRangeText(text, el.selectionStart, el.selectionEnd, "end");
+			commit(el.value);
+		}
+		__expose({
+			focus,
+			insert,
+			get value() {
+				return markdown.value;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["dsk-md", [`dsk-md--${mode.value}`, { "dsk-md--readonly": __props.readonly }]]),
+				style: normalizeStyle({
+					"--dsk-md-min-h": __props.minHeight,
+					"--dsk-md-max-h": __props.maxHeight
+				})
+			}, [__props.modes.length > 1 ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "dsk-md__modes",
+				role: "group",
+				"aria-label": t.value.modes
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.modes, (m) => {
+				return openBlock(), createElementBlock("button", {
+					key: m,
+					type: "button",
+					class: normalizeClass(["dsk-md__mode", { "dsk-md__mode--on": m === mode.value }]),
+					"aria-pressed": m === mode.value,
+					onClick: ($event) => setMode(m)
+				}, toDisplayString(t.value[m]), 11, _hoisted_2);
+			}), 128))], 8, _hoisted_1)) : createCommentVNode("", true), mode.value === "visual" ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: "dsk-md__visual",
+				"data-source-label": t.value.sourceBlock,
+				onPasteCapture: onPaste
+			}, [createVNode(unref(DskWysiwyg), {
+				ref_key: "wysiwyg",
+				ref: wysiwyg,
+				"model-value": html.value,
+				placeholder: __props.placeholder,
+				readonly: __props.readonly,
+				"min-height": __props.minHeight,
+				"max-height": __props.maxHeight,
+				"block-renderers": __props.blockRenderers,
+				"toolbar-items": __props.toolbarItems,
+				"slash-commands": __props.slashCommands,
+				locale: __props.locale,
+				"onUpdate:modelValue": onHtml
+			}, null, 8, [
+				"model-value",
+				"placeholder",
+				"readonly",
+				"min-height",
+				"max-height",
+				"block-renderers",
+				"toolbar-items",
+				"slash-commands",
+				"locale"
+			])], 40, _hoisted_3)) : (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("textarea", {
+				ref_key: "area",
+				ref: area,
+				class: "dsk-md__source",
+				value: markdown.value,
+				placeholder: __props.placeholder,
+				readonly: __props.readonly,
+				"aria-label": t.value.source,
+				spellcheck: "false",
+				onInput: onSource,
+				onKeydown: onTab
+			}, null, 40, _hoisted_5), mode.value === "split" ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "dsk-md__preview",
+				"aria-label": t.value.preview
+			}, [createVNode(unref(UidMarkdown), {
+				source: markdown.value,
+				"block-renderers": __props.blockRenderers,
+				"image-base": __props.imageBase,
+				"link-base": __props.linkBase
+			}, null, 8, [
+				"source",
+				"block-renderers",
+				"image-base",
+				"link-base"
+			])], 8, _hoisted_6)) : createCommentVNode("", true)]))], 6);
+		};
+	}
+});
+export { MarkdownEditor_default as MarkdownEditor, SOURCE_LANG, fromMarkdown, labelsFor, markdownEditorLocales, normalize, relativeTo, splitBlocks, toMarkdown };
+
+//# sourceMappingURL=index.mjs.map

package/dist/style.css

@@ -0,0 +1,99 @@
+/* MarkdownEditor: the mode switch, the source and the preview; the visual mode is the WYSIWYG editor's. */
+.dsk-md {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uid-space-sm, 8px);
+  min-width: 0;
+}
+
+.dsk-md__modes {
+  display: flex;
+  align-self: flex-end;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--uid-color-border, #e5e7eb);
+  border-radius: var(--uid-radius-md, 8px);
+  background: var(--uid-color-bg-subtle, #f8fafc);
+}
+
+.dsk-md__mode {
+  padding: 3px 12px;
+  border: none;
+  border-radius: calc(var(--uid-radius-md, 8px) - 2px);
+  background: none;
+  color: var(--uid-color-text-secondary, #4b5563);
+  font: inherit;
+  font-size: var(--uid-font-size-sm, 13px);
+  cursor: pointer;
+}
+
+.dsk-md__mode:hover {
+  color: var(--uid-color-text, #111827);
+}
+
+.dsk-md__mode--on {
+  background: var(--uid-color-bg, #fff);
+  color: var(--uid-color-text, #111827);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
+}
+
+.dsk-md__mode:focus-visible {
+  outline: 2px solid var(--uid-color-focus-ring, #3b82f6);
+  outline-offset: 1px;
+}
+
+.dsk-md__panes {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--uid-space-md, 12px);
+  min-height: var(--dsk-md-min-h, 240px);
+}
+
+.dsk-md--split .dsk-md__panes {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+@media (max-width: 720px) {
+  .dsk-md--split .dsk-md__panes {
+    grid-template-columns: 1fr;
+  }
+}
+
+.dsk-md__source {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--dsk-md-min-h, 240px);
+  max-height: var(--dsk-md-max-h, none);
+  padding: 12px 14px;
+  border: 1px solid var(--uid-color-border, #e5e7eb);
+  border-radius: var(--uid-radius-md, 8px);
+  background: var(--uid-color-bg, #fff);
+  color: var(--uid-color-text, #111827);
+  font: 13px/1.6 var(--uid-font-family-mono, ui-monospace, monospace);
+  resize: vertical;
+  tab-size: 2;
+}
+
+.dsk-md__source:focus-visible {
+  outline: 2px solid var(--uid-color-focus-ring, #3b82f6);
+  outline-offset: -1px;
+}
+
+.dsk-md__preview {
+  box-sizing: border-box;
+  min-height: var(--dsk-md-min-h, 240px);
+  max-height: var(--dsk-md-max-h, none);
+  overflow: auto;
+  padding: 4px 16px;
+  border: 1px solid var(--uid-color-border, #e5e7eb);
+  border-radius: var(--uid-radius-md, 8px);
+  background: var(--uid-color-bg, #fff);
+}
+
+/* A block kept as written: the code block of the x-markdown language reads as such. */
+.dsk-md__visual pre:has(> code.language-x-markdown) {
+  position: relative;
+  border-left: 3px solid var(--uid-color-warning, #d97706);
+}
+
+/*$vite$:1*/

package/package.json

@@ -1,6 +1,90 @@
 {
   "name": "@dskripchenko/markdown-editor",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "A Markdown editor for Vue 3 that edits like a word processor: the value is Markdown, the editing is the @dskripchenko/wysiwyg engine — its toolbar, slash menu, shortcuts and live blocks — with source and side-by-side modes, and a lossless round trip",
+  "keywords": [
+    "markdown",
+    "markdown-editor",
+    "wysiwyg",
+    "commonmark",
+    "gfm",
+    "vue",
+    "vue3",
+    "editor",
+    "rich-text"
+  ],
+  "homepage": "https://github.com/dskripchenko/markdown-editor#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dskripchenko/markdown-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dskripchenko/markdown-editor/issues"
+  },
+  "license": "MIT",
+  "author": "Denis Skripchenko (https://github.com/dskripchenko)",
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "!dist/**/*.map",
+    "CHANGELOG.md"
+  ],
+  "peerDependencies": {
+    "@dskripchenko/ui": "^1.19.1",
+    "@dskripchenko/wysiwyg": "^0.6.0",
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^3.0.3",
+    "@dskripchenko/ui": "^1.19.1",
+    "@dskripchenko/wysiwyg": "^0.6.0",
+    "@eslint/js": "^10.0.1",
+    "@microsoft/api-extractor": "^7.60.1",
+    "@types/node": "^22.20.5",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vue/test-utils": "^2.5.1",
+    "eslint": "^10.14.0",
+    "jsdom": "^29.1.1",
+    "playwright": "1.64.1",
+    "prettier": "^3.9.10",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.72.1",
+    "vite": "^8.3.5",
+    "vite-plugin-dts": "^5.1.2",
+    "vitest": "^5.0.5",
+    "vue": "^3.5.44",
+    "vue-tsc": "^3.3.14"
+  },
+  "scripts": {
+    "build": "vue-tsc --noEmit -p tsconfig.json && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src tests scripts",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "changeset": "changeset",
+    "release": "pnpm build && changeset publish",
+    "check:browser": "node scripts/browser-check.mjs",
+    "dev": "vite --config playground/vite.config.ts"
+  }
 }