React 18 (ES6)에서 Toast UI Editor plugins 사용하기 (codeSyntaxHighlight)

npm 공식문서

https://www.npmjs.com/package/@toast-ui/editor-plugin-code-syntax-highlight

여기에서는 아래와 같은 정보만 준다.

import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';

import Editor from '@toast-ui/editor';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';

const editor = new Editor({
  // ...
  plugins: [codeSyntaxHighlight]
});

@toast-ui/editor-plugin-code-syntax-highlight를 설치하고
Editor 요소의 옵션으로 plugins={[codeSyntaxHighlight]} 를 설정하는 것만으로는 안됐다.

Toast UI Examples

https://nhn.github.io/tui.editor/latest/tutorial-example08-editor-with-code-syntax-highlight-plugin

여기에서는 옵션을 [[codeSyntaxHighlight, { highlighter: Prism }]] 이렇게 설정했길래 prismjs를 설치하고 import해와서 사용했다.

-> 내가 아까는 다르게 작성했던 건지 에디터를 v3.1.1로 낮춰서인지 지금은 이거만 적용해도 바로 된다...

---

그전에 찾아보던 과정...🥲

Toast UI 깃허브 issue 탭을 뒤져서 나와 비슷한 케이스들을 발견했다.
https://github.com/nhn/tui.editor/issues/1564
https://github.com/nhn/tui.editor/issues/2101

hightlight.js, tui-color-picker, @toast-ui/editor-plugin-color-syntax 설치해서

[codeSyntaxHighlightPlugin, {hljs}]이렇게도 해보고

콘솔에 에러가 안나지만 작동은 안하기도 하고...

과정 중에 콘솔에 language가 없다는 에러도 났는데

import '@toast-ui/editor/dist/toastui-editor.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import { Editor } from '@toast-ui/react-editor';
import colorSyntaxPlugin from '@toast-ui/editor-plugin-color-syntax';
import codeSyntaxHighlightPlugin from '@toast-ui/editor-plugin-code-syntax-highlight';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';
import 'prismjs/themes/prism.css';
import 'tui-color-picker/dist/tui-color-picker.css';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

이렇게 설치 & 임포트해왔다.

toast ui github issue에서 발견한 방법인 package.json에서"@toast-ui/react-editor": "3.1.1", 버전을 꺾쇠 없이 설정도 해주고

plugins={[codeSyntaxHighlightPlugin.bind(hljs)]} 이렇게 작성하니까 됐다.

plugins={[
  codeSyntaxHighlightPlugin.bind(hljs),
  codeSyntaxHighlight,
  colorSyntaxPlugin,
]}
useCommandShortcut={true}
hideModeSwitch={true}
useDefaultHTMLSanitizer={true}

넣으라는거 다 넣기
그리고 하나씩 빼면서 어디서 오류가 나는지 지켜봤다.

---

package.json에는

"@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
"@toast-ui/react-editor": "^3.1.1",
"prismjs": "^1.29.0",

버전명에 꺾쇠도 다시 붙여보고
위 세가지 빼고 에디터 관련 모듈은 모두 삭제했는데 잘 된다.

에디터 컴포넌트에는

import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import 'prismjs/themes/prism.css';
import Prism from 'prismjs';
import { Editor } from '@toast-ui/react-editor';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';
...

const MarkdownEditor = (props, ref) => {
  return (
    <Editor
      plugins={[[codeSyntaxHighlight, { highlighter: Prism }]]}
      ....
      />
    ....
    )
};

codeSyntaxHighlight & 옵션으로 Prism 설정만 해줘도 잘 됐다.

야호~

결론

버전의 오류 또는 내가 코드를 잘못 쓴 걸 돌아돌아 해결한 것 같다.😅