@thomasfosterau/effect-richtext 0.0.0 → 0.1.0

package/dist/compat/view.js

@@ -0,0 +1,409 @@
+import { Decoration as Decoration$1, DecorationGroup as DecorationGroup$1, DecorationSet as DecorationSet$1 } from "../view/decoration.js";
+import { EditorView as EditorView$1, __endComposition as __endComposition$1, __parseFromClipboard as __parseFromClipboard$1 } from "../view/view.js";
+import { CORE, adopt, guard, link, registerWrapper, unwrap, unwrapArray, wrap, wrapArray } from "./internal/core.js";
+import { propsToCore } from "./internal/props.js";
+import * as Option from "effect/Option";
+// src/compat/view.ts
+/**
+* A `prosemirror-view`-compatible facade over `@thomasfosterau/effect-richtext/view`.
+*
+* `new EditorView(place, props)` creates a core view with
+* `EditorView.makeUnsafe`, translating the ProseMirror-style props
+* (which receive and return facades) into core props. Decorations wrap
+* core decorations.
+*
+* Ported API surface from prosemirror-view (MIT, Marijn Haverbeke and others).
+*
+* @since 0.1.0
+*/
+const ORIGINAL = Symbol.for("effect-richtext/compat/original");
+const widgetConstructors = /* @__PURE__ */ new WeakMap();
+const widgetToCore = (toDOM) => {
+	if (typeof toDOM !== "function") return toDOM;
+	let found = widgetConstructors.get(toDOM);
+	if (!found) {
+		found = (view, getPos) => toDOM(wrap(view), getPos);
+		widgetConstructors.set(toDOM, found);
+	}
+	return found;
+};
+const specToCore = (spec) => {
+	if (!spec || !spec.marks) return spec;
+	return {
+		...spec,
+		marks: unwrapArray(spec.marks),
+		[ORIGINAL]: spec
+	};
+};
+const originalSpec = (spec) => spec && (spec[ORIGINAL] ?? spec);
+/**
+* Decoration objects can be provided to the view through the
+* `decorations` prop.
+*
+* @since 0.1.0
+* @category models
+*/
+var Decoration = class {
+	/** The start position of the decoration. */
+	get from() {
+		return this[CORE].from;
+	}
+	/** The end position. Will be the same as `from` for widget decorations. */
+	get to() {
+		return this[CORE].to;
+	}
+	/** @internal */
+	get type() {
+		return this[CORE].type;
+	}
+	/** The spec provided when creating this decoration. */
+	get spec() {
+		return originalSpec(this[CORE].spec);
+	}
+	/** @internal */
+	get inline() {
+		return this[CORE].inline;
+	}
+	/** @internal */
+	get widget() {
+		return this[CORE].widget;
+	}
+	/** @internal */
+	eq(other, offset = 0) {
+		return this[CORE].eq(other[CORE], offset);
+	}
+	/** Creates a widget decoration, which is a DOM node that's shown in the document at the given position. */
+	static widget(pos, toDOM, spec) {
+		return wrap(Decoration$1.widget(pos, widgetToCore(toDOM), specToCore(spec)));
+	}
+	/** Creates an inline decoration, which adds the given attributes to each inline node between `from` and `to`. */
+	static inline(from, to, attrs, spec) {
+		return wrap(Decoration$1.inline(from, to, attrs, spec));
+	}
+	/** Creates a node decoration. */
+	static node(from, to, attrs, spec) {
+		return wrap(Decoration$1.node(from, to, attrs, spec));
+	}
+};
+registerWrapper(Decoration$1, (core) => adopt(Decoration.prototype, core));
+/**
+* A collection of decorations, organized in such a way that the
+* drawing algorithm can efficiently use and compare them.
+*
+* @since 0.1.0
+* @category models
+*/
+var DecorationSet = class {
+	/** Create a set of decorations, using the structure of the given document. */
+	static create(doc, decorations) {
+		return wrap(DecorationSet$1.create(doc[CORE], decorations.map(unwrap)));
+	}
+	/** Find all decorations in this set which touch the given range (including decorations that start or end directly at the boundaries) and match the given predicate on their spec. */
+	find(start, end, predicate) {
+		return this[CORE].find(start, end, predicate && ((spec) => predicate(originalSpec(spec)))).map(wrap);
+	}
+	/** Map the set of decorations in response to a change in the document. */
+	map(mapping, doc, options) {
+		const onRemove = options && options.onRemove;
+		return wrap(this[CORE].map(unwrap(mapping), doc[CORE], onRemove && { onRemove: (spec) => onRemove(originalSpec(spec)) }));
+	}
+	/** Add the given array of decorations to the ones in the set, producing a new set. */
+	add(doc, decorations) {
+		return wrap(this[CORE].add(doc[CORE], decorations.map(unwrap)));
+	}
+	/** Create a new set that contains the decorations in this set, minus the ones in the given array. */
+	remove(decorations) {
+		return wrap(this[CORE].remove(decorations.map(unwrap)));
+	}
+	/** @internal */
+	forChild(offset, node) {
+		return wrap(this[CORE].forChild(offset, node[CORE]));
+	}
+	/** @internal */
+	eq(other) {
+		return this[CORE].eq(unwrap(other));
+	}
+	/** @internal */
+	locals(node) {
+		return wrapArray(this[CORE].locals(node[CORE]));
+	}
+	/** @internal */
+	forEachSet(f) {
+		this[CORE].forEachSet((set) => f(wrap(set)));
+	}
+	/** @internal */
+	get local() {
+		return wrapArray(this[CORE].local);
+	}
+	/** @internal */
+	get children() {
+		return this[CORE].children.map(wrap);
+	}
+	/** @internal */
+	static removeOverlap(spans) {
+		const core = unwrapArray(spans);
+		const result = DecorationSet$1.removeOverlap(core);
+		return result === core ? spans : result.map(wrap);
+	}
+};
+registerWrapper(DecorationSet$1, (core) => adopt(DecorationSet.prototype, core));
+DecorationSet.empty = wrap(DecorationSet$1.empty);
+/** A facade for the core's (non-exported) group of decoration sources. @internal */
+var DecorationGroup = class {
+	map(mapping, doc) {
+		return wrap(this[CORE].map(unwrap(mapping), doc[CORE]));
+	}
+	forChild(offset, child) {
+		return wrap(this[CORE].forChild(offset, child[CORE]));
+	}
+	eq(other) {
+		return this[CORE].eq(unwrap(other));
+	}
+	forEachSet(f) {
+		this[CORE].forEachSet((set) => f(wrap(set)));
+	}
+	locals(node) {
+		return wrapArray(this[CORE].locals(node[CORE]));
+	}
+};
+registerWrapper(DecorationGroup$1, (core) => adopt(DecorationGroup.prototype, core));
+const constructing = [];
+/**
+* An editor view manages the DOM structure that represents an editable
+* document.
+*
+* @since 0.1.0
+* @category models
+*/
+var EditorView = class {
+	/** Create a view. */
+	constructor(place, props) {
+		this._props = props;
+		this.propsCache = /* @__PURE__ */ new WeakMap();
+		this.dispatch = this.dispatch.bind(this);
+		constructing.push(this);
+		try {
+			const core = guard(() => EditorView$1.makeUnsafe(place, this.propsToCore(props)));
+			link(this, core);
+		} finally {
+			constructing.pop();
+		}
+	}
+	propsToCore(props) {
+		return propsToCore(props, this, this.propsCache);
+	}
+	/** The view's current state. */
+	get state() {
+		return wrap(this[CORE].state);
+	}
+	/** An editable DOM node containing the document. */
+	get dom() {
+		return this[CORE].dom;
+	}
+	/** Indicates whether the editor is currently editable. */
+	get editable() {
+		return this[CORE].editable;
+	}
+	/** When editor content is being dragged, this object contains information about the dragged slice and whether it is being copied or moved. */
+	get dragging() {
+		const dragging = this[CORE].dragging;
+		return dragging && {
+			slice: wrap(dragging.slice),
+			move: dragging.move
+		};
+	}
+	set dragging(value) {
+		this[CORE].dragging = value && {
+			slice: value.slice[CORE],
+			move: value.move
+		};
+	}
+	/** Holds `true` when a composition is active. */
+	get composing() {
+		return this[CORE].composing;
+	}
+	/** The view's current props. */
+	get props() {
+		if (this._props.state != this.state) {
+			const prev = this._props;
+			this._props = {};
+			for (const name in prev) this._props[name] = prev[name];
+			this._props.state = this.state;
+		}
+		return this._props;
+	}
+	/** Update the view's props. Will immediately cause an update to the DOM. */
+	update(props) {
+		this._props = props;
+		guard(() => this[CORE].update(this.propsToCore(props)));
+	}
+	/** Update the view by updating existing props object with the object given as argument. */
+	setProps(props) {
+		const updated = {};
+		for (const name in this._props) updated[name] = this._props[name];
+		updated.state = this.state;
+		for (const name in props) updated[name] = props[name];
+		this.update(updated);
+	}
+	/** Update the editor's `state` prop, without touching any of the other props. */
+	updateState(state) {
+		guard(() => this[CORE].updateState(state[CORE]));
+	}
+	someProp(propName, f) {
+		const prop = this._props && this._props[propName];
+		let value;
+		if (prop != null && (value = f ? f(prop) : prop)) return value;
+		const direct = this._props.plugins || [];
+		for (let i = 0; i < direct.length; i++) {
+			const prop = direct[i].props[propName];
+			if (prop != null && (value = f ? f(prop) : prop)) return value;
+		}
+		const plugins = this.state.plugins;
+		if (plugins) for (let i = 0; i < plugins.length; i++) {
+			const prop = plugins[i].props[propName];
+			if (prop != null && (value = f ? f(prop) : prop)) return value;
+		}
+	}
+	/** Query whether the view has focus. */
+	hasFocus() {
+		return this[CORE].hasFocus();
+	}
+	/** Focus the editor. */
+	focus() {
+		this[CORE].focus();
+	}
+	/** Get the document root in which the editor exists. */
+	get root() {
+		return this[CORE].root;
+	}
+	/** When an existing editor view is moved to a new document or shadow tree, call this to make it recompute its root. */
+	updateRoot() {
+		this[CORE].updateRoot();
+	}
+	/** Given a pair of viewport coordinates, return the document position that corresponds to them. */
+	posAtCoords(coords) {
+		return Option.getOrNull(this[CORE].posAtCoords(coords));
+	}
+	/** Returns the viewport rectangle at a given document position. */
+	coordsAtPos(pos, side = 1) {
+		return guard(() => this[CORE].coordsAtPos(pos, side));
+	}
+	/** Find the DOM position that corresponds to the given document position. */
+	domAtPos(pos, side = 0) {
+		return guard(() => this[CORE].domAtPos(pos, side));
+	}
+	/** Find the DOM node that represents the document node after the given position. */
+	nodeDOM(pos) {
+		return Option.getOrNull(this[CORE].nodeDOM(pos));
+	}
+	/** Find the document position that corresponds to a given DOM position. */
+	posAtDOM(node, offset, bias = -1) {
+		return guard(() => this[CORE].posAtDOMUnsafe(node, offset, bias));
+	}
+	/** Find out whether the selection is at the end of a textblock when moving in a given direction. */
+	endOfTextblock(dir, state) {
+		return this[CORE].endOfTextblock(dir, state && state[CORE]);
+	}
+	/** Run the editor's paste logic with the given HTML string. */
+	pasteHTML(html, event) {
+		return guard(() => this[CORE].pasteHTML(html, event));
+	}
+	/** Run the editor's paste logic with the given plain-text input. */
+	pasteText(text, event) {
+		return guard(() => this[CORE].pasteText(text, event));
+	}
+	/** Serialize the given slice as it would be if it was copied from this editor. */
+	serializeForClipboard(slice) {
+		const result = guard(() => this[CORE].serializeForClipboard(slice[CORE]));
+		return {
+			dom: result.dom,
+			text: result.text,
+			slice: wrap(result.slice)
+		};
+	}
+	/** Removes the editor from the DOM and destroys all node views. */
+	destroy() {
+		this[CORE].destroy();
+	}
+	/** This is true when the view has been destroyed (and thus should not be used anymore). */
+	get isDestroyed() {
+		return this[CORE].isDestroyed;
+	}
+	/** Used for testing. */
+	dispatchEvent(event) {
+		this[CORE].dispatchEvent(event);
+	}
+	/** Dispatch a transaction. */
+	dispatch(tr) {
+		guard(() => this[CORE].dispatchUnsafe(tr[CORE]));
+	}
+	/** @internal */
+	domSelectionRange() {
+		return this[CORE].domSelectionRange();
+	}
+	/** @internal */
+	domSelection() {
+		return this[CORE].domSelection();
+	}
+	/** @internal */
+	scrollToSelection() {
+		this[CORE].scrollToSelection();
+	}
+	/** @internal */
+	get domObserver() {
+		return this[CORE].domObserver;
+	}
+	/** @internal */
+	get docView() {
+		return this[CORE].docView;
+	}
+	/** @internal */
+	get input() {
+		return this[CORE].input;
+	}
+	/** @internal */
+	get focused() {
+		return this[CORE].focused;
+	}
+	/** @internal */
+	get markCursor() {
+		const marks = this[CORE].markCursor;
+		return marks && wrapArray(marks);
+	}
+	/** @internal */
+	get cursorWrapper() {
+		return this[CORE].cursorWrapper;
+	}
+	/** @internal */
+	get lastSelectedViewDesc() {
+		return this[CORE].lastSelectedViewDesc;
+	}
+	/** @internal */
+	get trackWrites() {
+		return this[CORE].trackWrites;
+	}
+	/** @internal */
+	get nodeViews() {
+		return this[CORE].nodeViews;
+	}
+};
+registerWrapper(EditorView$1, (core) => {
+	const facade = constructing.at(-1);
+	if (facade && !(CORE in facade)) return facade;
+	const view = adopt(EditorView.prototype, core);
+	view._props = core.props;
+	view.propsCache = /* @__PURE__ */ new WeakMap();
+	view.dispatch = view.dispatch.bind(view);
+	return view;
+});
+/** @internal */
+const __parseFromClipboard = (view, text, html, plainText, $context) => wrap(__parseFromClipboard$1(view[CORE], text, html, plainText, $context[CORE]));
+/** @internal */
+const __endComposition = (view, restarting = false) => __endComposition$1(view[CORE], restarting);
+function toCore(value) {
+	return unwrap(value);
+}
+function fromCore(value) {
+	return wrap(value);
+}
+export { Decoration, DecorationSet, EditorView, __endComposition, __parseFromClipboard, fromCore, toCore };

