@dou-ui/editor 0.0.0-stage → 0.1.0-alpha.0

package/dist/core/transaction.js

@@ -0,0 +1,311 @@
+import { blockFromNode, contentAttrs, createContentNode, createId, nodeFromBlock } from "./model.js";
+import { blockAround, findBlockById } from "./blocks.js";
+import { blockSelectionRange } from "./block-selection.js";
+import { originKey } from "./editor.js";
+import { NodeSelection, Selection, TextSelection } from "prosemirror-state";
+import { closeHistory } from "prosemirror-history";
+// src/core/transaction.ts
+/**
+* Set on a transaction that is an undo step of its own, for history
+* providers other than the built-in one (collaboration reads it).
+*/
+var ownStepKey = "douOwnStep";
+var warn = (message) => {
+	if (process.env.NODE_ENV !== "production") console.warn(`[@dou-ui/editor] ${message}`);
+};
+/**
+* Changes made by blocks and ids, applied together as one undo step. Ids
+* are looked up in the document as it is after the earlier calls.
+*/
+var EditorTransaction = class {
+	before;
+	hasCursor;
+	/** The ProseMirror transaction underneath, for anything the methods don't cover. */
+	tr;
+	meta;
+	/** `focusBlock` was called: the editor takes focus once the changes are applied. */
+	focused = false;
+	constructor(before, meta = {}, hasCursor = true) {
+		this.before = before;
+		this.hasCursor = hasCursor;
+		this.tr = before.tr;
+		this.meta = { ...meta };
+	}
+	get changed() {
+		return this.tr.docChanged;
+	}
+	setMeta(meta) {
+		Object.assign(this.meta, meta);
+		return this;
+	}
+	/** A block as it is now, or `null`. */
+	getBlock(id) {
+		const info = findBlockById(this.tr.doc, id);
+		return info ? blockFromNode(info.node) : null;
+	}
+	/**
+	* Insert blocks, by default after the block with the cursor (at the end
+	* without one). Returns the new blocks' ids; an id already in the
+	* document is replaced with a fresh one.
+	*/
+	insertBlocks(blocks, placement) {
+		if (!blocks.length) return [];
+		const tr = this.tr;
+		const schema = tr.doc.type.schema;
+		const taken = usedIds(tr.doc);
+		const ids = [];
+		const nodes = blocks.map((block) => {
+			const node = nodeFromBlock(schema, freshIds(block, taken));
+			ids.push(node.attrs.id);
+			return node;
+		});
+		if (insertNodes(tr, placement ?? this.defaultPlacement(), nodes) === null) return [];
+		return ids;
+	}
+	/** Change a block's type, props, content or children. Returns `false` when it isn't found. */
+	updateBlock(id, patch) {
+		const tr = this.tr;
+		const info = findBlockById(tr.doc, id);
+		if (!info) {
+			warn(`updateBlock: no block with the id "${id}"`);
+			return false;
+		}
+		const schema = tr.doc.type.schema;
+		const typeName = patch.type ?? info.content.type.name;
+		const nodeType = schema.nodes[typeName];
+		if (!nodeType?.isInGroup("blockContent")) {
+			warn(`updateBlock: unknown block type "${typeName}"`);
+			return false;
+		}
+		const rowsSpec = !!nodeType.spec.rows;
+		if (patch.rows !== void 0 && !rowsSpec) {
+			warn(`updateBlock: a "${typeName}" block has no rows`);
+			return false;
+		}
+		if (patch.content !== void 0 && (rowsSpec || !nodeType.inlineContent)) {
+			warn(`updateBlock: a "${typeName}" block has no text content`);
+			return false;
+		}
+		if (patch.children) replaceChildren(tr, info, patch.children);
+		if (patch.type === void 0 && patch.props === void 0 && patch.content === void 0 && patch.rows === void 0) return true;
+		const current = findBlockById(tr.doc, id);
+		const content = current.content;
+		const props = {
+			...content.attrs,
+			...patch.props
+		};
+		const keepsContent = patch.content === void 0 && patch.rows === void 0;
+		if (keepsContent && nodeType === content.type) {
+			tr.setNodeMarkup(current.contentPos, void 0, contentAttrs(nodeType, props));
+			return true;
+		}
+		if (keepsContent && nodeType.isTextblock && content.isTextblock) {
+			const from = current.contentPos;
+			tr.setBlockType(from + 1, from + content.nodeSize - 1, nodeType, contentAttrs(nodeType, props));
+			return true;
+		}
+		const block = blockFromNode(current.node);
+		const next = createContentNode(schema, typeName, props, patch.content ?? block.content, patch.rows ?? block.rows);
+		tr.replaceWith(current.contentPos, current.contentPos + content.nodeSize, next);
+		return true;
+	}
+	/** Remove blocks with their children. The document always keeps one block. */
+	removeBlocks(ids) {
+		const infos = outermost(this.tr.doc, ids, "removeBlocks");
+		if (!infos.length) return false;
+		deleteInfos(this.tr, infos);
+		const tr = this.tr;
+		if (tr.doc.content.size === 0) tr.insert(0, emptyBlock(tr.doc.type.schema));
+		return true;
+	}
+	/**
+	* Move blocks, in the order given, to `placement`. Fails when it is
+	* inside one of them.
+	*/
+	moveBlocks(ids, placement) {
+		const tr = this.tr;
+		const infos = outermost(tr.doc, ids, "moveBlocks");
+		if (!infos.length) return false;
+		const anchor = "before" in placement ? placement.before : "after" in placement ? placement.after : placement.parent;
+		if (anchor !== null && infos.some((info) => info.node.attrs.id === anchor || contains(info, tr.doc, anchor))) {
+			warn("moveBlocks: blocks cannot be moved next to or into themselves");
+			return false;
+		}
+		const nodes = infos.map((info) => info.node);
+		const { anchor: anchorPos, head } = tr.selection;
+		const nodeSelected = tr.selection instanceof NodeSelection;
+		const carried = infos.findIndex((info) => anchorPos > info.pos && anchorPos < info.pos + info.node.nodeSize && head > info.pos && head < info.pos + info.node.nodeSize);
+		const base = tr.steps.length;
+		const at = insertNodes(tr, placement, nodes);
+		if (at === null) return false;
+		const inserted = tr.steps.length;
+		deleteInfos(tr, infos, base);
+		if (carried >= 0) {
+			const info = infos[carried];
+			let start = at;
+			for (let i = 0; i < carried; i++) start += nodes[i].nodeSize;
+			const moved = tr.mapping.slice(inserted).map(start, 1);
+			const shift = (pos) => moved + (pos - info.pos);
+			tr.setSelection(nodeSelected ? NodeSelection.create(tr.doc, shift(anchorPos)) : TextSelection.create(tr.doc, shift(anchorPos), shift(head)));
+		}
+		return true;
+	}
+	/** Put the cursor at the start or end of a block's text (or select a block without text). */
+	focusBlock(id, edge = "end") {
+		const tr = this.tr;
+		const info = findBlockById(tr.doc, id);
+		if (!info) {
+			warn(`focusBlock: no block with the id "${id}"`);
+			return false;
+		}
+		tr.setSelection(selectionIn(tr, info, edge)).scrollIntoView();
+		this.focused = true;
+		return true;
+	}
+	/** After the selection's block, or at the end. */
+	defaultPlacement() {
+		if (!this.hasCursor && !this.tr.selectionSet) return { parent: null };
+		const range = this.tr.docChanged ? null : blockSelectionRange(this.before);
+		const id = range ? range.parent.child(range.to).attrs.id : blockAround(this.tr.selection.$to)?.node.attrs.id;
+		return id ? { after: id } : { parent: null };
+	}
+};
+function emptyBlock(schema) {
+	return schema.nodes.block.create({ id: createId() }, schema.nodes.paragraph.create());
+}
+function usedIds(doc) {
+	const ids = /* @__PURE__ */ new Set();
+	doc.descendants((node) => {
+		if (node.type.name === "block") ids.add(node.attrs.id);
+		return node.type.name === "block" || node.type.name === "blockGroup";
+	});
+	return ids;
+}
+/** The block with ids that are free, recursively. */
+function freshIds(block, taken) {
+	let id = block.id;
+	if (!id || taken.has(id)) id = createId();
+	taken.add(id);
+	return {
+		...block,
+		id,
+		children: block.children?.map((child) => freshIds(child, taken))
+	};
+}
+/** Whether a block with `id` sits inside `info`. */
+function contains(info, doc, id) {
+	const found = findBlockById(doc, id);
+	return !!found && found.pos > info.pos && found.pos < info.pos + info.node.nodeSize;
+}
+/** The blocks with these ids, without those inside another one of them, in the order given. */
+function outermost(doc, ids, method) {
+	const infos = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const id of ids) {
+		if (seen.has(id)) continue;
+		seen.add(id);
+		const info = findBlockById(doc, id);
+		if (info) infos.push(info);
+		else warn(`${method}: no block with the id "${id}"`);
+	}
+	return infos.filter((info) => !infos.some((other) => other !== info && info.pos > other.pos && info.pos < other.pos + other.node.nodeSize));
+}
+/**
+* Delete blocks found in the document as it was after step `base`; a
+* group left without children goes too.
+*/
+function deleteInfos(tr, infos, base = tr.steps.length) {
+	const sorted = [...infos].sort((a, b) => b.pos - a.pos);
+	for (const info of sorted) {
+		const from = tr.mapping.slice(base).map(info.pos, 1);
+		const to = from + info.node.nodeSize;
+		const $from = tr.doc.resolve(from);
+		if ($from.parent.type.name === "blockGroup" && $from.parent.childCount === 1) tr.delete($from.before(), $from.after());
+		else tr.delete(from, to);
+	}
+}
+/** Insert block nodes at a placement. Returns `false` when the placement can't be found. */
+function insertNodes(tr, placement, nodes) {
+	const schema = tr.doc.type.schema;
+	let at;
+	if ("before" in placement || "after" in placement) {
+		const id = "before" in placement ? placement.before : placement.after;
+		const info = findBlockById(tr.doc, id);
+		if (!info) {
+			warn(`no block with the id "${id}" to insert next to`);
+			return null;
+		}
+		at = "before" in placement ? info.pos : info.pos + info.node.nodeSize;
+	} else if (placement.parent === null) at = childPos(0, tr.doc, placement.index);
+	else {
+		const info = findBlockById(tr.doc, placement.parent);
+		if (!info) {
+			warn(`no block with the id "${placement.parent}" to insert into`);
+			return null;
+		}
+		if (!info.group) {
+			at = info.contentPos + info.content.nodeSize;
+			tr.insert(at, schema.nodes.blockGroup.create(null, nodes));
+			return at + 1;
+		}
+		at = childPos(info.contentPos + info.content.nodeSize + 1, info.group, placement.index);
+	}
+	tr.insert(at, nodes);
+	return at;
+}
+/** The position before the child at `index` of a container whose content starts at `start`. */
+function childPos(start, container, index = container.childCount) {
+	const at = Math.max(0, Math.min(index, container.childCount));
+	let pos = start;
+	for (let i = 0; i < at; i++) pos += container.child(i).nodeSize;
+	return pos;
+}
+function replaceChildren(tr, info, children) {
+	const schema = tr.doc.type.schema;
+	const groupPos = info.contentPos + info.content.nodeSize;
+	const taken = usedIds(tr.doc);
+	info.group?.descendants((node) => {
+		if (node.type.name === "block") taken.delete(node.attrs.id);
+	});
+	const nodes = children.map((child) => nodeFromBlock(schema, freshIds(child, taken)));
+	const group = nodes.length ? schema.nodes.blockGroup.create(null, nodes) : null;
+	const end = info.group ? groupPos + info.group.nodeSize : groupPos;
+	if (group) tr.replaceWith(groupPos, end, group);
+	else if (info.group) tr.delete(groupPos, end);
+}
+/** A cursor at the start or end of a block's text; a node selection for a block without text. */
+function selectionIn(tr, info, edge) {
+	const content = info.content;
+	const doc = tr.doc;
+	if (content.isTextblock) {
+		const pos = edge === "start" ? info.contentPos + 1 : info.contentPos + content.nodeSize - 1;
+		return TextSelection.create(doc, pos);
+	}
+	if (content.isAtom) return NodeSelection.create(doc, info.contentPos);
+	const inside = edge === "start" ? info.contentPos + 1 : info.contentPos + content.nodeSize - 1;
+	return Selection.near(doc.resolve(inside), edge === "start" ? 1 : -1);
+}
+/**
+* Apply a transaction made with `transact`: one undo step of its own,
+* unless `history` is `false`. Returns whether anything happened.
+*/
+function applyEditorTransaction(view, transaction) {
+	const { tr, meta } = transaction;
+	if (!tr.docChanged && !tr.selectionSet) return false;
+	if (meta.origin !== void 0) tr.setMeta(originKey, meta.origin);
+	if (!tr.docChanged) {
+		view.dispatch(tr);
+		return true;
+	}
+	if (meta.history === false) {
+		tr.setMeta("addToHistory", false);
+		view.dispatch(tr);
+		return true;
+	}
+	view.dispatch(closeHistory(tr).setMeta(ownStepKey, true));
+	view.dispatch(closeHistory(view.state.tr));
+	return true;
+}
+export { EditorTransaction, applyEditorTransaction, ownStepKey, selectionIn };
+
+//# sourceMappingURL=transaction.js.map

