@thomasfosterau/effect-richtext 0.0.0-stage → 0.1.0

package/dist/view/domobserver.js

@@ -0,0 +1,328 @@
+import { Selection } from "../state/selection.js";
+import { chrome, gecko, ie, ie_version, safari } from "./browser.js";
+import { domIndex, isEquivalentPosition, parentNode, selectionCollapsed } from "./dom.js";
+import { hasFocusAndSelection, selectionFromDOM, selectionToDOM } from "./selection.js";
+// src/view/domobserver.ts
+/**
+* Observing DOM mutations and selection changes.
+*
+* @internal
+*/
+const observeOptions = {
+	childList: true,
+	characterData: true,
+	characterDataOldValue: true,
+	attributes: true,
+	attributeOldValue: true,
+	subtree: true
+};
+const useCharData = ie && ie_version <= 11;
+var SelectionState = class {
+	constructor() {
+		this.anchorNode = null;
+		this.anchorOffset = 0;
+		this.focusNode = null;
+		this.focusOffset = 0;
+	}
+	set(sel) {
+		this.anchorNode = sel.anchorNode;
+		this.anchorOffset = sel.anchorOffset;
+		this.focusNode = sel.focusNode;
+		this.focusOffset = sel.focusOffset;
+	}
+	clear() {
+		this.anchorNode = this.focusNode = null;
+	}
+	eq(sel) {
+		return sel.anchorNode == this.anchorNode && sel.anchorOffset == this.anchorOffset && sel.focusNode == this.focusNode && sel.focusOffset == this.focusOffset;
+	}
+};
+/** @internal */
+var DOMObserver = class {
+	constructor(view, handleDOMChange) {
+		this.view = view;
+		this.handleDOMChange = handleDOMChange;
+		this.queue = [];
+		this.flushingSoon = -1;
+		this.observer = null;
+		this.currentSelection = new SelectionState();
+		this.onCharData = null;
+		this.suppressingSelectionUpdates = false;
+		this.lastChangedTextNode = null;
+		this.observer = window.MutationObserver && new window.MutationObserver((mutations) => {
+			for (let i = 0; i < mutations.length; i++) this.queue.push(mutations[i]);
+			if (ie && ie_version <= 11 && mutations.some((m) => m.type == "childList" && m.removedNodes.length || m.type == "characterData" && m.oldValue.length > m.target.nodeValue.length)) this.flushSoon();
+			else if (safari && view.composing && mutations.some((m) => m.type == "childList" && m.target.nodeName == "TR")) {
+				view.input.badSafariComposition = true;
+				this.flushSoon();
+			} else this.flush();
+		});
+		if (useCharData) this.onCharData = (e) => {
+			this.queue.push({
+				target: e.target,
+				type: "characterData",
+				oldValue: e.prevValue
+			});
+			this.flushSoon();
+		};
+		this.onSelectionChange = this.onSelectionChange.bind(this);
+	}
+	flushSoon() {
+		if (this.flushingSoon < 0) this.flushingSoon = window.setTimeout(() => {
+			this.flushingSoon = -1;
+			this.flush();
+		}, 20);
+	}
+	forceFlush() {
+		if (this.flushingSoon > -1) {
+			window.clearTimeout(this.flushingSoon);
+			this.flushingSoon = -1;
+			this.flush();
+		}
+	}
+	start() {
+		if (this.observer) {
+			this.observer.takeRecords();
+			this.observer.observe(this.view.dom, observeOptions);
+		}
+		if (this.onCharData) this.view.dom.addEventListener("DOMCharacterDataModified", this.onCharData);
+		this.connectSelection();
+	}
+	stop() {
+		if (this.observer) {
+			const take = this.observer.takeRecords();
+			if (take.length) {
+				for (let i = 0; i < take.length; i++) this.queue.push(take[i]);
+				window.setTimeout(() => this.flush(), 20);
+			}
+			this.observer.disconnect();
+		}
+		if (this.onCharData) this.view.dom.removeEventListener("DOMCharacterDataModified", this.onCharData);
+		this.disconnectSelection();
+	}
+	connectSelection() {
+		this.view.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
+	}
+	disconnectSelection() {
+		this.view.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
+	}
+	suppressSelectionUpdates() {
+		this.suppressingSelectionUpdates = true;
+		setTimeout(() => this.suppressingSelectionUpdates = false, 50);
+	}
+	onSelectionChange() {
+		if (!hasFocusAndSelection(this.view)) return;
+		if (this.suppressingSelectionUpdates) return selectionToDOM(this.view);
+		if (ie && ie_version <= 11 && !this.view.state.selection.empty) {
+			const sel = this.view.domSelectionRange();
+			if (sel.focusNode && isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode, sel.anchorOffset)) return this.flushSoon();
+		}
+		this.flush();
+	}
+	setCurSelection() {
+		this.currentSelection.set(this.view.domSelectionRange());
+	}
+	ignoreSelectionChange(sel) {
+		if (!sel.focusNode) return true;
+		const ancestors = /* @__PURE__ */ new WeakSet();
+		let container;
+		for (let scan = sel.focusNode; scan; scan = parentNode(scan)) ancestors.add(scan);
+		for (let scan = sel.anchorNode; scan; scan = parentNode(scan)) if (ancestors.has(scan)) {
+			container = scan;
+			break;
+		}
+		const desc = container && this.view.docView.nearestDesc(container);
+		if (desc && desc.ignoreMutation({
+			type: "selection",
+			target: container.nodeType == 3 ? container.parentNode : container
+		})) {
+			this.setCurSelection();
+			return true;
+		}
+		return false;
+	}
+	pendingRecords() {
+		if (this.observer) for (const mut of this.observer.takeRecords()) this.queue.push(mut);
+		return this.queue;
+	}
+	flush() {
+		const { view } = this;
+		if (!view.docView || this.flushingSoon > -1) return;
+		const now = Date.now();
+		const mutations = this.pendingRecords();
+		if (mutations.length) this.queue = [];
+		const selRange = !this.suppressingSelectionUpdates && hasFocusAndSelection(view) ? view.domSelectionRange() : void 0;
+		const newSel = !!selRange && !this.currentSelection.eq(selRange) && !this.ignoreSelectionChange(selRange);
+		let from = -1, to = -1, typeOver = false;
+		const added = [];
+		if (view.editable) for (let i = 0; i < mutations.length; i++) {
+			const result = this.registerMutation(mutations[i], added);
+			if (result) {
+				from = from < 0 ? result.from : Math.min(result.from, from);
+				to = to < 0 ? result.to : Math.max(result.to, to);
+				if (result.typeOver) typeOver = true;
+			}
+		}
+		if (added.some((n) => n.nodeName == "BR") && (view.input.lastKeyCode == 8 || view.input.lastKeyCode == 46 || chrome && (view.composing || view.input.compositionEndedAt > now - 50) && mutations.some((m) => m.type == "childList" && m.removedNodes.length))) {
+			for (const node of added) if (node.nodeName == "BR" && node.parentNode) {
+				let after = node.nextSibling;
+				while (after && after.nodeType == 1) {
+					if (after.contentEditable == "false") {
+						node.parentNode.removeChild(node);
+						break;
+					}
+					after = after.firstChild;
+				}
+			}
+		} else if (gecko && added.length) {
+			const brs = added.filter((n) => n.nodeName == "BR");
+			if (brs.length == 2) {
+				const [a, b] = brs;
+				if (a.parentNode && a.parentNode.parentNode == b.parentNode) b.remove();
+				else a.remove();
+			} else {
+				const { focusNode } = this.currentSelection;
+				for (const br of brs) {
+					const parent = br.parentNode;
+					if (parent && parent.nodeName == "LI" && (!focusNode || blockParent(view, focusNode) != parent)) br.remove();
+				}
+			}
+		}
+		let readSel = null;
+		if (from < 0 && newSel && view.input.lastFocus > now - 200 && Math.max(view.input.lastTouch, view.input.lastClick.time) < now - 300 && selectionCollapsed(selRange) && (readSel = selectionFromDOM(view)) && readSel.eq(Selection.near(view.state.doc.resolveUnsafe(0), 1))) {
+			view.input.lastFocus = 0;
+			selectionToDOM(view);
+			this.currentSelection.set(selRange);
+			view.scrollToSelection();
+		} else if (from > -1 || newSel) {
+			if (from > -1) {
+				view.docView.markDirty(from, to);
+				checkCSS(view);
+			}
+			if (view.input.badSafariComposition) {
+				view.input.badSafariComposition = false;
+				fixUpBadSafariComposition(view, added);
+			}
+			this.handleDOMChange(from, to, typeOver, added);
+			if (view.docView && view.docView.dirty) view.updateState(view.state);
+			else if (selRange && !this.currentSelection.eq(selRange)) selectionToDOM(view);
+			if (selRange) this.currentSelection.set(selRange);
+		}
+	}
+	registerMutation(mut, added) {
+		if (added.indexOf(mut.target) > -1) return null;
+		const desc = this.view.docView.nearestDesc(mut.target);
+		if (mut.type == "attributes" && (desc == this.view.docView || mut.attributeName == "contenteditable" || mut.attributeName == "style" && !mut.oldValue && !mut.target.getAttribute("style"))) return null;
+		if (!desc || desc.ignoreMutation(mut)) return null;
+		if (mut.type == "childList") {
+			for (let i = 0; i < mut.addedNodes.length; i++) {
+				const node = mut.addedNodes[i];
+				added.push(node);
+				if (node.nodeType == 3) this.lastChangedTextNode = node;
+			}
+			if (desc.contentDOM && desc.contentDOM != desc.dom && !desc.contentDOM.contains(mut.target)) return {
+				from: desc.posBefore,
+				to: desc.posAfter
+			};
+			let prev = mut.previousSibling, next = mut.nextSibling;
+			if (ie && ie_version <= 11 && mut.addedNodes.length) for (let i = 0; i < mut.addedNodes.length; i++) {
+				const { nextSibling, previousSibling } = mut.addedNodes[i];
+				if (!previousSibling || Array.prototype.indexOf.call(mut.addedNodes, previousSibling) < 0) prev = previousSibling;
+				if (!nextSibling || Array.prototype.indexOf.call(mut.addedNodes, nextSibling) < 0) next = nextSibling;
+			}
+			const fromOffset = prev && prev.parentNode == mut.target ? domIndex(prev) + 1 : 0;
+			const from = desc.localPosFromDOM(mut.target, fromOffset, -1);
+			const toOffset = next && next.parentNode == mut.target ? domIndex(next) : mut.target.childNodes.length;
+			return {
+				from,
+				to: desc.localPosFromDOM(mut.target, toOffset, 1)
+			};
+		} else if (mut.type == "attributes") return {
+			from: desc.posAtStart - desc.border,
+			to: desc.posAtEnd + desc.border
+		};
+		else {
+			this.lastChangedTextNode = mut.target;
+			return {
+				from: desc.posAtStart,
+				to: desc.posAtEnd,
+				typeOver: mut.target.nodeValue == mut.oldValue
+			};
+		}
+	}
+};
+const cssChecked = /* @__PURE__ */ new WeakMap();
+let cssCheckWarned = false;
+function checkCSS(view) {
+	if (cssChecked.has(view)) return;
+	cssChecked.set(view, null);
+	if ([
+		"normal",
+		"nowrap",
+		"pre-line"
+	].indexOf(getComputedStyle(view.dom).whiteSpace) !== -1) {
+		view.requiresGeckoHackNode = gecko;
+		if (cssCheckWarned) return;
+		console["warn"]("ProseMirror expects the CSS white-space property to be set, preferably to 'pre-wrap'. It is recommended to load style/prosemirror.css from the prosemirror-view package.");
+		cssCheckWarned = true;
+	}
+}
+function rangeToSelectionRange(view, range) {
+	let anchorNode = range.startContainer, anchorOffset = range.startOffset;
+	let focusNode = range.endContainer, focusOffset = range.endOffset;
+	const currentAnchor = view.domAtPos(view.state.selection.anchor);
+	if (isEquivalentPosition(currentAnchor.node, currentAnchor.offset, focusNode, focusOffset)) [anchorNode, anchorOffset, focusNode, focusOffset] = [
+		focusNode,
+		focusOffset,
+		anchorNode,
+		anchorOffset
+	];
+	return {
+		anchorNode,
+		anchorOffset,
+		focusNode,
+		focusOffset
+	};
+}
+/** @internal */
+function safariShadowSelectionRange(view, selection) {
+	if (selection.getComposedRanges) {
+		const range = selection.getComposedRanges(view.root)[0];
+		if (range) return rangeToSelectionRange(view, range);
+	}
+	let found;
+	function read(event) {
+		event.preventDefault();
+		event.stopImmediatePropagation();
+		found = event.getTargetRanges()[0];
+	}
+	view.dom.addEventListener("beforeinput", read, true);
+	document.execCommand("indent");
+	view.dom.removeEventListener("beforeinput", read, true);
+	return found ? rangeToSelectionRange(view, found) : null;
+}
+function blockParent(view, node) {
+	for (let p = node.parentNode; p && p != view.dom; p = p.parentNode) {
+		const desc = view.docView.nearestDesc(p, true);
+		if (desc && desc.node.isBlock) return p;
+	}
+	return null;
+}
+function fixUpBadSafariComposition(view, addedNodes) {
+	const { focusNode, focusOffset } = view.domSelectionRange();
+	for (const node of addedNodes) if (node.parentNode?.nodeName == "TR") {
+		let nextCell = node.nextSibling;
+		while (nextCell && nextCell.nodeName != "TD" && nextCell.nodeName != "TH") nextCell = nextCell.nextSibling;
+		if (nextCell) {
+			let parent = nextCell;
+			for (;;) {
+				const first = parent.firstChild;
+				if (!first || first.nodeType != 1 || first.contentEditable == "false" || /^(BR|IMG)$/.test(first.nodeName)) break;
+				parent = first;
+			}
+			parent.insertBefore(node, parent.firstChild);
+			if (focusNode == node) view.domSelection().collapse(node, focusOffset);
+		} else node.parentNode.removeChild(node);
+	}
+}
+export { DOMObserver, safariShadowSelectionRange };

