@webbio/strapi-plugin-page-builder 0.2.2 → 0.2.4

package/admin/src/index.tsx

@@ -1,59 +1,59 @@
-import { prefixPluginTranslations } from '@strapi/helper-plugin';
-
-import pluginPkg from '../../package.json';
-import pluginId from './pluginId';
-import Initializer from './components/Initializer';
-import PageTypeFilter from './components/PageTypeFilter';
-import { EditView } from './components/EditView';
-import middlewares from './middlewares';
-
-const name = pluginPkg.strapi.name;
-
-export default {
-	register(app: any) {
-		app.addMiddlewares(middlewares);
-		const plugin = {
-			id: pluginId,
-			initializer: Initializer,
-			isReady: false,
-			name
-		};
-
-		app.registerPlugin(plugin);
-	},
-
-	bootstrap(app: any) {
-		app.injectContentManagerComponent('editView', 'right-links', {
-			name: 'collection-type-picker',
-			Component: EditView
-		});
-		app.injectContentManagerComponent('listView', 'actions', {
-			name: 'page-filters',
-			Component: PageTypeFilter
-		});
-	},
-
-	async registerTrads(app: any) {
-		const { locales } = app;
-
-		const importedTrads = await Promise.all(
-			(locales as string[]).map((locale) => {
-				return import(`./translations/${locale}.json`)
-					.then(({ default: data }) => {
-						return {
-							data: prefixPluginTranslations(data, pluginId),
-							locale
-						};
-					})
-					.catch(() => {
-						return {
-							data: {},
-							locale
-						};
-					});
-			})
-		);
-
-		return Promise.resolve(importedTrads);
-	}
-};
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
+
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
+import Initializer from './components/Initializer';
+import PageTypeFilter from './components/PageTypeFilter';
+import { EditView } from './components/EditView';
+import middlewares from './middlewares';
+
+const name = pluginPkg.strapi.name;
+
+export default {
+	register(app: any) {
+		app.addMiddlewares(middlewares);
+		const plugin = {
+			id: pluginId,
+			initializer: Initializer,
+			isReady: false,
+			name
+		};
+
+		app.registerPlugin(plugin);
+	},
+
+	bootstrap(app: any) {
+		app.injectContentManagerComponent('editView', 'right-links', {
+			name: 'collection-type-picker',
+			Component: EditView
+		});
+		app.injectContentManagerComponent('listView', 'actions', {
+			name: 'page-filters',
+			Component: PageTypeFilter
+		});
+	},
+
+	async registerTrads(app: any) {
+		const { locales } = app;
+
+		const importedTrads = await Promise.all(
+			(locales as string[]).map((locale) => {
+				return import(`./translations/${locale}.json`)
+					.then(({ default: data }) => {
+						return {
+							data: prefixPluginTranslations(data, pluginId),
+							locale
+						};
+					})
+					.catch(() => {
+						return {
+							data: {},
+							locale
+						};
+					});
+			})
+		);
+
+		return Promise.resolve(importedTrads);
+	}
+};

package/admin/src/middlewares/index.tsx

@@ -1,37 +1,37 @@
-import { getFetchClient } from '@strapi/helper-plugin';
-
-import { PAGE_UID } from '../../../shared/utils/constants';
-import getRequestUrl from '../utils/getRequestUrl';
-
-const middleware =
-	() =>
-	({ getState }: any) =>
-	(next: any) =>
-	async (action: any) => {
-		// If data is being fetched or after a save
-		if (
-			action.type === 'ContentManager/CrudReducer/GET_DATA_SUCCEEDED' ||
-			action.type === 'ContentManager/CrudReducer/SUBMIT_SUCCEEDED'
-		) {
-			const store = getState();
-			const layoutSlice = store['content-manager_editViewLayoutManager'];
-			const uid = layoutSlice.currentLayout.contentType.uid;
-
-			if (uid !== PAGE_UID) {
-				return next(action);
-			}
-
-			const { get } = await getFetchClient();
-			const { data: pageData } = await get(`${getRequestUrl('page')}/${action.data.id}`);
-
-			action.data.collectionTypeTitle = pageData?.collectionTypeData?.title;
-			action.data.collectionTypeId = pageData?.collectionTypeData?.id;
-			action.data.initialPageType = pageData?.pageType ? pageData.pageType : undefined;
-
-			return next(action);
-		}
-		return next(action);
-	};
-
-const middlewares = [middleware];
-export default middlewares;
+import { getFetchClient } from '@strapi/helper-plugin';
+
+import { PAGE_UID } from '../../../shared/utils/constants';
+import getRequestUrl from '../utils/getRequestUrl';
+
+const middleware =
+	() =>
+	({ getState }: any) =>
+	(next: any) =>
+	async (action: any) => {
+		// If data is being fetched or after a save
+		if (
+			action.type === 'ContentManager/CrudReducer/GET_DATA_SUCCEEDED' ||
+			action.type === 'ContentManager/CrudReducer/SUBMIT_SUCCEEDED'
+		) {
+			const store = getState();
+			const layoutSlice = store['content-manager_editViewLayoutManager'];
+			const uid = layoutSlice.currentLayout.contentType.uid;
+
+			if (uid !== PAGE_UID) {
+				return next(action);
+			}
+
+			const { get } = await getFetchClient();
+			const { data: pageData } = await get(`${getRequestUrl('page')}/${action.data.id}`);
+
+			action.data.collectionTypeTitle = pageData?.collectionTypeData?.title;
+			action.data.collectionTypeId = pageData?.collectionTypeData?.id;
+			action.data.initialPageType = pageData?.pageType ? pageData.pageType : undefined;
+
+			return next(action);
+		}
+		return next(action);
+	};
+
+const middlewares = [middleware];
+export default middlewares;

