Everytime I change code or update [hot reload happens] something tiptap crashes. Remix JS + Tailwind Css

[fzsf163]

I am trying to use tiptap with remix js and tailwind css. Everything works well until I change or update a code or content object titap crashes.

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. this is the first error that appears.

hmr-runtime:remix:hmr:64 Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

Uncaught TypeError: Cannot read properties of null (reading 'updateOuterDeco')

The above error occurred in the <FloatingMenu2> component:

hmr-runtime:remix:hmr:64 React Router caught the following error during render DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

The above error occurred in the <BubbleMenu2> component:

These errors are appearing after every update, whenever hot reload happens. Another manual reload and everything is working fine.

versions:

 "@tiptap/pm": "^2.2.4",
 "@tiptap/react": "^2.2.4",
 "@tiptap/starter-kit": "^2.2.4",
 "react": "^18.2.0",

Code:
this is where tiptap is called
blog.tsx

import { ClientOnly } from "remix-utils/client-only";
import Editor from "~/components/tiptap.client"

export default function Blog_View() {
  return (
    <div className="mx-auto flex w-[800px] max-w-4xl cursor-text flex-col gap-2 py-10">
      <ClientOnly fallback={<>Loading....</>}>
        {() => <Editor></Editor>}
      </ClientOnly>
    </div>
  );
}

Tiptap.client.tsx

import React from "react";
import {
  BubbleMenu,
  EditorContent,
  FloatingMenu,
  useEditor,
} from "@tiptap/react";
import Extensions from "./extensions.client";
import Props from "./props.client";
const Editor: React.FC = () => {
  const content = `
    <div data-type="rootblock">
      <h1>Hs1</h1>
    </div>
    <div data-type="rootblock">
      <h2>H22</h2>
    </div>
    <div data-type="rootblock">
      <h3>H3</h3>
    </div>
    <div data-type="rootblock">
      <h6>H6</h6>
    </div>
    <div data-type="rootblock">
      <p>Hello, this is a custom ssdocussment structure!!!</p>
    </div>
    <div data-type="rootblock">
      <p>Hello, this is ass custom dssocssssumentsssada sstsadsructurassssadsssswde!!!1!!!!</p>
    </div>
    `;
  const editor = useEditor({
    extensions: Extensions,
    editorProps: Props,
    content: content,
    onUpdate({ editor }) {
      let c = editor.getHTML();
      console.log(c);
    },
  });

  if (!editor) return null;

  return (
    <div className="min-h-screen w-full">
      <EditorContent editor={editor!} />
      <FloatingMenu editor={editor}>This is the floating menu</FloatingMenu>
      <BubbleMenu editor={editor} className="bg-black">
        This is the bubble menu
      </BubbleMenu>
    </div>
  );
};

export default Editor;

props.client.tsx

import { EditorProps } from "@tiptap/pm/view";

const Props: EditorProps = {
  attributes: {
    class:
      "prose-base prose-gray prose-headings:font-bold focus:outline-none prose-h1:mt-[10px] prose-h2:mt-[14px] prose-h3:mt-[14px] prose-p:mt-4",
  },
};

export default Props;

extensions.client.tsx

import StarterKit from "@tiptap/starter-kit";
import { Node } from "@tiptap/core";
import RootBlock from "./root-block.client";
import Keymap from "./keymap.client";
const Document = Node.create({
  name: "doc",
  topNode: true,
  content: "rootblock+",
});

const Extensions = [
  Document,
  RootBlock,
  Keymap,
  StarterKit.configure({
    document: false,
  }),
];

export default Extensions;

keymap.client.tsx

import { Extension } from "@tiptap/core";

// Extend the Commands interface to include the handleEnterKey command for Keymap
declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    Keymap: {
      handleEnterKey: () => ReturnType;
    };
  }
}

// Define and create the Keymap extension
const Keymap = Extension.create({
  name: "Keymap",

  // Define custom commands for the extension
  addCommands() {
    return {
      handleEnterKey:
        () =>
        ({ state, chain }) => {
          const { selection, doc } = state;
          const { $from, $to } = selection;

          // Check if the cursor is within a rootblock, no selection is made, and if it's at the end of a block.
          if (
            $from.node(-1).type.name === "rootblock" &&
            $from.parent.type.isBlock &&
            $to.pos === $from.pos
          ) {
            if ($to.pos === $from.end()) {
              // Create and focus on a new root block with a paragraph inside at the cursor position
              return chain()
                .insertContentAt($from.pos, {
                  type: "rootblock",
                  content: [
                    {
                      type: "paragraph",
                    },
                  ],
                })
                .focus($from.pos + 4)
                .run();
            } else {
              console.log("Cursor is not at the end of the block");

              let currentActiveNodeTo = -1;

              // Iterate over document nodes to find the active node's end position.
              doc.descendants((node, pos) => {
                if (currentActiveNodeTo !== -1) return false;
                if (node.type.name === "rootblock") return;

                const [nodeFrom, nodeTo] = [pos, pos + node.nodeSize];
                if (nodeFrom <= $from.pos && $to.pos <= nodeTo)
                  currentActiveNodeTo = nodeTo;

                return false;
              });

              const content = doc
                .slice($from.pos, currentActiveNodeTo)
                ?.toJSON().content;

              // Replace content from cursor to the end of the block with new content.
              return chain()
                .insertContentAt(
                  { from: $from.pos, to: currentActiveNodeTo },
                  {
                    type: "rootblock",
                    content,
                  },
                )
                .focus($from.pos + 4)
                .run();
            }
          }

          // If conditions aren't met, use the default Enter behavior
          return false;
        },
    };
  },

  // Define keyboard shortcuts for the extension
  addKeyboardShortcuts() {
    return {
      Enter: ({ editor }) => editor.commands.handleEnterKey(), // Call handleEnterKey command on Enter key press
    };
  },
});

