리액트 - Toast UI 에디터 테이블 병합 플러그인 추가하기 (Add Table Merged Cell Plugin Toast UI Editor)

리액트 전체 링크

 

참고

- https://nhn.github.io/tui.editor/latest/tutorial-example10-editor-with-table-merged-cell-plugin

- https://www.npmjs.com/package/react-scripts?activeTab=versions

 

- Toast UI로 에디터 만들기

- 글자색 변경 플러그인 추가하기

- 테이블 병합 플러그인 추가하기

- 에디터 저장하고 초기화하기

- Toast UI 에디터로 깃허브 마크다운 저장하기

- Toast UI 에디터로 이미지를 포함한 깃허브 마크다운 저장하기

- Socket.IO로 Toast UI Editor 동시 편집하기

 

토스트 UI 에디터에 테이블을 Merge하는 기능을 추가해보자.

---

설치

 

table-merged-cell 플러그인을 설치한다.

npm install @toast-ui/editor-plugin-table-merged-cell

 

플러그인을 사용하려면 아래의 css와 tableMergedCell을 import 하면 된다.

// Table Merged Cell Plugin
import "@toast-ui/editor-plugin-table-merged-cell/dist/toastui-editor-plugin-table-merged-cell.css";
import tableMergedCell from "@toast-ui/editor-plugin-table-merged-cell";

 

이전 글에서 추가한 colorSyntax 배열 뒤에 tableMergedCell을 추가한다.

 plugins={[[colorSyntax, colorSyntaxOptions], tableMergedCell]}

 

이제 에디터에서 표를 추가하고 드래그한 후,

마우스 오른쪽 버튼으로 클릭하면 Merge cells 기능이 추가되는 것을 알 수 있다.

 

전체 코드는 다음과 같다.

import React from "react";

import Box from "@mui/material/Box";

// Toast UI Editor
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/react-editor";

// Dark Theme 적용
// import '@toast-ui/editor/dist/toastui-editor.css';
// import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';

// Color Syntax Plugin
import "tui-color-picker/dist/tui-color-picker.css";
import "@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css";
import colorSyntax from "@toast-ui/editor-plugin-color-syntax";

// Table Merged Cell Plugin
import "@toast-ui/editor-plugin-table-merged-cell/dist/toastui-editor-plugin-table-merged-cell.css";
import tableMergedCell from "@toast-ui/editor-plugin-table-merged-cell";

const colorSyntaxOptions = {
  preset: [
    "#333333", "#666666", "#FFFFFF", "#EE2323", "#F89009", "#009A87", "#006DD7", "#8A3DB6",
    "#781B33", "#5733B1", "#953B34", "#FFC1C8", "#FFC9AF", "#9FEEC3", "#99CEFA", "#C1BEF9",
  ],
};

const App = () => {
  return (
    <div>
      <Box sx={{ m: 2 }}>
        <h1>Toast UI Editor</h1>
        <Editor
          height="400px"
          placeholder="Please Enter Text."
          previewStyle="tab" // or vertical
          initialEditType="wysiwyg" // or markdown
          // hideModeSwitch={true} // 하단 숨기기
          toolbarItems={[
            // 툴바 옵션 설정
            ["heading", "bold", "italic", "strike"],
            ["hr", "quote"],
            ["ul", "ol", "task", "indent", "outdent"],
            ["table", /* "image", */ "link"],
            ["code", "codeblock"],
          ]}
          //theme="dark"
          //useCommandShortcut={false} // 키보드 입력 컨트롤 방지 ex ctrl z 등
          usageStatistics={false} // 통계 수집 거부
          plugins={[[colorSyntax, colorSyntaxOptions], tableMergedCell]}
        />
      </Box>
    </div>
  );
};

export default App;

---

에러 수정

 

테이블을 드래그할 때 아래 에러가 발생하는 경우가 있다. 

Uncaught TypeError: Class constructor Selection cannot be invoked without 'new'
    at new CellSelection (index.js:16720:1)
    at TableSelection.setCellSelection (index.js:16996:1)
    at TableSelection.handleMousemove (index.js:16953:1)

 

링크를 참고해도 잘 해결이 되지 않았으나, Node ver을 19.8.1 → 16.19.0으로 변경하니 에러가 사라졌다.

$ node -v
v16.19.0

 

그래도 계속 에러가 나게 된다면 react-scripts 버전을 확인해 보자.

WARNING in ./node_modules/@toast-ui/editor/dist/toastui-editor-viewer.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\github\react-project\node_modules\@toast-ui\editor\dist\purify.js.map' 
file: Error: ENOENT: no such file or directory, 
open 'D:\github\react-project\node_modules\@toast-ui\editor\dist\purify.js.map'

 

package.json에서 react-scripts의 버전에 따라 발생할 수 있다.

 "react-scripts": "5.0.1",

 

에러 팝업이 나오지 않기 위해서는 4 이하 버전을 사용해야 하고, (version 링크 참고)

Merge cells 기능을 사용하려면 ^2.1.3 버전을 사용하면 된다.

 

npm install로 새로운 버전을 설치하고 다시 실행해 보자. (react-scripts : ^2.1.3)

{
  ...
  "dependencies": {
    ...
    "@toast-ui/editor-plugin-color-syntax": "^3.1.0",
    "@toast-ui/editor-plugin-table-merged-cell": "^3.1.0",
    "@toast-ui/react-editor": "^3.2.3",
    "react": "^18.2.0",
    "react-color": "^2.19.3",
    "react-diff-viewer-continued": "^3.4.0",
    "react-dom": "^18.2.0",
    "react-draggable": "^4.4.6",
    "react-router-dom": "^6.21.3",
    "react-scripts": "^2.1.3",
    "styled-components": "^6.1.8",
    "web-vitals": "^2.1.4"
  },
}