TopEditorJs 🚀

TopEditorJs é um editor de texto WYSIWYG (What You See Is What You Get) moderno e leve, construído em React e TypeScript. Ele encapsula toda a lógica de edição em um único componente, oferecendo uma experiência de uso simples e uma integração descomplicada em qualquer aplicação React, como Next.js, Gatsby ou Vite.

✨ Funcionalidades

• Editor WYSIWYG: Edição de conteúdo visualmente com uma barra de ferramentas completa.
• Barra de Ferramentas Rica: Suporte para negrito, itálico, sublinhado, cabeçalhos (H1, H2), listas, citações e links.
• Ícones Modernos: Utiliza ícones SVG do Heroicons para uma interface limpa e profissional.
• Biblioteca de Mídia Dinâmica: Um modal para upload e gerenciamento de imagens, com URLs de API configuráveis.
• Alinhamento de Imagem: Alinhe imagens facilmente dentro do texto (float left/right).
• Visualizador de HTML: Alterna entre o editor visual e o código HTML gerado em tempo real.
• Componente Encapsulado: Toda a complexidade interna é gerenciada por um único componente <TopEditor />, proporcionando uma API de uso limpa.

📦 Instalação

Para instalar o TopEditorJs em seu projeto React, basta usar o NPM:

npm install top-editor-js```

🚀 Uso
Para usar o editor, importe o componente <TopEditor /> e seu arquivo de CSS principal.

1. Importe o CSS (Obrigatório):

Adicione o CSS da lib no seu arquivo CSS global ou em um arquivo principal do seu projeto. Isso garante que o editor seja estilizado corretamente.

/_ src/app/globals.css ou um arquivo similar _/ @import 'top-editor-js/dist/assets/index.css';```

2. Use o Componente em seu App:

Basta adicionar o e gerenciar seu conteúdo com um estado. O componente gerencia a toolbar, o modal e a edição internamente.

// src/app/page.tsx (Exemplo para Next.js App Router)
"use client";
import React, { useState } from "react";
// Importe o componente principal da sua lib
import { TopEditor } from "top-editor-js";

const MyPostEditor: React.FC = () => {
  // Use um estado para gerenciar o conteúdo do post
  const [postContent, setPostContent] = useState("<p>Start writing...</p>");

  return (
    <div style={{ maxWidth: "800px", margin: "50px auto" }}>
      <h2>Create a New Post</h2>
      {/* O editor gerencia todos os estados internos */}
      <TopEditor
        initialContent={postContent}
        onChange={(newContent) => setPostContent(newContent)}
      />

      <h3>Rendered Post:</h3>
      <div dangerouslySetInnerHTML={{ __html: postContent }}></div>

      {/* Aqui você pode salvar o postContent no banco de dados */}
      <button style={{ marginTop: '20px', padding: '10px 20px' }}>
        Save Post
      </button>
    </div>
  );
};

export default MyPostEditor;

🖼️ Configuração da Biblioteca de Mídia A biblioteca de mídia do TopEditorJs é "headless", o que significa que ela cuida da interface, mas a sua aplicação deve fornecer os endpoints de API para o upload e a listagem de imagens.

Por padrão, o editor espera que as APIs estejam nos caminhos /api/upload-image e /api/get-images.

Se você quiser usar URLs de API diferentes, basta passá-las como props para o componente :

  initialContent={postContent}
  onChange={setPostContent}
  // Exemplo de como usar URLs personalizadas
  uploadUrl="/my-api/image-upload"
  listUrl="/my-api/image-list"
/>

Você ainda precisará criar os endpoints correspondentes no seu back-end (por exemplo, em Next.js, Express, etc.). Para Next.js App Router, use os exemplos abaixo:

1. Endpoint de Upload de Imagem (POST)

import { NextResponse } from 'next/server';
import { promises as fs } from 'fs';
import path from 'path';

const uploadsDir = path.join(process.cwd(), 'public', 'uploads');
const ensureDirExists = async () => { /* ... */ };

export async function POST(request: Request) {
    // ... (código para upload) ...
}````

2. Endpoint para Listar Imagens (GET)

// src/app/api/get-images/route.ts import { NextResponse } from 'next/server'; import { promises as fs } from 'fs'; import path from 'path';

const uploadsDir = path.join(process.cwd(), 'public', 'uploads');

export async function GET() { // ... (código para listar) ... }

⚠️ Atenção: Certifique-se de que a pasta public/uploads exista na raiz do seu projeto.

🤝 Contribuição
Sinta-se à vontade para contribuir, reportar bugs ou sugerir novas funcionalidades!

📄 Licença
Este projeto está licenciado sob a Licença MIT.