on-codemerge/dist/src/plugins/FontPlugin/index.mjs

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

var b = Object.defineProperty;
var C = (s, t, o) => t in s ? b(s, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : s[t] = o;
var e = (s, t, o) => C(s, typeof t != "symbol" ? t + "" : t, o);
import P from "../../icons/bold.svg.mjs";
import T from "../../icons/italic.svg.mjs";
import v from "../../icons/font-size.svg.mjs";
import B from "../../icons/underline.svg.mjs";
import z from "../../icons/strikethrough.svg.mjs";
import { createToolbarButton as y } from "../ToolbarPlugin/utils.mjs";
import { DEFAULT_FONT_SIZES as E, DEFAULT_LINE_HEIGHTS as k, DEFAULT_FONT_FAMILIES as A } from "./constants.mjs";
import { PopupManager as I } from "../../core/ui/PopupManager.mjs";
class D {
  constructor() {
    e(this, "name", "font");
    e(this, "hotkeys", [
      {
        keys: "Ctrl+Shift+G",
        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 I(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: E,
          value: this.size,
          onChange: (o) => this.size = o.toString()
        },
        {
          type: "list",
          id: "line-height",
          label: t.t("Line Height"),
          options: k,
          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 a;
    const t = document.querySelector(".editor-toolbar");
    if (!t) return;
    [
      { icon: P, title: "Bold", style: "bold" },
      { icon: T, title: "Italic", style: "italic" },
      { icon: B, title: "Underline", style: "underline" },
      { icon: z, title: "Strikethrough", style: "strikethrough" }
    ].forEach(({ icon: i, title: r, style: l }) => {
      const h = y({
        icon: i,
        title: r,
        onClick: () => {
          var f, c;
          (c = (f = this.editor) == null ? void 0 : f.getTextFormatter()) == null || c.toggleStyle(l), this.handleSelectionChange();
        }
      });
      t.appendChild(h), this.toolbarButtons.set(l, h);
    });
    const n = y({
      icon: v,
      title: (a = this.editor) == null ? void 0 : a.t("Font Settings"),
      onClick: () => {
        var h, f, c, p, u, g, d, m, F, S;
        let i = (f = (h = this.editor) == null ? void 0 : h.getTextFormatter()) == null ? void 0 : f.getStyle("fontFamily");
        i === "" && (i = null), (c = this.fontPopup) == null || c.setValue("font-family", i ?? "Arial");
        let r = (u = (p = this.editor) == null ? void 0 : p.getTextFormatter()) == null ? void 0 : u.getStyle("fontSize");
        r === "" && (r = null), (g = this.fontPopup) == null || g.setValue("font-size", r ?? "16px");
        let l = (m = (d = this.editor) == null ? void 0 : d.getTextFormatter()) == null ? void 0 : m.getStyle("lineHeight");
        l === "" && (l = null), (F = this.fontPopup) == null || F.setValue("line-height", l ?? "normal"), (S = this.fontPopup) == null || S.show();
      }
    });
    t.appendChild(n), this.fontButtons.set("fontSize", n);
  }
  handleSelectionChange() {
    this.toolbarButtons.forEach((t, o) => {
      var a, i;
      ((i = (a = this.editor) == null ? void 0 : a.getTextFormatter()) == null ? void 0 : i.hasClass(o)) ? t.classList.add("active") : t.classList.remove("active");
    });
  }
  getAvailableFonts() {
    const t = this.getLoadedFonts();
    return [.../* @__PURE__ */ new Set([...A, ...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((n) => n.remove()), this.toolbarButtons.clear(), this.fontButtons.forEach((n) => n.remove()), this.fontButtons.clear(), (t = this.editor) == null || t.off("selectionchange"), (o = this.fontPopup) == null || o.destroy(), this.fontPopup = null, this.editor = null;
  }
}
export {
  D as FontPlugin
};