@thebuoyant-tsdev/mui-ts-library 3.22.0 → 3.25.0

package/dist/components/rich-text-editor/RichTextEditorToolbar.js

@@ -3,38 +3,38 @@ import { RichTextEditorLinkDialog as t } from "./RichTextEditorLinkDialog.js";
 import { RichTextEditorColorPicker as n } from "./RichTextEditorColorPicker.js";
 import { RichTextEditorTableMenu as r } from "./RichTextEditorTableMenu.js";
 import { RichTextEditorImageDialog as i } from "./RichTextEditorImageDialog.js";
-import { RichTextEditorEmojiPicker as ee } from "./RichTextEditorEmojiPicker.js";
-import { RichTextEditorMarkdownDialog as te } from "./RichTextEditorMarkdownDialog.js";
-import { useState as a } from "react";
-import { Box as o, Divider as ne, IconButton as s, Tooltip as c } from "@mui/material";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import f from "@mui/icons-material/Undo";
+import { RichTextEditorEmojiPicker as a } from "./RichTextEditorEmojiPicker.js";
+import { RichTextEditorMarkdownDialog as ee } from "./RichTextEditorMarkdownDialog.js";
+import { useState as o } from "react";
+import { Box as s, Divider as te, IconButton as c, Tooltip as l } from "@mui/material";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import ne from "@mui/icons-material/Undo";
 import re from "@mui/icons-material/Redo";
 import ie from "@mui/icons-material/Fullscreen";
-import ae from "@mui/icons-material/FullscreenExit";
-import oe from "@mui/icons-material/Image";
-import se from "@mui/icons-material/EmojiEmotions";
-import ce from "@mui/icons-material/FormatBold";
-import le from "@mui/icons-material/FormatItalic";
-import ue from "@mui/icons-material/FormatUnderlined";
-import de from "@mui/icons-material/StrikethroughS";
-import p from "@mui/icons-material/FormatListBulleted";
+import p from "@mui/icons-material/FullscreenExit";
+import ae from "@mui/icons-material/Image";
+import oe from "@mui/icons-material/EmojiEmotions";
+import se from "@mui/icons-material/FormatBold";
+import ce from "@mui/icons-material/FormatItalic";
+import le from "@mui/icons-material/FormatUnderlined";
+import ue from "@mui/icons-material/StrikethroughS";
+import de from "@mui/icons-material/FormatListBulleted";
 import m from "@mui/icons-material/FormatListNumbered";
 import fe from "@mui/icons-material/FormatQuote";
 import pe from "@mui/icons-material/Code";
 import me from "@mui/icons-material/InsertLink";
-import he from "@mui/icons-material/HorizontalRule";
-import h from "@mui/icons-material/FormatColorText";
-import g from "@mui/icons-material/BorderColor";
-import _ from "@mui/icons-material/FormatClear";
-import v from "@mui/icons-material/ContentPaste";
-import y from "@mui/icons-material/ContentPasteOff";
+import h from "@mui/icons-material/HorizontalRule";
+import g from "@mui/icons-material/FormatColorText";
+import _ from "@mui/icons-material/BorderColor";
+import v from "@mui/icons-material/FormatClear";
+import he from "@mui/icons-material/ContentPaste";
+import ge from "@mui/icons-material/ContentPasteOff";
 //#region src/components/rich-text-editor/RichTextEditorToolbar.tsx
