@uva-glass/component-library 1.49.0 → 1.50.1

package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.d.ts

@@ -0,0 +1,6 @@
+interface BlockFormatPluginProps {
+    isBold: boolean;
+    isItalic: boolean;
+}
+export declare const BlockFormatPlugin: ({ isBold, isItalic }: BlockFormatPluginProps) => JSX.Element;
+export {};

package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js

@@ -0,0 +1,32 @@
+import { jsx as r } from "react/jsx-runtime";
+import { u as m, d as n } from "../../../../Lexical.prod-DSsdOWxu.js";
+import { c as s } from "../../../../clsx-OuTLNxxd.js";
+import { Icon as d } from "../../../Icon/Icon.js";
+import { s as t } from "../../../../RteEditor.module-RkKUrkOO.js";
+const b = {
+  bold: "FormatBold",
+  italic: "FormatItalic"
+}, e = ["bold", "italic"], p = ({ isBold: i, isItalic: a }) => {
+  const [l] = m(), c = (o) => {
+    l.dispatchCommand(n, o);
+  };
+  return /* @__PURE__ */ r("div", { className: t["editor__toolbar-button-group"], children: e.map((o) => /* @__PURE__ */ r(
+    "button",
+    {
+      onClick: () => c(o),
+      className: s(
+        t["editor__toolbar-button"],
+        t[`editor__toolbar-button--${o}`],
+        o === "bold" && i && t["editor__toolbar-button--active"],
+        o === "italic" && a && t["editor__toolbar-button--active"]
+      ),
+      "aria-label": `Format ${o}`,
+      children: /* @__PURE__ */ r(d, { name: b[o], size: 20 })
+    },
+    o
+  )) });
+};
+export {
+  p as BlockFormatPlugin
+};
+//# sourceMappingURL=BlockFormatPlugin.js.map

package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockFormatPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport clsx from 'clsx';\nimport { FORMAT_TEXT_COMMAND } from 'lexical';\n\nimport { Icon } from 'components/Icon';\nimport styles from 'components/RteEditor/RteEditor.module.css';\n\ntype BlockTypesType = 'bold' | 'italic';\nconst BLOCK_TYPE_ICONS = {\n  bold: 'FormatBold',\n  italic: 'FormatItalic',\n};\n\ninterface BlockFormatPluginProps {\n  isBold: boolean;\n  isItalic: boolean;\n}\n\nconst BlockTypes = ['bold', 'italic'];\n\nexport const BlockFormatPlugin = ({ isBold, isItalic }: BlockFormatPluginProps): JSX.Element => {\n  const [editor] = useLexicalComposerContext();\n  const onClick = (type: BlockTypesType): void => {\n    editor.dispatchCommand(FORMAT_TEXT_COMMAND, type);\n  };\n\n  return (\n    <div className={styles['editor__toolbar-button-group']}>\n      {BlockTypes.map((type) => (\n        <button\n          onClick={() => onClick(type as BlockTypesType)}\n          key={type}\n          className={clsx(\n            styles['editor__toolbar-button'],\n            styles[`editor__toolbar-button--${type}`],\n            type === 'bold' && isBold && styles['editor__toolbar-button--active'],\n            type === 'italic' && isItalic && styles['editor__toolbar-button--active']\n          )}\n          aria-label={`Format ${type}`}\n        >\n          <Icon name={BLOCK_TYPE_ICONS[type as keyof typeof Icon]} size={20} />\n        </button>\n      ))}\n    </div>\n  );\n};\n"],"names":["BLOCK_TYPE_ICONS","BlockTypes","BlockFormatPlugin","isBold","isItalic","editor","useLexicalComposerContext","onClick","type","FORMAT_TEXT_COMMAND","jsx","styles","clsx","Icon"],"mappings":";;;;;AAQA,MAAMA,IAAmB;AAAA,EACvB,MAAM;AAAA,EACN,QAAQ;AACV,GAOMC,IAAa,CAAC,QAAQ,QAAQ,GAEvBC,IAAoB,CAAC,EAAE,QAAAC,GAAQ,UAAAC,QAAoD;AACxF,QAAA,CAACC,CAAM,IAAIC,KACXC,IAAU,CAACC,MAA+B;AACvC,IAAAH,EAAA,gBAAgBI,GAAqBD,CAAI;AAAA,EAAA;AAIhD,SAAA,gBAAAE,EAAC,SAAI,WAAWC,EAAO,8BAA8B,GAClD,UAAAV,EAAW,IAAI,CAACO,MACf,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,MAAMH,EAAQC,CAAsB;AAAA,MAE7C,WAAWI;AAAA,QACTD,EAAO,wBAAwB;AAAA,QAC/BA,EAAO,2BAA2BH,CAAI,EAAE;AAAA,QACxCA,MAAS,UAAUL,KAAUQ,EAAO,gCAAgC;AAAA,QACpEH,MAAS,YAAYJ,KAAYO,EAAO,gCAAgC;AAAA,MAC1E;AAAA,MACA,cAAY,UAAUH,CAAI;AAAA,MAE1B,4BAACK,GAAK,EAAA,MAAMb,EAAiBQ,CAAyB,GAAG,MAAM,IAAI;AAAA,IAAA;AAAA,IAT9DA;AAAA,EAWR,CAAA,EACH,CAAA;AAEJ;"}

