@griddo/ax 11.10.26 → 11.10.28

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.10.26",
+	"version": "11.10.28",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c99dbeedbc37a73271ebe02d303176b3f5aaf5d9"
+	"gitHead": "2538b0107483e8b1c85fad2daa8d2513e1ccaf09"
 }

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/index.tsx

@@ -1,8 +1,8 @@
-import React from "react";
 import { connect } from "react-redux";
 
-import { IDataPack, IErrorItem, ILanguage, IRootState, ISchemaField, ISite, IThemeElements } from "@ax/types";
 import { filterThemeModules, getModuleCategories } from "@ax/helpers";
+import type { IDataPack, IErrorItem, ILanguage, IRootState, ISchemaField, ISite, IThemeElements } from "@ax/types";
+
 import Field from "../Field";
 
 import * as S from "./style";

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -1,20 +1,20 @@
-import React, { memo, useEffect } from "react";
+import { memo, useEffect } from "react";
 import { connect } from "react-redux";
 
+import { pageEditorActions } from "@ax/containers/PageEditor";
 import {
-	getTemplate,
-	isModuleDisabled,
-	slugify,
 	areEqual,
 	filterThemeModules,
-	isTemplateExcludedFromTheme,
 	getFormTemplate,
+	getTemplate,
+	isModuleDisabled,
+	isTemplateExcludedFromTheme,
+	slugify,
 } from "@ax/helpers";
-import { IRootState } from "@ax/types";
-import { pageEditorActions } from "@ax/containers/PageEditor";
+import type { IRootState } from "@ax/types";
 
-import TemplateManager from "./TemplateManager";
 import Field from "./Field";
