onfocus & onblur ?

Question

Is there a way to get onfocus & onblur ?

Context

I would like to represent the whole Editor inside textarea-like box with our CI-styles for focused & idle states

Thank you

[pac92]

This worked for me:

    const editorElement = document.getElementById('editorjs') // your "holder" ID
    editorElement.addEventListener('focusin', () => {
        // your logic
    })
    editorElement.addEventListener('focusout', () => {
        // your logic
    })

[webdeb]

For those who is using it with react:

  useEffect(() => {
    if (!editorInstance) return

    const holderId = editorInstance.configuration.holder
    const editorElement = document.getElementById(holderId)
    const onFocusIn = () => setFocused(true)
    const onFocusOut = () => setFocused(false)
    editorElement.addEventListener("focusin", onFocusIn)
    editorElement.addEventListener("focusout", onFocusOut)

    return () => {
      editorElement.removeEventListener("focusin", onFocusIn)
      editorElement.removeEventListener("focusout", onFocusOut)
    }
  }, [editorInstance])