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) • 4.32 kB
JavaScript
"use strict";var C=Object.defineProperty;var P=(s,t,e)=>t in s?C(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var o=(s,t,e)=>P(s,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("../../icons/bold.svg.cjs"),v=require("../../icons/italic.svg.cjs"),B=require("../../icons/font-size.svg.cjs"),z=require("../../icons/underline.svg.cjs"),E=require("../../icons/strikethrough.svg.cjs"),b=require("../ToolbarPlugin/utils.cjs"),f=require("./constants.cjs"),k=require("../../core/ui/PopupManager.cjs");class A{constructor(){o(this,"name","font");o(this,"hotkeys",[{keys:"Ctrl+Shift+G",description:"Change font style",command:"font-style",icon:"🔤"}]);o(this,"editor",null);o(this,"toolbarButtons",new Map);o(this,"fontButtons",new Map);o(this,"fontPopup",null);o(this,"fontFamilies",[]);o(this,"font","Arial");o(this,"size","16px");o(this,"lineHeight","normal")}initialize(t){this.editor=t,this.fontFamilies=this.getAvailableFonts(),this.fontPopup=new k.PopupManager(t,{title:t.t("Font Settings"),className:"font-popup",closeOnClickOutside:!0,items:[{type:"list",id:"font-family",label:t.t("Font Family"),options:this.fontFamilies,value:this.font,onChange:e=>this.font=e.toString()},{type:"list",id:"font-size",label:t.t("Font Size"),options:f.DEFAULT_FONT_SIZES,value:this.size,onChange:e=>this.size=e.toString()},{type:"list",id:"line-height",label:t.t("Line Height"),options:f.DEFAULT_LINE_HEIGHTS,value:this.lineHeight,onChange:e=>this.lineHeight=e.toString()}],buttons:[{label:t.t("Confirm"),variant:"primary",onClick:()=>this.applyFontSettings()},{label:t.t("Clear"),variant:"danger",onClick:()=>this.clearFontSettings()},{label:t.t("Cancel"),variant:"secondary",onClick:()=>{var e;return(e=this.fontPopup)==null?void 0:e.hide()}}]}),this.addToolbarButtons(),this.editor.on("selectionchange",()=>this.handleSelectionChange()),this.editor.on("font",()=>{var e;(e=this.fontPopup)==null||e.show()})}addToolbarButtons(){var a;const t=document.querySelector(".editor-toolbar");if(!t)return;[{icon:T.default,title:"Bold",style:"bold"},{icon:v.default,title:"Italic",style:"italic"},{icon:z.default,title:"Underline",style:"underline"},{icon:E.default,title:"Strikethrough",style:"strikethrough"}].forEach(({icon:i,title:r,style:l})=>{const h=b.createToolbarButton({icon:i,title:r,onClick:()=>{var u,c;(c=(u=this.editor)==null?void 0:u.getTextFormatter())==null||c.toggleStyle(l),this.handleSelectionChange()}});t.appendChild(h),this.toolbarButtons.set(l,h)});const n=b.createToolbarButton({icon:B.default,title:(a=this.editor)==null?void 0:a.t("Font Settings"),onClick:()=>{var h,u,c,d,p,g,F,S,m,y;let i=(u=(h=this.editor)==null?void 0:h.getTextFormatter())==null?void 0:u.getStyle("fontFamily");i===""&&(i=null),(c=this.fontPopup)==null||c.setValue("font-family",i??"Arial");let r=(p=(d=this.editor)==null?void 0:d.getTextFormatter())==null?void 0:p.getStyle("fontSize");r===""&&(r=null),(g=this.fontPopup)==null||g.setValue("font-size",r??"16px");let l=(S=(F=this.editor)==null?void 0:F.getTextFormatter())==null?void 0:S.getStyle("lineHeight");l===""&&(l=null),(m=this.fontPopup)==null||m.setValue("line-height",l??"normal"),(y=this.fontPopup)==null||y.show()}});t.appendChild(n),this.fontButtons.set("fontSize",n)}handleSelectionChange(){this.toolbarButtons.forEach((t,e)=>{var a,i;((i=(a=this.editor)==null?void 0:a.getTextFormatter())==null?void 0:i.hasClass(e))?t.classList.add("active"):t.classList.remove("active")})}getAvailableFonts(){const t=this.getLoadedFonts();return[...new Set([...f.DEFAULT_FONT_FAMILIES,...t])]}getLoadedFonts(){const t=new Set;return document.fonts.forEach(e=>{t.add(e.family)}),Array.from(t)}applyFontSettings(){var t,e;(e=(t=this.editor)==null?void 0:t.getTextFormatter())==null||e.setFont(this.font,this.size,this.lineHeight),this.fontPopup&&this.fontPopup.hide()}clearFontSettings(){var t,e;(e=(t=this.editor)==null?void 0:t.getTextFormatter())==null||e.clearFont(),this.fontPopup&&this.fontPopup.hide()}destroy(){var t,e;this.toolbarButtons.forEach(n=>n.remove()),this.toolbarButtons.clear(),this.fontButtons.forEach(n=>n.remove()),this.fontButtons.clear(),(t=this.editor)==null||t.off("selectionchange"),(e=this.fontPopup)==null||e.destroy(),this.fontPopup=null,this.editor=null}}exports.FontPlugin=A;