@editora/math 1.0.2 → 1.0.4

package/dist/_types/math/src/MathPlugin.native.d.ts

@@ -0,0 +1,8 @@
+import type { Plugin } from '@editora/core';
+declare global {
+    interface Window {
+        __mathPluginDoubleClickInitialized?: boolean;
+        __mathPluginObjectSelectionInitialized?: boolean;
+    }
+}
+export declare const MathPlugin: () => Plugin;

package/dist/_types/math/src/index.d.ts

@@ -0,0 +1 @@
+export { MathPlugin } from './MathPlugin.native';

package/dist/index.cjs.js

@@ -0,0 +1,62 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function K(e){return String(e??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function G(e){let t=!1;e.addEventListener("pointerdown",r=>{t=r.target!==e},!0),e.addEventListener("click",r=>{r.target===e&&t&&r.stopImmediatePropagation(),t=!1},!0)}const H="rte-dialog-base-styles";function W(){if(typeof document>"u"||document.getElementById(H))return;const e=document.createElement("style");e.id=H,e.textContent=`
+    [data-rte-dialog] {
+      font-family: var(--rte-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
+    }
+
+    /* Form controls ignore inherited fonts (browsers default them to Arial /
+       system-ui). :where() keeps this at zero specificity so any control a plugin
+       styles explicitly - e.g. a monospace formula field - keeps its own font. */
+    :where([data-rte-dialog]) :where(button, input, select, textarea) {
+      font-family: inherit;
+    }
+  `,document.head.appendChild(e)}function X(e){e.setAttribute("data-rte-dialog",""),W(),G(e)}const Z={latex:[{name:"Fraction",formula:"\\frac{a}{b}",description:"Simple fraction"},{name:"Square Root",formula:"\\sqrt{x}",description:"Square root"},{name:"Power",formula:"x^{2}",description:"Exponent/power"},{name:"Subscript",formula:"x_{sub}",description:"Subscript"},{name:"Integral",formula:"\\int_{a}^{b} f(x) \\, dx",description:"Definite integral"},{name:"Summation",formula:"\\sum_{i=1}^{n} x_{i}",description:"Summation"},{name:"Limit",formula:"\\lim_{x \\to 0} f(x)",description:"Limit"},{name:"Derivative",formula:"\\frac{d}{dx} f(x)",description:"Derivative"},{name:"Matrix 2x2",formula:"\\begin{pmatrix} a & b \\\\ c & d \\end{pmatrix}",description:"2x2 matrix"},{name:"System",formula:"\\begin{cases} x + y = 1 \\\\ 2x - y = 0 \\end{cases}",description:"System of equations"}],mathml:[{name:"Fraction",formula:"<mfrac><mi>a</mi><mi>b</mi></mfrac>",description:"Simple fraction"},{name:"Square Root",formula:"<msqrt><mi>x</mi></msqrt>",description:"Square root"},{name:"Power",formula:"<msup><mi>x</mi><mn>2</mn></msup>",description:"Exponent/power"},{name:"Subscript",formula:"<msub><mi>x</mi><mi>sub</mi></msub>",description:"Subscript"},{name:"Parentheses",formula:'<mfenced open="(" close=")"><mi>a</mi><mo>+</mo><mi>b</mi></mfenced>',description:"Grouped expression"}]};let S=null,$=null,_=!1,y=null,m=null;const k='[data-theme="dark"], .dark, .editora-theme-dark',Q=new Set(["math","mrow","mi","mn","mo","ms","mtext","mspace","msup","msub","msubsup","mfrac","msqrt","mroot","mfenced","mstyle","mpadded","mphantom","menclose","mtable","mtr","mtd","mlabeledtr","munder","mover","munderover","mmultiscripts","mprescripts","none","semantics","annotation"]),Y=new Set(["display","displaystyle","mathvariant","mathsize","mathcolor","mathbackground","scriptlevel","fence","separator","stretchy","symmetric","lspace","rspace","largeop","movablelimits","accent","accentunder","open","close","separators","linethickness","columnalign","rowalign","columnspacing","rowspacing","columnlines","rowlines","frame","notation","width","height","depth","voffset","minsize","maxsize","form","encoding","xmlns","dir","class","id"]),L=e=>{const t=new DOMParser().parseFromString(`<body>${e}</body>`,"text/html"),r=l=>{Array.from(l.childNodes).forEach(a=>{if(a.nodeType===Node.ELEMENT_NODE){const n=a;if(!Q.has(n.localName.toLowerCase())){n.remove();return}Array.from(n.attributes).forEach(c=>{Y.has(c.name.toLowerCase())||n.removeAttribute(c.name)}),r(n)}else a.nodeType!==Node.TEXT_NODE&&a.parentNode?.removeChild(a)})};return r(t.body),t.body.innerHTML},J=()=>new Promise((e,t)=>{if(window.katex){e(window.katex);return}if(_){const a=setInterval(()=>{window.katex&&(clearInterval(a),e(window.katex))},100);return}_=!0;const r=document.createElement("link");r.rel="stylesheet",r.href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css",document.head.appendChild(r);const l=document.createElement("script");l.src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js",l.onload=()=>e(window.katex),l.onerror=t,document.head.appendChild(l)}),I=()=>{const e=window.getSelection();if(!e||e.rangeCount===0)return null;const t=e.getRangeAt(0).startContainer;return(t.nodeType===Node.ELEMENT_NODE?t:t.parentElement)?.closest(".rte-content, .editora-content")||null},V=e=>e?e.nodeType===Node.ELEMENT_NODE?e:e.parentElement:null,z=e=>V(e)?.closest('.rte-content, .editora-content, [contenteditable="true"]')||null,ee=(e,t,r)=>{if(t!==r){if(typeof window.execEditorCommand=="function"){window.execEditorCommand("recordDomTransaction",e,t,r);return}if(typeof window.executeEditorCommand=="function")try{window.executeEditorCommand("recordDomTransaction",{editor:e,beforeHTML:t,afterHTML:r})}catch{}}},te=e=>{if(!(e instanceof Element))return null;const t=e.closest(".math-formula, .math-block");return t instanceof HTMLElement?t:null},h=()=>{m&&(m.classList.remove("math-object-selected"),m.removeAttribute("data-rte-selected-object"),m=null)},ne=e=>{if(m===e)return;h(),m=e,e.classList.add("math-object-selected"),e.setAttribute("data-rte-selected-object","true");const t=window.getSelection();if(!t)return;const r=document.createRange();r.selectNode(e),t.removeAllRanges(),t.addRange(r)},oe=(e,t)=>{const r=window.getSelection();if(!r)return;const l=document.createRange();t&&t.parentNode===e?l.setStartBefore(t):(l.selectNodeContents(e),l.collapse(!1)),l.collapse(!0),r.removeAllRanges(),r.addRange(l)},re=e=>{if(e.childNodes.length>0)return;const t=document.createElement("p");t.appendChild(document.createElement("br")),e.appendChild(t)},ae=()=>{if(!m||!m.isConnected)return h(),!1;const e=m,t=z(e);if(!t)return h(),!1;const r=t.innerHTML,l=e.nextSibling;e.remove(),re(t),h(),oe(t,l);const a=t.innerHTML;return ee(t,r,a),t.dispatchEvent(new window.Event("input",{bubbles:!0})),r!==a},ie=()=>{if(document.getElementById("math-object-selection-styles"))return;const e=document.createElement("style");e.id="math-object-selection-styles",e.textContent=`
+    .math-object-selected {
+      outline: 2px solid #2563eb !important;
+      outline-offset: 2px;
+      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
+    }
+  `,document.head.appendChild(e)},le=()=>{typeof window>"u"||window.__mathPluginObjectSelectionInitialized||(window.__mathPluginObjectSelectionInitialized=!0,ie(),document.addEventListener("pointerdown",e=>{const t=te(e.target);if(!t){e.target?.closest?.(".math-dialog-overlay")||h();return}e.preventDefault(),z(t)?.focus(),ne(t)},!0),document.addEventListener("keydown",e=>{if(m){if(e.key==="Escape"){h();return}e.key!=="Backspace"&&e.key!=="Delete"||(e.preventDefault(),e.stopPropagation(),ae())}},!0))},se=e=>{if((e||I())?.closest(k))return!0;const r=window.getSelection();if(r&&r.rangeCount>0){const a=r.getRangeAt(0).startContainer;if((a.nodeType===Node.ELEMENT_NODE?a:a.parentElement)?.closest(k))return!0}return document.activeElement?.closest(k)?!0:document.body.matches(k)||document.documentElement.matches(k)},R=async(e,t)=>{document.querySelectorAll(".math-dialog-overlay").forEach(o=>o.remove());const r=t||$?.closest(".rte-content, .editora-content")||I()||y;y=r||null;const l=window.getSelection();if(l&&l.rangeCount>0){const o=l.getRangeAt(0);S=r&&r.contains(o.commonAncestorContainer)?o.cloneRange():null}await J();const a=se(r),n=a?{overlay:"rgba(0, 0, 0, 0.62)",dialogBg:"#1f2937",border:"#3b4657",panelBg:"#222d3a",fieldBg:"#111827",fieldBorder:"#4b5563",text:"#e2e8f0",muted:"#94a3b8",templateBtnBg:"#273244",templateBtnHover:"#334155",templateBtnText:"#dbe7f7",templateSubText:"#9fb0c6",previewBg:"#111827",previewText:"#cbd5e1",cancelBg:"#334155",cancelText:"#e2e8f0",cancelBorder:"#4b5563",insertBg:"#3b82f6",insertHover:"#2563eb",invalid:"#f87171"}:{overlay:"rgba(0, 0, 0, 0.5)",dialogBg:"#ffffff",border:"#e1e5e9",panelBg:"#f8f9fa",fieldBg:"#ffffff",fieldBorder:"#ced4da",text:"#1f2937",muted:"#6c757d",templateBtnBg:"#ffffff",templateBtnHover:"#f8f9fa",templateBtnText:"#1f2937",templateSubText:"#6c757d",previewBg:"#f8f9fa",previewText:"#6c757d",cancelBg:"#ffffff",cancelText:"#1f2937",cancelBorder:"#ced4da",insertBg:"#007bff",insertHover:"#0069d9",invalid:"#cc0000"},c=document.createElement("div");X(c),c.className="math-dialog-overlay",c.style.cssText=`position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: ${n.overlay}; display: flex; align-items: center; justify-content: center; z-index: 99999;`;const d=document.createElement("div");d.style.cssText=`background: ${n.dialogBg}; border: 1px solid ${n.border}; border-radius: 8px; width: 90%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); color: ${n.text};`;let u=e?.format||"latex",B=e?.formula||"";const j=e?.inline!==!1;let b=null,C="";d.innerHTML=`
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid ${n.border}; background: ${n.panelBg};">
+      <h2 style="margin: 0; font-size: 18px; font-weight: 600; color: ${n.text};">${e?"Edit":"Insert"} Math Formula</h2>
+      <button class="close-btn" style="background: none; border: none; font-size: 28px; cursor: pointer; color: ${n.muted}; padding: 0; width: 30px; height: 30px; line-height: 1;">×</button>
+    </div>
+    
+    <div style="padding: 20px; overflow-y: auto; flex: 1;">
+      <div style="margin-bottom: 20px;">
+        <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: ${n.text};">Format:</label>
+        <div style="display: flex; gap: 16px;">
+          <label style="cursor: pointer; color: ${n.text};"><input type="radio" name="format" value="latex" ${u==="latex"?"checked":""} style="margin-right: 6px;"> LaTeX</label>
+          <label style="cursor: pointer; color: ${n.text};"><input type="radio" name="format" value="mathml" ${u==="mathml"?"checked":""} style="margin-right: 6px;"> MathML</label>
+        </div>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: ${n.text};">Quick Templates:</label>
+        <div id="templates-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 200px; overflow-y: auto;"></div>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <label style="cursor: pointer; color: ${n.text};"><input type="checkbox" id="inline-cb" ${j?"checked":""} style="margin-right: 8px;"> Inline math</label>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: ${n.text};">Formula:</label>
+        <textarea id="formula-input" rows="4" style="width: 100%; min-height: 112px; padding: 10px 12px; border: 1px solid ${n.fieldBorder}; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.45; background: ${n.fieldBg}; color: ${n.text}; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; resize: vertical;">${K(B)}</textarea>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: ${n.text};">Preview:</label>
+        <div id="preview-area" style="min-height: 60px; padding: 15px; border: 1px solid ${n.fieldBorder}; border-radius: 4px; background: ${n.previewBg}; display: flex; align-items: center; justify-content: center; color: ${n.previewText};"></div>
+      </div>
+    </div>
+
+    <div style="display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid ${n.border}; background: ${n.panelBg};">
+      <button class="cancel-btn" style="padding: 10px 20px; background: ${n.cancelBg}; color: ${n.cancelText}; border: 1px solid ${n.cancelBorder}; border-radius: 4px; cursor: pointer; font-size: 14px;">Cancel</button>
+      <button id="insert-btn" style="padding: 10px 20px; background: ${n.insertBg}; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;" disabled>${e?"Update":"Insert"}</button>
+    </div>
+  `,c.appendChild(d),document.body.appendChild(c);const p=d.querySelector("#formula-input"),v=d.querySelector("#preview-area"),T=d.querySelector("#templates-grid"),P=d.querySelectorAll('input[name="format"]'),q=d.querySelector("#inline-cb"),f=d.querySelector("#insert-btn"),g=d.querySelector(".close-btn"),w=d.querySelector(".cancel-btn"),F=o=>encodeURIComponent(o),O=o=>{try{return decodeURIComponent(o)}catch{return o}},A=()=>{const o=Z[u];T.innerHTML=o.map(s=>`
+      <button type="button" data-formula="${F(s.formula)}" title="${s.description}" style="padding: 8px; border: 1px solid ${n.fieldBorder}; border-radius: 4px; background: ${n.templateBtnBg}; cursor: pointer; text-align: left; transition: background-color 0.16s ease;">
+        <div style="font-weight: 600; font-size: 12px; color: ${n.templateBtnText};">${s.name}</div>
+        <div style="font-size: 10px; color: ${n.templateSubText}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${s.formula.substring(0,20)}...</div>
+      </button>
+    `).join("")},U=()=>{const o=p.value.trim(),s=`${u}:${o}`;if(s!==C){if(C=s,!o){v.innerHTML=`<span style="color: ${n.previewText};">Enter a formula to see preview</span>`,f.disabled=!0;return}f.disabled=!1;try{if(u==="latex"){const i=window.katex;v.innerHTML=i.renderToString(o,{displayMode:!1,throwOnError:!1})}else o.trim().startsWith("<math")?v.innerHTML=L(o):v.innerHTML=L(`<math xmlns="http://www.w3.org/1998/Math/MathML" display="inline">${o}</math>`)}catch{v.innerHTML=`<span style="color: ${n.invalid};">Invalid formula</span>`}}},M=()=>{b!==null&&cancelAnimationFrame(b),b=requestAnimationFrame(()=>{b=null,U()})},D=o=>{o.key==="Escape"&&(o.preventDefault(),o.stopPropagation(),E())},E=()=>{document.removeEventListener("keydown",D,!0),b!==null&&(cancelAnimationFrame(b),b=null),c.parentNode&&c.parentNode.removeChild(c)};g.onmouseover=()=>{g.style.color="#f8fafc",g.style.background=a?"#334155":"#e5e7eb",g.style.borderRadius="4px"},g.onmouseout=()=>{g.style.color=n.muted,g.style.background="none"},w.onmouseover=()=>{w.style.background=a?"#475569":"#f3f4f6"},w.onmouseout=()=>{w.style.background=n.cancelBg},f.onmouseover=()=>{f.disabled||(f.style.background=n.insertHover)},f.onmouseout=()=>{f.style.background=n.insertBg},T.addEventListener("mouseover",o=>{const i=o.target.closest("button[data-formula]");i&&(i.style.background=n.templateBtnHover)}),T.addEventListener("mouseout",o=>{const i=o.target.closest("button[data-formula]");i&&(i.style.background=n.templateBtnBg)}),T.addEventListener("click",o=>{const i=o.target.closest("button[data-formula]");i&&(p.value=O(i.getAttribute("data-formula")||""),B=p.value,M())});const N=()=>{const o=p.value.trim();if(!o)return;const s={formula:o,format:u,inline:q.checked},i=s.inline?document.createElement("span"):document.createElement("div");if(i.className=s.inline?"math-formula":"math-block",i.setAttribute("data-math-formula",o),i.setAttribute("data-math-format",u),i.contentEditable="false",i.style.cssText=s.inline?"background: #f0f8ff; border: 1px solid #b8daff; border-radius: 4px; padding: 2px 6px; margin: 0 2px; color: #004085; display: inline-block; cursor: pointer;":"background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 12px; margin: 8px 0; text-align: center; display: block; cursor: pointer;",u==="latex"){const x=window.katex;try{i.innerHTML=x.renderToString(o,{displayMode:!s.inline,throwOnError:!1})}catch{i.textContent=s.inline?`$${o}$`:`$$${o}$$`}}else if(o.trim().startsWith("<math"))i.innerHTML=L(o);else{const x=`<math xmlns="http://www.w3.org/1998/Math/MathML" display="${s.inline?"inline":"block"}">${o}</math>`;i.innerHTML=L(x)}if($)$.replaceWith(i);else if(S)S.deleteContents(),S.insertNode(i);else if(y&&y.isConnected){const x=document.createRange();x.selectNodeContents(y),x.collapse(!1),x.insertNode(i)}(i.closest(".rte-content, .editora-content")||y)?.dispatchEvent(new Event("input",{bubbles:!0})),E()};g.addEventListener("click",E),w.addEventListener("click",E),f.addEventListener("click",N),c.addEventListener("click",o=>{o.target===c&&E()}),document.addEventListener("keydown",D,!0),P.forEach(o=>{o.addEventListener("change",s=>{u=s.target.value,C="",A(),M()})}),p.addEventListener("input",()=>{B=p.value,M()}),p.addEventListener("keydown",o=>{(o.ctrlKey||o.metaKey)&&o.key==="Enter"&&(o.preventDefault(),N())}),A(),M(),p.focus()};if(typeof window<"u"&&!window.__mathPluginDoubleClickInitialized){window.__mathPluginDoubleClickInitialized=!0;const e=r=>{const a=r.target.closest(".math-formula, .math-block");if(a){r.preventDefault(),r.stopPropagation(),r.stopImmediatePropagation(),h(),$=a;const n=a.getAttribute("data-math-formula")||"",c=a.getAttribute("data-math-format")||"latex",d=a.classList.contains("math-formula");R({formula:n,format:c,inline:d})}},t=()=>{document.addEventListener("dblclick",e,{capture:!0})};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",t):setTimeout(t,100)}const ce=()=>({name:"math",init:le,toolbar:[{label:"Insert Math",command:"insertMath",icon:'<svg width="24" height="24" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 4.8c.1-.5.5-.8 1-.8h10a1 1 0 1 1 0 2h-9.2L8.3 19.2a1 1 0 0 1-1.7.4l-3.4-4.2a1 1 0 0 1 1.6-1.2l2 2.5L9 4.8Zm9.7 5.5c.4.4.4 1 0 1.4L17 13.5l1.8 1.8a1 1 0 0 1-1.4 1.4L15.5 15l-1.8 1.8a1 1 0 0 1-1.4-1.4l1.8-1.8-1.8-1.8a1 1 0 0 1 1.4-1.4l1.8 1.8 1.8-1.8a1 1 0 0 1 1.4 0Z"></path></svg>'}],commands:{insertMath:(e,t)=>{const r=t?.contentElement instanceof HTMLElement?t.contentElement:null;return R(void 0,r),!0}},keymap:{"Mod-Shift-m":"insertMath"}});exports.MathPlugin=ce;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './_types/math/src/index';

package/dist/index.esm.js

@@ -0,0 +1,492 @@
+function K(e) {
+  return String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function G(e) {
+  let t = !1;
+  e.addEventListener(
+    "pointerdown",
+    (r) => {
+      t = r.target !== e;
+    },
+    !0
+  ), e.addEventListener(
+    "click",
+    (r) => {
+      r.target === e && t && r.stopImmediatePropagation(), t = !1;
+    },
+    !0
+  );
+}
+const H = "rte-dialog-base-styles";
+function W() {
+  if (typeof document > "u" || document.getElementById(H)) return;
+  const e = document.createElement("style");
+  e.id = H, e.textContent = `
+    [data-rte-dialog] {
+      font-family: var(--rte-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
+    }
+
+    /* Form controls ignore inherited fonts (browsers default them to Arial /
+       system-ui). :where() keeps this at zero specificity so any control a plugin
+       styles explicitly - e.g. a monospace formula field - keeps its own font. */
+    :where([data-rte-dialog]) :where(button, input, select, textarea) {
+      font-family: inherit;
+    }
+  `, document.head.appendChild(e);
+}
+function X(e) {
+  e.setAttribute("data-rte-dialog", ""), W(), G(e);
+}
+const Z = {
+  latex: [
+    { name: "Fraction", formula: "\\frac{a}{b}", description: "Simple fraction" },
+    { name: "Square Root", formula: "\\sqrt{x}", description: "Square root" },
+    { name: "Power", formula: "x^{2}", description: "Exponent/power" },
+    { name: "Subscript", formula: "x_{sub}", description: "Subscript" },
+    { name: "Integral", formula: "\\int_{a}^{b} f(x) \\, dx", description: "Definite integral" },
+    { name: "Summation", formula: "\\sum_{i=1}^{n} x_{i}", description: "Summation" },
+    { name: "Limit", formula: "\\lim_{x \\to 0} f(x)", description: "Limit" },
+    { name: "Derivative", formula: "\\frac{d}{dx} f(x)", description: "Derivative" },
+    { name: "Matrix 2x2", formula: "\\begin{pmatrix} a & b \\\\ c & d \\end{pmatrix}", description: "2x2 matrix" },
+    { name: "System", formula: "\\begin{cases} x + y = 1 \\\\ 2x - y = 0 \\end{cases}", description: "System of equations" }
+  ],
+  mathml: [
+    { name: "Fraction", formula: "<mfrac><mi>a</mi><mi>b</mi></mfrac>", description: "Simple fraction" },
+    { name: "Square Root", formula: "<msqrt><mi>x</mi></msqrt>", description: "Square root" },
+    { name: "Power", formula: "<msup><mi>x</mi><mn>2</mn></msup>", description: "Exponent/power" },
+    { name: "Subscript", formula: "<msub><mi>x</mi><mi>sub</mi></msub>", description: "Subscript" },
+    { name: "Parentheses", formula: '<mfenced open="(" close=")"><mi>a</mi><mo>+</mo><mi>b</mi></mfenced>', description: "Grouped expression" }
+  ]
+};
+let S = null, $ = null, _ = !1, y = null, m = null;
+const k = '[data-theme="dark"], .dark, .editora-theme-dark', Q = /* @__PURE__ */ new Set([
+  "math",
+  "mrow",
+  "mi",
+  "mn",
+  "mo",
+  "ms",
+  "mtext",
+  "mspace",
+  "msup",
+  "msub",
+  "msubsup",
+  "mfrac",
+  "msqrt",
+  "mroot",
+  "mfenced",
+  "mstyle",
+  "mpadded",
+  "mphantom",
+  "menclose",
+  "mtable",
+  "mtr",
+  "mtd",
+  "mlabeledtr",
+  "munder",
+  "mover",
+  "munderover",
+  "mmultiscripts",
+  "mprescripts",
+  "none",
+  "semantics",
+  "annotation"
+]), Y = /* @__PURE__ */ new Set([
+  "display",
+  "displaystyle",
+  "mathvariant",
+  "mathsize",
+  "mathcolor",
+  "mathbackground",
+  "scriptlevel",
+  "fence",
+  "separator",
+  "stretchy",
+  "symmetric",
+  "lspace",
+  "rspace",
+  "largeop",
+  "movablelimits",
+  "accent",
+  "accentunder",
+  "open",
+  "close",
+  "separators",
+  "linethickness",
+  "columnalign",
+  "rowalign",
+  "columnspacing",
+  "rowspacing",
+  "columnlines",
+  "rowlines",
+  "frame",
+  "notation",
+  "width",
+  "height",
+  "depth",
+  "voffset",
+  "minsize",
+  "maxsize",
+  "form",
+  "encoding",
+  "xmlns",
+  "dir",
+  "class",
+  "id"
+]), L = (e) => {
+  const t = new DOMParser().parseFromString(`<body>${e}</body>`, "text/html"), r = (l) => {
+    Array.from(l.childNodes).forEach((a) => {
+      if (a.nodeType === Node.ELEMENT_NODE) {
+        const n = a;
+        if (!Q.has(n.localName.toLowerCase())) {
+          n.remove();
+          return;
+        }
+        Array.from(n.attributes).forEach((c) => {
+          Y.has(c.name.toLowerCase()) || n.removeAttribute(c.name);
+        }), r(n);
+      } else a.nodeType !== Node.TEXT_NODE && a.parentNode?.removeChild(a);
+    });
+  };
+  return r(t.body), t.body.innerHTML;
+}, J = () => new Promise((e, t) => {
+  if (window.katex) {
+    e(window.katex);
+    return;
+  }
+  if (_) {
+    const a = setInterval(() => {
+      window.katex && (clearInterval(a), e(window.katex));
+    }, 100);
+    return;
+  }
+  _ = !0;
+  const r = document.createElement("link");
+  r.rel = "stylesheet", r.href = "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css", document.head.appendChild(r);
+  const l = document.createElement("script");
+  l.src = "https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js", l.onload = () => e(window.katex), l.onerror = t, document.head.appendChild(l);
+}), I = () => {
+  const e = window.getSelection();
+  if (!e || e.rangeCount === 0) return null;
+  const t = e.getRangeAt(0).startContainer;
+  return (t.nodeType === Node.ELEMENT_NODE ? t : t.parentElement)?.closest(".rte-content, .editora-content") || null;
+}, V = (e) => e ? e.nodeType === Node.ELEMENT_NODE ? e : e.parentElement : null, z = (e) => V(e)?.closest('.rte-content, .editora-content, [contenteditable="true"]') || null, ee = (e, t, r) => {
+  if (t !== r) {
+    if (typeof window.execEditorCommand == "function") {
+      window.execEditorCommand("recordDomTransaction", e, t, r);
+      return;
+    }
+    if (typeof window.executeEditorCommand == "function")
+      try {
+        window.executeEditorCommand("recordDomTransaction", { editor: e, beforeHTML: t, afterHTML: r });
+      } catch {
+      }
+  }
+}, te = (e) => {
+  if (!(e instanceof Element)) return null;
+  const t = e.closest(".math-formula, .math-block");
+  return t instanceof HTMLElement ? t : null;
+}, h = () => {
+  m && (m.classList.remove("math-object-selected"), m.removeAttribute("data-rte-selected-object"), m = null);
+}, ne = (e) => {
+  if (m === e) return;
+  h(), m = e, e.classList.add("math-object-selected"), e.setAttribute("data-rte-selected-object", "true");
+  const t = window.getSelection();
+  if (!t) return;
+  const r = document.createRange();
+  r.selectNode(e), t.removeAllRanges(), t.addRange(r);
+}, oe = (e, t) => {
+  const r = window.getSelection();
+  if (!r) return;
+  const l = document.createRange();
+  t && t.parentNode === e ? l.setStartBefore(t) : (l.selectNodeContents(e), l.collapse(!1)), l.collapse(!0), r.removeAllRanges(), r.addRange(l);
+}, re = (e) => {
+  if (e.childNodes.length > 0) return;
+  const t = document.createElement("p");
+  t.appendChild(document.createElement("br")), e.appendChild(t);
+}, ae = () => {
+  if (!m || !m.isConnected)
+    return h(), !1;
+  const e = m, t = z(e);
+  if (!t)
+    return h(), !1;
+  const r = t.innerHTML, l = e.nextSibling;
+  e.remove(), re(t), h(), oe(t, l);
+  const a = t.innerHTML;
+  return ee(t, r, a), t.dispatchEvent(new window.Event("input", { bubbles: !0 })), r !== a;
+}, ie = () => {
+  if (document.getElementById("math-object-selection-styles")) return;
+  const e = document.createElement("style");
+  e.id = "math-object-selection-styles", e.textContent = `
+    .math-object-selected {
+      outline: 2px solid #2563eb !important;
+      outline-offset: 2px;
+      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
+    }
+  `, document.head.appendChild(e);
+}, le = () => {
+  typeof window > "u" || window.__mathPluginObjectSelectionInitialized || (window.__mathPluginObjectSelectionInitialized = !0, ie(), document.addEventListener("pointerdown", (e) => {
+    const t = te(e.target);
+    if (!t) {
+      e.target?.closest?.(".math-dialog-overlay") || h();
+      return;
+    }
+    e.preventDefault(), z(t)?.focus(), ne(t);
+  }, !0), document.addEventListener("keydown", (e) => {
+    if (m) {
+      if (e.key === "Escape") {
+        h();
+        return;
+      }
+      e.key !== "Backspace" && e.key !== "Delete" || (e.preventDefault(), e.stopPropagation(), ae());
+    }
+  }, !0));
+}, se = (e) => {
+  if ((e || I())?.closest(k)) return !0;
+  const r = window.getSelection();
+  if (r && r.rangeCount > 0) {
+    const a = r.getRangeAt(0).startContainer;
+    if ((a.nodeType === Node.ELEMENT_NODE ? a : a.parentElement)?.closest(k)) return !0;
+  }
+  return document.activeElement?.closest(k) ? !0 : document.body.matches(k) || document.documentElement.matches(k);
+}, R = async (e, t) => {
+  document.querySelectorAll(".math-dialog-overlay").forEach((o) => o.remove());
+  const r = t || $?.closest(".rte-content, .editora-content") || I() || y;
+  y = r || null;
+  const l = window.getSelection();
+  if (l && l.rangeCount > 0) {
+    const o = l.getRangeAt(0);
+    S = r && r.contains(o.commonAncestorContainer) ? o.cloneRange() : null;
+  }
+  await J();
+  const a = se(r), n = a ? {
+    overlay: "rgba(0, 0, 0, 0.62)",
+    dialogBg: "#1f2937",
+    border: "#3b4657",
+    panelBg: "#222d3a",
+    fieldBg: "#111827",
+    fieldBorder: "#4b5563",
+    text: "#e2e8f0",
+    muted: "#94a3b8",
+    templateBtnBg: "#273244",
+    templateBtnHover: "#334155",
+    templateBtnText: "#dbe7f7",
+    templateSubText: "#9fb0c6",
+    previewBg: "#111827",
+    previewText: "#cbd5e1",
+    cancelBg: "#334155",
+    cancelText: "#e2e8f0",
+    cancelBorder: "#4b5563",
+    insertBg: "#3b82f6",
+    insertHover: "#2563eb",
+    invalid: "#f87171"
+  } : {
+    overlay: "rgba(0, 0, 0, 0.5)",
+    dialogBg: "#ffffff",
+    border: "#e1e5e9",
+    panelBg: "#f8f9fa",
+    fieldBg: "#ffffff",
+    fieldBorder: "#ced4da",
+    text: "#1f2937",
+    muted: "#6c757d",
+    templateBtnBg: "#ffffff",
+    templateBtnHover: "#f8f9fa",
+    templateBtnText: "#1f2937",
+    templateSubText: "#6c757d",
+    previewBg: "#f8f9fa",
+    previewText: "#6c757d",
+    cancelBg: "#ffffff",
+    cancelText: "#1f2937",
+    cancelBorder: "#ced4da",
+    insertBg: "#007bff",
+    insertHover: "#0069d9",
+    invalid: "#cc0000"
+  }, c = document.createElement("div");
+  X(c), c.className = "math-dialog-overlay", c.style.cssText = `position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: ${n.overlay}; display: flex; align-items: center; justify-content: center; z-index: 99999;`;
+  const d = document.createElement("div");
+  d.style.cssText = `background: ${n.dialogBg}; border: 1px solid ${n.border}; border-radius: 8px; width: 90%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); color: ${n.text};`;
+  let u = e?.format || "latex", B = e?.formula || "";
+  const j = e?.inline !== !1;
+  let b = null, C = "";
+  d.innerHTML = `
+    <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid ${n.border}; background: ${n.panelBg};">
+      <h2 style="margin: 0; font-size: 18px; font-weight: 600; color: ${n.text};">${e ? "Edit" : "Insert"} Math Formula</h2>
+      <button class="close-btn" style="background: none; border: none; font-size: 28px; cursor: pointer; color: ${n.muted}; padding: 0; width: 30px; height: 30px; line-height: 1;">×</button>
+    </div>
+    
+    <div style="padding: 20px; overflow-y: auto; flex: 1;">
+      <div style="margin-bottom: 20px;">
+        <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: ${n.text};">Format:</label>
+        <div style="display: flex; gap: 16px;">
+          <label style="cursor: pointer; color: ${n.text};"><input type="radio" name="format" value="latex" ${u === "latex" ? "checked" : ""} style="margin-right: 6px;"> LaTeX</label>
+          <label style="cursor: pointer; color: ${n.text};"><input type="radio" name="format" value="mathml" ${u === "mathml" ? "checked" : ""} style="margin-right: 6px;"> MathML</label>
+        </div>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: ${n.text};">Quick Templates:</label>
+        <div id="templates-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 200px; overflow-y: auto;"></div>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <label style="cursor: pointer; color: ${n.text};"><input type="checkbox" id="inline-cb" ${j ? "checked" : ""} style="margin-right: 8px;"> Inline math</label>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: ${n.text};">Formula:</label>
+        <textarea id="formula-input" rows="4" style="width: 100%; min-height: 112px; padding: 10px 12px; border: 1px solid ${n.fieldBorder}; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.45; background: ${n.fieldBg}; color: ${n.text}; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; resize: vertical;">${K(B)}</textarea>
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        <label style="display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: ${n.text};">Preview:</label>
+        <div id="preview-area" style="min-height: 60px; padding: 15px; border: 1px solid ${n.fieldBorder}; border-radius: 4px; background: ${n.previewBg}; display: flex; align-items: center; justify-content: center; color: ${n.previewText};"></div>
+      </div>
+    </div>
+
+    <div style="display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid ${n.border}; background: ${n.panelBg};">
+      <button class="cancel-btn" style="padding: 10px 20px; background: ${n.cancelBg}; color: ${n.cancelText}; border: 1px solid ${n.cancelBorder}; border-radius: 4px; cursor: pointer; font-size: 14px;">Cancel</button>
+      <button id="insert-btn" style="padding: 10px 20px; background: ${n.insertBg}; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;" disabled>${e ? "Update" : "Insert"}</button>
+    </div>
+  `, c.appendChild(d), document.body.appendChild(c);
+  const p = d.querySelector("#formula-input"), v = d.querySelector("#preview-area"), T = d.querySelector("#templates-grid"), q = d.querySelectorAll('input[name="format"]'), P = d.querySelector("#inline-cb"), f = d.querySelector("#insert-btn"), g = d.querySelector(".close-btn"), w = d.querySelector(".cancel-btn"), F = (o) => encodeURIComponent(o), O = (o) => {
+    try {
+      return decodeURIComponent(o);
+    } catch {
+      return o;
+    }
+  }, A = () => {
+    const o = Z[u];
+    T.innerHTML = o.map((s) => `
+      <button type="button" data-formula="${F(s.formula)}" title="${s.description}" style="padding: 8px; border: 1px solid ${n.fieldBorder}; border-radius: 4px; background: ${n.templateBtnBg}; cursor: pointer; text-align: left; transition: background-color 0.16s ease;">
+        <div style="font-weight: 600; font-size: 12px; color: ${n.templateBtnText};">${s.name}</div>
+        <div style="font-size: 10px; color: ${n.templateSubText}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${s.formula.substring(0, 20)}...</div>
+      </button>
+    `).join("");
+  }, U = () => {
+    const o = p.value.trim(), s = `${u}:${o}`;
+    if (s !== C) {
+      if (C = s, !o) {
+        v.innerHTML = `<span style="color: ${n.previewText};">Enter a formula to see preview</span>`, f.disabled = !0;
+        return;
+      }
+      f.disabled = !1;
+      try {
+        if (u === "latex") {
+          const i = window.katex;
+          v.innerHTML = i.renderToString(o, { displayMode: !1, throwOnError: !1 });
+        } else
+          o.trim().startsWith("<math") ? v.innerHTML = L(o) : v.innerHTML = L(`<math xmlns="http://www.w3.org/1998/Math/MathML" display="inline">${o}</math>`);
+      } catch {
+        v.innerHTML = `<span style="color: ${n.invalid};">Invalid formula</span>`;
+      }
+    }
+  }, M = () => {
+    b !== null && cancelAnimationFrame(b), b = requestAnimationFrame(() => {
+      b = null, U();
+    });
+  }, D = (o) => {
+    o.key === "Escape" && (o.preventDefault(), o.stopPropagation(), E());
+  }, E = () => {
+    document.removeEventListener("keydown", D, !0), b !== null && (cancelAnimationFrame(b), b = null), c.parentNode && c.parentNode.removeChild(c);
+  };
+  g.onmouseover = () => {
+    g.style.color = "#f8fafc", g.style.background = a ? "#334155" : "#e5e7eb", g.style.borderRadius = "4px";
+  }, g.onmouseout = () => {
+    g.style.color = n.muted, g.style.background = "none";
+  }, w.onmouseover = () => {
+    w.style.background = a ? "#475569" : "#f3f4f6";
+  }, w.onmouseout = () => {
+    w.style.background = n.cancelBg;
+  }, f.onmouseover = () => {
+    f.disabled || (f.style.background = n.insertHover);
+  }, f.onmouseout = () => {
+    f.style.background = n.insertBg;
+  }, T.addEventListener("mouseover", (o) => {
+    const i = o.target.closest("button[data-formula]");
+    i && (i.style.background = n.templateBtnHover);
+  }), T.addEventListener("mouseout", (o) => {
+    const i = o.target.closest("button[data-formula]");
+    i && (i.style.background = n.templateBtnBg);
+  }), T.addEventListener("click", (o) => {
+    const i = o.target.closest("button[data-formula]");
+    i && (p.value = O(i.getAttribute("data-formula") || ""), B = p.value, M());
+  });
+  const N = () => {
+    const o = p.value.trim();
+    if (!o) return;
+    const s = { formula: o, format: u, inline: P.checked }, i = s.inline ? document.createElement("span") : document.createElement("div");
+    if (i.className = s.inline ? "math-formula" : "math-block", i.setAttribute("data-math-formula", o), i.setAttribute("data-math-format", u), i.contentEditable = "false", i.style.cssText = s.inline ? "background: #f0f8ff; border: 1px solid #b8daff; border-radius: 4px; padding: 2px 6px; margin: 0 2px; color: #004085; display: inline-block; cursor: pointer;" : "background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 12px; margin: 8px 0; text-align: center; display: block; cursor: pointer;", u === "latex") {
+      const x = window.katex;
+      try {
+        i.innerHTML = x.renderToString(o, {
+          displayMode: !s.inline,
+          throwOnError: !1
+        });
+      } catch {
+        i.textContent = s.inline ? `$${o}$` : `$$${o}$$`;
+      }
+    } else if (o.trim().startsWith("<math"))
+      i.innerHTML = L(o);
+    else {
+      const x = `<math xmlns="http://www.w3.org/1998/Math/MathML" display="${s.inline ? "inline" : "block"}">${o}</math>`;
+      i.innerHTML = L(x);
+    }
+    if ($)
+      $.replaceWith(i);
+    else if (S)
+      S.deleteContents(), S.insertNode(i);
+    else if (y && y.isConnected) {
+      const x = document.createRange();
+      x.selectNodeContents(y), x.collapse(!1), x.insertNode(i);
+    }
+    (i.closest(".rte-content, .editora-content") || y)?.dispatchEvent(new Event("input", { bubbles: !0 })), E();
+  };
+  g.addEventListener("click", E), w.addEventListener("click", E), f.addEventListener("click", N), c.addEventListener("click", (o) => {
+    o.target === c && E();
+  }), document.addEventListener("keydown", D, !0), q.forEach((o) => {
+    o.addEventListener("change", (s) => {
+      u = s.target.value, C = "", A(), M();
+    });
+  }), p.addEventListener("input", () => {
+    B = p.value, M();
+  }), p.addEventListener("keydown", (o) => {
+    (o.ctrlKey || o.metaKey) && o.key === "Enter" && (o.preventDefault(), N());
+  }), A(), M(), p.focus();
+};
+if (typeof window < "u" && !window.__mathPluginDoubleClickInitialized) {
+  window.__mathPluginDoubleClickInitialized = !0;
+  const e = (r) => {
+    const a = r.target.closest(".math-formula, .math-block");
+    if (a) {
+      r.preventDefault(), r.stopPropagation(), r.stopImmediatePropagation(), h(), $ = a;
+      const n = a.getAttribute("data-math-formula") || "", c = a.getAttribute("data-math-format") || "latex", d = a.classList.contains("math-formula");
+      R({ formula: n, format: c, inline: d });
+    }
+  }, t = () => {
+    document.addEventListener("dblclick", e, { capture: !0 });
+  };
+  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", t) : setTimeout(t, 100);
+}
+const de = () => ({
+  name: "math",
+  init: le,
+  toolbar: [
+    {
+      label: "Insert Math",
+      command: "insertMath",
+      icon: '<svg width="24" height="24" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 4.8c.1-.5.5-.8 1-.8h10a1 1 0 1 1 0 2h-9.2L8.3 19.2a1 1 0 0 1-1.7.4l-3.4-4.2a1 1 0 0 1 1.6-1.2l2 2.5L9 4.8Zm9.7 5.5c.4.4.4 1 0 1.4L17 13.5l1.8 1.8a1 1 0 0 1-1.4 1.4L15.5 15l-1.8 1.8a1 1 0 0 1-1.4-1.4l1.8-1.8-1.8-1.8a1 1 0 0 1 1.4-1.4l1.8 1.8 1.8-1.8a1 1 0 0 1 1.4 0Z"></path></svg>'
+    }
+  ],
+  commands: {
+    insertMath: (e, t) => {
+      const r = t?.contentElement instanceof HTMLElement ? t.contentElement : null;
+      return R(void 0, r), !0;
+    }
+  },
+  keymap: {
+    "Mod-Shift-m": "insertMath"
+  }
+});
+export {
+  de as MathPlugin
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editora/math",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Math plugin for Editora",
   "author": "Ajay Kumar <ajaykr089@gmail.com>",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@editora/core": "^1.0.16"
+    "@editora/core": "^1.0.19"
   },
   "devDependencies": {
     "typescript": "^5.0.0",