@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
440 lines (405 loc) • 36.9 kB
JavaScript
/*! For license information please see 7988.creaditor.bundle.js.LICENSE.txt */
;(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7988,2340],{87988:(t,e,i)=>{i.r(e),i.d(e,{default:()=>d});const n=t=>{{const{component:e,commands:i,helpers:n}=t,s=e.tiptap,r=s.state.selection.$anchor.node().attrs,o=s.isActive("heading",{level:1})?"h1":s.isActive("heading",{level:2})?"h2":s.isActive("heading",{level:3})?"h3":s.isActive("heading",{level:4})?"h4":s.isActive("heading",{level:5})?"h5":s.isActive("heading",{level:6})?"h6":"paragraph";return{select:t=>{let{changeTab:e,tab:i}=t},tabs:t=>{const e=[{text:"design",selected:!0},{text:"settings"}];return e.forEach((e=>e.selected=e.selected=e.text===t)),e},layout:t=>{let{tab:i,changeTab:n,tabs:a}=t;const l=[{type:"info",text:"text_micro_copy",active:()=>"design"===i.text},{type:"dropdown",active:()=>"design"===i.text,title:"type",value:o,items:[{value:"H1"},{value:"H2"},{value:"H3"},{value:"H4"},{value:"H5"},{value:"H6"},{value:"paragraph"}],onChange:t=>{const e=t.target.value;switch(e){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":s.chain().setHeading({level:parseInt(e.slice(1))}).run();break;case"paragraph":s.chain().setParagraph().run()}}},{type:"slider",title:"fontSize",min:8,step:2,max:74,value:parseInt(s.getAttributes("textStyle").fontSize||"16px"),active:()=>"design"===i.text,onInput:t=>{const i=t.target.value,n=e.tiptap,s=n.view.state.selection;s.from===s.to?n.chain().selectAll().setFontSize(i).run():n.chain().setFontSize(i).run()}},{type:"divider"},{type:"slider",title:"lineHeight",min:1,max:3,step:.1,value:parseFloat(r.lineHeight||1),active:()=>"design"===i.text,onInput:t=>{const i=t.target.value,n=e.tiptap,s=n.view.state.selection;s.from===s.to?n.chain().selectAll().setLineHeight(i).run():n.chain().setLineHeight(i).run()}},{type:"divider"},{type:"slider",title:"letterSpacing",min:1,max:10,step:1,value:parseFloat(r.letterSpacing)||1,active:()=>"design"===i.text,onInput:t=>{const i=t.target.value,n=e.tiptap,s=n.view.state.selection;i<=1?s.from===s.to?n.chain().selectAll().setLetterSpacing("normal").run():n.chain().setLetterSpacing("normal").run():s.from===s.to?n.chain().selectAll().setLetterSpacing(i+"px").run():n.chain().setLetterSpacing(i+"px").run()}},{type:"divider"},{type:"colorpicker",title:"font_color",alpha:!1,value:s.getAttributes("textStyle").color||"#0000",onChange:t=>{const i=t.target.value,n=e.tiptap,s=n.view.state.selection;if(s.from===s.to){const{state:t,view:e}=n,r=t.tr,{from:o,to:a}=s.from===s.to?{from:0,to:t.doc.content.size}:{from:s.from,to:s.to};t.doc.nodesBetween(o,a,((e,n)=>{if(e.isText){t.doc.resolve(n);if(!e.marks.some((t=>"link"===t.type.name))){const s=n,o=n+e.nodeSize;r.addMark(s,o,t.schema.marks.textStyle.create({color:i}))}}})),e.dispatch(r)}else n.chain().setColor(i).run()}},{type:"divider"}];return l}}}};var s=i(46245);const r=t=>{let{helpers:e,tiptap:i,composeId:n,template:r}=t;return{set:(t,o,a)=>{switch(o){case"style":return"object"==typeof a&&(t[o]=(0,s.Z)(t[o],a),e.mergeDiff(r,{style:t[o]})),!0;case"text":t[o]=a;const l=i.getJSON();return a&&"object"==typeof a&&JSON.stringify(l)!==JSON.stringify(a.childNodes)&&(a&&a.focusedElement&&a.focusedElement===n?(i.chain().focus().setContent(a.childNodes).run(),a.to&&a.from&&i.commands.setTextSelection({from:a.from,to:a.to})):i.chain().setContent(a.childNodes).run()),delete t?.text?.markdown,!0}}}};var o=i(57701),a=i.n(o),l=i(70235);i(32340);const c=[],d=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const e="text";return{name:e,create:i=>{const{createElement:s,compose:o,helpers:d}=i,{mergeDiff:p}=d,h=document.createElement("div");p(h,{style:o.props.style});const u=l.h.get("config","editor","configure","editorProps","fonts");let g=l.h.get("config","target");"string"==typeof g&&(g=document.querySelector(g)),g||(g=document.body);const m=a()({element:h,container:g||document.body,editable:!0,offsetTop:40,onClickMagic:t=>{let{insertContent:e,getJSON:i,getHTML:n,getText:s,selectAll:r,insertContentHtml:o}=t;const a=l.h.get("injectEditor"),c=document.createElement("cdtr-text-prompt-editor");a(c),c.context=s(),c.addEventListener("text-generation-start",(t=>{r()})),c.addEventListener("text-generation-chunk",(t=>{e(t.detail.chunk)})),c.addEventListener("text-generation-complete",(t=>{r(),o(t.detail.text)})),c.addEventListener("text-generation-error",(t=>{console.error("Text generation error:",t.detail.error)}))},content:"string"==typeof o.props.text.markdown?o.props.text.markdown:o.props.text.childNodes,defaultDirection:"rtl",onFocus:()=>{c.length>0&&(c[c.length-1].hideEditor(),c.pop()),c.push(m)},onUpdate:t=>{let{editor:e,transaction:i}=t;if(0===i.steps.length)return;const n=i.curSelection.from,s=i.curSelection.to,r={childNodes:e.getJSON(),from:n,to:s,focusedElement:o.id};f.commands.execCommand("text",r)},ignoresBlurByQuerySelectors:[".ignore-events"],builder:[{type:"fontFamily",fonts:u||[],useCloud:!0},{type:"fontSize",sizes:t.fontSize||[8,10,12,14,16,18,20,22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,56,58,60,62,64,66,68,70,72,74]},{type:"horizonRule"},{type:"clearFormat"},{type:"bold"},{type:"strike"},{type:"italic"},{type:"underline"},{type:"table"},{type:"emoji"},{type:"unLink"},{type:"link"},{type:"numbered"},{type:"bullet"},{type:"backcolor"},{type:"fontColor"},{type:"direction"},{type:"justify"},{type:"right"},{type:"center"},{type:"left"},{type:"image"},{type:"mergeTags"},{type:"magic"}]}),f=s({name:e,id:o.id,template:h,defaultProps:{text:{},style:{}},draggable:{group:"element"},droppable:{group:"element"},handleBar:!0,validator:r({template:h,helpers:d,tiptap:m,composeId:o.id}),schema:o.schema,onSelect:t=>{h.classList.add(t)},onDeselect:t=>{h.classList.remove(t)},elementProps:o,remove:()=>{h.remove()},createEditor:n});return o.props.text.markdown&&m.chain().insertContent(" ").run(),f.addProp("tiptap",m),f}}}},32340:(t,e,i)=>{i.r(e),i.d(e,{TextPromptEditor:()=>ft});var n=i(56666),s=i(76828);const r=globalThis,o=r.ShadowRoot&&(void 0===r.ShadyCSS||r.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,a=Symbol(),l=new WeakMap;class c{constructor(t,e,i){if(this._$cssResult$=!0,i!==a)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(o&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=l.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&l.set(e,t))}return t}toString(){return this.cssText}}const d=o?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new c("string"==typeof t?t:t+"",void 0,a))(e)})(t):t,{is:p,defineProperty:h,getOwnPropertyDescriptor:u,getOwnPropertyNames:g,getOwnPropertySymbols:m,getPrototypeOf:f}=Object,y=globalThis,b=y.trustedTypes,v=b?b.emptyScript:"",x=y.reactiveElementPolyfillSupport,$=(t,e)=>t,_={toAttribute(t,e){switch(e){case Boolean:t=t?v:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},A=(t,e)=>!p(t,e),E={attribute:!0,type:String,converter:_,reflect:!1,useDefault:!1,hasChanged:A};Symbol.metadata??=Symbol("metadata"),y.litPropertyMetadata??=new WeakMap;class w extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=E){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),n=this.getPropertyDescriptor(t,i,e);void 0!==n&&h(this.prototype,t,n)}}static getPropertyDescriptor(t,e,i){const{get:n,set:s}=u(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:n,set(e){const r=n?.call(this);s?.call(this,e),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??E}static _$Ei(){if(this.hasOwnProperty($("elementProperties")))return;const t=f(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty($("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty($("properties"))){const t=this.properties,e=[...g(t),...m(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(d(t))}else void 0!==t&&e.push(d(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{if(o)t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const i of e){const e=document.createElement("style"),n=r.litNonce;void 0!==n&&e.setAttribute("nonce",n),e.textContent=i.cssText,t.appendChild(e)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()))}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){const i=this.constructor.elementProperties.get(t),n=this.constructor._$Eu(t,i);if(void 0!==n&&!0===i.reflect){const s=(void 0!==i.converter?.toAttribute?i.converter:_).toAttribute(e,i.type);this._$Em=t,null==s?this.removeAttribute(n):this.setAttribute(n,s),this._$Em=null}}_$AK(t,e){const i=this.constructor,n=i._$Eh.get(t);if(void 0!==n&&this._$Em!==n){const t=i.getPropertyOptions(n),s="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:_;this._$Em=n;const r=s.fromAttribute(e,t.type);this[n]=r??this._$Ej?.get(n)??r,this._$Em=null}}requestUpdate(t,e,i){if(void 0!==t){const n=this.constructor,s=this[t];if(i??=n.getPropertyOptions(t),!((i.hasChanged??A)(s,e)||i.useDefault&&i.reflect&&s===this._$Ej?.get(t)&&!this.hasAttribute(n._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:i,reflect:n,wrapped:s},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??e??this[t]),!0!==s||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(e=void 0),this._$AL.set(t,e)),!0===n&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,n=this[e];!0!==t||this._$AL.has(e)||void 0===n||this.C(e,void 0,i,n)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM()}updated(t){}firstUpdated(t){}}w.elementStyles=[],w.shadowRootOptions={mode:"open"},w[$("elementProperties")]=new Map,w[$("finalized")]=new Map,x?.({ReactiveElement:w}),(y.reactiveElementVersions??=[]).push("2.1.1");const S=globalThis,C=S.trustedTypes,T=C?C.createPolicy("lit-html",{createHTML:t=>t}):void 0,k="$lit$",P=`lit$${Math.random().toFixed(9).slice(2)}$`,N="?"+P,H=`<${N}>`,O=document,U=()=>O.createComment(""),M=t=>null===t||"object"!=typeof t&&"function"!=typeof t,L=Array.isArray,I=t=>L(t)||"function"==typeof t?.[Symbol.iterator],R="[ \t\n\f\r]",z=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,D=/-->/g,B=/>/g,j=RegExp(`>|${R}(?:([^\\s"'>=/]+)(${R}*=${R}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),F=/'/g,W=/"/g,J=/^(?:script|style|textarea|title)$/i,Y=t=>(e,...i)=>({_$litType$:t,strings:e,values:i}),q=Y(1),V=(Y(2),Y(3),Symbol.for("lit-noChange")),Z=Symbol.for("lit-nothing"),G=new WeakMap,K=O.createTreeWalker(O,129);function Q(t,e){if(!L(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==T?T.createHTML(e):e}const X=(t,e)=>{const i=t.length-1,n=[];let s,r=2===e?"<svg>":3===e?"<math>":"",o=z;for(let e=0;e<i;e++){const i=t[e];let a,l,c=-1,d=0;for(;d<i.length&&(o.lastIndex=d,l=o.exec(i),null!==l);)d=o.lastIndex,o===z?"!--"===l[1]?o=D:void 0!==l[1]?o=B:void 0!==l[2]?(J.test(l[2])&&(s=RegExp("</"+l[2],"g")),o=j):void 0!==l[3]&&(o=j):o===j?">"===l[0]?(o=s??z,c=-1):void 0===l[1]?c=-2:(c=o.lastIndex-l[2].length,a=l[1],o=void 0===l[3]?j:'"'===l[3]?W:F):o===W||o===F?o=j:o===D||o===B?o=z:(o=j,s=void 0);const p=o===j&&t[e+1].startsWith("/>")?" ":"";r+=o===z?i+H:c>=0?(n.push(a),i.slice(0,c)+k+i.slice(c)+P+p):i+P+(-2===c?e:p)}return[Q(t,r+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),n]};class tt{constructor({strings:t,_$litType$:e},i){let n;this.parts=[];let s=0,r=0;const o=t.length-1,a=this.parts,[l,c]=X(t,e);if(this.el=tt.createElement(l,i),K.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(n=K.nextNode())&&a.length<o;){if(1===n.nodeType){if(n.hasAttributes())for(const t of n.getAttributeNames())if(t.endsWith(k)){const e=c[r++],i=n.getAttribute(t).split(P),o=/([.?@])?(.*)/.exec(e);a.push({type:1,index:s,name:o[2],strings:i,ctor:"."===o[1]?rt:"?"===o[1]?ot:"@"===o[1]?at:st}),n.removeAttribute(t)}else t.startsWith(P)&&(a.push({type:6,index:s}),n.removeAttribute(t));if(J.test(n.tagName)){const t=n.textContent.split(P),e=t.length-1;if(e>0){n.textContent=C?C.emptyScript:"";for(let i=0;i<e;i++)n.append(t[i],U()),K.nextNode(),a.push({type:2,index:++s});n.append(t[e],U())}}}else if(8===n.nodeType)if(n.data===N)a.push({type:2,index:s});else{let t=-1;for(;-1!==(t=n.data.indexOf(P,t+1));)a.push({type:7,index:s}),t+=P.length-1}s++}}static createElement(t,e){const i=O.createElement("template");return i.innerHTML=t,i}}function et(t,e,i=t,n){if(e===V)return e;let s=void 0!==n?i._$Co?.[n]:i._$Cl;const r=M(e)?void 0:e._$litDirective$;return s?.constructor!==r&&(s?._$AO?.(!1),void 0===r?s=void 0:(s=new r(t),s._$AT(t,i,n)),void 0!==n?(i._$Co??=[])[n]=s:i._$Cl=s),void 0!==s&&(e=et(t,s._$AS(t,e.values),s,n)),e}class it{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:i}=this._$AD,n=(t?.creationScope??O).importNode(e,!0);K.currentNode=n;let s=K.nextNode(),r=0,o=0,a=i[0];for(;void 0!==a;){if(r===a.index){let e;2===a.type?e=new nt(s,s.nextSibling,this,t):1===a.type?e=new a.ctor(s,a.name,a.strings,this,t):6===a.type&&(e=new lt(s,this,t)),this._$AV.push(e),a=i[++o]}r!==a?.index&&(s=K.nextNode(),r++)}return K.currentNode=O,n}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class nt{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,i,n){this.type=2,this._$AH=Z,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=n,this._$Cv=n?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=et(this,t,e),M(t)?t===Z||null==t||""===t?(this._$AH!==Z&&this._$AR(),this._$AH=Z):t!==this._$AH&&t!==V&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):I(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==Z&&M(this._$AH)?this._$AA.nextSibling.data=t:this.T(O.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:i}=t,n="number"==typeof i?this._$AC(t):(void 0===i.el&&(i.el=tt.createElement(Q(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===n)this._$AH.p(e);else{const t=new it(n,this),i=t.u(this.options);t.p(e),this.T(i),this._$AH=t}}_$AC(t){let e=G.get(t.strings);return void 0===e&&G.set(t.strings,e=new tt(t)),e}k(t){L(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,n=0;for(const s of t)n===e.length?e.push(i=new nt(this.O(U()),this.O(U()),this,this.options)):i=e[n],i._$AI(s),n++;n<e.length&&(this._$AR(i&&i._$AB.nextSibling,n),e.length=n)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class st{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,n,s){this.type=1,this._$AH=Z,this._$AN=void 0,this.element=t,this.name=e,this._$AM=n,this.options=s,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=Z}_$AI(t,e=this,i,n){const s=this.strings;let r=!1;if(void 0===s)t=et(this,t,e,0),r=!M(t)||t!==this._$AH&&t!==V,r&&(this._$AH=t);else{const n=t;let o,a;for(t=s[0],o=0;o<s.length-1;o++)a=et(this,n[i+o],e,o),a===V&&(a=this._$AH[o]),r||=!M(a)||a!==this._$AH[o],a===Z?t=Z:t!==Z&&(t+=(a??"")+s[o+1]),this._$AH[o]=a}r&&!n&&this.j(t)}j(t){t===Z?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class rt extends st{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===Z?void 0:t}}class ot extends st{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==Z)}}class at extends st{constructor(t,e,i,n,s){super(t,e,i,n,s),this.type=5}_$AI(t,e=this){if((t=et(this,t,e,0)??Z)===V)return;const i=this._$AH,n=t===Z&&i!==Z||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,s=t!==Z&&(i===Z||n);n&&this.element.removeEventListener(this.name,this,i),s&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class lt{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){et(this,t)}}const ct=S.litHtmlPolyfillSupport;ct?.(tt,nt),(S.litHtmlVersions??=[]).push("3.3.1");const dt=globalThis;class pt extends w{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{const n=i?.renderBefore??e;let s=n._$litPart$;if(void 0===s){const t=i?.renderBefore??null;n._$litPart$=s=new nt(e.insertBefore(U(),t),t,void 0,i??{})}return s._$AI(t),s})(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return V}}pt._$litElement$=!0,pt.finalized=!0,dt.litElementHydrateSupport?.({LitElement:pt});const ht=dt.litElementPolyfillSupport;ht?.({LitElement:pt});(dt.litElementVersions??=[]).push("4.2.1");var ut,gt,mt;let ft=(ut=(t=>(e,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(t,e)})):customElements.define(t,e)})("cdtr-text-prompt-editor"),ut((mt=class extends pt{constructor(){super(),this.prompt=localStorage.getItem("textPromptEditor_prompt")||"",this.generatedText="",this.isLoading=!1,this.context="",this.businessType=localStorage.getItem("textPromptEditor_businessType")||"",this.businessName=localStorage.getItem("textPromptEditor_businessName")||"",this.includeContext="true"===localStorage.getItem("textPromptEditor_includeContext")||!1,this.url=localStorage.getItem("textPromptEditor_url")||"",this.detectCurrentElementType()}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.detectCurrentElementType()}),100)}detectCurrentElementType(){try{const t=window.getSelection();if(t&&t.rangeCount>0){const e=t.getRangeAt(0).commonAncestorContainer;let i=e.nodeType===Node.TEXT_NODE?e.parentElement:e;for(;i&&i!==document.body;){if(i.tagName&&/^h[1-6]$/i.test(i.tagName)){const t=i.parentElement,e=Array.from(t?.children||[]),n=e.some((t=>t!==i&&/^h[1-6]$/i.test(t.tagName))),s=e.some((t=>t!==i&&/^p$|^div$/i.test(t.tagName)));return!s||n&&!s?(this.contentType="title",void console.log("TextPromptEditor: Detected standalone heading from DOM")):(this.contentType="paragraph",void console.log("TextPromptEditor: Detected heading within paragraph structure"))}this.contentType="paragraph",i=i.parentElement}}this.contentType||(this.contentType="paragraph",console.log("TextPromptEditor: Defaulting to paragraph"))}catch(t){console.warn("Error detecting current element type:",t),this.contentType||(this.contentType="paragraph")}}handleIncludeContextChange(t){this.includeContext=!t.target.checked,localStorage.setItem("textPromptEditor_includeContext",this.includeContext)}handleContentTypeChange(t){this.contentType=t,this.dispatchEvent(new CustomEvent("content-type-changed",{detail:{contentType:this.contentType},bubbles:!0,composed:!0}))}handlePromptChange(t){this.prompt=t.target.value,localStorage.setItem("textPromptEditor_prompt",this.prompt);["כתוב כותרת","כתוב תמונה","כתבי כותרת","write heading"].some((t=>this.prompt.startsWith(t)))&&this.handleContentTypeChange("title")}handleBusinessTypeChange(t){this.businessType=t.target.value,localStorage.setItem("textPromptEditor_businessType",this.businessType)}handleBusinessNameChange(t){this.businessName=t.target.value,localStorage.setItem("textPromptEditor_businessName",this.businessName)}handleUrlChange(t){this.url=t.target.value,localStorage.setItem("textPromptEditor_url",this.url)}async handleGenerate(){this.isLoading=!0,this.generatedText="";try{if("title"===this.contentType){Array.from(document.querySelectorAll(".text-component")).map((t=>t.textContent)).join("\n")}this.context.length>1500&&(this.context=this.context.slice(0,1500));const t=s.W7.agent_url,e=await fetch(t+"prompt/text",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({prompt:this.prompt,context:this.includeContext?this.context:"",businessType:this.businessType,businessName:this.businessName,contentType:this.contentType,url:this.url,options:{maxTokens:1e3,temperature:0,model:"gpt-3.5-turbo"}})});if(!e.ok)throw new Error("Failed to generate text");const i=e.body.getReader(),n=new TextDecoder;let r="";for(;;){const{done:t,value:e}=await i.read();if(t){this.dispatchEvent(new CustomEvent("text-generation-complete",{detail:{text:this.generatedText},bubbles:!0,composed:!0}));break}r+=n.decode(e,{stream:!0});const s=r.split("\n\n");for(let t=0;t<s.length-1;t++){const e=s[t];if(e.startsWith("data: "))try{const t=e.slice(6),i=JSON.parse(t);if("start"===i.metadata?.type){this.generatedText="",this.dispatchEvent(new CustomEvent("text-generation-start",{detail:{model:i.metadata.model},bubbles:!0,composed:!0}));continue}i.text&&(this.generatedText+=i.text,this.dispatchEvent(new CustomEvent("text-generation-chunk",{detail:{chunk:i.text,fullText:this.generatedText},bubbles:!0,composed:!0}))),"complete"===i.status&&(this.generatedText=this.generatedText.replace(/^"|"$/g,""),this.dispatchEvent(new CustomEvent("text-generation-complete",{detail:{text:this.generatedText},bubbles:!0,composed:!0})))}catch(t){console.error("Error parsing JSON:",t)}}r=s[s.length-1]}}catch(t){console.error("Error generating text:",t),this.dispatchEvent(new CustomEvent("text-generation-error",{detail:{error:t.message},bubbles:!0,composed:!0}))}finally{this.isLoading=!1}}render(){const t=this.contentType;return q`
<cdtr-editor-container>
<div class="editor-container">
<div class="prompt-section">
<div class="prompt-header">
<div class="prompt-icon">✍️</div>
<label class="prompt-label" for="prompt-input">
<lang-text text="prompt_editor_title"></lang-text>
</label>
</div>
<cdtr-input
id="business-name-input"
label="Business Name"
.value=${this.businessName}
@input=${this.handleBusinessNameChange}
placeholder="Enter_your_business_name"
></cdtr-input>
<cdtr-input
id="business-type-input"
label="Business Type"
.value=${this.businessType}
@input=${this.handleBusinessTypeChange}
placeholder="Enter_your_business_type"
></cdtr-input>
<cdtr-input
id="url-input"
label="URL"
.value=${this.url}
@input=${this.handleUrlChange}
placeholder="Enter_the_URL_of_the_page"
></cdtr-input>
<cdtr-textarea
autofocus=${!0}
id="prompt-input"
class="prompt-input"
placeholder=""
.value=${this.prompt}
@input=${this.handlePromptChange}
></cdtr-textarea>
<cdtr-dropdown .value=${t}>
<cdtr-dropdown-button slot="trigger">
<lang-text text="${t||"paragraph"}"></lang-text>
</cdtr-dropdown-button>
<div slot="content">
<cdtr-dropdown-item
@click=${()=>this.handleContentTypeChange("title")}
>
<lang-text text="title"></lang-text>
</cdtr-dropdown-item>
<cdtr-dropdown-item
@click=${()=>this.handleContentTypeChange("paragraph")}
>
<lang-text text="paragraph"></lang-text>
</cdtr-dropdown-item>
</div>
</cdtr-dropdown>
<cdtr-row justify="space-between">
<cdtr-col>
<span class="prompt-context">
<lang-text text="prompt_editor_context"></lang-text>
</span>
</cdtr-col>
<cdtr-col sm="2">
<cdtr-checkbox
.checked=${this.includeContext}
@change=${this.handleIncludeContextChange}
></cdtr-checkbox>
</cdtr-col>
</cdtr-row>
<paper-button
fullWidth
class="generate-button"
?disabled=${this.isLoading||!this.prompt}
@click=${this.handleGenerate}
>
${this.isLoading?q`
<div class="loading-spinner"></div>
<lang-text text="creating_magic"></lang-text>
`:q` <lang-text text="generate_content"></lang-text> `}
</paper-button>
</div>
${this.generatedText?q`
<div class="result-section">
<div class="result-content">${this.generatedText}</div>
</div>
`:""}
</div>
</cdtr-editor-container>
`}},(0,n.Z)(mt,"properties",{prompt:{type:String},generatedText:{type:String},isLoading:{type:Boolean},context:{type:String},includeContext:{type:Boolean},businessType:{type:String},businessName:{type:String},contentType:{type:String},url:{type:String}}),(0,n.Z)(mt,"styles",((t,...e)=>{const i=1===t.length?t[0]:e.reduce(((e,i,n)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[n+1]),t[0]);return new c(i,t,a)})`
:host {
--primary: #7c3aed;
--primary-light: #a78bfa;
--primary-dark: #5b21b6;
--accent: #f472b6;
--accent-light: #f9a8d4;
--accent-dark: #db2777;
--surface: #f8fafc;
--surface-dark: #f1f5f9;
--text-primary: #0f172a;
--text-secondary: #334155;
--gradient-primary: linear-gradient(
135deg,
var(--primary) 0%,
var(--accent) 100%
);
--gradient-accent: linear-gradient(
135deg,
var(--accent) 0%,
var(--primary) 100%
);
--gradient-surface: linear-gradient(
135deg,
var(--surface) 0%,
var(--surface-dark) 100%
);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-glow: 0 0 20px rgba(124, 58, 237, 0.3),
0 0 40px rgba(244, 114, 182, 0.2);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:host {
display: block;
width: 100%;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, sans-serif;
background: var(--gradient-surface);
min-height: 100vh;
position: relative;
overflow: hidden;
}
:host::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at 0% 0%,
rgba(124, 58, 237, 0.1) 0%,
transparent 50%
),
radial-gradient(
circle at 100% 100%,
rgba(244, 114, 182, 0.1) 0%,
transparent 50%
);
pointer-events: none;
animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
.editor-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem;
position: relative;
overflow: hidden;
}
.prompt-section {
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
}
.prompt-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.prompt-icon {
width: 40px;
height: 40px;
background: var(--gradient-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
position: relative;
transform-origin: center;
animation: iconFloat 3s ease-in-out infinite;
}
@keyframes iconFloat {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-5px) rotate(5deg);
}
}
.prompt-icon::after {
content: "";
position: absolute;
inset: -2px;
background: var(--gradient-primary);
border-radius: 14px;
z-index: -1;
opacity: 0.5;
filter: blur(8px);
animation: iconGlow 3s ease-in-out infinite;
}
@keyframes iconGlow {
0%,
100% {
opacity: 0.5;
filter: blur(8px);
}
50% {
opacity: 0.8;
filter: blur(12px);
}
}
.prompt-label {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 0.75rem;
}
.prompt-label::after {
content: "AI";
font-size: 0.875rem;
background: var(--gradient-primary);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 6px;
font-weight: 500;
animation: badgeFloat 3s ease-in-out infinite;
}
@keyframes badgeFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-2px);
}
}
.generate-button {
width: 100%;
align-self: flex-end;
padding: 0.875rem 1.75rem;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 0.75rem;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.generate-button::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0) 100%
);
opacity: 0;
transition: opacity 0.3s ease;
}
.generate-button:hover::before {
opacity: 1;
}
.generate-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
background: var(--gradient-accent);
}
.generate-button:active {
transform: translateY(0);
}
.generate-button:disabled {
background: var(--gradient-surface);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.result-section {
margin-top: 0.5rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
min-height: 160px;
opacity: 0;
transform: translateY(10px);
animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
position: relative;
overflow: hidden;
backdrop-filter: blur(8px);
box-shadow: var(--shadow-md);
}
.result-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
opacity: 0.8;
}
.result-content {
white-space: pre-wrap;
line-height: 1.7;
color: var(--text-primary);
font-size: 1rem;
}
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Decorative elements */
.editor-container::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle at center,
rgba(124, 58, 237, 0.1) 0%,
transparent 50%
);
transform: translate(-50%, -50%);
pointer-events: none;
animation: pulse 4s ease-in-out infinite;
}
.prompt-context {
font-size: 13px;
color: var(--text-secondary);
}
@keyframes pulse {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.5;
}
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.3;
}
}
`),gt=mt))||gt)}}]);