foldkit-richtext-dom 0.1.0 → 0.2.0

package/dist/editor-bundle.mjs

@@ -1,8 +1,10 @@
-import { placeRendering } from "./host.mjs";
-import { Message, events, patchEditor } from "./editor.mjs";
+import { decorationsFor, inputRulesFor, placeDecorations, placeInputRules, placeOverlay, placePlaceholder, placeRendering, placeServerRendered, placeVocabulary, renderingFor, serverRenderedFor, vocabularyFor } from "./host.mjs";
+import { Message, events, heldDocument, patchEditor, redecorateEditor, slashEntries, slashMenu } from "./editor.mjs";
+import { renderEditable } from "./view.mjs";
 import * as RichText from "foldkit-richtext";
-import { Effect, Option, Schema } from "effect";
+import { Effect, Equal, Match, Option, Schema } from "effect";
 import { defineMessageUnion } from "foldkit/message";
+import { define } from "foldkit/customElement";
 import { Bundle, Link } from "foldkit-bundle";
 import * as Submodel from "foldkit/submodel";
 //#region src/editor-bundle.ts
@@ -25,6 +27,12 @@ const EditorState = Schema.Struct({
 	/** Null inherits neighboring marks; an array explicitly sets them, even when empty. */
 	storedMarks: Schema.NullOr(Schema.Array(Schema.String)),
 	/**
+	* The highlighted entry in a live slash menu (§123). The document says whether the
+	* caret is in a query and what matches; this is the one thing the menu owns, and
+	* `update` resolves Enter against it.
+	*/
+	menuIndex: Schema.Number,
+	/**
 	* The host element the view renders and the patch Command finds (§118). It is
 	* per-placement, so it arrives as the Bundle's args and is carried here
 	* because `read` re-projects the whole child from the parent.
@@ -42,19 +50,78 @@ const EditorView = Schema.Struct({
 	nextId: Schema.Number,
 	history: RichText.History,
 	storedMarks: Schema.NullOr(Schema.Array(Schema.String)),
+	menuIndex: Schema.Number,
 	hostId: Schema.String
 });
-const idsOf = (content) => new Set(content.children.flatMap((block) => [block.id, ...block.children.map((run) => run.id)]));
-/** Everything that differs between two whole documents, for a replace patch. */
+/** Every block and run of a document by id, nested ones included, with where it stands. */
+const nodesOf = (content) => {
+	const nodes = /* @__PURE__ */ new Map();
+	const visit = (blocks, parent) => {
+		for (const [index, block] of blocks.entries()) {
+			nodes.set(block.id, {
+				node: block,
+				parent,
+				index
+			});
+			for (const [at, run] of block.children.entries()) nodes.set(run.id, {
+				node: run,
+				parent: block.id,
+				index: at
+			});
+			if (block.type === "Node" && block.blocks !== void 0) visit(block.blocks, block.id);
+		}
+	};
+	visit(content.children, null);
+	return nodes;
+};
+const sameMarks = (left, right) => left.marks.length === right.marks.length && left.marks.every((mark, index) => RichText.sameMark(mark, right.marks[index]));
+/** A block's own fields, apart from what it holds: its type, level, kind and props. */
+const ownFields = ({ children: _runs, ...block }) => ({
+	...block,
+	blocks: void 0
+});
+/**
+* What differs between two whole documents, for a patch from one to the other, in a
+* transaction's terms: the runs whose text or marks changed and the blocks holding them,
+* blocks whose own fields changed, what came and went, and whether any block moved.
+*/
 const replaceChangeSet = (previous, next) => {
-	const before = idsOf(previous);
-	const after = idsOf(next);
+	const before = nodesOf(previous);
+	const after = nodesOf(next);
+	const dirtyNodes = /* @__PURE__ */ new Set();
+	const textChanged = /* @__PURE__ */ new Set();
+	let structureChanged = false;
+	for (const [id, placed] of after) {
+		const was = before.get(id);
+		if (placed.node.type === "Text") {
+			const run = placed.node;
+			const old = was?.node.type === "Text" ? was.node : void 0;
+			if (old === void 0 || old.text !== run.text) textChanged.add(id);
+			if (old === void 0 || old.text !== run.text || !sameMarks(old, run)) {
+				dirtyNodes.add(id);
+				if (placed.parent !== null) dirtyNodes.add(placed.parent);
+			}
+			if (was !== void 0 && (was.parent !== placed.parent || was.index !== placed.index)) {
+				if (placed.parent !== null) dirtyNodes.add(placed.parent);
+				if (was.parent !== null && after.has(was.parent)) dirtyNodes.add(was.parent);
+			}
+			continue;
+		}
+		if (was === void 0 || was.parent !== placed.parent || was.index !== placed.index) structureChanged = true;
+		if (was === void 0 || !Equal.equals(ownFields(was.node), ownFields(placed.node))) dirtyNodes.add(id);
+	}
+	const removedNodes = new Set([...before.keys()].filter((id) => !after.has(id)));
+	for (const id of removedNodes) {
+		const was = before.get(id);
+		if (was.node.type !== "Text") structureChanged = true;
+		else if (was.parent !== null && after.has(was.parent)) dirtyNodes.add(was.parent);
+	}
 	return {
-		dirtyNodes: after,
-		insertedNodes: new Set([...after].filter((id) => !before.has(id))),
-		removedNodes: new Set([...before].filter((id) => !after.has(id))),
-		textChanged: /* @__PURE__ */ new Set(),
-		structureChanged: true,
+		dirtyNodes,
+		insertedNodes: new Set([...after.keys()].filter((id) => !before.has(id))),
+		removedNodes,
+		textChanged,
+		structureChanged,
 		selectionChanged: false
 	};
 };
@@ -71,6 +138,32 @@ const toCommand = (message) => {
 			type: "ToggleMark",
 			mark: message.mark
 		};
+		case "AppliedMark": return {
+			type: "SetMark",
+			mark: message.mark
+		};
+		case "ClearedMark": return {
+			type: "ClearMark",
+			mark: message.mark
+		};
+		case "RetypedBlock": return {
+			type: "RetypeBlock",
+			to: message.block
+		};
+		case "WrappedBlock": return {
+			type: "WrapBlock",
+			containers: message.containers
+		};
+		case "ConvertedBlock": return {
+			type: "ConvertBlock",
+			to: message.to
+		};
+		case "LiftedBlock": return { type: "LiftBlock" };
+		case "MovedBlock": return {
+			type: "MoveBlock",
+			node: message.node,
+			to: message.to
+		};
 		case "Selected": return {
 			type: "SetSelection",
 			selection: message.selection
@@ -92,68 +185,175 @@ const patch = (hostId, state, changeSet) => ({
 		patchEditor(hostId, state, changeSet);
 	}), Message.Patched())
 });
