@segnavia/markdown-editor 0.45.0 → 0.47.0

package/dist/element-properties.d.ts

@@ -2,7 +2,7 @@
 export declare const MARKDOWN_EDITOR_TAG = "segnavia-markdown-editor";
 export declare const MARKDOWN_EDITOR_PROPERTIES: {
   readonly tag: "segnavia-markdown-editor";
-  readonly properties: readonly ["markdown", "mode", "title", "titleSource", "lockedFences", "css", "fonts", "fontReferences", "linkOrigins", "alertLabels"];
-  readonly events: readonly ["segnavia-markdown-change", "segnavia-title-change", "segnavia-mode-change", "segnavia-save", "segnavia-editor-state", "segnavia-link-request"];
+  readonly properties: readonly ["markdown", "mode", "title", "titleSource", "lockedFences", "css", "fonts", "fontReferences", "linkOrigins", "alertLabels", "labels"];
+  readonly events: readonly ["segnavia-markdown-change", "segnavia-title-change", "segnavia-mode-change", "segnavia-save", "segnavia-editor-state", "segnavia-link-request", "segnavia-raw-inline-indicate"];
 };
 //#endregion

package/dist/element-properties.js

@@ -12,7 +12,8 @@ const MARKDOWN_EDITOR_PROPERTIES = {
 		"fonts",
 		"fontReferences",
 		"linkOrigins",
-		"alertLabels"
+		"alertLabels",
+		"labels"
 	],
 	events: [
 		"segnavia-markdown-change",
@@ -20,7 +21,8 @@ const MARKDOWN_EDITOR_PROPERTIES = {
 		"segnavia-mode-change",
 		"segnavia-save",
 		"segnavia-editor-state",
-		"segnavia-link-request"
+		"segnavia-link-request",
+		"segnavia-raw-inline-indicate"
 	]
 };
 //#endregion

package/dist/markdown-editor-labels.d.ts

@@ -0,0 +1,6 @@
+//#region src/markdown-editor-labels.d.ts
+export interface MarkdownEditorLabels {
+  rawInline: (display: string, source: string) => string;
+}
+export declare const ENGLISH_MARKDOWN_EDITOR_LABELS: MarkdownEditorLabels;
+//#endregion

package/dist/markdown-editor-labels.js

@@ -0,0 +1,7 @@
+//#region src/markdown-editor-labels.ts
+const ENGLISH_MARKDOWN_EDITOR_LABELS = { rawInline: (display, source) => `${display}, Markdown source: ${source}` };
+function markdownEditorLabels(labels) {
+	return { rawInline: labels.rawInline ?? ENGLISH_MARKDOWN_EDITOR_LABELS.rawInline };
+}
+//#endregion
+export { ENGLISH_MARKDOWN_EDITOR_LABELS, markdownEditorLabels };

package/dist/markdown-editor-state.js

@@ -0,0 +1,30 @@
+import { richEditorState } from "./markdown-rich-commands.js";
+import { redoDepth, undoDepth } from "@codemirror/commands";
+//#region src/markdown-editor-state.ts
+var MarkdownEditorStateEmitter = class {
+	dispatch;
+	key = "";
+	constructor(dispatch) {
+		this.dispatch = dispatch;
+	}
+	source(view, canUndo = view ? undoDepth(view.state) > 0 : false, canRedo = view ? redoDepth(view.state) > 0 : false) {
+		this.emit({
+			marks: [],
+			nodes: [],
+			canUndo,
+			canRedo
+		});
+	}
+	visible(mode, richView, sourceView) {
+		if (mode === "rich" && richView) this.emit(richEditorState(richView));
+		else this.source(sourceView);
+	}
+	emit(state) {
+		const key = JSON.stringify(state);
+		if (key === this.key) return;
+		this.key = key;
+		this.dispatch(state);
+	}
+};
+//#endregion
+export { MarkdownEditorStateEmitter };

package/dist/markdown-editor-title-input.js

@@ -0,0 +1,50 @@
+import { normalizeMarkdownTitle } from "./markdown-title.js";
+import { setModelTitle } from "./markdown-editor-model.js";
+import { markdownEditorKeyAction } from "./markdown-editor-policy.js";
+//#region src/markdown-editor-title-input.ts
+var MarkdownEditorTitleInput = class {
+	options;
+	constructor(options) {
+		this.options = options;
+	}
+	connect() {
+		const { field } = this.options;
+		field.addEventListener("input", this.input);
+		field.addEventListener("keydown", this.keyDown);
+		field.addEventListener("paste", this.paste);
+	}
+	disconnect() {
+		const { field } = this.options;
+		field.removeEventListener("input", this.input);
+		field.removeEventListener("keydown", this.keyDown);
+		field.removeEventListener("paste", this.paste);
+	}
+	input = () => {
+		const { field } = this.options;
+		const normalized = normalizeMarkdownTitle(field.value);
+		field.value = normalized;
+		const model = setModelTitle(this.options.model(), normalized);
+		if (model === this.options.model()) return;
+		this.options.update(model);
+		this.options.emit("segnavia-title-change", { title: normalized });
+		if (model.titleSource === "leading-heading") this.options.emit("segnavia-markdown-change", { markdown: model.markdown });
+	};
+	keyDown = (event) => {
+		if (event.key === "Enter") event.preventDefault();
+		const action = markdownEditorKeyAction(event);
+		if (!action) return;
+		event.preventDefault();
+		if (action === "save") this.options.emit("segnavia-save");
+		else this.options.toggleMode();
+	};
+	paste = (event) => {
+		const pasted = event.clipboardData?.getData("text");
+		if (pasted === void 0) return;
+		event.preventDefault();
+		const { field } = this.options;
+		field.setRangeText(normalizeMarkdownTitle(pasted), field.selectionStart ?? 0, field.selectionEnd ?? 0, "end");
+		this.input();
+	};
+};
+//#endregion
+export { MarkdownEditorTitleInput };

package/dist/markdown-editor-types.d.ts

@@ -1,3 +1,4 @@
+import { MarkdownEditorLabels } from "./markdown-editor-labels.js";
 import { MarkdownTitleSource } from "./markdown-editor-model.js";
 import { MarkdownEditorCommand, MarkdownEditorCommandArgs, MarkdownEditorMode } from "./markdown-editor-policy.js";
 import { AlertLabels } from "@segnavia/html";
@@ -22,6 +23,7 @@ export interface SegnaviaMarkdownEditor extends Omit<HTMLElement, 'title'> {
   fontReferences: FontReference[];
   linkOrigins: Iterable<string> | undefined;
   alertLabels: Partial<AlertLabels> | undefined;
+  labels: Partial<MarkdownEditorLabels>;
   unstyled: boolean;
   run<C extends MarkdownEditorCommand>(command: C, args?: C extends keyof MarkdownEditorCommandArgs ? MarkdownEditorCommandArgs[C] : never): boolean;
 }

package/dist/markdown-editor.d.ts

@@ -1,7 +1,9 @@
+import { ENGLISH_MARKDOWN_EDITOR_LABELS, MarkdownEditorLabels } from "./markdown-editor-labels.js";
 import { MarkdownTitleSource } from "./markdown-editor-model.js";
 import { MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, MarkdownEditorCommand, MarkdownEditorMode } from "./markdown-editor-policy.js";
 import { MarkdownEditorStateDetail, SegnaviaMarkdownEditor as SegnaviaMarkdownEditor$1 } from "./markdown-editor-types.js";
 import { MARKDOWN_EDITOR_PROPERTIES, MARKDOWN_EDITOR_TAG } from "./element-properties.js";
+import { RawInlineIndicationDetail } from "./markdown-raw-inline-indication.js";
 import { joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading } from "./markdown-title.js";
 import { FontsOptions } from "@segnavia/frame/fonts";
 //#region src/markdown-editor.d.ts
@@ -10,4 +12,4 @@ export declare const SegnaviaMarkdownEditor: {
   new (): SegnaviaMarkdownEditor;
 };
 //#endregion