package/dist/components/RteEditor/Plugins/BlockFormatPlugin/index.d.ts

@@ -0,0 +1 @@
+export * from './BlockFormatPlugin';

package/dist/components/RteEditor/Plugins/BlockFormatPlugin/index.js

@@ -0,0 +1,5 @@
+import { BlockFormatPlugin as l } from "./BlockFormatPlugin.js";
+export {
+  l as BlockFormatPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/components/RteEditor/Plugins/BlockFormatPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.d.ts

@@ -0,0 +1,6 @@
+interface ListPluginProps {
+    isOList: boolean;
+    isUList: boolean;
+}
+export declare const ListPlugin: ({ isOList, isUList }: ListPluginProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js

@@ -0,0 +1,11 @@
+import "react/jsx-runtime";
+import "../../../../Lexical.prod-DSsdOWxu.js";
+import { L as a } from "../../../../ListPlugin-Bu2AbCDB.js";
+import "react";
+import "../../../../clsx-OuTLNxxd.js";
+import "../../../Icon/Icon.js";
+import "../../../../RteEditor.module-RkKUrkOO.js";
+export {
+  a as ListPlugin
+};
+//# sourceMappingURL=ListPlugin.js.map

package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListPlugin.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/RteEditor/Plugins/ListPlugin/index.d.ts

@@ -0,0 +1 @@
+export * from './ListPlugin';

package/dist/components/RteEditor/Plugins/ListPlugin/index.js

@@ -0,0 +1,5 @@
+import { L as r } from "../../../../ListPlugin-Bu2AbCDB.js";
+export {
+  r as ListPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/components/RteEditor/Plugins/ListPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.d.ts

@@ -0,0 +1 @@
+export declare const ToolBarPlugin: () => JSX.Element;

package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js

@@ -0,0 +1,38 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { u as I, I as h, m as L } from "../../../../Lexical.prod-DSsdOWxu.js";
+import { useState as e, useCallback as N, useEffect as b } from "react";
+import { H as B, L as P } from "../../../../ListPlugin-Bu2AbCDB.js";
+import { BlockFormatPlugin as x } from "../BlockFormatPlugin/BlockFormatPlugin.js";
+import { s as F } from "../../../../RteEditor.module-RkKUrkOO.js";
+const w = () => {
+  const [a] = I(), [c, f] = e(!1), [m, u] = e(!1), [d, o] = e(!1), [g, r] = e(!1), l = N(() => {
+    const s = h();
+    if (L(s)) {
+      f(s.hasFormat("bold")), u(s.hasFormat("italic"));
+      let t = s.anchor.getNode();
+      for (; t !== null; ) {
+        if (B(t)) {
+          const i = t.getTag();
+          o(i === "ul"), r(i === "ol");
+          return;
+        }
+        t = t.getParent();
+      }
+      o(!1), r(!1);
+    }
+  }, []);
+  return b(() => {
+    a.registerUpdateListener(({ editorState: s }) => {
+      s.read(() => {
+        l();
+      });
+    });
+  }, [a, l]), /* @__PURE__ */ p("div", { className: F.editor__toolbar, children: [
+    /* @__PURE__ */ n(x, { isBold: c, isItalic: m }),
+    /* @__PURE__ */ n(P, { isUList: d, isOList: g })
+  ] });
+};
+export {
+  w as ToolBarPlugin
+};
+//# sourceMappingURL=ToolbarPlugin.js.map

package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { $getSelection, $isRangeSelection } from 'lexical';\nimport { useCallback, useEffect, useState } from 'react';\nimport { $isListNode } from '@lexical/list';\n\nimport type { ElementNode, TextNode } from 'lexical';\n\nimport { BlockFormatPlugin, ListPlugin } from 'components/RteEditor/Plugins';\nimport styles from 'components/RteEditor/RteEditor.module.css';\n\nexport const ToolBarPlugin = (): JSX.Element => {\n  const [editor] = useLexicalComposerContext();\n  const [isBold, setIsBold] = useState(false);\n  const [isItalic, setIsItalic] = useState(false);\n  const [isUList, setIsUList] = useState(false);\n  const [isOList, setIsOList] = useState(false);\n\n  const updateToolbar = useCallback(() => {\n    const selection = $getSelection();\n    if ($isRangeSelection(selection)) {\n      setIsBold(selection.hasFormat('bold'));\n      setIsItalic(selection.hasFormat('italic'));\n\n      const anchorNode = selection.anchor.getNode();\n      let currentNode: TextNode | ElementNode | null = anchorNode;\n      while (currentNode !== null) {\n        if ($isListNode(currentNode)) {\n          const tag = currentNode.getTag();\n          tag === 'ul' ? setIsUList(true) : setIsUList(false);\n          tag === 'ol' ? setIsOList(true) : setIsOList(false);\n          return;\n        }\n        currentNode = currentNode.getParent();\n      }\n      setIsUList(false);\n      setIsOList(false);\n    }\n  }, []);\n\n  useEffect(() => {\n    editor.registerUpdateListener(({ editorState }) => {\n      editorState.read(() => {\n        updateToolbar();\n      });\n    });\n  }, [editor, updateToolbar]);\n\n  return (\n    <div className={styles['editor__toolbar']}>\n      <BlockFormatPlugin isBold={isBold} isItalic={isItalic} />\n      <ListPlugin isUList={isUList} isOList={isOList} />\n    </div>\n  );\n};\n"],"names":["ToolBarPlugin","editor","useLexicalComposerContext","isBold","setIsBold","useState","isItalic","setIsItalic","isUList","setIsUList","isOList","setIsOList","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","currentNode","$isListNode","tag","useEffect","editorState","jsxs","styles","jsx","BlockFormatPlugin","ListPlugin"],"mappings":";;;;;;AAUO,MAAMA,IAAgB,MAAmB;AACxC,QAAA,CAACC,CAAM,IAAIC,KACX,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAK,GACxC,CAACG,GAASC,CAAU,IAAIJ,EAAS,EAAK,GACtC,CAACK,GAASC,CAAU,IAAIN,EAAS,EAAK,GAEtCO,IAAgBC,EAAY,MAAM;AACtC,UAAMC,IAAYC;AACd,QAAAC,EAAkBF,CAAS,GAAG;AACtB,MAAAV,EAAAU,EAAU,UAAU,MAAM,CAAC,GACzBP,EAAAO,EAAU,UAAU,QAAQ,CAAC;AAGzC,UAAIG,IADeH,EAAU,OAAO,QAAQ;AAE5C,aAAOG,MAAgB,QAAM;AACvB,YAAAC,EAAYD,CAAW,GAAG;AACtB,gBAAAE,IAAMF,EAAY;AACxB,UAAeR,EAAfU,MAAQ,IAAsB,GACfR,EAAfQ,MAAQ,IAAsB;AAC9B;AAAA,QACF;AACA,QAAAF,IAAcA,EAAY;MAC5B;AACA,MAAAR,EAAW,EAAK,GAChBE,EAAW,EAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAE,CAAA;AAEL,SAAAS,EAAU,MAAM;AACd,IAAAnB,EAAO,uBAAuB,CAAC,EAAE,aAAAoB,QAAkB;AACjD,MAAAA,EAAY,KAAK,MAAM;AACP,QAAAT;MAAA,CACf;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAACX,GAAQW,CAAa,CAAC,GAGvB,gBAAAU,EAAA,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAkB,QAAAtB,GAAgB,UAAAG,EAAoB,CAAA;AAAA,IACvD,gBAAAkB,EAACE,GAAW,EAAA,SAAAlB,GAAkB,SAAAE,EAAkB,CAAA;AAAA,EAClD,EAAA,CAAA;AAEJ;"}

package/dist/components/RteEditor/Plugins/ToolbarPlugin/index.d.ts

@@ -0,0 +1 @@
+export * from './ToolbarPlugin';

package/dist/components/RteEditor/Plugins/ToolbarPlugin/index.js

@@ -0,0 +1,5 @@
+import { ToolBarPlugin as l } from "./ToolbarPlugin.js";
+export {
+  l as ToolBarPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/components/RteEditor/Plugins/ToolbarPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/RteEditor/Plugins/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ToolbarPlugin';
+export * from './BlockFormatPlugin';
+export * from './ListPlugin';

package/dist/components/RteEditor/Plugins/index.js

@@ -0,0 +1,9 @@
+import { ToolBarPlugin as l } from "./ToolbarPlugin/ToolbarPlugin.js";
+import { BlockFormatPlugin as i } from "./BlockFormatPlugin/BlockFormatPlugin.js";
+import { L as a } from "../../../ListPlugin-Bu2AbCDB.js";
+export {
+  i as BlockFormatPlugin,
+  a as ListPlugin,
+  l as ToolBarPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/components/RteEditor/Plugins/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/RteEditor/RteEditor.d.ts

@@ -0,0 +1,7 @@
+export interface RteEditorProps {
+    namespace?: string;
+    initialValue?: string;
+    placeholder?: string;
+    onChange: (content: string) => void;
+}
+export declare const RteEditor: ({ namespace, initialValue, placeholder, onChange, }: RteEditorProps) => import("react/jsx-runtime").JSX.Element;