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
71 lines (70 loc) • 3.4 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 d = (c, t, e) => t in c ? a(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
var s = (c, t, e) => d(c, typeof t != "symbol" ? t + "" : t, e);
import { createContainer as l, createLineBreak as k } from "../../../utils/helpers.mjs";
class h {
constructor(t) {
s(this, "name", "insertBlock");
s(this, "editor");
s(this, "previousContent", null);
s(this, "insertedBlock", null);
this.editor = t;
}
execute(t) {
var r;
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 = (r = this.editor.getTextFormatter()) == null ? void 0 : r.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 = l("editor-block text-block");
e.setAttribute("contenteditable", "false"), e.setAttribute("data-block-type", "text");
const n = l("block-content");
return n.contentEditable = "true", n.textContent = t || this.editor.t("New Block"), n.focus(), e.appendChild(n), e;
}
createContainerBlock() {
const t = l("editor-block container-block");
t.setAttribute("contenteditable", "false"), t.setAttribute("data-block-type", "container");
const e = l("block-content");
return e.contentEditable = "true", e.textContent = this.editor.t("Container Block"), t.appendChild(e), t;
}
createSplitContainer(t) {
const e = l(`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, r;
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 = k();
(r = t.parentNode) == null || r.insertBefore(i, t.nextSibling);
}
focusBlock(t) {
const e = t.querySelector(".block-content");
e && e.contentEditable === "true" && (e.contentEditable = "true", t.classList.add("active"));
}
}
export {
h as BlockCommand
};