Insert non-html elements in tiptap editor react

I am trying to implement tiptap editor in react js with a mathjax library called better-react-mathjax which converts latex code to readable equations.

My issue is that the library converts the latex code and wrap it inside an non-html element node and then gives it as the result. But on inserting that content to tiptap editor, the editor removes the non-html element node from it. As a result the equation view breaks.

How I can insert non-html element node to tiptap editor to show the equation in format using the default functions by overriding this conditional behaviour of the tiptap editor.

Any help would be thankful as I am new to reactjs and also with this tiptap editor

Example:
I have a node like below which I want to add inside a paragraph.

<span style="display: block;"><mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" tabindex="0" ctxtmenu_counter="0" style="font-size: 103.9%; position: relative;"><mjx-math class="MJX-TEX" aria-hidden="true"><mjx-mfrac><mjx-frac><mjx-num><mjx-nstrut></mjx-nstrut><mjx-mn class="mjx-n" size="s"><mjx-c class="mjx-c31"></mjx-c><mjx-c class="mjx-c30"></mjx-c></mjx-mn></mjx-num><mjx-dbox><mjx-dtable><mjx-line></mjx-line><mjx-row><mjx-den><mjx-dstrut></mjx-dstrut><mjx-mrow size="s"><mjx-mn class="mjx-n"><mjx-c class="mjx-c34"></mjx-c></mjx-mn><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D465 TEX-I"></mjx-c></mjx-mi></mjx-mrow></mjx-den></mjx-row></mjx-dtable></mjx-dbox></mjx-frac></mjx-mfrac><mjx-mo class="mjx-n" space="4"><mjx-c class="mjx-c2248"></mjx-c></mjx-mo><mjx-msup space="4"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.363em;"><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c31"></mjx-c><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom></mjx-script></mjx-msup></mjx-math><mjx-assistive-mml unselectable="on" display="inline"><mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" tabindex="0" ctxtmenu_counter="1" style="font-size: 103.9%; position: relative;"><mjx-math class="MJX-TEX" aria-hidden="true"><mjx-mfrac><mjx-frac><mjx-num><mjx-nstrut></mjx-nstrut><mjx-mn class="mjx-n" size="s"><mjx-c class="mjx-c31"></mjx-c><mjx-c class="mjx-c30"></mjx-c></mjx-mn></mjx-num><mjx-dbox><mjx-dtable><mjx-line></mjx-line><mjx-row><mjx-den><mjx-dstrut></mjx-dstrut><mjx-mrow size="s"><mjx-mn class="mjx-n"><mjx-c class="mjx-c34"></mjx-c></mjx-mn><mjx-mi class="mjx-i"><mjx-c class="mjx-c1D465 TEX-I"></mjx-c></mjx-mi></mjx-mrow></mjx-den></mjx-row></mjx-dtable></mjx-dbox></mjx-frac></mjx-mfrac><mjx-mo class="mjx-n" space="4"><mjx-c class="mjx-c2248"></mjx-c></mjx-mo><mjx-msup space="4"><mjx-mn class="mjx-n"><mjx-c class="mjx-c32"></mjx-c></mjx-mn><mjx-script style="vertical-align: 0.363em;"><mjx-texatom size="s" texclass="ORD"><mjx-mn class="mjx-n"><mjx-c class="mjx-c31"></mjx-c><mjx-c class="mjx-c32"></mjx-c></mjx-mn></mjx-texatom></mjx-script></mjx-msup></mjx-math><mjx-assistive-mml unselectable="on" display="inline"><math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mn>10</mn><mrow><mn>4</mn><mi>x</mi></mrow></mfrac><mo>≈</mo><msup><mn>2</mn><mrow data-mjx-texclass="ORD"><mn>12</mn></mrow></msup></math></mjx-assistive-mml></mjx-container></mjx-assistive-mml></mjx-container></span>

But tiptap editor removes all the non-html element nodes like mjx-container, math etc and only appends span inside the paragraph

Like below

TLDR: Create your own extension or try to use a prosemirror extensionprosemirror-math extension (Or use it as a inspiration)

Tiptap will parse the html that you provide as initial content and convert it to the extensions that you use in your editor. As you say if there is html that cant be parsed to any extension this parts will be remove.

In your case you will need to create a custom extension (probably several)
Example here
Documentation here

Whats important here is:

