swerasty_editor 0.2.4 → 0.2.5

package/dist/swerasty-editor.js

@@ -11570,7 +11570,7 @@ const Zc = [
           displayMode: !1,
           output: "mathml"
         });
-        x(k), R(!0);
+        console.log("previewHTML : ", I), x(k), R(!0);
       } catch {
         x('<span class="text-red-500 text-xs">Invalid formula syntax</span>'), R(!1);
       }
@@ -11945,7 +11945,7 @@ const Zc = [
         onClose: () => a(!1),
         onInsert: (E) => {
           var _, v;
-          (_ = s.current) == null || _.focus(), document.execCommand("insertHTML", !1, `<span contenteditable="false" class="mlx-formula-inline">${E}</span>&nbsp;`), m(((v = s.current) == null ? void 0 : v.innerHTML) || "");
+          console.log("MathModel : ", E), (_ = s.current) == null || _.focus(), document.execCommand("insertHTML", !1, `<span contenteditable="false" class="mlx-formula-inline">${E}</span>&nbsp;`), m(((v = s.current) == null ? void 0 : v.innerHTML) || "");
         },
         apiKey: n
       }

package/dist/swerasty-editor.umd.cjs

@@ -339,4 +339,4 @@ Example: For an image showing 'x squared', your literal output must be: x^2`},a=
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const Mc=W("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]),Pc=({isOpen:t,onClose:e,onInsert:n,apiKey:o=""})=>{const s=w.useRef(null),l=w.useRef(null),[a,u]=w.useState(!1),[c,d]=w.useState(null),[f,p]=w.useState(""),[h,g]=w.useState("keyboard"),[y,C]=w.useState("math"),[T,E]=w.useState(!1),[_,v]=w.useState(!1),[S,x]=w.useState(""),[P,M]=w.useState(!1);w.useEffect(()=>{if(h==="keyboard"&&f.trim()&&window.katex)try{const D=window.katex.renderToString(f,{throwOnError:!0,displayMode:!1,output:"mathml"});x(D),M(!0)}catch{x('<span class="text-red-500 text-xs">Invalid formula syntax</span>'),M(!1)}else x(""),M(!1)},[f,h]);const b=D=>{C(D),D==="chem"&&g("keyboard")},A=w.useCallback(()=>{var D;(D=s.current)==null||D.clear(),p(""),d(null),u(!1)},[]),R=w.useCallback(D=>{const U=l.current;if(!U){p(q=>q+D);return}const V=U.selectionStart,N=U.selectionEnd,G=f.substring(0,V)+D+f.substring(N);p(G),setTimeout(()=>{U.focus(),U.selectionStart=U.selectionEnd=V+D.length},0)},[f]),F=w.useCallback(async()=>{var U,V;if(!o){d("Please configure your Gemini API key in the main editor.");return}const D=(U=s.current)==null?void 0:U.getTrimmedImageData();if(!D){d("Draw a formula on the pad first.");return}u(!0),d(null);try{const N=D.split(",")[1],G=await nc(N,o);R(G),g("keyboard"),(V=s.current)==null||V.clear()}catch(N){d(N.message||"AI recognition failed.")}finally{u(!1)}},[o,R]);return t?m.jsx("div",{className:"fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 backdrop-blur-md p-4 animate-in fade-in duration-200",children:m.jsxs("div",{className:"bg-white rounded-2xl shadow-2xl flex flex-col w-full max-w-4xl h-[600px] border border-slate-200 overflow-hidden",onClick:D=>D.stopPropagation(),children:[m.jsxs("header",{className:"px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50",children:[m.jsxs("div",{className:"flex items-center gap-6",children:[m.jsx("h2",{className:"text-lg font-bold text-slate-900",children:"AI Formula Pad"}),m.jsxs("div",{className:"flex bg-slate-200 p-1 rounded-lg",children:[m.jsx("button",{onClick:()=>b("math"),className:`px-4 py-1 text-xs font-semibold rounded-md transition-all ${y==="math"?"bg-white shadow text-blue-600":"text-slate-500"}`,children:"Math"}),m.jsx("button",{onClick:()=>b("chem"),className:`px-4 py-1 text-xs font-semibold rounded-md transition-all ${y==="chem"?"bg-white shadow text-blue-600":"text-slate-500"}`,children:"Chemistry"})]})]}),m.jsx("button",{title:"Close",onClick:e,className:"p-2 hover:bg-slate-200 rounded-full text-slate-400 hover:text-slate-600 transition-colors",children:m.jsx(Mc,{size:20})})]}),m.jsxs("div",{className:"flex-1 flex overflow-hidden",children:[m.jsxs("div",{className:"w-16 border-r border-slate-100 flex flex-col items-center py-6 gap-4 bg-slate-50/30",children:[m.jsx("button",{onClick:()=>g("keyboard"),className:`p-3 rounded-xl transition-all ${h==="keyboard"?"bg-blue-600 text-white shadow-lg":"text-slate-400 hover:text-slate-600"}`,children:m.jsx(_c,{size:24})}),y==="math"&&m.jsx("button",{onClick:()=>g("handwriting"),className:`p-3 rounded-xl transition-all ${h==="handwriting"?"bg-blue-600 text-white shadow-lg":"text-slate-400 hover:text-slate-600"}`,children:m.jsx(Ic,{size:24})})]}),m.jsxs("div",{className:"flex-1 flex flex-col overflow-hidden",children:[m.jsx("div",{className:"shrink-0",children:h==="keyboard"&&(y==="math"?m.jsx(lc,{onInsert:R}):m.jsx(cc,{onInsert:R}))}),m.jsx("div",{className:"flex-1 p-6 relative bg-slate-50/20",children:h==="keyboard"?m.jsxs("div",{className:"h-full flex flex-col gap-4",children:[m.jsx("textarea",{ref:l,value:f,onChange:D=>p(D.target.value),className:"flex-1 w-full p-6 border border-slate-200 rounded-xl shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500/10 font-mono text-xl text-slate-800",placeholder:`Enter LaTeX for ${y}...`}),m.jsx("div",{className:"h-20 bg-white border border-slate-100 rounded-xl flex items-center justify-center p-4 shadow-sm overflow-auto",children:S?m.jsx("div",{dangerouslySetInnerHTML:{__html:S}}):m.jsx("span",{className:"text-slate-300 italic",children:"Preview will appear here"})})]}):m.jsxs("div",{className:"h-full border border-slate-200 bg-white rounded-2xl shadow-inner overflow-hidden relative",children:[m.jsx(ft,{ref:s,onHistoryChange:D=>{E(D.canUndo),v(D.canRedo)}}),m.jsxs("div",{className:"absolute top-4 right-4 flex flex-col gap-2",children:[m.jsx("button",{onClick:()=>{var D;return(D=s.current)==null?void 0:D.undo()},disabled:!T,className:"p-2 bg-white border border-slate-200 rounded-lg shadow-sm disabled:opacity-30 hover:bg-slate-50",children:m.jsx(Ac,{size:18})}),m.jsx("button",{onClick:()=>{var D;return(D=s.current)==null?void 0:D.redo()},disabled:!_,className:"p-2 bg-white border border-slate-200 rounded-lg shadow-sm disabled:opacity-30 hover:bg-slate-50",children:m.jsx(xc,{size:18})}),m.jsx("button",{onClick:A,className:"p-2 bg-white border border-slate-200 rounded-lg shadow-sm text-red-500 hover:bg-red-50",children:m.jsx(Nc,{size:18})})]}),m.jsx("div",{className:"absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-4",children:m.jsxs("button",{onClick:F,disabled:a,className:"px-8 py-2.5 bg-blue-600 text-white rounded-full font-bold shadow-xl hover:bg-blue-700 transition flex items-center gap-2 disabled:bg-slate-400",children:[a?m.jsx(vc,{className:"animate-spin",size:18}):null,a?"Processing...":"Recognize Drawing"]})})]})})]})]}),m.jsxs("footer",{className:"px-6 py-4 border-t border-slate-100 flex justify-between items-center bg-slate-50/50",children:[c&&m.jsx("span",{className:"text-sm font-medium text-red-500 animate-pulse",children:c}),m.jsxs("div",{className:"ml-auto flex gap-3",children:[m.jsx("button",{onClick:e,className:"px-6 py-2 text-slate-600 font-semibold hover:bg-slate-200 rounded-xl transition",children:"Cancel"}),m.jsx("button",{onClick:()=>{n(S),e()},disabled:!P,className:"px-8 py-2 bg-slate-900 text-white font-bold rounded-xl shadow-lg disabled:opacity-40 hover:bg-slate-800 transition",children:"Insert Into Editor"})]})]})]})}):null},Rc=({isOpen:t,onClose:e,onInsert:n})=>{const[o,s]=w.useState(3),[l,a]=w.useState(3);if(!t)return null;const u=()=>{o>0&&l>0&&n(o,l)};return m.jsx("div",{className:"fixed inset-0 z-[60] flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm",onClick:e,children:m.jsxs("div",{className:"bg-white rounded-lg shadow-xl p-6 w-full max-w-sm",onClick:c=>c.stopPropagation(),children:[m.jsx("h3",{className:"text-lg font-semibold text-gray-800 mb-4",children:"Insert Table"}),m.jsxs("div",{className:"space-y-4",children:[m.jsxs("div",{children:[m.jsx("label",{htmlFor:"rows",className:"block text-sm font-medium text-gray-700 mb-1",children:"Rows"}),m.jsx("input",{type:"number",id:"rows",value:o,onChange:c=>s(Math.max(1,parseInt(c.target.value,10))),className:"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-black"})]}),m.jsxs("div",{children:[m.jsx("label",{htmlFor:"cols",className:"block text-sm font-medium text-gray-700 mb-1",children:"Columns"}),m.jsx("input",{type:"number",id:"cols",value:l,onChange:c=>a(Math.max(1,parseInt(c.target.value,10))),className:"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-black"})]})]}),m.jsxs("div",{className:"mt-6 flex justify-end space-x-3",children:[m.jsx("button",{title:"Cancel and discard",onClick:e,className:"px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition",children:"Cancel"}),m.jsx("button",{onClick:u,className:"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition",children:"Insert"})]})]})})},kc=({onOpenHandwritingModal:t,onApplyStyle:e,onUndo:n,onRedo:o,canUndo:s,canRedo:l,apiKey:a})=>{const[u,c]=w.useState(!1),[d,f]=w.useState(!1),[p,h]=w.useState(7),g=w.useRef(null),y=w.useRef([]),C=w.useRef(null),[T,E]=w.useState(!1);w.useEffect(()=>{a!==""&&a&&E(!0)},[a]);const _=w.useMemo(()=>[{id:"font",priority:1},{id:"history",priority:2},{id:"formatting",priority:3},{id:"colors",priority:4},{id:"lists",priority:5},{id:"media",priority:6},{id:"handwriting",priority:7}],[]);w.useEffect(()=>{const N=g.current;if(!N)return;const G=new ResizeObserver(q=>{const re=q[0].contentRect.width-50;let Te=0,Ko=0;for(let ct=0;ct<y.current.length;ct++){const zo=y.current[ct];if(zo){const Oo=zo.getBoundingClientRect().width+8;if(Te+Oo<=re)Te+=Oo,Ko++;else break}}h(Math.max(1,Ko))});return G.observe(N),()=>G.disconnect()},[]);const v=N=>{var q;const G=(q=N.target.files)==null?void 0:q[0];if(G){const z=new FileReader;z.onload=re=>{var Te;return e("insertImage",(Te=re.target)==null?void 0:Te.result)},z.readAsDataURL(G)}N.target.value=""},S=(N,G)=>{let q='<table style="width:100%; border-collapse: collapse; border: 1px solid black;"><tbody>';for(let z=0;z<N;z++){q+="<tr>";for(let re=0;re<G;re++)q+='<td style="border: 1px solid black; padding: 5px;"><p><br></p></td>';q+="</tr>"}q+="</tbody></table><p><br></p>",e("insertHTML",q),c(!1)},x=()=>m.jsxs("div",{ref:N=>y.current[0]=N,className:"flex items-center gap-2 shrink-0",children:[m.jsxs("select",{title:"Font Family",onChange:N=>e("fontName",N.target.value),defaultValue:"Arial",className:"bg-white border border-gray-300 rounded px-2 py-1 text-xs text-black outline-none focus:ring-1 focus:ring-blue-500 min-w-[80px]",children:[m.jsx("option",{value:"Arial",children:"Arial"}),m.jsx("option",{value:"Verdana",children:"Verdana"}),m.jsx("option",{value:"Georgia",children:"Georgia"})]}),m.jsxs("select",{title:"Font Size",onChange:N=>e("fontSize",N.target.value),defaultValue:"3",className:"bg-white border border-gray-300 rounded px-2 py-1 text-xs text-black outline-none focus:ring-1 focus:ring-blue-500",children:[m.jsx("option",{value:"1",children:"S"}),m.jsx("option",{value:"3",children:"M"}),m.jsx("option",{value:"5",children:"L"})]})]}),P=()=>m.jsxs("div",{ref:N=>y.current[1]=N,className:"flex bg-white border border-gray-300 rounded overflow-hidden shrink-0",children:[m.jsx("button",{title:"Undo",onClick:n,disabled:!s,className:"p-1.5 hover:bg-gray-100 disabled:opacity-30 border-r border-gray-200",children:m.jsx("svg",{className:"w-4 h-4 text-black",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:m.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M10 19l-7-7m0 0l7-7m-7 7h18"})})}),m.jsx("button",{title:"Redo",onClick:o,disabled:!l,className:"p-1.5 hover:bg-gray-100 disabled:opacity-30",children:m.jsx("svg",{className:"w-4 h-4 text-black",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:m.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M14 5l7 7m0 0l-7 7m7-7H3"})})})]}),M=()=>m.jsxs("div",{ref:N=>y.current[2]=N,className:"flex bg-white border border-gray-300 rounded overflow-hidden shrink-0",children:[m.jsx("button",{title:"Bold",onClick:()=>e("bold"),className:"p-1.5 hover:bg-gray-100 border-r border-gray-200",children:m.jsx("b",{className:"text-black",children:"B"})}),m.jsx("button",{title:"Italic",onClick:()=>e("italic"),className:"p-1.5 hover:bg-gray-100 border-r border-gray-200",children:m.jsx("i",{className:"text-black",children:"I"})}),m.jsx("button",{title:"Underline",onClick:()=>e("underline"),className:"p-1.5 hover:bg-gray-100",children:m.jsx("u",{className:"text-black",children:"U"})})]}),b=()=>m.jsxs("div",{ref:N=>y.current[3]=N,className:"flex bg-white border border-gray-300 rounded overflow-hidden shrink-0",children:[m.jsxs("label",{title:"Text Color",className:"p-1.5 hover:bg-gray-100 border-r border-gray-200 cursor-pointer relative",children:[m.jsx(Sc,{size:18,className:"text-slate-600"}),m.jsx("input",{type:"color",onInput:N=>e("foreColor",N.target.value),className:"opacity-0 absolute inset-0 cursor-pointer"})]}),m.jsxs("label",{title:"Highlight Color",className:"p-1.5 hover:bg-gray-100 cursor-pointer relative",children:[m.jsx(yc,{size:18,className:"text-slate-600"}),m.jsx("input",{type:"color",onInput:N=>e("backColor",N.target.value),className:"opacity-0 absolute inset-0 cursor-pointer"})]})]}),A=()=>m.jsxs("div",{ref:N=>y.current[4]=N,className:"flex bg-white border border-gray-300 rounded overflow-hidden shrink-0",children:[m.jsx("button",{title:"Ordered List",onClick:()=>e("insertOrderedList"),className:"p-1.5 hover:bg-gray-100 border-r border-gray-200",children:m.jsx(Ec,{size:18})}),m.jsx("button",{title:"Unordered List",onClick:()=>e("insertUnorderedList"),className:"p-1.5 hover:bg-gray-100",children:m.jsx(Cc,{size:18})})]}),R=()=>m.jsxs("div",{ref:N=>y.current[5]=N,className:"flex bg-white border border-gray-300 rounded overflow-hidden shrink-0",children:[m.jsx("button",{title:"Upload Image",onClick:()=>{var N;return(N=C.current)==null?void 0:N.click()},className:"p-1.5 hover:bg-gray-100 border-r border-gray-200",children:m.jsx(Tc,{size:18})}),m.jsx("button",{title:"Insert Table",onClick:()=>c(!0),className:"p-1.5 hover:bg-gray-100",children:m.jsx(wc,{size:18})})]}),F=()=>m.jsx("div",{ref:N=>y.current[6]=N,className:"shrink-0",children:m.jsx("button",{title:"Handwriting Math Pad",onClick:t,className:"p-2 bg-blue-50 border border-blue-200 hover:bg-blue-100 text-blue-700 rounded flex items-center transition-colors shadow-sm",children:m.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[m.jsx("path",{d:"M3 12h2l4 8 4-16h6"}),m.jsx("path",{d:"m17 8 4 4"}),m.jsx("path",{d:"m21 8-4 4"})]})})}),D=N=>{switch(N){case"font":return m.jsx(x,{},"font");case"history":return m.jsx(P,{},"history");case"formatting":return m.jsx(M,{},"formatting");case"colors":return m.jsx(b,{},"colors");case"lists":return m.jsx(A,{},"lists");case"media":return m.jsx(R,{},"media");case"handwriting":return m.jsx(F,{},"handwriting");default:return null}},U=_.slice(0,p),V=_.slice(p);return m.jsxs("div",{className:"relative",children:[m.jsxs("div",{ref:g,className:"bg-gray-50 p-2 flex items-center gap-3 border-b border-gray-200 rounded-t-lg flex-nowrap overflow-visible",children:[m.jsxs("div",{className:"absolute top-0 left-0 invisible pointer-events-none flex gap-3 whitespace-nowrap overflow-hidden",children:[m.jsx(x,{}),m.jsx(P,{}),m.jsx(M,{}),m.jsx(b,{}),m.jsx(A,{}),m.jsx(R,{}),T&&m.jsx(F,{})]}),m.jsx("div",{className:"flex items-center gap-3 flex-nowrap overflow-hidden",children:U.map(N=>D(N.id))}),V.length>0&&m.jsxs("div",{className:"ml-auto relative shrink-0",children:[m.jsx("button",{title:"More Tools",onClick:()=>f(!d),className:`p-1.5 rounded hover:bg-gray-200 transition-colors ${d?"bg-gray-200":""}`,children:m.jsx("svg",{className:"w-5 h-5 text-gray-600",fill:"currentColor",viewBox:"0 0 20 20",children:m.jsx("path",{d:"M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM18 10a2 2 0 11-4 0 2 2 0 014 0z"})})}),d&&m.jsx("div",{className:"absolute right-0 mt-2 bg-white border border-gray-200 shadow-2xl rounded-lg p-3 z-[100] flex flex-col gap-4 min-w-[200px] ring-1 ring-black ring-opacity-5",children:V.map(N=>m.jsxs("div",{className:"flex flex-col gap-1",children:[m.jsx("span",{className:"text-[10px] font-bold text-gray-400 uppercase tracking-tighter",children:N.id}),m.jsx("div",{onClick:G=>G.stopPropagation(),children:D(N.id)})]},N.id))})]})]}),m.jsx("input",{type:"file",ref:C,onChange:v,accept:"image/*",className:"hidden"}),m.jsx(Rc,{isOpen:u,onClose:()=>c(!1),onInsert:S}),d&&m.jsx("div",{className:"fixed inset-0 z-[90]",onClick:()=>f(!1)})]})},Yo=w.forwardRef(({initialContent:t="",onChange:e,apiKey:n},o)=>{const s=w.useRef(null),[l,a]=w.useState(!1),[u,c]=w.useState([t]),[d,f]=w.useState(0),p=d>0,h=d<u.length-1,g=w.useCallback(E=>{if(E===u[d])return;const _=u.slice(0,d+1);_.push(E),_.length>50&&_.shift(),c(_),f(_.length-1),e==null||e(E)},[u,d,e]);w.useImperativeHandle(o,()=>({getContent:()=>{var E;return((E=s.current)==null?void 0:E.innerHTML)||""},setContent:E=>{s.current&&(s.current.innerHTML=E,g(E))}})),w.useEffect(()=>{s.current&&t&&!s.current.innerHTML&&(s.current.innerHTML=t)},[t]);const y=(E,_)=>{var v,S;(v=s.current)==null||v.focus(),document.execCommand(E,!1,_),g(((S=s.current)==null?void 0:S.innerHTML)||"")},C=()=>{if(p){const E=d-1;f(E),s.current&&(s.current.innerHTML=u[E],e==null||e(u[E]))}},T=()=>{if(h){const E=d+1;f(E),s.current&&(s.current.innerHTML=u[E],e==null||e(u[E]))}};return m.jsxs("div",{className:"w-full max-w-5xl bg-white shadow-xl border border-slate-200 flex flex-col transition-all duration-300",children:[m.jsx("div",{className:"relative z-20",children:m.jsx(kc,{onApplyStyle:y,onOpenHandwritingModal:()=>a(!0),onUndo:C,onRedo:T,canUndo:p,canRedo:h,apiKey:n})}),m.jsx("div",{ref:s,contentEditable:!0,onInput:()=>{var E;return g(((E=s.current)==null?void 0:E.innerHTML)||"")},className:"flex-1 p-4 outline-none prose prose-slate prose-lg max-w-none max-h-[200px] overflow-scroll prose-headings:font-bold prose-a:text-blue-600 prose-img:rounded-xl prose-table:border border-slate-100 bg-white",style:{fontVariantLigatures:"common-ligatures"}}),l&&m.jsx(Pc,{isOpen:l,onClose:()=>a(!1),onInsert:E=>{var _,v;(_=s.current)==null||_.focus(),document.execCommand("insertHTML",!1,`<span contenteditable="false" class="mlx-formula-inline">${E}</span>&nbsp;`),g(((v=s.current)==null?void 0:v.innerHTML)||"")},apiKey:n})]})});Yo.displayName="Editor",te.Editor=Yo,Object.defineProperty(te,Symbol.toStringTag,{value:"Module"})});
+ */const Mc=W("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]),Pc=({isOpen:t,onClose:e,onInsert:n,apiKey:o=""})=>{const s=w.useRef(null),l=w.useRef(null),[a,u]=w.useState(!1),[c,d]=w.useState(null),[f,p]=w.useState(""),[h,g]=w.useState("keyboard"),[y,C]=w.useState("math"),[T,E]=w.useState(!1),[_,v]=w.useState(!1),[S,x]=w.useState(""),[P,M]=w.useState(!1);w.useEffect(()=>{if(h==="keyboard"&&f.trim()&&window.katex)try{const D=window.katex.renderToString(f,{throwOnError:!0,displayMode:!1,output:"mathml"});console.log("previewHTML : ",S),x(D),M(!0)}catch{x('<span class="text-red-500 text-xs">Invalid formula syntax</span>'),M(!1)}else x(""),M(!1)},[f,h]);const b=D=>{C(D),D==="chem"&&g("keyboard")},A=w.useCallback(()=>{var D;(D=s.current)==null||D.clear(),p(""),d(null),u(!1)},[]),R=w.useCallback(D=>{const U=l.current;if(!U){p(q=>q+D);return}const V=U.selectionStart,N=U.selectionEnd,G=f.substring(0,V)+D+f.substring(N);p(G),setTimeout(()=>{U.focus(),U.selectionStart=U.selectionEnd=V+D.length},0)},[f]),F=w.useCallback(async()=>{var U,V;if(!o){d("Please configure your Gemini API key in the main editor.");return}const D=(U=s.current)==null?void 0:U.getTrimmedImageData();if(!D){d("Draw a formula on the pad first.");return}u(!0),d(null);try{const N=D.split(",")[1],G=await nc(N,o);R(G),g("keyboard"),(V=s.current)==null||V.clear()}catch(N){d(N.message||"AI recognition failed.")}finally{u(!1)}},[o,R]);return t?m.jsx("div",{className:"fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/40 backdrop-blur-md p-4 animate-in fade-in duration-200",children:m.jsxs("div",{className:"bg-white rounded-2xl shadow-2xl flex flex-col w-full max-w-4xl h-[600px] border border-slate-200 overflow-hidden",onClick:D=>D.stopPropagation(),children:[m.jsxs("header",{className:"px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50",children:[m.jsxs("div",{className:"flex items-center gap-6",children:[m.jsx("h2",{className:"text-lg font-bold text-slate-900",children:"AI Formula Pad"}),m.jsxs("div",{className:"flex bg-slate-200 p-1 rounded-lg",children:[m.jsx("button",{onClick:()=>b("math"),className:`px-4 py-1 text-xs font-semibold rounded-md transition-all ${y==="math"?"bg-white shadow text-blue-600":"text-slate-500"}`,children:"Math"}),m.jsx("button",{onClick:()=>b("chem"),className:`px-4 py-1 text-xs font-semibold rounded-md transition-all ${y==="chem"?"bg-white shadow text-blue-600":"text-slate-500"}`,children:"Chemistry"})]})]}),m.jsx("button",{title:"Close",onClick:e,className:"p-2 hover:bg-slate-200 rounded-full text-slate-400 hover:text-slate-600 transition-colors",children:m.jsx(Mc,{size:20})})]}),m.jsxs("div",{className:"flex-1 flex overflow-hidden",children:[m.jsxs("div",{className:"w-16 border-r border-slate-100 flex flex-col items-center py-6 gap-4 bg-slate-50/30",children:[m.jsx("button",{onClick:()=>g("keyboard"),className:`p-3 rounded-xl transition-all ${h==="keyboard"?"bg-blue-600 text-white shadow-lg":"text-slate-400 hover:text-slate-600"}`,children:m.jsx(_c,{size:24})}),y==="math"&&m.jsx("button",{onClick:()=>g("handwriting"),className:`p-3 rounded-xl transition-all ${h==="handwriting"?"bg-blue-600 text-white shadow-lg":"text-slate-400 hover:text-slate-600"}`,children:m.jsx(Ic,{size:24})})]}),m.jsxs("div",{className:"flex-1 flex flex-col overflow-hidden",children:[m.jsx("div",{className:"shrink-0",children:h==="keyboard"&&(y==="math"?m.jsx(lc,{onInsert:R}):m.jsx(cc,{onInsert:R}))}),m.jsx("div",{className:"flex-1 p-6 relative bg-slate-50/20",children:h==="keyboard"?m.jsxs("div",{className:"h-full flex flex-col gap-4",children:[m.jsx("textarea",{ref:l,value:f,onChange:D=>p(D.target.value),className:"flex-1 w-full p-6 border border-slate-200 rounded-xl shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500/10 font-mono text-xl text-slate-800",placeholder:`Enter LaTeX for ${y}...`}),m.jsx("div",{className:"h-20 bg-white border border-slate-100 rounded-xl flex items-center justify-center p-4 shadow-sm overflow-auto",children:S?m.jsx("div",{dangerouslySetInnerHTML:{__html:S}}):m.jsx("span",{className:"text-slate-300 italic",children:"Preview will appear here"})})]}):m.jsxs("div",{className:"h-full border border-slate-200 bg-white rounded-2xl shadow-inner overflow-hidden relative",children:[m.jsx(ft,{ref:s,onHistoryChange:D=>{E(D.canUndo),v(D.canRedo)}}),m.jsxs("div",{className:"absolute top-4 right-4 flex flex-col gap-2",children:[m.jsx("button",{onClick:()=>{var D;return(D=s.current)==null?void 0:D.undo()},disabled:!T,className:"p-2 bg-white border border-slate-200 rounded-lg shadow-sm disabled:opacity-30 hover:bg-slate-50",children:m.jsx(Ac,{size:18})}),m.jsx("button",{onClick:()=>{var D;return(D=s.current)==null?void 0:D.redo()},disabled:!_,className:"p-2 bg-white border border-slate-200 rounded-lg shadow-sm disabled:opacity-30 hover:bg-slate-50",children:m.jsx(xc,{size:18})}),m.jsx("button",{onClick:A,className:"p-2 bg-white border border-slate-200 rounded-lg shadow-sm text-red-500 hover:bg-red-50",children:m.jsx(Nc,{size:18})})]}),m.jsx("div",{className:"absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-4",children:m.jsxs("button",{onClick:F,disabled:a,className:"px-8 py-2.5 bg-blue-600 text-white rounded-full font-bold shadow-xl hover:bg-blue-700 transition flex items-center gap-2 disabled:bg-slate-400",children:[a?m.jsx(vc,{className:"animate-spin",size:18}):null,a?"Processing...":"Recognize Drawing"]})})]})})]})]}),m.jsxs("footer",{className:"px-6 py-4 border-t border-slate-100 flex justify-between items-center bg-slate-50/50",children:[c&&m.jsx("span",{className:"text-sm font-medium text-red-500 animate-pulse",children:c}),m.jsxs("div",{className:"ml-auto flex gap-3",children:[m.jsx("button",{onClick:e,className:"px-6 py-2 text-slate-600 font-semibold hover:bg-slate-200 rounded-xl transition",children:"Cancel"}),m.jsx("button",{onClick:()=>{n(S),e()},disabled:!P,className:"px-8 py-2 bg-slate-900 text-white font-bold rounded-xl shadow-lg disabled:opacity-40 hover:bg-slate-800 transition",children:"Insert Into Editor"})]})]})]})}):null},Rc=({isOpen:t,onClose:e,onInsert:n})=>{const[o,s]=w.useState(3),[l,a]=w.useState(3);if(!t)return null;const u=()=>{o>0&&l>0&&n(o,l)};return m.jsx("div",{className:"fixed inset-0 z-[60] flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm",onClick:e,children:m.jsxs("div",{className:"bg-white rounded-lg shadow-xl p-6 w-full max-w-sm",onClick:c=>c.stopPropagation(),children:[m.jsx("h3",{className:"text-lg font-semibold text-gray-800 mb-4",children:"Insert Table"}),m.jsxs("div",{className:"space-y-4",children:[m.jsxs("div",{children:[m.jsx("label",{htmlFor:"rows",className:"block text-sm font-medium text-gray-700 mb-1",children:"Rows"}),m.jsx("input",{type:"number",id:"rows",value:o,onChange:c=>s(Math.max(1,parseInt(c.target.value,10))),className:"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-black"})]}),m.jsxs("div",{children:[m.jsx("label",{htmlFor:"cols",className:"block text-sm font-medium text-gray-700 mb-1",children:"Columns"}),m.jsx("input",{type:"number",id:"cols",value:l,onChange:c=>a(Math.max(1,parseInt(c.target.value,10))),className:"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-black"})]})]}),m.jsxs("div",{className:"mt-6 flex justify-end space-x-3",children:[m.jsx("button",{title:"Cancel and discard",onClick:e,className:"px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition",children:"Cancel"}),m.jsx("button",{onClick:u,className:"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition",children:"Insert"})]})]})})},kc=({onOpenHandwritingModal:t,onApplyStyle:e,onUndo:n,onRedo:o,canUndo:s,canRedo:l,apiKey:a})=>{const[u,c]=w.useState(!1),[d,f]=w.useState(!1),[p,h]=w.useState(7),g=w.useRef(null),y=w.useRef([]),C=w.useRef(null),[T,E]=w.useState(!1);w.useEffect(()=>{a!==""&&a&&E(!0)},[a]);const _=w.useMemo(()=>[{id:"font",priority:1},{id:"history",priority:2},{id:"formatting",priority:3},{id:"colors",priority:4},{id:"lists",priority:5},{id:"media",priority:6},{id:"handwriting",priority:7}],[]);w.useEffect(()=>{const N=g.current;if(!N)return;const G=new ResizeObserver(q=>{const re=q[0].contentRect.width-50;let Te=0,Ko=0;for(let ct=0;ct<y.current.length;ct++){const zo=y.current[ct];if(zo){const Oo=zo.getBoundingClientRect().width+8;if(Te+Oo<=re)Te+=Oo,Ko++;else break}}h(Math.max(1,Ko))});return G.observe(N),()=>G.disconnect()},[]);const v=N=>{var q;const G=(q=N.target.files)==null?void 0:q[0];if(G){const z=new FileReader;z.onload=re=>{var Te;return e("insertImage",(Te=re.target)==null?void 0:Te.result)},z.readAsDataURL(G)}N.target.value=""},S=(N,G)=>{let q='<table style="width:100%; border-collapse: collapse; border: 1px solid black;"><tbody>';for(let z=0;z<N;z++){q+="<tr>";for(let re=0;re<G;re++)q+='<td style="border: 1px solid black; padding: 5px;"><p><br></p></td>';q+="</tr>"}q+="</tbody></table><p><br></p>",e("insertHTML",q),c(!1)},x=()=>m.jsxs("div",{ref:N=>y.current[0]=N,className:"flex items-center gap-2 shrink-0",children:[m.jsxs("select",{title:"Font Family",onChange:N=>e("fontName",N.target.value),defaultValue:"Arial",className:"bg-white border border-gray-300 rounded px-2 py-1 text-xs text-black outline-none focus:ring-1 focus:ring-blue-500 min-w-[80px]",children:[m.jsx("option",{value:"Arial",children:"Arial"}),m.jsx("option",{value:"Verdana",children:"Verdana"}),m.jsx("option",{value:"Georgia",children:"Georgia"})]}),m.jsxs("select",{title:"Font Size",onChange:N=>e("fontSize",N.target.value),defaultValue:"3",className:"bg-white border border-gray-300 rounded px-2 py-1 text-xs text-black outline-none focus:ring-1 focus:ring-blue-500",children:[m.jsx("option",{value:"1",children:"S"}),m.jsx("option",{value:"3",children:"M"}),m.jsx("option",{value:"5",children:"L"})]})]}),P=()=>m.jsxs("div",{ref:N=>y.current[1]=N,className:"flex bg-white border border-gray-300 rounded overflow-hidden shrink-0",children:[m.jsx("button",{title:"Undo",onClick:n,disabled:!s,className:"p-1.5 hover:bg-gray-100 disabled:opacity-30 border-r border-gray-200",children:m.jsx("svg",{className:"w-4 h-4 text-black",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:m.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M10 19l-7-7m0 0l7-7m-7 7h18"})})}),m.jsx("button",{title:"Redo",onClick:o,disabled:!l,className:"p-1.5 hover:bg-gray-100 disabled:opacity-30",children:m.jsx("svg",{className:"w-4 h-4 text-black",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:m.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M14 5l7 7m0 0l-7 7m7-7H3"})})})]}),M=()=>m.jsxs("div",{ref:N=>y.current[2]=N,className:"flex bg-white border border-gray-300 rounded overflow-hidden shrink-0",children:[m.jsx("button",{title:"Bold",onClick:()=>e("bold"),className:"p-1.5 hover:bg-gray-100 border-r border-gray-200",children:m.jsx("b",{className:"text-black",children:"B"})}),m.jsx("button",{title:"Italic",onClick:()=>e("italic"),className:"p-1.5 hover:bg-gray-100 border-r border-gray-200",children:m.jsx("i",{className:"text-black",children:"I"})}),m.jsx("button",{title:"Underline",onClick:()=>e("underline"),className:"p-1.5 hover:bg-gray-100",children:m.jsx("u",{className:"text-black",children:"U"})})]}),b=()=>m.jsxs("div",{ref:N=>y.current[3]=N,className:"flex bg-white border border-gray-300 rounded overflow-hidden shrink-0",children:[m.jsxs("label",{title:"Text Color",className:"p-1.5 hover:bg-gray-100 border-r border-gray-200 cursor-pointer relative",children:[m.jsx(Sc,{size:18,className:"text-slate-600"}),m.jsx("input",{type:"color",onInput:N=>e("foreColor",N.target.value),className:"opacity-0 absolute inset-0 cursor-pointer"})]}),m.jsxs("label",{title:"Highlight Color",className:"p-1.5 hover:bg-gray-100 cursor-pointer relative",children:[m.jsx(yc,{size:18,className:"text-slate-600"}),m.jsx("input",{type:"color",onInput:N=>e("backColor",N.target.value),className:"opacity-0 absolute inset-0 cursor-pointer"})]})]}),A=()=>m.jsxs("div",{ref:N=>y.current[4]=N,className:"flex bg-white border border-gray-300 rounded overflow-hidden shrink-0",children:[m.jsx("button",{title:"Ordered List",onClick:()=>e("insertOrderedList"),className:"p-1.5 hover:bg-gray-100 border-r border-gray-200",children:m.jsx(Ec,{size:18})}),m.jsx("button",{title:"Unordered List",onClick:()=>e("insertUnorderedList"),className:"p-1.5 hover:bg-gray-100",children:m.jsx(Cc,{size:18})})]}),R=()=>m.jsxs("div",{ref:N=>y.current[5]=N,className:"flex bg-white border border-gray-300 rounded overflow-hidden shrink-0",children:[m.jsx("button",{title:"Upload Image",onClick:()=>{var N;return(N=C.current)==null?void 0:N.click()},className:"p-1.5 hover:bg-gray-100 border-r border-gray-200",children:m.jsx(Tc,{size:18})}),m.jsx("button",{title:"Insert Table",onClick:()=>c(!0),className:"p-1.5 hover:bg-gray-100",children:m.jsx(wc,{size:18})})]}),F=()=>m.jsx("div",{ref:N=>y.current[6]=N,className:"shrink-0",children:m.jsx("button",{title:"Handwriting Math Pad",onClick:t,className:"p-2 bg-blue-50 border border-blue-200 hover:bg-blue-100 text-blue-700 rounded flex items-center transition-colors shadow-sm",children:m.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[m.jsx("path",{d:"M3 12h2l4 8 4-16h6"}),m.jsx("path",{d:"m17 8 4 4"}),m.jsx("path",{d:"m21 8-4 4"})]})})}),D=N=>{switch(N){case"font":return m.jsx(x,{},"font");case"history":return m.jsx(P,{},"history");case"formatting":return m.jsx(M,{},"formatting");case"colors":return m.jsx(b,{},"colors");case"lists":return m.jsx(A,{},"lists");case"media":return m.jsx(R,{},"media");case"handwriting":return m.jsx(F,{},"handwriting");default:return null}},U=_.slice(0,p),V=_.slice(p);return m.jsxs("div",{className:"relative",children:[m.jsxs("div",{ref:g,className:"bg-gray-50 p-2 flex items-center gap-3 border-b border-gray-200 rounded-t-lg flex-nowrap overflow-visible",children:[m.jsxs("div",{className:"absolute top-0 left-0 invisible pointer-events-none flex gap-3 whitespace-nowrap overflow-hidden",children:[m.jsx(x,{}),m.jsx(P,{}),m.jsx(M,{}),m.jsx(b,{}),m.jsx(A,{}),m.jsx(R,{}),T&&m.jsx(F,{})]}),m.jsx("div",{className:"flex items-center gap-3 flex-nowrap overflow-hidden",children:U.map(N=>D(N.id))}),V.length>0&&m.jsxs("div",{className:"ml-auto relative shrink-0",children:[m.jsx("button",{title:"More Tools",onClick:()=>f(!d),className:`p-1.5 rounded hover:bg-gray-200 transition-colors ${d?"bg-gray-200":""}`,children:m.jsx("svg",{className:"w-5 h-5 text-gray-600",fill:"currentColor",viewBox:"0 0 20 20",children:m.jsx("path",{d:"M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM18 10a2 2 0 11-4 0 2 2 0 014 0z"})})}),d&&m.jsx("div",{className:"absolute right-0 mt-2 bg-white border border-gray-200 shadow-2xl rounded-lg p-3 z-[100] flex flex-col gap-4 min-w-[200px] ring-1 ring-black ring-opacity-5",children:V.map(N=>m.jsxs("div",{className:"flex flex-col gap-1",children:[m.jsx("span",{className:"text-[10px] font-bold text-gray-400 uppercase tracking-tighter",children:N.id}),m.jsx("div",{onClick:G=>G.stopPropagation(),children:D(N.id)})]},N.id))})]})]}),m.jsx("input",{type:"file",ref:C,onChange:v,accept:"image/*",className:"hidden"}),m.jsx(Rc,{isOpen:u,onClose:()=>c(!1),onInsert:S}),d&&m.jsx("div",{className:"fixed inset-0 z-[90]",onClick:()=>f(!1)})]})},Yo=w.forwardRef(({initialContent:t="",onChange:e,apiKey:n},o)=>{const s=w.useRef(null),[l,a]=w.useState(!1),[u,c]=w.useState([t]),[d,f]=w.useState(0),p=d>0,h=d<u.length-1,g=w.useCallback(E=>{if(E===u[d])return;const _=u.slice(0,d+1);_.push(E),_.length>50&&_.shift(),c(_),f(_.length-1),e==null||e(E)},[u,d,e]);w.useImperativeHandle(o,()=>({getContent:()=>{var E;return((E=s.current)==null?void 0:E.innerHTML)||""},setContent:E=>{s.current&&(s.current.innerHTML=E,g(E))}})),w.useEffect(()=>{s.current&&t&&!s.current.innerHTML&&(s.current.innerHTML=t)},[t]);const y=(E,_)=>{var v,S;(v=s.current)==null||v.focus(),document.execCommand(E,!1,_),g(((S=s.current)==null?void 0:S.innerHTML)||"")},C=()=>{if(p){const E=d-1;f(E),s.current&&(s.current.innerHTML=u[E],e==null||e(u[E]))}},T=()=>{if(h){const E=d+1;f(E),s.current&&(s.current.innerHTML=u[E],e==null||e(u[E]))}};return m.jsxs("div",{className:"w-full max-w-5xl bg-white shadow-xl border border-slate-200 flex flex-col transition-all duration-300",children:[m.jsx("div",{className:"relative z-20",children:m.jsx(kc,{onApplyStyle:y,onOpenHandwritingModal:()=>a(!0),onUndo:C,onRedo:T,canUndo:p,canRedo:h,apiKey:n})}),m.jsx("div",{ref:s,contentEditable:!0,onInput:()=>{var E;return g(((E=s.current)==null?void 0:E.innerHTML)||"")},className:"flex-1 p-4 outline-none prose prose-slate prose-lg max-w-none max-h-[200px] overflow-scroll prose-headings:font-bold prose-a:text-blue-600 prose-img:rounded-xl prose-table:border border-slate-100 bg-white",style:{fontVariantLigatures:"common-ligatures"}}),l&&m.jsx(Pc,{isOpen:l,onClose:()=>a(!1),onInsert:E=>{var _,v;console.log("MathModel : ",E),(_=s.current)==null||_.focus(),document.execCommand("insertHTML",!1,`<span contenteditable="false" class="mlx-formula-inline">${E}</span>&nbsp;`),g(((v=s.current)==null?void 0:v.innerHTML)||"")},apiKey:n})]})});Yo.displayName="Editor",te.Editor=Yo,Object.defineProperty(te,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swerasty_editor",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "type": "module",
   "description": "A high-performance rich text editor with integrated AI math recognition.",
   "author": "R A N J I T",