polotno 4.2.1 → 4.3.0

package/side-panel/effects-panel.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import r from"react";import{Slider as l}from"../primitives/slider.js";import{firstSliderValue as o}from"../lib/utils.js";import{SliderField as t}from"../primitives/slider-field.js";import{FieldGroup as n}from"../primitives/field-group.js";import{observer as i}from"mobx-react-lite";import{INDEPENDENT_FILTERS as s}from"../model/shape-model.js";import{ColorPicker as d}from"../toolbar/color-picker.js";import{t as b}from"../utils/l10n.js";import{EffectCard as c}from"./effect-card.js";import{Effects as h}from"../utils/filters.js";import{CurvePowerSlider as u}from"../toolbar/filters-picker.js";import{NumericInput as m}from"../primitives/numeric-input.js";import{FieldRow as g}from"../primitives/field-row.js";import{PanelHeader as p}from"../primitives/panel-header.js";export{m as NumberInput};const f=(e,a,r)=>Math.max(a,Math.min(r,e)),v=[["temperature","toolbar.temperature"],["contrast","toolbar.contrast"],["shadows","toolbar.shadows"],["white","toolbar.white"],["black","toolbar.black"],["vibrance","toolbar.vibrance"],["saturation","toolbar.saturation"]],C=({store:r,color:t,onColorChange:n,value:i,onValueChange:s,min:b,max:c})=>a("div",{style:{display:"flex",alignItems:"center",padding:"8px 0"},children:[e(d,{value:t,size:30,gradientEnabled:!0,onChange:n,store:r}),e("div",{style:{flex:1,paddingLeft:"10px",paddingRight:"10px"},children:e(l,{value:[i],onValueChange:e=>s(f(o(e),b,c)),min:b,max:c,step:1})}),e(m,{value:i,onValueChange:e=>s(f(e,b,c)),min:b,max:c,style:{width:64}})]});export const EffectsPanel=i(({store:l})=>{const o=l.selectedElements,i=o[0],x=o.map(e=>e.id).join(","),w="effects"===l.openedSidePanel;if(r.useEffect(()=>{w&&(i&&i.filters||l.restoreSidePanel())},[w,x]),!i||!i.filters){return null}const y="text"===i.type,E="image"===i.type,k="svg"===i.type,M=E||k,j=e=>{l.history.transaction(()=>{o.forEach(a=>{a.set(e)})})},S=(e,a)=>{l.history.transaction(()=>{o.forEach(r=>{let l=Number(a);return 0==a||a||(l=r.filters.has(e)?null:1),s.includes(e)||r.set({grayscaleEnabled:"grayscale"===e&&!!a,sepiaEnabled:"sepia"===e&&!!a}),r.setFilter(e,l)})})};return a("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"},children:[e(p,{title:b("sidePanel.effects"),onClose:()=>l.restoreSidePanel()}),M&&e("div",{style:{display:"flex",flexDirection:"column",gap:"16px",marginTop:"16px"},children:a("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e(c,{active:i.grayscaleEnabled,onClick:()=>{S("grayscale",!i.grayscaleEnabled)},title:b("toolbar.grayscale"),imageSrc:i.src,effect:h.grayscale}),e(c,{active:i.sepiaEnabled,onClick:()=>{S("sepia",!i.sepiaEnabled)},title:b("toolbar.sepia"),imageSrc:i.src,effect:h.sepia}),e(c,{active:i.filters.has("cold"),onClick:()=>{S("cold",i.filters.has("cold")?null:1)},title:b("toolbar.cold"),imageSrc:i.src,effect:h.cold}),e(c,{active:i.filters.has("natural"),onClick:()=>{S("natural",i.filters.has("natural")?null:1)},title:b("toolbar.natural"),imageSrc:i.src,effect:h.natural}),e(c,{active:i.filters.has("warm"),onClick:()=>{S("warm",i.filters.has("warm")?null:1)},title:b("toolbar.warm"),imageSrc:i.src,effect:h.warm})]})}),e(t,{label:b("toolbar.blur"),enabled:i.blurEnabled,visible:M||y,onEnabledChange:e=>{j({blurEnabled:e})},value:i.blurRadius,onChange:e=>{j({blurRadius:e})},min:0,max:100}),e(t,{label:b("toolbar.brightness"),visible:M,enabled:i.brightnessEnabled,onEnabledChange:e=>{j({brightnessEnabled:e})},value:Math.round(100*i.brightness),onChange:e=>{j({brightness:e/100})},min:-100,max:100}),v.map(([a,r])=>{var l,o;return e(t,{label:b(r),visible:M,enabled:i.filters.has(a),onEnabledChange:e=>{S(a,e?0:null)},value:Math.round(100*(null!==(o=null===(l=i.filters.get(a))||void 0===l?void 0:l.intensity)&&void 0!==o?o:0)),onChange:e=>{S(a,e/100)},min:-100,max:100},a)}),y&&a(n,{label:b("toolbar.curvedText")||"Curved text",enabled:!!i.curveEnabled,onEnabledChange:e=>j({curveEnabled:e}),children:[e(g,{label:b("toolbar.curvePower")||"Curve",className:"pn:py-2",children:e(m,{value:Math.round(100*i.curvePower),onValueChange:e=>{j({curvePower:f(e,-100,100)/100})},style:{width:64},min:-100,max:100})}),e(u,{textEl:i,eachSet:j})]}),y&&e(n,{label:b("toolbar.textStroke"),enabled:!!i.strokeWidth,onEnabledChange:e=>j({strokeWidth:e?2:0}),children:e(C,{store:l,color:i.stroke,onColorChange:e=>{j({stroke:e})},value:i.strokeWidth,onValueChange:e=>{j({strokeWidth:e})},min:1,max:Math.max(1,Math.round(i.fontSize/2))})}),y&&a(n,{label:b("toolbar.textBackground"),enabled:!!i.backgroundEnabled,onEnabledChange:e=>j({backgroundEnabled:e}),children:[e(t,{label:b("toolbar.backgroundCornerRadius"),value:Math.round(100*i.backgroundCornerRadius),onChange:e=>j({backgroundCornerRadius:e/100}),min:0,max:100}),e(t,{label:b("toolbar.backgroundPadding"),value:Math.round(100*i.backgroundPadding),onChange:e=>j({backgroundPadding:e/100}),min:0,max:100}),e(t,{label:b("toolbar.opacity"),value:Math.round(100*i.backgroundOpacity),onChange:e=>j({backgroundOpacity:e/100}),min:0,max:100}),e(g,{label:b("toolbar.color"),className:"pn:py-2",children:e(d,{value:i.backgroundColor,size:30,onChange:e=>{j({backgroundColor:e})},store:l})})]}),M&&e(n,{label:b("toolbar.border"),enabled:!!i.borderSize,onEnabledChange:e=>j({borderSize:e?2:0}),children:e(C,{store:l,color:i.borderColor,onColorChange:e=>{j({borderColor:e})},value:i.borderSize,onValueChange:e=>{j({borderSize:e})},min:1,max:Math.max(1,Math.round(Math.min(i.width,i.height)/2))})}),M&&e(t,{label:b("toolbar.cornerRadius"),visible:M,enabled:0!==i.cornerRadius,onEnabledChange:e=>{j({cornerRadius:e?Math.min(i.width/4,i.height/4):0})},value:Math.min(i.cornerRadius,Math.round(Math.min(i.width/2,i.height/2))),onChange:e=>{j({cornerRadius:e})},min:1,max:Math.round(Math.min(i.width/2,i.height/2))}),a(n,{label:b("toolbar.shadow"),enabled:i.shadowEnabled,onEnabledChange:e=>j({shadowEnabled:e}),children:[e(t,{label:b("toolbar.blur"),value:i.shadowBlur,onChange:e=>{j({shadowBlur:e})},min:0,max:50}),e(t,{label:b("toolbar.offsetX"),value:i.shadowOffsetX,onChange:e=>{j({shadowOffsetX:e})},min:-50,max:50}),e(t,{label:b("toolbar.offsetY"),value:i.shadowOffsetY,onChange:e=>{j({shadowOffsetY:e})},min:-50,max:50}),e(t,{label:b("toolbar.opacity"),value:Math.round(100*i.shadowOpacity),onChange:e=>{j({shadowOpacity:e/100})},min:0,max:100}),e(g,{label:b("toolbar.color"),className:"pn:py-2",children:e(d,{value:i.shadowColor,size:30,onChange:e=>{j({shadowColor:e})},store:l})})]})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import o from"react";import{Slider as l}from"../primitives/slider.js";import{firstSliderValue as r}from"../lib/utils.js";import{SliderField as t}from"../primitives/slider-field.js";import{FieldGroup as n}from"../primitives/field-group.js";import{observer as i}from"mobx-react-lite";import{INDEPENDENT_FILTERS as s}from"../model/shape-model.js";import{ColorPicker as d}from"../toolbar/color-picker.js";import{t as b}from"../utils/l10n.js";import{EffectCard as h}from"./effect-card.js";import{Effects as c}from"../utils/filters.js";import{CurvePowerSlider as u}from"../toolbar/filters-picker.js";import{NumericInput as m}from"../primitives/numeric-input.js";import{FieldRow as g}from"../primitives/field-row.js";import{PanelHeader as p}from"../primitives/panel-header.js";import{ToggleGroup as f,ToggleGroupItem as v}from"../primitives/toggle-group.js";import{normalizeStrokeLineJoin as C}from"../utils/text-html.js";const x=[{value:"round",labelKey:"toolbar.joinRound"},{value:"miter",labelKey:"toolbar.joinMiter"},{value:"bevel",labelKey:"toolbar.joinBevel"}],y=({join:a})=>e("svg",{width:"22",height:"22",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:e("path",{d:"M7 21 L7 7 L21 7",stroke:"currentColor",strokeWidth:"9",strokeLinejoin:a,strokeLinecap:"butt"})});export{m as NumberInput};const k=(e,a,o)=>Math.max(a,Math.min(o,e)),w=[["temperature","toolbar.temperature"],["contrast","toolbar.contrast"],["shadows","toolbar.shadows"],["white","toolbar.white"],["black","toolbar.black"],["vibrance","toolbar.vibrance"],["saturation","toolbar.saturation"]],E=({store:o,color:t,onColorChange:n,value:i,onValueChange:s,min:b,max:h})=>a("div",{style:{display:"flex",alignItems:"center",padding:"8px 0"},children:[e(d,{value:t,size:30,gradientEnabled:!0,onChange:n,store:o}),e("div",{style:{flex:1,paddingLeft:"10px",paddingRight:"10px"},children:e(l,{value:[i],onValueChange:e=>s(k(r(e),b,h)),min:b,max:h,step:1})}),e(m,{value:i,onValueChange:e=>s(k(e,b,h)),min:b,max:h,style:{width:64}})]});export const EffectsPanel=i(({store:l})=>{const r=l.selectedElements,i=r[0],j=r.map(e=>e.id).join(","),M="effects"===l.openedSidePanel;if(o.useEffect(()=>{M&&(i&&i.filters||l.restoreSidePanel())},[M,j]),!i||!i.filters){return null}const S="text"===i.type,R="image"===i.type,P="svg"===i.type,z=R||P,L=e=>{l.history.transaction(()=>{r.forEach(a=>{a.set(e)})})},O=(e,a)=>{l.history.transaction(()=>{r.forEach(o=>{let l=Number(a);return 0==a||a||(l=o.filters.has(e)?null:1),s.includes(e)||o.set({grayscaleEnabled:"grayscale"===e&&!!a,sepiaEnabled:"sepia"===e&&!!a}),o.setFilter(e,l)})})};return a("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"},children:[e(p,{title:b("sidePanel.effects"),onClose:()=>l.restoreSidePanel()}),z&&e("div",{style:{display:"flex",flexDirection:"column",gap:"16px",marginTop:"16px"},children:a("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e(h,{active:i.grayscaleEnabled,onClick:()=>{O("grayscale",!i.grayscaleEnabled)},title:b("toolbar.grayscale"),imageSrc:i.src,effect:c.grayscale}),e(h,{active:i.sepiaEnabled,onClick:()=>{O("sepia",!i.sepiaEnabled)},title:b("toolbar.sepia"),imageSrc:i.src,effect:c.sepia}),e(h,{active:i.filters.has("cold"),onClick:()=>{O("cold",i.filters.has("cold")?null:1)},title:b("toolbar.cold"),imageSrc:i.src,effect:c.cold}),e(h,{active:i.filters.has("natural"),onClick:()=>{O("natural",i.filters.has("natural")?null:1)},title:b("toolbar.natural"),imageSrc:i.src,effect:c.natural}),e(h,{active:i.filters.has("warm"),onClick:()=>{O("warm",i.filters.has("warm")?null:1)},title:b("toolbar.warm"),imageSrc:i.src,effect:c.warm})]})}),e(t,{label:b("toolbar.blur"),enabled:i.blurEnabled,visible:z||S,onEnabledChange:e=>{L({blurEnabled:e})},value:i.blurRadius,onChange:e=>{L({blurRadius:e})},min:0,max:100}),e(t,{label:b("toolbar.brightness"),visible:z,enabled:i.brightnessEnabled,onEnabledChange:e=>{L({brightnessEnabled:e})},value:Math.round(100*i.brightness),onChange:e=>{L({brightness:e/100})},min:-100,max:100}),w.map(([a,o])=>{var l,r;return e(t,{label:b(o),visible:z,enabled:i.filters.has(a),onEnabledChange:e=>{O(a,e?0:null)},value:Math.round(100*(null!==(r=null===(l=i.filters.get(a))||void 0===l?void 0:l.intensity)&&void 0!==r?r:0)),onChange:e=>{O(a,e/100)},min:-100,max:100},a)}),S&&a(n,{label:b("toolbar.curvedText")||"Curved text",enabled:!!i.curveEnabled,onEnabledChange:e=>L({curveEnabled:e}),children:[e(g,{label:b("toolbar.curvePower")||"Curve",className:"pn:py-2",children:e(m,{value:Math.round(100*i.curvePower),onValueChange:e=>{L({curvePower:k(e,-100,100)/100})},style:{width:64},min:-100,max:100})}),e(u,{textEl:i,eachSet:L})]}),S&&a(n,{label:b("toolbar.textStroke"),enabled:!!i.strokeWidth,onEnabledChange:e=>L({strokeWidth:e?2:0}),children:[e(E,{store:l,color:i.stroke,onColorChange:e=>{L({stroke:e})},value:i.strokeWidth,onValueChange:e=>{L({strokeWidth:e})},min:1,max:Math.max(1,Math.round(i.fontSize/2))}),e(g,{label:b("toolbar.strokeLineJoin"),className:"pn:py-2",children:e(f,{variant:"outline",value:[C(i.strokeLineJoin)],onValueChange:e=>{const a=e[0];a&&L({strokeLineJoin:a})},children:x.map(({value:a,labelKey:o})=>e(v,{value:a,"aria-label":b(o),title:b(o),children:e(y,{join:a})},a))})})]}),S&&a(n,{label:b("toolbar.textBackground"),enabled:!!i.backgroundEnabled,onEnabledChange:e=>L({backgroundEnabled:e}),children:[e(t,{label:b("toolbar.backgroundCornerRadius"),value:Math.round(100*i.backgroundCornerRadius),onChange:e=>L({backgroundCornerRadius:e/100}),min:0,max:100}),e(t,{label:b("toolbar.backgroundPadding"),value:Math.round(100*i.backgroundPadding),onChange:e=>L({backgroundPadding:e/100}),min:0,max:100}),e(t,{label:b("toolbar.opacity"),value:Math.round(100*i.backgroundOpacity),onChange:e=>L({backgroundOpacity:e/100}),min:0,max:100}),e(g,{label:b("toolbar.color"),className:"pn:py-2",children:e(d,{value:i.backgroundColor,size:30,onChange:e=>{L({backgroundColor:e})},store:l})})]}),z&&e(n,{label:b("toolbar.border"),enabled:!!i.borderSize,onEnabledChange:e=>L({borderSize:e?2:0}),children:e(E,{store:l,color:i.borderColor,onColorChange:e=>{L({borderColor:e})},value:i.borderSize,onValueChange:e=>{L({borderSize:e})},min:1,max:Math.max(1,Math.round(Math.min(i.width,i.height)/2))})}),z&&e(t,{label:b("toolbar.cornerRadius"),visible:z,enabled:0!==i.cornerRadius,onEnabledChange:e=>{L({cornerRadius:e?Math.min(i.width/4,i.height/4):0})},value:Math.min(i.cornerRadius,Math.round(Math.min(i.width/2,i.height/2))),onChange:e=>{L({cornerRadius:e})},min:1,max:Math.round(Math.min(i.width/2,i.height/2))}),a(n,{label:b("toolbar.shadow"),enabled:i.shadowEnabled,onEnabledChange:e=>L({shadowEnabled:e}),children:[e(t,{label:b("toolbar.blur"),value:i.shadowBlur,onChange:e=>{L({shadowBlur:e})},min:0,max:50}),e(t,{label:b("toolbar.offsetX"),value:i.shadowOffsetX,onChange:e=>{L({shadowOffsetX:e})},min:-50,max:50}),e(t,{label:b("toolbar.offsetY"),value:i.shadowOffsetY,onChange:e=>{L({shadowOffsetY:e})},min:-50,max:50}),e(t,{label:b("toolbar.opacity"),value:Math.round(100*i.shadowOpacity),onChange:e=>{L({shadowOpacity:e/100})},min:0,max:100}),e(g,{label:b("toolbar.color"),className:"pn:py-2",children:e(d,{value:i.shadowColor,size:30,onChange:e=>{L({shadowColor:e})},store:l})})]})]})});

