@jackiemacklein/on-editor

Uma biblioteca React pura para editores de texto rico com funcionalidades avançadas.

🚀 Funcionalidades

• Editor WYSIWYG - Editor visual completo
• Suporte a Markdown - Edição e visualização em Markdown
• Visualização HTML - Preview em tempo real
• Auto-save - Salvamento automático
• Histórico - Undo/Redo
• Plugins - Sistema de plugins extensível
• Menções - Sistema de menções de usuários
• Variáveis - Sistema de variáveis dinâmicas
• Emojis - Seletor de emojis integrado
• Fontes - Seletor de fontes
• Exportação - Export para PDF, DOCX, HTML, Markdown
• Tabelas - Criação e edição de tabelas
• Tema escuro - Suporte a tema escuro
• Responsivo - Design responsivo

📦 Instalação

npm install @jackiemacklein/on-editor
# ou
yarn add @jackiemacklein/on-editor
# ou
pnpm add @jackiemacklein/on-editor

🎯 Uso Básico

import { OnAdvancedEditor } from "@jackiemacklein/on-editor";
import "@jackiemacklein/on-editor/styles";

function App() {
  return (
    <div>
      <h1>Meu Editor</h1>
      <OnAdvancedEditor />
    </div>
  );
}

🎨 Uso Avançado

Editor Simples

import { OnSimpleEditor } from "@jackiemacklein/on-editor";

function SimpleEditor() {
  return <OnSimpleEditor />;
}

Componentes Individuais

import {
  AdvancedToolbar,
  EditorStatusBar,
  MarkdownEditor,
} from "@jackiemacklein/on-editor";

function CustomEditor() {
  return (
    <div>
      <AdvancedToolbar />
      <div contentEditable />
      <EditorStatusBar />
    </div>
  );
}

Hooks Personalizados

import { useEditorHistory, useAutoSave } from "@jackiemacklein/on-editor";

function CustomEditor() {
  const { addEntry, undo, redo } = useEditorHistory();
  const { saveContent } = useAutoSave(content, handleSave);

  // Seu código aqui
}

🔧 Configuração

Dependências Necessárias

A biblioteca requer as seguintes dependências no seu projeto:

{
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "lucide-react": "^0.462.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7"
  }
}

Configuração do CSS

Adicione o CSS da biblioteca ao seu arquivo de configuração:

@import "@jackiemacklein/on-editor/styles";

Ou importe diretamente:

import "@jackiemacklein/on-editor/styles";

📚 API Reference

Componentes Principais

OnAdvancedEditor

Editor completo com todas as funcionalidades.

OnSimpleEditor

Editor básico com funcionalidades essenciais.

Hooks

useEditorHistory(maxEntries?: number)

Gerencia o histórico de edição.

const { addEntry, undo, redo, canUndo, canRedo } = useEditorHistory(100);

useAutoSave(content, onSave, interval?)

Gerencia o auto-save.

const { saveContent } = useAutoSave(content, handleSave, 30000);

Utilitários

getTextStats(content: string)

Calcula estatísticas do texto.

const stats = getTextStats(content);
// { wordCount: 100, charCount: 500, readingTime: 1 }

htmlToMarkdown(html: string)

Converte HTML para Markdown.

markdownToHtml(markdown: string)

Converte Markdown para HTML.

🎨 Personalização

Temas

A biblioteca suporta temas claro e escuro:

import { OnAdvancedEditor } from "@jackiemacklein/on-editor";

function ThemedEditor() {
  return (
    <div className="dark">
      <OnAdvancedEditor />
    </div>
  );
}

Estilos Customizados

Você pode sobrescrever os estilos usando CSS:

.on-editor {
  @apply border-2 border-blue-500 rounded-lg;
}

🔌 Plugins

A biblioteca inclui vários plugins prontos:

• MentionPlugin - Sistema de menções
• VariablePlugin - Sistema de variáveis
• EmojiPicker - Seletor de emojis
• FontPicker - Seletor de fontes

🏗️ Desenvolvimento

Build da Biblioteca

# Build para produção
npm run build

# Build em modo watch
npm run build:dev

# Limpar build
npm run clean

Estrutura do Projeto

src/
├── components/          # Componentes React
├── hooks/              # Hooks personalizados
├── types/              # Definições TypeScript
├── utils/              # Utilitários
└── lib/                # Arquivo de exportação principal

📄 Licença

MIT

🤝 Contribuição

Contribuições são bem-vindas! Por favor, leia o guia de contribuição antes de submeter um PR.

📞 Suporte

Para suporte, abra uma issue no GitHub ou entre em contato através do email.

Desenvolvido com ❤️ pela equipe Onside tecnologia