@uva-glass/component-library/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js

React components UvA

import { jsx as s } from "react/jsx-runtime";
import { o as u } from "../../../../LexicalComposerContext.prod-DLlRM5wP.js";
import { c as f } from "../../../../clsx-OuTLNxxd.js";
import { a as _, c as p, P as h } from "../../../../Lexical.prod-CWyHQUEM.js";
import { useState as l, useEffect as k } from "react";
import { Icon as I } from "../../../Icon/Icon.js";
import { s as a } from "../../../../RteEditor.module-oFMKEW6f.js";
import { useTranslation as B } from "../../hooks/useTranslation.js";
const C = {
  bold: "Bold",
  italic: "Italic"
}, T = ["bold", "italic"], $ = () => {
  const t = B(), [i] = u(), [c, e] = l(!1), [n, m] = l(!1), d = (o) => {
    i.dispatchCommand(h, o);
  };
  return k(() => {
    const o = i.registerUpdateListener(({ editorState: b }) => {
      b.read(() => {
        const r = _();
        p(r) && (e(r.hasFormat("bold")), m(r.hasFormat("italic")));
      });
    });
    return () => {
      o();
    };
  }, [i]), /* @__PURE__ */ s("div", { className: a["editor__toolbar-button-group"], children: T.map((o) => /* @__PURE__ */ s(
    "button",
    {
      onClick: () => d(o),
      title: o === "bold" ? t.format.boldTooltip : t.format.italicTooltip,
      className: f(
        a["editor__toolbar-button"],
        a[`editor__toolbar-button--${o}`],
        o === "bold" && c && a["editor__toolbar-button--active"],
        o === "italic" && n && a["editor__toolbar-button--active"]
      ),
      "aria-label": `${o === "bold" ? t.aria.labels.bold : t.aria.labels.italic}`,
      "aria-keyshortcuts": `${o === "bold" ? t.aria.keyshortcuts.bold : t.aria.keyshortcuts.italic}`,
      type: "button",
      children: /* @__PURE__ */ s(I, { name: C[o], size: 24 })
    },
    o
  )) });
};
export {
  $ as BlockFormatPlugin
};
//# sourceMappingURL=BlockFormatPlugin.js.map