@thebuoyant-tsdev/mui-ts-library 3.7.1 → 3.9.1

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

@@ -3,70 +3,82 @@ import { DEFAULT_RICH_TEXT_EDITOR_TOOLBAR_CONFIG as t, DEFAULT_RICH_TEXT_EDITOR_
 import { RichTextEditorContent as r } from "./RichTextEditorContent.js";
 import { RichTextEditorToolbar as i } from "./RichTextEditorToolbar.js";
 import { RichTextEditorFooter as a } from "./RichTextEditorFooter.js";
-import { useEffect as o, useState as s } from "react";
-import { Box as c, Divider as l, Paper as u } from "@mui/material";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { useEditor as m } from "@tiptap/react";
-import { StarterKit as h } from "@tiptap/starter-kit";
-import { TextStyle as ee } from "@tiptap/extension-text-style";
-import { Color as g } from "@tiptap/extension-color";
-import { Highlight as _ } from "@tiptap/extension-highlight";
-import { Placeholder as v } from "@tiptap/extension-placeholder";
-import { CharacterCount as y } from "@tiptap/extension-character-count";
-import { TableKit as b } from "@tiptap/extension-table";
-import { Image as x } from "@tiptap/extension-image";
-import { Markdown as S } from "tiptap-markdown";
+import { useEffect as o, useRef as s, useState as c } from "react";
+import { Box as l, Divider as u, Paper as d } from "@mui/material";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useEditor as h } from "@tiptap/react";
+import { StarterKit as g } from "@tiptap/starter-kit";
+import { TextStyle as _ } from "@tiptap/extension-text-style";
+import { Color as v } from "@tiptap/extension-color";
+import { Highlight as ee } from "@tiptap/extension-highlight";
+import { Placeholder as y } from "@tiptap/extension-placeholder";
+import { CharacterCount as b } from "@tiptap/extension-character-count";
+import { TableKit as x } from "@tiptap/extension-table";
+import { Image as S } from "@tiptap/extension-image";
+import { Markdown as C } from "tiptap-markdown";
 //#region src/components/rich-text-editor/RichTextEditor.tsx
