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.29 kB
JavaScript
var h = Object.defineProperty;
var C = (l, o, t) => o in l ? h(l, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[o] = t;
var e = (l, o, t) => C(l, typeof o != "symbol" ? o + "" : o, t);
/* empty css */
/* empty css */
import { ColorPicker as n } from "./components/ColorPicker.mjs";
import { createToolbarButton as s } from "../ToolbarPlugin/utils.mjs";
import c from "../../icons/background-color.svg.mjs";
import u from "../../icons/text-color.svg.mjs";
class f {
// Храним ссылку на кнопку фонового цвета
constructor() {
e(this, "name", "color");
e(this, "hotkeys", [
{ keys: "Ctrl+Shift+H", description: "Highlight text", command: "hilite-color", icon: "🖍️" },
{ keys: "Ctrl+Shift+F", description: "Change text color", command: "fore-color", icon: "🎨" }
]);
e(this, "editor", null);
e(this, "textColorPicker", null);
e(this, "bgColorPicker", null);
e(this, "textColorButton", null);
// Храним ссылку на кнопку текстового цвета
e(this, "bgColorButton", null);
}
initialize(o) {
this.textColorPicker = new n(o, o.t("Text Color")), this.bgColorPicker = new n(o, o.t("Background Color")), this.editor = o, this.addToolbarButtons(), this.editor.on("fore-color", () => {
this.showTextColorPicker();
}), this.editor.on("hilite-color", () => {
this.showBgColorPicker();
});
}
showTextColorPicker() {
var o;
(o = this.textColorPicker) == null || o.show((t) => {
var r, i;
this.editor && (this.editor.getContainer().focus(), (i = (r = this.editor) == null ? void 0 : r.getTextFormatter()) == null || i.setColor(t));
});
}
showBgColorPicker() {
var o;
(o = this.bgColorPicker) == null || o.show((t) => {
var r, i;
this.editor && (this.editor.getContainer().focus(), (i = (r = this.editor) == null ? void 0 : r.getTextFormatter()) == null || i.setBackgroundColor(t));
});
}
addToolbarButtons() {
var t, r;
const o = document.querySelector(".editor-toolbar");
o && (this.textColorButton = s({
icon: u,
title: ((t = this.editor) == null ? void 0 : t.t("Text Color")) ?? "Text Color",
onClick: () => {
this.showTextColorPicker();
}
}), this.bgColorButton = s({
icon: c,
title: ((r = this.editor) == null ? void 0 : r.t("Background Color")) ?? "Background Color",
onClick: () => {
this.showBgColorPicker();
}
}), o.appendChild(this.textColorButton), o.appendChild(this.bgColorButton));
}
destroy() {
var o, t, r, i;
this.textColorButton && this.textColorButton.parentElement && this.textColorButton.parentElement.removeChild(this.textColorButton), this.bgColorButton && this.bgColorButton.parentElement && this.bgColorButton.parentElement.removeChild(this.bgColorButton), this.textColorButton = null, this.bgColorButton = null, (o = this.textColorPicker) == null || o.destroy(), (t = this.bgColorPicker) == null || t.destroy(), this.textColorPicker = null, this.bgColorPicker = null, (r = this.editor) == null || r.off("foreColor"), (i = this.editor) == null || i.off("hiliteColor"), this.editor = null;
}
}
export {
f as ColorPlugin
};