on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
2 lines (1 loc) • 1.66 kB
JavaScript
"use strict";var r=Object.defineProperty;var s=(i,t,e)=>t in i?r(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var n=(i,t,e)=>s(i,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const u=require("./components/ResponsiveMenu.cjs"),l=require("./services/ViewportManager.cjs"),a=require("../ToolbarPlugin/utils.cjs"),h=require("../../icons/responsive.svg.cjs");class p{constructor(){n(this,"name","responsive");n(this,"editor",null);n(this,"menu",null);n(this,"viewportManager");n(this,"toolbarButton",null);this.viewportManager=new l.ViewportManager}initialize(t){this.menu=new u.ResponsiveMenu(t),this.editor=t,this.addToolbarButton(),this.setupViewportControls(),this.editor.on("responsive",()=>{var e,o;(e=this.editor)==null||e.ensureEditorFocus(),(o=this.menu)==null||o.show()})}addToolbarButton(){var e;const t=document.querySelector(".editor-toolbar");t&&(this.toolbarButton=a.createToolbarButton({icon:h.default,title:(e=this.editor)==null?void 0:e.t("Responsive View"),onClick:()=>{var o;return(o=this.menu)==null?void 0:o.show()}}),t.appendChild(this.toolbarButton))}setupViewportControls(){var e;if(!this.editor)return;const t=this.editor.getContainer();(e=this.menu)==null||e.onViewportChange(o=>{this.viewportManager.setViewport(t,o)})}destroy(){var t;this.toolbarButton&&this.toolbarButton.parentElement&&this.toolbarButton.parentElement.removeChild(this.toolbarButton),this.menu&&(this.menu.destroy(),this.menu=null),(t=this.editor)==null||t.off("responsive"),this.editor=null,this.toolbarButton=null}}exports.ResponsivePlugin=p;