@tauro/editor 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +175 -60
- package/package.json +14 -23
package/README.md
CHANGED
|
@@ -1,73 +1,188 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @tauro/editor
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Editor de texto enriquecido para React, construido sobre [Tiptap](https://tiptap.dev). Diseño moderno con soporte para temas claro/oscuro, selector de fuentes con integración de Google Fonts, y componente de previsualización incluido.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Instalacion
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
```bash
|
|
8
|
+
npm install @tauro/editor
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Todas las dependencias de Tiptap se instalan automaticamente. Solo necesitas tener `react` y `react-dom` (>=18) en tu proyecto.
|
|
12
|
+
|
|
13
|
+
## Uso basico
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { useState } from 'react'
|
|
17
|
+
import { RichEditor, Preview } from '@tauro/editor'
|
|
18
|
+
import '@tauro/editor/style.css'
|
|
19
|
+
|
|
20
|
+
function App() {
|
|
21
|
+
const [content, setContent] = useState('<p>Hola mundo</p>')
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<>
|
|
25
|
+
<RichEditor value={content} onChange={setContent} />
|
|
26
|
+
<Preview value={content} />
|
|
27
|
+
</>
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Componentes
|
|
33
|
+
|
|
34
|
+
### `<RichEditor />`
|
|
35
|
+
|
|
36
|
+
Componente principal del editor. Se comporta como un input controlado.
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
<RichEditor
|
|
40
|
+
value={content}
|
|
41
|
+
onChange={setContent}
|
|
42
|
+
placeholder="Escribe aqui..."
|
|
43
|
+
editable={true}
|
|
44
|
+
theme="dark"
|
|
45
|
+
className="mi-editor"
|
|
46
|
+
/>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
#### Props
|
|
50
|
+
|
|
51
|
+
| Prop | Tipo | Default | Descripcion |
|
|
52
|
+
|------|------|---------|-------------|
|
|
53
|
+
| `value` | `string` | — | Contenido HTML actual del editor (requerido) |
|
|
54
|
+
| `onChange` | `(html: string) => void` | — | Callback cuando el contenido cambia (requerido) |
|
|
55
|
+
| `placeholder` | `string` | `undefined` | Texto placeholder cuando el editor esta vacio |
|
|
56
|
+
| `editable` | `boolean` | `true` | Controla si el editor es editable o solo lectura |
|
|
57
|
+
| `theme` | `'dark' \| 'light'` | `'dark'` | Tema visual del editor |
|
|
58
|
+
| `className` | `string` | `undefined` | Clase CSS adicional para el contenedor raiz |
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
### `<Preview />`
|
|
63
|
+
|
|
64
|
+
Componente para previsualizar el HTML generado por el editor con estilos consistentes.
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
<Preview
|
|
68
|
+
value={content}
|
|
69
|
+
theme="dark"
|
|
70
|
+
className="mi-preview"
|
|
71
|
+
/>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
#### Props
|
|
75
|
+
|
|
76
|
+
| Prop | Tipo | Default | Descripcion |
|
|
77
|
+
|------|------|---------|-------------|
|
|
78
|
+
| `value` | `string` | — | Contenido HTML a renderizar (requerido) |
|
|
79
|
+
| `theme` | `'dark' \| 'light'` | `'dark'` | Tema visual del preview |
|
|
80
|
+
| `className` | `string` | `undefined` | Clase CSS adicional para el contenedor |
|
|
81
|
+
|
|
82
|
+
## Funcionalidades del editor
|
|
83
|
+
|
|
84
|
+
### Toolbar
|
|
85
|
+
|
|
86
|
+
La barra de herramientas incluye:
|
|
87
|
+
|
|
88
|
+
- **Deshacer / Rehacer** — historial de cambios
|
|
89
|
+
- **Selector de fuente** — fuentes del sistema + Google Fonts con busqueda
|
|
90
|
+
- **Selector de tamano** — 10px a 64px
|
|
91
|
+
- **Formato de texto** — Negrita, Cursiva, Subrayado, Tachado
|
|
92
|
+
- **Alineacion** — Izquierda, Centro, Derecha, Justificado
|
|
93
|
+
- **Listas** — Con vinetas y numeradas
|
|
94
|
+
- **Limpiar formato** — Elimina todos los estilos inline y marcas
|
|
95
|
+
|
|
96
|
+
### Fuentes disponibles
|
|
9
97
|
|
|
10
|
-
|
|
98
|
+
**Fuentes del sistema:**
|
|
99
|
+
Arial, Verdana, Georgia, Times New Roman, Courier New
|
|
11
100
|
|
|
12
|
-
|
|
101
|
+
**Google Fonts (carga dinamica):**
|
|
102
|
+
Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Merriweather, Playfair Display, Source Sans 3, PT Serif, Libre Baskerville, IBM Plex Sans, IBM Plex Serif, Noto Sans
|
|
13
103
|
|
|
14
|
-
|
|
104
|
+
Las Google Fonts se cargan bajo demanda cuando el usuario las selecciona. No se agrega peso extra hasta que se usan.
|
|
15
105
|
|
|
16
|
-
|
|
106
|
+
### Tamanos de fuente
|
|
17
107
|
|
|
18
|
-
|
|
19
|
-
export default defineConfig([
|
|
20
|
-
globalIgnores(['dist']),
|
|
21
|
-
{
|
|
22
|
-
files: ['**/*.{ts,tsx}'],
|
|
23
|
-
extends: [
|
|
24
|
-
// Other configs...
|
|
108
|
+
10, 11, 12, 13, 14, 15, 16, 18, 20, 24, 28, 32, 36, 48, 64 (en px)
|
|
25
109
|
|
|
26
|
-
|
|
27
|
-
tseslint.configs.recommendedTypeChecked,
|
|
28
|
-
// Alternatively, use this for stricter rules
|
|
29
|
-
tseslint.configs.strictTypeChecked,
|
|
30
|
-
// Optionally, add this for stylistic rules
|
|
31
|
-
tseslint.configs.stylisticTypeChecked,
|
|
110
|
+
## Temas
|
|
32
111
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
112
|
+
El editor soporta dos temas: `dark` (por defecto) y `light`.
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
// Tema oscuro
|
|
116
|
+
<RichEditor value={content} onChange={setContent} theme="dark" />
|
|
117
|
+
|
|
118
|
+
// Tema claro
|
|
119
|
+
<RichEditor value={content} onChange={setContent} theme="light" />
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Ambos temas usan CSS custom properties, lo que permite sobreescribirlas desde fuera si necesitas personalizacion adicional.
|
|
123
|
+
|
|
124
|
+
## Sincronizacion controlada
|
|
125
|
+
|
|
126
|
+
El editor funciona como un componente controlado (similar a `<input value={...} onChange={...} />`):
|
|
127
|
+
|
|
128
|
+
- **`value` cambia desde el padre** (ej: datos cargados async) → el editor actualiza su contenido sin disparar `onChange`, evitando loops infinitos.
|
|
129
|
+
- **El usuario edita** → se dispara `onChange` con el HTML actualizado.
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
// Cargar contenido async
|
|
133
|
+
useEffect(() => {
|
|
134
|
+
fetch('/api/document')
|
|
135
|
+
.then(res => res.json())
|
|
136
|
+
.then(doc => setContent(doc.html))
|
|
137
|
+
}, [])
|
|
138
|
+
|
|
139
|
+
// El editor se actualiza automaticamente cuando content cambia
|
|
140
|
+
<RichEditor value={content} onChange={setContent} />
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## Modo solo lectura
|
|
144
|
+
|
|
145
|
+
Usa `editable={false}` para deshabilitar la edicion:
|
|
146
|
+
|
|
147
|
+
```tsx
|
|
148
|
+
<RichEditor value={content} onChange={() => {}} editable={false} />
|
|
44
149
|
```
|
|
45
150
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
import
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
reactDom.configs.recommended,
|
|
63
|
-
],
|
|
64
|
-
languageOptions: {
|
|
65
|
-
parserOptions: {
|
|
66
|
-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
67
|
-
tsconfigRootDir: import.meta.dirname,
|
|
68
|
-
},
|
|
69
|
-
// other options...
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
])
|
|
151
|
+
## Estilos
|
|
152
|
+
|
|
153
|
+
El paquete incluye un archivo CSS que debes importar:
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
import '@tauro/editor/style.css'
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
Los estilos usan CSS Modules internamente, asi que no hay conflictos con tus propios estilos. Para personalizacion avanzada, puedes sobreescribir las CSS custom properties en tu hoja de estilos.
|
|
160
|
+
|
|
161
|
+
## TypeScript
|
|
162
|
+
|
|
163
|
+
El paquete esta completamente tipado. Exporta los siguientes tipos:
|
|
164
|
+
|
|
165
|
+
```tsx
|
|
166
|
+
import type { RichEditorProps, PreviewProps, EditorTheme } from '@tauro/editor'
|
|
73
167
|
```
|
|
168
|
+
|
|
169
|
+
## Extensiones de Tiptap incluidas
|
|
170
|
+
|
|
171
|
+
| Extension | Funcionalidad |
|
|
172
|
+
|-----------|---------------|
|
|
173
|
+
| StarterKit | Bold, Italic, Strike, Headings (H1-H3), Lists, Blockquote, Code, HR |
|
|
174
|
+
| Placeholder | Texto placeholder configurable |
|
|
175
|
+
| Underline | Subrayado |
|
|
176
|
+
| TextAlign | Alineacion de texto (left, center, right, justify) |
|
|
177
|
+
| TextStyle | Base para estilos inline |
|
|
178
|
+
| FontFamily | Familia de fuente |
|
|
179
|
+
| FontSize (custom) | Tamano de fuente |
|
|
180
|
+
|
|
181
|
+
## Requisitos
|
|
182
|
+
|
|
183
|
+
- React 18+
|
|
184
|
+
- Tiptap 2.x
|
|
185
|
+
|
|
186
|
+
## Licencia
|
|
187
|
+
|
|
188
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tauro/editor",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/rich-editor.cjs.js",
|
|
6
6
|
"module": "./dist/rich-editor.es.js",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"require": "./dist/rich-editor.cjs.js",
|
|
12
12
|
"types": "./dist/src/index.d.ts"
|
|
13
13
|
},
|
|
14
|
-
"./style.css": "./dist/
|
|
14
|
+
"./style.css": "./dist/editor.css"
|
|
15
15
|
},
|
|
16
16
|
"files": [
|
|
17
17
|
"dist"
|
|
@@ -26,29 +26,23 @@
|
|
|
26
26
|
"preview": "vite preview"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
|
-
"@tiptap/core": ">=2.0.0",
|
|
30
|
-
"@tiptap/extension-font-family": ">=2.0.0",
|
|
31
|
-
"@tiptap/extension-placeholder": ">=2.0.0",
|
|
32
|
-
"@tiptap/extension-text-align": ">=2.0.0",
|
|
33
|
-
"@tiptap/extension-text-style": ">=2.0.0",
|
|
34
|
-
"@tiptap/extension-underline": ">=2.0.0",
|
|
35
|
-
"@tiptap/pm": ">=2.0.0",
|
|
36
|
-
"@tiptap/react": ">=2.0.0",
|
|
37
|
-
"@tiptap/starter-kit": ">=2.0.0",
|
|
38
29
|
"react": ">=18",
|
|
39
30
|
"react-dom": ">=18"
|
|
40
31
|
},
|
|
41
|
-
"
|
|
42
|
-
"@
|
|
43
|
-
"@tiptap/core": "2.27.2",
|
|
32
|
+
"dependencies": {
|
|
33
|
+
"@tiptap/core": "^2.27.2",
|
|
44
34
|
"@tiptap/extension-font-family": "^2.27.2",
|
|
45
|
-
"@tiptap/extension-placeholder": "2.27.2",
|
|
46
|
-
"@tiptap/extension-text-align": "2.27.2",
|
|
35
|
+
"@tiptap/extension-placeholder": "^2.27.2",
|
|
36
|
+
"@tiptap/extension-text-align": "^2.27.2",
|
|
47
37
|
"@tiptap/extension-text-style": "^2.27.2",
|
|
48
|
-
"@tiptap/extension-underline": "2.27.2",
|
|
49
|
-
"@tiptap/pm": "2.27.2",
|
|
50
|
-
"@tiptap/react": "2.27.2",
|
|
51
|
-
"@tiptap/starter-kit": "2.27.2",
|
|
38
|
+
"@tiptap/extension-underline": "^2.27.2",
|
|
39
|
+
"@tiptap/pm": "^2.27.2",
|
|
40
|
+
"@tiptap/react": "^2.27.2",
|
|
41
|
+
"@tiptap/starter-kit": "^2.27.2",
|
|
42
|
+
"lucide-react": "^1.18.0"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@eslint/js": "^10.0.1",
|
|
52
46
|
"@types/node": "^24.13.2",
|
|
53
47
|
"@types/react": "^19.2.14",
|
|
54
48
|
"@types/react-dom": "^19.2.3",
|
|
@@ -63,8 +57,5 @@
|
|
|
63
57
|
"typescript-eslint": "^8.59.2",
|
|
64
58
|
"vite": "^8.0.12",
|
|
65
59
|
"vite-plugin-dts": "^5.0.2"
|
|
66
|
-
},
|
|
67
|
-
"dependencies": {
|
|
68
|
-
"lucide-react": "^1.18.0"
|
|
69
60
|
}
|
|
70
61
|
}
|