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
108 lines (107 loc) • 4.89 kB
JavaScript
var h = Object.defineProperty;
var u = (c, e, t) => e in c ? h(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
var r = (c, e, t) => u(c, typeof e != "symbol" ? e + "" : e, t);
/* empty css */
/* empty css */
import { TablePopup as p } from "./components/TablePopup.mjs";
import { TableContextMenu as b } from "./components/TableContextMenu.mjs";
import { createToolbarButton as m } from "../ToolbarPlugin/utils.mjs";
import f from "../../icons/table.svg.mjs";
import { InsertTableCommand as T } from "./commands/InsertTableCommand.mjs";
import { Resizer as g } from "../../utils/Resizer.mjs";
class E {
constructor() {
r(this, "name", "table");
r(this, "hotkeys", [
{
keys: "Ctrl+Shift+T",
description: "Insert or edit table",
command: "table-editor",
icon: "📊"
}
]);
r(this, "editor", null);
r(this, "popup", null);
r(this, "contextMenu", null);
r(this, "currentResizer", null);
r(this, "handleContextMenu", (e) => {
var i;
const t = e.target.closest("td, th");
if (t instanceof HTMLTableCellElement) {
e.preventDefault();
const o = e.clientX + window.scrollX, n = e.clientY + window.scrollY;
console.log("Mouse coordinates with scroll:", o, n), (i = this.contextMenu) == null || i.show(t, o, n);
}
});
r(this, "handleClick", (e) => {
var o, n, s, a;
const t = e.target.closest("table");
t instanceof HTMLTableElement && (e.preventDefault(), (n = (o = this.editor) == null ? void 0 : o.getSelector()) == null || n.saveTable(t));
const i = e.target.closest("td, th");
i && i instanceof HTMLTableCellElement && (e.preventDefault(), (a = (s = this.editor) == null ? void 0 : s.getSelector()) == null || a.selectCell(i), this.currentResizer && (this.currentResizer.destroy(), this.currentResizer = null), this.currentResizer = new g(i, {
handleSize: 10,
handleColor: "blue",
onResizeStart: () => {
var l;
return (l = this.editor) == null ? void 0 : l.disableObserver();
},
onResize: (l, d) => console.log(`Resized to ${l}x${d}`),
onResizeEnd: () => {
var l;
return (l = this.editor) == null ? void 0 : l.enableObserver();
}
}));
});
r(this, "handleKeydown", (e) => {
var t, i, o, n;
if (e.key === "Delete") {
const s = (i = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : i.restoreTable();
s && (s.remove(), (n = (o = this.editor) == null ? void 0 : o.getSelector()) == null || n.clearTable());
}
});
}
initialize(e) {
this.popup = new p(e), this.editor = e, this.contextMenu = new b(e), this.addToolbarButton(), this.setupTableEvents(), this.editor.on("table", () => {
var t, i, o;
(i = (t = this.editor) == null ? void 0 : t.getSelector()) == null || i.saveSelection(), (o = this.popup) == null || o.show((n) => this.insertTable(n));
});
}
addToolbarButton() {
var t;
const e = document.querySelector(".editor-toolbar");
if (e) {
const i = m({
icon: f,
title: (t = this.editor) == null ? void 0 : t.t("Insert Table"),
onClick: () => {
var o, n, s;
(n = (o = this.editor) == null ? void 0 : o.getSelector()) == null || n.saveSelection(), (s = this.popup) == null || s.show((a) => this.insertTable(a));
}
});
e.appendChild(i);
}
}
setupTableEvents() {
if (!this.editor || !this.contextMenu) return;
const e = this.editor.getContainer();
e.addEventListener("contextmenu", this.handleContextMenu), e.addEventListener("click", this.handleClick), e.addEventListener("keydown", this.handleKeydown);
}
insertTable(e) {
var o, n;
if (!this.editor) return;
this.editor.ensureEditorFocus();
let t = (n = (o = this.editor) == null ? void 0 : o.getSelector()) == null ? void 0 : n.restoreSelection(this.editor.getContainer());
t || (t = document.createRange(), t.selectNodeContents(this.editor.getContainer()), t.collapse(!1)), new T(this.editor, e, t).execute();
}
destroy() {
var e, t, i;
if (this.editor) {
const o = this.editor.getContainer();
o.removeEventListener("contextmenu", this.handleContextMenu), o.removeEventListener("click", this.handleClick), o.removeEventListener("keydown", this.handleKeydown);
}
this.popup && (this.popup.destroy(), this.popup = null), this.contextMenu && (this.contextMenu.destroy(), this.contextMenu = null), this.currentResizer && (this.currentResizer.destroy(), this.currentResizer = null), (e = this.editor) == null || e.off("table"), (i = (t = this.editor) == null ? void 0 : t.getSelector()) == null || i.clearTable(), this.editor = null;
}
}
export {
E as TablePlugin
};