Merge pull request #3 from flotiq/feature/25864-update-manage-event

#25864 update input help texts, add unique data to url when adding cto

i18n.js

@@ -6,19 +6,22 @@ i18n.init({
   resources: {
     en: {
       translation: {
-        Source: 'Source field name',
-        SourceHelpText:
-          'Select the field from which the content will be given for analysis, as the main content',
+        AdditionalFields: 'Additional fields',
+        AdditionalFieldsHelpText:
+          'If your content is sourced from multiple fields, configure additional fields for analysis.',
+        AllowedFaq:
+          'list, that must contains two fields: question and answer, which are text or textarea',
+        Content: 'Content field name',
+        ContentHelpText:
+          'Select the field that contains the main body of your content.',
         Title: 'Title field name',
-        TitleHelpText:
-          'Select the field whose content will be provided for analysis as an h1 tag',
+        TitleHelpText: 'Select the field that contains the main heading (H1).',
         Lead: 'Lead field name',
         LeadHelpText:
-          'Select the field whose contents will be given to the analysis as p tag',
+          'Select the field that contains the lead paragraph or introductory text.',
         Faq: 'FAQ',
-        FaqHelpText: 'Select the field from FAQ will be embeded to analysis',
+        FaqHelpText: 'Select the field that contains the FAQ section.',
         ContentType: 'Content Type',
-        ContentTypeHelpText: '',
         FieldRequired: 'Field is required',
         WrongFieldType: 'This field type is not supported',
         NonRequiredFieldsInCTD:
@@ -30,20 +33,21 @@ i18n.init({
     },
     pl: {
       translation: {
-        Source: 'Pole źródła',
-        SourceHelpText:
-          'Wybierz pole z którego zawartość będzie podana do analizy, jako główny content',
+        AdditionalFields: 'Dodatkowe pola',
+        AdditionalFieldsHelpText:
+          'Jeśli treść pochodzi z wielu pól, skonfiguruj dodatkowe pola do analizy',
+        AllowedFaq:
+          'lista, musi ona zawierać dwa pola: question i answer, które są tekstem lub długim polem tekstowym',
+        Content: 'Pole źródła',
+        ContentHelpText: 'Wybierz pole zawierające główną treść treści.',
         Title: 'Pole tytułu',
-        TitleHelpText:
-          'Wybierz pole którego zawartość będzie podana do analizy jako tag h1',
+        TitleHelpText: 'Wybierz pole zawierające nagłówek główny (H1).',
         Lead: 'Pole wprowadzenia',
         LeadHelpText:
-          'Wybierz pole którego zawartość będzie podana analizy jako tag p',
+          'Wybierz pole zawierające akapit wiodący lub tekst wprowadzający',
         Faq: 'FAQ',
-        FaqHelpText:
-          'Wybierz pole którego z którego zostaną pobrane FAQ, oraz przekazane do analizy',
+        FaqHelpText: 'Wybierz pole zawierające sekcję FAQ.',
         ContentType: 'Typ zawartości',
-        ContentTypeHelpText: '',
         FieldRequired: 'Pole jest wymagane',
         WrongFieldType: 'Ten typ pola nie jest wspierany',
         NonRequiredFieldsInCTD:

plugin-manifest.json

@@ -2,7 +2,7 @@
   "id": "flotiq.surferseo-content-analyzer",
   "name": "SurferSEO content analyzer plugin",
   "description": "Flotiq ui plugin for analyze selected fields for SEO optimization directly with SurferSEO, providing real-time content improvement suggestions.",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "repository": "https://github.com/flotiq/flotiq-ui-plugin-surferseo-content-analyzer",
   "url": "https://localhost:3053/index.js",
   "permissions": []

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

@@ -1,33 +1,74 @@
+import pluginInfo from '../../plugin-manifest.json';
 import {
-  validFaqFields,
   validFieldsCacheKey,
   validLeadFields,
   validSourceFields,
   validTitleFields,
-} from '../../../common/valid-fields.js';
-import { getCachedElement } from '../../../common/plugin-element-cache.js';
+} from '../../common/valid-fields.js';
+import {
+  addElementToCache,
+  getCachedElement,
+} from '../../common/plugin-element-cache.js';
 import i18n from 'i18next';
 
 const insertSelectOptions = (config, options = [], emptyOptionMessage) => {
   config.additionalHelpTextClasses = 'break-normal';
 
   if (options.length === 0) {
-    config.options = [
-      { value: 'empty', label: emptyOptionMessage, disabled: true },
-    ];
+    config.emptyOptions = emptyOptionMessage;
+    config.additionalDropdownClasses = 'flotiq-ui-plugin-manage-empty-options';
     return;
   }
   config.options = options;
 };
 
-export const handlePluginFormConfig = ({ name, config, formik }) => {
+const getAdditionalFieldsElement = (name) => {
+  const elementCacheKey = `${pluginInfo.id}-${name}-additional-fields`;
+  let element = getCachedElement(elementCacheKey)?.element;
+
+  if (!element) {
+    element = document.createElement('div');
+    element.className = 'flotiq-ui-plugin-manage-additional-fields';
+
+    element.innerHTML = /*html*/ `
+    <h3 class="flotiq-ui-plugin-manage-additional-fields__heading"></h3>
+    <p class="flotiq-ui-plugin-manage-additional-fields__description"></p>
+    `;
+
+    addElementToCache(element, elementCacheKey);
+  }
+
+  const heading = element.querySelector(
+    '.flotiq-ui-plugin-manage-additional-fields__heading',
+  );
+  heading.textContent = i18n.t('AdditionalFields');
+
+  const description = element.querySelector(
+    '.flotiq-ui-plugin-manage-additional-fields__description',
+  );
+  description.textContent = i18n.t('AdditionalFieldsHelpText');
+
+  return element;
+};
+
+export const handlePluginFormConfig = ({
+  contentType,
+  name,
+  config,
+  formik,
+}) => {
+  if (contentType?.id !== pluginInfo.id && !contentType?.nonCtdSchema) {
+    return;
+  }
+
   const { index, type } =
     name.match(/surferSeoAnalyzer\[(?<index>\d+)\].(?<type>\w+)/)?.groups || {};
 
   if (index == null || !type) return;
   const ctd = formik.values.surferSeoAnalyzer[index].content_type;
+
   const { titleFields, leadFields, sourceFields, faqFields } =
-    getCachedElement(validFieldsCacheKey);
+    getCachedElement(validFieldsCacheKey) || {};
 
   const keysToClearOnCtdChange = ['title', 'lead', 'source', 'faq'];
 
@@ -68,13 +109,14 @@ export const handlePluginFormConfig = ({ name, config, formik }) => {
           types: validSourceFields.join(', '),
         }),
       );
+      config.additionalElements = [getAdditionalFieldsElement(name)];
       break;
     case 'faq':
       insertSelectOptions(
         config,
         faqFields?.[ctd],
         i18n.t('NonRequiredFieldsInCTD', {
-          types: validFaqFields.join(', '),
+          types: i18n.t('AllowedFaq'),
         }),
       );
       break;

plugins/index.js

@@ -2,7 +2,7 @@ import { registerFn } from '../common/plugin-element-cache';
 import pluginInfo from '../plugin-manifest.json';
 import cssString from 'inline:./styles/style.css';
 import { handleManagePlugin } from './manage/index.js';
-import { handlePluginFormConfig } from './field-config/plugin-form/index.js';
+import { handlePluginFormConfig } from './field-config/index.js';
 import { createSidebar } from './sidebar/index.js';
 import { parsePluginSettings } from '../common/helpers.js';
 import i18n from 'i18next';

plugins/manage/settings-schema.js

@@ -1,11 +1,5 @@
 import i18n from '../../i18n';
 import pluginInfo from '../../plugin-manifest.json';
-import {
-  validFaqFields,
-  validLeadFields,
-  validSourceFields,
-  validTitleFields,
-} from '../../common/valid-fields.js';
 
 export const getSchema = (contentTypes) => ({
   id: pluginInfo.id,
@@ -66,44 +60,36 @@ export const getSchema = (contentTypes) => ({
             content_type: {
               label: i18n.t('ContentType'),
               unique: false,
-              helpText: i18n.t('ContentTypeHelpText'),
+              helpText: '',
               inputType: 'select',
               optionsWithLabels: contentTypes,
               useOptionsWithLabels: true,
             },
             source: {
-              label: i18n.t('Source'),
+              label: i18n.t('Content'),
               unique: false,
-              helpText: i18n.t('SourceHelpText', {
-                types: validSourceFields.join(', '),
-              }),
+              helpText: i18n.t('ContentHelpText'),
               inputType: 'select',
               options: [],
             },
             title: {
               label: i18n.t('Title'),
               unique: false,
-              helpText: i18n.t('TitleHelpText', {
-                types: validTitleFields.join(', '),
-              }),
+              helpText: i18n.t('TitleHelpText'),
               inputType: 'select',
               options: [],
             },
             lead: {
               label: i18n.t('Lead'),
               unique: false,
-              helpText: i18n.t('LeadHelpText', {
-                types: validLeadFields.join(', '),
-              }),
+              helpText: i18n.t('LeadHelpText'),
               inputType: 'select',
               options: [],
             },
             faq: {
               label: i18n.t('Faq'),
               unique: false,
-              helpText: i18n.t('FaqHelpText', {
-                types: validFaqFields.join(', '),
-              }),
+              helpText: i18n.t('FaqHelpText'),
               inputType: 'select',
               options: [],
             },

plugins/sidebar/index.js

@@ -48,8 +48,11 @@ export const createSidebar = (getSpaceId, objectId) => {
 
     const spaceId = getSpaceId();
 
+    let urlHash = `#surferSpace=${spaceId}`;
+    if (!objectId) urlHash += `&surferTime=${Date.now()}`;
+
     const url = new URL(window.location.href);
-    url.hash = `#surferSpace=${spaceId}`;
+    url.hash = urlHash;
 
     setPermalink(url.toString());
 

plugins/styles/style.css

@@ -36,3 +36,13 @@
   overflow: hidden;
   min-height: 650px;
 }
+
+.flotiq-ui-plugin-manage-additional-fields {
+  border-top: 1px solid #dae3f2;
+  padding: 12px 0;
+  margin-top: 24px;
+}
+
+.flotiq-ui-plugin-manage-empty-options {
+  padding: 12px;
+}