package/admin/src/pluginId.ts

@@ -1,5 +1,5 @@
-import pluginPkg from '../../package.json';
-
-const pluginId = pluginPkg.strapi.name;
-
-export default pluginId;
+import pluginPkg from '../../package.json';
+
+const pluginId = pluginPkg.strapi.name;
+
+export default pluginId;

package/admin/src/translations/en.json

@@ -1,6 +1,6 @@
-{
-	"template.confirmModal.title": "Replace all page modules",
-	"template.confirmModal.body": "You are about to replace all modules on this page. Are you sure you want to continue?",
-	"template.confirmModal.buttons.cancel": "No, cancel",
-	"template.confirmModal.buttons.submit": "Yes, replace all"
-}
+{
+	"template.confirmModal.title": "Replace all page modules",
+	"template.confirmModal.body": "You are about to replace all modules on this page. Are you sure you want to continue?",
+	"template.confirmModal.buttons.cancel": "No, cancel",
+	"template.confirmModal.buttons.submit": "Yes, replace all"
+}

package/admin/src/translations/nl.json

@@ -1,6 +1,6 @@
-{
-	"template.confirmModal.title": "Pagina modules vervangen",
-	"template.confirmModal.body": "Weet je zeker dat je alle modules op deze pagina wilt vervangen?",
-	"template.confirmModal.buttons.cancel": "Nee, annuleer",
-	"template.confirmModal.buttons.submit": "Ja, vervang modules"
-}
+{
+	"template.confirmModal.title": "Pagina modules vervangen",
+	"template.confirmModal.body": "Weet je zeker dat je alle modules op deze pagina wilt vervangen?",
+	"template.confirmModal.buttons.cancel": "Nee, annuleer",
+	"template.confirmModal.buttons.submit": "Ja, vervang modules"
+}

package/admin/src/utils/getRequestUrl.ts

@@ -1,11 +1,11 @@
-import pluginId from '../pluginId';
-
-const getRequestUrl = (path: string) => {
-	if (path.startsWith('/')) {
-		return `/${pluginId}${path}`;
-	}
-
-	return `/${pluginId}/${path}`;
-};
-
-export default getRequestUrl;
+import pluginId from '../pluginId';
+
+const getRequestUrl = (path: string) => {
+	if (path.startsWith('/')) {
+		return `/${pluginId}${path}`;
+	}
+
+	return `/${pluginId}/${path}`;
+};
+
+export default getRequestUrl;

package/admin/src/utils/getTrad.ts

@@ -1,5 +1,5 @@
-import pluginId from '../pluginId';
-
-const getTrad = (id: string) => `${pluginId}.${id}`;
-
-export default getTrad;
+import pluginId from '../pluginId';
+
+const getTrad = (id: string) => `${pluginId}.${id}`;
+
+export default getTrad;

package/admin/src/utils/hooks/useDebounce.ts

