@thebuoyant-tsdev/mui-ts-library 3.2.1 → 3.6.0

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

@@ -0,0 +1,185 @@
+import { useRef as e } from "react";
+import { Box as t, IconButton as n, Popover as r, Tooltip as i } from "@mui/material";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@mui/icons-material/FormatColorReset";
+//#region src/components/rich-text-editor/RichTextEditorColorPicker.tsx
+var c = [
+	"#000000",
+	"#434343",
+	"#666666",
+	"#999999",
+	"#b7b7b7",
+	"#ffffff",
+	"#ff0000",
+	"#ff4500",
+	"#ff8c00",
+	"#ffd700",
+	"#9acd32",
+	"#008000",
+	"#00ced1",
+	"#1e90ff",
+	"#0000ff",
+	"#8a2be2",
+	"#ff1493",
+	"#a52a2a"
+], l = [
+	"#ffff00",
+	"#ffd700",
+	"#ffa500",
+	"#ff69b4",
+	"#ff6347",
+	"#fa8072",
+	"#adff2f",
+	"#90ee90",
+	"#00fa9a",
+	"#00ffff",
+	"#87ceeb",
+	"#add8e6",
+	"#dda0dd",
+	"#ee82ee",
+	"#d2b48c",
+	"#f5f5dc",
+	"#ffffff",
+	"#000000"
+];
+function u({ color: e, active: n, onClick: r }) {
+	return /* @__PURE__ */ a(i, {
+		title: e,
+		placement: "top",
+		arrow: !0,
+		children: /* @__PURE__ */ a(t, {
+			component: "button",
+			type: "button",
+			onClick: () => r(e),
+			"aria-label": e,
+			"aria-pressed": n,
+			sx: {
+				width: 22,
+				height: 22,
+				bgcolor: e,
+				border: n ? "2px solid" : "1px solid",
+				borderColor: n ? "primary.main" : e === "#ffffff" || e === "#f5f5dc" ? "divider" : "transparent",
+				borderRadius: .5,
+				cursor: "pointer",
+				p: 0,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				transition: "transform 0.1s",
+				"&:hover": {
+					transform: "scale(1.2)",
+					zIndex: 1
+				}
+			},
+			children: n && /* @__PURE__ */ a(t, {
+				component: "span",
+				sx: {
+					width: 10,
+					height: 6,
+					borderLeft: "2px solid",
+					borderBottom: "2px solid",
+					borderColor: e === "#ffffff" || e === "#f5f5dc" || e === "#ffd700" || e === "#ffff00" || e === "#adff2f" || e === "#ffa500" || e === "#b7b7b7" || e === "#d2b48c" ? "#000" : "#fff",
+					transform: "rotate(-45deg) translateY(-1px)",
+					display: "block"
+				}
+			})
+		})
+	});
+}
+function d({ anchorEl: d, open: f, onClose: p, mode: m, activeColor: h, onSelectColor: g, onRemoveColor: _, removeLabel: v }) {
+	let y = e(null), b = m === "highlight" ? l : c;
+	function x(e) {
+		g(e.target.value);
+	}
+	return /* @__PURE__ */ o(r, {
+		open: f,
+		anchorEl: d,
+		onClose: p,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		},
+		slotProps: { paper: { sx: { p: 1.5 } } },
+		children: [/* @__PURE__ */ a(t, {
+			sx: {
+				display: "grid",
+				gridTemplateColumns: "repeat(6, 22px)",
+				gap: .5,
+				mb: 1
+			},
+			children: b.map((e) => /* @__PURE__ */ a(u, {
+				color: e,
+				active: h?.toLowerCase() === e.toLowerCase(),
+				onClick: (e) => {
+					g(e), p();
+				}
+			}, e))
+		}), /* @__PURE__ */ o(t, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: .5
+			},
+			children: [
+				/* @__PURE__ */ a(i, {
+					title: "Custom color",
+					arrow: !0,
+					children: /* @__PURE__ */ a(t, {
+						component: "button",
+						type: "button",
+						onClick: () => y.current?.click(),
+						"aria-label": "Custom color",
+						sx: {
+							width: 22,
+							height: 22,
+							background: "conic-gradient(red, yellow, lime, cyan, blue, magenta, red)",
+							border: "1px solid",
+							borderColor: "divider",
+							borderRadius: .5,
+							cursor: "pointer",
+							p: 0,
+							flexShrink: 0,
+							"&:hover": { transform: "scale(1.2)" },
+							transition: "transform 0.1s"
+						}
+					})
+				}),
+				/* @__PURE__ */ a("input", {
+					ref: y,
+					type: "color",
+					defaultValue: h ?? "#000000",
+					onChange: x,
+					onBlur: p,
+					style: {
+						visibility: "hidden",
+						width: 0,
+						height: 0,
+						position: "absolute"
+					}
+				}),
+				/* @__PURE__ */ a(i, {
+					title: v,
+					arrow: !0,
+					children: /* @__PURE__ */ a(n, {
+						size: "small",
+						onClick: () => {
+							_(), p();
+						},
+						"aria-label": v,
+						sx: {
+							borderRadius: 1,
+							ml: "auto"
+						},
+						children: /* @__PURE__ */ a(s, { fontSize: "small" })
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { d as RichTextEditorColorPicker };

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

@@ -0,0 +1,129 @@
+import { Box as e } from "@mui/material";
+import { jsx as t } from "react/jsx-runtime";
+import { EditorContent as n } from "@tiptap/react";
+//#region src/components/rich-text-editor/RichTextEditorContent.tsx
+function r({ editor: r, error: i, disabled: a, readonly: o }) {
+	return /* @__PURE__ */ t(e, {
+		sx: {
+			flex: 1,
+			minHeight: 0,
+			display: "flex",
+			flexDirection: "column",
+			px: 1.5,
+			py: 1,
+			cursor: a || o ? "default" : "text",
+			opacity: a ? .5 : 1,
+			"& > div": {
+				flex: 1,
+				display: "flex",
+				flexDirection: "column",
+				minHeight: 0
+			},
+			"& .ProseMirror": {
+				flex: 1,
+				minHeight: 0,
+				overflowY: "auto",
+				overflowX: "hidden",
+				wordBreak: "break-word",
+				overflowWrap: "break-word",
+				outline: "none",
+				"& p.is-editor-empty:first-of-type::before": {
+					content: "attr(data-placeholder)",
+					color: "text.disabled",
+					pointerEvents: "none",
+					float: "left",
+					height: 0
+				},
+				"& h1": {
+					typography: "h4",
+					mb: 1
+				},
+				"& h2": {
+					typography: "h5",
+					mb: 1
+				},
+				"& h3": {
+					typography: "h6",
+					mb: 1
+				},
+				"& p": { my: .5 },
+				"& ul, & ol": { pl: 3 },
+				"& blockquote": {
+					borderLeft: "4px solid",
+					borderColor: i ? "error.main" : "divider",
+					pl: 2,
+					color: "text.secondary",
+					my: 1
+				},
+				"& code": {
+					bgcolor: "action.hover",
+					px: .5,
+					borderRadius: .5,
+					fontFamily: "monospace",
+					fontSize: "0.875em"
+				},
+				"& pre": {
+					bgcolor: "action.hover",
+					p: 1.5,
+					borderRadius: 1,
+					overflowX: "auto",
+					"& code": {
+						bgcolor: "transparent",
+						px: 0
+					}
+				},
+				"& a": {
+					color: "primary.main",
+					cursor: "pointer"
+				},
+				"& mark": {
+					borderRadius: .5,
+					px: .25
+				},
+				"& hr": {
+					borderColor: "divider",
+					my: 2
+				},
+				"& table": {
+					borderCollapse: "collapse",
+					tableLayout: "fixed",
+					width: "100%",
+					margin: "8px 0",
+					overflowX: "auto"
+				},
+				"& table td, & table th": {
+					border: "1px solid",
+					borderColor: "divider",
+					padding: "6px 8px",
+					verticalAlign: "top",
+					boxSizing: "border-box",
+					minWidth: "2em",
+					position: "relative"
+				},
+				"& table th": {
+					fontWeight: "bold",
+					bgcolor: "action.hover"
+				},
+				"& table .selectedCell::after": {
+					content: "\"\"",
+					position: "absolute",
+					inset: 0,
+					bgcolor: "primary.main",
+					opacity: .12,
+					pointerEvents: "none",
+					zIndex: 2
+				},
+				"& img": {
+					maxWidth: "100%",
+					height: "auto",
+					borderRadius: "4px",
+					display: "block",
+					my: 1
+				}
+			}
+		},
+		children: /* @__PURE__ */ t(n, { editor: r })
+	});
+}
+//#endregion
+export { r as RichTextEditorContent };

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

@@ -0,0 +1,110 @@
+import { EMOJI_CATEGORIES as e } from "./util/emojis.js";
+import { useMemo as t, useState as n } from "react";
+import { Box as r, InputAdornment as i, Popover as a, TextField as o, Typography as s } from "@mui/material";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@mui/icons-material/Search";
+//#region src/components/rich-text-editor/RichTextEditorEmojiPicker.tsx
+function d({ anchorEl: d, open: f, onClose: p, onSelect: m, translation: h }) {
+	let [g, _] = n(""), v = t(() => {
+		let t = g.trim().toLowerCase();
+		return t ? e.map((e) => ({
+			...e,
+			emojis: e.emojis.filter((e) => e.name.includes(t) || e.emoji === t)
+		})).filter((e) => e.emojis.length > 0) : e;
+	}, [g]);
+	function y(e) {
+		m(e), p(), _("");
+	}
+	function b() {
+		p(), _("");
+	}
+	return /* @__PURE__ */ l(a, {
+		open: f,
+		anchorEl: d,
+		onClose: b,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		},
+		slotProps: { paper: { sx: {
+			width: 320,
+			maxHeight: 380,
+			display: "flex",
+			flexDirection: "column"
+		} } },
+		children: [/* @__PURE__ */ c(r, {
+			sx: {
+				p: 1,
+				borderBottom: 1,
+				borderColor: "divider"
+			},
+			children: /* @__PURE__ */ c(o, {
+				autoFocus: !0,
+				fullWidth: !0,
+				size: "small",
+				placeholder: h.emojiSearchPlaceholder,
+				value: g,
+				onChange: (e) => _(e.target.value),
+				slotProps: { input: { startAdornment: /* @__PURE__ */ c(i, {
+					position: "start",
+					children: /* @__PURE__ */ c(u, { fontSize: "small" })
+				}) } }
+			})
+		}), /* @__PURE__ */ l(r, {
+			sx: {
+				overflowY: "auto",
+				flex: 1,
+				px: 1,
+				pb: 1
+			},
+			children: [v.map((e) => /* @__PURE__ */ l(r, { children: [/* @__PURE__ */ c(s, {
+				variant: "caption",
+				sx: {
+					display: "block",
+					color: "text.secondary",
+					mt: 1,
+					mb: .5,
+					px: .5
+				},
+				children: e.label
+			}), /* @__PURE__ */ c(r, {
+				sx: {
+					display: "flex",
+					flexWrap: "wrap",
+					gap: .25
+				},
+				children: e.emojis.map((e) => /* @__PURE__ */ c(r, {
+					component: "button",
+					title: e.name,
+					"aria-label": e.name,
+					onClick: () => y(e.emoji),
+					sx: {
+						border: "none",
+						background: "none",
+						cursor: "pointer",
+						fontSize: "1.375rem",
+						lineHeight: 1,
+						p: .5,
+						borderRadius: 1,
+						"&:hover": { bgcolor: "action.hover" }
+					},
+					children: e.emoji
+				}, e.emoji))
+			})] }, e.label)), v.length === 0 && /* @__PURE__ */ c(s, {
+				variant: "body2",
+				color: "text.secondary",
+				sx: {
+					p: 2,
+					textAlign: "center"
+				},
+				children: "No emoji found"
+			})]
+		})]
+	});
+}
+//#endregion
+export { d as RichTextEditorEmojiPicker };

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

@@ -0,0 +1,33 @@
+import { Box as e, FormHelperText as t } from "@mui/material";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/rich-text-editor/RichTextEditorFooter.tsx
+function i({ helperText: i, error: a, showCharacterCount: o, charCount: s, maxCharacters: c, showWordCount: l, wordCount: u, translation: d }) {
+	let f = c === void 0 ? d.characterCount.replace("{count}", String(s)) : d.characterCountMax.replace("{count}", String(s)).replace("{max}", String(c)), p = c !== void 0 && s >= c ? "error" : "text.secondary", m = d.wordCount.replace("{count}", String(u));
+	return /* @__PURE__ */ r(e, {
+		sx: {
+			display: "flex",
+			justifyContent: "space-between",
+			mt: .5,
+			px: .5
+		},
+		children: [/* @__PURE__ */ n(t, {
+			error: a,
+			children: i ?? ""
+		}), (o || l) && /* @__PURE__ */ r(e, {
+			sx: {
+				display: "flex",
+				gap: 1.5,
+				alignItems: "center"
+			},
+			children: [l && /* @__PURE__ */ n(t, {
+				sx: { color: "text.secondary" },
+				children: m
+			}), o && /* @__PURE__ */ n(t, {
+				sx: { color: p },
+				children: f
+			})]
+		})]
+	});
+}
+//#endregion
+export { i as RichTextEditorFooter };

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

@@ -0,0 +1,74 @@
+import { useState as e } from "react";
+import { Button as t, Dialog as n, DialogActions as r, DialogContent as i, DialogTitle as a, TextField as o } from "@mui/material";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/rich-text-editor/RichTextEditorImageDialog.tsx
+function l({ open: l, onClose: u, editor: d, translation: f }) {
+	let [p, m] = e(""), [h, g] = e("");
+	function _() {
+		let e = p.trim();
+		e && (d.chain().focus().setImage({
+			src: e,
+			alt: h.trim() || void 0
+		}).run(), m(""), g(""), u());
+	}
+	function v() {
+		m(""), g(""), u();
+	}
+	function y(e) {
+		e.key === "Enter" && _();
+	}
+	return /* @__PURE__ */ c(n, {
+		open: l,
+		onClose: v,
+		maxWidth: "sm",
+		fullWidth: !0,
+		children: [
+			/* @__PURE__ */ s(a, { children: f.imageDialogTitle }),
+			/* @__PURE__ */ c(i, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 2,
+					pt: "16px !important"
+				},
+				children: [/* @__PURE__ */ s(o, {
+					autoFocus: !0,
+					fullWidth: !0,
+					label: f.imageDialogUrlLabel,
+					value: p,
+					onChange: (e) => m(e.target.value),
+					onKeyDown: y,
+					variant: "outlined",
+					size: "small",
+					placeholder: "https://example.com/image.png"
+				}), /* @__PURE__ */ s(o, {
+					fullWidth: !0,
+					label: f.imageDialogAltLabel,
+					value: h,
+					onChange: (e) => g(e.target.value),
+					onKeyDown: y,
+					variant: "outlined",
+					size: "small"
+				})]
+			}),
+			/* @__PURE__ */ c(r, {
+				sx: {
+					px: 3,
+					pb: 2,
+					gap: 1
+				},
+				children: [/* @__PURE__ */ s(t, {
+					onClick: v,
+					children: f.imageDialogCancel
+				}), /* @__PURE__ */ s(t, {
+					onClick: _,
+					variant: "contained",
+					disabled: !p.trim(),
+					children: f.imageDialogSave
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { l as RichTextEditorImageDialog };

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

@@ -0,0 +1,70 @@
+import { useEffect as e, useState as t } from "react";
+import { Button as n, Dialog as r, DialogActions as i, DialogContent as a, DialogTitle as o, TextField as s } from "@mui/material";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/rich-text-editor/RichTextEditorLinkDialog.tsx
+function u({ open: u, onClose: d, editor: f, translation: p }) {
+	let [m, h] = t("");
+	e(() => {
+		if (u) {
+			let e = f.getAttributes("link").href;
+			h(e ?? "");
+		}
+	}, [u, f]);
+	let g = f.isActive("link");
+	function _() {
+		m.trim() ? f.chain().focus().extendMarkRange("link").setLink({ href: m.trim() }).run() : f.chain().focus().extendMarkRange("link").unsetLink().run(), d();
+	}
+	function v() {
+		f.chain().focus().extendMarkRange("link").unsetLink().run(), d();
+	}
+	function y(e) {
+		e.key === "Enter" && _();
+	}
+	return /* @__PURE__ */ l(r, {
+		open: u,
+		onClose: d,
+		maxWidth: "sm",
+		fullWidth: !0,
+		children: [
+			/* @__PURE__ */ c(o, { children: p.linkDialogTitle }),
+			/* @__PURE__ */ c(a, { children: /* @__PURE__ */ c(s, {
+				autoFocus: !0,
+				fullWidth: !0,
+				label: p.linkDialogUrlLabel,
+				value: m,
+				onChange: (e) => h(e.target.value),
+				onKeyDown: y,
+				variant: "outlined",
+				size: "small",
+				sx: { mt: 1 },
+				placeholder: "https://"
+			}) }),
+			/* @__PURE__ */ l(i, {
+				sx: {
+					px: 3,
+					pb: 2,
+					gap: 1
+				},
+				children: [
+					g && /* @__PURE__ */ c(n, {
+						onClick: v,
+						color: "error",
+						sx: { mr: "auto" },
+						children: p.linkDialogRemove
+					}),
+					/* @__PURE__ */ c(n, {
+						onClick: d,
+						children: p.linkDialogCancel
+					}),
+					/* @__PURE__ */ c(n, {
+						onClick: _,
+						variant: "contained",
+						children: p.linkDialogSave
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { u as RichTextEditorLinkDialog };

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

@@ -0,0 +1,97 @@
+import { useState as e } from "react";
+import { Divider as t, IconButton as n, ListItemIcon as r, ListItemText as i, Menu as a, MenuItem as o, Tooltip as s } from "@mui/material";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "@mui/icons-material/Delete";
+import f from "@mui/icons-material/Add";
+import p from "@mui/icons-material/TableChart";
+//#region src/components/rich-text-editor/RichTextEditorTableMenu.tsx
+function m({ editor: m, translation: h, disabled: g }) {
+	let [_, v] = e(null), y = g || !m, b = m?.isActive("table") ?? !1;
+	function x() {
+		v(null);
+	}
+	function S(e) {
+		e(), x();
+	}
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(s, {
+		title: h.table,
+		arrow: !0,
+		children: /* @__PURE__ */ l("span", { children: /* @__PURE__ */ l(n, {
+			size: "small",
+			onMouseDown: (e) => e.preventDefault(),
+			onClick: (e) => v(e.currentTarget),
+			disabled: y,
+			color: b ? "primary" : "default",
+			sx: { borderRadius: 1 },
+			"aria-label": h.table,
+			"aria-pressed": b,
+			children: /* @__PURE__ */ l(p, { fontSize: "small" })
+		}) })
+	}), /* @__PURE__ */ u(a, {
+		anchorEl: _,
+		open: !!_,
+		onClose: x,
+		slotProps: { paper: { sx: { minWidth: 220 } } },
+		children: [
+			/* @__PURE__ */ u(o, {
+				onClick: () => S(() => m?.chain().focus().insertTable({
+					rows: 3,
+					cols: 3,
+					withHeaderRow: !0
+				}).run()),
+				children: [/* @__PURE__ */ l(r, { children: /* @__PURE__ */ l(p, { fontSize: "small" }) }), /* @__PURE__ */ l(i, { children: h.insertTable })]
+			}),
+			b && /* @__PURE__ */ l(t, {}),
+			b && /* @__PURE__ */ u(o, {
+				onClick: () => S(() => m?.chain().focus().addRowBefore().run()),
+				children: [/* @__PURE__ */ l(r, { children: /* @__PURE__ */ l(f, { fontSize: "small" }) }), /* @__PURE__ */ l(i, { children: h.addRowBefore })]
+			}),
+			b && /* @__PURE__ */ u(o, {
+				onClick: () => S(() => m?.chain().focus().addRowAfter().run()),
+				children: [/* @__PURE__ */ l(r, { children: /* @__PURE__ */ l(f, { fontSize: "small" }) }), /* @__PURE__ */ l(i, { children: h.addRowAfter })]
+			}),
+			b && /* @__PURE__ */ u(o, {
+				onClick: () => S(() => m?.chain().focus().deleteRow().run()),
+				children: [/* @__PURE__ */ l(r, { children: /* @__PURE__ */ l(d, {
+					fontSize: "small",
+					color: "error"
+				}) }), /* @__PURE__ */ l(i, {
+					sx: { color: "error.main" },
+					children: h.deleteRow
+				})]
+			}),
+			b && /* @__PURE__ */ l(t, {}),
+			b && /* @__PURE__ */ u(o, {
+				onClick: () => S(() => m?.chain().focus().addColumnBefore().run()),
+				children: [/* @__PURE__ */ l(r, { children: /* @__PURE__ */ l(f, { fontSize: "small" }) }), /* @__PURE__ */ l(i, { children: h.addColumnBefore })]
+			}),
+			b && /* @__PURE__ */ u(o, {
+				onClick: () => S(() => m?.chain().focus().addColumnAfter().run()),
+				children: [/* @__PURE__ */ l(r, { children: /* @__PURE__ */ l(f, { fontSize: "small" }) }), /* @__PURE__ */ l(i, { children: h.addColumnAfter })]
+			}),
+			b && /* @__PURE__ */ u(o, {
+				onClick: () => S(() => m?.chain().focus().deleteColumn().run()),
+				children: [/* @__PURE__ */ l(r, { children: /* @__PURE__ */ l(d, {
+					fontSize: "small",
+					color: "error"
+				}) }), /* @__PURE__ */ l(i, {
+					sx: { color: "error.main" },
+					children: h.deleteColumn
+				})]
+			}),
+			b && /* @__PURE__ */ l(t, {}),
+			b && /* @__PURE__ */ u(o, {
+				onClick: () => S(() => m?.chain().focus().deleteTable().run()),
+				children: [/* @__PURE__ */ l(r, { children: /* @__PURE__ */ l(d, {
+					fontSize: "small",
+					color: "error"
+				}) }), /* @__PURE__ */ l(i, {
+					sx: { color: "error.main" },
+					children: h.deleteTable
+				})]
+			})
+		]
+	})] });
+}
+//#endregion
+export { m as RichTextEditorTableMenu };