jodit / jodit-react

React wrapper for Jodit
MIT License
354 stars 118 forks source link

Window 10 Crash Debug #262

Open pohsiu opened 3 months ago

pohsiu commented 3 months ago

Hi, I am wondering is there anyway to debug my website through inserting the log before crash or catch the exception if editor goes wrong.

Jodit Version: 4.2.21

Browser: Chrome 124.0 OS: Windows NT 10.0 Is React App: True

Code

// A *self-contained* demonstration of the problem follows...

import React, { Suspense, lazy, useRef, useState, useMemo, useEffect } from 'react'
import style from './editor.css'

const JoditEditor = lazy(() => import('jodit-react'))

const Editor = ({ defaultValue, onChange, required }) => {
  const editor = useRef(null)
  const [content, setContent] = useState('')

  const config = useMemo(
    () => ({
      useSearch: false,
      height: 400,
      readonly: false,
      placeholder: '請輸入商品描述...',
      language: 'zh_tw',
      askBeforePasteHTML: false,
      askBeforePasteFromWord: false,
      buttons:
     'eraser,|,bold,italic,underline,strikethrough,|,fontsize,|,brush,lineHeight,|,image,table,link,|,indent,outdent,|,left,center,right,|,source,fullsize',
    }),
    []
  )

  const onChangeHandler = (newContent) => {
    // setContent(newContent)
    onChange(newContent)
  }

  useEffect(() => {
    setContent(defaultValue)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <div className={style.container} id="jodit-container" data-required={required}>
      <Suspense fallback={<div>Loading...</div>}>
        <JoditEditor
          id="jodit-editor"
          ref={editor}
          value={content}
          config={config}
          tabIndex={1}
          onChange={onChangeHandler}
        />
      </Suspense>
    </div>
  )
}

export default Editor

Expected behavior: Ctrl + A (Select all) -> Clear format -> click toolbar bold btn -> Formatted to bold Actual behavior: Ctrl + A (Select all) -> Clear format -> click toolbar bold btn -> Browser Chrome Crashed