#25835 fixed plugin config modal

common/helpers.js

@@ -0,0 +1,11 @@
+export const parsePluginSettings = (settings) => {
+  const parsedSettings = JSON.parse(settings || '{}');
+
+  return (parsedSettings?.surferSeoAnalyzer || []).reduce(
+    (settings, element) => {
+      settings[element.content_type] = element;
+      return settings;
+    },
+    {},
+  );
+};

common/plugin-element-cache.js

@@ -17,6 +17,10 @@ export const getCachedElement = (key) => {
   return appRoots[key];
 };
 
+export const addObjectToCache = (key, data = {}) => {
+  appRoots[key] = data;
+};
+
 export const registerFn = (pluginInfo, callback) => {
   if (window.FlotiqPlugins?.add) {
     window.FlotiqPlugins.add(pluginInfo, callback);

plugins/common/valid-fields.js → common/valid-fields.js

@@ -1,4 +1,4 @@
-import pluginInfo from '../../plugin-manifest.json';
+import pluginInfo from '../plugin-manifest.json';
 
 export const validSourceFields = ['richtext'];
 

plugins/field-config/plugin-form/index.js

@@ -1,9 +1,9 @@
-import { getCachedElement } from '../../common/plugin-helpers.js';
 import {
   validFieldsCacheKey,
   validSourceFields,
-} from '../../common/valid-fields';
+} from '../../../common/valid-fields.js';
 import i18n from '../../../../surferseo-plugin/i18n';
+import { getCachedElement } from '../../../common/plugin-element-cache.js';
 
 const insertSelectOptions = (config, options = [], emptyOptionMessage) => {
   config.additionalHelpTextClasses = 'break-normal';
@@ -24,6 +24,7 @@ export const handlePluginFormConfig = ({ name, config, formik }) => {
   if (index == null || !type) return;
   const ctd = formik.values.surferSeoAnalyzer[index].content_type;
   const { sourceFields } = getCachedElement(validFieldsCacheKey);
+  console.log(sourceFields);
 
   const keysToClearOnCtdChange = ['source'];
 

plugins/index.js

@@ -4,6 +4,7 @@ import cssString from 'inline:./styles/style.css';
 import { handleManagePlugin } from './manage/index.js';
 import { handlePluginFormConfig } from './field-config/plugin-form/index.js';
 import { createSidebar } from './sidebar/index.js';
+import { parsePluginSettings } from '../common/helpers.js';
 
 const setupSurferSeo = () => {
   (() => {
@@ -39,10 +40,12 @@ const appendStyles = () => {
   }
 };
 
-registerFn(pluginInfo, (handler) => {
+registerFn(pluginInfo, (handler, _, { getPluginSettings, getLanguage }) => {
   setupSurferSeo();
   appendStyles();
 
+  const pluginConfig = parsePluginSettings(getPluginSettings());
+
   handler.on('flotiq.plugins.manage::form-schema', (data) =>
     handleManagePlugin(data),
   );
@@ -57,7 +60,7 @@ registerFn(pluginInfo, (handler) => {
     }
   });
 
-  handler.on('flotiq.form.sidebar-panel::add', () => {
-    return createSidebar();
+  handler.on('flotiq.form.sidebar-panel::add', ({ formik }) => {
+    return createSidebar(formik, pluginConfig);
   });
 });

plugins/manage/index.js

@@ -1,33 +1,41 @@
-import { getCachedElement } from '../../common/plugin-element-cache.js';
-import { getValidFields, validFieldsCacheKey } from '../common/valid-fields';
+import {
+  addObjectToCache,
+  getCachedElement,
+} from '../../common/plugin-element-cache.js';
+import {
+  getValidFields,
+  validFieldsCacheKey,
+} from '../../common/valid-fields.js';
 import pluginInfo from '../../plugin-manifest.json';
-import { addObjectToCache, removeRoot } from '../common/plugin-helpers.js';
 import { getSchema, getValidator } from './settings-schema.js';
 
-export const handleManagePlugin = ({ contentTypes, modalInstance }) => {
-  const formSchemaCacheKey = `${pluginInfo.id}-form-schema`;
-  let formSchema = getCachedElement(formSchemaCacheKey);
+let configCache = null;
 
-  if (!formSchema) {
-    const validFields = getValidFields(contentTypes);
-    addObjectToCache(validFieldsCacheKey, validFields);
+export const handleManagePlugin = ({ plugin, contentTypes, modalInstance }) => {
+  if (plugin?.id !== pluginInfo.id) return null;
 
-    const ctds = contentTypes
-      ?.filter(({ internal }) => !internal)
-      ?.map(({ name, label }) => ({ value: name, label }));
+  if (configCache) return configCache;
 
-    const { sourceFieldsKeys } = validFields;
+  const validFields = getValidFields(contentTypes);
+  addObjectToCache(validFieldsCacheKey, validFields);
 
-    formSchema = {
-      options: {
-        disbaledBuildInValidation: true,
-        onValidate: getValidator(sourceFieldsKeys),
-      },
-      schema: getSchema(ctds),
-    };
-  }
+  const ctds = contentTypes
+    ?.filter(({ internal }) => !internal)
+    ?.map(({ name, label }) => ({ value: name, label }));
 
-  modalInstance.promise.then(() => removeRoot(formSchemaCacheKey));
+  const { sourceFieldsKeys } = validFields;
 
-  return formSchema;
+  configCache = {};
+
+  configCache = {
+    options: {
+      disbaledBuildInValidation: true,
+      onValidate: getValidator(sourceFieldsKeys),
+    },
+    schema: getSchema(ctds),
+  };
+
+  modalInstance.promise.then(() => (configCache = null));
+
+  return configCache;
 };

plugins/manage/settings-schema.js

@@ -1,6 +1,6 @@
 import i18n from '../../i18n';
 import pluginInfo from '../../plugin-manifest.json';
-import { validSourceFields } from '../common/valid-fields';
+import { validSourceFields } from '../../common/valid-fields.js';
 
 export const getSchema = (contentTypes) => ({
   id: pluginInfo.id,

plugins/sidebar/index.js

@@ -1,10 +1,10 @@
+import pluginInfo from '../../plugin-manifest.json';
 import {
   addElementToCache,
   getCachedElement,
-} from '../common/plugin-helpers.js';
-import pluginInfo from '../../plugin-manifest.json';
+} from '../../common/plugin-element-cache.js';
 
-export const createSidebar = () => {
+export const createSidebar = (formik, pluginConfig) => {
   const containerCacheKey = `${pluginInfo.id}-surferseo-content-analyzer-container`;
   let contentAnalyzerContainer = getCachedElement(containerCacheKey)?.element;
 
@@ -20,5 +20,7 @@ export const createSidebar = () => {
     addElementToCache(contentAnalyzerContainer, containerCacheKey);
   }
 
+  console.log(formik, pluginConfig);
+
   return contentAnalyzerContainer;
 };