Блог

В настоящее время я использую React и Next.js, и хотел бы применить пользовательский интерфейс редактора тостов вместо редактора Froala из-за ошибки корейского языка. Редактор Tui не поддерживает SSR, поэтому я уже применил динамический импорт из Next.js.

Однако я застрял с ошибкой максимального стека вызовов getHTML() при преобразовании содержимого редактора tui в формат HTML. getMarkdown() на данный момент работает отлично.

Ниже приведен код.

 // path: components/WrappedToastEditor.js
import React from 'react'
import PropTypes from 'prop-types'
import { Editor } from '@toast-ui/react-editor'

const WrappedEditor = (props) => {
  const { forwardedRef } = props
  return <Editor {...props} ref={forwardedRef} />
}

WrappedEditor.propTypes = {
  forwardedRef: PropTypes.shape({
    current: PropTypes.instanceOf(Element)
  }).isRequired
}

export default WrappedEditor;
 

 // path: components/ToastEditorComponent.js
import React, {forwardRef, useRef, useCallback } from 'react';
import dynamic from 'next/dynamic';

const Editor = dynamic(() => import("./WrappedToastEditor"), { ssr: false });
const EditorWithForwardedRef = forwardRef((props, ref) => (
  <Editor {...props} forwardedRef={ref} />
));

const ToastEditorComponent = (props) => {
  const editorRef = useRef(null);
  const handleChange = useCallback(() => {
    if (!editorRef.current) {
      return;
    }

    //! getHTML() maximum call stack error. need to figure out how to fix
    // console.log(editorRef.current.getInstance().getHTML())
    // This is the part that has a maximum call stack error
    const value = editorRef.current.getInstance().getHTML();
    props.onChange(value);
  }, [props, editorRef]);

  return <div>
    <EditorWithForwardedRef
      {...props}
      previewStyle="vertical"
      height="600px"
      initialEditType="wysiwyg"
      useCommandShortcut={true}
      ref={editorRef}
      onChange={handleChange}
      hideModeSwitch={true}
    />
  </div>;
};

export default ToastEditorComponent;