-function C({ disabled: C = !1, error: w = !1, height: T, helperText: E, maxCharacters: D, name: O, placeholder: k, readonly: A = !1, showCharacterCount: j = !1, showToolbar: M = !0, showWordCount: N = !1, toolbarConfig: P, translation: F, value: I, width: L, onBlur: R, onChange: z, onFocus: B }) {
-	let V = {
+function w({ disabled: w = !1, error: T = !1, height: E, helperText: D, maxCharacters: O, name: k, placeholder: A, readonly: j = !1, showCharacterCount: M = !1, showToolbar: N = !0, showWordCount: P = !1, toolbarConfig: F, translation: I, value: L, width: R, onBlur: z, onChange: B, onFocus: V, onMarkdownChange: te }) {
+	let H = {
 		...n,
-		...F
-	}, H = {
+		...I
+	}, U = {
 		...t,
-		...P
-	}, [U, W] = s(!1), G = e(T), K = e(L), q = G === "auto", J = q ? void 0 : G ?? 200, Y = D !== void 0 && D > 0 || j || N, X = m({
+		...F
+	}, [W, G] = c(!1), [K, q] = c(!1), J = s(K);
+	o(() => {
+		J.current = K;
+	}, [K]);
+	let Y = e(E), X = e(R), Z = Y === "auto", Q = Z ? void 0 : Y ?? 200, ne = O !== void 0 && O > 0 || M || P, $ = h({
 		shouldRerenderOnTransaction: !0,
 		extensions: [
-			h.configure({ link: { openOnClick: !1 } }),
-			ee,
-			g,
-			_.configure({ multicolor: !0 }),
-			S.configure({
+			g.configure({ link: { openOnClick: !1 } }),
+			_,
+			v,
+			ee.configure({ multicolor: !0 }),
+			C.configure({
 				transformPastedText: !0,
 				transformCopiedText: !1
 			}),
-			v.configure({ placeholder: k ?? "" }),
-			...H.showTableButton ? [b] : [],
-			...H.showImageButton ? [x.configure({
+			y.configure({ placeholder: A ?? "" }),
+			...U.showTableButton ? [x] : [],
+			...U.showImageButton ? [S.configure({
 				inline: !1,
 				allowBase64: !0
 			})] : [],
-			...Y ? D !== void 0 && D > 0 ? [y.configure({ limit: D })] : [y] : []
+			...ne ? O !== void 0 && O > 0 ? [b.configure({ limit: O })] : [b] : []
 		],
-		content: I ?? "",
-		editable: !C && !A,
+		content: L ?? "",
+		editable: !w && !j,
+		editorProps: { handlePaste(e, t) {
+			if (!J.current) return !1;
+			let n = t.clipboardData?.getData("text/plain");
+			if (n == null) return !1;
+			t.preventDefault();
+			let { state: r } = e;
+			return e.dispatch(r.tr.insertText(n, r.selection.from, r.selection.to)), !0;
+		} },
 		onUpdate({ editor: e }) {
-			z?.(e.getHTML());
+			B?.(e.getHTML()), te?.(e.storage.markdown.getMarkdown());
 		},
 		onBlur() {
-			R?.();
+			z?.();
 		},
 		onFocus() {
-			B?.();
+			V?.();
 		}
 	});
 	o(() => {
-		!X || I === void 0 || X.getHTML() !== I && X.commands.setContent(I, { emitUpdate: !1 });
-	}, [X, I]), o(() => {
-		X && X.setEditable(!C && !A);
+		!$ || L === void 0 || $.getHTML() !== L && $.commands.setContent(L, { emitUpdate: !1 });
+	}, [$, L]), o(() => {
+		$ && $.setEditable(!w && !j);
 	}, [
-		X,
-		C,
-		A
+		$,
+		w,
+		j
 	]);
-	let Z = X?.storage.characterCount?.characters?.() ?? 0, Q = X?.storage.characterCount?.words?.() ?? 0, $ = j || D !== void 0 && D > 0 || N || !!E;
-	return /* @__PURE__ */ p(c, {
-		sx: U ? {
+	let re = $?.storage.characterCount?.characters?.() ?? 0, ie = $?.storage.characterCount?.words?.() ?? 0, ae = M || O !== void 0 && O > 0 || P || !!D;
+	return /* @__PURE__ */ m(l, {
+		sx: W ? {
 			position: "fixed",
 			top: 0,
 			left: 0,
@@ -78,58 +90,60 @@ function C({ disabled: C = !1, error: w = !1, height: T, helperText: E, maxChara
 			bgcolor: "background.default",
 			p: 1
 		} : {
-			width: K ?? "100%",
-			...q ? {
+			width: X ?? "100%",
+			...Z ? {
 				display: "flex",
 				flexDirection: "column",
 				flex: 1
 			} : {}
 		},
 		children: [
-			/* @__PURE__ */ p(u, {
+			/* @__PURE__ */ m(d, {
 				variant: "outlined",
 				sx: {
 					display: "flex",
 					flexDirection: "column",
 					overflow: "hidden",
-					...U || q ? { flex: 1 } : { height: J },
-					borderColor: w ? "error.main" : void 0,
+					...W || Z ? { flex: 1 } : { height: Q },
+					borderColor: T ? "error.main" : void 0,
 					"&:focus-within": {
-						borderColor: w ? "error.main" : "primary.main",
+						borderColor: T ? "error.main" : "primary.main",
 						borderWidth: 2
 					}
 				},
-				children: [M && !A && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(i, {
-					editor: X,
-					toolbarConfig: H,
-					translation: V,
-					disabled: C,
-					isFullscreen: U,
-					onToggleFullscreen: () => W((e) => !e)
-				}), /* @__PURE__ */ f(l, {})] }), /* @__PURE__ */ f(r, {
-					editor: X,
-					error: w,
-					disabled: C,
-					readonly: A
+				children: [N && !j && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(i, {
+					editor: $,
+					toolbarConfig: U,
+					translation: H,
+					disabled: w,
+					isFullscreen: W,
+					onToggleFullscreen: () => G((e) => !e),
+					pasteAsPlainText: K,
+					onTogglePasteAsPlainText: () => q((e) => !e)
+				}), /* @__PURE__ */ p(u, {})] }), /* @__PURE__ */ p(r, {
+					editor: $,
+					error: T,
+					disabled: w,
+					readonly: j
 				})]
 			}),
-			$ && /* @__PURE__ */ f(a, {
-				helperText: E,
-				error: w,
-				showCharacterCount: j || D !== void 0 && D > 0,
-				charCount: Z,
-				maxCharacters: D && D > 0 ? D : void 0,
-				showWordCount: N,
-				wordCount: Q,
-				translation: V
+			ae && /* @__PURE__ */ p(a, {
+				helperText: D,
+				error: T,
+				showCharacterCount: M || O !== void 0 && O > 0,
+				charCount: re,
+				maxCharacters: O && O > 0 ? O : void 0,
+				showWordCount: P,
+				wordCount: ie,
+				translation: H
 			}),
-			O && /* @__PURE__ */ f("input", {
+			k && /* @__PURE__ */ p("input", {
 				type: "hidden",
-				name: O,
-				value: X ? X.getHTML() : ""
+				name: k,
+				value: $ ? $.getHTML() : ""
 			})
 		]
 	});
 }
 //#endregion
-export { C as RichTextEditor };
+export { w as RichTextEditor };

package/dist/components/rich-text-editor/RichTextEditor.types.d.ts

@@ -24,6 +24,10 @@ export type RichTextEditorToolbarConfig = {
     showImageButton?: boolean;
     /** Emoji-Picker — standardmäßig deaktiviert (opt-in) */
     showEmojiButton?: boolean;
+    /** Toggle: eingefügter Inhalt wird von Formatierung befreit — standardmäßig deaktiviert (opt-in) */
+    showPasteAsPlainTextButton?: boolean;
+    /** Markdown-Import/Export-Dialog — standardmäßig deaktiviert (opt-in) */
+    showMarkdownButton?: boolean;
 };
 export declare const DEFAULT_RICH_TEXT_EDITOR_TOOLBAR_CONFIG: Required<RichTextEditorToolbarConfig>;
 export type RichTextEditorTranslation = {
@@ -77,8 +81,26 @@ export type RichTextEditorTranslation = {
     imageDialogCancel: string;
     emoji: string;
     emojiSearchPlaceholder: string;
+    /** Tooltip wenn Klartext-Paste AUS ist (Klick aktiviert es) @since 3.8.0 */
+    pasteAsPlainText?: string;
+    /** Tooltip wenn Klartext-Paste AN ist (Klick deaktiviert es) @since 3.8.0 */
+    pasteAsHtml?: string;
+    /** Tooltip für den Markdown-Button @since 3.8.0 */
+    markdown?: string;
+    /** @since 3.8.0 */
+    markdownDialogTitle?: string;
+    /** @since 3.8.0 */
+    markdownDialogDescription?: string;
+    /** @since 3.8.0 */
+    markdownDialogApply?: string;
+    /** @since 3.8.0 */
+    markdownDialogCancel?: string;
+    /** @since 3.8.0 */
+    markdownDialogCopy?: string;
+    /** @since 3.8.0 */
+    markdownDialogCopied?: string;
 };
-export declare const DEFAULT_RICH_TEXT_EDITOR_TRANSLATION: RichTextEditorTranslation;
+export declare const DEFAULT_RICH_TEXT_EDITOR_TRANSLATION: Required<RichTextEditorTranslation>;
 export type RichTextEditorProps = {
     disabled?: boolean;
     error?: boolean;
@@ -102,4 +124,6 @@ export type RichTextEditorProps = {
     onBlur?: () => void;
     onChange?: (value: string) => void;
     onFocus?: () => void;
+    /** Wird bei jeder Änderung zusätzlich zu onChange mit dem Inhalt als Markdown aufgerufen */
+    onMarkdownChange?: (markdown: string) => void;
 };

package/dist/components/rich-text-editor/RichTextEditor.types.js

@@ -20,7 +20,9 @@ var e = {
 	showFullscreenButton: !1,
 	showTableButton: !1,
 	showImageButton: !1,
-	showEmojiButton: !1
+	showEmojiButton: !1,
+	showPasteAsPlainTextButton: !1,
+	showMarkdownButton: !1
 }, t = {
 	bold: "Bold",
 	italic: "Italic",
@@ -68,7 +70,16 @@ var e = {
 	imageDialogSave: "Insert",
 	imageDialogCancel: "Cancel",
 	emoji: "Emoji",
-	emojiSearchPlaceholder: "Search emoji…"
+	emojiSearchPlaceholder: "Search emoji…",
+	pasteAsPlainText: "Paste as plain text",
+	pasteAsHtml: "Paste with formatting",
+	markdown: "Markdown",
+	markdownDialogTitle: "Markdown",
+	markdownDialogDescription: "Edit as Markdown, then apply to replace the editor content. Copy to export.",
+	markdownDialogApply: "Apply",
+	markdownDialogCancel: "Cancel",
+	markdownDialogCopy: "Copy",
+	markdownDialogCopied: "Copied!"
 };
 //#endregion
 export { e as DEFAULT_RICH_TEXT_EDITOR_TOOLBAR_CONFIG, t as DEFAULT_RICH_TEXT_EDITOR_TRANSLATION };

package/dist/components/rich-text-editor/RichTextEditorEmojiPicker.d.ts

@@ -4,7 +4,7 @@ type RichTextEditorEmojiPickerProps = {
     open: boolean;
     onClose: () => void;
     onSelect: (emoji: string) => void;
-    translation: RichTextEditorTranslation;
+    translation: Required<RichTextEditorTranslation>;
 };
 export declare function RichTextEditorEmojiPicker({ anchorEl, open, onClose, onSelect, translation: t, }: RichTextEditorEmojiPickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/rich-text-editor/RichTextEditorFooter.d.ts

@@ -7,7 +7,7 @@ type RichTextEditorFooterProps = {
     maxCharacters?: number;
     showWordCount?: boolean;
     wordCount: number;
-    translation: RichTextEditorTranslation;
+    translation: Required<RichTextEditorTranslation>;
 };
 export declare function RichTextEditorFooter({ helperText, error, showCharacterCount, charCount, maxCharacters, showWordCount, wordCount, translation: t, }: RichTextEditorFooterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/rich-text-editor/RichTextEditorImageDialog.d.ts

@@ -4,7 +4,7 @@ type RichTextEditorImageDialogProps = {
     open: boolean;
     onClose: () => void;
     editor: Editor;
-    translation: RichTextEditorTranslation;
+    translation: Required<RichTextEditorTranslation>;
 };
 export declare function RichTextEditorImageDialog({ open, onClose, editor, translation: t, }: RichTextEditorImageDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/rich-text-editor/RichTextEditorLinkDialog.d.ts

@@ -4,7 +4,7 @@ type RichTextEditorLinkDialogProps = {
     open: boolean;
     onClose: () => void;
     editor: Editor;
-    translation: RichTextEditorTranslation;
+    translation: Required<RichTextEditorTranslation>;
 };
 export declare function RichTextEditorLinkDialog({ open, onClose, editor, translation: t, }: RichTextEditorLinkDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/rich-text-editor/RichTextEditorMarkdownDialog.d.ts

@@ -0,0 +1,10 @@
+import { type Editor } from "@tiptap/react";
+import { type RichTextEditorTranslation } from "./RichTextEditor.types";
+type RichTextEditorMarkdownDialogProps = {
+    open: boolean;
+    onClose: () => void;
+    editor: Editor;
+    translation: Required<RichTextEditorTranslation>;
+};
+export declare function RichTextEditorMarkdownDialog({ open, onClose, editor, translation: t, }: RichTextEditorMarkdownDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,88 @@
+import { useEffect as e, useState as t } from "react";
+import { Box as n, Button as r, Dialog as i, DialogActions as a, DialogContent as o, DialogTitle as s, TextField as c, Typography as l } from "@mui/material";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import f from "@mui/icons-material/ContentCopy";
+import p from "@mui/icons-material/Check";
+//#region src/components/rich-text-editor/RichTextEditorMarkdownDialog.tsx
+function m({ open: m, onClose: h, editor: g, translation: _ }) {
+	let [v, y] = t(""), [b, x] = t(!1);
+	e(() => {
+		m && y(g.storage.markdown.getMarkdown());
+	}, [m, g]);
+	function S() {
+		g.commands.setContent(v), h();
+	}
+	function C() {
+		navigator.clipboard.writeText(v).then(() => {
+			x(!0), setTimeout(() => x(!1), 2e3);
+		});
+	}
+	return /* @__PURE__ */ d(i, {
+		open: m,
+		onClose: h,
+		maxWidth: "sm",
+		fullWidth: !0,
+		children: [
+			/* @__PURE__ */ u(s, { children: _.markdownDialogTitle }),
+			/* @__PURE__ */ d(o, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 1.5,
+					pt: "16px !important"
+				},
+				children: [/* @__PURE__ */ u(l, {
+					variant: "body2",
+					color: "text.secondary",
+					children: _.markdownDialogDescription
+				}), /* @__PURE__ */ u(c, {
+					autoFocus: !0,
+					fullWidth: !0,
+					multiline: !0,
+					minRows: 8,
+					maxRows: 16,
+					value: v,
+					onChange: (e) => y(e.target.value),
+					variant: "outlined",
+					size: "small",
+					sx: { fontFamily: "monospace" },
+					slotProps: { htmlInput: { style: {
+						fontFamily: "monospace",
+						fontSize: "0.8125rem"
+					} } }
+				})]
+			}),
+			/* @__PURE__ */ d(a, {
+				sx: {
+					px: 3,
+					pb: 2,
+					gap: 1
+				},
+				children: [
+					/* @__PURE__ */ u(n, {
+						sx: { flex: 1 },
+						children: /* @__PURE__ */ u(r, {
+							onClick: C,
+							startIcon: b ? /* @__PURE__ */ u(p, {
+								fontSize: "small",
+								color: "success"
+							}) : /* @__PURE__ */ u(f, { fontSize: "small" }),
+							children: b ? _.markdownDialogCopied : _.markdownDialogCopy
+						})
+					}),
+					/* @__PURE__ */ u(r, {
+						onClick: h,
+						children: _.markdownDialogCancel
+					}),
+					/* @__PURE__ */ u(r, {
+						onClick: S,
+						variant: "contained",
+						children: _.markdownDialogApply
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { m as RichTextEditorMarkdownDialog };

package/dist/components/rich-text-editor/RichTextEditorTableMenu.d.ts

@@ -2,7 +2,7 @@ import { type Editor } from "@tiptap/react";
 import { type RichTextEditorTranslation } from "./RichTextEditor.types";
 type RichTextEditorTableMenuProps = {
     editor: Editor | null;
-    translation: RichTextEditorTranslation;
+    translation: Required<RichTextEditorTranslation>;
     disabled?: boolean;
 };
 export declare function RichTextEditorTableMenu({ editor, translation: t, disabled, }: RichTextEditorTableMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/rich-text-editor/RichTextEditorToolbar.d.ts

@@ -3,10 +3,12 @@ import { type RichTextEditorTranslation, type RichTextEditorToolbarConfig } from
 type RichTextEditorToolbarProps = {
     editor: Editor | null;
     toolbarConfig: Required<RichTextEditorToolbarConfig>;
-    translation: RichTextEditorTranslation;
+    translation: Required<RichTextEditorTranslation>;
     disabled?: boolean;
     isFullscreen: boolean;
     onToggleFullscreen: () => void;
+    pasteAsPlainText: boolean;
+    onTogglePasteAsPlainText: () => void;
 };
-export declare function RichTextEditorToolbar({ editor, toolbarConfig: tc, translation: t, disabled, isFullscreen, onToggleFullscreen, }: RichTextEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextEditorToolbar({ editor, toolbarConfig: tc, translation: t, disabled, isFullscreen, onToggleFullscreen, pasteAsPlainText, onTogglePasteAsPlainText, }: RichTextEditorToolbarProps): import("react/jsx-runtime").JSX.Element;
 export {};