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
157 lines (156 loc) • 6.12 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 C = Object.defineProperty;
var T = (n, t, o) => t in n ? C(n, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : n[t] = o;
var e = (n, t, o) => T(n, typeof t != "symbol" ? t + "" : t, o);
import P from "../../icons/bold.svg.mjs";
import v from "../../icons/italic.svg.mjs";
import B from "../../icons/font-size.svg.mjs";
import z from "../../icons/underline.svg.mjs";
import E from "../../icons/strikethrough.svg.mjs";
import { createToolbarButton as b } from "../ToolbarPlugin/utils.mjs";
import { DEFAULT_FONT_SIZES as k, DEFAULT_LINE_HEIGHTS as A, DEFAULT_FONT_FAMILIES as I } from "./constants.mjs";
import { PopupManager as x } from "../../core/ui/PopupManager.mjs";
class V {
constructor() {
e(this, "name", "font");
e(this, "hotkeys", [
{
keys: "Ctrl+Shift+F",
description: "Change font style",
command: "font-style",
icon: "🔤"
}
]);
e(this, "editor", null);
e(this, "toolbarButtons", /* @__PURE__ */ new Map());
e(this, "fontButtons", /* @__PURE__ */ new Map());
e(this, "fontPopup", null);
e(this, "fontFamilies", []);
e(this, "font", "Arial");
e(this, "size", "16px");
e(this, "lineHeight", "normal");
}
initialize(t) {
this.editor = t, this.fontFamilies = this.getAvailableFonts(), this.fontPopup = new x(t, {
title: t.t("Font Settings"),
className: "font-popup",
closeOnClickOutside: !0,
items: [
{
type: "list",
id: "font-family",
label: t.t("Font Family"),
options: this.fontFamilies,
value: this.font,
onChange: (o) => this.font = o.toString()
},
{
type: "list",
id: "font-size",
label: t.t("Font Size"),
options: k,
value: this.size,
onChange: (o) => this.size = o.toString()
},
{
type: "list",
id: "line-height",
label: t.t("Line Height"),
options: A,
value: this.lineHeight,
onChange: (o) => this.lineHeight = o.toString()
}
],
buttons: [
{
label: t.t("Confirm"),
variant: "primary",
onClick: () => this.applyFontSettings()
},
{
label: t.t("Clear"),
variant: "danger",
onClick: () => this.clearFontSettings()
},
{
label: t.t("Cancel"),
variant: "secondary",
onClick: () => {
var o;
return (o = this.fontPopup) == null ? void 0 : o.hide();
}
}
]
}), this.addToolbarButtons(), this.editor.on("selectionchange", () => this.handleSelectionChange()), this.editor.on("font", () => {
var o;
(o = this.fontPopup) == null || o.show();
});
}
addToolbarButtons() {
var o, i;
const t = (o = this.editor) == null ? void 0 : o.getToolbar();
if (t) {
[
{ icon: P, title: "Bold", style: "bold" },
{ icon: v, title: "Italic", style: "italic" },
{ icon: z, title: "Underline", style: "underline" },
{ icon: E, title: "Strikethrough", style: "strikethrough" }
].forEach(({ icon: a, title: r, style: s }) => {
const h = b({
icon: a,
title: r,
onClick: () => {
var f, p;
(p = (f = this.editor) == null ? void 0 : f.getTextFormatter()) == null || p.toggleStyle(s), this.handleSelectionChange();
}
});
t.appendChild(h), this.toolbarButtons.set(s, h);
});
const l = b({
icon: B,
title: (i = this.editor) == null ? void 0 : i.t("Font Settings"),
onClick: () => {
var h, f, p, u, g, d, m, F, S, y;
let a = (f = (h = this.editor) == null ? void 0 : h.getTextFormatter()) == null ? void 0 : f.getStyle("fontFamily");
a === "" && (a = null), (p = this.fontPopup) == null || p.setValue("font-family", a ?? "Arial");
let r = (g = (u = this.editor) == null ? void 0 : u.getTextFormatter()) == null ? void 0 : g.getStyle("fontSize");
r === "" && (r = null), (d = this.fontPopup) == null || d.setValue("font-size", r ?? "16px");
let s = (F = (m = this.editor) == null ? void 0 : m.getTextFormatter()) == null ? void 0 : F.getStyle("lineHeight");
s === "" && (s = null), (S = this.fontPopup) == null || S.setValue("line-height", s ?? "normal"), (y = this.fontPopup) == null || y.show();
}
});
t.appendChild(l), this.fontButtons.set("fontSize", l);
}
}
handleSelectionChange() {
this.toolbarButtons.forEach((t, o) => {
var c, l;
((l = (c = this.editor) == null ? void 0 : c.getTextFormatter()) == null ? void 0 : l.hasClass(o)) ? t.classList.add("active") : t.classList.remove("active");
});
}
getAvailableFonts() {
const t = this.getLoadedFonts();
return [.../* @__PURE__ */ new Set([...I, ...t])];
}
getLoadedFonts() {
const t = /* @__PURE__ */ new Set();
return document.fonts.forEach((o) => {
t.add(o.family);
}), Array.from(t);
}
applyFontSettings() {
var t, o;
(o = (t = this.editor) == null ? void 0 : t.getTextFormatter()) == null || o.setFont(this.font, this.size, this.lineHeight), this.fontPopup && this.fontPopup.hide();
}
clearFontSettings() {
var t, o;
(o = (t = this.editor) == null ? void 0 : t.getTextFormatter()) == null || o.clearFont(), this.fontPopup && this.fontPopup.hide();
}
destroy() {
var t, o;
this.toolbarButtons.forEach((i) => i.remove()), this.toolbarButtons.clear(), this.fontButtons.forEach((i) => i.remove()), this.fontButtons.clear(), (t = this.editor) == null || t.off("selectionchange"), (o = this.fontPopup) == null || o.destroy(), this.fontPopup = null, this.editor = null;
}
}
export {
V as FontPlugin
};