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
82 lines (81 loc) • 3.73 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 m = (r, i, t) => i in r ? d(r, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[i] = t;
var l = (r, i, t) => m(r, typeof i != "symbol" ? i + "" : i, t);
/* empty css */
/* empty css */
import { createToolbarButton as f } from "../ToolbarPlugin/utils.mjs";
import u from "../../icons/align-center.svg.mjs";
import y from "../../icons/align-left.svg.mjs";
import p from "../../icons/align-right.svg.mjs";
import C from "../../icons/align-justify.svg.mjs";
class v {
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+D",
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;
(e = (t = this.editor) == null ? void 0 : t.getTextFormatter()) == null || e.toggleStyle("alignLeft");
}), this.editor.on("align_center", () => {
var t, e;
(e = (t = this.editor) == null ? void 0 : t.getTextFormatter()) == null || e.toggleStyle("alignCenter");
}), this.editor.on("align_right", () => {
var t, e;
(e = (t = this.editor) == null ? void 0 : t.getTextFormatter()) == null || e.toggleStyle("alignRight");
}), this.editor.on("align_justify", () => {
var t, e;
(e = (t = this.editor) == null ? void 0 : t.getTextFormatter()) == null || e.toggleStyle("alignJustify");
}), this.editor.on("selectionchange", () => {
this.handleSelectionChange();
});
}
addToolbarButtons() {
var e;
const i = (e = this.editor) == null ? void 0 : e.getToolbar();
if (!i) return;
[
{ icon: y, title: "Align Left", command: "alignLeft" },
{ icon: u, title: "Align Center", command: "alignCenter" },
{ icon: p, title: "Align Right", command: "alignRight" },
{ icon: C, title: "Align Justify", command: "alignJustify" }
].forEach(({ icon: n, title: o, command: s }) => {
var g;
const a = f({
icon: n,
title: ((g = this.editor) == null ? void 0 : g.t(o)) || o,
onClick: () => {
var c, h;
(h = (c = this.editor) == null ? void 0 : c.getTextFormatter()) == null || h.toggleStyle(s), this.handleSelectionChange();
}
});
i.appendChild(a), this.toolbarButtons.set(s, a);
});
}
handleSelectionChange() {
this.toolbarButtons.forEach((i, t) => {
var n, o;
((o = (n = this.editor) == null ? void 0 : n.getTextFormatter()) == null ? void 0 : o.hasClass(t)) ? i.classList.add("active") : i.classList.remove("active");
});
}
destroy() {
var i, t, e, n, o;
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"), (n = this.editor) == null || n.off("align_right"), (o = this.editor) == null || o.off("align_justify"), this.editor = null;
}
}
export {
v as AlignmentPlugin
};