dopecanvas 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/dopecanvas.cjs +53 -8
- package/dist/dopecanvas.cjs.map +1 -1
- package/dist/dopecanvas.js +1190 -561
- package/dist/dopecanvas.js.map +1 -1
- package/dist/index.d.ts +84 -12
- package/package.json +7 -2
package/README.md
CHANGED
|
@@ -245,7 +245,7 @@ The included `sample-report-charts.html` demo shows this in action: four Chart.j
|
|
|
245
245
|
|
|
246
246
|
Edit a table cell and watch every chart, total, and KPI card update instantly:
|
|
247
247
|
|
|
248
|
-
|
|
248
|
+
|
|
249
249
|
|
|
250
250
|
---
|
|
251
251
|
|
package/dist/dopecanvas.cjs
CHANGED
|
@@ -1,9 +1,54 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),
|
|
2
|
-
|
|
3
|
-
`),f.
|
|
4
|
-
`))},[A,
|
|
5
|
-
`))
|
|
6
|
-
`))},[
|
|
7
|
-
`)
|
|
8
|
-
`):p.current})():p.current,C=document.createElement("div");return C.innerHTML=m,C.innerText||C.textContent||""},undo:()=>R.undo(),redo:()=>R.redo()}),[R,x,k.pageCount,_]),n.jsx("div",{ref:S,className:"dopecanvas-root",style:{display:"flex",flexDirection:"column",height:"100%",width:"100%",fontFamily:"system-ui, -apple-system, BlinkMacSystemFont, sans-serif",...l},children:n.jsx(Ie,{html:a,css:e,pageConfig:x,layoutEngine:j,editableManager:R,onContentChange:D,onPaginationChange:z})})});class le{layoutEngine;editableManager;sourceHTML="";sourceCSS="";measureContainer=null;contentContainer=null;paginationResult={pages:[],pageCount:0};paginationCallbacks=new Set;changeCallbacks=new Set;constructor(e=N){this.layoutEngine=new K(e),this.editableManager=new F}getLayoutEngine(){return this.layoutEngine}getEditableManager(){return this.editableManager}getPaginationResult(){return this.paginationResult}getSourceHTML(){return this.sourceHTML}getPageConfig(){return this.layoutEngine.getConfig()}loadHTML(e,t){this.sourceHTML=e,this.sourceCSS=t||""}setMeasureContainer(e){this.measureContainer=e}setContentContainer(e){this.contentContainer&&this.editableManager.detach(),this.contentContainer=e}runPagination(){if(!this.measureContainer)return{result:{pages:[{blockIndices:[]}],pageCount:1},measurements:[]};const e=this.layoutEngine.getContentAreaWidth();this.measureContainer.style.width=`${e}px`,this.measureContainer.style.position="absolute",this.measureContainer.style.left="-9999px",this.measureContainer.style.top="0",this.measureContainer.style.visibility="hidden";let t=null;this.sourceCSS&&(t=document.createElement("style"),t.textContent=this.sourceCSS,this.measureContainer.appendChild(t));const o=document.createElement("div");o.innerHTML=this.sourceHTML,this.measureContainer.appendChild(o);const s=this.layoutEngine.measureBlocks(o);return this.paginationResult=this.layoutEngine.paginate(s),this.measureContainer.innerHTML="",this.paginationCallbacks.forEach(l=>l(this.paginationResult)),{result:this.paginationResult,measurements:s}}rePaginate(){if(!this.contentContainer)return this.paginationResult;const e=this.layoutEngine.measureBlocks(this.contentContainer);return this.paginationResult=this.layoutEngine.paginate(e),this.paginationCallbacks.forEach(t=>t(this.paginationResult)),this.paginationResult}attachEditing(e){this.contentContainer=e,this.editableManager.attach(e),this.editableManager.onChange(()=>{this.sourceHTML=e.innerHTML,this.changeCallbacks.forEach(t=>t(this.sourceHTML))})}setPageConfig(e){this.layoutEngine.setConfig(e)}onPagination(e){return this.paginationCallbacks.add(e),()=>{this.paginationCallbacks.delete(e)}}onChange(e){return this.changeCallbacks.add(e),()=>{this.changeCallbacks.delete(e)}}getHTML(){return this.contentContainer?this.contentContainer.innerHTML:this.sourceHTML}getPlainText(){return this.contentContainer&&(this.contentContainer.innerText||this.contentContainer.textContent)||""}destroy(){this.editableManager.detach(),this.paginationCallbacks.clear(),this.changeCallbacks.clear(),this.measureContainer=null,this.contentContainer=null}}class qe{_html="";_css="";_pageConfig=null;_paginationResult={pages:[],pageCount:0};_changeCallbacks=new Set;_loadCallbacks=new Set;_pageConfigCallbacks=new Set;_getHTMLFn=null;_getPlainTextFn=null;loadHTML(e,t){this._html=e,this._css=t||"",this._loadCallbacks.forEach(o=>o(e,t))}getHTML(){return this._getHTMLFn?this._getHTMLFn():this._html}getPlainText(){if(this._getPlainTextFn)return this._getPlainTextFn();const e=document.createElement("div");return e.innerHTML=this._html,e.innerText||e.textContent||""}onChange(e){return this._changeCallbacks.add(e),()=>{this._changeCallbacks.delete(e)}}onLoad(e){return this._loadCallbacks.add(e),()=>{this._loadCallbacks.delete(e)}}onPageConfigChange(e){return this._pageConfigCallbacks.add(e),()=>{this._pageConfigCallbacks.delete(e)}}getPageCount(){return this._paginationResult.pageCount}getPageConfig(){return this._pageConfig}setPageConfig(e){this._pageConfig&&(this._pageConfig={...this._pageConfig,...e,margins:{...this._pageConfig.margins,...e.margins||{}}},this._pageConfigCallbacks.forEach(t=>t(this._pageConfig)))}querySelectorAll(e){const t=document.createElement("div");return t.innerHTML=this.getHTML(),Array.from(t.querySelectorAll(e))}getElementContent(e){const t=document.createElement("div");t.innerHTML=this.getHTML();const o=t.querySelector(`#${e}`);return o?o.innerHTML:null}setElementContent(e,t){const o=document.createElement("div");o.innerHTML=this.getHTML();const s=o.querySelector(`#${e}`);s&&(s.innerHTML=t,this.loadHTML(o.innerHTML,this._css))}_connectGetHTML(e){this._getHTMLFn=e}_connectGetPlainText(e){this._getPlainTextFn=e}_notifyChange(e){this._html=e,this._changeCallbacks.forEach(t=>t(e))}_updatePagination(e){this._paginationResult=e}_updatePageConfig(e){this._pageConfig=e}}function Ne(a){const[e,t]=r.useState("none");return r.useEffect(()=>a?a.onContextChange(s=>{t(s)}):void 0,[a]),e}function ce(){const[a,e]=r.useState({bold:!1,italic:!1,underline:!1,strikethrough:!1,justifyLeft:!1,justifyCenter:!1,justifyRight:!1,justifyFull:!1}),t=r.useCallback(()=>{e({bold:document.queryCommandState("bold"),italic:document.queryCommandState("italic"),underline:document.queryCommandState("underline"),strikethrough:document.queryCommandState("strikethrough"),justifyLeft:document.queryCommandState("justifyLeft"),justifyCenter:document.queryCommandState("justifyCenter"),justifyRight:document.queryCommandState("justifyRight"),justifyFull:document.queryCommandState("justifyFull")})},[]);return r.useEffect(()=>(document.addEventListener("selectionchange",t),()=>{document.removeEventListener("selectionchange",t)}),[t]),a}const ue=({onExecCommand:a})=>{const e=ce(),t=r.useRef(null),o=r.useCallback(()=>{const h=window.getSelection();h&&h.rangeCount>0&&(t.current=h.getRangeAt(0).cloneRange())},[]),s=r.useCallback(()=>{const h=t.current;if(!h)return;const p=window.getSelection();p&&(p.removeAllRanges(),p.addRange(h))},[]),l=r.useCallback((h,p)=>S=>{S.preventDefault(),a(h,p)},[a]),i=r.useCallback(h=>{s(),a("fontSize",h.target.value)},[a,s]),u=r.useCallback(h=>{s();const p=h.target.value;p==="p"?a("formatBlock","p"):a("formatBlock",p)},[a,s]),g=r.useCallback(h=>{s(),a("foreColor",h.target.value)},[a,s]),k=r.useCallback(h=>{s(),a("hiliteColor",h.target.value)},[a,s]);return n.jsxs("div",{style:We,children:[n.jsxs("select",{onChange:u,defaultValue:"p",style:ne,title:"Block Format",onMouseDown:o,children:[n.jsx("option",{value:"p",children:"Paragraph"}),n.jsx("option",{value:"h1",children:"Heading 1"}),n.jsx("option",{value:"h2",children:"Heading 2"}),n.jsx("option",{value:"h3",children:"Heading 3"}),n.jsx("option",{value:"h4",children:"Heading 4"}),n.jsx("option",{value:"h5",children:"Heading 5"}),n.jsx("option",{value:"h6",children:"Heading 6"})]}),n.jsx("div",{style:G}),n.jsxs("select",{onChange:i,defaultValue:"3",style:ne,title:"Font Size",onMouseDown:o,children:[n.jsx("option",{value:"1",children:"8pt"}),n.jsx("option",{value:"2",children:"10pt"}),n.jsx("option",{value:"3",children:"12pt"}),n.jsx("option",{value:"4",children:"14pt"}),n.jsx("option",{value:"5",children:"18pt"}),n.jsx("option",{value:"6",children:"24pt"}),n.jsx("option",{value:"7",children:"36pt"})]}),n.jsx("div",{style:G}),n.jsx(te,{icon:"B",title:"Bold (Ctrl+B)",active:e.bold,onMouseDown:l("bold"),extraStyle:{fontWeight:"bold"}}),n.jsx(te,{icon:"I",title:"Italic (Ctrl+I)",active:e.italic,onMouseDown:l("italic"),extraStyle:{fontStyle:"italic"}}),n.jsx("div",{style:G}),n.jsxs("label",{style:oe,title:"Text Color",onMouseDown:o,children:["A",n.jsx("input",{type:"color",defaultValue:"#000000",onChange:g,style:se})]}),n.jsxs("label",{style:oe,title:"Highlight Color",onMouseDown:o,children:[n.jsx("span",{style:{backgroundColor:"#ffff00",padding:"0 2px"},children:"A"}),n.jsx("input",{type:"color",defaultValue:"#ffff00",onChange:k,style:se})]})]})},te=({icon:a,title:e,active:t,onMouseDown:o,extraStyle:s})=>n.jsx("button",{type:"button",title:e,onMouseDown:o,style:{width:"28px",height:"28px",borderWidth:"1px",borderStyle:"solid",borderColor:t?"#b0b5bd":"transparent",borderRadius:"3px",backgroundColor:t?"#d0d5dd":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"13px",color:"#333",padding:0,fontFamily:"inherit",...s},dangerouslySetInnerHTML:{__html:a}}),We={display:"flex",alignItems:"center",gap:"2px",flexWrap:"wrap"},ne={height:"28px",borderWidth:"1px",borderStyle:"solid",borderColor:"#ccc",borderRadius:"3px",fontSize:"12px",padding:"0 4px",cursor:"pointer",backgroundColor:"#fff"},G={width:"1px",height:"20px",backgroundColor:"#ddd",margin:"0 4px"},oe={position:"relative",width:"28px",height:"28px",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",fontSize:"13px",fontWeight:"bold"},se={position:"absolute",bottom:0,left:0,width:"100%",height:"4px",padding:0,borderWidth:0,borderStyle:"none",cursor:"pointer"},de=({pageConfig:a,pageCount:e,onPageConfigChange:t})=>{const o=r.useCallback(i=>{const u=i.target.value;t({size:u})},[t]),s=r.useCallback(i=>u=>{const g=Math.max(0,parseInt(u.target.value)||0);t({margins:{...a.margins,[i]:g}})},[a.margins,t]),l=typeof a.size=="string"?a.size:"custom";return n.jsxs("div",{style:Oe,children:[n.jsxs("label",{style:$e,children:["Page:",n.jsxs("select",{value:l,onChange:o,style:Ve,children:[n.jsx("option",{value:"letter",children:"Letter (8.5 x 11)"}),n.jsx("option",{value:"a4",children:"A4 (210 x 297mm)"}),n.jsx("option",{value:"legal",children:"Legal (8.5 x 14)"})]})]}),n.jsx("div",{style:re}),n.jsx("span",{style:{fontSize:"12px",color:"#666"},children:"Margins (px):"}),n.jsx(O,{label:"T",value:a.margins.top,onChange:s("top")}),n.jsx(O,{label:"R",value:a.margins.right,onChange:s("right")}),n.jsx(O,{label:"B",value:a.margins.bottom,onChange:s("bottom")}),n.jsx(O,{label:"L",value:a.margins.left,onChange:s("left")}),n.jsx("div",{style:re}),n.jsxs("span",{style:{fontSize:"12px",color:"#666"},children:[e," ",e===1?"page":"pages"]})]})},O=({label:a,value:e,onChange:t})=>n.jsxs("label",{style:Ge,title:`${a} margin`,children:[a,":",n.jsx("input",{type:"number",value:e,onChange:t,style:Ue,min:0,max:300,step:12})]}),Oe={display:"flex",alignItems:"center",gap:"6px",flexWrap:"wrap"},$e={display:"flex",alignItems:"center",gap:"4px",fontSize:"12px",color:"#666"},Ve={height:"26px",borderWidth:"1px",borderStyle:"solid",borderColor:"#ccc",borderRadius:"3px",fontSize:"12px",padding:"0 4px",cursor:"pointer",backgroundColor:"#fff"},re={width:"1px",height:"20px",backgroundColor:"#ddd",margin:"0 4px"},Ge={display:"flex",alignItems:"center",gap:"2px",fontSize:"11px",color:"#666"},Ue={width:"44px",height:"24px",borderWidth:"1px",borderStyle:"solid",borderColor:"#ccc",borderRadius:"3px",fontSize:"11px",textAlign:"center",padding:"0 2px"},Ke=({pageConfig:a,pageCount:e,onExecCommand:t,onPageConfigChange:o})=>n.jsxs("div",{style:Xe,children:[n.jsx("div",{style:ie,children:n.jsx(ue,{onExecCommand:t})}),n.jsx("div",{style:ie,children:n.jsx(de,{pageConfig:a,pageCount:e,onPageConfigChange:o})})]}),Xe={borderBottomWidth:"1px",borderBottomStyle:"solid",borderBottomColor:"#d0d0d0",backgroundColor:"#f8f8f8",padding:"4px 8px",display:"flex",flexDirection:"column",gap:"4px",flexShrink:0,zIndex:10},ie={display:"flex",alignItems:"center",gap:"4px",minHeight:"32px"};function Ze(a={}){const{initialHTML:e="",initialCSS:t="",initialConfig:o=N}=a,s=r.useRef(new le(o)),[l,i]=r.useState({pages:[{blockIndices:[]}],pageCount:1}),[u,g]=r.useState(o),k=r.useCallback((x,j)=>{s.current.loadHTML(x,j)},[]),h=r.useCallback(x=>{s.current.setPageConfig(x),g(s.current.getPageConfig())},[]),p=r.useCallback(()=>{const{result:x}=s.current.runPagination();i(x)},[]),S=r.useCallback(()=>s.current.getHTML(),[]),w=r.useCallback(()=>s.current.getPlainText(),[]);return r.useEffect(()=>{e&&s.current.loadHTML(e,t)},[e,t]),r.useEffect(()=>s.current.onPagination(j=>{i(j)}),[]),r.useEffect(()=>()=>{s.current.destroy()},[]),{engine:s.current,paginationResult:l,pageConfig:u,loadHTML:k,setPageConfig:h,triggerPagination:p,getHTML:S,getPlainText:w}}exports.DEFAULT_MARGINS=ae;exports.DEFAULT_PAGE_CONFIG=N;exports.DocumentAPI=qe;exports.DocumentEngine=le;exports.DopeCanvas=ze;exports.EditableManager=F;exports.PAGE_SIZE_PRESETS=U;exports.PageLayoutEngine=K;exports.PageSetupToolbar=de;exports.TextToolbar=ue;exports.Toolbar=Ke;exports.useDocumentEngine=Ze;exports.useFormattingState=ce;exports.useSelectionContext=Ne;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),l=require("react"),Be=require("react-dom"),we=({dimensions:s,margins:e,pageNumber:t,totalPages:o,children:r})=>n.jsxs("div",{className:"dopecanvas-page",style:{width:`${s.width}px`,height:`${s.height}px`,backgroundColor:"#ffffff",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1)",position:"relative",overflow:"hidden",flexShrink:0},children:[n.jsx("div",{className:"dopecanvas-page-content",style:{paddingTop:`${e.top}px`,paddingRight:`${e.right}px`,paddingBottom:`${e.bottom}px`,paddingLeft:`${e.left}px`,height:"100%",boxSizing:"border-box",overflow:"hidden"},children:r}),n.jsxs("div",{className:"dopecanvas-page-number",style:{position:"absolute",bottom:`${Math.max(e.bottom/3,16)}px`,left:0,right:0,textAlign:"center",fontSize:"11px",color:"#999",fontFamily:"system-ui, -apple-system, sans-serif",pointerEvents:"none",userSelect:"none"},children:[t," / ",o]})]}),We=({visible:s,onAddBelow:e,onEditHTML:t,onDelete:o})=>n.jsxs("div",{className:"dopecanvas-block-toolbar",style:{...Ue,display:s?"flex":"none"},onMouseDown:r=>r.preventDefault(),children:[n.jsx(Se,{onClick:e,title:"Add block below",children:n.jsx($e,{})}),n.jsx(Se,{onClick:t,title:"Edit HTML",children:n.jsx(Oe,{})}),n.jsx(Se,{onClick:o,title:"Delete block",danger:!0,children:n.jsx(Ve,{})})]}),$e=()=>n.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",children:[n.jsx("line",{x1:"7",y1:"3",x2:"7",y2:"11"}),n.jsx("line",{x1:"3",y1:"7",x2:"11",y2:"7"})]}),Oe=()=>n.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[n.jsx("polyline",{points:"4.5,3 1.5,7 4.5,11"}),n.jsx("polyline",{points:"9.5,3 12.5,7 9.5,11"})]}),Ve=()=>n.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:n.jsx("path",{d:"M2.5 4h9M5 4V2.5h4V4M3.5 4l.5 8h6l.5-8"})}),Se=({onClick:s,title:e,children:t,danger:o})=>{const[r,a]=l.useState(!1);return n.jsx("button",{onClick:s,title:e,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1),style:{...Ge,background:r?o?"#fff0f0":"#f0f0f0":"transparent",color:r&&o?"#d32f2f":"#666"},children:t})},Ue={position:"absolute",top:0,left:-40,flexDirection:"column",gap:"1px",zIndex:100,background:"#fff",borderRadius:"6px",boxShadow:"0 1px 5px rgba(0,0,0,0.12)",padding:"3px",paddingRight:"6px"},Ge={width:"30px",height:"26px",border:"none",cursor:"pointer",borderRadius:"4px",fontSize:"13px",fontFamily:"system-ui, -apple-system, sans-serif",display:"flex",alignItems:"center",justifyContent:"center",padding:0,transition:"background 0.1s, color 0.1s"},Ke=({html:s,onSave:e,onCancel:t})=>{const[o,r]=l.useState(s),a=i=>{if(i.key==="Enter"&&(i.metaKey||i.ctrlKey)&&(i.preventDefault(),e(o)),i.key==="Escape"&&(i.preventDefault(),t()),i.key==="Tab"){i.preventDefault();const d=i.target,h=d.selectionStart,f=d.selectionEnd,b=o.substring(0,h)+" "+o.substring(f);r(b),requestAnimationFrame(()=>{d.selectionStart=d.selectionEnd=h+2})}};return Be.createPortal(n.jsx("div",{style:Xe,onClick:t,children:n.jsxs("div",{style:Ze,onClick:i=>i.stopPropagation(),children:[n.jsxs("div",{style:Je,children:[n.jsx("span",{style:{fontWeight:600,fontSize:"14px"},children:"Edit Block HTML"}),n.jsx("span",{style:{fontSize:"11px",color:"#888"},children:"⌘Enter to save · Escape to cancel"})]}),n.jsx("textarea",{style:Qe,value:o,onChange:i=>r(i.target.value),onKeyDown:a,spellCheck:!1,autoFocus:!0}),n.jsxs("div",{style:Ye,children:[n.jsx("button",{style:et,onClick:t,onMouseEnter:i=>{i.target.style.borderColor="#888"},onMouseLeave:i=>{i.target.style.borderColor="#555"},children:"Cancel"}),n.jsx("button",{style:tt,onClick:()=>e(o),onMouseEnter:i=>{i.target.style.background="#0055dd"},onMouseLeave:i=>{i.target.style.background="#0066ff"},children:"Save"})]})]})}),document.body)},Xe={position:"fixed",inset:0,background:"rgba(0, 0, 0, 0.5)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e4},Ze={width:"min(800px, 90vw)",height:"min(600px, 80vh)",background:"#1e1e1e",borderRadius:"10px",display:"flex",flexDirection:"column",overflow:"hidden",boxShadow:"0 20px 60px rgba(0, 0, 0, 0.4)"},Je={display:"flex",justifyContent:"space-between",alignItems:"center",padding:"12px 16px",background:"#2d2d2d",color:"#ccc",borderBottom:"1px solid #444"},Qe={flex:1,background:"#1e1e1e",color:"#d4d4d4",border:"none",padding:"16px",fontFamily:"'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace",fontSize:"13px",lineHeight:"1.6",resize:"none",outline:"none",tabSize:2},Ye={display:"flex",justifyContent:"flex-end",gap:"8px",padding:"12px 16px",background:"#2d2d2d",borderTop:"1px solid #444"},et={padding:"6px 16px",border:"1px solid #555",borderRadius:"6px",background:"transparent",color:"#ccc",cursor:"pointer",fontSize:"13px",transition:"border-color 0.15s"},tt={padding:"6px 16px",border:"none",borderRadius:"6px",background:"#0066ff",color:"#fff",cursor:"pointer",fontSize:"13px",fontWeight:500,transition:"background 0.15s"},Te={letter:{width:816,height:1056},a4:{width:794,height:1123},legal:{width:816,height:1344}},Pe={top:96,right:96,bottom:96,left:96},ge={size:"letter",margins:{...Pe}};let nt=0;function _e(){return`split-${++nt}-${Date.now()}`}const ot=40,rt=new Set(["script","style","img","video","canvas","svg","hr","iframe","object","embed","audio","picture","figure"]),st=new Set(["p","h1","h2","h3","h4","h5","h6","blockquote","div","li","span","td","th","pre","code"]);function pe(s,e){const t=s.tagName.toLowerCase();if(rt.has(t)||e<ot)return null;const o=window.getComputedStyle(s);if(o.getPropertyValue("break-before")==="page"||o.getPropertyValue("page-break-before")==="always")return null;const r=Array.from(s.children);if(r.length>1){const a=it(s,r,e);if(a)return a}if(st.has(t)||s.childNodes.length>0){const a=at(s,e);if(a)return a}return null}function De(s){if(s.length===0)return s;const e=[];let t=0;for(;t<s.length;){const o=s[t],r=Le(o);if(!r){e.push(o),t++;continue}const a=[o];let i=t+1;for(;i<s.length&&Le(s[i])===r;)a.push(s[i]),i++;e.push(lt(a)),t=i}return e}function it(s,e,t){const o=s.getBoundingClientRect().top;let r=-1;for(let h=0;h<e.length;h++){const f=e[h].getBoundingClientRect(),b=window.getComputedStyle(e[h]),L=parseFloat(b.marginBottom)||0;if(f.bottom+L-o>t&&h>0){r=h;break}}if(r<=0)return null;const a=s.cloneNode(!1),i=s.cloneNode(!1);for(let h=0;h<e.length;h++)h<r?a.appendChild(e[h].cloneNode(!0)):i.appendChild(e[h].cloneNode(!0));const d=_e();return a.setAttribute("data-dopecanvas-split-id",d),a.setAttribute("data-dopecanvas-split-part","0"),i.setAttribute("data-dopecanvas-split-id",d),i.setAttribute("data-dopecanvas-split-part","1"),{firstHTML:a.outerHTML,secondHTML:i.outerHTML}}function at(s,e){const t=s.getBoundingClientRect().top,o=[],r=document.createTreeWalker(s,NodeFilter.SHOW_TEXT);for(;r.nextNode();)o.push(r.currentNode);if(o.length===0)return null;let a=null,i=0;for(const f of o){const b=document.createRange();b.selectNodeContents(f);const L=b.getBoundingClientRect();if(L.bottom-t<=e)continue;if(L.top-t>=e){a=f,i=0;break}let j=0,v=f.length;for(;j<v;){const E=Math.floor((j+v)/2),k=document.createRange();k.setStart(f,E),k.collapse(!0),k.getBoundingClientRect().top-t>=e?v=E:j=E+1}a=f,i=j;break}if(!a)return null;const d=a.textContent||"";let h=i;for(;h>0&&d[h-1]!==" "&&d[h-1]!==`
|
|
2
|
+
`;)h--;if(h>0&&(i=h),i===0&&a===o[0]||i>=d.length&&a===o[o.length-1])return null;try{const f=document.createRange();f.setStart(s,0),f.setEnd(a,i);const b=document.createRange();b.setStart(a,i),b.setEndAfter(s.lastChild);const L=f.cloneContents(),j=b.cloneContents(),v=je(L),E=je(j);if(v.trim().length===0||E.trim().length===0)return null;const k=s.cloneNode(!1);k.appendChild(L);const q=s.cloneNode(!1);q.appendChild(j);const G=_e();return k.setAttribute("data-dopecanvas-split-id",G),k.setAttribute("data-dopecanvas-split-part","0"),q.setAttribute("data-dopecanvas-split-id",G),q.setAttribute("data-dopecanvas-split-part","1"),{firstHTML:k.outerHTML,secondHTML:q.outerHTML}}catch{return null}}function Le(s){const e=s.match(/data-dopecanvas-split-id="([^"]+)"/);return e?e[1]:null}function lt(s){const e=document.createElement("div"),t=[];let o="",r="";for(const a of s){e.innerHTML=a;const i=e.firstElementChild;if(i){if(!o){o=i.tagName.toLowerCase();const d=i.cloneNode(!1);d.removeAttribute("data-dopecanvas-split-id"),d.removeAttribute("data-dopecanvas-split-part");const h=document.createElement("div");h.appendChild(d);const f=h.innerHTML,b=f.lastIndexOf("</");r=b>=0?f.substring(0,b):f}t.push(i.innerHTML)}}return o?`${r}${t.join("")}</${o}>`:s[0]}function je(s){const e=document.createElement("div");return e.appendChild(s.cloneNode(!0)),e.textContent||""}function ct(s){const e=[];return s.querySelectorAll("script").forEach(t=>{const o=document.createElement("script");Array.from(t.attributes).forEach(r=>o.setAttribute(r.name,r.value)),o.textContent=t.textContent||"",t.parentNode?.replaceChild(o,t),e.push(o)}),e}function ut(s){const e=window.getSelection();if(!e||e.rangeCount===0)return null;const t=e.getRangeAt(0),o=t.startContainer,r=Array.from(s.querySelectorAll(".dopecanvas-block-content")),a=r.findIndex(i=>i.contains(o));if(a===-1)return null;try{const i=document.createRange();i.selectNodeContents(r[a]),i.setEnd(t.startContainer,t.startOffset);const d=i.toString().length;return{blockIndex:a,textOffset:d}}catch{return null}}function dt(s,e){const t=s.querySelectorAll(".dopecanvas-block-content");if(e.blockIndex>=t.length)return;const o=t[e.blockIndex],r=document.createTreeWalker(o,NodeFilter.SHOW_TEXT);let a=e.textOffset;for(;r.nextNode();){const i=r.currentNode;if(a<=i.length){try{const d=document.createRange();d.setStart(i,a),d.collapse(!0);const h=window.getSelection();h?.removeAllRanges(),h?.addRange(d)}catch{}return}a-=i.length}try{const i=document.createRange();i.selectNodeContents(o),i.collapse(!1);const d=window.getSelection();d?.removeAllRanges(),d?.addRange(i)}catch{}}const ht=l.memo(({html:s,isEditable:e,isTable:t})=>n.jsx("div",{className:"dopecanvas-block-content",contentEditable:e&&!t?!0:void 0,suppressContentEditableWarning:!0,dangerouslySetInnerHTML:{__html:s}}));function pt(s){const e=s.replace(/\s+/g," ").toLowerCase();return e.includes("break-before")&&e.includes("page")||e.includes("page-break-before")&&e.includes("always")}const gt=l.forwardRef(({html:s,css:e,pageConfig:t,layoutEngine:o,editableManager:r,onContentChange:a,onPaginationChange:i,showPageBreaks:d=!1},h)=>{const f=l.useRef(null),b=l.useRef(null),L=l.useRef(null),j=l.useRef(a);j.current=a;const[v,E]=l.useState([]),k=l.useRef(null),q=l.useRef(!1),G=l.useRef([]),[_,Q]=l.useState(null),[Y,ue]=l.useState(null),[re,W]=l.useState(""),O=l.useRef(null),ne=typeof t.size=="string"?Te[t.size]:t.size,se=l.useCallback(()=>{if(!b.current)return;const g=b.current.querySelectorAll(".dopecanvas-block-content"),c=[];g.forEach(x=>{const M=x,w=M.children;if(w.length!==0)if(w.length===1)c.push(w[0].outerHTML);else{const S=document.createElement("div");S.innerHTML=M.innerHTML,c.push(S.outerHTML)}});const R=c.join(`
|
|
3
|
+
`);j.current?.(R)},[]),N=l.useCallback(g=>{if(!f.current)return;const c=f.current,R=o.getContentAreaWidth(),x=o.getContentAreaHeight();if(c.style.width=`${R}px`,c.style.position="absolute",c.style.left="-9999px",c.style.top="0",c.style.visibility="hidden",c.innerHTML="",e){const u=document.createElement("style");u.textContent=e,c.appendChild(u)}const M=document.createElement("div");M.innerHTML=g,c.appendChild(M);const S=o.measureBlocks(M).map(u=>{const B=u.element;return{html:B.cloneNode(!0).outerHTML,height:u.height,element:B,breakBefore:u.breakBefore,breakAfter:u.breakAfter}}),T=[];let C=[],A=0,K=0;for(;K<S.length;){const u=S[K];u.breakBefore&&C.length>0&&(T.push(C),C=[],A=0);const B=x-A;if(u.height<=B)C.push(u.html),A+=u.height;else if(C.length>0&&B>=60){const F=pe(u.element,B);if(F){C.push(F.firstHTML),T.push(C),C=[],A=0;const V=document.createElement("div");V.innerHTML=F.secondHTML;const z=V.firstElementChild;M.appendChild(z);const ie=z.getBoundingClientRect(),ae=window.getComputedStyle(z),m=parseFloat(ae.marginTop)||0,U=parseFloat(ae.marginBottom)||0;S.splice(K+1,0,{html:z.outerHTML,height:ie.height+m+U,element:z,breakBefore:!1,breakAfter:u.breakAfter})}else T.push(C),C=[u.html],A=u.height}else if(C.length>0)T.push(C),C=[u.html],A=u.height;else{const F=pe(u.element,x);if(F){C.push(F.firstHTML),T.push(C),C=[],A=0;const V=document.createElement("div");V.innerHTML=F.secondHTML;const z=V.firstElementChild;M.appendChild(z);const ie=z.getBoundingClientRect(),ae=window.getComputedStyle(z),m=parseFloat(ae.marginTop)||0,U=parseFloat(ae.marginBottom)||0;S.splice(K+1,0,{html:z.outerHTML,height:ie.height+m+U,element:z,breakBefore:!1,breakAfter:u.breakAfter})}else C.push(u.html),T.push(C),C=[],A=0}u.breakAfter&&C.length>0&&(T.push(C),C=[],A=0),K++}C.length>0&&T.push(C),T.length===0&&T.push([]),c.innerHTML="";const oe=T.map(u=>({blocks:u})),I={pages:T.map((u,B)=>({blockIndices:Array.from({length:T[B].length},(F,V)=>V)})),pageCount:T.length};G.current=oe,E(oe),i?.(I),j.current?.(g)},[e,o,i]),ee=l.useCallback(()=>{if(!b.current||!f.current)return;const g=b.current,c=ut(g),R=g.querySelectorAll(".dopecanvas-block-content"),x=[];if(R.forEach(m=>{const U=m,X=U.children;if(X.length!==0)if(X.length===1)x.push(X[0].outerHTML);else{const te=document.createElement("div");te.innerHTML=U.innerHTML,x.push(te.outerHTML)}}),x.length===0)return;const w=De(x).join(`
|
|
4
|
+
`),S=f.current,T=o.getContentAreaWidth(),C=o.getContentAreaHeight();if(S.style.width=`${T}px`,S.style.position="absolute",S.style.left="-9999px",S.style.top="0",S.style.visibility="hidden",S.innerHTML="",e){const m=document.createElement("style");m.textContent=e,S.appendChild(m)}const A=document.createElement("div");A.innerHTML=w,S.appendChild(A);const oe=o.measureBlocks(A).map(m=>({html:m.element.cloneNode(!0).outerHTML,height:m.height,element:m.element,breakBefore:m.breakBefore,breakAfter:m.breakAfter})),I=[];let u=[],B=0,F=0;for(;F<oe.length;){const m=oe[F];m.breakBefore&&u.length>0&&(I.push(u),u=[],B=0);const U=C-B;if(m.height<=U)u.push(m.html),B+=m.height;else if(u.length>0&&U>=60){const X=pe(m.element,U);if(X){u.push(X.firstHTML),I.push(u),u=[],B=0;const te=document.createElement("div");te.innerHTML=X.secondHTML;const Z=te.firstElementChild;A.appendChild(Z);const xe=Z.getBoundingClientRect(),he=window.getComputedStyle(Z),Ce=parseFloat(he.marginTop)||0,ye=parseFloat(he.marginBottom)||0;oe.splice(F+1,0,{html:Z.outerHTML,height:xe.height+Ce+ye,element:Z,breakBefore:!1,breakAfter:m.breakAfter})}else I.push(u),u=[m.html],B=m.height}else if(u.length>0)I.push(u),u=[m.html],B=m.height;else{const X=pe(m.element,C);if(X){u.push(X.firstHTML),I.push(u),u=[],B=0;const te=document.createElement("div");te.innerHTML=X.secondHTML;const Z=te.firstElementChild;A.appendChild(Z);const xe=Z.getBoundingClientRect(),he=window.getComputedStyle(Z),Ce=parseFloat(he.marginTop)||0,ye=parseFloat(he.marginBottom)||0;oe.splice(F+1,0,{html:Z.outerHTML,height:xe.height+Ce+ye,element:Z,breakBefore:!1,breakAfter:m.breakAfter})}else u.push(m.html),I.push(u),u=[],B=0}m.breakAfter&&u.length>0&&(I.push(u),u=[],B=0),F++}u.length>0&&I.push(u),I.length===0&&I.push([]),S.innerHTML="";const V=I.map(m=>({blocks:m})),z=G.current.map(m=>m.blocks.length),ie=V.map(m=>m.blocks.length);z.length!==ie.length||z.some((m,U)=>m!==ie[U])?(q.current=!0,k.current=c,G.current=V,E(V),i?.({pages:I.map(()=>({blockIndices:[]})),pageCount:I.length})):G.current=V},[e,o,i]),J=l.useRef(ee);J.current=ee;const fe=l.useCallback(()=>{const g=new DOMParser().parseFromString(s,"text/html");g.head.querySelectorAll('style, link[rel="stylesheet"]').forEach(c=>{g.body.insertBefore(c,g.body.firstChild)}),N(g.body.innerHTML)},[s,N]);l.useEffect(()=>{fe()},[fe]);const $=l.useCallback(()=>{if(!b.current)return[];const g=b.current.querySelectorAll(".dopecanvas-block-content"),c=[];return g.forEach(R=>{const x=R.firstElementChild;x&&c.push(x.outerHTML)}),c},[]),be=l.useCallback(g=>{const c=$();c.splice(g+1,0,'<p style="min-height: 1.5em; line-height: 1.6;"> </p>'),Q(null),N(c.join(`
|
|
5
|
+
`))},[$,N]),de=l.useCallback(g=>{const c=$();c.length<=1||(c.splice(g,1),Q(null),N(c.join(`
|
|
6
|
+
`)))},[$,N]),p=l.useCallback(g=>{const c=$();g<c.length&&(ue(g),W(c[g]))},[$]),y=l.useCallback(g=>{if(Y===null)return;const c=$();Y<c.length&&(c[Y]=g),ue(null),W(""),Q(null),N(c.join(`
|
|
7
|
+
`))},[Y,$,N]),D=l.useCallback(()=>{ue(null),W("")},[]),H=l.useCallback(()=>{const g='<div style="break-before: page;"></div>',c=$();let R=c.length;const x=window.getSelection();if(x&&x.rangeCount>0&&b.current){const M=x.getRangeAt(0).startContainer,S=Array.from(b.current.querySelectorAll(".dopecanvas-block-content")).findIndex(T=>T.contains(M));S!==-1&&(R=S+1)}c.splice(R,0,g),Q(null),N(c.join(`
|
|
8
|
+
`))},[$,N]);return l.useImperativeHandle(h,()=>({insertPageBreak:H}),[H]),l.useEffect(()=>{const g=b.current;if(!g)return;L.current&&L.current.disconnect(),g.querySelectorAll(".dopecanvas-block-content").forEach(w=>{const S=w.firstElementChild;S&&S.tagName==="TABLE"&&S.querySelectorAll("td, th").forEach(C=>{C.contentEditable="true"})});const R=ct(g);let x=null;const M=new MutationObserver(()=>{q.current||(x&&clearTimeout(x),x=setTimeout(()=>{se(),J.current()},800))});return M.observe(g,{childList:!0,subtree:!0,characterData:!0,attributes:!1}),L.current=M,k.current?requestAnimationFrame(()=>{k.current&&b.current&&(dt(b.current,k.current),k.current=null),q.current=!1}):q.current=!1,()=>{M.disconnect(),R.forEach(w=>w.remove()),x&&clearTimeout(x)}},[v,se]),n.jsxs("div",{className:"dopecanvas-paged-view",style:ft,children:[n.jsx("div",{ref:f,"aria-hidden":"true"}),n.jsxs("div",{ref:b,style:mt,children:[e&&n.jsx("style",{dangerouslySetInnerHTML:{__html:e}}),v.map((g,c)=>{const R=v.slice(0,c).reduce((x,M)=>x+M.blocks.length,0);return n.jsx(we,{dimensions:ne,margins:t.margins,pageNumber:c+1,totalPages:v.length,children:g.blocks.map((x,M)=>{const w=R+M,S=x.trim().toLowerCase(),T=!S.startsWith("<script")&&!S.startsWith("<style"),C=S.startsWith("<table"),A=pt(x);return A&&d?n.jsxs("div",{className:"dopecanvas-block-wrapper",style:{position:"relative"},children:[n.jsx("div",{className:"dopecanvas-block-content",style:{display:"none"},dangerouslySetInnerHTML:{__html:x}}),n.jsxs("div",{style:bt,children:[n.jsx("span",{style:Ee}),n.jsx("span",{style:xt,children:"Page Break"}),n.jsx("span",{style:Ee}),n.jsx("button",{type:"button",title:"Remove page break",onClick:()=>de(w),onMouseDown:K=>K.preventDefault(),style:Ct,children:"✕"})]})]},`${c}-${M}`):A?n.jsx("div",{className:"dopecanvas-block-wrapper",style:{position:"relative"},children:n.jsx("div",{className:"dopecanvas-block-content",dangerouslySetInnerHTML:{__html:x}})},`${c}-${M}`):n.jsxs("div",{className:"dopecanvas-block-wrapper",style:{position:"relative"},onMouseEnter:()=>{T&&(O.current&&(clearTimeout(O.current),O.current=null),Q(w))},onMouseLeave:()=>{O.current=setTimeout(()=>{Q(K=>K===w?null:K)},250)},children:[n.jsx(ht,{html:x,isEditable:T,isTable:C}),T&&n.jsx(We,{visible:_===w,onAddBelow:()=>be(w),onEditHTML:()=>p(w),onDelete:()=>de(w)})]},`${c}-${M}`)})},c)}),v.length===0&&n.jsx(we,{dimensions:ne,margins:t.margins,pageNumber:1,totalPages:1,children:n.jsx("div",{contentEditable:"true",style:{minHeight:"1em",outline:"none"},"data-placeholder":"Start typing..."})})]}),Y!==null&&n.jsx(Ke,{html:re,onSave:y,onCancel:D})]})}),ft={flex:1,overflow:"auto",backgroundColor:"#e8e8e8",display:"flex",flexDirection:"column",alignItems:"center"},mt={display:"flex",flexDirection:"column",alignItems:"center",gap:"24px",padding:"24px 0"},bt={display:"flex",alignItems:"center",gap:8,padding:"6px 0",userSelect:"none"},Ee={flex:1,height:0,borderTop:"2px dashed #b0b0b0"},xt={fontSize:11,fontWeight:600,color:"#888",textTransform:"uppercase",letterSpacing:"0.05em",whiteSpace:"nowrap",fontFamily:"system-ui, -apple-system, sans-serif"},Ct={width:20,height:20,border:"1px solid #ccc",borderRadius:4,backgroundColor:"#fff",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,color:"#999",padding:0,flexShrink:0,lineHeight:1};class Me{config;constructor(e=ge){this.config={...e}}getConfig(){return{...this.config}}setConfig(e){e.size!==void 0&&(this.config.size=e.size),e.margins!==void 0&&(this.config.margins={...e.margins})}getPageDimensions(){return typeof this.config.size=="string"?Te[this.config.size]:this.config.size}getContentAreaHeight(){return this.getPageDimensions().height-this.config.margins.top-this.config.margins.bottom}getContentAreaWidth(){return this.getPageDimensions().width-this.config.margins.left-this.config.margins.right}measureBlocks(e){const t=Array.from(e.children),o=[];for(let r=0;r<t.length;r++){const a=t[r],i=window.getComputedStyle(a),d=i.getPropertyValue("break-before")==="page"||i.getPropertyValue("page-break-before")==="always",h=i.getPropertyValue("break-after")==="page"||i.getPropertyValue("page-break-after")==="always",f=a.getBoundingClientRect(),b=parseFloat(i.marginTop)||0,L=parseFloat(i.marginBottom)||0,j=f.height+b+L;o.push({index:r,height:j,element:a,breakBefore:d,breakAfter:h})}return o}paginate(e){if(e.length===0)return{pages:[{blockIndices:[]}],pageCount:1};const t=this.getContentAreaHeight(),o=[];let r=[],a=0;for(let i=0;i<e.length;i++){const d=e[i];d.breakBefore&&r.length>0&&(o.push({blockIndices:r}),r=[],a=0),a+d.height>t&&r.length>0&&(o.push({blockIndices:r}),r=[],a=0),r.push(d.index),a+=d.height,d.breakAfter&&(o.push({blockIndices:r}),r=[],a=0)}return r.length>0&&o.push({blockIndices:r}),o.length===0&&o.push({blockIndices:[]}),{pages:o,pageCount:o.length}}}class ce{observer=null;changeCallbacks=new Set;contextCallbacks=new Set;undoStack=[];redoStack=[];container=null;debounceTimer=null;selectionHandler=null;currentContext="none";static MAX_UNDO_STACK=100;static DEBOUNCE_MS=150;attach(e){this.detach(),this.container=e,this.makeChildrenEditable(e),this.pushUndoSnapshot(),this.observer=new MutationObserver(this.handleMutations),this.observer.observe(e,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["style","class"]}),this.selectionHandler=this.handleSelectionChange.bind(this),document.addEventListener("selectionchange",this.selectionHandler)}detach(){this.observer&&(this.observer.disconnect(),this.observer=null),this.selectionHandler&&(document.removeEventListener("selectionchange",this.selectionHandler),this.selectionHandler=null),this.debounceTimer&&(clearTimeout(this.debounceTimer),this.debounceTimer=null),this.container=null}makeChildrenEditable(e){const t=Array.from(e.children);for(const o of t)o.tagName==="TABLE"?this.makeTableCellsEditable(o):o.contentEditable="true"}makeTableCellsEditable(e){e.querySelectorAll("td, th").forEach(o=>{o.contentEditable="true"})}handleMutations=e=>{this.debounceTimer&&clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout(()=>{this.pushUndoSnapshot(),this.notifyChange()},ce.DEBOUNCE_MS)};handleSelectionChange(){const e=window.getSelection();if(!e||e.rangeCount===0||!this.container){this.setContext("none");return}const o=e.getRangeAt(0).startContainer;let r=o;for(;r&&r!==this.container;){if(r instanceof HTMLElement){const a=r.tagName;if(a==="TD"||a==="TH"||a==="TABLE"){this.setContext("table");return}if(a==="IMG"){this.setContext("image");return}if(r.dataset?.dopecanvasChart){this.setContext("chart");return}}r=r.parentNode}this.container.contains(o)?this.setContext("text"):this.setContext("none")}setContext(e){e!==this.currentContext&&(this.currentContext=e,this.contextCallbacks.forEach(t=>t(e)))}getContext(){return this.currentContext}pushUndoSnapshot(){if(!this.container)return;const e=this.container.innerHTML,t=this.undoStack[this.undoStack.length-1];t&&t.html===e||(this.undoStack.push({html:e,timestamp:Date.now()}),this.redoStack=[],this.undoStack.length>ce.MAX_UNDO_STACK&&this.undoStack.shift())}undo(){if(!this.container||this.undoStack.length<=1)return!1;const e=this.undoStack.pop();this.redoStack.push(e);const t=this.undoStack[this.undoStack.length-1];return this.pauseObserver(()=>{this.container.innerHTML=t.html,this.makeChildrenEditable(this.container)}),this.notifyChange(),!0}redo(){if(!this.container||this.redoStack.length===0)return!1;const e=this.redoStack.pop();return this.undoStack.push(e),this.pauseObserver(()=>{this.container.innerHTML=e.html,this.makeChildrenEditable(this.container)}),this.notifyChange(),!0}pauseObserver(e){this.observer&&this.observer.disconnect(),e(),this.observer&&this.container&&this.observer.observe(this.container,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["style","class"]})}onChange(e){return this.changeCallbacks.add(e),()=>{this.changeCallbacks.delete(e)}}onContextChange(e){return this.contextCallbacks.add(e),()=>{this.contextCallbacks.delete(e)}}notifyChange(){this.changeCallbacks.forEach(e=>e())}execCommand(e,t){return document.execCommand(e,!1,t)}queryCommandState(e){return document.queryCommandState(e)}queryCommandValue(e){return document.queryCommandValue(e)}getHTML(){return this.container?this.container.innerHTML:""}getPlainText(){return this.container&&(this.container.innerText||this.container.textContent)||""}}const yt=`
|
|
9
|
+
:host {
|
|
10
|
+
display: block;
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.dopecanvas-root {
|
|
16
|
+
color: #333;
|
|
17
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
18
|
+
line-height: 1.5;
|
|
19
|
+
-webkit-font-smoothing: antialiased;
|
|
20
|
+
-moz-osx-font-smoothing: grayscale;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.dopecanvas-root *,
|
|
24
|
+
.dopecanvas-root *::before,
|
|
25
|
+
.dopecanvas-root *::after {
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.dopecanvas-page {
|
|
30
|
+
transition: box-shadow 0.2s ease;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.dopecanvas-page:hover {
|
|
34
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.12);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.dopecanvas-root [contenteditable="true"] {
|
|
38
|
+
outline: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.dopecanvas-root [contenteditable="true"]:hover {
|
|
42
|
+
outline: 1px solid rgba(66, 133, 244, 0.08);
|
|
43
|
+
border-radius: 2px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.dopecanvas-root [contenteditable="true"]:focus {
|
|
47
|
+
outline: 1px solid rgba(66, 133, 244, 0.2);
|
|
48
|
+
border-radius: 2px;
|
|
49
|
+
}
|
|
50
|
+
`;function St(s){return s==="flow"?"flow":"paged"}function vt(s,e){const t=s.trim();return t?t===":root"||t==="html"||t==="body"?e:t==="*"?`${e} *`:t.startsWith(":root")||t.startsWith("html")||t.startsWith("body")?t.replace(/^(:root|html|body)\b/,e):`${e} ${t}`:`${e} *`}function ke(s,e){const t=[],o=typeof CSSMediaRule<"u",r=typeof CSSSupportsRule<"u";for(const a of Array.from(s)){if(a instanceof CSSStyleRule){const i=a.selectorText.split(",").map(d=>vt(d,e)).join(", ");t.push(`${i} { ${a.style.cssText} }`);continue}if(o&&a instanceof CSSMediaRule){t.push(`@media ${a.conditionText} { ${ke(a.cssRules,e)} }`);continue}if(r&&a instanceof CSSSupportsRule){t.push(`@supports ${a.conditionText} { ${ke(a.cssRules,e)} }`);continue}t.push(a.cssText)}return t.join(`
|
|
51
|
+
`)}function kt(s,e){if(!s.trim())return s;const t=document.createElement("style");t.textContent=s,document.head.appendChild(t);try{const o=t.sheet;return o?ke(o.cssRules,e):s}catch{return s}finally{t.remove()}}const Tt=l.forwardRef(({html:s="",css:e,renderMode:t="page",isolation:o="shadow",pageConfig:r,onContentChange:a,onPageConfigChange:i,style:d},h)=>{const[f,b]=l.useState(r||ge),[L,j]=l.useState({pages:[],pageCount:0}),v=l.useRef(s),E=l.useRef(null),k=l.useRef(null),[q,G]=l.useState(null),_=l.useRef(null),Q=l.useRef(null),[Y,ue]=l.useState(!1),re=l.useRef(a);re.current=a;const W=r||f,O=St(t),ne=o==="iframe"?"shadow":o,se=ne==="shadow",N=l.useMemo(()=>e&&(ne==="scoped-css"||ne==="shadow")?kt(e,".dopecanvas-root"):e,[e,ne]),ee=l.useMemo(()=>new Me(W),[]),J=l.useMemo(()=>new ce,[]);l.useEffect(()=>{ee.setConfig(W)},[W,ee]),l.useEffect(()=>{const p=E.current;if(!p)return;if(!se){G(null);return}let y=p.shadowRoot;y||(y=p.attachShadow({mode:"open"})),y.innerHTML="";const D=document.createElement("style");D.textContent=yt,y.appendChild(D);const H=document.createElement("div");return H.style.height="100%",H.style.width="100%",y.appendChild(H),G(H),()=>{p.shadowRoot&&(p.shadowRoot.innerHTML=""),G(null)}},[se]);const fe=l.useCallback(p=>{v.current=p,re.current?.(p)},[]),$=l.useCallback(p=>{const y={...W,...p,margins:{...W.margins,...p.margins||{}}};b(y),ee.setConfig(y),i?.(y)},[W,ee,i]),be=l.useCallback(p=>{j(p)},[]);l.useEffect(()=>{if(O!=="flow"||!_.current)return;const p=v.current||s;_.current.innerHTML=p,v.current=p},[s,O]),l.useImperativeHandle(h,()=>({execCommand:(p,y)=>J.execCommand(p,y),queryCommandState:p=>J.queryCommandState(p),queryCommandValue:p=>J.queryCommandValue(p),getPageConfig:()=>({...W}),setPageConfig:p=>{$(p)},getPageCount:()=>L.pageCount,getHTML:()=>{if(O==="flow"&&_.current){const p=_.current.innerHTML;return p?(v.current=p,p):v.current}if(k.current){const p=k.current.querySelectorAll(".dopecanvas-block-content");if(p.length>0){const y=[];if(p.forEach(D=>{const H=D,g=H.children;if(g.length!==0)if(g.length===1)y.push(g[0].outerHTML);else{const c=document.createElement("div");c.innerHTML=H.innerHTML,y.push(c.outerHTML)}}),y.length>0){const D=y.join(`
|
|
52
|
+
`);return v.current=D,D}}}return v.current},getPlainText:()=>{if(O==="flow"&&_.current)return _.current.innerText||_.current.textContent||"";const p=k.current?(()=>{const D=k.current.querySelectorAll(".dopecanvas-block-content"),H=[];return D.forEach(g=>{const c=g,R=c.children;if(R.length!==0)if(R.length===1)H.push(R[0].outerHTML);else{const x=document.createElement("div");x.innerHTML=c.innerHTML,H.push(x.outerHTML)}}),H.length>0?H.join(`
|
|
53
|
+
`):v.current})():v.current,y=document.createElement("div");return y.innerHTML=p,y.innerText||y.textContent||""},undo:()=>J.undo(),redo:()=>J.redo(),insertPageBreak:()=>{if(O==="flow"&&_.current){const p=window.getSelection();if(!p||p.rangeCount===0)return;const y=p.getRangeAt(0);if(!_.current.contains(y.startContainer))return;const D=document.createElement("div");D.style.breakBefore="page",y.insertNode(D),y.setStartAfter(D),y.collapse(!0),p.removeAllRanges(),p.addRange(y);const H=_.current.innerHTML;v.current=H,re.current?.(H);return}Q.current?.insertPageBreak()},setShowPageBreaks:p=>{ue(p)},getShowPageBreaks:()=>Y}),[J,W,L.pageCount,$,Y,O]);const de=n.jsx("div",{ref:k,className:"dopecanvas-root",style:{display:"flex",flexDirection:"column",height:"100%",width:"100%",minHeight:0,minWidth:0,fontFamily:"system-ui, -apple-system, BlinkMacSystemFont, sans-serif",...d},children:O==="paged"?n.jsx(gt,{ref:Q,html:s,css:N,pageConfig:W,layoutEngine:ee,editableManager:J,onContentChange:fe,onPaginationChange:be,showPageBreaks:Y}):n.jsxs("div",{style:Mt,children:[N&&n.jsx("style",{dangerouslySetInnerHTML:{__html:N}}),n.jsx("div",{ref:_,className:"dopecanvas-flow-content",contentEditable:!0,suppressContentEditableWarning:!0,style:wt,onInput:()=>{if(!_.current)return;const p=_.current.innerHTML;v.current=p,re.current?.(p)}})]})});return n.jsx("div",{ref:E,className:"dopecanvas-host",style:{height:"100%",width:"100%",minHeight:0,minWidth:0,overflow:"hidden"},children:se?q?Be.createPortal(de,q):null:de})}),Mt={flex:1,overflow:"auto",backgroundColor:"#f7f7f5",padding:"24px"},wt={minHeight:"100%",outline:"none",backgroundColor:"#fff",border:"1px solid #e5e7eb",borderRadius:8,padding:"20px 24px"};class Ie{layoutEngine;editableManager;sourceHTML="";sourceCSS="";measureContainer=null;contentContainer=null;paginationResult={pages:[],pageCount:0};paginationCallbacks=new Set;changeCallbacks=new Set;constructor(e=ge){this.layoutEngine=new Me(e),this.editableManager=new ce}getLayoutEngine(){return this.layoutEngine}getEditableManager(){return this.editableManager}getPaginationResult(){return this.paginationResult}getSourceHTML(){return this.sourceHTML}getPageConfig(){return this.layoutEngine.getConfig()}loadHTML(e,t){this.sourceHTML=e,this.sourceCSS=t||""}setMeasureContainer(e){this.measureContainer=e}setContentContainer(e){this.contentContainer&&this.editableManager.detach(),this.contentContainer=e}runPagination(){if(!this.measureContainer)return{result:{pages:[{blockIndices:[]}],pageCount:1},measurements:[]};const e=this.layoutEngine.getContentAreaWidth();this.measureContainer.style.width=`${e}px`,this.measureContainer.style.position="absolute",this.measureContainer.style.left="-9999px",this.measureContainer.style.top="0",this.measureContainer.style.visibility="hidden";let t=null;this.sourceCSS&&(t=document.createElement("style"),t.textContent=this.sourceCSS,this.measureContainer.appendChild(t));const o=document.createElement("div");o.innerHTML=this.sourceHTML,this.measureContainer.appendChild(o);const r=this.layoutEngine.measureBlocks(o);return this.paginationResult=this.layoutEngine.paginate(r),this.measureContainer.innerHTML="",this.paginationCallbacks.forEach(a=>a(this.paginationResult)),{result:this.paginationResult,measurements:r}}rePaginate(){if(!this.contentContainer)return this.paginationResult;const e=this.layoutEngine.measureBlocks(this.contentContainer);return this.paginationResult=this.layoutEngine.paginate(e),this.paginationCallbacks.forEach(t=>t(this.paginationResult)),this.paginationResult}attachEditing(e){this.contentContainer=e,this.editableManager.attach(e),this.editableManager.onChange(()=>{this.sourceHTML=e.innerHTML,this.changeCallbacks.forEach(t=>t(this.sourceHTML))})}setPageConfig(e){this.layoutEngine.setConfig(e)}onPagination(e){return this.paginationCallbacks.add(e),()=>{this.paginationCallbacks.delete(e)}}onChange(e){return this.changeCallbacks.add(e),()=>{this.changeCallbacks.delete(e)}}getHTML(){return this.contentContainer?this.contentContainer.innerHTML:this.sourceHTML}getPlainText(){return this.contentContainer&&(this.contentContainer.innerText||this.contentContainer.textContent)||""}destroy(){this.editableManager.detach(),this.paginationCallbacks.clear(),this.changeCallbacks.clear(),this.measureContainer=null,this.contentContainer=null}}class Lt{_html="";_css="";_pageConfig=null;_paginationResult={pages:[],pageCount:0};_changeCallbacks=new Set;_loadCallbacks=new Set;_pageConfigCallbacks=new Set;_getHTMLFn=null;_getPlainTextFn=null;loadHTML(e,t){this._html=e,this._css=t||"",this._loadCallbacks.forEach(o=>o(e,t))}getHTML(){return this._getHTMLFn?this._getHTMLFn():this._html}getPlainText(){if(this._getPlainTextFn)return this._getPlainTextFn();const e=document.createElement("div");return e.innerHTML=this._html,e.innerText||e.textContent||""}onChange(e){return this._changeCallbacks.add(e),()=>{this._changeCallbacks.delete(e)}}onLoad(e){return this._loadCallbacks.add(e),()=>{this._loadCallbacks.delete(e)}}onPageConfigChange(e){return this._pageConfigCallbacks.add(e),()=>{this._pageConfigCallbacks.delete(e)}}getPageCount(){return this._paginationResult.pageCount}getPageConfig(){return this._pageConfig}setPageConfig(e){this._pageConfig&&(this._pageConfig={...this._pageConfig,...e,margins:{...this._pageConfig.margins,...e.margins||{}}},this._pageConfigCallbacks.forEach(t=>t(this._pageConfig)))}querySelectorAll(e){const t=document.createElement("div");return t.innerHTML=this.getHTML(),Array.from(t.querySelectorAll(e))}getElementContent(e){const t=document.createElement("div");t.innerHTML=this.getHTML();const o=t.querySelector(`#${e}`);return o?o.innerHTML:null}setElementContent(e,t){const o=document.createElement("div");o.innerHTML=this.getHTML();const r=o.querySelector(`#${e}`);r&&(r.innerHTML=t,this.loadHTML(o.innerHTML,this._css))}_connectGetHTML(e){this._getHTMLFn=e}_connectGetPlainText(e){this._getPlainTextFn=e}_notifyChange(e){this._html=e,this._changeCallbacks.forEach(t=>t(e))}_updatePagination(e){this._paginationResult=e}_updatePageConfig(e){this._pageConfig=e}}function jt(s){const[e,t]=l.useState("none");return l.useEffect(()=>s?s.onContextChange(r=>{t(r)}):void 0,[s]),e}const Et={bold:!1,italic:!1,underline:!1,strikethrough:!1,justifyLeft:!1,justifyCenter:!1,justifyRight:!1,justifyFull:!1,orderedList:!1,unorderedList:!1,superscript:!1,subscript:!1,fontName:"",fontSize:"3",foreColor:"#000000",backColor:"",formatBlock:"p"};function Ne(){const[s,e]=l.useState(Et),t=l.useCallback(()=>{try{let o=document.queryCommandValue("formatBlock")||"";o=o.replace(/^<|>$/g,"").toLowerCase(),(!o||o==="div")&&(o="p"),e({bold:document.queryCommandState("bold"),italic:document.queryCommandState("italic"),underline:document.queryCommandState("underline"),strikethrough:document.queryCommandState("strikethrough"),justifyLeft:document.queryCommandState("justifyLeft"),justifyCenter:document.queryCommandState("justifyCenter"),justifyRight:document.queryCommandState("justifyRight"),justifyFull:document.queryCommandState("justifyFull"),orderedList:document.queryCommandState("insertOrderedList"),unorderedList:document.queryCommandState("insertUnorderedList"),superscript:document.queryCommandState("superscript"),subscript:document.queryCommandState("subscript"),fontName:document.queryCommandValue("fontName")||"",fontSize:document.queryCommandValue("fontSize")||"3",foreColor:document.queryCommandValue("foreColor")||"#000000",backColor:document.queryCommandValue("backColor")||"",formatBlock:o})}catch{}},[]);return l.useEffect(()=>(document.addEventListener("selectionchange",t),()=>{document.removeEventListener("selectionchange",t)}),[t]),s}function Fe(){const s=l.useRef(null),e=l.useCallback(()=>{const r=window.getSelection();r&&r.rangeCount>0&&(s.current=r.getRangeAt(0).cloneRange())},[]),t=l.useCallback(()=>{const r=s.current;if(!r)return;const a=window.getSelection();a&&(a.removeAllRanges(),a.addRange(r))},[]),o=l.useCallback(r=>{t(),r()},[t]);return{saveSelection:e,restoreSelection:t,restoreAndExec:o}}const ze=({onExecCommand:s})=>{const e=Ne(),{saveSelection:t,restoreAndExec:o}=Fe(),r=l.useCallback((h,f)=>b=>{b.preventDefault(),s(h,f)},[s]),a=l.useCallback(h=>f=>{o(()=>s(h,f.target.value))},[s,o]),i=l.useCallback(h=>f=>{o(()=>s(h,f.target.value))},[s,o]),d=l.useCallback(h=>{h.preventDefault();const f=prompt("Enter URL:");f&&s("createLink",f)},[s]);return n.jsxs("div",{style:Ht,children:[n.jsxs("select",{value:e.formatBlock,onChange:a("formatBlock"),style:ve,title:"Block Format",onMouseDown:t,children:[n.jsx("option",{value:"p",children:"Paragraph"}),n.jsx("option",{value:"h1",children:"Heading 1"}),n.jsx("option",{value:"h2",children:"Heading 2"}),n.jsx("option",{value:"h3",children:"Heading 3"}),n.jsx("option",{value:"h4",children:"Heading 4"}),n.jsx("option",{value:"h5",children:"Heading 5"}),n.jsx("option",{value:"h6",children:"Heading 6"})]}),n.jsx(le,{}),n.jsxs("select",{value:e.fontName.replace(/['"]/g,""),onChange:a("fontName"),style:{...ve,width:110},title:"Font Family",onMouseDown:t,children:[n.jsx("option",{value:"Arial",children:"Arial"}),n.jsx("option",{value:"Georgia",children:"Georgia"}),n.jsx("option",{value:"Times New Roman",children:"Times New Roman"}),n.jsx("option",{value:"Courier New",children:"Courier New"}),n.jsx("option",{value:"Verdana",children:"Verdana"}),n.jsx("option",{value:"Trebuchet MS",children:"Trebuchet MS"}),n.jsx("option",{value:"Comic Sans MS",children:"Comic Sans MS"}),n.jsx("option",{value:"Impact",children:"Impact"}),n.jsx("option",{value:"system-ui",children:"System UI"})]}),n.jsxs("select",{value:e.fontSize,onChange:a("fontSize"),style:{...ve,width:56},title:"Font Size",onMouseDown:t,children:[n.jsx("option",{value:"1",children:"8"}),n.jsx("option",{value:"2",children:"10"}),n.jsx("option",{value:"3",children:"12"}),n.jsx("option",{value:"4",children:"14"}),n.jsx("option",{value:"5",children:"18"}),n.jsx("option",{value:"6",children:"24"}),n.jsx("option",{value:"7",children:"36"})]}),n.jsx(le,{}),n.jsx(P,{icon:"B",title:"Bold (Ctrl+B)",active:e.bold,onMouseDown:r("bold"),extraStyle:{fontWeight:700}}),n.jsx(P,{icon:"I",title:"Italic (Ctrl+I)",active:e.italic,onMouseDown:r("italic"),extraStyle:{fontStyle:"italic"}}),n.jsx(P,{icon:"U",title:"Underline (Ctrl+U)",active:e.underline,onMouseDown:r("underline"),extraStyle:{textDecoration:"underline"}}),n.jsx(P,{icon:"S",title:"Strikethrough",active:e.strikethrough,onMouseDown:r("strikethrough"),extraStyle:{textDecoration:"line-through"}}),n.jsx(P,{icon:"x²",title:"Superscript",active:e.superscript,onMouseDown:r("superscript")}),n.jsx(P,{icon:"x₂",title:"Subscript",active:e.subscript,onMouseDown:r("subscript")}),n.jsx(le,{}),n.jsx(He,{label:"A",title:"Text Color",defaultValue:"#000000",onChange:i("foreColor"),onMouseDown:t}),n.jsx(He,{label:"A",title:"Highlight Color",defaultValue:"#ffff00",onChange:i("hiliteColor"),onMouseDown:t,highlight:!0}),n.jsx(le,{}),n.jsx(P,{icon:"≡",title:"Align Left",active:e.justifyLeft,onMouseDown:r("justifyLeft")}),n.jsx(P,{icon:"≣",title:"Align Center",active:e.justifyCenter,onMouseDown:r("justifyCenter")}),n.jsx(P,{icon:"≢",title:"Align Right",active:e.justifyRight,onMouseDown:r("justifyRight")}),n.jsx(P,{icon:"☰",title:"Justify",active:e.justifyFull,onMouseDown:r("justifyFull")}),n.jsx(le,{}),n.jsx(P,{icon:"•",title:"Bullet List",active:e.unorderedList,onMouseDown:r("insertUnorderedList")}),n.jsx(P,{icon:"1.",title:"Numbered List",active:e.orderedList,onMouseDown:r("insertOrderedList"),extraStyle:{fontSize:"11px",fontWeight:600}}),n.jsx(P,{icon:"⇤",title:"Decrease Indent",onMouseDown:r("outdent")}),n.jsx(P,{icon:"⇥",title:"Increase Indent",onMouseDown:r("indent")}),n.jsx(le,{}),n.jsx(P,{icon:"🔗",title:"Insert Link",onMouseDown:d}),n.jsx(P,{icon:"—",title:"Horizontal Rule",onMouseDown:r("insertHorizontalRule")}),n.jsx(P,{icon:"T̸",title:"Clear Formatting",onMouseDown:r("removeFormat")})]})},P=({icon:s,title:e,active:t,onMouseDown:o,extraStyle:r})=>n.jsx("button",{type:"button",title:e,onMouseDown:o,style:{width:"28px",height:"28px",borderWidth:"1px",borderStyle:"solid",borderColor:t?"#b0b5bd":"transparent",borderRadius:"3px",backgroundColor:t?"#d0d5dd":"transparent",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"13px",color:"#333",padding:0,fontFamily:"inherit",...r},dangerouslySetInnerHTML:{__html:s}}),le=()=>n.jsx("div",{style:Rt}),He=({label:s,title:e,defaultValue:t,onChange:o,onMouseDown:r,highlight:a})=>n.jsxs("label",{style:At,title:e,onMouseDown:r,children:[a?n.jsx("span",{style:{backgroundColor:"#ffff00",padding:"0 2px"},children:s}):s,n.jsx("input",{type:"color",defaultValue:t,onChange:o,style:Bt})]}),Ht={display:"flex",alignItems:"center",gap:"2px",flexWrap:"wrap"},ve={height:"28px",borderWidth:"1px",borderStyle:"solid",borderColor:"#ccc",borderRadius:"3px",fontSize:"12px",padding:"0 4px",cursor:"pointer",backgroundColor:"#fff"},Rt={width:"1px",height:"20px",backgroundColor:"#ddd",margin:"0 4px"},At={position:"relative",width:"28px",height:"28px",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",fontSize:"13px",fontWeight:"bold"},Bt={position:"absolute",bottom:0,left:0,width:"100%",height:"4px",padding:0,borderWidth:0,borderStyle:"none",cursor:"pointer"},qe=({pageConfig:s,pageCount:e,onPageConfigChange:t})=>{const o=l.useCallback(i=>{const d=i.target.value;t({size:d})},[t]),r=l.useCallback(i=>d=>{const h=Math.max(0,parseInt(d.target.value)||0);t({margins:{...s.margins,[i]:h}})},[s.margins,t]),a=typeof s.size=="string"?s.size:"custom";return n.jsxs("div",{style:Pt,children:[n.jsxs("label",{style:_t,children:["Page:",n.jsxs("select",{value:a,onChange:o,style:Dt,children:[n.jsx("option",{value:"letter",children:"Letter (8.5 x 11)"}),n.jsx("option",{value:"a4",children:"A4 (210 x 297mm)"}),n.jsx("option",{value:"legal",children:"Legal (8.5 x 14)"})]})]}),n.jsx("div",{style:Re}),n.jsx("span",{style:{fontSize:"12px",color:"#666"},children:"Margins (px):"}),n.jsx(me,{label:"T",value:s.margins.top,onChange:r("top")}),n.jsx(me,{label:"R",value:s.margins.right,onChange:r("right")}),n.jsx(me,{label:"B",value:s.margins.bottom,onChange:r("bottom")}),n.jsx(me,{label:"L",value:s.margins.left,onChange:r("left")}),n.jsx("div",{style:Re}),n.jsxs("span",{style:{fontSize:"12px",color:"#666"},children:[e," ",e===1?"page":"pages"]})]})},me=({label:s,value:e,onChange:t})=>n.jsxs("label",{style:It,title:`${s} margin`,children:[s,":",n.jsx("input",{type:"number",value:e,onChange:t,style:Nt,min:0,max:300,step:12})]}),Pt={display:"flex",alignItems:"center",gap:"6px",flexWrap:"wrap"},_t={display:"flex",alignItems:"center",gap:"4px",fontSize:"12px",color:"#666"},Dt={height:"26px",borderWidth:"1px",borderStyle:"solid",borderColor:"#ccc",borderRadius:"3px",fontSize:"12px",padding:"0 4px",cursor:"pointer",backgroundColor:"#fff"},Re={width:"1px",height:"20px",backgroundColor:"#ddd",margin:"0 4px"},It={display:"flex",alignItems:"center",gap:"2px",fontSize:"11px",color:"#666"},Nt={width:"44px",height:"24px",borderWidth:"1px",borderStyle:"solid",borderColor:"#ccc",borderRadius:"3px",fontSize:"11px",textAlign:"center",padding:"0 2px"},Ft=({pageConfig:s,pageCount:e,onExecCommand:t,onPageConfigChange:o})=>n.jsxs("div",{style:zt,children:[n.jsx("div",{style:Ae,children:n.jsx(ze,{onExecCommand:t})}),n.jsx("div",{style:Ae,children:n.jsx(qe,{pageConfig:s,pageCount:e,onPageConfigChange:o})})]}),zt={borderBottomWidth:"1px",borderBottomStyle:"solid",borderBottomColor:"#d0d0d0",backgroundColor:"#f8f8f8",padding:"4px 8px",display:"flex",flexDirection:"column",gap:"4px",flexShrink:0,zIndex:10},Ae={display:"flex",alignItems:"center",gap:"4px",minHeight:"32px"};function qt(s={}){const{initialHTML:e="",initialCSS:t="",initialConfig:o=ge}=s,r=l.useRef(new Ie(o)),[a,i]=l.useState({pages:[{blockIndices:[]}],pageCount:1}),[d,h]=l.useState(o),f=l.useCallback((E,k)=>{r.current.loadHTML(E,k)},[]),b=l.useCallback(E=>{r.current.setPageConfig(E),h(r.current.getPageConfig())},[]),L=l.useCallback(()=>{const{result:E}=r.current.runPagination();i(E)},[]),j=l.useCallback(()=>r.current.getHTML(),[]),v=l.useCallback(()=>r.current.getPlainText(),[]);return l.useEffect(()=>{e&&r.current.loadHTML(e,t)},[e,t]),l.useEffect(()=>r.current.onPagination(k=>{i(k)}),[]),l.useEffect(()=>()=>{r.current.destroy()},[]),{engine:r.current,paginationResult:a,pageConfig:d,loadHTML:f,setPageConfig:b,triggerPagination:L,getHTML:j,getPlainText:v}}exports.DEFAULT_MARGINS=Pe;exports.DEFAULT_PAGE_CONFIG=ge;exports.DocumentAPI=Lt;exports.DocumentEngine=Ie;exports.DopeCanvas=Tt;exports.EditableManager=ce;exports.PAGE_SIZE_PRESETS=Te;exports.PageLayoutEngine=Me;exports.PageSetupToolbar=qe;exports.TextToolbar=ze;exports.Toolbar=Ft;exports.recombineSplitBlocks=De;exports.trySplitBlock=pe;exports.useDocumentEngine=qt;exports.useFormattingState=Ne;exports.useSelectionContext=jt;exports.useSelectionSaver=Fe;
|
|
9
54
|
//# sourceMappingURL=dopecanvas.cjs.map
|