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
12 lines (11 loc) • 3.92 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 m=Object.defineProperty;var b=(c,t,e)=>t in c?m(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e;var r=(c,t,e)=>b(c,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const k=require("./components/CodeBlockModal.cjs"),B=require("./components/CodeBlockContextMenu.cjs"),x=require("../ToolbarPlugin/utils.cjs"),y=require("./services/SyntaxHighlighter.cjs"),f=require("../../icons/insert.svg.cjs"),d=require("../../utils/helpers.cjs");class E{constructor(){r(this,"name","code-block");r(this,"hotkeys",[{keys:"Ctrl+Alt+Q",description:"Insert code block",command:"code-block",icon:"</>"}]);r(this,"editor",null);r(this,"modal",null);r(this,"contextMenu",null);r(this,"highlighter");r(this,"toolbarButton",null);this.highlighter=new y.SyntaxHighlighter}initialize(t){this.contextMenu=new B.CodeBlockContextMenu(t,e=>this.editCodeBlock(e)),this.modal=new k.CodeBlockModal(t),this.editor=t,this.addToolbarButton(),this.setupEventListeners(),this.editor.on("code-block",()=>{this.insertCodeBlock()})}addToolbarButton(){var e,o;const t=(e=this.editor)==null?void 0:e.getToolbar();t&&(this.toolbarButton=x.createToolbarButton({icon:f.default,title:((o=this.editor)==null?void 0:o.t("Insert Code Block"))??"Insert Code Block",onClick:()=>this.insertCodeBlock()}),t.appendChild(this.toolbarButton))}setupEventListeners(){if(!this.editor)return;this.editor.getContainer().addEventListener("contextmenu",e=>{var i;const o=e.target.closest(".code-block");if(o instanceof HTMLElement){e.preventDefault();const n=e.clientX,l=e.clientY;console.log("Mouse coordinates:",n,l),(i=this.contextMenu)==null||i.show(o,n,l)}})}insertCodeBlock(){var e;if(!this.editor)return;const t=this.editor.saveCursorPosition();(e=this.modal)==null||e.show((o,i)=>{t&&this.editor.restoreCursorPosition(t);const n=this.createCodeBlock(o,i);this.editor.insertContent(n);const l=n.querySelector("code");l&&this.highlighter.highlight(l)})}editCodeBlock(t){var i;const e=t.querySelector("code"),o=t.querySelector(".code-language");if(e&&o){const n=e.textContent||"",l=o.textContent||"plaintext";(i=this.modal)==null||i.show((s,a)=>{e.textContent=s,e.className=`language-${a}`,o.textContent=a,this.highlighter.highlight(e)},n,l)}}createCodeBlock(t,e){var C,g,p;const o=d.createContainer("code-block"),i=`code-block-${Math.random().toString(36).substring(2,11)}`;o.id=i;const n=d.createContainer("code-header");n.className="code-header";const l=d.createSpan("code-language",e),s=d.createButton(((C=this.editor)==null?void 0:C.t("Copy"))??"Copy",()=>{});s.className="copy-button",s.title=((g=this.editor)==null?void 0:g.t("Copy to clipboard"))??"Copy to clipboard";const a=(p=this.editor)==null?void 0:p.t("Copied!");s.setAttribute("onclick",`
const codeElement = document.getElementById('${i}').querySelector('code');
if (codeElement) {
navigator.clipboard.writeText(codeElement.textContent || '');
this.textContent = '${a}';
setTimeout(() => {
this.textContent = '${s.textContent}';
}, 2000);
}
`),n.appendChild(l),n.appendChild(s);const h=d.createPre(),u=d.createCode(`language-${e}`,t);return u.contentEditable="true",h.appendChild(u),o.appendChild(n),o.appendChild(h),o}destroy(){var t;this.toolbarButton&&this.toolbarButton.parentElement&&this.toolbarButton.parentElement.removeChild(this.toolbarButton),this.modal&&(this.modal.destroy(),this.modal=null),this.contextMenu&&(this.contextMenu.destroy(),this.contextMenu=null),(t=this.editor)==null||t.off("code-block"),this.editor=null,this.highlighter=null}}exports.CodeBlockPlugin=E;