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.01 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 a=Object.defineProperty;var d=(c,t,e)=>t in c?a(c,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[t]=e;var l=(c,t,e)=>d(c,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../utils/helpers.cjs");class k{constructor(t){l(this,"name","insertBlock");l(this,"editor");l(this,"previousContent",null);l(this,"insertedBlock",null);this.editor=t}execute(t){var s;const e=this.editor.getContainer();if(!e)return;this.previousContent=this.editor.getHtml();let n;(t==null?void 0:t.type)==="split"?n=this.createSplitContainer(t.direction||"horizontal"):(t==null?void 0:t.type)==="container"?n=this.createContainerBlock():n=this.createTextBlock(t==null?void 0:t.content),this.insertedBlock=n;const i=(s=this.editor.getTextFormatter())==null?void 0:s.getSelection();let o;i&&i.rangeCount>0?(o=i.getRangeAt(0),e.contains(o.commonAncestorContainer)||(o=this.createRangeAtEnd(e))):o=this.createRangeAtEnd(e),this.insertBlockAtRange(n,o),this.focusBlock(n)}undo(){this.previousContent!==null&&this.editor.setHtml(this.previousContent)}redo(){if(this.insertedBlock){const t=this.editor.getContainer();t&&t.appendChild(this.insertedBlock.cloneNode(!0))}}createTextBlock(t){const e=r.createContainer("editor-block text-block");e.setAttribute("contenteditable","false"),e.setAttribute("data-block-type","text");const n=r.createContainer("block-content");return n.contentEditable="true",n.textContent=t||this.editor.t("New Block"),n.focus(),e.appendChild(n),e}createContainerBlock(){const t=r.createContainer("editor-block container-block");t.setAttribute("contenteditable","false"),t.setAttribute("data-block-type","container");const e=r.createContainer("block-content");return e.contentEditable="true",e.textContent=this.editor.t("Container Block"),t.appendChild(e),t}createSplitContainer(t){const e=r.createContainer(`editor-block split-container ${t}`);e.setAttribute("contenteditable","false"),e.setAttribute("data-block-type","split"),e.setAttribute("data-direction",t);const n=this.createTextBlock(this.editor.t("Block 1")),i=this.createTextBlock(this.editor.t("Block 2"));return e.appendChild(n),e.appendChild(i),e}createRangeAtEnd(t){const e=document.createRange();return e.selectNodeContents(t),e.collapse(!1),e}insertBlockAtRange(t,e){var o,s;const n=e.commonAncestorContainer.closest(".editor-block");n&&n!==e.commonAncestorContainer?(o=n.parentNode)==null||o.insertBefore(t,n.nextSibling):(e.deleteContents(),e.insertNode(t),e.collapse(!1));const i=r.createLineBreak();(s=t.parentNode)==null||s.insertBefore(i,t.nextSibling)}focusBlock(t){const e=t.querySelector(".block-content");e&&e.contentEditable==="true"&&(e.contentEditable="true",t.classList.add("active"))}}exports.BlockCommand=k;