"TypeError: this._iframeAutoHeight is not a function" error appears when navigating from one Topic to other.

[roker15]

I am using suneditor to render the content of different topics. When I switch from one topic to other topic. "TypeError: this._iframeAutoHeight is not a function" comes. Also sometimes TypeError: core.getSelectionNode is not a function comes in the same process.

These errors are more likely to come when switch from one topic to other faster.

This Error was reported earlier also but in recent version it was gone. Again it started appearing once i updated to 2.43.9. I am using react 18 and nextjs 12

[JiHong88]

As it was updated to 2.43.9, the related code was not modified. How can I reproduce the issue?

[roker15]

As it was updated to 2.43.9, the related code was not modified. How can I reproduce the issue?

This is a long issue see here https://github.com/mkhstar/suneditor-react/issues/94

In my opinion this is the most important issue to resolve. As i said first it loads without error , and then i click to navigate on next topic then it appears.

In this https://github.com/mkhstar/suneditor-react/issues/94 thread , It is mentioned by the owner that destroy editor before navigating. But that i can not do. Here is my answer on that thread. https://github.com/mkhstar/suneditor-react/issues/94#issuecomment-1157168808

This issue is very critical and requires your special attention.

[JiHong88]

Is this an error that only occurs in "suneditor-react"?

[jlbousing]

I have the same problem. When I click options buttons like bold, italic, etc that errors happend. I use nextjs

this is my code.

import React, { useState, useEffect, useRef } from 'react'
import ButtonWrapper from '@components/Wrappers/ButtonWrapper'
import { usePatchSystemMutation } from '@services/systemServices'
import { redirectTo } from '@utils/redirectUtil'
import TypographyWrapper from '@components/Wrappers/TypographyWrapper'
import StackWrapper from '@components/Wrappers/StackWrapper'
import dynamic from 'next/dynamic'
import 'suneditor/dist/css/suneditor.min.css'
import SunEditorCore from 'suneditor/src/lib/core'

export const Editor = (props: any) => {
  const SunEditor = dynamic(() => import('suneditor-react'), {
    ssr: false,
  })

  const editor = useRef<SunEditorCore>()

  // The sunEditor parameter will be set to the core suneditor instance when this function is called
  const getSunEditorInstance = (sunEditor: SunEditorCore) => {
    editor.current = sunEditor
  }

  const [system, setSystem] = useState<any>(null)
  const [systemMutation, systemMutationData] = usePatchSystemMutation()
  const [text, setText] = useState<string>('')

  useEffect(() => {
    if (props.system) {
      setSystem(props.system)
    }
  }, [props])

  useEffect(() => {
    if (props.system) {
      if (systemMutationData.isSuccess) {
        redirectTo('/terms')
      }
    }
  }, [systemMutationData])

  const handleChange = (value: string) => {
    setText(value)
  }

  const updateTerms = () => {
    systemMutation(system)
  }

  return (
    <>
      {system && (
        <>
          <TypographyWrapper
            variant="subtitle2"
            fontSize="20px"
            justifyContent="center"
            mt={3}
          >
            Escriba los terminos y condiciones
          </TypographyWrapper>
        </>
      )}

      <SunEditor
        onChange={handleChange}
        defaultValue={text}
        getSunEditorInstance={getSunEditorInstance}
        height="100%"
      />

      <StackWrapper direction="row" justifyContent="flex-end" mt={3}>
        <ButtonWrapper variant="contained" onClick={() => updateTerms()}>
          Actualizar
        </ButtonWrapper>
      </StackWrapper>
    </>
  )
}

[roker15]

@JiHong88 @jlbousing @mkhstar Guys please resolve this issue. Long pending issue. I am also using nextjs. First render is fine but in subsequent render this happens.

Also i would like to mention that in my case it is happening when i m working on 'localhost/3000'. In production this is not happening. But certainly this is an issue.

Everyone is having this issue using Nextjs ... certainly there is some bug.

[JiHong88]

@JiHong88 @jlbousing Would you like to test your own implementation without using the "suneditor-react" package? I've never used nextjs, so it's hard to test it right now. https://github.com/JiHong88/SunEditor/issues/1036#issuecomment-1157736031

[krAlena]

Hi, I have the same problem. This issue happened when I tried to scroll while the large content hasn't painted yet. May be affected by using multiple components (5) on the same page or some browser extensions that working with text content. Can you please help how to detect when content is painted? Maybe exist some callback after that event.

"suneditor": "^2.43.14"
"suneditor-react": "^3.2.0"

[JiHong88]

I'll notify you after version update

--

Can you please help how to detect when content is painted? Maybe exist some callback after that event.

Currently, have an onload event 'editorInstance.onload=(core, reload) => {}`

[JiHong88]

The 2.44.0 version has been updated. If this issue has not been resolved, please reopen this issue. Thank you.