Multiple editors and accessing editors by id through context provider

[adri1wald]

We are building a webapp with multiple editors that can be updated through interactions with other parts of the UI. For example, we have a PDF viewer from which you can add the selection to the last active editor.

We are currently using slate, but testing out Lexical on recommendation of an expert. With slate we have a context provider which stores in state a map from editorId to Editor. We can then dynamically add and remove editors by id, as well as get an editor by id from any child of that provider.

I'm wondering how to do this with Lexical? It seems that creation and initialization is now an implementation detail of <LexicalComposer />, so I'm wondering how to "get the editor out" of that subtree. Best I've though of so far (untested):

import { useEffect } from 'react'
import { LexicalComposer } from '@lexical/react/LexicalComposer'

function Editor(props) {
  // hook to access editor context
  const editors = useEditors()
  useEffect(() => () => editors.deleteEditor(props.editorId), [])
  return (
    <LexicalComposer
      initialConfig={{
        namespace: props.editorId,
        editorState(editor) {
          editors.createEditor(props.editorId, editor)
        },
        ...
      }}
    >
      ...
    </LexicalComposer>
  )
}

[thegreatercurve]

Closing as we chatted about this in the Discord. The agreed upon answer was to pass editor instances up to a parent context using a custom plugin via useEffect.

[adri1wald]

To elaborate on the above, here's my implementation following discussion with @thegreatercurve:

EditorProvider.tsx

import { createContext, useContext, useCallback, useMemo, useState } from 'react'
import { LexicalEditor } from 'lexical'
// `Record` type with potentially `undefined` values
import { PartialRecord } from '@/utils/types'

type EditorMutations = {
  createEditor: (id: string, editor: LexicalEditor) => void
  deleteEditor: (id: string) => void
}

type EditorMap = PartialRecord<string, LexicalEditor>

type EditorContextValue = EditorMutations & {
  editors: EditorMap
}

const EditorContext = createContext<EditorContextValue | null>(null)

export const EditorProvider = (props: React.PropsWithChildren<{}>) => {
  const [ editors, setEditors ] = useState<EditorMap>({})

  const createEditor = useCallback((id: string, editor: LexicalEditor) => {
    setEditors((editors) => {
      if (editors[id]) return editors
      return { ...editors, [id]: editor }
    })
  }, [])

  const deleteEditor = useCallback((id: string) => {
    setEditors((editors) => {
      if (!editors[id]) return editors
      const { [id]: _, ...rest } = editors
      return rest
    })
  }, [])

  const value = useMemo(() => {
    return {
      editors,
      createEditor,
      deleteEditor
    }
  }, [
    editors,
    createEditor,
    deleteEditor
  ])

  return (
    <EditorContext.Provider value={value}>
      {props.children}
    </EditorContext.Provider>
  )
}

export const useEditors = (): EditorMutations => {
  const context = useContext(EditorContext)
  if (context === null) {
    throw new Error(
      `The \`useEditors\` hook must be used inside the <EditorProvider> component's context.`
    )
  }
  const { createEditor, deleteEditor } = context
  return { createEditor, deleteEditor }
}

export const useEditor = (id: string): LexicalEditor | null => {
  const context = useContext(EditorContext)
  if (context === null) {
    throw new Error(
      `The \`useEditor\` hook must be used inside the <EditorProvider> component's context.`
    )
  }
  return context.editors[id] || null
}

MultipleEditorStorePlugin.tsx

import { useEffect } from 'react'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { useEditors } from './EditorProvider'

export type MultipleEditorStorePluginProps = {
  id: string
}

export function MultipleEditorStorePlugin(props: MultipleEditorStorePluginProps) {
  const { id } = props
  const [editor] = useLexicalComposerContext()
  const editors = useEditors()
  useEffect(() => {
    editors.createEditor(id, editor)
    return () => editors.deleteEditor(id)
  }, [id, editor]) // eslint-disable-line react-hooks/exhaustive-deps
  return null
}

Editor.tsx

import { LexicalComposer } from '@lexical/react/LexicalComposer'
import { ContentEditable } from '@lexical/react/LexicalContentEditable'
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
import { MultipleEditorStorePlugin } from './MultipleEditorStorePlugin'

export type LexicalEditorProps = {
  id: string
}

export function LexicalEditor(props: LexicalEditorProps) {
  const { id } = props
  const initialConfig = {
    namespace: 'MyEditor',
    onError(error: Error) {
      console.log(error)
    }
  }
  return (
    <LexicalComposer initialConfig={initialConfig}>
      <RichTextPlugin
        contentEditable={<ContentEditable />}
        placeholder='Start typing...'
      />
      <MultipleEditorStorePlugin id={id} />
    </LexicalComposer>
  )
}

[stephensanwo]

Thanks for the snippet @adri1wald just curious, did having multiple editors affect performance in anyway?

[KalanaPerera]

I am about to check multiple editors. @stephensanwo have you faced any performance issues?

[Amansaxena001]

is this the only way to have multiple instances running? I have a very simple usecase of mapping a field ( lexical editor only )

Even if I go with this approach the editors are loosing focus when multiple are rendered in same view

[etrepum]

Your focus getting lost has nothing to do with this, it's because when you set a selection on an editor it will reconcile that selection to the DOM unless you explicitly tell it not to. https://lexical.dev/docs/concepts/selection#focus

The above EditorMap solution seems pretty complicated, you could probably come up with something a lot simpler with the LexicalEditorRefPlugin.