@thomasfosterau/effect-richtext 0.0.0-stage → 0.1.0

package/dist/view/dom.js

@@ -0,0 +1,140 @@
+// src/view/dom.ts
+/** @internal */
+const domIndex = function(node) {
+	for (let index = 0;; index++) {
+		node = node.previousSibling;
+		if (!node) return index;
+	}
+};
+/** @internal */
+const parentNode = function(node) {
+	const parent = node.assignedSlot || node.parentNode;
+	return parent && parent.nodeType == 11 ? parent.host : parent;
+};
+let reusedRange = null;
+/** @internal */
+const textRange = function(node, from, to) {
+	const range = reusedRange || (reusedRange = document.createRange());
+	range.setEnd(node, to == null ? node.nodeValue.length : to);
+	range.setStart(node, from || 0);
+	return range;
+};
+/** @internal */
+const clearReusedRange = function() {
+	reusedRange = null;
+};
+/** @internal */
+const isEquivalentPosition = function(node, off, targetNode, targetOff) {
+	return !!targetNode && (scanFor(node, off, targetNode, targetOff, -1) || scanFor(node, off, targetNode, targetOff, 1));
+};
+const atomElements = /^(img|br|input|textarea|hr)$/i;
+function scanFor(node, off, targetNode, targetOff, dir) {
+	for (;;) {
+		if (node == targetNode && off == targetOff) return true;
+		if (off == (dir < 0 ? 0 : nodeSize(node))) {
+			const parent = node.parentNode;
+			if (!parent || parent.nodeType != 1 || hasBlockDesc(node) || atomElements.test(node.nodeName) || node.contentEditable == "false") return false;
+			off = domIndex(node) + (dir < 0 ? 0 : 1);
+			node = parent;
+		} else if (node.nodeType == 1) {
+			const child = node.childNodes[off + (dir < 0 ? -1 : 0)];
+			if (child.nodeType == 1 && child.contentEditable == "false") {
+				if (child.pmViewDesc?.ignoreForSelection) off += dir;
+				else return false;
+			} else {
+				node = child;
+				off = dir < 0 ? nodeSize(node) : 0;
+			}
+		} else return false;
+	}
+}
+/** @internal */
+function nodeSize(node) {
+	return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
+}
+/** @internal */
+function isElt(node) {
+	return node.nodeType == 1;
+}
+/** @internal */
+function textNodeBefore(node, offset) {
+	for (;;) {
+		if (node.nodeType == 3 && offset) return node;
+		if (node.nodeType == 1 && offset > 0) {
+			if (node.contentEditable == "false") return null;
+			node = node.childNodes[offset - 1];
+			offset = nodeSize(node);
+		} else if (node.parentNode && !hasBlockDesc(node)) {
+			offset = domIndex(node);
+			node = node.parentNode;
+		} else return null;
+	}
+}
+/** @internal */
+function textNodeAfter(node, offset) {
+	for (;;) {
+		if (node.nodeType == 3 && offset < node.nodeValue.length) return node;
+		if (node.nodeType == 1 && offset < node.childNodes.length) {
+			if (node.contentEditable == "false") return null;
+			node = node.childNodes[offset];
+			offset = 0;
+		} else if (node.parentNode && !hasBlockDesc(node)) {
+			offset = domIndex(node) + 1;
+			node = node.parentNode;
+		} else return null;
+	}
+}
+/** @internal */
+function isOnEdge(node, offset, parent) {
+	for (let atStart = offset == 0, atEnd = offset == nodeSize(node); atStart || atEnd;) {
+		if (node == parent) return true;
+		const index = domIndex(node);
+		node = node.parentNode;
+		if (!node) return false;
+		atStart = atStart && index == 0;
+		atEnd = atEnd && index == nodeSize(node);
+	}
+	return false;
+}
+/** @internal */
+function hasBlockDesc(dom) {
+	let desc;
+	for (let cur = dom; cur; cur = cur.parentNode) if (desc = cur.pmViewDesc) break;
+	return !!desc && !!desc.node && desc.node.isBlock && (desc.dom == dom || desc.contentDOM == dom);
+}
+/** @internal */
+const selectionCollapsed = function(domSel) {
+	return !!domSel.focusNode && isEquivalentPosition(domSel.focusNode, domSel.focusOffset, domSel.anchorNode, domSel.anchorOffset);
+};
+/** @internal */
+function keyEvent(keyCode, key) {
+	const event = document.createEvent("Event");
+	event.initEvent("keydown", true, true);
+	event.keyCode = keyCode;
+	event.key = event.code = key;
+	return event;
+}
+/** @internal */
+function deepActiveElement(doc) {
+	let elt = doc.activeElement;
+	while (elt && elt.shadowRoot) elt = elt.shadowRoot.activeElement;
+	return elt;
+}
+/** @internal */
+function caretFromPoint(doc, x, y) {
+	if (doc.caretPositionFromPoint) try {
+		const pos = doc.caretPositionFromPoint(x, y);
+		if (pos) return {
+			node: pos.offsetNode,
+			offset: Math.min(nodeSize(pos.offsetNode), pos.offset)
+		};
+	} catch {}
+	if (doc.caretRangeFromPoint) {
+		const range = doc.caretRangeFromPoint(x, y);
+		if (range) return {
+			node: range.startContainer,
+			offset: Math.min(nodeSize(range.startContainer), range.startOffset)
+		};
+	}
+}
+export { caretFromPoint, clearReusedRange, deepActiveElement, domIndex, hasBlockDesc, isElt, isEquivalentPosition, isOnEdge, keyEvent, nodeSize, parentNode, selectionCollapsed, textNodeAfter, textNodeBefore, textRange };

