Merge pull request #28 from flotiq/feature/27220-refactor-form-plugins-to-new-form-api

#27220 refactor form events to use new form API

Author: CiotkaCierpienia

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.1]
+### Changed
+* refactor form events to use new form API #27220
+
 ## [1.1.0]
 ### Added
 * Changelog

package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "license": "MIT",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "scripts": {
     "build": "node esbuild.config.js",
     "start": "node esbuild.config.js --watch"

plugin-manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "flotiq.custom-links",
   "name": "Custom Links",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "This plugin will display a button with a link in the edit content object. The link will be supplemented with data from the currently edited object. Thanks to this link, you will be able to get easy access to the preview of where the content is used.",
   "repository": "https://github.com/flotiq/flotiq-ui-plugins-custom-links",
   "url": "https://localhost:3053/index.js",

plugins/index.js

@@ -15,16 +15,19 @@ const loadStyles = () => {
   }
 };
 
-registerFn(pluginInfo, (handler, _client, { getLanguage }) => {
-  loadStyles();
+registerFn(
+  pluginInfo,
+  (handler, _client, { getLanguage, getPluginSettings }) => {
+    loadStyles();
 
-  handler.on('flotiq.plugins.manage::form-schema', (data) =>
-    handleManagePlugin(data, pluginInfo, getLanguage),
-  );
-  handler.on('flotiq.form.sidebar-panel::add', (data) =>
-    handlePanelPlugin(data, pluginInfo),
-  );
-});
+    handler.on('flotiq.plugins.manage::form-schema', (data) =>
+      handleManagePlugin(data, pluginInfo, getLanguage),
+    );
+    handler.on('flotiq.form.sidebar-panel::add', (data) =>
+      handlePanelPlugin(data, pluginInfo, getPluginSettings),
+    );
+  },
+);
 
 const pluginManagePreviewRoot = document.getElementById('manage-preview-root');
 const pluginPanelPreviewRoot = document.getElementById('panel-preview-root');

plugins/panelPlugin/panelPlugin.js

@@ -1,7 +1,7 @@
 import {
   addElementToCache,
   getCachedElement,
-  deepReadKeyValue
+  deepReadKeyValue,
 } from '../../common/plugin-helpers';
 
 const onClick = (e) => {
@@ -11,23 +11,21 @@ const onClick = (e) => {
 };
 
 export const handlePanelPlugin = (
-  { contentType, contentObject, duplicate, create, userPlugins },
+  { contentType, contentObject, duplicate, create },
   pluginInfo,
+  getPluginSettings,
 ) => {
-  const customLinksSettings = userPlugins?.find(
-    ({ id }) => id === pluginInfo.id,
-  )?.settings;
-
+  const pluginSettings = getPluginSettings();
   if (
     !contentObject ||
     !contentType?.name ||
     create ||
     duplicate ||
-    !customLinksSettings
+    !pluginSettings
   )
     return null;
 
-  const settingsForCtd = JSON.parse(customLinksSettings)?.settings?.filter(
+  const settingsForCtd = JSON.parse(pluginSettings)?.settings?.filter(
     (plugin) =>
       plugin.content_types.length === 0 ||
       plugin.content_types.find((ctd) => ctd === contentType.name),
@@ -93,16 +91,11 @@ export const loadPanelPlugin = (pluginPanelPreviewRoot) => {
         contentObject: { id: 'id', name: 'co name' },
         duplicate: false,
         create: false,
-        userPlugins: [
-          {
-            id: 'plugin-id',
-            settings:
-              // eslint-disable-next-line max-len
-              '{"settings":[{"url_template":"example.com","link_template":"Link","content_types":[]}, {"url_template":"example.com","link_template":"Link to {name}","content_types":[]}]}',
-          },
-        ],
       },
       { id: 'plugin-id' },
+      () =>
+        // eslint-disable-next-line max-len
+        '{"settings":[{"url_template":"example.com","link_template":"Link","content_types":[]}, {"url_template":"example.com","link_template":"Link to {name}","content_types":[]}]}',
     );
 
     element.style.border = '1px solid #DAE3F2';