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) • 2.87 kB
JavaScript
"use strict";var d=Object.defineProperty;var h=(r,e,t)=>e in r?d(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var l=(r,e,t)=>h(r,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const u=require("../ToolbarPlugin/utils.cjs"),f=require("../../icons/align-center.svg.cjs"),m=require("../../icons/align-left.svg.cjs"),y=require("../../icons/align-right.svg.cjs"),b=require("../../icons/align-justify.svg.cjs");class S{constructor(){l(this,"name","alignment");l(this,"hotkeys",[{keys:"Ctrl+B",description:"Bold text",command:"bold",icon:"𝐁"},{keys:"Ctrl+I",description:"Italic text",command:"italic",icon:"𝐼"},{keys:"Ctrl+U",description:"Underline text",command:"underline",icon:"U̲"},{keys:"Ctrl+Shift+S",description:"Strikethrough text",command:"strikethrough",icon:"S̶"}]);l(this,"editor",null);l(this,"toolbarButtons",new Map)}initialize(e){this.editor=e,this.addToolbarButtons(),this.editor.on("align_left",()=>{var t,i;return(i=(t=this.editor)==null?void 0:t.getTextFormatter())==null?void 0:i.toggleStyle("alignLeft")}),this.editor.on("align_center",()=>{var t,i;return(i=(t=this.editor)==null?void 0:t.getTextFormatter())==null?void 0:i.toggleStyle("alignCenter")}),this.editor.on("align_right",()=>{var t,i;return(i=(t=this.editor)==null?void 0:t.getTextFormatter())==null?void 0:i.toggleStyle("alignRight")}),this.editor.on("align_justify",()=>{var t,i;return(i=(t=this.editor)==null?void 0:t.getTextFormatter())==null?void 0:i.toggleStyle("alignJustify")}),this.editor.on("selectionchange",()=>this.handleSelectionChange())}addToolbarButtons(){const e=document.querySelector(".editor-toolbar");if(!e)return;[{icon:m.default,title:"Align Left",command:"alignLeft"},{icon:f.default,title:"Align Center",command:"alignCenter"},{icon:y.default,title:"Align Right",command:"alignRight"},{icon:b.default,title:"Align Justify",command:"alignJustify"}].forEach(({icon:i,title:o,command:n})=>{var a;const s=u.createToolbarButton({icon:i,title:((a=this.editor)==null?void 0:a.t(o))||o,onClick:()=>{var g,c;(c=(g=this.editor)==null?void 0:g.getTextFormatter())==null||c.toggleStyle(n),this.handleSelectionChange()}});e.appendChild(s),this.toolbarButtons.set(n,s)})}handleSelectionChange(){this.toolbarButtons.forEach((e,t)=>{var o,n;((n=(o=this.editor)==null?void 0:o.getTextFormatter())==null?void 0:n.hasClass(t))?e.classList.add("active"):e.classList.remove("active")})}destroy(){var e,t,i,o,n;this.toolbarButtons.forEach(s=>s.remove()),this.toolbarButtons.clear(),(e=this.editor)==null||e.off("selectionchange"),(t=this.editor)==null||t.off("align_left"),(i=this.editor)==null||i.off("align_center"),(o=this.editor)==null||o.off("align_right"),(n=this.editor)==null||n.off("align_justify"),this.editor=null}}exports.AlignmentPlugin=S;