@tauro/editor 0.0.1

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 (15) hide show
  1. package/README.md +73 -0
  2. package/dist/editor.css +2 -0
  3. package/dist/rich-editor.cjs.js +1 -0
  4. package/dist/rich-editor.es.js +841 -0
  5. package/dist/src/Demo.d.ts +1 -0
  6. package/dist/src/components/Preview.d.ts +14 -0
  7. package/dist/src/components/RichEditor.d.ts +6 -0
  8. package/dist/src/components/Select.d.ts +18 -0
  9. package/dist/src/components/Toolbar.d.ts +8 -0
  10. package/dist/src/extensions/font-size.d.ts +17 -0
  11. package/dist/src/extensions/google-fonts.d.ts +66 -0
  12. package/dist/src/hooks/useRichEditor.d.ts +13 -0
  13. package/dist/src/index.d.ts +4 -0
  14. package/dist/src/types/index.d.ts +38 -0
  15. package/package.json +70 -0
package/README.md ADDED
@@ -0,0 +1,73 @@
1
+ # React + TypeScript + Vite
2
+
3
+ This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4
+
5
+ Currently, two official plugins are available:
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/)
9
+
10
+ ## React Compiler
11
+
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).
13
+
14
+ ## Expanding the ESLint configuration
15
+
16
+ If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
17
+
18
+ ```js
19
+ export default defineConfig([
20
+ globalIgnores(['dist']),
21
+ {
22
+ files: ['**/*.{ts,tsx}'],
23
+ extends: [
24
+ // Other configs...
25
+
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,
32
+
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
+ ])
44
+ ```
45
+
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
+ ])
73
+ ```
package/dist/editor.css ADDED
@@ -0,0 +1,2 @@
1
+ ._container_1u8so_1{display:inline-block;position:relative}._dark_1u8so_7{--sel-bg:#ffffff0f;--sel-border:#ffffff1f;--sel-text:#e2e8f0;--sel-hover:#ffffff1a;--sel-open-border:#7dd3fc66;--sel-dropdown-bg:#1e293b;--sel-dropdown-border:#334155;--sel-dropdown-shadow:0 12px 40px #0006, 0 4px 12px #0003;--sel-item-hover:#ffffff0f;--sel-item-active-bg:#63b3ed26;--sel-item-active-color:#7dd3fc;--sel-search-bg:#ffffff0a;--sel-search-border:#ffffff1a;--sel-search-focus:#7dd3fc66;--sel-placeholder:#64748b}._light_1u8so_26{--sel-bg:#fff;--sel-border:#e2e8f0;--sel-text:#334155;--sel-hover:#f1f5f9;--sel-open-border:#3b82f6;--sel-dropdown-bg:#fff;--sel-dropdown-border:#e2e8f0;--sel-dropdown-shadow:0 12px 40px #0000001a, 0 4px 12px #0000000d;--sel-item-hover:#f8fafc;--sel-item-active-bg:#2563eb14;--sel-item-active-color:#2563eb;--sel-search-bg:#f8fafc;--sel-search-border:#e2e8f0;--sel-search-focus:#3b82f6;--sel-placeholder:#94a3b8}._trigger_1u8so_44{border:1px solid var(--sel-border);background:var(--sel-bg);height:34px;color:var(--sel-text);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis;border-radius:8px;outline:none;justify-content:space-between;align-items:center;gap:6px;padding:0 10px;font-family:inherit;font-size:13px;transition:background-color .15s,border-color .15s;display:flex;overflow:hidden}._trigger_1u8so_44:hover{background:var(--sel-hover)}._triggerOpen_1u8so_70{border-color:var(--sel-open-border)}._triggerLabel_1u8so_74{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._chevron_1u8so_80{opacity:.6;flex-shrink:0;width:10px;height:10px;transition:transform .2s}._chevronOpen_1u8so_88{transform:rotate(180deg)}._dropdown_1u8so_93{z-index:1000;background:var(--sel-dropdown-bg);border:1px solid var(--sel-dropdown-border);min-width:100%;max-height:280px;box-shadow:var(--sel-dropdown-shadow);transform-origin:top;border-radius:10px;flex-direction:column;animation:.2s cubic-bezier(.16,1,.3,1) _slideIn_1u8so_1;display:flex;position:absolute;top:calc(100% + 6px);left:0;overflow:hidden}._dropdownClosing_1u8so_111{animation:.15s ease-in forwards _slideOut_1u8so_1}@keyframes _slideIn_1u8so_1{0%{opacity:0;transform:translateY(-6px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes _slideOut_1u8so_1{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-6px)scale(.96)}}._searchWrapper_1u8so_138{background:var(--sel-dropdown-bg);padding:8px 8px 4px;position:sticky;top:0}._searchInput_1u8so_145{border:1px solid var(--sel-search-border);background:var(--sel-search-bg);width:100%;height:32px;color:var(--sel-text);box-sizing:border-box;border-radius:6px;outline:none;padding:0 10px;font-family:inherit;font-size:12px;transition:border-color .15s}._searchInput_1u8so_145::placeholder{color:var(--sel-placeholder)}._searchInput_1u8so_145:focus{border-color:var(--sel-search-focus)}._optionsList_1u8so_169{padding:4px;overflow-y:auto}._option_1u8so_169{width:100%;color:var(--sel-text);cursor:pointer;white-space:nowrap;text-align:left;background:0 0;border:none;border-radius:6px;align-items:center;padding:8px 12px;font-family:inherit;font-size:13px;transition:background-color .12s;display:flex}._option_1u8so_169:hover{background:var(--sel-item-hover)}._optionActive_1u8so_195{background:var(--sel-item-active-bg);color:var(--sel-item-active-color);font-weight:500}._optionActive_1u8so_195:hover{background:var(--sel-item-active-bg)}._noResults_1u8so_205{color:var(--sel-placeholder);text-align:center;padding:14px 12px;font-size:12px}._toolbar_18r58_1{border-bottom:none;align-items:center;gap:4px;padding:8px 14px;display:flex}._dark_18r58_10{--tb-bg:#1e293b;--tb-border:#334155;--tb-text:#e2e8f0;--tb-hover:#ffffff14;--tb-active-bg:#63b3ed2e;--tb-active-color:#7dd3fc;--tb-separator:#ffffff1a;background:var(--tb-bg);border:1px solid var(--tb-border);color:var(--tb-text);border-radius:12px 12px 0 0}._light_18r58_26{--tb-bg:#f8fafc;--tb-border:#e2e8f0;--tb-text:#334155;--tb-hover:#0000000d;--tb-active-bg:#2563eb1a;--tb-active-color:#2563eb;--tb-separator:#e2e8f0;background:var(--tb-bg);border:1px solid var(--tb-border);color:var(--tb-text);border-radius:12px 12px 0 0}._group_18r58_41{align-items:center;gap:2px;display:flex}._separator_18r58_47{background:var(--tb-separator);border-radius:1px;width:1px;height:22px;margin:0 10px}._button_18r58_55{width:34px;height:34px;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:0;font-family:inherit;font-size:15px;font-weight:500;line-height:1;transition:background-color .15s,color .15s,transform .1s;display:inline-flex}._button_18r58_55:hover{background:var(--tb-hover)}._button_18r58_55:active{transform:scale(.93)}._active_18r58_83{background:var(--tb-active-bg);color:var(--tb-active-color)}._active_18r58_83:hover{background:var(--tb-active-bg)}._disabled_18r58_92{opacity:.35;cursor:not-allowed}._disabled_18r58_92:active{transform:none}._button_18r58_55 svg{width:16px;height:16px}._container_tsfuj_1{--editor-radius:12px;--editor-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--editor-font-size:15px;--editor-line-height:1.7;font-family:var(--editor-font-family);border-radius:var(--editor-radius);overflow:hidden}._dark_tsfuj_14{--editor-bg:#0f172a;--editor-border:#334155;--editor-text-color:#e2e8f0;--editor-placeholder-color:#64748b;--editor-focus-border:#60a5fa;--editor-focus-shadow:0 0 0 3px #60a5fa1a;--editor-caret:#60a5fa;--editor-blockquote-border:#475569;--editor-blockquote-bg:#ffffff08;--editor-blockquote-text:#94a3b8;--editor-code-bg:#ffffff14;--editor-code-color:#7dd3fc;--editor-pre-bg:#020617;--editor-pre-border:#1e293b;--editor-pre-text:#e2e8f0;--editor-hr:#334155;--editor-strong:#f1f5f9;box-shadow:0 4px 20px #00000040,0 1px 4px #00000026}._light_tsfuj_37{--editor-bg:#fff;--editor-border:#e2e8f0;--editor-text-color:#1e293b;--editor-placeholder-color:#94a3b8;--editor-focus-border:#3b82f6;--editor-focus-shadow:0 0 0 3px #3b82f614;--editor-caret:#3b82f6;--editor-blockquote-border:#cbd5e1;--editor-blockquote-bg:#f8fafc;--editor-blockquote-text:#64748b;--editor-code-bg:#f1f5f9;--editor-code-color:#0f172a;--editor-pre-bg:#1e293b;--editor-pre-border:#334155;--editor-pre-text:#f1f5f9;--editor-hr:#e2e8f0;--editor-strong:#0f172a;box-shadow:0 4px 20px #0000000f,0 1px 4px #00000008}._editorWrapper_tsfuj_59{border:1px solid var(--editor-border);border-radius:0 0 var(--editor-radius) var(--editor-radius);background:var(--editor-bg);border-top:none;transition:border-color .2s,box-shadow .2s}._editorWrapper_tsfuj_59:focus-within{border-color:var(--editor-focus-border);box-shadow:var(--editor-focus-shadow)}._editorWrapper_tsfuj_59 .tiptap{min-height:300px;max-height:600px;font-size:var(--editor-font-size);line-height:var(--editor-line-height);color:var(--editor-text-color);caret-color:var(--editor-caret);outline:none;padding:24px 28px;overflow-y:auto}._editorWrapper_tsfuj_59 .tiptap p{margin:0 0 .75em}._editorWrapper_tsfuj_59 .tiptap h1{margin:1em 0 .5em;font-size:1.75em;font-weight:700;line-height:1.3}._editorWrapper_tsfuj_59 .tiptap h2{margin:.9em 0 .4em;font-size:1.4em;font-weight:600;line-height:1.35}._editorWrapper_tsfuj_59 .tiptap h3{margin:.8em 0 .35em;font-size:1.15em;font-weight:600;line-height:1.4}._editorWrapper_tsfuj_59 .tiptap ul,._editorWrapper_tsfuj_59 .tiptap ol{margin:.5em 0;padding-left:1.5em}._editorWrapper_tsfuj_59 .tiptap li{margin:.25em 0}._editorWrapper_tsfuj_59 .tiptap blockquote{border-left:4px solid var(--editor-blockquote-border);background:var(--editor-blockquote-bg);color:var(--editor-blockquote-text);border-radius:0 6px 6px 0;margin:1em 0;padding:.5em 1em}._editorWrapper_tsfuj_59 .tiptap code{background:var(--editor-code-bg);color:var(--editor-code-color);border-radius:4px;padding:.15em .4em;font-family:SF Mono,Fira Code,Fira Mono,Menlo,monospace;font-size:.9em}._editorWrapper_tsfuj_59 .tiptap pre{background:var(--editor-pre-bg);color:var(--editor-pre-text);border:1px solid var(--editor-pre-border);border-radius:8px;margin:1em 0;padding:16px 20px;font-family:SF Mono,Fira Code,Fira Mono,Menlo,monospace;font-size:.875em;line-height:1.6;overflow-x:auto}._editorWrapper_tsfuj_59 .tiptap pre code{color:inherit;font-size:inherit;background:0 0;border-radius:0;padding:0}._editorWrapper_tsfuj_59 .tiptap hr{border:none;border-top:1px solid var(--editor-hr);margin:1.5em 0}._editorWrapper_tsfuj_59 .tiptap strong{color:var(--editor-strong);font-weight:600}._editorWrapper_tsfuj_59 .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);color:var(--editor-placeholder-color);pointer-events:none;float:left;height:0}._container_z8jyk_1{--preview-radius:12px;border-radius:var(--preview-radius);min-height:200px;max-height:500px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow-y:auto}._dark_z8jyk_13{--preview-bg:#0f172a;--preview-border:#334155;--preview-text:#e2e8f0;--preview-muted:#64748b;--preview-accent:#7dd3fc;--preview-blockquote-border:#475569;--preview-blockquote-bg:#ffffff08;--preview-code-bg:#ffffff14;--preview-code-color:#7dd3fc;--preview-pre-bg:#020617;--preview-pre-border:#1e293b;--preview-hr:#334155;--preview-strong:#f1f5f9;--preview-h1:#f8fafc;background:var(--preview-bg);border:1px solid var(--preview-border)}._light_z8jyk_34{--preview-bg:#fff;--preview-border:#e2e8f0;--preview-text:#1e293b;--preview-muted:#94a3b8;--preview-accent:#2563eb;--preview-blockquote-border:#cbd5e1;--preview-blockquote-bg:#f8fafc;--preview-code-bg:#f1f5f9;--preview-code-color:#0f172a;--preview-pre-bg:#1e293b;--preview-pre-border:#334155;--preview-hr:#e2e8f0;--preview-strong:#0f172a;--preview-h1:#0f172a;background:var(--preview-bg);border:1px solid var(--preview-border)}._body_z8jyk_54{color:var(--preview-text);padding:28px 32px;font-size:15px;line-height:1.7}._body_z8jyk_54 h1{color:var(--preview-h1);margin:0 0 .5em;font-size:1.75em;font-weight:700;line-height:1.3}._body_z8jyk_54 h2{margin:1em 0 .4em;font-size:1.4em;font-weight:600;line-height:1.35}._body_z8jyk_54 h3{margin:.8em 0 .35em;font-size:1.15em;font-weight:600;line-height:1.4}._body_z8jyk_54 p{margin:0 0 .75em}._body_z8jyk_54 strong{color:var(--preview-strong);font-weight:600}._body_z8jyk_54 ul,._body_z8jyk_54 ol{margin:.5em 0;padding-left:1.5em}._body_z8jyk_54 li{margin:.3em 0}._body_z8jyk_54 li::marker{color:var(--preview-accent)}._body_z8jyk_54 blockquote{border-left:3px solid var(--preview-blockquote-border);background:var(--preview-blockquote-bg);color:var(--preview-muted);border-radius:0 8px 8px 0;margin:1em 0;padding:12px 16px;font-style:italic}._body_z8jyk_54 code{background:var(--preview-code-bg);color:var(--preview-code-color);border-radius:4px;padding:.15em .4em;font-family:SF Mono,Fira Code,Menlo,monospace;font-size:.9em}._body_z8jyk_54 pre{background:var(--preview-pre-bg);border:1px solid var(--preview-pre-border);border-radius:8px;margin:1em 0;padding:16px 20px;font-family:SF Mono,Fira Code,Menlo,monospace;font-size:.875em;line-height:1.6;overflow-x:auto}._body_z8jyk_54 pre code{color:#e2e8f0;background:0 0;padding:0}._body_z8jyk_54 hr{border:none;border-top:1px solid var(--preview-hr);margin:1.5em 0}._body_z8jyk_54 a{color:var(--preview-accent);text-underline-offset:2px;text-decoration:underline}._empty_z8jyk_157{min-height:200px;color:var(--preview-muted);flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex}._emptyIcon_z8jyk_167{opacity:.5}._emptyText_z8jyk_171{font-size:13px;font-weight:500}
2
+ /*$vite$:1*/
package/dist/rich-editor.cjs.js ADDED
@@ -0,0 +1 @@
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("@tiptap/react"),l=require("@tiptap/starter-kit");l=s(l,1);let u=require("@tiptap/extension-placeholder");u=s(u,1);let d=require("@tiptap/extension-underline");d=s(d,1);let f=require("@tiptap/extension-text-align");f=s(f,1);let p=require("@tiptap/extension-text-style");p=s(p,1);let m=require("@tiptap/extension-font-family");m=s(m,1);let h=require("@tiptap/core"),g=require("react"),_=require("react/jsx-runtime");var v=h.Extension.create({name:`fontSize`,addOptions(){return{types:[`textStyle`]}},addGlobalAttributes(){return[{types:this.options.types,attributes:{fontSize:{default:null,parseHTML:e=>e.style.fontSize?.replace(/['"]+/g,``)||null,renderHTML:e=>e.fontSize?{style:`font-size: ${e.fontSize}`}:{}}}}]},addCommands(){return{setFontSize:e=>({chain:t})=>t().setMark(`textStyle`,{fontSize:e}).run(),unsetFontSize:()=>({chain:e})=>e().setMark(`textStyle`,{fontSize:null}).removeEmptyTextStyle().run()}}});function y({value:e,onChange:t,placeholder:n,editable:r=!0}){let i=(0,g.useRef)(!1),a=(0,c.useEditor)({extensions:[l.default.configure({heading:{levels:[1,2,3]}}),u.default.configure({placeholder:n??``}),d.default,p.default,m.default,v,f.default.configure({types:[`heading`,`paragraph`],alignments:[`left`,`center`,`right`,`justify`]})],content:e,editable:r,onUpdate:({editor:e})=>{if(i.current){i.current=!1;return}t(e.getHTML())}});return(0,g.useEffect)(()=>{a&&(a.isDestroyed||a.getHTML()!==e&&(i.current=!0,a.commands.setContent(e,!1)))},[a,e]),(0,g.useEffect)(()=>{a&&(a.isDestroyed||a.setEditable(r))},[a,r]),a}var b=(...e)=>e.filter((e,t,n)=>!!e&&e.trim()!==``&&n.indexOf(e)===t).join(` `).trim(),x=e=>e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).toLowerCase(),S=e=>e.replace(/^([A-Z])|[\s-_]+(\w)/g,(e,t,n)=>n?n.toUpperCase():t.toLowerCase()),C=e=>{let t=S(e);return t.charAt(0).toUpperCase()+t.slice(1)},w={xmlns:`http://www.w3.org/2000/svg`,width:24,height:24,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`},T=e=>{for(let t in e)if(t.startsWith(`aria-`)||t===`role`||t===`title`)return!0;return!1},E=(0,g.createContext)({}),D=()=>(0,g.useContext)(E),O=(0,g.forwardRef)(({color:e,size:t,strokeWidth:n,absoluteStrokeWidth:r,className:i=``,children:a,iconNode:o,...s},c)=>{let{size:l=24,strokeWidth:u=2,absoluteStrokeWidth:d=!1,color:f=`currentColor`,className:p=``}=D()??{},m=r??d?Number(n??u)*24/Number(t??l):n??u;return(0,g.createElement)(`svg`,{ref:c,...w,width:t??l??w.width,height:t??l??w.height,stroke:e??f,strokeWidth:m,className:b(`lucide`,p,i),...!a&&!T(s)&&{"aria-hidden":`true`},...s},[...o.map(([e,t])=>(0,g.createElement)(e,t)),...Array.isArray(a)?a:[a]])}),k=(e,t)=>{let n=(0,g.forwardRef)(({className:n,...r},i)=>(0,g.createElement)(O,{ref:i,iconNode:t,className:b(`lucide-${x(C(e))}`,`lucide-${e}`,n),...r}));return n.displayName=C(e),n},A=k(`bold`,[[`path`,{d:`M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8`,key:`mg9rjx`}]]),j=k(`eye`,[[`path`,{d:`M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0`,key:`1nclc0`}],[`circle`,{cx:`12`,cy:`12`,r:`3`,key:`1v7zrd`}]]),M=k(`italic`,[[`line`,{x1:`19`,x2:`10`,y1:`4`,y2:`4`,key:`15jd3p`}],[`line`,{x1:`14`,x2:`5`,y1:`20`,y2:`20`,key:`bu0au3`}],[`line`,{x1:`15`,x2:`9`,y1:`4`,y2:`20`,key:`uljnxc`}]]),N=k(`list-ordered`,[[`path`,{d:`M11 5h10`,key:`1cz7ny`}],[`path`,{d:`M11 12h10`,key:`1438ji`}],[`path`,{d:`M11 19h10`,key:`11t30w`}],[`path`,{d:`M4 4h1v5`,key:`10yrso`}],[`path`,{d:`M4 9h2`,key:`r1h2o0`}],[`path`,{d:`M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02`,key:`xtkcd5`}]]),P=k(`list`,[[`path`,{d:`M3 5h.01`,key:`18ugdj`}],[`path`,{d:`M3 12h.01`,key:`nlz23k`}],[`path`,{d:`M3 19h.01`,key:`noohij`}],[`path`,{d:`M8 5h13`,key:`1pao27`}],[`path`,{d:`M8 12h13`,key:`1za7za`}],[`path`,{d:`M8 19h13`,key:`m83p4d`}]]),F=k(`redo-2`,[[`path`,{d:`m15 14 5-5-5-5`,key:`12vg1m`}],[`path`,{d:`M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13`,key:`6uklza`}]]),I=k(`remove-formatting`,[[`path`,{d:`M4 7V4h16v3`,key:`9msm58`}],[`path`,{d:`M5 20h6`,key:`1h6pxn`}],[`path`,{d:`M13 4 8 20`,key:`kqq6aj`}],[`path`,{d:`m15 15 5 5`,key:`me55sn`}],[`path`,{d:`m20 15-5 5`,key:`11p7ol`}]]),L=k(`strikethrough`,[[`path`,{d:`M16 4H9a3 3 0 0 0-2.83 4`,key:`43sutm`}],[`path`,{d:`M14 12a4 4 0 0 1 0 8H6`,key:`nlfj13`}],[`line`,{x1:`4`,x2:`20`,y1:`12`,y2:`12`,key:`1e0a9i`}]]),R=k(`text-align-end`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M21 12H9`,key:`dn1m92`}],[`path`,{d:`M21 19H7`,key:`4cu937`}]]),z=k(`text-align-center`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M17 12H7`,key:`16if0g`}],[`path`,{d:`M19 19H5`,key:`vjpgq2`}]]),B=k(`text-align-justify`,[[`path`,{d:`M3 5h18`,key:`1u36vt`}],[`path`,{d:`M3 12h18`,key:`1i2n21`}],[`path`,{d:`M3 19h18`,key:`awlh7x`}]]),V=k(`text-align-start`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M15 12H3`,key:`6jk70r`}],[`path`,{d:`M17 19H3`,key:`z6ezky`}]]),H=k(`underline`,[[`path`,{d:`M6 4v6a6 6 0 0 0 12 0V4`,key:`9kb039`}],[`line`,{x1:`4`,x2:`20`,y1:`20`,y2:`20`,key:`nun2al`}]]),U=k(`undo-2`,[[`path`,{d:`M9 14 4 9l5-5`,key:`102s5s`}],[`path`,{d:`M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11`,key:`f3b9sd`}]]),W=new Set;function G(e){if(W.has(e))return;let t=`google-font-${e.replace(/\s+/g,`-`).toLowerCase()}`;if(document.getElementById(t)){W.add(e);return}let n=document.createElement(`link`);n.id=t,n.rel=`stylesheet`,n.href=`https://fonts.googleapis.com/css2?family=${encodeURIComponent(e)}:wght@300;400;500;600;700&display=swap`,document.head.appendChild(n),W.add(e)}var K=[{label:`Por defecto`,value:``},{label:`Arial`,value:`Arial, sans-serif`},{label:`Verdana`,value:`Verdana, sans-serif`},{label:`Georgia`,value:`Georgia, serif`},{label:`Times New Roman`,value:`'Times New Roman', serif`},{label:`Courier New`,value:`'Courier New', monospace`},...[`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`].map(e=>({label:e,value:`'${e}', sans-serif`}))],q=[{label:`8`,value:`8px`},{label:`9`,value:`9px`},{label:`10`,value:`10px`},{label:`11`,value:`11px`},{label:`12`,value:`12px`},{label:`13`,value:`13px`},{label:`14`,value:`14px`},{label:`15`,value:`15px`},{label:`16`,value:`16px`},{label:`18`,value:`18px`},{label:`20`,value:`20px`},{label:`24`,value:`24px`},{label:`28`,value:`28px`},{label:`32`,value:`32px`},{label:`36`,value:`36px`},{label:`48`,value:`48px`},{label:`64`,value:`64px`}],J={container:`_container_1u8so_1`,dark:`_dark_1u8so_7`,light:`_light_1u8so_26`,trigger:`_trigger_1u8so_44`,triggerOpen:`_triggerOpen_1u8so_70`,triggerLabel:`_triggerLabel_1u8so_74`,chevron:`_chevron_1u8so_80`,chevronOpen:`_chevronOpen_1u8so_88`,dropdown:`_dropdown_1u8so_93`,slideIn:`_slideIn_1u8so_1`,dropdownClosing:`_dropdownClosing_1u8so_111`,slideOut:`_slideOut_1u8so_1`,searchWrapper:`_searchWrapper_1u8so_138`,searchInput:`_searchInput_1u8so_145`,optionsList:`_optionsList_1u8so_169`,option:`_option_1u8so_169`,optionActive:`_optionActive_1u8so_195`,noResults:`_noResults_1u8so_205`};function Y({options:e,value:t,onChange:n,placeholder:r=`Seleccionar`,searchable:i=!1,width:a,title:o,theme:s=`dark`,"aria-label":c}){let[l,u]=(0,g.useState)(!1),[d,f]=(0,g.useState)(!1),[p,m]=(0,g.useState)(``),h=(0,g.useRef)(null),v=(0,g.useRef)(null),y=e.find(e=>e.value===t)?.label||r,b=i&&p?e.filter(e=>e.label.toLowerCase().includes(p.toLowerCase())):e,x=(0,g.useCallback)(()=>{f(!0),setTimeout(()=>{u(!1),f(!1),m(``)},140)},[]),S=()=>{l?x():u(!0)},C=e=>{n(e),x()};(0,g.useEffect)(()=>{if(!l)return;let e=e=>{h.current&&!h.current.contains(e.target)&&x()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[l,x]),(0,g.useEffect)(()=>{l&&i&&v.current&&v.current.focus()},[l,i]),(0,g.useEffect)(()=>{if(!l)return;let e=e=>{e.key===`Escape`&&x()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[l,x]);let w=[J.container,s===`light`?J.light:J.dark].filter(Boolean).join(` `),T=[J.trigger,l&&J.triggerOpen].filter(Boolean).join(` `),E=[J.dropdown,d&&J.dropdownClosing].filter(Boolean).join(` `);return(0,_.jsxs)(`div`,{className:w,ref:h,style:a?{width:a}:void 0,children:[(0,_.jsxs)(`button`,{type:`button`,className:T,onClick:S,title:o,"aria-label":c,"aria-expanded":l,"aria-haspopup":`listbox`,style:a?{width:`100%`}:void 0,children:[(0,_.jsx)(`span`,{className:J.triggerLabel,children:y}),(0,_.jsx)(`svg`,{className:`${J.chevron} ${l?J.chevronOpen:``}`,viewBox:`0 0 12 12`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,_.jsx)(`path`,{d:`M3 4.5L6 7.5L9 4.5`})})]}),l&&(0,_.jsxs)(`div`,{className:E,children:[i&&(0,_.jsx)(`div`,{className:J.searchWrapper,children:(0,_.jsx)(`input`,{ref:v,type:`text`,className:J.searchInput,placeholder:`Buscar...`,value:p,onChange:e=>m(e.target.value),onMouseDown:e=>e.stopPropagation()})}),(0,_.jsx)(`div`,{className:J.optionsList,children:b.length===0?(0,_.jsx)(`div`,{className:J.noResults,children:`Sin resultados`}):b.map(e=>{let n=e.value===t;return(0,_.jsx)(`button`,{type:`button`,className:[J.option,n&&J.optionActive].filter(Boolean).join(` `),"aria-pressed":n,onClick:()=>C(e.value),children:e.label},e.value)})})]})]})}var X={toolbar:`_toolbar_18r58_1`,dark:`_dark_18r58_10`,light:`_light_18r58_26`,group:`_group_18r58_41`,separator:`_separator_18r58_47`,button:`_button_18r58_55`,active:`_active_18r58_83`,disabled:`_disabled_18r58_92`};function Z({editor:e,theme:t=`dark`}){if(!e)return null;let n=(e,t=!1)=>[X.button,e&&X.active,t&&X.disabled].filter(Boolean).join(` `),r=t=>{if(!t){e.chain().focus().unsetFontFamily().run();return}let n=t.split(`,`)[0].replaceAll(`'`,``).trim();[`Arial`,`Verdana`,`Georgia`,`Times New Roman`,`Courier New`].includes(n)||G(n),e.chain().focus().setFontFamily(t).run()},i=t=>{if(!t){e.chain().focus().unsetFontSize().run();return}e.chain().focus().setFontSize(t).run()},a=e.getAttributes(`textStyle`).fontFamily??``,o=e.getAttributes(`textStyle`).fontSize??``,s=1.8;return(0,_.jsxs)(`div`,{className:[X.toolbar,t===`light`?X.light:X.dark].filter(Boolean).join(` `),role:`toolbar`,"aria-label":`Editor de texto enriquecido`,children:[(0,_.jsxs)(`div`,{className:X.group,children:[(0,_.jsx)(`button`,{type:`button`,className:n(!1,!e.can().undo()),onClick:()=>e.chain().focus().undo().run(),title:`Deshacer`,"aria-label":`Deshacer`,children:(0,_.jsx)(U,{size:16,strokeWidth:s})}),(0,_.jsx)(`button`,{type:`button`,className:n(!1,!e.can().redo()),onClick:()=>e.chain().focus().redo().run(),title:`Rehacer`,"aria-label":`Rehacer`,children:(0,_.jsx)(F,{size:16,strokeWidth:s})})]}),(0,_.jsx)(`div`,{className:X.separator}),(0,_.jsx)(`div`,{className:X.group,children:(0,_.jsx)(Y,{options:K,value:a,onChange:r,placeholder:`Fuente`,searchable:!0,width:140,theme:t,title:`Tipo de fuente`,"aria-label":`Tipo de fuente`})}),(0,_.jsx)(`div`,{className:X.group,children:(0,_.jsx)(Y,{options:q,value:o,onChange:i,placeholder:`—`,width:68,theme:t,title:`Tamaño`,"aria-label":`Tamaño de fuente`})}),(0,_.jsx)(`div`,{className:X.separator}),(0,_.jsxs)(`div`,{className:X.group,children:[(0,_.jsx)(`button`,{type:`button`,className:n(e.isActive(`bold`)),onClick:()=>e.chain().focus().toggleBold().run(),title:`Negrita`,"aria-label":`Negrita`,children:(0,_.jsx)(A,{size:16,strokeWidth:s})}),(0,_.jsx)(`button`,{type:`button`,className:n(e.isActive(`italic`)),onClick:()=>e.chain().focus().toggleItalic().run(),title:`Cursiva`,"aria-label":`Cursiva`,children:(0,_.jsx)(M,{size:16,strokeWidth:s})}),(0,_.jsx)(`button`,{type:`button`,className:n(e.isActive(`underline`)),onClick:()=>e.chain().focus().toggleUnderline().run(),title:`Subrayado`,"aria-label":`Subrayado`,children:(0,_.jsx)(H,{size:16,strokeWidth:s})}),(0,_.jsx)(`button`,{type:`button`,className:n(e.isActive(`strike`)),onClick:()=>e.chain().focus().toggleStrike().run(),title:`Tachado`,"aria-label":`Tachado`,children:(0,_.jsx)(L,{size:16,strokeWidth:s})})]}),(0,_.jsx)(`div`,{className:X.separator}),(0,_.jsxs)(`div`,{className:X.group,children:[(0,_.jsx)(`button`,{type:`button`,className:n(e.isActive({textAlign:`left`})),onClick:()=>e.chain().focus().setTextAlign(`left`).run(),title:`Alinear izquierda`,"aria-label":`Alinear izquierda`,children:(0,_.jsx)(V,{size:16,strokeWidth:s})}),(0,_.jsx)(`button`,{type:`button`,className:n(e.isActive({textAlign:`center`})),onClick:()=>e.chain().focus().setTextAlign(`center`).run(),title:`Centrar`,"aria-label":`Centrar`,children:(0,_.jsx)(z,{size:16,strokeWidth:s})}),(0,_.jsx)(`button`,{type:`button`,className:n(e.isActive({textAlign:`right`})),onClick:()=>e.chain().focus().setTextAlign(`right`).run(),title:`Alinear derecha`,"aria-label":`Alinear derecha`,children:(0,_.jsx)(R,{size:16,strokeWidth:s})}),(0,_.jsx)(`button`,{type:`button`,className:n(e.isActive({textAlign:`justify`})),onClick:()=>e.chain().focus().setTextAlign(`justify`).run(),title:`Justificar`,"aria-label":`Justificar`,children:(0,_.jsx)(B,{size:16,strokeWidth:s})})]}),(0,_.jsx)(`div`,{className:X.separator}),(0,_.jsxs)(`div`,{className:X.group,children:[(0,_.jsx)(`button`,{type:`button`,className:n(e.isActive(`bulletList`)),onClick:()=>e.chain().focus().toggleBulletList().run(),title:`Lista con viñetas`,"aria-label":`Lista con viñetas`,children:(0,_.jsx)(P,{size:16,strokeWidth:s})}),(0,_.jsx)(`button`,{type:`button`,className:n(e.isActive(`orderedList`)),onClick:()=>e.chain().focus().toggleOrderedList().run(),title:`Lista numerada`,"aria-label":`Lista numerada`,children:(0,_.jsx)(N,{size:16,strokeWidth:s})})]}),(0,_.jsx)(`div`,{className:X.separator}),(0,_.jsx)(`div`,{className:X.group,children:(0,_.jsx)(`button`,{type:`button`,className:n(!1),onClick:()=>e.chain().focus().unsetAllMarks().clearNodes().run(),title:`Limpiar formato`,"aria-label":`Limpiar formato`,children:(0,_.jsx)(I,{size:16,strokeWidth:s})})})]})}var Q={container:`_container_tsfuj_1`,dark:`_dark_tsfuj_14`,light:`_light_tsfuj_37`,editorWrapper:`_editorWrapper_tsfuj_59`};function ee({value:e,onChange:t,placeholder:n,editable:r=!0,theme:i=`dark`,className:a}){let o=y({value:e,onChange:t,placeholder:n,editable:r});return(0,_.jsxs)(`div`,{className:[Q.container,i===`light`?Q.light:Q.dark,a].filter(Boolean).join(` `),children:[(0,_.jsx)(Z,{editor:o,theme:i}),(0,_.jsx)(`div`,{className:Q.editorWrapper,children:(0,_.jsx)(c.EditorContent,{editor:o})})]})}var $={container:`_container_z8jyk_1`,dark:`_dark_z8jyk_13`,light:`_light_z8jyk_34`,body:`_body_z8jyk_54`,empty:`_empty_z8jyk_157`,emptyIcon:`_emptyIcon_z8jyk_167`,emptyText:`_emptyText_z8jyk_171`};function te({value:e,theme:t=`dark`,className:n}){return(0,_.jsx)(`div`,{className:[$.container,t===`light`?$.light:$.dark,n].filter(Boolean).join(` `),children:!e||e===`<p></p>`||e.trim()===``?(0,_.jsxs)(`div`,{className:$.empty,children:[(0,_.jsx)(j,{size:24,strokeWidth:1.2,className:$.emptyIcon}),(0,_.jsx)(`span`,{className:$.emptyText,children:`El contenido aparecerá aquí`})]}):(0,_.jsx)(`div`,{className:$.body,dangerouslySetInnerHTML:{__html:e}})})}exports.Preview=te,exports.RichEditor=ee;
package/dist/rich-editor.es.js ADDED
@@ -0,0 +1,841 @@
1
+ import { EditorContent as e, useEditor as t } from "@tiptap/react";
2
+ import n from "@tiptap/starter-kit";
3
+ import r from "@tiptap/extension-placeholder";
4
+ import i from "@tiptap/extension-underline";
5
+ import a from "@tiptap/extension-text-align";
6
+ import o from "@tiptap/extension-text-style";
7
+ import s from "@tiptap/extension-font-family";
8
+ import { Extension as c } from "@tiptap/core";
9
+ import { createContext as l, createElement as u, forwardRef as d, useCallback as f, useContext as p, useEffect as m, useRef as h, useState as g } from "react";
10
+ import { jsx as _, jsxs as v } from "react/jsx-runtime";
11
+ //#region src/extensions/font-size.ts
12
+ var y = c.create({
13
+ name: "fontSize",
14
+ addOptions() {
15
+ return { types: ["textStyle"] };
16
+ },
17
+ addGlobalAttributes() {
18
+ return [{
19
+ types: this.options.types,
20
+ attributes: { fontSize: {
21
+ default: null,
22
+ parseHTML: (e) => e.style.fontSize?.replace(/['"]+/g, "") || null,
23
+ renderHTML: (e) => e.fontSize ? { style: `font-size: ${e.fontSize}` } : {}
24
+ } }
25
+ }];
26
+ },
27
+ addCommands() {
28
+ return {
29
+ setFontSize: (e) => ({ chain: t }) => t().setMark("textStyle", { fontSize: e }).run(),
30
+ unsetFontSize: () => ({ chain: e }) => e().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run()
31
+ };
32
+ }
33
+ });
34
+ //#endregion
35
+ //#region src/hooks/useRichEditor.ts
36
+ function b({ value: e, onChange: c, placeholder: l, editable: u = !0 }) {
37
+ let d = h(!1), f = t({
38
+ extensions: [
39
+ n.configure({ heading: { levels: [
40
+ 1,
41
+ 2,
42
+ 3
43
+ ] } }),
44
+ r.configure({ placeholder: l ?? "" }),
45
+ i,
46
+ o,
47
+ s,
48
+ y,
49
+ a.configure({
50
+ types: ["heading", "paragraph"],
51
+ alignments: [
52
+ "left",
53
+ "center",
54
+ "right",
55
+ "justify"
56
+ ]
57
+ })
58
+ ],
59
+ content: e,
60
+ editable: u,
61
+ onUpdate: ({ editor: e }) => {
62
+ if (d.current) {
63
+ d.current = !1;
64
+ return;
65
+ }
66
+ c(e.getHTML());
67
+ }
68
+ });
69
+ return m(() => {
70
+ f && (f.isDestroyed || f.getHTML() !== e && (d.current = !0, f.commands.setContent(e, !1)));
71
+ }, [f, e]), m(() => {
72
+ f && (f.isDestroyed || f.setEditable(u));
73
+ }, [f, u]), f;
74
+ }
75
+ //#endregion
76
+ //#region node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.mjs
77
+ var x = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), S = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), C = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), w = (e) => {
78
+ let t = C(e);
79
+ return t.charAt(0).toUpperCase() + t.slice(1);
80
+ }, T = {
81
+ xmlns: "http://www.w3.org/2000/svg",
82
+ width: 24,
83
+ height: 24,
84
+ viewBox: "0 0 24 24",
85
+ fill: "none",
86
+ stroke: "currentColor",
87
+ strokeWidth: 2,
88
+ strokeLinecap: "round",
89
+ strokeLinejoin: "round"
90
+ }, E = (e) => {
91
+ for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
92
+ return !1;
93
+ }, D = l({}), O = () => p(D), k = d(({ color: e, size: t, strokeWidth: n, absoluteStrokeWidth: r, className: i = "", children: a, iconNode: o, ...s }, c) => {
94
+ let { size: l = 24, strokeWidth: d = 2, absoluteStrokeWidth: f = !1, color: p = "currentColor", className: m = "" } = O() ?? {}, h = r ?? f ? Number(n ?? d) * 24 / Number(t ?? l) : n ?? d;
95
+ return u("svg", {
96
+ ref: c,
97
+ ...T,
98
+ width: t ?? l ?? T.width,
99
+ height: t ?? l ?? T.height,
100
+ stroke: e ?? p,
101
+ strokeWidth: h,
102
+ className: x("lucide", m, i),
103
+ ...!a && !E(s) && { "aria-hidden": "true" },
104
+ ...s
105
+ }, [...o.map(([e, t]) => u(e, t)), ...Array.isArray(a) ? a : [a]]);
106
+ }), A = (e, t) => {
107
+ let n = d(({ className: n, ...r }, i) => u(k, {
108
+ ref: i,
109
+ iconNode: t,
110
+ className: x(`lucide-${S(w(e))}`, `lucide-${e}`, n),
111
+ ...r
112
+ }));
113
+ return n.displayName = w(e), n;
114
+ }, j = A("bold", [["path", {
115
+ d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8",
116
+ key: "mg9rjx"
117
+ }]]), M = A("eye", [["path", {
118
+ d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
119
+ key: "1nclc0"
120
+ }], ["circle", {
121
+ cx: "12",
122
+ cy: "12",
123
+ r: "3",
124
+ key: "1v7zrd"
125
+ }]]), N = A("italic", [
126
+ ["line", {
127
+ x1: "19",
128
+ x2: "10",
129
+ y1: "4",
130
+ y2: "4",
131
+ key: "15jd3p"
132
+ }],
133
+ ["line", {
134
+ x1: "14",
135
+ x2: "5",
136
+ y1: "20",
137
+ y2: "20",
138
+ key: "bu0au3"
139
+ }],
140
+ ["line", {
141
+ x1: "15",
142
+ x2: "9",
143
+ y1: "4",
144
+ y2: "20",
145
+ key: "uljnxc"
146
+ }]
147
+ ]), P = A("list-ordered", [
148
+ ["path", {
149
+ d: "M11 5h10",
150
+ key: "1cz7ny"
151
+ }],
152
+ ["path", {
153
+ d: "M11 12h10",
154
+ key: "1438ji"
155
+ }],
156
+ ["path", {
157
+ d: "M11 19h10",
158
+ key: "11t30w"
159
+ }],
160
+ ["path", {
161
+ d: "M4 4h1v5",
162
+ key: "10yrso"
163
+ }],
164
+ ["path", {
165
+ d: "M4 9h2",
166
+ key: "r1h2o0"
167
+ }],
168
+ ["path", {
169
+ d: "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02",
170
+ key: "xtkcd5"
171
+ }]
172
+ ]), F = A("list", [
173
+ ["path", {
174
+ d: "M3 5h.01",
175
+ key: "18ugdj"
176
+ }],
177
+ ["path", {
178
+ d: "M3 12h.01",
179
+ key: "nlz23k"
180
+ }],
181
+ ["path", {
182
+ d: "M3 19h.01",
183
+ key: "noohij"
184
+ }],
185
+ ["path", {
186
+ d: "M8 5h13",
187
+ key: "1pao27"
188
+ }],
189
+ ["path", {
190
+ d: "M8 12h13",
191
+ key: "1za7za"
192
+ }],
193
+ ["path", {
194
+ d: "M8 19h13",
195
+ key: "m83p4d"
196
+ }]
197
+ ]), I = A("redo-2", [["path", {
198
+ d: "m15 14 5-5-5-5",
199
+ key: "12vg1m"
200
+ }], ["path", {
201
+ d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13",
202
+ key: "6uklza"
203
+ }]]), ee = A("remove-formatting", [
204
+ ["path", {
205
+ d: "M4 7V4h16v3",
206
+ key: "9msm58"
207
+ }],
208
+ ["path", {
209
+ d: "M5 20h6",
210
+ key: "1h6pxn"
211
+ }],
212
+ ["path", {
213
+ d: "M13 4 8 20",
214
+ key: "kqq6aj"
215
+ }],
216
+ ["path", {
217
+ d: "m15 15 5 5",
218
+ key: "me55sn"
219
+ }],
220
+ ["path", {
221
+ d: "m20 15-5 5",
222
+ key: "11p7ol"
223
+ }]
224
+ ]), L = A("strikethrough", [
225
+ ["path", {
226
+ d: "M16 4H9a3 3 0 0 0-2.83 4",
227
+ key: "43sutm"
228
+ }],
229
+ ["path", {
230
+ d: "M14 12a4 4 0 0 1 0 8H6",
231
+ key: "nlfj13"
232
+ }],
233
+ ["line", {
234
+ x1: "4",
235
+ x2: "20",
236
+ y1: "12",
237
+ y2: "12",
238
+ key: "1e0a9i"
239
+ }]
240
+ ]), R = A("text-align-end", [
241
+ ["path", {
242
+ d: "M21 5H3",
243
+ key: "1fi0y6"
244
+ }],
245
+ ["path", {
246
+ d: "M21 12H9",
247
+ key: "dn1m92"
248
+ }],
249
+ ["path", {
250
+ d: "M21 19H7",
251
+ key: "4cu937"
252
+ }]
253
+ ]), z = A("text-align-center", [
254
+ ["path", {
255
+ d: "M21 5H3",
256
+ key: "1fi0y6"
257
+ }],
258
+ ["path", {
259
+ d: "M17 12H7",
260
+ key: "16if0g"
261
+ }],
262
+ ["path", {
263
+ d: "M19 19H5",
264
+ key: "vjpgq2"
265
+ }]
266
+ ]), B = A("text-align-justify", [
267
+ ["path", {
268
+ d: "M3 5h18",
269
+ key: "1u36vt"
270
+ }],
271
+ ["path", {
272
+ d: "M3 12h18",
273
+ key: "1i2n21"
274
+ }],
275
+ ["path", {
276
+ d: "M3 19h18",
277
+ key: "awlh7x"
278
+ }]
279
+ ]), V = A("text-align-start", [
280
+ ["path", {
281
+ d: "M21 5H3",
282
+ key: "1fi0y6"
283
+ }],
284
+ ["path", {
285
+ d: "M15 12H3",
286
+ key: "6jk70r"
287
+ }],
288
+ ["path", {
289
+ d: "M17 19H3",
290
+ key: "z6ezky"
291
+ }]
292
+ ]), H = A("underline", [["path", {
293
+ d: "M6 4v6a6 6 0 0 0 12 0V4",
294
+ key: "9kb039"
295
+ }], ["line", {
296
+ x1: "4",
297
+ x2: "20",
298
+ y1: "20",
299
+ y2: "20",
300
+ key: "nun2al"
301
+ }]]), U = A("undo-2", [["path", {
302
+ d: "M9 14 4 9l5-5",
303
+ key: "102s5s"
304
+ }], ["path", {
305
+ d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11",
306
+ key: "f3b9sd"
307
+ }]]), W = /* @__PURE__ */ new Set();
308
+ function G(e) {
309
+ if (W.has(e)) return;
310
+ let t = `google-font-${e.replace(/\s+/g, "-").toLowerCase()}`;
311
+ if (document.getElementById(t)) {
312
+ W.add(e);
313
+ return;
314
+ }
315
+ let n = document.createElement("link");
316
+ n.id = t, n.rel = "stylesheet", n.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(e)}:wght@300;400;500;600;700&display=swap`, document.head.appendChild(n), W.add(e);
317
+ }
318
+ var K = [
319
+ {
320
+ label: "Por defecto",
321
+ value: ""
322
+ },
323
+ {
324
+ label: "Arial",
325
+ value: "Arial, sans-serif"
326
+ },
327
+ {
328
+ label: "Verdana",
329
+ value: "Verdana, sans-serif"
330
+ },
331
+ {
332
+ label: "Georgia",
333
+ value: "Georgia, serif"
334
+ },
335
+ {
336
+ label: "Times New Roman",
337
+ value: "'Times New Roman', serif"
338
+ },
339
+ {
340
+ label: "Courier New",
341
+ value: "'Courier New', monospace"
342
+ },
343
+ ...[
344
+ "Inter",
345
+ "Roboto",
346
+ "Open Sans",
347
+ "Lato",
348
+ "Montserrat",
349
+ "Poppins",
350
+ "Nunito",
351
+ "Merriweather",
352
+ "Playfair Display",
353
+ "Source Sans 3",
354
+ "PT Serif",
355
+ "Libre Baskerville",
356
+ "IBM Plex Sans",
357
+ "IBM Plex Serif",
358
+ "Noto Sans"
359
+ ].map((e) => ({
360
+ label: e,
361
+ value: `'${e}', sans-serif`
362
+ }))
363
+ ], q = [
364
+ {
365
+ label: "8",
366
+ value: "8px"
367
+ },
368
+ {
369
+ label: "9",
370
+ value: "9px"
371
+ },
372
+ {
373
+ label: "10",
374
+ value: "10px"
375
+ },
376
+ {
377
+ label: "11",
378
+ value: "11px"
379
+ },
380
+ {
381
+ label: "12",
382
+ value: "12px"
383
+ },
384
+ {
385
+ label: "13",
386
+ value: "13px"
387
+ },
388
+ {
389
+ label: "14",
390
+ value: "14px"
391
+ },
392
+ {
393
+ label: "15",
394
+ value: "15px"
395
+ },
396
+ {
397
+ label: "16",
398
+ value: "16px"
399
+ },
400
+ {
401
+ label: "18",
402
+ value: "18px"
403
+ },
404
+ {
405
+ label: "20",
406
+ value: "20px"
407
+ },
408
+ {
409
+ label: "24",
410
+ value: "24px"
411
+ },
412
+ {
413
+ label: "28",
414
+ value: "28px"
415
+ },
416
+ {
417
+ label: "32",
418
+ value: "32px"
419
+ },
420
+ {
421
+ label: "36",
422
+ value: "36px"
423
+ },
424
+ {
425
+ label: "48",
426
+ value: "48px"
427
+ },
428
+ {
429
+ label: "64",
430
+ value: "64px"
431
+ }
432
+ ], J = {
433
+ container: "_container_1u8so_1",
434
+ dark: "_dark_1u8so_7",
435
+ light: "_light_1u8so_26",
436
+ trigger: "_trigger_1u8so_44",
437
+ triggerOpen: "_triggerOpen_1u8so_70",
438
+ triggerLabel: "_triggerLabel_1u8so_74",
439
+ chevron: "_chevron_1u8so_80",
440
+ chevronOpen: "_chevronOpen_1u8so_88",
441
+ dropdown: "_dropdown_1u8so_93",
442
+ slideIn: "_slideIn_1u8so_1",
443
+ dropdownClosing: "_dropdownClosing_1u8so_111",
444
+ slideOut: "_slideOut_1u8so_1",
445
+ searchWrapper: "_searchWrapper_1u8so_138",
446
+ searchInput: "_searchInput_1u8so_145",
447
+ optionsList: "_optionsList_1u8so_169",
448
+ option: "_option_1u8so_169",
449
+ optionActive: "_optionActive_1u8so_195",
450
+ noResults: "_noResults_1u8so_205"
451
+ };
452
+ //#endregion
453
+ //#region src/components/Select.tsx
454
+ function Y({ options: e, value: t, onChange: n, placeholder: r = "Seleccionar", searchable: i = !1, width: a, title: o, theme: s = "dark", "aria-label": c }) {
455
+ let [l, u] = g(!1), [d, p] = g(!1), [y, b] = g(""), x = h(null), S = h(null), C = e.find((e) => e.value === t)?.label || r, w = i && y ? e.filter((e) => e.label.toLowerCase().includes(y.toLowerCase())) : e, T = f(() => {
456
+ p(!0), setTimeout(() => {
457
+ u(!1), p(!1), b("");
458
+ }, 140);
459
+ }, []), E = () => {
460
+ l ? T() : u(!0);
461
+ }, D = (e) => {
462
+ n(e), T();
463
+ };
464
+ m(() => {
465
+ if (!l) return;
466
+ let e = (e) => {
467
+ x.current && !x.current.contains(e.target) && T();
468
+ };
469
+ return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
470
+ }, [l, T]), m(() => {
471
+ l && i && S.current && S.current.focus();
472
+ }, [l, i]), m(() => {
473
+ if (!l) return;
474
+ let e = (e) => {
475
+ e.key === "Escape" && T();
476
+ };
477
+ return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
478
+ }, [l, T]);
479
+ let O = [J.container, s === "light" ? J.light : J.dark].filter(Boolean).join(" "), k = [J.trigger, l && J.triggerOpen].filter(Boolean).join(" "), A = [J.dropdown, d && J.dropdownClosing].filter(Boolean).join(" ");
480
+ return /* @__PURE__ */ v("div", {
481
+ className: O,
482
+ ref: x,
483
+ style: a ? { width: a } : void 0,
484
+ children: [/* @__PURE__ */ v("button", {
485
+ type: "button",
486
+ className: k,
487
+ onClick: E,
488
+ title: o,
489
+ "aria-label": c,
490
+ "aria-expanded": l,
491
+ "aria-haspopup": "listbox",
492
+ style: a ? { width: "100%" } : void 0,
493
+ children: [/* @__PURE__ */ _("span", {
494
+ className: J.triggerLabel,
495
+ children: C
496
+ }), /* @__PURE__ */ _("svg", {
497
+ className: `${J.chevron} ${l ? J.chevronOpen : ""}`,
498
+ viewBox: "0 0 12 12",
499
+ fill: "none",
500
+ stroke: "currentColor",
501
+ strokeWidth: "1.5",
502
+ strokeLinecap: "round",
503
+ strokeLinejoin: "round",
504
+ children: /* @__PURE__ */ _("path", { d: "M3 4.5L6 7.5L9 4.5" })
505
+ })]
506
+ }), l && /* @__PURE__ */ v("div", {
507
+ className: A,
508
+ children: [i && /* @__PURE__ */ _("div", {
509
+ className: J.searchWrapper,
510
+ children: /* @__PURE__ */ _("input", {
511
+ ref: S,
512
+ type: "text",
513
+ className: J.searchInput,
514
+ placeholder: "Buscar...",
515
+ value: y,
516
+ onChange: (e) => b(e.target.value),
517
+ onMouseDown: (e) => e.stopPropagation()
518
+ })
519
+ }), /* @__PURE__ */ _("div", {
520
+ className: J.optionsList,
521
+ children: w.length === 0 ? /* @__PURE__ */ _("div", {
522
+ className: J.noResults,
523
+ children: "Sin resultados"
524
+ }) : w.map((e) => {
525
+ let n = e.value === t;
526
+ return /* @__PURE__ */ _("button", {
527
+ type: "button",
528
+ className: [J.option, n && J.optionActive].filter(Boolean).join(" "),
529
+ "aria-pressed": n,
530
+ onClick: () => D(e.value),
531
+ children: e.label
532
+ }, e.value);
533
+ })
534
+ })]
535
+ })]
536
+ });
537
+ }
538
+ var X = {
539
+ toolbar: "_toolbar_18r58_1",
540
+ dark: "_dark_18r58_10",
541
+ light: "_light_18r58_26",
542
+ group: "_group_18r58_41",
543
+ separator: "_separator_18r58_47",
544
+ button: "_button_18r58_55",
545
+ active: "_active_18r58_83",
546
+ disabled: "_disabled_18r58_92"
547
+ };
548
+ //#endregion
549
+ //#region src/components/Toolbar.tsx
550
+ function Z({ editor: e, theme: t = "dark" }) {
551
+ if (!e) return null;
552
+ let n = (e, t = !1) => [
553
+ X.button,
554
+ e && X.active,
555
+ t && X.disabled
556
+ ].filter(Boolean).join(" "), r = (t) => {
557
+ if (!t) {
558
+ e.chain().focus().unsetFontFamily().run();
559
+ return;
560
+ }
561
+ let n = t.split(",")[0].replaceAll("'", "").trim();
562
+ [
563
+ "Arial",
564
+ "Verdana",
565
+ "Georgia",
566
+ "Times New Roman",
567
+ "Courier New"
568
+ ].includes(n) || G(n), e.chain().focus().setFontFamily(t).run();
569
+ }, i = (t) => {
570
+ if (!t) {
571
+ e.chain().focus().unsetFontSize().run();
572
+ return;
573
+ }
574
+ e.chain().focus().setFontSize(t).run();
575
+ }, a = e.getAttributes("textStyle").fontFamily ?? "", o = e.getAttributes("textStyle").fontSize ?? "", s = 1.8;
576
+ return /* @__PURE__ */ v("div", {
577
+ className: [X.toolbar, t === "light" ? X.light : X.dark].filter(Boolean).join(" "),
578
+ role: "toolbar",
579
+ "aria-label": "Editor de texto enriquecido",
580
+ children: [
581
+ /* @__PURE__ */ v("div", {
582
+ className: X.group,
583
+ children: [/* @__PURE__ */ _("button", {
584
+ type: "button",
585
+ className: n(!1, !e.can().undo()),
586
+ onClick: () => e.chain().focus().undo().run(),
587
+ title: "Deshacer",
588
+ "aria-label": "Deshacer",
589
+ children: /* @__PURE__ */ _(U, {
590
+ size: 16,
591
+ strokeWidth: s
592
+ })
593
+ }), /* @__PURE__ */ _("button", {
594
+ type: "button",
595
+ className: n(!1, !e.can().redo()),
596
+ onClick: () => e.chain().focus().redo().run(),
597
+ title: "Rehacer",
598
+ "aria-label": "Rehacer",
599
+ children: /* @__PURE__ */ _(I, {
600
+ size: 16,
601
+ strokeWidth: s
602
+ })
603
+ })]
604
+ }),
605
+ /* @__PURE__ */ _("div", { className: X.separator }),
606
+ /* @__PURE__ */ _("div", {
607
+ className: X.group,
608
+ children: /* @__PURE__ */ _(Y, {
609
+ options: K,
610
+ value: a,
611
+ onChange: r,
612
+ placeholder: "Fuente",
613
+ searchable: !0,
614
+ width: 140,
615
+ theme: t,
616
+ title: "Tipo de fuente",
617
+ "aria-label": "Tipo de fuente"
618
+ })
619
+ }),
620
+ /* @__PURE__ */ _("div", {
621
+ className: X.group,
622
+ children: /* @__PURE__ */ _(Y, {
623
+ options: q,
624
+ value: o,
625
+ onChange: i,
626
+ placeholder: "—",
627
+ width: 68,
628
+ theme: t,
629
+ title: "Tamaño",
630
+ "aria-label": "Tamaño de fuente"
631
+ })
632
+ }),
633
+ /* @__PURE__ */ _("div", { className: X.separator }),
634
+ /* @__PURE__ */ v("div", {
635
+ className: X.group,
636
+ children: [
637
+ /* @__PURE__ */ _("button", {
638
+ type: "button",
639
+ className: n(e.isActive("bold")),
640
+ onClick: () => e.chain().focus().toggleBold().run(),
641
+ title: "Negrita",
642
+ "aria-label": "Negrita",
643
+ children: /* @__PURE__ */ _(j, {
644
+ size: 16,
645
+ strokeWidth: s
646
+ })
647
+ }),
648
+ /* @__PURE__ */ _("button", {
649
+ type: "button",
650
+ className: n(e.isActive("italic")),
651
+ onClick: () => e.chain().focus().toggleItalic().run(),
652
+ title: "Cursiva",
653
+ "aria-label": "Cursiva",
654
+ children: /* @__PURE__ */ _(N, {
655
+ size: 16,
656
+ strokeWidth: s
657
+ })
658
+ }),
659
+ /* @__PURE__ */ _("button", {
660
+ type: "button",
661
+ className: n(e.isActive("underline")),
662
+ onClick: () => e.chain().focus().toggleUnderline().run(),
663
+ title: "Subrayado",
664
+ "aria-label": "Subrayado",
665
+ children: /* @__PURE__ */ _(H, {
666
+ size: 16,
667
+ strokeWidth: s
668
+ })
669
+ }),
670
+ /* @__PURE__ */ _("button", {
671
+ type: "button",
672
+ className: n(e.isActive("strike")),
673
+ onClick: () => e.chain().focus().toggleStrike().run(),
674
+ title: "Tachado",
675
+ "aria-label": "Tachado",
676
+ children: /* @__PURE__ */ _(L, {
677
+ size: 16,
678
+ strokeWidth: s
679
+ })
680
+ })
681
+ ]
682
+ }),
683
+ /* @__PURE__ */ _("div", { className: X.separator }),
684
+ /* @__PURE__ */ v("div", {
685
+ className: X.group,
686
+ children: [
687
+ /* @__PURE__ */ _("button", {
688
+ type: "button",
689
+ className: n(e.isActive({ textAlign: "left" })),
690
+ onClick: () => e.chain().focus().setTextAlign("left").run(),
691
+ title: "Alinear izquierda",
692
+ "aria-label": "Alinear izquierda",
693
+ children: /* @__PURE__ */ _(V, {
694
+ size: 16,
695
+ strokeWidth: s
696
+ })
697
+ }),
698
+ /* @__PURE__ */ _("button", {
699
+ type: "button",
700
+ className: n(e.isActive({ textAlign: "center" })),
701
+ onClick: () => e.chain().focus().setTextAlign("center").run(),
702
+ title: "Centrar",
703
+ "aria-label": "Centrar",
704
+ children: /* @__PURE__ */ _(z, {
705
+ size: 16,
706
+ strokeWidth: s
707
+ })
708
+ }),
709
+ /* @__PURE__ */ _("button", {
710
+ type: "button",
711
+ className: n(e.isActive({ textAlign: "right" })),
712
+ onClick: () => e.chain().focus().setTextAlign("right").run(),
713
+ title: "Alinear derecha",
714
+ "aria-label": "Alinear derecha",
715
+ children: /* @__PURE__ */ _(R, {
716
+ size: 16,
717
+ strokeWidth: s
718
+ })
719
+ }),
720
+ /* @__PURE__ */ _("button", {
721
+ type: "button",
722
+ className: n(e.isActive({ textAlign: "justify" })),
723
+ onClick: () => e.chain().focus().setTextAlign("justify").run(),
724
+ title: "Justificar",
725
+ "aria-label": "Justificar",
726
+ children: /* @__PURE__ */ _(B, {
727
+ size: 16,
728
+ strokeWidth: s
729
+ })
730
+ })
731
+ ]
732
+ }),
733
+ /* @__PURE__ */ _("div", { className: X.separator }),
734
+ /* @__PURE__ */ v("div", {
735
+ className: X.group,
736
+ children: [/* @__PURE__ */ _("button", {
737
+ type: "button",
738
+ className: n(e.isActive("bulletList")),
739
+ onClick: () => e.chain().focus().toggleBulletList().run(),
740
+ title: "Lista con viñetas",
741
+ "aria-label": "Lista con viñetas",
742
+ children: /* @__PURE__ */ _(F, {
743
+ size: 16,
744
+ strokeWidth: s
745
+ })
746
+ }), /* @__PURE__ */ _("button", {
747
+ type: "button",
748
+ className: n(e.isActive("orderedList")),
749
+ onClick: () => e.chain().focus().toggleOrderedList().run(),
750
+ title: "Lista numerada",
751
+ "aria-label": "Lista numerada",
752
+ children: /* @__PURE__ */ _(P, {
753
+ size: 16,
754
+ strokeWidth: s
755
+ })
756
+ })]
757
+ }),
758
+ /* @__PURE__ */ _("div", { className: X.separator }),
759
+ /* @__PURE__ */ _("div", {
760
+ className: X.group,
761
+ children: /* @__PURE__ */ _("button", {
762
+ type: "button",
763
+ className: n(!1),
764
+ onClick: () => e.chain().focus().unsetAllMarks().clearNodes().run(),
765
+ title: "Limpiar formato",
766
+ "aria-label": "Limpiar formato",
767
+ children: /* @__PURE__ */ _(ee, {
768
+ size: 16,
769
+ strokeWidth: s
770
+ })
771
+ })
772
+ })
773
+ ]
774
+ });
775
+ }
776
+ var Q = {
777
+ container: "_container_tsfuj_1",
778
+ dark: "_dark_tsfuj_14",
779
+ light: "_light_tsfuj_37",
780
+ editorWrapper: "_editorWrapper_tsfuj_59"
781
+ };
782
+ //#endregion
783
+ //#region src/components/RichEditor.tsx
784
+ function te({ value: t, onChange: n, placeholder: r, editable: i = !0, theme: a = "dark", className: o }) {
785
+ let s = b({
786
+ value: t,
787
+ onChange: n,
788
+ placeholder: r,
789
+ editable: i
790
+ });
791
+ return /* @__PURE__ */ v("div", {
792
+ className: [
793
+ Q.container,
794
+ a === "light" ? Q.light : Q.dark,
795
+ o
796
+ ].filter(Boolean).join(" "),
797
+ children: [/* @__PURE__ */ _(Z, {
798
+ editor: s,
799
+ theme: a
800
+ }), /* @__PURE__ */ _("div", {
801
+ className: Q.editorWrapper,
802
+ children: /* @__PURE__ */ _(e, { editor: s })
803
+ })]
804
+ });
805
+ }
806
+ var $ = {
807
+ container: "_container_z8jyk_1",
808
+ dark: "_dark_z8jyk_13",
809
+ light: "_light_z8jyk_34",
810
+ body: "_body_z8jyk_54",
811
+ empty: "_empty_z8jyk_157",
812
+ emptyIcon: "_emptyIcon_z8jyk_167",
813
+ emptyText: "_emptyText_z8jyk_171"
814
+ };
815
+ //#endregion
816
+ //#region src/components/Preview.tsx
817
+ function ne({ value: e, theme: t = "dark", className: n }) {
818
+ return /* @__PURE__ */ _("div", {
819
+ className: [
820
+ $.container,
821
+ t === "light" ? $.light : $.dark,
822
+ n
823
+ ].filter(Boolean).join(" "),
824
+ children: !e || e === "<p></p>" || e.trim() === "" ? /* @__PURE__ */ v("div", {
825
+ className: $.empty,
826
+ children: [/* @__PURE__ */ _(M, {
827
+ size: 24,
828
+ strokeWidth: 1.2,
829
+ className: $.emptyIcon
830
+ }), /* @__PURE__ */ _("span", {
831
+ className: $.emptyText,
832
+ children: "El contenido aparecerá aquí"
833
+ })]
834
+ }) : /* @__PURE__ */ _("div", {
835
+ className: $.body,
836
+ dangerouslySetInnerHTML: { __html: e }
837
+ })
838
+ });
839
+ }
840
+ //#endregion
841
+ export { ne as Preview, te as RichEditor };
package/dist/src/Demo.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function Demo(): import("react").JSX.Element;
package/dist/src/components/Preview.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { EditorTheme } from '../types';
2
+ export interface PreviewProps {
3
+ /** Contenido HTML generado por el editor */
4
+ value: string;
5
+ /** Tema visual: 'dark' o 'light' */
6
+ theme?: EditorTheme;
7
+ /** Clase CSS adicional para el contenedor raíz */
8
+ className?: string;
9
+ }
10
+ /**
11
+ * Componente de previsualización del contenido HTML generado por el editor.
12
+ * Renderiza el HTML con estilos adaptativos según el tema.
13
+ */
14
+ export declare function Preview({ value, theme, className }: PreviewProps): import("react").JSX.Element;
package/dist/src/components/RichEditor.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { RichEditorProps } from '../types';
2
+ /**
3
+ * Componente principal del editor de texto enriquecido.
4
+ * Se comporta como un input controlado: recibe `value` y notifica cambios vía `onChange`.
5
+ */
6
+ export declare function RichEditor({ value, onChange, placeholder, editable, theme, className, }: RichEditorProps): import("react").JSX.Element;
package/dist/src/components/Select.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { EditorTheme } from '../types';
2
+ export interface SelectOption {
3
+ label: string;
4
+ value: string;
5
+ }
6
+ interface SelectProps {
7
+ options: readonly SelectOption[];
8
+ value: string;
9
+ onChange: (value: string) => void;
10
+ placeholder?: string;
11
+ searchable?: boolean;
12
+ width?: number;
13
+ title?: string;
14
+ theme?: EditorTheme;
15
+ 'aria-label'?: string;
16
+ }
17
+ export declare function Select({ options, value, onChange, placeholder, searchable, width, title, theme, 'aria-label': ariaLabel, }: SelectProps): import("react").JSX.Element;
18
+ export {};
package/dist/src/components/Toolbar.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { Editor } from '@tiptap/react';
2
+ import { EditorTheme } from '../types';
3
+ interface ToolbarProps {
4
+ editor: Editor | null;
5
+ theme?: EditorTheme;
6
+ }
7
+ export declare function Toolbar({ editor, theme }: ToolbarProps): import("react").JSX.Element | null;
8
+ export {};
package/dist/src/extensions/font-size.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { Extension } from '@tiptap/core';
2
+ export interface FontSizeOptions {
3
+ types: string[];
4
+ }
5
+ declare module '@tiptap/core' {
6
+ interface Commands<ReturnType> {
7
+ fontSize: {
8
+ setFontSize: (size: string) => ReturnType;
9
+ unsetFontSize: () => ReturnType;
10
+ };
11
+ }
12
+ }
13
+ /**
14
+ * Extensión custom de FontSize para Tiptap v2.
15
+ * Aplica font-size como atributo inline sobre el mark TextStyle.
16
+ */
17
+ export declare const FontSize: Extension<FontSizeOptions, any>;
package/dist/src/extensions/google-fonts.d.ts ADDED
@@ -0,0 +1,66 @@
1
+ /**
2
+ * Utilidad para cargar fuentes de Google Fonts dinámicamente.
3
+ * Inyecta un <link> en el <head> solo si la fuente no fue cargada previamente.
4
+ */
5
+ export declare function loadGoogleFont(fontFamily: string): void;
6
+ /**
7
+ * Lista curada de fuentes populares de Google Fonts para editores de documentos.
8
+ * Se pueden cargar bajo demanda con loadGoogleFont().
9
+ */
10
+ export declare const GOOGLE_FONTS: readonly ["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"];
11
+ export declare const FONT_FAMILIES: readonly {
12
+ label: string;
13
+ value: string;
14
+ }[];
15
+ export declare const FONT_SIZES: readonly [{
16
+ readonly label: "8";
17
+ readonly value: "8px";
18
+ }, {
19
+ readonly label: "9";
20
+ readonly value: "9px";
21
+ }, {
22
+ readonly label: "10";
23
+ readonly value: "10px";
24
+ }, {
25
+ readonly label: "11";
26
+ readonly value: "11px";
27
+ }, {
28
+ readonly label: "12";
29
+ readonly value: "12px";
30
+ }, {
31
+ readonly label: "13";
32
+ readonly value: "13px";
33
+ }, {
34
+ readonly label: "14";
35
+ readonly value: "14px";
36
+ }, {
37
+ readonly label: "15";
38
+ readonly value: "15px";
39
+ }, {
40
+ readonly label: "16";
41
+ readonly value: "16px";
42
+ }, {
43
+ readonly label: "18";
44
+ readonly value: "18px";
45
+ }, {
46
+ readonly label: "20";
47
+ readonly value: "20px";
48
+ }, {
49
+ readonly label: "24";
50
+ readonly value: "24px";
51
+ }, {
52
+ readonly label: "28";
53
+ readonly value: "28px";
54
+ }, {
55
+ readonly label: "32";
56
+ readonly value: "32px";
57
+ }, {
58
+ readonly label: "36";
59
+ readonly value: "36px";
60
+ }, {
61
+ readonly label: "48";
62
+ readonly value: "48px";
63
+ }, {
64
+ readonly label: "64";
65
+ readonly value: "64px";
66
+ }];
package/dist/src/hooks/useRichEditor.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ interface UseRichEditorOptions {
2
+ value: string;
3
+ onChange: (html: string) => void;
4
+ placeholder?: string;
5
+ editable?: boolean;
6
+ }
7
+ /**
8
+ * Hook que encapsula la creación y configuración del editor Tiptap.
9
+ * Maneja la sincronización bidireccional entre el estado externo (value)
10
+ * y el estado interno del editor sin crear loops infinitos.
11
+ */
12
+ export declare function useRichEditor({ value, onChange, placeholder, editable, }: UseRichEditorOptions): import('@tiptap/core').Editor | null;
13
+ export {};
package/dist/src/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { RichEditor } from './components/RichEditor';
2
+ export { Preview } from './components/Preview';
3
+ export type { RichEditorProps, EditorTheme } from './types';
4
+ export type { PreviewProps } from './components/Preview';
package/dist/src/types/index.d.ts ADDED
@@ -0,0 +1,38 @@
1
+ export type EditorTheme = 'dark' | 'light';
2
+ /**
3
+ * Props públicas del componente RichEditor.
4
+ * Diseñado como un componente controlado (similar a un <input>).
5
+ */
6
+ export interface RichEditorProps {
7
+ /**
8
+ * Contenido HTML actual del editor.
9
+ * Funciona como el "value" de un input controlado:
10
+ * el padre mantiene el estado y lo pasa al editor.
11
+ */
12
+ value: string;
13
+ /**
14
+ * Callback que se invoca cada vez que el contenido del editor cambia.
15
+ * Recibe el HTML actualizado como argumento.
16
+ */
17
+ onChange: (html: string) => void;
18
+ /**
19
+ * Texto de placeholder que se muestra cuando el editor está vacío.
20
+ * @default undefined
21
+ */
22
+ placeholder?: string;
23
+ /**
24
+ * Controla si el editor es editable o de solo lectura.
25
+ * @default true
26
+ */
27
+ editable?: boolean;
28
+ /**
29
+ * Tema visual del editor: 'dark' o 'light'.
30
+ * @default 'dark'
31
+ */
32
+ theme?: EditorTheme;
33
+ /**
34
+ * Clase CSS adicional que se aplica al contenedor raíz del editor.
35
+ * Útil para personalizar estilos desde la app consumidora.
36
+ */
37
+ className?: string;
38
+ }
package/package.json ADDED
@@ -0,0 +1,70 @@
1
+ {
2
+ "name": "@tauro/editor",
3
+ "version": "0.0.1",
4
+ "type": "module",
5
+ "main": "./dist/rich-editor.cjs.js",
6
+ "module": "./dist/rich-editor.es.js",
7
+ "types": "./dist/src/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/rich-editor.es.js",
11
+ "require": "./dist/rich-editor.cjs.js",
12
+ "types": "./dist/src/index.d.ts"
13
+ },
14
+ "./style.css": "./dist/rich-editor.css"
15
+ },
16
+ "files": [
17
+ "dist"
18
+ ],
19
+ "sideEffects": [
20
+ "**/*.css"
21
+ ],
22
+ "scripts": {
23
+ "dev": "vite",
24
+ "build": "tsc -b && vite build",
25
+ "lint": "eslint .",
26
+ "preview": "vite preview"
27
+ },
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
+ "react": ">=18",
39
+ "react-dom": ">=18"
40
+ },
41
+ "devDependencies": {
42
+ "@eslint/js": "^10.0.1",
43
+ "@tiptap/core": "2.27.2",
44
+ "@tiptap/extension-font-family": "^2.27.2",
45
+ "@tiptap/extension-placeholder": "2.27.2",
46
+ "@tiptap/extension-text-align": "2.27.2",
47
+ "@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",
52
+ "@types/node": "^24.13.2",
53
+ "@types/react": "^19.2.14",
54
+ "@types/react-dom": "^19.2.3",
55
+ "@vitejs/plugin-react": "^6.0.1",
56
+ "eslint": "^10.3.0",
57
+ "eslint-plugin-react-hooks": "^7.1.1",
58
+ "eslint-plugin-react-refresh": "^0.5.2",
59
+ "globals": "^17.6.0",
60
+ "react": "^19.2.6",
61
+ "react-dom": "^19.2.6",
62
+ "typescript": "~6.0.2",
63
+ "typescript-eslint": "^8.59.2",
64
+ "vite": "^8.0.12",
65
+ "vite-plugin-dts": "^5.0.2"
66
+ },
67
+ "dependencies": {
68
+ "lucide-react": "^1.18.0"
69
+ }
70
+ }