editor.js + nextjs header 이슈

editorjs에서 header tool을 사용하면 아래의 오류가 발생한다.

 ⨯ node_modules/@editorjs/editorjs/dist/editorjs.mjs (15:1) @ eval
 ⨯ ReferenceError: Element is not defined

 

그와 동시에 에디터에서 header를 사용하면 스타일이 정상적으로 적용되지 않는 오류가 발생한다.

해당 이슈는 editorjs/header 깃허브 이슈로 등록이 되어 있지만 명확한 해결 방법이 없어 보인다.

 

https://github.com/editor-js/header/issues/122

Type Mismatch · Issue #122 · editor-js/header

 

 

js에서는 문제가 없지만, ts에서는 문제가 되고 있는 듯 하다.

 

이슈에 대한 내용은 타입이 맞지 않아 생기는 것으로 editor.js에서 에디터를 생성할 때, 설정으로 툴에 헤더를 추가하게 된다.

  const config: EditorConfig = {
    holder,
    data,
    autofocus: true,
    tools: {
      header: {
        class: Header,
        config: {
          placeholder: "Enter a header",
          levels: [1, 2, 3, 4, 5],
          defaultLevel: 1,
        },
      },
      code: CodeTool,
      list: List,
    },
    async onChange(api, event) {
      const data = await api.saver.save();

      onChange && onChange(data);
    },
  };

 

 

정상적이라면 class에 추가된 Header에 문제가 없어야 하지만 현재 에디터상에서 나타나는 오류는 다음과 같다.

'typeof Header' 형식은 'ToolConstructable | undefined' 형식에 할당할 수 없습니다.
  'typeof Header' 형식은 'BlockToolConstructable' 형식에 할당할 수 없습니다.
    '__0' 및 'config' 매개 변수의 형식이 호환되지 않습니다.
      'BlockToolConstructorOptions<any, any>' 형식은 'ConstructorArgs' 형식에 할당할 수 없습니다.
        'config' 속성은 'BlockToolConstructorOptions<any, any>' 형식에서 선택적이지만 'ConstructorArgs' 형식에서는 필수입니다.ts(2322)

 

그리고 editorjs의 tool config객체의 정보는 ToolConstructable|ToolSettings 으로 다음과 같이 선언되어 있다.

  /**
   * Map of Tools to use
   */
  tools?: {
    [toolName: string]: ToolConstructable|ToolSettings;
  }