package/dist/dropcursor.d.ts

@@ -0,0 +1,46 @@
+import { EditorView, PosAtCoords } from "./view/view.js";
+import { Plugin } from "./state/plugin.js";
+import "./state.js";
+import "./view.js";
+/**
+ * Options for `dropCursor`.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export interface DropCursorOptions {
+  /**
+   * The color of the cursor. Defaults to `black`. Use `false` to apply
+   * no color and rely only on class.
+   */
+  readonly color?: string | false | undefined;
+  /** The precise width of the cursor in pixels. Defaults to 1. */
+  readonly width?: number | undefined;
+  /** A CSS class name to add to the cursor element. */
+  readonly class?: string | undefined;
+}
+/**
+ * The type of the `disableDropCursor` property node specs may define to
+ * control the showing of a drop cursor inside them.
+ *
+ * @since 0.1.0
+ * @category models
+ */
+export type DisableDropCursor = boolean | ((view: EditorView<any, any, any>, pos: PosAtCoords, event: DragEvent) => boolean);
+/**
+ * Create a plugin that, when added to an editor, causes a decoration to
+ * show up at the drop position when something is dragged over the
+ * editor.
+ *
+ * Nodes may add a `disableDropCursor` property (see `DisableDropCursor`)
+ * to their spec to control the showing of a drop cursor inside them.
+ * This may be a boolean or a function, which will be called with a view
+ * and a position, and should return a boolean.
+ *
+ * The cursor element gets the class `prosemirror-dropcursor-block` or
+ * `prosemirror-dropcursor-inline`, depending on the position.
+ *
+ * @since 0.1.0
+ * @category constructors
+ */
+export declare const dropCursor: (options?: DropCursorOptions) => Plugin<undefined>;

