@tiptap/extension-mathematics 2.22.0

package/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-mathematics
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-mathematics.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-mathematics)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-mathematics.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-mathematics.svg)](https://www.npmjs.com/package/@tiptap/extension-mathematics)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Official Documentation
+Documentation can be found on the [Tiptap website](https://tiptap.dev).
+
+## License
+Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/MathematicsPlugin.d.ts

@@ -0,0 +1,13 @@
+import { Plugin } from '@tiptap/pm/state';
+import { DecorationSet } from '@tiptap/pm/view';
+import { MathematicsOptionsWithEditor } from './types.js';
+type PluginState = {
+    decorations: DecorationSet;
+    isEditable: boolean;
+} | {
+    decorations: undefined;
+    isEditable: undefined;
+};
+export declare const MathematicsPlugin: (options: MathematicsOptionsWithEditor) => Plugin<PluginState>;
+export {};
+//# sourceMappingURL=MathematicsPlugin.d.ts.map

package/dist/MathematicsPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MathematicsPlugin.d.ts","sourceRoot":"","sources":["../src/MathematicsPlugin.ts"],"names":[],"mappings":"AACA,OAAO,EACQ,MAAM,EACpB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAc,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG3D,OAAO,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAA;AAWzD,KAAK,WAAW,GACd;IAAE,WAAW,EAAE,aAAa,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,GACnD;IAAE,WAAW,EAAE,SAAS,CAAC;IAAC,UAAU,EAAE,SAAS,CAAA;CAAE,CAAA;AA8CnD,eAAO,MAAM,iBAAiB,YAAa,4BAA4B,wBA6ItE,CAAA"}

package/dist/index.cjs

@@ -0,0 +1,177 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@tiptap/core');
+var state = require('@tiptap/pm/state');
+var view = require('@tiptap/pm/view');
+var katex = require('katex');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var katex__default = /*#__PURE__*/_interopDefaultCompat(katex);
+
+/**
+ * Get the range of positions that have been affected by a transaction
+ */
+function getAffectedRange(newState, previousPluginState, isEditable, tr, state) {
+    const docSize = newState.doc.nodeSize - 2;
+    let minFrom = 0;
+    let maxTo = docSize;
+    if (previousPluginState.isEditable !== isEditable) {
+        // When the editable state changes, run on all nodes just to be safe
+        minFrom = 0;
+        maxTo = docSize;
+    }
+    else if (tr.docChanged) {
+        // When the document changes, only run on the nodes that have changed
+        minFrom = docSize;
+        maxTo = 0;
+        core.getChangedRanges(tr).forEach(range => {
+            // Purposefully over scan the range to ensure we catch all decorations
+            minFrom = Math.min(minFrom, range.newRange.from - 1, range.oldRange.from - 1);
+            maxTo = Math.max(maxTo, range.newRange.to + 1, range.oldRange.to + 1);
+        });
+    }
+    else if (tr.selectionSet) {
+        const { $from, $to } = state.selection;
+        const { $from: $newFrom, $to: $newTo } = newState.selection;
+        // When the selection changes, run on all the nodes between the old and new selection
+        minFrom = Math.min(
+        // Purposefully over scan the range to ensure we catch all decorations
+        $from.depth === 0 ? 0 : $from.before(), $newFrom.depth === 0 ? 0 : $newFrom.before());
+        maxTo = Math.max($to.depth === 0 ? maxTo : $to.after(), $newTo.depth === 0 ? maxTo : $newTo.after());
+    }
+    return {
+        minFrom: Math.max(minFrom, 0),
+        maxTo: Math.min(maxTo, docSize),
+    };
+}
+const MathematicsPlugin = (options) => {
+    const { regex, katexOptions = {}, editor, shouldRender, } = options;
+    return new state.Plugin({
+        key: new state.PluginKey('mathematics'),
+        state: {
+            init() {
+                return { decorations: undefined, isEditable: undefined };
+            },
+            apply(tr, previousPluginState, state, newState) {
+                if (!tr.docChanged && !tr.selectionSet && previousPluginState.decorations) {
+                    // Just reuse the existing decorations, since nothing should have changed
+                    return previousPluginState;
+                }
+                const nextDecorationSet = (previousPluginState.decorations || view.DecorationSet.empty).map(tr.mapping, tr.doc);
+                const { selection } = newState;
+                const isEditable = editor.isEditable;
+                const decorationsToAdd = [];
+                const { minFrom, maxTo } = getAffectedRange(newState, previousPluginState, isEditable, tr, state);
+                newState.doc.nodesBetween(minFrom, maxTo, (node, pos) => {
+                    const enabled = shouldRender(newState, pos, node);
+                    if (node.isText && node.text && enabled) {
+                        let match;
+                        // eslint-disable-next-line no-cond-assign
+                        while ((match = regex.exec(node.text))) {
+                            const from = pos + match.index;
+                            const to = from + match[0].length;
+                            const content = match.slice(1).find(Boolean);
+                            if (content) {
+                                const selectionSize = selection.from - selection.to;
+                                const anchorIsInside = selection.anchor >= from && selection.anchor <= to;
+                                const rangeIsInside = selection.from >= from && selection.to <= to;
+                                const isEditing = (selectionSize === 0 && anchorIsInside) || rangeIsInside;
+                                if (
+                                // Are the decorations already present?
+                                nextDecorationSet.find(from, to, (deco) => isEditing === deco.isEditing
+                                    && content === deco.content
+                                    && isEditable === deco.isEditable
+                                    && katexOptions === deco.katexOptions).length) {
+                                    // Decoration exists in set, no need to add it again
+                                    continue;
+                                }
+                                // Use an inline decoration to either hide original (preview is showing) or show it (editing "mode")
+                                decorationsToAdd.push(view.Decoration.inline(from, to, {
+                                    class: isEditing && isEditable
+                                        ? 'Tiptap-mathematics-editor'
+                                        : 'Tiptap-mathematics-editor Tiptap-mathematics-editor--hidden',
+                                    style: !isEditing || !isEditable
+                                        ? 'display: inline-block; height: 0; opacity: 0; overflow: hidden; position: absolute; width: 0;'
+                                        : undefined,
+                                }, {
+                                    content,
+                                    isEditable,
+                                    isEditing,
+                                    katexOptions,
+                                }));
+                                if (!isEditable || !isEditing) {
+                                    // Create decoration widget and add KaTeX preview if selection is not within the math-editor
+                                    decorationsToAdd.push(view.Decoration.widget(from, () => {
+                                        const element = document.createElement('span');
+                                        // TODO: changeable class names
+                                        element.classList.add('Tiptap-mathematics-render');
+                                        if (isEditable) {
+                                            element.classList.add('Tiptap-mathematics-render--editable');
+                                        }
+                                        try {
+                                            katex__default.default.render(content, element, katexOptions);
+                                        }
+                                        catch {
+                                            element.innerHTML = content;
+                                        }
+                                        return element;
+                                    }, {
+                                        content,
+                                        isEditable,
+                                        isEditing,
+                                        katexOptions,
+                                    }));
+                                }
+                            }
+                        }
+                    }
+                });
+                // Remove any decorations that exist at the same position, they will be replaced by the new decorations
+                const decorationsToRemove = decorationsToAdd.flatMap(deco => nextDecorationSet.find(deco.from, deco.to));
+                return {
+                    decorations: nextDecorationSet
+                        // Remove existing decorations that are going to be replaced
+                        .remove(decorationsToRemove)
+                        // Add any new decorations
+                        .add(tr.doc, decorationsToAdd),
+                    isEditable,
+                };
+            },
+        },
+        props: {
+            decorations(state) {
+                var _a, _b;
+                return (_b = (_a = this.getState(state)) === null || _a === void 0 ? void 0 : _a.decorations) !== null && _b !== void 0 ? _b : view.DecorationSet.empty;
+            },
+        },
+    });
+};
+
+const defaultShouldRender = (state, pos) => {
+    const $pos = state.doc.resolve(pos);
+    const isInCodeBlock = $pos.parent.type.name === 'codeBlock';
+    return !isInCodeBlock;
+};
+const Mathematics = core.Extension.create({
+    name: 'Mathematics',
+    addOptions() {
+        return {
+            // eslint-disable-next-line no-useless-escape
+            regex: /\$([^\$]*)\$/gi,
+            katexOptions: undefined,
+            shouldRender: defaultShouldRender,
+        };
+    },
+    addProseMirrorPlugins() {
+        return [MathematicsPlugin({ ...this.options, editor: this.editor })];
+    },
+});
+
+exports.Mathematics = Mathematics;
+exports.MathematicsPlugin = MathematicsPlugin;
+exports.default = Mathematics;
+exports.defaultShouldRender = defaultShouldRender;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/MathematicsPlugin.ts","../src/mathematics.ts"],"sourcesContent":["import { getChangedRanges } from '@tiptap/core'\nimport {\n  EditorState, Plugin, PluginKey, Transaction,\n} from '@tiptap/pm/state'\nimport { Decoration, DecorationSet } from '@tiptap/pm/view'\nimport katex from 'katex'\n\nimport { MathematicsOptionsWithEditor } from './types.js'\n\ntype DecoSpec = {\n  isEditable: boolean;\n  isEditing: boolean;\n  katexOptions: MathematicsOptionsWithEditor['katexOptions'];\n  content: string;\n};\n\ntype Deco = Omit<Decoration, 'spec'> & { spec: DecoSpec };\n\ntype PluginState =\n| { decorations: DecorationSet; isEditable: boolean }\n| { decorations: undefined; isEditable: undefined }\n\n/**\n * Get the range of positions that have been affected by a transaction\n */\nfunction getAffectedRange(newState: EditorState, previousPluginState: PluginState, isEditable: boolean, tr: Transaction, state: EditorState) {\n  const docSize = newState.doc.nodeSize - 2\n  let minFrom = 0\n  let maxTo = docSize\n\n  if (previousPluginState.isEditable !== isEditable) {\n    // When the editable state changes, run on all nodes just to be safe\n    minFrom = 0\n    maxTo = docSize\n  } else if (tr.docChanged) {\n    // When the document changes, only run on the nodes that have changed\n    minFrom = docSize\n    maxTo = 0\n\n    getChangedRanges(tr).forEach(range => {\n      // Purposefully over scan the range to ensure we catch all decorations\n      minFrom = Math.min(minFrom, range.newRange.from - 1, range.oldRange.from - 1)\n      maxTo = Math.max(maxTo, range.newRange.to + 1, range.oldRange.to + 1)\n    })\n  } else if (tr.selectionSet) {\n    const { $from, $to } = state.selection\n    const { $from: $newFrom, $to: $newTo } = newState.selection\n\n    // When the selection changes, run on all the nodes between the old and new selection\n    minFrom = Math.min(\n      // Purposefully over scan the range to ensure we catch all decorations\n      $from.depth === 0 ? 0 : $from.before(),\n      $newFrom.depth === 0 ? 0 : $newFrom.before(),\n    )\n    maxTo = Math.max(\n      $to.depth === 0 ? maxTo : $to.after(),\n      $newTo.depth === 0 ? maxTo : $newTo.after(),\n    )\n  }\n\n  return {\n    minFrom: Math.max(minFrom, 0),\n    maxTo: Math.min(maxTo, docSize),\n  }\n}\n\nexport const MathematicsPlugin = (options: MathematicsOptionsWithEditor) => {\n  const {\n    regex, katexOptions = {}, editor, shouldRender,\n  } = options\n\n  return new Plugin<PluginState>({\n    key: new PluginKey('mathematics'),\n\n    state: {\n      init() {\n        return { decorations: undefined, isEditable: undefined }\n      },\n      apply(tr, previousPluginState, state, newState) {\n\n        if (!tr.docChanged && !tr.selectionSet && previousPluginState.decorations) {\n          // Just reuse the existing decorations, since nothing should have changed\n          return previousPluginState\n        }\n\n        const nextDecorationSet = (previousPluginState.decorations || DecorationSet.empty).map(\n          tr.mapping,\n          tr.doc,\n        )\n        const { selection } = newState\n        const isEditable = editor.isEditable\n        const decorationsToAdd = [] as Deco[]\n        const { minFrom, maxTo } = getAffectedRange(newState, previousPluginState, isEditable, tr, state)\n\n        newState.doc.nodesBetween(minFrom, maxTo, (node, pos) => {\n          const enabled = shouldRender(newState, pos, node)\n\n          if (node.isText && node.text && enabled) {\n            let match: RegExpExecArray | null\n\n            // eslint-disable-next-line no-cond-assign\n            while ((match = regex.exec(node.text))) {\n              const from = pos + match.index\n              const to = from + match[0].length\n              const content = match.slice(1).find(Boolean)\n\n              if (content) {\n                const selectionSize = selection.from - selection.to\n                const anchorIsInside = selection.anchor >= from && selection.anchor <= to\n                const rangeIsInside = selection.from >= from && selection.to <= to\n                const isEditing = (selectionSize === 0 && anchorIsInside) || rangeIsInside\n\n                if (\n                  // Are the decorations already present?\n                  nextDecorationSet.find(\n                    from,\n                    to,\n                    (deco: DecoSpec) => isEditing === deco.isEditing\n                      && content === deco.content\n                      && isEditable === deco.isEditable\n                      && katexOptions === deco.katexOptions,\n                  ).length\n                ) {\n                  // Decoration exists in set, no need to add it again\n                  continue\n                }\n                // Use an inline decoration to either hide original (preview is showing) or show it (editing \"mode\")\n                decorationsToAdd.push(\n                  Decoration.inline(\n                    from,\n                    to,\n                    {\n                      class:\n                        isEditing && isEditable\n                          ? 'Tiptap-mathematics-editor'\n                          : 'Tiptap-mathematics-editor Tiptap-mathematics-editor--hidden',\n                      style:\n                        !isEditing || !isEditable\n                          ? 'display: inline-block; height: 0; opacity: 0; overflow: hidden; position: absolute; width: 0;'\n                          : undefined,\n                    },\n                    {\n                      content,\n                      isEditable,\n                      isEditing,\n                      katexOptions,\n                    } satisfies DecoSpec,\n                  ),\n                )\n\n                if (!isEditable || !isEditing) {\n                  // Create decoration widget and add KaTeX preview if selection is not within the math-editor\n                  decorationsToAdd.push(\n                    Decoration.widget(\n                      from,\n                      () => {\n                        const element = document.createElement('span')\n\n                        // TODO: changeable class names\n                        element.classList.add('Tiptap-mathematics-render')\n\n                        if (isEditable) {\n                          element.classList.add('Tiptap-mathematics-render--editable')\n                        }\n\n                        try {\n                          katex.render(content!, element, katexOptions)\n                        } catch {\n                          element.innerHTML = content!\n                        }\n\n                        return element\n                      },\n                      {\n                        content,\n                        isEditable,\n                        isEditing,\n                        katexOptions,\n                      } satisfies DecoSpec,\n                    ),\n                  )\n                }\n              }\n            }\n          }\n        })\n\n        // Remove any decorations that exist at the same position, they will be replaced by the new decorations\n        const decorationsToRemove = decorationsToAdd.flatMap(deco => nextDecorationSet.find(deco.from, deco.to))\n\n        return {\n          decorations: nextDecorationSet\n            // Remove existing decorations that are going to be replaced\n            .remove(decorationsToRemove)\n            // Add any new decorations\n            .add(tr.doc, decorationsToAdd),\n          isEditable,\n        }\n      },\n    },\n\n    props: {\n      decorations(state) {\n        return this.getState(state)?.decorations ?? DecorationSet.empty\n      },\n    },\n  })\n}\n","import { Extension } from '@tiptap/core'\nimport { EditorState } from '@tiptap/pm/state'\n\nimport { MathematicsPlugin } from './MathematicsPlugin.js'\nimport { MathematicsOptions } from './types.js'\n\nexport const defaultShouldRender = (state: EditorState, pos: number) => {\n  const $pos = state.doc.resolve(pos)\n  const isInCodeBlock = $pos.parent.type.name === 'codeBlock'\n\n  return !isInCodeBlock\n}\n\nexport const Mathematics = Extension.create<MathematicsOptions>({\n  name: 'Mathematics',\n\n  addOptions() {\n    return {\n      // eslint-disable-next-line no-useless-escape\n      regex: /\\$([^\\$]*)\\$/gi,\n      katexOptions: undefined,\n      shouldRender: defaultShouldRender,\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [MathematicsPlugin({ ...this.options, editor: this.editor })]\n  },\n})\n\nexport default Mathematics\n"],"names":["getChangedRanges","Plugin","PluginKey","DecorationSet","Decoration","katex","Extension"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { Mathematics } from './mathematics.js';
+export * from './mathematics.js';
+export * from './MathematicsPlugin.js';
+export * from './types.js';
+export default Mathematics;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,cAAc,kBAAkB,CAAA;AAChC,cAAc,wBAAwB,CAAA;AACtC,cAAc,YAAY,CAAA;AAE1B,eAAe,WAAW,CAAA"}

package/dist/index.js

@@ -0,0 +1,166 @@
+import { getChangedRanges, Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { DecorationSet, Decoration } from '@tiptap/pm/view';
+import katex from 'katex';
+
+/**
+ * Get the range of positions that have been affected by a transaction
+ */
+function getAffectedRange(newState, previousPluginState, isEditable, tr, state) {
+    const docSize = newState.doc.nodeSize - 2;
+    let minFrom = 0;
+    let maxTo = docSize;
+    if (previousPluginState.isEditable !== isEditable) {
+        // When the editable state changes, run on all nodes just to be safe
+        minFrom = 0;
+        maxTo = docSize;
+    }
+    else if (tr.docChanged) {
+        // When the document changes, only run on the nodes that have changed
+        minFrom = docSize;
+        maxTo = 0;
+        getChangedRanges(tr).forEach(range => {
+            // Purposefully over scan the range to ensure we catch all decorations
+            minFrom = Math.min(minFrom, range.newRange.from - 1, range.oldRange.from - 1);
+            maxTo = Math.max(maxTo, range.newRange.to + 1, range.oldRange.to + 1);
+        });
+    }
+    else if (tr.selectionSet) {
+        const { $from, $to } = state.selection;
+        const { $from: $newFrom, $to: $newTo } = newState.selection;
+        // When the selection changes, run on all the nodes between the old and new selection
+        minFrom = Math.min(
+        // Purposefully over scan the range to ensure we catch all decorations
+        $from.depth === 0 ? 0 : $from.before(), $newFrom.depth === 0 ? 0 : $newFrom.before());
+        maxTo = Math.max($to.depth === 0 ? maxTo : $to.after(), $newTo.depth === 0 ? maxTo : $newTo.after());
+    }
+    return {
+        minFrom: Math.max(minFrom, 0),
+        maxTo: Math.min(maxTo, docSize),
+    };
+}
+const MathematicsPlugin = (options) => {
+    const { regex, katexOptions = {}, editor, shouldRender, } = options;
+    return new Plugin({
+        key: new PluginKey('mathematics'),
+        state: {
+            init() {
+                return { decorations: undefined, isEditable: undefined };
+            },
+            apply(tr, previousPluginState, state, newState) {
+                if (!tr.docChanged && !tr.selectionSet && previousPluginState.decorations) {
+                    // Just reuse the existing decorations, since nothing should have changed
+                    return previousPluginState;
+                }
+                const nextDecorationSet = (previousPluginState.decorations || DecorationSet.empty).map(tr.mapping, tr.doc);
+                const { selection } = newState;
+                const isEditable = editor.isEditable;
+                const decorationsToAdd = [];
+                const { minFrom, maxTo } = getAffectedRange(newState, previousPluginState, isEditable, tr, state);
+                newState.doc.nodesBetween(minFrom, maxTo, (node, pos) => {
+                    const enabled = shouldRender(newState, pos, node);
+                    if (node.isText && node.text && enabled) {
+                        let match;
+                        // eslint-disable-next-line no-cond-assign
+                        while ((match = regex.exec(node.text))) {
+                            const from = pos + match.index;
+                            const to = from + match[0].length;
+                            const content = match.slice(1).find(Boolean);
+                            if (content) {
+                                const selectionSize = selection.from - selection.to;
+                                const anchorIsInside = selection.anchor >= from && selection.anchor <= to;
+                                const rangeIsInside = selection.from >= from && selection.to <= to;
+                                const isEditing = (selectionSize === 0 && anchorIsInside) || rangeIsInside;
+                                if (
+                                // Are the decorations already present?
+                                nextDecorationSet.find(from, to, (deco) => isEditing === deco.isEditing
+                                    && content === deco.content
+                                    && isEditable === deco.isEditable
+                                    && katexOptions === deco.katexOptions).length) {
+                                    // Decoration exists in set, no need to add it again
+                                    continue;
+                                }
+                                // Use an inline decoration to either hide original (preview is showing) or show it (editing "mode")
+                                decorationsToAdd.push(Decoration.inline(from, to, {
+                                    class: isEditing && isEditable
+                                        ? 'Tiptap-mathematics-editor'
+                                        : 'Tiptap-mathematics-editor Tiptap-mathematics-editor--hidden',
+                                    style: !isEditing || !isEditable
+                                        ? 'display: inline-block; height: 0; opacity: 0; overflow: hidden; position: absolute; width: 0;'
+                                        : undefined,
+                                }, {
+                                    content,
+                                    isEditable,
+                                    isEditing,
+                                    katexOptions,
+                                }));
+                                if (!isEditable || !isEditing) {
+                                    // Create decoration widget and add KaTeX preview if selection is not within the math-editor
+                                    decorationsToAdd.push(Decoration.widget(from, () => {
+                                        const element = document.createElement('span');
+                                        // TODO: changeable class names
+                                        element.classList.add('Tiptap-mathematics-render');
+                                        if (isEditable) {
+                                            element.classList.add('Tiptap-mathematics-render--editable');
+                                        }
+                                        try {
+                                            katex.render(content, element, katexOptions);
+                                        }
+                                        catch {
+                                            element.innerHTML = content;
+                                        }
+                                        return element;
+                                    }, {
+                                        content,
+                                        isEditable,
+                                        isEditing,
+                                        katexOptions,
+                                    }));
+                                }
+                            }
+                        }
+                    }
+                });
+                // Remove any decorations that exist at the same position, they will be replaced by the new decorations
+                const decorationsToRemove = decorationsToAdd.flatMap(deco => nextDecorationSet.find(deco.from, deco.to));
+                return {
+                    decorations: nextDecorationSet
+                        // Remove existing decorations that are going to be replaced
+                        .remove(decorationsToRemove)
+                        // Add any new decorations
+                        .add(tr.doc, decorationsToAdd),
+                    isEditable,
+                };
+            },
+        },
+        props: {
+            decorations(state) {
+                var _a, _b;
+                return (_b = (_a = this.getState(state)) === null || _a === void 0 ? void 0 : _a.decorations) !== null && _b !== void 0 ? _b : DecorationSet.empty;
+            },
+        },
+    });
+};
+
+const defaultShouldRender = (state, pos) => {
+    const $pos = state.doc.resolve(pos);
+    const isInCodeBlock = $pos.parent.type.name === 'codeBlock';
+    return !isInCodeBlock;
+};
+const Mathematics = Extension.create({
+    name: 'Mathematics',
+    addOptions() {
+        return {
+            // eslint-disable-next-line no-useless-escape
+            regex: /\$([^\$]*)\$/gi,
+            katexOptions: undefined,
+            shouldRender: defaultShouldRender,
+        };
+    },
+    addProseMirrorPlugins() {
+        return [MathematicsPlugin({ ...this.options, editor: this.editor })];
+    },
+});
+
+export { Mathematics, MathematicsPlugin, Mathematics as default, defaultShouldRender };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/MathematicsPlugin.ts","../src/mathematics.ts"],"sourcesContent":["import { getChangedRanges } from '@tiptap/core'\nimport {\n  EditorState, Plugin, PluginKey, Transaction,\n} from '@tiptap/pm/state'\nimport { Decoration, DecorationSet } from '@tiptap/pm/view'\nimport katex from 'katex'\n\nimport { MathematicsOptionsWithEditor } from './types.js'\n\ntype DecoSpec = {\n  isEditable: boolean;\n  isEditing: boolean;\n  katexOptions: MathematicsOptionsWithEditor['katexOptions'];\n  content: string;\n};\n\ntype Deco = Omit<Decoration, 'spec'> & { spec: DecoSpec };\n\ntype PluginState =\n| { decorations: DecorationSet; isEditable: boolean }\n| { decorations: undefined; isEditable: undefined }\n\n/**\n * Get the range of positions that have been affected by a transaction\n */\nfunction getAffectedRange(newState: EditorState, previousPluginState: PluginState, isEditable: boolean, tr: Transaction, state: EditorState) {\n  const docSize = newState.doc.nodeSize - 2\n  let minFrom = 0\n  let maxTo = docSize\n\n  if (previousPluginState.isEditable !== isEditable) {\n    // When the editable state changes, run on all nodes just to be safe\n    minFrom = 0\n    maxTo = docSize\n  } else if (tr.docChanged) {\n    // When the document changes, only run on the nodes that have changed\n    minFrom = docSize\n    maxTo = 0\n\n    getChangedRanges(tr).forEach(range => {\n      // Purposefully over scan the range to ensure we catch all decorations\n      minFrom = Math.min(minFrom, range.newRange.from - 1, range.oldRange.from - 1)\n      maxTo = Math.max(maxTo, range.newRange.to + 1, range.oldRange.to + 1)\n    })\n  } else if (tr.selectionSet) {\n    const { $from, $to } = state.selection\n    const { $from: $newFrom, $to: $newTo } = newState.selection\n\n    // When the selection changes, run on all the nodes between the old and new selection\n    minFrom = Math.min(\n      // Purposefully over scan the range to ensure we catch all decorations\n      $from.depth === 0 ? 0 : $from.before(),\n      $newFrom.depth === 0 ? 0 : $newFrom.before(),\n    )\n    maxTo = Math.max(\n      $to.depth === 0 ? maxTo : $to.after(),\n      $newTo.depth === 0 ? maxTo : $newTo.after(),\n    )\n  }\n\n  return {\n    minFrom: Math.max(minFrom, 0),\n    maxTo: Math.min(maxTo, docSize),\n  }\n}\n\nexport const MathematicsPlugin = (options: MathematicsOptionsWithEditor) => {\n  const {\n    regex, katexOptions = {}, editor, shouldRender,\n  } = options\n\n  return new Plugin<PluginState>({\n    key: new PluginKey('mathematics'),\n\n    state: {\n      init() {\n        return { decorations: undefined, isEditable: undefined }\n      },\n      apply(tr, previousPluginState, state, newState) {\n\n        if (!tr.docChanged && !tr.selectionSet && previousPluginState.decorations) {\n          // Just reuse the existing decorations, since nothing should have changed\n          return previousPluginState\n        }\n\n        const nextDecorationSet = (previousPluginState.decorations || DecorationSet.empty).map(\n          tr.mapping,\n          tr.doc,\n        )\n        const { selection } = newState\n        const isEditable = editor.isEditable\n        const decorationsToAdd = [] as Deco[]\n        const { minFrom, maxTo } = getAffectedRange(newState, previousPluginState, isEditable, tr, state)\n\n        newState.doc.nodesBetween(minFrom, maxTo, (node, pos) => {\n          const enabled = shouldRender(newState, pos, node)\n\n          if (node.isText && node.text && enabled) {\n            let match: RegExpExecArray | null\n\n            // eslint-disable-next-line no-cond-assign\n            while ((match = regex.exec(node.text))) {\n              const from = pos + match.index\n              const to = from + match[0].length\n              const content = match.slice(1).find(Boolean)\n\n              if (content) {\n                const selectionSize = selection.from - selection.to\n                const anchorIsInside = selection.anchor >= from && selection.anchor <= to\n                const rangeIsInside = selection.from >= from && selection.to <= to\n                const isEditing = (selectionSize === 0 && anchorIsInside) || rangeIsInside\n\n                if (\n                  // Are the decorations already present?\n                  nextDecorationSet.find(\n                    from,\n                    to,\n                    (deco: DecoSpec) => isEditing === deco.isEditing\n                      && content === deco.content\n                      && isEditable === deco.isEditable\n                      && katexOptions === deco.katexOptions,\n                  ).length\n                ) {\n                  // Decoration exists in set, no need to add it again\n                  continue\n                }\n                // Use an inline decoration to either hide original (preview is showing) or show it (editing \"mode\")\n                decorationsToAdd.push(\n                  Decoration.inline(\n                    from,\n                    to,\n                    {\n                      class:\n                        isEditing && isEditable\n                          ? 'Tiptap-mathematics-editor'\n                          : 'Tiptap-mathematics-editor Tiptap-mathematics-editor--hidden',\n                      style:\n                        !isEditing || !isEditable\n                          ? 'display: inline-block; height: 0; opacity: 0; overflow: hidden; position: absolute; width: 0;'\n                          : undefined,\n                    },\n                    {\n                      content,\n                      isEditable,\n                      isEditing,\n                      katexOptions,\n                    } satisfies DecoSpec,\n                  ),\n                )\n\n                if (!isEditable || !isEditing) {\n                  // Create decoration widget and add KaTeX preview if selection is not within the math-editor\n                  decorationsToAdd.push(\n                    Decoration.widget(\n                      from,\n                      () => {\n                        const element = document.createElement('span')\n\n                        // TODO: changeable class names\n                        element.classList.add('Tiptap-mathematics-render')\n\n                        if (isEditable) {\n                          element.classList.add('Tiptap-mathematics-render--editable')\n                        }\n\n                        try {\n                          katex.render(content!, element, katexOptions)\n                        } catch {\n                          element.innerHTML = content!\n                        }\n\n                        return element\n                      },\n                      {\n                        content,\n                        isEditable,\n                        isEditing,\n                        katexOptions,\n                      } satisfies DecoSpec,\n                    ),\n                  )\n                }\n              }\n            }\n          }\n        })\n\n        // Remove any decorations that exist at the same position, they will be replaced by the new decorations\n        const decorationsToRemove = decorationsToAdd.flatMap(deco => nextDecorationSet.find(deco.from, deco.to))\n\n        return {\n          decorations: nextDecorationSet\n            // Remove existing decorations that are going to be replaced\n            .remove(decorationsToRemove)\n            // Add any new decorations\n            .add(tr.doc, decorationsToAdd),\n          isEditable,\n        }\n      },\n    },\n\n    props: {\n      decorations(state) {\n        return this.getState(state)?.decorations ?? DecorationSet.empty\n      },\n    },\n  })\n}\n","import { Extension } from '@tiptap/core'\nimport { EditorState } from '@tiptap/pm/state'\n\nimport { MathematicsPlugin } from './MathematicsPlugin.js'\nimport { MathematicsOptions } from './types.js'\n\nexport const defaultShouldRender = (state: EditorState, pos: number) => {\n  const $pos = state.doc.resolve(pos)\n  const isInCodeBlock = $pos.parent.type.name === 'codeBlock'\n\n  return !isInCodeBlock\n}\n\nexport const Mathematics = Extension.create<MathematicsOptions>({\n  name: 'Mathematics',\n\n  addOptions() {\n    return {\n      // eslint-disable-next-line no-useless-escape\n      regex: /\\$([^\\$]*)\\$/gi,\n      katexOptions: undefined,\n      shouldRender: defaultShouldRender,\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [MathematicsPlugin({ ...this.options, editor: this.editor })]\n  },\n})\n\nexport default Mathematics\n"],"names":[],"mappings":"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"}

package/dist/index.umd.js

@@ -0,0 +1,174 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core'), require('@tiptap/pm/state'), require('@tiptap/pm/view'), require('katex')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core', '@tiptap/pm/state', '@tiptap/pm/view', 'katex'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-mathematics"] = {}, global.core, global.state, global.view, global.katex));
+})(this, (function (exports, core, state, view, katex) { 'use strict';
+
+  /**
+   * Get the range of positions that have been affected by a transaction
+   */
+  function getAffectedRange(newState, previousPluginState, isEditable, tr, state) {
+      const docSize = newState.doc.nodeSize - 2;
+      let minFrom = 0;
+      let maxTo = docSize;
+      if (previousPluginState.isEditable !== isEditable) {
+          // When the editable state changes, run on all nodes just to be safe
+          minFrom = 0;
+          maxTo = docSize;
+      }
+      else if (tr.docChanged) {
+          // When the document changes, only run on the nodes that have changed
+          minFrom = docSize;
+          maxTo = 0;
+          core.getChangedRanges(tr).forEach(range => {
+              // Purposefully over scan the range to ensure we catch all decorations
+              minFrom = Math.min(minFrom, range.newRange.from - 1, range.oldRange.from - 1);
+              maxTo = Math.max(maxTo, range.newRange.to + 1, range.oldRange.to + 1);
+          });
+      }
+      else if (tr.selectionSet) {
+          const { $from, $to } = state.selection;
+          const { $from: $newFrom, $to: $newTo } = newState.selection;
+          // When the selection changes, run on all the nodes between the old and new selection
+          minFrom = Math.min(
+          // Purposefully over scan the range to ensure we catch all decorations
+          $from.depth === 0 ? 0 : $from.before(), $newFrom.depth === 0 ? 0 : $newFrom.before());
+          maxTo = Math.max($to.depth === 0 ? maxTo : $to.after(), $newTo.depth === 0 ? maxTo : $newTo.after());
+      }
+      return {
+          minFrom: Math.max(minFrom, 0),
+          maxTo: Math.min(maxTo, docSize),
+      };
+  }
+  const MathematicsPlugin = (options) => {
+      const { regex, katexOptions = {}, editor, shouldRender, } = options;
+      return new state.Plugin({
+          key: new state.PluginKey('mathematics'),
+          state: {
+              init() {
+                  return { decorations: undefined, isEditable: undefined };
+              },
+              apply(tr, previousPluginState, state, newState) {
+                  if (!tr.docChanged && !tr.selectionSet && previousPluginState.decorations) {
+                      // Just reuse the existing decorations, since nothing should have changed
+                      return previousPluginState;
+                  }
+                  const nextDecorationSet = (previousPluginState.decorations || view.DecorationSet.empty).map(tr.mapping, tr.doc);
+                  const { selection } = newState;
+                  const isEditable = editor.isEditable;
+                  const decorationsToAdd = [];
+                  const { minFrom, maxTo } = getAffectedRange(newState, previousPluginState, isEditable, tr, state);
+                  newState.doc.nodesBetween(minFrom, maxTo, (node, pos) => {
+                      const enabled = shouldRender(newState, pos, node);
+                      if (node.isText && node.text && enabled) {
+                          let match;
+                          // eslint-disable-next-line no-cond-assign
+                          while ((match = regex.exec(node.text))) {
+                              const from = pos + match.index;
+                              const to = from + match[0].length;
+                              const content = match.slice(1).find(Boolean);
+                              if (content) {
+                                  const selectionSize = selection.from - selection.to;
+                                  const anchorIsInside = selection.anchor >= from && selection.anchor <= to;
+                                  const rangeIsInside = selection.from >= from && selection.to <= to;
+                                  const isEditing = (selectionSize === 0 && anchorIsInside) || rangeIsInside;
+                                  if (
+                                  // Are the decorations already present?
+                                  nextDecorationSet.find(from, to, (deco) => isEditing === deco.isEditing
+                                      && content === deco.content
+                                      && isEditable === deco.isEditable
+                                      && katexOptions === deco.katexOptions).length) {
+                                      // Decoration exists in set, no need to add it again
+                                      continue;
+                                  }
+                                  // Use an inline decoration to either hide original (preview is showing) or show it (editing "mode")
+                                  decorationsToAdd.push(view.Decoration.inline(from, to, {
+                                      class: isEditing && isEditable
+                                          ? 'Tiptap-mathematics-editor'
+                                          : 'Tiptap-mathematics-editor Tiptap-mathematics-editor--hidden',
+                                      style: !isEditing || !isEditable
+                                          ? 'display: inline-block; height: 0; opacity: 0; overflow: hidden; position: absolute; width: 0;'
+                                          : undefined,
+                                  }, {
+                                      content,
+                                      isEditable,
+                                      isEditing,
+                                      katexOptions,
+                                  }));
+                                  if (!isEditable || !isEditing) {
+                                      // Create decoration widget and add KaTeX preview if selection is not within the math-editor
+                                      decorationsToAdd.push(view.Decoration.widget(from, () => {
+                                          const element = document.createElement('span');
+                                          // TODO: changeable class names
+                                          element.classList.add('Tiptap-mathematics-render');
+                                          if (isEditable) {
+                                              element.classList.add('Tiptap-mathematics-render--editable');
+                                          }
+                                          try {
+                                              katex.render(content, element, katexOptions);
+                                          }
+                                          catch {
+                                              element.innerHTML = content;
+                                          }
+                                          return element;
+                                      }, {
+                                          content,
+                                          isEditable,
+                                          isEditing,
+                                          katexOptions,
+                                      }));
+                                  }
+                              }
+                          }
+                      }
+                  });
+                  // Remove any decorations that exist at the same position, they will be replaced by the new decorations
+                  const decorationsToRemove = decorationsToAdd.flatMap(deco => nextDecorationSet.find(deco.from, deco.to));
+                  return {
+                      decorations: nextDecorationSet
+                          // Remove existing decorations that are going to be replaced
+                          .remove(decorationsToRemove)
+                          // Add any new decorations
+                          .add(tr.doc, decorationsToAdd),
+                      isEditable,
+                  };
+              },
+          },
+          props: {
+              decorations(state) {
+                  var _a, _b;
+                  return (_b = (_a = this.getState(state)) === null || _a === void 0 ? void 0 : _a.decorations) !== null && _b !== void 0 ? _b : view.DecorationSet.empty;
+              },
+          },
+      });
+  };
+
+  const defaultShouldRender = (state, pos) => {
+      const $pos = state.doc.resolve(pos);
+      const isInCodeBlock = $pos.parent.type.name === 'codeBlock';
+      return !isInCodeBlock;
+  };
+  const Mathematics = core.Extension.create({
+      name: 'Mathematics',
+      addOptions() {
+          return {
+              // eslint-disable-next-line no-useless-escape
+              regex: /\$([^\$]*)\$/gi,
+              katexOptions: undefined,
+              shouldRender: defaultShouldRender,
+          };
+      },
+      addProseMirrorPlugins() {
+          return [MathematicsPlugin({ ...this.options, editor: this.editor })];
+      },
+  });
+
+  exports.Mathematics = Mathematics;
+  exports.MathematicsPlugin = MathematicsPlugin;
+  exports.default = Mathematics;
+  exports.defaultShouldRender = defaultShouldRender;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/MathematicsPlugin.ts","../src/mathematics.ts"],"sourcesContent":["import { getChangedRanges } from '@tiptap/core'\nimport {\n  EditorState, Plugin, PluginKey, Transaction,\n} from '@tiptap/pm/state'\nimport { Decoration, DecorationSet } from '@tiptap/pm/view'\nimport katex from 'katex'\n\nimport { MathematicsOptionsWithEditor } from './types.js'\n\ntype DecoSpec = {\n  isEditable: boolean;\n  isEditing: boolean;\n  katexOptions: MathematicsOptionsWithEditor['katexOptions'];\n  content: string;\n};\n\ntype Deco = Omit<Decoration, 'spec'> & { spec: DecoSpec };\n\ntype PluginState =\n| { decorations: DecorationSet; isEditable: boolean }\n| { decorations: undefined; isEditable: undefined }\n\n/**\n * Get the range of positions that have been affected by a transaction\n */\nfunction getAffectedRange(newState: EditorState, previousPluginState: PluginState, isEditable: boolean, tr: Transaction, state: EditorState) {\n  const docSize = newState.doc.nodeSize - 2\n  let minFrom = 0\n  let maxTo = docSize\n\n  if (previousPluginState.isEditable !== isEditable) {\n    // When the editable state changes, run on all nodes just to be safe\n    minFrom = 0\n    maxTo = docSize\n  } else if (tr.docChanged) {\n    // When the document changes, only run on the nodes that have changed\n    minFrom = docSize\n    maxTo = 0\n\n    getChangedRanges(tr).forEach(range => {\n      // Purposefully over scan the range to ensure we catch all decorations\n      minFrom = Math.min(minFrom, range.newRange.from - 1, range.oldRange.from - 1)\n      maxTo = Math.max(maxTo, range.newRange.to + 1, range.oldRange.to + 1)\n    })\n  } else if (tr.selectionSet) {\n    const { $from, $to } = state.selection\n    const { $from: $newFrom, $to: $newTo } = newState.selection\n\n    // When the selection changes, run on all the nodes between the old and new selection\n    minFrom = Math.min(\n      // Purposefully over scan the range to ensure we catch all decorations\n      $from.depth === 0 ? 0 : $from.before(),\n      $newFrom.depth === 0 ? 0 : $newFrom.before(),\n    )\n    maxTo = Math.max(\n      $to.depth === 0 ? maxTo : $to.after(),\n      $newTo.depth === 0 ? maxTo : $newTo.after(),\n    )\n  }\n\n  return {\n    minFrom: Math.max(minFrom, 0),\n    maxTo: Math.min(maxTo, docSize),\n  }\n}\n\nexport const MathematicsPlugin = (options: MathematicsOptionsWithEditor) => {\n  const {\n    regex, katexOptions = {}, editor, shouldRender,\n  } = options\n\n  return new Plugin<PluginState>({\n    key: new PluginKey('mathematics'),\n\n    state: {\n      init() {\n        return { decorations: undefined, isEditable: undefined }\n      },\n      apply(tr, previousPluginState, state, newState) {\n\n        if (!tr.docChanged && !tr.selectionSet && previousPluginState.decorations) {\n          // Just reuse the existing decorations, since nothing should have changed\n          return previousPluginState\n        }\n\n        const nextDecorationSet = (previousPluginState.decorations || DecorationSet.empty).map(\n          tr.mapping,\n          tr.doc,\n        )\n        const { selection } = newState\n        const isEditable = editor.isEditable\n        const decorationsToAdd = [] as Deco[]\n        const { minFrom, maxTo } = getAffectedRange(newState, previousPluginState, isEditable, tr, state)\n\n        newState.doc.nodesBetween(minFrom, maxTo, (node, pos) => {\n          const enabled = shouldRender(newState, pos, node)\n\n          if (node.isText && node.text && enabled) {\n            let match: RegExpExecArray | null\n\n            // eslint-disable-next-line no-cond-assign\n            while ((match = regex.exec(node.text))) {\n              const from = pos + match.index\n              const to = from + match[0].length\n              const content = match.slice(1).find(Boolean)\n\n              if (content) {\n                const selectionSize = selection.from - selection.to\n                const anchorIsInside = selection.anchor >= from && selection.anchor <= to\n                const rangeIsInside = selection.from >= from && selection.to <= to\n                const isEditing = (selectionSize === 0 && anchorIsInside) || rangeIsInside\n\n                if (\n                  // Are the decorations already present?\n                  nextDecorationSet.find(\n                    from,\n                    to,\n                    (deco: DecoSpec) => isEditing === deco.isEditing\n                      && content === deco.content\n                      && isEditable === deco.isEditable\n                      && katexOptions === deco.katexOptions,\n                  ).length\n                ) {\n                  // Decoration exists in set, no need to add it again\n                  continue\n                }\n                // Use an inline decoration to either hide original (preview is showing) or show it (editing \"mode\")\n                decorationsToAdd.push(\n                  Decoration.inline(\n                    from,\n                    to,\n                    {\n                      class:\n                        isEditing && isEditable\n                          ? 'Tiptap-mathematics-editor'\n                          : 'Tiptap-mathematics-editor Tiptap-mathematics-editor--hidden',\n                      style:\n                        !isEditing || !isEditable\n                          ? 'display: inline-block; height: 0; opacity: 0; overflow: hidden; position: absolute; width: 0;'\n                          : undefined,\n                    },\n                    {\n                      content,\n                      isEditable,\n                      isEditing,\n                      katexOptions,\n                    } satisfies DecoSpec,\n                  ),\n                )\n\n                if (!isEditable || !isEditing) {\n                  // Create decoration widget and add KaTeX preview if selection is not within the math-editor\n                  decorationsToAdd.push(\n                    Decoration.widget(\n                      from,\n                      () => {\n                        const element = document.createElement('span')\n\n                        // TODO: changeable class names\n                        element.classList.add('Tiptap-mathematics-render')\n\n                        if (isEditable) {\n                          element.classList.add('Tiptap-mathematics-render--editable')\n                        }\n\n                        try {\n                          katex.render(content!, element, katexOptions)\n                        } catch {\n                          element.innerHTML = content!\n                        }\n\n                        return element\n                      },\n                      {\n                        content,\n                        isEditable,\n                        isEditing,\n                        katexOptions,\n                      } satisfies DecoSpec,\n                    ),\n                  )\n                }\n              }\n            }\n          }\n        })\n\n        // Remove any decorations that exist at the same position, they will be replaced by the new decorations\n        const decorationsToRemove = decorationsToAdd.flatMap(deco => nextDecorationSet.find(deco.from, deco.to))\n\n        return {\n          decorations: nextDecorationSet\n            // Remove existing decorations that are going to be replaced\n            .remove(decorationsToRemove)\n            // Add any new decorations\n            .add(tr.doc, decorationsToAdd),\n          isEditable,\n        }\n      },\n    },\n\n    props: {\n      decorations(state) {\n        return this.getState(state)?.decorations ?? DecorationSet.empty\n      },\n    },\n  })\n}\n","import { Extension } from '@tiptap/core'\nimport { EditorState } from '@tiptap/pm/state'\n\nimport { MathematicsPlugin } from './MathematicsPlugin.js'\nimport { MathematicsOptions } from './types.js'\n\nexport const defaultShouldRender = (state: EditorState, pos: number) => {\n  const $pos = state.doc.resolve(pos)\n  const isInCodeBlock = $pos.parent.type.name === 'codeBlock'\n\n  return !isInCodeBlock\n}\n\nexport const Mathematics = Extension.create<MathematicsOptions>({\n  name: 'Mathematics',\n\n  addOptions() {\n    return {\n      // eslint-disable-next-line no-useless-escape\n      regex: /\\$([^\\$]*)\\$/gi,\n      katexOptions: undefined,\n      shouldRender: defaultShouldRender,\n    }\n  },\n\n  addProseMirrorPlugins() {\n    return [MathematicsPlugin({ ...this.options, editor: this.editor })]\n  },\n})\n\nexport default Mathematics\n"],"names":["getChangedRanges","Plugin","PluginKey","DecorationSet","Decoration","Extension"],"mappings":";;;;;;EAsBA;;EAEG;EACH,SAAS,gBAAgB,CAAC,QAAqB,EAAE,mBAAgC,EAAE,UAAmB,EAAE,EAAe,EAAE,KAAkB,EAAA;MACzI,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,GAAG,CAAC;MACzC,IAAI,OAAO,GAAG,CAAC;MACf,IAAI,KAAK,GAAG,OAAO;EAEnB,IAAA,IAAI,mBAAmB,CAAC,UAAU,KAAK,UAAU,EAAE;;UAEjD,OAAO,GAAG,CAAC;UACX,KAAK,GAAG,OAAO;;EACV,SAAA,IAAI,EAAE,CAAC,UAAU,EAAE;;UAExB,OAAO,GAAG,OAAO;UACjB,KAAK,GAAG,CAAC;UAETA,qBAAgB,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,IAAG;;cAEnC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC;cAC7E,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC;EACvE,SAAC,CAAC;;EACG,SAAA,IAAI,EAAE,CAAC,YAAY,EAAE;UAC1B,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,SAAS;EACtC,QAAA,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,SAAS;;UAG3D,OAAO,GAAG,IAAI,CAAC,GAAG;;EAEhB,QAAA,KAAK,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,EACtC,QAAQ,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAC7C;EACD,QAAA,KAAK,GAAG,IAAI,CAAC,GAAG,CACd,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,GAAG,CAAC,KAAK,EAAE,EACrC,MAAM,CAAC,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,KAAK,EAAE,CAC5C;;MAGH,OAAO;UACL,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;UAC7B,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,CAAC;OAChC;EACH;AAEa,QAAA,iBAAiB,GAAG,CAAC,OAAqC,KAAI;EACzE,IAAA,MAAM,EACJ,KAAK,EAAE,YAAY,GAAG,EAAE,EAAE,MAAM,EAAE,YAAY,GAC/C,GAAG,OAAO;MAEX,OAAO,IAAIC,YAAM,CAAc;EAC7B,QAAA,GAAG,EAAE,IAAIC,eAAS,CAAC,aAAa,CAAC;EAEjC,QAAA,KAAK,EAAE;cACL,IAAI,GAAA;kBACF,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE;eACzD;EACD,YAAA,KAAK,CAAC,EAAE,EAAE,mBAAmB,EAAE,KAAK,EAAE,QAAQ,EAAA;EAE5C,gBAAA,IAAI,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,EAAE,CAAC,YAAY,IAAI,mBAAmB,CAAC,WAAW,EAAE;;EAEzE,oBAAA,OAAO,mBAAmB;;kBAG5B,MAAM,iBAAiB,GAAG,CAAC,mBAAmB,CAAC,WAAW,IAAIC,kBAAa,CAAC,KAAK,EAAE,GAAG,CACpF,EAAE,CAAC,OAAO,EACV,EAAE,CAAC,GAAG,CACP;EACD,gBAAA,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ;EAC9B,gBAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU;kBACpC,MAAM,gBAAgB,GAAG,EAAY;EACrC,gBAAA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAC,QAAQ,EAAE,mBAAmB,EAAE,UAAU,EAAE,EAAE,EAAE,KAAK,CAAC;EAEjG,gBAAA,QAAQ,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,GAAG,KAAI;sBACtD,MAAM,OAAO,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC;sBAEjD,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE;EACvC,wBAAA,IAAI,KAA6B;;EAGjC,wBAAA,QAAQ,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;EACtC,4BAAA,MAAM,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC,KAAK;8BAC9B,MAAM,EAAE,GAAG,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM;EACjC,4BAAA,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;8BAE5C,IAAI,OAAO,EAAE;kCACX,MAAM,aAAa,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE;EACnD,gCAAA,MAAM,cAAc,GAAG,SAAS,CAAC,MAAM,IAAI,IAAI,IAAI,SAAS,CAAC,MAAM,IAAI,EAAE;EACzE,gCAAA,MAAM,aAAa,GAAG,SAAS,CAAC,IAAI,IAAI,IAAI,IAAI,SAAS,CAAC,EAAE,IAAI,EAAE;kCAClE,MAAM,SAAS,GAAG,CAAC,aAAa,KAAK,CAAC,IAAI,cAAc,KAAK,aAAa;EAE1E,gCAAA;;EAEE,gCAAA,iBAAiB,CAAC,IAAI,CACpB,IAAI,EACJ,EAAE,EACF,CAAC,IAAc,KAAK,SAAS,KAAK,IAAI,CAAC;yCAClC,OAAO,KAAK,IAAI,CAAC;yCACjB,UAAU,KAAK,IAAI,CAAC;yCACpB,YAAY,KAAK,IAAI,CAAC,YAAY,CACxC,CAAC,MAAM,EACR;;sCAEA;;;kCAGF,gBAAgB,CAAC,IAAI,CACnBC,eAAU,CAAC,MAAM,CACf,IAAI,EACJ,EAAE,EACF;sCACE,KAAK,EACH,SAAS,IAAI;EACX,0CAAE;EACF,0CAAE,6DAA6D;EACnE,oCAAA,KAAK,EACH,CAAC,SAAS,IAAI,CAAC;EACb,0CAAE;EACF,0CAAE,SAAS;mCAChB,EACD;sCACE,OAAO;sCACP,UAAU;sCACV,SAAS;sCACT,YAAY;EACM,iCAAA,CACrB,CACF;EAED,gCAAA,IAAI,CAAC,UAAU,IAAI,CAAC,SAAS,EAAE;;sCAE7B,gBAAgB,CAAC,IAAI,CACnBA,eAAU,CAAC,MAAM,CACf,IAAI,EACJ,MAAK;0CACH,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;;EAG9C,wCAAA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC;0CAElD,IAAI,UAAU,EAAE;EACd,4CAAA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,qCAAqC,CAAC;;EAG9D,wCAAA,IAAI;8CACF,KAAK,CAAC,MAAM,CAAC,OAAQ,EAAE,OAAO,EAAE,YAAY,CAAC;;EAC7C,wCAAA,MAAM;EACN,4CAAA,OAAO,CAAC,SAAS,GAAG,OAAQ;;EAG9B,wCAAA,OAAO,OAAO;EAChB,qCAAC,EACD;0CACE,OAAO;0CACP,UAAU;0CACV,SAAS;0CACT,YAAY;EACM,qCAAA,CACrB,CACF;;;;;EAKX,iBAAC,CAAC;;kBAGF,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,OAAO,CAAC,IAAI,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;kBAExG,OAAO;EACL,oBAAA,WAAW,EAAE;;2BAEV,MAAM,CAAC,mBAAmB;;EAE1B,yBAAA,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,CAAC;sBAChC,UAAU;mBACX;eACF;EACF,SAAA;EAED,QAAA,KAAK,EAAE;EACL,YAAA,WAAW,CAAC,KAAK,EAAA;;EACf,gBAAA,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAID,kBAAa,CAAC,KAAK;eAChE;EACF,SAAA;EACF,KAAA,CAAC;EACJ;;QCzMa,mBAAmB,GAAG,CAAC,KAAkB,EAAE,GAAW,KAAI;MACrE,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC;MACnC,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW;MAE3D,OAAO,CAAC,aAAa;EACvB;AAEa,QAAA,WAAW,GAAGE,cAAS,CAAC,MAAM,CAAqB;EAC9D,IAAA,IAAI,EAAE,aAAa;MAEnB,UAAU,GAAA;UACR,OAAO;;EAEL,YAAA,KAAK,EAAE,gBAAgB;EACvB,YAAA,YAAY,EAAE,SAAS;EACvB,YAAA,YAAY,EAAE,mBAAmB;WAClC;OACF;MAED,qBAAqB,GAAA;EACnB,QAAA,OAAO,CAAC,iBAAiB,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;OACrE;EACF,CAAA;;;;;;;;;;;;;"}

package/dist/mathematics.d.ts

@@ -0,0 +1,7 @@
+import { Extension } from '@tiptap/core';
+import { EditorState } from '@tiptap/pm/state';
+import { MathematicsOptions } from './types.js';
+export declare const defaultShouldRender: (state: EditorState, pos: number) => boolean;
+export declare const Mathematics: Extension<MathematicsOptions, any>;
+export default Mathematics;
+//# sourceMappingURL=mathematics.d.ts.map

package/dist/mathematics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mathematics.d.ts","sourceRoot":"","sources":["../src/mathematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,mBAAmB,UAAW,WAAW,OAAO,MAAM,YAKlE,CAAA;AAED,eAAO,MAAM,WAAW,oCAetB,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+import { Editor } from '@tiptap/core';
+import { Node } from '@tiptap/pm/model';
+import { EditorState } from '@tiptap/pm/state';
+import { KatexOptions } from 'katex';
+export type MathematicsOptions = {
+    regex: RegExp;
+    katexOptions?: KatexOptions;
+    shouldRender: (state: EditorState, pos: number, node: Node) => boolean;
+};
+export type MathematicsOptionsWithEditor = MathematicsOptions & {
+    editor: Editor;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,YAAY,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;CACxE,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG,kBAAkB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@tiptap/extension-mathematics",
+  "description": "latex math extension for tiptap",
+  "version": "2.22.0",
+  "homepage": "https://tiptap.dev/api/extensions/mathematics",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-mathematics"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "umd": "dist/index.umd.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "devDependencies": {
+    "@tiptap/core": "^2.22.0",
+    "@tiptap/pm": "^2.22.0",
+    "@types/katex": "^0.16.7"
+  },
+  "peerDependencies": {
+    "@tiptap/core": "^2.7.0",
+    "@tiptap/pm": "^2.7.0",
+    "katex": "^0.16.4"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c"
+  }
+}

package/src/MathematicsPlugin.ts

@@ -0,0 +1,208 @@
+import { getChangedRanges } from '@tiptap/core'
+import {
+  EditorState, Plugin, PluginKey, Transaction,
+} from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+import katex from 'katex'
+
+import { MathematicsOptionsWithEditor } from './types.js'
+
+type DecoSpec = {
+  isEditable: boolean;
+  isEditing: boolean;
+  katexOptions: MathematicsOptionsWithEditor['katexOptions'];
+  content: string;
+};
+
+type Deco = Omit<Decoration, 'spec'> & { spec: DecoSpec };
+
+type PluginState =
+| { decorations: DecorationSet; isEditable: boolean }
+| { decorations: undefined; isEditable: undefined }
+
+/**
+ * Get the range of positions that have been affected by a transaction
+ */
+function getAffectedRange(newState: EditorState, previousPluginState: PluginState, isEditable: boolean, tr: Transaction, state: EditorState) {
+  const docSize = newState.doc.nodeSize - 2
+  let minFrom = 0
+  let maxTo = docSize
+
+  if (previousPluginState.isEditable !== isEditable) {
+    // When the editable state changes, run on all nodes just to be safe
+    minFrom = 0
+    maxTo = docSize
+  } else if (tr.docChanged) {
+    // When the document changes, only run on the nodes that have changed
+    minFrom = docSize
+    maxTo = 0
+
+    getChangedRanges(tr).forEach(range => {
+      // Purposefully over scan the range to ensure we catch all decorations
+      minFrom = Math.min(minFrom, range.newRange.from - 1, range.oldRange.from - 1)
+      maxTo = Math.max(maxTo, range.newRange.to + 1, range.oldRange.to + 1)
+    })
+  } else if (tr.selectionSet) {
+    const { $from, $to } = state.selection
+    const { $from: $newFrom, $to: $newTo } = newState.selection
+
+    // When the selection changes, run on all the nodes between the old and new selection
+    minFrom = Math.min(
+      // Purposefully over scan the range to ensure we catch all decorations
+      $from.depth === 0 ? 0 : $from.before(),
+      $newFrom.depth === 0 ? 0 : $newFrom.before(),
+    )
+    maxTo = Math.max(
+      $to.depth === 0 ? maxTo : $to.after(),
+      $newTo.depth === 0 ? maxTo : $newTo.after(),
+    )
+  }
+
+  return {
+    minFrom: Math.max(minFrom, 0),
+    maxTo: Math.min(maxTo, docSize),
+  }
+}
+
+export const MathematicsPlugin = (options: MathematicsOptionsWithEditor) => {
+  const {
+    regex, katexOptions = {}, editor, shouldRender,
+  } = options
+
+  return new Plugin<PluginState>({
+    key: new PluginKey('mathematics'),
+
+    state: {
+      init() {
+        return { decorations: undefined, isEditable: undefined }
+      },
+      apply(tr, previousPluginState, state, newState) {
+
+        if (!tr.docChanged && !tr.selectionSet && previousPluginState.decorations) {
+          // Just reuse the existing decorations, since nothing should have changed
+          return previousPluginState
+        }
+
+        const nextDecorationSet = (previousPluginState.decorations || DecorationSet.empty).map(
+          tr.mapping,
+          tr.doc,
+        )
+        const { selection } = newState
+        const isEditable = editor.isEditable
+        const decorationsToAdd = [] as Deco[]
+        const { minFrom, maxTo } = getAffectedRange(newState, previousPluginState, isEditable, tr, state)
+
+        newState.doc.nodesBetween(minFrom, maxTo, (node, pos) => {
+          const enabled = shouldRender(newState, pos, node)
+
+          if (node.isText && node.text && enabled) {
+            let match: RegExpExecArray | null
+
+            // eslint-disable-next-line no-cond-assign
+            while ((match = regex.exec(node.text))) {
+              const from = pos + match.index
+              const to = from + match[0].length
+              const content = match.slice(1).find(Boolean)
+
+              if (content) {
+                const selectionSize = selection.from - selection.to
+                const anchorIsInside = selection.anchor >= from && selection.anchor <= to
+                const rangeIsInside = selection.from >= from && selection.to <= to
+                const isEditing = (selectionSize === 0 && anchorIsInside) || rangeIsInside
+
+                if (
+                  // Are the decorations already present?
+                  nextDecorationSet.find(
+                    from,
+                    to,
+                    (deco: DecoSpec) => isEditing === deco.isEditing
+                      && content === deco.content
+                      && isEditable === deco.isEditable
+                      && katexOptions === deco.katexOptions,
+                  ).length
+                ) {
+                  // Decoration exists in set, no need to add it again
+                  continue
+                }
+                // Use an inline decoration to either hide original (preview is showing) or show it (editing "mode")
+                decorationsToAdd.push(
+                  Decoration.inline(
+                    from,
+                    to,
+                    {
+                      class:
+                        isEditing && isEditable
+                          ? 'Tiptap-mathematics-editor'
+                          : 'Tiptap-mathematics-editor Tiptap-mathematics-editor--hidden',
+                      style:
+                        !isEditing || !isEditable
+                          ? 'display: inline-block; height: 0; opacity: 0; overflow: hidden; position: absolute; width: 0;'
+                          : undefined,
+                    },
+                    {
+                      content,
+                      isEditable,
+                      isEditing,
+                      katexOptions,
+                    } satisfies DecoSpec,
+                  ),
+                )
+
+                if (!isEditable || !isEditing) {
+                  // Create decoration widget and add KaTeX preview if selection is not within the math-editor
+                  decorationsToAdd.push(
+                    Decoration.widget(
+                      from,
+                      () => {
+                        const element = document.createElement('span')
+
+                        // TODO: changeable class names
+                        element.classList.add('Tiptap-mathematics-render')
+
+                        if (isEditable) {
+                          element.classList.add('Tiptap-mathematics-render--editable')
+                        }
+
+                        try {
+                          katex.render(content!, element, katexOptions)
+                        } catch {
+                          element.innerHTML = content!
+                        }
+
+                        return element
+                      },
+                      {
+                        content,
+                        isEditable,
+                        isEditing,
+                        katexOptions,
+                      } satisfies DecoSpec,
+                    ),
+                  )
+                }
+              }
+            }
+          }
+        })
+
+        // Remove any decorations that exist at the same position, they will be replaced by the new decorations
+        const decorationsToRemove = decorationsToAdd.flatMap(deco => nextDecorationSet.find(deco.from, deco.to))
+
+        return {
+          decorations: nextDecorationSet
+            // Remove existing decorations that are going to be replaced
+            .remove(decorationsToRemove)
+            // Add any new decorations
+            .add(tr.doc, decorationsToAdd),
+          isEditable,
+        }
+      },
+    },
+
+    props: {
+      decorations(state) {
+        return this.getState(state)?.decorations ?? DecorationSet.empty
+      },
+    },
+  })
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+import { Mathematics } from './mathematics.js'
+
+export * from './mathematics.js'
+export * from './MathematicsPlugin.js'
+export * from './types.js'
+
+export default Mathematics

package/src/mathematics.ts

@@ -0,0 +1,31 @@
+import { Extension } from '@tiptap/core'
+import { EditorState } from '@tiptap/pm/state'
+
+import { MathematicsPlugin } from './MathematicsPlugin.js'
+import { MathematicsOptions } from './types.js'
+
+export const defaultShouldRender = (state: EditorState, pos: number) => {
+  const $pos = state.doc.resolve(pos)
+  const isInCodeBlock = $pos.parent.type.name === 'codeBlock'
+
+  return !isInCodeBlock
+}
+
+export const Mathematics = Extension.create<MathematicsOptions>({
+  name: 'Mathematics',
+
+  addOptions() {
+    return {
+      // eslint-disable-next-line no-useless-escape
+      regex: /\$([^\$]*)\$/gi,
+      katexOptions: undefined,
+      shouldRender: defaultShouldRender,
+    }
+  },
+
+  addProseMirrorPlugins() {
+    return [MathematicsPlugin({ ...this.options, editor: this.editor })]
+  },
+})
+
+export default Mathematics

package/src/types.ts

@@ -0,0 +1,12 @@
+import { Editor } from '@tiptap/core'
+import { Node } from '@tiptap/pm/model'
+import { EditorState } from '@tiptap/pm/state'
+import { KatexOptions } from 'katex'
+
+export type MathematicsOptions = {
+  regex: RegExp,
+  katexOptions?: KatexOptions,
+  shouldRender: (state: EditorState, pos: number, node: Node) => boolean,
+}
+
+export type MathematicsOptionsWithEditor = MathematicsOptions & { editor: Editor }