polotno 2.36.10 → 2.37.1

package/side-panel/elements-panel.js

@@ -1,11 +1,11 @@
-import e from"react";import{isAlive as t}from"mobx-state-tree";import{InputGroup as r}from"@blueprintjs/core";import{Search as i}from"@blueprintjs/icons";import{ImagesGrid as o}from"./images-grid.js";import{svgToURL as s}from"../utils/svg.js";import{figureToSvg as a,TYPES as n}from"../utils/figure-to-svg.js";import d from"../utils/styled.js";import{t as l}from"../utils/l10n.js";import{useInfiniteAPI as c}from"../utils/use-api.js";import{URLS as h}from"../utils/api.js";const p=async e=>{const t=await fetch(h.nounProjectDownload(e)),r=await t.text();return await s(r)},u=d("div")`
+import e from"react";import{isAlive as t}from"mobx-state-tree";import{InputGroup as r}from"@blueprintjs/core";import{Search as o}from"@blueprintjs/icons";import{ImagesGrid as i}from"./images-grid.js";import{svgToURL as s}from"../utils/svg.js";import{figureToSvg as a,TYPES as n}from"../utils/figure-to-svg.js";import l from"../utils/styled.js";import{t as d}from"../utils/l10n.js";import{useInfiniteAPI as c}from"../utils/use-api.js";import{URLS as h}from"../utils/api.js";const p=async e=>{const t=await fetch(h.nounProjectDownload(e)),r=await t.text();return await s(r)},u=l("div")`
   height: 100%;
   overflow: hidden;
 
   .bp5-dark & img {
     filter: invert(1);
   }
-`;export const NounprojectPanel=({store:r,query:i})=>{const{data:s,isLoading:a,loadMore:n,setQuery:d,hasMore:l}=c({defaultQuery:i,getAPI:({page:e,query:t})=>h.nounProjectList({query:t,page:e}),getSize:e=>e.pagesNumber});return e.useEffect(()=>{d(i)},[i]),e.createElement(u,null,e.createElement(o,{shadowEnabled:!1,images:null==s?void 0:s.map(e=>e.icons).flat(),getPreview:e=>e.preview_url_84,isLoading:a,onSelect:async(e,i,o)=>{if(o&&"image"===o.type&&o.contentEditable){const t=await p(e.id);return void o.set({clipSrc:t})}if(o&&"video"===o.type&&o.contentEditable){const t=await p(e.id);return void o.set({clipSrc:t})}r.history.transaction(async()=>{var o;const s=((null==i?void 0:i.x)||r.width/2)-100,a=((null==i?void 0:i.y)||r.height/2)-100,n=null===(o=r.activePage)||void 0===o?void 0:o.addElement({type:"svg",width:200,height:200,x:s,y:a}),d=await p(e.id);t(n)&&await n.set({src:d})})},rowsNumber:4,loadMore:l&&n}))};const g=[{preview:s`
+`;export const NounprojectPanel=({store:r,query:o})=>{const{data:s,isLoading:a,loadMore:n,setQuery:l,hasMore:d}=c({defaultQuery:o,getAPI:({page:e,query:t})=>h.nounProjectList({query:t,page:e}),getSize:e=>e.pagesNumber});return e.useEffect(()=>{l(o)},[o]),e.createElement(u,null,e.createElement(i,{shadowEnabled:!1,images:null==s?void 0:s.map(e=>e.icons).flat(),getPreview:e=>e.preview_url_84,isLoading:a,onSelect:async(e,o,i)=>{if(i&&"image"===i.type&&i.contentEditable){const t=await p(e.id);return void i.set({clipSrc:t})}if(i&&"video"===i.type&&i.contentEditable){const t=await p(e.id);return void i.set({clipSrc:t})}r.history.transaction(async()=>{var i;const s=((null==o?void 0:o.x)||r.width/2)-100,a=((null==o?void 0:o.y)||r.height/2)-100,n=null===(i=r.activePage)||void 0===i?void 0:i.addElement({type:"svg",width:200,height:200,x:s,y:a}),l=await p(e.id);t(n)&&await n.set({src:l})})},rowsNumber:4,loadMore:d&&n}))};const g=[{preview:s`
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="16">
   <path stroke="#C0BFBF" strokeWidth="4" d="M 1 8 L 30 8"></path>
 </svg>
@@ -76,8 +76,10 @@ import e from"react";import{isAlive as t}from"mobx-state-tree";import{InputGroup
       strokeLinecap="round"
     ></path>
   </svg>
-`,data:{startHead:"square",endHead:"bar",dash:[2,1]}}];let m="rgba(191, 191, 191, 100)";export const setDefaultColor=e=>{m=e};const w=({store:t})=>e.createElement(o,{shadowEnabled:!1,rowsNumber:3,images:g,getPreview:e=>e.preview,itemHeight:50,isLoading:!1,onSelect:async(e,r,i)=>{const o=t.activePage.computedWidth/3;t.activePage.addElement(Object.assign({type:"line",x:r?r.x:t.activePage.computedWidth/2-o/2,y:r?r.y:t.activePage.computedHeight/2,color:m,width:o},e.data))}}),v=Object.keys(n),f=[{width:300,height:300,fill:"rgba(191, 191, 191, 100)",stroke:"#0c0c0c",strokeWidth:0,url:""}],k=[];v.forEach(e=>{f.forEach(t=>{k.push(Object.assign({subType:e},t))})}),k.forEach(e=>{e.url=s(a(e))});const y=d("div")`
+`,data:{startHead:"square",endHead:"bar",dash:[2,1]}}];function w(e,t){const r="#C0BFBF";let o="";for(let i=1;i<t;i++){const e=Math.round(i/t*80);o+=`<line x1="${e}" y1="0" x2="${e}" y2="60" stroke="${r}" stroke-width="1.5"/>`}for(let i=1;i<e;i++){const t=Math.round(i/e*60);o+=`<line x1="0" y1="${t}" x2="80" y2="${t}" stroke="${r}" stroke-width="1.5"/>`}return`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="60"><rect x="0.5" y="0.5" width="79" height="59" fill="none" stroke="${r}" stroke-width="1.5" rx="2"/>${o}</svg>`}const m=[{rows:2,cols:2,preview:s(w(2,2))},{rows:3,cols:3,preview:s(w(3,3))},{rows:4,cols:3,preview:s(w(4,3))},{rows:3,cols:4,preview:s(w(3,4))},{rows:4,cols:4,preview:s(w(4,4))},{rows:5,cols:3,preview:s(w(5,3))}];let v="rgba(191, 191, 191, 100)";export const setDefaultColor=e=>{v=e};const f=({store:t})=>e.createElement(i,{shadowEnabled:!1,rowsNumber:3,images:g,getPreview:e=>e.preview,itemHeight:50,isLoading:!1,onSelect:async(e,r,o)=>{const i=t.activePage.computedWidth/3;t.activePage.addElement(Object.assign({type:"line",x:r?r.x:t.activePage.computedWidth/2-i/2,y:r?r.y:t.activePage.computedHeight/2,color:v,width:i},e.data))}}),y=Object.keys(n),k=[{width:300,height:300,fill:"rgba(191, 191, 191, 100)",stroke:"#0c0c0c",strokeWidth:0,url:""}],E=[];y.forEach(e=>{k.forEach(t=>{E.push(Object.assign({subType:e},t))})}),E.forEach(e=>{e.url=s(a(e))});const x=l("div")`
   height: 220px;
-`,L=({store:t})=>{const r=Math.ceil(k.length/4)||1;return e.createElement(y,{style:{height:110*r+"px"}},e.createElement(o,{shadowEnabled:!1,rowsNumber:4,images:k,getPreview:e=>e.url,isLoading:!1,itemHeight:100,onSelect:async(e,r,i)=>{if(i&&"image"===i.type&&i.contentEditable){return void i.set({clipSrc:e.url})}if(i&&"video"===i.type&&i.contentEditable){return void i.set({clipSrc:e.url})}const o=t.activePage;if(!o){return}const s=(o.computedWidth+o.computedHeight)/2160,a=e.width*s,n=e.height*s,d=((null==r?void 0:r.x)||o.computedWidth/2)-a/2,l=((null==r?void 0:r.y)||o.computedHeight/2)-n/2;o.addElement(Object.assign(Object.assign({type:"figure"},e),{x:d,y:l,width:a,height:n,fill:m}))}}))},E=d("div")`
+`,L=({store:t})=>{const r=Math.ceil(E.length/4)||1;return e.createElement(x,{style:{height:110*r+"px"}},e.createElement(i,{shadowEnabled:!1,rowsNumber:4,images:E,getPreview:e=>e.url,isLoading:!1,itemHeight:100,onSelect:async(e,r,o)=>{if(o&&"image"===o.type&&o.contentEditable){return void o.set({clipSrc:e.url})}if(o&&"video"===o.type&&o.contentEditable){return void o.set({clipSrc:e.url})}const i=t.activePage;if(!i){return}const s=(i.computedWidth+i.computedHeight)/2160,a=e.width*s,n=e.height*s,l=((null==r?void 0:r.x)||i.computedWidth/2)-a/2,d=((null==r?void 0:r.y)||i.computedHeight/2)-n/2;i.addElement(Object.assign(Object.assign({type:"figure"},e),{x:l,y:d,width:a,height:n,fill:v}))}}))},B=({store:t})=>e.createElement(i,{shadowEnabled:!1,rowsNumber:3,images:m,getPreview:e=>e.preview,itemHeight:70,isLoading:!1,onSelect:async(e,r)=>{const o=t.activePage;if(!o){return}const i=(o.computedWidth+o.computedHeight)/2160,s=400*i,a=300*i,n=((null==r?void 0:r.x)||o.computedWidth/2)-s/2,l=((null==r?void 0:r.y)||o.computedHeight/2)-a/2;o.addElement({type:"table",x:n,y:l,width:s,height:a,rows:e.rows,cols:e.cols,fontSize:Math.round(30*i)})}}),b=l("div")`
   height: 220px;
-`;export const Shapes=({store:t})=>e.createElement("div",{style:{display:"flex",flexDirection:"column",height:"100%",overflow:"auto"}},e.createElement("p",null,l("sidePanel.lines")),e.createElement(E,null,e.createElement(w,{store:t})),e.createElement("p",null,l("sidePanel.shapes")),e.createElement(L,{store:t}));export const ElementsPanel=({store:t})=>{const o=e.useRef(),[s,a]=e.useState(""),[n,d]=e.useState(s);e.useEffect(()=>(o.current=setTimeout(()=>{d(s)},500),()=>{clearTimeout(o.current)}),[s]);const c=!!n;return e.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},e.createElement(r,{leftIcon:e.createElement(i,null),placeholder:l("sidePanel.searchPlaceholder"),onChange:e=>{a(e.target.value)},style:{marginBottom:"20px"},type:"search"}),c&&e.createElement(NounprojectPanel,{query:n,store:t}),!c&&e.createElement(Shapes,{store:t}))};
+`,F=l("div")`
+  height: 170px;
+`;export const Shapes=({store:t})=>e.createElement("div",{style:{display:"flex",flexDirection:"column",height:"100%",overflow:"auto"}},e.createElement("p",null,d("sidePanel.tables")),e.createElement(F,null,e.createElement(B,{store:t})),e.createElement("p",null,d("sidePanel.lines")),e.createElement(b,null,e.createElement(f,{store:t})),e.createElement("p",null,d("sidePanel.shapes")),e.createElement(L,{store:t}));export const ElementsPanel=({store:t})=>{const i=e.useRef(),[s,a]=e.useState(""),[n,l]=e.useState(s);e.useEffect(()=>(i.current=setTimeout(()=>{l(s)},500),()=>{clearTimeout(i.current)}),[s]);const c=!!n;return e.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},e.createElement(r,{leftIcon:e.createElement(o,null),placeholder:d("sidePanel.searchPlaceholder"),onChange:e=>{a(e.target.value)},style:{marginBottom:"20px"},type:"search"}),c&&e.createElement(NounprojectPanel,{query:n,store:t}),!c&&e.createElement(Shapes,{store:t}))};

package/side-panel/images-grid.js

@@ -47,4 +47,4 @@ import e from"react";import t from"../utils/styled.js";import{Spinner as r}from"
 `,m=t("p")`
   text-align: center;
   padding: 30px;
-`,p=({url:t,credit:r,onSelect:o,crossOrigin:a,shadowEnabled:n,itemHeight:i,className:m,onLoad:p,alt:u})=>{const h=null==n||n;return e.createElement(s,{onClick:()=>{o()},className:"polotno-close-panel"},e.createElement(d,{"data-shadowenabled":h},e.createElement(c,{className:m,style:{height:null!=i?i:"auto"},src:t,draggable:!0,loading:"lazy",crossOrigin:a,alt:u,onDragStart:()=>{l(({x:e,y:t},r,l)=>{o({x:e,y:t},r,l)})},onDragEnd:()=>{l(null)},onLoad:p}),r&&e.createElement(g,{className:"credit"},r)))};export const ImagesGrid=({images:t,onSelect:l,isLoading:a,getPreview:s,loadMore:d,getCredit:c,getAlt:g,getImageClassName:u,rowsNumber:h,crossOrigin:f="anonymous",shadowEnabled:b,itemHeight:w,error:x,hideNoResults:v=!1})=>{const y=h||2,E=e.useRef(null),N=[];for(var H=0;H<y;H++){N.push((t||[]).filter((e,t)=>t%y===H))}const j=e.useRef(null),k=()=>{var e;const r=E.current,o=!!r&&r.scrollHeight>r.offsetHeight+5,l=t&&t.length,n=Array.from(null!==(e=null==r?void 0:r.querySelectorAll("img"))&&void 0!==e?e:[]).every(e=>e.complete);!o&&d&&!a&&l&&n&&(j.current||(j.current=window.setTimeout(()=>{j.current=null,d&&d()},100)))},S=()=>{k()};return e.useEffect(()=>(k(),()=>{null!==j.current&&window.clearTimeout(j.current),j.current=null}),[t&&t.length,a]),e.createElement(n,{onScroll:e=>{const t=e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight;d&&!a&&t<200&&d()},ref:E},N.map((t,o)=>e.createElement(i,{key:o,style:{width:100/y+"%"}},t.map((t,r)=>e.createElement(p,{url:s(t),onSelect:(e,r,o)=>l(t,e,r,o),key:r,credit:c&&c(t),crossOrigin:f,shadowEnabled:b,itemHeight:w,className:u&&u(t),onLoad:S,alt:g&&g(t)||""})),a&&e.createElement("div",{style:{padding:"30px"}},e.createElement(r,null)))),!a&&(!t||!t.length)&&!x&&!v&&e.createElement(m,null,o("sidePanel.noResults")),x&&e.createElement(m,null,o("sidePanel.error")))};
+`,u=({url:t,credit:r,onSelect:o,crossOrigin:a,shadowEnabled:n,itemHeight:i,className:m,onLoad:u,alt:p})=>{const h=null==n||n;return e.createElement(s,{role:"button",onClick:()=>{o()},className:"polotno-close-panel"},e.createElement(d,{"data-shadowenabled":h},e.createElement(c,{className:m,style:{height:null!=i?i:"auto"},src:t,draggable:!0,loading:"lazy",crossOrigin:a,alt:p,onDragStart:()=>{l(({x:e,y:t},r,l)=>{o({x:e,y:t},r,l)})},onDragEnd:()=>{l(null)},onLoad:u}),r&&e.createElement(g,{className:"credit"},r)))};export const ImagesGrid=({images:t,onSelect:l,isLoading:a,getPreview:s,loadMore:d,getCredit:c,getAlt:g,getImageClassName:p,rowsNumber:h,crossOrigin:f="anonymous",shadowEnabled:b,itemHeight:w,error:x,hideNoResults:v=!1})=>{const y=h||2,E=e.useRef(null),N=[];for(var H=0;H<y;H++){N.push((t||[]).filter((e,t)=>t%y===H))}const j=e.useRef(null),k=()=>{var e;const r=E.current,o=!!r&&r.scrollHeight>r.offsetHeight+5,l=t&&t.length,n=Array.from(null!==(e=null==r?void 0:r.querySelectorAll("img"))&&void 0!==e?e:[]).every(e=>e.complete);!o&&d&&!a&&l&&n&&(j.current||(j.current=window.setTimeout(()=>{j.current=null,d&&d()},100)))},S=()=>{k()};return e.useEffect(()=>(k(),()=>{null!==j.current&&window.clearTimeout(j.current),j.current=null}),[t&&t.length,a]),e.createElement(n,{onScroll:e=>{const t=e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight;d&&!a&&t<200&&d()},ref:E},N.map((t,o)=>e.createElement(i,{key:o,style:{width:100/y+"%"}},t.map((t,r)=>e.createElement(u,{url:s(t),onSelect:(e,r,o)=>l(t,e,r,o),key:r,credit:c&&c(t),crossOrigin:f,shadowEnabled:b,itemHeight:w,className:p&&p(t),onLoad:S,alt:g&&g(t)||""})),a&&e.createElement("div",{style:{padding:"30px"}},e.createElement(r,null)))),!a&&(!t||!t.length)&&!x&&!v&&e.createElement(m,null,o("sidePanel.noResults")),x&&e.createElement(m,null,o("sidePanel.error")))};

