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
115 lines (114 loc) • 4.76 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 g = Object.defineProperty;
var b = (c, t, e) => t in c ? g(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
var s = (c, t, e) => b(c, typeof t != "symbol" ? t + "" : t, e);
/* empty css */
/* empty css */
import { CodeBlockModal as k } from "./components/CodeBlockModal.mjs";
import { CodeBlockContextMenu as B } from "./components/CodeBlockContextMenu.mjs";
import { createToolbarButton as f } from "../ToolbarPlugin/utils.mjs";
import { SyntaxHighlighter as x } from "./services/SyntaxHighlighter.mjs";
import y from "../../icons/insert.svg.mjs";
import { createContainer as C, createSpan as E, createButton as M, createPre as v, createCode as S } from "../../utils/helpers.mjs";
class H {
constructor() {
s(this, "name", "code-block");
s(this, "hotkeys", [
{ keys: "Ctrl+Alt+Q", description: "Insert code block", command: "code-block", icon: "</>" }
]);
s(this, "editor", null);
s(this, "modal", null);
s(this, "contextMenu", null);
s(this, "highlighter");
s(this, "toolbarButton", null);
this.highlighter = new x();
}
initialize(t) {
this.contextMenu = new B(t, (e) => this.editCodeBlock(e)), this.modal = new k(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 = f({
icon: y,
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, r = e.clientY;
console.log("Mouse coordinates:", n, r), (i = this.contextMenu) == null || i.show(o, n, r);
}
});
}
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 r = n.querySelector("code");
r && this.highlighter.highlight(r);
});
}
editCodeBlock(t) {
var i;
const e = t.querySelector("code"), o = t.querySelector(".code-language");
if (e && o) {
const n = e.textContent || "", r = o.textContent || "plaintext";
(i = this.modal) == null || i.show(
(l, d) => {
e.textContent = l, e.className = `language-${d}`, o.textContent = d, this.highlighter.highlight(e);
},
n,
r
);
}
}
createCodeBlock(t, e) {
var u, m, p;
const o = C("code-block"), i = `code-block-${Math.random().toString(36).substring(2, 11)}`;
o.id = i;
const n = C("code-header");
n.className = "code-header";
const r = E("code-language", e), l = M(((u = this.editor) == null ? void 0 : u.t("Copy")) ?? "Copy", () => {
});
l.className = "copy-button", l.title = ((m = this.editor) == null ? void 0 : m.t("Copy to clipboard")) ?? "Copy to clipboard";
const d = (p = this.editor) == null ? void 0 : p.t("Copied!");
l.setAttribute(
"onclick",
`
const codeElement = document.getElementById('${i}').querySelector('code');
if (codeElement) {
navigator.clipboard.writeText(codeElement.textContent || '');
this.textContent = '${d}';
setTimeout(() => {
this.textContent = '${l.textContent}';
}, 2000);
}
`
), n.appendChild(r), n.appendChild(l);
const a = v(), h = S(`language-${e}`, t);
return h.contentEditable = "true", a.appendChild(h), o.appendChild(n), o.appendChild(a), 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;
}
}
export {
H as CodeBlockPlugin
};