@@ -1,17 +1,17 @@
-import React from 'react';
-
-export function useDebounce<T>(value: T, delay: number): T {
-	const [debouncedValue, setDebouncedValue] = React.useState(value);
-
-	React.useEffect(() => {
-		const handler = setTimeout(() => {
-			setDebouncedValue(value);
-		}, delay);
-
-		return () => {
-			clearTimeout(handler);
-		};
-	}, [value, delay]);
-
-	return debouncedValue;
-}
+import React from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+	const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+	React.useEffect(() => {
+		const handler = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+
+		return () => {
+			clearTimeout(handler);
+		};
+	}, [value, delay]);
+
+	return debouncedValue;
+}

package/admin/src/utils/hooks/useGetLocaleFromUrl.ts

@@ -1,9 +1,9 @@
-import { useQueryParams } from '@strapi/helper-plugin';
-
-const useGetLocaleFromUrl = () => {
-	const [{ query }] = useQueryParams();
-
-	return query?.plugins?.i18n?.locale;
-};
-
-export { useGetLocaleFromUrl };
+import { useQueryParams } from '@strapi/helper-plugin';
+
+const useGetLocaleFromUrl = () => {
+	const [{ query }] = useQueryParams() as any;
+
+	return query?.plugins?.i18n?.locale;
+};
+
+export { useGetLocaleFromUrl };

package/admin/src/utils/hooks/usePrevious.ts

@@ -1,12 +1,12 @@
-import { useRef, useEffect } from 'react';
-
-// Hook
-export const usePrevious = <T>(value: T): T | null => {
-	const ref: React.MutableRefObject<T | null> = useRef(null);
-
-	useEffect(() => {
-		ref.current = value;
-	}, [value]);
-
-	return ref.current;
-};
+import { useRef, useEffect } from 'react';
+
+// Hook
+export const usePrevious = <T>(value: T): T | null => {
+	const ref: React.MutableRefObject<T | null> = useRef(null);
+
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+
+	return ref.current;
+};

package/admin/src/utils/sanitizeModules.ts

@@ -1,10 +1,43 @@
-export const sanitizeModules = (modules: Record<string, any>[]) => {
-	return modules?.map((module, idx) => {
-		delete module.id;
-
-		return {
-			...module,
-			__temp_key__: idx
-		};
-	});
-};
+export const sanitizeModules = (modules: Record<string, any>[]) =>
+	modules?.map((module, idx) => {
+		try {
+			const sanitizedModule = sanitizeObject(module, idx);
+
+			const result = {
+				...sanitizedModule
+			};
+
+			return result;
+		} catch (e) {
+			console.log('ERROR IN SANITIZE MODULES', e);
+		}
+	});
+
+function sanitizeObject(obj: any, idx: number): any {
+	for (let key in obj) {
+		if (typeof obj[key] === 'object' && obj[key] !== null) {
+			sanitizeObject(obj[key], idx);
+		}
+	}
+
+	if (obj.hasOwnProperty('id') && !obj.hasOwnProperty('createdAt')) {
+		obj['__temp_key__'] = idx;
+		delete obj['id'];
+	}
+
+	if (obj.hasOwnProperty('defaultModuleOptions') && !obj.hasOwnProperty('createdAt')) {
+		delete obj['defaultModuleOptions'].id;
+		obj['defaultModuleOptions'] = {
+			...obj['defaultModuleOptions'],
+			spacing: JSON.stringify(obj['defaultModuleOptions'].spacing),
+			__temp_key__: idx
+		};
+	}
+
+	if (obj.hasOwnProperty('name') && !obj.hasOwnProperty('mainField') && !obj.hasOwnProperty('label')) {
+		obj['label'] = obj['name'];
+		obj['mainField'] = obj['name'];
+	}
+
+	return obj;
+}

package/custom.d.ts