export default Keymap;

root-block.client.tsx

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

import RootBlockComponent from "./root-block-component.client";

// Extend the Commands interface to include RootBlockCommands
declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    RootBlockCommands: {
      setRootBlock: (position?: number) => ReturnType;
    };
  }
}

// Create and export the RootBlock node
export const RootBlock = Node.create({
  name: "rootblock",
  group: "rootblock",
  content: "block", // Ensure only one block element inside the rootblock
  draggable: true, // Make the node draggable
  selectable: false, // Node isn't selectable
  inline: false, // Node is a block-level element
  priority: 1000, // Priority for node resolution

  // Default options for the node
  addOptions() {
    return {
      HTMLAttributes: {},
    };
  },

  // Define commands specific to the RootBlock node
  addCommands() {
    return {
      setRootBlock:
        (position) =>
        ({ state, chain }) => {
          const {
            selection: { from },
          } = state;

          // Determine the insertion position
          const pos = position ?? from;

          // Insert a new rootblock node and focus on it
          return chain()
            .insertContentAt(pos, {
              type: "rootblock",
              content: [
                {
                  type: "paragraph",
                },
              ],
            })
            .focus(pos + 4)
            .run();
        },
    };
  },

  // Define keyboard shortcuts for the RootBlock node
  addKeyboardShortcuts() {
    return {
      "Mod-Alt-0": () => this.editor.commands.setRootBlock(),
    };
  },

  // Rules to parse the node from HTML
  parseHTML() {
    return [
      {
        tag: 'div[data-type="rootblock"]',
      },
    ];
  },

  // Rules to render the node to HTML
  renderHTML({ HTMLAttributes }) {
    return [
      "div",
      mergeAttributes(HTMLAttributes, { "data-type": "rootblock" }),
      0,
    ];
  },

  // Use ReactNodeViewRenderer to render the node view with the RootBlockComponent
  addNodeView() {
    return ReactNodeViewRenderer(RootBlockComponent);
  },
});

export default RootBlock;

root-block-component.client.tsx

import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { PlusIcon, GripVertical } from "lucide-react";

// Define the RootBlockComponent, which will serve as a custom Node View in the Tiptap editor
const RootBlockComponent: React.FC<NodeViewProps> = ({
  node,
  getPos,
  editor,
}) => {
  // Function to create a new node immediately after the current node
  const createNodeAfter = () => {
    // Calculate the position right after the current node
    const pos = getPos() + node.nodeSize;

    // Use the editor's command to insert a new "rootblock" node at the calculated position
    editor
      .chain()
      .insertContentAt(pos, {
        type: "rootblock",
        content: [
          {
            type: "paragraph",
          },
        ],
      })
      .focus(pos + 3) // Focus on the new block (you might need to adjust the position based on your exact requirements)
      .run();
  };

  // Render the custom node view
  return (
    <NodeViewWrapper
      as="div"
      className="group relative mx-auto flex w-full gap-2"
    >
      <div className="relative mx-auto w-full max-w-4xl">
        {/* Container for buttons that appear on hover */}
        <div
          className="absolute -left-12 top-5 flex w-12 gap-1 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"
          aria-label="left-menu"
        >
          {/* Button to add a new node after the current node */}
          <button type="button" onClick={createNodeAfter} className="">
            <PlusIcon className="h-5 w-5" />
          </button>
          {/* Draggable handle button to allow rearranging nodes */}
          <button draggable data-drag-handle className="cursor-grab">
            <GripVertical className="h-5 w-5" />
          </button>
        </div>
        {/* Area where the node's actual content will be rendered */}
        <NodeViewContent className="w-full" />
      </div>
    </NodeViewWrapper>
  );
};

export default RootBlockComponent;

[bryantbrock]

Any status here?

[nperez0111]

Would need a reproduction. Often times this error occurs because bubble menu needs a div wrapped around it.