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
3 lines (2 loc) • 6.25 kB
JavaScript
/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
"use strict";var m=Object.defineProperty;var w=(p,e,t)=>e in p?m(p,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):p[e]=t;var c=(p,e,t)=>w(p,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("../../../core/ui/PopupManager.cjs"),h=require("../../../icons/desktop.svg.cjs"),C=require("../../../icons/mobile.svg.cjs"),f=require("../../../icons/responsive.svg.cjs"),y=require("../../../icons/tablet.svg.cjs"),o=require("../../../utils/helpers.cjs"),x=require("../commands/SetViewportCommand.cjs");class k{constructor(e){c(this,"editor");c(this,"popup");c(this,"viewportChangeHandlers",[]);c(this,"activeViewport");c(this,"viewports",[]);var i,s;this.editor=e;const n=this.editor.getPlugins().get("responsive");this.activeViewport=((s=(i=n==null?void 0:n.viewportManager)==null?void 0:i.getCurrentViewport)==null?void 0:s.call(i))||"responsive",this.viewports=[{name:"mobile",icon:C.default,label:e.t("Mobile"),size:"320px",description:e.t("Smartphone view"),hotkey:"Ctrl+1"},{name:"tablet",icon:y.default,label:e.t("Tablet"),size:"768px",description:e.t("Tablet view"),hotkey:"Ctrl+2"},{name:"desktop",icon:h.default,label:e.t("Desktop"),size:"1024px",description:e.t("Standard desktop"),hotkey:"Ctrl+3"},{name:"largeDesktop",icon:h.default,label:e.t("Large Desktop"),size:"1440px",description:e.t("Large desktop view"),hotkey:"Ctrl+4"},{name:"ultraWide",icon:h.default,label:e.t("Ultra Wide"),size:"1920px",description:e.t("Ultra wide screen"),hotkey:"Ctrl+5"},{name:"responsive",icon:f.default,label:e.t("Responsive"),size:"Fluid",description:e.t("Fluid width"),hotkey:"Ctrl+0"}],this.popup=new v.PopupManager(e,{title:e.t("Responsive View"),className:"responsive-menu",closeOnClickOutside:!0,items:[{type:"custom",id:"responsive-content",content:()=>this.createContent()}]}),this.setupHotkeys()}createContent(){const e=o.createContainer("p-6 space-y-6"),t=o.createContainer("flex items-center justify-between"),n=o.createSpan("text-lg font-semibold",this.editor.t("Select Viewport")),i=this.viewports.find(a=>a.name===this.activeViewport),s=o.createSpan("text-sm text-gray-500",`${i==null?void 0:i.label} (${i==null?void 0:i.size})`);t.appendChild(n),t.appendChild(s),e.appendChild(t);const r=o.createContainer("grid grid-cols-2 gap-4");this.viewports.forEach(a=>{const d=this.createViewportButton(a);r.appendChild(d)}),e.appendChild(r);const l=this.createInfoPanel();return e.appendChild(l),this.setupEventListeners(r),e}createViewportButton(e){const t=e.name===this.activeViewport,n=o.createButton("",()=>{this.setActiveViewport(e.name),this.popup.hide()});n.className=`viewport-btn w-full p-4 border-2 rounded-lg transition-all duration-200 ${t?"border-blue-500 bg-blue-50 shadow-md":"border-gray-200 hover:border-blue-300 hover:shadow-sm"}`,n.dataset.viewport=e.name;const i=o.createContainer("flex flex-col items-center gap-3"),s=o.createContainer("relative"),r=o.createContainer("text-2xl");r.innerHTML=e.icon;const l=o.createContainer(`w-16 h-10 border-2 border-gray-300 rounded ${e.name==="responsive"?"w-20":"w-16"}`);l.style.background="linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)",l.style.backgroundSize="4px 4px",l.style.backgroundPosition="0 0, 0 2px, 2px -2px, -2px 0px",s.appendChild(r),s.appendChild(l);const a=o.createContainer("text-center"),d=o.createSpan("block text-sm font-medium text-gray-900",e.label),u=o.createSpan("block text-xs text-gray-500 mt-1",e.size),g=o.createSpan("block text-xs text-gray-400 mt-1",e.description),b=o.createSpan("block text-xs text-blue-500 mt-1 font-mono",e.hotkey);return a.appendChild(d),a.appendChild(u),a.appendChild(g),a.appendChild(b),i.appendChild(s),i.appendChild(a),n.appendChild(i),n}createInfoPanel(){const e=o.createContainer("mt-6 p-4 bg-gray-50 rounded-lg border"),t=o.createSpan("block text-sm font-medium text-gray-900 mb-2",this.editor.t("Tips")),n=[this.editor.t("• Use hotkeys for quick switching"),this.editor.t("• Responsive mode allows manual resizing"),this.editor.t("• Viewport state is saved automatically"),this.editor.t("• Tables adapt automatically to viewport size")],i=o.createContainer("space-y-1");return n.forEach(s=>{const r=o.createSpan("block text-xs text-gray-600",s);i.appendChild(r)}),e.appendChild(t),e.appendChild(i),e}setupEventListeners(e){e.querySelectorAll(".viewport-btn").forEach(t=>{t.addEventListener("click",()=>{const n=t.dataset.viewport;this.setActiveViewport(n),this.popup.hide()})}),this.editor.getDOMContext().addEventListener("keydown",t=>{var n;t.key==="Escape"&&((n=this.popup)==null||n.hide())})}setupHotkeys(){this.editor.getDOMContext().addEventListener("keydown",e=>{if(e.ctrlKey&&!e.shiftKey&&!e.altKey){const t=e.key,n={1:"mobile",2:"tablet",3:"desktop",4:"largeDesktop",5:"ultraWide",0:"responsive"};n[t]&&(e.preventDefault(),this.setActiveViewport(n[t]))}})}setActiveViewport(e){this.activeViewport=e,this.notifyViewportChange(e);const t=new x.SetViewportCommand(this.editor);t.setViewport(e),t.execute(),this.popup&&this.editor.getDOMContext().querySelectorAll(".viewport-btn").forEach(i=>{const s=i,r=s.dataset.viewport===e;s.className=`viewport-btn w-full p-4 border-2 rounded-lg transition-all duration-200 ${r?"border-blue-500 bg-blue-50 shadow-md":"border-gray-200 hover:border-blue-300 hover:shadow-sm"}`})}show(){var n,i;const t=this.editor.getPlugins().get("responsive");this.activeViewport=((i=(n=t==null?void 0:t.viewportManager)==null?void 0:n.getCurrentViewport)==null?void 0:i.call(n))||"responsive",this.popup.show()}onViewportChange(e){this.viewportChangeHandlers.push(e)}notifyViewportChange(e){this.viewportChangeHandlers.forEach(t=>t(e))}getActiveViewport(){return this.activeViewport}destroy(){this.popup.destroy(),this.viewportChangeHandlers=[],this.viewports=[],this.editor=null,this.popup=null}}exports.ResponsiveMenu=k;