Implementando Editor.js com Next.js utilizando Typescript

Basicamente o Editor.js é um WYSIWYG editor. Tenho certeza que irá se surpreender com essa solução e ficar ainda mais impressionado sabendo que é gratuíta. E ao meu ver está muito a frente de outras soluções pagas.

Conheça o Editor.js. E também considere fazer uma doação para o projeto. São poucos projetos gratuítos com esse nível de qualidade.

A proposta deste tutorial é mostrar sua implementação com o Next.js utilizando Typescript.

Vamos utilizar o App Router.

Criando o componente Editor

Primeiramente vamos construir um componente que irá exportar uma div onde o Editor.js será renderizado após a tela estar pronta para o usuário.

// components/Editor.tsx

'use client'

import { useRef } from 'react';

import EditorJS from '@editorjs/editorjs'

// Esta função irá garantir que o componente seja renderizado uma única vez
const RenderEditor = ( ElementId: string ) => {
  const rendered = useRef<false | true>( false )

  if ( !rendered.current ) {
    rendered.current = true;

    // Aqui chamamos a execução do EditorJS e também podemos passar os parâmetros necessários para execução
    new EditorJS({
      holder: ElementId
    });
  } else {
    return
  }
}

export default function Editor() {
  const elementId = 'editorjs' // Defina aqui o ID para o elemento onde o Editor.js será renderizado

  RenderEditor( elementId )

  return (
    <div id={ elementId }></div>
  )
}

Importando o Componente

Para importar o componente vamos utilizar o next/dynamic.

Essa implementação se faz necessária para evitar erros na execução do Editor.js, lembrando que oficialmente não existe um componente React, mas podemos construir nosso próprio componente e utilizar sem nenhum problema.

// page.tsx

import dynamic from "next/dynamic";

const Editor = dynamic(() => import("components/Editor"), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
})

export default async function Page() {
 return(
   <Editor />
 )
}

Com essa implementação o Editor.js deverá ser executado sem erros no seu Fron-end.

Gostaria de destacar uma resposta no Stackoverflow que me auxiliou na construção da função que garante que o Editor.js será renderizado uma única vez.

Até mais!!!