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