-export { type FontsOptions, MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, MARKDOWN_EDITOR_PROPERTIES, MARKDOWN_EDITOR_TAG, type MarkdownEditorCommand, type MarkdownEditorMode, type MarkdownEditorStateDetail, type MarkdownTitleSource, joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading };
+export { ENGLISH_MARKDOWN_EDITOR_LABELS, type FontsOptions, MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, MARKDOWN_EDITOR_PROPERTIES, MARKDOWN_EDITOR_TAG, type MarkdownEditorCommand, type MarkdownEditorLabels, type MarkdownEditorMode, type MarkdownEditorStateDetail, type MarkdownTitleSource, type RawInlineIndicationDetail, joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading };

package/dist/markdown-editor.js

@@ -1,17 +1,22 @@
 import { ensureEditorStyle } from "./editor-style.js";
 import { MARKDOWN_EDITOR_PROPERTIES, MARKDOWN_EDITOR_TAG } from "./element-properties.js";
 import { MarkdownEditorFontRegistration } from "./markdown-editor-font-registration.js";
+import { ENGLISH_MARKDOWN_EDITOR_LABELS, markdownEditorLabels } from "./markdown-editor-labels.js";
 import { validateMarkdownLink } from "./markdown-editor-link.js";
 import { joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading } from "./markdown-title.js";
-import { markdownEditorModel, setModelEditable, setModelMarkdown, setModelTitle, setModelTitleSource } from "./markdown-editor-model.js";
+import { markdownEditorModel, setModelEditable, setModelMarkdown, setModelTitleSource } from "./markdown-editor-model.js";
 import { equalAlertLabels, equalFontReferences, equalFonts, equalLockedFences, normalizeAlertLabels, normalizeFontReferences, normalizeLockedFences } from "./markdown-editor-options.js";
-import { MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, availableMarkdownMode, markdownEditorKeyAction, richModeCommandRefusal } from "./markdown-editor-policy.js";
+import { MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, availableMarkdownMode, richModeCommandRefusal } from "./markdown-editor-policy.js";
+import { RICH_COMMANDS, lockedBlockSourceOffset, selectedLockedBlock } from "./markdown-rich-commands.js";
+import { MarkdownEditorStateEmitter } from "./markdown-editor-state.js";
 import { renderMarkdownEditorTitle, updateMarkdownEditorTitle } from "./markdown-editor-title.js";
-import { RICH_COMMANDS, lockedBlockSourceOffset, richEditorState, selectedLockedBlock } from "./markdown-rich-commands.js";
+import { MarkdownEditorTitleInput } from "./markdown-editor-title-input.js";
+import { RAW_INLINE_ATTRIBUTE } from "./markdown-rich-raw-inline.js";
+import { RawInlineIndicator, labelRawInline } from "./markdown-raw-inline-indication.js";
 import { mountRichEditor } from "./markdown-rich-editor.js";
 import { parseRichDocument, saveRichDocument } from "./markdown-rich-save.js";
 import { markdownSourceState } from "./markdown-source.js";
-import { redo, redoDepth, undo, undoDepth } from "@codemirror/commands";
+import { redo, undo } from "@codemirror/commands";
 import { EditorView } from "@codemirror/view";
 import { upgradeProperties } from "@segnavia/frame/element-properties";
 import { sanitizeBookCss } from "@segnavia/html";
