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) • 4.55 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 P=Object.defineProperty;var T=(n,t,e)=>t in n?P(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var o=(n,t,e)=>T(n,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("../../icons/bold.svg.cjs"),B=require("../../icons/italic.svg.cjs"),z=require("../../icons/font-size.svg.cjs"),E=require("../../icons/underline.svg.cjs"),k=require("../../icons/strikethrough.svg.cjs"),C=require("../ToolbarPlugin/utils.cjs"),p=require("./constants.cjs"),A=require("../../core/ui/PopupManager.cjs");class L{constructor(){o(this,"name","font");o(this,"hotkeys",[{keys:"Ctrl+Shift+F",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 A.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:p.DEFAULT_FONT_SIZES,value:this.size,onChange:e=>this.size=e.toString()},{type:"list",id:"line-height",label:t.t("Line Height"),options:p.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 e,i;const t=(e=this.editor)==null?void 0:e.getToolbar();if(t){[{icon:v.default,title:"Bold",style:"bold"},{icon:B.default,title:"Italic",style:"italic"},{icon:E.default,title:"Underline",style:"underline"},{icon:k.default,title:"Strikethrough",style:"strikethrough"}].forEach(({icon:a,title:r,style:s})=>{const h=C.createToolbarButton({icon:a,title:r,onClick:()=>{var u,f;(f=(u=this.editor)==null?void 0:u.getTextFormatter())==null||f.toggleStyle(s),this.handleSelectionChange()}});t.appendChild(h),this.toolbarButtons.set(s,h)});const l=C.createToolbarButton({icon:z.default,title:(i=this.editor)==null?void 0:i.t("Font Settings"),onClick:()=>{var h,u,f,d,g,F,S,m,y,b;let a=(u=(h=this.editor)==null?void 0:h.getTextFormatter())==null?void 0:u.getStyle("fontFamily");a===""&&(a=null),(f=this.fontPopup)==null||f.setValue("font-family",a??"Arial");let r=(g=(d=this.editor)==null?void 0:d.getTextFormatter())==null?void 0:g.getStyle("fontSize");r===""&&(r=null),(F=this.fontPopup)==null||F.setValue("font-size",r??"16px");let s=(m=(S=this.editor)==null?void 0:S.getTextFormatter())==null?void 0:m.getStyle("lineHeight");s===""&&(s=null),(y=this.fontPopup)==null||y.setValue("line-height",s??"normal"),(b=this.fontPopup)==null||b.show()}});t.appendChild(l),this.fontButtons.set("fontSize",l)}}handleSelectionChange(){this.toolbarButtons.forEach((t,e)=>{var c,l;((l=(c=this.editor)==null?void 0:c.getTextFormatter())==null?void 0:l.hasClass(e))?t.classList.add("active"):t.classList.remove("active")})}getAvailableFonts(){const t=this.getLoadedFonts();return[...new Set([...p.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(i=>i.remove()),this.toolbarButtons.clear(),this.fontButtons.forEach(i=>i.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=L;