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.67 kB
JavaScript
"use strict";var h=Object.defineProperty;var C=(l,o,t)=>o in l?h(l,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[o]=t;var i=(l,o,t)=>C(l,typeof o!="symbol"?o+"":o,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const n=require("./components/ColorPicker.cjs"),s=require("../ToolbarPlugin/utils.cjs"),c=require("../../icons/background-color.svg.cjs"),u=require("../../icons/text-color.svg.cjs");class d{constructor(){i(this,"name","color");i(this,"hotkeys",[{keys:"Ctrl+Shift+H",description:"Highlight text",command:"hilite-color",icon:"🖍️"},{keys:"Ctrl+Shift+F",description:"Change text color",command:"fore-color",icon:"🎨"}]);i(this,"editor",null);i(this,"textColorPicker",null);i(this,"bgColorPicker",null);i(this,"textColorButton",null);i(this,"bgColorButton",null)}initialize(o){this.textColorPicker=new n.ColorPicker(o,o.t("Text Color")),this.bgColorPicker=new n.ColorPicker(o,o.t("Background Color")),this.editor=o,this.addToolbarButtons(),this.editor.on("fore-color",()=>{this.showTextColorPicker()}),this.editor.on("hilite-color",()=>{this.showBgColorPicker()})}showTextColorPicker(){var o;(o=this.textColorPicker)==null||o.show(t=>{var r,e;this.editor&&(this.editor.getContainer().focus(),(e=(r=this.editor)==null?void 0:r.getTextFormatter())==null||e.setColor(t))})}showBgColorPicker(){var o;(o=this.bgColorPicker)==null||o.show(t=>{var r,e;this.editor&&(this.editor.getContainer().focus(),(e=(r=this.editor)==null?void 0:r.getTextFormatter())==null||e.setBackgroundColor(t))})}addToolbarButtons(){var t,r;const o=document.querySelector(".editor-toolbar");o&&(this.textColorButton=s.createToolbarButton({icon:u.default,title:((t=this.editor)==null?void 0:t.t("Text Color"))??"Text Color",onClick:()=>{this.showTextColorPicker()}}),this.bgColorButton=s.createToolbarButton({icon:c.default,title:((r=this.editor)==null?void 0:r.t("Background Color"))??"Background Color",onClick:()=>{this.showBgColorPicker()}}),o.appendChild(this.textColorButton),o.appendChild(this.bgColorButton))}destroy(){var o,t,r,e;this.textColorButton&&this.textColorButton.parentElement&&this.textColorButton.parentElement.removeChild(this.textColorButton),this.bgColorButton&&this.bgColorButton.parentElement&&this.bgColorButton.parentElement.removeChild(this.bgColorButton),this.textColorButton=null,this.bgColorButton=null,(o=this.textColorPicker)==null||o.destroy(),(t=this.bgColorPicker)==null||t.destroy(),this.textColorPicker=null,this.bgColorPicker=null,(r=this.editor)==null||r.off("foreColor"),(e=this.editor)==null||e.off("hiliteColor"),this.editor=null}}exports.ColorPlugin=d;