comark-ui 0.0.0-stage → 0.7.1

package/dist/editor-BAdok66p.mjs

@@ -0,0 +1,835 @@
+import { parseMarkdown } from "comark";
+import { Extension, Node } from "@tiptap/core";
+import Image from "@tiptap/extension-image";
+import { TaskItem, TaskList } from "@tiptap/extension-list";
+import { TableKit } from "@tiptap/extension-table";
+import StarterKit from "@tiptap/starter-kit";
+import { renderMarkdown } from "comark/render";
+import { textContent } from "comark/utils";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+//#region src/editor/kit.ts
+const typesWithProps = [
+	"paragraph",
+	"heading",
+	"blockquote",
+	"bulletList",
+	"orderedList",
+	"listItem",
+	"taskList",
+	"taskItem",
+	"codeBlock",
+	"horizontalRule",
+	"hardBreak",
+	"image",
+	"table",
+	"tableRow",
+	"tableHeader",
+	"tableCell",
+	"bold",
+	"italic",
+	"strike",
+	"code",
+	"link"
+];
+/** Comark attributes the editor doesn't show, carried as they were parsed so writing the node back keeps them. */
+const props = {
+	default: null,
+	rendered: false
+};
+const name = (attribute) => ({
+	default: "",
+	parseHTML: (element) => element.getAttribute(attribute) ?? "",
+	renderHTML: (attrs) => ({ [attribute]: attrs.name })
+});
+function mediaKind(src) {
+	const path = (src ?? "").replace(/[?#].*$/, "");
+	return /\.(?:mp4|webm|mov|m4v)$/i.test(path) ? "video" : /\.(?:mp3|wav|ogg|m4a)$/i.test(path) ? "audio" : void 0;
+}
+/** Markdown's image, inline as Comark parses it, drawn as a player when comark-media would play it. */
+const ComarkImage = Image.extend({ renderHTML({ node, HTMLAttributes }) {
+	const kind = mediaKind(node.attrs.src);
+	if (!kind) return this.parent?.({
+		node,
+		HTMLAttributes
+	}) ?? ["img", HTMLAttributes];
+	return [kind, {
+		src: node.attrs.src,
+		title: node.attrs.title,
+		controls: "",
+		preload: "metadata"
+	}];
+} }).configure({ inline: true });
+/** A block component, `::name`, or a block of raw HTML. Its children are blocks and its `#slot`s. */
+const ComarkBlock = Node.create({
+	name: "comarkBlock",
+	group: "block",
+	content: "(block | comarkSlot)*",
+	defining: true,
+	addAttributes: () => ({
+		name: name("data-comark-block"),
+		props
+	}),
+	parseHTML: () => [{ tag: "div[data-comark-block]" }],
+	renderHTML: ({ HTMLAttributes }) => [
+		"div",
+		HTMLAttributes,
+		0
+	]
+});
+/** A component's named slot, `#name`. */
+const ComarkSlot = Node.create({
+	name: "comarkSlot",
+	content: "block*",
+	defining: true,
+	addAttributes: () => ({
+		name: name("data-comark-slot"),
+		props
+	}),
+	parseHTML: () => [{ tag: "div[data-comark-slot]" }],
+	renderHTML: ({ HTMLAttributes }) => [
+		"div",
+		HTMLAttributes,
+		0
+	]
+});
+/** An inline component, `:name[text]{props}`, or inline raw HTML. */
+const ComarkInline = Node.create({
+	name: "comarkInline",
+	group: "inline",
+	inline: true,
+	content: "inline*",
+	addAttributes: () => ({
+		name: name("data-comark-inline"),
+		props
+	}),
+	parseHTML: () => [{ tag: "span[data-comark-inline]" }],
+	renderHTML: ({ HTMLAttributes }) => [
+		"span",
+		HTMLAttributes,
+		0
+	]
+});
+/** An HTML comment between blocks. */
+const ComarkComment = Node.create({
+	name: "comarkComment",
+	group: "block",
+	atom: true,
+	addAttributes: () => ({ text: {
+		default: "",
+		parseHTML: (element) => element.getAttribute("data-comark-comment") ?? "",
+		renderHTML: (attrs) => ({ "data-comark-comment": attrs.text })
+	} }),
+	parseHTML: () => [{ tag: "div[data-comark-comment]" }],
+	renderHTML: ({ HTMLAttributes }) => ["div", HTMLAttributes]
+});
+/**
+* The schema `fromMarkdown` and `toMarkdown` read and write: StarterKit's nodes and marks, task lists, inline images,
+* tables, and Comark's components, slots, and comments. It needs no DOM, so a server can load it to convert a document
+* for a collaborative room.
+*/
+const ComarkKit = Extension.create({
+	name: "comarkKit",
+	addOptions: () => ({ starterKit: {} }),
+	addGlobalAttributes: () => [{
+		types: typesWithProps,
+		attributes: { props }
+	}],
+	addExtensions() {
+		return [
+			StarterKit.configure({
+				...this.options.starterKit,
+				underline: false
+			}),
+			TaskList,
+			TaskItem.configure({ nested: true }),
+			ComarkImage,
+			TableKit.configure({ table: { resizable: false } }),
+			ComarkBlock,
+			ComarkSlot,
+			ComarkInline,
+			ComarkComment
+		];
+	}
+});
+//#endregion
+//#region src/editor/markdown.ts
+const parseOptions = {
+	autoUnwrap: false,
+	headingIds: false
+};
+const marks = /* @__PURE__ */ new Map([
+	["strong", "bold"],
+	["em", "italic"],
+	["del", "strike"],
+	["code", "code"],
+	["a", "link"]
+]);
+const markTags = new Map([...marks].map(([tag, mark]) => [mark, tag]));
+const inlineTags = /* @__PURE__ */ new Set([
+	...marks.keys(),
+	"br",
+	"img",
+	"span",
+	"input"
+]);
+const headings = /* @__PURE__ */ new Set([
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+]);
+const builtIn = /* @__PURE__ */ new Set([
+	...headings,
+	"p",
+	"blockquote",
+	"hr",
+	"pre",
+	"table",
+	"ul",
+	"ol",
+	"li"
+]);
+const isText = (node) => !Array.isArray(node);
+const isElement = (node) => Array.isArray(node) && node[0] !== null;
+const childrenOf = (element) => element.slice(2);
+/** A prop as text. Comark props are strings, numbers, and booleans, or parsed JSON for `:prop` bindings. */
+const textOf = (value) => value === void 0 || value === null || value instanceof Object ? void 0 : String(value);
+const inlineHtml = ({ $: meta }) => meta instanceof Object && "block" in meta && meta.block === 0;
+const isInline = (node) => isText(node) || isElement(node) && (inlineTags.has(node[0]) || inlineHtml(node[1]));
+/** The props a node has no field for, or `undefined` when none are left. */
+function rest(props, ...keys) {
+	const left = Object.fromEntries(Object.entries(props).filter(([key]) => !keys.includes(key)));
+	return Object.keys(left).length ? left : void 0;
+}
+const classes = (props) => textOf(props.class)?.split(/\s+/) ?? [];
+function withoutClass(props, name) {
+	const left = classes(props).filter((value) => value && value !== name);
+	const { class: _, ...others } = props;
+	return left.length ? {
+		...others,
+		class: left.join(" ")
+	} : others;
+}
+function withClass(props, name) {
+	return {
+		...props,
+		class: [name, ...classes(props).filter((value) => value && value !== name)].join(" ")
+	};
+}
+const withProps = (attrs, props) => props ? {
+	...attrs,
+	props
+} : attrs;
+const node = (type, attrs, content) => {
+	const json = { type };
+	if (Object.keys(attrs).length) json.attrs = attrs;
+	if (content?.length) json.content = content;
+	return json;
+};
+function readBlocks(children, reading) {
+	const out = [];
+	let run = [];
+	const flush = () => {
+		if (run.some((child) => !isText(child) || child.trim())) out.push(node("paragraph", {}, readInline(run, [], reading)));
+		run = [];
+	};
+	for (const child of children) if (isInline(child)) run.push(child);
+	else {
+		flush();
+		out.push(...readBlock(child, reading));
+	}
+	flush();
+	return out;
+}
+function readBlock(child, reading) {
+	if (isText(child)) return [];
+	if (!isElement(child)) return [node("comarkComment", { text: child[2] })];
+	const [tag, props] = child;
+	const children = childrenOf(child);
+	if (tag === "p") return [node("paragraph", withProps({}, rest(props)), readInline(children, [], reading))];
+	if (headings.has(tag)) return [node("heading", withProps({ level: Number(tag[1]) }, rest(props)), readInline(children, [], reading))];
+	if (tag === "blockquote") return [node("blockquote", withProps({}, rest(props)), readBlocks(children, reading))];
+	if (tag === "hr") return [node("horizontalRule", withProps({}, rest(props)))];
+	if (tag === "pre") return [readCode(props, children)];
+	if (tag === "table" && children.every((part) => isElement(part) && [
+		"thead",
+		"tbody",
+		"tr"
+	].includes(part[0]))) return [readTable(props, children, reading)];
+	if (tag === "ul" || tag === "ol") return [readList(tag, props, children, reading)];
+	if (tag === "template" || builtIn.has(tag)) reading.lossy = true;
+	return [node("comarkBlock", withProps({ name: tag }, rest(props)), readComponent(children, reading))];
+}
+function readComponent(children, reading) {
+	const out = [];
+	let run = [];
+	const flush = () => {
+		out.push(...readBlocks(run, reading));
+		run = [];
+	};
+	for (const child of children) if (isElement(child) && child[0] === "template") {
+		flush();
+		const { name, ...props } = child[1];
+		out.push(node("comarkSlot", withProps({ name: textOf(name) ?? "default" }, rest(props)), readBlocks(childrenOf(child), reading)));
+	} else run.push(child);
+	flush();
+	return out;
+}
+function readCode(props, children) {
+	const code = children.find(isElement);
+	const text = (code ? childrenOf(code) : children).filter(isText).join("");
+	const language = textOf(props.language) ?? null;
+	return node("codeBlock", withProps(language ? { language } : {}, rest(props, "language")), text ? [{
+		type: "text",
+		text
+	}] : []);
+}
+const isTaskItem = (child) => isElement(child) && child[0] === "li" && classes(child[1]).includes("task-list-item");
+const isCheckbox = (child) => isElement(child) && child[0] === "input" && child[1].type === "checkbox";
+function readList(tag, props, children, reading) {
+	const items = children.filter(isElement);
+	if (tag === "ul" && items.length && items.every(isTaskItem)) return node("taskList", withProps({}, rest(withoutClass(props, "contains-task-list"))), items.map((item) => readTaskItem(item, reading)));
+	const listItems = items.map((item) => {
+		const blocks = readBlocks(childrenOf(item), reading);
+		if (blocks[0]?.type !== "paragraph") blocks.unshift({ type: "paragraph" });
+		return node("listItem", withProps({}, rest(item[1])), blocks);
+	});
+	if (tag === "ul") return node("bulletList", withProps({}, rest(props)), listItems);
+	const start = Number(props.start ?? 1);
+	return node("orderedList", withProps(start === 1 ? {} : { start }, rest(props, "start")), listItems);
+}
+function readTaskItem(item, reading) {
+	let checked = false;
+	const strip = (content) => {
+		const [box, next, ...after] = content;
+		if (box === void 0 || !isCheckbox(box)) return content;
+		checked = box[1][":checked"] === "true" || box[1].checked === true;
+		if (next === void 0) return after;
+		return isText(next) ? [next.replace(/^\s+/, ""), ...after] : [next, ...after];
+	};
+	const [first, ...others] = childrenOf(item);
+	let content;
+	if (first !== void 0 && isElement(first) && first[0] === "p") content = [[
+		first[0],
+		first[1],
+		...strip(childrenOf(first))
+	], ...others];
+	else content = strip(childrenOf(item));
+	const blocks = readBlocks(content, reading);
+	if (blocks[0]?.type !== "paragraph") blocks.unshift({ type: "paragraph" });
+	return node("taskItem", withProps({ checked }, rest(withoutClass(item[1], "task-list-item"))), blocks);
+}
+function readTable(props, children, reading) {
+	const rows = children.filter(isElement).flatMap((section) => section[0] === "tr" ? [section] : childrenOf(section).filter(isElement));
+	return node("table", withProps({}, rest(props)), rows.map((row) => node("tableRow", withProps({}, rest(row[1])), childrenOf(row).filter(isElement).map((cell) => node(cell[0] === "th" ? "tableHeader" : "tableCell", withProps({}, rest(cell[1])), [node("paragraph", {}, readInline(childrenOf(cell), [], reading))])))));
+}
+function readInline(children, active, reading) {
+	const out = [];
+	const marked = (json) => active.length ? {
+		...json,
+		marks: active
+	} : json;
+	for (const child of children) {
+		if (isText(child)) {
+			if (child) out.push(marked({
+				type: "text",
+				text: child
+			}));
+			continue;
+		}
+		if (!isElement(child)) {
+			reading.lossy = true;
+			continue;
+		}
+		const [tag, props] = child;
+		const content = childrenOf(child);
+		const mark = marks.get(tag);
+		if (mark && !(tag === "code" && !content.every(isText))) {
+			const attrs = mark === "link" ? withProps({
+				href: props.href ?? null,
+				title: props.title ?? null
+			}, rest(props, "href", "title")) : withProps({}, rest(props));
+			const next = Object.keys(attrs).length ? {
+				type: mark,
+				attrs
+			} : { type: mark };
+			out.push(...readInline(content, [...active, next], reading));
+		} else if (tag === "br") out.push(marked(node("hardBreak", withProps({}, rest(props)))));
+		else if (tag === "img") out.push(marked(node("image", withProps({
+			src: props.src ?? null,
+			alt: props.alt ?? null,
+			title: props.title ?? null
+		}, rest(props, "src", "alt", "title")))));
+		else out.push(marked(node("comarkInline", withProps({ name: tag }, rest(props)), readInline(content, [], reading))));
+	}
+	return out;
+}
+const propsOf = (attrs) => attrs?.props ?? {};
+const plainText = (content = []) => content.map((child) => child.text ?? "").join("");
+function writeBlocks(content = []) {
+	return content.flatMap(writeBlock);
+}
+function writeBlock(json) {
+	const props = propsOf(json.attrs);
+	const attrs = json.attrs ?? {};
+	switch (json.type) {
+		case "paragraph": return json.content?.length ? [[
+			"p",
+			props,
+			...writeInline(json.content)
+		]] : [];
+		case "heading": return [[
+			`h${Number(attrs.level ?? 1)}`,
+			props,
+			...writeInline(json.content)
+		]];
+		case "blockquote": return [[
+			"blockquote",
+			props,
+			...writeBlocks(json.content)
+		]];
+		case "horizontalRule": return [["hr", props]];
+		case "codeBlock": {
+			const language = textOf(attrs.language) || void 0;
+			return [[
+				"pre",
+				language ? {
+					...props,
+					language
+				} : props,
+				[
+					"code",
+					language ? { class: `language-${language}` } : {},
+					plainText(json.content)
+				]
+			]];
+		}
+		case "bulletList": return [[
+			"ul",
+			props,
+			...writeBlocks(json.content)
+		]];
+		case "orderedList": {
+			const start = Number(attrs.start ?? 1);
+			return [[
+				"ol",
+				start === 1 ? props : {
+					...props,
+					start
+				},
+				...writeBlocks(json.content)
+			]];
+		}
+		case "listItem": return [[
+			"li",
+			props,
+			...writeBlocks(json.content)
+		]];
+		case "taskList": return [[
+			"ul",
+			withClass(props, "contains-task-list"),
+			...writeBlocks(json.content)
+		]];
+		case "taskItem": {
+			const [first, ...others] = json.content ?? [];
+			const text = writeInline(first?.content);
+			const [head] = text;
+			if (head !== void 0 && isText(head)) text[0] = ` ${head}`;
+			else text.unshift(" ");
+			const box = {
+				class: "task-list-item-checkbox",
+				type: "checkbox",
+				":disabled": "true"
+			};
+			if (attrs.checked) box[":checked"] = "true";
+			return [[
+				"li",
+				withClass(props, "task-list-item"),
+				["input", box],
+				...text,
+				...writeBlocks(others)
+			]];
+		}
+		case "table": return [writeTable(json, props)];
+		case "comarkBlock": return [[
+			String(attrs.name),
+			props,
+			...(json.content ?? []).flatMap((child) => child.type === "comarkSlot" ? [[
+				"template",
+				{
+					...propsOf(child.attrs),
+					name: child.attrs?.name
+				},
+				...writeBlocks(child.content)
+			]] : writeBlock(child))
+		]];
+		case "comarkComment": return [[
+			null,
+			{},
+			textOf(attrs.text) ?? ""
+		]];
+		default: return [];
+	}
+}
+function writeTable(json, props) {
+	const rows = json.content ?? [];
+	const isHeader = (row) => row.content?.every((cell) => cell.type === "tableHeader") ?? false;
+	const firstBody = rows.findIndex((row) => !isHeader(row));
+	const split = firstBody === -1 ? rows.length : Math.max(1, firstBody);
+	const row = (tag) => (json) => [
+		"tr",
+		propsOf(json.attrs),
+		...(json.content ?? []).map((cell) => [
+			tag,
+			propsOf(cell.attrs),
+			...(cell.content ?? []).flatMap((paragraph, index) => [...index ? [["br", {}]] : [], ...writeInline(paragraph.content)])
+		])
+	];
+	const body = rows.slice(split).map(row("td"));
+	return [
+		"table",
+		props,
+		[
+			"thead",
+			{},
+			...rows.slice(0, split).map(row("th"))
+		],
+		...body.length ? [[
+			"tbody",
+			{},
+			...body
+		]] : []
+	];
+}
+const sameMark = (a, b) => a.type === b.type && JSON.stringify(a.attrs ?? {}) === JSON.stringify(b.attrs ?? {});
+function writeMark(mark, children) {
+	const props = propsOf(mark.attrs);
+	if (mark.type !== "link") return [
+		markTags.get(mark.type) ?? "span",
+		props,
+		...children
+	];
+	const href = textOf(mark.attrs?.href);
+	const title = textOf(mark.attrs?.title);
+	const link = {
+		...props,
+		href
+	};
+	if (title) link.title = title;
+	return [
+		"a",
+		link,
+		...children
+	];
+}
+function append(children, child) {
+	const last = children.at(-1);
+	if (last !== void 0 && isText(last) && isText(child)) children[children.length - 1] = last + child;
+	else children.push(child);
+}
+function writeInline(content = []) {
+	const open = [];
+	const root = [];
+	const close = (depth) => {
+		for (let frame = open.pop(); frame; frame = open.length > depth ? open.pop() : void 0) append(open.at(-1)?.children ?? root, writeMark(frame.mark, frame.children));
+	};
+	for (const json of content) {
+		const active = json.marks ?? [];
+		const same = (index) => {
+			const frame = open[index];
+			const mark = active[index];
+			return frame !== void 0 && mark !== void 0 && sameMark(frame.mark, mark);
+		};
+		let keep = 0;
+		while (same(keep)) keep++;
+		if (open.length > keep) close(keep);
+		for (const mark of active.slice(keep)) open.push({
+			mark,
+			children: []
+		});
+		for (const child of writeLeaf(json)) append(open.at(-1)?.children ?? root, child);
+	}
+	if (open.length) close(0);
+	return root;
+}
+function writeLeaf(json) {
+	const props = propsOf(json.attrs);
+	const attrs = json.attrs ?? {};
+	if (json.type === "text") return json.text ? [json.text] : [];
+	if (json.type === "hardBreak") return [["br", props]];
+	if (json.type === "image") {
+		const image = {
+			...props,
+			src: attrs.src
+		};
+		if (attrs.alt) image.alt = attrs.alt;
+		if (attrs.title) image.title = attrs.title;
+		return [["img", image]];
+	}
+	if (json.type === "comarkInline") return [[
+		String(attrs.name),
+		props,
+		...writeInline(json.content)
+	]];
+	return [];
+}
+function equal(a, b) {
+	if (a === b) return true;
+	if (!(a instanceof Object) || !(b instanceof Object) || Array.isArray(a) !== Array.isArray(b)) return false;
+	const left = Object.entries(a).filter(([, value]) => value !== void 0);
+	const right = new Map(Object.entries(b).filter(([, value]) => value !== void 0));
+	return left.length === right.size && left.every(([key, value]) => right.has(key) && equal(value, right.get(key)));
+}
+/** Reads Markdown into the editor's document. */
+async function fromMarkdown(markdown) {
+	const tree = await parseMarkdown(markdown, parseOptions);
+	const reading = { lossy: false };
+	const content = readBlocks(tree.nodes, reading);
+	return {
+		doc: {
+			type: "doc",
+			content: content.length ? content : [{ type: "paragraph" }]
+		},
+		frontmatter: tree.frontmatter ?? {},
+		lossy: reading.lossy
+	};
+}
+/** Writes the editor's document, such as `editor.getJSON()`, back to Markdown. */
+async function toMarkdown(doc, options = {}) {
+	const markdown = await renderMarkdown({
+		nodes: writeBlocks(doc.content),
+		frontmatter: options.frontmatter ?? {},
+		meta: {}
+	}, { headingIds: false });
+	return markdown.trim() ? `${markdown.trimEnd()}\n` : "";
+}
+/**
+* Whether the editor can open this Markdown and save it without changing what readers see. Pass the parse plugins the
+* page renders with, so syntax only they read, such as footnote definitions, counts too.
+*/
+async function checkMarkdown(markdown, options = {}) {
+	const first = await fromMarkdown(markdown);
+	if (first.lossy) return { editable: false };
+	const written = await toMarkdown(first.doc, first);
+	const again = await fromMarkdown(written);
+	if (again.lossy || !equal(first.doc, again.doc) || !equal(first.frontmatter, again.frontmatter)) return { editable: false };
+	const { plugins = [] } = options;
+	if (plugins.length) {
+		const read = async (source) => {
+			return (await parseMarkdown(source, {
+				...parseOptions,
+				plugins: [...plugins]
+			})).nodes.map((child) => textContent(child)).join("").replace(/\s+/g, " ").trim();
+		};
+		if (await read(markdown) !== await read(written)) return { editable: false };
+	}
+	return {
+		editable: true,
+		markdown: written
+	};
+}
+//#endregion
+//#region src/editor/upload.ts
+const uploadKey = new PluginKey("comarkUpload");
+const acceptMedia = (file) => /^(?:image|video|audio)\//.test(file.type);
+/** Where placeholder `id` sits now, after every edit since it was added. */
+function findUpload(state, id) {
+	return uploadKey.getState(state)?.find(void 0, void 0, (spec) => spec.id === id)[0]?.from;
+}
+function placeholder(pending) {
+	const root = document.createElement("span");
+	root.className = "cue-upload";
+	root.contentEditable = "false";
+	root.dataset.kind = pending.file.type.split("/")[0];
+	if (pending.preview && root.dataset.kind === "image") {
+		const image = document.createElement("img");
+		image.src = pending.preview;
+		image.alt = "";
+		root.append(image);
+	} else if (pending.preview && root.dataset.kind === "video") {
+		const video = document.createElement("video");
+		video.src = pending.preview;
+		video.muted = true;
+		root.append(video);
+	}
+	const label = document.createElement("span");
+	label.className = "cue-upload-label";
+	label.setAttribute("role", "status");
+	root.append(label);
+	const show = (fraction) => {
+		root.style.setProperty("--cue-upload", fraction === null ? "0%" : `${Math.round(fraction * 100)}%`);
+		label.textContent = fraction === null ? `Uploading ${pending.file.name}` : `Uploading ${pending.file.name}, ${Math.round(fraction * 100)}%`;
+	};
+	show(pending.fraction);
+	return {
+		root,
+		show
+	};
+}
+/**
+* Uploads `files` into the document at `pos`. Each shows a placeholder there until its URL comes back, then becomes an
+* image node, which comark-media plays when its URL ends in a video or audio extension. The placeholder is a
+* decoration, so a collaborative room never sees a file that hasn't finished.
+*/
+function startUploads(view, files, pos, options) {
+	const { upload } = options;
+	if (!upload) return [];
+	const batch = Symbol();
+	return files.flatMap((file) => options.accept(file) ? [send(view, file, pos, upload, options, batch)] : []);
+}
+function send(view, file, pos, upload, options, batch) {
+	const pending = {
+		id: nextId++,
+		file,
+		fraction: null
+	};
+	if (/^(?:image|video)\//.test(file.type)) pending.preview = URL.createObjectURL(file);
+	pendingUploads.set(pending.id, pending);
+	view.dispatch(view.state.tr.setMeta(uploadKey, { add: {
+		id: pending.id,
+		pos,
+		batch
+	} }));
+	const finish = () => {
+		pendingUploads.delete(pending.id);
+		if (pending.preview) URL.revokeObjectURL(pending.preview);
+	};
+	return upload(file, (fraction) => {
+		pending.fraction = Math.min(1, Math.max(0, fraction));
+		elements.get(pending.id)?.show(pending.fraction);
+	}).then((src) => {
+		const at = findUpload(view.state, pending.id);
+		const tr = view.state.tr.setMeta(uploadKey, {
+			remove: pending.id,
+			batch
+		});
+		if (at !== void 0) insertImage(tr, at, view.state.schema.nodes.image.create({
+			src,
+			alt: file.name
+		}));
+		view.dispatch(tr);
+		finish();
+		return src;
+	}, (error) => {
+		view.dispatch(view.state.tr.setMeta(uploadKey, { remove: pending.id }));
+		finish();
+		options.onError?.(error, file);
+	});
+}
+function insertImage(tr, pos, image) {
+	if (tr.doc.resolve(pos).parent.inlineContent) tr.insert(pos, image);
+	else tr.insert(pos, tr.doc.type.schema.nodes.paragraph.create(null, image));
+}
+let nextId = 1;
+const pendingUploads = /* @__PURE__ */ new Map();
+const elements = /* @__PURE__ */ new Map();
+function uploadWidget(pos, id, batch) {
+	return Decoration.widget(pos, () => {
+		const element = placeholder(pendingUploads.get(id) ?? {
+			id,
+			file: new File([], ""),
+			fraction: null
+		});
+		elements.set(id, element);
+		return element.root;
+	}, {
+		id,
+		batch,
+		key: String(id),
+		side: -1,
+		destroy: () => elements.delete(id)
+	});
+}
+/** The plugin alone, for a ProseMirror editor without Tiptap. */
+function uploadPlugin(options) {
+	const filesOf = (list) => Array.from(list ?? []).filter(options.accept);
+	return new Plugin({
+		key: uploadKey,
+		state: {
+			init: () => DecorationSet.empty,
+			apply(tr, set) {
+				let next = set.map(tr.mapping, tr.doc);
+				const meta = tr.getMeta(uploadKey);
+				if (meta && "add" in meta) {
+					const { id, pos, batch } = meta.add;
+					next = next.add(tr.doc, [uploadWidget(pos, id, batch)]);
+				} else if (meta && "remove" in meta) {
+					if (meta.batch) for (const widget of set.find(void 0, void 0, (spec) => spec.batch === meta.batch && spec.id > meta.remove)) {
+						next = next.remove(next.find(void 0, void 0, (spec) => spec.id === widget.spec.id));
+						next = next.add(tr.doc, [uploadWidget(tr.mapping.map(widget.from, 1), widget.spec.id, meta.batch)]);
+					}
+					next = next.remove(next.find(void 0, void 0, (spec) => spec.id === meta.remove));
+				}
+				return next;
+			}
+		},
+		props: {
+			decorations: (state) => uploadKey.getState(state),
+			handlePaste(view, event) {
+				const files = filesOf(event.clipboardData?.files);
+				if (!files.length || !options.upload) return false;
+				Promise.all(startUploads(view, files, view.state.selection.from, options));
+				return true;
+			},
+			handleDrop(view, event, _slice, moved) {
+				const files = filesOf(event.dataTransfer?.files);
+				if (moved || !files.length || !options.upload) return false;
+				const pos = view.posAtCoords({
+					left: event.clientX,
+					top: event.clientY
+				})?.pos ?? view.state.selection.from;
+				Promise.all(startUploads(view, files, pos, options));
+				return true;
+			}
+		}
+	});
+}
+/** Uploads pasted and dropped files, with a placeholder that shows the progress. Pass `upload` to turn it on. */
+const Upload = Extension.create({
+	name: "comarkUpload",
+	addOptions: () => ({
+		upload: void 0,
+		accept: acceptMedia,
+		onError: void 0
+	}),
+	addProseMirrorPlugins() {
+		return [uploadPlugin(this.options)];
+	},
+	addCommands() {
+		return { uploadFiles: (files) => ({ view }) => {
+			if (!this.options.upload) return false;
+			Promise.all(startUploads(view, files, view.state.selection.from, this.options));
+			return true;
+		} };
+	}
+});
+//#endregion
+//#region src/editor/codec.ts
+function createEditorCodec(options = {}) {
+	const kit = ComarkKit.configure({
+		...options.kit,
+		starterKit: {
+			undoRedo: false,
+			trailingNode: false,
+			...options.kit?.starterKit
+		}
+	});
+	return {
+		extensions: () => [kit],
+		fromMarkdown: async (markdown) => (await fromMarkdown(markdown)).doc,
+		toMarkdown: (doc) => toMarkdown(doc),
+		async verify(markdown) {
+			if (Object.keys((await fromMarkdown(markdown)).frontmatter).length) return { writable: false };
+			const check = await checkMarkdown(markdown, { plugins: options.plugins });
+			return check.editable ? {
+				writable: true,
+				canonical: check.markdown
+			} : { writable: false };
+		}
+	};
+}
+//#endregion
+export { uploadKey as a, fromMarkdown as c, ComarkComment as d, ComarkImage as f, ComarkSlot as h, startUploads as i, toMarkdown as l, ComarkKit as m, Upload as n, uploadPlugin as o, ComarkInline as p, findUpload as r, checkMarkdown as s, createEditorCodec as t, ComarkBlock as u };