How to connect Toast UI Editor with Next.js

Froala Editor has an error that Korean alphabets are broken but its support replied as “ We do not have any known/pending issues submitted to the dev-team related to the Korean language.” Testing ‘Toast UI editor’ whether it can be applied instead.

TOAST UI Editor (TUI)

  • provides Markdown mode and WYSIWYG mode.
  • Depending on the type of use you want like production of Markdown or maybe to just edit the Markdown.
  • Offers Markdown mode and WYSIWYG mode, which can be switched any point in time.

In order to use TUI with Next.js, need to manually set up for SSR issue. TUI does not support SSR. Therefore, it will throw ‘Window is not defined’ or ‘Self is not defined’ error because window object only exists in client side. However, in Next.js, server side starts first and ends up throwing an error if I just use it. To prevent SSR, Next.js provides ‘dynamic import’.

console.log(editorRef.current);

Why does it gives retry object?

  • useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
  • This works because useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: …} object yourself is that useRef will give you the same ref object on every render.

How to fix?

getHTML() Maximum call stack error- https://github.com/nhn/tui.editor/issues/1587
Image uploads twice error
- https://github.com/nhn/tui.editor/issues/1624
- I need to start checking its version and issues from github once I cannot find an error in Google. It took more than a day to figure out why my codes are not working...🤯

Conclusion:

At the moment, I don’t think Toast UI Editor can be a substitute of Froala Editor because of the followings:

  1. Two issues that I mentioned earlier.
  2. If I copy a table from Microsoft Excel to TUI, it attaches as a picture, but if I copy a table from Google Spreadsheet, it attaches as a table but does not maintain its style, which is one of the important factor in our company’s project.
  3. I also need to check with Window since I only check through Mac.

Consistency achieves everything https://github.com/paigekim29