package/side-panel/tab-button.js

@@ -1,4 +1,4 @@
-import e from"react";import t from"../utils/styled.js";import{mobileStyle as i}from"../utils/screen.js";const n=t("div")`
+import t from"react";import e from"../utils/styled.js";import{mobileStyle as i}from"../utils/screen.js";const n=e("div")`
   width: 100%;
   height: 72px;
   padding-top: 15px;
@@ -20,4 +20,4 @@ import e from"react";import t from"../utils/styled.js";import{mobileStyle as i}f
   }
 
   ${i("\n    height: 54px;\n    padding-top: 9px;\n    min-width: 72px;\n    width: min-content;\n  ")}
-`;export const SectionTab=({children:t,name:i,onClick:o,active:p,iconSize:r})=>e.createElement(n,{onClick:o,className:"polotno-side-panel-tab"+(p?" active":"")},e.createElement("div",{style:{fontSize:(r||14)+"px"}},t),e.createElement("div",{style:{paddingTop:"5px"}},i));
+`;export const SectionTab=({children:e,name:i,onClick:o,active:p,iconSize:r})=>t.createElement(n,{role:"button",onClick:o,className:"polotno-side-panel-tab"+(p?" active":"")},t.createElement("div",{style:{fontSize:(r||14)+"px"}},e),t.createElement("div",{style:{paddingTop:"5px"}},i));

package/toolbar/table-toolbar.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StoreType } from '../model/store.js';
+import { TableElementType } from '../model/table-model.js';
+type Props = {
+    store: StoreType;
+    components?: any;
+};
+type ButtonProps = {
+    element?: TableElementType;
+    store: StoreType;
+    elements: TableElementType[];
+};
+export declare const TableBorderSettings: (({ elements, store }: {
+    elements: any[];
+    store: StoreType;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+export declare const TableStructureMenu: (({ element, store }: {
+    element: TableElementType;
+    store: StoreType;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+export declare const TableStructure: (({ elements, store }: ButtonProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export declare const CellPadding: (({ elements, store }: {
+    elements: any[];
+    store: StoreType;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+export declare const CellBackground: (({ elements, store }: {
+    elements: any[];
+    store: StoreType;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+export declare const CellVerticalAlign: (({ elements, store }: {
+    elements: any[];
+    store: StoreType;
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+export declare const TableToolbar: (({ store, components }: Props) => React.JSX.Element) & {
+    displayName: string;
+};
+export default TableToolbar;

package/toolbar/table-toolbar.js

@@ -0,0 +1 @@
+import e from"react";import{observer as t}from"mobx-react-lite";import{Button as o,Popover as l,Position as r,Tooltip as n,Menu as i,MenuItem as a,MenuDivider as c,Slider as s}from"@blueprintjs/core";import m from"@meronex/icons/zo/ZoStrokeWidth.js";import{Disable as d}from"@blueprintjs/icons";import h from"./color-picker.js";import{NumberInput as b}from"./filters-picker.js";import{ElementContainer as E,extendToolbar as u}from"./element-container.js";import{TextFontFamily as g,TextFontSize as x,TextFill as y,TextFontVariant as p,TextSpacing as k,VERTICAL_ALIGN_OPTIONS as C,VERTICAL_ALIGN_ICONS as f}from"./text-toolbar.js";import{AnimationsPicker as w}from"./animations-picker.js";import{flags as v}from"../utils/flags.js";import{t as T}from"../utils/l10n.js";const B=()=>e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},e.createElement("rect",{x:"1.5",y:"1.5",width:"13",height:"13",stroke:"currentColor",strokeWidth:"2",fill:"none"})),S=()=>e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},e.createElement("rect",{x:"1.5",y:"1.5",width:"13",height:"13",stroke:"currentColor",strokeWidth:"1",strokeOpacity:"0.3",fill:"none"}),e.createElement("line",{x1:"1",y1:"1.5",x2:"15",y2:"1.5",stroke:"currentColor",strokeWidth:"2"})),O=()=>e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},e.createElement("rect",{x:"1.5",y:"1.5",width:"13",height:"13",stroke:"currentColor",strokeWidth:"1",strokeOpacity:"0.3",fill:"none"}),e.createElement("line",{x1:"1",y1:"14.5",x2:"15",y2:"14.5",stroke:"currentColor",strokeWidth:"2"})),W=()=>e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},e.createElement("rect",{x:"1.5",y:"1.5",width:"13",height:"13",stroke:"currentColor",strokeWidth:"1",strokeOpacity:"0.3",fill:"none"}),e.createElement("line",{x1:"1.5",y1:"1",x2:"1.5",y2:"15",stroke:"currentColor",strokeWidth:"2"})),j=()=>e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},e.createElement("rect",{x:"1.5",y:"1.5",width:"13",height:"13",stroke:"currentColor",strokeWidth:"1",strokeOpacity:"0.3",fill:"none"}),e.createElement("line",{x1:"14.5",y1:"1",x2:"14.5",y2:"15",stroke:"currentColor",strokeWidth:"2"})),R=()=>e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},e.createElement("rect",{x:"1.5",y:"1.5",width:"13",height:"13",stroke:"currentColor",strokeWidth:"1",strokeOpacity:"0.3",fill:"none"}),e.createElement("line",{x1:"4",y1:"4",x2:"12",y2:"12",stroke:"currentColor",strokeWidth:"1.5"}),e.createElement("line",{x1:"12",y1:"4",x2:"4",y2:"12",stroke:"currentColor",strokeWidth:"1.5"})),A=["top","right","bottom","left"];export const TableBorderSettings=t(({elements:t,store:i})=>{const a=t[0],c="tablecell"===a.type,[E,u]=e.useState(new Set(A)),g=c?i.selectedElements[0]:a,x=[...E][0]||"top";let y;y=c?a:"bottom"===x?g.getCell(g.rows-1,0):"right"===x?g.getCell(0,g.cols-1):g.getCell(0,0);const p=(null==y?void 0:y.getEffectiveBorder)?y.getEffectiveBorder(x):{color:g.borderColor,width:g.borderWidth,style:g.borderStyle},k=p.color,C=p.width,f=p.style,w=e=>{i.history.transaction(()=>{const o={};if("borderColor"in e&&(o.color=e.borderColor),"borderWidth"in e&&(o.width=e.borderWidth),"borderStyle"in e&&(o.style=e.borderStyle),c){const e=t.map(e=>e.id);g.setCellBorders(e,[...E],o)}else{for(const{cellIds:e,sides:t}of(()=>{const e=[...E];if(4===e.length){return[{cellIds:g.cells.map(e=>e.id),sides:e}]}const t=[];for(const o of e){let e;e="top"===o?g.cells.filter(e=>0===e.row):"bottom"===o?g.cells.filter(e=>e.row===g.rows-1):"left"===o?g.cells.filter(e=>0===e.col):g.cells.filter(e=>e.col===g.cols-1),t.push({cellIds:e.map(e=>e.id),sides:[o]})}return t})()){g.setCellBorders(e,t,o)}4===E.size&&t.forEach(t=>t.set(e))}})};return e.createElement(l,{position:r.BOTTOM,content:e.createElement("div",{style:{padding:"15px",width:"270px"}},e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"15px"}},e.createElement(n,{content:T("toolbar.borderAllSides"),position:r.TOP},e.createElement(o,{small:!0,active:4===E.size,onClick:()=>u(new Set(A)),icon:e.createElement(B,null)})),e.createElement(n,{content:T("toolbar.borderTop"),position:r.TOP},e.createElement(o,{small:!0,active:E.has("top")&&1===E.size,onClick:()=>u(new Set(["top"])),icon:e.createElement(S,null)})),e.createElement(n,{content:T("toolbar.borderBottom"),position:r.TOP},e.createElement(o,{small:!0,active:E.has("bottom")&&1===E.size,onClick:()=>u(new Set(["bottom"])),icon:e.createElement(O,null)})),e.createElement(n,{content:T("toolbar.borderLeft"),position:r.TOP},e.createElement(o,{small:!0,active:E.has("left")&&1===E.size,onClick:()=>u(new Set(["left"])),icon:e.createElement(W,null)})),e.createElement(n,{content:T("toolbar.borderRight"),position:r.TOP},e.createElement(o,{small:!0,active:E.has("right")&&1===E.size,onClick:()=>u(new Set(["right"])),icon:e.createElement(j,null)})),e.createElement(n,{content:T("toolbar.borderNone"),position:r.TOP},e.createElement(o,{small:!0,onClick:()=>{w({borderStyle:"none"}),u(new Set(A))},icon:e.createElement(R,null)}))),e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"15px"}},e.createElement(o,{onClick:()=>w({borderStyle:"none"}),active:"none"===f,style:{width:"44px",height:"34px"},icon:e.createElement(d,{size:20})}),e.createElement(o,{onClick:()=>w({borderStyle:"solid"}),active:"solid"===f},e.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},e.createElement("line",{x2:"24",y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"}))),e.createElement(o,{onClick:()=>w({borderStyle:"dashed"}),active:"dashed"===f},e.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},e.createElement("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"}))),e.createElement(o,{onClick:()=>w({borderStyle:"dotted"}),active:"dotted"===f},e.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24"},e.createElement("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})))),e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"10px"}},e.createElement("div",{className:"bp5-control bp5-align-right"},T("toolbar.tableBorderColor")),e.createElement(h,{value:k,onChange:e=>w({borderColor:e}),store:i})),e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px"}},e.createElement("div",{className:"bp5-control bp5-align-right"},T("toolbar.tableBorderWidth")),e.createElement(b,{value:C,onValueChange:e=>w({borderWidth:e}),style:{width:"50px"},min:0,max:20,buttonPosition:"none"})),e.createElement(s,{value:C,onChange:e=>w({borderWidth:e}),min:0,max:20,labelRenderer:!1}))},e.createElement(n,{content:T("toolbar.tableBorderSettings"),position:r.BOTTOM},e.createElement(o,{minimal:!0,icon:e.createElement(m,null),"aria-label":T("toolbar.tableBorderSettings")})))});const P=()=>e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},e.createElement("rect",{x:"1",y:"1",width:"14",height:"14",rx:"1",stroke:"currentColor",strokeWidth:"1.5",fill:"none"}),e.createElement("line",{x1:"5.5",y1:"1",x2:"5.5",y2:"15",stroke:"currentColor",strokeWidth:"1"}),e.createElement("line",{x1:"10.5",y1:"1",x2:"10.5",y2:"15",stroke:"currentColor",strokeWidth:"1"}),e.createElement("line",{x1:"1",y1:"5.5",x2:"15",y2:"5.5",stroke:"currentColor",strokeWidth:"1"}),e.createElement("line",{x1:"1",y1:"10.5",x2:"15",y2:"10.5",stroke:"currentColor",strokeWidth:"1"}));export const TableStructureMenu=t(({element:t,store:o})=>{const l=t.focusedCells[0],r=null==l?void 0:l.row,n=null==l?void 0:l.col,s=null!=l;return e.createElement(i,null,s&&e.createElement(e.Fragment,null,e.createElement(c,{title:T("toolbar.tableRows")}),e.createElement(a,{text:T("toolbar.insertRowAbove"),onClick:()=>{o.history.transaction(()=>{t.addRow(r)})}}),e.createElement(a,{text:T("toolbar.insertRowBelow"),onClick:()=>{o.history.transaction(()=>{t.addRow(r+1)})}}),e.createElement(a,{text:T("toolbar.deleteRow"),disabled:t.rows<=1,onClick:()=>{o.history.transaction(()=>{t.removeRow(r)})}}),e.createElement(c,{title:T("toolbar.tableColumns")}),e.createElement(a,{text:T("toolbar.insertColumnLeft"),onClick:()=>{o.history.transaction(()=>{t.addColumn(n)})}}),e.createElement(a,{text:T("toolbar.insertColumnRight"),onClick:()=>{o.history.transaction(()=>{t.addColumn(n+1)})}}),e.createElement(a,{text:T("toolbar.deleteColumn"),disabled:t.cols<=1,onClick:()=>{o.history.transaction(()=>{t.removeColumn(n)})}}),e.createElement(c,null)),e.createElement(a,{text:T("toolbar.distributeRowsEvenly"),onClick:()=>{o.history.transaction(()=>{t.distributeRowsEvenly()})}}),e.createElement(a,{text:T("toolbar.distributeColumnsEvenly"),onClick:()=>{o.history.transaction(()=>{t.distributeColumnsEvenly()})}}))});export const TableStructure=t(({elements:t,store:i})=>{const a=t[0];return e.createElement(l,{position:r.BOTTOM,content:e.createElement(TableStructureMenu,{element:a,store:i})},e.createElement(n,{content:T("toolbar.tableStructure"),position:r.BOTTOM},e.createElement(o,{minimal:!0,icon:e.createElement(P,null),"aria-label":T("toolbar.tableStructure")})))});export const CellPadding=t(({elements:t,store:o})=>e.createElement(n,{content:T("toolbar.cellPadding"),position:r.BOTTOM},e.createElement(b,{value:t[0].cellPadding,onValueChange:e=>o.history.transaction(()=>{t.forEach(t=>t.set({cellPadding:e}))}),style:{width:"50px"},min:0,max:50,buttonPosition:"none"})));export const CellBackground=t(({elements:t,store:o})=>e.createElement(n,{content:T("toolbar.cellBackground"),position:r.BOTTOM},e.createElement(h,{value:t[0].cellBackground,style:{marginRight:"5px"},onChange:e=>o.history.transaction(()=>{t.forEach(t=>t.set({cellBackground:e}))}),store:o})));export const CellVerticalAlign=t(({elements:t,store:l})=>{const i=t[0];return e.createElement(n,{content:T("toolbar.verticalAlign"),position:r.BOTTOM},e.createElement(o,{minimal:!0,icon:f[i.verticalAlign],onClick:()=>{const e=(C.indexOf(i.verticalAlign)+1+C.length)%C.length,o=C[e];l.history.transaction(()=>{t.forEach(e=>e.set({verticalAlign:o}))})},"aria-label":T("toolbar.verticalAlign")}))});const F={TableStructure,TableAnimations:w},z={TableBorderSettings,TextFontFamily:g,TextFontSize:x,TextFill:y,CellBackground,TextFontVariant:p,CellVerticalAlign,TextSpacing:k},M=Object.assign(Object.assign({},F),z);export const TableToolbar=t(({store:t,components:o})=>{const l=t.selectedElements[0],r=l.focusedCells,n=r.length>0,i=["TableBorderSettings","CellBackground","TableStructure",...n?["TextFontFamily","TextFontSize","TextFill","TextFontVariant","CellVerticalAlign","TextSpacing"]:[],v.animationsEnabled&&"TableAnimations"],a=u({type:"table",usedItems:i,components:o});return e.createElement(E,{items:a,itemRender:i=>{const a=o[i]||M[i],c=!!z[i];if(c&&!n&&"TableBorderSettings"!==i&&"CellBackground"!==i){return null}let s;return s=c?n?r:"TableBorderSettings"===i?t.selectedElements:l.cells.slice():t.selectedElements,e.createElement(a,{element:l,store:t,key:i,elements:s})}})});export default TableToolbar;

