npm package: @jackiemacklein/on-editor
Description: Editor de texto rico com funcionalidades avançadas para React
Author: Jackiê Macklein
Latest version: 1.0.5

# @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

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

## 🎯 Uso Básico

```tsx
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

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

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

### Componentes Individuais

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

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

### Hooks Personalizados

```tsx
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:

```json
{
  "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:

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

Ou importe diretamente:

```tsx
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.

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

#### `useAutoSave(content, onSave, interval?)`

Gerencia o auto-save.

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

### Utilitários

#### `getTextStats(content: string)`

Calcula estatísticas do texto.

```tsx
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:

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

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

### Estilos Customizados

Você pode sobrescrever os estilos usando CSS:

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

```bash
# 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**