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
106 lines (105 loc) • 4.85 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 d = Object.defineProperty;
var u = (c, e, t) => e in c ? d(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
var a = (c, e, t) => u(c, typeof e != "symbol" ? e + "" : e, t);
/* empty css */
/* empty css */
import { ChartMenu as m } from "./components/ChartMenu.mjs";
import { ChartContextMenu as p } from "./components/ChartContextMenu.mjs";
import { createToolbarButton as C } from "../ToolbarPlugin/utils.mjs";
import { CHART_TYPE_CONFIGS as f } from "./constants/chartTypes.mjs";
import { Resizer as g } from "../../utils/Resizer.mjs";
import { createContainer as b, createLineBreak as R } from "../../utils/helpers.mjs";
class T {
// Сохраняем ссылку на кнопку тулбара
constructor() {
a(this, "name", "charts");
a(this, "hotkeys", [{ keys: "Ctrl+Alt+G", description: "Insert chart", command: "charts", icon: "📊" }]);
a(this, "editor", null);
a(this, "menu", null);
a(this, "contextMenu", null);
a(this, "currentResizer", null);
a(this, "toolbarButton", null);
}
initialize(e) {
this.editor = e, this.menu = new m(e), this.contextMenu = new p(e, this.menu), this.addToolbarButton(), this.setupChartEvents(), this.editor.on("charts", () => {
this.insertChart();
});
}
addToolbarButton() {
var t, r;
const e = (t = this.editor) == null ? void 0 : t.getToolbar();
e && (this.toolbarButton = C({
icon: f.bar.icon,
title: (r = this.editor) == null ? void 0 : r.t("Insert Chart"),
onClick: () => this.insertChart()
}), e.appendChild(this.toolbarButton));
}
setupChartEvents() {
if (!this.editor) return;
const e = this.editor.getContainer();
e.addEventListener("click", (t) => {
const r = t.target.closest(".chart-container");
r instanceof HTMLElement && (this.currentResizer && (this.currentResizer.destroy(), this.currentResizer = null), this.currentResizer = new g(r, {
handleSize: 10,
handleColor: "blue",
onResizeStart: () => {
var n;
return (n = this.editor) == null ? void 0 : n.disableObserver();
},
onResize: (n, i) => {
var l;
console.log(`Resized to ${n}x${i}`);
const h = r.getAttribute("data-chart-type"), o = r.getAttribute("data-chart-data") ?? "", s = JSON.parse(o);
(l = this.menu) == null || l.redrawChart(r, h, s, { width: n, height: i });
},
onResizeEnd: () => {
var n;
return (n = this.editor) == null ? void 0 : n.enableObserver();
}
}));
}), e.addEventListener("contextmenu", (t) => {
var n;
const r = t.target.closest(".chart-container");
if (r instanceof HTMLElement) {
t.preventDefault();
const i = t.clientX, h = t.clientY;
console.log("Mouse coordinates:", i, h), (n = this.contextMenu) == null || n.show(r, i, h);
}
}), e.addEventListener("chartresize", (t) => {
var i;
const r = t.detail, n = t.target.closest(".chart-container");
n instanceof HTMLElement && ((i = this.menu) == null || i.redrawChart(n, r.type, r.data, {
width: r.width,
height: r.height
}));
});
}
insertChart() {
var i, h;
if (!this.editor) return;
const e = this.editor.getContainer(), t = (i = this.editor.getTextFormatter()) == null ? void 0 : i.getSelection();
let r;
const n = () => {
const o = document.createRange();
return o.selectNodeContents(e), o.collapse(!1), t == null || t.removeAllRanges(), t == null || t.addRange(o), o;
};
if (t && t.rangeCount > 0) {
const o = t.getRangeAt(0);
r = e.contains(o.startContainer) && e.contains(o.endContainer) ? o : n();
} else
r = n();
(h = this.menu) == null || h.show((o) => {
if (!this.editor) return;
const s = b("chart-wrapper my-4");
s.appendChild(o), s.appendChild(R()), r.deleteContents(), r.insertNode(s), r.setStartAfter(s), r.setEndAfter(s), t == null || t.removeAllRanges(), t == null || t.addRange(r);
});
}
destroy() {
var e;
this.menu && (this.menu.destroy(), this.menu = null), this.contextMenu && (this.contextMenu.destroy(), this.contextMenu = null), this.currentResizer && (this.currentResizer.destroy(), this.currentResizer = null), this.toolbarButton && this.toolbarButton.parentElement && (this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.toolbarButton = null), (e = this.editor) == null || e.off("charts"), this.editor = null;
}
}
export {
T as ChartsPlugin
};