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!!!