From 82e1e7f093a707e3a411b44cf87db36e3c23ffa0 Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Mon, 21 Nov 2022 16:31:33 +0100 Subject: [PATCH 1/5] feat: lighthouse data-element tag on draftjs --- .../ToolbarButtons/Lighthouse.jsx | 66 +++++++++++++++++++ src/config/RichTextEditor/config.js | 47 +++++++++++++ 2 files changed, 113 insertions(+) create mode 100644 src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx diff --git a/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx b/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx new file mode 100644 index 000000000..19fd9afa2 --- /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 showSVG from '@plone/volto/icons/show.svg'; + +import DraftJsDropdownButton from './DraftJsDropdownButton'; + +const AlignButtonComponent = (props) => { + const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default; + const options = [ + { + block_type: 'lighthouse_appointment-booking', + value: createBlockStyleButton({ + blockType: 'lighthouse_appointment-booking', + children: '1-appointment-booking', + }), + contentWhenSelected: '1', + }, + { + block_type: 'lighthouse_faq', + value: createBlockStyleButton({ + blockType: 'lighthouse_faq', + children: '2-faq', + }), + contentWhenSelected: '2', + }, + { + block_type: 'lighthouse_report-inefficency', + value: createBlockStyleButton({ + blockType: 'lighthouse_report-inefficency', + children: '3-report-inefficency', + }), + contentWhenSelected: '3', + }, + { + block_type: 'lighthouse_accessibility-link', + value: createBlockStyleButton({ + blockType: 'lighthouse_accessibility-link', + children: '4-accessibility-link', + }), + contentWhenSelected: '4', + }, + { + block_type: 'lighthouse_privacy-policy-link', + value: createBlockStyleButton({ + blockType: 'lighthouse_privacy-policy-link', + children: '5-privacy-policy-link', + }), + contentWhenSelected: '5', + }, + ]; + + return ( + } + /> + ); +}; + +export const AlignButton = injectLazyLibs(['draftJsCreateBlockStyleButton'])( + AlignButtonComponent, +); + +export default React.memo(AlignButton); diff --git a/src/config/RichTextEditor/config.js b/src/config/RichTextEditor/config.js index 5e99dafb6..258126746 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'; @@ -40,6 +41,8 @@ const ItaliaRichTextEditorInlineToolbarButtons = (props, plugins) => { UnderlineButton(props), TextSizeButton(props), Separator, + Lighthouse, + Separator, HeadingsButton(props), linkPlugin.LinkButton, ButtonsButton(props), @@ -72,6 +75,15 @@ const renderHTMLBlock = (child) => { } }); }; +const renderDataElement = (element) => { + if (typeof document !== 'undefined') { + document.querySelector(`.lighthouse_${element} a`) && + document + .querySelector(`.lighthouse_${element} a`) + .setAttribute('data-element', element); + } +}; + const ItaliaBlocksHtmlRenderers = { blockquote: (children, { keys }) => children.map((child, i) => ( @@ -83,6 +95,41 @@ const ItaliaBlocksHtmlRenderers = { {renderHTMLBlock(child)}

)), + 'lighthouse_appointment-booking': (children, { keys }) => + children.map((child, i) => ( +

+ {renderHTMLBlock(child)} + {renderDataElement('appointment-booking')} +

+ )), + lighthouse_faq: (children, { keys }) => + children.map((child, i) => ( +

+ {renderHTMLBlock(child)} + {renderDataElement('faq')} +

+ )), + 'lighthouse_report-inefficency': (children, { keys }) => + children.map((child, i) => ( +

+ {renderHTMLBlock(child)} + {renderDataElement('report-inefficency')} +

+ )), + 'lighthouse_accessibility-link': (children, { keys }) => + children.map((child, i) => ( +

+ {renderHTMLBlock(child)} + {renderDataElement('accessibility-link')} +

+ )), + 'lighthouse_privacy-policy-link': (children, { keys }) => + children.map((child, i) => ( +

+ {renderHTMLBlock(child)} + {renderDataElement('privacy-policy-link')} +

+ )), 'align-right': (children, { keys }) => children.map((child, i) => (

From 0021e3159e2b3f44c342460594f7b326845e949b Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Mon, 21 Nov 2022 16:37:07 +0100 Subject: [PATCH 2/5] fix: position and labels changed --- .../ToolbarButtons/Lighthouse.jsx | 20 +++++++++---------- src/config/RichTextEditor/config.js | 4 ++-- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx b/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx index 19fd9afa2..1cb9b2262 100644 --- a/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx +++ b/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx @@ -12,41 +12,41 @@ const AlignButtonComponent = (props) => { block_type: 'lighthouse_appointment-booking', value: createBlockStyleButton({ blockType: 'lighthouse_appointment-booking', - children: '1-appointment-booking', + children: 'appointment-booking', }), - contentWhenSelected: '1', + contentWhenSelected: , }, { block_type: 'lighthouse_faq', value: createBlockStyleButton({ blockType: 'lighthouse_faq', - children: '2-faq', + children: 'faq', }), - contentWhenSelected: '2', + contentWhenSelected: , }, { block_type: 'lighthouse_report-inefficency', value: createBlockStyleButton({ blockType: 'lighthouse_report-inefficency', - children: '3-report-inefficency', + children: 'report-inefficency', }), - contentWhenSelected: '3', + contentWhenSelected: , }, { block_type: 'lighthouse_accessibility-link', value: createBlockStyleButton({ blockType: 'lighthouse_accessibility-link', - children: '4-accessibility-link', + children: 'accessibility-link', }), - contentWhenSelected: '4', + contentWhenSelected: , }, { block_type: 'lighthouse_privacy-policy-link', value: createBlockStyleButton({ blockType: 'lighthouse_privacy-policy-link', - children: '5-privacy-policy-link', + children: 'privacy-policy-link', }), - contentWhenSelected: '5', + contentWhenSelected: , }, ]; diff --git a/src/config/RichTextEditor/config.js b/src/config/RichTextEditor/config.js index 258126746..0fed5e27f 100644 --- a/src/config/RichTextEditor/config.js +++ b/src/config/RichTextEditor/config.js @@ -41,8 +41,6 @@ const ItaliaRichTextEditorInlineToolbarButtons = (props, plugins) => { UnderlineButton(props), TextSizeButton(props), Separator, - Lighthouse, - Separator, HeadingsButton(props), linkPlugin.LinkButton, ButtonsButton(props), @@ -51,6 +49,8 @@ const ItaliaRichTextEditorInlineToolbarButtons = (props, plugins) => { OrderedListButton, BlockquoteButton, CalloutsButton(props), + Separator, + Lighthouse, ]; }; From 791820a93487d167322d24fec0e71c747f3b9dbb Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Tue, 22 Nov 2022 14:02:09 +0100 Subject: [PATCH 3/5] fix: name of component and icon changed --- .../ToolbarButtons/Lighthouse.jsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx b/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx index 1cb9b2262..804458ee4 100644 --- a/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx +++ b/src/config/RichTextEditor/ToolbarButtons/Lighthouse.jsx @@ -1,11 +1,11 @@ import React from 'react'; import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; import Icon from '@plone/volto/components/theme/Icon/Icon'; -import showSVG from '@plone/volto/icons/show.svg'; +import targetSVG from '@plone/volto/icons/target.svg'; import DraftJsDropdownButton from './DraftJsDropdownButton'; -const AlignButtonComponent = (props) => { +const LighthouseComponent = (props) => { const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default; const options = [ { @@ -14,7 +14,7 @@ const AlignButtonComponent = (props) => { blockType: 'lighthouse_appointment-booking', children: 'appointment-booking', }), - contentWhenSelected: , + contentWhenSelected: , }, { block_type: 'lighthouse_faq', @@ -22,7 +22,7 @@ const AlignButtonComponent = (props) => { blockType: 'lighthouse_faq', children: 'faq', }), - contentWhenSelected: , + contentWhenSelected: , }, { block_type: 'lighthouse_report-inefficency', @@ -30,7 +30,7 @@ const AlignButtonComponent = (props) => { blockType: 'lighthouse_report-inefficency', children: 'report-inefficency', }), - contentWhenSelected: , + contentWhenSelected: , }, { block_type: 'lighthouse_accessibility-link', @@ -38,7 +38,7 @@ const AlignButtonComponent = (props) => { blockType: 'lighthouse_accessibility-link', children: 'accessibility-link', }), - contentWhenSelected: , + contentWhenSelected: , }, { block_type: 'lighthouse_privacy-policy-link', @@ -46,7 +46,7 @@ const AlignButtonComponent = (props) => { blockType: 'lighthouse_privacy-policy-link', children: 'privacy-policy-link', }), - contentWhenSelected: , + contentWhenSelected: , }, ]; @@ -54,13 +54,13 @@ const AlignButtonComponent = (props) => { } + content={} /> ); }; export const AlignButton = injectLazyLibs(['draftJsCreateBlockStyleButton'])( - AlignButtonComponent, + LighthouseComponent, ); export default React.memo(AlignButton); From 39d9d719303f9a91b0d5d01684417aee08c9f58a Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Tue, 22 Nov 2022 15:01:33 +0100 Subject: [PATCH 4/5] fix: querySelectorAll --- src/config/RichTextEditor/config.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/config/RichTextEditor/config.js b/src/config/RichTextEditor/config.js index 0fed5e27f..2d758db5e 100644 --- a/src/config/RichTextEditor/config.js +++ b/src/config/RichTextEditor/config.js @@ -77,10 +77,13 @@ const renderHTMLBlock = (child) => { }; const renderDataElement = (element) => { if (typeof document !== 'undefined') { - document.querySelector(`.lighthouse_${element} a`) && - document - .querySelector(`.lighthouse_${element} a`) - .setAttribute('data-element', element); + const lighthhouseElements = document.querySelectorAll( + `.lighthouse_${element} a`, + ); + lighthhouseElements && + lighthhouseElements.forEach((e) => { + return e.setAttribute('data-element', element); + }); } }; From 672de07b61a53792e5a26fca02fde43ffe9eb184 Mon Sep 17 00:00:00 2001 From: Wagner Trezub Date: Wed, 23 Nov 2022 12:53:31 +0100 Subject: [PATCH 5/5] fix: querySelector by id --- src/config/RichTextEditor/config.js | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/src/config/RichTextEditor/config.js b/src/config/RichTextEditor/config.js index 2d758db5e..8bcb7e6c9 100644 --- a/src/config/RichTextEditor/config.js +++ b/src/config/RichTextEditor/config.js @@ -75,15 +75,11 @@ const renderHTMLBlock = (child) => { } }); }; -const renderDataElement = (element) => { +const renderDataElement = (element, id) => { if (typeof document !== 'undefined') { - const lighthhouseElements = document.querySelectorAll( - `.lighthouse_${element} a`, - ); - lighthhouseElements && - lighthhouseElements.forEach((e) => { - return e.setAttribute('data-element', element); - }); + const lighthouseElements = document.querySelector(`[id='${id}'] a`); + lighthouseElements && + lighthouseElements.setAttribute('data-element', element); } }; @@ -102,35 +98,35 @@ const ItaliaBlocksHtmlRenderers = { children.map((child, i) => (

{renderHTMLBlock(child)} - {renderDataElement('appointment-booking')} + {renderDataElement('appointment-booking', keys[i])}

)), lighthouse_faq: (children, { keys }) => children.map((child, i) => (

{renderHTMLBlock(child)} - {renderDataElement('faq')} + {renderDataElement('faq', keys[i])}

)), 'lighthouse_report-inefficency': (children, { keys }) => children.map((child, i) => (

{renderHTMLBlock(child)} - {renderDataElement('report-inefficency')} + {renderDataElement('report-inefficency', keys[i])}

)), 'lighthouse_accessibility-link': (children, { keys }) => children.map((child, i) => (

{renderHTMLBlock(child)} - {renderDataElement('accessibility-link')} + {renderDataElement('accessibility-link', keys[i])}

)), 'lighthouse_privacy-policy-link': (children, { keys }) => children.map((child, i) => (

{renderHTMLBlock(child)} - {renderDataElement('privacy-policy-link')} + {renderDataElement('privacy-policy-link', keys[i])}

)), 'align-right': (children, { keys }) =>