on-codemerge/dist/src/plugins/CodeBlockPlugin/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=(d,t,e)=>t in d?m(d,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):d[t]=e;var r=(d,t,e)=>b(d,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"),a=require("../../utils/helpers.cjs");class E{constructor(){r(this,"name","code-block");r(this,"hotkeys",[{keys:"Ctrl+Alt+C",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;const t=document.querySelector(".editor-toolbar");t&&(this.toolbarButton=x.createToolbarButton({icon:f.default,title:((e=this.editor)==null?void 0:e.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 n=e.target.closest(".code-block");if(n instanceof HTMLElement){e.preventDefault();const l=e.clientX+window.scrollX,c=e.clientY+window.scrollY;console.log("Mouse coordinates with scroll:",l,c),(i=this.contextMenu)==null||i.show(n,l,c)}})}insertCodeBlock(){var t;this.editor&&((t=this.modal)==null||t.show((e,n)=>{const i=this.createCodeBlock(e,n);this.editor.ensureEditorFocus();const l=this.editor.getContainer(),c=window.getSelection();let o;c&&c.rangeCount>0?o=c.getRangeAt(0):(o=document.createRange(),o.selectNodeContents(l),o.collapse(!1)),o.deleteContents(),o.insertNode(i),o.collapse(!1);const s=i.querySelector("code");s&&this.highlighter.highlight(s)}))}editCodeBlock(t){var i;const e=t.querySelector("code"),n=t.querySelector(".code-language");if(e&&n){const l=e.textContent||"",c=n.textContent||"plaintext";(i=this.modal)==null||i.show((o,s)=>{e.textContent=o,e.className=`language-${s}`,n.textContent=s,this.highlighter.highlight(e)},l,c)}}createCodeBlock(t,e){var C,g,p;const n=a.createContainer("code-block"),i=`code-block-${Math.random().toString(36).substring(2,11)}`;n.id=i;const l=a.createContainer("code-header");l.className="code-header";const c=a.createSpan("code-language",e),o=a.createButton(((C=this.editor)==null?void 0:C.t("Copy"))??"Copy",()=>{});o.className="copy-button",o.title=((g=this.editor)==null?void 0:g.t("Copy to clipboard"))??"Copy to clipboard";const s=(p=this.editor)==null?void 0:p.t("Copied!");o.setAttribute("onclick",`
      const codeElement = document.getElementById('${i}').querySelector('code');
      if (codeElement) {
        navigator.clipboard.writeText(codeElement.textContent || '');
        this.textContent = '${s}';
        setTimeout(() => {
          this.textContent = '${o.textContent}';
        }, 2000);
      }
    `),l.appendChild(c),l.appendChild(o);const h=a.createPre(),u=a.createCode(`language-${e}`,t);return u.contentEditable="true",h.appendChild(u),n.appendChild(l),n.appendChild(h),n}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;