@griddo/ax 12.3.0 → 12.5.0

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

@@ -19,6 +19,18 @@ const getTableCellStyles = () => {
 	const config = getRichTextConfigLazy();
 	return config?.tableCellStyles ? parseClassNames(config.tableCellStyles) : undefined;
 };
+const getImageStyles = () => {
+	const config = getRichTextConfigLazy();
+	return config?.imageStyles ? parseClassNames(config.imageStyles) : undefined;
+};
+// Opt-in: instances not asking for it keep their images unresizable.
+const getImageResize = () => getRichTextConfigLazy()?.imageResize === true;
+// When resizing is allowed the size is stored as a rounded percentage, so it
+// still adapts to its container instead of being pinned to a pixel width.
+const getImageResizeConfig = () => {
+	const imageResize = getImageResize();
+	return { imageResize, imageResizeWithPercent: imageResize, imageRoundPercent: imageResize };
+};
 
 const getMiscButtons = () => {
 	const paragraphStyles = getParagraphStyles();
@@ -49,7 +61,14 @@ const getButtonsFull = () => ({
 		buttonsVisible: 6,
 	},
 	moreText2: {
-		buttons: ["insertLinkGriddo", "insertImageGriddo", "insertFileGriddo", "insertVideo", "clearFormatting", "fullscreen"],
+		buttons: [
+			"insertLinkGriddo",
+			"insertImageGriddo",
+			"insertFileGriddo",
+			"insertVideo",
+			"clearFormatting",
+			"fullscreen",
+		],
 		buttonsVisible: 6,
 	},
 	moreMisc: {
@@ -76,6 +95,25 @@ const getButtons = () => {
 
 const getInlineToolbar = () => ["langDropdown", "undo", "redo"];
 
+const getImageEditButtons = () => {
+	const imageStyles = getImageStyles();
+	return [
+		"imageReplaceGriddo",
+		"imageAlign",
+		"imageCaption",
+		"imageRemove",
+		"|",
+		"imageLinkGriddo",
+		"linkOpen",
+		"linkRemove",
+		"-",
+		"imageDisplay",
+		imageStyles ? "imageStyle" : undefined,
+		"imageAlt",
+		getImageResize() ? "imageSize" : undefined,
+	];
+};
+
 const getWysiwygConfig = () => ({
 	key: process.env.GRIDDO_FROALA_KEY || process.env.REACT_APP_FROALA_KEY,
 	// pastePlain: false,
@@ -89,20 +127,10 @@ const getWysiwygConfig = () => ({
 		H3: "Heading 3",
 		H4: "Heading 4",
 	},
-	imageEditButtons: [
-		"imageReplaceGriddo",
-		"imageAlign",
-		"imageCaption",
-		"imageRemove",
-		"|",
-		"imageLinkGriddo",
-		"linkOpen",
-		"linkRemove",
-		"-",
-		"imageDisplay",
-		"imageAlt",
-	],
-	imageResize: false,
+	imageEditButtons: getImageEditButtons(),
+	...getImageResizeConfig(),
+	imageDefaultWidth: null,
+	imageDefaultHeight: null,
 	linkEditButtons: ["linkOpen", "editLinkGriddo", "linkRemove"],
 	videoInsertButtons: ["videoBack", "|", "videoByURL", "videoEmbed"],
 	imageAllowedTypes: ["jpeg", "jpg", "png", "svg"],
@@ -112,6 +140,7 @@ const getWysiwygConfig = () => ({
 	paragraphStyles: getParagraphStyles(),
 	tableStyles: getTableStyles(),
 	tableCellStyles: getTableCellStyles(),
+	imageStyles: getImageStyles(),
 	imageUploadRemoteUrls: false,
 });
 
@@ -161,6 +190,7 @@ FroalaEditor.RegisterCommand("insertImageGriddo", {
 	undo: false,
 	focus: false,
 	callback: function (this: any) {
+		this.selection.save();
 		const el = this.$el?.get?.(0) || this.el;
 		el?.dispatchEvent(
 			new CustomEvent("griddo:openGallery", {
@@ -177,6 +207,7 @@ FroalaEditor.RegisterCommand("insertFileGriddo", {
 	undo: false,
 	focus: false,
 	callback: function (this: any) {
+		this.selection.save();
 		const el = this.$el?.get?.(0) || this.el;
 		el?.dispatchEvent(
 			new CustomEvent("griddo:openFileGallery", {
@@ -296,7 +327,17 @@ FroalaEditor.RegisterCommand("imageLinkGriddo", {
 				editorEl.dispatchEvent(
 					new CustomEvent("griddo:openLinkPopover", {
 						bubbles: true,
-						detail: { x, y, selectedText: "", linkUrl, isNewTab, isNoFollow, isEditing: true, linkPageId, isImageLink: true },
+						detail: {
+							x,
+							y,
+							selectedText: "",
+							linkUrl,
+							isNewTab,
+							isNoFollow,
+							isEditing: true,
+							linkPageId,
+							isImageLink: true,
+						},
 					}),
 				);
 			} else {
@@ -304,7 +345,17 @@ FroalaEditor.RegisterCommand("imageLinkGriddo", {
 				editorEl.dispatchEvent(
 					new CustomEvent("griddo:openLinkPopover", {
 						bubbles: true,
-						detail: { x, y, selectedText: "", linkUrl: "", isNewTab: false, isNoFollow: false, isEditing: false, linkPageId: null, isImageLink: true },
+						detail: {
+							x,
+							y,
+							selectedText: "",
+							linkUrl: "",
+							isNewTab: false,
+							isNoFollow: false,
+							isEditing: false,
+							linkPageId: null,
+							isImageLink: true,
+						},
 					}),
 				);
 			}

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

@@ -17,6 +17,8 @@ interface IRichTextConfig {
 	paragraphStyles?: { label: string; className: string }[];
 	tableStyles?: { label: string; className: string }[];
 	tableCellStyles?: { label: string; className: string }[];
+	imageStyles?: { label: string; className: string }[];
+	imageResize?: boolean;
 	editorLangs?: { name: string; iso: string }[];
 }
 

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

@@ -84,10 +84,16 @@ const Wysiwyg = (props: IWysiwygProps) => {
 
 	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);
+			// Wait for Froala to stabilize after re-render before restoring selection
+			setTimeout(() => {
+				if (!editorRef.current) return;
+				editorRef.current.selection.restore();
+				// Use html.insert instead of link.insert to avoid selection issues
+				const linkHtml = `<a href="${file.url}" target="_blank">${file.fileName}</a>`;
+				editorRef.current.html.insert(linkHtml);
+				const updatedHtml = editorRef.current.html.get();
+				handleChange(updatedHtml);
+			}, 100);
 		}
 	};
 
@@ -99,14 +105,23 @@ const Wysiwyg = (props: IWysiwygProps) => {
 				if (img.alt) {
 					imgElement.alt = img.alt;
 				}
+				replaceImgRef.current = null;
+				const updatedHtml = editorRef.current.html.get();
+				handleChange(updatedHtml);
 			} else {
-				editorRef.current.selection.restore();
-				editorRef.current.image.insert(img.url, true, { alt: img.alt || "" }, null, null);
+				// Wait for Froala to stabilize after re-render before restoring selection
+				setTimeout(() => {
+					if (!editorRef.current) return;
+					editorRef.current.selection.restore();
+					// Use html.insert instead of image.insert to avoid selection issues
+					const imgHtml = `<img src="${img.url}" alt="${img.alt || ""}" />`;
+					editorRef.current.html.insert(imgHtml);
+					const updatedHtml = editorRef.current.html.get();
+					handleChange(updatedHtml);
+				}, 100);
 			}
 
 			replaceImgRef.current = null;
-			const updatedHtml = editorRef.current.html.get();
-			handleChange(updatedHtml);
 		}
 	};
 
@@ -219,12 +234,10 @@ const Wysiwyg = (props: IWysiwygProps) => {
 						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");
 						});
 
@@ -278,6 +291,24 @@ const Wysiwyg = (props: IWysiwygProps) => {
 					const stripedHtml = decodeEntities(html);
 					handleValidation?.(stripedHtml);
 				},
+				contentChanged: function (this: any) {
+					const editorEl = this.$el?.get?.(0) || this.el;
+					const images = editorEl?.querySelectorAll?.("img");
+					if (images) {
+						images.forEach((img: HTMLImageElement) => {
+							const hasFrDib = img.classList.contains("fr-dib");
+							const hasFrDii = img.classList.contains("fr-dii");
+
+							img.classList.remove("img-inline", "img-block");
+
+							if (hasFrDib) {
+								img.classList.add("img-block");
+							} else if (hasFrDii) {
+								img.classList.add("img-inline");
+							}
+						});
+					}
+				},
 			},
 		}),
 		[placeholder, inline, full, disabled, token, toggleModal, handleValidation, imageSite, uploadImage],

package/src/components/Flag/components/index.ts

@@ -0,0 +1,30 @@
+import type { ComponentType } from "react";
+
+import Ca_ES from "./Ca_ES";
+import De_DE from "./De_DE";
+import En_GB from "./En_GB";
+import Es_ES from "./Es_ES";
+import Eu_ES from "./Eu_ES";
+import Fr_FR from "./Fr_FR";
+import It_IT from "./It_IT";
+import Pt_PT from "./Pt_PT";
+
+/**
+ * Static registry of every flag. Replaces the dynamic `require()` this
+ * component used to do: a template-literal require only resolves through
+ * webpack's CommonJS context modules, so it breaks under ESM.
+ *
+ * When adding a flag, import it above and register it here.
+ */
+const flags: Record<string, ComponentType<any>> = {
+	Ca_ES,
+	De_DE,
+	En_GB,
+	Es_ES,
+	Eu_ES,
+	Fr_FR,
+	It_IT,
+	Pt_PT,
+};
+
+export default flags;

package/src/components/Flag/index.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import flags from "./components";
+
 const getImage = (name: string) => {
 	const simpleIcons: any = {
 		es: "Es_ES",
@@ -11,11 +13,7 @@ const getImage = (name: string) => {
 	};
 	const filename = simpleIcons[name?.toLowerCase()] || name;
 
-	try {
-		return require(`./components/${filename}`).default;
-	} catch (err) {
-		return null;
-	}
+	return flags[filename] ?? null;
 };
 const Flag = (props: IProps) => {
 	const name = props.name.charAt(0).toUpperCase() + props.name.slice(1);

package/src/components/Icon/components/index.ts

@@ -0,0 +1,229 @@
+import type { ComponentType } from "react";
+
+import Active from "./Active";
+import Add from "./Add";
+import AddCircle from "./AddCircle";
+import Alert from "./Alert";
+import AlignLeft from "./AlignLeft";
+import Back from "./Back";
+import BulletList from "./BulletList";
+import Button from "./Button";
+import Calendar from "./Calendar";
+import CancelEvent from "./CancelEvent";
+import Category from "./Category";
+import Change from "./Change";
+import Close from "./Close";
+import ClosePanel from "./ClosePanel";
+import CodeBody from "./CodeBody";
+import CodeHead from "./CodeHead";
+import CodeHeadBody from "./CodeHeadBody";
+import Collapsed from "./Collapsed";
+import ColorPicker from "./ColorPicker";
+import Compose from "./Compose";
+import Copy from "./Copy";
+import Copy2 from "./Copy2";
+import Data from "./Data";
+import DataAdd from "./DataAdd";
+import Deactivate from "./Deactivate";
+import Delete from "./Delete";
+import Desktop from "./Desktop";
+import Disabled from "./Disabled";
+import Done from "./Done";
+import DownArrow from "./DownArrow";
+import Download from "./Download";
+import Drag from "./Drag";
+import Duplicate from "./Duplicate";
+import Edit from "./Edit";
+import Empty from "./Empty";
+import EmptyCheck from "./EmptyCheck";
+import Extend from "./Extend";
+import File from "./File";
+import Filter from "./Filter";
+import Form from "./Form";
+import FullArrowDown from "./FullArrowDown";
+import FullArrowLeft from "./FullArrowLeft";
+import FullArrowRight from "./FullArrowRight";
+import FullArrowUp from "./FullArrowUp";
+import Grid from "./Grid";
+import Grid2 from "./Grid2";
+import GriddoLogo from "./GriddoLogo";
+import HeroCard from "./HeroCard";
+import Hide from "./Hide";
+import History from "./History";
+import Home from "./Home";
+import Ia from "./Ia";
+import Image from "./Image";
+import Info from "./Info";
+import Laptop from "./Laptop";
+import LeftArrow from "./LeftArrow";
+import Link from "./Link";
+import Lock from "./Lock";
+import Log from "./Log";
+// Aliased: a binding named `Map` would shadow the global.
+import MapIcon from "./Map";
+import Menu from "./Menu";
+import Microsoft from "./Microsoft";
+import Modified from "./Modified";
+import Modules from "./Modules";
+import More from "./More";
+import NewFolder from "./NewFolder";
+import Offline from "./Offline";
+import OfflinePending from "./OfflinePending";
+import OpenOutside from "./OpenOutside";
+import OpenPanel from "./OpenPanel";
+import OutOfSection from "./OutOfSection";
+import Page from "./Page";
+import Party from "./Party";
+import Paste from "./Paste";
+import Phone from "./Phone";
+import PhotoLibrary from "./PhotoLibrary";
+import Power from "./Power";
+import Preview from "./Preview";
+import Project from "./Project";
+import QrCode from "./QrCode";
+import Question from "./Question";
+import Refresh from "./Refresh";
+import Republish from "./Republish";
+import RightArrow from "./RightArrow";
+import Scheduled from "./Scheduled";
+import Search from "./Search";
+import SendEmail from "./SendEmail";
+import Settings from "./Settings";
+import Share from "./Share";
+import Subsection from "./Subsection";
+import Success from "./Success";
+import SuccessSolid from "./SuccessSolid";
+import Sync from "./Sync";
+import Tablet from "./Tablet";
+import Translate from "./Translate";
+import Unlink from "./Unlink";
+import UpArrow from "./UpArrow";
+import UploadFile from "./UploadFile";
+import UploadPending from "./UploadPending";
+import UrlLink from "./UrlLink";
+import User from "./User";
+import Users from "./Users";
+import Video from "./Video";
+import View from "./View";
+import Warning from "./Warning";
+import Web from "./Web";
+import Working from "./Working";
+
+/**
+ * Static registry of every icon. Replaces the dynamic `require()` this
+ * component used to do: a template-literal require only resolves through
+ * webpack's CommonJS context modules, so it breaks under ESM.
+ *
+ * When adding an icon, import it above and register it here.
+ */
+const icons: Record<string, ComponentType<any>> = {
+	Active,
+	Add,
+	AddCircle,
+	Alert,
+	AlignLeft,
+	Back,
+	BulletList,
+	Button,
+	Calendar,
+	CancelEvent,
+	Category,
+	Change,
+	Close,
+	ClosePanel,
+	CodeBody,
+	CodeHead,
+	CodeHeadBody,
+	Collapsed,
+	ColorPicker,
+	Compose,
+	Copy,
+	Copy2,
+	Data,
+	DataAdd,
+	Deactivate,
+	Delete,
+	Desktop,
+	Disabled,
+	Done,
+	DownArrow,
+	Download,
+	Drag,
+	Duplicate,
+	Edit,
+	Empty,
+	EmptyCheck,
+	Extend,
+	File,
+	Filter,
+	Form,
+	FullArrowDown,
+	FullArrowLeft,
+	FullArrowRight,
+	FullArrowUp,
+	Grid,
+	Grid2,
+	GriddoLogo,
+	HeroCard,
+	Hide,
+	History,
+	Home,
+	Ia,
+	Image,
+	Info,
+	Laptop,
+	LeftArrow,
+	Link,
+	Lock,
+	Log,
+	Map: MapIcon,
+	Menu,
+	Microsoft,
+	Modified,
+	Modules,
+	More,
+	NewFolder,
+	Offline,
+	OfflinePending,
+	OpenOutside,
+	OpenPanel,
+	OutOfSection,
+	Page,
+	Party,
+	Paste,
+	Phone,
+	PhotoLibrary,
+	Power,
+	Preview,
+	Project,
+	QrCode,
+	Question,
+	Refresh,
+	Republish,
+	RightArrow,
+	Scheduled,
+	Search,
+	SendEmail,
+	Settings,
+	Share,
+	Subsection,
+	Success,
+	SuccessSolid,
+	Sync,
+	Tablet,
+	Translate,
+	Unlink,
+	UpArrow,
+	UploadFile,
+	UploadPending,
+	UrlLink,
+	User,
+	Users,
+	Video,
+	View,
+	Warning,
+	Web,
+	Working,
+};
+
+export default icons;

package/src/components/Icon/index.tsx

@@ -1,10 +1,6 @@
-const getImage = (name: string) => {
-	try {
-		return require(`./components/${name}`).default;
-	} catch (_err) {
-		return null;
-	}
-};
+import icons from "./components";
+
+const getImage = (name: string) => icons[name] ?? null;
 
 const Icon = (props: IProps) => {
 	const name = props.name

package/src/components/ResizePanel/index.tsx

@@ -27,8 +27,10 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 	};
 
 	useEffect(() => {
+		let frame = 0;
+
 		const updateWidth = () => {
-			requestAnimationFrame(() => {
+			frame = requestAnimationFrame(() => {
 				if (rightPanelRef.current) {
 					setRwidth(rightPanelRef.current.offsetWidth);
 				}
@@ -38,7 +40,10 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 		updateWidth();
 
 		window.addEventListener("resize", updateWidth);
-		return () => window.removeEventListener("resize", updateWidth);
+		return () => {
+			cancelAnimationFrame(frame);
+			window.removeEventListener("resize", updateWidth);
+		};
 	}, []);
 
 	useEffect(() => {

package/src/constants/index.ts

@@ -25,7 +25,7 @@ const itemLabel = {
 type ItemLabel = ValueOf<typeof itemLabel>;
 
 const VALID_IMAGE_FORMATS = ["jpeg", "jpg", "png", "svg", "gif", "webp"];
-const VALID_DOCUMENT_FORMATS = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv", "txt"];
+const VALID_DOCUMENT_FORMATS = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv", "txt", "md"];
 const VALID_VIDEO_FORMATS = ["mov", "mp4", "wmv", "avi", "webm", "mkv"];
 const VALID_FILE_FORMATS = [...VALID_DOCUMENT_FORMATS, ...VALID_VIDEO_FORMATS];
 

package/src/helpers/files.tsx

@@ -27,6 +27,8 @@ const getFileIcon = (type: string) => {
 			return "iconVideo.svg";
 		case "txt":
 			return "txt.svg";
+		case "md":
+			return "markdown.svg";
 		default:
 			return "iconFile.svg";
 	}

package/src/modules/FileDrive/FileFilters/Type/index.tsx

@@ -22,6 +22,7 @@ const Type = (props: ITypeProps): JSX.Element => {
 		{ name: "csv", value: "csv", title: "CSV" },
 		{ name: "zip", value: "zip", title: "ZIP" },
 		{ name: "txt", value: "txt", title: "TXT" },
+		{ name: "md", value: "md", title: "MD" },
 	];
 
 	useEffect(() => {

package/tsconfig.json

@@ -16,7 +16,7 @@
 		"useUnknownInCatchVariables": false,
 		"noEmit": true,
 		"jsx": "react-jsx",
-		"types": ["jest", "react", "reflect-metadata", "node", "webpack-env", "react-dom", "@testing-library/jest-dom"]
+		"types": ["vitest/globals", "react", "reflect-metadata", "node", "webpack-env", "react-dom", "@testing-library/jest-dom"]
 	},
 	"include": ["src"],
 	"extends": "./tsconfig.paths.json"

package/config/jest/cssTransform.js

@@ -1,14 +0,0 @@
-"use strict";
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-	process() {
-		return "module.exports = {};";
-	},
-	getCacheKey() {
-		// The output is always the same.
-		return "cssTransform";
-	},
-};

package/config/jest/fileMock.js

@@ -1 +0,0 @@
-module.exports = "test-file-stub";

package/config/jest/fileTransform.js

@@ -1,40 +0,0 @@
-"use strict";
-
-const path = require("path");
-const camelcase = require("camelcase");
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-	process(src, filename) {
-		const assetFilename = JSON.stringify(path.basename(filename));
-
-		if (filename.match(/\.svg$/)) {
-			// Based on how SVGR generates a component name:
-			// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
-			const pascalCaseFilename = camelcase(path.parse(filename).name, {
-				pascalCase: true,
-			});
-			const componentName = `Svg${pascalCaseFilename}`;
-			return `const React = require('react');
-      module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-          return {
-            $$typeof: Symbol.for('react.element'),
-            type: 'svg',
-            ref: ref,
-            key: null,
-            props: Object.assign({}, props, {
-              children: ${assetFilename}
-            })
-          };
-        }),
-      };`;
-		}
-
-		return `module.exports = ${assetFilename};`;
-	},
-};

package/config/jest/reactEasyCropMock.js

@@ -1,15 +0,0 @@
-const React = require("react");
-
-const Cropper = ({ onCropComplete }) => {
-	React.useEffect(() => {
-		if (onCropComplete) {
-			onCropComplete({}, { x: 0, y: 0, width: 100, height: 100 });
-		}
-	}, []);
-	return React.createElement("div", { "data-testid": "cropper-mock" });
-};
-
-module.exports = {
-	__esModule: true,
-	default: Cropper,
-};

package/config/jest/reactTimezoneMock.js

@@ -1,13 +0,0 @@
-const React = require("react");
-
-const WorldMap = () => React.createElement("div", { "data-testid": "world-map-mock" });
-const TimeZoneSelectDialog = () => React.createElement("div", { "data-testid": "timezone-dialog-mock" });
-
-module.exports = {
-	__esModule: true,
-	default: WorldMap,
-	WorldMap,
-	TimeZoneSelectDialog,
-	findTimeZone: jest.fn((tz) => tz),
-	convertOffsetInMinutesToString: jest.fn((offset) => String(offset)),
-};