@thomasfosterau/effect-richtext 0.0.0 → 0.1.0

package/dist/view/domcoords.js

@@ -0,0 +1,448 @@
+import { gecko, safari, webkit } from "./browser.js";
+import { caretFromPoint, nodeSize, parentNode, textRange } from "./dom.js";
+// src/view/domcoords.ts
+function windowRect(doc) {
+	const vp = doc.defaultView && doc.defaultView.visualViewport;
+	if (vp) return {
+		left: 0,
+		right: vp.width,
+		top: 0,
+		bottom: vp.height
+	};
+	return {
+		left: 0,
+		right: doc.documentElement.clientWidth,
+		top: 0,
+		bottom: doc.documentElement.clientHeight
+	};
+}
+function getSide(value, side) {
+	return typeof value == "number" ? value : value[side];
+}
+function clientRect(node) {
+	const rect = node.getBoundingClientRect();
+	const scaleX = rect.width / node.offsetWidth || 1;
+	const scaleY = rect.height / node.offsetHeight || 1;
+	return {
+		left: rect.left,
+		right: rect.left + node.clientWidth * scaleX,
+		top: rect.top,
+		bottom: rect.top + node.clientHeight * scaleY
+	};
+}
+/** @internal */
+function scrollRectIntoView(view, rect, startDOM) {
+	if (!nonZero(rect) && rect.left == 0) return;
+	const scrollThreshold = view.someProp("scrollThreshold") || 0, scrollMargin = view.someProp("scrollMargin") || 5;
+	const doc = view.dom.ownerDocument;
+	for (let parent = startDOM || view.dom;;) {
+		if (!parent) break;
+		if (parent.nodeType != 1) {
+			parent = parentNode(parent);
+			continue;
+		}
+		const elt = parent;
+		const atTop = elt == doc.body;
+		const bounding = atTop ? windowRect(doc) : clientRect(elt);
+		let moveX = 0, moveY = 0;
+		if (rect.top < bounding.top + getSide(scrollThreshold, "top")) moveY = -(bounding.top - rect.top + getSide(scrollMargin, "top"));
+		else if (rect.bottom > bounding.bottom - getSide(scrollThreshold, "bottom")) moveY = rect.bottom - rect.top > bounding.bottom - bounding.top ? rect.top + getSide(scrollMargin, "top") - bounding.top : rect.bottom - bounding.bottom + getSide(scrollMargin, "bottom");
+		if (rect.left < bounding.left + getSide(scrollThreshold, "left")) moveX = -(bounding.left - rect.left + getSide(scrollMargin, "left"));
+		else if (rect.right > bounding.right - getSide(scrollThreshold, "right")) moveX = rect.right - bounding.right + getSide(scrollMargin, "right");
+		if (moveX || moveY) {
+			if (atTop) doc.defaultView.scrollBy(moveX, moveY);
+			else {
+				const startX = elt.scrollLeft, startY = elt.scrollTop;
+				if (moveY) elt.scrollTop += moveY;
+				if (moveX) elt.scrollLeft += moveX;
+				const dX = elt.scrollLeft - startX, dY = elt.scrollTop - startY;
+				rect = {
+					left: rect.left - dX,
+					top: rect.top - dY,
+					right: rect.right - dX,
+					bottom: rect.bottom - dY
+				};
+			}
+		}
+		const pos = atTop ? "fixed" : getComputedStyle(parent).position;
+		if (/^(fixed|sticky)$/.test(pos)) break;
+		parent = pos == "absolute" ? parent.offsetParent : parentNode(parent);
+	}
+}
+/** @internal */
+function storeScrollPos(view) {
+	const rect = view.dom.getBoundingClientRect(), startY = Math.max(0, rect.top);
+	let refDOM, refTop;
+	for (let x = (rect.left + rect.right) / 2, y = startY + 1; y < Math.min(innerHeight, rect.bottom); y += 5) {
+		const dom = view.root.elementFromPoint(x, y);
+		if (!dom || dom == view.dom || !view.dom.contains(dom)) continue;
+		const localRect = dom.getBoundingClientRect();
+		if (localRect.top >= startY - 20) {
+			refDOM = dom;
+			refTop = localRect.top;
+			break;
+		}
+	}
+	return {
+		refDOM,
+		refTop,
+		stack: scrollStack(view.dom)
+	};
+}
+function scrollStack(dom) {
+	const stack = [], doc = dom.ownerDocument;
+	for (let cur = dom; cur; cur = parentNode(cur)) {
+		stack.push({
+			dom: cur,
+			top: cur.scrollTop,
+			left: cur.scrollLeft
+		});
+		if (dom == doc) break;
+	}
+	return stack;
+}
+/** @internal */
+function resetScrollPos({ refDOM, refTop, stack }) {
+	const newRefTop = refDOM ? refDOM.getBoundingClientRect().top : 0;
+	restoreScrollStack(stack, newRefTop == 0 ? 0 : newRefTop - refTop);
+}
+function restoreScrollStack(stack, dTop) {
+	for (let i = 0; i < stack.length; i++) {
+		const { dom, left, top } = stack[i];
+		if (dom.scrollTop != top + dTop) dom.scrollTop = top + dTop;
+		if (dom.scrollLeft != left) dom.scrollLeft = left;
+	}
+}
+let preventScrollSupported = null;
+/** @internal */
+function focusPreventScroll(dom) {
+	if (dom.setActive) return dom.setActive();
+	if (preventScrollSupported) return dom.focus(preventScrollSupported);
+	const stored = scrollStack(dom);
+	dom.focus(preventScrollSupported == null ? { get preventScroll() {
+		preventScrollSupported = { preventScroll: true };
+		return true;
+	} } : void 0);
+	if (!preventScrollSupported) {
+		preventScrollSupported = false;
+		restoreScrollStack(stored, 0);
+	}
+}
+function findOffsetInNode(node, coords) {
+	let closest, dxClosest = 2e8, coordsClosest;
+	let offset = 0;
+	let rowBot = coords.top, rowTop = coords.top;
+	let firstBelow, coordsBelow;
+	for (let child = node.firstChild, childIndex = 0; child; child = child.nextSibling, childIndex++) {
+		let rects;
+		if (child.nodeType == 1) rects = child.getClientRects();
+		else if (child.nodeType == 3) rects = textRange(child).getClientRects();
+		else continue;
+		for (let i = 0; i < rects.length; i++) {
+			const rect = rects[i];
+			if (rect.top <= rowBot && rect.bottom >= rowTop) {
+				rowBot = Math.max(rect.bottom, rowBot);
+				rowTop = Math.min(rect.top, rowTop);
+				const dx = rect.left > coords.left ? rect.left - coords.left : rect.right < coords.left ? coords.left - rect.right : 0;
+				if (dx < dxClosest) {
+					closest = child;
+					dxClosest = dx;
+					coordsClosest = dx && closest.nodeType == 3 ? {
+						left: rect.right < coords.left ? rect.right : rect.left,
+						top: coords.top
+					} : coords;
+					if (child.nodeType == 1 && dx) offset = childIndex + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0);
+					continue;
+				}
+			} else if (rect.top > coords.top && !firstBelow && rect.left <= coords.left && rect.right >= coords.left) {
+				firstBelow = child;
+				coordsBelow = {
+					left: Math.max(rect.left, Math.min(rect.right, coords.left)),
+					top: rect.top
+				};
+			}
+			if (!closest && (coords.left >= rect.right && coords.top >= rect.top || coords.left >= rect.left && coords.top >= rect.bottom)) offset = childIndex + 1;
+		}
+	}
+	if (!closest && firstBelow) {
+		closest = firstBelow;
+		coordsClosest = coordsBelow;
+		dxClosest = 0;
+	}
+	if (closest && closest.nodeType == 3) return findOffsetInText(closest, coordsClosest);
+	if (!closest || dxClosest && closest.nodeType == 1) return {
+		node,
+		offset
+	};
+	return findOffsetInNode(closest, coordsClosest);
+}
+function findOffsetInText(node, coords) {
+	const len = node.nodeValue.length;
+	const range = document.createRange();
+	let result;
+	for (let i = 0; i < len; i++) {
+		range.setEnd(node, i + 1);
+		range.setStart(node, i);
+		const rect = singleRect(range, 1);
+		if (rect.top == rect.bottom) continue;
+		if (inRect(coords, rect)) {
+			result = {
+				node,
+				offset: i + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0)
+			};
+			break;
+		}
+	}
+	range.detach();
+	return result || {
+		node,
+		offset: 0
+	};
+}
+function inRect(coords, rect) {
+	return coords.left >= rect.left - 1 && coords.left <= rect.right + 1 && coords.top >= rect.top - 1 && coords.top <= rect.bottom + 1;
+}
+function targetKludge(dom, coords) {
+	const parent = dom.parentNode;
+	if (parent && /^li$/i.test(parent.nodeName) && coords.left < dom.getBoundingClientRect().left) return parent;
+	return dom;
+}
+function posFromElement(view, elt, coords) {
+	const { node, offset } = findOffsetInNode(elt, coords);
+	let bias = -1;
+	if (node.nodeType == 1 && !node.firstChild) {
+		const rect = node.getBoundingClientRect();
+		bias = rect.left != rect.right && coords.left > (rect.left + rect.right) / 2 ? 1 : -1;
+	}
+	return view.docView.posFromDOM(node, offset, bias);
+}
+function posFromCaret(view, node, offset, coords) {
+	let outsideBlock = -1;
+	for (let cur = node, sawBlock = false;;) {
+		if (cur == view.dom) break;
+		const desc = view.docView.nearestDesc(cur, true);
+		let rect;
+		if (!desc) return null;
+		if (desc.dom.nodeType == 1 && (desc.node.isBlock && desc.parent || !desc.contentDOM) && ((rect = desc.dom.getBoundingClientRect()).width || rect.height)) {
+			if (desc.node.isBlock && desc.parent && !/^T(R|BODY|HEAD|FOOT)$/.test(desc.dom.nodeName)) {
+				if (!sawBlock && rect.left > coords.left || rect.top > coords.top) outsideBlock = desc.posBefore;
+				else if (!sawBlock && rect.right < coords.left || rect.bottom < coords.top) outsideBlock = desc.posAfter;
+				sawBlock = true;
+			}
+			if (!desc.contentDOM && outsideBlock < 0 && !desc.node.isText) return (desc.node.isBlock ? coords.top < (rect.top + rect.bottom) / 2 : coords.left < (rect.left + rect.right) / 2) ? desc.posBefore : desc.posAfter;
+		}
+		cur = desc.dom.parentNode;
+	}
+	return outsideBlock > -1 ? outsideBlock : view.docView.posFromDOM(node, offset, -1);
+}
+function elementFromPoint(element, coords, box) {
+	const len = element.childNodes.length;
+	if (len && box.top < box.bottom) for (let startI = Math.max(0, Math.min(len - 1, Math.floor(len * (coords.top - box.top) / (box.bottom - box.top)) - 2)), i = startI;;) {
+		const child = element.childNodes[i];
+		if (child.nodeType == 1) {
+			const rects = child.getClientRects();
+			for (let j = 0; j < rects.length; j++) {
+				const rect = rects[j];
+				if (inRect(coords, rect)) return elementFromPoint(child, coords, rect);
+			}
+		}
+		if ((i = (i + 1) % len) == startI) break;
+	}
+	return element;
+}
+/** @internal */
+function posAtCoords(view, coords) {
+	const doc = view.dom.ownerDocument;
+	let node, offset = 0;
+	const caret = caretFromPoint(doc, coords.left, coords.top);
+	if (caret) ({node, offset} = caret);
+	let elt = (view.root.elementFromPoint ? view.root : doc).elementFromPoint(coords.left, coords.top);
+	let pos;
+	if (!elt || !view.dom.contains(elt.nodeType != 1 ? elt.parentNode : elt)) {
+		const box = view.dom.getBoundingClientRect();
+		if (!inRect(coords, box)) return null;
+		elt = elementFromPoint(view.dom, coords, box);
+		if (!elt) return null;
+	}
+	if (safari) {
+		for (let p = elt; node && p; p = parentNode(p)) if (p.draggable) node = void 0;
+	}
+	elt = targetKludge(elt, coords);
+	if (node) {
+		if (gecko && node.nodeType == 1) {
+			offset = Math.min(offset, node.childNodes.length);
+			if (offset < node.childNodes.length) {
+				const next = node.childNodes[offset];
+				let box;
+				if (next.nodeName == "IMG" && (box = next.getBoundingClientRect()).right <= coords.left && box.bottom > coords.top) offset++;
+			}
+		}
+		let prev;
+		if (webkit && offset && node.nodeType == 1 && (prev = node.childNodes[offset - 1]).nodeType == 1 && prev.contentEditable == "false" && prev.getBoundingClientRect().top >= coords.top) offset--;
+		if (node == view.dom && offset == node.childNodes.length - 1 && node.lastChild.nodeType == 1 && coords.top > node.lastChild.getBoundingClientRect().bottom) pos = view.state.doc.content.size;
+		else if (offset == 0 || node.nodeType != 1 || node.childNodes[offset - 1].nodeName != "BR") pos = posFromCaret(view, node, offset, coords);
+	}
+	if (pos == null) pos = posFromElement(view, elt, coords);
+	const desc = view.docView.nearestDesc(elt, true);
+	return {
+		pos,
+		inside: desc ? desc.posAtStart - desc.border : -1
+	};
+}
+function nonZero(rect) {
+	return rect.top < rect.bottom || rect.left < rect.right;
+}
+function singleRect(target, bias) {
+	const rects = target.getClientRects();
+	if (rects.length) {
+		const first = rects[bias < 0 ? 0 : rects.length - 1];
+		if (nonZero(first)) return first;
+	}
+	return Array.prototype.find.call(rects, nonZero) || target.getBoundingClientRect();
+}
+const BIDI = /[֐-״؀-ۿ܀-ࢬ]/;
+/** @internal */
+function coordsAtPos(view, pos, side) {
+	const { atom, node, offset } = view.docView.domFromPos(pos, side < 0 ? -1 : 1);
+	const supportEmptyRange = webkit || gecko;
+	if (node.nodeType == 3) {
+		if (supportEmptyRange && (BIDI.test(node.nodeValue) || (side < 0 ? !offset : offset == node.nodeValue.length))) {
+			const rect = singleRect(textRange(node, offset, offset), side);
+			if (gecko && offset && /\s/.test(node.nodeValue[offset - 1]) && offset < node.nodeValue.length) {
+				const rectBefore = singleRect(textRange(node, offset - 1, offset - 1), -1);
+				if (rectBefore.top == rect.top) {
+					const rectAfter = singleRect(textRange(node, offset, offset + 1), -1);
+					if (rectAfter.top != rect.top) return flattenV(rectAfter, rectAfter.left < rectBefore.left);
+				}
+			}
+			return rect;
+		} else {
+			let from = offset, to = offset, takeSide = side < 0 ? 1 : -1;
+			if (side < 0 && !offset) {
+				to++;
+				takeSide = -1;
+			} else if (side >= 0 && offset == node.nodeValue.length) {
+				from--;
+				takeSide = 1;
+			} else if (side < 0) from--;
+			else to++;
+			return flattenV(singleRect(textRange(node, from, to), takeSide), takeSide < 0);
+		}
+	}
+	if (!view.state.doc.resolveUnsafe(pos - (atom || 0)).parent.inlineContent) {
+		if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
+			const before = node.childNodes[offset - 1];
+			if (before.nodeType == 1) return flattenH(before.getBoundingClientRect(), false);
+		}
+		if (atom == null && offset < nodeSize(node)) {
+			const after = node.childNodes[offset];
+			if (after.nodeType == 1) return flattenH(after.getBoundingClientRect(), true);
+		}
+		return flattenH(node.getBoundingClientRect(), side >= 0);
+	}
+	if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
+		const before = node.childNodes[offset - 1];
+		const target = before.nodeType == 3 ? textRange(before, nodeSize(before) - (supportEmptyRange ? 0 : 1)) : before.nodeType == 1 && (before.nodeName != "BR" || !before.nextSibling) ? before : null;
+		if (target) return flattenV(singleRect(target, 1), false);
+	}
+	if (atom == null && offset < nodeSize(node)) {
+		let after = node.childNodes[offset];
+		while (after.pmViewDesc && after.pmViewDesc.ignoreForCoords) after = after.nextSibling;
+		const target = !after ? null : after.nodeType == 3 ? textRange(after, 0, supportEmptyRange ? 0 : 1) : after.nodeType == 1 ? after : null;
+		if (target) return flattenV(singleRect(target, -1), true);
+	}
+	return flattenV(singleRect(node.nodeType == 3 ? textRange(node) : node, -side), side >= 0);
+}
+function flattenV(rect, left) {
+	if (rect.width == 0) return rect;
+	const x = left ? rect.left : rect.right;
+	return {
+		top: rect.top,
+		bottom: rect.bottom,
+		left: x,
+		right: x
+	};
+}
+function flattenH(rect, top) {
+	if (rect.height == 0) return rect;
+	const y = top ? rect.top : rect.bottom;
+	return {
+		top: y,
+		bottom: y,
+		left: rect.left,
+		right: rect.right
+	};
+}
+function withFlushedState(view, state, f) {
+	const viewState = view.state, active = view.root.activeElement;
+	if (viewState != state) view.updateState(state);
+	if (active != view.dom) view.focus();
+	try {
+		return f();
+	} finally {
+		if (viewState != state) view.updateState(viewState);
+		if (active != view.dom && active) active.focus();
+	}
+}
+function endOfTextblockVertical(view, state, dir) {
+	const sel = state.selection;
+	const $pos = dir == "up" ? sel.$from : sel.$to;
+	return withFlushedState(view, state, () => {
+		let { node: dom } = view.docView.domFromPos($pos.pos, dir == "up" ? -1 : 1);
+		for (;;) {
+			const nearest = view.docView.nearestDesc(dom, true);
+			if (!nearest) break;
+			if (nearest.node.isBlock) {
+				dom = nearest.contentDOM || nearest.dom;
+				break;
+			}
+			dom = nearest.dom.parentNode;
+		}
+		const coords = coordsAtPos(view, $pos.pos, 1);
+		for (let child = dom.firstChild; child; child = child.nextSibling) {
+			let boxes;
+			if (child.nodeType == 1) boxes = child.getClientRects();
+			else if (child.nodeType == 3) boxes = textRange(child, 0, child.nodeValue.length).getClientRects();
+			else continue;
+			for (let i = 0; i < boxes.length; i++) {
+				const box = boxes[i];
+				if (box.bottom > box.top + 1 && (dir == "up" ? coords.top - box.top > (box.bottom - coords.top) * 2 : box.bottom - coords.bottom > (coords.bottom - box.top) * 2)) return false;
+			}
+		}
+		return true;
+	});
+}
+const maybeRTL = /[֐-ࢬ]/;
+function endOfTextblockHorizontal(view, state, dir) {
+	const { $head } = state.selection;
+	if (!$head.parent.isTextblock) return false;
+	const offset = $head.parentOffset, atStart = !offset, atEnd = offset == $head.parent.content.size;
+	const sel = view.domSelection();
+	if (!sel) return $head.pos == $head.start() || $head.pos == $head.end();
+	if (!maybeRTL.test($head.parent.textContent) || !sel.modify) return dir == "left" || dir == "backward" ? atStart : atEnd;
+	return withFlushedState(view, state, () => {
+		const { anchorNode, anchorOffset, focusNode: oldNode, focusOffset: oldOff } = view.domSelectionRange();
+		const oldBidiLevel = sel.caretBidiLevel;
+		sel.modify("move", dir, "character");
+		const parentDOM = $head.depth ? view.docView.domAfterPos($head.beforeUnsafe()) : view.dom;
+		const { focusNode: newNode, focusOffset: newOff } = view.domSelectionRange();
+		const result = newNode && !parentDOM.contains(newNode.nodeType == 1 ? newNode : newNode.parentNode) || oldNode == newNode && oldOff == newOff;
+		try {
+			sel.collapse(anchorNode, anchorOffset);
+			if (oldNode && (oldNode != anchorNode || oldOff != anchorOffset) && sel.extend) sel.extend(oldNode, oldOff);
+		} catch {}
+		if (oldBidiLevel != null) sel.caretBidiLevel = oldBidiLevel;
+		return result;
+	});
+}
+let cachedState = null;
+let cachedDir = null;
+let cachedResult = false;
+/** @internal */
+function endOfTextblock(view, state, dir) {
+	if (cachedState == state && cachedDir == dir) return cachedResult;
+	cachedState = state;
+	cachedDir = dir;
+	return cachedResult = dir == "up" || dir == "down" ? endOfTextblockVertical(view, state, dir) : endOfTextblockHorizontal(view, state, dir);
+}
+export { coordsAtPos, endOfTextblock, focusPreventScroll, posAtCoords, resetScrollPos, scrollRectIntoView, storeScrollPos };

