Set the element after instantiation

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'), });

[hanspagel]

Thanks, I updated the documentation!

[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)