package/dist/view/errors.d.ts

@@ -0,0 +1,18 @@
+import * as Schema from "effect/Schema";
+declare const ViewError_base: Schema.Class<ViewError, Schema.TaggedStruct<"ViewError", {
+  readonly message: Schema.String;
+}>, import("effect/Cause").YieldableError>;
+/**
+ * An invalid view operation, such as asking for the document position
+ * of a DOM position that is not inside the editor.
+ *
+ * @since 0.1.0
+ * @category errors
+ */
+export declare class ViewError extends ViewError_base {}
+/**
+ * @since 0.1.0
+ * @category guards
+ */
+export declare const isViewError: (u: unknown) => u is ViewError;
+export {};

package/dist/view/errors.js

@@ -0,0 +1,21 @@
+import * as Schema from "effect/Schema";
+// src/view/errors.ts
+/**
+* Tagged errors raised by the view layer.
+*
+* @since 0.1.0
+*/
+/**
+* An invalid view operation, such as asking for the document position
+* of a DOM position that is not inside the editor.
+*
+* @since 0.1.0
+* @category errors
+*/
+var ViewError = class extends Schema.TaggedError()("ViewError", { message: Schema.String }) {};
+/**
+* @since 0.1.0
+* @category guards
+*/
+const isViewError = (u) => u instanceof ViewError;
+export { ViewError, isViewError };

