on-codemerge/dist/src/plugins/TypographyPlugin/index.cjs

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

"use strict";var m=Object.defineProperty;var b=(o,t,e)=>t in o?m(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e;var n=(o,t,e)=>b(o,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css             */;/* empty css              */const k=require("./components/TypographyMenu.cjs"),f=require("../ToolbarPlugin/utils.cjs"),B=require("../../icons/typography.svg.cjs"),w=require("../../utils/helpers.cjs");class C{constructor(){n(this,"name","typography");n(this,"hotkeys",[{keys:"Ctrl+Shift+Y",description:"Adjust typography settings",command:"typography-settings",icon:"✒️"}]);n(this,"editor",null);n(this,"menu",null);n(this,"toolbarButton",null)}initialize(t){this.menu=new k.TypographyMenu(t),this.editor=t,this.addToolbarButton(),this.setupEventListeners(),document.addEventListener("keydown",this.handleKeyDown),this.editor.on("typography",()=>{var e;(e=this.editor)==null||e.ensureEditorFocus(),this.showMenu()})}addToolbarButton(){var e;const t=document.querySelector(".editor-toolbar");t&&(this.toolbarButton=f.createToolbarButton({icon:B.default,title:(e=this.editor)==null?void 0:e.t("Typography"),onClick:()=>this.showMenu()}),t.appendChild(this.toolbarButton))}setupEventListeners(){this.editor&&this.editor.getContainer().addEventListener("click",this.handleClick)}handleKeyDown(t){t.ctrlKey&&t.key==="t"&&(t.preventDefault(),this.showMenu())}handleClick(){var t;(t=this.editor)==null||t.getContainer().focus()}showMenu(){var t;this.editor&&(this.editor.getContainer().focus(),(t=this.menu)==null||t.show(e=>this.applyStyle(e)))}applyStyle(t){var s,a,l,h,c,u,d,p,y,g;if(!this.editor)return;const e=window.getSelection();if(!e||e.rangeCount===0)return;const r=e.getRangeAt(0);if(r.commonAncestorContainer.parentElement)switch(t){case"h1":case"h2":case"h3":case"h4":case"h5":case"h6":(a=(s=this.editor)==null?void 0:s.getTextFormatter())==null||a.applyBlock(t);break;case"paragraph":(h=(l=this.editor)==null?void 0:l.getTextFormatter())==null||h.applyBlock("p");break;case"blockquote":(u=(c=this.editor)==null?void 0:c.getTextFormatter())==null||u.applyBlock("blockquote");break;case"pre":(p=(d=this.editor)==null?void 0:d.getTextFormatter())==null||p.applyBlock("pre");break;case"hr":const i=w.createHr("my-4 border-t border-gray-300");r.deleteContents(),r.insertNode(i),r.setStartAfter(i),r.setEndAfter(i),e.removeAllRanges(),e.addRange(r);break;case"clear":(g=(y=this.editor)==null?void 0:y.getTextFormatter())==null||g.clearBlock();break}}destroy(){var t,e;this.editor&&this.editor.getContainer().removeEventListener("click",this.handleClick),document.removeEventListener("keydown",this.handleKeyDown),this.toolbarButton&&this.toolbarButton.parentElement&&this.toolbarButton.parentElement.removeChild(this.toolbarButton),(t=this.menu)==null||t.destroy(),(e=this.editor)==null||e.off("typography"),this.editor=null,this.menu=null,this.toolbarButton=null}}exports.TypographyPlugin=C;