benrbray / prosemirror-math

Schema and plugins for "first-class" math support in ProseMirror!
https://benrbray.com/prosemirror-math/
MIT License
258 stars 36 forks source link

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

Open coderinblack08 opened 2 years ago

coderinblack08 commented 2 years ago

I've been trying to integrate TipTap with prosemirror-math. However, whenever I enter "editing mode" via mouse-click or arrow-keys, Error: inner view should not exist! popups. Here's the custom node I'm using (derived from #27):

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

import { inputRules } from "prosemirror-inputrules";

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

export const Math = 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, mathSelectPlugin];
  },
});

Expected Behavior

The extension to work :)

{
  "@tiptap/react": "^2.0.0-beta.114", 
  "@benrbray/prosemirror-math": "^0.2.2",
}

Current Behavior

https://user-images.githubusercontent.com/41022901/180571958-65061f3a-0ddb-46c2-8205-a97587ed9438.mov

lilingxi01 commented 2 years ago

I have encountered the same issue with the same version (for both tiptap and prosemirror-math). I will leave a comment here if I could find a solution.

jibin2706 commented 9 months ago

@coderinblack08 @lilingxi01 did you folks find any solution for this?