@@ -1,5 +1,5 @@
-declare module '@strapi/design-system/*';
-declare module '@strapi/design-system';
-declare module '@strapi/icons';
-declare module '@strapi/icons/*';
-declare module '@strapi/helper-plugin';
+declare module '@strapi/design-system/*';
+declare module '@strapi/design-system';
+declare module '@strapi/icons';
+declare module '@strapi/icons/*';
+declare module '@strapi/helper-plugin';

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webbio/strapi-plugin-page-builder",
-    "version": "0.2.2",
+    "version": "0.2.4",
     "description": "This is the description of the plugin.",
     "scripts": {
         "develop": "tsc -p tsconfig.server.json -w",
@@ -20,15 +20,15 @@
         "url": "https://github.com/webbio/strapi-plugin-page-builder.git"
     },
     "dependencies": {
-        "@strapi/design-system": "^1.11.0",
-        "@strapi/helper-plugin": "^4.13.6",
+        "@strapi/design-system": "^1.13.1",
+        "@strapi/helper-plugin": "<4.15.0",
         "@strapi/icons": "^1.11.0",
-        "@strapi/typescript-utils": "^4.13.6",
-        "@strapi/utils": "^4.13.6",
+        "@strapi/typescript-utils": "<4.15.0",
+        "@strapi/utils": "<4.15.0",
         "react-select": "^5.7.4"
     },
     "devDependencies": {
-        "@strapi/typescript-utils": "^4.13.6",
+        "@strapi/typescript-utils": "<4.15.0",
         "@types/react": "^18.2.21",
         "@types/react-dom": "^18.2.7",
         "@types/react-router-dom": "^5.3.3",
@@ -40,8 +40,8 @@
         "typescript": "5.1.6"
     },
     "peerDependencies": {
-        "@strapi/strapi": "^4.13.6",
-        "@webbio/strapi-plugin-slug": "^2.0.2",
+        "@strapi/strapi": "<4.15.0",
+        "@webbio/strapi-plugin-slug": "^2.0.5",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",
         "react-router-dom": "^5.3.4",
@@ -60,7 +60,7 @@
         }
     ],
     "engines": {
-        "node": ">=14.19.1 <=18.x.x",
+        "node": ">=14.19.1 <=20.x.x",
         "npm": ">=6.0.0"
     },
     "license": "MIT",

package/dist/server/graphql/page-by-slug.js