package/side-panel/upload-panel.d.ts

@@ -1,11 +1,9 @@
 import * as React from "react";
 import type { StoreType } from "../ui-types.js";
-declare let uploadFunc: (file: File) => Promise<string>;
-export declare function setUploadFunc(func: typeof uploadFunc): void;
+export { setUploadFunc } from "../utils/file.js";
 export declare const UploadPanel: ({ store }: {
     store: StoreType;
 }) => React.JSX.Element;
 export type UploadPanelProps = {
     store: StoreType;
 };
-export {};

package/side-panel/upload-panel.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as i from"react";import{PolotnoIcon as o}from"../icons/registry.js";import{getVideoPreview as r}from"../utils/video.js";import{localFileToURL as s}from"../utils/file.js";import{ImagesGrid as n}from"./images-grid.js";import{t as l}from"../utils/l10n.js";import{selectImage as a}from"./select-image.js";import{selectVideo as d}from"./select-video.js";import{selectSvg as c}from"./select-svg.js";import{selectGif as p}from"./select-gif.js";import{Button as m}from"../primitives/button.js";let f=async e=>s(e);export function setUploadFunc(e){f=e}let u=[];function g(e){const{type:t}=e;return t.indexOf("svg")>=0?"svg":t.indexOf("gif")>=0?"gif":t.indexOf("image")>=0?"image":t.indexOf("video")>=0?"video":t.indexOf("audio")>=0?"audio":"image"}function v(){const e=new Blob(['\n    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">\n      <circle cx="50" cy="50" r="45" fill="#f0f0f0" stroke="#ccc" stroke-width="2"/>\n      <path d="M40,35 L40,65 L55,50 L70,50 M70,35 Q80,50 70,65" fill="none" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>\n    </svg>\n  '],{type:"image/svg+xml"});return URL.createObjectURL(e)}export const UploadPanel=({store:s})=>{const[h,x]=i.useState(u),[y,j]=i.useState(!1),w=i.useRef(null);return i.useEffect(()=>{u=h},[h]),t("div",{className:"pn:flex pn:h-full pn:flex-col",children:[e("div",{style:{height:"45px",paddingTop:"5px"},children:l("sidePanel.uploadTip")}),e("div",{style:{marginBottom:"20px"},children:t("label",{htmlFor:"input-file",children:[t(m,{variant:"outline",style:{width:"100%"},onClick:()=>{var e;null===(e=w.current)||void 0===e||e.click()},children:[e(o,{name:"action.add"}),l("sidePanel.uploadImage")]}),e("input",{type:"file",ref:w,style:{display:"none"},onChange:async e=>{var t;const{target:i}=e;j(!0);try{for(const e of Array.from(null!==(t=i.files)&&void 0!==t?t:[])){const t=await f(e),i=g(e);let o=t;"video"===i?o=await r(t):"audio"===i&&(o=v()),x(e=>e.concat([{url:t,type:i,preview:o}]))}}catch(e){console.error(e)}j(!1),i.value=""},multiple:!0})]})}),e(n,{images:h,isLoading:y,getPreview:e=>e.preview,hideNoResults:!0,onSelect:async(e,t,i)=>{const o=e.url,r=e.type;"image"===r?a({src:o,store:s,droppedPos:t,targetElement:i}):"video"===r?d({src:o,store:s,droppedPos:t,targetElement:i}):"gif"===r?p({src:o,store:s,droppedPos:t,targetElement:i}):"svg"===r?c({src:o,store:s,droppedPos:t,targetElement:i}):"audio"===r&&s.addAudio({src:o})}})]})};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as i from"react";import{PolotnoIcon as r}from"../icons/registry.js";import{getVideoPreview as o}from"../utils/video.js";import{getType as l,getUploadFunc as s}from"../utils/file.js";import{insertMediaIntoPage as n}from"../utils/insert-file.js";import{ImagesGrid as a}from"./images-grid.js";import{t as c}from"../utils/l10n.js";import{Button as p}from"../primitives/button.js";export{setUploadFunc}from"../utils/file.js";let d=[];function m(){const e=new Blob(['\n    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">\n      <circle cx="50" cy="50" r="45" fill="#f0f0f0" stroke="#ccc" stroke-width="2"/>\n      <path d="M40,35 L40,65 L55,50 L70,50 M70,35 Q80,50 70,65" fill="none" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>\n    </svg>\n  '],{type:"image/svg+xml"});return URL.createObjectURL(e)}export const UploadPanel=({store:u})=>{const[f,g]=i.useState(d),[h,v]=i.useState(!1),y=i.useRef(null);return i.useEffect(()=>{d=f},[f]),t("div",{className:"pn:flex pn:h-full pn:flex-col",children:[e("div",{style:{height:"45px",paddingTop:"5px"},children:c("sidePanel.uploadTip")}),e("div",{style:{marginBottom:"20px"},children:t("label",{htmlFor:"input-file",children:[t(p,{variant:"outline",style:{width:"100%"},onClick:()=>{var e;null===(e=y.current)||void 0===e||e.click()},children:[e(r,{name:"action.add"}),c("sidePanel.uploadImage")]}),e("input",{type:"file",ref:y,style:{display:"none"},onChange:async e=>{var t;const{target:i}=e;v(!0);try{for(const e of Array.from(null!==(t=i.files)&&void 0!==t?t:[])){const t=await s()(e),i=l(e);let r=t;"video"===i?r=await o(t):"audio"===i&&(r=m()),g(e=>e.concat([{url:t,type:i,preview:r}]))}}catch(e){console.error(e)}v(!1),i.value=""},multiple:!0})]})}),e(a,{images:f,isLoading:h,getPreview:e=>e.preview,hideNoResults:!0,onSelect:async(e,t,i)=>{n({url:e.url,type:e.type,store:u,droppedPos:t,targetElement:i})}})]})};

