From 2c0c20bb073a7fc2bc52caed4e6645363e15b35c Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Wed, 11 Oct 2023 12:40:52 +0200 Subject: [PATCH] feat: remove Draftjs --- .../Blocks/ContactsBlock/Block/EditBlock.jsx | 2 + .../Blocks/IconBlocks/Block/ViewBlock.jsx | 3 +- .../PageHeader/PageHeaderLinkServizio.jsx | 7 +- .../View/ServizioView/ServizioAccedi.jsx | 11 +- src/config/RichTextEditor/LinkEntity.jsx | 27 -- .../AnchorPlugin/components/Link/index.jsx | 44 ---- .../components/LinkButton/index.js | 149 ----------- .../Plugins/AnchorPlugin/index.js | 88 ------- .../ToolbarButtons/AlignButton.jsx | 61 ----- .../ToolbarButtons/ButtonsButton.jsx | 14 -- .../ToolbarButtons/CalloutsButton.jsx | 38 --- .../ToolbarButtons/DraftJsDropdownButton.jsx | 106 -------- .../ToolbarButtons/HeadingsButton.jsx | 57 ----- .../ToolbarButtons/TextSizeButton.jsx | 65 ----- .../ToolbarButtons/UnderlineButton.jsx | 14 -- src/config/RichTextEditor/config.js | 236 ------------------ src/config/Slate/config.js | 2 +- src/config/italiaConfig.js | 4 +- .../volto/config/RichTextEditor/Plugins.jsx | 63 ----- src/theme/ItaliaTheme/Blocks/_accordion.scss | 10 - src/theme/ItaliaTheme/Blocks/_alert.scss | 16 -- src/theme/ItaliaTheme/Blocks/_contacts.scss | 34 +-- src/theme/ItaliaTheme/Blocks/_ctaBlock.scss | 14 -- src/theme/ItaliaTheme/Blocks/_hero.scss | 8 - src/theme/ItaliaTheme/Blocks/_iconBlocks.scss | 30 --- .../Blocks/_imageCardTextBlock.scss | 5 +- src/theme/ItaliaTheme/Blocks/_numbers.scss | 6 +- .../Blocks/_simpleCardTextBlock.scss | 10 +- .../ItaliaTheme/Components/_megamenu.scss | 4 - src/theme/ItaliaTheme/_common.scss | 3 +- src/theme/ItaliaTheme/_main.scss | 48 ---- src/theme/_cms-ui.scss | 141 ----------- src/theme/extras/_forms.scss | 16 +- 33 files changed, 32 insertions(+), 1304 deletions(-) delete mode 100644 src/config/RichTextEditor/LinkEntity.jsx delete mode 100644 src/config/RichTextEditor/Plugins/AnchorPlugin/components/Link/index.jsx delete mode 100644 src/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/index.js delete mode 100644 src/config/RichTextEditor/Plugins/AnchorPlugin/index.js delete mode 100644 src/config/RichTextEditor/ToolbarButtons/AlignButton.jsx delete mode 100644 src/config/RichTextEditor/ToolbarButtons/ButtonsButton.jsx delete mode 100644 src/config/RichTextEditor/ToolbarButtons/CalloutsButton.jsx delete mode 100644 src/config/RichTextEditor/ToolbarButtons/DraftJsDropdownButton.jsx delete mode 100644 src/config/RichTextEditor/ToolbarButtons/HeadingsButton.jsx delete mode 100644 src/config/RichTextEditor/ToolbarButtons/TextSizeButton.jsx delete mode 100644 src/config/RichTextEditor/ToolbarButtons/UnderlineButton.jsx delete mode 100644 src/config/RichTextEditor/config.js delete mode 100644 src/customizations/volto/config/RichTextEditor/Plugins.jsx diff --git a/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock.jsx index 92f121860..460d8d062 100644 --- a/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock.jsx +++ b/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock.jsx @@ -154,6 +154,7 @@ class EditBlock extends SubblockEdit { key="tel" data={this.props.data} fieldName="tel" + wrapClass="tel" selected={this.props.selected && this.state.focusOn === 'tel'} onChangeBlock={(block, _data) => { this.onChange({ ...this.props.data, tel: _data.value }); @@ -177,6 +178,7 @@ class EditBlock extends SubblockEdit { { content.canale_digitale_link && !content.stato_servizio ? (
-

- +

+ {intl.formatMessage(messages.canale_digitale_link)}

diff --git a/src/components/ItaliaTheme/View/ServizioView/ServizioAccedi.jsx b/src/components/ItaliaTheme/View/ServizioView/ServizioAccedi.jsx index e685bc527..0750bc33d 100644 --- a/src/components/ItaliaTheme/View/ServizioView/ServizioAccedi.jsx +++ b/src/components/ItaliaTheme/View/ServizioView/ServizioAccedi.jsx @@ -27,12 +27,11 @@ const ServizioAccedi = ({ content }) => { > {content.canale_digitale_link && (
- {/* TODO */} -

- +

+ {intl.formatMessage(messages.canale_digitale_link)}

diff --git a/src/config/RichTextEditor/LinkEntity.jsx b/src/config/RichTextEditor/LinkEntity.jsx deleted file mode 100644 index 3766cd527..000000000 --- a/src/config/RichTextEditor/LinkEntity.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink'; -import { IntlProvider } from 'react-intl'; - -const LinkEntity = connect((state) => ({ - token: state.userSession.token, -}))((props) => { - const { token, url, target, targetUrl, download, children, dataElement } = - props; - const to = token ? url : targetUrl || url; - - return ( - - - {children} - - - ); -}); - -export default LinkEntity; diff --git a/src/config/RichTextEditor/Plugins/AnchorPlugin/components/Link/index.jsx b/src/config/RichTextEditor/Plugins/AnchorPlugin/components/Link/index.jsx deleted file mode 100644 index 9802d0e7f..000000000 --- a/src/config/RichTextEditor/Plugins/AnchorPlugin/components/Link/index.jsx +++ /dev/null @@ -1,44 +0,0 @@ -/** - * Questo è il link quando viene mostrato dentro l'editor nelle viste di edit - * Customizzato - * - aggiunto data-element - * - aggiunto icona link esterno - */ -import React from 'react'; -import PropTypes from 'prop-types'; -import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers'; - -const propTypes = { - className: PropTypes.string, - children: PropTypes.node.isRequired, - entityKey: PropTypes.string, - getEditorState: PropTypes.func.isRequired, - target: PropTypes.string, -}; - -const Link = ({ children, className, entityKey, getEditorState, target }) => { - const entity = getEditorState().getCurrentContent().getEntity(entityKey); - const entityData = entity ? entity.get('data') : undefined; - const href = (entityData && entityData.url) || undefined; - - return ( - - {children} - - ); -}; - -Link.propTypes = propTypes; -Link.defaultProps = { - className: null, - entityKey: null, - target: null, -}; -export default Link; diff --git a/src/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/index.js b/src/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/index.js deleted file mode 100644 index c05ceb38e..000000000 --- a/src/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/index.js +++ /dev/null @@ -1,149 +0,0 @@ -/** - * Customizzato: - * - Aggiunta gestione data-element - * - Importato AddLinkForm file customizzato - */ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import cx from 'classnames'; -import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; -import EditorUtils from '@plone/volto/components/manage/AnchorPlugin/utils/EditorUtils'; -import Icon from '@plone/volto/components/theme/Icon/Icon'; - -import AddLinkForm from '@plone/volto/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm'; //è stata customizzata in customizations -import linkSVG from '@plone/volto/icons/link.svg'; -import unlinkSVG from '@plone/volto/icons/unlink.svg'; - -/** - * Add link form class. - * @class LinkButton - * @extends Component - */ -class LinkButton extends Component { - static propTypes = { - placeholder: PropTypes.string, - theme: PropTypes.shape({}).isRequired, - ownTheme: PropTypes.shape({}).isRequired, - onRemoveLinkAtSelection: PropTypes.func.isRequired, - onOverrideContent: PropTypes.func.isRequired, - }; - - constructor(props) { - super(props); - - this.DraftEditorUtils = props.draftJsPluginsUtils.default; - this.EditorUtils = EditorUtils(props); - } - - static defaultProps = { - placeholder: '', - }; - - onMouseDown = (event) => { - event.preventDefault(); - }; - - onAddLinkClick = (e) => { - e.preventDefault(); - e.stopPropagation(); - const { ownTheme, placeholder, onOverrideContent } = this.props; - const data = - this.EditorUtils.getCurrentEntity( - this.props.getEditorState(), - )?.getData() ?? {}; - const link = data.url || ''; - const dataElement = data.dataElement || data['data-element'] || ''; - - const content = (props) => ( - {}} - onClear={() => { - this.props.setEditorState( - this.DraftEditorUtils.removeLinkAtSelection( - this.props.getEditorState(), - ), - ); - }} - onChangeValue={(url, dataElement) => { - this.props.setEditorState( - createLinkAtSelection( - this.props.draftJs, - this.props.getEditorState(), - url, - dataElement, - ), - ); - }} - /> - ); - onOverrideContent(content); - }; - - /** - * Render method. - * @method render - * @returns {string} Markup for the component. - */ - render() { - const { theme } = this.props; - const hasLinkSelected = this.EditorUtils.hasEntity( - this.props.getEditorState(), - 'LINK', - ); - const className = hasLinkSelected - ? cx(theme.button, theme.active) - : theme.button; - - return ( -
- -
- ); - } -} - -export default injectLazyLibs(['draftJs', 'draftJsPluginsUtils'])(LinkButton); - -function createLinkAtSelection(draftJs, editorState, url, dataElement) { - const contentState = editorState - .getCurrentContent() - .createEntity('LINK', 'MUTABLE', { url, dataElement }); - const entityKey = contentState.getLastCreatedEntityKey(); - const withLink = draftJs.RichUtils.toggleLink( - editorState, - editorState.getSelection(), - entityKey, - ); - return draftJs.EditorState.forceSelection( - withLink, - editorState.getSelection(), - ); -} diff --git a/src/config/RichTextEditor/Plugins/AnchorPlugin/index.js b/src/config/RichTextEditor/Plugins/AnchorPlugin/index.js deleted file mode 100644 index a00755e19..000000000 --- a/src/config/RichTextEditor/Plugins/AnchorPlugin/index.js +++ /dev/null @@ -1,88 +0,0 @@ -/** - * Customizzato - * - Cambiato import dei link per poter customizzare i file - */ -import decorateComponentWithProps from 'decorate-component-with-props'; -import linkStrategy, { - matchesEntityType, -} from '@plone/volto/components/manage/AnchorPlugin/linkStrategy'; - -import DefaultLink from 'design-comuni-plone-theme/config/RichTextEditor/Plugins/AnchorPlugin/components/Link'; -import LinkButton from 'design-comuni-plone-theme/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton'; - -function unboundRemoveEntity(editorState) { - const contentState = editorState.getCurrentContent(); - const selectionState = editorState.getSelection(); - const startKey = selectionState.getStartKey(); - const contentBlock = contentState.getBlockForKey(startKey); - const startOffset = selectionState.getStartOffset(); - const entity = contentBlock.getEntityAt(startOffset); - - if (!entity) { - return editorState; - } - - let entitySelection = null; - - contentBlock.findEntityRanges( - (character) => character.getEntity() === entity, - (start, end) => { - entitySelection = selectionState.merge({ - anchorOffset: start, - focusOffset: end, - isBackward: false, - }); - }, - ); - - const newContentState = this.Modifier.applyEntity( - contentState, - entitySelection, - null, - ); - - const newEditorState = this.EditorState.push( - editorState, - newContentState, - 'apply-entity', - ); - - return newEditorState; -} - -export default function AnchorPlugin(config = {}) { - // ToDo: Get rif of the remainings of having the original CSS modules - const defaultTheme = {}; - - const { - theme = defaultTheme, - placeholder, - Link, - linkTarget, - libraries, - } = config; - - const removeEntity = unboundRemoveEntity.bind(libraries); - - return { - decorators: [ - { - strategy: linkStrategy, - matchesEntityType, - component: - Link || - decorateComponentWithProps(DefaultLink, { - className: 'link-anchorlink-theme', - target: linkTarget, - }), - }, - ], - - LinkButton: decorateComponentWithProps(LinkButton, { - ownTheme: theme, - placeholder, - onRemoveLinkAtSelection: (setEditorState, getEditorState) => - setEditorState(removeEntity(getEditorState())), - }), - }; -} diff --git a/src/config/RichTextEditor/ToolbarButtons/AlignButton.jsx b/src/config/RichTextEditor/ToolbarButtons/AlignButton.jsx deleted file mode 100644 index ec4b2c3a1..000000000 --- a/src/config/RichTextEditor/ToolbarButtons/AlignButton.jsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable'; -import Icon from '@plone/volto/components/theme/Icon/Icon'; -import alignCenterSVG from '@plone/volto/icons/align-center.svg'; -import alignLeftSVG from '@plone/volto/icons/align-left.svg'; -import alignRightSVG from '@plone/volto/icons/align-right.svg'; -import alignJustifySVG from '@plone/volto/icons/align-justify.svg'; - -import DraftJsDropdownButton from './DraftJsDropdownButton'; - -const AlignButtonComponent = (props) => { - const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default; - const options = [ - { - block_type: 'align-left', - value: createBlockStyleButton({ - blockType: 'align-left', - children: , - }), - contentWhenSelected: , - }, - { - block_type: 'align-center', - value: createBlockStyleButton({ - blockType: 'align-center', - children: , - }), - contentWhenSelected: , - }, - { - block_type: 'align-right', - value: createBlockStyleButton({ - blockType: 'align-right', - children: , - }), - contentWhenSelected: , - }, - { - block_type: 'align-justify', - value: createBlockStyleButton({ - blockType: 'align-justify', - children: , - }), - contentWhenSelected: , - }, - ]; - - return ( - } - /> - ); -}; - -export const AlignButton = injectLazyLibs(['draftJsCreateBlockStyleButton'])( - AlignButtonComponent, -); - -export default React.memo(AlignButton); diff --git a/src/config/RichTextEditor/ToolbarButtons/ButtonsButton.jsx b/src/config/RichTextEditor/ToolbarButtons/ButtonsButton.jsx deleted file mode 100644 index aeb1ba702..000000000 --- a/src/config/RichTextEditor/ToolbarButtons/ButtonsButton.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import Icon from '@plone/volto/components/theme/Icon/Icon'; -import circleMenuSVG from '@plone/volto/icons/circle-menu.svg'; - -const ButtonsButton = (props) => { - const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default; - return createBlockStyleButton({ - blockType: 'buttons', - children: , - }); -}; - -export default ButtonsButton; diff --git a/src/config/RichTextEditor/ToolbarButtons/CalloutsButton.jsx b/src/config/RichTextEditor/ToolbarButtons/CalloutsButton.jsx deleted file mode 100644 index 17f9eaa12..000000000 --- a/src/config/RichTextEditor/ToolbarButtons/CalloutsButton.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import Icon from '@plone/volto/components/theme/Icon/Icon'; - -import DraftJsDropdownButton from './DraftJsDropdownButton'; -import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme'; - -import calloutSVG from '@plone/volto/icons/megaphone.svg'; - -const CalloutsButton = (props) => { - const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default; - - const options = [ - { - block_type: 'callout', - value: createBlockStyleButton({ - blockType: 'callout', - children: , - }), - }, - { - block_type: 'callout-bg', - value: createBlockStyleButton({ - blockType: 'callout-bg', - children: , - }), - }, - ]; - - return (_props) => ( - } - /> - ); -}; - -export default CalloutsButton; diff --git a/src/config/RichTextEditor/ToolbarButtons/DraftJsDropdownButton.jsx b/src/config/RichTextEditor/ToolbarButtons/DraftJsDropdownButton.jsx deleted file mode 100644 index f8891b305..000000000 --- a/src/config/RichTextEditor/ToolbarButtons/DraftJsDropdownButton.jsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, { useState } from 'react'; -import PropTypes from 'prop-types'; -import unionClassNames from 'union-class-names'; - -/* -Questo è un componente di utility che serve per fare i menu a tendina nella toolbar di draftjs. -Basta passargli le prop del componente stesso e nella prop optionsList l'elenco delle opzioni -da mostrare nella tendina. -*/ -const DraftJsDropdownButton = (props) => { - const { theme, optionsList } = props; - const [open, setOpen] = useState(false); - - const getCurrentBlockType = () => { - if (!props.getEditorState) { - return false; - } - - const editorState = props.getEditorState(); - const type = editorState - .getCurrentContent() - .getBlockForKey(editorState.getSelection().getStartKey()) - .getType(); - return type; - }; - - const hasBlockStyle = () => { - const type = getCurrentBlockType(); - return props.optionsList.map((o) => o.block_type).indexOf(type) >= 0; - }; - - const getDropdownToggleContent = () => { - const type = getCurrentBlockType(); - let contentWhenSelected = props.optionsList.filter( - (o) => o.block_type === type, - )?.[0]?.contentWhenSelected; - - return contentWhenSelected || props.content; - }; - - const className = hasBlockStyle() - ? unionClassNames(theme.button, theme.active) - : theme.button; - - const onMouseDown = (event) => { - event.preventDefault(); - }; - - const openDropdown = (e) => { - e.preventDefault(); - e.stopPropagation(); - setOpen(!open); - }; - - return ( -
- - -
    - {optionsList.map((item) => { - let OptionButton = item.value; - - return ( -
  • { - setOpen(false); - }} - > - -
    • - ); - })} -
-
- ); -}; - -DraftJsDropdownButton.propTypes = { - onChange: PropTypes.func, - editorState: PropTypes.object, - placeholder: PropTypes.string, - theme: PropTypes.shape({}).isRequired, - ownTheme: PropTypes.shape({}), - onOverrideContent: PropTypes.func.isRequired, - optionsList: PropTypes.arrayOf( - PropTypes.shape({ block_type: PropTypes.string, value: PropTypes.any }), - ).isRequired, -}; -export default React.memo(DraftJsDropdownButton); diff --git a/src/config/RichTextEditor/ToolbarButtons/HeadingsButton.jsx b/src/config/RichTextEditor/ToolbarButtons/HeadingsButton.jsx deleted file mode 100644 index 5bf9d884f..000000000 --- a/src/config/RichTextEditor/ToolbarButtons/HeadingsButton.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; - -import Icon from '@plone/volto/components/theme/Icon/Icon'; -import textSVG from '@plone/volto/icons/text.svg'; -import DraftJsDropdownButton from './DraftJsDropdownButton'; - -const HeadingsButton = (props) => { - const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default; - - const options = [ - { - block_type: 'header-two', - value: createBlockStyleButton({ - blockType: 'header-two', - children:

H2

, - }), - }, - { - block_type: 'header-three', - value: createBlockStyleButton({ - blockType: 'header-three', - children:

h3

, - }), - }, - { - block_type: 'header-four', - value: createBlockStyleButton({ - blockType: 'header-four', - children:

h4

, - }), - }, - { - block_type: 'header-five', - value: createBlockStyleButton({ - blockType: 'header-five', - children:
h5
, - }), - }, - { - block_type: 'header-six', - value: createBlockStyleButton({ - blockType: 'header-six', - children:
h6
, - }), - }, - ]; - - return (_props) => ( - } - /> - ); -}; - -export default HeadingsButton; diff --git a/src/config/RichTextEditor/ToolbarButtons/TextSizeButton.jsx b/src/config/RichTextEditor/ToolbarButtons/TextSizeButton.jsx deleted file mode 100644 index e949faafd..000000000 --- a/src/config/RichTextEditor/ToolbarButtons/TextSizeButton.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { defineMessages, useIntl } from 'react-intl'; -import Icon from '@plone/volto/components/theme/Icon/Icon'; - -// import DraftJsDropdownButton from 'design-comuni-plone-theme/config/RichTextEditor/ToolbarButtons/DraftJsDropdownButton'; - -import formatSVG from '@plone/volto/icons/format.svg'; - -const messages = defineMessages({ - TextSizeButton: { - id: 'text-size-button', - defaultMessage: 'Dimensione del testo', - }, -}); - -/* -const TextSizeButton = (props) => { - const createInlineStyleButton = props.draftJsCreateInlineStyleButton.default; - - const options = [ - { - block_type: 'text-larger', - value: createInlineStyleButton({ - style: 'TEXT_LARGER', - children: , - }), - }, - { - block_type: 'text-smaller', - value: createInlineStyleButton({ - style: 'TEXT_SMALLER', - children: , - }), - }, - ]; - - return (_props)=>( - } - /> - ); -}; -*/ - -const ButtonIcon = (props) => { - const intl = useIntl(); - return ( - - ); -}; - -const TextSizeButton = (props) => { - const createInlineStyleButton = props.draftJsCreateInlineStyleButton.default; - return createInlineStyleButton({ - style: 'TEXT_LARGER', - children: ButtonIcon, - }); -}; -export default TextSizeButton; diff --git a/src/config/RichTextEditor/ToolbarButtons/UnderlineButton.jsx b/src/config/RichTextEditor/ToolbarButtons/UnderlineButton.jsx deleted file mode 100644 index 1f7f86475..000000000 --- a/src/config/RichTextEditor/ToolbarButtons/UnderlineButton.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -import Icon from '@plone/volto/components/theme/Icon/Icon'; -import underlineSVG from '@plone/volto/icons/underline.svg'; - -const UnderlineButton = (props) => { - const createInlineStyleButton = props.draftJsCreateInlineStyleButton.default; - return createInlineStyleButton({ - style: 'UNDERLINE', - children: , - }); -}; - -export default UnderlineButton; diff --git a/src/config/RichTextEditor/config.js b/src/config/RichTextEditor/config.js deleted file mode 100644 index 01384f3be..000000000 --- a/src/config/RichTextEditor/config.js +++ /dev/null @@ -1,236 +0,0 @@ -import React from 'react'; -import Styles from '@plone/volto/config/RichTextEditor/Styles'; - -import ToHTMLRenderers from '@plone/volto/config/RichTextEditor/ToHTML'; -import FromHTML from '@plone/volto/config/RichTextEditor/FromHTML'; -import Plugins from '@plone/volto/config/RichTextEditor/Plugins'; -import Blocks from '@plone/volto/config/RichTextEditor/Blocks'; -//import FromHTMLCustomBlockFn from '@plone/volto/config/RichTextEditor/FromHTML'; - -import UnderlineButton from 'design-comuni-plone-theme/config/RichTextEditor/ToolbarButtons/UnderlineButton'; -import HeadingsButton from 'design-comuni-plone-theme/config/RichTextEditor/ToolbarButtons/HeadingsButton'; -import AlignButton from 'design-comuni-plone-theme/config/RichTextEditor/ToolbarButtons/AlignButton'; -import CalloutsButton from 'design-comuni-plone-theme/config/RichTextEditor/ToolbarButtons/CalloutsButton'; -import ButtonsButton from 'design-comuni-plone-theme/config/RichTextEditor/ToolbarButtons/ButtonsButton'; -import TextSizeButton from 'design-comuni-plone-theme/config/RichTextEditor/ToolbarButtons/TextSizeButton'; - -import LinkEntity from 'design-comuni-plone-theme/config/RichTextEditor/LinkEntity'; - -const ItaliaRichTextEditorPlugins = (props) => []; -const ItaliaRichTextEditorInlineToolbarButtons = (props, plugins) => { - const linkPlugin = plugins.filter((p) => p.LinkButton != null)[0]; - const Separator = props.draftJsInlineToolbarPlugin.Separator; - - const buttons = Styles(props); - const { - BoldButton, - ItalicButton, - // HeadlineTwoButton, - // HeadlineThreeButton, - UnorderedListButton, - OrderedListButton, - BlockquoteButton, - // CalloutButton, - } = buttons; - - return [ - AlignButton, - Separator, - BoldButton, - ItalicButton, - UnderlineButton(props), - TextSizeButton(props), - Separator, - HeadingsButton(props), - linkPlugin.LinkButton, - ButtonsButton(props), - Separator, - UnorderedListButton, - OrderedListButton, - BlockquoteButton, - CalloutsButton(props), - ]; -}; - -const renderHTMLBlock = (child) => { - return child.map((subchild) => { - if (Array.isArray(subchild)) { - return subchild.map((subchildren) => { - if (typeof subchildren === 'string') { - const last = subchildren.split('\n').length - 1; - return subchildren.split('\n').map((item, index) => ( - - {item} - {index !== last &&
} - - )); - } else { - return subchildren; - } - }); - } else { - return subchild; - } - }); -}; -const ItaliaBlocksHtmlRenderers = { - blockquote: (children, { keys }) => - children.map((child, i) => ( -
{renderHTMLBlock(child)}
- )), - 'align-center': (children, { keys }) => - children.map((child, i) => ( -

- {renderHTMLBlock(child)} -

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

- {renderHTMLBlock(child)} -

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

- {renderHTMLBlock(child)} -

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

- {renderHTMLBlock(child)} -

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

- {renderHTMLBlock(child)} -

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

- {renderHTMLBlock(child)} -

- )), -}; - -const ItaliaInlineHtmlRenderers = { - TEXT_LARGER: (children, { key }) => ( - - {children} - - ), -}; - -const ItaliaFromHTMLCustomBlockFn = (element) => { - let ret = FromHTML(element); //get default from plone/volto - - if (!ret) { - if (element.className === 'callout-bg') { - ret = { - type: 'callout-bg', - }; - } else if (element.className === 'draftjs-buttons') { - ret = { - type: 'buttons', - }; - } else if (element.className === 'draftjs-text-larger') { - ret = { - type: 'TEXT_LARGER', - }; - } - } - return ret; -}; - -export default function applyConfig(config) { - config.settings.richtextEditorSettings = (props) => { - const { plugins /*, inlineToolbarButtons*/ } = Plugins(props); // volto plugins - const { extendedBlockRenderMap, blockStyleFn, listBlockTypes } = - Blocks(props); - - const { immutableLib } = props; - const { Map } = immutableLib; - - const blockRenderMap = Map({ - 'align-center': { - element: 'p', - }, - 'align-right': { - element: 'p', - }, - 'align-justify': { - element: 'p', - }, - 'callout-bg': { - element: 'p', - }, - buttons: { - element: 'p', - }, - }); - - const italiaBlockStyleFunction = (contentBlock) => { - const type = contentBlock.getType(); - - let r = blockStyleFn(contentBlock) || ''; - r = r.length > 0 ? ' ' : r; - - const styles = { - 'align-center': 'text-center', - 'align-right': 'text-end', - 'align-justify': 'text-justify', - callout: 'callout', - 'callout-bg': 'callout-bg', - buttons: 'draftjs-buttons', - }; - - r += styles[type] ?? ''; - - return r; - }; - - return { - extendedBlockRenderMap: extendedBlockRenderMap - .update('text-center', (element = 'p') => element) - .merge(blockRenderMap), - voltoBlockStyleFn: blockStyleFn, - blockStyleFn: italiaBlockStyleFunction, - listBlockTypes: listBlockTypes, - richTextEditorPlugins: [ - ...plugins, - ...ItaliaRichTextEditorPlugins(props), - ], - richTextEditorInlineToolbarButtons: - ItaliaRichTextEditorInlineToolbarButtons(props, plugins), //[inlineToolbarButtons,...ItaliaRichTextEditorInlineToolbarButtons(props)] - FromHTMLCustomBlockFn: ItaliaFromHTMLCustomBlockFn, //FromHTMLCustomBlockFn - customStyleMap: { - TEXT_LARGER: { fontSize: '1.75rem' }, - }, - }; - }; - - // TODO: rimuovere questa customizzazione quando sistemano https://github.com/plone/volto/issues/1601 - config.settings.richtextViewSettings.ToHTMLRenderers = { - ...config.settings.richtextViewSettings.ToHTMLRenderers, - entities: { - ...config.settings.richtextViewSettings.ToHTMLRenderers.entities, - LINK: (children, props, other) => { - return ( - - {children} - - ); - }, - }, - blocks: { - ...ToHTMLRenderers.blocks, - ...ItaliaBlocksHtmlRenderers, - }, - inline: { ...ToHTMLRenderers.inline, ...ItaliaInlineHtmlRenderers }, - }; - - return config; -} diff --git a/src/config/Slate/config.js b/src/config/Slate/config.js index 5abb71f72..7af224a5d 100644 --- a/src/config/Slate/config.js +++ b/src/config/Slate/config.js @@ -20,7 +20,6 @@ export default function applyItaliaSlateConfig(config) { installHandlers(config); - //remove callout because there's a Volto's block for it delete config.settings.slate.elements.callout; delete config.settings.slate.buttons.callout; @@ -30,4 +29,5 @@ export default function applyItaliaSlateConfig(config) { config.settings.slate.expandedToolbarButtons = config.settings.slate.toolbarButtons.filter( (b) => b !== 'callout', ); + return config; } diff --git a/src/config/italiaConfig.js b/src/config/italiaConfig.js index 0795e5fba..fd228374b 100644 --- a/src/config/italiaConfig.js +++ b/src/config/italiaConfig.js @@ -57,7 +57,6 @@ import faQuestionSVG from 'design-comuni-plone-theme/icons/question-solid.svg'; import bandoSVG from 'design-comuni-plone-theme/icons/bando.svg'; import logSVG from 'design-comuni-plone-theme/icons/log.svg'; -import applyRichTextConfig from 'design-comuni-plone-theme/config/RichTextEditor/config'; import applyItaliaSlateConfig from 'design-comuni-plone-theme/config/Slate/config'; import gdprPrivacyPanelConfig from 'design-comuni-plone-theme/config/volto-gdpr-privacy-defaultPanelConfig.js'; @@ -71,8 +70,7 @@ const ReleaseLog = loadable(() => ); export default function applyConfig(voltoConfig) { - let config = applyRichTextConfig(voltoConfig); //[ToDO]: da rimuovere in favore di slate? - applyItaliaSlateConfig(config); + let config = applyItaliaSlateConfig(voltoConfig); /****************************************************************************** * SETTINGS diff --git a/src/customizations/volto/config/RichTextEditor/Plugins.jsx b/src/customizations/volto/config/RichTextEditor/Plugins.jsx deleted file mode 100644 index 48ab17cd5..000000000 --- a/src/customizations/volto/config/RichTextEditor/Plugins.jsx +++ /dev/null @@ -1,63 +0,0 @@ -/** - * Customizzato: - * - cambiato l'import di AnchorPlugin per poterlo customizzare - */ -import createLinkPlugin from 'design-comuni-plone-theme/config/RichTextEditor/Plugins/AnchorPlugin'; - -import Styles from '@plone/volto/config/RichTextEditor/Styles'; - -const breakOutOptions = { - doubleBreakoutBlocks: [ - 'unordered-list-item', - 'ordered-list-item', - 'code-block', - ], - breakoutBlocks: [ - 'header-one', - 'header-two', - 'header-three', - 'highlight', - 'blockquote', - 'callout', - ], -}; - -//const linkDetectionPlugin = createLinkDetectionPlugin(); - -const plugins = (props) => { - const { draftJsInlineToolbarPlugin, draftJsBlockBreakoutPlugin } = props; - const { Separator } = draftJsInlineToolbarPlugin; - const blockBreakoutPlugin = - draftJsBlockBreakoutPlugin.default(breakOutOptions); - - const linkPlugin = createLinkPlugin({ libraries: props }); - - const buttons = Styles(props); - const { - BoldButton, - ItalicButton, - HeadlineTwoButton, - HeadlineThreeButton, - UnorderedListButton, - OrderedListButton, - BlockquoteButton, - CalloutButton, - } = buttons; - - const inlineToolbarButtons = [ - BoldButton, - ItalicButton, - linkPlugin.LinkButton, - Separator, - HeadlineTwoButton, - HeadlineThreeButton, - UnorderedListButton, - OrderedListButton, - BlockquoteButton, - CalloutButton, - ]; - - return { inlineToolbarButtons, plugins: [linkPlugin, blockBreakoutPlugin] }; //linkDetectionPlugin -}; - -export default plugins; diff --git a/src/theme/ItaliaTheme/Blocks/_accordion.scss b/src/theme/ItaliaTheme/Blocks/_accordion.scss index 529cce716..2b609c556 100644 --- a/src/theme/ItaliaTheme/Blocks/_accordion.scss +++ b/src/theme/ItaliaTheme/Blocks/_accordion.scss @@ -146,15 +146,5 @@ $accordion-icon-color: #7fb2e5; } } } - - &.is-edit-mode { - .card { - .card-body { - //per mostrare la barra di formattazione di draft-js - padding-left: 10em; - margin-left: -7em; - } - } - } } } diff --git a/src/theme/ItaliaTheme/Blocks/_alert.scss b/src/theme/ItaliaTheme/Blocks/_alert.scss index cd025d0d3..cbb5e7876 100644 --- a/src/theme/ItaliaTheme/Blocks/_alert.scss +++ b/src/theme/ItaliaTheme/Blocks/_alert.scss @@ -34,10 +34,6 @@ $alert-block-warning: #f0c250; background-color: $alert-block-danger; color: $white; - .public-DraftEditorPlaceholder-inner { - color: $white; - } - h1, h2, h3, @@ -56,10 +52,6 @@ $alert-block-warning: #f0c250; background-color: $alert-block-warning-orange; color: $black; - .public-DraftEditorPlaceholder-inner { - color: $black; - } - h1, h2, h3, @@ -78,10 +70,6 @@ $alert-block-warning: #f0c250; background-color: $alert-block-warning; color: $black; - .public-DraftEditorPlaceholder-inner { - color: $black; - } - h1, h2, h3, @@ -106,10 +94,6 @@ $alert-block-warning: #f0c250; } } - .DraftEditor-root { - background: none; - } - p { margin: 0; } diff --git a/src/theme/ItaliaTheme/Blocks/_contacts.scss b/src/theme/ItaliaTheme/Blocks/_contacts.scss index 139b013aa..91ba94fd0 100644 --- a/src/theme/ItaliaTheme/Blocks/_contacts.scss +++ b/src/theme/ItaliaTheme/Blocks/_contacts.scss @@ -54,17 +54,6 @@ font-weight: bold; line-height: 3rem; text-align: center; - - .DraftEditor-root { - .public-DraftEditor-content { - text-align: center; - } - - .public-DraftEditorPlaceholder-root { - width: 100%; - text-align: center; - } - } } .description { @@ -72,17 +61,6 @@ line-height: 1.65em; text-align: center; - - .DraftEditor-root { - .public-DraftEditor-content { - text-align: center; - } - - .public-DraftEditorPlaceholder-root { - width: 100%; - text-align: center; - } - } } } @@ -152,6 +130,8 @@ .icon-wrapper { margin-top: 0.2rem; margin-right: 1rem; + display: flex; + align-items: center; } .tel { @@ -167,10 +147,6 @@ flex: 1 1 auto; word-break: break-word; - .DraftEditor-editorContainer { - line-height: 1.48em; - } - p { line-height: 1.48em; @@ -179,12 +155,6 @@ } } } - - .public-DraftStyleDefault-block { - &:last-of-type { - margin-bottom: 0; - } - } } } diff --git a/src/theme/ItaliaTheme/Blocks/_ctaBlock.scss b/src/theme/ItaliaTheme/Blocks/_ctaBlock.scss index 816df337c..f124511ea 100644 --- a/src/theme/ItaliaTheme/Blocks/_ctaBlock.scss +++ b/src/theme/ItaliaTheme/Blocks/_ctaBlock.scss @@ -55,20 +55,6 @@ } } - /* EDIT */ - .cta_title, - .cta_content { - .public-DraftEditor-content, - .public-DraftStyleDefault-block { - text-align: center; - } - - .public-DraftEditorPlaceholder-root { - width: 100%; - text-align: center; - } - } - &.has-image { position: relative; display: block; diff --git a/src/theme/ItaliaTheme/Blocks/_hero.scss b/src/theme/ItaliaTheme/Blocks/_hero.scss index 1607d6608..2aebcdf06 100644 --- a/src/theme/ItaliaTheme/Blocks/_hero.scss +++ b/src/theme/ItaliaTheme/Blocks/_hero.scss @@ -42,14 +42,6 @@ p { max-height: unset; } - - .edit-title { - .public-DraftEditorPlaceholder-inner { - font-size: $h1-font-size; - font-weight: bold; - line-height: 1.25; - } - } } .stores-buttons { diff --git a/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss b/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss index 8d59db74a..3d520a3f3 100644 --- a/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss +++ b/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss @@ -47,17 +47,6 @@ font-weight: bold; line-height: 3rem; text-align: center; - - .DraftEditor-root { - .public-DraftEditor-content { - text-align: center; - } - - .public-DraftEditorPlaceholder-root { - width: 100%; - text-align: center; - } - } } .description { @@ -75,17 +64,6 @@ a { color: #fff; } - - .DraftEditor-root { - .public-DraftEditor-content { - text-align: center; - } - - .public-DraftEditorPlaceholder-root { - width: 100%; - text-align: center; - } - } } } @@ -178,18 +156,10 @@ font-weight: bold; line-height: 1.8rem; text-align: center; - - .public-DraftEditor-content { - text-align: center; - } } .iconblock-text { text-align: center; - - .public-DraftEditor-content { - text-align: center; - } } a.read-more { diff --git a/src/theme/ItaliaTheme/Blocks/_imageCardTextBlock.scss b/src/theme/ItaliaTheme/Blocks/_imageCardTextBlock.scss index de995516a..80fe35386 100644 --- a/src/theme/ItaliaTheme/Blocks/_imageCardTextBlock.scss +++ b/src/theme/ItaliaTheme/Blocks/_imageCardTextBlock.scss @@ -2,9 +2,10 @@ .card { .card-body { .card-text { - .DraftEditor-root * { + .slate-editor * { + line-height: 1.5em; font-family: 'Lora, Georgia, serif'; - font-size: 0.875rem; + font-size: 1.1rem; } } } diff --git a/src/theme/ItaliaTheme/Blocks/_numbers.scss b/src/theme/ItaliaTheme/Blocks/_numbers.scss index 33bf1df5a..982ab9d38 100644 --- a/src/theme/ItaliaTheme/Blocks/_numbers.scss +++ b/src/theme/ItaliaTheme/Blocks/_numbers.scss @@ -88,11 +88,7 @@ font-weight: 500; line-height: 1em; - .DraftEditor-root - .DraftEditor-editorContainer - .public-DraftEditor-content - span, - .public-DraftEditorPlaceholder-root .public-DraftEditorPlaceholder-inner { + .simple-text-editor-widget { font-family: $font-family-monospace !important; } } diff --git a/src/theme/ItaliaTheme/Blocks/_simpleCardTextBlock.scss b/src/theme/ItaliaTheme/Blocks/_simpleCardTextBlock.scss index d597464f1..85d306acb 100644 --- a/src/theme/ItaliaTheme/Blocks/_simpleCardTextBlock.scss +++ b/src/theme/ItaliaTheme/Blocks/_simpleCardTextBlock.scss @@ -1,10 +1,16 @@ .block.simple-text-block { .card { .card-body { + .card-title { + .simple-text-editor-widget { + font-weight: 600; + } + } .card-text { - .DraftEditor-root * { + .slate-editor * { font-family: 'Lora, Georgia, serif'; - font-size: 0.875rem; + line-height: 1.5em; + font-size: 1.1rem; } } } diff --git a/src/theme/ItaliaTheme/Components/_megamenu.scss b/src/theme/ItaliaTheme/Components/_megamenu.scss index a4da606bc..8c5556c8d 100644 --- a/src/theme/ItaliaTheme/Components/_megamenu.scss +++ b/src/theme/ItaliaTheme/Components/_megamenu.scss @@ -25,10 +25,6 @@ } } - .DraftEditor-root { - padding: 0.5rem 1rem; - } - .category-top { display: flex; flex-wrap: wrap; diff --git a/src/theme/ItaliaTheme/_common.scss b/src/theme/ItaliaTheme/_common.scss index d5c812ef4..b71c7777a 100644 --- a/src/theme/ItaliaTheme/_common.scss +++ b/src/theme/ItaliaTheme/_common.scss @@ -63,8 +63,7 @@ .btn-primary, .btn-secondary, - .btn-tertiary, - .draftjs-buttons { + .btn-tertiary { .external-link { fill: $external-link-fill-buttons !important; } diff --git a/src/theme/ItaliaTheme/_main.scss b/src/theme/ItaliaTheme/_main.scss index 5bb29717d..2125fcac4 100644 --- a/src/theme/ItaliaTheme/_main.scss +++ b/src/theme/ItaliaTheme/_main.scss @@ -103,60 +103,12 @@ iframe { .callout { box-shadow: none; //override pastanaga styles - p, - .public-DraftStyleDefault-block { - &:last-of-type { - margin-bottom: 0; - } - } - } - - .draftjs-text-smaller { - font-size: 0.75em; } - .draftjs-text-larger, .text-larger { //.text-larger: stile applicabile da editor Slate font-size: 1.75em; } - - .draftjs-buttons { - margin: 0; - clear: both; - - a { - display: inline-block; - padding: 1em 2em; - margin: 0.5em 1em 0.5em 0; - background-color: $primary; - border-radius: $btn-border-radius; - color: $primary-text; - font-weight: 700; - text-align: center; - text-decoration: none; - - &:hover, - &:active { - background-color: darken($primary, 8); - color: $primary-text; - font-weight: 700; - } - } - } - - div[class^='draftJsToolbar__toolbar__'] { - line-height: 1rem; - - .icon { - font-size: 1rem; - } - - .ui.input > input { - height: auto; - font-size: 0.8rem; - } - } } //slate LINK diff --git a/src/theme/_cms-ui.scss b/src/theme/_cms-ui.scss index 998a18686..45f8404c7 100644 --- a/src/theme/_cms-ui.scss +++ b/src/theme/_cms-ui.scss @@ -47,21 +47,6 @@ body.cms-ui { @import 'bootstrap-italia/src/scss/custom/type'; //to apply styles for headers on different screen sizes - // Placeholder block title - .title { - .public-DraftEditorPlaceholder-inner { - font-family: $font-family-sans-serif; - } - } - - &.title { - .public-DraftEditorPlaceholder-inner { - font-weight: bold; - line-height: 1.25; - font-size: 2.66rem; - } - } - //align .text-center { text-align: center; @@ -262,14 +247,6 @@ body.cms-ui { } } - .menu-configuration-widget { - .menu-blocks-container { - .DraftEditor-editorContainer .public-DraftEditor-content { - min-height: 19px; - } - } - } - .sidebar-container .object-listing, .icon-align-name { svg.icon { @@ -419,39 +396,6 @@ body.cms-ui { } } - /*.DraftEditor-root { - font-family: $font-family-serif; - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: $font-family-sans-serif; - } - }*/ - - //stili per l'editor di testo dei ct con i campi - .DraftEditor-root { - .public-DraftStyleDefault-block { - margin-bottom: 1rem; - } - - li { - .public-DraftStyleDefault-block { - margin-bottom: unset; - } - } - } - - .block.text { - .DraftEditor-root { - .public-DraftStyleDefault-block { - margin-bottom: unset; - } - } - } - // z-index necessario su Volto 17 finché non passiamo ad usare slate .block { &.image { @@ -473,17 +417,6 @@ body.cms-ui { text-decoration: $link-decoration; } } - .footer-configuration-widget { - .DraftEditor-editorContainer { - a.link-anchorlink-theme { - color: #06c; - - &:hover { - color: darken(#06c, 20); - } - } - } - } &.section-controlpanel { a { @@ -519,10 +452,6 @@ body.cms-ui { .block-editor-title, .block-editor-description { - .DraftEditor-root { - padding: 0 1.333em; - } - & + [class^='block-editor'] { margin-top: 2.8rem; } @@ -544,76 +473,6 @@ body.cms-ui { ///// - .draftJsToolbarDropdown { - position: relative; - - .draftJsToolbarDropdown-toggle { - display: flex; - width: 42px; - align-items: center; - justify-content: space-between; - - .caret { - display: inline-block; - width: 0; - height: 0; - - border: 5px solid transparent; - - &.down { - border-top-color: #888; - margin-top: 5px; - } - - &.up { - border-bottom-color: #888; - margin-bottom: 5px; - } - } - } - - ul.draftJsToolbarDropdown-optionswrapper { - position: absolute; - top: 35px; - left: 50%; - padding: 0; - margin: 0; - background-color: #fff; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05); - list-style-type: none; - transform: translateX(-50%); - - &.hide { - display: none; - } - - .draftJsToolbarDropdown-option { - padding: 0.5rem; - color: $neutral-2-b5; - - svg { - fill: $neutral-2-b5 !important; - } - - > * { - display: block; - } - - button { - width: 100%; - height: auto; - - > * { - margin: 0; - color: $neutral-2-b5; - } - } - } - } - } - .column.color-chooser { padding-top: 0.5em; padding-bottom: 0.5em; diff --git a/src/theme/extras/_forms.scss b/src/theme/extras/_forms.scss index f5083d6ea..093a6fbb2 100644 --- a/src/theme/extras/_forms.scss +++ b/src/theme/extras/_forms.scss @@ -12,7 +12,7 @@ $sidebarFormBg: #fafafa; .ui.input input[type='text'], .ui.input input[type='url'], textarea, - .DraftEditor-root { + .slate-editor { padding-right: 10px; padding-left: 10px; margin-top: 0.5rem; @@ -40,20 +40,8 @@ $sidebarFormBg: #fafafa; padding: 10px; } - .DraftEditor-editorContainer { - .public-DraftEditor-content { - min-height: 60px; - } - } - .blocks-widget-container { - .DraftEditor-editorContainer { - .public-DraftEditor-content { - min-height: unset; - } - } - - .DraftEditor-root { + .slate-editor { border-bottom: none; background-color: transparent; }