@aicayzer/inkkit 0.1.4 → 0.1.5

package/dist/chunks/{core-DP-izJDM.js → core-D7n0IhAZ.js}

@@ -28357,6 +28357,10 @@ var defaultLabels = {
 	sourceEditor: "Markdown source editor",
 	placeholder: "Start typing…",
 	copyCode: "Copy",
+	codeLanguage: "Code language",
+	codeLanguageSearch: "Search languages",
+	codeAuto: "Auto",
+	codePlainText: "Plain text",
 	expandCallout: "Expand",
 	collapseCallout: "Collapse",
 	diagramRendering: "Rendering diagram…",
@@ -44991,6 +44995,16 @@ function finalCodeEnding(doc) {
 		last = last.lastChild;
 	}
 }
+/** Change only the language word, retaining fence spelling and extra metadata. */
+function languageFence(value, language) {
+	const fence = readFence(value);
+	if (!fence) return null;
+	const match = /^(\s*)(\S+)?([\s\S]*)$/.exec(fence.info);
+	return {
+		...fence,
+		info: match[1] + language + match[3]
+	};
+}
 //#endregion
 //#region src/literals.ts
 var unsupported = /* @__PURE__ */ new Set([
@@ -45027,6 +45041,7 @@ function containsUnsupported(node, images, inline = false) {
 	return unsupported.has(node.type) && !(images && node.type === "image") || "children" in node && node.children.some((child) => containsUnsupported(child, images, inline || node.type === "paragraph" || node.type === "heading"));
 }
 function containsUnresolved(node, source) {
+	if (node.type === "link") return false;
 	if (node.type === "text") {
 		const start = node.position?.start.offset;
 		const end = node.position?.end.offset;
@@ -47375,7 +47390,7 @@ function completedAngle(tr, chars, from, to) {
 	let start = end - 1;
 	for (; start >= 0; start--) {
 		const char = chars[start];
-		if (!char || char.marks.some((mark) => mark.type.spec.code) || char.link && char.form !== "literal" || !sameMarks(char.marks, closing.marks) || /[\s>]/.test(char.text)) return void 0;
+		if (!char || char.marks.some((mark) => mark.type.spec.code) || char.link && char.form !== "literal" || char.text !== "<" && !sameMarks(char.marks, closing.marks) || /[\s>]/.test(char.text)) return void 0;
 		if (char.text === "<") break;
 	}
 	if (start < 0) return void 0;
@@ -47550,7 +47565,12 @@ function linked(tr, blocks) {
 }
 function readsBack(ctx, tr, pos) {
 	const block = tr.doc.nodeAt(pos);
-	const doc = tr.doc.type.create(null, [tr.doc.type.schema.nodes.paragraph.create(null, block.content)]);
+	const references = /* @__PURE__ */ new Set();
+	block.descendants((node) => {
+		for (const mark of node.marks) if (mark.type.name === "link" && mark.attrs.identifier) references.add(normaliseLabel(String(mark.attrs.identifier)));
+	});
+	const definitions = references.size ? [...referenceDefinitions(tr.doc)].filter(([identifier]) => references.has(identifier)).map(([, definition]) => definition.node) : [];
+	const doc = tr.doc.type.create(null, [tr.doc.type.schema.nodes.paragraph.create(null, block.content), ...definitions]);
 	return semanticSignature(ctx.get(parserCtx)(serialize(ctx, doc))) === semanticSignature(doc);
 }
 var textblocks = (doc, from, to) => {
@@ -50584,16 +50604,16 @@ var literalReread = $prose((ctx) => new Plugin({
 //#region src/decorations.ts
 var copyIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5.5\" y=\"5.5\" width=\"8\" height=\"8\" rx=\"1.5\"/><path d=\"M10.5 5.5v-2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2\"/></svg>";
 var doneIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 8.5l3 3 6-6.5\"/></svg>";
-function copyButton(onCopy, label) {
+function copyButton(onCopy, label, text) {
 	const button = document.createElement("button");
 	button.type = "button";
+	button.tabIndex = 0;
 	button.className = "inkkit-copy";
 	button.setAttribute("aria-label", label);
 	button.innerHTML = copyIcon;
 	button.addEventListener("mousedown", (event) => event.preventDefault());
 	button.addEventListener("click", () => {
-		const code = button.closest("pre")?.querySelector("code");
-		onCopy(code?.textContent ?? "");
+		onCopy(text());
 		button.dataset.copied = "";
 		button.innerHTML = doneIcon;
 		window.setTimeout(() => {
@@ -50610,7 +50630,10 @@ function codeCopyPlugin(onCopy) {
 			const widgets = [];
 			state.doc.descendants((node, pos) => {
 				if (node.type.name !== "code_block") return true;
-				widgets.push(Decoration.widget(pos + 1, () => copyButton(onCopy, editorLabels(ctx).copyCode), {
+				widgets.push(Decoration.widget(pos + 1, (view, getPos) => copyButton(onCopy, editorLabels(ctx).copyCode, () => {
+					const at = getPos();
+					return at == null ? "" : view.state.doc.nodeAt(at - 1)?.textContent ?? "";
+				}), {
 					side: -1,
 					key: "copy",
 					ignoreSelection: true
@@ -50633,6 +50656,315 @@ var placeholderPlugin = $prose((ctx) => new Plugin({
 	} }
 }));
 //#endregion
+//#region src/code-languages.ts
+var codeLanguages = [
+	["arduino", "Arduino"],
+	["bash", "Bash"],
+	["c", "C"],
+	["cpp", "C++"],
+	["csharp", "C#"],
+	["css", "CSS"],
+	["diff", "Diff"],
+	["go", "Go"],
+	["graphql", "GraphQL"],
+	["ini", "INI"],
+	["java", "Java"],
+	["javascript", "JavaScript"],
+	["json", "JSON"],
+	["kotlin", "Kotlin"],
+	["less", "Less"],
+	["lua", "Lua"],
+	["makefile", "Makefile"],
+	["markdown", "Markdown"],
+	["objectivec", "Objective-C"],
+	["perl", "Perl"],
+	["php", "PHP"],
+	["php-template", "PHP template"],
+	["python", "Python"],
+	["python-repl", "Python REPL"],
+	["r", "R"],
+	["ruby", "Ruby"],
+	["rust", "Rust"],
+	["scss", "SCSS"],
+	["shell", "Shell"],
+	["sql", "SQL"],
+	["swift", "Swift"],
+	["typescript", "TypeScript"],
+	["vbnet", "Visual Basic .NET"],
+	["wasm", "WebAssembly"],
+	["xml", "HTML / XML"],
+	["yaml", "YAML"]
+];
+//#endregion
+//#region src/code-controls.ts
+var codeControlCtx = $ctx((operation) => operation(), "inkkitCodeControl");
+function codeControlsPlugin(visibleRect) {
+	return $prose((ctx) => new Plugin({
+		key: new PluginKey("codeControls"),
+		props: { decorations(state) {
+			const widgets = [];
+			state.doc.descendants((node, pos) => {
+				if (node.type.name !== "code_block") return true;
+				const language = String(node.attrs.language ?? "");
+				widgets.push(Decoration.widget(pos + 1, (view, getPos) => {
+					const labels = editorLabels(ctx);
+					const wrapper = document.createElement("span");
+					wrapper.className = "inkkit-code-controls";
+					const button = document.createElement("button");
+					button.type = "button";
+					button.tabIndex = 0;
+					button.className = "inkkit-code-language";
+					button.textContent = language === "text" || language === "plaintext" ? labels.codePlainText : codeLanguages.find(([value]) => value === language)?.[1] ?? (language || labels.codeAuto);
+					button.setAttribute("aria-label", labels.codeLanguage);
+					button.setAttribute("aria-haspopup", "dialog");
+					button.setAttribute("aria-expanded", "false");
+					wrapper.append(button);
+					let popup;
+					let restore;
+					const close = (focus = false) => {
+						popup?.remove();
+						popup = void 0;
+						restore?.();
+						restore = void 0;
+						button.setAttribute("aria-expanded", "false");
+						if (focus) button.focus();
+					};
+					button.addEventListener("mousedown", (event) => event.preventDefault());
+					button.addEventListener("click", () => {
+						if (popup) {
+							close();
+							return;
+						}
+						const captured = view.state.doc;
+						popup = document.createElement("span");
+						popup.className = "inkkit-code-language-menu";
+						popup.setAttribute("role", "dialog");
+						popup.setAttribute("aria-label", labels.codeLanguage);
+						popup.contentEditable = "false";
+						const search = document.createElement("input");
+						search.type = "search";
+						search.placeholder = labels.codeLanguageSearch;
+						search.setAttribute("aria-label", labels.codeLanguageSearch);
+						const list = document.createElement("span");
+						list.className = "inkkit-code-language-list";
+						popup.append(search, list);
+						const choices = [
+							["", labels.codeAuto],
+							["text", labels.codePlainText],
+							...codeLanguages
+						];
+						if (language && !choices.some(([value]) => value === language)) choices.push([language, language]);
+						const render = () => {
+							list.replaceChildren();
+							for (const [value, name] of choices) {
+								if (!`${value} ${name}`.toLowerCase().includes(search.value.toLowerCase())) continue;
+								const option = document.createElement("button");
+								option.type = "button";
+								option.textContent = name;
+								option.setAttribute("aria-pressed", String(value === language));
+								option.addEventListener("click", () => {
+									close();
+									if (view.state.doc !== captured) return;
+									ctx.get(codeControlCtx.key)(() => {
+										const at = getPos();
+										if (at == null) return false;
+										const position = at - 1;
+										const current = view.state.doc.nodeAt(position);
+										if (current?.type.name !== "code_block") return false;
+										if (value === language) {
+											view.focus();
+											return false;
+										}
+										const transaction = view.state.tr.setNodeMarkup(position, void 0, {
+											...current.attrs,
+											language: value,
+											authoredFence: languageFence(current.attrs.authoredFence, value)
+										});
+										view.dispatch(closeHistory(transaction));
+										view.dispatch(closeHistory(view.state.tr).setMeta("addToHistory", false));
+										view.focus();
+										return true;
+									});
+								});
+								list.append(option);
+							}
+						};
+						search.addEventListener("input", render);
+						popup.addEventListener("keydown", (event) => {
+							if (event.key === "Escape") {
+								event.preventDefault();
+								event.stopPropagation();
+								close(true);
+							}
+							if (event.key === "ArrowDown") {
+								event.preventDefault();
+								const options = [...list.querySelectorAll("button")];
+								options[(options.indexOf(document.activeElement) + 1) % options.length]?.focus();
+							}
+							if (event.key === "ArrowUp") {
+								event.preventDefault();
+								const options = [...list.querySelectorAll("button")];
+								options[(options.indexOf(document.activeElement) - 1 + options.length) % options.length]?.focus();
+							}
+							if (event.key === "Enter" && event.target === search) {
+								event.preventDefault();
+								list.querySelector("button")?.click();
+							}
+						});
+						wrapper.append(popup);
+						render();
+						const bounds = button.getBoundingClientRect();
+						const safe = visibleRect();
+						const left = Math.max(8, safe.left + 4);
+						const right = Math.min(window.innerWidth - 8, safe.right - 4);
+						const top = Math.max(8, safe.top + 4);
+						const bottom = Math.min(window.innerHeight - 8, safe.bottom - 4);
+						const below = Math.max(0, bottom - bounds.bottom - 4);
+						const above = Math.max(0, bounds.top - top - 4);
+						const height = Math.min(320, Math.max(below, above));
+						popup.style.width = `${Math.max(0, Math.min(220, right - left))}px`;
+						popup.style.maxHeight = `${height}px`;
+						popup.style.left = `${Math.max(left, Math.min(bounds.right - 220, right - 220))}px`;
+						const menuHeight = Math.min(height, popup.getBoundingClientRect().height);
+						popup.style.top = `${Math.max(top, Math.min(below >= menuHeight ? bounds.bottom + 4 : bounds.top - menuHeight - 4, bottom - menuHeight))}px`;
+						const outside = (event) => {
+							if (!wrapper.contains(event.target)) close();
+						};
+						const scroll = (event) => {
+							if (popup?.contains(event.target)) return;
+							const current = button.getBoundingClientRect();
+							if (current.top !== bounds.top || current.left !== bounds.left || current.bottom !== bounds.bottom || current.right !== bounds.right) close();
+						};
+						document.addEventListener("pointerdown", outside, true);
+						window.addEventListener("scroll", scroll, true);
+						restore = () => {
+							document.removeEventListener("pointerdown", outside, true);
+							window.removeEventListener("scroll", scroll, true);
+						};
+						button.setAttribute("aria-expanded", "true");
+						render();
+						search.focus({ preventScroll: true });
+					});
+					wrapper.cleanup = close;
+					return wrapper;
+				}, {
+					side: -1,
+					key: `language:${language}`,
+					ignoreSelection: true,
+					stopEvent: () => true,
+					destroy: (dom) => dom.cleanup?.()
+				}));
+				return false;
+			});
+			return DecorationSet.create(state.doc, widgets);
+		} },
+		view: (view) => ({ update(next, previous) {
+			if (next.state.doc !== previous.doc || !next.editable) view.dom.querySelectorAll(".inkkit-code-controls").forEach((element) => element.cleanup?.());
+		} })
+	}));
+}
+//#endregion
+//#region src/mode-selection.ts
+function modeSelectionMap(ctx, source, doc) {
+	const points = [];
+	const bom = source.startsWith("") ? 1 : 0;
+	let text = "";
+	const offsets = [];
+	const ends = [];
+	const append = (value, positions) => {
+		for (let index = 0; index < value.length; index++) offsets[text.length + index] = positions[index];
+		for (let index = 1; index <= value.length; index++) ends[text.length + index] = positions[index];
+		text += value;
+	};
+	const visit = (node) => {
+		if (node.type === "definition") return;
+		if ("children" in node) {
+			node.children.forEach((child) => visit(child));
+			return;
+		}
+		const start = node.position?.start.offset;
+		const end = node.position?.end.offset;
+		if (start == null || end == null || !("value" in node)) return;
+		const raw = source.slice(start + bom, end + bom);
+		if (node.type === "text") {
+			const decoded = decodedOffsets(raw, true);
+			if (decoded) append(decoded.decoded, decoded.offsets.map((at) => at + start + bom));
+		} else if (node.type === "inlineCode") {
+			const exact = raw.indexOf(node.value);
+			if (exact >= 0) {
+				append(node.value, Array.from({ length: node.value.length + 1 }, (_, index) => start + bom + exact + index));
+				return;
+			}
+			const ticks = /^`+/.exec(raw)?.[0].length ?? 0;
+			let value = "";
+			const positions = [];
+			for (let index = ticks; index < raw.length - ticks; index++) {
+				positions.push(start + bom + index);
+				if (raw[index] === "\r" && raw[index + 1] === "\n") index++;
+				value += /[\r\n]/.test(raw[index]) ? " " : raw[index];
+			}
+			positions.push(start + bom + raw.length - ticks);
+			if (value.startsWith(" ") && value.endsWith(" ") && /[^ ]/.test(value)) {
+				value = value.slice(1, -1);
+				positions.shift();
+				positions.pop();
+			}
+			append(value, positions);
+		} else if (node.type === "code") {
+			const lines = [...raw.matchAll(/([^\r\n]*)(\r\n|\r|\n|$)/g)];
+			let line = /^(`{3,}|~{3,})/.test(raw) ? 1 : 0;
+			const value = node.value.replace(/\r\n?/g, "\n");
+			const positions = [];
+			let offset = 0;
+			for (const content of value.split("\n")) {
+				while (line < lines.length && !lines[line][1].endsWith(content)) line++;
+				const match = lines[line++];
+				if (!match) return;
+				const at = match.index + match[1].length - content.length;
+				for (let index = 0; index <= content.length; index++) positions[offset + index] = start + bom + at + index;
+				offset += content.length + 1;
+			}
+			append(value, positions);
+		} else if (node.type === "html" || node.type === "inkkitLiteral") {
+			const value = node.value;
+			const at = raw.indexOf(value);
+			if (at >= 0) append(value, Array.from({ length: value.length + 1 }, (_, index) => start + bom + at + index));
+		}
+	};
+	const processor = ctx.get(remarkCtx);
+	processor.runSync(processor.parse(source), { value: source }).children.forEach((node) => visit(node));
+	let cursor = 0;
+	doc.descendants((node, position) => {
+		if ([
+			"comment_inline",
+			"comment_block",
+			"reference_definition"
+		].includes(node.type.name)) return false;
+		if (!node.isText) return true;
+		const value = node.text;
+		const at = text.indexOf(value, cursor);
+		if (at < 0) return false;
+		for (let index = 0; index <= value.length; index++) {
+			const offset = index === value.length ? ends[at + index] : offsets[at + index];
+			if (offset != null) points.push({
+				formatted: position + index,
+				source: offset
+			});
+		}
+		cursor = at + value.length;
+		return false;
+	});
+	const nearest = (position, from, to, bias = -1) => {
+		let best;
+		for (const point of points) if (!best || Math.abs(point[from] - position) < Math.abs(best[from] - position) || bias > 0 && Math.abs(point[from] - position) === Math.abs(best[from] - position)) best = point;
+		return best?.[to] ?? (from === "formatted" ? 0 : 1);
+	};
+	return {
+		source: (position, bias = -1) => nearest(position, "formatted", "source", bias),
+		formatted: (offset) => nearest(offset, "source", "formatted")
+	};
+}
+//#endregion
 //#region src/reference-clipboard.ts
 function key(node) {
 	if (node.type.name === "reference_definition") return `link:${node.attrs.identifier}`;
@@ -56240,14 +56572,24 @@ var InkKitEditor = class InkKitEditor {
 		expectOneOf(mode, editingModes, "mode");
 		this.assertCurrent(expectedGeneration);
 		if (this.formatType === "txt" || this.mode === mode) return false;
+		const wasSource = this.literalSurface;
+		const view = this.editor.ctx.get(editorViewCtx);
+		const focused = wasSource ? this.plain.ownerDocument.activeElement === this.plain : view.hasFocus();
+		const container = this.viewportContainer ?? this.root;
+		const previousSurface = wasSource ? this.plain : container;
+		const fraction = previousSurface.scrollTop / Math.max(1, previousSurface.scrollHeight - previousSurface.clientHeight);
+		const left = previousSurface.scrollLeft;
+		const sourceSelection = wasSource ? {
+			anchor: this.plain.selectionDirection === "backward" ? this.plain.selectionEnd : this.plain.selectionStart,
+			head: this.plain.selectionDirection === "backward" ? this.plain.selectionStart : this.plain.selectionEnd
+		} : void 0;
 		this.settleSource();
 		this.undoneSteps = [];
 		this.formattedUndone = 0;
-		const view = this.editor.ctx.get(editorViewCtx);
-		const focused = this.literalSurface ? this.plain.ownerDocument.activeElement === this.plain : view.hasFocus();
-		const container = this.viewportContainer ?? this.root;
-		const top = container.scrollTop, left = container.scrollLeft;
 		const text = this.snapshot().text;
+		const mapping = modeSelectionMap(this.editor.ctx, text, view.state.doc);
+		const anchor = sourceSelection ? mapping.formatted(rawOffset(text, sourceSelection.anchor)) : normalizedOffset(text, mapping.source(view.state.selection.anchor, view.state.selection.anchor < view.state.selection.head ? 1 : -1));
+		const head = sourceSelection ? mapping.formatted(rawOffset(text, sourceSelection.head)) : normalizedOffset(text, mapping.source(view.state.selection.head, view.state.selection.head < view.state.selection.anchor ? 1 : -1));
 		this.mode = mode;
 		this.session.modeChanged();
 		this.cancelExports();
@@ -56255,8 +56597,8 @@ var InkKitEditor = class InkKitEditor {
 		this.literalMatch = void 0;
 		if (mode === "source") {
 			this.plain.value = text;
-			this.plain.setSelectionRange(this.plain.value.length, this.plain.value.length);
-		}
+			this.plain.setSelectionRange(Math.min(anchor, head), Math.max(anchor, head), anchor > head ? "backward" : "forward");
+		} else view.dispatch(view.state.tr.setSelection(TextSelection.between(view.state.doc.resolve(Math.min(anchor, view.state.doc.content.size)), view.state.doc.resolve(Math.min(head, view.state.doc.content.size)))).setMeta("addToHistory", false));
 		const suppressed = this.reportingSuppressed;
 		this.reportingSuppressed = true;
 		try {
@@ -56264,12 +56606,14 @@ var InkKitEditor = class InkKitEditor {
 		} finally {
 			this.reportingSuppressed = suppressed;
 		}
+		const surface = this.literalSurface ? this.plain : container;
+		surface.scrollTop = fraction * Math.max(0, surface.scrollHeight - surface.clientHeight);
+		surface.scrollLeft = left;
 		if (focused) {
 			if (this.literalSurface) this.plain.focus({ preventScroll: true });
-			else view.focus();
+			else view.dom.focus({ preventScroll: true });
+			this.revealCurrentSelection();
 		}
-		container.scrollTop = top;
-		container.scrollLeft = left;
 		this.publishCommandState();
 		return true;
 	}
@@ -56777,6 +57121,10 @@ var InkKitEditor = class InkKitEditor {
 				...defaultLabels,
 				...options.labels
 			}));
+			ctx.set(codeControlCtx.key, (operation) => instance.forPerson(() => instance.facadeCall(() => {
+				instance.assertMutation();
+				return !instance.literalSurface && operation();
+			}), false));
 			ctx.set(tableControlCtx.key, (operation) => instance.forPerson(() => instance.facadeCall(() => {
 				instance.assertMutation();
 				return !instance.literalSurface && operation();
@@ -56841,7 +57189,7 @@ var InkKitEditor = class InkKitEditor {
 					return true;
 				}
 			}));
-		}).use(labelsCtx).use(instance.pasteController.plugin).use(visibleClipboard).use($prose(() => instance.suggestions.plugin())).use(instance.keymapPlugin).use(createDialect(Boolean(options.images || options.files), Boolean(options.wikiLinks), Boolean(options.files))).use(tablePlugins).use(tableBlock).use(instance.changePlugin).use(instance.historyInputPlugin).use(history).use(clipboard).use(cursor).use(taskListPlugin).use(quoteBackspace).use(calloutEnter).use(literalEnter).use(literalReread).use(listItemBackspace).use(listItemShiftTab).use(nestedItemEnter).use(rejoinLists).use(movedListItems).use(textInputPolicy).use(events.copy ? codeCopyPlugin((text) => events.copy?.(text)) : []).use(placeholderPlugin).use(options.rendering?.codeHighlighting === false ? [] : (await import("./highlight-DOQk0Eyj.js")).highlightPlugin).use(options.rendering?.diagramPreview === false || !diagramsAvailable() ? [] : mermaidPreview((error) => instance.report(error))).use(selectionPlugin).use($prose(() => search())).use(instance.policyPlugin).use(options.wikiLinks ? wikiLinkView(options.wikiLinks, {
+		}).use(labelsCtx).use(instance.pasteController.plugin).use(visibleClipboard).use($prose(() => instance.suggestions.plugin())).use(instance.keymapPlugin).use(createDialect(Boolean(options.images || options.files), Boolean(options.wikiLinks), Boolean(options.files))).use(codeControlCtx).use(codeControlsPlugin(() => instance.viewport().rect)).use(tablePlugins).use(tableBlock).use(instance.changePlugin).use(instance.historyInputPlugin).use(history).use(clipboard).use(cursor).use(taskListPlugin).use(quoteBackspace).use(calloutEnter).use(literalEnter).use(literalReread).use(listItemBackspace).use(listItemShiftTab).use(nestedItemEnter).use(rejoinLists).use(movedListItems).use(textInputPolicy).use(events.copy ? codeCopyPlugin((text) => events.copy?.(text)) : []).use(placeholderPlugin).use(options.rendering?.codeHighlighting === false ? [] : (await import("./highlight-BIasnL-b.js")).highlightPlugin).use(options.rendering?.diagramPreview === false || !diagramsAvailable() ? [] : mermaidPreview((error) => instance.report(error))).use(selectionPlugin).use($prose(() => search())).use(instance.policyPlugin).use(options.wikiLinks ? wikiLinkView(options.wikiLinks, {
 			capture: () => instance.adapterCapture(),
 			active: () => instance.ready && !instance.destroyed && !instance.literalSurface,
 			labels: {

package/dist/chunks/{highlight-DOQk0Eyj.js → highlight-BIasnL-b.js}

@@ -1,4 +1,4 @@
-import { a as Decoration, c as PluginKey, d as __toESM, i as $prose, o as DecorationSet, s as Plugin, u as __commonJSMin } from "./core-DP-izJDM.js";
+import { a as Decoration, c as PluginKey, d as __toESM, i as $prose, o as DecorationSet, s as Plugin, u as __commonJSMin } from "./core-D7n0IhAZ.js";
 //#region node_modules/.pnpm/highlight.js@11.11.2/node_modules/highlight.js/es/languages/arduino.js
 /** @type LanguageFn */
 function cPlusPlus(hljs) {
@@ -14023,7 +14023,8 @@ var lowlight = createLowlight(grammars);
 function blockDecorations(node, pos, deadline) {
 	const language = String(node.attrs.language ?? "").toLowerCase();
 	const found = [];
-	if (!language || !lowlight.registered(language)) return found;
+	if (language && !lowlight.registered(language)) return found;
+	if (!language && node.content.size > 500) return found;
 	if (node.content.size > 5e3 || performance.now() > deadline) return found;
 	let offset = pos + 1;
 	const walk = (children, classes) => {
@@ -14036,7 +14037,7 @@ function blockDecorations(node, pos, deadline) {
 			walk(child.children, [...classes, ...own]);
 		}
 	};
-	walk(lowlight.highlight(language, node.textContent).children, []);
+	walk((language ? lowlight.highlight(language, node.textContent) : lowlight.highlightAuto(node.textContent)).children, []);
 	return found;
 }
 function decorations(doc) {

package/dist/core.js

@@ -1,2 +1,2 @@
-import { r as InkKitError, t as InkKitEditor } from "./chunks/core-DP-izJDM.js";
+import { r as InkKitError, t as InkKitEditor } from "./chunks/core-D7n0IhAZ.js";
 export { InkKitEditor, InkKitError };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { n as registerMermaid, r as InkKitError, t as InkKitEditor } from "./chunks/core-DP-izJDM.js";
+import { n as registerMermaid, r as InkKitError, t as InkKitEditor } from "./chunks/core-D7n0IhAZ.js";
 //#region src/index.ts
 registerMermaid(async () => (await import("mermaid")).default);
 //#endregion

package/dist/style.css

@@ -554,20 +554,6 @@
   padding-top: max(calc(var(--inkkit-font-size, 15px) * 2), 30px);
 }
 
-.inkkit-root .ProseMirror pre[data-language]::before {
-  content: attr(data-language);
-  position: absolute;
-  top: calc(var(--inkkit-font-size, 15px) * 0.533);
-  left: calc(var(--inkkit-font-size, 15px) * 0.933);
-  font:
-    calc(var(--inkkit-font-size, 15px) * 0.733)/1 -apple-system,
-    system-ui,
-    sans-serif;
-  color: var(--_inkkit-muted);
-  text-transform: lowercase;
-  user-select: none;
-}
-
 .inkkit-root .ProseMirror pre .inkkit-copy {
   position: absolute;
   top: 6px;
@@ -582,7 +568,7 @@
   padding: 0;
   border: 0;
   border-radius: 6px;
-  background: color-mix(in srgb, CanvasText 10%, transparent);
+  background: transparent;
   color: var(--_inkkit-muted);
   cursor: pointer;
   opacity: 0;
@@ -591,11 +577,13 @@
 }
 
 .inkkit-root .ProseMirror pre:hover .inkkit-copy,
+.inkkit-root .ProseMirror pre:focus-within .inkkit-copy,
 .inkkit-root .ProseMirror pre .inkkit-copy[data-copied] {
   opacity: 1;
 }
 
 .inkkit-root .ProseMirror pre .inkkit-copy:hover {
+  background: color-mix(in srgb, CanvasText 10%, transparent);
   color: var(--_inkkit-text);
 }
 
@@ -896,7 +884,8 @@
   .inkkit-root .inkkit-comment,
   .inkkit-root [data-inkkit-callout-toggle],
   .inkkit-root .ProseMirror pre .inkkit-copy,
-  .inkkit-root .inkkit-table-controls {
+  .inkkit-root .inkkit-table-controls,
+  .inkkit-root .inkkit-code-controls {
     display: none !important;
   }
 
@@ -1001,3 +990,85 @@
   clip-path: inset(50%);
   overflow: hidden;
 }
+
+.inkkit-root .inkkit-code-controls {
+  position: absolute;
+  top: 6px;
+  right: 38px;
+  font:
+    11px/1.4 -apple-system,
+    system-ui,
+    sans-serif;
+  white-space: normal;
+  user-select: none;
+}
+.inkkit-root .inkkit-code-language {
+  height: 24px;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--_inkkit-muted);
+  font: inherit;
+  cursor: pointer;
+}
+.inkkit-root .inkkit-code-language::after {
+  content: '⌄';
+  margin-left: 5px;
+}
+.inkkit-root .inkkit-code-language:hover {
+  background: color-mix(in srgb, CanvasText 7%, transparent);
+}
+.inkkit-root .inkkit-code-language:focus-visible,
+.inkkit-root .inkkit-copy:focus-visible {
+  outline: 2px solid var(--_inkkit-accent);
+  outline-offset: 1px;
+}
+.inkkit-root .inkkit-code-language-menu {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  max-height: min(320px, 50vh);
+  padding: 5px;
+  box-sizing: border-box;
+  border: 1px solid color-mix(in srgb, CanvasText 15%, transparent);
+  border-radius: 8px;
+  background: Canvas;
+  color: CanvasText;
+  box-shadow: 0 6px 20px #0002;
+}
+.inkkit-root .inkkit-code-language-menu input {
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  padding: 7px;
+  border: 0;
+  border-bottom: 1px solid color-mix(in srgb, CanvasText 12%, transparent);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+.inkkit-root .inkkit-code-language-list {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding-top: 4px;
+}
+.inkkit-root .inkkit-code-language-list button {
+  flex-shrink: 0;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.inkkit-root .inkkit-code-language-list button:hover,
+.inkkit-root .inkkit-code-language-list button:focus-visible,
+.inkkit-root .inkkit-code-language-list button[aria-pressed='true'] {
+  background: color-mix(in srgb, CanvasText 8%, transparent);
+}

package/dist/types.d.ts

@@ -255,6 +255,10 @@ export interface EditorLabels {
     sourceEditor: string;
     placeholder: string;
     copyCode: string;
+    codeLanguage: string;
+    codeLanguageSearch: string;
+    codeAuto: string;
+    codePlainText: string;
     expandCallout: string;
     collapseCallout: string;
     diagramRendering: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicayzer/inkkit",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A preserving Markdown editor for offline web views and the web",
   "license": "MIT",
   "type": "module",