package/toolbar/html-toolbar.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as l}from"../primitives/button.js";import{Tooltip as r,TooltipContent as s,TooltipTrigger as a}from"../primitives/tooltip.js";import{TooltipIconButton as c}from"../primitives/tooltip-icon-button.js";import{ColorPicker as m}from"./color-picker.js";import p from"./filters-picker.js";import{ElementContainer as u,extendToolbar as d}from"./element-container.js";import f from"../utils/styled.js";import{AnimationsPicker as x}from"./animations-picker.js";import{flags as g}from"../utils/flags.js";import{TextAiWrite as v}from"./text-ai-write.js";import{t as h}from"../utils/l10n.js";import{quillRef as b,createQuill as T,setQuillContent as y}from"../canvas/html-element.js";import{FontMenu as F,fetcher as S,TextSpacing as z,TextFontSize as j,TextTransform as C,ALIGN_OPTIONS as w,VERTICAL_ALIGN_OPTIONS as A,VERTICAL_ALIGN_ICONS as D}from"./text-toolbar.js";import{cycleNext as N}from"./toolbar-shared.js";import E from"swr";import{getFontsList as k,globalFonts as I,isGoogleFontChanged as L}from"../utils/fonts.js";import{getGoogleFontsListAPI as M}from"../utils/api.js";import{normalizeRichTextHtml as B,listEffectiveFontFamilies as R,isBoldWeight as W}from"../utils/rich-text-html.js";import{patchTextFormat as _}from"../utils/text-format.js";import{useTextFormat as O,getActiveTextEditor as P,resolveSelectionScope as V,applyToLiveEditor as G}from"../utils/text-format-state.js";const H=f("div")`
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as l}from"../primitives/button.js";import{Tooltip as r,TooltipContent as s,TooltipTrigger as a}from"../primitives/tooltip.js";import{TooltipIconButton as c}from"../primitives/tooltip-icon-button.js";import{ColorPicker as m}from"./color-picker.js";import p from"./filters-picker.js";import{ElementContainer as u,extendToolbar as d}from"./element-container.js";import f from"../utils/styled.js";import{AnimationsPicker as x}from"./animations-picker.js";import{flags as g}from"../utils/flags.js";import{TextAiWrite as v}from"./text-ai-write.js";import{t as h}from"../utils/l10n.js";import{quillRef as b,createQuill as T,setQuillContent as y}from"../canvas/html-element.js";import{FontMenu as F,fetcher as S,TextSpacing as z,TextFontSize as j,TextTransform as C,ALIGN_OPTIONS as A,VERTICAL_ALIGN_OPTIONS as D,VERTICAL_ALIGN_ICONS as N}from"./text-toolbar.js";import{cycleNext as w}from"./toolbar-shared.js";import E from"swr";import{getFontsList as k,globalFonts as L,isGoogleFontChanged as I}from"../utils/fonts.js";import{getGoogleFontsListAPI as M}from"../utils/api.js";import{normalizeRichTextHtml as B,listEffectiveFontFamilies as R,isBoldWeight as W}from"../utils/rich-text-html.js";import{patchTextFormat as O}from"../utils/text-format.js";import{useTextFormat as P,getActiveTextEditor as V,resolveSelectionScope as _,applyToLiveEditor as G}from"../utils/text-format-state.js";const H=f("div")`
   position: relative;
   display: inline-block;
 