package/dist/view/input.d.ts

@@ -0,0 +1,58 @@
+import { Node } from "../model/node.js";
+import "../model.js";
+import "../state.js";
+import { EditorView } from "./view.js";
+import { ViewDesc } from "./viewdesc.js";
+type AnyView = EditorView<any, any, any>;
+/** @internal */
+export declare class InputState {
+  shiftKey: boolean;
+  mouseDown: MouseDown | null;
+  lastKeyCode: number | null;
+  lastKeyCodeTime: number;
+  lastKeyDispatched: boolean;
+  lastClick: {
+    time: number;
+    x: number;
+    y: number;
+    type: string;
+    button: number;
+  };
+  lastSelectionOrigin: string | null;
+  lastSelectionTime: number;
+  lastIOSEnter: number;
+  lastIOSEnterFallbackTimeout: any;
+  lastFocus: number;
+  lastTouch: number;
+  lastChromeDelete: number;
+  composing: boolean;
+  compositionNode: Text | null;
+  composingTimeout: any;
+  compositionNodes: Array<ViewDesc>;
+  compositionEndedAt: number;
+  compositionID: number;
+  badSafariComposition: boolean;
+  compositionPendingChanges: number;
+  domChangeCount: number;
+  eventHandlers: {
+    [event: string]: (event: Event) => void;
+  };
+  hideSelectionGuard: (() => void) | null;
+}
+declare abstract class MouseDown {
+  readonly view: AnyView;
+  mightDrag: {
+    node: Node<any, any>;
+    pos: number;
+    addAttr: boolean;
+    setUneditable: boolean;
+  } | null;
+  constructor(view: AnyView);
+  up(_event: MouseEvent): void;
+  move(event: MouseEvent): void;
+  done(): void;
+  delaySelUpdate(): boolean;
+}
+/** @internal */
+export declare function endComposition(view: AnyView, restarting?: boolean): boolean;
+export {};