dev-juju/EditorJS-React-Renderer

Error: CodeBox Renderer: Cannot read properties of null (reading 'className')

Closed this issue · 1 comments

Ouzx commented

Describe the bug
When I put CodeBox block as data to Output object, I'm getting error like this:
image

Other features and components works well, but I couln't handle it.

To Reproduce

// data: just simple editorjs data that includes codebox
return <Output data={data} style={style} />;

Additional context
Also I can not change styling of CodeBox.

Call Stack

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'className')

Call Stack
<unknown>
https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js (2:7941)
Object.d [as highlightBlock]
https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js (2:8236)
eval
node_modules/editorjs-react-renderer/dist/index.min.js (1:37988)
eval
node_modules/editorjs-react-renderer/dist/index.min.js (1:38770)
React
commitHookEffectListMount
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26607:0)
commitHookPassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28610:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28863:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28913:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28943:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28943:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28943:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28797:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
Ouzx commented

I found a solution like this, it is working on my side but I'm not sure about infinite loop or performance issues.

// EditorJS-React-Renderer/tree/master/renderers/codeBox.tsx line: 125
  const highlightBlock = useCallback(() => {
    if (typeof (window as any).hljs !== "undefined") {
      const codeElement = codeAreaRef.current;
      if (codeElement && codeElement.className) {
        (window as any).hljs.highlightBlock(codeElement);
      }
    } else setTimeout(highlightBlock, 250);
  }, [codeAreaRef]);