@@ -8,7 +8,7 @@ import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{ob
   &.polotno-mixed:focus-within input {
     color: inherit !important;
   }
-`,Q=f("span")`
+`,J=f("span")`
   position: absolute;
   left: 11px;
   top: 0;
@@ -22,4 +22,4 @@ import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{ob
   ${H}:focus-within & {
     display: none;
   }
-`,J=t=>{const e=P();return!!e&&e.store===t&&!!e.instance};let U=null;const X=()=>{b.pendingToolbarInteraction=!0,U&&clearTimeout(U),U=setTimeout(()=>{b.pendingToolbarInteraction=!1,U=null},100)},$=t=>{var e;(!(e=t.target)||"INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName&&"SELECT"!==e.tagName&&!e.isContentEditable)&&t.preventDefault(),X()},q=n(({store:e,isActive:o,toggle:n,icon:i,ariaLabel:l,tooltipContent:r})=>{const{format:s,applyTextFormat:a}=O(e);return t(c,{label:r||l||"",side:"bottom",active:o(s),onMouseDown:t=>{t.preventDefault()},onClick:()=>n(s,a),children:i})});function K(t,e){const o=t.textDecoration.value||"",n="underline"===e?"line-through":"underline";return[!o.split(/\s+/).includes(e)&&e,o.split(/\s+/).includes(n)&&n].filter(Boolean).join(" ")}export const TextBold=n(({store:e})=>t(q,{store:e,isActive:t=>W(t.fontWeight.value),toggle:(t,e)=>e({fontWeight:W(t.fontWeight.value)?400:700}),icon:t(i,{name:"text.bold",className:"pn:size-4"}),tooltipContent:h("toolbar.bold")}));export const FontStyleGroup=n(({element:o,store:n,elements:m,components:p})=>{const u=(null==p?void 0:p.TextBold)||TextBold;return e("div",{className:"pn:flex pn:items-center pn:gap-0.5",children:[t(u,{element:o,store:n}),t(q,{store:n,isActive:t=>"italic"===t.fontStyle.value,toggle:(t,e)=>e({fontStyle:"italic"===t.fontStyle.value?"normal":"italic"}),icon:t(i,{name:"text.italic",className:"pn:size-4"}),tooltipContent:h("toolbar.italic")}),t(q,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("underline"))},toggle:(t,e)=>e({textDecoration:K(t,"underline")}),icon:t(i,{name:"text.underline",className:"pn:size-4"}),tooltipContent:h("toolbar.underline")}),t(q,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("line-through"))},toggle:(t,e)=>e({textDecoration:K(t,"line-through")}),icon:t(i,{name:"text.strikethrough",className:"pn:size-4"}),tooltipContent:h("toolbar.strikethrough")}),t(c,{label:h("toolbar.textAlign"),side:"bottom",onClick:()=>{const t=N(w,o.align);n.history.transaction(()=>{m.forEach(e=>{e.set({align:t})})})},children:"left"===o.align?t(i,{name:"text.alignLeft",className:"pn:size-4"}):"center"===o.align?t(i,{name:"text.alignCenter",className:"pn:size-4"}):"right"===o.align?t(i,{name:"text.alignRight",className:"pn:size-4"}):t(i,{name:"text.alignJustify",className:"pn:size-4"})}),g.textVerticalResizeEnabled&&e(r,{children:[t(a,{render:t(l,{variant:"ghost",size:"icon-sm",onClick:()=>{const t=N(A,o.verticalAlign);n.history.transaction(()=>{o.set({verticalAlign:t})})},"aria-label":h("toolbar.verticalAlign"),children:D[o.verticalAlign]})}),t(s,{side:"bottom",children:h("toolbar.verticalAlign")})]}),t(c,{label:h("toolbar.listFormat"),side:"bottom",onMouseDown:t=>{t.preventDefault()},onClick:()=>{let t=window.__polotnoQuill;const e=!t;t=t||(({html:t})=>{const e=document.createElement("div");document.body.appendChild(e),e.style.display="none",e.style.whiteSpace="pre-wrap";const o=T(e);return y(o,t),o})({html:o.text}),e&&t.setSelection(0,t.getLength(),"api");const n=t.getFormat();n.list?"bullet"===n.list?t.format("list","ordered"):t.format("list",!1):t.format("list","bullet"),e&&(o.set({text:B(t.root.innerHTML,{fontSize:o.fontSize,fontFamily:o.fontFamily})}),(t=>{t.root.parentElement.remove()})(t))},children:(()=>{const e=window.__polotnoQuill;return"bullet"===(e?e.getFormat(e.getSelection()):{}).list?t(i,{name:"text.numberedList",className:"pn:size-5"}):t(i,{name:"text.bulletList",className:"pn:size-5"})})()})]})});export const FontColorInput=n(({element:e,store:o})=>{var n;const{format:i,applyTextFormat:l}=O(o);return t("div",{"data-polotno-keep-focus":!0,onMouseDown:$,children:t(m,{value:null!==(n=i.fill.value)&&void 0!==n?n:e.fill,gradientEnabled:!0,onClose:()=>{const t=P();(null==t?void 0:t.instance)&&t.lastSelection&&t.instance.setSelection(t.lastSelection)},onChange:t=>l({fill:t}),store:o})})});export const DirectionInput=n(({element:e})=>{const o="rtl"===e.dir,n=h("toolbar.textDirection");return t(c,{label:n,side:"bottom",onClick:()=>{e.set({dir:o?"ltr":"rtl"})},children:t(i,o?{name:"text.paragraph",className:"pn:size-5 pn:-scale-x-100"}:{name:"text.richText",className:"pn:size-5"})})});const Y=k(),Z={TextFontFamily:n(({elements:e,store:n})=>{var i;const{format:l,applyTextFormat:r}=O(n),s=J(n),a=l.fontFamily.mixed,c=a?Array.from(new Set(e.flatMap(t=>R(t.text,t.fontFamily)))).sort((t,e)=>t.localeCompare(e,void 0,{sensitivity:"base"})):void 0,[m,p]=o.useState(!1),{data:u,mutate:d}=E(m?M():null,S,{isPaused:()=>L(),fallbackData:[]});o.useEffect(()=>{d()},[L()]);const f=n.fonts.concat(I).map(t=>t.fontFamily).concat((null==u?void 0:u.length)&&!L()?u:Y),x=[];n.find(t=>("text"===t.type&&x.push(t.fontFamily),!1));const g=[...new Set(x.concat("_divider").concat(f))],v=null!==(i=l.fontFamily.value)&&void 0!==i?i:e[0].fontFamily;let h=v;h.length>15&&(h=h.slice(0,15)+"...");const b=t(F,{fonts:g,activeFont:v,activeFontLabel:h,store:n,mixed:a,mixedFonts:c,open:m,onOpenChange:p,onFontSelect:t=>r({fontFamily:t})});return s?t("div",{"data-polotno-keep-focus":!0,onMouseDown:$,children:b}):b}),TextFontSize:n(({elements:o,store:n})=>{const{format:i}=O(n),l=J(n),r=i.fontSize.mixed,s=i.fontSize.value,a=o.map(t=>new Proxy(t,{get:(t,e)=>"fontSize"===e?null!=s?s:t.fontSize:"set"===e?e=>((t,e)=>{if(!e.fontSize){return void t.set(e)}const o=P();if(o&&o.store===n&&o.instance){const{scope:t,isEmpty:n}=V(o.instance,o.lastSelection);if("partial"===t||"collapsed"===t&&n){return void G(o.instance,{fontSize:e.fontSize},o.lastSelection)}}const{attrsToSet:i}=_(t,{fontSize:e.fontSize});t.set(Object.assign(Object.assign({},e),i))})(t,e):Reflect.get(t,e)})),c=e(H,{className:r?"polotno-mixed":"",children:[t(j,{elements:a,store:n}),r&&t(Q,{"aria-hidden":!0,children:"—"})]});return l?t("div",{"data-polotno-keep-focus":!0,onMouseDown:X,children:c}):c}),TextFontVariant:FontStyleGroup,TextTransform:C,TextFilters:p,TextFill:FontColorInput,TextSpacing:z,TextDirection:DirectionInput,TextAnimations:x,TextAiWrite:v};export const HtmlToolbar=n(({store:e,components:o})=>{const n=e.selectedElements,i=e.selectedElements[0],l=["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextTransform","TextFilters",g.animationsEnabled&&"TextAnimations",g.aiTextEnabled&&"TextAiWrite"],r=d({type:"text",usedItems:l,components:o});return t(u,{items:r,itemRender:l=>{if("TextBold"===l){return null}const r=(null==o?void 0:o[l])||Z[l];return t(r,{element:i,elements:n,store:e,components:o},l)}})});
+`,Q=t=>{const e=V();return!!e&&e.store===t&&!!e.instance};let U=null;const X=()=>{b.pendingToolbarInteraction=!0,U&&clearTimeout(U),U=setTimeout(()=>{b.pendingToolbarInteraction=!1,U=null},100)},$=t=>{var e;(!(e=t.target)||"INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName&&"SELECT"!==e.tagName&&!e.isContentEditable)&&t.preventDefault(),X()},q=n(({store:e,isActive:o,toggle:n,icon:i,ariaLabel:l,tooltipContent:r})=>{const{format:s,applyTextFormat:a}=P(e);return t(c,{label:r||l||"",side:"bottom",active:o(s),onMouseDown:t=>{t.preventDefault()},onClick:()=>n(s,a),children:i})});function K(t,e){const o=t.textDecoration.value||"",n="underline"===e?"line-through":"underline";return[!o.split(/\s+/).includes(e)&&e,o.split(/\s+/).includes(n)&&n].filter(Boolean).join(" ")}export const TextBold=n(({store:e})=>t(q,{store:e,isActive:t=>W(t.fontWeight.value),toggle:(t,e)=>e({fontWeight:W(t.fontWeight.value)?400:700}),icon:t(i,{name:"text.bold",className:"pn:size-4"}),tooltipContent:h("toolbar.bold")}));export const FontStyleGroup=n(({element:o,store:n,elements:m,components:p})=>{const u=(null==p?void 0:p.TextBold)||TextBold;return e("div",{className:"pn:flex pn:items-center pn:gap-0.5",children:[t(u,{element:o,store:n}),t(q,{store:n,isActive:t=>"italic"===t.fontStyle.value,toggle:(t,e)=>e({fontStyle:"italic"===t.fontStyle.value?"normal":"italic"}),icon:t(i,{name:"text.italic",className:"pn:size-4"}),tooltipContent:h("toolbar.italic")}),t(q,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("underline"))},toggle:(t,e)=>e({textDecoration:K(t,"underline")}),icon:t(i,{name:"text.underline",className:"pn:size-4"}),tooltipContent:h("toolbar.underline")}),t(q,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("line-through"))},toggle:(t,e)=>e({textDecoration:K(t,"line-through")}),icon:t(i,{name:"text.strikethrough",className:"pn:size-4"}),tooltipContent:h("toolbar.strikethrough")}),t(c,{label:h("toolbar.textAlign"),side:"bottom",onClick:()=>{const t=w(A,o.align);n.history.transaction(()=>{m.forEach(e=>{e.set({align:t})})})},children:"left"===o.align?t(i,{name:"text.alignLeft",className:"pn:size-4"}):"center"===o.align?t(i,{name:"text.alignCenter",className:"pn:size-4"}):"right"===o.align?t(i,{name:"text.alignRight",className:"pn:size-4"}):t(i,{name:"text.alignJustify",className:"pn:size-4"})}),g.textVerticalResizeEnabled&&e(r,{children:[t(a,{render:t(l,{variant:"ghost",size:"icon-sm",onClick:()=>{const t=w(D,o.verticalAlign);n.history.transaction(()=>{o.set({verticalAlign:t})})},"aria-label":h("toolbar.verticalAlign"),children:N[o.verticalAlign]})}),t(s,{side:"bottom",children:h("toolbar.verticalAlign")})]}),t(c,{label:h("toolbar.listFormat"),side:"bottom",onMouseDown:t=>{t.preventDefault()},onClick:()=>{var t;let e=window.__polotnoQuill;const n=!e;e=e||(({html:t})=>{const e=document.createElement("div");document.body.appendChild(e),e.style.display="none",e.style.whiteSpace="pre-wrap";const o=T(e);return y(o,t),o})({html:o.text}),n&&e.setSelection(0,e.getLength(),"api");const i=e.getSelection(!0)||(null===(t=V())||void 0===t?void 0:t.lastSelection)||{index:0,length:e.getLength()},l=e.getFormat(i);l.list?"bullet"===l.list?e.format("list","ordered"):e.format("list",!1):e.format("list","bullet"),n&&(o.set({text:B(e.root.innerHTML,{fontSize:o.fontSize,fontFamily:o.fontFamily})}),(t=>{t.root.parentElement.remove()})(e))},children:(()=>{const e=V();return"bullet"===(e&&e.store===n?e.currentFormat:{}).list?t(i,{name:"text.numberedList",className:"pn:size-5"}):t(i,{name:"text.bulletList",className:"pn:size-5"})})()})]})});export const FontColorInput=n(({element:e,store:o})=>{var n;const{format:i,applyTextFormat:l}=P(o);return t("div",{"data-polotno-keep-focus":!0,onMouseDown:$,children:t(m,{value:null!==(n=i.fill.value)&&void 0!==n?n:e.fill,gradientEnabled:!0,onClose:()=>{const t=V();(null==t?void 0:t.instance)&&t.lastSelection&&t.instance.setSelection(t.lastSelection)},onChange:t=>l({fill:t}),store:o})})});export const DirectionInput=n(({element:e})=>{const o="rtl"===e.dir,n=h("toolbar.textDirection");return t(c,{label:n,side:"bottom",onClick:()=>{e.set({dir:o?"ltr":"rtl"})},children:t(i,o?{name:"text.paragraph",className:"pn:size-5 pn:-scale-x-100"}:{name:"text.richText",className:"pn:size-5"})})});const Y=k(),Z={TextFontFamily:n(({elements:e,store:n})=>{var i;const{format:l,applyTextFormat:r}=P(n),s=Q(n),a=l.fontFamily.mixed,c=a?Array.from(new Set(e.flatMap(t=>R(t.text,t.fontFamily)))).sort((t,e)=>t.localeCompare(e,void 0,{sensitivity:"base"})):void 0,[m,p]=o.useState(!1),{data:u,mutate:d}=E(m?M():null,S,{isPaused:()=>I(),fallbackData:[]});o.useEffect(()=>{d()},[I()]);const f=n.fonts.concat(L).map(t=>t.fontFamily).concat((null==u?void 0:u.length)&&!I()?u:Y),x=[];n.find(t=>("text"===t.type&&x.push(t.fontFamily),!1));const g=[...new Set(x.concat("_divider").concat(f))],v=null!==(i=l.fontFamily.value)&&void 0!==i?i:e[0].fontFamily;let h=v;h.length>15&&(h=h.slice(0,15)+"...");const b=t(F,{fonts:g,activeFont:v,activeFontLabel:h,store:n,mixed:a,mixedFonts:c,open:m,onOpenChange:p,onFontSelect:t=>r({fontFamily:t})});return s?t("div",{"data-polotno-keep-focus":!0,onMouseDown:$,children:b}):b}),TextFontSize:n(({elements:o,store:n})=>{const{format:i}=P(n),l=Q(n),r=i.fontSize.mixed,s=i.fontSize.value,a=o.map(t=>new Proxy(t,{get:(t,e)=>"fontSize"===e?null!=s?s:t.fontSize:"set"===e?e=>((t,e)=>{if(!e.fontSize){return void t.set(e)}const o=V();if(o&&o.store===n&&o.instance){const{scope:t,isEmpty:n}=_(o.instance,o.lastSelection);if("partial"===t||"collapsed"===t&&n){return void G(o.instance,{fontSize:e.fontSize},o.lastSelection)}}const{attrsToSet:i}=O(t,{fontSize:e.fontSize});t.set(Object.assign(Object.assign({},e),i))})(t,e):Reflect.get(t,e)})),c=e(H,{className:r?"polotno-mixed":"",children:[t(j,{elements:a,store:n}),r&&t(J,{"aria-hidden":!0,children:"—"})]});return l?t("div",{"data-polotno-keep-focus":!0,onMouseDown:X,children:c}):c}),TextFontVariant:FontStyleGroup,TextTransform:C,TextFilters:p,TextFill:FontColorInput,TextSpacing:z,TextDirection:DirectionInput,TextAnimations:x,TextAiWrite:v};export const HtmlToolbar=n(({store:e,components:o})=>{const n=e.selectedElements,i=e.selectedElements[0],l=["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextTransform","TextFilters",g.animationsEnabled&&"TextAnimations",g.aiTextEnabled&&"TextAiWrite"],r=d({type:"text",usedItems:l,components:o});return t(u,{items:r,itemRender:l=>{if("TextBold"===l){return null}const r=(null==o?void 0:o[l])||Z[l];return t(r,{element:i,elements:n,store:e,components:o},l)}})});

package/utils/base64.d.ts

@@ -0,0 +1,2 @@
+export declare const decodeBase64: (value: string) => Uint8Array;
+export declare const encodeBase64: (bytes: Uint8Array) => string;

package/utils/base64.js

@@ -0,0 +1 @@
+const e=()=>"undefined"!=typeof globalThis?globalThis.Buffer:void 0;export const decodeBase64=o=>{if("function"==typeof atob){const e=atob(o),t=new Uint8Array(e.length);for(let o=0;o<e.length;o++){t[o]=e.charCodeAt(o)}return t}const t=e();if(t){return new Uint8Array(t.from(o,"base64"))}throw new Error("No base64 decoder available")};export const encodeBase64=o=>{if("function"==typeof btoa){let e="";for(let t=0;t<o.length;t++){e+=String.fromCharCode(o[t])}return btoa(e)}const t=e();if(t){return t.from(o).toString("base64")}throw new Error("No base64 encoder available")};

package/utils/clipboard.d.ts

@@ -4,3 +4,364 @@ export declare const cut: (store: StoreType) => void;
 export declare const paste: (store: StoreType) => void;
 export declare const isClipboardEmpty: () => boolean;
 export declare const resetClipboard: () => void;
+export declare const copyToEvent: (store: StoreType, e: ClipboardEvent) => boolean;
+export declare const cutToEvent: (store: StoreType, e: ClipboardEvent) => boolean;
+export declare const insertTextElement: (store: StoreType, text: string, extra?: Record<string, any>) => (import("mobx-state-tree").ModelInstanceTypeProps<{
+    id: import("mobx-state-tree").ISimpleType<string>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    name: import("mobx-state-tree").IType<string | undefined, string, string>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    custom: import("mobx-state-tree").IType<any, any, any>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    x: import("mobx-state-tree").IType<number | undefined, number, number>;
+    y: import("mobx-state-tree").IType<number | undefined, number, number>;
+    width: import("mobx-state-tree").IType<number | undefined, number, number>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    rotation: import("mobx-state-tree").IType<number | undefined, number, number>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    animations: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+        delay: import("mobx-state-tree").IType<number | undefined, number, number>;
+        duration: import("mobx-state-tree").IType<number | undefined, number, number>;
+        enabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        type: import("mobx-state-tree").ISimpleType<"exit" | "enter" | "loop">;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        data: import("mobx-state-tree").IType<{} | null | undefined, {}, {}>;
+    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    blurEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    blurRadius: import("mobx-state-tree").IType<number | undefined, number, number>;
+    brightnessEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    brightness: import("mobx-state-tree").IType<number | undefined, number, number>;
+    sepiaEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    grayscaleEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    filters: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+        intensity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    shadowEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    shadowBlur: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowOffsetX: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowOffsetY: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowColor: import("mobx-state-tree").IType<string | undefined, string, string>;
+    shadowOpacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    draggable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    resizable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    contentEditable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    styleEditable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    text: import("mobx-state-tree").IType<string | undefined, string, string>;
+    placeholder: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontSize: import("mobx-state-tree").IType<number | undefined, number, number>;
+    fontFamily: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontStyle: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontWeight: import("mobx-state-tree").IType<string | undefined, string, string>;
+    textDecoration: import("mobx-state-tree").IType<string | undefined, string, string>;
+    textTransform: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fill: import("mobx-state-tree").IType<string | undefined, string, string>;
+    align: import("mobx-state-tree").IType<string | undefined, string, string>;
+    width: import("mobx-state-tree").IType<number | undefined, number, number>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    verticalAlign: import("mobx-state-tree").IType<string | undefined, string, string>;
+    strokeWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
+    stroke: import("mobx-state-tree").IType<string | undefined, string, string>;
+    strokeLineJoin: import("mobx-state-tree").IType<string | undefined, string, string>;
+    lineHeight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree/dist/internal").IUnionType<[import("mobx-state-tree").ISimpleType<number>, import("mobx-state-tree").ISimpleType<string>]>, [undefined]>;
+    letterSpacing: import("mobx-state-tree").IType<number | undefined, number, number>;
+    _editModeEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    backgroundEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    backgroundColor: import("mobx-state-tree").IType<string | undefined, string, string>;
+    backgroundOpacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    backgroundCornerRadius: import("mobx-state-tree").IType<number | undefined, number, number>;
+    backgroundPadding: import("mobx-state-tree").IType<number | undefined, number, number>;
+    legacyBackground: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    curveEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    curvePower: import("mobx-state-tree").IType<number | undefined, number, number>;
+}> & {
+    readonly page: any;
+    readonly store: any;
+    readonly top: import("mobx-state-tree").ModelInstanceTypeProps<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }, {}, import("mobx-state-tree").ModelCreationType<{
+        id: string;
+        type: string | undefined;
+        name: string | undefined;
+        opacity: number | undefined;
+        custom: any;
+        visible: boolean | undefined;
+        selectable: boolean | undefined;
+        removable: boolean | undefined;
+        alwaysOnTop: boolean | undefined;
+        showInExport: boolean | undefined;
+    }>, import("mobx-state-tree").ModelSnapshotType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }>>>;
+    readonly parent: any;
+    readonly zIndex: any;
+} & {
+    toJSON(): {
+        id: string;
+        type: string;
+        name: string;
+        opacity: number;
+        custom: any;
+        visible: boolean;
+        selectable: boolean;
+        removable: boolean;
+        alwaysOnTop: boolean;
+        showInExport: boolean;
+    };
+} & {
+    clone(attrs?: any, { skipSelect }?: {
+        skipSelect?: boolean | undefined;
+    }): import("../model/node-model.js").NodeType;
+    set(attrs: any): void;
+    moveUp(): void;
+    moveTop(): void;
+    moveDown(): void;
+    moveBottom(): void;
+    setZIndex(zIndex: number): void;
+    beforeDestroy(): void;
+} & {
+    readonly locked: boolean;
+    readonly a: import("../model/shape-model.js").AnimatedAttrs;
+    animated(attr: any): any;
+    readonly timeRange: {
+        start: number;
+        end: number;
+    };
+    readonly active: boolean;
+    readonly isSelected: boolean;
+    readonly isSelectedDirectly: boolean;
+} & {
+    setAnimation(type: any, attrs: any): void;
+    setFilter(type: any, value: any): void;
+} & {
+    set(attrs: any): void;
+    afterCreate(): void;
+    toggleEditMode(editing?: boolean): void;
+    beforeDestroy(): void;
+} & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+    id: import("mobx-state-tree").ISimpleType<string>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    name: import("mobx-state-tree").IType<string | undefined, string, string>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    custom: import("mobx-state-tree").IType<any, any, any>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    x: import("mobx-state-tree").IType<number | undefined, number, number>;
+    y: import("mobx-state-tree").IType<number | undefined, number, number>;
+    width: import("mobx-state-tree").IType<number | undefined, number, number>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    rotation: import("mobx-state-tree").IType<number | undefined, number, number>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    animations: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+        delay: import("mobx-state-tree").IType<number | undefined, number, number>;
+        duration: import("mobx-state-tree").IType<number | undefined, number, number>;
+        enabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        type: import("mobx-state-tree").ISimpleType<"exit" | "enter" | "loop">;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        data: import("mobx-state-tree").IType<{} | null | undefined, {}, {}>;
+    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    blurEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    blurRadius: import("mobx-state-tree").IType<number | undefined, number, number>;
+    brightnessEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    brightness: import("mobx-state-tree").IType<number | undefined, number, number>;
+    sepiaEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    grayscaleEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    filters: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+        intensity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    }, {}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    shadowEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    shadowBlur: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowOffsetX: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowOffsetY: import("mobx-state-tree").IType<number | undefined, number, number>;
+    shadowColor: import("mobx-state-tree").IType<string | undefined, string, string>;
+    shadowOpacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    draggable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    resizable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    contentEditable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    styleEditable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    text: import("mobx-state-tree").IType<string | undefined, string, string>;
+    placeholder: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontSize: import("mobx-state-tree").IType<number | undefined, number, number>;
+    fontFamily: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontStyle: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fontWeight: import("mobx-state-tree").IType<string | undefined, string, string>;
+    textDecoration: import("mobx-state-tree").IType<string | undefined, string, string>;
+    textTransform: import("mobx-state-tree").IType<string | undefined, string, string>;
+    fill: import("mobx-state-tree").IType<string | undefined, string, string>;
+    align: import("mobx-state-tree").IType<string | undefined, string, string>;
+    width: import("mobx-state-tree").IType<number | undefined, number, number>;
+    height: import("mobx-state-tree").IType<number | undefined, number, number>;
+    verticalAlign: import("mobx-state-tree").IType<string | undefined, string, string>;
+    strokeWidth: import("mobx-state-tree").IType<number | undefined, number, number>;
+    stroke: import("mobx-state-tree").IType<string | undefined, string, string>;
+    strokeLineJoin: import("mobx-state-tree").IType<string | undefined, string, string>;
+    lineHeight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree/dist/internal").IUnionType<[import("mobx-state-tree").ISimpleType<number>, import("mobx-state-tree").ISimpleType<string>]>, [undefined]>;
+    letterSpacing: import("mobx-state-tree").IType<number | undefined, number, number>;
+    _editModeEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    backgroundEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    backgroundColor: import("mobx-state-tree").IType<string | undefined, string, string>;
+    backgroundOpacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    backgroundCornerRadius: import("mobx-state-tree").IType<number | undefined, number, number>;
+    backgroundPadding: import("mobx-state-tree").IType<number | undefined, number, number>;
+    legacyBackground: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
+    curveEnabled: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    curvePower: import("mobx-state-tree").IType<number | undefined, number, number>;
+}, {
+    readonly page: any;
+    readonly store: any;
+    readonly top: import("mobx-state-tree").ModelInstanceTypeProps<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }, {}, import("mobx-state-tree").ModelCreationType<{
+        id: string;
+        type: string | undefined;
+        name: string | undefined;
+        opacity: number | undefined;
+        custom: any;
+        visible: boolean | undefined;
+        selectable: boolean | undefined;
+        removable: boolean | undefined;
+        alwaysOnTop: boolean | undefined;
+        showInExport: boolean | undefined;
+    }>, import("mobx-state-tree").ModelSnapshotType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        type: import("mobx-state-tree").IType<string | undefined, string, string>;
+        name: import("mobx-state-tree").IType<string | undefined, string, string>;
+        opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+        custom: import("mobx-state-tree").IType<any, any, any>;
+        visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }>>>;
+    readonly parent: any;
+    readonly zIndex: any;
+} & {
+    toJSON(): {
+        id: string;
+        type: string;
+        name: string;
+        opacity: number;
+        custom: any;
+        visible: boolean;
+        selectable: boolean;
+        removable: boolean;
+        alwaysOnTop: boolean;
+        showInExport: boolean;
+    };
+} & {
+    clone(attrs?: any, { skipSelect }?: {
+        skipSelect?: boolean | undefined;
+    }): import("../model/node-model.js").NodeType;
+    set(attrs: any): void;
+    moveUp(): void;
+    moveTop(): void;
+    moveDown(): void;
+    moveBottom(): void;
+    setZIndex(zIndex: number): void;
+    beforeDestroy(): void;
+} & {
+    readonly locked: boolean;
+    readonly a: import("../model/shape-model.js").AnimatedAttrs;
+    animated(attr: any): any;
+    readonly timeRange: {
+        start: number;
+        end: number;
+    };
+    readonly active: boolean;
+    readonly isSelected: boolean;
+    readonly isSelectedDirectly: boolean;
+} & {
+    setAnimation(type: any, attrs: any): void;
+    setFilter(type: any, value: any): void;
+} & {
+    set(attrs: any): void;
+    afterCreate(): void;
+    toggleEditMode(editing?: boolean): void;
+    beforeDestroy(): void;
+}, any, import("mobx-state-tree").ModelSnapshotType<{
+    id: import("mobx-state-tree").ISimpleType<string>;
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    name: import("mobx-state-tree").IType<string | undefined, string, string>;
+    opacity: import("mobx-state-tree").IType<number | undefined, number, number>;
+    custom: import("mobx-state-tree").IType<any, any, any>;
+    visible: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    selectable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    removable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    alwaysOnTop: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    showInExport: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+}>>> & {
+    type: "text";
+}) | undefined;
+export declare const pasteFromEvent: (store: StoreType, e: ClipboardEvent, opts?: {
+    onText?: (text: string) => void;
+}) => boolean;

