@dskripchenko/markdown-editor 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

package/dist/index.cjs

@@ -122,12 +122,35 @@ function splitBlocks(markdown) {
 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) {
+function fromMarkdown(markdown, options = {}) {
 	const out = [];
 	let pending = [];
 	const flush = () => {
-		if (pending.length) out.push((0, _dskripchenko_ui.renderMarkdown)(pending.join("\n\n")));
+		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)) {
@@ -142,14 +165,18 @@ function fromMarkdown(markdown) {
 	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. */
-function toMarkdown(html) {
-	const md = (0, _dskripchenko_wysiwyg.htmlToMarkdown)(html).replace(SOURCE_FENCE, (_m, _fence, text) => text);
+/** 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) {
-	return toMarkdown(fromMarkdown(markdown));
+function normalize(markdown, options = {}) {
+	return toMarkdown(fromMarkdown(markdown, options), options);
 }
 // src/locale.ts
 var en = {
@@ -211,7 +238,9 @@ var MarkdownEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		toolbarItems: { default: void 0 },
 		slashCommands: { default: void 0 },
 		locale: { default: void 0 },
-		labels: { default: void 0 }
+		labels: { default: void 0 },
+		imageBase: { default: void 0 },
+		linkBase: { default: void 0 }
 	}, {
 		"mode": { default: "visual" },
 		"modeModifiers": {}
@@ -226,14 +255,18 @@ var MarkdownEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			...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));
+		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);
+			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;
@@ -243,14 +276,14 @@ var MarkdownEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}
 		function onHtml(next) {
 			html.value = next;
-			commit(toMarkdown(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);
+			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. */
@@ -263,7 +296,7 @@ var MarkdownEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (!text || !MARKDOWN_HINT.test(text)) return;
 			event.preventDefault();
 			event.stopPropagation();
-			document.execCommand("insertHTML", false, fromMarkdown(text));
+			document.execCommand("insertHTML", false, fromMarkdown(text, options.value));
 		}
 		function onTab(event) {
 			if (event.key !== "Tab" || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return;
@@ -281,7 +314,7 @@ var MarkdownEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		function insert(text) {
 			if (mode.value === "visual") {
 				focus();
-				document.execCommand("insertHTML", false, fromMarkdown(text));
+				document.execCommand("insertHTML", false, fromMarkdown(text, options.value));
 				return;
 			}
 			const el = area.value;
@@ -362,8 +395,15 @@ var MarkdownEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"aria-label": t.value.preview
 			}, [(0, vue.createVNode)((0, vue.unref)(_dskripchenko_ui.UidMarkdown), {
 				source: markdown.value,
-				"block-renderers": __props.blockRenderers
-			}, null, 8, ["source", "block-renderers"])], 8, _hoisted_6)) : (0, vue.createCommentVNode)("", true)]))], 6);
+				"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);
 		};
 	}
 });
@@ -373,6 +413,7 @@ exports.fromMarkdown = fromMarkdown;
 exports.labelsFor = labelsFor;
 exports.markdownEditorLocales = markdownEditorLocales;
 exports.normalize = normalize;
+exports.relativeTo = relativeTo;
 exports.splitBlocks = splitBlocks;
 exports.toMarkdown = toMarkdown;
 

package/dist/index.d.ts

