polotno 4.1.3 → 4.2.1

package/utils/text-format-state.js

@@ -1 +1 @@
-import*as t from"react";import*as e from"mobx";import{parsePrimaryFontFamily as o,parseFontSizeToPx as n}from"./rich-text-html.js";import{getTextFormat as i,applyTextFormat as r,FORMAT_KEYS as l}from"./text-format.js";const c=e.observable({active:null},{},{deep:!1});export function getActiveTextEditor(){return c.active}export function setActiveTextEditor(t){e.runInAction(()=>{c.active=Object.assign(Object.assign({},t),{currentFormat:{},mixedFormats:{},lastSelection:null})})}export function updateActiveTextFormat(t,o,n){e.runInAction(()=>{c.active&&(c.active=Object.assign(Object.assign({},c.active),{currentFormat:t,mixedFormats:o,lastSelection:n||c.active.lastSelection}))})}export function clearActiveTextEditor(t){e.runInAction(()=>{var e;t&&(null===(e=c.active)||void 0===e?void 0:e.instance)!==t||(c.active=null)})}const a={fontSize:["size"],fontFamily:["font"],fill:["color"],fontWeight:["bold"],fontStyle:["italic"],textDecoration:["underline","strike"]};export const ALL_QUILL_MIXED_KEYS=Array.from(new Set(l.flatMap(t=>a[t])));function s(t,e,i){var r,l;switch(t){case"fontSize":return null!==(r=n(e.size,i.fontSize))&&void 0!==r?r:i.fontSize;case"fontFamily":return e.font&&o(String(e.font))||i.fontFamily;case"fill":return null!==(l=e.color)&&void 0!==l?l:i.fill;case"fontWeight":return e.bold?"bold":i.fontWeight;case"fontStyle":return e.italic?"italic":i.fontStyle;case"textDecoration":{const t=[];return e.underline&&t.push("underline"),e.strike&&t.push("line-through"),t.join(" ")}}}export function quillToTextFormat(t,e,o){const n={};for(const i of l){if(a[i].some(t=>!0===e[t])){n[i]={value:void 0,mixed:!0,values:[]}}else{const e=s(i,t,o);n[i]={value:e,mixed:!1,values:[e]}}}return n}export function attrsToQuillOps(t){const e=[];return void 0!==t.fontFamily&&e.push(["font",t.fontFamily]),void 0!==t.fontSize&&e.push(["size",`${t.fontSize}px`]),void 0!==t.fill&&e.push(["color",t.fill]),void 0!==t.fontWeight&&e.push(["bold","bold"===t.fontWeight]),void 0!==t.fontStyle&&e.push(["italic","italic"===t.fontStyle]),void 0!==t.textDecoration&&(e.push(["underline",/\bunderline\b/.test(t.textDecoration)]),e.push(["strike",/\bline-through\b/.test(t.textDecoration)])),e}function u(t){return((null==t?void 0:t.selectedElements)||[]).filter(t=>"text"===t.type)}function f(t){const e=getActiveTextEditor();return e&&e.instance&&e.store===t?e:null}export function resolveSelectionScope(t,e){const o=t.getSelection()||e||{index:0,length:0},n="function"==typeof t.getLength?t.getLength():0,i=n<=1;return o.length<=0?{scope:"collapsed",sel:o,isEmpty:i}:{scope:o.length>=n-1?"full":"partial",sel:o,isEmpty:i}}export function applyToLiveEditor(t,e,o){const n=attrsToQuillOps(e);if(!n.length){return}const{scope:i,sel:r}=resolveSelectionScope(t,null!=o?o:null);for(const[l,c]of n){"collapsed"===i?t.format(l,c,"user"):t.formatText(r.index,r.length,l,c,"user")}}export function getTextFormatState(t){const e=f(t),o=u(t),n=!!e||o.length>0;var l;return{format:e?quillToTextFormat(e.currentFormat||{},e.mixedFormats||{},{fontSize:(l=e.element).fontSize,fontFamily:l.fontFamily,fill:l.fill,fontWeight:l.fontWeight,fontStyle:l.fontStyle,textDecoration:l.textDecoration}):i(o),enabled:n,applyTextFormat:e=>function(t,e){const o=f(t);if(!o){return void r(u(t),e)}const{scope:n,sel:i,isEmpty:l}=resolveSelectionScope(o.instance,o.lastSelection);"full"===n||"collapsed"===n&&!l?r([o.element],e):applyToLiveEditor(o.instance,e,i)}(t,e)}}export function observeTextFormatState(t,o){return e.reaction(()=>getTextFormatState(t),t=>o(t),{fireImmediately:!0})}export function useTextFormat(e){const[o,n]=t.useState(()=>getTextFormatState(e));return t.useEffect(()=>observeTextFormatState(e,n),[e]),o}
+import*as t from"react";import*as e from"mobx";import{parsePrimaryFontFamily as o,parseFontSizeToPx as n,toNumericWeight as i}from"./rich-text-html.js";import{getTextFormat as r,applyTextFormat as l,FORMAT_KEYS as c}from"./text-format.js";const a=e.observable({active:null},{},{deep:!1});export function getActiveTextEditor(){return a.active}export function setActiveTextEditor(t){e.runInAction(()=>{a.active=Object.assign(Object.assign({},t),{currentFormat:{},mixedFormats:{},lastSelection:null})})}export function updateActiveTextFormat(t,o,n){e.runInAction(()=>{a.active&&(a.active=Object.assign(Object.assign({},a.active),{currentFormat:t,mixedFormats:o,lastSelection:n||a.active.lastSelection}))})}export function clearActiveTextEditor(t){e.runInAction(()=>{var e;t&&(null===(e=a.active)||void 0===e?void 0:e.instance)!==t||(a.active=null)})}const s={fontSize:["size"],fontFamily:["font"],fill:["color"],fontWeight:["font-weight"],fontStyle:["italic"],textDecoration:["underline","strike"]};export const ALL_QUILL_MIXED_KEYS=Array.from(new Set(c.flatMap(t=>s[t])));function f(t,e,r){var l,c;switch(t){case"fontSize":return null!==(l=n(e.size,r.fontSize))&&void 0!==l?l:r.fontSize;case"fontFamily":return e.font&&o(String(e.font))||r.fontFamily;case"fill":return null!==(c=e.color)&&void 0!==c?c:r.fill;case"fontWeight":return null!=e["font-weight"]?i(e["font-weight"]):i(r.fontWeight);case"fontStyle":return e.italic?"italic":r.fontStyle;case"textDecoration":{const t=[];return e.underline&&t.push("underline"),e.strike&&t.push("line-through"),t.join(" ")}}}export function quillToTextFormat(t,e,o){const n={};for(const i of c){if(s[i].some(t=>!0===e[t])){n[i]={value:void 0,mixed:!0,values:[]}}else{const e=f(i,t,o);n[i]={value:e,mixed:!1,values:[e]}}}return n}export function attrsToQuillOps(t){const e=[];return void 0!==t.fontFamily&&e.push(["font",t.fontFamily]),void 0!==t.fontSize&&e.push(["size",`${t.fontSize}px`]),void 0!==t.fill&&e.push(["color",t.fill]),void 0!==t.fontWeight&&e.push(["font-weight",String(i(t.fontWeight))]),void 0!==t.fontStyle&&e.push(["italic","italic"===t.fontStyle]),void 0!==t.textDecoration&&(e.push(["underline",/\bunderline\b/.test(t.textDecoration)]),e.push(["strike",/\bline-through\b/.test(t.textDecoration)])),e}function u(t){return((null==t?void 0:t.selectedElements)||[]).filter(t=>"text"===t.type)}function p(t){const e=getActiveTextEditor();return e&&e.instance&&e.store===t?e:null}export function resolveSelectionScope(t,e){const o=t.getSelection()||e||{index:0,length:0},n="function"==typeof t.getLength?t.getLength():0,i=n<=1;return o.length<=0?{scope:"collapsed",sel:o,isEmpty:i}:{scope:o.length>=n-1?"full":"partial",sel:o,isEmpty:i}}export function applyToLiveEditor(t,e,o){const n=attrsToQuillOps(e);if(!n.length){return}const{scope:i,sel:r}=resolveSelectionScope(t,null!=o?o:null);for(const[l,c]of n){"collapsed"===i?t.format(l,c,"user"):t.formatText(r.index,r.length,l,c,"user")}}export function getTextFormatState(t){const e=p(t),o=u(t),n=!!e||o.length>0;var i;return{format:e?quillToTextFormat(e.currentFormat||{},e.mixedFormats||{},{fontSize:(i=e.element).fontSize,fontFamily:i.fontFamily,fill:i.fill,fontWeight:i.fontWeight,fontStyle:i.fontStyle,textDecoration:i.textDecoration}):r(o),enabled:n,applyTextFormat:e=>function(t,e){const o=p(t);if(!o){return void l(u(t),e)}const{scope:n,sel:i,isEmpty:r}=resolveSelectionScope(o.instance,o.lastSelection);"full"===n||"collapsed"===n&&!r?l([o.element],e):applyToLiveEditor(o.instance,e,i)}(t,e)}}export function observeTextFormatState(t,o){return e.reaction(()=>getTextFormatState(t),t=>o(t),{fireImmediately:!0})}export function useTextFormat(e){const[o,n]=t.useState(()=>getTextFormatState(e));return t.useEffect(()=>observeTextFormatState(e,n),[e]),o}

