Lighthouse draftjs

src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import targetSVG from '@plone/volto/icons/target.svg';
+
+import DraftJsDropdownButton from './DraftJsDropdownButton';
+
+const LighthouseComponent = (props) => {
+  const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default;
+  const options = [
+    {
+      block_type: 'lighthouse_appointment-booking',
+      value: createBlockStyleButton({
+        blockType: 'lighthouse_appointment-booking',
+        children: 'appointment-booking',
+      }),
+      contentWhenSelected: <Icon name={targetSVG} size="24px" />,
+    },
+    {
+      block_type: 'lighthouse_faq',
+      value: createBlockStyleButton({
+        blockType: 'lighthouse_faq',
+        children: 'faq',
+      }),
+      contentWhenSelected: <Icon name={targetSVG} size="24px" />,
+    },
+    {
+      block_type: 'lighthouse_report-inefficency',
+      value: createBlockStyleButton({
+        blockType: 'lighthouse_report-inefficency',
+        children: 'report-inefficency',
+      }),
+      contentWhenSelected: <Icon name={targetSVG} size="24px" />,
+    },
+    {
+      block_type: 'lighthouse_accessibility-link',
+      value: createBlockStyleButton({
+        blockType: 'lighthouse_accessibility-link',
+        children: 'accessibility-link',
+      }),
+      contentWhenSelected: <Icon name={targetSVG} size="24px" />,
+    },
+    {
+      block_type: 'lighthouse_privacy-policy-link',
+      value: createBlockStyleButton({
+        blockType: 'lighthouse_privacy-policy-link',
+        children: 'privacy-policy-link',
+      }),
+      contentWhenSelected: <Icon name={targetSVG} size="24px" />,
+    },
+  ];
+
+  return (
+    <DraftJsDropdownButton
+      {...props}
+      optionsList={options}
+      content={<Icon name={targetSVG} size="24px" />}
+    />
+  );
+};
+
+export const AlignButton = injectLazyLibs(['draftJsCreateBlockStyleButton'])(
+  LighthouseComponent,
+);
+
+export default React.memo(AlignButton);

src/config/RichTextEditor/config.js

@@ -11,6 +11,7 @@ import Blocks from '@plone/volto/config/RichTextEditor/Blocks';
 import UnderlineButton from '@italia/config/RichTextEditor/ToolbarButtons/UnderlineButton';
 import HeadingsButton from '@italia/config/RichTextEditor/ToolbarButtons/HeadingsButton';
 import AlignButton from '@italia/config/RichTextEditor/ToolbarButtons/AlignButton';
+import Lighthouse from '@italia/config/RichTextEditor/ToolbarButtons/Lighthouse';
 import CalloutsButton from '@italia/config/RichTextEditor/ToolbarButtons/CalloutsButton';
 import ButtonsButton from '@italia/config/RichTextEditor/ToolbarButtons/ButtonsButton';
 import TextSizeButton from '@italia/config/RichTextEditor/ToolbarButtons/TextSizeButton';
@@ -48,6 +49,8 @@ const ItaliaRichTextEditorInlineToolbarButtons = (props, plugins) => {
     OrderedListButton,
     BlockquoteButton,
     CalloutsButton(props),
+    Separator,
+    Lighthouse,
   ];
 };
 
@@ -72,6 +75,14 @@ const renderHTMLBlock = (child) => {
     }
   });
 };
+const renderDataElement = (element, id) => {
+  if (typeof document !== 'undefined') {
+    const lighthouseElements = document.querySelector(`[id='${id}'] a`);
+    lighthouseElements &&
+      lighthouseElements.setAttribute('data-element', element);
+  }
+};
+
 const ItaliaBlocksHtmlRenderers = {
   blockquote: (children, { keys }) =>
     children.map((child, i) => (
@@ -83,6 +94,41 @@ const ItaliaBlocksHtmlRenderers = {
         {renderHTMLBlock(child)}
       </p>
     )),
+  'lighthouse_appointment-booking': (children, { keys }) =>
+    children.map((child, i) => (
+      <p id={keys[i]} key={keys[i]} className="lighthouse_appointment-booking">
+        {renderHTMLBlock(child)}
+        {renderDataElement('appointment-booking', keys[i])}
+      </p>
+    )),
+  lighthouse_faq: (children, { keys }) =>
+    children.map((child, i) => (
+      <p id={keys[i]} key={keys[i]} className="lighthouse_faq">
+        {renderHTMLBlock(child)}
+        {renderDataElement('faq', keys[i])}
+      </p>
+    )),
+  'lighthouse_report-inefficency': (children, { keys }) =>
+    children.map((child, i) => (
+      <p id={keys[i]} key={keys[i]} className="lighthouse_report-inefficency">
+        {renderHTMLBlock(child)}
+        {renderDataElement('report-inefficency', keys[i])}
+      </p>
+    )),
+  'lighthouse_accessibility-link': (children, { keys }) =>
+    children.map((child, i) => (
+      <p id={keys[i]} key={keys[i]} className="lighthouse_accessibility-link">
+        {renderHTMLBlock(child)}
+        {renderDataElement('accessibility-link', keys[i])}
+      </p>
+    )),
+  'lighthouse_privacy-policy-link': (children, { keys }) =>
+    children.map((child, i) => (
+      <p id={keys[i]} key={keys[i]} className="lighthouse_privacy-policy-link">
+        {renderHTMLBlock(child)}
+        {renderDataElement('privacy-policy-link', keys[i])}
+      </p>
+    )),
   'align-right': (children, { keys }) =>
     children.map((child, i) => (
       <p id={keys[i]} key={keys[i]} className="text-right">