package/dist/core/transaction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transaction.js","names":[],"sources":["../../src/core/transaction.ts"],"sourcesContent":["import type { Node as PMNode, Schema } from 'prosemirror-model'\nimport {\n  NodeSelection,\n  Selection,\n  TextSelection,\n  type EditorState,\n  type Transaction,\n} from 'prosemirror-state'\nimport { blockAround, findBlockById, type BlockInfo } from './blocks'\nimport { blockSelectionRange } from './block-selection'\nimport {\n  blockFromNode,\n  contentAttrs,\n  createContentNode,\n  createId,\n  nodeFromBlock,\n  type Block,\n  type BlockProps,\n  type InlineContent,\n  type PartialBlock,\n  type PartialTableRow,\n} from './model'\nimport type { ContentType } from './schema'\nimport { closeHistory } from 'prosemirror-history'\nimport type { EditorView } from 'prosemirror-view'\nimport { originKey } from './editor'\n\n/**\n * Where blocks go: right before or after a block, or among a block's\n * children (`parent: null` is the top level). `index` counts from 0 and\n * defaults to the end.\n */\nexport type BlockPlacement =\n  { before: string } | { after: string } | { parent: string | null; index?: number }\n\n/** The parts of a block to change. `props` are merged into the current ones. */\nexport interface BlockPatch {\n  type?: ContentType\n  props?: BlockProps\n  /** Inline content, or plain text. */\n  content?: InlineContent[] | string\n  rows?: PartialTableRow[]\n  /** Replaces all children; `[]` removes them. */\n  children?: PartialBlock[]\n}\n\nexport interface EditorTransactionMeta {\n  /** `false` keeps the change out of undo, e.g. a fix made by the program. */\n  history?: boolean\n  /** Who made the change; passed on to the `transaction` event. */\n  origin?: string\n}\n\n/** Where a selection is put inside a block: at the start of its text or at the end. */\nexport type BlockEdge = 'start' | 'end'\n\n/**\n * Set on a transaction that is an undo step of its own, for history\n * providers other than the built-in one (collaboration reads it).\n */\nexport const ownStepKey = 'douOwnStep'\n\nconst warn = (message: string) => {\n  if (process.env.NODE_ENV !== 'production') console.warn(`[@dou-ui/editor] ${message}`)\n}\n\n/**\n * Changes made by blocks and ids, applied together as one undo step. Ids\n * are looked up in the document as it is after the earlier calls.\n */\nexport class EditorTransaction {\n  /** The ProseMirror transaction underneath, for anything the methods don't cover. */\n  readonly tr: Transaction\n  readonly meta: EditorTransactionMeta\n  /** `focusBlock` was called: the editor takes focus once the changes are applied. */\n  focused = false\n\n  constructor(\n    /** The state the changes start from. */\n    readonly before: EditorState,\n    meta: EditorTransactionMeta = {},\n    /**\n     * Whether the selection was placed by the user or the program. An editor\n     * that never had focus has its selection at the start, which is no cursor.\n     */\n    private readonly hasCursor = true,\n  ) {\n    this.tr = before.tr\n    this.meta = { ...meta }\n  }\n\n  get changed(): boolean {\n    return this.tr.docChanged\n  }\n\n  setMeta(meta: EditorTransactionMeta): this {\n    Object.assign(this.meta, meta)\n    return this\n  }\n\n  /** A block as it is now, or `null`. */\n  getBlock(id: string): Block | null {\n    const info = findBlockById(this.tr.doc, id)\n    return info ? blockFromNode(info.node) : null\n  }\n\n  /**\n   * Insert blocks, by default after the block with the cursor (at the end\n   * without one). Returns the new blocks' ids; an id already in the\n   * document is replaced with a fresh one.\n   */\n  insertBlocks(blocks: PartialBlock[], placement?: BlockPlacement): string[] {\n    if (!blocks.length) return []\n    const tr = this.tr\n    const schema = tr.doc.type.schema\n    const taken = usedIds(tr.doc)\n    const ids: string[] = []\n    const nodes = blocks.map((block) => {\n      const node = nodeFromBlock(schema, freshIds(block, taken))\n      ids.push(node.attrs.id as string)\n      return node\n    })\n    const target = placement ?? this.defaultPlacement()\n    if (insertNodes(tr, target, nodes) === null) return []\n    return ids\n  }\n\n  /** Change a block's type, props, content or children. Returns `false` when it isn't found. */\n  updateBlock(id: string, patch: BlockPatch): boolean {\n    const tr = this.tr\n    const info = findBlockById(tr.doc, id)\n    if (!info) {\n      warn(`updateBlock: no block with the id \"${id}\"`)\n      return false\n    }\n    const schema = tr.doc.type.schema\n    // check everything before changing anything: a refused patch changes nothing\n    const typeName = patch.type ?? info.content.type.name\n    const nodeType = schema.nodes[typeName]\n    if (!nodeType?.isInGroup('blockContent')) {\n      warn(`updateBlock: unknown block type \"${typeName}\"`)\n      return false\n    }\n    const rowsSpec = !!nodeType.spec.rows\n    if (patch.rows !== undefined && !rowsSpec) {\n      warn(`updateBlock: a \"${typeName}\" block has no rows`)\n      return false\n    }\n    if (patch.content !== undefined && (rowsSpec || !nodeType.inlineContent)) {\n      warn(`updateBlock: a \"${typeName}\" block has no text content`)\n      return false\n    }\n    if (patch.children) replaceChildren(tr, info, patch.children)\n    if (\n      patch.type === undefined &&\n      patch.props === undefined &&\n      patch.content === undefined &&\n      patch.rows === undefined\n    )\n      return true\n    const current = findBlockById(tr.doc, id)!\n    const content = current.content\n    const props = { ...content.attrs, ...patch.props }\n    const keepsContent = patch.content === undefined && patch.rows === undefined\n    // keep the text node for node when it can stay: collaborators typing in it keep their place\n    if (keepsContent && nodeType === content.type) {\n      tr.setNodeMarkup(current.contentPos, undefined, contentAttrs(nodeType, props))\n      return true\n    }\n    if (keepsContent && nodeType.isTextblock && content.isTextblock) {\n      const from = current.contentPos\n      tr.setBlockType(\n        from + 1,\n        from + content.nodeSize - 1,\n        nodeType,\n        contentAttrs(nodeType, props),\n      )\n      return true\n    }\n    const block = blockFromNode(current.node)\n    const next = createContentNode(\n      schema,\n      typeName,\n      props,\n      patch.content ?? block.content,\n      patch.rows ?? block.rows,\n    )\n    tr.replaceWith(current.contentPos, current.contentPos + content.nodeSize, next)\n    return true\n  }\n\n  /** Remove blocks with their children. The document always keeps one block. */\n  removeBlocks(ids: string[]): boolean {\n    const infos = outermost(this.tr.doc, ids, 'removeBlocks')\n    if (!infos.length) return false\n    deleteInfos(this.tr, infos)\n    const tr = this.tr\n    if (tr.doc.content.size === 0) tr.insert(0, emptyBlock(tr.doc.type.schema))\n    return true\n  }\n\n  /**\n   * Move blocks, in the order given, to `placement`. Fails when it is\n   * inside one of them.\n   */\n  moveBlocks(ids: string[], placement: BlockPlacement): boolean {\n    const tr = this.tr\n    const infos = outermost(tr.doc, ids, 'moveBlocks')\n    if (!infos.length) return false\n    const anchor =\n      'before' in placement\n        ? placement.before\n        : 'after' in placement\n          ? placement.after\n          : placement.parent\n    if (\n      anchor !== null &&\n      infos.some((info) => info.node.attrs.id === anchor || contains(info, tr.doc, anchor))\n    ) {\n      warn('moveBlocks: blocks cannot be moved next to or into themselves')\n      return false\n    }\n    // insert the moved blocks first, then delete the originals: the document never empties\n    const nodes = infos.map((info) => info.node)\n    // a selection inside a moved block goes along with it\n    const { anchor: anchorPos, head } = tr.selection\n    const nodeSelected = tr.selection instanceof NodeSelection\n    const carried = infos.findIndex(\n      (info) =>\n        anchorPos > info.pos &&\n        anchorPos < info.pos + info.node.nodeSize &&\n        head > info.pos &&\n        head < info.pos + info.node.nodeSize,\n    )\n    const base = tr.steps.length\n    const at = insertNodes(tr, placement, nodes)\n    if (at === null) return false\n    const inserted = tr.steps.length\n    deleteInfos(tr, infos, base)\n    if (carried >= 0) {\n      const info = infos[carried]!\n      let start = at\n      for (let i = 0; i < carried; i++) start += nodes[i]!.nodeSize\n      const moved = tr.mapping.slice(inserted).map(start, 1)\n      const shift = (pos: number) => moved + (pos - info.pos)\n      tr.setSelection(\n        nodeSelected\n          ? NodeSelection.create(tr.doc, shift(anchorPos))\n          : TextSelection.create(tr.doc, shift(anchorPos), shift(head)),\n      )\n    }\n    return true\n  }\n\n  /** Put the cursor at the start or end of a block's text (or select a block without text). */\n  focusBlock(id: string, edge: BlockEdge = 'end'): boolean {\n    const tr = this.tr\n    const info = findBlockById(tr.doc, id)\n    if (!info) {\n      warn(`focusBlock: no block with the id \"${id}\"`)\n      return false\n    }\n    tr.setSelection(selectionIn(tr, info, edge)).scrollIntoView()\n    this.focused = true\n    return true\n  }\n\n  /** After the selection's block, or at the end. */\n  private defaultPlacement(): BlockPlacement {\n    if (!this.hasCursor && !this.tr.selectionSet) return { parent: null }\n    // selected blocks are only known before the first change\n    const range = this.tr.docChanged ? null : blockSelectionRange(this.before)\n    const id = range\n      ? (range.parent.child(range.to).attrs.id as string)\n      : (blockAround(this.tr.selection.$to)?.node.attrs.id as string | undefined)\n    return id ? { after: id } : { parent: null }\n  }\n}\n\nfunction emptyBlock(schema: Schema): PMNode {\n  return schema.nodes.block!.create({ id: createId() }, schema.nodes.paragraph!.create())\n}\n\nfunction usedIds(doc: PMNode): Set<string> {\n  const ids = new Set<string>()\n  doc.descendants((node) => {\n    if (node.type.name === 'block') ids.add(node.attrs.id as string)\n    return node.type.name === 'block' || node.type.name === 'blockGroup'\n  })\n  return ids\n}\n\n/** The block with ids that are free, recursively. */\nfunction freshIds(block: PartialBlock, taken: Set<string>): PartialBlock {\n  let id = block.id\n  if (!id || taken.has(id)) id = createId()\n  taken.add(id)\n  return {\n    ...block,\n    id,\n    children: block.children?.map((child) => freshIds(child, taken)),\n  }\n}\n\n/** Whether a block with `id` sits inside `info`. */\nfunction contains(info: BlockInfo, doc: PMNode, id: string): boolean {\n  const found = findBlockById(doc, id)\n  return !!found && found.pos > info.pos && found.pos < info.pos + info.node.nodeSize\n}\n\n/** The blocks with these ids, without those inside another one of them, in the order given. */\nfunction outermost(doc: PMNode, ids: string[], method: string): BlockInfo[] {\n  const infos: BlockInfo[] = []\n  const seen = new Set<string>()\n  for (const id of ids) {\n    if (seen.has(id)) continue\n    seen.add(id)\n    const info = findBlockById(doc, id)\n    if (info) infos.push(info)\n    else warn(`${method}: no block with the id \"${id}\"`)\n  }\n  return infos.filter(\n    (info) =>\n      !infos.some(\n        (other) =>\n          other !== info && info.pos > other.pos && info.pos < other.pos + other.node.nodeSize,\n      ),\n  )\n}\n\n/**\n * Delete blocks found in the document as it was after step `base`; a\n * group left without children goes too.\n */\nfunction deleteInfos(tr: Transaction, infos: BlockInfo[], base = tr.steps.length) {\n  // last first, so the earlier positions stay valid\n  // oxlint-disable-next-line unicorn/no-array-sort -- sorts a copy\n  const sorted = [...infos].sort((a, b) => b.pos - a.pos)\n  for (const info of sorted) {\n    // a block moved right in front of this one pushes it on (`1`)\n    const from = tr.mapping.slice(base).map(info.pos, 1)\n    const to = from + info.node.nodeSize\n    const $from = tr.doc.resolve(from)\n    if ($from.parent.type.name === 'blockGroup' && $from.parent.childCount === 1)\n      tr.delete($from.before(), $from.after())\n    else tr.delete(from, to)\n  }\n}\n\n/** Insert block nodes at a placement. Returns `false` when the placement can't be found. */\nfunction insertNodes(tr: Transaction, placement: BlockPlacement, nodes: PMNode[]): number | null {\n  const schema = tr.doc.type.schema\n  let at: number\n  if ('before' in placement || 'after' in placement) {\n    const id = 'before' in placement ? placement.before : placement.after\n    const info = findBlockById(tr.doc, id)\n    if (!info) {\n      warn(`no block with the id \"${id}\" to insert next to`)\n      return null\n    }\n    at = 'before' in placement ? info.pos : info.pos + info.node.nodeSize\n  } else if (placement.parent === null) {\n    at = childPos(0, tr.doc, placement.index)\n  } else {\n    const info = findBlockById(tr.doc, placement.parent)\n    if (!info) {\n      warn(`no block with the id \"${placement.parent}\" to insert into`)\n      return null\n    }\n    if (!info.group) {\n      at = info.contentPos + info.content.nodeSize\n      tr.insert(at, schema.nodes.blockGroup!.create(null, nodes))\n      return at + 1\n    }\n    at = childPos(info.contentPos + info.content.nodeSize + 1, info.group, placement.index)\n  }\n  tr.insert(at, nodes)\n  return at\n}\n\n/** The position before the child at `index` of a container whose content starts at `start`. */\nfunction childPos(start: number, container: PMNode, index = container.childCount) {\n  const at = Math.max(0, Math.min(index, container.childCount))\n  let pos = start\n  for (let i = 0; i < at; i++) pos += container.child(i).nodeSize\n  return pos\n}\n\nfunction replaceChildren(tr: Transaction, info: BlockInfo, children: PartialBlock[]) {\n  const schema = tr.doc.type.schema\n  const groupPos = info.contentPos + info.content.nodeSize\n  const taken = usedIds(tr.doc)\n  // the old children's ids are free again\n  info.group?.descendants((node) => {\n    if (node.type.name === 'block') taken.delete(node.attrs.id as string)\n  })\n  const nodes = children.map((child) => nodeFromBlock(schema, freshIds(child, taken)))\n  const group = nodes.length ? schema.nodes.blockGroup!.create(null, nodes) : null\n  const end = info.group ? groupPos + info.group.nodeSize : groupPos\n  if (group) tr.replaceWith(groupPos, end, group)\n  else if (info.group) tr.delete(groupPos, end)\n}\n\n/** A cursor at the start or end of a block's text; a node selection for a block without text. */\nexport function selectionIn(tr: Transaction, info: BlockInfo, edge: BlockEdge): Selection {\n  const content = info.content\n  const doc = tr.doc\n  if (content.isTextblock) {\n    const pos = edge === 'start' ? info.contentPos + 1 : info.contentPos + content.nodeSize - 1\n    return TextSelection.create(doc, pos)\n  }\n  if (content.isAtom) return NodeSelection.create(doc, info.contentPos)\n  // a table: the first or last cell's text\n  const inside = edge === 'start' ? info.contentPos + 1 : info.contentPos + content.nodeSize - 1\n  return Selection.near(doc.resolve(inside), edge === 'start' ? 1 : -1)\n}\n\n/**\n * Apply a transaction made with `transact`: one undo step of its own,\n * unless `history` is `false`. Returns whether anything happened.\n */\nexport function applyEditorTransaction(view: EditorView, transaction: EditorTransaction): boolean {\n  const { tr, meta } = transaction\n  if (!tr.docChanged && !tr.selectionSet) return false\n  if (meta.origin !== undefined) tr.setMeta(originKey, meta.origin)\n  if (!tr.docChanged) {\n    view.dispatch(tr)\n    return true\n  }\n  if (meta.history === false) {\n    tr.setMeta('addToHistory', false)\n    view.dispatch(tr)\n    return true\n  }\n  view.dispatch(closeHistory(tr).setMeta(ownStepKey, true))\n  // and typing right after it starts another step\n  view.dispatch(closeHistory(view.state.tr))\n  return true\n}\n"],"mappings":"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"}

package/dist/define-block.js

@@ -0,0 +1,177 @@
+import { defineComponent, h, inject, onMounted, provide, render, shallowReactive, shallowRef } from "vue";
+// src/define-block.ts
+var contentKey = Symbol("DouEditorContent");
+/** Where a block component's text goes. */
+var EditorContent = defineComponent({
+	name: "DouEditorContent",
+	props: { as: {
+		type: String,
+		default: "div"
+	} },
+	setup(props) {
+		const content = inject(contentKey, null);
+		const host = shallowRef(null);
+		onMounted(() => {
+			if (content && host.value) host.value.append(content);
+		});
+		return () => h(props.as, {
+			ref: host,
+			class: "dou-editor__text"
+		});
+	}
+});
+/** Store props as `data-prop-*` attributes, so copy and paste keep them. */
+var dataAttrs = (props) => Object.fromEntries(Object.entries(props).map(([name, value]) => [`data-prop-${name}`, JSON.stringify(value)]));
+function readDataAttrs(dom, names) {
+	const attrs = {};
+	for (const name of names) {
+		const raw = dom.getAttribute(`data-prop-${name}`);
+		if (raw === null) continue;
+		try {
+			attrs[name] = JSON.parse(raw);
+		} catch {}
+	}
+	return attrs;
+}
+/** Renders components inside an app, with values provided to them. */
+function componentMounter(appContext, provides = []) {
+	return (component, props, element) => {
+		const Root = defineComponent({ setup() {
+			for (const [key, value] of provides) provide(key, value);
+			return () => h(component, { ...props });
+		} });
+		const vnode = h(Root);
+		vnode.appContext = appContext;
+		render(vnode, element);
+		return () => render(null, element);
+	};
+}
+/**
+* A node view that renders a Vue component. Everything the component shows
+* besides the text is outside the editable content, so its buttons and
+* inputs work as usual.
+*/
+function vueNodeView(component, appContext, provides = []) {
+	return (node, view, getPos) => {
+		const idOf = () => {
+			const pos = getPos();
+			if (pos === void 0) return "";
+			return view.state.doc.resolve(pos).parent.attrs.id ?? "";
+		};
+		const type = node.type.name;
+		const dom = document.createElement("div");
+		dom.className = `dou-editor__content dou-editor__content--${type} dou-editor__content--custom`;
+		dom.dataset.contentType = type;
+		const contentElement = node.isTextblock ? document.createElement("div") : null;
+		const state = shallowReactive({
+			block: {
+				id: idOf(),
+				type,
+				props: { ...node.attrs }
+			},
+			selected: false,
+			editable: view.editable,
+			updateProps(props) {
+				const pos = getPos();
+				if (pos === void 0) return;
+				const current = view.state.doc.nodeAt(pos);
+				if (!current) return;
+				view.dispatch(view.state.tr.setNodeMarkup(pos, void 0, {
+					...current.attrs,
+					...props
+				}));
+			}
+		});
+		const Root = defineComponent({ setup() {
+			provide(contentKey, contentElement);
+			for (const [key, value] of provides) provide(key, value);
+			return () => h(component, { ...state });
+		} });
+		const vnode = h(Root);
+		vnode.appContext = appContext;
+		render(vnode, dom);
+		let current = node;
+		return {
+			dom,
+			contentDOM: contentElement,
+			update(next) {
+				if (next.type !== current.type) return false;
+				current = next;
+				state.block = {
+					id: idOf(),
+					type,
+					props: { ...next.attrs }
+				};
+				state.editable = view.editable;
+				return true;
+			},
+			selectNode() {
+				state.selected = true;
+			},
+			deselectNode() {
+				state.selected = false;
+			},
+			stopEvent: (event) => {
+				const target = event.target;
+				if (contentElement?.contains(target)) return false;
+				return !!target.closest?.("input, textarea, select, button, a, [contenteditable=\"true\"], [data-editor-control]");
+			},
+			ignoreMutation: (mutation) => !contentElement || !contentElement.contains(mutation.target),
+			destroy() {
+				render(null, dom);
+			}
+		};
+	};
+}
+/**
+* Declare a block type rendered by a Vue component (or by plain DOM), with
+* its props stored in the document. Returns an extension for `extensions`.
+*/
+function defineBlock(options) {
+	const { type } = options;
+	const props = options.props ?? {};
+	const names = Object.keys(props);
+	const inline = (options.content ?? "inline") === "inline";
+	const spec = {
+		attrs: Object.fromEntries(names.map((name) => [name, { default: props[name] }])),
+		...inline ? {
+			content: "inline*",
+			defining: true
+		} : {
+			atom: true,
+			selectable: true
+		},
+		continues: options.continues,
+		component: options.component,
+		parseDOM: [{
+			tag: `div[data-content-type="${type}"]`,
+			getAttrs: (dom) => readDataAttrs(dom, names)
+		}],
+		toDOM: (node) => {
+			const attrs = {
+				class: `dou-editor__content dou-editor__content--${type}`,
+				"data-content-type": type,
+				...dataAttrs(node.attrs)
+			};
+			return inline ? [
+				"div",
+				attrs,
+				0
+			] : ["div", attrs];
+		},
+		...options.spec
+	};
+	const menu = options.menu;
+	return {
+		name: `block:${type}`,
+		blocks: { [type]: spec },
+		blockOptions: menu ? [{
+			...menu,
+			key: menu.key ?? type,
+			type
+		}] : []
+	};
+}
+export { EditorContent, componentMounter, defineBlock, vueNodeView };
+
+//# sourceMappingURL=define-block.js.map

package/dist/define-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-block.js","names":[],"sources":["../src/define-block.ts"],"sourcesContent":["import type { NodeSpec } from 'prosemirror-model'\nimport type { NodeView, NodeViewConstructor } from 'prosemirror-view'\nimport {\n  defineComponent,\n  h,\n  inject,\n  onMounted,\n  provide,\n  render,\n  shallowReactive,\n  shallowRef,\n  type AppContext,\n  type Component,\n  type InjectionKey,\n  type PropType,\n} from 'vue'\nimport type { BlockOption, EditorExtension, Label, MountComponent } from './core/extension'\nimport type { BlockProps } from './core/model'\n\n/** What a block's Vue component receives. */\nexport interface BlockViewProps {\n  /** The block's id, type and current props. */\n  block: { id: string; type: string; props: BlockProps }\n  /** Change props; the change goes into the document, the undo history and collaboration. */\n  updateProps: (props: BlockProps) => void\n  /** The block is selected as a whole (a block without text was clicked). */\n  selected: boolean\n  editable: boolean\n}\n\nexport interface DefineBlockOptions {\n  type: string\n  /** The props and their defaults. They are stored in the document, as `Block.props`. */\n  props?: Record<string, unknown>\n  /** `inline` holds formatted text; `none` has no text (an image, an embed). Defaults to `inline`. */\n  content?: 'inline' | 'none'\n  /** Renders the block. Put `<EditorContent />` where the text goes. */\n  component?: Component\n  /** `Enter` at the end continues with the same type, like a list. */\n  continues?: boolean\n  /** Entries for the slash menu and the “turn into” menus; one is made from `menu` when given. */\n  menu?: Omit<BlockOption, 'key' | 'type'> & { key?: string }\n  /** Override the ProseMirror spec, e.g. `parseDOM` for pasting HTML from elsewhere. */\n  spec?: Partial<NodeSpec>\n}\n\nconst contentKey: InjectionKey<HTMLElement | null> = Symbol('DouEditorContent')\n\n/** Where a block component's text goes. */\nexport const EditorContent = defineComponent({\n  name: 'DouEditorContent',\n  props: { as: { type: String as PropType<string>, default: 'div' } },\n  setup(props) {\n    const content = inject(contentKey, null)\n    const host = shallowRef<HTMLElement | null>(null)\n    onMounted(() => {\n      if (content && host.value) host.value.append(content)\n    })\n    return () => h(props.as, { ref: host, class: 'dou-editor__text' })\n  },\n})\n\n/** Store props as `data-prop-*` attributes, so copy and paste keep them. */\nconst dataAttrs = (props: Record<string, unknown>) =>\n  Object.fromEntries(\n    Object.entries(props).map(([name, value]) => [`data-prop-${name}`, JSON.stringify(value)]),\n  )\n\nfunction readDataAttrs(dom: HTMLElement, names: string[]) {\n  const attrs: Record<string, unknown> = {}\n  for (const name of names) {\n    const raw = dom.getAttribute(`data-prop-${name}`)\n    if (raw === null) continue\n    try {\n      attrs[name] = JSON.parse(raw)\n    } catch {\n      // ignore attributes that are not ours\n    }\n  }\n  return attrs\n}\n\n/** Renders components inside an app, with values provided to them. */\nexport function componentMounter(\n  appContext: AppContext | null,\n  provides: [InjectionKey<unknown>, unknown][] = [],\n): MountComponent {\n  return (component, props, element) => {\n    const Root = defineComponent({\n      setup() {\n        for (const [key, value] of provides) provide(key, value)\n        return () => h(component, { ...props })\n      },\n    })\n    const vnode = h(Root)\n    vnode.appContext = appContext\n    render(vnode, element)\n    return () => render(null, element)\n  }\n}\n\n/**\n * A node view that renders a Vue component. Everything the component shows\n * besides the text is outside the editable content, so its buttons and\n * inputs work as usual.\n */\nexport function vueNodeView(\n  component: Component,\n  appContext: AppContext | null,\n  provides: [InjectionKey<unknown>, unknown][] = [],\n): NodeViewConstructor {\n  return (node, view, getPos) => {\n    // the id lives on the block around the content node\n    const idOf = () => {\n      const pos = getPos()\n      if (pos === undefined) return ''\n      return (view.state.doc.resolve(pos).parent.attrs.id as string | null) ?? ''\n    }\n    const type = node.type.name\n    const dom = document.createElement('div')\n    dom.className = `dou-editor__content dou-editor__content--${type} dou-editor__content--custom`\n    dom.dataset.contentType = type\n    const contentElement = node.isTextblock ? document.createElement('div') : null\n    const state = shallowReactive<BlockViewProps>({\n      block: { id: idOf(), type, props: { ...node.attrs } },\n      selected: false,\n      editable: view.editable,\n      updateProps(props) {\n        const pos = getPos()\n        if (pos === undefined) return\n        const current = view.state.doc.nodeAt(pos)\n        if (!current) return\n        view.dispatch(view.state.tr.setNodeMarkup(pos, undefined, { ...current.attrs, ...props }))\n      },\n    })\n    const Root = defineComponent({\n      setup() {\n        provide(contentKey, contentElement)\n        for (const [key, value] of provides) provide(key, value)\n        return () => h(component, { ...state })\n      },\n    })\n    const vnode = h(Root)\n    vnode.appContext = appContext\n    render(vnode, dom)\n    let current = node\n    const nodeView: NodeView = {\n      dom,\n      contentDOM: contentElement,\n      update(next) {\n        if (next.type !== current.type) return false\n        current = next\n        state.block = { id: idOf(), type, props: { ...next.attrs } }\n        state.editable = view.editable\n        return true\n      },\n      selectNode() {\n        state.selected = true\n      },\n      deselectNode() {\n        state.selected = false\n      },\n      // the component's own controls (and anything marked `data-editor-control`)\n      // handle their events; the editor gets the rest, so a click on a block\n      // without text still selects it\n      stopEvent: (event) => {\n        const target = event.target as HTMLElement\n        if (contentElement?.contains(target)) return false\n        return !!target.closest?.(\n          'input, textarea, select, button, a, [contenteditable=\"true\"], [data-editor-control]',\n        )\n      },\n      ignoreMutation: (mutation) => !contentElement || !contentElement.contains(mutation.target),\n      destroy() {\n        render(null, dom)\n      },\n    }\n    return nodeView\n  }\n}\n\n/**\n * Declare a block type rendered by a Vue component (or by plain DOM), with\n * its props stored in the document. Returns an extension for `extensions`.\n */\nexport function defineBlock(options: DefineBlockOptions): EditorExtension {\n  const { type } = options\n  const props = options.props ?? {}\n  const names = Object.keys(props)\n  const inline = (options.content ?? 'inline') === 'inline'\n  const spec: NodeSpec = {\n    attrs: Object.fromEntries(names.map((name) => [name, { default: props[name] }])),\n    ...(inline ? { content: 'inline*', defining: true } : { atom: true, selectable: true }),\n    continues: options.continues,\n    component: options.component,\n    parseDOM: [\n      {\n        tag: `div[data-content-type=\"${type}\"]`,\n        getAttrs: (dom) => readDataAttrs(dom as HTMLElement, names),\n      },\n    ],\n    toDOM: (node) => {\n      const attrs = {\n        class: `dou-editor__content dou-editor__content--${type}`,\n        'data-content-type': type,\n        ...dataAttrs(node.attrs),\n      }\n      return inline ? ['div', attrs, 0] : ['div', attrs]\n    },\n    ...options.spec,\n  }\n  const menu = options.menu\n  return {\n    name: `block:${type}`,\n    blocks: { [type]: spec },\n    blockOptions: menu ? [{ ...menu, key: menu.key ?? type, type }] : [],\n  }\n}\n\nexport type { Label }\n"],"mappings":"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"}