Next.JS(w/TypeScript)로 ToastUI Editor 구현

최대한 간략하게 설명하기 위해 이 게시물에서는 Next.JS 프로젝트 내에서 구현ToastUI Editor하는 동안 발생할 수 있는 일부 문제만 다룹니다.

#1.ReferenceError: 자체가 정의되지 않음

이는 ToastUI Editor의 문제일 뿐만 아니라 런타임에 window 개체가 필요한 라이브러리에서도 마찬가지입니다. Next.js가 서버 측에서 렌더링할 것이기 때문인데 window 객체가 존재하지 않습니다.

// toast-editor.js
(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("prosemirror-commands"), require("prosemirror-history"), require("prosemirror-inputrules"), require("prosemirror-keymap"), require("prosemirror-model"), require("prosemirror-state"), require("prosemirror-transform"), require("prosemirror-view"));
    else if(typeof define === 'function' && define.amd)
        define(["prosemirror-commands", "prosemirror-history", "prosemirror-inputrules", "prosemirror-keymap", "prosemirror-model", "prosemirror-state", "prosemirror-transform", "prosemirror-view"], factory);
    else if(typeof exports === 'object')
        exports["toastui"] = factory(require("prosemirror-commands"), require("prosemirror-history"), require("prosemirror-inputrules"), require("prosemirror-keymap"), require("prosemirror-model"), require("prosemirror-state"), require("prosemirror-transform"), require("prosemirror-view"));
    else
        root["toastui"] = root["toastui"] || {}, root["toastui"]["Editor"] = factory(root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined], root[undefined]);
})(self, function(__WEBPACK_EXTERNAL_MODULE__695__, __WEBPACK_EXTERNAL_MODULE__412__, __WEBPACK_EXTERNAL_MODULE__479__, __WEBPACK_EXTERNAL_MODULE__481__, __WEBPACK_EXTERNAL_MODULE__43__, __WEBPACK_EXTERNAL_MODULE__814__, __WEBPACK_EXTERNAL_MODULE__785__, __WEBPACK_EXTERNAL_MODULE__311__)

요컨대, 위 코드의 왼쪽 하단에 있는 self가 오류를 발생시킵니다. ToastUI를 시작하려면 window 개체가 필요합니다.

// line 17364 on lib.dom.ts (a part of ToastUI Editor)
declare var self: Window & typeof globalThis;

어떻게 고칠 수 있습니까?

Next.js는 SSR을 비활성화할 수 있는 JavaScript용 ES2020 동적import()을 지원합니다.

코드는 다음과 같아야 합니다.

import React, { MutableRefObject } from 'react';
import dynamic from 'next/dynamic';
import { EditorProps, Editor as EditorType } from '@toast-ui/react-editor';
import { TuiWithForwardedRefProps } from './EditorWithForwardedRef';

const Editor = dynamic<TuiWithForwardedProps>(
  () => import('@components/ToastEditor/EditorWithForwardedRef'),
  {
    ssr: false,
  }
);

const EditorWithForwardRef = React.forwardRef<
  EditorType | undefined, // object type
  EditorProps // prop type
>((props, ref) => (
  <Editor {...props} forwardedRef={ref as MutableRefObject<EditorType>} />
));
EditorWithForwardRef.displayName = 'EditorWithForwardRef'; // throws error if not set

interface ToastUiEditorProps extends EditorProps {
  forwardedRef: MutableRefObject<EditorType | undefined>;
}
const ToastEditor: React.FC<ToastUiEditorProps> = (props) => {
  return (
    <EditorWithForwardRef
      {...props}
      ref={props.forwardedRef}
      initialEditType={props.initialEditType || 'wysiwyg'}
      height={props.height || '300px'}
      previewStyle={props.previewStyle || 'vertical'}
    />
  );
};

export default ToastEditor;

아래 코드는 내부Editor 변수 바로 위에 가져온 것입니다. 하단의 링크에서 추가 힌트 등을 찾을 수 있습니다.

import React, { MutableRefObject } from 'react';
// editor
import { Editor, EditorProps } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Style
// table
import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
// code syntax highlight
import Prism from 'prismjs'; // main library for coloring
import 'prismjs/themes/prism.css';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-python';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
// 3 below for editor-plugin-color-syntax
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, {
  PluginOptions,
} from '@toast-ui/editor-plugin-color-syntax';
// Korean lang
import '@toast-ui/editor/dist/i18n/ko-kr';

export interface TuiWithForwardedRefProps extends EditorProps {
  // using type ForwardedRef instead of MutableRefObject causes error when using useRef();
  forwardedRef?: MutableRefObject<Editor>;
  // type for color syntax - array of color strings
  colorSyntaxOptions?: PluginOptions;
}

const TuiWithForwardedRef: React.FC<TuiWithForwardedRefProps> = (props) => (
  <Editor
    {...props}
    ref={props.forwardedRef}
    usageStatistics={false}
    plugins={[
      [codeSyntaxHighlight, { highlighter: Prism }],
      [colorSyntax, props.colorSyntaxOptions],
      tableMergedCell,
    ]}
    // language={'ko-KR'}
  />
);

export default TuiWithForwardedRef;

#2. hooks prop에서 addImageBlockHook 사용 시 대체 텍스트 관련 문제

이미지를 업로드할 때 대체 텍스트를 위한 공간이 있습니다.

그리고 여기에 "설명"과 관련이 있다고 생각할 수 있는 기능이 있습니다.

type HookCallback = (url: string, text?: string) => void;

export type HookMap = {
  addImageBlobHook?: (blob: Blob | File, callback: HookCallback) => void;
};

선택적 text 소품은 업로드하는 이미지의 alt-text를 설정합니다. 그러나 요점은 "description 소품에 할당하기 위해 text 빈칸에 입력한 설명을 어디에서 얻을 수 있습니까?

어떻게 고칠 수 있습니까?

대답은 text 소품을 비워두고 업로드할 때 입력한 설명이 img 요소에 자동으로 할당된다는 것입니다.

#삼. 구성 요소 파일에 포함

따라서 구성 요소 파일에 포함할 최종 ToastUI Editor 구성 요소는 다음과 같습니다.

const editorRef = React.useRef<EditorType>(); // ref hint

<ToastEditor
        forwardedRef={editorRef}
        initialEditType={'wysiwyg'}
        initialValue={'inital value is here'} // if you use placeholder then it causes an rendering error after pressing "insert code block" right after the editor is rendered
        height={'500px'}
        onChange={handleChange}
        hooks={{
          addImageBlobHook: async (fileOrBlob, callback) => {
            const uploadedImgURL = await uploadImg(fileOrBlob);
            callback(uploadedImgURL); // second argument is text which is optional, simply just ignore it
            console.log(uploadedImgURL);
          },
        }}
      />

이 게시물에 사용된 패키지 버전

"@toast-ui/react-editor": "^3.1.3",
"@toast-ui/editor-plugin-code-syntax-highlight": "^3.0.0",
"@toast-ui/editor-plugin-color-syntax": "^3.0.2",
"@toast-ui/editor-plugin-table-merged-cell": "^3.0.2",
"prismjs": "^1.27.0",

도움이 되셨기를 바랍니다. 행복한 코딩!

TUI Editor Core
TUI Editor Github
PrismJS/prism
Joo Hee Kim's Medium post
yceffort blog - Korean