Support Tiptap #27

benrbray · 2021-08-12T15:36:41Z

TipTap is a popular wysiwyg editor built on top of ProseMirror. I wonder if it would be possible to write an extension to TipTap based on prosemirror-math.

The text was updated successfully, but these errors were encountered:

xzackli · 2021-08-25T23:27:24Z

I gave this a try, and found that a naive wrap of the inline math mostly works except for the arrow-key escaping, which always ends up on the side it entered. Not sure why it's remembering that?

https://codesandbox.io/s/tiptap-math-04o0s?file=/src/components/HelloWorld.vue

import { Node } from '@tiptap/core'

import {
	makeBlockMathInputRule, makeInlineMathInputRule,
	REGEX_INLINE_MATH_DOLLARS, REGEX_BLOCK_MATH_DOLLARS
} from "@benrbray/prosemirror-math";
import { mathPlugin, mathBackspaceCmd, insertMathCmd, mathSerializer } from "@benrbray/prosemirror-math";

export default Node.create({
  name: 'math_inline',
  group: "inline math",
  content: "text*",        // important!
  inline: true,            // important!
  atom: true,              // important!

  parseHTML () {
    return [{
      tag: "math-inline"   // important!
    }]
  },

  renderHTML ({ HTMLAttributes }) {
    return ["math-inline", { class: "math-node" }, 0]
  },

  addProseMirrorPlugins () {
    return [
      mathPlugin
    ]
  },

  addInputRules () {
    return [
      makeInlineMathInputRule(REGEX_INLINE_MATH_DOLLARS, this.type)
    ]
  }
})

I love the package, by the way! I've hacked together something like this for myself, and it's not nearly as polished as this.

benrbray · 2021-08-26T16:36:31Z

Hey thanks! This is good to know, I wasn't expecting it to be so simple. It's pretty strange that it returns you to the same side you entered from -- I'm wondering if this is a quirk of how Tiptap manages NodeViews. If I'm remembering correctly, prosemirror-math only needed special handling when the cursor moves from outside -> inside a NodeView, but ProseMirror's default behavior was fine when moving inside -> outside.

One way to test this hypothesis might be to see whether hooking up a much simpler NodeView to Tiptap (such as the footnote example) fails in the same way.

xzackli · 2021-08-26T23:22:55Z

