@silexlabs/silex 3.0.0-alpha.107 → 3.0.0-alpha.108
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/client/js/main.js
CHANGED
|
@@ -228,7 +228,7 @@ var silex;(()=>{var t={99:function(t){"undefined"!=typeof globalThis?globalThis:
|
|
|
228
228
|
@click=${()=>this.editor.Commands.stop(wr)}
|
|
229
229
|
>Close</button>
|
|
230
230
|
</footer>
|
|
231
|
-
`}}displayPending(t,e){this.errorMessage=null,this.renderDialog(t,e)}displayError(t,e,n){console.info(t),this.errorMessage=t,this.renderDialog(e,n)}async closeDialog(){this.isOpen=!1,this.renderDialog(null,null),this.sender&&this.sender.set("active",0),this.sender=null}async toggleDialog(){this.isOpen?this.closeDialog():this.openDialog()}async openDialog(){this.isOpen=!0;const t=this.editor.Panels.getPanel("options")?.view.el.querySelector(".publish-button");if(t){const e=t.getBoundingClientRect(),n=450,r=20,o=50;this.move({left:e.right-n-r,top:e.bottom+10,width:n,minHeight:o})}else console.error("Unable to find publish button");this.renderDialog(null,$r.STATUS_NONE)}}var Cr;function Sr(t,e){t.Pages.getAll().forEach((t=>{t.getMainComponent().onAll((t=>e(t)))}))}!function(t){t.STARTUP_START="silex:startup:start",t.STARTUP_END="silex:startup:end",t.GRAPESJS_START="silex:grapesjs:start",t.GRAPESJS_END="silex:grapesjs:end",t.PUBLISH_START="silex:publish:start",t.PUBLISH_DATA="silex:publish:data",t.PUBLISH_END="silex:publish:end",t.PUBLISH_ERROR="silex:publish:error",t.PUBLISH_LOGIN_START="silex:publish:login:start",t.PUBLISH_LOGIN_END="silex:publish:login:end",t.ASSET_WRITE_END="silex:asset:write:end",t.WRITE_END="silex:write:end"}(Cr||(Cr={}));const Or="tmp-pre-publication-transformer-tohtml",Tr="tmp-pre-publication-transformer-src",Er="tmp-pre-publication-transformer-attributes-src",kr="tmp-pre-publication-transformer-inline-css",Ar="tmp-pre-publication-transformer-href",Pr="tmp-pre-publication-transformer-tocss";function jr(t,e){const n=e["background-image"],r=n?.match(/url\(["']?(.*?)["']?\)/)?.pop();return r?{...e,"background-image":`url(${Mr(t,r,$.ASSET)})`}:e}function Mr(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPermalink?e.transformPermalink(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}function Lr(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPath?e.transformPath(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}const Nr="publish",Ir="publish-login",Dr="publish-logout";var $r;function Rr(t,e){t.PublicationManager=new Vr(t,e)}function Hr(t){switch(t){case H.IN_PROGRESS:return $r.STATUS_PENDING;case H.ERROR:return $r.STATUS_ERROR;case H.SUCCESS:return $r.STATUS_SUCCESS}throw new Error(`Unknown job status ${t}`)}!function(t){t.STATUS_NONE="STATUS_NONE",t.STATUS_PENDING="STATUS_PENDING",t.STATUS_ERROR="STATUS_ERROR",t.STATUS_SUCCESS="STATUS_SUCCESS",t.STATUS_LOGGED_OUT="STATUS_AUTH_ERROR"}($r||($r={}));const Fr=window.location.origin+window.location.pathname.replace(/\/$/,"");class Vr{editor;dialog;_settings;get settings(){return this._settings}set settings(t){this._settings=t,this.dialog&&(this.dialog.settings=t)}options;job=null;status=$r.STATUS_NONE;constructor(t,e){this.editor=t,this.options={appendTo:"options",...e},t.on("storage:start:store",(t=>{t.publication=this.settings})),t.on("storage:end:load",(t=>{this.settings=t.publication??{},gn({type:R.HOSTING,connectorId:this.settings.connector?.connectorId}).then((t=>{})).catch((t=>{this.status=$r.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login",this.job,this.status)}))})),t.Commands.add(Nr,(()=>this.startPublication())),t.Commands.add(Ir,((t,e,n)=>this.goLogin(n))),t.Commands.add(Dr,(()=>this.goLogout())),this.options.appendTo?this.dialog=new xr(t,{appendTo:this.options.appendTo}):console.info("PublicationUi is disabled because no appendTo option is set")}async goLogin(t){if(t.isLoggedIn)return this.settings={...this.settings,connector:t},this.status=$r.STATUS_NONE,this.editor.store(null),void(this.dialog&&this.dialog.displayPending(this.job,this.status));this.settings={},this.status=$r.STATUS_LOGGED_OUT,this.dialog&&this.dialog.displayPending(this.job,this.status);const e=t.connectorId,n=t.type;return window.open(t.oauthUrl||`${Fr}${f}${h}${y}?connectorId=${e}&type=${n}`,"_blank"),new Promise((e=>{const n=async e=>{const r=e.data;"login"===r?.type&&(window.removeEventListener("message",n),r.error?(this.status=$r.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError(r.message,this.job,this.status)):(this.editor.trigger(Cr.PUBLISH_LOGIN_END),this.settings.connector=t,this.settings.options=r.options,this.status=$r.STATUS_NONE,this.editor.store(null),this.dialog&&this.dialog.displayPending(this.job,this.status)))};window.addEventListener("message",n,!1)}))}async goLogout(){try{await vn({type:R.HOSTING,connectorId:this.settings.connector.connectorId}),this.settings={},this.dialog&&this.dialog.displayPending(this.job,this.status)}catch(t){console.error("logout error",t),this.status=$r.STATUS_ERROR,this.dialog&&this.dialog.displayError(t.message,this.job,this.status)}}async startPublication(){if(this.status===$r.STATUS_PENDING)throw new Error("Publication is already in progress");this.status=$r.STATUS_PENDING,this.job=null,this.dialog&&this.dialog.displayPending(this.job,this.status),this.editor.trigger(Cr.PUBLISH_START);const t=this.editor.getModel().get("user");if(!t)throw new Error("User not logged in to a storage connector");if(!this.settings.connector?.connectorId)throw new Error("User not logged in to a hosting connector");const e=this.options.websiteId,n=t.storage.connectorId;this.setPublicationTransformers();const r=this.editor.getProjectData(),o=this.editor.getModel().get("settings"),i=(await this.getHtmlFiles(o)).flatMap((t=>[{path:t.htmlPath,content:t.html,type:$.HTML},{path:t.cssPath,content:t.css,type:$.CSS}])).concat(r.assets.map((t=>{const e=Lr(this.editor,t.src,$.ASSET),n=Mr(this.editor,t.src,$.ASSET);return{...t,path:e,src:n,type:$.ASSET}}))),a={...r,settings:o,publication:this.settings,files:i};this.resetPublicationTransformers(),function(t,e){const n=t.getModel().get("config");e.files=n.publicationTransformers.reduce(((t,n)=>t.map(((t,r)=>{try{return e.pages[r],n.transformFile?n.transformFile(t)??t:t}catch(e){return console.error("Publication transformer: error transforming file",t,e),t}}))),e.files)}(this.editor,a),this.editor.trigger(Cr.PUBLISH_DATA,a);try{const[t,r]=await mn({websiteId:e,hostingId:this.settings.connector.connectorId,storageId:n,data:a,options:this.settings.options});this.job=r,this.status=Hr(this.job.status),this.trackProgress()}catch(t){return console.error("publish error",t),401===t.code||401===t.httpStatusCode?(this.status=$r.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login.",this.job,this.status)):(this.status=$r.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status)),this.editor.trigger(Cr.PUBLISH_ERROR,{success:!1,message:t.message}),void this.editor.trigger(Cr.PUBLISH_END,{success:!1,message:t.message})}}async getHtmlFiles(t){return this.editor.Pages.getAll().map((e=>{const n=e.get("settings");function r(e){return(n||{})[e]||(t||[])[e]||""}const o=e.getMainComponent(),i=vr(e.get("name")),a=`/css/${i}.css`,s=`/${i}.html`,l=Mr(this.editor,a,$.CSS),c=Lr(this.editor,a,$.CSS),u=Lr(this.editor,s,$.HTML),p=this.editor.getHtml({component:o});return{html:`<!DOCTYPE html>\n<html lang="${r("lang")}">\n<head>\n<link rel="stylesheet" href="${l}" />\n${t?.head||""}\n${n?.head||""}\n<title>${r("title")}</title>\n<link rel="icon" href="${r("favicon")}" />\n${["description","og:title","og:description","og:image"].map((t=>`<meta property="${t}" content="${r(t)}"/>`)).join("\n")}\n</head>\n${p}\n</html>`,css:this.editor.getCss({component:o}),cssPath:c,htmlPath:u}}))}async trackProgress(){try{this.job=await yn({jobId:this.job.jobId}),this.status=Hr(this.job.status)}catch(t){return this.status=$r.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status),this.editor.trigger(Cr.PUBLISH_END,{success:!1,message:t.message}),void this.editor.trigger(Cr.PUBLISH_ERROR,{success:!1,message:t.message})}this.job.status===H.IN_PROGRESS?setTimeout((()=>this.trackProgress()),2e3):this.editor.trigger(Cr.PUBLISH_END,{success:this.job.status===H.SUCCESS,message:this.job.message}),this.dialog&&this.dialog.displayPending(this.job,this.status)}setPublicationTransformers(){!function(t){const e=t.getModel().get("config");Sr(t,(n=>{if(n.get(Or))console.warn("Publication transformer: HTML transform already altered",n);else{const r=n.toHTML.bind(n);n[Or]=n.toHTML;const o=n.getStyle.bind(n);n[kr]=n.getStyle;const i=n.get("attributes").href;if(i?.startsWith("./")&&(n[Ar]=i,n.set("attributes",{...n.get("attributes"),href:Mr(t,i,$.HTML)})),n.get("attributes").src){n[Tr]=n.get("attributes").src;const e=Mr(t,n.get("attributes").src,$.ASSET);n.set("attributes",{...n.get("attributes"),src:e})}if(n.get("src")){n[Er]=n.get("src");const e=Mr(t,n.get("src"),$.ASSET);n.set("src",e)}n.toHTML=()=>e.publicationTransformers.reduce(((t,e)=>{try{return e.renderComponent?e.renderComponent(n,(()=>t))??t:t}catch(e){return console.error("Publication transformer: error rendering component",n,e),t}}),r()),n.getStyle=()=>jr(t,o())}}))}(this.editor),function(t){const e=t.getModel().get("config");t.Css.getAll().forEach((n=>{if(n[Pr])console.warn("Publication transformer: CSS transform already altered",n);else{const r=n.getStyle.bind(n);n[Pr]=n.getStyle,n.getStyle=()=>{try{const n=e.publicationTransformers.reduce(((t,e)=>({...e.renderCssRule?e.renderCssRule(t,r)??t:t})),jr(t,r()));return n}catch(t){return console.error("Publication transformer: error rendering style",n,t),r()}}}}))}(this.editor)}resetPublicationTransformers(){!function(t){Sr(t,(t=>{t[Or]&&(t.toHTML=t[Or],delete t[Or]),t[kr]&&(t.getStyle=t[kr],delete t[kr]),t[Tr]&&(t.set("attributes",{...t.get("attributes"),src:t[Tr]}),delete t[Tr]),t[Er]&&(t.set("src",t[Er]),delete t[Er]),t[Ar]&&(t.set("attributes",{...t.get("attributes"),href:t[Ar]}),delete t[Ar])}))}(this.editor),function(t){t.Css.getAll().forEach((t=>{t[Pr]&&(t.getStyle=t[Pr],delete t[Pr])}))}(this.editor)}}const Ur=[{name:"./project-bar",value:ar},{name:"grapesjs-style-bg",value:Kn()},{name:"./settings",value:(t,e)=>{try{ur="3.0.0-alpha.107"}catch(t){}console.info("Silex version:",ur),t.Commands.add(cr,{run:(e,n,{page:r})=>{lr=t.Modal.open({title:r?"Page settings":"Site Settings",content:"",attributes:{class:"settings-dialog"}}).onceClose((()=>{n.set("active",0),t.stopCommand(cr)})),function(t,e,n=t.getModel()){const r=n.get("settings")||{};n.set("settings",r),je(de`
|
|
231
|
+
`}}displayPending(t,e){this.errorMessage=null,this.renderDialog(t,e)}displayError(t,e,n){console.info(t),this.errorMessage=t,this.renderDialog(e,n)}async closeDialog(){this.isOpen=!1,this.renderDialog(null,null),this.sender&&this.sender.set("active",0),this.sender=null}async toggleDialog(){this.isOpen?this.closeDialog():this.openDialog()}async openDialog(){this.isOpen=!0;const t=this.editor.Panels.getPanel("options")?.view.el.querySelector(".publish-button");if(t){const e=t.getBoundingClientRect(),n=450,r=20,o=50;this.move({left:e.right-n-r,top:e.bottom+10,width:n,minHeight:o})}else console.error("Unable to find publish button");this.renderDialog(null,$r.STATUS_NONE)}}var Cr;function Sr(t,e){t.Pages.getAll().forEach((t=>{t.getMainComponent().onAll((t=>e(t)))}))}!function(t){t.STARTUP_START="silex:startup:start",t.STARTUP_END="silex:startup:end",t.GRAPESJS_START="silex:grapesjs:start",t.GRAPESJS_END="silex:grapesjs:end",t.PUBLISH_START="silex:publish:start",t.PUBLISH_DATA="silex:publish:data",t.PUBLISH_END="silex:publish:end",t.PUBLISH_ERROR="silex:publish:error",t.PUBLISH_LOGIN_START="silex:publish:login:start",t.PUBLISH_LOGIN_END="silex:publish:login:end",t.ASSET_WRITE_END="silex:asset:write:end",t.WRITE_END="silex:write:end"}(Cr||(Cr={}));const Or="tmp-pre-publication-transformer-tohtml",Tr="tmp-pre-publication-transformer-src",Er="tmp-pre-publication-transformer-attributes-src",kr="tmp-pre-publication-transformer-inline-css",Ar="tmp-pre-publication-transformer-href",Pr="tmp-pre-publication-transformer-tocss";function jr(t,e){const n=e["background-image"],r=n?.match(/url\(["']?(.*?)["']?\)/)?.pop();return r?{...e,"background-image":`url(${Mr(t,r,$.ASSET)})`}:e}function Mr(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPermalink?e.transformPermalink(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}function Lr(t,e,n){return t.getModel().get("config").publicationTransformers.reduce(((t,e)=>{try{return e.transformPath?e.transformPath(t,n)??t:t}catch(e){return console.error("Publication transformer: error transforming path",t,e),t}}),e)}const Nr="publish",Ir="publish-login",Dr="publish-logout";var $r;function Rr(t,e){t.PublicationManager=new Vr(t,e)}function Hr(t){switch(t){case H.IN_PROGRESS:return $r.STATUS_PENDING;case H.ERROR:return $r.STATUS_ERROR;case H.SUCCESS:return $r.STATUS_SUCCESS}throw new Error(`Unknown job status ${t}`)}!function(t){t.STATUS_NONE="STATUS_NONE",t.STATUS_PENDING="STATUS_PENDING",t.STATUS_ERROR="STATUS_ERROR",t.STATUS_SUCCESS="STATUS_SUCCESS",t.STATUS_LOGGED_OUT="STATUS_AUTH_ERROR"}($r||($r={}));const Fr=window.location.origin+window.location.pathname.replace(/\/$/,"");class Vr{editor;dialog;_settings;get settings(){return this._settings}set settings(t){this._settings=t,this.dialog&&(this.dialog.settings=t)}options;job=null;status=$r.STATUS_NONE;constructor(t,e){this.editor=t,this.options={appendTo:"options",...e},t.on("storage:start:store",(t=>{t.publication=this.settings})),t.on("storage:end:load",(t=>{this.settings=t.publication??{},gn({type:R.HOSTING,connectorId:this.settings.connector?.connectorId}).then((t=>{})).catch((t=>{this.status=$r.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login",this.job,this.status)}))})),t.Commands.add(Nr,(()=>this.startPublication())),t.Commands.add(Ir,((t,e,n)=>this.goLogin(n))),t.Commands.add(Dr,(()=>this.goLogout())),this.options.appendTo?this.dialog=new xr(t,{appendTo:this.options.appendTo}):console.info("PublicationUi is disabled because no appendTo option is set")}async goLogin(t){if(t.isLoggedIn)return this.settings={...this.settings,connector:t},this.status=$r.STATUS_NONE,this.editor.store(null),void(this.dialog&&this.dialog.displayPending(this.job,this.status));this.settings={},this.status=$r.STATUS_LOGGED_OUT,this.dialog&&this.dialog.displayPending(this.job,this.status);const e=t.connectorId,n=t.type;return window.open(t.oauthUrl||`${Fr}${f}${h}${y}?connectorId=${e}&type=${n}`,"_blank"),new Promise((e=>{const n=async e=>{const r=e.data;"login"===r?.type&&(window.removeEventListener("message",n),r.error?(this.status=$r.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError(r.message,this.job,this.status)):(this.editor.trigger(Cr.PUBLISH_LOGIN_END),this.settings.connector=t,this.settings.options=r.options,this.status=$r.STATUS_NONE,this.editor.store(null),this.dialog&&this.dialog.displayPending(this.job,this.status)))};window.addEventListener("message",n,!1)}))}async goLogout(){try{await vn({type:R.HOSTING,connectorId:this.settings.connector.connectorId}),this.settings={},this.dialog&&this.dialog.displayPending(this.job,this.status)}catch(t){console.error("logout error",t),this.status=$r.STATUS_ERROR,this.dialog&&this.dialog.displayError(t.message,this.job,this.status)}}async startPublication(){if(this.status===$r.STATUS_PENDING)throw new Error("Publication is already in progress");this.status=$r.STATUS_PENDING,this.job=null,this.dialog&&this.dialog.displayPending(this.job,this.status),this.editor.trigger(Cr.PUBLISH_START);const t=this.editor.getModel().get("user");if(!t)throw new Error("User not logged in to a storage connector");if(!this.settings.connector?.connectorId)throw new Error("User not logged in to a hosting connector");const e=this.options.websiteId,n=t.storage.connectorId;this.setPublicationTransformers();const r=this.editor.getProjectData(),o=this.editor.getModel().get("settings"),i=(await this.getHtmlFiles(o)).flatMap((t=>[{path:t.htmlPath,content:t.html,type:$.HTML},{path:t.cssPath,content:t.css,type:$.CSS}])).concat(r.assets.map((t=>{const e=Lr(this.editor,t.src,$.ASSET),n=Mr(this.editor,t.src,$.ASSET);return{...t,path:e,src:n,type:$.ASSET}}))),a={...r,settings:o,publication:this.settings,files:i};this.resetPublicationTransformers(),function(t,e){const n=t.getModel().get("config");e.files=n.publicationTransformers.reduce(((t,n)=>t.map(((t,r)=>{try{return e.pages[r],n.transformFile?n.transformFile(t)??t:t}catch(e){return console.error("Publication transformer: error transforming file",t,e),t}}))),e.files)}(this.editor,a),this.editor.trigger(Cr.PUBLISH_DATA,a);try{const[t,r]=await mn({websiteId:e,hostingId:this.settings.connector.connectorId,storageId:n,data:a,options:this.settings.options});this.job=r,this.status=Hr(this.job.status),this.trackProgress()}catch(t){return console.error("publish error",t),401===t.code||401===t.httpStatusCode?(this.status=$r.STATUS_LOGGED_OUT,this.settings={},this.dialog&&this.dialog.displayError("Please login.",this.job,this.status)):(this.status=$r.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status)),this.editor.trigger(Cr.PUBLISH_ERROR,{success:!1,message:t.message}),void this.editor.trigger(Cr.PUBLISH_END,{success:!1,message:t.message})}}async getHtmlFiles(t){return this.editor.Pages.getAll().map((e=>{const n=e.get("settings");function r(e){return(n||{})[e]||(t||[])[e]||""}const o=e.getMainComponent(),i=vr(e.get("name")),a=`/css/${i}.css`,s=`/${i}.html`,l=Mr(this.editor,a,$.CSS),c=Lr(this.editor,a,$.CSS),u=Lr(this.editor,s,$.HTML),p=this.editor.getHtml({component:o});return{html:`<!DOCTYPE html>\n<html lang="${r("lang")}">\n<head>\n<link rel="stylesheet" href="${l}" />\n${t?.head||""}\n${n?.head||""}\n<title>${r("title")}</title>\n<link rel="icon" href="${r("favicon")}" />\n${["description","og:title","og:description","og:image"].map((t=>`<meta property="${t}" content="${r(t)}"/>`)).join("\n")}\n</head>\n${p}\n</html>`,css:this.editor.getCss({component:o}),cssPath:c,htmlPath:u}}))}async trackProgress(){try{this.job=await yn({jobId:this.job.jobId}),this.status=Hr(this.job.status)}catch(t){return this.status=$r.STATUS_ERROR,this.dialog&&this.dialog.displayError(`An error occured, your site is not published. ${t.message}`,this.job,this.status),this.editor.trigger(Cr.PUBLISH_END,{success:!1,message:t.message}),void this.editor.trigger(Cr.PUBLISH_ERROR,{success:!1,message:t.message})}this.job.status===H.IN_PROGRESS?setTimeout((()=>this.trackProgress()),2e3):this.editor.trigger(Cr.PUBLISH_END,{success:this.job.status===H.SUCCESS,message:this.job.message}),this.dialog&&this.dialog.displayPending(this.job,this.status)}setPublicationTransformers(){!function(t){const e=t.getModel().get("config");Sr(t,(n=>{if(n.get(Or))console.warn("Publication transformer: HTML transform already altered",n);else{const r=n.toHTML.bind(n);n[Or]=n.toHTML;const o=n.getStyle.bind(n);n[kr]=n.getStyle;const i=n.get("attributes").href;if(i?.startsWith("./")&&(n[Ar]=i,n.set("attributes",{...n.get("attributes"),href:Mr(t,i,$.HTML)})),n.get("attributes").src){n[Tr]=n.get("attributes").src;const e=Mr(t,n.get("attributes").src,$.ASSET);n.set("attributes",{...n.get("attributes"),src:e})}if(n.get("src")){n[Er]=n.get("src");const e=Mr(t,n.get("src"),$.ASSET);n.set("src",e)}n.toHTML=()=>e.publicationTransformers.reduce(((t,e)=>{try{return e.renderComponent?e.renderComponent(n,(()=>t))??t:t}catch(e){return console.error("Publication transformer: error rendering component",n,e),t}}),r()),n.getStyle=()=>jr(t,o())}}))}(this.editor),function(t){const e=t.getModel().get("config");t.Css.getAll().forEach((n=>{if(n[Pr])console.warn("Publication transformer: CSS transform already altered",n);else{const r=n.getStyle.bind(n);n[Pr]=n.getStyle,n.getStyle=()=>{try{const n=e.publicationTransformers.reduce(((t,e)=>({...e.renderCssRule?e.renderCssRule(t,r)??t:t})),jr(t,r()));return n}catch(t){return console.error("Publication transformer: error rendering style",n,t),r()}}}}))}(this.editor)}resetPublicationTransformers(){!function(t){Sr(t,(t=>{t[Or]&&(t.toHTML=t[Or],delete t[Or]),t[kr]&&(t.getStyle=t[kr],delete t[kr]),t[Tr]&&(t.set("attributes",{...t.get("attributes"),src:t[Tr]}),delete t[Tr]),t[Er]&&(t.set("src",t[Er]),delete t[Er]),t[Ar]&&(t.set("attributes",{...t.get("attributes"),href:t[Ar]}),delete t[Ar])}))}(this.editor),function(t){t.Css.getAll().forEach((t=>{t[Pr]&&(t.getStyle=t[Pr],delete t[Pr])}))}(this.editor)}}const Ur=[{name:"./project-bar",value:ar},{name:"grapesjs-style-bg",value:Kn()},{name:"./settings",value:(t,e)=>{try{ur="3.0.0-alpha.108"}catch(t){}console.info("Silex version:",ur),t.Commands.add(cr,{run:(e,n,{page:r})=>{lr=t.Modal.open({title:r?"Page settings":"Site Settings",content:"",attributes:{class:"settings-dialog"}}).onceClose((()=>{n.set("active",0),t.stopCommand(cr)})),function(t,e,n=t.getModel()){const r=n.get("settings")||{};n.set("settings",r),je(de`
|
|
232
232
|
<p>The page settings will override site settings, <a href="https://github.com/silexlabs/Silex/wiki/Settings" target="_blank">more info about settings here</a>.</p>
|
|
233
233
|
<form class="silex-form">
|
|
234
234
|
<h2>General settings</h2>
|
|
@@ -28,9 +28,42 @@ const silex = window['silex'];
|
|
|
28
28
|
const pluginName = 'template';
|
|
29
29
|
const templateType = 'templateType';
|
|
30
30
|
const templateKey = 'template';
|
|
31
|
+
function createCodeEditor(editor, mode = 'htmlmixed', singleLine = false) {
|
|
32
|
+
const options = {
|
|
33
|
+
readOnly: false,
|
|
34
|
+
codeName: mode,
|
|
35
|
+
};
|
|
36
|
+
if (singleLine) {
|
|
37
|
+
options.lineWrapping = false;
|
|
38
|
+
options.lineNumbers = false;
|
|
39
|
+
options.indentWithTabs = false;
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
options.lineNumbers = true;
|
|
43
|
+
options.lineWrapping = true;
|
|
44
|
+
}
|
|
45
|
+
return editor.CodeManager.createViewer(options);
|
|
46
|
+
}
|
|
31
47
|
export default async (config, opts = {}) => {
|
|
32
48
|
config.on(ClientEvent.GRAPESJS_END, () => {
|
|
33
49
|
const editor = silex.getEditor();
|
|
50
|
+
// Get the necessary code editors
|
|
51
|
+
const editors = {
|
|
52
|
+
before: createCodeEditor(editor),
|
|
53
|
+
replace: createCodeEditor(editor),
|
|
54
|
+
after: createCodeEditor(editor),
|
|
55
|
+
attributes: createCodeEditor(editor, 'text', true),
|
|
56
|
+
classname: createCodeEditor(editor, 'text', true),
|
|
57
|
+
style: createCodeEditor(editor, 'css', true),
|
|
58
|
+
};
|
|
59
|
+
const is1line = {
|
|
60
|
+
before: false,
|
|
61
|
+
replace: false,
|
|
62
|
+
after: false,
|
|
63
|
+
attributes: true,
|
|
64
|
+
classname: true,
|
|
65
|
+
style: true,
|
|
66
|
+
};
|
|
34
67
|
// Add the new trait to all component types
|
|
35
68
|
editor.DomComponents.getTypes().map(type => {
|
|
36
69
|
const originalType = editor.DomComponents.getType(type.id);
|
|
@@ -54,7 +87,7 @@ export default async (config, opts = {}) => {
|
|
|
54
87
|
function doRender(el) {
|
|
55
88
|
const template = editor.getSelected()?.get(templateKey) || {};
|
|
56
89
|
const taStyle = opts.styles?.textarea ?? styleMap({
|
|
57
|
-
|
|
90
|
+
xxbackgroundColor: 'var(--darkerPrimaryColor)',
|
|
58
91
|
});
|
|
59
92
|
const sepStyle = opts.styles?.sep ?? styleMap({ height: '10px' });
|
|
60
93
|
const labels = {
|
|
@@ -66,31 +99,38 @@ export default async (config, opts = {}) => {
|
|
|
66
99
|
style: html `CSS styles`,
|
|
67
100
|
};
|
|
68
101
|
render(html `
|
|
102
|
+
<style>
|
|
103
|
+
.CodeMirror {
|
|
104
|
+
height: 100%;
|
|
105
|
+
}
|
|
106
|
+
</style>
|
|
69
107
|
<div>
|
|
70
108
|
<h3>Template</h3>
|
|
71
109
|
<p>This will be inserted in the published version</p>
|
|
72
110
|
</div>
|
|
73
|
-
${[
|
|
74
|
-
|
|
111
|
+
${[
|
|
112
|
+
'classname',
|
|
113
|
+
'attributes',
|
|
114
|
+
'style',
|
|
115
|
+
'before',
|
|
116
|
+
'replace',
|
|
117
|
+
'after',
|
|
118
|
+
].map(id => html `
|
|
119
|
+
<label data-contain="${id}" class="template-wrapper-${id}">
|
|
75
120
|
${labels[id]}
|
|
76
|
-
<input
|
|
77
|
-
id="template-${id}"
|
|
78
|
-
.value=${template[id] || ''}
|
|
79
|
-
style=${taStyle}
|
|
80
|
-
/>
|
|
81
121
|
</label>
|
|
82
122
|
`)}
|
|
83
|
-
${['before', 'replace', 'after'].map(id => html `
|
|
84
|
-
<label
|
|
85
|
-
for="template-${id}"
|
|
86
|
-
>${labels[id]}</label>
|
|
87
|
-
<textarea
|
|
88
|
-
id="template-${id}"
|
|
89
|
-
style=${taStyle}
|
|
90
|
-
.value=${template[id] || ''}
|
|
91
|
-
></textarea>
|
|
92
|
-
`)}
|
|
93
123
|
`, el);
|
|
124
|
+
el.querySelectorAll('[data-contain]').forEach(container => {
|
|
125
|
+
const id = container.getAttribute('data-contain');
|
|
126
|
+
const codeEditor = editors[id];
|
|
127
|
+
container.appendChild(codeEditor.getElement());
|
|
128
|
+
codeEditor.getElement().style.display = 'block';
|
|
129
|
+
codeEditor.getElement().style.height = is1line[id] ? '' : '200px';
|
|
130
|
+
codeEditor.getElement().style.width = '100%';
|
|
131
|
+
codeEditor.setContent(template[id] ?? '');
|
|
132
|
+
codeEditor.refresh();
|
|
133
|
+
});
|
|
94
134
|
}
|
|
95
135
|
editor.TraitManager.addType(templateType, {
|
|
96
136
|
createInput({ trait }) {
|
|
@@ -107,12 +147,12 @@ export default async (config, opts = {}) => {
|
|
|
107
147
|
// `elInput` is the result HTMLElement you get from `createInput`
|
|
108
148
|
onEvent({ elInput, component, event }) {
|
|
109
149
|
const template = {
|
|
110
|
-
before:
|
|
111
|
-
replace:
|
|
112
|
-
after:
|
|
113
|
-
attributes:
|
|
114
|
-
classname:
|
|
115
|
-
style:
|
|
150
|
+
before: editors.before.getContent(),
|
|
151
|
+
replace: editors.replace.getContent(),
|
|
152
|
+
after: editors.after.getContent(),
|
|
153
|
+
attributes: editors.attributes.getContent(),
|
|
154
|
+
classname: editors.classname.getContent(),
|
|
155
|
+
style: editors.style.getContent(),
|
|
116
156
|
};
|
|
117
157
|
// Store the new template
|
|
118
158
|
if (Object.values(template).filter(val => !!val && !!cleanup(val)).length > 0) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/ts/plugins/client/template.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,wBAAwB;AACxB,aAAa;AACb,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,aAAa;AACb,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAEjD,8CAA8C;AAC9C,aAAa;AACb,OAAO,EAAC,IAAI,EAAE,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACvD,aAAa;AACb,OAAO,EAAC,QAAQ,EAAC,MAAM,wCAAwC,CAAA;AAE/D,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;AAE7B,MAAM,UAAU,GAAG,UAAU,CAAA;AAC7B,MAAM,YAAY,GAAG,cAAc,CAAA;AACnC,MAAM,WAAW,GAAG,UAAU,CAAA;AAE9B,eAAe,KAAK,EAAE,MAAM,EAAE,OAAY,EAAE,EAAE,EAAE;IAC9C,MAAM,CAAC,EAAE,CAAC,WAAW,CAAC,YAAY,EAAE,GAAG,EAAE;QACvC,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;QAChC,2CAA2C;QAC3C,MAAM,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACzC,MAAM,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YAC1D,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;gBACpC,KAAK,EAAE;oBACL,QAAQ,EAAE;wBACR,MAAM,EAAE;4BACN,gCAAgC;4BAChC,GAAG,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM;4BAC/C,oBAAoB;4BACpB;gCACE,KAAK,EAAE,KAAK;gCACZ,IAAI,EAAE,YAAY;gCAClB,IAAI,EAAE,UAAU;6BACjB;yBACF;qBACF;iBACF;aACF,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;QAEF,SAAS,QAAQ,CAAC,EAAE;YAClB,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,WAAW,CAAC,IAAI,EAAE,CAAA;YAC7D,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,EAAE,QAAQ,IAAI,QAAQ,CAAC;gBAChD,
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../../src/ts/plugins/client/template.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -33,9 +33,43 @@ const pluginName = 'template'
|
|
|
33
33
|
const templateType = 'templateType'
|
|
34
34
|
const templateKey = 'template'
|
|
35
35
|
|
|
36
|
+
function createCodeEditor(editor, mode = 'htmlmixed', singleLine = false) {
|
|
37
|
+
const options = {
|
|
38
|
+
readOnly: false,
|
|
39
|
+
codeName: mode,
|
|
40
|
+
} as any
|
|
41
|
+
if(singleLine) {
|
|
42
|
+
options.lineWrapping = false
|
|
43
|
+
options.lineNumbers = false
|
|
44
|
+
options.indentWithTabs = false
|
|
45
|
+
} else {
|
|
46
|
+
options.lineNumbers = true
|
|
47
|
+
options.lineWrapping = true
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
return editor.CodeManager.createViewer(options)
|
|
51
|
+
}
|
|
52
|
+
|
|
36
53
|
export default async (config, opts: any = {}) => {
|
|
37
54
|
config.on(ClientEvent.GRAPESJS_END, () => {
|
|
38
55
|
const editor = silex.getEditor()
|
|
56
|
+
// Get the necessary code editors
|
|
57
|
+
const editors = {
|
|
58
|
+
before: createCodeEditor(editor),
|
|
59
|
+
replace: createCodeEditor(editor),
|
|
60
|
+
after: createCodeEditor(editor),
|
|
61
|
+
attributes: createCodeEditor(editor, 'text', true),
|
|
62
|
+
classname: createCodeEditor(editor, 'text', true),
|
|
63
|
+
style: createCodeEditor(editor, 'css', true),
|
|
64
|
+
}
|
|
65
|
+
const is1line = {
|
|
66
|
+
before: false,
|
|
67
|
+
replace: false,
|
|
68
|
+
after: false,
|
|
69
|
+
attributes: true,
|
|
70
|
+
classname: true,
|
|
71
|
+
style: true,
|
|
72
|
+
}
|
|
39
73
|
// Add the new trait to all component types
|
|
40
74
|
editor.DomComponents.getTypes().map(type => {
|
|
41
75
|
const originalType = editor.DomComponents.getType(type.id)
|
|
@@ -60,7 +94,7 @@ export default async (config, opts: any = {}) => {
|
|
|
60
94
|
function doRender(el) {
|
|
61
95
|
const template = editor.getSelected()?.get(templateKey) || {}
|
|
62
96
|
const taStyle = opts.styles?.textarea ?? styleMap({
|
|
63
|
-
|
|
97
|
+
xxbackgroundColor: 'var(--darkerPrimaryColor)',
|
|
64
98
|
})
|
|
65
99
|
const sepStyle = opts.styles?.sep ?? styleMap({ height: '10px' })
|
|
66
100
|
const labels = {
|
|
@@ -72,31 +106,38 @@ export default async (config, opts: any = {}) => {
|
|
|
72
106
|
style: html`CSS styles`,
|
|
73
107
|
}
|
|
74
108
|
render(html`
|
|
109
|
+
<style>
|
|
110
|
+
.CodeMirror {
|
|
111
|
+
height: 100%;
|
|
112
|
+
}
|
|
113
|
+
</style>
|
|
75
114
|
<div>
|
|
76
115
|
<h3>Template</h3>
|
|
77
116
|
<p>This will be inserted in the published version</p>
|
|
78
117
|
</div>
|
|
79
|
-
${[
|
|
80
|
-
|
|
118
|
+
${[
|
|
119
|
+
'classname',
|
|
120
|
+
'attributes',
|
|
121
|
+
'style',
|
|
122
|
+
'before',
|
|
123
|
+
'replace',
|
|
124
|
+
'after',
|
|
125
|
+
].map(id => html`
|
|
126
|
+
<label data-contain="${id}" class="template-wrapper-${id}">
|
|
81
127
|
${labels[id]}
|
|
82
|
-
<input
|
|
83
|
-
id="template-${id}"
|
|
84
|
-
.value=${template[id] || ''}
|
|
85
|
-
style=${taStyle}
|
|
86
|
-
/>
|
|
87
128
|
</label>
|
|
88
129
|
`)}
|
|
89
|
-
${['before', 'replace', 'after'].map(id => html`
|
|
90
|
-
<label
|
|
91
|
-
for="template-${id}"
|
|
92
|
-
>${labels[id]}</label>
|
|
93
|
-
<textarea
|
|
94
|
-
id="template-${id}"
|
|
95
|
-
style=${taStyle}
|
|
96
|
-
.value=${template[id] || ''}
|
|
97
|
-
></textarea>
|
|
98
|
-
`)}
|
|
99
130
|
`, el)
|
|
131
|
+
el.querySelectorAll('[data-contain]').forEach(container => {
|
|
132
|
+
const id = container.getAttribute('data-contain')
|
|
133
|
+
const codeEditor = editors[id]
|
|
134
|
+
container.appendChild(codeEditor.getElement())
|
|
135
|
+
codeEditor.getElement().style.display = 'block'
|
|
136
|
+
codeEditor.getElement().style.height = is1line[id] ? '' : '200px'
|
|
137
|
+
codeEditor.getElement().style.width = '100%'
|
|
138
|
+
codeEditor.setContent(template[id] ?? '')
|
|
139
|
+
codeEditor.refresh()
|
|
140
|
+
})
|
|
100
141
|
}
|
|
101
142
|
|
|
102
143
|
editor.TraitManager.addType(templateType, {
|
|
@@ -114,12 +155,12 @@ export default async (config, opts: any = {}) => {
|
|
|
114
155
|
// `elInput` is the result HTMLElement you get from `createInput`
|
|
115
156
|
onEvent({ elInput, component, event }) {
|
|
116
157
|
const template = {
|
|
117
|
-
before:
|
|
118
|
-
replace:
|
|
119
|
-
after:
|
|
120
|
-
attributes:
|
|
121
|
-
classname:
|
|
122
|
-
style:
|
|
158
|
+
before: editors.before.getContent(),
|
|
159
|
+
replace: editors.replace.getContent(),
|
|
160
|
+
after: editors.after.getContent(),
|
|
161
|
+
attributes: editors.attributes.getContent(),
|
|
162
|
+
classname: editors.classname.getContent(),
|
|
163
|
+
style: editors.style.getContent(),
|
|
123
164
|
}
|
|
124
165
|
|
|
125
166
|
// Store the new template
|