package/dist/view/domchange.js

@@ -0,0 +1,295 @@
+import { DOMParser } from "../model/from_dom.js";
+import { Fragment } from "../model/fragment.js";
+import { TextSelection } from "../state/selection.js";
+import { android, chrome, ie, ie_version, ios, safari } from "./browser.js";
+import { selectionCollapsed } from "./dom.js";
+import { dispatchKey } from "./input.js";
+import { selectionBetween, selectionFromDOM, selectionToDOM } from "./selection.js";
+import * as Arr from "effect/Array";
+import * as Option from "effect/Option";
+// src/view/domchange.ts
+/**
+* Reading DOM changes back into the document.
+*
+* @internal
+*/
+function parseBetween(view, from_, to_, addedNodes) {
+	const range = view.docView.parseRange(from_, to_);
+	const { from, fromOffset, node: parent, to } = range;
+	let toOffset = range.toOffset;
+	const domSel = view.domSelectionRange();
+	let find;
+	const anchor = domSel.anchorNode;
+	if (anchor && view.dom.contains(anchor.nodeType == 1 ? anchor : anchor.parentNode)) {
+		find = [{
+			node: anchor,
+			offset: domSel.anchorOffset
+		}];
+		if (!selectionCollapsed(domSel)) find.push({
+			node: domSel.focusNode,
+			offset: domSel.focusOffset
+		});
+	}
+	if (chrome && view.input.lastKeyCode === 8) for (let off = toOffset; off > fromOffset; off--) {
+		const node = parent.childNodes[off - 1], desc = node.pmViewDesc;
+		if (node.nodeName == "BR" && !desc) {
+			toOffset = off;
+			break;
+		}
+		if (!desc || desc.size) break;
+	}
+	const startDoc = view.state.doc;
+	const parser = view.someProp("domParser") || DOMParser.fromSchema(view.state.schema);
+	const $from = startDoc.resolveUnsafe(from);
+	let sel = null;
+	const doc = parser.parseUnsafe(parent, {
+		topNode: $from.parent,
+		topMatch: $from.parent.contentMatchAtUnsafe($from.index()),
+		topOpen: true,
+		from: fromOffset,
+		to: toOffset,
+		preserveWhitespace: $from.parent.type.whitespace == "pre" ? "full" : true,
+		findPositions: find,
+		ruleFromNode: ruleFromNode(addedNodes),
+		context: $from
+	});
+	if (find && find[0].pos != null) {
+		const anchor = find[0].pos;
+		let head = find[1] && find[1].pos;
+		if (head == null) head = anchor;
+		sel = {
+			anchor: anchor + from,
+			head: head + from
+		};
+	}
+	return {
+		doc,
+		sel,
+		from,
+		to
+	};
+}
+const ruleFromNode = (added) => (dom) => {
+	const desc = dom.pmViewDesc;
+	if (desc) return desc.parseRule(added);
+	else if (dom.nodeName == "BR" && dom.parentNode) {
+		if (safari && /^(ul|ol)$/i.test(dom.parentNode.nodeName)) {
+			const skip = document.createElement("div");
+			skip.appendChild(document.createElement("li"));
+			return { skip };
+		} else if (dom.parentNode.lastChild == dom || safari && /^(tr|table)$/i.test(dom.parentNode.nodeName)) return { ignore: true };
+	} else if (dom.nodeName == "IMG" && dom.getAttribute("mark-placeholder")) return { ignore: true };
+	return null;
+};
+const isInline = /^(a|abbr|acronym|b|bd[io]|big|br|button|cite|code|data(list)?|del|dfn|em|i|img|ins|kbd|label|map|mark|meter|output|q|ruby|s|samp|small|span|strong|su[bp]|time|u|tt|var)$/i;
+/** @internal */
+function readDOMChange(view, from, to, typeOver, addedNodes) {
+	const now = Date.now();
+	const compositionID = view.input.compositionPendingChanges || (view.composing ? view.input.compositionID : 0);
+	view.input.compositionPendingChanges = 0;
+	if (from < 0) {
+		const origin = view.input.lastSelectionTime > now - 50 ? view.input.lastSelectionOrigin : null;
+		const newSel = selectionFromDOM(view, origin);
+		if (newSel && !view.state.selection.eq(newSel)) {
+			if (chrome && android && view.input.lastKeyCode === 13 && now - 100 < view.input.lastKeyCodeTime && dispatchKey(view, "Enter")) return;
+			const tr = view.state.tr.setSelectionUnsafe(newSel);
+			if (origin == "pointer") tr.setMeta("pointer", true);
+			else if (origin == "key") tr.scrollIntoView();
+			if (compositionID) tr.setMeta("composition", compositionID);
+			view.dispatchInternal(tr);
+		}
+		return;
+	}
+	const $before = view.state.doc.resolveUnsafe(from);
+	const shared = $before.sharedDepth(to);
+	from = $before.beforeUnsafe(shared + 1);
+	to = view.state.doc.resolveUnsafe(to).afterUnsafe(shared + 1);
+	const sel = view.state.selection;
+	const parse = parseBetween(view, from, to, addedNodes);
+	const doc = view.state.doc, compare = doc.sliceUnsafe(parse.from, parse.to);
+	let preferredPos, preferredSide;
+	if (view.input.lastKeyCode === 8 && now - 100 < view.input.lastKeyCodeTime) {
+		preferredPos = view.state.selection.to;
+		preferredSide = "end";
+	} else {
+		preferredPos = view.state.selection.from;
+		preferredSide = "start";
+	}
+	view.input.lastKeyCode = null;
+	let change = findDiff(compare.content, parse.doc.content, parse.from, preferredPos, preferredSide);
+	if (change) view.input.domChangeCount++;
+	if ((ios && view.input.lastIOSEnter > now - 225 || android) && addedNodes.some((n) => n.nodeType == 1 && !isInline.test(n.nodeName)) && (!change || change.endA >= change.endB) && dispatchKey(view, "Enter")) {
+		view.input.lastIOSEnter = 0;
+		return;
+	}
+	if (!change) {
+		if (typeOver && sel instanceof TextSelection && !sel.empty && sel.$head.sameParent(sel.$anchor) && !view.composing && !(parse.sel && parse.sel.anchor != parse.sel.head)) change = {
+			start: sel.from,
+			endA: sel.to,
+			endB: sel.to
+		};
+		else {
+			if (parse.sel) {
+				const sel = resolveSelection(view, view.state.doc, parse.sel);
+				if (sel && !sel.eq(view.state.selection)) {
+					const tr = view.state.tr.setSelectionUnsafe(sel);
+					if (compositionID) tr.setMeta("composition", compositionID);
+					view.dispatchInternal(tr);
+				}
+			}
+			return;
+		}
+	}
+	if (view.state.selection.from < view.state.selection.to && change.start == change.endB && view.state.selection instanceof TextSelection) {
+		if (change.start > view.state.selection.from && change.start <= view.state.selection.from + 2 && view.state.selection.from >= parse.from) change.start = view.state.selection.from;
+		else if (change.endA < view.state.selection.to && change.endA >= view.state.selection.to - 2 && view.state.selection.to <= parse.to) {
+			change.endB += view.state.selection.to - change.endA;
+			change.endA = view.state.selection.to;
+		}
+	}
+	if (ie && ie_version <= 11 && change.endB == change.start + 1 && change.endA == change.start && change.start > parse.from && parse.doc.textBetween(change.start - parse.from - 1, change.start - parse.from + 1) == " \xA0") {
+		change.start--;
+		change.endA--;
+		change.endB--;
+	}
+	const $from = parse.doc.resolveNoCache(change.start - parse.from);
+	let $to = parse.doc.resolveNoCache(change.endB - parse.from);
+	const $fromA = doc.resolveUnsafe(change.start);
+	const inlineChange = $from.sameParent($to) && $from.parent.inlineContent && $fromA.end() >= change.endA;
+	if ((ios && view.input.lastIOSEnter > now - 225 && (!inlineChange || addedNodes.some((n) => n.nodeName == "DIV" || n.nodeName == "P")) || !inlineChange && looksLikeEnter(parse.doc, $from.pos, $to.pos)) && dispatchKey(view, "Enter")) {
+		view.input.lastIOSEnter = 0;
+		return;
+	}
+	if (view.state.selection.anchor > change.start && (inlineChange ? change.endA > change.start && change.endB == change.start : looksLikeBlockJoin(doc, change.start, change.endA, $from, $to)) && dispatchKey(view, "Backspace")) {
+		if (android && chrome) view.domObserver.suppressSelectionUpdates();
+		return;
+	}
+	if (chrome && change.endB == change.start) view.input.lastChromeDelete = now;
+	if (android && !inlineChange && $from.start() != $to.start() && $to.parentOffset == 0 && $from.depth == $to.depth && parse.sel && parse.sel.anchor == parse.sel.head && parse.sel.head == change.endA) {
+		change.endB -= 2;
+		$to = parse.doc.resolveNoCache(change.endB - parse.from);
+		setTimeout(() => dispatchKey(view, "Enter"), 20);
+	}
+	const chFrom = change.start, chTo = change.endA;
+	const mkTr = (base) => {
+		const tr = base || view.state.tr.replaceUnsafe(chFrom, chTo, parse.doc.sliceUnsafe(change.start - parse.from, change.endB - parse.from));
+		if (parse.sel) {
+			const sel = resolveSelection(view, tr.doc, parse.sel);
+			if (sel && !(chrome && view.composing && sel.empty && (change.start != change.endB || view.input.lastChromeDelete < now - 100) && (sel.head == chFrom || sel.head == tr.mapping.map(chTo) - 1) || ie && sel.empty && sel.head == chFrom)) tr.setSelectionUnsafe(sel);
+		}
+		if (compositionID) tr.setMeta("composition", compositionID);
+		return tr.scrollIntoView();
+	};
+	let markChange;
+	if (inlineChange) {
+		if ($from.pos == $to.pos) {
+			if (ie && ie_version <= 11 && $from.parentOffset == 0) {
+				view.domObserver.suppressSelectionUpdates();
+				setTimeout(() => selectionToDOM(view), 20);
+			}
+			const tr = mkTr(view.state.tr.deleteUnsafe(chFrom, chTo));
+			const marks = doc.resolveUnsafe(change.start).marksAcrossOrNull(doc.resolveUnsafe(change.endA));
+			if (marks) tr.ensureMarks(marks);
+			view.dispatchInternal(tr);
+		} else if (change.endA == change.endB && (markChange = isMarkChange($from.parent.content.cut($from.parentOffset, $to.parentOffset), $fromA.parent.content.cut($fromA.parentOffset, change.endA - $fromA.start())))) {
+			const tr = mkTr(view.state.tr);
+			if (markChange.type == "add") tr.addMark(chFrom, chTo, markChange.mark);
+			else tr.removeMark(chFrom, chTo, markChange.mark);
+			view.dispatchInternal(tr);
+		} else if ($from.parent.content.content[$from.index()].isText && $from.index() == $to.index() - ($to.textOffset ? 0 : 1)) {
+			const text = $from.parent.textBetween($from.parentOffset, $to.parentOffset);
+			const deflt = () => mkTr(view.state.tr.insertTextUnsafe(text, chFrom, chTo));
+			if (!view.someHandler("handleTextInput", (f) => f(view, chFrom, chTo, text, deflt))) view.dispatchInternal(deflt());
+		} else view.dispatchInternal(mkTr());
+	} else view.dispatchInternal(mkTr());
+}
+function resolveSelection(view, doc, parsedSel) {
+	if (Math.max(parsedSel.anchor, parsedSel.head) > doc.content.size) return null;
+	return selectionBetween(view, doc.resolveUnsafe(parsedSel.anchor), doc.resolveUnsafe(parsedSel.head));
+}
+function isMarkChange(cur, prev) {
+	const curMarks = cur.content[0].marks, prevMarks = prev.content[0].marks;
+	let added = curMarks, removed = prevMarks, type, mark, update;
+	for (let i = 0; i < prevMarks.length; i++) added = prevMarks[i].removeFromSet(added);
+	for (let i = 0; i < curMarks.length; i++) removed = curMarks[i].removeFromSet(removed);
+	if (added.length == 1 && Arr.isReadonlyArrayEmpty(removed)) {
+		mark = added[0];
+		type = "add";
+		update = (node) => node.mark(mark.addToSet(node.marks));
+	} else if (Arr.isReadonlyArrayEmpty(added) && removed.length == 1) {
+		mark = removed[0];
+		type = "remove";
+		update = (node) => node.mark(mark.removeFromSet(node.marks));
+	} else return null;
+	const updated = [];
+	for (let i = 0; i < prev.childCount; i++) updated.push(update(prev.content[i]));
+	if (Fragment.from(updated).eq(cur)) return {
+		mark,
+		type
+	};
+}
+function looksLikeBlockJoin(old, start, end, $newStart, $newEnd) {
+	if (end - start <= $newEnd.pos - $newStart.pos || skipClosingAndOpening($newStart, true, false) < $newEnd.pos) return false;
+	const $start = old.resolveUnsafe(start);
+	if (!$newStart.parent.inlineContent) {
+		const after = $start.nodeAfterOrNull;
+		return after != null && end == start + after.nodeSize;
+	}
+	if ($start.parentOffset < $start.parent.content.size || !$start.parent.isTextblock) return false;
+	const $next = old.resolveUnsafe(skipClosingAndOpening($start, true, true));
+	if (!$next.parent.isTextblock || $next.pos > end || skipClosingAndOpening($next, true, false) < end) return false;
+	return $newStart.parent.content.cut($newStart.parentOffset).eq($next.parent.content);
+}
+function looksLikeEnter(content, from, to) {
+	let newTextlines = 0, newLeaves = 0;
+	content.nodesBetween(from, to, (node, pos) => {
+		if (node.isTextblock && pos >= from && pos < to) newTextlines++;
+		else if (node.isText ? /\S/.test(node.textContent.slice(Math.max(0, from - pos), Math.min(node.nodeSize, to - pos))) : node.isLeaf) newLeaves++;
+	});
+	return newLeaves == 0 && newTextlines == 1;
+}
+function skipClosingAndOpening($pos, fromEnd, mayOpen) {
+	let depth = $pos.depth, end = fromEnd ? $pos.end() : $pos.pos;
+	while (depth > 0 && (fromEnd || $pos.indexAfter(depth) == $pos.node(depth).childCount)) {
+		depth--;
+		end++;
+		fromEnd = false;
+	}
+	if (mayOpen) {
+		let next = $pos.node(depth).content.content[$pos.indexAfter(depth)];
+		while (next && !next.isLeaf) {
+			next = next.content.content[0];
+			end++;
+		}
+	}
+	return end;
+}
+function findDiff(a, b, pos, preferredPos, preferredSide) {
+	let start = Option.getOrNull(a.findDiffStart(b, pos));
+	const lenA = pos + a.size, lenB = pos + b.size;
+	if (start == null) return null;
+	const diffEnd = Option.getOrNull(a.findDiffEnd(b, lenA, lenB));
+	if (diffEnd == null) return null;
+	let { a: endA, b: endB } = diffEnd;
+	if (preferredSide == "end") {
+		const adjust = Math.max(0, start - Math.min(endA, endB));
+		preferredPos -= endA + adjust - start;
+	}
+	if (endA < start && lenA < lenB) {
+		const move = preferredPos <= start && preferredPos >= endA ? start - preferredPos : 0;
+		start -= move;
+		endB = start + (endB - endA);
+		endA = start;
+	} else if (endB < start) {
+		const move = preferredPos <= start && preferredPos >= endB ? start - preferredPos : 0;
+		start -= move;
+		endA = start + (endA - endB);
+		endB = start;
+	}
+	return {
+		start,
+		endA,
+		endB
+	};
+}
+export { readDOMChange };

package/dist/view/domcoords.d.ts

@@ -0,0 +1,22 @@
+import "../state.js";
+import "./dom.js";
+import "./view.js";
+/**
+ * A rectangle in viewport coordinates.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export type Rect = {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+};
+/**
+ * A direction for `EditorView.endOfTextblock`.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export type TextblockDir = "up" | "down" | "left" | "right" | "forward" | "backward";