@segnavia/markdown-editor 0.44.0 → 0.46.0

package/dist/editor-css.js

@@ -9,10 +9,12 @@ const EDITOR_CSS = `
 :where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] .ProseMirror){min-block-size:100%;outline:0}
 :where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] table){border-collapse:collapse;inline-size:max-content;min-inline-size:100%}
 :where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] th),:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] td){min-inline-size:1em}
-:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] [data-type="taskList"]){list-style:none;padding-inline-start:0}
-:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] [data-type="taskItem"]){display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--segnavia-markdown-task-gap,.5em)}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] ul:has(> li[data-checked])){list-style:none;padding-inline-start:0}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] li[data-checked]){display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--segnavia-markdown-task-gap,.5em);align-items:baseline}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] li[data-checked] > div > p){margin:0}
 :where(:host(segnavia-markdown-editor:not([unstyled])) [part~="locked-block"]){display:block;position:relative;min-block-size:1em}
 :where(:host(segnavia-markdown-editor:not([unstyled])) [part~="locked-block"] segnavia-page){display:block}
+:where(:host(segnavia-markdown-editor:not([unstyled])) [part~="rich"] [part~="raw-inline"]){unicode-bidi:isolate;color:var(--segnavia-markdown-raw-inline-color,inherit);background:var(--segnavia-markdown-raw-inline-background,transparent);border:var(--segnavia-markdown-raw-inline-border,none);border-radius:var(--segnavia-markdown-raw-inline-radius,0);padding-inline:var(--segnavia-markdown-raw-inline-padding,.15em)}
 `;
 //#endregion
 export { EDITOR_CSS };

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-model.js

@@ -9,17 +9,21 @@ function markdownEditorModel() {
 		retained: ""
 	};
 }
+function normalizeMarkdownLineEndings(markdown) {
+	return markdown.replace(/\r\n?/g, "\n");
+}
 function setModelMarkdown(model, markdown) {
-	if (markdown === model.markdown) return model;
+	const normalized = normalizeMarkdownLineEndings(markdown);
+	if (normalized === model.markdown) return model;
 	if (model.titleSource === "separate") return {
 		...model,
-		markdown,
-		editable: markdown
+		markdown: normalized,
+		editable: normalized
 	};
-	const split = splitLeadingHeading(markdown);
+	const split = splitLeadingHeading(normalized);
 	return {
 		...model,
-		markdown,
+		markdown: normalized,
 		title: split.title ?? "",
 		editable: split.editable,
 		retained: split.retained
@@ -63,7 +67,8 @@ function setModelTitle(model, value) {
 		retained
 	};
 }
-function setModelEditable(model, editable) {
+function setModelEditable(model, edited) {
+	const editable = normalizeMarkdownLineEndings(edited);
 	const markdown = model.titleSource === "leading-heading" ? joinLeadingHeading(editable, model.retained) : editable;
 	if (markdown === model.markdown && editable === model.editable) return model;
 	return {
@@ -73,4 +78,4 @@ function setModelEditable(model, editable) {
 	};
 }
 //#endregion
-export { markdownEditorModel, setModelEditable, setModelMarkdown, setModelTitle, setModelTitleSource };
+export { markdownEditorModel, normalizeMarkdownLineEndings, setModelEditable, setModelMarkdown, setModelTitle, setModelTitleSource };

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,5 +1,7 @@
 import { LockedBlock } from "./markdown-rich-locked.js";
 import { richEditorState, richKeyboard } from "./markdown-rich-commands.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";
@@ -37,8 +39,32 @@ function lockedView(options) {
 		};
 	} });
 }
+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) => extension.name === "lockedBlock" ? lockedView(options) : extension), richKeyboard(keyboard)];
+	return [...richExtensions().map((extension) => {
+		if (extension.name === "lockedBlock") return lockedView(options);
+		return extension.name === "rawInline" ? rawInlineView(options) : extension;
+	}), richKeyboard(keyboard)];
 }
 function pastedHtml(html, linkOrigins) {
 	const parsed = new DOMParser().parseFromString(html, "text/html");
@@ -69,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;