react-edit-to-html 1.3.12 → 1.3.14

package/dist/index.cjs

@@ -216,4 +216,4 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 `}}),i&&(t+=`  </div>
 `)}),t+=`  </div>
 `,t+=`</body>
-</html>`,t};(0,l.useEffect)(()=>{_&&_(Nt(!1))},[Je,_]);let Pt=()=>{let e=Nt(!1);if(h)h(e);else{let t=new Blob([e],{type:`text/html;charset=utf-8;`}),n=document.createElement(`a`);n.href=URL.createObjectURL(t),n.download=`exported_template.html`,n.click()}},Ft=()=>{let e=Nt(!0);if(g)g(e);else{let t=window.open(``,`_blank`);t&&(t.document.write(e),t.document.close(),t.focus(),setTimeout(()=>{t.print(),t.close()},500))}},It=()=>{Ye([]),Ze(null)},Lt=(e,t)=>{let n=e.dataTransfer.getData(`placeholder`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=`{{${n.replace(/[{}]/g,``)}}}`;Ye(e=>e.map(e=>e.id===t?T(T({},e),{},{content:e.content+r}):e))},Rt=(e,t,n,r)=>{let i=e.dataTransfer.getData(`placeholder`);if(!i)return;e.preventDefault(),e.stopPropagation();let a=i.startsWith(`{{`)?i:`{{${i}}}`;zt(t,n,a,r)},zt=(e,t,n,r,i)=>{let a=o=>o.map(o=>{if(o.id===e&&o.type===`table`&&o.tableInfo){var s;if(i!==void 0&&r===void 0){let e=(o.tableInfo.columns||[])[t];if(e&&e.columnName){let t=o.tableInfo.mockRows&&o.tableInfo.mockRows.length>0?[...o.tableInfo.mockRows]:[{}];for(;t.length<=i;)t.push({});return t[i]=T(T({},t[i]),{},{[e.columnName]:n}),T(T({},o),{},{tableInfo:T(T({},o.tableInfo),{},{mockRows:t})})}}let e=[...o.tableInfo.columns];if(r!==void 0&&(s=e[t])!=null&&s.columns){let i=[...e[t].columns];i[r]=T(T({},i[r]),{},{placeholder:n}),e[t]=T(T({},e[t]),{},{columns:i})}else e[t]=T(T({},e[t]),{},{placeholder:n});return T(T({},o),{},{tableInfo:T(T({},o.tableInfo),{},{columns:e})})}return o.type===`layout`&&o.layoutInfo?T(T({},o),{},{layoutInfo:T(T({},o.layoutInfo),{},{columns:o.layoutInfo.columns.map(e=>T(T({},e),{},{blocks:a(e.blocks)}))})}):o});Ye(e=>a(e))};return(0,d.jsxs)(`div`,{className:`reth-editor h-screen max-h-screen bg-slate-50 flex flex-col font-sans overflow-hidden`,children:[O&&(0,d.jsx)(_x,{headerLogo:o,headerTitle:i,headerSubtitle:a,parseError:Fe,isParsing:je,parseStatusText:Ne,themeColor:se}),(0,d.jsxs)(`div`,{className:`flex-1 min-h-0 h-full grid grid-cols-1 lg:grid-cols-12 overflow-hidden`,children:[(0,d.jsxs)(`main`,{className:`w-full lg:col-span-8 h-full min-h-0 flex flex-col bg-slate-100 border-b lg:border-b-0 ${A===`left`?`lg:border-l lg:order-2`:`lg:border-r lg:order-1`} border-gray-200 overflow-hidden relative`,children:[(0,d.jsx)(jx,{showImportHtml:x,showImportPdf:S,showPreview:w,showExport:E,showExportPdf:D,showClearCanvas:C,customButtonStyles:M,customButtonClassNames:ae,customActionComponents:oe,handleHtmlImport:At,handlePdfImport:jt,setPreviewOpen:xt,handleExport:Pt,handleExportPdf:Ft,handleClearCanvas:It,zoom:ce,setZoom:le,setPanOffset:ue,themeColor:se}),(0,d.jsx)(Ax,{blocks:Je,setBlocks:Ye,selectedBlockId:Xe,setSelectedBlockId:Ze,setActiveTab:yt,showMockData:St,placeholderMockData:kt,dragOverIndex:L,setDragOverIndex:Re,draggedSidebarItem:Le,defaultStyles:b,zoom:ce,panOffset:N,spacePressed:de,canvasHeight:fe,setCanvasHeight:pe,viewportRef:me,canvasContainerRef:he,contentRef:ge,handleMouseDown:_e,handleMouseMove:ve,handleMouseUp:ye,createTextBlock:B,createImageBlock:$e,createLayoutBlock:et,addColumnToLayout:tt,deleteColumnFromLayout:nt,mergeColumns:rt,updateColumnStyle:it,duplicateBlock:st,reorderBlock:(e,t)=>{t===`up`?ct(e):lt(e)},handleDeleteBlock:ot,handleSidebarDrop:e=>{if(!Le)return;let t;if(Le.type===`layout`)t=et(Le.columnsCount||2);else if(Le.type===`table`&&Le.tableSchema)t=Qe(Le.tableSchema);else if(Le.type===`image`&&Le.imageType)t=$e(Le.imageType);else{let e=`Enter text here...`;Le.type===`h1`?e=`Heading 1`:Le.type===`h2`?e=`Heading 2`:Le.type===`h3`?e=`Heading 3`:Le.type===`title`?e=`Document Title`:Le.type===`subtitle`?e=`Document Subtitle`:Le.type===`caption`&&(e=`Caption text...`),t=B(Le.type,e,b==null?void 0:b[Le.type])}Ye(n=>{let r=[...n];return r.splice(e,0,t),r}),Ze(t.id),yt(`styles`),I(null)},handleTableCellDrop:Rt,updateTableCell:zt,updateTableCellColspan:(e,t,n,r)=>{let i=a=>a.map(a=>{var o;if(a.id===e&&a.type===`table`&&a.tableInfo){let e=(a.tableInfo.columns||[])[t];if(e&&e.columnName){let t=a.tableInfo.mockRows&&a.tableInfo.mockRows.length>0?[...a.tableInfo.mockRows]:[{}];for(;t.length<=r;)t.push({});return t[r]=T(T({},t[r]),{},{[`${e.columnName}_colspan`]:n}),T(T({},a),{},{tableInfo:T(T({},a.tableInfo),{},{mockRows:t})})}}return a.type===`layout`&&(o=a.layoutInfo)!=null&&o.columns?T(T({},a),{},{layoutInfo:T(T({},a.layoutInfo),{},{columns:a.layoutInfo.columns.map(e=>T(T({},e),{},{blocks:i(e.blocks)}))})}):a});Ye(e=>i(e))},handleTextDrop:Lt,themeColor:se})]}),(0,d.jsx)(Tx,{activeTab:vt,setActiveTab:yt,themeColor:se,setBlocks:Ye,selectedBlockId:Xe,setSelectedBlockId:Ze,getSelectedBlock:z,defaultStyles:b,createTextBlock:B,createImageBlock:$e,createLayoutBlock:et,addColumnToLayout:tt,deleteColumnFromLayout:nt,mergeColumns:rt,updateColumnStyle:it,updateColumnWidth:at,updateSelectedStyle:ut,updateSelectedImageInfo:dt,handleDeleteBlock:ot,handleRemoveTableColumn:ft,handleAddTableColumn:pt,handleUpdateTableColumn:mt,handleReorderTableColumn:ht,handleAddTableRow:gt,handleRemoveTableRow:_t,schemas:Ae,toggleSchemaColumn:Ge,customTableName:be,setCustomTableName:xe,customLoopStart:Se,setCustomLoopStart:Ce,customLoopEnd:we,setCustomLoopEnd:P,handleAddCustomTable:Ue,newColName:F,setNewColName:Te,newColPlaceholder:Ee,setNewColPlaceholder:De,customImageTypes:Ve,newImgTypeName:ze,setNewImgTypeName:Be,handleAddCustomImageType:We,placeholders:t,searchPlaceholder:He,setSearchPlaceholder:R,handleSidebarDragStart:(e,t,n,r,i)=>{I({type:t,tableSchema:n,imageType:r,columnsCount:i}),e.dataTransfer.setData(`source`,`sidebar`),e.dataTransfer.setData(`blockType`,t),i&&e.dataTransfer.setData(`columnsCount`,String(i)),r&&e.dataTransfer.setData(`imageType`,r),e.dataTransfer.effectAllowed=`copy`},isTablesLoading:te,tablesLoading:ne,isPlaceholdersLoading:re,placeholdersLoading:ie,fontSizesState:Ct,fontFamiliesState:wt,fontWeightsState:Tt,sidebarPosition:A})]}),(0,d.jsx)(Nx,{bubbleCoords:Oe,applySelectionFormat:Ke}),(0,d.jsx)(Mx,{previewOpen:bt,setPreviewOpen:xt,generateExportHtml:Nt})]})}var Lx=Ix,Rx=new WeakMap;function zx(e,t){let n=Rx.get(e);return n||(n=(0,u.createRoot)(e),Rx.set(e,n)),n.render(l.default.createElement(Ix,t)),n}function Bx(e){let t=Rx.get(e);return t?(t.unmount(),Rx.delete(e),!0):!1}exports.HtmlEditor=Ix,exports.default=Lx,exports.mountHtmlEditor=zx,exports.unmountHtmlEditor=Bx;
+</html>`,t};(0,l.useEffect)(()=>{_&&_(Nt(!1))},[Je,_]);let Pt=()=>{let e=Nt(!1);if(h)h(e);else{let t=new Blob([e],{type:`text/html;charset=utf-8;`}),n=document.createElement(`a`);n.href=URL.createObjectURL(t),n.download=`exported_template.html`,n.click()}},Ft=()=>{let e=Nt(!0);if(g)g(e);else{let t=window.open(``,`_blank`);t&&(t.document.write(e),t.document.close(),t.focus(),setTimeout(()=>{t.print(),t.close()},500))}},It=()=>{Ye([]),Ze(null)},Lt=(e,t)=>{let n=e.dataTransfer.getData(`placeholder`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=`{{${n.replace(/[{}]/g,``)}}}`;Ye(e=>e.map(e=>e.id===t?T(T({},e),{},{content:e.content+r}):e))},Rt=(e,t,n,r)=>{let i=e.dataTransfer.getData(`placeholder`);if(!i)return;e.preventDefault(),e.stopPropagation();let a=i.startsWith(`{{`)?i:`{{${i}}}`;zt(t,n,a,r)},zt=(e,t,n,r,i)=>{let a=o=>o.map(o=>{if(o.id===e&&o.type===`table`&&o.tableInfo){var s;if(i!==void 0&&r===void 0){let e=(o.tableInfo.columns||[])[t];if(e&&e.columnName){let t=o.tableInfo.mockRows&&o.tableInfo.mockRows.length>0?[...o.tableInfo.mockRows]:[{}];for(;t.length<=i;)t.push({});return t[i]=T(T({},t[i]),{},{[e.columnName]:n}),T(T({},o),{},{tableInfo:T(T({},o.tableInfo),{},{mockRows:t})})}}let e=[...o.tableInfo.columns];if(r!==void 0&&(s=e[t])!=null&&s.columns){let i=[...e[t].columns];i[r]=T(T({},i[r]),{},{placeholder:n}),e[t]=T(T({},e[t]),{},{columns:i})}else e[t]=T(T({},e[t]),{},{placeholder:n});return T(T({},o),{},{tableInfo:T(T({},o.tableInfo),{},{columns:e})})}return o.type===`layout`&&o.layoutInfo?T(T({},o),{},{layoutInfo:T(T({},o.layoutInfo),{},{columns:o.layoutInfo.columns.map(e=>T(T({},e),{},{blocks:a(e.blocks)}))})}):o});Ye(e=>a(e))};return(0,d.jsxs)(`div`,{className:`reth-editor h-screen max-h-screen bg-slate-50 flex flex-col font-sans overflow-hidden`,children:[O&&(0,d.jsx)(_x,{headerLogo:o,headerTitle:i,headerSubtitle:a,parseError:Fe,isParsing:je,parseStatusText:Ne,themeColor:se}),(0,d.jsxs)(`div`,{className:`flex-1 min-h-0 h-full grid grid-cols-1 lg:grid-cols-12 overflow-hidden`,children:[(0,d.jsxs)(`main`,{className:`w-full lg:col-span-8 h-full min-h-0 flex flex-col bg-slate-100 border-b lg:border-b-0 ${A===`left`?`lg:border-l lg:order-2`:`lg:border-r lg:order-1`} border-gray-200 overflow-hidden relative`,children:[(0,d.jsx)(jx,{showImportHtml:x,showImportPdf:S,showPreview:w,showExport:E,showExportPdf:D,showClearCanvas:C,customButtonStyles:M,customButtonClassNames:ae,customActionComponents:oe,handleHtmlImport:At,handlePdfImport:jt,setPreviewOpen:xt,handleExport:Pt,handleExportPdf:Ft,handleClearCanvas:It,zoom:ce,setZoom:le,setPanOffset:ue,themeColor:se}),(0,d.jsx)(Ax,{blocks:Je,setBlocks:Ye,selectedBlockId:Xe,setSelectedBlockId:Ze,setActiveTab:yt,showMockData:St,placeholderMockData:kt,dragOverIndex:L,setDragOverIndex:Re,draggedSidebarItem:Le,defaultStyles:b,zoom:ce,panOffset:N,spacePressed:de,canvasHeight:fe,setCanvasHeight:pe,viewportRef:me,canvasContainerRef:he,contentRef:ge,handleMouseDown:_e,handleMouseMove:ve,handleMouseUp:ye,createTextBlock:B,createImageBlock:$e,createLayoutBlock:et,addColumnToLayout:tt,deleteColumnFromLayout:nt,mergeColumns:rt,updateColumnStyle:it,duplicateBlock:st,reorderBlock:(e,t)=>{t===`up`?ct(e):lt(e)},handleDeleteBlock:ot,handleSidebarDrop:e=>{if(!Le)return;let t;if(Le.type===`layout`)t=et(Le.columnsCount||2);else if(Le.type===`table`&&Le.tableSchema)t=Qe(Le.tableSchema);else if(Le.type===`image`&&Le.imageType)t=$e(Le.imageType);else{let e=`Enter text here...`;Le.type===`h1`?e=`Heading 1`:Le.type===`h2`?e=`Heading 2`:Le.type===`h3`?e=`Heading 3`:Le.type===`title`?e=`Document Title`:Le.type===`subtitle`?e=`Document Subtitle`:Le.type===`caption`&&(e=`Caption text...`),t=B(Le.type,e,b==null?void 0:b[Le.type])}Ye(n=>{let r=[...n];return r.splice(e,0,t),r}),Ze(t.id),yt(`styles`),I(null)},handleTableCellDrop:Rt,updateTableCell:zt,updateTableCellColspan:(e,t,n,r)=>{let i=a=>a.map(a=>{var o;if(a.id===e&&a.type===`table`&&a.tableInfo){let e=(a.tableInfo.columns||[])[t];if(e&&e.columnName){let t=a.tableInfo.mockRows&&a.tableInfo.mockRows.length>0?[...a.tableInfo.mockRows]:[{}];for(;t.length<=r;)t.push({});return t[r]=T(T({},t[r]),{},{[`${e.columnName}_colspan`]:n}),T(T({},a),{},{tableInfo:T(T({},a.tableInfo),{},{mockRows:t})})}}return a.type===`layout`&&(o=a.layoutInfo)!=null&&o.columns?T(T({},a),{},{layoutInfo:T(T({},a.layoutInfo),{},{columns:a.layoutInfo.columns.map(e=>T(T({},e),{},{blocks:i(e.blocks)}))})}):a});Ye(e=>i(e))},handleTextDrop:Lt,themeColor:se})]}),(0,d.jsx)(Tx,{activeTab:vt,setActiveTab:yt,themeColor:se,setBlocks:Ye,selectedBlockId:Xe,setSelectedBlockId:Ze,getSelectedBlock:z,defaultStyles:b,createTextBlock:B,createImageBlock:$e,createLayoutBlock:et,addColumnToLayout:tt,deleteColumnFromLayout:nt,mergeColumns:rt,updateColumnStyle:it,updateColumnWidth:at,updateSelectedStyle:ut,updateSelectedImageInfo:dt,handleDeleteBlock:ot,handleRemoveTableColumn:ft,handleAddTableColumn:pt,handleUpdateTableColumn:mt,handleReorderTableColumn:ht,handleAddTableRow:gt,handleRemoveTableRow:_t,schemas:Ae,toggleSchemaColumn:Ge,customTableName:be,setCustomTableName:xe,customLoopStart:Se,setCustomLoopStart:Ce,customLoopEnd:we,setCustomLoopEnd:P,handleAddCustomTable:Ue,newColName:F,setNewColName:Te,newColPlaceholder:Ee,setNewColPlaceholder:De,customImageTypes:Ve,newImgTypeName:ze,setNewImgTypeName:Be,handleAddCustomImageType:We,placeholders:t,searchPlaceholder:He,setSearchPlaceholder:R,handleSidebarDragStart:(e,t,n,r,i)=>{I({type:t,tableSchema:n,imageType:r,columnsCount:i}),e.dataTransfer.setData(`source`,`sidebar`),e.dataTransfer.setData(`blockType`,t),i&&e.dataTransfer.setData(`columnsCount`,String(i)),r&&e.dataTransfer.setData(`imageType`,r),e.dataTransfer.effectAllowed=`copy`},isTablesLoading:te,tablesLoading:ne,isPlaceholdersLoading:re,placeholdersLoading:ie,fontSizesState:Ct,fontFamiliesState:wt,fontWeightsState:Tt,sidebarPosition:A})]}),(0,d.jsx)(Nx,{bubbleCoords:Oe,applySelectionFormat:Ke}),(0,d.jsx)(Mx,{previewOpen:bt,setPreviewOpen:xt,generateExportHtml:Nt})]})}var Lx=Ix,Rx=new WeakMap;function zx(e,t){let n=Rx.get(e);return n||(n=(0,u.createRoot)(e),Rx.set(e,n)),n.render(l.default.createElement(Ix,t)),n}function Bx(e){let t=Rx.get(e);return t?(t.unmount(),Rx.delete(e),!0):!1}exports.HtmlEditor=Ix,exports.default=Lx,exports.mountHtmlEditor=zx,exports.parseHtmlToBlocks=Sb,exports.unmountHtmlEditor=Bx;

package/dist/index.js

@@ -22162,4 +22162,4 @@ function Hx(e) {
 	return t ? (t.unmount(), Bx.delete(e), !0) : !1;
 }
 //#endregion
-export { Rx as HtmlEditor, zx as default, Vx as mountHtmlEditor, Hx as unmountHtmlEditor };
+export { Rx as HtmlEditor, zx as default, Vx as mountHtmlEditor, wb as parseHtmlToBlocks, Hx as unmountHtmlEditor };

package/dist/src/index.d.ts

@@ -1,9 +1,10 @@
 import { Root } from 'react-dom/client';
 import { default as HtmlEditor } from './App';
 import { HtmlEditorProps } from './types';
+import { parseHtmlToBlocks } from './utils/htmlParser';
 export * from './types';
 export default HtmlEditor;
-export { HtmlEditor };
+export { HtmlEditor, parseHtmlToBlocks };
 /**
  * Helper function to mount the HtmlEditor into any DOM element.
  * Works seamlessly in Vue, Angular, Svelte, or Vanilla JavaScript projects.

package/dist/src/utils/htmlParser.d.ts

@@ -0,0 +1,5 @@
+import { CanvasBlock } from '../types';
+/**
+ * Parses raw HTML string and extracts structural CanvasBlock elements.
+ */
+export declare const parseHtmlToBlocks: (htmlText: string) => CanvasBlock[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-edit-to-html",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "author": "BEO Software (https://beo-software.in/)",
   "homepage": "https://beo-software.in/",
   "license": "SEE LICENSE IN LICENSE",