@@ -4,15 +4,15 @@ const filter_underscore_arguments_1 = require("../utils/filter-underscore-argume
 const constants_1 = require("../../shared/utils/constants");
 const getPageBySlug = (strapi) => {
     const typeDefs = () => {
-        return `
-				extend type Page {
-					collectionType: GenericMorph
-				}
-
-        type Query {
-          getPageBySlug(path: String, _locale: String, _publicationState: PublicationState): PageEntity
-        }
-
+        return `
+				extend type Page {
+					collectionType: GenericMorph
+				}
+
+        type Query {
+          getPageBySlug(path: String, _locale: String, _publicationState: PublicationState): PageEntity
+        }
+
       `;
     };
     const resolvers = (strapi) => {

package/dist/server/graphql/pages-by-uid.js

@@ -7,22 +7,22 @@ const getPageInfoFromUID = (strapi) => {
     // @ts-ignore service does exist
     const collectionTypes = strapi.service('plugin::page-builder.collection-types').withPageMorph();
     const typeDefs = () => {
-        const metaInfo = `type MetaInfo {
-			total: Int
-			page: Int
-			pageCount: Int
-			pageSize: Int
+        const metaInfo = `type MetaInfo {
+			total: Int
+			page: Int
+			pageCount: Int
+			pageSize: Int
 	}`;
         const entityInfo = collectionTypes.map((collectionType) => {
-            return `
-				extend type ${collectionType.type}EntityResponseCollection {
-					metaInfo: MetaInfo
-				}
-
-        type Query {
-					get${collectionType.type}Pages(filters: ${collectionType.type}FiltersInput,pagination: PaginationArg, sort:[String], pageFilters: PageFiltersInput): ${collectionType.type}EntityResponseCollection
-        }
-
+            return `
+				extend type ${collectionType.type}EntityResponseCollection {
+					metaInfo: MetaInfo
+				}
+
+        type Query {
+					get${collectionType.type}Pages(filters: ${collectionType.type}FiltersInput,pagination: PaginationArg, sort:[String], pageFilters: PageFiltersInput): ${collectionType.type}EntityResponseCollection
+        }
+
       `;
         });
         return `${metaInfo} ${entityInfo}`;

package/dist/server/services/builder.js

@@ -92,12 +92,12 @@ exports.default = {
         return { uid: constants_1.TEMPLATE_UID, contentType };
     },
     mergeCollectionTypeWithModules(collectionType, uid) {
-        var _a;
+        var _a, _b, _c, _d, _e, _f;
         const { pluginOptions: oldPluginOptions, __schema__: oldSchema } = strapi.contentType(uid) || {};
-        const components = this.getConfigModuleComponents();
+        const modulesFromConfig = ((_a = oldSchema === null || oldSchema === void 0 ? void 0 : oldSchema.attributes) === null || _a === void 0 ? void 0 : _a.modules) ? this.getConfigModuleComponents() : undefined;
         return {
             ...collectionType,
-            displayName: ((_a = oldSchema === null || oldSchema === void 0 ? void 0 : oldSchema.info) === null || _a === void 0 ? void 0 : _a.displayName) || (collectionType === null || collectionType === void 0 ? void 0 : collectionType.displayName),
+            displayName: ((_b = oldSchema === null || oldSchema === void 0 ? void 0 : oldSchema.info) === null || _b === void 0 ? void 0 : _b.displayName) || (collectionType === null || collectionType === void 0 ? void 0 : collectionType.displayName),
             pluginOptions: {
                 ...oldPluginOptions,
                 ...collectionType === null || collectionType === void 0 ? void 0 : collectionType.pluginOptions
@@ -105,7 +105,10 @@ exports.default = {
             attributes: {
                 ...oldSchema === null || oldSchema === void 0 ? void 0 : oldSchema.attributes,
                 ...collectionType.attributes,
-                modules: { ...collectionType.attributes.modules, components }
+                ...(((((_c = collectionType === null || collectionType === void 0 ? void 0 : collectionType.attributes) === null || _c === void 0 ? void 0 : _c.modules) && ((_e = (_d = collectionType === null || collectionType === void 0 ? void 0 : collectionType.attributes) === null || _d === void 0 ? void 0 : _d.modules) === null || _e === void 0 ? void 0 : _e.length) > 0) ||
+                    modulesFromConfig) && {
+                    modules: { ...(_f = collectionType === null || collectionType === void 0 ? void 0 : collectionType.attributes) === null || _f === void 0 ? void 0 : _f.modules, components: modulesFromConfig }
+                })
             }
         };
     },

package/dist/server/services/template.js

@@ -8,7 +8,6 @@ exports.default = {
         return foundTemplates;
     },
     async findOne(id) {
-        const getpopulatedTemplate = (0, strapi_1.getPopulatedEntity)(constants_1.TEMPLATE_UID, id);
-        return getpopulatedTemplate;
+        return await (0, strapi_1.getPopulatedEntity)(constants_1.TEMPLATE_UID, id);
     }
 };

package/dist/server/utils/graphql.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerGraphQLResolvers = void 0;
 const constants_1 = require("../../shared/utils/constants");
 const findPageByPath = (strapi) => {
-    const typeDefs = `
-  type Query {
-    findPageByPath(path: String, locale: I18NLocaleCode): PageEntityResponse 
-  }
+    const typeDefs = `
+  type Query {
+    findPageByPath(path: String, locale: I18NLocaleCode): PageEntityResponse 
+  }
   `;
     const resolvers = (strapi) => {
         const { transformArgs } = strapi.plugin('graphql').service('builders').utils;
@@ -47,20 +47,20 @@ const findPageByPath = (strapi) => {
     };
 };
 const findPagePaths = (strapi) => {
-    const typeDefs = `
-  type PageByPath {
-    id: Int!
-    path: String!
-    title: String!
-    locale: String!
-    pageType: ENUM_PAGE_PAGETYPE
-    updatedAt: DateTime!
-    publishedAt: DateTime!
-  }
-
-  type Query {
-    findPagePaths(locale: String, pageType: String = "all"): [PageByPath]
-  }
+    const typeDefs = `
+  type PageByPath {
+    id: Int!
+    path: String!
+    title: String!
+    locale: String!
+    pageType: ENUM_PAGE_PAGETYPE
+    updatedAt: DateTime!
+    publishedAt: DateTime!
+  }
+
+  type Query {
+    findPagePaths(locale: String, pageType: String = "all"): [PageByPath]
+  }
   `;
     const resolvers = (strapi) => {
         const { transformArgs } = strapi.plugin('graphql').service('builders').utils;

package/dist/server/utils/strapi.js

@@ -11,15 +11,12 @@ const getDeepPopulate = (uid, populate, depth = 0) => {
     const { attributes } = strapi.getModel(uid);
     return Object.keys(attributes).reduce((populateAcc, attributeName) => {
         const attribute = attributes[attributeName];
-        if (attribute.type === 'relation') {
-            return populateAcc;
-        }
         if (attribute.type === 'component') {
             populateAcc[attributeName] = {
                 populate: (0, exports.getDeepPopulate)(attribute.component, null, depth + 1)
             };
         }
-        if (attribute.type === 'media') {
+        if (attribute.type === 'relation' || attribute.type === 'media') {
             populateAcc[attributeName] = true;
         }
         if (attribute.type === 'dynamiczone') {