Set the element after instantiation

[oodavid]

Is your feature request related to a problem? Please describe.
Instantiation

Describe the solution you’d like
I'd like to be able to create the editor without an element, and use a method to set the element elsewhere in my app.

This way we can create the editor() without having to know if the DOM is ready, nor which element will be responsible for rendering. This will help me decouple the various UI elements for my application, ie:

// Pseudocode
const tiptap = new Editor({ ... });
<Container>
    <Toolbar>
    <Sidebar>
    <Editor-Document>
    <Breadcrumbs>
</Container>

^ in this example the <Editor-Document> may get access to tiptap and call tiptap.setElement(...) once ready. Other components may also get access to tiptap to listen to events etc.

Describe alternatives you’ve considered

Tried this without success

// Create without an element:
editor = new Editor({ ... });

// Set the element later
editor.setOptions({ element: document.getElementById('the-editor'), });

[philippkuehn]

Hey, thanks for supporting tiptap 2!
Can you explain to me why it’s not an option to wait for the DOM?

[oodavid]

Happy to support! Excited to be using such a fun project!

I can wait for the DOM, but it means I have a round trip - I want the editor to be created without knowledge of where the editor-element actually exists.

Looking at my pseudocode above, the elements <Toolbar>, <Sidebar> and <Breadcrumbs> would have to wait for the editor to be created by <Editor-Document> before referencing the tiptap editor object, which feels a bit "boilerplatey". It would be great if they could access tiptap regardless of whether element has been set.

It might be a limitation in the way I'm thinking about it, will have another think :)

[oodavid]

@philippkuehn I've recorded a quick video (7 min) running through example code. I cover the current situation, and walk through how the code would be improved with having something like editor.setElement(...)

TLDR; I can make it work by waiting for the DOM, but it adds a lot of complexity.

https://www.loom.com/share/cc0ec43b92524b108c129fa2c1d2d6b8

[oodavid]

Solved it in a hacky, undocumented way.

1. I noticed that a <div> is created when element is null:
   https://github.com/ueberdosis/tiptap-next/blob/main/packages/core/src/Editor.ts#L43
2. I use myElement.append(editor.options.element); to render the blank <div> within my DOM
3. My code is now beautiful :)

It might be worth documenting or formalising this, it's a massive improvement to my codebase :)

[hanspagel]

Thanks for sharing! It’s added to the documentation.

[oodavid]

After a little thought, I think it might be best to advise this approach:

// Create anywhere
const element = document.createElement('div')
const tiptap = new Editor({ element, ... });
// Add to DOM (or not)
someContainerElement.append(element);

That way you're not making promises about TipTap internals, and can make the element attribute required.

[oodavid]

Since I can't fork the repo, this is my docs proposal:

https://github.com/ueberdosis/tiptap-next/blob/main/docs/src/docPages/api/editor.md

---

Init before mounting

You can initiate your editor before mounting. This is useful when your DOM is not yet available, or you want to decouple the editor from the DOM.

import { Editor } from '@tiptap/core'
import { defaultExtensions } from '@tiptap/starter-kit'
const element = document.createElement('div')
new Editor({
  element: element,
  extensions: defaultExtensions(),
})

You can then mount the element at a later date.

yourContainerElement.append(element)

[hanspagel]

Thanks, I updated the documentation!