enhance schema of call-to-action block

src/index.js

@@ -5,7 +5,56 @@ import {
   BodyClassView,
 } from '@eeacms/volto-circularity-policy/components/manage/Blocks/BodyClass';
 import worldSVG from '@plone/volto/icons/world.svg';
+import linkSVG from '@plone/volto/icons/link.svg';
+import { makeInlineElementPlugin } from '@plone/volto-slate/elementEditor';
+import { LINK } from '@plone/volto-slate/constants';
+import { LinkElement } from '@plone/volto-slate/editor/plugins/AdvancedLink/render';
+import { withLink } from '@plone/volto-slate/editor/plugins/AdvancedLink/extensions';
+import { linkDeserializer } from '@plone/volto-slate/editor/plugins/AdvancedLink/deserialize';
+import LinkEditSchema from '@plone/volto-slate/editor/plugins/AdvancedLink/schema';
+import { defineMessages } from 'react-intl';
+
 import './less/slate-metadata.less';
+import './less/slate-styles.less';
+
+const messages = defineMessages({
+  edit: {
+    id: 'Edit link',
+    defaultMessage: 'Edit link',
+  },
+  delete: {
+    id: 'Remove link',
+    defaultMessage: 'Remove link',
+  },
+  document_view: {
+    id: 'Document View',
+    defaultMessage: 'Document View',
+  },
+  herosection_view: {
+    id: 'Hero Section View',
+    defaultMessage: 'Hero Section View',
+  },
+  fullwidth_view: {
+    id: 'Full Width View',
+    defaultMessage: 'Full Width View',
+  },
+  improving: {
+    id: 'Improving',
+    defaultMessage: 'Improving',
+  },
+  deteriotating: {
+    id: 'Deteriotating',
+    defaultMessage: 'Deteriotating',
+  },
+  stable: {
+    id: 'Stable',
+    defaultMessage: 'Stable',
+  },
+  no_trend: {
+    id: 'No trend',
+    defaultMessage: 'No trend',
+  },
+});
 
 const applyConfig = (config) => {
   // #137187 Keycloak integration
@@ -109,6 +158,60 @@ const applyConfig = (config) => {
     ) || []),
   ];
 
+  config.settings.slate.styleMenu = config.settings.slate.styleMenu || {};
+  config.settings.slate.styleMenu.blockStyles = [
+    ...(config.settings.slate.styleMenu?.blockStyles || []),
+    { cssClass: 'box-headings-type-1', label: 'Box headings type 1' },
+    { cssClass: 'box-headings-type-2', label: 'Box headings type 2' },
+  ];
+
+  // Call to Action enhance schema
+  if (config.blocks.blocksConfig.callToActionBlock) {
+    const oldSchemaEnhancer =
+      config.blocks.blocksConfig.callToActionBlock.schemaEnhancer;
+    config.blocks.blocksConfig.callToActionBlock.schemaEnhancer = ({
+      formData,
+      schema,
+      intl,
+    }) => {
+      const resSchema = oldSchemaEnhancer({ formData, schema, intl });
+      resSchema.properties.styles.schema.properties.theme.choices.push(
+        ['improving', intl.formatMessage(messages.improving)],
+        ['deteriotating', intl.formatMessage(messages.deteriotating)],
+        ['no-trend', intl.formatMessage(messages.no_trend)],
+        ['stable', intl.formatMessage(messages.stable)],
+      );
+      return resSchema;
+    };
+  }
+
+  //advancedlink is currently not working properly/not recognized in fise, so we add it to config manually
+  const { slate } = config.settings;
+
+  slate.toolbarButtons = [...(slate.toolbarButtons || []), LINK];
+  slate.expandedToolbarButtons = [
+    ...(slate.expandedToolbarButtons || []),
+    LINK,
+  ];
+
+  slate.htmlTagsToSlate.A = linkDeserializer;
+
+  const opts = {
+    title: 'Link',
+    pluginId: LINK,
+    elementType: LINK,
+    element: LinkElement,
+    isInlineElement: true,
+    editSchema: LinkEditSchema,
+    extensions: [withLink],
+    hasValue: (formData) => !!formData.link,
+    toolbarButtonIcon: linkSVG,
+    messages,
+  };
+
+  const [installLinkEditor] = makeInlineElementPlugin(opts);
+  config = installLinkEditor(config);
+
   return config;
 };
 

src/less/slate-styles.less

@@ -0,0 +1,40 @@
+.box-headings-type-1 {
+  background-color: #004b7f;
+  color: White;
+  padding: 0.5rem;
+}
+
+.box-headings-type-2 {
+  background-color: #3d5265;
+  color: white;
+  padding: 0.5rem;
+}
+
+//Call to action styles
+
+.block.call-to-action {
+  .improving {
+    border-radius: 10px;
+    padding: 0.5rem 2rem;
+    background-color: #007b6c;
+    color: white;
+  }
+  .deteriotating {
+    border-radius: 10px;
+    padding: 0.5rem 2rem;
+    background-color: #b83230;
+    color: white;
+  }
+  .no-trend {
+    border-radius: 10px;
+    padding: 0.5rem 2rem;
+    background-color: #bcbec0;
+    color: black;
+  }
+  .stable {
+    border-radius: 10px;
+    padding: 0.5rem 2rem;
+    background-color: #ff9933;
+    color: black;
+  }
+}