parseHTML: How tiptap should parse html to your extension. I would recommend to create your own tag e.g. <math>, however you could use regular html tags and use attributes to parse it correctly.

renderHTML: How tiptap should return your extension to "html" here you use your own tag names. Mostly used when you want to export html from the editor to storage.

addNodeView: Here is where the magic happens, since you can use your own react components to show in the editor.

In summary parseHTMLhow tiptap should not to use your extension. renderHTML to be able to store your content in external storage. addNodeView here is where you use react components.

I do not have a example with math equations, however this is a custom extension I use that you could see as some of a template:

import {
  ActionIcon,
  Box,
  Checkbox,
  createStyles,
  Modal,
  Text,
} from "@mantine/core";
import { Editor, NodeViewWrapper } from "@tiptap/react";
import React, { useState } from "react";

import { mergeAttributes, Node } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { useTranslation } from "react-i18next";
import ModalButtonGroup from "src/components/modal/ModalButtonGroup";
import { AddressBook as AddressBookIcon } from "tabler-icons-react";

export interface ContactsInputOptions {
  contacts?: string[];
}
declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    addressBook: {
      insertAddressBook: () => ReturnType;
    };
  }
}
const AddressBook = Node.create<ContactsInputOptions>({
  name: "addressBook",
  inline: true,
  group: "inline",

  addOptions() {
    return {
      ...this.parent?.(),
    };
  },

  addCommands() {
    return {
      insertAddressBook:
        () =>
        ({ commands }) => {
          return commands.insertContent({
            type: "addressBook",
          });
        },
    };
  },
  parseHTML() {
    return [
      {
        tag: "address-book",
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    return ["address-book", mergeAttributes(HTMLAttributes)];
  },

  addNodeView() {
    return ReactNodeViewRenderer(AddressBookComponent);
  },
});

const useStyles = createStyles((theme) => ({
  inputWrapper: {
    display: "inline-block",
    verticalAlign: "bottom",
  },
}));

interface AddressBookComponentProps {
  node: { attrs: any };
  updateAttributes: (attrs: any) => void;
  selected: boolean;
  editor: Editor;
  getPos: () => number;
  extension: Node;
}

const AddressBookComponent: React.FC<AddressBookComponentProps> = ({
  editor,
  node,
  updateAttributes,
  getPos,
  extension,
}) => {
  const { classes } = useStyles();
  const [opened, setOpened] = useState(false);
  if (!editor.isEditable) {
    return null;
  }
  return (
    <NodeViewWrapper className={classes.inputWrapper}>
      {opened && (
        <ContactsModal
          onClose={() => setOpened(false)}
          onAdd={(text) => {
            editor.chain().focus().insertContentAt(getPos(), text).run();
            setOpened(false);
          }}
          contacts={extension.options.contacts}
        />
      )}
      <ActionIcon
        size={"sm"}
        onClick={() => {
          return setOpened(true);
        }}
      >
        <AddressBookIcon />
      </ActionIcon>
    </NodeViewWrapper>
  );
};

const ContactsModal: React.FC<{
  onClose: () => void;
  onAdd: (value: string) => void;
  contacts?: string[];
}> = ({ contacts, onClose, onAdd }) => {
  const { t } = useTranslation("notepad", { keyPrefix: "addressBook" });
  const [selectedContacts, setSelectedContacts] = useState<number[]>([]);
  return (
    <Modal opened={true} onClose={() => onClose()} title={t("modalTitle")}>
      {contacts && contacts.length > 0 ? (
        contacts.map((contact, index) => {
          return (
            <Box key={contact} pt={"sm"}>
              <Checkbox
                label={contact}
                checked={selectedContacts.includes(index)}
                onChange={(event) => {
                  if (event.target.checked) {
                    setSelectedContacts([...selectedContacts, index]);
                  } else {
                    setSelectedContacts(
                      selectedContacts.filter((i) => i !== index)
                    );
                  }
                }}
              />
            </Box>
          );
        })
      ) : (
        <Text>{t("noContactsFound")}</Text>
      )}
      <ModalButtonGroup
        onCancel={() => onClose()}
        onSubmit={() => {
          contacts &&
            onAdd(
              contacts
                ?.filter((_, index) => selectedContacts.includes(index))
                .join(", ")
            );
        }}
        submitLabel={t("insert")}
        disabled={selectedContacts.length === 0}
      />
    </Modal>
  );
};

export default AddressBook;