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) => (