@@ -36,14 +41,23 @@ var MarkdownEditorElement = class extends HTMLElement {
 	modeValue = "rich";
 	reflecting = false;
 	richOriginal = "";
-	stateKey = "";
 	lockedFenceOptions = {};
 	cssValue = "";
 	fontOptions;
 	fontReferenceOptions = [];
 	linkOriginOptions;
 	alertLabelOptions;
+	words = ENGLISH_MARKDOWN_EDITOR_LABELS;
+	rawInlineIndicator = new RawInlineIndicator((detail) => this.emit("segnavia-raw-inline-indicate", detail));
 	fontRegistration = new MarkdownEditorFontRegistration(this);
+	state = new MarkdownEditorStateEmitter((detail) => this.emit("segnavia-editor-state", detail));
+	titleInput = new MarkdownEditorTitleInput({
+		field: this.titleField,
+		model: () => this.model,
+		update: (model) => this.model = model,
+		emit: (name, detail) => this.emit(name, detail),
+		toggleMode: () => this.run("toggle-mode")
+	});
 	constructor() {
 		super();
 		upgradeProperties(this);
@@ -59,16 +73,13 @@ var MarkdownEditorElement = class extends HTMLElement {
 	}
 	connectedCallback() {
 		ensureEditorStyle(this.container);
-		this.titleField.addEventListener("input", this.onTitleInput);
-		this.titleField.addEventListener("keydown", this.onTitleKeyDown);
-		this.titleField.addEventListener("paste", this.onTitlePaste);
+		this.titleInput.connect();
 		this.mountMode();
 		renderMarkdownEditorTitle(this.titleField, this.model);
 	}
 	disconnectedCallback() {
-		this.titleField.removeEventListener("input", this.onTitleInput);
-		this.titleField.removeEventListener("keydown", this.onTitleKeyDown);
-		this.titleField.removeEventListener("paste", this.onTitlePaste);
+		this.rawInlineIndicator.end();
+		this.titleInput.disconnect();
 		this.sourceView?.destroy();
 		this.sourceView = null;
 		this.richView?.destroy();
@@ -185,6 +196,13 @@ var MarkdownEditorElement = class extends HTMLElement {
 		this.alertLabelOptions = next;
 		if (this.modeValue === "rich") this.resetRich();
 	}
+	get labels() {
+		return this.words;
+	}
+	set labels(value) {
+		this.words = markdownEditorLabels(value ?? {});
+		for (const atom of this.richMount.querySelectorAll(`[${RAW_INLINE_ATTRIBUTE}]`)) labelRawInline(atom, this.words);
+	}
 	get unstyled() {
 		return this.hasAttribute("unstyled");
 	}
@@ -209,6 +227,7 @@ var MarkdownEditorElement = class extends HTMLElement {
 	setMode(mode, emit) {
 		if (mode === this.modeValue) return false;
 		this.modeValue = mode;
+		this.rawInlineIndicator.end();
 		this.reflect("mode", mode);
 		this.mountMode();
 		if (emit) this.emit("segnavia-mode-change", { mode });
@@ -243,10 +262,11 @@ var MarkdownEditorElement = class extends HTMLElement {
 	resetVisibleEditor() {
 		if (this.modeValue === "source" && this.sourceView) this.sourceView.setState(this.sourceState());
 		if (this.modeValue === "rich") this.resetRich();
-		this.emitVisibleState();
+		this.state.visible(this.modeValue, this.richView, this.sourceView);
 	}
 	resetRich() {
 		if (!this.isConnected) return;
+		this.rawInlineIndicator.end();
 		this.richView?.destroy();
 		this.richMount.replaceChildren();
 		this.richOriginal = this.model.editable;
@@ -258,8 +278,10 @@ var MarkdownEditorElement = class extends HTMLElement {
 			fontReferences: this.fontReferenceOptions,
 			alertLabels: this.alertLabelOptions,
 			linkOrigins: () => this.linkOriginOptions,
+			labels: () => this.words,
+			indicator: this.rawInlineIndicator,
 			change: (content) => this.onRichChange(content),
-			state: (state) => this.emitState(state),
+			state: (state) => this.state.emit(state),
 			linkRequest: (href) => this.emit("segnavia-link-request", { href }),
 			save: () => this.emit("segnavia-save"),
 			toggleMode: () => this.setMode("source", true),
@@ -292,47 +314,8 @@ var MarkdownEditorElement = class extends HTMLElement {
 		this.model = model;
 		this.emit("segnavia-markdown-change", { markdown: model.markdown });
 	}
-	onTitleInput = () => {
-		const normalized = normalizeMarkdownTitle(this.titleField.value);
-		this.titleField.value = normalized;
-		const model = setModelTitle(this.model, normalized);
-		if (model === this.model) return;
-		this.model = model;
-		this.emit("segnavia-title-change", { title: normalized });
-		if (model.titleSource === "leading-heading") this.emit("segnavia-markdown-change", { markdown: model.markdown });
-	};
-	onTitleKeyDown = (event) => {
-		if (event.key === "Enter") event.preventDefault();
-		const action = markdownEditorKeyAction(event);
-		if (!action) return;
-		event.preventDefault();
-		if (action === "save") this.emit("segnavia-save");
-		else this.run("toggle-mode");
-	};
-	onTitlePaste = (event) => {
-		const pasted = event.clipboardData?.getData("text");
-		if (pasted === void 0) return;
-		event.preventDefault();
-		this.titleField.setRangeText(normalizeMarkdownTitle(pasted), this.titleField.selectionStart ?? 0, this.titleField.selectionEnd ?? 0, "end");
-		this.onTitleInput();
-	};
-	emitSourceState(canUndo = this.sourceView ? undoDepth(this.sourceView.state) > 0 : false, canRedo = this.sourceView ? redoDepth(this.sourceView.state) > 0 : false) {
-		this.emitState({
-			marks: [],
-			nodes: [],
-			canUndo,
-			canRedo
-		});
-	}
-	emitVisibleState() {
-		if (this.modeValue === "rich" && this.richView) this.emitState(richEditorState(this.richView));
-		else this.emitSourceState();
-	}
-	emitState(state) {
-		const key = JSON.stringify(state);
-		if (key === this.stateKey) return;
-		this.stateKey = key;
-		this.emit("segnavia-editor-state", state);
+	emitSourceState(canUndo, canRedo) {
+		this.state.source(this.sourceView, canUndo, canRedo);
 	}
 	emit(name, detail) {
 		this.dispatchEvent(new CustomEvent(name, {
@@ -352,4 +335,4 @@ var MarkdownEditorElement = class extends HTMLElement {
 const SegnaviaMarkdownEditor = MarkdownEditorElement;
 if (!customElements.get("segnavia-markdown-editor")) customElements.define(MARKDOWN_EDITOR_TAG, SegnaviaMarkdownEditor);
 //#endregion
-export { MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, MARKDOWN_EDITOR_PROPERTIES, MARKDOWN_EDITOR_TAG, SegnaviaMarkdownEditor, joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading };
+export { ENGLISH_MARKDOWN_EDITOR_LABELS, MARKDOWN_EDITOR_COMMANDS, MARKDOWN_EDITOR_MODES, MARKDOWN_EDITOR_PROPERTIES, MARKDOWN_EDITOR_TAG, SegnaviaMarkdownEditor, joinLeadingHeading, normalizeMarkdownTitle, splitLeadingHeading };

package/dist/markdown-raw-inline-indication.d.ts

@@ -0,0 +1,13 @@
+//#region src/markdown-raw-inline-indication.d.ts
+export type RawInlineIndicationDetail = Readonly<{
+  source: string;
+  display: string;
+  rect: Readonly<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }>;
+  via: 'pointer' | 'selection';
+}>;
+//#endregion

package/dist/markdown-raw-inline-indication.js

@@ -0,0 +1,91 @@
+import { RAW_INLINE_ATTRIBUTE } from "./markdown-rich-raw-inline.js";
+import { NodeSelection } from "@tiptap/pm/state";
+import { resolveDirection } from "@segnavia/format";
+//#region src/markdown-raw-inline-indication.ts
+const rawInlineSelector = `[${RAW_INLINE_ATTRIBUTE}]`;
+function rawInlineElement(target) {
+	return target && "closest" in target ? target.closest(rawInlineSelector) : null;
+}
+function selectedRawInlineAtom(editor) {
+	const selection = editor.state.selection;
+	if (!(selection instanceof NodeSelection) || selection.node.type.name !== "rawInline") return null;
+	return rawInlineElement(editor.view.nodeDOM(selection.from));
+}
+function readRawInlineAtom(atom) {
+	return {
+		source: atom.getAttribute("data-raw-source") ?? "",
+		display: atom.getAttribute("data-raw-display") ?? ""
+	};
+}
+function directionContext(atom) {
+	let dir;
+	let lang;
+	for (let element = atom; element && (!dir || !lang);) {
+		const declaredDir = element.getAttribute("dir");
+		if (!dir && (declaredDir === "ltr" || declaredDir === "rtl")) dir = declaredDir;
+		if (!lang) lang = element.getAttribute("lang") || void 0;
+		const root = element.getRootNode();
+		element = element.parentElement ?? (root && "host" in root ? root.host : null);
+	}
+	return {
+		dir,
+		lang
+	};
+}
+function labelRawInline(atom, labels) {
+	const { source, display } = readRawInlineAtom(atom);
+	const { dir, lang } = directionContext(atom);
+	const isolate = resolveDirection(dir, lang, source) === "rtl" ? "⁧" : "⁦";
+	atom.setAttribute("role", "img");
+	atom.setAttribute("aria-label", labels.rawInline(display, `${isolate}${source}\u2069`));
+}
+function detail(atom, via) {
+	const { x, y, width, height } = atom.getBoundingClientRect();
+	const { source, display } = readRawInlineAtom(atom);
+	return {
+		source,
+		display,
+		rect: {
+			x,
+			y,
+			width,
+			height
+		},
+		via
+	};
+}
+var RawInlineIndicator = class {
+	dispatch;
+	pointer = null;
+	selection = null;
+	key = "null";
+	constructor(dispatch) {
+		this.dispatch = dispatch;
+	}
+	pointerEnter(atom) {
+		this.pointer = atom;
+		this.emit();
+	}
+	pointerLeave(atom) {
+		if (this.pointer === atom) this.pointer = null;
+		this.emit();
+	}
+	selectionSelect(atom) {
+		this.selection = atom;
+		this.emit();
+	}
+	end() {
+		this.pointer = null;
+		this.selection = null;
+		this.emit();
+	}
+	emit() {
+		const next = this.selection ? detail(this.selection, "selection") : this.pointer ? detail(this.pointer, "pointer") : null;
+		const key = JSON.stringify(next);
+		if (key === this.key) return;
+		this.key = key;
+		this.dispatch(next);
+	}
+};
+//#endregion
+export { RawInlineIndicator, labelRawInline, rawInlineElement, readRawInlineAtom, selectedRawInlineAtom };

package/dist/markdown-rich-editor.js

@@ -1,6 +1,7 @@
 import { LockedBlock } from "./markdown-rich-locked.js";
 import { richEditorState, richKeyboard } from "./markdown-rich-commands.js";
-import { RawInline } from "./markdown-rich-raw-inline.js";
+import { RAW_INLINE_ATTRIBUTE, RAW_INLINE_DISPLAY_ATTRIBUTE, RAW_INLINE_SOURCE_ATTRIBUTE, RawInline } from "./markdown-rich-raw-inline.js";
+import { labelRawInline, selectedRawInlineAtom } from "./markdown-raw-inline-indication.js";
 import { richExtensions } from "./markdown-rich-extensions.js";
 import { safeMarkdownUrl } from "@segnavia/html";
 import { HEADLESS_ELEMENTS, SegnaviaPage, createPageElement } from "@segnavia/frame";
@@ -38,24 +39,31 @@ function lockedView(options) {
 		};
 	} });
 }
-const rawInlineView = RawInline.extend({ addNodeView() {
-	return ({ node }) => {
-		const dom = document.createElement("span");
-		dom.part.add("raw-inline");
-		dom.dataset.rawInline = "";
-		dom.dataset.rawSource = String(node.attrs.source ?? "");
-		dom.dataset.rawDisplay = String(node.attrs.display ?? "");
-		dom.dir = "auto";
-		dom.contentEditable = "false";
-		dom.title = String(node.attrs.source ?? "");
-		dom.textContent = String(node.attrs.display ?? "");
-		return { dom };
-	};
-} });
+function rawInlineView(options) {
+	return RawInline.extend({ addNodeView() {
+		return ({ node }) => {
+			const dom = document.createElement("span");
+			dom.part.add("raw-inline");
+			dom.setAttribute(RAW_INLINE_ATTRIBUTE, "");
+			dom.setAttribute(RAW_INLINE_SOURCE_ATTRIBUTE, String(node.attrs.source ?? ""));
+			dom.setAttribute(RAW_INLINE_DISPLAY_ATTRIBUTE, String(node.attrs.display ?? ""));
+			dom.dir = "auto";
+			dom.contentEditable = "false";
+			dom.textContent = String(node.attrs.display ?? "");
+			labelRawInline(dom, options().labels());
+			dom.addEventListener("pointerenter", () => options().indicator.pointerEnter(dom));
+			dom.addEventListener("pointerleave", () => options().indicator.pointerLeave(dom));
+			return {
+				dom,
+				destroy: () => options().indicator.pointerLeave(dom)
+			};
+		};
+	} });
+}
 function extensions(options, keyboard) {
 	return [...richExtensions().map((extension) => {
 		if (extension.name === "lockedBlock") return lockedView(options);
-		return extension.name === "rawInline" ? rawInlineView : extension;
+		return extension.name === "rawInline" ? rawInlineView(options) : extension;
 	}), richKeyboard(keyboard)];
 }
 function pastedHtml(html, linkOrigins) {
@@ -87,8 +95,15 @@ function mountRichEditor(options) {
 			transformPastedHTML: (html) => pastedHtml(html, options.linkOrigins())
 		},
 		onUpdate: ({ editor: instance }) => options.change(Array.from(instance.state.doc.content.content)),
-		onTransaction: ({ editor: instance }) => options.state(richEditorState(instance)),
-		onSelectionUpdate: ({ editor: instance }) => options.state(richEditorState(instance))
+		onTransaction: ({ editor: instance }) => {
+			options.state(richEditorState(instance));
+			options.indicator.selectionSelect(selectedRawInlineAtom(instance));
+		},
+		onSelectionUpdate: ({ editor: instance }) => {
+			options.state(richEditorState(instance));
+			options.indicator.selectionSelect(selectedRawInlineAtom(instance));
+		},
+		onBlur: () => options.indicator.end()
 	});
 	options.state(richEditorState(editor));
 	return editor;

package/dist/markdown-rich-extensions.js

@@ -1,6 +1,7 @@
 import { LockedBlock } from "./markdown-rich-locked.js";
 import { rawInline } from "./markdown-rich-raw-inline.js";
-import { Extension, getSchema } from "@tiptap/core";
+import { listSourceAttributes, sourceFormStarterExtensions, sourceListAttrs, tableRowSourceAttributes, tableSourceExtension, taskItemSourceExtension } from "./markdown-rich-source-forms.js";
+import { Extension, getExtensionField, getSchema } from "@tiptap/core";
 import Image from "@tiptap/extension-image";
 import { BulletList, OrderedList, TaskItem, TaskList } from "@tiptap/extension-list";
 import { TableKit } from "@tiptap/extension-table";
@@ -75,14 +76,18 @@ const LooseBulletList = BulletList.extend({
 	addAttributes() {
 		return {
 			...this.parent?.(),
-			...listAttributes
+			...listAttributes,
+			...listSourceAttributes
 		};
 	},
 	parseMarkdown(token, helpers) {
 		if (token.type !== "list" || token.ordered) return [];
 		return {
 			type: "bulletList",
-			attrs: { loose: listIsLoose(token.raw ?? "") },
+			attrs: {
+				loose: listIsLoose(token.raw ?? ""),
+				...sourceListAttrs(token.raw ?? "")
+			},
 			content: helpers.parseChildren(token.items ?? [])
 		};
 	},
@@ -94,7 +99,8 @@ const LooseOrderedList = OrderedList.extend({
 	addAttributes() {
 		return {
 			...this.parent?.(),
-			...listAttributes
+			...listAttributes,
+			...listSourceAttributes
 		};
 	},
 	parseMarkdown(token, helpers) {
@@ -104,24 +110,39 @@ const LooseOrderedList = OrderedList.extend({
 			attrs: {
 				start: token.start || 1,
 				type: token.typeMarker ?? null,
-				loose: listIsLoose(token.raw ?? "")
+				loose: listIsLoose(token.raw ?? ""),
+				...sourceListAttrs(token.raw ?? "", true)
 			},
 			content: helpers.parseChildren(token.items ?? [])
 		};
 	},
 	renderMarkdown(node, helpers) {
-		return node.content ? helpers.renderChildren(node.content, listSeparator(node)) : "";
+		if (!node.content) return "";
+		const recorded = node.attrs?.sourceOrderedNumbers;
+		const keepsWrittenNumbers = Array.isArray(recorded) && recorded.length === node.content.length && node.content.every((item, index) => item.attrs?.sourceNumber === recorded[index]);
+		const content = node.content.map((item) => ({
+			...item,
+			attrs: {
+				...item.attrs,
+				sourceKeepWrittenNumbers: keepsWrittenNumbers
+			}
+		}));
+		return helpers.renderChildren(content, listSeparator(node));
 	}
 });
 const LooseTaskList = TaskList.extend({
 	addAttributes() {
 		return {
 			...this.parent?.(),
-			...listAttributes
+			...listAttributes,
+			...listSourceAttributes
 		};
 	},
 	parseMarkdown(token, helpers) {
-		return helpers.createNode("taskList", { loose: listIsLoose(token.raw ?? "") }, helpers.parseChildren(token.items ?? []));
+		return helpers.createNode("taskList", {
+			loose: listIsLoose(token.raw ?? ""),
+			...sourceListAttrs(token.raw ?? "")
+		}, helpers.parseChildren(token.items ?? []));
 	},
 	renderMarkdown(node, helpers) {
 		return node.content ? helpers.renderChildren(node.content, listSeparator(node)) : "";
@@ -179,18 +200,38 @@ const directionalBlocks = Extension.create({
 	}
 });
 function richExtensions(definitionLabels = /* @__PURE__ */ new Set()) {
+	const starter = StarterKit.configure({
+		trailingNode: false,
+		link: { openOnClick: false },
+		bulletList: false,
+		orderedList: false
+	});
+	const starterChildren = getExtensionField(starter, "addExtensions", {
+		name: starter.name,
+		options: starter.options,
+		storage: starter.storage
+	})?.() ?? [];
+	const tables = TableKit.configure();
+	const tableChildren = getExtensionField(tables, "addExtensions", {
+		name: tables.name,
+		options: tables.options,
+		storage: tables.storage
+	})?.() ?? [];
 	return [
-		StarterKit.configure({
-			trailingNode: false,
-			link: { openOnClick: false },
-			bulletList: false,
-			orderedList: false
-		}),
+		...sourceFormStarterExtensions(starterChildren),
 		LooseBulletList,
 		LooseOrderedList,
-		TableKit,
+		...tableChildren.map((extension) => {
+			if (extension.name === "tableRow") return extension.extend({ addAttributes() {
+				return {
+					...this.parent?.(),
+					...tableRowSourceAttributes
+				};
+			} });
+			return tableSourceExtension(extension);
+		}),
 		LooseTaskList,
-		TaskItem.configure({ nested: true }),
+		taskItemSourceExtension(TaskItem.configure({ nested: true })),
 		Image.configure({ inline: true }),
 		directionalBlocks,
 		LockedBlock,

package/dist/markdown-rich-raw-inline.js

@@ -1,6 +1,9 @@
 import { Node } from "@tiptap/core";
 //#region src/markdown-rich-raw-inline.ts
 const RAW_INLINE_NAME = "rawInline";
+const RAW_INLINE_ATTRIBUTE = "data-raw-inline";
+const RAW_INLINE_SOURCE_ATTRIBUTE = "data-raw-source";
+const RAW_INLINE_DISPLAY_ATTRIBUTE = "data-raw-display";
 const ASCII_PUNCTUATION = String.raw`[!-/:-@\[-` + "{-~]";
 const escapePattern = new RegExp(`^\\\\${ASCII_PUNCTUATION}`);
 const entityPattern = /^&(?:[A-Za-z][A-Za-z0-9]+|#[0-9]+|#[xX][0-9A-Fa-f]+);/;
@@ -61,22 +64,22 @@ function rawInline(labels = /* @__PURE__ */ new Set()) {
 				source: {
 					default: "",
 					parseHTML: (element) => element.getAttribute("data-raw-source") ?? "",
-					renderHTML: (attrs) => ({ "data-raw-source": attrs.source })
+					renderHTML: (attrs) => ({ [RAW_INLINE_SOURCE_ATTRIBUTE]: attrs.source })
 				},
 				display: {
 					default: "",
 					parseHTML: (element) => element.getAttribute("data-raw-display") ?? "",
-					renderHTML: (attrs) => ({ "data-raw-display": attrs.display })
+					renderHTML: (attrs) => ({ [RAW_INLINE_DISPLAY_ATTRIBUTE]: attrs.display })
 				}
 			};
 		},
 		parseHTML() {
-			return [{ tag: "span[data-raw-inline]" }];
+			return [{ tag: `span[${RAW_INLINE_ATTRIBUTE}]` }];
 		},
 		renderHTML({ HTMLAttributes }) {
 			return ["span", {
 				...HTMLAttributes,
-				"data-raw-inline": "",
+				[RAW_INLINE_ATTRIBUTE]: "",
 				dir: "auto"
 			}];
 		},
@@ -96,7 +99,11 @@ function rawInline(labels = /* @__PURE__ */ new Set()) {
 			name: RAW_INLINE_NAME,
 			level: "inline",
 			start(src) {
-				for (let index = 0; index < src.length; index++) if (rawSource(src.slice(index), labels)) return index;
+				const candidates = labels.size ? /\\|&|!?\[|</g : /\\|&|\[\^|</g;
+				for (const match of src.matchAll(candidates)) {
+					if (match.index === void 0) continue;
+					if (rawSource(src.slice(match.index), labels)) return match.index;
+				}
 				return -1;
 			},
 			tokenize(src) {
@@ -113,4 +120,4 @@ function rawInline(labels = /* @__PURE__ */ new Set()) {
 }
 const RawInline = rawInline();
 //#endregion
-export { RAW_INLINE_NAME, RawInline, normalizeReferenceLabel, rawInline };
+export { RAW_INLINE_ATTRIBUTE, RAW_INLINE_DISPLAY_ATTRIBUTE, RAW_INLINE_NAME, RAW_INLINE_SOURCE_ATTRIBUTE, RawInline, normalizeReferenceLabel, rawInline };

package/dist/markdown-rich-save.js

@@ -1,5 +1,6 @@
 import { isLockedToken, isSilentToken, lockedFenceLabel, lockedNode } from "./markdown-rich-locked.js";
 import { normalizeReferenceLabel } from "./markdown-rich-raw-inline.js";
+import { meaningfulAttributes, withoutRecordedSourceAttrs } from "./markdown-rich-source-attrs.js";
 import { richMarkdownManager, richSchema, scopedRichMarkdownManager } from "./markdown-rich-extensions.js";
 import { Node } from "@tiptap/pm/model";
 //#region src/markdown-rich-save.ts
@@ -46,14 +47,16 @@ function parseBlock(manager, token, raw, lockedFences) {
 	const parsed = manager.parse(raw);
 	return Node.fromJSON(richSchema(), parsed).toJSON().content ?? [];
 }
-function blocks(markdown, lockedFences = {}) {
-	const out = [];
-	const initialTokens = richMarkdownManager().instance.lexer(markdown);
+function definitionLabels(tokens) {
 	const labels = /* @__PURE__ */ new Set();
-	for (const token of initialTokens) {
+	for (const token of tokens) {
 		const definition = token.type === "def" ? /^ {0,3}\[([^\]]+)\]:/.exec(token.raw)?.[1] : void 0;
 		if (definition !== void 0) labels.add(normalizeReferenceLabel(definition));
 	}
+	return labels;
+}
+function blocks(markdown, labels, lockedFences = {}) {
+	const out = [];
 	const manager = scopedRichMarkdownManager(labels);
 	const tokens = manager.instance.lexer(markdown);
 	let at = 0;
@@ -81,7 +84,9 @@ function originalEntry(original, options) {
 	const nextFencesKey = fencesKey(options.lockedFences);
 	if (cachedOriginal?.original === original && cachedOriginal.fencesKey === nextFencesKey && cachedOriginal.bodyTransform === options.bodyTransform) return cachedOriginal;
 	const split = options.bodyTransform?.split(original);
-	const editableBlocks = blocks(split?.editable ?? original, options.lockedFences);
+	const editable = split?.editable ?? original;
+	const labels = definitionLabels(richMarkdownManager().instance.lexer(editable));
+	const editableBlocks = blocks(editable, labels, options.lockedFences);
 	const nodes = editableBlocks.flatMap((block) => block.nodes);
 	const keys = editableBlocks.flatMap((block) => block.keys);
 	const indicesByFirstKey = /* @__PURE__ */ new Map();
@@ -100,7 +105,8 @@ function originalEntry(original, options) {
 		blocks: editableBlocks,
 		nodes,
 		keys,
-		indicesByFirstKey
+		indicesByFirstKey,
+		definitionLabels: labels
 	};
 	return cachedOriginal;
 }
@@ -114,23 +120,115 @@ function firstAtOrAfter(indices, minimum) {
 	}
 	return indices[low] ?? -1;
 }
-function serializeNodes(nodes) {
+function semantic(value, attrNodeType) {
+	if (Array.isArray(value)) {
+		const values = value.map((item) => semantic(item));
+		const merged = [];
+		for (const item of values) {
+			const previous = merged.at(-1);
+			if (isRecord(item) && item.type === "text" && typeof item.text === "string" && isRecord(previous) && previous.type === "text" && typeof previous.text === "string" && JSON.stringify(previous.marks) === JSON.stringify(item.marks)) previous.text += item.text;
+			else merged.push(item);
+		}
+		return merged;
+	}
+	if (!isRecord(value)) return value;
+	if (value.type === "rawInline" && isRecord(value.attrs) && /^\\(?:\[|\])$/.test(String(value.attrs.source))) return {
+		type: "text",
+		text: value.attrs.display
+	};
+	return meaningfulAttributes(Object.fromEntries(Object.entries(value).map(([key, item]) => [key, semantic(item, key === "attrs" ? value.type : void 0)])), {}, attrNodeType);
+}
+function sameDocument(markdown, nodes, manager) {
+	const parsed = Node.fromJSON(richSchema(), manager.parse(markdown)).toJSON().content ?? [];
+	return JSON.stringify(semantic(parsed)) === JSON.stringify(semantic(nodes));
+}
+function chooseBracketEscapes(markdown, readsSame, dangerousOffsets) {
+	if (!/\\(?:\[|\])/.test(markdown)) return {
+		markdown,
+		same: readsSame(markdown)
+	};
+	const all = markdown.replace(/\\(\[|\])/g, "$1");
+	if (readsSame(all)) return {
+		markdown: all,
+		same: true
+	};
+	let selective = all;
+	for (const offset of dangerousOffsets(all).sort((left, right) => right - left)) selective = `${selective.slice(0, offset)}\\${selective.slice(offset)}`;
+	if (selective !== all && readsSame(selective)) return {
+		markdown: selective,
+		same: true
+	};
+	return {
+		markdown,
+		same: readsSame(markdown)
+	};
+}
+function dangerousBracketOffsets(markdown, manager) {
+	const sources = [];
+	const seen = /* @__PURE__ */ new Set();
+	const pending = [manager.instance.lexer(markdown)];
+	while (pending.length) {
+		const value = pending.pop();
+		if (!value || typeof value !== "object" || seen.has(value)) continue;
+		seen.add(value);
+		if (Array.isArray(value)) {
+			pending.push(...[...value].reverse());
+			continue;
+		}
+		const token = value;
+		const raw = typeof token.raw === "string" ? token.raw : "";
+		const type = token.type;
+		const source = typeof token.source === "string" ? token.source : raw;
+		if ((type === "link" || type === "image" || type === "rawInline") && source.includes("[")) {
+			sources.push(raw || source);
+			continue;
+		}
+		const children = Object.entries(token).filter(([key]) => key !== "raw" && key !== "text" && key !== "source").map(([, child]) => child).reverse();
+		pending.push(...children);
+	}
+	const offsets = [];
+	let cursor = 0;
+	for (const source of sources) {
+		const at = markdown.indexOf(source, cursor);
+		const bracket = source.indexOf("[");
+		if (at < 0 || bracket < 0) continue;
+		offsets.push(at + bracket);
+		cursor = at + source.length;
+	}
+	return offsets;
+}
+function serializeNodes(nodes, definitionLabels) {
 	const json = nodes.map(asJson);
 	let marker = "raw-inline-amp";
 	const source = JSON.stringify(json);
 	while (source.includes(marker)) marker += "-";
+	const openMarker = `${marker}open`;
+	const closeMarker = `${marker}close`;
+	let textMarkerCode = 57600;
+	while (source.includes(String.fromCodePoint(textMarkerCode)) || source.includes(String.fromCodePoint(textMarkerCode + 1))) textMarkerCode += 2;
+	const textOpenMarker = String.fromCodePoint(textMarkerCode);
+	const textCloseMarker = String.fromCodePoint(textMarkerCode + 1);
+	const restoreProtected = (value) => value.replaceAll(openMarker, "\\[").replaceAll(closeMarker, "\\]").replaceAll(marker, "&");
 	const protect = (node) => ({
 		...node,
+		text: node.type === "text" && typeof node.text === "string" && !node.marks?.some((mark) => mark.type === "link") ? node.text.replaceAll("[", textOpenMarker).replaceAll("]", textCloseMarker) : node.text,
 		attrs: node.type === "rawInline" && typeof node.attrs?.source === "string" ? {
 			...node.attrs,
-			source: node.attrs.source.replaceAll("&", marker)
+			source: node.attrs.source.replaceAll("&", marker).replaceAll("\\[", openMarker).replaceAll("\\]", closeMarker)
 		} : node.attrs,
 		content: node.content?.map(protect)
 	});
-	return restoreAmpersands(richMarkdownManager().serialize({
+	const manager = scopedRichMarkdownManager(definitionLabels);
+	const render = (content) => restoreAmpersands(manager.serialize({
 		type: "doc",
-		content: json.map(protect)
-	}).trim()).replaceAll(marker, "&");
+		content: content.map(protect)
+	}).replace(/^\n+|\n+$/g, "")).replaceAll(textOpenMarker, "\\[").replaceAll(textCloseMarker, "\\]");
+	const meaningful = (candidate) => {
+		return chooseBracketEscapes(candidate, (value) => sameDocument(restoreProtected(value), json, manager), (value) => dangerousBracketOffsets(value, manager));
+	};
+	let result = meaningful(render(json));
+	if (!result.same) result = meaningful(render(json.map(withoutRecordedSourceAttrs)));
+	return restoreProtected(result.markdown);
 }
 function matchingBlockIndex(entry, keys, keyIndex, blockIndex) {
 	const currentKey = keys[keyIndex];
@@ -153,7 +251,7 @@ function stitch(entry, edited, keys) {
 	const pending = [];
 	const emitNew = () => {
 		if (!pending.length) return;
-		out += (out ? "\n\n" : bs[blockIndex]?.sep ?? "") + serializeNodes(pending.splice(0));
+		out += (out ? "\n\n" : bs[blockIndex]?.sep ?? "") + serializeNodes(pending.splice(0), entry.definitionLabels);
 		last = -1;
 	};
 	const emitOld = (hit) => {
@@ -199,4 +297,4 @@ function saveRichDocument(original, edited, options = {}) {
 	return entry.split && options.bodyTransform ? options.bodyTransform.join(saved, entry.split.retained) : saved;
 }
 //#endregion
-export { parseRichDocument, saveRichDocument };
+export { chooseBracketEscapes, parseRichDocument, saveRichDocument };

package/dist/markdown-rich-source-attrs.js

@@ -0,0 +1,32 @@
+import "./markdown-rich-raw-inline.js";
+//#region src/markdown-rich-source-attrs.ts
+function isRecordedSourceAttr(key, nodeType) {
+	return key.startsWith("source") && !(nodeType === "rawInline" && key === "source");
+}
+function meaningfulAttributes(value, options = {}, attrNodeType) {
+	if (Array.isArray(value)) return value.map((item) => meaningfulAttributes(item, options));
+	if (!value || typeof value !== "object") return value;
+	const record = value;
+	const nodeType = record.type ?? attrNodeType;
+	const out = {};
+	for (const [key, item] of Object.entries(record)) {
+		if (key === "dir" || isRecordedSourceAttr(key, nodeType) || item === null || item === void 0) continue;
+		if (!options.keepEmptyArrays && Array.isArray(item) && item.length === 0) continue;
+		if (options.omitDefaultTableSpans && (key === "colspan" || key === "rowspan") && item === 1) continue;
+		const next = meaningfulAttributes(item, options, key === "attrs" ? nodeType : void 0);
+		if (next && typeof next === "object" && !Array.isArray(next) && Object.keys(next).length === 0) continue;
+		out[key] = next;
+	}
+	return out;
+}
+function withoutRecordedSourceAttrs(value) {
+	const attrs = value.attrs ? Object.fromEntries(Object.entries(value.attrs).filter(([key]) => !isRecordedSourceAttr(key, value.type))) : value.attrs;
+	return {
+		...value,
+		attrs,
+		marks: value.marks?.map((mark) => withoutRecordedSourceAttrs(mark)),
+		content: value.content?.map(withoutRecordedSourceAttrs)
+	};
+}
+//#endregion
+export { isRecordedSourceAttr, meaningfulAttributes, withoutRecordedSourceAttrs };

package/dist/markdown-rich-source-forms.js

@@ -0,0 +1,368 @@
+import { meaningfulAttributes } from "./markdown-rich-source-attrs.js";
+import { renderNestedMarkdownContent } from "@tiptap/core";
+//#region src/markdown-rich-source-forms.ts
+const hidden = (defaultValue = null) => ({
+	default: defaultValue,
+	renderHTML: () => ({})
+});
+function withAttrs(value, attrs) {
+	if (!value || Array.isArray(value) || typeof value !== "object") return value;
+	const node = value;
+	return {
+		...node,
+		attrs: {
+			...node.attrs,
+			...attrs
+		}
+	};
+}
+function sourceFormAttrs(names) {
+	return Object.fromEntries(names.map((name) => [name, hidden()]));
+}
+function emphasisMarker(token) {
+	const first = token.raw?.[0];
+	return first === "_" || first === "*" ? first : null;
+}
+function titleQuote(raw) {
+	if (!raw) return null;
+	const match = /\s(["'(])(?=[\s\S]*(?:"|'|\))\)$)/g;
+	let quote = null;
+	for (const hit of raw.matchAll(match)) quote = hit[1] ?? null;
+	return quote;
+}
+function safeTitleQuote(value, quote) {
+	if (typeof value !== "string" || !value) return "";
+	if (quote === "'" && !value.includes("'")) return "'";
+	if (quote === "(" && !value.includes(")")) return "(";
+	return "\"";
+}
+function fenceCloseRegex(fence, flags = "") {
+	const character = fence[0] === "~" ? "~" : "`";
+	return new RegExp(`^ {0,3}${character}{${fence.length},}[ \\t]*$`, flags);
+}
+function fenceAttrs(token) {
+	const lines = (token.raw ?? "").replace(/\n$/, "").split("\n");
+	const opening = /^ {0,3}(`{3,}|~{3,})([^\n]*)/.exec(lines[0] ?? "");
+	if (!opening) return {};
+	const fence = opening[1] ?? "";
+	const suffix = opening[2] ?? "";
+	const language = token.lang ?? "";
+	const at = language ? suffix.indexOf(language) : -1;
+	const infoBefore = at >= 0 ? suffix.slice(0, at) : suffix;
+	const infoAfter = at >= 0 ? suffix.slice(at + language.length) : "";
+	return {
+		sourceFence: fence,
+		sourceClosingFence: fenceCloseRegex(fence).test(lines.at(-1) ?? "") ? lines.at(-1)?.trim() ?? fence : fence,
+		sourceInfoBefore: infoBefore,
+		sourceInfoAfter: infoAfter
+	};
+}
+function fenceIsSafe(content, fence) {
+	const character = fence[0];
+	if (character !== "`" && character !== "~" || fence.length < 3) return false;
+	return !fenceCloseRegex(fence, "m").test(content);
+}
+function longestFenceRun(content, character) {
+	let longest = 0;
+	const pattern = new RegExp(`^ {0,3}(${character === "~" ? "~" : "`"}+)`, "gm");
+	for (const match of content.matchAll(pattern)) longest = Math.max(longest, match[1]?.length ?? 0);
+	return longest;
+}
+function safeFallbackFence(content, recorded) {
+	const firstCharacter = recorded[0] === "~" ? "~" : "`";
+	for (const character of [firstCharacter, firstCharacter === "~" ? "`" : "~"]) {
+		const fence = character.repeat(Math.max(3, longestFenceRun(content, character) + 1));
+		if (fenceIsSafe(content, fence)) return fence;
+	}
+	throw new Error("Unable to choose a safe Markdown code fence.");
+}
+const stable = (value) => meaningfulAttributes(value, {
+	keepEmptyArrays: true,
+	omitDefaultTableSpans: true
+});
+const rowSignature = (row) => JSON.stringify(stable(row));
+function rowCells(line) {
+	const pipes = [];
+	for (let index = 0; index < line.length; index++) {
+		if (line[index] !== "|") continue;
+		let escapes = 0;
+		for (let before = index - 1; before >= 0 && line[before] === "\\"; before--) escapes++;
+		if (escapes % 2 === 0) pipes.push(index);
+	}
+	const bounds = [
+		-1,
+		...pipes,
+		line.length
+	];
+	const cells = bounds.slice(0, -1).map((left, index) => ({
+		start: left + 1,
+		end: bounds[index + 1] ?? line.length
+	}));
+	if (cells[0] && !line.slice(cells[0].start, cells[0].end).trim()) cells.shift();
+	if (cells.at(-1) && !line.slice(cells.at(-1)?.start, cells.at(-1)?.end).trim()) cells.pop();
+	return cells;
+}
+function changedRow(source, normalized, signature, row) {
+	let old;
+	try {
+		old = JSON.parse(signature);
+	} catch {
+		return normalized;
+	}
+	const sourceCells = rowCells(source);
+	const normalizedCells = rowCells(normalized);
+	if (sourceCells.length !== row.content?.length || normalizedCells.length !== row.content.length) return normalized;
+	let output = source;
+	for (let index = sourceCells.length - 1; index >= 0; index--) {
+		if (JSON.stringify(stable(old.content?.[index])) === JSON.stringify(stable(row.content?.[index]))) continue;
+		const target = sourceCells[index];
+		const replacement = normalizedCells[index];
+		if (!target || !replacement) return normalized;
+		const original = source.slice(target.start, target.end);
+		const leading = /^\s*/.exec(original)?.[0] ?? "";
+		const trailing = /\s*$/.exec(original)?.[0] ?? "";
+		const content = normalized.slice(replacement.start, replacement.end).trim();
+		output = `${output.slice(0, target.start)}${leading}${content}${trailing}${output.slice(target.end)}`;
+	}
+	return output;
+}
+function tableLines(raw) {
+	const lines = raw.replace(/\n$/, "").split("\n");
+	const delimiter = lines[1] ?? "";
+	const columns = delimiter.replace(/^\s*\|/, "").replace(/\|\s*$/, "").split("|").length;
+	return {
+		rows: [lines[0] ?? "", ...lines.slice(2)],
+		delimiter,
+		columns
+	};
+}
+function extendInlineForm(extension) {
+	if (extension.name !== "italic" && extension.name !== "bold") return extension;
+	const attrName = extension.name === "italic" ? "sourceEmphasisDelimiter" : "sourceStrongDelimiter";
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs([attrName])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			const parsed = this.parent?.(token, helpers);
+			return withAttrs(parsed, { [attrName]: emphasisMarker(token) });
+		},
+		renderMarkdown(node, helpers) {
+			const count = extension.name === "bold" ? 2 : 1;
+			const recorded = node.attrs?.[attrName];
+			const marker = recorded === "_" || recorded === "*" ? recorded.repeat(count) : "*".repeat(count);
+			return `${marker}${helpers.renderChildren(node)}${marker}`;
+		}
+	});
+}
+function extendHeading(extension) {
+	if (extension.name !== "heading") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs(["sourceHeadingStyle", "sourceSetextUnderline"])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			const parsed = this.parent?.(token, helpers);
+			const lines = token.raw?.replace(/\n$/, "").split("\n") ?? [];
+			const underline = lines.length > 1 && /^ {0,3}(?:=+|-+)[ \t]*$/.test(lines.at(-1) ?? "") ? lines.at(-1) : null;
+			return withAttrs(parsed, {
+				sourceHeadingStyle: underline ? "setext" : "atx",
+				sourceSetextUnderline: underline
+			});
+		},
+		renderMarkdown(node, helpers) {
+			const content = helpers.renderChildren(node.content ?? []);
+			if (node.attrs?.sourceHeadingStyle === "setext" && typeof node.attrs.sourceSetextUnderline === "string") return `${content}\n${node.attrs.sourceSetextUnderline}`;
+			const level = typeof node.attrs?.level === "number" ? node.attrs.level : 1;
+			return `${"#".repeat(level)} ${content}`;
+		}
+	});
+}
+function extendHardBreak(extension) {
+	if (extension.name !== "hardBreak") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs(["sourceHardBreak"])
+			};
+		},
+		parseMarkdown(token) {
+			return {
+				type: "hardBreak",
+				attrs: { sourceHardBreak: token.raw?.slice(0, -1) ?? null }
+			};
+		},
+		renderMarkdown(node) {
+			const form = node.attrs?.sourceHardBreak;
+			return `${form === "\\" || typeof form === "string" && /^ {2,}$/.test(form) ? form : "  "}\n`;
+		}
+	});
+}
+function extendCodeBlock(extension) {
+	if (extension.name !== "codeBlock") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs([
+					"sourceFence",
+					"sourceClosingFence",
+					"sourceInfoBefore",
+					"sourceInfoAfter"
+				])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			return withAttrs(this.parent?.(token, helpers), fenceAttrs(token));
+		},
+		renderMarkdown(node, helpers) {
+			const content = helpers.renderChildren(node.content ?? []);
+			const recorded = typeof node.attrs?.sourceFence === "string" ? node.attrs.sourceFence : "";
+			const fence = fenceIsSafe(content, recorded) ? recorded : safeFallbackFence(content, recorded);
+			const closing = fence === recorded && typeof node.attrs?.sourceClosingFence === "string" ? node.attrs.sourceClosingFence : fence;
+			const language = typeof node.attrs?.language === "string" ? node.attrs.language : "";
+			const before = fence === recorded && typeof node.attrs?.sourceInfoBefore === "string" ? node.attrs.sourceInfoBefore : "";
+			const after = fence === recorded && typeof node.attrs?.sourceInfoAfter === "string" ? node.attrs.sourceInfoAfter : "";
+			return `${fence}${language ? `${before}${language}${after}` : ""}\n${content}\n${closing}`;
+		}
+	});
+}
+function extendLink(extension) {
+	if (extension.name !== "link") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs(["sourceTitleQuote"])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			return withAttrs(this.parent?.(token, helpers), { sourceTitleQuote: titleQuote(token.raw) });
+		},
+		renderMarkdown(node, helpers) {
+			const href = node.attrs?.href ?? "";
+			const title = node.attrs?.title;
+			const content = helpers.renderChildren(node);
+			if (typeof title !== "string" || !title) return `[${content}](${href})`;
+			const quote = safeTitleQuote(title, node.attrs?.sourceTitleQuote);
+			return `[${content}](${href} ${quote}${title}${quote === "(" ? ")" : quote})`;
+		}
+	});
+}
+function orderedMarker(attrs, index) {
+	const orderedDelimiter = attrs?.sourceOrderedDelimiter === ")" ? ")" : ".";
+	const written = attrs?.sourceNumber;
+	const start = typeof attrs?.start === "number" ? attrs.start : 1;
+	return `${attrs?.sourceKeepWrittenNumbers && typeof written === "string" && /^\d{1,9}$/.test(written) ? written : String(start + index)}${orderedDelimiter} `;
+}
+function extendListItem(extension) {
+	if (extension.name !== "listItem") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs(["sourceNumber"])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			const parsed = this.parent?.(token, helpers);
+			return withAttrs(parsed, { sourceNumber: /^\s*(\d+)[.)]/.exec(token.raw ?? "")?.[1] ?? null });
+		},
+		renderMarkdown(node, helpers, context) {
+			return renderNestedMarkdownContent(node, helpers, () => {
+				if (context.parentType === "bulletList") return `${context.meta?.parentAttrs?.sourceBulletMarker ?? "-"} `;
+				if (context.parentType === "orderedList") return orderedMarker({
+					...context.meta?.parentAttrs,
+					...node.attrs
+				}, context.index ?? 0);
+				return "- ";
+			}, context, { alignNestedToPrefix: context.parentType === "orderedList" });
+		}
+	});
+}
+function sourceFormStarterExtensions(extensions) {
+	return extensions.map((extension) => {
+		return extendListItem(extendLink(extendCodeBlock(extendHardBreak(extendHeading(extendInlineForm(extension))))));
+	});
+}
+function sourceListAttrs(raw, ordered = false) {
+	const marker = /^\s*([-+*]|\d+([.)]))/.exec(raw);
+	if (!ordered) return { sourceBulletMarker: marker?.[1] && /^[-+*]$/.test(marker[1]) ? marker[1] : null };
+	const first = /^(\s*)(\d+)[.)](?:\s|$)/.exec(raw);
+	const sourceOrderedNumbers = raw.split("\n").map((line) => /^(\s*)(\d+)[.)](?:\s|$)/.exec(line)).filter((match) => match?.[1] === first?.[1]).map((match) => match?.[2]);
+	return {
+		sourceOrderedDelimiter: marker?.[2] ?? null,
+		sourceOrderedNumbers
+	};
+}
+const listSourceAttributes = {
+	sourceBulletMarker: hidden(),
+	sourceOrderedDelimiter: hidden(),
+	sourceOrderedNumbers: hidden()
+};
+function taskItemSourceExtension(extension) {
+	return extension.extend({ renderMarkdown(node, helpers, context) {
+		const checked = node.attrs?.checked ? "x" : " ";
+		const marker = context.meta?.parentAttrs?.sourceBulletMarker ?? "-";
+		return renderNestedMarkdownContent(node, helpers, `${marker} [${checked}] `);
+	} });
+}
+function tableSourceExtension(extension) {
+	if (extension.name !== "table") return extension;
+	return extension.extend({
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				...sourceFormAttrs(["sourceDelimiter", "sourceColumns"])
+			};
+		},
+		parseMarkdown(token, helpers) {
+			const parsed = this.parent?.(token, helpers);
+			const source = tableLines(token.raw ?? "");
+			const content = parsed.content?.map((row, index) => ({
+				...row,
+				attrs: {
+					...row.attrs,
+					sourceRow: source.rows[index] ?? null,
+					sourceSignature: rowSignature(row)
+				}
+			}));
+			return {
+				...parsed,
+				attrs: {
+					...parsed.attrs,
+					sourceDelimiter: source.delimiter,
+					sourceColumns: source.columns
+				},
+				content
+			};
+		},
+		renderMarkdown(node, helpers, context) {
+			const lines = (this.parent?.(node, helpers, context) ?? "").trim().split("\n");
+			const rows = node.content ?? [];
+			const bodyLines = [lines[0] ?? "", ...lines.slice(2)];
+			for (const [index, row] of rows.entries()) if (typeof row.attrs?.sourceRow === "string" && row.attrs.sourceSignature === rowSignature(row)) bodyLines[index] = row.attrs.sourceRow;
+			else if (typeof row.attrs?.sourceRow === "string" && typeof row.attrs.sourceSignature === "string") bodyLines[index] = changedRow(row.attrs.sourceRow, bodyLines[index] ?? "", row.attrs.sourceSignature, row);
+			const columns = rows[0]?.content?.length ?? 0;
+			const delimiter = node.attrs?.sourceColumns === columns && typeof node.attrs.sourceDelimiter === "string" ? node.attrs.sourceDelimiter : lines[1] ?? "";
+			return [
+				bodyLines[0] ?? "",
+				delimiter,
+				...bodyLines.slice(1)
+			].join("\n");
+		}
+	});
+}
+const tableRowSourceAttributes = {
+	sourceRow: hidden(),
+	sourceSignature: hidden()
+};
+//#endregion
+export { listSourceAttributes, sourceFormStarterExtensions, sourceListAttrs, tableRowSourceAttributes, tableSourceExtension, taskItemSourceExtension };

package/dist/vue.d.ts

@@ -1,6 +1,7 @@
 import { MarkdownEditorMode } from "./markdown-editor-policy.js";
 import { MarkdownEditorStateDetail } from "./markdown-editor-types.js";
 import { MARKDOWN_EDITOR_PROPERTIES } from "./element-properties.js";
+import { RawInlineIndicationDetail } from "./markdown-raw-inline-indication.js";
 import { SegnaviaMarkdownEditor } from "./markdown-editor.js";
 import { EventProps } from "@segnavia/frame/vue-types";
 import { DefineComponent } from "vue";
@@ -20,6 +21,7 @@ export interface MarkdownEditorVueEventDetails {
   'segnavia-link-request': {
     href: string | null;
   };
+  'segnavia-raw-inline-indicate': RawInlineIndicationDetail | null;
 }
 type MarkdownEditorComponent = Partial<Pick<SegnaviaMarkdownEditor, (typeof MARKDOWN_EDITOR_PROPERTIES.properties)[number]>> & EventProps<typeof MARKDOWN_EDITOR_PROPERTIES.events, MarkdownEditorVueEventDetails>;
 type MarkdownEditorGlobalComponents = { [Tag in typeof MARKDOWN_EDITOR_PROPERTIES.tag]: DefineComponent<MarkdownEditorComponent>; };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segnavia/markdown-editor",
-  "version": "0.45.0",
+  "version": "0.47.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -36,9 +36,9 @@
     }
   },
   "dependencies": {
-    "@segnavia/format": "0.45.0",
-    "@segnavia/frame": "0.45.0",
-    "@segnavia/html": "0.45.0"
+    "@segnavia/format": "0.47.0",
+    "@segnavia/frame": "0.47.0",
+    "@segnavia/html": "0.47.0"
   },
   "peerDependencies": {
     "@codemirror/commands": "^6.11.1",