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
61 lines (60 loc) • 2.8 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 */
var a = Object.defineProperty;
var k = (n, t, i) => t in n ? a(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
var o = (n, t, i) => k(n, typeof t != "symbol" ? t + "" : t, i);
import { createContainer as r } from "../../../utils/helpers.mjs";
class p {
constructor(t) {
o(this, "name", "splitBlock");
o(this, "editor");
o(this, "originalBlock", null);
o(this, "splitContainer", null);
o(this, "direction", "horizontal");
o(this, "block", null);
this.editor = t;
}
setData(t) {
this.direction = t.direction, this.block = t.block;
}
execute() {
var t;
!this.block || !this.isValidBlock(this.block) || (this.originalBlock = this.block, this.splitContainer = this.createSplitContainer(this.direction, this.block), (t = this.block.parentNode) == null || t.replaceChild(this.splitContainer, this.block), setTimeout(() => {
var e;
const i = (e = this.splitContainer) == null ? void 0 : e.querySelector(".editor-block");
i && this.focusBlock(i);
}, 10));
}
undo() {
var t;
this.originalBlock && this.splitContainer && ((t = this.splitContainer.parentNode) == null || t.replaceChild(this.originalBlock, this.splitContainer));
}
redo() {
var t;
this.originalBlock && this.splitContainer && ((t = this.originalBlock.parentNode) == null || t.replaceChild(this.splitContainer, this.originalBlock));
}
isValidBlock(t) {
return t.classList.contains("editor-block") && !t.classList.contains("split-container");
}
createSplitContainer(t, i) {
const e = r(`editor-block split-container ${t}`);
e.setAttribute("contenteditable", "false"), e.setAttribute("data-block-type", "split"), e.setAttribute("data-direction", t);
const l = this.createBlockFromOriginal(i, "Block 1"), c = this.createBlockFromOriginal(i, "Block 2");
return e.appendChild(l), e.appendChild(c), e;
}
createBlockFromOriginal(t, i) {
var s;
const e = r("editor-block text-block");
e.setAttribute("contenteditable", "false"), e.setAttribute("data-block-type", "text");
const l = r("block-content");
l.contentEditable = "true";
const c = t.querySelector(".block-content");
return c && ((s = c.textContent) != null && s.trim()) ? l.textContent = c.textContent : l.textContent = this.editor.t(i), e.appendChild(l), e;
}
focusBlock(t) {
const i = t.querySelector(".block-content");
i && i.contentEditable === "true" && (i.contentEditable = "true", t.classList.add("active"));
}
}
export {
p as SplitBlockCommand
};