package/dist/view/domobserver.d.ts

@@ -0,0 +1,47 @@
+import { DOMNode, DOMSelectionRange } from "./dom.js";
+import { EditorView } from "./view.js";
+type AnyView = EditorView<any, any, any>;
+declare class SelectionState {
+  anchorNode: DOMNode | null;
+  anchorOffset: number;
+  focusNode: DOMNode | null;
+  focusOffset: number;
+  set(sel: DOMSelectionRange): void;
+  clear(): void;
+  eq(sel: DOMSelectionRange): boolean;
+}
+/** @internal */
+export declare class DOMObserver {
+  readonly view: AnyView;
+  readonly handleDOMChange: (from: number, to: number, typeOver: boolean, added: Array<DOMNode>) => void;
+  queue: Array<MutationRecord>;
+  flushingSoon: number;
+  observer: MutationObserver | null;
+  currentSelection: SelectionState;
+  onCharData: ((e: Event) => void) | null;
+  suppressingSelectionUpdates: boolean;
+  lastChangedTextNode: Text | null;
+  constructor(view: AnyView, handleDOMChange: (from: number, to: number, typeOver: boolean, added: Array<DOMNode>) => void);
+  flushSoon(): void;
+  forceFlush(): void;
+  start(): void;
+  stop(): void;
+  connectSelection(): void;
+  disconnectSelection(): void;
+  suppressSelectionUpdates(): void;
+  onSelectionChange(): void;
+  setCurSelection(): void;
+  ignoreSelectionChange(sel: DOMSelectionRange): boolean;
+  pendingRecords(): MutationRecord[];
+  flush(): void;
+  registerMutation(mut: MutationRecord, added: Array<DOMNode>): {
+    from: number;
+    to: number;
+    typeOver?: never;
+  } | {
+    from: number;
+    to: number;
+    typeOver: boolean;
+  } | null;
+}
+export {};