package/utils/clipboard.js

@@ -1 +1 @@
-import{forEveryChild as e}from"../model/group-model.js";import{getTotalClientRect as t}from"./math.js";let a={data:[],pageId:""};const o="polotno_clipboard",l=(e,t)=>{a={data:JSON.parse(JSON.stringify(e)),pageId:t||""};try{localStorage.setItem(o,JSON.stringify(e)),localStorage.setItem(o+"_page",t||"")}catch(l){}},r=()=>{try{const e=localStorage.getItem(o),t=localStorage.getItem(o+"_page");if(e){return{data:JSON.parse(e),pageId:t}}}catch(e){}return a};export const copy=e=>{var t;0!==e.selectedElements.length&&l(e.selectedElements.map(e=>e.toJSON()),null===(t=e.activePage)||void 0===t?void 0:t.id)};export const cut=e=>{var t;l(e.selectedElements.map(e=>e.toJSON()),null===(t=e.activePage)||void 0===t?void 0:t.id);let a=e.selectedElements.filter(e=>e.removable).map(e=>e.id);e.deleteElements(a)};export const paste=a=>{a.history.transaction(()=>{var o,d;let i=0,c=0;const{data:s,pageId:n}=r();if(n===(null===(o=a.activePage)||void 0===o?void 0:o.id)){i=a.width/20,c=a.height/20}else{const o=[];e({children:s},e=>{"group"!==e.type&&o.push(e)});const l=t(o);l.maxX>a.width&&(i=-l.minX),l.maxY>a.height&&(c=-l.minY)}const p=[];e({children:s},e=>{delete e.id,"group"!==e.type&&(e.x+=i,e.y+=c)}),s.forEach(e=>{var t;const o=null===(t=a.activePage)||void 0===t?void 0:t.addElement(e);o&&p.push(o.id)}),l(s,null===(d=a.activePage)||void 0===d?void 0:d.id),a.selectElements(p)})};export const isClipboardEmpty=()=>0===r().data.length;export const resetClipboard=()=>{a={data:[],pageId:""};try{localStorage.removeItem(o),localStorage.removeItem(o+"_page")}catch(e){}};
+import{forEveryChild as e}from"../model/group-model.js";import{nanoid as t}from"nanoid";import{getTotalClientRect as a}from"./math.js";import{removeTags as o}from"./text.js";import{insertFileIntoPage as r}from"./insert-file.js";import{decodeBase64 as l,encodeBase64 as n}from"./base64.js";let i={data:[],pageId:"",payloadId:""};const d="polotno_clipboard",s=(e,t,a)=>{i={data:JSON.parse(JSON.stringify(e)),pageId:t||"",payloadId:a||""};try{localStorage.setItem(d,JSON.stringify(e)),localStorage.setItem(d+"_page",t||""),localStorage.setItem(d+"_payload",a||"")}catch(o){}},c=()=>{try{const e=localStorage.getItem(d),t=localStorage.getItem(d+"_page"),a=localStorage.getItem(d+"_payload");if(e){return{data:JSON.parse(e),pageId:t,payloadId:a}}}catch(e){}return i},p="data-polotno-clipboard";export const copy=e=>{var t;0!==e.selectedElements.length&&s(e.selectedElements.map(e=>e.toJSON()),null===(t=e.activePage)||void 0===t?void 0:t.id)};export const cut=e=>{if(0===e.selectedElements.length){return}copy(e);const t=e.selectedElements.filter(e=>e.removable).map(e=>e.id);e.deleteElements(t)};const m=(t,o)=>{t.history.transaction(()=>{var r,l;let n=0,i=0;const{data:d,pageId:c,payloadId:p}=o;if(c===(null===(r=t.activePage)||void 0===r?void 0:r.id)){n=t.width/20,i=t.height/20}else{const o=[];e({children:d},e=>{"group"!==e.type&&o.push(e)});const r=a(o);r.maxX>t.width&&(n=-r.minX),r.maxY>t.height&&(i=-r.minY)}const m=[];e({children:d},e=>{delete e.id,"group"!==e.type&&(e.x+=n,e.y+=i)}),d.forEach(e=>{var a;const o=null===(a=t.activePage)||void 0===a?void 0:a.addElement(e);o&&m.push(o.id)}),s(d,null===(l=t.activePage)||void 0===l?void 0:l.id,p),t.selectElements(m)})};export const paste=e=>{m(e,c())};export const isClipboardEmpty=()=>0===c().data.length;export const resetClipboard=()=>{i={data:[],pageId:"",payloadId:""};try{localStorage.removeItem(d),localStorage.removeItem(d+"_page"),localStorage.removeItem(d+"_payload")}catch(e){}};export const copyToEvent=(a,r)=>{var l,i;if(!r.clipboardData||0===a.selectedElements.length){return!1}const d=a.selectedElements.map(e=>e.toJSON()),c=t(),m={v:1,id:c,pageId:(null===(l=a.activePage)||void 0===l?void 0:l.id)||"",elements:d};r.clipboardData.setData("text/html",`<div ${p}="${(e=>n((new TextEncoder).encode(JSON.stringify(e))))(m)}"></div>`);const g=[];return e({children:d},e=>{"text"===e.type&&g.push(o(e.text))}),r.clipboardData.setData("text/plain",g.join("\n")||" "),r.preventDefault(),s(d,null===(i=a.activePage)||void 0===i?void 0:i.id,c),!0};export const cutToEvent=(e,t)=>{const a=copyToEvent(e,t);if(a){const t=e.selectedElements.filter(e=>e.removable).map(e=>e.id);e.deleteElements(t)}return a};export const insertTextElement=(e,t,a={})=>{var o;const r=e.width/2,l=(e.width+e.height)/2160;return null===(o=e.activePage)||void 0===o?void 0:o.addElement(Object.assign({type:"text",x:e.width/2-r/2,y:e.height/2-15,width:r,fontSize:30*l,text:t},a))};export const pasteFromEvent=(e,t,a={})=>{const o=t.clipboardData;if(!o){return!1}const n=o.getData("text/html");if(n&&n.includes(p)){const a=(e=>{var a;try{const t=null===(a=(new DOMParser).parseFromString(e,"text/html").querySelector(`[${p}]`))||void 0===a?void 0:a.getAttribute(p);if(!t){return null}const o=JSON.parse((new TextDecoder).decode(l(t)));return Array.isArray(o.elements)?o:null}catch(t){return null}})(n);if(a){t.preventDefault();const o=c();return a.id&&a.id===o.payloadId?m(e,o):m(e,{data:a.elements,pageId:a.pageId,payloadId:a.id}),!0}}const i=o.files?Array.from(o.files):[];if(i.length>0){return t.preventDefault(),(async()=>{for(const a of i){try{await r({file:a,store:e})}catch(t){console.error("polotno: failed to insert pasted file",t)}}})(),!0}const d=o.getData("text/plain");if(d&&d.trim()){if(t.preventDefault(),a.onText){a.onText(d)}else{const t=insertTextElement(e,(e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"))(d));t&&e.selectElements([t.id])}return!0}return 0===o.types.length&&0!==c().data.length&&(t.preventDefault(),paste(e),!0)};

package/utils/errors.d.ts

@@ -0,0 +1,7 @@
+export type PolotnoErrorCode = 'DESIGN_INVALID' | 'EXPORT_FAILED' | 'IMAGE_FAILED' | 'FONT_FAILED' | 'VIDEO_FAILED' | 'UNKNOWN';
+export interface PolotnoError extends Error {
+    code: PolotnoErrorCode;
+    details?: Record<string, any>;
+    cause?: unknown;
+}
+export declare function polotnoError(code: PolotnoErrorCode, message: string, details?: Record<string, any>, cause?: unknown): PolotnoError;

package/utils/errors.js

@@ -0,0 +1 @@
+export function polotnoError(o,r,e,n){const t=new Error(r);return t.code=o,void 0!==e&&(t.details=e),void 0!==n&&(t.cause=n),t}

package/utils/file.d.ts

@@ -1 +1,7 @@
 export declare function localFileToURL(file: File): Promise<string>;
+export type MediaType = 'image' | 'svg' | 'video' | 'audio' | 'gif';
+export declare function getType(file: File): MediaType;
+declare let uploadFunc: (file: File) => Promise<string>;
+export declare function setUploadFunc(func: typeof uploadFunc): void;
+export declare function getUploadFunc(): (file: File) => Promise<string>;
+export {};

package/utils/file.js

@@ -1 +1 @@
-export async function localFileToURL(e){return new Promise((o,r)=>{const n=new FileReader;n.readAsDataURL(e),n.onload=()=>o(n.result),n.onerror=e=>r(e)})}
+export async function localFileToURL(o){return new Promise((e,n)=>{const i=new FileReader;i.readAsDataURL(o),i.onload=()=>e(i.result),i.onerror=o=>n(o)})}export function getType(o){const{type:e}=o;return e.indexOf("svg")>=0?"svg":e.indexOf("gif")>=0?"gif":e.indexOf("image")>=0?"image":e.indexOf("video")>=0?"video":e.indexOf("audio")>=0?"audio":"image"}let o=async o=>(console.warn("Polotno: using data URL for file embeding. This is not recommended for production. Set upload function https://polotno.com/docs/editor-configuration#how-to-change-image-upload-behavior"),localFileToURL(o));export function setUploadFunc(e){o=e}export function getUploadFunc(){return o}

package/utils/fonts.js

@@ -1 +1 @@
-import*as t from"mobx";import{triggerLoadError as o,getFontLoadTimeout as n}from"./loader.js";import{removeTags as e}from"./text.js";let r=t.observable(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),s=t.observable({value:!1});export function isGoogleFontChanged(){return s.value}export function setGoogleFonts(t){"default"!==t?(s.value=!0,r.splice(0,r.length),r.push(...t)):s.value=!1}export function getFontsList(){return r}export const globalFonts=t.observable([]);export function addGlobalFont(t){globalFonts.push(t)}export function removeGlobalFont(t){const o=globalFonts.findIndex(o=>o.fontFamily===t);-1!==o&&globalFonts.splice(o,1)}export function replaceGlobalFonts(t){globalFonts.replace(t)}const a="BESbswy 0123456789 Il1Ww",i=["sans-serif","serif","monospace"];function l(t){const o=function(t=""){const o=e(t).replace(/\s+/g," ").trim();return o?Array.from(o).slice(0,10).join(""):""}(t);return o?`${a} ${o}`:a}export function _getFontProbeTextForTesting(t){return l(t)}let c;function u(t){return{width:t.width,actualBoundingBoxLeft:t.actualBoundingBoxLeft||0,actualBoundingBoxRight:t.actualBoundingBoxRight||0,actualBoundingBoxAscent:t.actualBoundingBoxAscent||0,actualBoundingBoxDescent:t.actualBoundingBoxDescent||0}}function d(t="sans-serif",o="normal",n="normal",e=a){c||(c=document.createElement("canvas"));const r=c.getContext("2d");return r.font=`${o} ${n} 40px ${t}`,u(r.measureText(e))}function f(t,o,n,e,r){return i.some(s=>{const i=function(t,o="sans-serif",n="normal",e="normal",r=a){c||(c=document.createElement("canvas"));const s=c.getContext("2d");return s.font=`${n} ${e} 40px '${t}', ${o}`,u(s.measureText(r))}(t,s,o,n,e);return function(t,o,n=.01){return Math.abs(t.width-o.width)>n||Math.abs(t.actualBoundingBoxLeft-o.actualBoundingBoxLeft)>n||Math.abs(t.actualBoundingBoxRight-o.actualBoundingBoxRight)>n||Math.abs(t.actualBoundingBoxAscent-o.actualBoundingBoxAscent)>n||Math.abs(t.actualBoundingBoxDescent-o.actualBoundingBoxDescent)>n}(i,r[s])})}export function measureFontDom(t,o="sans-serif",n="normal",e="normal",r=a){if("undefined"==typeof document||!document.body){return 0}const s=document.createElement("span");s.textContent=r,s.style.cssText=`\n    position:absolute;\n    visibility:hidden;\n    white-space:nowrap;\n    top:-9999px;\n    left:-9999px;\n    font:${n} ${e} 90px '${t}', ${o};\n  `,document.body.appendChild(s);const i=s.getBoundingClientRect().width;return s.remove(),i}const m={Arial:!0};export const isFontLoaded=(t,o,n)=>o&&n?!!m[`${t}_${o}_${n}`]:Object.keys(m).some(o=>o.startsWith(t+"_"))||!!m[t];export function _setFontLoadedForTesting(t,o){o?m[t]=!0:delete m[t]}export async function loadFont(t,e,r,s){var a;const i=`${t}_${e}_${r}`;if(m[i]){return}const c=!!(null===(a=document.fonts)||void 0===a?void 0:a.load),u=l(s),$={"sans-serif":d("sans-serif",e,r,u),serif:d("serif",e,r,u),monospace:d("monospace",e,r,u)};if(c){try{if(await document.fonts.load(`${e} ${r} 16px '${t}'`,u),f(t,e,r,u,$)){return void B(i,t)}}catch(F){}}const b=Math.min(6e3,n())/60;for(let n=0;n<b;n++){if("missing"===p[t]){if(!x.has(t)){x.add(t),setTimeout(()=>x.delete(t),h);const n=`Font "${t}" not found: not registered and no matching Google Font.`;console.error(n),o(n)}return}if(t in g&&!g[t]&&"errored"===p[t]&&injectGoogleFont(t),c){try{await document.fonts.load(`${e} ${r} 16px '${t}'`,u)}catch(y){}}if(f(t,e,r,u,$)){return void B(i,t)}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?`),o(`Timeout for loading font "${t}"`)}const g={},p={},x=new Set,h=500;function B(t,o){m[t]=!0,delete p[o]}let $="400,400italic,700,700italic";export function setGoogleFontsVariants(t){$=t}export function getGoogleFontsVariants(){return $}export function getGoogleFontsUrl(t){return`https://fonts.googleapis.com/css?family=${t.replace(/ /g,"+")}:${$}`}export function injectGoogleFont(t){if(g[t]){return}const o=getGoogleFontsUrl(t),n=document.createElement("link");n.type="text/css",n.href=o,n.rel="stylesheet",n.onerror=()=>{n.remove(),g[t]=!1,"errored"===p[t]?function(t){p[t]="probing",fetch(getGoogleFontsUrl(t),{mode:"no-cors"}).then(()=>{p[t]="missing"}).catch(()=>{delete p[t]})}(t):p[t]||(p[t]="errored")},document.getElementsByTagName("head")[0].appendChild(n),g[t]=!0}const b={};let F;export function injectCustomFont(t){const o=t.fontFamily;if(b[o]){return}if(!t.url&&!t.styles){return}delete p[o];const n=t.styles||(t.url?[{src:`url("${t.url}")`}]:[]),e=(F||(F=document.getElementById("polotno-font-style"),F||(F=document.createElement("style"),F.id="polotno-font-style",document.head.appendChild(F)),F)).sheet;n.forEach(t=>{e.insertRule(`\n    @font-face{\n      font-family:'${o}';\n      src:${t.src};\n      font-style:${t.fontStyle||"normal"};\n      font-weight:${t.fontWeight||"normal"};\n      font-display:swap;   /* optional but recommended */\n    }`,e.cssRules.length)}),b[t.fontFamily]=!0}
+import*as t from"mobx";import{triggerLoadError as o,getFontLoadTimeout as n}from"./loader.js";import{polotnoError as e}from"./errors.js";import{removeTags as r}from"./text.js";let s=t.observable(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),a=t.observable({value:!1});export function isGoogleFontChanged(){return a.value}export function setGoogleFonts(t){"default"!==t?(a.value=!0,s.splice(0,s.length),s.push(...t)):a.value=!1}export function getFontsList(){return s}export const globalFonts=t.observable([]);export function addGlobalFont(t){globalFonts.push(t)}export function removeGlobalFont(t){const o=globalFonts.findIndex(o=>o.fontFamily===t);-1!==o&&globalFonts.splice(o,1)}export function replaceGlobalFonts(t){globalFonts.replace(t)}const i="BESbswy 0123456789 Il1Ww",l=["sans-serif","serif","monospace"];function c(t){const o=function(t=""){const o=r(t).replace(/\s+/g," ").trim();return o?Array.from(o).slice(0,10).join(""):""}(t);return o?`${i} ${o}`:i}export function _getFontProbeTextForTesting(t){return c(t)}let u;function d(t){return{width:t.width,actualBoundingBoxLeft:t.actualBoundingBoxLeft||0,actualBoundingBoxRight:t.actualBoundingBoxRight||0,actualBoundingBoxAscent:t.actualBoundingBoxAscent||0,actualBoundingBoxDescent:t.actualBoundingBoxDescent||0}}function f(t="sans-serif",o="normal",n="normal",e=i){u||(u=document.createElement("canvas"));const r=u.getContext("2d");return r.font=`${o} ${n} 40px ${t}`,d(r.measureText(e))}function m(t,o,n,e,r){return l.some(s=>{const a=function(t,o="sans-serif",n="normal",e="normal",r=i){u||(u=document.createElement("canvas"));const s=u.getContext("2d");return s.font=`${n} ${e} 40px '${t}', ${o}`,d(s.measureText(r))}(t,s,o,n,e);return function(t,o,n=.01){return Math.abs(t.width-o.width)>n||Math.abs(t.actualBoundingBoxLeft-o.actualBoundingBoxLeft)>n||Math.abs(t.actualBoundingBoxRight-o.actualBoundingBoxRight)>n||Math.abs(t.actualBoundingBoxAscent-o.actualBoundingBoxAscent)>n||Math.abs(t.actualBoundingBoxDescent-o.actualBoundingBoxDescent)>n}(a,r[s])})}export function measureFontDom(t,o="sans-serif",n="normal",e="normal",r=i){if("undefined"==typeof document||!document.body){return 0}const s=document.createElement("span");s.textContent=r,s.style.cssText=`\n    position:absolute;\n    visibility:hidden;\n    white-space:nowrap;\n    top:-9999px;\n    left:-9999px;\n    font:${n} ${e} 90px '${t}', ${o};\n  `,document.body.appendChild(s);const a=s.getBoundingClientRect().width;return s.remove(),a}const g={Arial:!0};export const isFontLoaded=(t,o,n)=>o&&n?!!g[`${t}_${o}_${n}`]:Object.keys(g).some(o=>o.startsWith(t+"_"))||!!g[t];export function _setFontLoadedForTesting(t,o){o?g[t]=!0:delete g[t]}export async function loadFont(t,r,s,a){var i;const l=`${t}_${r}_${s}`;if(g[l]){return}const u=!!(null===(i=document.fonts)||void 0===i?void 0:i.load),d=c(a),$={"sans-serif":f("sans-serif",r,s,d),serif:f("serif",r,s,d),monospace:f("monospace",r,s,d)};if(u){try{if(await document.fonts.load(`${r} ${s} 16px '${t}'`,d),m(t,r,s,d,$)){return void F(l,t)}}catch(y){}}const b=Math.min(6e3,n())/60;for(let n=0;n<b;n++){if("missing"===x[t]){if(!h.has(t)){h.add(t),setTimeout(()=>h.delete(t),B);const n=`Font "${t}" not found: not registered and no matching Google Font.`;console.error(n),o(e("FONT_FAILED",n,{family:t,reason:"not-found"}))}return}if(t in p&&!p[t]&&"errored"===x[t]&&injectGoogleFont(t),u){try{await document.fonts.load(`${r} ${s} 16px '${t}'`,d)}catch(v){}}if(m(t,r,s,d,$)){return void F(l,t)}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?`),o(e("FONT_FAILED",`Timeout for loading font "${t}"`,{family:t,reason:"timeout"}))}const p={},x={},h=new Set,B=500;function F(t,o){g[t]=!0,delete x[o]}let $="400,400italic,700,700italic";export function setGoogleFontsVariants(t){$=t}export function getGoogleFontsVariants(){return $}export function getGoogleFontsUrl(t){return`https://fonts.googleapis.com/css?family=${t.replace(/ /g,"+")}:${$}`}export function injectGoogleFont(t){if(p[t]){return}const o=getGoogleFontsUrl(t),n=document.createElement("link");n.type="text/css",n.href=o,n.rel="stylesheet",n.onerror=()=>{n.remove(),p[t]=!1,"errored"===x[t]?function(t){x[t]="probing",fetch(getGoogleFontsUrl(t),{mode:"no-cors"}).then(()=>{x[t]="missing"}).catch(()=>{delete x[t]})}(t):x[t]||(x[t]="errored")},document.getElementsByTagName("head")[0].appendChild(n),p[t]=!0}const b={};let y;export function injectCustomFont(t){const o=t.fontFamily;if(b[o]){return}if(!t.url&&!t.styles){return}delete x[o];const n=t.styles||(t.url?[{src:`url("${t.url}")`}]:[]),e=(y||(y=document.getElementById("polotno-font-style"),y||(y=document.createElement("style"),y.id="polotno-font-style",document.head.appendChild(y)),y)).sheet;n.forEach(t=>{e.insertRule(`\n    @font-face{\n      font-family:'${o}';\n      src:${t.src};\n      font-style:${t.fontStyle||"normal"};\n      font-weight:${t.fontWeight||"normal"};\n      font-display:swap;   /* optional but recommended */\n    }`,e.cssRules.length)}),b[t.fontFamily]=!0}