@thebuoyant-tsdev/mui-ts-library 3.2.0 → 3.4.0

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

@@ -0,0 +1,362 @@
+import { ToolbarButton as e } from "../shared/ToolbarButton.js";
+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 a } from "./RichTextEditorEmojiPicker.js";
+import { useState as o } from "react";
+import { Box as s, Divider as c, IconButton as l, Tooltip as u } from "@mui/material";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "@mui/icons-material/Undo";
+import h from "@mui/icons-material/Redo";
+import ee from "@mui/icons-material/Fullscreen";
+import g from "@mui/icons-material/FullscreenExit";
+import te from "@mui/icons-material/Image";
+import ne from "@mui/icons-material/EmojiEmotions";
+import re from "@mui/icons-material/FormatBold";
+import ie from "@mui/icons-material/FormatItalic";
+import ae from "@mui/icons-material/FormatUnderlined";
+import oe from "@mui/icons-material/StrikethroughS";
+import _ from "@mui/icons-material/FormatListBulleted";
+import v from "@mui/icons-material/FormatListNumbered";
+import y from "@mui/icons-material/FormatQuote";
+import se from "@mui/icons-material/Code";
+import b from "@mui/icons-material/InsertLink";
+import x from "@mui/icons-material/HorizontalRule";
+import S from "@mui/icons-material/FormatColorText";
+import C from "@mui/icons-material/BorderColor";
+import w from "@mui/icons-material/FormatClear";
+//#region src/components/rich-text-editor/RichTextEditorToolbar.tsx
+function T({ label: e, icon: t, activeColor: n, disabled: r, onClick: i }) {
+	return /* @__PURE__ */ f(u, {
+		title: e,
+		arrow: !0,
+		children: /* @__PURE__ */ f("span", { children: /* @__PURE__ */ p(l, {
+			size: "small",
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: i,
+			disabled: r,
+			sx: {
+				borderRadius: 1,
+				flexDirection: "column",
+				gap: 0,
+				pb: .25
+			},
+			"aria-label": e,
+			children: [/* @__PURE__ */ f(s, {
+				sx: {
+					display: "flex",
+					alignItems: "center"
+				},
+				children: t
+			}), /* @__PURE__ */ f(s, { sx: {
+				width: "80%",
+				height: 3,
+				bgcolor: n ?? "text.primary",
+				borderRadius: .5,
+				mt: "1px"
+			} })]
+		}) })
+	});
+}
+function E({ level: e }) {
+	return /* @__PURE__ */ p(s, {
+		component: "span",
+		sx: {
+			fontWeight: "bold",
+			fontSize: "0.875rem",
+			lineHeight: 1
+		},
+		children: ["H", e]
+	});
+}
+function D({ editor: D, toolbarConfig: O, translation: k, disabled: A, isFullscreen: j, onToggleFullscreen: ce }) {
+	let [M, N] = o(!1), [P, F] = o(!1), [I, L] = o(null), [R, z] = o(null), [B, V] = o(null), H = A || !D, U = D?.getAttributes("textStyle")?.color, W = D?.getAttributes("highlight")?.color, G = O.showBold || O.showItalic || O.showUnderline || O.showStrike, K = O.showHeading1 || O.showHeading2 || O.showHeading3, q = O.showBulletList || O.showOrderedList, J = O.showBlockquote || O.showCodeBlock || O.showLink || O.showHorizontalRule, Y = O.showTextColor || O.showHighlight, X = O.showUndoRedo || O.showClearFormat, Z = O.showTableButton || O.showImageButton || O.showEmojiButton, Q = [
+		G,
+		K,
+		q,
+		J,
+		Y,
+		X,
+		Z
+	], le = Q.filter(Boolean).length;
+	function $(e, t) {
+		return !e || Q.slice(t + 1).findIndex(Boolean) === -1 ? null : /* @__PURE__ */ f(c, {
+			orientation: "vertical",
+			flexItem: !0,
+			sx: { mx: .5 }
+		}, `div-${t}`);
+	}
+	return /* @__PURE__ */ p(d, { children: [
+		/* @__PURE__ */ p(s, {
+			sx: {
+				display: "flex",
+				flexWrap: "wrap",
+				alignItems: "center",
+				gap: .25,
+				px: 1,
+				py: .5
+			},
+			role: "toolbar",
+			"aria-label": "Text formatting",
+			children: [
+				G && /* @__PURE__ */ p(s, {
+					sx: {
+						display: "flex",
+						gap: .25
+					},
+					children: [
+						O.showBold && /* @__PURE__ */ f(e, {
+							label: k.bold,
+							icon: /* @__PURE__ */ f(re, { fontSize: "small" }),
+							onClick: () => D?.chain().focus().toggleBold().run(),
+							active: D?.isActive("bold"),
+							disabled: H
+						}),
+						O.showItalic && /* @__PURE__ */ f(e, {
+							label: k.italic,
+							icon: /* @__PURE__ */ f(ie, { fontSize: "small" }),
+							onClick: () => D?.chain().focus().toggleItalic().run(),
+							active: D?.isActive("italic"),
+							disabled: H
+						}),
+						O.showUnderline && /* @__PURE__ */ f(e, {
+							label: k.underline,
+							icon: /* @__PURE__ */ f(ae, { fontSize: "small" }),
+							onClick: () => D?.chain().focus().toggleUnderline().run(),
+							active: D?.isActive("underline"),
+							disabled: H
+						}),
+						O.showStrike && /* @__PURE__ */ f(e, {
+							label: k.strike,
+							icon: /* @__PURE__ */ f(oe, { fontSize: "small" }),
+							onClick: () => D?.chain().focus().toggleStrike().run(),
+							active: D?.isActive("strike"),
+							disabled: H
+						})
+					]
+				}),
+				$(G, 0),
+				K && /* @__PURE__ */ p(s, {
+					sx: {
+						display: "flex",
+						gap: .25
+					},
+					children: [
+						O.showHeading1 && /* @__PURE__ */ f(e, {
+							label: k.heading1,
+							icon: /* @__PURE__ */ f(E, { level: 1 }),
+							onClick: () => D?.chain().focus().toggleHeading({ level: 1 }).run(),
+							active: D?.isActive("heading", { level: 1 }),
+							disabled: H
+						}),
+						O.showHeading2 && /* @__PURE__ */ f(e, {
+							label: k.heading2,
+							icon: /* @__PURE__ */ f(E, { level: 2 }),
+							onClick: () => D?.chain().focus().toggleHeading({ level: 2 }).run(),
+							active: D?.isActive("heading", { level: 2 }),
+							disabled: H
+						}),
+						O.showHeading3 && /* @__PURE__ */ f(e, {
+							label: k.heading3,
+							icon: /* @__PURE__ */ f(E, { level: 3 }),
+							onClick: () => D?.chain().focus().toggleHeading({ level: 3 }).run(),
+							active: D?.isActive("heading", { level: 3 }),
+							disabled: H
+						})
+					]
+				}),
+				$(K, 1),
+				q && /* @__PURE__ */ p(s, {
+					sx: {
+						display: "flex",
+						gap: .25
+					},
+					children: [O.showBulletList && /* @__PURE__ */ f(e, {
+						label: k.bulletList,
+						icon: /* @__PURE__ */ f(_, { fontSize: "small" }),
+						onClick: () => D?.chain().focus().toggleBulletList().run(),
+						active: D?.isActive("bulletList"),
+						disabled: H
+					}), O.showOrderedList && /* @__PURE__ */ f(e, {
+						label: k.orderedList,
+						icon: /* @__PURE__ */ f(v, { fontSize: "small" }),
+						onClick: () => D?.chain().focus().toggleOrderedList().run(),
+						active: D?.isActive("orderedList"),
+						disabled: H
+					})]
+				}),
+				$(q, 2),
+				J && /* @__PURE__ */ p(s, {
+					sx: {
+						display: "flex",
+						gap: .25
+					},
+					children: [
+						O.showBlockquote && /* @__PURE__ */ f(e, {
+							label: k.blockquote,
+							icon: /* @__PURE__ */ f(y, { fontSize: "small" }),
+							onClick: () => D?.chain().focus().toggleBlockquote().run(),
+							active: D?.isActive("blockquote"),
+							disabled: H
+						}),
+						O.showCodeBlock && /* @__PURE__ */ f(e, {
+							label: k.codeBlock,
+							icon: /* @__PURE__ */ f(se, { fontSize: "small" }),
+							onClick: () => D?.chain().focus().toggleCodeBlock().run(),
+							active: D?.isActive("codeBlock"),
+							disabled: H
+						}),
+						O.showLink && /* @__PURE__ */ f(e, {
+							label: k.link,
+							icon: /* @__PURE__ */ f(b, { fontSize: "small" }),
+							onClick: () => N(!0),
+							active: D?.isActive("link"),
+							disabled: H
+						}),
+						O.showHorizontalRule && /* @__PURE__ */ f(e, {
+							label: k.horizontalRule,
+							icon: /* @__PURE__ */ f(x, { fontSize: "small" }),
+							onClick: () => D?.chain().focus().setHorizontalRule().run(),
+							disabled: H
+						})
+					]
+				}),
+				$(J, 3),
+				Y && /* @__PURE__ */ p(s, {
+					sx: {
+						display: "flex",
+						gap: .25
+					},
+					children: [O.showTextColor && /* @__PURE__ */ f(T, {
+						label: k.textColor,
+						icon: /* @__PURE__ */ f(S, { fontSize: "small" }),
+						activeColor: U,
+						disabled: H,
+						onClick: (e) => z(e.currentTarget)
+					}), O.showHighlight && /* @__PURE__ */ f(T, {
+						label: k.highlight,
+						icon: /* @__PURE__ */ f(C, { fontSize: "small" }),
+						activeColor: W,
+						disabled: H,
+						onClick: (e) => V(e.currentTarget)
+					})]
+				}),
+				$(Y, 4),
+				X && /* @__PURE__ */ p(s, {
+					sx: {
+						display: "flex",
+						gap: .25
+					},
+					children: [O.showUndoRedo && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(e, {
+						label: k.undo,
+						icon: /* @__PURE__ */ f(m, { fontSize: "small" }),
+						onClick: () => D?.chain().focus().undo().run(),
+						disabled: H || !D?.can().undo()
+					}), /* @__PURE__ */ f(e, {
+						label: k.redo,
+						icon: /* @__PURE__ */ f(h, { fontSize: "small" }),
+						onClick: () => D?.chain().focus().redo().run(),
+						disabled: H || !D?.can().redo()
+					})] }), O.showClearFormat && /* @__PURE__ */ f(e, {
+						label: k.clearFormat,
+						icon: /* @__PURE__ */ f(w, { fontSize: "small" }),
+						onClick: () => D?.chain().focus().clearNodes().unsetAllMarks().run(),
+						disabled: H
+					})]
+				}),
+				$(X, 5),
+				Z && /* @__PURE__ */ p(s, {
+					sx: {
+						display: "flex",
+						gap: .25
+					},
+					children: [
+						O.showTableButton && /* @__PURE__ */ f(r, {
+							editor: D,
+							translation: k,
+							disabled: H
+						}),
+						O.showImageButton && /* @__PURE__ */ f(e, {
+							label: k.image,
+							icon: /* @__PURE__ */ f(te, { fontSize: "small" }),
+							onClick: () => F(!0),
+							disabled: H
+						}),
+						O.showEmojiButton && /* @__PURE__ */ f(u, {
+							title: k.emoji,
+							arrow: !0,
+							children: /* @__PURE__ */ f("span", { children: /* @__PURE__ */ f(l, {
+								size: "small",
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: (e) => L(e.currentTarget),
+								disabled: H,
+								sx: { borderRadius: 1 },
+								"aria-label": k.emoji,
+								children: /* @__PURE__ */ f(ne, { fontSize: "small" })
+							}) })
+						})
+					]
+				}),
+				le === 0 && /* @__PURE__ */ f(s, { sx: { height: 32 } }),
+				O.showFullscreenButton && /* @__PURE__ */ f(s, {
+					sx: { ml: "auto" },
+					children: /* @__PURE__ */ f(u, {
+						title: j ? k.exitFullscreen : k.fullscreen,
+						arrow: !0,
+						children: /* @__PURE__ */ f("span", { children: /* @__PURE__ */ f(l, {
+							size: "small",
+							onMouseDown: (e) => e.preventDefault(),
+							onClick: ce,
+							disabled: A || !D,
+							sx: { borderRadius: 1 },
+							"aria-label": j ? k.exitFullscreen : k.fullscreen,
+							children: f(j ? g : ee, { fontSize: "small" })
+						}) })
+					})
+				})
+			]
+		}),
+		O.showLink && D && /* @__PURE__ */ f(t, {
+			open: M,
+			onClose: () => N(!1),
+			editor: D,
+			translation: k
+		}),
+		O.showTextColor && /* @__PURE__ */ f(n, {
+			anchorEl: R,
+			open: !!R,
+			onClose: () => z(null),
+			mode: "textColor",
+			activeColor: U,
+			onSelectColor: (e) => D?.chain().focus().setColor(e).run(),
+			onRemoveColor: () => D?.chain().focus().unsetColor().run(),
+			removeLabel: k.removeTextColor
+		}),
+		O.showHighlight && /* @__PURE__ */ f(n, {
+			anchorEl: B,
+			open: !!B,
+			onClose: () => V(null),
+			mode: "highlight",
+			activeColor: W,
+			onSelectColor: (e) => D?.chain().focus().setHighlight({ color: e }).run(),
+			onRemoveColor: () => D?.chain().focus().unsetHighlight().run(),
+			removeLabel: k.removeHighlight
+		}),
+		O.showImageButton && D && /* @__PURE__ */ f(i, {
+			open: P,
+			onClose: () => F(!1),
+			editor: D,
+			translation: k
+		}),
+		O.showEmojiButton && /* @__PURE__ */ f(a, {
+			anchorEl: I,
+			open: !!I,
+			onClose: () => L(null),
+			onSelect: (e) => D?.chain().focus().insertContent(e).run(),
+			translation: k
+		})
+	] });
+}
+//#endregion
+export { D as RichTextEditorToolbar };