Maybe this is a projection of a larger problem -- it seems that inserting text into an existing inline prosemirror-math NodeView generates a prosemirror error (despite successfully rendering the math for it afterward). This might take more work than my naive wrap sadly, and might resemble what one would do for the footnote you mentioned -- rewriting the NodeView logic on the Tiptap extension side. :(

index.es.js?576a:3280 Uncaught TypeError: Cannot read property 'dirty' of null
    at DOMObserver.flush (index.es.js?576a:3280)
    at MutationObserver.DOMObserver.observer (index.es.js?576a:3146)

arunsah · 2021-09-15T09:07:22Z

I gave this a try, and found that a naive wrap of the inline math mostly works except for the arrow-key escaping, which always ends up on the side it entered. Not sure why it's remembering that?

https://codesandbox.io/s/tiptap-math-04o0s?file=/src/components/HelloWorld.vue

import { Node } from '@tiptap/core'

import {
	makeBlockMathInputRule, makeInlineMathInputRule,
	REGEX_INLINE_MATH_DOLLARS, REGEX_BLOCK_MATH_DOLLARS
} from "@benrbray/prosemirror-math";
import { mathPlugin, mathBackspaceCmd, insertMathCmd, mathSerializer } from "@benrbray/prosemirror-math";

export default Node.create({
  name: 'math_inline',
  group: "inline math",
  content: "text*",        // important!
  inline: true,            // important!
  atom: true,              // important!

  parseHTML () {
    return [{
      tag: "math-inline"   // important!
    }]
  },

  renderHTML ({ HTMLAttributes }) {
    return ["math-inline", { class: "math-node" }, 0]
  },

  addProseMirrorPlugins () {
    return [
      mathPlugin
    ]
  },

  addInputRules () {
    return [
      makeInlineMathInputRule(REGEX_INLINE_MATH_DOLLARS, this.type)
    ]
  }
})

I love the package, by the way! I've hacked together something like this for myself, and it's not nearly as polished as this.

Hi, One import is missing, I guess. In the code snippet and as well as in codesandbox Extension.js file.

import mergeAttributes from '@tiptap/core/src/utilities/mergeAttributes'

Thanks for sharing. I was looking for something like this for a while. Reached here by following Inline Math Integration for Tiptap1 | BrianHung/Math.css | gist.github.com.

rajeshtva · 2021-10-07T03:51:49Z

Maybe this is a projection of a larger problem -- it seems that inserting text into an existing inline prosemirror-math NodeView generates a prosemirror error (despite successfully rendering the math for it afterward). This might take more work than my naive wrap sadly, and might resemble what one would do for the footnote you mentioned -- rewriting the NodeView logic on the Tiptap extension side. :(
index.es.js?576a:3280 Uncaught TypeError: Cannot read property 'dirty' of null
    at DOMObserver.flush (index.es.js?576a:3280)
    at MutationObserver.DOMObserver.observer (index.es.js?576a:3146)

@xzackli would you please share your implementation/hack? i am in a need to implement that thing too. plus i want to implement other things as well...

mraghuram · 2021-10-26T11:06:30Z

I finally got this to work with a few changes...

import { Node, nodeInputRule, mergeAttributes } from "@tiptap/core";

import { mathPlugin } from "@benrbray/prosemirror-math";


export const regex = /(?:^|\s)((?:\$)((?:[^*]+))(?:\$))$/;


export const MathInline =  Node.create({
  name: "math_inline",
  group: "inline math",
  content: "text*", // important!
  inline: true, // important!
  atom: true, // important!
  code: true,

  
  parseHTML() {
    return [
      {
        tag: "math-inline" // important!
      }
    ];
  },

  renderHTML({ HTMLAttributes }) {
    return ["math-inline", mergeAttributes({ class: "math-node" }, HTMLAttributes),0];
  },

  addProseMirrorPlugins() {
    return [mathPlugin];
  },

  addInputRules() {
    return [
      nodeInputRule({find:regex, type:this.type})];
  }
});

While this works, it does something strange. When I use $a=b$ it creates $empty$.. where empty is also with hidden $$. If I type between them then it recognizes the content. I am not sure why it deletes the content in the first place. Any thoughts / suggestion anyone?

loveklmn · 2021-10-29T10:17:05Z

I gave this a try, and found that a naive wrap of the inline math mostly works except for the arrow-key escaping, which always ends up on the side it entered. Not sure why it's remembering that?

https://codesandbox.io/s/tiptap-math-04o0s?file=/src/components/HelloWorld.vue

import { Node } from '@tiptap/core'

import {
	makeBlockMathInputRule, makeInlineMathInputRule,
	REGEX_INLINE_MATH_DOLLARS, REGEX_BLOCK_MATH_DOLLARS
} from "@benrbray/prosemirror-math";
import { mathPlugin, mathBackspaceCmd, insertMathCmd, mathSerializer } from "@benrbray/prosemirror-math";

export default Node.create({
  name: 'math_inline',
  group: "inline math",
  content: "text*",        // important!
  inline: true,            // important!
  atom: true,              // important!

  parseHTML () {
    return [{
      tag: "math-inline"   // important!
    }]
  },

  renderHTML ({ HTMLAttributes }) {
    return ["math-inline", { class: "math-node" }, 0]
  },

  addProseMirrorPlugins () {
    return [
      mathPlugin
    ]
  },

  addInputRules () {
    return [
      makeInlineMathInputRule(REGEX_INLINE_MATH_DOLLARS, this.type)
    ]
  }
})

I love the package, by the way! I've hacked together something like this for myself, and it's not nearly as polished as this.

It seems that tiptap.dev produced a new bug to cause error when typing. see https://codesandbox.io/s/tiptap-math-forked-2zfr9?file=/src/components/Extension.js
type $123$ and get empty

cadars · 2021-10-29T10:44:59Z

Might be related to this change? ueberdosis/tiptap#1997

mraghuram · 2021-10-31T23:36:23Z

@cadars, so is there a solution? and also, I'm struggling to insert math_inline using commands.

	addCommands() {
		return {
			setMath: () => ({commands}) => {
				// console.log("in math", x.can().setNode('math_inline'))
				return commands.setNode('math_inline')
			}
		}
	}

The above doesn't work. any thoughts?

wengtytt · 2022-02-02T22:34:34Z

I finally got this to work with a few changes...

import { Node, nodeInputRule, mergeAttributes } from "@tiptap/core";

import { mathPlugin } from "@benrbray/prosemirror-math";


export const regex = /(?:^|\s)((?:\$)((?:[^*]+))(?:\$))$/;


export const MathInline =  Node.create({
  name: "math_inline",
  group: "inline math",
  content: "text*", // important!
  inline: true, // important!
  atom: true, // important!
  code: true,

  
  parseHTML() {
    return [
      {
        tag: "math-inline" // important!
      }
    ];
  },

  renderHTML({ HTMLAttributes }) {
    return ["math-inline", mergeAttributes({ class: "math-node" }, HTMLAttributes),0];
  },

  addProseMirrorPlugins() {
    return [mathPlugin];
  },

  addInputRules() {
    return [
      nodeInputRule({find:regex, type:this.type})];
  }
});

While this works, it does something strange. When I use $a=b$ it creates $empty$.. where empty is also with hidden $$. If I type between them then it recognizes the content. I am not sure why it deletes the content in the first place. Any thoughts / suggestion anyone?

Any updates about this issue?

wengtytt · 2022-02-03T18:02:49Z

To make it compatible with the latest @tiptap input rules.

/* eslint-disable */
import { Node, mergeAttributes } from '@tiptap/core';

import { inputRules } from 'prosemirror-inputrules';

import {
    makeInlineMathInputRule,
    REGEX_INLINE_MATH_DOLLARS,
    mathPlugin,
} from '@benrbray/prosemirror-math';

import '@benrbray/prosemirror-math/style/math.css';
import 'katex/dist/katex.min.css';

export default Node.create({
    name: 'math_inline',
    group: 'inline math',
    content: 'text*', // important!
    inline: true, // important!
    atom: true, // important!
    code: true,

    parseHTML() {
        return [
            {
                tag: 'math-inline', // important!
            },
        ];
    },

    renderHTML({ HTMLAttributes }) {
        return ['math-inline', mergeAttributes({ class: 'math-node' }, HTMLAttributes), 0];
    },

    addProseMirrorPlugins() {
        const inputRulePlugin = inputRules({
            rules: [makeInlineMathInputRule(REGEX_INLINE_MATH_DOLLARS, this.type)],
        });

        return [mathPlugin, inputRulePlugin];
    },
});

wengtytt · 2022-02-03T18:51:37Z

Leave the math block here as well in case anybody needed. The mathPlugin only need to be inserted once if both math-inline and math-display are created.

/* eslint-disable */
import { Node, mergeAttributes } from '@tiptap/core';

import { inputRules } from 'prosemirror-inputrules';

import {
    mathPlugin,
    makeBlockMathInputRule,
    REGEX_BLOCK_MATH_DOLLARS,
} from '@benrbray/prosemirror-math';

export default Node.create({
    name: 'math_display',
    group: 'block math',
    content: 'text*', // important!
    atom: true, // important!
    code: true,

    parseHTML() {
        return [
            {
                tag: 'math-display', // important!
            },
        ];
    },

    renderHTML({ HTMLAttributes }) {
        return [
            'math-display',
            mergeAttributes({ class: 'math-node' }, HTMLAttributes),
            0,
        ];
    },

    addProseMirrorPlugins() {
        const inputRulePlugin = inputRules({
            rules: [makeBlockMathInputRule(REGEX_BLOCK_MATH_DOLLARS, this.type)],
        });

        return [mathPlugin, inputRulePlugin];
    },
});

swordream · 2022-04-03T12:57:52Z

Leave the math block here as well in case anybody needed. The mathPlugin only need to be inserted once if both math-inline and math-display are created.

/* eslint-disable */
import { Node, mergeAttributes } from '@tiptap/core';

import { inputRules } from 'prosemirror-inputrules';

import {
    mathPlugin,
    makeBlockMathInputRule,
    REGEX_BLOCK_MATH_DOLLARS,
} from '@benrbray/prosemirror-math';

export default Node.create({
    name: 'math_display',
    group: 'block math',
    content: 'text*', // important!
    atom: true, // important!
    code: true,

    parseHTML() {
        return [
            {
                tag: 'math-display', // important!
            },
        ];
    },

    renderHTML({ HTMLAttributes }) {
        return [
            'math-display',
            mergeAttributes({ class: 'math-node' }, HTMLAttributes),
            0,
        ];
    },

    addProseMirrorPlugins() {
        const inputRulePlugin = inputRules({
            rules: [makeBlockMathInputRule(REGEX_BLOCK_MATH_DOLLARS, this.type)],
        });

        return [mathPlugin, inputRulePlugin];
    },
});

Does the keymap worked?

raimondlume · 2023-04-14T15:25:50Z

Thanks for everyone in this thread for the examples!
Got it going in the editor without any problems with the latest tiptap version.

One hitch not yet working is the output of generateHtml, which only shows the raw TeX without being rendered by Katex.

Has anyone gotten this working by any chance? (@wengtytt - you seem to have gotten the furthest)

benrbray · 2023-04-15T03:48:36Z

I'm glad to see some progress integrating with TipTap. I don't use TipTap myself, but I would happily accept PRs (or suggested improvements) targeted at making TipTap integration easier.

raimondlume · 2023-04-17T12:00:14Z

Other than finding this thread, everything else was pretty straight-forward thanks to the examples by @wengtytt and others.

One thing that could be improved are the required ProseMirror peer dependencies. TipTap has their own wrapper @tiptap/pm which is pretty much required if you're doing anything more than basic, meaning that these could be reused for prosemirror-math as well, which atm pulls in the core ProseMirror packages as well.

The most convenient option imo would be to have the tiptap integration as a separate package which wraps prosemirror-math. I'd be open to contributing this - what would be the best option, a new repo or setting up a monorepo? @benrbray

FYI, TipTap has their own Mathematics extension as well, but it is behind a paywall and lacking in features / customisability compared to this package.

danlucraft · 2023-05-05T15:29:11Z

Thanks for your help @wengtytt and others. 🙏

It's all working great except one thing: clicking on the rendered equations does not open them for editing, as it does in this example. Has anyone seen that issue?

benrbray added the enhancement New feature or request label Aug 12, 2021

phxtho mentioned this issue Dec 22, 2021

Export Default Parse Rules #31

Closed

abisar mentioned this issue Jul 12, 2022

Problem with caret position of math_inline in RTL #41

Open

coderinblack08 mentioned this issue Jul 22, 2022

Usage with TipTap: Error: inner view should not exist! #43

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support Tiptap #27

Support Tiptap #27

benrbray commented Aug 12, 2021

xzackli commented Aug 25, 2021

benrbray commented Aug 26, 2021

xzackli commented Aug 26, 2021 •

edited

Loading

arunsah commented Sep 15, 2021

rajeshtva commented Oct 7, 2021

mraghuram commented Oct 26, 2021 •

edited

Loading

loveklmn commented Oct 29, 2021 •

edited

Loading

cadars commented Oct 29, 2021

mraghuram commented Oct 31, 2021

wengtytt commented Feb 2, 2022

wengtytt commented Feb 3, 2022 •

edited

Loading

wengtytt commented Feb 3, 2022 •

edited

Loading

swordream commented Apr 3, 2022

raimondlume commented Apr 14, 2023 •

edited

Loading

benrbray commented Apr 15, 2023

raimondlume commented Apr 17, 2023 •

edited

Loading

danlucraft commented May 5, 2023

Support Tiptap #27

Support Tiptap #27

Comments

benrbray commented Aug 12, 2021

xzackli commented Aug 25, 2021

benrbray commented Aug 26, 2021

xzackli commented Aug 26, 2021 • edited Loading

arunsah commented Sep 15, 2021

rajeshtva commented Oct 7, 2021

mraghuram commented Oct 26, 2021 • edited Loading

loveklmn commented Oct 29, 2021 • edited Loading

cadars commented Oct 29, 2021

mraghuram commented Oct 31, 2021

wengtytt commented Feb 2, 2022

wengtytt commented Feb 3, 2022 • edited Loading

wengtytt commented Feb 3, 2022 • edited Loading

swordream commented Apr 3, 2022

raimondlume commented Apr 14, 2023 • edited Loading

benrbray commented Apr 15, 2023

raimondlume commented Apr 17, 2023 • edited Loading

danlucraft commented May 5, 2023

xzackli commented Aug 26, 2021 •

edited

Loading

mraghuram commented Oct 26, 2021 •

edited

Loading

loveklmn commented Oct 29, 2021 •

edited

Loading

wengtytt commented Feb 3, 2022 •

edited

Loading

wengtytt commented Feb 3, 2022 •

edited

Loading

raimondlume commented Apr 14, 2023 •

edited

Loading

raimondlume commented Apr 17, 2023 •

edited

Loading