package/utils/text-format.d.ts

@@ -9,7 +9,7 @@ export type TextFormat = {
     fontSize: FormatValue<number>;
     fontFamily: FormatValue<string>;
     fill: FormatValue<string>;
-    fontWeight: FormatValue<string>;
+    fontWeight: FormatValue<number>;
     fontStyle: FormatValue<string>;
     textDecoration: FormatValue<string>;
 };
@@ -17,7 +17,7 @@ export type TextFormatAttrs = Partial<{
     fontSize: number;
     fontFamily: string;
     fill: string;
-    fontWeight: string;
+    fontWeight: number | 'bold' | 'normal' | string;
     fontStyle: string;
     textDecoration: string;
 }>;

package/utils/text-format.js

@@ -1 +1 @@
-import{parsePrimaryFontFamily as t,parseFontSizeToPx as e,parseHtmlRoot as o,stripInlineFontSizes as n,stripInlineFontFamilies as r,stripInlineFormat as s,QUILL_FONT_CLASS_TO_FAMILY as i,guessFontFamilyFromQlClass as c}from"./rich-text-html.js";export const FORMAT_KEYS=["fontSize","fontFamily","fill","fontWeight","fontStyle","textDecoration"];function a(o,n,r){switch(n){case"fontSize":return e(o.style.fontSize,r.fontSize);case"fontFamily":{if(o.style.fontFamily){return t(o.style.fontFamily)||void 0}const e=(o.getAttribute("class")||"").split(/\s+/).find(t=>t.startsWith("ql-font-"));if(e){const o=i[e]||c(e);return t(o)||void 0}return}case"fill":return o.style.color||void 0;case"fontWeight":return o.style.fontWeight?o.style.fontWeight:"STRONG"===o.tagName||"B"===o.tagName?"bold":void 0;case"fontStyle":return o.style.fontStyle?o.style.fontStyle:"EM"===o.tagName||"I"===o.tagName?"italic":void 0;case"textDecoration":return o.style.textDecoration?o.style.textDecoration:"U"===o.tagName?"underline":"S"===o.tagName||"DEL"===o.tagName?"line-through":void 0}}function f(t,e,o){const n={},r=new Set;let s=t.parentElement;for(;s&&s!==e;){for(const t of FORMAT_KEYS){if(r.has(t)){continue}const e=a(s,t,o);void 0!==e&&(n[t]=e,r.add(t))}s=s.parentElement}for(const i of FORMAT_KEYS){r.has(i)||(n[i]=o[i])}return n}function l(t,e){return 0===t.length?{value:e,mixed:!1,values:void 0===e?[]:[e]}:1===t.length?{value:t[0],mixed:!1,values:t}:{value:void 0,mixed:!0,values:t}}function u(t){const e=function(t){const e=t.text||"";if(!e.includes("<")){if(0===e.trim().length){return[]}const o={};for(const e of FORMAT_KEYS){o[e]=t[e]}return[o]}const n=o(e);if(!n){return[]}const r=[],s=n.ownerDocument.createTreeWalker(n,NodeFilter.SHOW_TEXT);let i=s.nextNode();for(;i;){const e=i;(e.textContent||"").trim().length>0&&r.push(f(e,n,t)),i=s.nextNode()}return r}(t),n={};for(const o of FORMAT_KEYS){const r=[];for(const t of e){const e=t[o];void 0===e||r.includes(e)||r.push(e)}const s=0===r.length?t[o]:void 0;n[o]=l(r,s)}return n}export function getTextFormat(t){return Array.isArray(t)?function(t){const e={};for(const o of FORMAT_KEYS){const n=[];for(const e of t){for(const t of e[o].values){n.includes(t)||n.push(t)}}e[o]=l(n,void 0)}return e}(t.map(u)):u(t)}function d(t,e){switch(e){case"fontSize":return n(t);case"fontFamily":return r(t);case"fill":return s(t,"color");case"fontWeight":return s(t,"bold");case"fontStyle":return s(t,"italic");case"textDecoration":return s(s(t,"underline"),"strike")}}export function patchTextFormat(t,e){const o=FORMAT_KEYS.filter(t=>void 0!==e[t]);if(0===o.length){return{attrsToSet:{}}}const n={};for(const s of o){n[s]=e[s]}let r=t.text||"";for(const s of o){r=d(r,s)}return r!==(t.text||"")&&(n.text=r),{attrsToSet:n}}export function applyTextFormat(t,e){var o;const n=Array.isArray(t)?t:[t];if(0===n.length){return}const r=t=>{const{attrsToSet:o}=patchTextFormat(t,e);Object.keys(o).length&&t.set(o)};if(1===n.length){return void r(n[0])}const s=new Map;for(const i of n){const t=i.store,e=s.get(t)||[];e.push(i),s.set(t,e)}for(const[i,c]of s){(null===(o=null==i?void 0:i.history)||void 0===o?void 0:o.transaction)?i.history.transaction(()=>c.forEach(r)):c.forEach(r)}}
+import{parsePrimaryFontFamily as t,parseFontSizeToPx as e,parseHtmlRoot as o,stripInlineFontSizes as n,stripInlineFontFamilies as r,stripInlineFormat as i,toNumericWeight as s,QUILL_FONT_CLASS_TO_FAMILY as c,guessFontFamilyFromQlClass as a}from"./rich-text-html.js";export const FORMAT_KEYS=["fontSize","fontFamily","fill","fontWeight","fontStyle","textDecoration"];function f(o,n,r){switch(n){case"fontSize":return e(o.style.fontSize,r.fontSize);case"fontFamily":{if(o.style.fontFamily){return t(o.style.fontFamily)||void 0}const e=(o.getAttribute("class")||"").split(/\s+/).find(t=>t.startsWith("ql-font-"));if(e){const o=c[e]||a(e);return t(o)||void 0}return}case"fill":return o.style.color||void 0;case"fontWeight":return o.style.fontWeight?s(o.style.fontWeight):"STRONG"===o.tagName||"B"===o.tagName?700:void 0;case"fontStyle":return o.style.fontStyle?o.style.fontStyle:"EM"===o.tagName||"I"===o.tagName?"italic":void 0;case"textDecoration":return o.style.textDecoration?o.style.textDecoration:"U"===o.tagName?"underline":"S"===o.tagName||"DEL"===o.tagName?"line-through":void 0}}function l(t,e){return"fontWeight"===e?s(t.fontWeight):t[e]}function u(t,e,o){const n={},r=new Set;let i=t.parentElement;for(;i&&i!==e;){for(const t of FORMAT_KEYS){if(r.has(t)){continue}const e=f(i,t,o);void 0!==e&&(n[t]=e,r.add(t))}i=i.parentElement}for(const s of FORMAT_KEYS){r.has(s)||(n[s]=l(o,s))}return n}function h(t,e){return 0===t.length?{value:e,mixed:!1,values:void 0===e?[]:[e]}:1===t.length?{value:t[0],mixed:!1,values:t}:{value:void 0,mixed:!0,values:t}}function d(t){const e=function(t){const e=t.text||"";if(!e.includes("<")){if(0===e.trim().length){return[]}const o={};for(const e of FORMAT_KEYS){o[e]=l(t,e)}return[o]}const n=o(e);if(!n){return[]}const r=[],i=n.ownerDocument.createTreeWalker(n,NodeFilter.SHOW_TEXT);let s=i.nextNode();for(;s;){const e=s;(e.textContent||"").trim().length>0&&r.push(u(e,n,t)),s=i.nextNode()}return r}(t),n={};for(const o of FORMAT_KEYS){const r=[];for(const t of e){const e=t[o];void 0===e||r.includes(e)||r.push(e)}const i=0===r.length?l(t,o):void 0;n[o]=h(r,i)}return n}export function getTextFormat(t){return Array.isArray(t)?function(t){const e={};for(const o of FORMAT_KEYS){const n=[];for(const e of t){for(const t of e[o].values){n.includes(t)||n.push(t)}}e[o]=h(n,void 0)}return e}(t.map(d)):d(t)}function g(t,e){switch(e){case"fontSize":return n(t);case"fontFamily":return r(t);case"fill":return i(t,"color");case"fontWeight":return i(t,"bold");case"fontStyle":return i(t,"italic");case"textDecoration":return i(i(t,"underline"),"strike")}}let m=!1;function y(t){return"string"!=typeof t||/^\d+$/.test(t.trim())||m||(m=!0,console.warn("[polotno] applyTextFormat({ fontWeight }) with a string such as 'bold'/'normal' is deprecated; pass a number (100–900), e.g. 700.")),s(t)}export function patchTextFormat(t,e){const o=FORMAT_KEYS.filter(t=>void 0!==e[t]);if(0===o.length){return{attrsToSet:{}}}const n={};for(const i of o){n[i]="fontWeight"===i?String(y(e.fontWeight)):e[i]}let r=t.text||"";for(const i of o){r=g(r,i)}return r!==(t.text||"")&&(n.text=r),{attrsToSet:n}}export function applyTextFormat(t,e){var o;const n=Array.isArray(t)?t:[t];if(0===n.length){return}const r=t=>{const{attrsToSet:o}=patchTextFormat(t,e);Object.keys(o).length&&t.set(o)};if(1===n.length){return void r(n[0])}const i=new Map;for(const s of n){const t=s.store,e=i.get(t)||[];e.push(s),i.set(t,e)}for(const[s,c]of i){(null===(o=null==s?void 0:s.history)||void 0===o?void 0:o.transaction)?s.history.transaction(()=>c.forEach(r)):c.forEach(r)}}

