Controlling the editor from outside the React component

[schnubor]

Hi!

I have the following problem: I have multiple instances of TipTap running in some kind of "art board" or "website editor" that has a sidebar which contains controls for the text, e.g. text align (left, center, right) and text styles (bold, italic, etc.). Right now the sidebar is completely decoupled from the TipTap editors/components.

How can I access the respective editor for the selected Text within this sidebar for getting active states and running commands? I tried using some kind of shared state management like Redux but no luck, since the editor class/state itself from useEditor is way too big for redux and is not writeable etc.

How would I get access to the respective editors from outside their react components?

Cheers,
Christian

[trevorpfiz]

I have this question as well. I have resorted to using novel.sh for now and the onCreate prop. Not sure what the equivalent in Tiptap is.

[schnubor]

Solved my cases with the use of createPortal, "portaling" the controls from components that have access to the editor class to wherever I need them.

[RakeshSangem]

HI @schnubor, Can you explain bit more?

I am facing the same issue. I have a dashboard where I have multiple instances of the editor. But the problem is that I need that editor instance, which I am currently interacting with. If you could elaborate more, that would be nice.

Thanks,
Rakesh

[RakeshSangem]

Thank you so much for the idea. I also implemented the same, it's working fine now.

[samuelbaizg]

Hi @RakeshSangem Can you please explain more about how you implement to get the editor instance which is defined in sub components?

I am facing the same issue. I have a sidebar to update content from one of multiple editors by diferent click. but I can not get insntance of editor defined in sub component.

Thanks so much

[djyde]

HI @schnubor, Can you explain bit more?

I am facing the same issue. I have a dashboard where I have multiple instances of the editor. But the problem is that I need that editor instance, which I am currently interacting with. If you could elaborate more, that would be nice.

Thanks, Rakesh

Hi @RakeshSangem Can you please explain more about how you implement to get the editor instance which is defined in sub components?

I am facing the same issue. I have a sidebar to update content from one of multiple editors by diferent click. but I can not get insntance of editor defined in sub component.

Thanks so much

I solved it by using state management library (e.g. jotai) to store the editor instance in a state:

const editorStore = createStore()
const editorAtom = atom<Editor | null>(null)

function Chat() {

  const editor = useEditor({
    extensions: [
      StarterKit
    ],
    onCreate({ editor }) {
      editorStore.set(editorAtom, editor)
    }
  })

  return (
    <div>
      <EditorContent editor={editor} />
      <Controls />
    </div>
  )
}

function Controls() {
  const editor = useAtomValue(editorAtom)
  return (
    <div>
      <button onClick={() => {
        if (editor) {
          const html = editor.getHTML();
          console.log(html);
        }
      }}>
        Get HTML
      </button>
    </div>
  )
}

export default function Root() {
  return (
    <Provider store={editorStore}>
      <App />
    </Provider>
  )
};