-function b({ label: e, icon: t, activeColor: n, disabled: r, onClick: i }) {
-	return /* @__PURE__ */ u(c, {
+function y({ label: e, icon: t, activeColor: n, disabled: r, onClick: i }) {
+	return /* @__PURE__ */ d(l, {
 		title: e,
 		arrow: !0,
-		children: /* @__PURE__ */ u("span", { children: /* @__PURE__ */ d(s, {
+		children: /* @__PURE__ */ d("span", { children: /* @__PURE__ */ f(c, {
 			size: "small",
 			onMouseDown: (e) => e.preventDefault(),
 			onClick: i,
@@ -46,13 +46,13 @@ function b({ label: e, icon: t, activeColor: n, disabled: r, onClick: i }) {
 				pb: .25
 			},
 			"aria-label": e,
-			children: [/* @__PURE__ */ u(o, {
+			children: [/* @__PURE__ */ d(s, {
 				sx: {
 					display: "flex",
 					alignItems: "center"
 				},
 				children: t
-			}), /* @__PURE__ */ u(o, { sx: {
+			}), /* @__PURE__ */ d(s, { sx: {
 				width: "80%",
 				height: 3,
 				bgcolor: n ?? "text.primary",
@@ -62,19 +62,31 @@ function b({ label: e, icon: t, activeColor: n, disabled: r, onClick: i }) {
 		}) })
 	});
 }
-function x({ level: e }) {
-	return /* @__PURE__ */ d(o, {
-		component: "span",
-		sx: {
-			fontWeight: "bold",
-			fontSize: "0.875rem",
-			lineHeight: 1
-		},
-		children: ["H", e]
+function b({ text: e }) {
+	return /* @__PURE__ */ d("svg", {
+		width: "20",
+		height: "20",
+		viewBox: "0 0 20 20",
+		"aria-hidden": "true",
+		style: { display: "block" },
+		children: /* @__PURE__ */ d("text", {
+			x: "10",
+			y: "10",
+			dominantBaseline: "central",
+			textAnchor: "middle",
+			fontSize: "10",
+			fontWeight: "500",
+			fontFamily: "inherit",
+			fill: "currentColor",
+			children: e
+		})
 	});
 }
+function x({ level: e }) {
+	return /* @__PURE__ */ d(b, { text: `H${e}` });
+}
 function S({ editor: S, toolbarConfig: C, translation: w, disabled: T, isFullscreen: E, onToggleFullscreen: D, pasteAsPlainText: O, onTogglePasteAsPlainText: k }) {
-	let [A, j] = a(!1), [M, N] = a(!1), [P, F] = a(!1), [I, L] = a(null), [R, z] = a(null), [B, V] = a(null), H = T || !S, U = S?.getAttributes("textStyle")?.color, W = S?.getAttributes("highlight")?.color, G = C.showBold || C.showItalic || C.showUnderline || C.showStrike, K = C.showHeading1 || C.showHeading2 || C.showHeading3, q = C.showBulletList || C.showOrderedList, J = C.showBlockquote || C.showCodeBlock || C.showLink || C.showHorizontalRule, Y = C.showTextColor || C.showHighlight, X = C.showUndoRedo || C.showClearFormat, Z = C.showTableButton || C.showImageButton || C.showEmojiButton, Q = [
+	let [A, j] = o(!1), [M, N] = o(!1), [P, F] = o(!1), [I, L] = o(null), [R, z] = o(null), [B, V] = o(null), H = T || !S, U = S?.getAttributes("textStyle")?.color, W = S?.getAttributes("highlight")?.color, G = C.showBold || C.showItalic || C.showUnderline || C.showStrike, K = C.showHeading1 || C.showHeading2 || C.showHeading3, q = C.showBulletList || C.showOrderedList, J = C.showBlockquote || C.showCodeBlock || C.showLink || C.showHorizontalRule, Y = C.showTextColor || C.showHighlight, X = C.showUndoRedo || C.showClearFormat, Z = C.showTableButton || C.showImageButton || C.showEmojiButton, Q = [
 		G,
 		K,
 		q,
@@ -82,16 +94,16 @@ function S({ editor: S, toolbarConfig: C, translation: w, disabled: T, isFullscr
 		Y,
 		X,
 		Z
-	], ge = Q.filter(Boolean).length;
+	], _e = Q.filter(Boolean).length;
 	function $(e, t) {
-		return !e || Q.slice(t + 1).findIndex(Boolean) === -1 ? null : /* @__PURE__ */ u(ne, {
+		return !e || Q.slice(t + 1).findIndex(Boolean) === -1 ? null : /* @__PURE__ */ d(te, {
 			orientation: "vertical",
 			flexItem: !0,
 			sx: { mx: .5 }
 		}, `div-${t}`);
 	}
-	return /* @__PURE__ */ d(l, { children: [
-		/* @__PURE__ */ d(o, {
+	return /* @__PURE__ */ f(u, { children: [
+		/* @__PURE__ */ f(s, {
 			sx: {
 				display: "flex",
 				flexWrap: "wrap",
@@ -103,36 +115,36 @@ function S({ editor: S, toolbarConfig: C, translation: w, disabled: T, isFullscr
 			role: "toolbar",
 			"aria-label": "Text formatting",
 			children: [
-				G && /* @__PURE__ */ d(o, {
+				G && /* @__PURE__ */ f(s, {
 					sx: {
 						display: "flex",
 						gap: .25
 					},
 					children: [
-						C.showBold && /* @__PURE__ */ u(e, {
+						C.showBold && /* @__PURE__ */ d(e, {
 							label: w.bold,
-							icon: /* @__PURE__ */ u(ce, { fontSize: "small" }),
+							icon: /* @__PURE__ */ d(se, { fontSize: "small" }),
 							onClick: () => S?.chain().focus().toggleBold().run(),
 							active: S?.isActive("bold"),
 							disabled: H
 						}),
-						C.showItalic && /* @__PURE__ */ u(e, {
+						C.showItalic && /* @__PURE__ */ d(e, {
 							label: w.italic,
-							icon: /* @__PURE__ */ u(le, { fontSize: "small" }),
+							icon: /* @__PURE__ */ d(ce, { fontSize: "small" }),
 							onClick: () => S?.chain().focus().toggleItalic().run(),
 							active: S?.isActive("italic"),
 							disabled: H
 						}),
-						C.showUnderline && /* @__PURE__ */ u(e, {
+						C.showUnderline && /* @__PURE__ */ d(e, {
 							label: w.underline,
-							icon: /* @__PURE__ */ u(ue, { fontSize: "small" }),
+							icon: /* @__PURE__ */ d(le, { fontSize: "small" }),
 							onClick: () => S?.chain().focus().toggleUnderline().run(),
 							active: S?.isActive("underline"),
 							disabled: H
 						}),
-						C.showStrike && /* @__PURE__ */ u(e, {
+						C.showStrike && /* @__PURE__ */ d(e, {
 							label: w.strike,
-							icon: /* @__PURE__ */ u(de, { fontSize: "small" }),
+							icon: /* @__PURE__ */ d(ue, { fontSize: "small" }),
 							onClick: () => S?.chain().focus().toggleStrike().run(),
 							active: S?.isActive("strike"),
 							disabled: H
@@ -140,29 +152,29 @@ function S({ editor: S, toolbarConfig: C, translation: w, disabled: T, isFullscr
 					]
 				}),
 				$(G, 0),
-				K && /* @__PURE__ */ d(o, {
+				K && /* @__PURE__ */ f(s, {
 					sx: {
 						display: "flex",
 						gap: .25
 					},
 					children: [
-						C.showHeading1 && /* @__PURE__ */ u(e, {
+						C.showHeading1 && /* @__PURE__ */ d(e, {
 							label: w.heading1,
-							icon: /* @__PURE__ */ u(x, { level: 1 }),
+							icon: /* @__PURE__ */ d(x, { level: 1 }),
 							onClick: () => S?.chain().focus().toggleHeading({ level: 1 }).run(),
 							active: S?.isActive("heading", { level: 1 }),
 							disabled: H
 						}),
-						C.showHeading2 && /* @__PURE__ */ u(e, {
+						C.showHeading2 && /* @__PURE__ */ d(e, {
 							label: w.heading2,
-							icon: /* @__PURE__ */ u(x, { level: 2 }),
+							icon: /* @__PURE__ */ d(x, { level: 2 }),
 							onClick: () => S?.chain().focus().toggleHeading({ level: 2 }).run(),
 							active: S?.isActive("heading", { level: 2 }),
 							disabled: H
 						}),
-						C.showHeading3 && /* @__PURE__ */ u(e, {
+						C.showHeading3 && /* @__PURE__ */ d(e, {
 							label: w.heading3,
-							icon: /* @__PURE__ */ u(x, { level: 3 }),
+							icon: /* @__PURE__ */ d(x, { level: 3 }),
 							onClick: () => S?.chain().focus().toggleHeading({ level: 3 }).run(),
 							active: S?.isActive("heading", { level: 3 }),
 							disabled: H
@@ -170,190 +182,182 @@ function S({ editor: S, toolbarConfig: C, translation: w, disabled: T, isFullscr
 					]
 				}),
 				$(K, 1),
-				q && /* @__PURE__ */ d(o, {
+				q && /* @__PURE__ */ f(s, {
 					sx: {
 						display: "flex",
 						gap: .25
 					},
-					children: [C.showBulletList && /* @__PURE__ */ u(e, {
+					children: [C.showBulletList && /* @__PURE__ */ d(e, {
 						label: w.bulletList,
-						icon: /* @__PURE__ */ u(p, { fontSize: "small" }),
+						icon: /* @__PURE__ */ d(de, { fontSize: "small" }),
 						onClick: () => S?.chain().focus().toggleBulletList().run(),
 						active: S?.isActive("bulletList"),
 						disabled: H
-					}), C.showOrderedList && /* @__PURE__ */ u(e, {
+					}), C.showOrderedList && /* @__PURE__ */ d(e, {
 						label: w.orderedList,
-						icon: /* @__PURE__ */ u(m, { fontSize: "small" }),
+						icon: /* @__PURE__ */ d(m, { fontSize: "small" }),
 						onClick: () => S?.chain().focus().toggleOrderedList().run(),
 						active: S?.isActive("orderedList"),
 						disabled: H
 					})]
 				}),
 				$(q, 2),
-				J && /* @__PURE__ */ d(o, {
+				J && /* @__PURE__ */ f(s, {
 					sx: {
 						display: "flex",
 						gap: .25
 					},
 					children: [
-						C.showBlockquote && /* @__PURE__ */ u(e, {
+						C.showBlockquote && /* @__PURE__ */ d(e, {
 							label: w.blockquote,
-							icon: /* @__PURE__ */ u(fe, { fontSize: "small" }),
+							icon: /* @__PURE__ */ d(fe, { fontSize: "small" }),
 							onClick: () => S?.chain().focus().toggleBlockquote().run(),
 							active: S?.isActive("blockquote"),
 							disabled: H
 						}),
-						C.showCodeBlock && /* @__PURE__ */ u(e, {
+						C.showCodeBlock && /* @__PURE__ */ d(e, {
 							label: w.codeBlock,
-							icon: /* @__PURE__ */ u(pe, { fontSize: "small" }),
+							icon: /* @__PURE__ */ d(pe, { fontSize: "small" }),
 							onClick: () => S?.chain().focus().toggleCodeBlock().run(),
 							active: S?.isActive("codeBlock"),
 							disabled: H
 						}),
-						C.showLink && /* @__PURE__ */ u(e, {
+						C.showLink && /* @__PURE__ */ d(e, {
 							label: w.link,
-							icon: /* @__PURE__ */ u(me, { fontSize: "small" }),
+							icon: /* @__PURE__ */ d(me, { fontSize: "small" }),
 							onClick: () => j(!0),
 							active: S?.isActive("link"),
 							disabled: H
 						}),
-						C.showHorizontalRule && /* @__PURE__ */ u(e, {
+						C.showHorizontalRule && /* @__PURE__ */ d(e, {
 							label: w.horizontalRule,
-							icon: /* @__PURE__ */ u(he, { fontSize: "small" }),
+							icon: /* @__PURE__ */ d(h, { fontSize: "small" }),
 							onClick: () => S?.chain().focus().setHorizontalRule().run(),
 							disabled: H
 						})
 					]
 				}),
 				$(J, 3),
-				Y && /* @__PURE__ */ d(o, {
+				Y && /* @__PURE__ */ f(s, {
 					sx: {
 						display: "flex",
 						gap: .25
 					},
-					children: [C.showTextColor && /* @__PURE__ */ u(b, {
+					children: [C.showTextColor && /* @__PURE__ */ d(y, {
 						label: w.textColor,
-						icon: /* @__PURE__ */ u(h, { fontSize: "small" }),
+						icon: /* @__PURE__ */ d(g, { fontSize: "small" }),
 						activeColor: U,
 						disabled: H,
 						onClick: (e) => z(e.currentTarget)
-					}), C.showHighlight && /* @__PURE__ */ u(b, {
+					}), C.showHighlight && /* @__PURE__ */ d(y, {
 						label: w.highlight,
-						icon: /* @__PURE__ */ u(g, { fontSize: "small" }),
+						icon: /* @__PURE__ */ d(_, { fontSize: "small" }),
 						activeColor: W,
 						disabled: H,
 						onClick: (e) => V(e.currentTarget)
 					})]
 				}),
 				$(Y, 4),
-				X && /* @__PURE__ */ d(o, {
+				X && /* @__PURE__ */ f(s, {
 					sx: {
 						display: "flex",
 						gap: .25
 					},
-					children: [C.showUndoRedo && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(e, {
+					children: [C.showUndoRedo && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(e, {
 						label: w.undo,
-						icon: /* @__PURE__ */ u(f, { fontSize: "small" }),
+						icon: /* @__PURE__ */ d(ne, { fontSize: "small" }),
 						onClick: () => S?.chain().focus().undo().run(),
 						disabled: H || !S?.can().undo()
-					}), /* @__PURE__ */ u(e, {
+					}), /* @__PURE__ */ d(e, {
 						label: w.redo,
-						icon: /* @__PURE__ */ u(re, { fontSize: "small" }),
+						icon: /* @__PURE__ */ d(re, { fontSize: "small" }),
 						onClick: () => S?.chain().focus().redo().run(),
 						disabled: H || !S?.can().redo()
-					})] }), C.showClearFormat && /* @__PURE__ */ u(e, {
+					})] }), C.showClearFormat && /* @__PURE__ */ d(e, {
 						label: w.clearFormat,
-						icon: /* @__PURE__ */ u(_, { fontSize: "small" }),
+						icon: /* @__PURE__ */ d(v, { fontSize: "small" }),
 						onClick: () => S?.chain().focus().clearNodes().unsetAllMarks().run(),
 						disabled: H
 					})]
 				}),
 				$(X, 5),
-				Z && /* @__PURE__ */ d(o, {
+				Z && /* @__PURE__ */ f(s, {
 					sx: {
 						display: "flex",
 						gap: .25
 					},
 					children: [
-						C.showTableButton && /* @__PURE__ */ u(r, {
+						C.showTableButton && /* @__PURE__ */ d(r, {
 							editor: S,
 							translation: w,
 							disabled: H
 						}),
-						C.showImageButton && /* @__PURE__ */ u(e, {
+						C.showImageButton && /* @__PURE__ */ d(e, {
 							label: w.image,
-							icon: /* @__PURE__ */ u(oe, { fontSize: "small" }),
+							icon: /* @__PURE__ */ d(ae, { fontSize: "small" }),
 							onClick: () => N(!0),
 							disabled: H
 						}),
-						C.showEmojiButton && /* @__PURE__ */ u(c, {
+						C.showEmojiButton && /* @__PURE__ */ d(l, {
 							title: w.emoji,
 							arrow: !0,
-							children: /* @__PURE__ */ u("span", { children: /* @__PURE__ */ u(s, {
+							children: /* @__PURE__ */ d("span", { children: /* @__PURE__ */ d(c, {
 								size: "small",
 								onMouseDown: (e) => e.preventDefault(),
 								onClick: (e) => L(e.currentTarget),
 								disabled: H,
 								sx: { borderRadius: 1 },
 								"aria-label": w.emoji,
-								children: /* @__PURE__ */ u(se, { fontSize: "small" })
+								children: /* @__PURE__ */ d(oe, { fontSize: "small" })
 							}) })
 						})
 					]
 				}),
-				ge === 0 && /* @__PURE__ */ u(o, { sx: { height: 32 } }),
-				(C.showPasteAsPlainTextButton || C.showMarkdownButton || C.showFullscreenButton) && /* @__PURE__ */ d(o, {
+				_e === 0 && /* @__PURE__ */ d(s, { sx: { height: 32 } }),
+				(C.showPasteAsPlainTextButton || C.showMarkdownButton || C.showFullscreenButton) && /* @__PURE__ */ f(s, {
 					sx: {
 						ml: "auto",
 						display: "flex",
 						gap: .25
 					},
 					children: [
-						C.showPasteAsPlainTextButton && /* @__PURE__ */ u(e, {
+						C.showPasteAsPlainTextButton && /* @__PURE__ */ d(e, {
 							label: O ? w.pasteAsHtml : w.pasteAsPlainText,
-							icon: u(O ? y : v, { fontSize: "small" }),
+							icon: d(O ? ge : he, { fontSize: "small" }),
 							onClick: k,
 							active: O,
 							disabled: T || !S
 						}),
-						C.showMarkdownButton && /* @__PURE__ */ u(e, {
+						C.showMarkdownButton && /* @__PURE__ */ d(e, {
 							label: w.markdown,
-							icon: /* @__PURE__ */ u(o, {
-								component: "span",
-								sx: {
-									fontWeight: "bold",
-									fontSize: "0.7rem",
-									lineHeight: 1
-								},
-								children: "MD"
-							}),
+							icon: /* @__PURE__ */ d(b, { text: "MD" }),
 							onClick: () => F(!0),
 							disabled: T || !S
 						}),
-						C.showFullscreenButton && /* @__PURE__ */ u(c, {
+						C.showFullscreenButton && /* @__PURE__ */ d(l, {
 							title: E ? w.exitFullscreen : w.fullscreen,
 							arrow: !0,
-							children: /* @__PURE__ */ u("span", { children: /* @__PURE__ */ u(s, {
+							children: /* @__PURE__ */ d("span", { children: /* @__PURE__ */ d(c, {
 								size: "small",
 								onMouseDown: (e) => e.preventDefault(),
 								onClick: D,
 								disabled: T || !S,
 								sx: { borderRadius: 1 },
 								"aria-label": E ? w.exitFullscreen : w.fullscreen,
-								children: u(E ? ae : ie, { fontSize: "small" })
+								children: d(E ? p : ie, { fontSize: "small" })
 							}) })
 						})
 					]
 				})
 			]
 		}),
-		C.showLink && S && /* @__PURE__ */ u(t, {
+		C.showLink && S && /* @__PURE__ */ d(t, {
 			open: A,
 			onClose: () => j(!1),
 			editor: S,
 			translation: w
 		}),
-		C.showTextColor && /* @__PURE__ */ u(n, {
+		C.showTextColor && /* @__PURE__ */ d(n, {
 			anchorEl: R,
 			open: !!R,
 			onClose: () => z(null),
@@ -363,7 +367,7 @@ function S({ editor: S, toolbarConfig: C, translation: w, disabled: T, isFullscr
 			onRemoveColor: () => S?.chain().focus().unsetColor().run(),
 			removeLabel: w.removeTextColor
 		}),
-		C.showHighlight && /* @__PURE__ */ u(n, {
+		C.showHighlight && /* @__PURE__ */ d(n, {
 			anchorEl: B,
 			open: !!B,
 			onClose: () => V(null),
@@ -373,19 +377,19 @@ function S({ editor: S, toolbarConfig: C, translation: w, disabled: T, isFullscr
 			onRemoveColor: () => S?.chain().focus().unsetHighlight().run(),
 			removeLabel: w.removeHighlight
 		}),
-		C.showImageButton && S && /* @__PURE__ */ u(i, {
+		C.showImageButton && S && /* @__PURE__ */ d(i, {
 			open: M,
 			onClose: () => N(!1),
 			editor: S,
 			translation: w
 		}),
-		C.showMarkdownButton && S && /* @__PURE__ */ u(te, {
+		C.showMarkdownButton && S && /* @__PURE__ */ d(ee, {
 			open: P,
 			onClose: () => F(!1),
 			editor: S,
 			translation: w
 		}),
-		C.showEmojiButton && /* @__PURE__ */ u(ee, {
+		C.showEmojiButton && /* @__PURE__ */ d(a, {
 			anchorEl: I,
 			open: !!I,
 			onClose: () => L(null),