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
114 lines (113 loc) • 4.71 kB
JavaScript
var g = Object.defineProperty;
var b = (d, t, e) => t in d ? g(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);
/* 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 w, createPre as M, createCode as S } from "../../utils/helpers.mjs";
class Y {
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 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;
const t = document.querySelector(".editor-toolbar");
t && (this.toolbarButton = f({
icon: y,
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 u, m, p;
const n = C("code-block"), i = `code-block-${Math.random().toString(36).substring(2, 11)}`;
n.id = i;
const l = C("code-header");
l.className = "code-header";
const c = E("code-language", e), o = w(((u = this.editor) == null ? void 0 : u.t("Copy")) ?? "Copy", () => {
});
o.className = "copy-button", o.title = ((m = this.editor) == null ? void 0 : m.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 a = M(), h = S(`language-${e}`, t);
return h.contentEditable = "true", a.appendChild(h), n.appendChild(l), n.appendChild(a), 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;
}
}
export {
Y as CodeBlockPlugin
};