package/toolbar/text-toolbar.d.ts

@@ -9,6 +9,13 @@ type InputProps = {
     elements: Array<TextElementType>;
     store: StoreType;
 };
+export declare const FontMenu: ({ store, fonts, activeFont, activeFontLabel, onFontSelect, }: {
+    store: any;
+    fonts: any;
+    activeFont: any;
+    activeFontLabel: any;
+    onFontSelect: any;
+}) => React.JSX.Element;
 export declare const fetcher: (url: string) => Promise<any>;
 export declare const TextFontFamily: (({ elements, store }: InputProps) => React.JSX.Element) & {
     displayName: string;
@@ -17,6 +24,12 @@ export declare const TextFontSize: (({ elements, store }: InputProps) => React.J
     displayName: string;
 };
 export declare const ALIGN_OPTIONS: string[];
+export declare const VERTICAL_ALIGN_OPTIONS: string[];
+export declare const VERTICAL_ALIGN_ICONS: {
+    top: React.JSX.Element;
+    middle: React.JSX.Element;
+    bottom: React.JSX.Element;
+};
 export declare const TextFontVariant: (({ elements, store }: InputProps) => React.JSX.Element) & {
     displayName: string;
 };

package/toolbar/text-toolbar.js

@@ -1,7 +1,7 @@
-var e=this&&this.__rest||function(e,t){var n={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(o=Object.getOwnPropertySymbols(e);l<o.length;l++){t.indexOf(o[l])<0&&Object.prototype.propertyIsEnumerable.call(e,o[l])&&(n[o[l]]=e[o[l]])}}return n};import t from"react";import{observer as n}from"mobx-react-lite";import{Button as o,ButtonGroup as l,InputGroup as a,Menu as i,MenuDivider as r,MenuItem as c,NumericInput as s,Popover as m,Position as p,Slider as u,Tooltip as f}from"@blueprintjs/core";import{FixedSizeList as d}from"react-window";import h from"swr";import{AlignCenter as x,AlignJustify as g,AlignLeft as E,AlignRight as b,Bold as T,CaretDown as y,Italic as v,Search as F,Strikethrough as O,Underline as S}from"@blueprintjs/icons";import{getFontsList as w,globalFonts as C,isGoogleFontChanged as j}from"../utils/fonts.js";import{getGoogleFontImage as M,getGoogleFontsListAPI as N}from"../utils/api.js";import k from"./color-picker.js";import D from"./filters-picker.js";import{AnimationsPicker as A}from"./animations-picker.js";import{ElementContainer as I,extendToolbar as V}from"./element-container.js";import{TextAiWrite as z}from"./text-ai-write.js";import B from"@meronex/icons/mdc/MdcFormatLineSpacing.js";import P from"@meronex/icons/mdc/MdcFormatLetterCase.js";import L from"../utils/styled.js";import R from"@meronex/icons/mdc/MdcFormatVerticalAlignTop.js";import _ from"@meronex/icons/mdc/MdcFormatVerticalAlignCenter.js";import W from"@meronex/icons/mdc/MdcFormatVerticalAlignBottom.js";import{t as H}from"../utils/l10n.js";import{flags as G}from"../utils/flags.js";const q=L("img")`
+var e=this&&this.__rest||function(e,t){var n={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(o=Object.getOwnPropertySymbols(e);l<o.length;l++){t.indexOf(o[l])<0&&Object.prototype.propertyIsEnumerable.call(e,o[l])&&(n[o[l]]=e[o[l]])}}return n};import t from"react";import{observer as n}from"mobx-react-lite";import{Button as o,ButtonGroup as l,InputGroup as a,Menu as r,MenuDivider as i,MenuItem as c,NumericInput as s,Popover as m,Position as p,Slider as u,Tooltip as f}from"@blueprintjs/core";import{FixedSizeList as d}from"react-window";import h from"swr";import{AlignCenter as x,AlignJustify as E,AlignLeft as g,AlignRight as T,Bold as b,CaretDown as y,Italic as O,Search as v,Strikethrough as F,Underline as S}from"@blueprintjs/icons";import{getFontsList as C,globalFonts as I,isGoogleFontChanged as N}from"../utils/fonts.js";import{getGoogleFontImage as A,getGoogleFontsListAPI as w}from"../utils/api.js";import M from"./color-picker.js";import j from"./filters-picker.js";import{AnimationsPicker as L}from"./animations-picker.js";import{ElementContainer as V,extendToolbar as _}from"./element-container.js";import{TextAiWrite as k}from"./text-ai-write.js";import D from"@meronex/icons/mdc/MdcFormatLineSpacing.js";import P from"@meronex/icons/mdc/MdcFormatLetterCase.js";import R from"../utils/styled.js";import z from"@meronex/icons/mdc/MdcFormatVerticalAlignTop.js";import B from"@meronex/icons/mdc/MdcFormatVerticalAlignCenter.js";import G from"@meronex/icons/mdc/MdcFormatVerticalAlignBottom.js";import{t as W}from"../utils/l10n.js";import{flags as H}from"../utils/flags.js";const q=R("img")`
   height: 20px;
 
   .bp5-dark & {
     filter: invert(1);
   }
-`,J=w(),K=({fontFamily:e,handleClick:n,modifiers:o,store:l,isCustom:a})=>{const[i,s]=t.useState(!a);if(t.useEffect(()=>{i||l.loadFont(e)},[e,i]),"_divider"===e){return t.createElement("div",{style:{paddingTop:"10px"}},t.createElement(r,null))}const m=i?t.createElement(q,{src:M(e),alt:e,onError:()=>{s(!1)}}):e;return t.createElement(c,{text:m,active:o.active,disabled:o.disabled,onClick:n,style:{fontFamily:'"'+e+'"'}})},Q=({onChange:e,defaultValue:n})=>{const o=t.useRef(null);return t.useEffect(()=>{o.current&&o.current.focus()},[]),t.createElement(a,{leftIcon:t.createElement(F,null),inputRef:o,defaultValue:n,onChange:t=>e(t.target.value)})},U=({store:e,fonts:n,activeFont:l,activeFontLabel:a,onFontSelect:r})=>{const[c,s]=t.useState(""),u=n.filter(e=>(null==e?void 0:e.toLowerCase().indexOf(c.toLowerCase()))>=0);return t.createElement(m,{content:t.createElement("div",null,t.createElement(Q,{onChange:e=>s(e),defaultValue:c}),t.createElement("div",{style:{paddingTop:"5px"}},t.createElement(d,{innerElementType:t.forwardRef((e,n)=>t.createElement(i,Object.assign({ulRef:n},e))),height:Math.min(400,30*u.length)+10,width:210,itemCount:u.length,itemSize:30,children:({index:n,style:o})=>{const a=u[n];return t.createElement("div",{style:o},t.createElement(K,{key:a,fontFamily:a,modifiers:{active:l===a},handleClick:()=>r(a),store:e,isCustom:e.fonts.find(e=>e.fontFamily===a)||C.find(e=>e.fontFamily===a)}))}})))},t.createElement(f,{content:H("toolbar.fontFamily"),position:p.BOTTOM},t.createElement(o,{text:a,rightIcon:t.createElement(y,null),minimal:!0,style:{marginRight:"5px",fontFamily:'"'+l+'"',overflow:"hidden",whiteSpace:"nowrap",maxHeight:"30px"},"aria-label":H("toolbar.fontFamily")})))},X={};export const fetcher=e=>X[e]?Promise.resolve(X[e]):fetch(e).then(e=>e.json()).then(t=>(X[e]=t,t));export const TextFontFamily=n(({elements:e,store:n})=>{const{data:o,mutate:l}=h(N(),fetcher,{isPaused:()=>j(),fallbackData:[]});t.useEffect(()=>{l()},[j()]);const a=n.fonts.concat(C).map(e=>e.fontFamily).concat((null==o?void 0:o.length)&&!j()?o:J);let i=e[0].fontFamily;i.length>15&&(i=i.slice(0,15)+"...");const r=[];n.find(e=>("text"===e.type&&r.push(e.fontFamily),!1));const c=[...new Set(r.concat("_divider").concat(a))];return t.createElement(U,{fonts:c,activeFont:e[0].fontFamily,activeFontLabel:i,store:n,onFontSelect:t=>{n.history.transaction(()=>{e.forEach(e=>{e.set({fontFamily:t})})})}})});export const TextFontSize=n(({elements:e,store:n})=>{const[o,l]=t.useState(!1);return t.createElement(f,{content:H("toolbar.fontSize"),position:p.BOTTOM,openOnTargetFocus:!1,disabled:o},t.createElement(s,{"aria-label":H("toolbar.fontSize"),onFocus:()=>l(!0),onBlur:()=>l(!1),onValueChange:t=>{Number.isNaN(t)||n.history.transaction(()=>{e.forEach(e=>{e.set({fontSize:t,width:Math.max(t,e.width)})})})},value:Math.round(e[0].fontSize),style:{width:"50px"},min:5,max:4*n.height}))});export const ALIGN_OPTIONS=["left","center","right","justify"];const Y=["top","middle","bottom"],Z={top:t.createElement("span",{className:"bp5-icon"},t.createElement(R,null)),middle:t.createElement("span",{className:"bp5-icon"},t.createElement(_,null)),bottom:t.createElement("span",{className:"bp5-icon"},t.createElement(W,null))};export const TextFontVariant=n(({elements:e,store:n})=>{const a=e[0];return t.createElement(l,null,t.createElement(f,{content:H("toolbar.textAlign"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:"left"===a.align?t.createElement(E,null):"center"===a.align?t.createElement(x,null):"right"===a.align?t.createElement(b,null):t.createElement(g,null),onMouseDown:e=>{e.preventDefault()},onClick:()=>{const t=(ALIGN_OPTIONS.indexOf(a.align)+1+ALIGN_OPTIONS.length)%ALIGN_OPTIONS.length,o=ALIGN_OPTIONS[t];n.history.transaction(()=>{e.forEach(e=>{e.set({align:o})})})},"aria-label":H("toolbar.textAlign")})),G.textVerticalResizeEnabled&&t.createElement(f,{content:H("toolbar.verticalAlign"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:Z[a.verticalAlign],onMouseDown:e=>{e.preventDefault()},onClick:()=>{const t=(Y.indexOf(a.verticalAlign)+1+Y.length)%Y.length,o=Y[t];n.history.transaction(()=>{e.forEach(e=>{e.set({verticalAlign:o})})})},"aria-label":H("toolbar.verticalAlign")})),t.createElement(f,{content:H("toolbar.bold"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:t.createElement(T,null),active:"bold"===a.fontWeight||"700"===a.fontWeight,onMouseDown:e=>{e.preventDefault()},onClick:()=>{const t="bold"===a.fontWeight||"700"===a.fontWeight;n.history.transaction(()=>{e.forEach(e=>{t?e.set({fontWeight:"normal"}):e.set({fontWeight:"bold"})})})},"aria-label":H("toolbar.bold")})),t.createElement(f,{content:H("toolbar.italic"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:t.createElement(v,null),active:"italic"===a.fontStyle,onMouseDown:e=>{e.preventDefault()},onClick:()=>{const t="italic"===a.fontStyle;n.history.transaction(()=>{e.forEach(e=>{t?e.set({fontStyle:"normal"}):e.set({fontStyle:"italic"})})})},"aria-label":H("toolbar.italic")})),t.createElement(f,{content:H("toolbar.underline"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:t.createElement(S,null),active:a.textDecoration.indexOf("underline")>=0,onMouseDown:e=>{e.preventDefault()},onClick:()=>{let t=a.textDecoration.split(" ");t.indexOf("underline")>=0?t=t.filter(e=>"underline"!==e):t.push("underline"),n.history.transaction(()=>{e.forEach(e=>{e.set({textDecoration:t.join(" ")})})})},"aria-label":H("toolbar.underline")})),t.createElement(f,{content:H("toolbar.strikethrough"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:t.createElement(O,null),active:a.textDecoration.indexOf("line-through")>=0,onMouseDown:e=>{e.preventDefault()},onClick:()=>{let t=a.textDecoration.split(" ");t.indexOf("line-through")>=0?t=t.filter(e=>"line-through"!==e):t.push("line-through"),n.history.transaction(()=>{e.forEach(e=>{e.set({textDecoration:t.join(" ")})})})},"aria-label":H("toolbar.strikethrough")})))});export const TextTransform=n(({elements:e,store:n})=>t.createElement(l,null,t.createElement(f,{content:H("toolbar.uppercase")},t.createElement(o,{variant:"minimal",active:"uppercase"==e[0].textTransform,icon:t.createElement(P,{size:16,className:"bp5-icon"}),onMouseDown:e=>{e.preventDefault()},onClick:()=>{n.history.transaction(()=>{e.forEach(e=>{e.set({textTransform:"uppercase"===e.textTransform?"none":"uppercase"})})})}}))));export const TextFill=n(({elements:e,store:n})=>t.createElement(k,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:t=>n.history.transaction(()=>{e.forEach(e=>{e.set({fill:t})})}),store:n}));export const NumberInput=n=>{var{value:o,onValueChange:l}=n,a=e(n,["value","onValueChange"]);const[i,r]=t.useState(o.toString());return t.useEffect(()=>{r(o.toString())},[o]),t.createElement(s,Object.assign({value:i,onValueChange:(e,t)=>{r(t),Number.isNaN(e)||l(e)}},a))};export const TextSpacing=n(({elements:e,store:n})=>{const l=e[0],a=t=>{n.history.transaction(()=>{e.forEach(e=>{e.set(t)})})},i="number"==typeof l.lineHeight?100*l.lineHeight:120;return t.createElement(m,{position:p.BOTTOM,content:t.createElement("div",{style:{padding:"15px",width:"230px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,H("toolbar.lineHeight")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(i),onValueChange:e=>{a({lineHeight:e/100})},style:{width:"50px"},min:50,max:250,buttonPosition:"none"}))),t.createElement(u,{value:Math.round(i),onChange:e=>{a({lineHeight:e/100})},min:50,max:250,stepSize:1,showTrackFill:!1,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,H("toolbar.letterSpacing")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*l.letterSpacing),onValueChange:e=>{a({letterSpacing:e/100})},style:{width:"50px"},min:-50,max:250,buttonPosition:"none"}))),t.createElement(u,{value:Math.round(100*l.letterSpacing),onChange:e=>{a({letterSpacing:e/100})},min:-50,max:250,stepSize:1,showTrackFill:!1,labelRenderer:!1}))},t.createElement(f,{content:H("toolbar.spacing"),position:p.BOTTOM},t.createElement(o,{icon:t.createElement(B,{className:"bp5-icon",style:{fontSize:"20px"}}),minimal:!0,"aria-label":H("toolbar.spacing")})))});const $={TextFontFamily,TextFontSize,TextFontVariant,TextTransform,TextFill,TextSpacing,TextAiWrite:z,TextFilters:D,TextAnimations:A};export const TextToolbar=n(({store:e,components:n})=>{const o=e.selectedElements,l=["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextTransform","TextFilters",G.animationsEnabled&&"TextAnimations",G.aiTextEnabled&&"TextAiWrite"],a=V({type:"text",usedItems:l,components:n});return t.createElement(I,{items:a,itemRender:l=>{const a=n[l]||$[l];return t.createElement(a,{elements:o,element:o[0],store:e,key:l})}})});export default TextToolbar;
+`,J=C(),K=({fontFamily:e,handleClick:n,modifiers:o,store:l,isCustom:a})=>{const[r,s]=t.useState(!a);if(t.useEffect(()=>{r||l.loadFont(e)},[e,r]),"_divider"===e){return t.createElement("div",{style:{paddingTop:"10px"}},t.createElement(i,null))}const m=r?t.createElement(q,{src:A(e),alt:e,onError:()=>{s(!1)}}):e;return t.createElement(c,{text:m,active:o.active,disabled:o.disabled,onClick:n,style:{fontFamily:'"'+e+'"'}})},Q=({onChange:e,defaultValue:n})=>{const o=t.useRef(null);return t.useEffect(()=>{o.current&&o.current.focus()},[]),t.createElement(a,{leftIcon:t.createElement(v,null),inputRef:o,defaultValue:n,onChange:t=>e(t.target.value)})};export const FontMenu=({store:e,fonts:n,activeFont:l,activeFontLabel:a,onFontSelect:i})=>{const[c,s]=t.useState(""),u=n.filter(e=>(null==e?void 0:e.toLowerCase().indexOf(c.toLowerCase()))>=0);return t.createElement(m,{content:t.createElement("div",null,t.createElement(Q,{onChange:e=>s(e),defaultValue:c}),t.createElement("div",{style:{paddingTop:"5px"}},t.createElement(d,{innerElementType:t.forwardRef((e,n)=>t.createElement(r,Object.assign({ulRef:n},e))),height:Math.min(400,30*u.length)+10,width:210,itemCount:u.length,itemSize:30,children:({index:n,style:o})=>{const a=u[n];return t.createElement("div",{style:o},t.createElement(K,{key:a,fontFamily:a,modifiers:{active:l===a},handleClick:()=>i(a),store:e,isCustom:e.fonts.find(e=>e.fontFamily===a)||I.find(e=>e.fontFamily===a)}))}})))},t.createElement(f,{content:W("toolbar.fontFamily"),position:p.BOTTOM},t.createElement(o,{text:a,rightIcon:t.createElement(y,null),minimal:!0,style:{marginRight:"5px",fontFamily:'"'+l+'"',overflow:"hidden",whiteSpace:"nowrap",maxHeight:"30px"},"aria-label":W("toolbar.fontFamily")})))};const U={};export const fetcher=e=>U[e]?Promise.resolve(U[e]):fetch(e).then(e=>e.json()).then(t=>(U[e]=t,t));export const TextFontFamily=n(({elements:e,store:n})=>{const{data:o,mutate:l}=h(w(),fetcher,{isPaused:()=>N(),fallbackData:[]});t.useEffect(()=>{l()},[N()]);const a=n.fonts.concat(I).map(e=>e.fontFamily).concat((null==o?void 0:o.length)&&!N()?o:J);let r=e[0].fontFamily;r.length>15&&(r=r.slice(0,15)+"...");const i=[];n.find(e=>("text"===e.type&&i.push(e.fontFamily),!1));const c=[...new Set(i.concat("_divider").concat(a))];return t.createElement(FontMenu,{fonts:c,activeFont:e[0].fontFamily,activeFontLabel:r,store:n,onFontSelect:t=>{n.history.transaction(()=>{e.forEach(e=>{e.set({fontFamily:t})})})}})});export const TextFontSize=n(({elements:e,store:n})=>{const[o,l]=t.useState(!1);return t.createElement(f,{content:W("toolbar.fontSize"),position:p.BOTTOM,openOnTargetFocus:!1,disabled:o},t.createElement(s,{"aria-label":W("toolbar.fontSize"),onFocus:()=>l(!0),onBlur:()=>l(!1),onValueChange:t=>{Number.isNaN(t)||n.history.transaction(()=>{e.forEach(e=>{e.set({fontSize:t,width:Math.max(t,e.width)})})})},value:Math.round(e[0].fontSize),style:{width:"50px"},min:5,max:4*n.height}))});export const ALIGN_OPTIONS=["left","center","right","justify"];export const VERTICAL_ALIGN_OPTIONS=["top","middle","bottom"];export const VERTICAL_ALIGN_ICONS={top:t.createElement("span",{className:"bp5-icon"},t.createElement(z,null)),middle:t.createElement("span",{className:"bp5-icon"},t.createElement(B,null)),bottom:t.createElement("span",{className:"bp5-icon"},t.createElement(G,null))};export const TextFontVariant=n(({elements:e,store:n})=>{const a=e[0];return t.createElement(l,null,t.createElement(f,{content:W("toolbar.textAlign"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:"left"===a.align?t.createElement(g,null):"center"===a.align?t.createElement(x,null):"right"===a.align?t.createElement(T,null):t.createElement(E,null),onMouseDown:e=>{e.preventDefault()},onClick:()=>{const t=(ALIGN_OPTIONS.indexOf(a.align)+1+ALIGN_OPTIONS.length)%ALIGN_OPTIONS.length,o=ALIGN_OPTIONS[t];n.history.transaction(()=>{e.forEach(e=>{e.set({align:o})})})},"aria-label":W("toolbar.textAlign")})),H.textVerticalResizeEnabled&&t.createElement(f,{content:W("toolbar.verticalAlign"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:VERTICAL_ALIGN_ICONS[a.verticalAlign],onMouseDown:e=>{e.preventDefault()},onClick:()=>{const t=(VERTICAL_ALIGN_OPTIONS.indexOf(a.verticalAlign)+1+VERTICAL_ALIGN_OPTIONS.length)%VERTICAL_ALIGN_OPTIONS.length,o=VERTICAL_ALIGN_OPTIONS[t];n.history.transaction(()=>{e.forEach(e=>{e.set({verticalAlign:o})})})},"aria-label":W("toolbar.verticalAlign")})),t.createElement(f,{content:W("toolbar.bold"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:t.createElement(b,null),active:"bold"===a.fontWeight||"700"===a.fontWeight,onMouseDown:e=>{e.preventDefault()},onClick:()=>{const t="bold"===a.fontWeight||"700"===a.fontWeight;n.history.transaction(()=>{e.forEach(e=>{t?e.set({fontWeight:"normal"}):e.set({fontWeight:"bold"})})})},"aria-label":W("toolbar.bold")})),t.createElement(f,{content:W("toolbar.italic"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:t.createElement(O,null),active:"italic"===a.fontStyle,onMouseDown:e=>{e.preventDefault()},onClick:()=>{const t="italic"===a.fontStyle;n.history.transaction(()=>{e.forEach(e=>{t?e.set({fontStyle:"normal"}):e.set({fontStyle:"italic"})})})},"aria-label":W("toolbar.italic")})),t.createElement(f,{content:W("toolbar.underline"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:t.createElement(S,null),active:a.textDecoration.indexOf("underline")>=0,onMouseDown:e=>{e.preventDefault()},onClick:()=>{let t=a.textDecoration.split(" ");t.indexOf("underline")>=0?t=t.filter(e=>"underline"!==e):t.push("underline"),n.history.transaction(()=>{e.forEach(e=>{e.set({textDecoration:t.join(" ")})})})},"aria-label":W("toolbar.underline")})),t.createElement(f,{content:W("toolbar.strikethrough"),position:p.BOTTOM},t.createElement(o,{minimal:!0,icon:t.createElement(F,null),active:a.textDecoration.indexOf("line-through")>=0,onMouseDown:e=>{e.preventDefault()},onClick:()=>{let t=a.textDecoration.split(" ");t.indexOf("line-through")>=0?t=t.filter(e=>"line-through"!==e):t.push("line-through"),n.history.transaction(()=>{e.forEach(e=>{e.set({textDecoration:t.join(" ")})})})},"aria-label":W("toolbar.strikethrough")})))});export const TextTransform=n(({elements:e,store:n})=>t.createElement(l,null,t.createElement(f,{content:W("toolbar.uppercase")},t.createElement(o,{variant:"minimal",active:"uppercase"==e[0].textTransform,icon:t.createElement(P,{size:16,className:"bp5-icon"}),onMouseDown:e=>{e.preventDefault()},onClick:()=>{n.history.transaction(()=>{e.forEach(e=>{e.set({textTransform:"uppercase"===e.textTransform?"none":"uppercase"})})})}}))));export const TextFill=n(({elements:e,store:n})=>t.createElement(M,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:t=>n.history.transaction(()=>{e.forEach(e=>{e.set({fill:t})})}),store:n}));export const NumberInput=n=>{var{value:o,onValueChange:l}=n,a=e(n,["value","onValueChange"]);const[r,i]=t.useState(o.toString());return t.useEffect(()=>{i(o.toString())},[o]),t.createElement(s,Object.assign({value:r,onValueChange:(e,t)=>{i(t),Number.isNaN(e)||l(e)}},a))};export const TextSpacing=n(({elements:e,store:n})=>{const l=e[0],a=t=>{n.history.transaction(()=>{e.forEach(e=>{e.set(t)})})},r="number"==typeof l.lineHeight?100*l.lineHeight:120;return t.createElement(m,{position:p.BOTTOM,content:t.createElement("div",{style:{padding:"15px",width:"230px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,W("toolbar.lineHeight")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(r),onValueChange:e=>{a({lineHeight:e/100})},style:{width:"50px"},min:50,max:250,buttonPosition:"none"}))),t.createElement(u,{value:Math.round(r),onChange:e=>{a({lineHeight:e/100})},min:50,max:250,stepSize:1,showTrackFill:!1,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,W("toolbar.letterSpacing")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*l.letterSpacing),onValueChange:e=>{a({letterSpacing:e/100})},style:{width:"50px"},min:-50,max:250,buttonPosition:"none"}))),t.createElement(u,{value:Math.round(100*l.letterSpacing),onChange:e=>{a({letterSpacing:e/100})},min:-50,max:250,stepSize:1,showTrackFill:!1,labelRenderer:!1}))},t.createElement(f,{content:W("toolbar.spacing"),position:p.BOTTOM},t.createElement(o,{icon:t.createElement(D,{className:"bp5-icon",style:{fontSize:"20px"}}),minimal:!0,"aria-label":W("toolbar.spacing")})))});const X={TextFontFamily,TextFontSize,TextFontVariant,TextTransform,TextFill,TextSpacing,TextAiWrite:k,TextFilters:j,TextAnimations:L};export const TextToolbar=n(({store:e,components:n})=>{const o=e.selectedElements,l=["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextTransform","TextFilters",H.animationsEnabled&&"TextAnimations",H.aiTextEnabled&&"TextAiWrite"],a=_({type:"text",usedItems:l,components:n});return t.createElement(V,{items:a,itemRender:l=>{const a=n[l]||X[l];return t.createElement(a,{elements:o,element:o[0],store:e,key:l})}})});export default TextToolbar;

package/toolbar/toolbar.js

@@ -1,4 +1,4 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import{Navbar as o,Alignment as n,Divider as r}from"@blueprintjs/core";import s from"../utils/styled.js";import{mobileStyle as l}from"../utils/screen.js";import{HistoryButtons as i}from"./history-buttons.js";import{TextToolbar as m}from"./text-toolbar.js";import{HtmlToolbar as a}from"./html-toolbar.js";import{ImageToolbar as c}from"./image-toolbar.js";import{SvgToolbar as d}from"./svg-toolbar.js";import{LineToolbar as p}from"./line-toolbar.js";import{VideoToolbar as u}from"./video-toolbar.js";import{FigureToolbar as b}from"./figure-toolbar.js";import{GifToolbar as f}from"./gif-toolbar.js";import{ManyToolbar as v}from"./many-toolbar.js";import{PageToolbar as E}from"./page-toolbar.js";import{DownloadButton as g}from"./download-button.js";import{DuplicateButton as j}from"./duplicate-button.js";import{RemoveButton as y}from"./remove-button.js";import{LockButton as h}from"./lock-button.js";import{PositionPicker as w}from"./position-picker.js";import{OpacityPicker as x}from"./opacity-picker.js";import{AdminButton as R}from"./admin-button.js";import{GroupButton as k}from"./group-button.js";import{flags as C}from"../utils/flags.js";import{CopyStyleButton as O}from"./copy-style.js";const T={text:m,image:c,svg:d,many:v,line:p,video:u,figure:b,gif:f,page:E};export function registerToolbarComponent(e,t){T[e]=t}export function useToolbarCondensed(t=480){const o=e.useRef(null),[n,r]=e.useState(!1),s=e.useCallback(()=>{const e=o.current;e&&r(e.clientWidth<t)},[t]);return e.useEffect(()=>{const e=o.current;if(!e){return}const t=new ResizeObserver(()=>s());t.observe(e);const n=new MutationObserver(()=>s());return n.observe(e,{childList:!0,subtree:!0,attributes:!0}),window.addEventListener("resize",s),requestAnimationFrame(s),()=>{t.disconnect(),n.disconnect(),window.removeEventListener("resize",s)}},[s]),{containerRef:o,condensed:n}}const z=s("div",e.forwardRef)`
+import e from"react";import{observer as t}from"mobx-react-lite";import{Navbar as o,Alignment as r,Divider as n}from"@blueprintjs/core";import s from"../utils/styled.js";import{mobileStyle as l}from"../utils/screen.js";import{HistoryButtons as i}from"./history-buttons.js";import{TextToolbar as m}from"./text-toolbar.js";import{HtmlToolbar as a}from"./html-toolbar.js";import{ImageToolbar as c}from"./image-toolbar.js";import{SvgToolbar as d}from"./svg-toolbar.js";import{LineToolbar as p}from"./line-toolbar.js";import{VideoToolbar as u}from"./video-toolbar.js";import{FigureToolbar as b}from"./figure-toolbar.js";import{GifToolbar as f}from"./gif-toolbar.js";import{ManyToolbar as v}from"./many-toolbar.js";import{TableToolbar as E}from"./table-toolbar.js";import{PageToolbar as j}from"./page-toolbar.js";import{DownloadButton as g}from"./download-button.js";import{DuplicateButton as y}from"./duplicate-button.js";import{RemoveButton as h}from"./remove-button.js";import{LockButton as w}from"./lock-button.js";import{PositionPicker as x}from"./position-picker.js";import{OpacityPicker as R}from"./opacity-picker.js";import{AdminButton as k}from"./admin-button.js";import{GroupButton as C}from"./group-button.js";import{flags as O}from"../utils/flags.js";import{CopyStyleButton as T}from"./copy-style.js";const z={text:m,image:c,svg:d,many:v,line:p,video:u,figure:b,gif:f,table:E,page:j};export function registerToolbarComponent(e,t){z[e]=t}export function useToolbarCondensed(t=480){const o=e.useRef(null),[r,n]=e.useState(!1),s=e.useCallback(()=>{const e=o.current;e&&n(e.clientWidth<t)},[t]);return e.useEffect(()=>{const e=o.current;if(!e){return}const t=new ResizeObserver(()=>s());t.observe(e);const r=new MutationObserver(()=>s());return r.observe(e,{childList:!0,subtree:!0,attributes:!0}),window.addEventListener("resize",s),requestAnimationFrame(s),()=>{t.disconnect(),r.disconnect(),window.removeEventListener("resize",s)}},[s]),{containerRef:o,condensed:r}}const A=s("div",e.forwardRef)`
   white-space: nowrap;
 
   /* Add special style for a button with text inside, to make sure it has good with */
@@ -17,8 +17,8 @@ import e from"react";import{observer as t}from"mobx-react-lite";import{Navbar as
   }
 
   ${l("\n    max-width: 100vw;\n    overflow-x: auto;\n    overflow-y: hidden;\n  ")}
-`,A=s("div")`
+`,L=s("div")`
   width: 100%;
   height: 100%;
   ${l("\n    display: flex;\n  ")}
-`;export const Toolbar=t(({store:t,downloadButtonEnabled:s,components:l={}})=>{const m=1===new Set(t.selectedElements.map(e=>e.type)).size,c=1===t.selectedElements.length,d=t.selectedElements[0],p=t.selectedElements.every(e=>e.styleEditable);let u=p&&c&&T[d.type];m?u=T[d.type]:t.selectedElements.length>1&&(u=T.many),0===t.selectedElements.length&&1===t._selectedPagesIds.length&&(u=T.page),c&&"text"===d.type&&C.htmlRenderEnabled&&(u=a);const b=c&&d._cropModeEnabled,f=e.useRef(l);(Object.keys(l).some(e=>l[e]!==f.current[e])||Object.keys(f.current).some(e=>!(e in l)))&&(f.current=Object.assign({},l));const v=f.current,{containerRef:E,condensed:L}=useToolbarCondensed(480),G=(null==v?void 0:v.ActionControls)||(s?g:null),S=(null==v?void 0:v.Position)||w,F=(null==v?void 0:v.Opacity)||x,H=(null==v?void 0:v.Lock)||h,I=(null==v?void 0:v.Duplicate)||j,M=(null==v?void 0:v.Remove)||y,P=(null==v?void 0:v.Group)||k,$=(null==v?void 0:v.History)||i,_=(null==v?void 0:v.Admin)||R,q=(null==v?void 0:v.CopyStyle)||O;return e.createElement(z,{ref:E,className:"bp5-navbar polotno-toolbar"+(L?" condensed":"")},e.createElement(A,null,!b&&e.createElement($,{store:t}),u&&p&&e.createElement(u,{store:t,components:v}),!b&&e.createElement(o.Group,{align:n.RIGHT},"admin"===t.role&&e.createElement(_,{store:t}),e.createElement(P,{store:t}),e.createElement(S,{store:t}),p&&e.createElement(F,{store:t}),e.createElement(H,{store:t}),e.createElement(I,{store:t}),e.createElement(M,{store:t}),e.createElement(q,{store:t}),G&&e.createElement(e.Fragment,null,e.createElement(r,{style:{height:"100%",margin:"0 15px"}}),e.createElement(G,{store:t})))))});export default Toolbar;
+`;export const Toolbar=t(({store:t,downloadButtonEnabled:s,components:l={}})=>{const m=1===new Set(t.selectedElements.map(e=>e.type)).size,c=1===t.selectedElements.length,d=t.selectedElements[0],p=t.selectedElements.every(e=>e.styleEditable);let u=p&&c&&z[d.type];m?u=z[d.type]:t.selectedElements.length>1&&(u=z.many),0===t.selectedElements.length&&1===t._selectedPagesIds.length&&(u=z.page),c&&"text"===d.type&&O.htmlRenderEnabled&&(u=a);const b=c&&d._cropModeEnabled,f=e.useRef(l);(Object.keys(l).some(e=>l[e]!==f.current[e])||Object.keys(f.current).some(e=>!(e in l)))&&(f.current=Object.assign({},l));const v=f.current,{containerRef:E,condensed:j}=useToolbarCondensed(480),G=(null==v?void 0:v.ActionControls)||(s?g:null),S=(null==v?void 0:v.Position)||x,F=(null==v?void 0:v.Opacity)||R,H=(null==v?void 0:v.Lock)||w,I=(null==v?void 0:v.Duplicate)||y,M=(null==v?void 0:v.Remove)||h,P=(null==v?void 0:v.Group)||C,$=(null==v?void 0:v.History)||i,_=(null==v?void 0:v.Admin)||k,q=(null==v?void 0:v.CopyStyle)||T;return e.createElement(A,{ref:E,className:"bp5-navbar polotno-toolbar"+(j?" condensed":"")},e.createElement(L,null,!b&&e.createElement($,{store:t}),u&&p&&e.createElement(u,{store:t,components:v}),!b&&e.createElement(o.Group,{align:r.RIGHT},"admin"===t.role&&e.createElement(_,{store:t}),e.createElement(P,{store:t}),e.createElement(S,{store:t}),p&&e.createElement(F,{store:t}),e.createElement(H,{store:t}),e.createElement(I,{store:t}),e.createElement(M,{store:t}),e.createElement(q,{store:t}),G&&e.createElement(e.Fragment,null,e.createElement(n,{style:{height:"100%",margin:"0 15px"}}),e.createElement(G,{store:t})))))});export default Toolbar;

package/toolbar/use-copy-style.d.ts

@@ -1,5 +1,7 @@
 import { ElementType } from '../model/group-model.js';
 import { StoreType } from '../model/store.js';
+import { TableElementType } from '../model/table-model.js';
+export declare function copyTableCellStyles(source: TableElementType, target: TableElementType): void;
 export declare const useCopyStyle: (store: StoreType) => {
     elementToCopy: ElementType | null;
     disabled: boolean;

package/toolbar/use-copy-style.js

@@ -1 +1 @@
-import{useEffect as e,useState as o}from"react";import{intersect as r}from"../utils/array.js";export const useCopyStyle=t=>{const[i,l]=o(null);e(()=>{const e=t.selectedElements;i&&(e.forEach(e=>{const o=r(d[e.type],d[i.type]).reduce((e,o)=>{let r=i[o];return Array.isArray(r)?r=[...r]:"object"==typeof r&&null!==r&&(r=Object.assign({},r)),Object.assign(Object.assign({},e),{[o]:r})},{});e.type!==i.type&&n.forEach(e=>{delete o[e]}),e.set(Object.assign({},o))}),l(null))},[t.selectedElements[0]]);const s=1!==t.selectedElements.length;return{elementToCopy:i,disabled:s,setElementToCopy:l}};const t=["opacity","visible","height","width","shadowEnabled","shadowBlur","shadowColor","shadowOffsetX","shadowOffsetY","blurEnabled","blurRadius","brightnessEnabled","brightness","sepiaEnabled","grayscaleEnabled"],i=[...t,"fontSize","fontWeight","fontFamily","lineHeight","stroke","strokeWidth","textDecoration","fill","align","verticalAlign","letterSpacing","backgroundEnabled","backgroundColor","backgroundOpacity","backgroundCornerRadius","backgroundPadding"],l=[...t,"flipX","flipY","keepRatio","borderColor","borderSize","cornerRadius","cropX","cropY","cropWidth","cropHeight"],s=[...t,"flipX","flipY","keepRatio","borderColor","borderSize","cornerRadius","cropX","cropY","cropWidth","cropHeight"],a=[...t,"color","dash","endHead","startHead"],d={figure:[...t,"dash","cornerRadius","fill","stroke","strokeWidth"],image:l,line:a,svg:[...t,"cornerRadius","borderColor","borderSize","colorsReplace","cropHeight","cropWidth","cropX","cropY","flipX","flipY","keepRatio"],text:i,video:s},n=["width","height"];
+import{useEffect as e,useState as t}from"react";import{intersect as o}from"../utils/array.js";export function copyTableCellStyles(e,t){const o=Math.min(e.rows,t.rows),r=Math.min(e.cols,t.cols);for(let l=0;l<o;l++){for(let o=0;o<r;o++){const r=e.getCell(l,o),i=t.getCell(l,o);if(!r||!i){continue}const n={};for(const e of p){n[e]=r[e]}i.set(n)}}}export const useCopyStyle=r=>{const[l,i]=t(null);e(()=>{const e=r.selectedElements;l&&(e.forEach(e=>{const t=o(b[e.type],b[l.type]).reduce((e,t)=>{let o=l[t];return Array.isArray(o)?o=[...o]:"object"==typeof o&&null!==o&&(o=Object.assign({},o)),Object.assign(Object.assign({},e),{[t]:o})},{});e.type!==l.type&&g.forEach(e=>{delete t[e]}),e.set(Object.assign({},t)),"table"===l.type&&"table"===e.type&&copyTableCellStyles(l,e)}),i(null))},[r.selectedElements[0]]);const n=1!==r.selectedElements.length;return{elementToCopy:l,disabled:n,setElementToCopy:i}};const r=["opacity","visible","height","width","shadowEnabled","shadowBlur","shadowColor","shadowOffsetX","shadowOffsetY","blurEnabled","blurRadius","brightnessEnabled","brightness","sepiaEnabled","grayscaleEnabled"],l=[...r,"fontSize","fontWeight","fontFamily","lineHeight","stroke","strokeWidth","textDecoration","fill","align","verticalAlign","letterSpacing","backgroundEnabled","backgroundColor","backgroundOpacity","backgroundCornerRadius","backgroundPadding"],i=[...r,"flipX","flipY","keepRatio","borderColor","borderSize","cornerRadius","cropX","cropY","cropWidth","cropHeight"],n=[...r,"flipX","flipY","keepRatio","borderColor","borderSize","cornerRadius","cropX","cropY","cropWidth","cropHeight"],a=[...r,"color","dash","endHead","startHead"],s=[...r,"dash","cornerRadius","fill","stroke","strokeWidth"],c=[...r,"cornerRadius","borderColor","borderSize","colorsReplace","cropHeight","cropWidth","cropX","cropY","flipX","flipY","keepRatio"],d=[...r,"borderColor","borderWidth","borderStyle"],p=["fontSize","fontFamily","fontWeight","fontStyle","textDecoration","fill","align","verticalAlign","lineHeight","letterSpacing","cellBackground","cellPadding","borders"],b={figure:s,image:i,line:a,svg:c,text:l,video:n,table:d},g=["width","height"];

package/utils/fonts.js

@@ -1 +1 @@
-import*as t from"mobx";import{triggerLoadError as e,getFontLoadTimeout as o}from"./loader.js";let n=t.observable(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),r=t.observable({value:!1});export function isGoogleFontChanged(){return r.value}export function setGoogleFonts(t){"default"!==t?(r.value=!0,n.splice(0,n.length),n.push(...t)):r.value=!1}export function getFontsList(){return n}export const globalFonts=t.observable([]);export function addGlobalFont(t){globalFonts.push(t)}export function removeGlobalFont(t){const e=globalFonts.findIndex(e=>e.fontFamily===t);-1!==e&&globalFonts.splice(e,1)}export function replaceGlobalFonts(t){globalFonts.replace(t)}var s="Some test text;?#D-ПРИВЕТ!1230o9u8i7y6t5r4e3w2q1";let a;function l(t,e="sans-serif",o="normal",n="normal"){a||(a=document.createElement("canvas"));var r=a.getContext("2d");return r.font=`${o} ${n} 40px '${t}', ${e}`,r.measureText(s).width}export function measureFontDom(t,e="sans-serif",o="normal",n="normal"){if("undefined"==typeof document||!document.body){return 0}const r=document.createElement("span");r.textContent=s,r.style.cssText=`\n    position:absolute;\n    visibility:hidden;\n    white-space:nowrap;\n    top:-9999px;\n    left:-9999px;\n    font:${o} ${n} 90px '${t}', ${e};\n  `,document.body.appendChild(r);const a=r.getBoundingClientRect().width;return r.remove(),a}const i={Arial:!0};export const isFontLoaded=(t,e,o)=>e&&o?!!i[`${t}_${e}_${o}`]:Object.keys(i).some(e=>e.startsWith(t+"_"))||!!i[t];export function _setFontLoadedForTesting(t,e){e?i[t]=!0:delete i[t]}export async function loadFont(t,n,r){var c;const u=`${t}_${n}_${r}`;if(i[u]){return}const f=!!(null===(c=document.fonts)||void 0===c?void 0:c.load),m=function(t="normal",e="normal"){a||(a=document.createElement("canvas"));var o=a.getContext("2d");return o.font=`${t} ${e} 40px sans-serif`,o.measureText(s).width}(n,r);if(f){try{await document.fonts.load(`${n} ${r} 16px '${t}'`);if(m!==l(t,"sans-serif",n,r)){return void(i[u]=!0)}}catch(x){}}const d=function(t="normal",e="normal"){a||(a=document.createElement("canvas"));var o=a.getContext("2d");return o.font=`${t} ${e} 40px serif`,o.measureText(s).width}(n,r),p=l(t,"sans-serif",n,r),g=Math.min(6e3,o())/60;for(let e=0;e<g;e++){const e=l(t,"sans-serif",n,r),o=l(t,"serif",n,r);if(e!==p||e!==m||o!==d){return await new Promise(t=>setTimeout(t,100)),void(i[u]=!0)}await new Promise(t=>setTimeout(t,60))}console.warn(`Timeout for loading font "${t}". Looks like polotno can't load it. Is it a correct font family?`),e(`Timeout for loading font "${t}"`)}const c={};let u="400,400italic,700,700italic";export function setGoogleFontsVariants(t){u=t}export function getGoogleFontsVariants(){return u}export function getGoogleFontsUrl(t){return`https://fonts.googleapis.com/css?family=${t.replace(/ /g,"+")}:${u}`}export function injectGoogleFont(t){if(c[t]){return}const e=getGoogleFontsUrl(t),o=document.createElement("link");o.type="text/css",o.href=e,o.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(o),c[t]=!0}const f={};let m;export function injectCustomFont(t){const e=t.fontFamily;if(f[e]){return}if(!t.url&&!t.styles){return}const o=t.styles||(t.url?[{src:`url("${t.url}")`}]:[]),n=(m||(m=document.getElementById("polotno-font-style"),m||(m=document.createElement("style"),m.id="polotno-font-style",document.head.appendChild(m)),m)).sheet;o.forEach(t=>{n.insertRule(`\n    @font-face{\n      font-family:'${e}';\n      src:${t.src};\n      font-style:${t.fontStyle||"normal"};\n      font-weight:${t.fontWeight||"normal"};\n      font-display:swap;   /* optional but recommended */\n    }`,n.cssRules.length)}),f[t.fontFamily]=!0}
+import*as t from"mobx";import{triggerLoadError as e,getFontLoadTimeout as o}from"./loader.js";let n=t.observable(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),r=t.observable({value:!1});export function isGoogleFontChanged(){return r.value}export function setGoogleFonts(t){"default"!==t?(r.value=!0,n.splice(0,n.length),n.push(...t)):r.value=!1}export function getFontsList(){return n}export const globalFonts=t.observable([]);export function addGlobalFont(t){globalFonts.push(t)}export function removeGlobalFont(t){const e=globalFonts.findIndex(e=>e.fontFamily===t);-1!==e&&globalFonts.splice(e,1)}export function replaceGlobalFonts(t){globalFonts.replace(t)}var s="If you already have representation by a realtor, this is not a solicitation";let a;function l(t,e="sans-serif",o="normal",n="normal"){a||(a=document.createElement("canvas"));var r=a.getContext("2d");return r.font=`${o} ${n} 40px '${t}', ${e}`,r.measureText(s).width}export function measureFontDom(t,e="sans-serif",o="normal",n="normal"){if("undefined"==typeof document||!document.body){return 0}const r=document.createElement("span");r.textContent=s,r.style.cssText=`\n    position:absolute;\n    visibility:hidden;\n    white-space:nowrap;\n    top:-9999px;\n    left:-9999px;\n    font:${o} ${n} 90px '${t}', ${e};\n  `,document.body.appendChild(r);const a=r.getBoundingClientRect().width;return r.remove(),a}const i={Arial:!0};export const isFontLoaded=(t,e,o)=>e&&o?!!i[`${t}_${e}_${o}`]:Object.keys(i).some(e=>e.startsWith(t+"_"))||!!i[t];export function _setFontLoadedForTesting(t,e){e?i[t]=!0:delete i[t]}export async function loadFont(t,n,r){var c;const u=`${t}_${n}_${r}`;if(i[u]){return}const f=!!(null===(c=document.fonts)||void 0===c?void 0:c.load),d=function(t="normal",e="normal"){a||(a=document.createElement("canvas"));var o=a.getContext("2d");return o.font=`${t} ${e} 40px sans-serif`,o.measureText(s).width}(n,r);if(f){try{await document.fonts.load(`${n} ${r} 16px '${t}'`);if(d!==l(t,"sans-serif",n,r)){return void(i[u]=!0)}}catch(x){}}const m=function(t="normal",e="normal"){a||(a=document.createElement("canvas"));var o=a.getContext("2d");return o.font=`${t} ${e} 40px serif`,o.measureText(s).width}(n,r),p=l(t,"sans-serif",n,r),g=Math.min(6e3,o())/60;for(let e=0;e<g;e++){const e=l(t,"sans-serif",n,r),o=l(t,"serif",n,r);if(e!==p||e!==d||o!==m){return await new Promise(t=>setTimeout(t,100)),void(i[u]=!0)}await new Promise(t=>setTimeout(t,60))}console.warn(`Timeout for loading font "${t}". Looks like polotno can't load it. Is it a correct font family?`),e(`Timeout for loading font "${t}"`)}const c={};let u="400,400italic,700,700italic";export function setGoogleFontsVariants(t){u=t}export function getGoogleFontsVariants(){return u}export function getGoogleFontsUrl(t){return`https://fonts.googleapis.com/css?family=${t.replace(/ /g,"+")}:${u}`}export function injectGoogleFont(t){if(c[t]){return}const e=getGoogleFontsUrl(t),o=document.createElement("link");o.type="text/css",o.href=e,o.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(o),c[t]=!0}const f={};let d;export function injectCustomFont(t){const e=t.fontFamily;if(f[e]){return}if(!t.url&&!t.styles){return}const o=t.styles||(t.url?[{src:`url("${t.url}")`}]:[]),n=(d||(d=document.getElementById("polotno-font-style"),d||(d=document.createElement("style"),d.id="polotno-font-style",document.head.appendChild(d)),d)).sheet;o.forEach(t=>{n.insertRule(`\n    @font-face{\n      font-family:'${e}';\n      src:${t.src};\n      font-style:${t.fontStyle||"normal"};\n      font-weight:${t.fontWeight||"normal"};\n      font-display:swap;   /* optional but recommended */\n    }`,n.cssRules.length)}),f[t.fontFamily]=!0}

package/utils/l10n.d.ts

@@ -111,6 +111,29 @@ export declare const getTranslations: () => {
         italic: string;
         underline: string;
         strikethrough: string;
+        cellBackground: string;
+        tableBorderSettings: string;
+        tableBorderColor: string;
+        tableBorderWidth: string;
+        tableBorderStyle: string;
+        borderAllSides: string;
+        borderTop: string;
+        borderBottom: string;
+        borderLeft: string;
+        borderRight: string;
+        borderNone: string;
+        tableStructure: string;
+        tableRows: string;
+        tableColumns: string;
+        insertRowAbove: string;
+        insertRowBelow: string;
+        deleteRow: string;
+        insertColumnLeft: string;
+        insertColumnRight: string;
+        deleteColumn: string;
+        distributeRowsEvenly: string;
+        distributeColumnsEvenly: string;
+        cellPadding: string;
         listFormat: string;
         colorPicker: {
             solid: string;
@@ -170,6 +193,7 @@ export declare const getTranslations: () => {
         effects: string;
         elements: string;
         shapes: string;
+        tables: string;
         lines: string;
         draw: string;
         upload: string;

package/utils/l10n.js

@@ -1 +1 @@
-import{observable as e,action as o,toJS as a}from"mobx";const n=e({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",curvedText:"Curved text",curvePower:"Power",temperature:"Temperature",saturation:"Saturation",contrast:"Contrast",shadows:"Shadows",white:"White",black:"Black",vibrance:"Vibrance",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",filters:"Filters",sepia:"Sepia",grayscale:"Grayscale",cold:"Cold",natural:"Natural",warm:"Warm",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",copyStyle:"Copy style",uppercase:"Uppercase",position:"Position",layering:"Layering",toForward:"To Front",up:"Forward",down:"Backward",toBottom:"To back",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",clip:"Apply mask",removeClip:"Remove mask",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",rotate:"Rotate",none:"None",bounce:"Bounce",blink:"Blink",strength:"Strength",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically",strokeWidth:"Stroke Width",strokeSettings:"Stroke settings",spacing:"Spacing",volume:"Volume",lineStyle:"Line style",lineStartHead:"Line start",lineEndHead:"Line end",textDirection:"Text direction",fontSize:"Font size",fontFamily:"Font family",textAlign:"Text align",verticalAlign:"Vertical align",bold:"Bold",italic:"Italic",underline:"Underline",strikethrough:"Strikethrough",listFormat:"List",colorPicker:{solid:"Solid",linear:"Linear",angle:"Angle"},aiText:{aiWrite:"AI write",rewrite:"Rewrite",shorten:"Shorten",continue:"Continue writing",proofread:"Proofread",tones:"Tones",friendly:"Friendly",professional:"Professional",humorous:"Humorous",formal:"Formal",customPrompt:"Custom prompt",generatedResult:"Generated result",cancel:"Cancel",generate:"Generate",back:"Back",tryAgain:"Try Again",insert:"Insert",promptPlaceholder:"Describe what you want to generate"}},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down",moveLeft:"Move left",moveRight:"Move right"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",videos:"Videos",animations:"Animations",effects:"Effects",elements:"Elements",shapes:"Shapes",lines:"Lines",draw:"Draw",upload:"Upload",uploadImage:"Add file",uploadTip:"Upload your assets",background:"Background",resize:"Resize",layers:"Layers",animate:"Animate",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",figure:"Figure",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",clipImage:"Mask image",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"},pagesTimeline:{pages:"Pages",removePage:"Remove page",addPage:"Add page",duplicatePage:"Duplicate page",removeAudio:"Remove audio",duplicateAudio:"Duplicate audio",muteAudio:"Mute",unmuteAudio:"Unmute",volume:"Volume"},contextMenu:{duplicate:"Duplicate",remove:"Remove",lock:"Lock",unlock:"Unlock",copy:"Copy",paste:"Paste",copyStyle:"Copy style",moveUp:"Move up",moveDown:"Move down",moveBack:"Move back",moveForward:"Move forward"}}),r=e=>e&&"object"==typeof e;function i(e,o){Object.keys(o).forEach(a=>{const n=e[a],l=o[a];r(l)&&r(n)?i(n,l):e[a]=l})}function l(e,o,a=""){Object.keys(o).forEach(n=>{const i=o[n],s=a?`${a}.${n}`:n;r(i)?r(e[n])?l(e[n],i,s):console.warn(`Missing nested translation object at '${s}'`):void 0===e[n]&&console.warn(`Missing translation '${s}'`)})}export const setTranslations=o((e,{validate:o=!1}={})=>{o&&l(e,n),i(n,e)});export const getTranslations=()=>a(n);const s={};export const t=e=>{const o=function(e,o){var a,n=o.split("."),r=e;for(a=0;a<n.length;++a){if(null==r[n[a]]){return}r=r[n[a]]}return r}(n,e);if(void 0!==o){return o}s[e]||(s[e]=!0,console.warn(`Missing translation '${e}'`));const a=e.split("."),r=a[a.length-1]||" ";return r.charAt(0).toUpperCase()+r.slice(1)};
+import{observable as e,action as o,toJS as a}from"mobx";const r=e({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",curvedText:"Curved text",curvePower:"Power",temperature:"Temperature",saturation:"Saturation",contrast:"Contrast",shadows:"Shadows",white:"White",black:"Black",vibrance:"Vibrance",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",filters:"Filters",sepia:"Sepia",grayscale:"Grayscale",cold:"Cold",natural:"Natural",warm:"Warm",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",copyStyle:"Copy style",uppercase:"Uppercase",position:"Position",layering:"Layering",toForward:"To Front",up:"Forward",down:"Backward",toBottom:"To back",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",clip:"Apply mask",removeClip:"Remove mask",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",rotate:"Rotate",none:"None",bounce:"Bounce",blink:"Blink",strength:"Strength",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically",strokeWidth:"Stroke Width",strokeSettings:"Stroke settings",spacing:"Spacing",volume:"Volume",lineStyle:"Line style",lineStartHead:"Line start",lineEndHead:"Line end",textDirection:"Text direction",fontSize:"Font size",fontFamily:"Font family",textAlign:"Text align",verticalAlign:"Vertical align",bold:"Bold",italic:"Italic",underline:"Underline",strikethrough:"Strikethrough",cellBackground:"Cell background",tableBorderSettings:"Border settings",tableBorderColor:"Border color",tableBorderWidth:"Border width",tableBorderStyle:"Border style",borderAllSides:"All sides",borderTop:"Top",borderBottom:"Bottom",borderLeft:"Left",borderRight:"Right",borderNone:"No border",tableStructure:"Table structure",tableRows:"Rows",tableColumns:"Columns",insertRowAbove:"Insert row above",insertRowBelow:"Insert row below",deleteRow:"Delete row",insertColumnLeft:"Insert column left",insertColumnRight:"Insert column right",deleteColumn:"Delete column",distributeRowsEvenly:"Distribute rows evenly",distributeColumnsEvenly:"Distribute columns evenly",cellPadding:"Cell padding",listFormat:"List",colorPicker:{solid:"Solid",linear:"Linear",angle:"Angle"},aiText:{aiWrite:"AI write",rewrite:"Rewrite",shorten:"Shorten",continue:"Continue writing",proofread:"Proofread",tones:"Tones",friendly:"Friendly",professional:"Professional",humorous:"Humorous",formal:"Formal",customPrompt:"Custom prompt",generatedResult:"Generated result",cancel:"Cancel",generate:"Generate",back:"Back",tryAgain:"Try Again",insert:"Insert",promptPlaceholder:"Describe what you want to generate"}},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down",moveLeft:"Move left",moveRight:"Move right"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",videos:"Videos",animations:"Animations",effects:"Effects",elements:"Elements",shapes:"Shapes",tables:"Tables",lines:"Lines",draw:"Draw",upload:"Upload",uploadImage:"Add file",uploadTip:"Upload your assets",background:"Background",resize:"Resize",layers:"Layers",animate:"Animate",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",figure:"Figure",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",clipImage:"Mask image",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"},pagesTimeline:{pages:"Pages",removePage:"Remove page",addPage:"Add page",duplicatePage:"Duplicate page",removeAudio:"Remove audio",duplicateAudio:"Duplicate audio",muteAudio:"Mute",unmuteAudio:"Unmute",volume:"Volume"},contextMenu:{duplicate:"Duplicate",remove:"Remove",lock:"Lock",unlock:"Unlock",copy:"Copy",paste:"Paste",copyStyle:"Copy style",moveUp:"Move up",moveDown:"Move down",moveBack:"Move back",moveForward:"Move forward"}}),n=e=>e&&"object"==typeof e;function i(e,o){Object.keys(o).forEach(a=>{const r=e[a],l=o[a];n(l)&&n(r)?i(r,l):e[a]=l})}function l(e,o,a=""){Object.keys(o).forEach(r=>{const i=o[r],s=a?`${a}.${r}`:r;n(i)?n(e[r])?l(e[r],i,s):console.warn(`Missing nested translation object at '${s}'`):void 0===e[r]&&console.warn(`Missing translation '${s}'`)})}export const setTranslations=o((e,{validate:o=!1}={})=>{o&&l(e,r),i(r,e)});export const getTranslations=()=>a(r);const s={};export const t=e=>{const o=function(e,o){var a,r=o.split("."),n=e;for(a=0;a<r.length;++a){if(null==n[r[a]]){return}n=n[r[a]]}return n}(r,e);if(void 0!==o){return o}s[e]||(s[e]=!0,console.warn(`Missing translation '${e}'`));const a=e.split("."),n=a[a.length-1]||" ";return n.charAt(0).toUpperCase()+n.slice(1)};

package/utils/to-html.js

@@ -1 +1 @@
-var e=this&&this.__rest||function(e,t){var i={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(i[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++){t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(i[o[r]]=e[o[r]])}}return i};import{getCrop as t,loadImage as i}from"./image.js";import*as o from"./svg.js";import{figureToSvg as r}from"./figure-to-svg.js";import{resetStyleContent as n}from"./reset-style.js";import{Effects as s,shapeFilterToCSS as a}from"./filters.js";import{getVideoSize as l}from"./video.js";import{getGoogleFontsUrl as d}from"./fonts.js";import{forEveryChild as c}from"../model/group-model.js";import{getCurvePath as p}from"../canvas/text-element.js";import{removeTags as g}from"./text.js";import f from"konva";import*as b from"./gradient.js";import{createSVGGradientDef as u}from"./text-html.js";export const h=(e,t,...i)=>({type:e,props:t,children:i||[]});function m(e){return b.isGradient(e),e}export function fixRatio(e){var t=(new DOMParser).parseFromString(e,"image/svg+xml");return t.documentElement.setAttribute("preserveAspectRatio","none"),(new XMLSerializer).serializeToString(t)}const k=async({element:e,page:t,store:r})=>{let{src:n}=e;if("svg"===e.type){let t=await o.urlToString(n);t=fixRatio(t),n=Object.keys(e.colorsReplace).length?o.replaceColors(t,new Map(Object.entries(e.colorsReplace))):o.svgToURL(t)}let s="";e.flipX&&(s+="scaleX(-1)"),e.flipY&&(s+="scaleY(-1)"),s||(s="none");const a={};if("svg"===e.type&&e.maskSrc){const t=await o.urlToBase64(n);a["mask-image"]=`url(${t})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${t})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat",n=e.maskSrc}else if(e.clipSrc){const t=e.clipSrc,i=await o.urlToBase64(t);a["mask-image"]=`url(${i})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${i})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat"}const l=await i(n),d=l.width*e.cropWidth,c=l.height*e.cropHeight,p=e.width/e.height;let g,f;const u=d/c,k="svg"===e.type||e.stretchEnabled;k?(g=d,f=c):p>=u?(g=d,f=d/p):(g=c*p,f=c);const y=g/l.width,x=f/l.height,$=g/f>e.width/e.height?e.height/f:e.width/g,w=k?e.width/g:$,j=k?e.height/f:$,v=g*w/y,O=f*j/x;let S=e.cropX*w*l.width,z=e.cropY*j*l.height;e.flipX&&(S=(1-e.cropX-e.cropWidth)*w*l.width),e.flipY&&(z=(1-e.cropY-e.cropHeight)*j*l.height);const H=e.borderSize&&b.isGradient(e.borderColor),M=H?Math.max(0,e.cornerRadius-e.borderSize):e.cornerRadius,R=h("div",{style:Object.assign(Object.assign({},a),{width:"100%",height:"100%",borderRadius:M+"px",border:e.borderSize&&!H?`${e.borderSize}px solid ${e.borderColor}`:"none",backgroundRepeat:"no-repeat",backgroundImage:`url(${n})`,transform:s,backgroundSize:`${Math.round(v)}px ${Math.round(O)}px`,backgroundPositionX:-Math.round(S)+"px",backgroundPositionY:-Math.round(z)+"px"})});return H?h("div",{style:{width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",background:m(e.borderColor),padding:e.borderSize+"px",boxSizing:"border-box"}},R):R},y=({element:e,type:t})=>{const i={"stroke-width":e.height,stroke:e.color,"stroke-linecap":"round","stroke-linejoin":"round",opacity:e.opacity},o=Object.assign(Object.assign({},i),{fill:e.color}),r=Object.assign(Object.assign({},i),{fill:"none"});return"arrow"===t?h("polyline",Object.assign({points:`${3*e.height},${2*-e.height} 0,0 ${3*e.height},${2*e.height}`},r)):"triangle"===t?h("polygon",Object.assign({points:`${3*e.height},${2*-e.height} 0,0 ${3*e.height},${2*e.height}`},o)):"bar"===t?h("polyline",Object.assign({points:`0,${2*-e.height} 0,${2*e.height}`},r)):"circle"===t?h("circle",Object.assign({cx:2*e.height,cy:0,r:2*e.height},o)):"square"===t?h("polygon",Object.assign({points:`0,${2*-e.height} ${4*e.height},${2*-e.height} ${4*e.height},${2*e.height} 0,${2*e.height}`},o)):null},x={image:k,svg:k,text:async({element:e,page:t,store:i})=>{const o=b.isGradient(e.fill),r=b.isGradient(e.stroke);if(e.curveEnabled){const t=p(e.width,e.height,e.curvePower,e.fontSize),i=g(e.text).replace(/\n/g," ");let n=`\n      <svg xmlns="http://www.w3.org/2000/svg" width="${e.width}" height="${e.height}" style="display: block;">\n        <defs>\n          <path id="curve-${e.id}" d="${t}" fill="none" />`;if(o){const t=`curve-fill-grad-${e.id}`;n+=u(e.fill,t)}if(r&&e.strokeWidth){const t=`curve-stroke-grad-${e.id}`;n+=u(e.stroke,t)}n+=`</defs>\n        <text\n          font-family="'${e.fontFamily}'"\n          font-size="${e.fontSize}"\n          font-weight="${e.fontWeight}"\n          font-style="${e.fontStyle}"\n          fill="${o?`url(#curve-fill-grad-${e.id})`:e.fill}"\n          text-anchor="middle"\n          dominant-baseline="central"\n          letter-spacing="${e.letterSpacing*e.fontSize}px"${e.textDecoration?` text-decoration="${e.textDecoration}"`:""}${e.strokeWidth?` stroke="${r?`url(#curve-stroke-grad-${e.id})`:e.stroke}" stroke-width="${e.strokeWidth}" paint-order="stroke fill"`:""}>\n          <textPath href="#curve-${e.id}" startOffset="50%">\n            ${i}\n          </textPath>\n        </text>\n      </svg>`;const s=e.backgroundPadding*(e.fontSize*e.lineHeight),a=e.backgroundEnabled&&h("div",{style:{position:"absolute",top:-s/2+"px",left:-s/2+"px",width:e.width+s+"px",height:e.height+s+"px",backgroundColor:e.backgroundColor,opacity:e.backgroundOpacity,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}}),l=h("div",{style:{width:"100%",height:"100%",position:"absolute",top:0,left:0},innerHTML:n});return h("div",{style:{position:"relative",width:"100%",height:"100%"}},a,l)}const s=e=>({backgroundImage:e,backgroundSize:"100% 100%",backgroundRepeat:"repeat",WebkitBackgroundClip:"text",MozBackgroundClip:"text",backgroundClip:"text",WebkitTextFillColor:"transparent",MozTextFillColor:"transparent",color:"transparent"});let a={top:0,left:0};o&&(a=Object.assign(Object.assign({},a),s(e.fill)));const l=e.backgroundPadding*(e.fontSize*e.lineHeight),d=h("div",{style:{position:"absolute",top:-l/2+"px",left:-l/2+"px",display:e.backgroundEnabled?"block":"none",width:e.width+l+"px",height:e.height+l+"px",backgroundColor:e.backgroundColor,opacity:e.backgroundOpacity,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}});"middle"===e.verticalAlign?(a.top="50%",a.transform="translateY(-50%)"):"bottom"===e.verticalAlign&&(a.bottom=0);const c=/<[a-z][\s\S]*>/i.test(e.text),f=c?e.text:e.text.split("\n").join("<br />");if(e.strokeWidth&&(r||o&&!r)){const t=Object.assign({position:"absolute",width:e.width+"px",whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:`'${e.fontFamily}'`,textDecoration:e.textDecoration||"none",textDecorationColor:e.textDecoration?e.fill:void 0,textTransform:e.textTransform||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing*e.fontSize+"px",fontStyle:e.fontStyle,fontWeight:e.fontWeight},a),i=r?Object.assign(Object.assign(Object.assign({},t),s(e.stroke)),{WebkitTextStroke:`${e.strokeWidth}px transparent`}):Object.assign(Object.assign({},t),{color:"transparent",WebkitTextStroke:`${e.strokeWidth}px ${e.stroke}`}),l=o?Object.assign(Object.assign({},t),s(e.fill)):Object.assign(Object.assign({},t),{color:e.fill}),p="el-"+e.id,g=c?`<style>#${p} {${n}}</style>`:"",b=h("div",{style:Object.assign(Object.assign({},i),{position:"absolute",top:0,left:0,pointerEvents:"none"}),"aria-hidden":"true",innerHTML:c?`${g}${f}`:f}),u=h("div",Object.assign(Object.assign({style:Object.assign(Object.assign({},l),{position:"relative"})},c?{id:p}:{}),{innerHTML:c?`${g}${f}`:f}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,h("div",{style:{position:"relative",width:e.width+"px"}},b,u))}const m=Object.assign(Object.assign({},a),{position:"absolute",width:e.width+"px",color:e.fill,whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:`'${e.fontFamily}'`,textDecoration:e.textDecoration||"none",textDecorationColor:e.textDecoration?e.fill:void 0,textTransform:e.textTransform||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing*e.fontSize+"px",fontStyle:e.fontStyle,fontWeight:e.fontWeight,WebkitTextStroke:e.strokeWidth?`${e.strokeWidth}px ${e.stroke}`:void 0,paintOrder:e.strokeWidth?"stroke fill":void 0}),k="el-"+e.id,y=c?{id:k}:{},x=`<style>#${k} {${n}}</style>`,$=h("div",Object.assign(Object.assign({style:m},y),{innerHTML:c?`${x}${f}`:f}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,$)},line:async({element:e,page:t,store:i})=>h("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},h("line",{x1:0,y1:e.height/2,x2:e.width,y2:e.height/2,stroke:e.color,"stroke-width":e.height,"stroke-dasharray":e.dash&&e.dash.length?e.dash.map(t=>t*e.height).join(" "):void 0}),h("g",{transform:`translate(0 ${e.height/2})`},y({element:e,type:e.startHead})),h("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},y({element:e,type:e.endHead}))),figure:async({element:e,page:t,store:i,elementHook:o})=>{let n=r(e);if(e.strokeWidth&&b.isGradient(e.stroke)){const t=`figure-stroke-grad-${e.id}`,i=u(e.stroke,t);n=n.replace(new RegExp(`stroke="${e.stroke.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`stroke="url(#${t})"`),n=n.replace("</defs>",`${i}</defs>`)}if(b.isGradient(e.fill)){const t=`figure-fill-grad-${e.id}`,i=u(e.fill,t);n=n.replace(new RegExp(`fill="${e.fill.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`fill="url(#${t})"`),n=n.replace("</defs>",`${i}</defs>`)}const s=h("div",{innerHTML:n});return o&&o({dom:s,element:e})||s},group:async({element:e,page:t,store:i,elementHook:o})=>{const r=await Promise.all(e.children.map(e=>$({element:e,page:t,store:i,elementHook:o}))),n=h("div",{style:{transformOrigin:"top left",opacity:e.opacity}},...r);return o&&o({dom:n,element:e})||n},video:async({element:e,page:t,store:i,elementHook:o})=>{const{cropX:r,cropY:n,cropWidth:s,cropHeight:a}=e,d=await l(e.src),c=d.width*s,p=d.height*a,g=e.width/e.height;let f,u;g>=c/p?(f=c,u=c/g):(f=p*g,u=p);const k=f/s,y=u/a,x=r*d.width,$=n*d.height,w=Math.max(e.width/d.width,e.height/d.height),j={position:"absolute",width:`${Math.round(k*w)}px`,height:`${Math.round(y*w)}px`,left:-Math.round(x*w)+"px",top:-Math.round($*w)+"px",objectFit:"fill"},v=`video-${e.id}`,O=e.borderSize&&b.isGradient(e.borderColor),S=O?Math.max(0,e.cornerRadius-e.borderSize):e.cornerRadius,z=h("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",borderRadius:S+"px",border:e.borderSize&&!O?`${e.borderSize}px solid ${e.borderColor}`:"none"}},h("video",{id:v,src:e.src,style:j,controls:!0,playsInline:!0,muted:!0,volume:e.volume}));if(O){const t=h("div",{style:{width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",background:m(e.borderColor),padding:e.borderSize+"px",boxSizing:"border-box"}},z);return o&&o({dom:t,element:e})||t}return o&&o({dom:z,element:e})||z},gif:k};async function $({element:e,page:t,store:i,elementHook:o}){var r;let n=await x[e.type];if(n||(n=()=>h("div",{}),console.error(`HTML export does not support ${e.type} type...`)),!e.visible){return null}const l=await n({element:e,page:t,store:i}),d=[],c=[];if(e.blurEnabled&&d.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&d.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&d.push("sepia()"),e.grayscaleEnabled&&d.push("grayscale()"),e.filters){for(const[g,f]of Object.entries(e.filters)){const e=a(s[g],f.intensity);e&&(d.push(e.filter),e.html&&c.push(e.html))}}if(e.shadowEnabled){const t=function(e,t){if(1===t){return e}const i=f.Util.colorToRGBA(e);return i?`rgba(${i.r}, ${i.g}, ${i.b}, ${i.a*t})`:e}(e.shadowColor,null!==(r=e.shadowOpacity)&&void 0!==r?r:1);d.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur/2}px ${t})`)}const p=h("div",{id:e.id,style:{position:"absolute",left:e.x+"px",top:e.y+"px",width:e.width+"px",height:e.height+"px",transform:`rotate(${e.rotation}deg)`,transformOrigin:"top left",opacity:e.opacity,display:e.visible&&e.showInExport?"block":"none",filter:d.join(" ")||"none"}},l,...c);return o&&o({dom:p,element:e})||p}export async function jsonToDOM({json:e,elementHook:o}){const r=await Promise.all(e.pages.map(r=>async function({page:e,store:o,elementHook:r}){const n=await Promise.all(e.children.map(t=>$({element:t,page:e,store:o,elementHook:r}))),s="auto"===e.width?o.width:e.width,a="auto"===e.height?o.height:e.height;let l={};if(e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0){const{width:r,height:l}=await i(e.background),d=await k({element:Object.assign({x:0,y:0,width:s,height:a,src:e.background,cornerRadius:0},t({width:s,height:a},{width:r,height:l})),page:e,store:o});n.unshift(d)}else{l=Object.assign(Object.assign({},l),{backgroundColor:e.background})}return h("div",{className:"page",id:e.id,style:Object.assign(Object.assign({},l),{width:s+"px",height:a+"px",overflow:"hidden",position:"relative"})},...n)}({page:r,store:e,elementHook:o}))),n=[];c({children:e.pages},e=>{"text"===e.type&&-1===n.indexOf(e.fontFamily)&&n.push(e.fontFamily)});const s=n.map(t=>{const i=e.fonts.find(e=>e.fontFamily===t);if(i){const e=(i.styles||(i.url?[{src:`url("${i.url}")`}]:[])).map(e=>`\n    @font-face {\n      font-family: '${i.fontFamily}';\n      src: ${e.src};\n      font-style: ${e.fontStyle||"normal"};\n      font-weight: ${e.fontWeight||"normal"};\n      font-display: swap;\n    }`).join("\n");return h("style",{},e)}return h("link",{href:d(t),rel:"stylesheet"})});return h("div",{className:"design"},...s,...r)}const w=({dom:t})=>{if("string"==typeof t){return t}if(!t){return""}const i=t.props,{innerHTML:o}=i,r=e(i,["innerHTML"]),n=Object.keys(r).map(e=>"style"===e&&"object"==typeof r[e]?`style="${Object.keys(r[e]).filter(t=>null!=r[e][t]).map(t=>`${t.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}: ${r[e][t]}`).join("; ")}"`:((e,t)=>null==t||""===t?"":"object"==typeof t?`${e}="${Object.keys(t).map(e=>`${e.replace(/-([a-z])/g,e=>e[1].toUpperCase())}:${t[e]};`).join(" ")}"`:`${e}="${t}"`)(e,r[e])).filter(e=>e&&e.trim().length>0).join(" ");return`<${t.type} ${n}>${o||t.children.map(e=>w({dom:e})).join("")}</${t.type}>`};export async function jsonToHTML({json:e,elementHook:t}){const i=await jsonToDOM({json:e,elementHook:t});return w({dom:i})}
+var e=this&&this.__rest||function(e,t){var o={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(o[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++){t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(o[i[r]]=e[i[r]])}}return o};import{getCrop as t,loadImage as o}from"./image.js";import*as i from"./svg.js";import{figureToSvg as r}from"./figure-to-svg.js";import{resetStyleContent as n}from"./reset-style.js";import{Effects as s,shapeFilterToCSS as a}from"./filters.js";import{getVideoSize as l}from"./video.js";import{getGoogleFontsUrl as d}from"./fonts.js";import{forEveryNode as c}from"../model/group-model.js";import{getCurvePath as p}from"../canvas/text-element.js";import{removeTags as g}from"./text.js";import f from"konva";import*as b from"./gradient.js";import{createSVGGradientDef as u}from"./text-html.js";export const h=(e,t,...o)=>({type:e,props:t,children:o||[]});function m(e){return b.isGradient(e),e}export function fixRatio(e){var t=(new DOMParser).parseFromString(e,"image/svg+xml");return t.documentElement.setAttribute("preserveAspectRatio","none"),(new XMLSerializer).serializeToString(t)}const y=async({element:e,page:t,store:r})=>{let{src:n}=e;if("svg"===e.type){let t=await i.urlToString(n);t=fixRatio(t),n=Object.keys(e.colorsReplace).length?i.replaceColors(t,new Map(Object.entries(e.colorsReplace))):i.svgToURL(t)}let s="";e.flipX&&(s+="scaleX(-1)"),e.flipY&&(s+="scaleY(-1)"),s||(s="none");const a={};if("svg"===e.type&&e.maskSrc){const t=await i.urlToBase64(n);a["mask-image"]=`url(${t})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${t})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat",n=e.maskSrc}else if(e.clipSrc){const t=e.clipSrc,o=await i.urlToBase64(t);a["mask-image"]=`url(${o})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${o})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat"}const l=await o(n),d=l.width*e.cropWidth,c=l.height*e.cropHeight,p=e.width/e.height;let g,f;const u=d/c,y="svg"===e.type||e.stretchEnabled;y?(g=d,f=c):p>=u?(g=d,f=d/p):(g=c*p,f=c);const k=g/l.width,x=f/l.height,w=g/f>e.width/e.height?e.height/f:e.width/g,$=y?e.width/g:w,v=y?e.height/f:w,j=g*$/k,O=f*v/x;let S=e.cropX*$*l.width,z=e.cropY*v*l.height;e.flipX&&(S=(1-e.cropX-e.cropWidth)*$*l.width),e.flipY&&(z=(1-e.cropY-e.cropHeight)*v*l.height);const H=e.borderSize&&b.isGradient(e.borderColor),T=H?Math.max(0,e.cornerRadius-e.borderSize):e.cornerRadius,W=h("div",{style:Object.assign(Object.assign({},a),{width:"100%",height:"100%",borderRadius:T+"px",border:e.borderSize&&!H?`${e.borderSize}px solid ${e.borderColor}`:"none",backgroundRepeat:"no-repeat",backgroundImage:`url(${n})`,transform:s,backgroundSize:`${Math.round(j)}px ${Math.round(O)}px`,backgroundPositionX:-Math.round(S)+"px",backgroundPositionY:-Math.round(z)+"px"})});return H?h("div",{style:{width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",background:m(e.borderColor),padding:e.borderSize+"px",boxSizing:"border-box"}},W):W},k=({element:e,type:t})=>{const o={"stroke-width":e.height,stroke:e.color,"stroke-linecap":"round","stroke-linejoin":"round",opacity:e.opacity},i=Object.assign(Object.assign({},o),{fill:e.color}),r=Object.assign(Object.assign({},o),{fill:"none"});return"arrow"===t?h("polyline",Object.assign({points:`${3*e.height},${2*-e.height} 0,0 ${3*e.height},${2*e.height}`},r)):"triangle"===t?h("polygon",Object.assign({points:`${3*e.height},${2*-e.height} 0,0 ${3*e.height},${2*e.height}`},i)):"bar"===t?h("polyline",Object.assign({points:`0,${2*-e.height} 0,${2*e.height}`},r)):"circle"===t?h("circle",Object.assign({cx:2*e.height,cy:0,r:2*e.height},i)):"square"===t?h("polygon",Object.assign({points:`0,${2*-e.height} ${4*e.height},${2*-e.height} ${4*e.height},${2*e.height} 0,${2*e.height}`},i)):null},x={image:y,svg:y,text:async({element:e,page:t,store:o})=>{const i=b.isGradient(e.fill),r=b.isGradient(e.stroke);if(e.curveEnabled){const t=p(e.width,e.height,e.curvePower,e.fontSize),o=g(e.text).replace(/\n/g," ");let n=`\n      <svg xmlns="http://www.w3.org/2000/svg" width="${e.width}" height="${e.height}" style="display: block;">\n        <defs>\n          <path id="curve-${e.id}" d="${t}" fill="none" />`;if(i){const t=`curve-fill-grad-${e.id}`;n+=u(e.fill,t)}if(r&&e.strokeWidth){const t=`curve-stroke-grad-${e.id}`;n+=u(e.stroke,t)}n+=`</defs>\n        <text\n          font-family="'${e.fontFamily}'"\n          font-size="${e.fontSize}"\n          font-weight="${e.fontWeight}"\n          font-style="${e.fontStyle}"\n          fill="${i?`url(#curve-fill-grad-${e.id})`:e.fill}"\n          text-anchor="middle"\n          dominant-baseline="central"\n          letter-spacing="${e.letterSpacing*e.fontSize}px"${e.textDecoration?` text-decoration="${e.textDecoration}"`:""}${e.strokeWidth?` stroke="${r?`url(#curve-stroke-grad-${e.id})`:e.stroke}" stroke-width="${e.strokeWidth}" paint-order="stroke fill"`:""}>\n          <textPath href="#curve-${e.id}" startOffset="50%">\n            ${o}\n          </textPath>\n        </text>\n      </svg>`;const s=e.backgroundPadding*(e.fontSize*e.lineHeight),a=e.backgroundEnabled&&h("div",{style:{position:"absolute",top:-s/2+"px",left:-s/2+"px",width:e.width+s+"px",height:e.height+s+"px",backgroundColor:e.backgroundColor,opacity:e.backgroundOpacity,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}}),l=h("div",{style:{width:"100%",height:"100%",position:"absolute",top:0,left:0},innerHTML:n});return h("div",{style:{position:"relative",width:"100%",height:"100%"}},a,l)}const s=e=>({backgroundImage:e,backgroundSize:"100% 100%",backgroundRepeat:"repeat",WebkitBackgroundClip:"text",MozBackgroundClip:"text",backgroundClip:"text",WebkitTextFillColor:"transparent",MozTextFillColor:"transparent",color:"transparent"});let a={top:0,left:0};i&&(a=Object.assign(Object.assign({},a),s(e.fill)));const l=e.backgroundPadding*(e.fontSize*e.lineHeight),d=h("div",{style:{position:"absolute",top:-l/2+"px",left:-l/2+"px",display:e.backgroundEnabled?"block":"none",width:e.width+l+"px",height:e.height+l+"px",backgroundColor:e.backgroundColor,opacity:e.backgroundOpacity,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}});"middle"===e.verticalAlign?(a.top="50%",a.transform="translateY(-50%)"):"bottom"===e.verticalAlign&&(a.bottom=0);const c=/<[a-z][\s\S]*>/i.test(e.text),f=c?e.text:e.text.split("\n").join("<br />");if(e.strokeWidth&&(r||i&&!r)){const t=Object.assign({position:"absolute",width:e.width+"px",whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:`'${e.fontFamily}'`,textDecoration:e.textDecoration||"none",textDecorationColor:e.textDecoration?e.fill:void 0,textTransform:e.textTransform||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing*e.fontSize+"px",fontStyle:e.fontStyle,fontWeight:e.fontWeight},a),o=r?Object.assign(Object.assign(Object.assign({},t),s(e.stroke)),{WebkitTextStroke:`${e.strokeWidth}px transparent`}):Object.assign(Object.assign({},t),{color:"transparent",WebkitTextStroke:`${e.strokeWidth}px ${e.stroke}`}),l=i?Object.assign(Object.assign({},t),s(e.fill)):Object.assign(Object.assign({},t),{color:e.fill}),p="el-"+e.id,g=c?`<style>#${p} {${n}}</style>`:"",b=h("div",{style:Object.assign(Object.assign({},o),{position:"absolute",top:0,left:0,pointerEvents:"none"}),"aria-hidden":"true",innerHTML:c?`${g}${f}`:f}),u=h("div",Object.assign(Object.assign({style:Object.assign(Object.assign({},l),{position:"relative"})},c?{id:p}:{}),{innerHTML:c?`${g}${f}`:f}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,h("div",{style:{position:"relative",width:e.width+"px"}},b,u))}const m=Object.assign(Object.assign({},a),{position:"absolute",width:e.width+"px",color:e.fill,whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:`'${e.fontFamily}'`,textDecoration:e.textDecoration||"none",textDecorationColor:e.textDecoration?e.fill:void 0,textTransform:e.textTransform||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing*e.fontSize+"px",fontStyle:e.fontStyle,fontWeight:e.fontWeight,WebkitTextStroke:e.strokeWidth?`${e.strokeWidth}px ${e.stroke}`:void 0,paintOrder:e.strokeWidth?"stroke fill":void 0}),y="el-"+e.id,k=c?{id:y}:{},x=`<style>#${y} {${n}}</style>`,w=h("div",Object.assign(Object.assign({style:m},k),{innerHTML:c?`${x}${f}`:f}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,w)},line:async({element:e,page:t,store:o})=>h("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},h("line",{x1:0,y1:e.height/2,x2:e.width,y2:e.height/2,stroke:e.color,"stroke-width":e.height,"stroke-dasharray":e.dash&&e.dash.length?e.dash.map(t=>t*e.height).join(" "):void 0}),h("g",{transform:`translate(0 ${e.height/2})`},k({element:e,type:e.startHead})),h("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},k({element:e,type:e.endHead}))),figure:async({element:e,page:t,store:o,elementHook:i})=>{let n=r(e);if(e.strokeWidth&&b.isGradient(e.stroke)){const t=`figure-stroke-grad-${e.id}`,o=u(e.stroke,t);n=n.replace(new RegExp(`stroke="${e.stroke.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`stroke="url(#${t})"`),n=n.replace("</defs>",`${o}</defs>`)}if(b.isGradient(e.fill)){const t=`figure-fill-grad-${e.id}`,o=u(e.fill,t);n=n.replace(new RegExp(`fill="${e.fill.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`fill="url(#${t})"`),n=n.replace("</defs>",`${o}</defs>`)}const s=h("div",{innerHTML:n});return i&&i({dom:s,element:e})||s},group:async({element:e,page:t,store:o,elementHook:i})=>{const r=await Promise.all(e.children.map(e=>w({element:e,page:t,store:o,elementHook:i}))),n=h("div",{style:{transformOrigin:"top left",opacity:e.opacity}},...r);return i&&i({dom:n,element:e})||n},video:async({element:e,page:t,store:o,elementHook:i})=>{const{cropX:r,cropY:n,cropWidth:s,cropHeight:a}=e,d=await l(e.src),c=d.width*s,p=d.height*a,g=e.width/e.height;let f,u;g>=c/p?(f=c,u=c/g):(f=p*g,u=p);const y=f/s,k=u/a,x=r*d.width,w=n*d.height,$=Math.max(e.width/d.width,e.height/d.height),v={position:"absolute",width:`${Math.round(y*$)}px`,height:`${Math.round(k*$)}px`,left:-Math.round(x*$)+"px",top:-Math.round(w*$)+"px",objectFit:"fill"},j=`video-${e.id}`,O=e.borderSize&&b.isGradient(e.borderColor),S=O?Math.max(0,e.cornerRadius-e.borderSize):e.cornerRadius,z=h("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",borderRadius:S+"px",border:e.borderSize&&!O?`${e.borderSize}px solid ${e.borderColor}`:"none"}},h("video",{id:j,src:e.src,style:v,controls:!0,playsInline:!0,muted:!0,volume:e.volume}));if(O){const t=h("div",{style:{width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",background:m(e.borderColor),padding:e.borderSize+"px",boxSizing:"border-box"}},z);return i&&i({dom:t,element:e})||t}return i&&i({dom:z,element:e})||z},gif:y,table:async({element:e})=>{const t=e.rows,o=e.cols,i=e.colWidths,r=e.rowHeights,n=["fontSize","fontFamily","fontWeight","fontStyle","textDecoration","textTransform","fill","align","verticalAlign","lineHeight","letterSpacing","strokeWidth","stroke","cellBackground","cellPadding"],s=(e.cells||[]).map(t=>{if(!t){return t}const o=Object.assign({},t);for(const i of n){void 0===o[i]&&(o[i]=e[i])}return o}),a=[];for(let d=0;d<t;d++){const t=[];for(let i=0;i<o;i++){const n=s[d*o+i];if(!n||n.mergedInto){continue}const a=n.cellPadding||4,l=n.colSpan||1,c=n.rowSpan||1,p=t=>{var o,i,r,s,a;const l=null===(o=n.borders)||void 0===o?void 0:o[t];return`${null!==(i=null==l?void 0:l.width)&&void 0!==i?i:e.borderWidth}px ${null!==(s=null!==(r=null==l?void 0:l.style)&&void 0!==r?r:e.borderStyle)&&void 0!==s?s:"solid"} ${null!==(a=null==l?void 0:l.color)&&void 0!==a?a:e.borderColor}`},f={style:{padding:a+"px",background:n.cellBackground||"transparent",fontSize:(n.fontSize||12)+"px",fontFamily:`'${n.fontFamily||"Roboto"}'`,fontWeight:n.fontWeight||"normal",fontStyle:n.fontStyle||"normal",color:n.fill||"black",textAlign:n.align||"left",verticalAlign:n.verticalAlign||"top",lineHeight:String(n.lineHeight||1.2),letterSpacing:n.letterSpacing?n.letterSpacing*(n.fontSize||12)+"px":void 0,textDecoration:n.textDecoration||"none",textTransform:n.textTransform||"none",borderTop:p("top"),borderRight:p("right"),borderBottom:p("bottom"),borderLeft:p("left"),overflow:"hidden",wordBreak:"break-word",whiteSpace:"pre-wrap",height:r[d]*e.height+"px"}};l>1&&(f.colspan=String(l)),c>1&&(f.rowspan=String(c)),t.push(h("td",f,g(n.text||"")))}a.push(h("tr",{},...t))}const l=i.map(e=>h("col",{style:{width:100*e+"%"}}));return h("table",{style:{width:"100%",height:"100%",borderCollapse:"collapse",tableLayout:"fixed"}},h("colgroup",{},...l),h("tbody",{},...a))}};async function w({element:e,page:t,store:o,elementHook:i}){var r;let n=await x[e.type];if(n||(n=()=>h("div",{}),console.error(`HTML export does not support ${e.type} type...`)),!e.visible){return null}const l=await n({element:e,page:t,store:o}),d=[],c=[];if(e.blurEnabled&&d.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&d.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&d.push("sepia()"),e.grayscaleEnabled&&d.push("grayscale()"),e.filters){for(const[g,f]of Object.entries(e.filters)){const e=a(s[g],f.intensity);e&&(d.push(e.filter),e.html&&c.push(e.html))}}if(e.shadowEnabled){const t=function(e,t){if(1===t){return e}const o=f.Util.colorToRGBA(e);return o?`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a*t})`:e}(e.shadowColor,null!==(r=e.shadowOpacity)&&void 0!==r?r:1);d.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur/2}px ${t})`)}const p=h("div",{id:e.id,style:{position:"absolute",left:e.x+"px",top:e.y+"px",width:e.width+"px",height:e.height+"px",transform:`rotate(${e.rotation}deg)`,transformOrigin:"top left",opacity:e.opacity,display:e.visible&&e.showInExport?"block":"none",filter:d.join(" ")||"none"}},l,...c);return i&&i({dom:p,element:e})||p}export async function jsonToDOM({json:e,elementHook:i}){const r=await Promise.all(e.pages.map(r=>async function({page:e,store:i,elementHook:r}){const n=await Promise.all(e.children.map(t=>w({element:t,page:e,store:i,elementHook:r}))),s="auto"===e.width?i.width:e.width,a="auto"===e.height?i.height:e.height;let l={};if(e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0){const{width:r,height:l}=await o(e.background),d=await y({element:Object.assign({x:0,y:0,width:s,height:a,src:e.background,cornerRadius:0},t({width:s,height:a},{width:r,height:l})),page:e,store:i});n.unshift(d)}else{l=Object.assign(Object.assign({},l),{backgroundColor:e.background})}return h("div",{className:"page",id:e.id,style:Object.assign(Object.assign({},l),{width:s+"px",height:a+"px",overflow:"hidden",position:"relative"})},...n)}({page:r,store:e,elementHook:i}))),n=[];c({children:e.pages},e=>{"text"!==e.type&&"tablecell"!==e.type&&"table"!==e.type||!e.fontFamily||-1!==n.indexOf(e.fontFamily)||n.push(e.fontFamily)});const s=n.map(t=>{const o=e.fonts.find(e=>e.fontFamily===t);if(o){const e=(o.styles||(o.url?[{src:`url("${o.url}")`}]:[])).map(e=>`\n    @font-face {\n      font-family: '${o.fontFamily}';\n      src: ${e.src};\n      font-style: ${e.fontStyle||"normal"};\n      font-weight: ${e.fontWeight||"normal"};\n      font-display: swap;\n    }`).join("\n");return h("style",{},e)}return h("link",{href:d(t),rel:"stylesheet"})});return h("div",{className:"design"},...s,...r)}const $=({dom:t})=>{if("string"==typeof t){return t}if(!t){return""}const o=t.props,{innerHTML:i}=o,r=e(o,["innerHTML"]),n=Object.keys(r).map(e=>"style"===e&&"object"==typeof r[e]?`style="${Object.keys(r[e]).filter(t=>null!=r[e][t]).map(t=>`${t.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}: ${r[e][t]}`).join("; ")}"`:((e,t)=>null==t||""===t?"":"object"==typeof t?`${e}="${Object.keys(t).map(e=>`${e.replace(/-([a-z])/g,e=>e[1].toUpperCase())}:${t[e]};`).join(" ")}"`:`${e}="${t}"`)(e,r[e])).filter(e=>e&&e.trim().length>0).join(" ");return`<${t.type} ${n}>${i||t.children.map(e=>$({dom:e})).join("")}</${t.type}>`};export async function jsonToHTML({json:e,elementHook:t}){const o=await jsonToDOM({json:e,elementHook:t});return $({dom:o})}

package/utils/to-svg.d.ts

@@ -1,4 +1,4 @@
-export declare const forEveryChild: (node: any, cb: any) => void;
+export declare const forEveryNode: (node: any, cb: any) => void;
 type VNode = {
     type: string;
     props: Record<string, any>;