@rtdui/editor/cjs/RichTextEditor/tiptap_extensions/extension-math/math-katex-block-plugin.cjs

React rich text editor based on tiptap

const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
let _tiptap_core = require("@tiptap/core");
let katex = require("katex");
katex = require_runtime.__toESM(katex);
let prosemirror_state = require("prosemirror-state");
let prosemirror_view = require("prosemirror-view");

//#region packages/editor/src/RichTextEditor/tiptap_extensions/extension-math/math-katex-block-plugin.ts
function getDecorations({ editor, doc, name, katexOptions, selection }) {
	const decorations = [];
	(0, _tiptap_core.findChildren)(doc, (node) => node.type.name === name).forEach((block) => {
		const from = block.pos + 1;
		const to = from + block.node.textContent.length;
		const mathText = block.node.textContent;
		if (selection.$anchor.pos < from || selection.$anchor.pos > to || !editor.isEditable) {
			const mathRender = document.createElement("div");
			mathRender.classList.add("tiptap-math-render");
			katex.default.render(mathText, mathRender, {
				displayMode: true,
				output: "html"
			});
			const decoration = prosemirror_view.Decoration.widget(from, mathRender);
			decorations.push(decoration);
			const decoration2 = prosemirror_view.Decoration.inline(from, to, {
				nodeName: "pre",
				class: "titap-math-source hidden"
			});
			decorations.push(decoration2);
		} else if (editor.isEditable) {
			const decoration2 = prosemirror_view.Decoration.inline(from, to, {
				nodeName: "pre",
				class: "titap-math-source"
			});
			decorations.push(decoration2);
		}
	});
	return prosemirror_view.DecorationSet.create(doc, decorations);
}
function KatexBlockPlugin({ editor, name, katexOptions }) {
	const katexBlockPlugin = new prosemirror_state.Plugin({
		key: new prosemirror_state.PluginKey("mathKatexBlock"),
		state: {
			init: (_, { doc, selection }) => getDecorations({
				editor,
				doc,
				name,
				katexOptions,
				selection
			}),
			apply: (transaction, decorationSet, oldState, newState) => {
				const { selection } = newState;
				return getDecorations({
					editor,
					doc: transaction.doc,
					name,
					katexOptions,
					selection
				});
			}
		},
		props: { decorations(state) {
			return katexBlockPlugin.getState(state);
		} }
	});
	return katexBlockPlugin;
}

//#endregion
exports.KatexBlockPlugin = KatexBlockPlugin;