@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/components/Fields/Wysiwyg/config.tsx

@@ -49,8 +49,8 @@ const getButtonsFull = () => ({
 		buttonsVisible: 6,
 	},
 	moreText2: {
-		buttons: ["insertLink", "insertImage", "insertVideo", "clearFormatting", "fullscreen"],
-		buttonsVisible: 5,
+		buttons: ["insertLinkGriddo", "insertImageGriddo", "insertFileGriddo", "insertVideo", "clearFormatting", "fullscreen"],
+		buttonsVisible: 6,
 	},
 	moreMisc: {
 		buttons: getMiscButtons(),
@@ -66,7 +66,7 @@ const getButtons = () => {
 			"bold",
 			"italic",
 			"formatUL",
-			"insertLink",
+			"insertLinkGriddo",
 			"paragraphFormat",
 			paragraphStyles ? "paragraphStyle" : undefined,
 			"langDropdown",
@@ -90,21 +90,20 @@ const getWysiwygConfig = () => ({
 		H4: "Heading 4",
 	},
 	imageEditButtons: [
-		"imageReplace",
+		"imageReplaceGriddo",
 		"imageAlign",
 		"imageCaption",
 		"imageRemove",
 		"|",
-		"imageLink",
+		"imageLinkGriddo",
 		"linkOpen",
-		"linkEdit",
 		"linkRemove",
 		"-",
 		"imageDisplay",
 		"imageAlt",
 	],
 	imageResize: false,
-	linkEditButtons: ["linkOpen", "linkEdit", "linkRemove"],
+	linkEditButtons: ["linkOpen", "editLinkGriddo", "linkRemove"],
 	videoInsertButtons: ["videoBack", "|", "videoByURL", "videoEmbed"],
 	imageAllowedTypes: ["jpeg", "jpg", "png", "svg"],
 	imageMaxSize: 20 * 1024 * 1024,
@@ -121,9 +120,18 @@ FroalaEditor.DefineIcon("langIcon", {
 	template: "svg",
 });
 
+FroalaEditor.DefineIcon("griddoImageIcon", { SVG_KEY: "insertImage" });
+FroalaEditor.DefineIcon("griddoReplaceIcon", { SVG_KEY: "replaceImage" });
+FroalaEditor.DefineIcon("griddoFileIcon", {
+	PATH: "M8 16H16V18H8V16ZM8 12H16V14H8V12ZM14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM18 20H6V4H13V9H18V20Z",
+	template: "svg",
+});
+
+FroalaEditor.DefineIcon("griddoLinkIcon", { SVG_KEY: "insertLink" });
+
 Object.assign(FroalaEditor.POPUP_TEMPLATES, {
-	"image.uploading": '[_CUSTOM_LAYER_]',
-	"image.uploadError": '[_CUSTOM_LAYER_]'
+	"image.uploading": "[_CUSTOM_LAYER_]",
+	"image.uploadError": "[_CUSTOM_LAYER_]",
 });
 
 FroalaEditor.RegisterCommand("langDropdown", {
@@ -147,6 +155,179 @@ FroalaEditor.RegisterCommand("langDropdown", {
 	},
 });
 
+FroalaEditor.RegisterCommand("insertImageGriddo", {
+	title: "Insert Image",
+	icon: "griddoImageIcon",
+	undo: false,
+	focus: false,
+	callback: function (this: any) {
+		const el = this.$el?.get?.(0) || this.el;
+		el?.dispatchEvent(
+			new CustomEvent("griddo:openGallery", {
+				bubbles: true,
+				detail: { mode: "insert" },
+			}),
+		);
+	},
+});
+
+FroalaEditor.RegisterCommand("insertFileGriddo", {
+	title: "Insert File",
+	icon: "griddoFileIcon",
+	undo: false,
+	focus: false,
+	callback: function (this: any) {
+		const el = this.$el?.get?.(0) || this.el;
+		el?.dispatchEvent(
+			new CustomEvent("griddo:openFileGallery", {
+				bubbles: true,
+				detail: { mode: "insert" },
+			}),
+		);
+	},
+});
+
+FroalaEditor.RegisterCommand("insertLinkGriddo", {
+	title: "Insert Link",
+	icon: "griddoLinkIcon",
+	undo: false,
+	focus: false,
+	callback: function (this: any) {
+		let x = window.innerWidth / 2 - 200;
+		let y = 100;
+
+		// Get the editor's wrapper and find the button within it
+		const editorEl = this.$el?.get?.(0) || this.el;
+		if (editorEl) {
+			// Find the parent wrapper of this editor
+			const wrapper = editorEl.closest(".fr-box") || editorEl.parentElement;
+			if (wrapper) {
+				// Find the insertLinkGriddo button within this wrapper's toolbar
+				const linkBtn = wrapper.querySelector('[data-cmd="insertLinkGriddo"]') as HTMLElement;
+				if (linkBtn) {
+					const rect = linkBtn.getBoundingClientRect();
+					x = rect.left;
+					y = rect.bottom + 10;
+				} else {
+					// Fallback: use editor position
+					const editorRect = editorEl.getBoundingClientRect?.();
+					if (editorRect) {
+						x = editorRect.left + editorRect.width / 2 - 200;
+						y = editorRect.top + editorRect.height + 10;
+					}
+				}
+			}
+
+			const selectedText = this.selection.text();
+			this.selection.save();
+			editorEl.dispatchEvent(
+				new CustomEvent("griddo:openLinkPopover", {
+					bubbles: true,
+					detail: { x, y, selectedText },
+				}),
+			);
+		}
+	},
+});
+
+FroalaEditor.RegisterCommand("editLinkGriddo", {
+	title: "Edit Link",
+	icon: "linkEdit",
+	undo: false,
+	focus: false,
+	callback: function (this: any) {
+		const linkElement = this.link.get();
+		if (!linkElement) return;
+
+		const linkRect = linkElement.getBoundingClientRect();
+		const x = linkRect.left;
+		const y = linkRect.bottom + 10;
+
+		const editorEl = this.$el?.get?.(0) || this.el;
+		if (editorEl) {
+			const linkUrl = linkElement.href || "";
+			const linkText = linkElement.textContent || "";
+			const isNewTab = linkElement.target === "_blank";
+			const isNoFollow = linkElement.rel?.includes("nofollow") || false;
+			const linkPageId = linkElement.getAttribute("data-pageId");
+
+			linkElement.setAttribute("data-griddo-editing", "true");
+			this.selection.save();
+			editorEl.dispatchEvent(
+				new CustomEvent("griddo:openLinkPopover", {
+					bubbles: true,
+					detail: { x, y, selectedText: linkText, linkUrl, isNewTab, isNoFollow, isEditing: true, linkPageId },
+				}),
+			);
+		}
+	},
+});
+
+FroalaEditor.RegisterCommand("imageLinkGriddo", {
+	title: "Link",
+	icon: "griddoLinkIcon",
+	undo: false,
+	focus: false,
+	callback: function (this: any) {
+		const jqElement = this.image.get();
+		if (!jqElement) return;
+
+		const imgElement = jqElement[0] || jqElement;
+		if (!imgElement || typeof imgElement.getBoundingClientRect !== "function") return;
+
+		const imgRect = imgElement.getBoundingClientRect();
+		const x = imgRect.left;
+		const y = imgRect.bottom + 10;
+
+		const editorEl = this.$el?.get?.(0) || this.el;
+		if (editorEl) {
+			const currentLink = imgElement.parentElement?.tagName === "A" ? imgElement.parentElement : null;
+			const isEditing = !!currentLink;
+
+			this.selection.save();
+
+			if (isEditing) {
+				const linkUrl = currentLink.href || "";
+				const isNewTab = currentLink.target === "_blank";
+				const isNoFollow = currentLink.rel?.includes("nofollow") || false;
+				const linkPageId = currentLink.getAttribute("data-pageId");
+
+				currentLink.setAttribute("data-griddo-editing-image-link", "true");
+				editorEl.dispatchEvent(
+					new CustomEvent("griddo:openLinkPopover", {
+						bubbles: true,
+						detail: { x, y, selectedText: "", linkUrl, isNewTab, isNoFollow, isEditing: true, linkPageId, isImageLink: true },
+					}),
+				);
+			} else {
+				imgElement.setAttribute("data-griddo-editing-image", "true");
+				editorEl.dispatchEvent(
+					new CustomEvent("griddo:openLinkPopover", {
+						bubbles: true,
+						detail: { x, y, selectedText: "", linkUrl: "", isNewTab: false, isNoFollow: false, isEditing: false, linkPageId: null, isImageLink: true },
+					}),
+				);
+			}
+		}
+	},
+});
+
+FroalaEditor.RegisterCommand("imageReplaceGriddo", {
+	title: "Replace Image",
+	icon: "griddoReplaceIcon",
+	undo: true,
+	focus: false,
+	callback: function (this: any) {
+		const el = this.$el?.get?.(0) || this.el;
+		el?.dispatchEvent(
+			new CustomEvent("griddo:openGallery", {
+				bubbles: true,
+				detail: { mode: "replace", $img: this.image.get() },
+			}),
+		);
+	},
+});
+
 export {
 	getButtonsFull as buttonsFull,
 	getButtons as buttons,

package/src/components/Fields/Wysiwyg/helpers.tsx

@@ -85,4 +85,57 @@ const getLanguageMenuHtml = (languages: { name: string; iso: string; featured?:
 	);
 };
 
-export { getRichTextConfig, parseClassNames, getLanguageMenuHtml, type IRichTextConfig };
+const setLinkAttributes = (
+	element: HTMLElement | null,
+	url: string,
+	options?: { newTab?: boolean; noFollow?: boolean; linkTo?: number | null }
+) => {
+	if (!element) return;
+	element.setAttribute("href", url);
+	if (options?.newTab) {
+		element.setAttribute("target", "_blank");
+	} else {
+		element.removeAttribute("target");
+	}
+	if (options?.noFollow) {
+		element.setAttribute("rel", "nofollow");
+	} else {
+		element.removeAttribute("rel");
+	}
+	if (options?.linkTo) {
+		element.setAttribute("data-pageId", String(options.linkTo));
+	} else {
+		element.removeAttribute("data-pageId");
+	}
+};
+
+const getPopupPosition = (editorEl: HTMLElement) => {
+	const editorRect = editorEl.getBoundingClientRect?.();
+	return {
+		x: editorRect ? editorRect.left + editorRect.width / 2 - 100 : window.innerWidth / 2 - 100,
+		y: editorRect ? editorRect.top + 50 : 50,
+	};
+};
+
+const createPopupFunctions = (editor: any, editorEl: HTMLElement) => {
+	const showPopup = (name: string, template: any, keepVisible = false) => {
+		editor.popups.create(name, template);
+		if (!keepVisible) {
+			editor.popups.onHide(name, () => false);
+		}
+		const pos = getPopupPosition(editorEl);
+		editor.popups.show(name, pos.x, pos.y, 50);
+	};
+
+	const showErrorPopup = () => {
+		const errorPopupTemplate = {
+			custom_layer: '<div style="padding: 15px 30px; text-align: center; color: #d32f2f;">Upload failed</div>',
+		};
+		showPopup("image.uploadError", errorPopupTemplate);
+		setTimeout(() => editor.popups.hide("image.uploadError"), 3000);
+	};
+
+	return { showPopup, showErrorPopup };
+};
+
+export { getRichTextConfig, parseClassNames, getLanguageMenuHtml, setLinkAttributes, getPopupPosition, createPopupFunctions, type IRichTextConfig };

package/src/components/Fields/Wysiwyg/index.tsx

@@ -1,16 +1,21 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import FroalaEditorComponent from "react-froala-wysiwyg";
 import { connect } from "react-redux";
 
+import { FileGallery, Gallery, Modal } from "@ax/components";
 import { galleryActions } from "@ax/containers/Gallery";
 import { decodeEntities } from "@ax/helpers";
-import type { IImage, IRootState, ISite } from "@ax/types";
+import type { IFile, IImage, IRootState, ISite } from "@ax/types";
 
 import FroalaEditor from "froala-editor";
 
+import { LinkPopover } from "./atoms";
 import { buttons, buttonsFull, inlineToolbar, wysiwygConfig } from "./config";
+import { createPopupFunctions, getPopupPosition, setLinkAttributes } from "./helpers";
 import "./vendors";
 
+import { useModals } from "@ax/hooks";
+
 import * as S from "./style";
 
 const Wysiwyg = (props: IWysiwygProps) => {
@@ -33,12 +38,40 @@ const Wysiwyg = (props: IWysiwygProps) => {
 	const errorRef = useRef(error);
 	errorRef.current = error;
 
+	const { isOpen, toggleModal } = useModals(["image", "file"]);
+	const [linkPopoverOpen, setLinkPopoverOpen] = useState(false);
+	const [linkPopoverPos, setLinkPopoverPos] = useState({ x: 0, y: 0 });
+	const [selectedText, setSelectedText] = useState("");
+	const [linkData, setLinkData] = useState<{
+		url: string;
+		newTab: boolean;
+		noFollow: boolean;
+		isEditing: boolean;
+		linkPageId?: number | null;
+		isImageLink?: boolean;
+	} | null>(null);
+	const replaceImgRef = useRef<any>(null);
+	const lastValueRef = useRef(value);
+
 	useEffect(() => {
 		if (!editorRef.current) return;
 		disabled ? editorRef.current.edit.off() : editorRef.current.edit.on();
 	}, [disabled]);
 
+	useEffect(() => {
+		lastValueRef.current = value;
+	}, [value]);
+
 	const handleChange = (model: string) => {
+		// Ignore if only difference is Froala's automatic empty paragraph
+		const cleanCurrent = model.replace(/<p><br><\/p>$/, "").trim();
+		const cleanLast = (lastValueRef.current || "").replace(/<p><br><\/p>$/, "").trim();
+
+		if (cleanCurrent === cleanLast) {
+			return;
+		}
+
+		lastValueRef.current = model;
 		onChange(model);
 		const stripedHtml = decodeEntities(model);
 		setTimeout(() => {
@@ -46,53 +79,150 @@ const Wysiwyg = (props: IWysiwygProps) => {
 		}, 300);
 	};
 
-	const dynamicConfig = {
-		placeholderText: placeholder,
-		toolbarButtons: inline ? inlineToolbar() : full ? buttonsFull() : buttons(),
-		toolbarInline: inline,
-		charCounterCount: !inline,
-		imageUpload: false,
-		multiLine: !inline,
-		enter: inline ? FroalaEditor.ENTER_BR : FroalaEditor.ENTER_P,
-		requestHeaders: {
-			Authorization: `bearer ${token}`,
-		},
-		events: {
-			initialized(this: any) {
-				editorRef.current = this;
-
-				if (disabled) {
-					this.edit.off();
+	const handleFileSelected = (file: IFile) => {
+		if (file?.url && editorRef.current) {
+			editorRef.current.selection.restore();
+			editorRef.current.link.insert(file.url, file.fileName, { target: "_blank" });
+			const updatedHtml = editorRef.current.html.get();
+			handleChange(updatedHtml);
+		}
+	};
+
+	const handleImageSelected = (img: IImage | null) => {
+		if (img?.url && editorRef.current) {
+			if (replaceImgRef.current && replaceImgRef.current.length > 0) {
+				const imgElement = replaceImgRef.current[0];
+				imgElement.src = img.url;
+				if (img.alt) {
+					imgElement.alt = img.alt;
 				}
+			} else {
+				editorRef.current.selection.restore();
+				editorRef.current.image.insert(img.url, true, { alt: img.alt || "" }, null, null);
+			}
+
+			replaceImgRef.current = null;
+			const updatedHtml = editorRef.current.html.get();
+			handleChange(updatedHtml);
+		}
+	};
+
+	const handleInsertLink = (
+		url: string,
+		text: string,
+		options?: { newTab: boolean; noFollow: boolean; linkTo?: number | null },
+	) => {
+		if (url && editorRef.current) {
+			const linkOptions: any = {};
+			if (options?.newTab) {
+				linkOptions.target = "_blank";
+			}
+			if (options?.noFollow) {
+				linkOptions.rel = "nofollow";
+			}
+			if (options?.linkTo) {
+				linkOptions["data-pageId"] = options.linkTo;
+			}
+
+			if (linkData?.isImageLink) {
+				const editingImageLink = editorRef.current.$el
+					?.get?.(0)
+					?.querySelector('[data-griddo-editing-image-link="true"]');
+				const editingImage = editorRef.current.$el?.get?.(0)?.querySelector('[data-griddo-editing-image="true"]');
+
+				if (editingImageLink) {
+					setLinkAttributes(editingImageLink, url, options);
+					editingImageLink.removeAttribute("data-griddo-editing-image-link");
+				} else if (editingImage) {
+					let linkElement = editingImage.parentElement?.tagName === "A" ? editingImage.parentElement : null;
+
+					if (!linkElement) {
+						linkElement = document.createElement("a");
+						editingImage.parentElement?.insertBefore(linkElement, editingImage);
+						linkElement.appendChild(editingImage);
+					}
+
+					setLinkAttributes(linkElement, url, options);
+					editingImage.removeAttribute("data-griddo-editing-image");
+				}
+			} else if (linkData?.isEditing) {
+				const editingLink = editorRef.current.$el?.get?.(0)?.querySelector('[data-griddo-editing="true"]');
+				if (editingLink) {
+					setLinkAttributes(editingLink, url, options);
+					editingLink.textContent = text || url;
+					editingLink.removeAttribute("data-griddo-editing");
+				}
+			} else {
+				editorRef.current.selection.restore();
+				editorRef.current.link.insert(url, text || url, linkOptions);
+			}
+			setLinkPopoverOpen(false);
+			const updatedHtml = editorRef.current.html.get();
+			handleChange(updatedHtml);
+		}
+	};
+
+	const handleCloseLinkPopover = () => {
+		setLinkPopoverOpen(false);
+		setLinkData(null);
+	};
+
+	const dynamicConfig = useMemo(
+		() => ({
+			placeholderText: placeholder,
+			toolbarButtons: inline ? inlineToolbar() : full ? buttonsFull() : buttons(),
+			toolbarInline: inline,
+			charCounterCount: !inline,
+			imageUpload: false,
+			multiLine: !inline,
+			enter: inline ? FroalaEditor.ENTER_BR : FroalaEditor.ENTER_P,
+			requestHeaders: {
+				Authorization: `bearer ${token}`,
+			},
+			events: {
+				initialized(this: any) {
+					editorRef.current = this;
+
+					if (disabled) {
+						this.edit.off();
+					}
 
-				if (full && !inline) {
 					const editorEl = this.$el?.get?.(0) || this.el;
-					if (editorEl) {
-						const getPopupPosition = () => {
-							const editorRect = editorEl.getBoundingClientRect?.();
-							return {
-								x: editorRect ? editorRect.left + editorRect.width / 2 - 100 : window.innerWidth / 2 - 100,
-								y: editorRect ? editorRect.top + 50 : 50,
-							};
-						};
-
-						const showPopup = (name: string, template: any, keepVisible = false) => {
-							this.popups.create(name, template);
-							if (!keepVisible) {
-								this.popups.onHide(name, () => false);
-							}
-							const pos = getPopupPosition();
-							this.popups.show(name, pos.x, pos.y, 50);
-						};
-
-						const showErrorPopup = () => {
-							const errorPopupTemplate = {
-								custom_layer:
-									'<div style="padding: 15px 30px; text-align: center; color: #d32f2f;">Upload failed</div>',
-							};
-							showPopup("image.uploadError", errorPopupTemplate);
-							setTimeout(() => this.popups.hide("image.uploadError"), 3000);
-						};
+					if (!editorEl) return;
+
+					editorEl.addEventListener("griddo:openLinkPopover", (e: Event) => {
+						const detail = (e as CustomEvent).detail;
+						setLinkPopoverOpen(true);
+						setLinkPopoverPos({ x: detail.x, y: detail.y });
+						setSelectedText(detail.selectedText || "");
+						setLinkData(
+							detail.isEditing || detail.isImageLink
+								? {
+										url: detail.linkUrl || "",
+										newTab: detail.isNewTab || false,
+										noFollow: detail.isNoFollow || false,
+										isEditing: detail.isEditing || false,
+										linkPageId: detail.linkPageId || null,
+										isImageLink: detail.isImageLink || false,
+									}
+								: null,
+						);
+					});
+
+					if (full && !inline) {
+						const { showErrorPopup } = createPopupFunctions(this, editorEl);
+
+						editorEl.addEventListener("griddo:openGallery", (e: Event) => {
+							const detail = (e as CustomEvent).detail;
+							replaceImgRef.current = detail?.mode === "replace" ? detail.$img : null;
+							editorRef.current?.selection.save();
+							toggleModal("image");
+						});
+
+						editorEl.addEventListener("griddo:openFileGallery", () => {
+							editorRef.current?.selection.save();
+							toggleModal("file");
+						});
 
 						editorEl.addEventListener("drop", async (e: DragEvent) => {
 							e.preventDefault();
@@ -110,13 +240,13 @@ const Wysiwyg = (props: IWysiwygProps) => {
 										if (isUploading) {
 											setTimeout(() => {
 												if (isUploading) {
-													const pos = getPopupPosition();
+													const pos = getPopupPosition(editorEl);
 													this.popups.show("image.uploading", pos.x, pos.y, 50);
 												}
 											}, 0);
 										}
 									});
-									const pos = getPopupPosition();
+									const pos = getPopupPosition(editorEl);
 									this.popups.show("image.uploading", pos.x, pos.y, 50);
 
 									try {
@@ -138,22 +268,41 @@ const Wysiwyg = (props: IWysiwygProps) => {
 							}
 						});
 					}
-				}
-			},
-			blur: function (this: any) {
-				const html = this.html.get();
-				const stripedHtml = decodeEntities(html);
-				handleValidation?.(stripedHtml);
+				},
+				blur: function (this: any) {
+					const html = this.html.get();
+					const stripedHtml = decodeEntities(html);
+					handleValidation?.(stripedHtml);
+				},
 			},
-		},
-	};
+		}),
+		[placeholder, inline, full, disabled, token, toggleModal, handleValidation, imageSite, uploadImage],
+	);
 
-	const config = { ...wysiwygConfig(), ...dynamicConfig };
+	const config = useMemo(() => ({ ...wysiwygConfig(), ...dynamicConfig }), [dynamicConfig]);
 
 	return (
-		<S.EditorWrapper error={error} disabled={disabled} data-testid="wysiwyg-wrapper">
-			<FroalaEditorComponent tag="textarea" model={value} config={config} onModelChange={handleChange} />
-		</S.EditorWrapper>
+		<>
+			<S.EditorWrapper error={error} disabled={disabled} data-testid="wysiwyg-wrapper">
+				<FroalaEditorComponent tag="textarea" model={value} config={config} onModelChange={handleChange} />
+			</S.EditorWrapper>
+			<Modal isOpen={isOpen("image")} hide={() => toggleModal("image")} size="XL" title="Select image">
+				<Gallery getImageSelected={handleImageSelected} toggleModal={() => toggleModal("image")} site={site} />
+			</Modal>
+			<Modal isOpen={isOpen("file")} hide={() => toggleModal("file")} size="XL" title="Select file">
+				<FileGallery addFile={handleFileSelected} toggleModal={() => toggleModal("file")} site={site} />
+			</Modal>
+			{linkPopoverOpen && (
+				<LinkPopover
+					x={linkPopoverPos.x}
+					y={linkPopoverPos.y}
+					selectedText={selectedText}
+					linkData={linkData}
+					onInsert={handleInsertLink}
+					onClose={handleCloseLinkPopover}
+				/>
+			)}
+		</>
 	);
 };
 
@@ -166,7 +315,7 @@ interface IProps {
 	onChange: (value: string) => void;
 	disabled?: boolean;
 	handleValidation?: (value: string) => void;
-	site: ISite;
+	site: ISite | null;
 	inline?: boolean;
 }
 

package/src/components/Fields/Wysiwyg/style.tsx

@@ -1,6 +1,37 @@
-import styled from "styled-components";
 import { Wrapper } from "@ax/components/FieldsBehavior/style";
 
+import styled from "styled-components";
+
+export const PopoverOverlay = styled.div`
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 999;
+`;
+
+export const PopoverContainer = styled.div<{ x: number; y: number }>`
+	position: fixed;
+	top: ${(p) => p.y}px;
+	left: ${(p) => p.x}px;
+	z-index: 1000;
+	background: ${(p) => p.theme.color.uiBackground02};
+	border-radius: 4px;
+	box-shadow: ${(p) => p.theme.shadow.shadowL};
+	padding: ${(p) => p.theme.spacing.s};
+	width: 320px;
+	max-height: 80vh;
+	overflow-y: auto;
+`;
+
+export const PopoverButtonWrapper = styled.div`
+	display: flex;
+	gap: ${(p) => p.theme.spacing.s};
+	justify-content: flex-end;
+	margin-top: ${(p) => p.theme.spacing.m};
+`;
+
 export const EditorWrapper = styled.div<{ error: boolean | undefined; disabled?: boolean }>`
   margin-bottom: ${(p) => p.theme.spacing.xxs};
   .fr-box.fr-basic {

package/src/components/Fields/Wysiwyg/vendors.tsx

@@ -8,7 +8,6 @@ import "froala-editor/js/plugins/lists.min.js";
 import "froala-editor/js/plugins/code_view.min.js";
 import "froala-editor/js/plugins/code_beautifier.min.js";
 import "froala-editor/js/plugins/image.min.js";
-import "froala-editor/js/plugins/image_manager.min.js";
 import "froala-editor/js/plugins/link.min.js";
 import "froala-editor/js/plugins/video.min.js";
 import "froala-editor/js/plugins/quote.min.js";