@@ -20,6 +20,7 @@ declare const __VLS_export: DefineComponent<__VLS_PublicProps, {
     onChange?: ((markdown: string) => any) | undefined;
     "onUpdate:mode"?: ((value: MarkdownEditorMode) => any) | undefined;
 }>, {
+    imageBase: string;
     modelValue: string;
     placeholder: string;
     toolbarItems: ToolbarItem[];
@@ -31,6 +32,7 @@ declare const __VLS_export: DefineComponent<__VLS_PublicProps, {
     locale: MarkdownEditorLocale;
     labels: Partial<MarkdownEditorLabels>;
     modes: MarkdownEditorMode[];
+    linkBase: string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare type __VLS_ModelProps = {
@@ -49,17 +51,27 @@ declare type __VLS_Props = {
     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): string;
+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;
@@ -90,7 +102,14 @@ export declare const markdownEditorLocales: Record<MarkdownEditorLocale, Markdow
 export declare type MarkdownEditorMode = 'visual' | 'source' | 'split';
 
 /** One round: what saving a document unchanged in the editor gives. */
-export declare function normalize(markdown: string): string;
+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'];
 
@@ -103,8 +122,8 @@ export declare const SOURCE_LANG = "x-markdown";
  */
 export declare function splitBlocks(markdown: string): MarkdownBlock[];
 
-/** The editor's HTML → Markdown; source blocks come back as written. */
-export declare function toMarkdown(html: string): string;
+/** 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'];
 

package/dist/index.mjs

@@ -121,12 +121,35 @@ function splitBlocks(markdown) {
 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) {
+function fromMarkdown(markdown, options = {}) {
 	const out = [];
 	let pending = [];
 	const flush = () => {
-		if (pending.length) out.push(renderMarkdown(pending.join("\n\n")));
+		if (pending.length) out.push(renderMarkdown(pending.join("\n\n"), options.imageBase ? { imageBase: options.imageBase } : {}));
 		pending = [];
 	};
 	for (const block of splitBlocks(markdown)) {
@@ -141,14 +164,18 @@ function fromMarkdown(markdown) {
 	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. */
-function toMarkdown(html) {
-	const md = htmlToMarkdown(html).replace(SOURCE_FENCE, (_m, _fence, text) => text);
+/** 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) {
-	return toMarkdown(fromMarkdown(markdown));
+function normalize(markdown, options = {}) {
+	return toMarkdown(fromMarkdown(markdown, options), options);
 }
 // src/locale.ts
 var en = {
@@ -210,7 +237,9 @@ var MarkdownEditor_default = /* @__PURE__ */ defineComponent({
 		toolbarItems: { default: void 0 },
 		slashCommands: { default: void 0 },
 		locale: { default: void 0 },
-		labels: { default: void 0 }
+		labels: { default: void 0 },
+		imageBase: { default: void 0 },
+		linkBase: { default: void 0 }
 	}, {
 		"mode": { default: "visual" },
 		"modeModifiers": {}
@@ -225,14 +254,18 @@ var MarkdownEditor_default = /* @__PURE__ */ defineComponent({
 			...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));
+		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);
+			html.value = fromMarkdown(next, options.value);
+		});
+		watch(() => props.imageBase, () => {
+			html.value = fromMarkdown(markdown.value, options.value);
 		});
 		function commit(next) {
 			if (next === markdown.value) return;
@@ -242,14 +275,14 @@ var MarkdownEditor_default = /* @__PURE__ */ defineComponent({
 		}
 		function onHtml(next) {
 			html.value = next;
-			commit(toMarkdown(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);
+			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. */
@@ -262,7 +295,7 @@ var MarkdownEditor_default = /* @__PURE__ */ defineComponent({
 			if (!text || !MARKDOWN_HINT.test(text)) return;
 			event.preventDefault();
 			event.stopPropagation();
-			document.execCommand("insertHTML", false, fromMarkdown(text));
+			document.execCommand("insertHTML", false, fromMarkdown(text, options.value));
 		}
 		function onTab(event) {
 			if (event.key !== "Tab" || event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return;
@@ -280,7 +313,7 @@ var MarkdownEditor_default = /* @__PURE__ */ defineComponent({
 		function insert(text) {
 			if (mode.value === "visual") {
 				focus();
-				document.execCommand("insertHTML", false, fromMarkdown(text));
+				document.execCommand("insertHTML", false, fromMarkdown(text, options.value));
 				return;
 			}
 			const el = area.value;
@@ -361,11 +394,18 @@ var MarkdownEditor_default = /* @__PURE__ */ defineComponent({
 				"aria-label": t.value.preview
 			}, [createVNode(unref(UidMarkdown), {
 				source: markdown.value,
-				"block-renderers": __props.blockRenderers
-			}, null, 8, ["source", "block-renderers"])], 8, _hoisted_6)) : createCommentVNode("", true)]))], 6);
+				"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, splitBlocks, toMarkdown };
+export { MarkdownEditor_default as MarkdownEditor, SOURCE_LANG, fromMarkdown, labelsFor, markdownEditorLocales, normalize, relativeTo, splitBlocks, toMarkdown };
 
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dskripchenko/markdown-editor",
-  "version": "0.1.0",
+  "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",