package/utils/text.js

@@ -1 +1 @@
-import{parsePrimaryFontFamily as t,parseFontSizeToPx as e}from"./rich-text-html.js";export function removeTags(t=""){return(t.match(/<\/p>/gi)||[]).length>1&&(t=t.replace(/<\/p>/gi,(t,e,n)=>(n.slice(e+t.length).match(/<\/p>/gi)||[]).length>0?"\n":t)),t.replace(/(<([^>]+)>)/gi,"").replace(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&quot;/g,'"').replace(/&apos;/g,"'").replace(/&nbsp;/g," ")}function n(t,e){var n,o;return!!t.bold==!!e.bold&&!!t.italic==!!e.italic&&!!t.underline==!!e.underline&&!!t.strike==!!e.strike&&(t.color||"")===(e.color||"")&&(t.fontFamily||"")===(e.fontFamily||"")&&(null!==(n=t.fontSize)&&void 0!==n?n:-1)===(null!==(o=e.fontSize)&&void 0!==o?o:-1)}export function parseHtmlToSegments(o,i){var l;if(!o){return[]}const r=(new DOMParser).parseFromString(o,"text/html"),c=[],a=r.body.querySelectorAll("p"),s=null!==(l=null==i?void 0:i.fontSize)&&void 0!==l?l:14;function f(n,o){var i;if(n.nodeType===Node.TEXT_NODE){const t=n.textContent||"";return void(t&&c.push(function(t,e){const n={text:t};return e.bold&&(n.bold=!0),e.italic&&(n.italic=!0),e.underline&&(n.underline=!0),e.strike&&(n.strike=!0),e.color&&(n.color=e.color),e.fontFamily&&(n.fontFamily=e.fontFamily),null!=e.fontSize&&(n.fontSize=e.fontSize),n}(t,o)))}if(n.nodeType!==Node.ELEMENT_NODE){return}const l=n,r=l.tagName.toLowerCase(),a=Object.assign({},o);"strong"!==r&&"b"!==r||(a.bold=!0),"em"!==r&&"i"!==r||(a.italic=!0),"u"===r&&(a.underline=!0),"s"===r&&(a.strike=!0);const u=l.style;u.color&&(a.color=u.color),("bold"===u.fontWeight||parseInt(u.fontWeight)>=700)&&(a.bold=!0),"italic"===u.fontStyle&&(a.italic=!0);const g=u.textDecoration||u.textDecorationLine||"";if(g.includes("underline")&&(a.underline=!0),g.includes("line-through")&&(a.strike=!0),u.fontFamily){const e=t(u.fontFamily);e&&(a.fontFamily=e)}if(u.fontSize){const t=null!==(i=o.fontSize)&&void 0!==i?i:s,n=e(u.fontSize,t);null!=n&&(a.fontSize=n)}for(const t of Array.from(l.childNodes)){f(t,a)}}a.length>0?a.forEach((t,e)=>{f(t,{}),e<a.length-1&&c.push({text:"\n"})}):f(r.body,{});const u=[];for(const t of c){if(!t.text){continue}const e=u[u.length-1];e&&n(e,t)?e.text+=t.text:u.push(t)}return u}export function sanitizeHtml(t){return t?/<[a-z][a-z0-9]*(\s[^>]*)?>[^<]*<\/[a-z][a-z0-9]*>/i.test(t)?t=(t=t.replace(/<(?![a-z/!])/gi,"&lt;")).replace(/([^a-z0-9"'\s/])>/gi,"$1&gt;"):t.replace(/</g,"&lt;").replace(/>/g,"&gt;"):""}
+import{parsePrimaryFontFamily as t,parseFontSizeToPx as e,isBoldWeight as n}from"./rich-text-html.js";export function removeTags(t=""){return(t.match(/<\/p>/gi)||[]).length>1&&(t=t.replace(/<\/p>/gi,(t,e,n)=>(n.slice(e+t.length).match(/<\/p>/gi)||[]).length>0?"\n":t)),t.replace(/(<([^>]+)>)/gi,"").replace(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&quot;/g,'"').replace(/&apos;/g,"'").replace(/&nbsp;/g," ")}function o(t,e){var n,o;return!!t.bold==!!e.bold&&!!t.italic==!!e.italic&&!!t.underline==!!e.underline&&!!t.strike==!!e.strike&&(t.color||"")===(e.color||"")&&(t.fontFamily||"")===(e.fontFamily||"")&&(null!==(n=t.fontSize)&&void 0!==n?n:-1)===(null!==(o=e.fontSize)&&void 0!==o?o:-1)}export function parseHtmlToSegments(i,l){var r;if(!i){return[]}const c=(new DOMParser).parseFromString(i,"text/html"),a=[],s=c.body.querySelectorAll("p"),f=null!==(r=null==l?void 0:l.fontSize)&&void 0!==r?r:14;function u(o,i){var l;if(o.nodeType===Node.TEXT_NODE){const t=o.textContent||"";return void(t&&a.push(function(t,e){const n={text:t};return e.bold&&(n.bold=!0),e.italic&&(n.italic=!0),e.underline&&(n.underline=!0),e.strike&&(n.strike=!0),e.color&&(n.color=e.color),e.fontFamily&&(n.fontFamily=e.fontFamily),null!=e.fontSize&&(n.fontSize=e.fontSize),n}(t,i)))}if(o.nodeType!==Node.ELEMENT_NODE){return}const r=o,c=r.tagName.toLowerCase(),s=Object.assign({},i);"strong"!==c&&"b"!==c||(s.bold=!0),"em"!==c&&"i"!==c||(s.italic=!0),"u"===c&&(s.underline=!0),"s"===c&&(s.strike=!0);const g=r.style;g.color&&(s.color=g.color),n(g.fontWeight)&&(s.bold=!0),"italic"===g.fontStyle&&(s.italic=!0);const p=g.textDecoration||g.textDecorationLine||"";if(p.includes("underline")&&(s.underline=!0),p.includes("line-through")&&(s.strike=!0),g.fontFamily){const e=t(g.fontFamily);e&&(s.fontFamily=e)}if(g.fontSize){const t=null!==(l=i.fontSize)&&void 0!==l?l:f,n=e(g.fontSize,t);null!=n&&(s.fontSize=n)}for(const t of Array.from(r.childNodes)){u(t,s)}}s.length>0?s.forEach((t,e)=>{u(t,{}),e<s.length-1&&a.push({text:"\n"})}):u(c.body,{});const g=[];for(const t of a){if(!t.text){continue}const e=g[g.length-1];e&&o(e,t)?e.text+=t.text:g.push(t)}return g}export function sanitizeHtml(t){return t?/<[a-z][a-z0-9]*(\s[^>]*)?>[^<]*<\/[a-z][a-z0-9]*>/i.test(t)?t=(t=t.replace(/<(?![a-z/!])/gi,"&lt;")).replace(/([^a-z0-9"'\s/])>/gi,"$1&gt;"):t.replace(/</g,"&lt;").replace(/>/g,"&gt;"):""}

package/utils/timeline.d.ts

@@ -3,9 +3,12 @@ type AnimationTiming = {
     enabled: boolean;
     delay: number;
 };
+export declare const MIN_DURATION = 100;
 export declare function getElementTimeRange(animations: AnimationTiming[] | undefined, pageDuration: number): {
     start: number;
     end: number;
 };
+export declare function getPlayheadLocalTime(self: any): number | null;
+export declare function revealElementAtPlayhead(element: any): void;
 export declare function getVideoRestMs(currentTime: number, pageStartTime: number, enterStart: number, trimDurationMs: number, offsetMs: number, speed?: number): number;
 export {};

package/utils/timeline.js

@@ -1 +1 @@
-export function getElementTimeRange(e,n){const t=null==e?void 0:e.find(e=>"enter"===e.type),l=null==e?void 0:e.find(e=>"exit"===e.type);return{start:(null==t?void 0:t.enabled)?t.delay:0,end:(null==l?void 0:l.enabled)?n-l.delay:n}}export function getVideoRestMs(e,n,t,l,d,i=1){const o=(e||n)-n-t;return(o<=0?0:o*i%l)+d}
+export const MIN_DURATION=100;export function getElementTimeRange(e,t){const n=null==e?void 0:e.find(e=>"enter"===e.type),a=null==e?void 0:e.find(e=>"exit"===e.type),i=Math.max(0,Math.min(t,(null==n?void 0:n.enabled)?n.delay:0)),l=Math.min(t,(null==a?void 0:a.enabled)?t-a.delay:t);return{start:i,end:Math.max(i,l)}}export function getPlayheadLocalTime(e){var t,n;return null!==(n=null===(t=e.page)||void 0===t?void 0:t.playheadLocalTime)&&void 0!==n?n:null}export function revealElementAtPlayhead(e){const t=e.store,n=e.page;if("playhead"!==t.timingPreview||!n){return}const{start:a,end:i}=getElementTimeRange(e.animations,n.duration),l=t.effectiveTime-n.startTime;if(l>=a&&l<i){return}const o=Math.max(a,Math.min(l,Math.max(a,i-1)));t.setCurrentTime(n.startTime+o)}export function getVideoRestMs(e,t,n,a,i,l=1){const o=(e||t)-t-n;return(o<=0?0:o*l%a)+i}

package/utils/to-pptx.js

@@ -1 +1 @@
-import{loadImage as t,cropImage as e}from"./image.js";import*as a from"./svg.js";import{figureToSvg as o}from"./figure-to-svg.js";import{removeTags as i}from"./text.js";import{pxToUnit as n}from"./unit.js";import r from"konva";const s=t=>n({px:t,unit:"in",dpi:100}),d=t=>Math.round(100*(1-t)),c=t=>{const{dx:e,dy:a}=((t,e,a)=>{const o=(a%360+360)%360;if(0===o){return{dx:0,dy:0}}const i=o*Math.PI/180,n=t/2,r=e/2;return{dx:n*Math.cos(i)-r*Math.sin(i)-n,dy:n*Math.sin(i)+r*Math.cos(i)-r}})(t.width,t.height,t.rotation);return{x:s(t.x+e),y:s(t.y+a)}},h=t=>{if(!t){return"000000"}if(t.includes("gradient")){return console.warn("PPTX export: gradient fill is not supported, using black"),"000000"}if(/^[0-9a-fA-F]{6}$/.test(t)){return t.toLowerCase()}let e=r.Util.colorToRGBA(t);return!e&&/^[0-9a-fA-F]{3,6}$/.test(t)&&(e=r.Util.colorToRGBA("#"+t)),e?r.Util._rgbToHex(e.r,e.g,e.b).replace("#","").toLowerCase():t.replace("#","").toLowerCase()||"000000"};let l=null;export function getPptxGen(){return window.PptxGenJS?Promise.resolve(window.PptxGenJS):l||(l=new Promise(t=>{var e=document.createElement("script");e.onload=function(){t(window.PptxGenJS)},e.src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs/dist/pptxgen.bundle.js",document.head.appendChild(e)}),l)}const g=async({element:o,slide:i})=>{let{src:n}=o;if("svg"===o.type&&Object.keys(o.colorsReplace).length){const t=await a.urlToString(n);n=a.replaceColors(t,new Map(Object.entries(o.colorsReplace)))}const r=await t(n),l=r.width*o.cropWidth,g=r.height*o.cropHeight,p=o.width/o.height;let w,u;const f=l/g;"svg"===o.type?(w=l,u=g):p>=f?(w=l,u=l/p):(w=g*p,u=g);let m=await e(n,Object.assign(Object.assign({},o),{cropWidth:w/r.width,cropHeight:u/r.height}));(o.cornerRadius||o.borderSize)&&(m=await(async(e,{width:a,height:o,cornerRadius:i,borderSize:n,borderColor:r})=>{if(!i&&!n){return e}const s=await t(e),d=document.createElement("canvas");d.width=Math.max(1,Math.round(a)),d.height=Math.max(1,Math.round(o));const c=d.getContext("2d"),l=Math.max(0,i),g=d.width,p=d.height,w=(t=!1)=>{const e=Math.min(l,Math.min(g,p)/2);c.beginPath(),c.moveTo(e,0),c.lineTo(g-e,0),c.quadraticCurveTo(g,0,g,e),c.lineTo(g,p-e),c.quadraticCurveTo(g,p,g-e,p),c.lineTo(e,p),c.quadraticCurveTo(0,p,0,p-e),c.lineTo(0,e),c.quadraticCurveTo(0,0,e,0),c.closePath(),t&&n>0&&(c.lineWidth=n,c.strokeStyle="#"+h(r),c.stroke())};return w(!1),c.save(),c.clip(),c.drawImage(s,0,0,g,p),c.restore(),n>0&&w(!0),d.toDataURL("image/png")})(m,{width:o.width,height:o.height,cornerRadius:o.cornerRadius,borderSize:o.borderSize,borderColor:o.borderColor}));const b=Object.assign(Object.assign({},c(o)),{w:s(o.width),h:s(o.height),rotate:o.rotation,flipH:o.flipX,flipV:o.flipY,transparency:d(o.opacity)});if(o.shadowEnabled){const t=Math.hypot(o.shadowOffsetX,o.shadowOffsetY)/2,e=180*Math.atan2(o.shadowOffsetY,o.shadowOffsetX)/Math.PI;b.shadow={type:"outer",blur:o.shadowBlur/2,offset:t,angle:e,color:h(o.shadowColor),opacity:o.shadowOpacity}}await i.addImage(Object.assign({path:m},b))},p=t=>"arrow"===t?"arrow":"triangle"===t?"triangle":"circle"===t?"oval":"square"===t?"diamond":"none",w=t=>{if(t&&t.length){return t.length<=2?"dash":"dashDot"}},u={image:g,svg:g,gif:g,text:async({element:t,slide:e})=>{let a=i(t.text||"");"uppercase"===t.textTransform&&(a=a.toUpperCase());const o=Object.assign(Object.assign(Object.assign(Object.assign({},c(t)),{w:s(t.width),h:s(t.height),fontSize:Math.round(.75*t.fontSize),fontFace:t.fontFamily,color:h(t.fill),align:t.align,bold:"bold"===t.fontWeight,italic:"italic"===t.fontStyle}),"underline"===t.textDecoration?{underline:{style:"sng",color:h(t.fill)}}:{}),{lineSpacingMultiple:t.lineHeight,rotate:t.rotation,fit:"shrink",transparency:d(t.opacity),margin:0});if("middle"===t.verticalAlign?o.valign="middle":"bottom"===t.verticalAlign?o.valign="bottom":o.valign="top",t.letterSpacing&&(o.charSpacing=t.letterSpacing*o.fontSize),t.strokeWidth>0&&(o.outline={size:.75*t.strokeWidth,color:h(t.stroke)}),t.shadowEnabled){const e=.75*Math.hypot(t.shadowOffsetX,t.shadowOffsetY)/2,a=180*Math.atan2(t.shadowOffsetY,t.shadowOffsetX)/Math.PI;o.shadow={type:"outer",blur:.75*t.shadowBlur,offset:e,angle:a,color:h(t.shadowColor),opacity:t.shadowOpacity}}if(t.backgroundEnabled){o.fill={color:h(t.backgroundColor)};const e=t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5);o.rectRadius=s(e);const a=t.backgroundPadding*(t.fontSize*t.lineHeight);o.margin=Math.max(0,Math.round(.75*a))}await e.addText(a,o)},line:async({element:t,slide:e})=>{const a=Object.assign(Object.assign({},c(t)),{w:s(t.width),h:s(t.height),line:{color:h(t.color),width:t.height,beginArrowType:p(t.startHead),endArrowType:p(t.endHead),dashType:w(t.dash),transparency:d(t.opacity)},rotate:t.rotation,transparency:d(t.opacity)});await e.addShape("line",a)},figure:async({element:e,slide:a})=>{const i=o(e),n=await(async(e,a,o)=>{const i="data:image/svg+xml;base64,"+btoa(e),n=await t(i),r=document.createElement("canvas");return r.width=Math.max(1,Math.round(a)),r.height=Math.max(1,Math.round(o)),r.getContext("2d").drawImage(n,0,0,r.width,r.height),r.toDataURL("image/png")})(i,e.width,e.height),r=Object.assign(Object.assign({},c(e)),{w:s(e.width),h:s(e.height),rotate:e.rotation,transparency:d(e.opacity)});await a.addImage(Object.assign({path:n},r))},group:async({element:t,slide:e})=>{for(const a of t.children||[]){await f({element:a,slide:e})}},video:async({element:t,slide:e})=>{const a=Object.assign(Object.assign({},c(t)),{w:s(t.width),h:s(t.height),rotate:t.rotation});await e.addMedia(Object.assign({type:"video",path:t.src},a))}},f=async({element:t,slide:e})=>{if(!t.visible||!t.showInExport){return}const a=u[t.type];a?await a({element:t,slide:e}):console.warn(`PPTX export doesn't support ${t.type} type`)};export async function jsonToPPTX({json:t}){const e=new(await getPptxGen());e.defineLayout({name:"CUSTOM",width:s(t.width),height:s(t.height)}),e.layout="CUSTOM";for(const a of t.pages){const t=e.addSlide();if(/\.(jpg|jpeg|png|gif)$/i.test(a.background)||a.background.startsWith("data:image")||a.background.startsWith("http")){await t.addImage({path:a.background,x:0,y:0,w:e.width,h:e.height,sizing:{type:"contain"}})}else{const e=r.Util.colorToRGBA(a.background),o=r.Util._rgbToHex(e.r,e.g,e.b).replace("#","");t.background={color:o}}for(const e of a.children){await f({element:e,slide:t})}}return e.writeFile("test.pptx"),e}
+import{loadImage as t,cropImage as e}from"./image.js";import*as a from"./svg.js";import{figureToSvg as o}from"./figure-to-svg.js";import{removeTags as i}from"./text.js";import{isBoldWeight as n}from"./rich-text-html.js";import{pxToUnit as r}from"./unit.js";import s from"konva";const d=t=>r({px:t,unit:"in",dpi:100}),c=t=>Math.round(100*(1-t)),h=t=>{const{dx:e,dy:a}=((t,e,a)=>{const o=(a%360+360)%360;if(0===o){return{dx:0,dy:0}}const i=o*Math.PI/180,n=t/2,r=e/2;return{dx:n*Math.cos(i)-r*Math.sin(i)-n,dy:n*Math.sin(i)+r*Math.cos(i)-r}})(t.width,t.height,t.rotation);return{x:d(t.x+e),y:d(t.y+a)}},l=t=>{if(!t){return"000000"}if(t.includes("gradient")){return console.warn("PPTX export: gradient fill is not supported, using black"),"000000"}if(/^[0-9a-fA-F]{6}$/.test(t)){return t.toLowerCase()}let e=s.Util.colorToRGBA(t);return!e&&/^[0-9a-fA-F]{3,6}$/.test(t)&&(e=s.Util.colorToRGBA("#"+t)),e?s.Util._rgbToHex(e.r,e.g,e.b).replace("#","").toLowerCase():t.replace("#","").toLowerCase()||"000000"};let g=null;export function getPptxGen(){return window.PptxGenJS?Promise.resolve(window.PptxGenJS):g||(g=new Promise(t=>{var e=document.createElement("script");e.onload=function(){t(window.PptxGenJS)},e.src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs/dist/pptxgen.bundle.js",document.head.appendChild(e)}),g)}const p=async({element:o,slide:i})=>{let{src:n}=o;if("svg"===o.type&&Object.keys(o.colorsReplace).length){const t=await a.urlToString(n);n=a.replaceColors(t,new Map(Object.entries(o.colorsReplace)))}const r=await t(n),s=r.width*o.cropWidth,g=r.height*o.cropHeight,p=o.width/o.height;let w,u;const f=s/g;"svg"===o.type?(w=s,u=g):p>=f?(w=s,u=s/p):(w=g*p,u=g);let m=await e(n,Object.assign(Object.assign({},o),{cropWidth:w/r.width,cropHeight:u/r.height}));(o.cornerRadius||o.borderSize)&&(m=await(async(e,{width:a,height:o,cornerRadius:i,borderSize:n,borderColor:r})=>{if(!i&&!n){return e}const s=await t(e),d=document.createElement("canvas");d.width=Math.max(1,Math.round(a)),d.height=Math.max(1,Math.round(o));const c=d.getContext("2d"),h=Math.max(0,i),g=d.width,p=d.height,w=(t=!1)=>{const e=Math.min(h,Math.min(g,p)/2);c.beginPath(),c.moveTo(e,0),c.lineTo(g-e,0),c.quadraticCurveTo(g,0,g,e),c.lineTo(g,p-e),c.quadraticCurveTo(g,p,g-e,p),c.lineTo(e,p),c.quadraticCurveTo(0,p,0,p-e),c.lineTo(0,e),c.quadraticCurveTo(0,0,e,0),c.closePath(),t&&n>0&&(c.lineWidth=n,c.strokeStyle="#"+l(r),c.stroke())};return w(!1),c.save(),c.clip(),c.drawImage(s,0,0,g,p),c.restore(),n>0&&w(!0),d.toDataURL("image/png")})(m,{width:o.width,height:o.height,cornerRadius:o.cornerRadius,borderSize:o.borderSize,borderColor:o.borderColor}));const b=Object.assign(Object.assign({},h(o)),{w:d(o.width),h:d(o.height),rotate:o.rotation,flipH:o.flipX,flipV:o.flipY,transparency:c(o.opacity)});if(o.shadowEnabled){const t=Math.hypot(o.shadowOffsetX,o.shadowOffsetY)/2,e=180*Math.atan2(o.shadowOffsetY,o.shadowOffsetX)/Math.PI;b.shadow={type:"outer",blur:o.shadowBlur/2,offset:t,angle:e,color:l(o.shadowColor),opacity:o.shadowOpacity}}await i.addImage(Object.assign({path:m},b))},w=t=>"arrow"===t?"arrow":"triangle"===t?"triangle":"circle"===t?"oval":"square"===t?"diamond":"none",u=t=>{if(t&&t.length){return t.length<=2?"dash":"dashDot"}},f={image:p,svg:p,gif:p,text:async({element:t,slide:e})=>{let a=i(t.text||"");"uppercase"===t.textTransform&&(a=a.toUpperCase());const o=Object.assign(Object.assign(Object.assign(Object.assign({},h(t)),{w:d(t.width),h:d(t.height),fontSize:Math.round(.75*t.fontSize),fontFace:t.fontFamily,color:l(t.fill),align:t.align,bold:n(t.fontWeight),italic:"italic"===t.fontStyle}),"underline"===t.textDecoration?{underline:{style:"sng",color:l(t.fill)}}:{}),{lineSpacingMultiple:t.lineHeight,rotate:t.rotation,fit:"shrink",transparency:c(t.opacity),margin:0});if("middle"===t.verticalAlign?o.valign="middle":"bottom"===t.verticalAlign?o.valign="bottom":o.valign="top",t.letterSpacing&&(o.charSpacing=t.letterSpacing*o.fontSize),t.strokeWidth>0&&(o.outline={size:.75*t.strokeWidth,color:l(t.stroke)}),t.shadowEnabled){const e=.75*Math.hypot(t.shadowOffsetX,t.shadowOffsetY)/2,a=180*Math.atan2(t.shadowOffsetY,t.shadowOffsetX)/Math.PI;o.shadow={type:"outer",blur:.75*t.shadowBlur,offset:e,angle:a,color:l(t.shadowColor),opacity:t.shadowOpacity}}if(t.backgroundEnabled){o.fill={color:l(t.backgroundColor)};const e=t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5);o.rectRadius=d(e);const a=t.backgroundPadding*(t.fontSize*t.lineHeight);o.margin=Math.max(0,Math.round(.75*a))}await e.addText(a,o)},line:async({element:t,slide:e})=>{const a=Object.assign(Object.assign({},h(t)),{w:d(t.width),h:d(t.height),line:{color:l(t.color),width:t.height,beginArrowType:w(t.startHead),endArrowType:w(t.endHead),dashType:u(t.dash),transparency:c(t.opacity)},rotate:t.rotation,transparency:c(t.opacity)});await e.addShape("line",a)},figure:async({element:e,slide:a})=>{const i=o(e),n=await(async(e,a,o)=>{const i="data:image/svg+xml;base64,"+btoa(e),n=await t(i),r=document.createElement("canvas");return r.width=Math.max(1,Math.round(a)),r.height=Math.max(1,Math.round(o)),r.getContext("2d").drawImage(n,0,0,r.width,r.height),r.toDataURL("image/png")})(i,e.width,e.height),r=Object.assign(Object.assign({},h(e)),{w:d(e.width),h:d(e.height),rotate:e.rotation,transparency:c(e.opacity)});await a.addImage(Object.assign({path:n},r))},group:async({element:t,slide:e})=>{for(const a of t.children||[]){await m({element:a,slide:e})}},video:async({element:t,slide:e})=>{const a=Object.assign(Object.assign({},h(t)),{w:d(t.width),h:d(t.height),rotate:t.rotation});await e.addMedia(Object.assign({type:"video",path:t.src},a))}},m=async({element:t,slide:e})=>{if(!t.visible||!t.showInExport){return}const a=f[t.type];a?await a({element:t,slide:e}):console.warn(`PPTX export doesn't support ${t.type} type`)};export async function jsonToPPTX({json:t}){const e=new(await getPptxGen());e.defineLayout({name:"CUSTOM",width:d(t.width),height:d(t.height)}),e.layout="CUSTOM";for(const a of t.pages){const t=e.addSlide();if(/\.(jpg|jpeg|png|gif)$/i.test(a.background)||a.background.startsWith("data:image")||a.background.startsWith("http")){await t.addImage({path:a.background,x:0,y:0,w:e.width,h:e.height,sizing:{type:"contain"}})}else{const e=s.Util.colorToRGBA(a.background),o=s.Util._rgbToHex(e.r,e.g,e.b).replace("#","");t.background={color:o}}for(const e of a.children){await m({element:e,slide:t})}}return e.writeFile("test.pptx"),e}

package/utils/validate-key.js

@@ -1 +1 @@
-import*as e from"mobx";import{getAPI as o}from"./api.js";import{setRemoveBackgroundEnabled as t}from"./flags.js";const n=e.observable({value:!1}),a=e.observable({value:"v1"});export const ___=()=>a.value;const i=e.observable({value:0});export const ____=()=>i.value;export const isCreditVisible=()=>n.value;const r=e.action(()=>{n.value=!0});let s="";export const getKey=()=>s||"";export const setKey=e=>{s=e||""};let l="undefined"!=typeof window?window.location.origin:"";const c="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Headless")>-1,d="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Electron")>-1;"file://"===l&&c&&(l="headless"),"file://"===l&&d&&(l="electron");const p=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${l}" here: https://polotno.com/cabinet`;let u=fetch;export const __=e=>{u=e};export async function isKeyPaid(n){for(let s=0;s<5;s++){try{const r=await u(o()+"/validate-key",{method:"POST",body:JSON.stringify({key:n,site:location.host,skdVersion:"4.1.3"})});if(e.runInAction(()=>{a.value=r.headers.get("x-api-version")||""}),!n){return console.error("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),e.runInAction(()=>{i.value=1}),!1}if(200!==r.status){await new Promise(e=>setTimeout(e,3e3));continue}const s=await r.json();return s.is_valid||(console.error("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),e.runInAction(()=>{i.value=1})),s.is_paid||(console.log("%cPolotno Free Version. For development usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),e.runInAction(()=>{0===i.value&&(i.value=2)})),s.is_domain_valid||console.log(p,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),t(s.remove_background_enabled),s.is_paid||!1}catch(r){await new Promise(e=>setTimeout(e,3e3))}}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}export async function validateKey(e){await isKeyPaid(s)&&!e||r()}
+import*as e from"mobx";import{getAPI as o}from"./api.js";import{setRemoveBackgroundEnabled as t}from"./flags.js";const n=e.observable({value:!1}),a=e.observable({value:"v1"});export const ___=()=>a.value;const i=e.observable({value:0});export const ____=()=>i.value;export const isCreditVisible=()=>n.value;const r=e.action(()=>{n.value=!0});let s="";export const getKey=()=>s||"";export const setKey=e=>{s=e||""};let l="undefined"!=typeof window?window.location.origin:"";const c="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Headless")>-1,d="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Electron")>-1;"file://"===l&&c&&(l="headless"),"file://"===l&&d&&(l="electron");const p=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${l}" here: https://polotno.com/cabinet`;let u=fetch;export const __=e=>{u=e};export async function isKeyPaid(n){for(let s=0;s<5;s++){try{const r=await u(o()+"/validate-key",{method:"POST",body:JSON.stringify({key:n,site:location.host,skdVersion:"4.2.1"})});if(e.runInAction(()=>{a.value=r.headers.get("x-api-version")||""}),!n){return console.error("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),e.runInAction(()=>{i.value=1}),!1}if(200!==r.status){await new Promise(e=>setTimeout(e,3e3));continue}const s=await r.json();return s.is_valid||(console.error("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),e.runInAction(()=>{i.value=1})),s.is_paid||(console.log("%cPolotno Free Version. For development usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),e.runInAction(()=>{0===i.value&&(i.value=2)})),s.is_domain_valid||console.log(p,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),t(s.remove_background_enabled),s.is_paid||!1}catch(r){await new Promise(e=>setTimeout(e,3e3))}}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}export async function validateKey(e){await isKeyPaid(s)&&!e||r()}