-const Editor = Bundle.make({
-	name: "RichTextEditor",
-	Model: EditorView,
-	Message,
-	args: Schema.Struct({ hostId: Schema.String }),
-	init: (args) => ({ model: {
-		document: RichText.Document.make({
-			version: 1,
-			children: []
-		}),
-		selection: null,
-		nextId: 0,
-		history: RichText.emptyHistory,
-		storedMarks: null,
-		hostId: args.hostId
-	} }),
-	update: (model, message) => {
-		const state = {
-			document: model.document,
-			selection: model.selection
-		};
-		if (message._tag === "Patched") return { model };
-		if (message._tag === "Undone" || message._tag === "Redone") {
-			const restored = message._tag === "Undone" ? RichText.undo(model.history, state) : RichText.redo(model.history, state);
-			if (restored === void 0) return {
-				model,
-				outMessage: {
-					_tag: "Rejected",
-					error: message._tag === "Undone" ? "NothingToUndo" : "NothingToRedo"
-				}
-			};
-			const changeSet = replaceChangeSet(model.document, restored.state.document);
-			return {
-				model: {
-					...model,
-					selection: restored.state.selection,
-					history: restored.history
-				},
-				outMessage: {
-					_tag: "Replaced",
-					state: restored.state,
-					changeSet
-				},
-				commands: [patch(model.hostId, restored.state, changeSet)]
-			};
-		}
+/**
+* The text between the start of the caret's block and the caret, or `''` when the
+* selection names no caret. A menu and the input rules read this; nothing about the query
+* is stored. A range is read from its start, which is where what is typed over it lands,
+* whichever way it was dragged.
+*/
+const textBeforeOf = (model) => {
+	if (model.selection?.type !== "Range") return "";
+	const start = RichText.rangeStart(model.document, model.selection);
+	return start === void 0 ? "" : RichText.textBefore(model.document, start);
+};
+/**
+* The kinds of the node blocks around the caret's block, innermost first; a range is read
+* from its start, as `textBeforeOf` reads it.
+*/
+const withinOf = (model) => {
+	if (model.selection?.type !== "Range") return [];
+	const start = RichText.rangeStart(model.document, model.selection);
+	const run = start === void 0 ? void 0 : RichText.locateRun(model.document, start.node);
+	if (run === void 0) return [];
+	const kinds = [];
+	for (let depth = run.path.length - 1; depth > 0; depth--) {
+		const block = RichText.blockAtPath(model.document, run.path.slice(0, depth));
+		if (block?.type === "Node") kinds.push(block.kind);
+	}
+	return kinds;
+};
+const Host = define({
+	tag: "foldkit-richtext",
+	properties: {},
+	events: {}
+});
+/**
+* Each host id's keys, by the document shown. The host's Mount reads its document once, so a
+* document that did not come from an edit here (a form's fill or reset, an entry opened, a
+* revision restored) needs a fresh host. A committed edit moves its document's key to the next
+* document (`carryKey`), and the document it leaves keeps none, so returning to it is a new host
+* too. The first document a host id shows has no key, as the server's render has none.
+*/
+const lineages = /* @__PURE__ */ new Map();
+const lineageOf = (hostId) => {
+	const found = lineages.get(hostId);
+	if (found !== void 0) return found;
+	const created = {
+		next: 0,
+		keys: /* @__PURE__ */ new WeakMap()
+	};
+	lineages.set(hostId, created);
+	return created;
+};
+const hostKey = (hostId, document) => {
+	const lineage = lineageOf(hostId);
+	const key = lineage.keys.get(document) ?? lineage.next++;
+	lineage.keys.set(document, key);
+	return key === 0 ? void 0 : `${hostId}-${key}`;
+};
+const carryKey = (hostId, from, to) => {
+	const keys = lineageOf(hostId).keys;
+	const key = keys.get(from);
+	if (key === void 0 || from === to) return;
+	keys.delete(from);
+	keys.set(to, key);
+};
+/**
+* Patches the editor at `hostId` to `next`, a document the parent put in place of
+* `previous`, keeping the host element instead of mounting a new one. A parent that
+* replaces its document outside an edit here (another replica's change arriving) returns
+* this, in the same transition as the replacement.
+*
+* The host is found by the document the view renders, so `previous` is the object it
+* rendered and `next.document` the object it will render; building the Command hands the
+* host on from one to the other, so build it only to return it. The patch itself starts
+* from the latest state the editor holds (what it has drawn, or a state waiting on a
+* composition), and `next.selection` becomes the browser selection;
+* a replacement that changes nothing drawn leaves the DOM alone, selection included, as an
+* exchange that only confirms edits already shown does.
+*/
+const patchTo = (hostId, previous, next) => {
+	carryKey(hostId, previous, next.document);
+	return {
+		name: "RichText.patch",
+		effect: Effect.as(Effect.sync(() => {
+			const held = heldDocument(hostId);
+			if (held === void 0) return;
+			const changeSet = replaceChangeSet(held, next.document);
+			if (!(!changeSet.structureChanged && changeSet.dirtyNodes.size === 0 && changeSet.removedNodes.size === 0)) patchEditor(hostId, next, changeSet);
+		}), Message.Patched())
+	};
+};
+/**
+* Draws `decorations` over the editor at `hostId`, beside what its placement draws, until the
+* next overlay replaces them: decorations an application derives from its own state, such as
+* other people's carets, which a placement's `decorate` cannot see. Their positions name the
+* document shown, so an application sets them again when that changes. The caret stays put.
+*/
+const overlay = (hostId, decorations) => ({
+	name: "RichText.overlay",
+	effect: Effect.as(Effect.sync(() => {
+		placeOverlay(hostId, decorations);
+		redecorateEditor(hostId);
+	}), Message.Patched())
+});
+/**
+* The host element the editor mounts into, and whose id the patch Command finds (§118). It is a
+* custom element so hydration leaves what is inside it alone (§145): on the server it holds the
+* document's markup, which the editor adopts; in the browser the view declares it empty, and the
+* editor owns everything below.
+*/
+const editorView = Submodel.defineView((model, h) => {
+	const serverRendered = serverRenderedFor(model.hostId)();
+	const key = serverRendered ? void 0 : hostKey(model.hostId, model.document);
+	return Host.withMessage(h)([
+		h.Id(model.hostId),
+		...key === void 0 ? [] : [h.Key(key)],
+		h.Style({ display: "block" }),
+		h.OnMount(events({ content: model.document }))
+	], serverRendered ? [renderEditable(model.document, renderingFor(model.hostId), decorationsFor(model.hostId)(model.document))] : []);
+});
+/** What a Message does to the editor; `Editor.update` carries the host's key on a commit. */
+const transition = (model, incoming) => {
+	const state = {
+		document: model.document,
+		selection: model.selection
+	};
+	const vocabulary = vocabularyFor(model.hostId);
+	const menu = incoming._tag === "Entered" ? slashMenu(slashEntries, textBeforeOf(model), model.menuIndex) : void 0;
+	const message = menu?.highlighted?.message ?? incoming;
+	return Match.value(message).pipe(Match.withReturnType(), Match.tags({
+		Patched: () => ({ model }),
+		Undone: (undone) => travel(model, state, undone),
+		Redone: (redone) => travel(model, state, redone)
+	}), Match.orElse((message) => {
 		let nextId = model.nextId;
 		const collapsed = model.selection?.type === "Range" && model.selection.anchor.node === model.selection.focus.node && model.selection.anchor.offset === model.selection.focus.offset;
-		if (message._tag === "ToggledMark" && collapsed && !RichText.shippedRegistry.declares(message.mark)) return {
+		if (message._tag === "ToggledMark" && collapsed && !(vocabulary.marks ?? RichText.shippedRegistry).accepts(message.mark)) return {
 			model,
 			outMessage: {
 				_tag: "Rejected",
 				error: "InvalidInput"
 			}
 		};
-		const storedMarks = message._tag === "ToggledMark" && collapsed ? model.storedMarks?.includes(message.mark) ? model.storedMarks.filter((mark) => mark !== message.mark) : [...model.storedMarks ?? [], message.mark] : message._tag === "Selected" ? null : model.storedMarks;
+		const storedMarks = message._tag === "ToggledMark" && collapsed ? model.storedMarks?.includes(message.mark) ? model.storedMarks.filter((mark) => mark !== message.mark) : [...model.storedMarks ?? [], message.mark] : model.storedMarks;
 		const command = message._tag === "Typed" && storedMarks !== null ? {
 			type: "InsertText",
 			text: message.text,
 			marks: storedMarks
 		} : toCommand(message);
-		const result = RichText.run(state, command, { mint: () => `e${nextId++}` });
+		const queryRange = menu === void 0 || menu.highlighted === void 0 || model.selection?.type !== "Range" ? void 0 : RichText.textRangeBefore(model.document, model.selection.anchor, menu.query.length + 1);
+		const runAction = (action) => RichText.runAction(state, action, { mint: () => `e${nextId++}` }, {
+			marks: vocabulary.marks,
+			nodes: vocabulary.nodes
+		});
+		const ruled = queryRange === void 0 && message._tag === "Typed" ? RichText.applyInputRules(inputRulesFor(model.hostId), {
+			textBefore: textBeforeOf(model),
+			text: message.text,
+			insertion: command,
+			within: withinOf(model)
+		}) : void 0;
+		const attempt = runAction(queryRange !== void 0 ? [
+			{
+				type: "SetSelection",
+				selection: queryRange
+			},
+			{ type: "DeleteBackward" },
+			command
+		] : ruled ?? [command]);
+		const fallback = !attempt.ok && ruled !== void 0;
+		if (fallback) nextId = model.nextId;
+		const result = fallback ? runAction([command]) : attempt;
 		if (!result.ok) return {
 			model,
 			outMessage: {
@@ -161,24 +361,75 @@ const Editor = Bundle.make({
 				error: result.error
 			}
 		};
+		if (result.state === state && storedMarks === model.storedMarks) return { model };
 		const contentChanged = result.state.document !== model.document;
 		return {
 			model: {
 				...model,
 				selection: result.state.selection,
 				nextId,
-				storedMarks,
+				storedMarks: message._tag === "Selected" ? null : storedMarks,
 				history: contentChanged ? RichText.commit(model.history, state, { group: RichText.groupFor(command) }) : model.history
 			},
 			outMessage: {
 				_tag: "Edited",
 				state: result.state,
-				changeSet: result.changeSet
+				changeSet: result.changeSet,
+				transactions: result.transactions
 			},
 			commands: [patch(model.hostId, result.state, result.changeSet)]
 		};
+	}));
+};
+/** Undo or redo: history restores content and selection, and the host is told as a replace. */
+const travel = (model, state, message) => {
+	const restored = message._tag === "Undone" ? RichText.undo(model.history, state) : RichText.redo(model.history, state);
+	if (restored === void 0) return {
+		model,
+		outMessage: {
+			_tag: "Rejected",
+			error: message._tag === "Undone" ? "NothingToUndo" : "NothingToRedo"
+		}
+	};
+	const changeSet = replaceChangeSet(model.document, restored.state.document);
+	return {
+		model: {
+			...model,
+			selection: restored.state.selection,
+			history: restored.history
+		},
+		outMessage: {
+			_tag: "Replaced",
+			state: restored.state,
+			changeSet
+		},
+		commands: [patch(model.hostId, restored.state, changeSet)]
+	};
+};
+const Editor = Bundle.make({
+	name: "RichTextEditor",
+	Model: EditorView,
+	Message,
+	args: Schema.Struct({ hostId: Schema.String }),
+	init: (args) => ({ model: {
+		document: RichText.Document.make({
+			version: 1,
+			children: []
+		}),
+		selection: null,
+		nextId: 0,
+		history: RichText.emptyHistory,
+		storedMarks: null,
+		menuIndex: 0,
+		hostId: args.hostId
+	} }),
+	update: (model, incoming) => {
+		const result = transition(model, incoming);
+		const out = result.outMessage;
+		if (out?._tag === "Edited" || out?._tag === "Replaced") carryKey(model.hostId, model.document, out.state.document);
+		return result;
 	},
-	view: Submodel.defineView((model, h) => h.div([h.Id(model.hostId), h.OnMount(events({ content: model.document }))], []))
+	view: editorView
 });
 const GotEditor = Link.wrapper("GotEditorMessage", Message);
 const ParentMessage = defineMessageUnion({ ...GotEditor.cases });
@@ -189,29 +440,39 @@ const editorLink = Link.make({
 		nextId: parent.editor.nextId,
 		history: parent.editor.history,
 		storedMarks: parent.editor.storedMarks,
+		menuIndex: parent.editor.menuIndex,
 		hostId: parent.editor.hostId
 	}),
-	write: (parent, child) => ({
-		...parent,
-		editor: {
-			selection: child.selection,
-			nextId: child.nextId,
-			history: child.history,
-			storedMarks: child.storedMarks,
-			hostId: child.hostId
-		}
-	}),
+	write: (parent, { document: _document, ...editor }) => {
+		const current = parent.editor;
+		return current !== void 0 && Object.keys(editor).every((key) => editor[key] === current[key]) ? parent : {
+			...parent,
+			editor
+		};
+	},
 	wrapper: GotEditor,
 	path: ["editor"]
 });
 /**
-* Places one editor, bound to the host element the view renders and the patch
-* Command finds. Each placement picks its own id. A rendering registry (§121) is
-* placed for that id rather than passed as an arg (§122): it holds functions, so
-* the mount looks it up by host id instead.
+* Records everything a placement names for its host id, replacing what the id had: one call,
+* so a placement cannot half-apply. `editorAt` and the form control both place through it.
+*/
+const placeEditor = (hostId, placement) => {
+	placeRendering(hostId, placement.rendering ?? RichText.noRendering);
+	placeVocabulary(hostId, placement.vocabulary ?? {});
+	placeInputRules(hostId, placement.inputRules ?? []);
+	placeDecorations(hostId, placement.decorate ?? (() => []));
+	placeOverlay(hostId, []);
+	placePlaceholder(hostId, placement.placeholder);
+	placeServerRendered(hostId, placement.serverRendered ?? (() => false));
+};
+/**
+* Places one editor, bound to the host element the view renders and the patch Command
+* finds. Each placement picks its own id and names what it places; one call records all
+* of it, so a placement cannot half-apply.
 */
-const editorAt = (hostId, rendering = RichText.noRendering) => {
-	placeRendering(hostId, rendering);
+const editorAt = (hostId, placement = {}) => {
+	placeEditor(hostId, placement);
 	return Editor.at(editorLink, {
 		args: { hostId },
 		onOut: (out) => (parent) => out._tag === "Edited" || out._tag === "Replaced" ? { model: {
@@ -233,11 +494,21 @@ const edited = (message) => GotEditor.make(message);
 const typed = (text) => edited(Message.Typed({ text }));
 const pressed = (tag) => edited(Message[tag]());
 const toggled = (mark) => edited(Message.ToggledMark({ mark }));
+const applied = (mark) => edited(Message.AppliedMark({ mark }));
+const cleared = (mark) => edited(Message.ClearedMark({ mark }));
+const retyped = (block) => edited(Message.RetypedBlock({ block }));
+const wrapped = (containers) => edited(Message.WrappedBlock({ containers }));
+const converted = (to) => edited(Message.ConvertedBlock({ to }));
+const lifted = () => edited(Message.LiftedBlock());
+const moved = (node, to) => edited(Message.MovedBlock({
+	node,
+	to
+}));
 const selected = (selection) => edited(Message.Selected({ selection }));
 const undone = () => edited(Message.Undone());
 const redone = () => edited(Message.Redone());
 const patched = () => edited(Message.Patched());
 //#endregion
-export { Editor, EditorState, EditorView, Model, ParentMessage, application, edited, editor, editorAt, patched, pressed, redone, replaceChangeSet, selected, toggled, typed, undone, update };
+export { Editor, EditorState, EditorView, Model, ParentMessage, application, applied, cleared, converted, edited, editor, editorAt, editorView, lifted, moved, overlay, patchTo, patched, placeEditor, pressed, redone, replaceChangeSet, retyped, selected, toggled, typed, undone, update, wrapped };
 
 //# sourceMappingURL=editor-bundle.mjs.map