@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
131 lines • 8.96 kB
JavaScript
;(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[6430],{16430:(t,e,n)=>{n.r(e),n.d(e,{TextEditorPlugin:()=>d});var i=n(56666),o=n(21293),r=n(45607),s=n(43824),c=n(70235),a=n(54774),l=n.n(a);class d extends o.oi{constructor(){super(),(0,i.Z)(this,"setHeading",(t=>{this.editors.forEach((e=>{e.chain().setHeading({level:t}).run()}))})),(0,i.Z)(this,"onchangeFontFamily",(t=>{const e=t.target.value,n=this.fontFamilies.find((t=>t.name===e));n?(this.editors.forEach((t=>{const e=t.view.state.selection;e.from===e.to?t.chain().selectAll().setFontFamily(n).run():t.chain().setFontFamily(n).run()})),this.fontFamily=e):console.error("cant set font family, font family not founded..")})),(0,i.Z)(this,"onChangeFontSize",(t=>{const e=t.target.device;this.device=e;const n=t.target.value;"phone"===e?r.Z.execCommand("breakpoints",(t=>{const e=t.props.breakpoints?.sm||{};l()(e,{style:{fontSize:n+"px"}});return{sm:e}})):this.editors.forEach((t=>{const e=t.view.state.selection;e.from===e.to?t.chain().selectAll().setFontSize(n).run():t.chain().setFontSize(n).run()})),this.fontSize=n})),(0,i.Z)(this,"onChangeLineHeight",(t=>{const e=parseFloat(t.target.value);this.editors.forEach((t=>{const n=t.view.state.selection;n.from===n.to?t.chain().selectAll().setLineHeight(e).run():t.chain().setLineHeight(e).run()})),this.lineHeight=e})),(0,i.Z)(this,"onChangeletterSpace",(t=>{const e=t.target.value+"px";this.editors.forEach((t=>{const n=t.view.state.selection;n.from===n.to?t.chain().selectAll().setLetterSpacing(e).run():t.chain().setLetterSpacing(e).run()})),this.letterSpacing=e})),(0,i.Z)(this,"onChangeImage",(t=>{})),(0,i.Z)(this,"onFilteredFonts",(t=>{const e=t.target.value;this.filteredFonts=this.fontFamilies.filter((t=>t.name.toLowerCase().includes(e.toLowerCase())))})),(0,i.Z)(this,"onChangeFontColor",(t=>{const e=t.target.value;this.editors.forEach((t=>{const n=t.view.state.selection;n.from===n.to?t.chain().selectAll().setColor(e).run():t.chain().setColor(e).run()})),this.fontColor=e})),this.editors=[],this.hasTextComponent=!0,this.filteredFonts=[],this.fontFamilies=[],this.onConnect=this.onConnect.bind(this),this.THEMES=[{type:"paragraph",onClick:()=>{this.editors.forEach((t=>{t.chain().setParagraph().run()}))}},{type:"h1",onClick:()=>this.setHeading(1)},{type:"h2",onClick:()=>this.setHeading(2)},{type:"h3",onClick:()=>this.setHeading(3)},{type:"h4",onClick:()=>this.setHeading(4)},{type:"h5",onClick:()=>this.setHeading(5)},{type:"h5",onClick:()=>this.setHeading(5)}]}onConnect(){setTimeout((()=>{this.editors=[];const t=r.Z.getSelectedComponent({find:"text"});if(this.hasTextComponent=t.length>0,t.forEach((t=>{"text"===t.type&&this.editors.push(t.editor)})),this.editors.length>0){const e=this.editors[0];if(e){const n={...e.getAttributes("paragraph"),...e.getAttributes("heading")};"phone"===this.device?this.fontSize=parseInt(t[0].props?.breakpoints?.sm?.style?.fontSize):this.fontSize=parseInt(e.getAttributes("textStyle").fontSize)||16,this.fontColor=e.getAttributes("textStyle").color||"#000",this.fontFamily=e.getAttributes("textStyle").fontFamily?.split(",")[0].replace(/['"]+/g,"")||"Arial",n.lineHeight&&(this.lineHeight=parseFloat(n.lineHeight)),n.letterSpacing&&(this.letterSpacing=parseInt(n.letterSpacing)||1),this.themeType=e.isActive("heading",{level:1})?"h1":e.isActive("heading",{level:2})?"h2":e.isActive("heading",{level:3})?"h3":e.isActive("heading",{level:4})?"h4":e.isActive("heading",{level:5})?"h5":e.isActive("heading",{level:6})?"h6":"paragraph"}}}),0)}connectedCallback(){super.connectedCallback(),r.Z.on("select",this.onConnect),r.Z.on("update",this.onConnect),this.onConnect(),(0,s.Pn)().then((t=>{this.filteredFonts=this.fontFamilies=t}))}disconnectedCallback(){super.disconnectedCallback(),r.Z.off("select",this.onConnect),r.Z.off("update",this.onConnect)}render(){const t=o.dy`
<cdtr-editor-container>
<cdtr-title style="color:var(--micro-info-color)">
<i>
<lang-text
whiteSpace="break-spaces"
text="typography_micro_copy"
></lang-text
></i>
</cdtr-title>
<cdtr-row>
<cdtr-col>
<cdtr-title>
<lang-text text="type"></lang-text>
</cdtr-title>
</cdtr-col>
<cdtr-col>
<cdtr-dropdown style="width:100%">
<cdtr-dropdown-button style="width:100%" slot="trigger"
>${this.themeType}</cdtr-dropdown-button
>
<div slot="content">
${this.THEMES.map((t=>o.dy`<cdtr-dropdown-item
.value=${t.type}
.focused=${t.type===this.themeType}
.selected=${t.type===this.fontFamily}
@click=${t.onClick}
>${t.type}</cdtr-dropdown-item
>`))}
</div>
</cdtr-dropdown>
</cdtr-col>
</cdtr-row>
</cdtr-editor-container>
<cdtr-editor-container>
<cdtr-row mt="1" justify="space-between" alignItems="center">
<cdtr-col
><cdtr-title style="display:block" class="align-lang"
><lang-text text="color"></lang-text></cdtr-title
></cdtr-col>
<cdtr-col sm="1">
<color-playground
type="text"
.value=${this.fontColor}
@change=${this.onChangeFontColor}
></color-playground>
</cdtr-col>
</cdtr-row>
</cdtr-editor-container>
<cdtr-editor-container>
<cdtr-row alignItems="center" justify="space-between">
<cdtr-title style="display:block" class="align-lang"
><lang-text text="fontFamily"></lang-text
></cdtr-title>
<cdtr-col sm="12">
<cdtr-row alignItems="center" justify="flex-end">
<cdtr-dropdown
style="width:100%"
.value="${this.fontFamily}"
@change=${this.onchangeFontFamily}
>
<cdtr-dropdown-button
minWidth=${100}
class="dropdown-button"
slot="trigger"
><lang-text text="${this.fontFamily}"></lang-text>
</cdtr-dropdown-button>
<div slot="content">
<cdtr-input
.placeholder="${c.h.get("lang","search")}.."
@input=${this.onFilteredFonts}
type="search"
></cdtr-input>
${this.filteredFonts.map((t=>o.dy`<cdtr-dropdown-item
.focused=${t.name===this.fontFamily}
.selected=${t.name===this.fontFamily}
value="${t.name}"
><lang-text
.style="font-family:${t.cssRule};"
text="${t.name}"
></lang-text>
</cdtr-dropdown-item>`))}
</div>
</cdtr-dropdown>
</cdtr-row>
</cdtr-col>
</cdtr-row>
</cdtr-editor-container>
<cdtr-editor-container>
<cdtr-row mt="1">
<cdtr-title><lang-text text="lineHeight"></lang-text></cdtr-title>
</cdtr-row>
<cdtr-row>
<cdtr-range-input
.value=${this.lineHeight}
@input=${this.onChangeLineHeight}
max="5"
min="0.4"
step="0.1"
></cdtr-range-input>
</cdtr-row>
</cdtr-editor-container>
<cdtr-editor-container>
<cdtr-row mt="1">
<cdtr-title><lang-text text="letterSpacing"></lang-text></cdtr-title>
</cdtr-row>
<cdtr-row>
<cdtr-range-input
.value=${parseInt(this.letterSpacing)}
@input=${this.onChangeletterSpace}
unit="px"
max="20"
></cdtr-range-input>
</cdtr-row>
</cdtr-editor-container>
<cdtr-editor-container>
<cdtr-range-device-editor
text="fontSize"
.value=${this.fontSize}
@input=${this.onChangeFontSize}
@device=${t=>{this.device=t.target.device,this.onConnect()}}
unit="px"
max="100"
min="8"
></cdtr-range-device-editor>
</cdtr-editor-container>
`;return this.hasTextComponent?o.dy`${t} `:null}}(0,i.Z)(d,"properties",{themeType:{type:String},fontFamily:{type:String},fontSize:{type:Number},fontColor:{type:String},lineHeight:{type:Number},letterSpacing:{type:Number},fontFamilies:{type:Array},filteredFonts:{type:Array},hasTextComponent:{type:Boolean},accordion:{type:Boolean},isOpen:{type:Boolean},device:{type:String}}),(0,i.Z)(d,"styles",o.iv`
.dropdown-button {
min-width: 100px;
}
`),customElements.define("cdtr-text-editor-plugin",d)}}]);