@tauro/editor 0.0.1 → 0.0.2

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.
Files changed (2) hide show
  1. package/README.md +175 -60
  2. package/package.json +13 -22
package/README.md CHANGED
@@ -1,73 +1,188 @@
1
- # React + TypeScript + Vite
1
+ # @tauro/editor
2
2
 
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
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
- Currently, two official plugins are available:
5
+ ## Instalacion
6
6
 
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
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
- ## React Compiler
98
+ **Fuentes del sistema:**
99
+ Arial, Verdana, Georgia, Times New Roman, Courier New
11
100
 
12
- The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
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
- ## Expanding the ESLint configuration
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
- If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
106
+ ### Tamanos de fuente
17
107
 
18
- ```js
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
- // Remove tseslint.configs.recommended and replace with this
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
- // Other configs...
34
- ],
35
- languageOptions: {
36
- parserOptions: {
37
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
38
- tsconfigRootDir: import.meta.dirname,
39
- },
40
- // other options...
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
- You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
47
-
48
- ```js
49
- // eslint.config.js
50
- import reactX from 'eslint-plugin-react-x'
51
- import reactDom from 'eslint-plugin-react-dom'
52
-
53
- export default defineConfig([
54
- globalIgnores(['dist']),
55
- {
56
- files: ['**/*.{ts,tsx}'],
57
- extends: [
58
- // Other configs...
59
- // Enable lint rules for React
60
- reactX.configs['recommended-typescript'],
61
- // Enable lint rules for React DOM
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.1",
3
+ "version": "0.0.2",
4
4
  "type": "module",
5
5
  "main": "./dist/rich-editor.cjs.js",
6
6
  "module": "./dist/rich-editor.es.js",
@@ -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
- "devDependencies": {
42
- "@eslint/js": "^10.0.1",
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
  }