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
84 lines (83 loc) • 3.57 kB
JavaScript
var h = Object.defineProperty;
var d = (r, i, t) => i in r ? h(r, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[i] = t;
var l = (r, i, t) => d(r, typeof i != "symbol" ? i + "" : i, t);
/* empty css */
/* empty css */
import { createToolbarButton as m } from "../ToolbarPlugin/utils.mjs";
import f from "../../icons/align-center.svg.mjs";
import u from "../../icons/align-left.svg.mjs";
import y from "../../icons/align-right.svg.mjs";
import p from "../../icons/align-justify.svg.mjs";
class A {
constructor() {
l(this, "name", "alignment");
l(this, "hotkeys", [
{ keys: "Ctrl+B", description: "Bold text", command: "bold", icon: "𝐁" },
{ keys: "Ctrl+I", description: "Italic text", command: "italic", icon: "𝐼" },
{ keys: "Ctrl+U", description: "Underline text", command: "underline", icon: "U̲" },
{
keys: "Ctrl+Shift+S",
description: "Strikethrough text",
command: "strikethrough",
icon: "S̶"
}
]);
l(this, "editor", null);
l(this, "toolbarButtons", /* @__PURE__ */ new Map());
}
initialize(i) {
this.editor = i, this.addToolbarButtons(), this.editor.on("align_left", () => {
var t, e;
return (e = (t = this.editor) == null ? void 0 : t.getTextFormatter()) == null ? void 0 : e.toggleStyle("alignLeft");
}), this.editor.on(
"align_center",
() => {
var t, e;
return (e = (t = this.editor) == null ? void 0 : t.getTextFormatter()) == null ? void 0 : e.toggleStyle("alignCenter");
}
), this.editor.on("align_right", () => {
var t, e;
return (e = (t = this.editor) == null ? void 0 : t.getTextFormatter()) == null ? void 0 : e.toggleStyle("alignRight");
}), this.editor.on(
"align_justify",
() => {
var t, e;
return (e = (t = this.editor) == null ? void 0 : t.getTextFormatter()) == null ? void 0 : e.toggleStyle("alignJustify");
}
), this.editor.on("selectionchange", () => this.handleSelectionChange());
}
addToolbarButtons() {
const i = document.querySelector(".editor-toolbar");
if (!i) return;
[
{ icon: u, title: "Align Left", command: "alignLeft" },
{ icon: f, title: "Align Center", command: "alignCenter" },
{ icon: y, title: "Align Right", command: "alignRight" },
{ icon: p, title: "Align Justify", command: "alignJustify" }
].forEach(({ icon: e, title: o, command: n }) => {
var a;
const s = m({
icon: e,
title: ((a = this.editor) == null ? void 0 : a.t(o)) || o,
onClick: () => {
var g, c;
(c = (g = this.editor) == null ? void 0 : g.getTextFormatter()) == null || c.toggleStyle(n), this.handleSelectionChange();
}
});
i.appendChild(s), this.toolbarButtons.set(n, s);
});
}
handleSelectionChange() {
this.toolbarButtons.forEach((i, t) => {
var o, n;
((n = (o = this.editor) == null ? void 0 : o.getTextFormatter()) == null ? void 0 : n.hasClass(t)) ? i.classList.add("active") : i.classList.remove("active");
});
}
destroy() {
var i, t, e, o, n;
this.toolbarButtons.forEach((s) => s.remove()), this.toolbarButtons.clear(), (i = this.editor) == null || i.off("selectionchange"), (t = this.editor) == null || t.off("align_left"), (e = this.editor) == null || e.off("align_center"), (o = this.editor) == null || o.off("align_right"), (n = this.editor) == null || n.off("align_justify"), this.editor = null;
}
}
export {
A as AlignmentPlugin
};