diff --git a/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx b/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx
new file mode 100644
index 000000000..804458ee4
--- /dev/null
+++ b/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: ,
+ },
+ {
+ block_type: 'lighthouse_faq',
+ value: createBlockStyleButton({
+ blockType: 'lighthouse_faq',
+ children: 'faq',
+ }),
+ contentWhenSelected: ,
+ },
+ {
+ block_type: 'lighthouse_report-inefficency',
+ value: createBlockStyleButton({
+ blockType: 'lighthouse_report-inefficency',
+ children: 'report-inefficency',
+ }),
+ contentWhenSelected: ,
+ },
+ {
+ block_type: 'lighthouse_accessibility-link',
+ value: createBlockStyleButton({
+ blockType: 'lighthouse_accessibility-link',
+ children: 'accessibility-link',
+ }),
+ contentWhenSelected: ,
+ },
+ {
+ block_type: 'lighthouse_privacy-policy-link',
+ value: createBlockStyleButton({
+ blockType: 'lighthouse_privacy-policy-link',
+ children: 'privacy-policy-link',
+ }),
+ contentWhenSelected: ,
+ },
+ ];
+
+ return (
+ }
+ />
+ );
+};
+
+export const AlignButton = injectLazyLibs(['draftJsCreateBlockStyleButton'])(
+ LighthouseComponent,
+);
+
+export default React.memo(AlignButton);
diff --git a/src/config/RichTextEditor/config.js b/src/config/RichTextEditor/config.js
index 5e99dafb6..8bcb7e6c9 100644
--- a/src/config/RichTextEditor/config.js
+++ b/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)}
)),
+ 'lighthouse_appointment-booking': (children, { keys }) =>
+ children.map((child, i) => (
+
+ {renderHTMLBlock(child)}
+ {renderDataElement('appointment-booking', keys[i])}
+
+ )),
+ lighthouse_faq: (children, { keys }) =>
+ children.map((child, i) => (
+
+ {renderHTMLBlock(child)}
+ {renderDataElement('faq', keys[i])}
+
+ )),
+ 'lighthouse_report-inefficency': (children, { keys }) =>
+ children.map((child, i) => (
+
+ {renderHTMLBlock(child)}
+ {renderDataElement('report-inefficency', keys[i])}
+
+ )),
+ 'lighthouse_accessibility-link': (children, { keys }) =>
+ children.map((child, i) => (
+
+ {renderHTMLBlock(child)}
+ {renderDataElement('accessibility-link', keys[i])}
+
+ )),
+ 'lighthouse_privacy-policy-link': (children, { keys }) =>
+ children.map((child, i) => (
+
+ {renderHTMLBlock(child)}
+ {renderDataElement('privacy-policy-link', keys[i])}
+
+ )),
'align-right': (children, { keys }) =>
children.map((child, i) => (