+import TemplateManager from "./TemplateManager";
 
 const PageConnectedField = (props: any): JSX.Element => {
 	const {
@@ -168,9 +168,12 @@ const PageConnectedField = (props: any): JSX.Element => {
 	}
 
 	if (isTemplate || isFormTemplate) {
-		const template = isFormTemplate
-			? getFormTemplate(selectedContent[field.key].templateType)
-			: getTemplate(selectedContent[field.key].templateType);
+		const templateType = selectedContent[field.key]?.templateType;
+		const template = isFormTemplate ? getFormTemplate(templateType) : getTemplate(templateType);
+
+		if (!template) {
+			return <></>;
+		}
 
 		return (
 			<TemplateManager

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

@@ -1,34 +1,49 @@
 import FroalaEditor from "froala-editor";
+
 import { getLanguageMenuHtml, getRichTextConfig, parseClassNames } from "./helpers";
 import { languages } from "./languages";
 
 const API_URL = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
-const richTextConfig = getRichTextConfig();
-const paragraphStyles = richTextConfig?.paragraphStyles ? parseClassNames(richTextConfig.paragraphStyles) : undefined;
-const tableStyles = richTextConfig?.tableStyles ? parseClassNames(richTextConfig.tableStyles) : undefined;
-const tableCellStyles = richTextConfig?.tableCellStyles ? parseClassNames(richTextConfig.tableCellStyles) : undefined;
 
-const miscButtons = [
-	"underline",
-	"textColor",
-	"formatOLSimple",
-	"specialCharacters",
-	"insertHR",
-	"alignLeft",
-	"alignRight",
-	"alignJustify",
-	"outdent",
-	"indent",
-	"undo",
-	"redo",
-	"selectAll",
-	"html",
-	"insertTable",
-	paragraphStyles ? "paragraphStyle" : undefined,
-	"langDropdown",
-];
+// Lazy getters para evitar acceder a schemas antes de que carguen
+const getRichTextConfigLazy = () => getRichTextConfig();
+const getParagraphStyles = () => {
+	const config = getRichTextConfigLazy();
+	return config?.paragraphStyles ? parseClassNames(config.paragraphStyles) : undefined;
+};
+const getTableStyles = () => {
+	const config = getRichTextConfigLazy();
+	return config?.tableStyles ? parseClassNames(config.tableStyles) : undefined;
+};
+const getTableCellStyles = () => {
+	const config = getRichTextConfigLazy();
+	return config?.tableCellStyles ? parseClassNames(config.tableCellStyles) : undefined;
+};
 
-const buttonsFull = {
+const getMiscButtons = () => {
+	const paragraphStyles = getParagraphStyles();
+	return [
+		"underline",
+		"textColor",
+		"formatOLSimple",
+		"specialCharacters",
+		"insertHR",
+		"alignLeft",
+		"alignRight",
+		"alignJustify",
+		"outdent",
+		"indent",
+		"undo",
+		"redo",
+		"selectAll",
+		"html",
+		"insertTable",
+		paragraphStyles ? "paragraphStyle" : undefined,
+		"langDropdown",
+	];
+};
+
+const getButtonsFull = () => ({
 	moreText: {
 		buttons: ["bold", "italic", "paragraphFormat", "formatUL", "quote", "alignCenter"],
 		buttonsVisible: 6,
@@ -38,27 +53,30 @@ const buttonsFull = {
 		buttonsVisible: 5,
 	},
 	moreMisc: {
-		buttons: miscButtons,
+		buttons: getMiscButtons(),
 		align: "right",
 		buttonsVisible: 0,
 	},
-};
+});
 
-const buttons = [
-	[
-		"bold",
-		"italic",
-		"formatUL",
-		"insertLink",
-		"paragraphFormat",
-		paragraphStyles ? "paragraphStyle" : undefined,
-		"langDropdown",
-	],
-];
+const getButtons = () => {
+	const paragraphStyles = getParagraphStyles();
+	return [
+		[
+			"bold",
+			"italic",
+			"formatUL",
+			"insertLink",
+			"paragraphFormat",
+			paragraphStyles ? "paragraphStyle" : undefined,
+			"langDropdown",
+		],
+	];
+};
 
-const inlineToolbar = ["langDropdown", "undo", "redo"];
+const getInlineToolbar = () => ["langDropdown", "undo", "redo"];
 
-const wysiwygConfig = {
+const getWysiwygConfig = () => ({
 	key: process.env.GRIDDO_FROALA_KEY || process.env.REACT_APP_FROALA_KEY,
 	// pastePlain: false,
 	pasteDeniedAttrs: ["class", "id", "style", "dir"],
@@ -92,11 +110,11 @@ const wysiwygConfig = {
 	imageMaxSize: 20 * 1024 * 1024,
 	imageManagerLoadURL: `${API_URL}/images/wysiwyg`,
 	requestWithCORS: false,
-	paragraphStyles,
-	tableStyles,
-	tableCellStyles,
+	paragraphStyles: getParagraphStyles(),
+	tableStyles: getTableStyles(),
+	tableCellStyles: getTableCellStyles(),
 	imageUploadRemoteUrls: false,
-};
+});
 
 FroalaEditor.DefineIcon("langIcon", {
 	PATH: "m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04ZM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12Zm-2.62 7 1.62-4.33L19.12 17h-3.24Z",
@@ -110,7 +128,10 @@ FroalaEditor.RegisterCommand("langDropdown", {
 	undo: true,
 	focus: true,
 	refreshAfterCallback: true,
-	html: () => getLanguageMenuHtml(richTextConfig?.editorLangs ? richTextConfig.editorLangs : languages),
+	html: () => {
+		const config = getRichTextConfigLazy();
+		return getLanguageMenuHtml(config?.editorLangs ? config.editorLangs : languages);
+	},
 	callback: function (_cmd: any, val: string) {
 		const html = this.selection.text();
 		if (val !== "") {
@@ -121,4 +142,9 @@ FroalaEditor.RegisterCommand("langDropdown", {
 	},
 });
 
-export { buttonsFull, buttons, inlineToolbar, wysiwygConfig };
+export {
+	getButtonsFull as buttonsFull,
+	getButtons as buttons,
+	getInlineToolbar as inlineToolbar,
+	getWysiwygConfig as wysiwygConfig,
+};

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

@@ -1,12 +1,15 @@
-import { connect } from "react-redux";
 import FroalaEditorComponent from "react-froala-wysiwyg";
-import FroalaEditor from "froala-editor";
-import { decodeEntities } from "@ax/helpers";
-import type { IImage, ISite, IRootState } from "@ax/types";
+import { connect } from "react-redux";
+
 import { galleryActions } from "@ax/containers/Gallery";
+import { decodeEntities } from "@ax/helpers";
+import type { IImage, IRootState, ISite } from "@ax/types";
+
+import FroalaEditor from "froala-editor";
 
-import { wysiwygConfig, buttons, buttonsFull, inlineToolbar } from "./config";
+import { buttons, buttonsFull, inlineToolbar, wysiwygConfig } from "./config";
 import "./vendors";
+
 import * as S from "./style";
 
 const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
@@ -36,10 +39,10 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
 
 	const dynamicConfig = {
 		placeholderText: placeholder,
-		toolbarButtons: inline ? inlineToolbar : full ? buttonsFull : buttons,
+		toolbarButtons: inline ? inlineToolbar() : full ? buttonsFull() : buttons(),
 		toolbarInline: inline,
 		charCounterCount: !inline,
-		imageUpload: !!(full && !inline ),
+		imageUpload: !!(full && !inline),
 		multiLine: !inline,
 		enter: inline ? FroalaEditor.ENTER_BR : FroalaEditor.ENTER_P,
 		requestHeaders: {
@@ -74,7 +77,7 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
 		},
 	};
 
-	const config = { ...wysiwygConfig, ...dynamicConfig };
+	const config = { ...wysiwygConfig(), ...dynamicConfig };
 
 	return (
 		<S.EditorWrapper error={error} disabled={disabled} data-testid="wysiwyg-wrapper">

package/src/modules/PageEditor/index.tsx

@@ -1,37 +1,38 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import { withErrorBoundary } from "react-error-boundary";
 import { connect } from "react-redux";
 import type { RouteComponentProps } from "react-router-dom";
-import { withErrorBoundary } from "react-error-boundary";
 
-import type {
-	IErrorItem,
-	INotification,
-	IRootState,
-	ISavePageParams,
-	IUserEditing,
-	IPageLanguage,
-	ILanguage,
-} from "@ax/types";
 import {
-	MainWrapper,
-	Loading,
+	CancelScheduleModal,
+	ErrorPage,
 	ErrorToast,
-	Notification,
+	Loading,
+	MainWrapper,
 	Modal,
-	ErrorPage,
-	CancelScheduleModal,
-	ScheduleModal,
-	RestoreModal,
+	Notification,
 	OcassionalToast,
+	RestoreModal,
+	ScheduleModal,
 } from "@ax/components";
-import { pageEditorActions } from "@ax/containers/PageEditor";
 import { appActions } from "@ax/containers/App";
 import { navigationActions } from "@ax/containers/Navigation";
+import { pageEditorActions } from "@ax/containers/PageEditor";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
+import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { RouteLeavingGuard } from "@ax/guards";
+import { dateToString, getDeactivatedModules, isModuleDisabled } from "@ax/helpers";
 import { useIsDirty, useModal, usePermission } from "@ax/hooks";
-import { isModuleDisabled, getDeactivatedModules, dateToString } from "@ax/helpers";
-import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
+import type {
+	IErrorItem,
+	ILanguage,
+	INotification,
+	IPageLanguage,
+	IRootState,
+	ISavePageParams,
+	IUserEditing,
+} from "@ax/types";
+
 import { DeleteModal } from "./atoms";
 import Editor from "./Editor";
 import Preview from "./Preview";
@@ -123,9 +124,13 @@ const PageEditor = (props: IProps) => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const { pageID, getPage, setTab, sendPagePing } = props;
+		const { pageID, getPage, setTab, sendPagePing, loadSchemas } = props;
 		const defaultTab = "content";
-		const handleGetPage = async () => await getPage(pageID);
+		const handleGetPage = async () => {
+			// Cargar schemas primero si no están cargados (por ejemplo si se hace F5 en la página)
+			await loadSchemas();
+			await getPage(pageID);
+		};
 
 		setTab(defaultTab);
 		resetDirty();
@@ -193,7 +198,7 @@ const PageEditor = (props: IProps) => {
 			const isSaved =
 				pageID && !isNewTranslation
 					? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
-					: await savePage({publishPage});
+					: await savePage({ publishPage });
 
 			if (isSaved) {
 				resetDirty();
@@ -213,7 +218,7 @@ const PageEditor = (props: IProps) => {
 				status: pageStatus.UPLOAD_PENDING,
 			};
 
-			const isSaved = await savePage({publishPage});
+			const isSaved = await savePage({ publishPage });
 			if (isSaved) {
 				resetDirty();
 			}
@@ -247,7 +252,7 @@ const PageEditor = (props: IProps) => {
 		const validated = skipReviewOnPublish ? true : await validatePage(true);
 
 		if (validated) {
-			const isSaved = await savePage({publishDraft: true});
+			const isSaved = await savePage({ publishDraft: true });
 			if (isSaved) resetDirty();
 		} else {
 			setNotification({ text: errorNotificationText, type: "error" });
@@ -270,7 +275,7 @@ const PageEditor = (props: IProps) => {
 	const handleCreateDraft = async () => {
 		const { savePage } = props;
 
-		const isSaved = await savePage({createDraft: true});
+		const isSaved = await savePage({ createDraft: true });
 		if (isSaved) resetDirty();
 	};
 
@@ -394,8 +399,8 @@ const PageEditor = (props: IProps) => {
 
 		const isSaved = await savePage({ setToast });
 		if (isSaved) {
-			 resetDirty();
-			 setToastMsg(null);
+			resetDirty();
+			setToastMsg(null);
 		}
 	};
 
@@ -561,11 +566,11 @@ const PageEditor = (props: IProps) => {
 		: [{ name: "view", text: "Preview mode" }];
 
 	const handleSelectedTab = async (tab: string) => {
-		if(tab === "view" && (!isPublished || isDraft)){
+		if (tab === "view" && (!isPublished || isDraft)) {
 			handleSavePage(setToastMsg);
 		}
 		setSelectedTab(tab);
-	}
+	};
 
 	const tabsPreview = {
 		icons: tabIcons,
@@ -710,9 +715,8 @@ const PageEditor = (props: IProps) => {
 					{isOpen && (
 						<S.ModalContent>
 							<p>
-								<strong>{userEditing?.name}</strong> is currently working on this page. You can preview
-								the page but <strong>you cannot make changes to it</strong> until {userEditing?.name}{" "}
-								leaves the page.
+								<strong>{userEditing?.name}</strong> is currently working on this page. You can preview the page but{" "}
+								<strong>you cannot make changes to it</strong> until {userEditing?.name} leaves the page.
 							</p>
 						</S.ModalContent>
 					)}
@@ -822,6 +826,7 @@ const mapDispatchToProps = {
 	updatePageStatus: pageEditorActions.updatePageStatus,
 	setHistoryPush: appActions.setHistoryPush,
 	setLanguage: appActions.setLanguage,
+	loadSchemas: appActions.loadSchemas,
 	createNewTranslation: pageEditorActions.createNewTranslation,
 	setTab: pageEditorActions.setTab,
 	getSiteDataPackbyTemplate: dataPacksActions.getSiteDataPackbyTemplate,
@@ -838,12 +843,18 @@ const mapDispatchToProps = {
 
 interface IPageEditorDispatchProps {
 	getPage(pageID?: number): Promise<void>;
-	savePage(data?: { createDraft?: boolean; publishPage?: { status: string }; publishDraft?: boolean; setToast?: (msg: string) => void }): Promise<boolean>;
+	savePage(data?: {
+		createDraft?: boolean;
+		publishPage?: { status: string };
+		publishDraft?: boolean;
+		setToast?: (msg: string) => void;
+	}): Promise<boolean>;
 	deletePage(params?: ISavePageParams): Promise<boolean>;
 	validatePage(publish?: boolean): Promise<boolean>;
 	updatePageStatus(id: number[], status: string): Promise<boolean>;
 	setHistoryPush(path: string, isEditor: boolean): void;
 	setLanguage(lang: { locale: string; id: number | null }): void;
+	loadSchemas(): Promise<boolean>;
 	createNewTranslation(isNewTranslation: boolean): void;
 	setTab(tab: string): void;
 	getSiteDataPackbyTemplate(templateType: string): void;

package/src/modules/Sites/index.tsx

@@ -7,7 +7,6 @@ import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { sitesActions } from "@ax/containers/Sites";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { usersActions } from "@ax/containers/Users";
-import { schemasService } from "@ax/services";
 import type { IGetRoles, ILanguage, IRootState, ISite } from "@ax/types";
 
 import SitesList from "./SitesList";
@@ -35,7 +34,6 @@ const Sites = (props: ISitesProps): JSX.Element => {
 
 			// Cargar schemas primero (después del login)
 			await loadSchemas();
-			console.log("------------SCHEMAS LOADED-----------");
 
 			setCurrentSiteInfo(null);
 			updateCurrentSearch("");