package/dist/dropcursor.js

@@ -0,0 +1,176 @@
+import { Plugin } from "./state/plugin.js";
+import { dropPoint } from "./transform/structure.js";
+import * as Option from "effect/Option";
+import * as Predicate from "effect/Predicate";
+// src/dropcursor.ts
+/**
+* A plugin that shows a drop cursor (a line at the drop position) when
+* something is dragged over the editor. Ported from
+* `prosemirror-dropcursor`.
+*
+* @since 0.1.0
+*/
+/**
+* Create a plugin that, when added to an editor, causes a decoration to
+* show up at the drop position when something is dragged over the
+* editor.
+*
+* Nodes may add a `disableDropCursor` property (see `DisableDropCursor`)
+* to their spec to control the showing of a drop cursor inside them.
+* This may be a boolean or a function, which will be called with a view
+* and a position, and should return a boolean.
+*
+* The cursor element gets the class `prosemirror-dropcursor-block` or
+* `prosemirror-dropcursor-inline`, depending on the position.
+*
+* @since 0.1.0
+* @category constructors
+*/
+const dropCursor = (options = {}) => new Plugin({ view: (editorView) => new DropCursorView(editorView, options) });
+const events = [
+	"dragover",
+	"dragend",
+	"drop",
+	"dragleave"
+];
+var DropCursorView = class {
+	constructor(editorView, options) {
+		this.editorView = editorView;
+		this.cursorPos = null;
+		this.element = null;
+		this.timeout = void 0;
+		this.width = options.width ?? 1;
+		this.color = options.color === false ? void 0 : options.color || "black";
+		this.class = options.class;
+		this.handlers = events.map((name) => {
+			const handler = (e) => {
+				this[name](e);
+			};
+			editorView.dom.addEventListener(name, handler);
+			return {
+				name,
+				handler
+			};
+		});
+	}
+	destroy() {
+		this.handlers.forEach(({ handler, name }) => this.editorView.dom.removeEventListener(name, handler));
+		clearTimeout(this.timeout);
+		if (this.element) {
+			this.element.remove();
+			this.element = null;
+		}
+	}
+	update(editorView, prevState) {
+		if (this.cursorPos != null && prevState.doc !== editorView.state.doc) {
+			if (this.cursorPos > editorView.state.doc.content.size) this.setCursor(null);
+			else this.updateOverlay();
+		}
+	}
+	setCursor(pos) {
+		if (pos === this.cursorPos) return;
+		this.cursorPos = pos;
+		if (pos == null) {
+			this.element?.remove();
+			this.element = null;
+		} else this.updateOverlay();
+	}
+	updateOverlay() {
+		const view = this.editorView;
+		const $pos = view.state.doc.resolveUnsafe(this.cursorPos);
+		const isBlock = !$pos.parent.inlineContent;
+		let rect;
+		const editorDOM = view.dom, editorRect = editorDOM.getBoundingClientRect();
+		const scaleX = editorRect.width / editorDOM.offsetWidth, scaleY = editorRect.height / editorDOM.offsetHeight;
+		if (isBlock) {
+			const before = $pos.nodeBeforeOrNull, after = $pos.nodeAfterOrNull;
+			if (before || after) {
+				const node = Option.getOrNull(view.nodeDOM(this.cursorPos - (before ? before.nodeSize : 0)));
+				if (node) {
+					const nodeRect = node.getBoundingClientRect();
+					let top = before ? nodeRect.bottom : nodeRect.top;
+					if (before && after) {
+						const afterDOM = Option.getOrNull(view.nodeDOM(this.cursorPos));
+						if (afterDOM) top = (top + afterDOM.getBoundingClientRect().top) / 2;
+					}
+					const halfWidth = this.width / 2 * scaleY;
+					rect = {
+						left: nodeRect.left,
+						right: nodeRect.right,
+						top: top - halfWidth,
+						bottom: top + halfWidth
+					};
+				}
+			}
+		}
+		if (!rect) {
+			const coords = view.coordsAtPos(this.cursorPos);
+			const halfWidth = this.width / 2 * scaleX;
+			rect = {
+				left: coords.left - halfWidth,
+				right: coords.left + halfWidth,
+				top: coords.top,
+				bottom: coords.bottom
+			};
+		}
+		const doc = editorDOM.ownerDocument;
+		const parent = editorDOM.offsetParent;
+		if (!this.element) {
+			this.element = (parent ?? doc.body).appendChild(doc.createElement("div"));
+			if (this.class) this.element.className = this.class;
+			this.element.style.cssText = "position: absolute; z-index: 50; pointer-events: none;";
+			if (this.color) this.element.style.backgroundColor = this.color;
+		}
+		this.element.classList.toggle("prosemirror-dropcursor-block", isBlock);
+		this.element.classList.toggle("prosemirror-dropcursor-inline", !isBlock);
+		let parentLeft, parentTop;
+		const win = doc.defaultView ?? window;
+		if (!parent || parent === doc.body && win.getComputedStyle(parent).position === "static") {
+			parentLeft = -win.pageXOffset;
+			parentTop = -win.pageYOffset;
+		} else {
+			const rect = parent.getBoundingClientRect();
+			const parentScaleX = rect.width / parent.offsetWidth, parentScaleY = rect.height / parent.offsetHeight;
+			parentLeft = rect.left - parent.scrollLeft * parentScaleX;
+			parentTop = rect.top - parent.scrollTop * parentScaleY;
+		}
+		this.element.style.left = (rect.left - parentLeft) / scaleX + "px";
+		this.element.style.top = (rect.top - parentTop) / scaleY + "px";
+		this.element.style.width = (rect.right - rect.left) / scaleX + "px";
+		this.element.style.height = (rect.bottom - rect.top) / scaleY + "px";
+	}
+	scheduleRemoval(timeout) {
+		clearTimeout(this.timeout);
+		this.timeout = setTimeout(() => this.setCursor(null), timeout);
+	}
+	dragover(event) {
+		const view = this.editorView;
+		if (!view.editable) return;
+		const pos = Option.getOrNull(view.posAtCoords({
+			left: event.clientX,
+			top: event.clientY
+		}));
+		const node = pos && pos.inside >= 0 ? view.state.doc.nodeAtOrNull(pos.inside) : null;
+		const disableDropCursor = node ? node.type.spec.disableDropCursor : void 0;
+		const disabled = Predicate.isFunction(disableDropCursor) ? disableDropCursor(view, pos, event) : disableDropCursor;
+		if (pos && !disabled) {
+			let target = pos.pos;
+			if (view.dragging && view.dragging.slice) {
+				const point = Option.getOrNull(dropPoint(view.state.doc, target, view.dragging.slice));
+				if (point != null) target = point;
+			}
+			this.setCursor(target);
+			this.scheduleRemoval(5e3);
+		}
+	}
+	dragend() {
+		this.scheduleRemoval(20);
+	}
+	drop() {
+		this.scheduleRemoval(20);
+	}
+	dragleave(event) {
+		if (!this.editorView.dom.contains(event.relatedTarget)) this.setCursor(null);
+	}
+};
+export { dropCursor };