Is it possible to use react node for decoration?

[pie6k]

I'd like to use something very similar to placeholder, but showing "+" icon next to the cursor in empty nodes:

I imagine this could be achieved without React with bunch of CSS hacking or vanilla JS DOM manipulations, but in React I have both icon and tooltip component in place.

Thus question if it is possible to create react-rendered nodes for decorations?

[omarkhairy21]

i have done something similar using floating-menu https://tiptap.dev/api/extensions/floating-menu and yon can position it from tippyjs

<FloatingMenu editor={editor} tippyOptions={{ zIndex: 1, placement: 'left' }}> 
...
 </FloatingMenu>

[Aldredcz]

Any plans on adding support for using React code for decorations? It sounds to me like a very important part for building versatile editors. Or any other approaches are recommended?

I see the approach described by you, @omarkhairy21, but I think it comes short when you need to render a decoration (widget / node) for every block, not just active/selected one.

Thank you! 🙏

[fdintino]

This question is nearly a year old, but in case it is at all helpful: it's possible to render react elements in a decoration with react-dom. You'd need to use Decoration.widget so you have a place to call the unmount method.

import ReactDOM from "react-dom/client";
import { Decoration } from "@tiptap/pm/view";

let root: ReactDOM.Root | null = null;

const decoration = Decoration.widget(
  pos,
  () => {
    const div = document.createElement("div");
    root = ReactDOM.createRoot(div);
    root.render(<MyComponent />);
    return div;
  },
  {
    destroy: () => root?.unmount(),
  },
);