design-comuni-plone-theme 11.29.2 → 12.0.0

package/src/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/index.js

@@ -1,150 +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 'design-comuni-plone-theme/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/AddLinkForm';
-
-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) => (
-      <AddLinkForm
-        {...props}
-        placeholder={placeholder}
-        theme={ownTheme}
-        block="draft-js"
-        data={{ url: link, dataElement }}
-        onChangeBlock={() => {}}
-        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 (
-      <div
-        className={theme.buttonWrapper}
-        onMouseDown={this.onMouseDown}
-        role="presentation"
-      >
-        <button
-          className={className}
-          onClick={
-            this.onAddLinkClick
-            // hasLinkSelected
-            //   ? () =>
-            //       onRemoveLinkAtSelection(
-            //         this.props.setEditorState,
-            //         this.props.getEditorState,
-            //       )
-            //   : this.onAddLinkClick
-          }
-          type="button"
-        >
-          {!hasLinkSelected ? (
-            <Icon name={linkSVG} size="24px" />
-          ) : (
-            <Icon name={unlinkSVG} size="24px" />
-          )}
-        </button>
-      </div>
-    );
-  }
-}
-
-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(),
-  );
-}

package/src/config/RichTextEditor/Plugins/AnchorPlugin/index.js

@@ -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())),
-    }),
-  };
-}

package/src/config/RichTextEditor/ToolbarButtons/AlignButton.jsx

@@ -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: <Icon name={alignLeftSVG} size="24px" />,
-      }),
-      contentWhenSelected: <Icon name={alignLeftSVG} size="24px" />,
-    },
-    {
-      block_type: 'align-center',
-      value: createBlockStyleButton({
-        blockType: 'align-center',
-        children: <Icon name={alignCenterSVG} size="24px" />,
-      }),
-      contentWhenSelected: <Icon name={alignCenterSVG} size="24px" />,
-    },
-    {
-      block_type: 'align-right',
-      value: createBlockStyleButton({
-        blockType: 'align-right',
-        children: <Icon name={alignRightSVG} size="24px" />,
-      }),
-      contentWhenSelected: <Icon name={alignRightSVG} size="24px" />,
-    },
-    {
-      block_type: 'align-justify',
-      value: createBlockStyleButton({
-        blockType: 'align-justify',
-        children: <Icon name={alignJustifySVG} size="24px" />,
-      }),
-      contentWhenSelected: <Icon name={alignJustifySVG} size="24px" />,
-    },
-  ];
-
-  return (
-    <DraftJsDropdownButton
-      {...props}
-      optionsList={options}
-      content={<Icon name={alignLeftSVG} size="24px" />}
-    />
-  );
-};
-
-export const AlignButton = injectLazyLibs(['draftJsCreateBlockStyleButton'])(
-  AlignButtonComponent,
-);
-
-export default React.memo(AlignButton);

package/src/config/RichTextEditor/ToolbarButtons/ButtonsButton.jsx

@@ -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: <Icon name={circleMenuSVG} size="24px" />,
-  });
-};
-
-export default ButtonsButton;

package/src/config/RichTextEditor/ToolbarButtons/CalloutsButton.jsx

@@ -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: <FontAwesomeIcon icon={['far', 'square']} />,
-      }),
-    },
-    {
-      block_type: 'callout-bg',
-      value: createBlockStyleButton({
-        blockType: 'callout-bg',
-        children: <FontAwesomeIcon icon={['fas', 'square']} />,
-      }),
-    },
-  ];
-
-  return (_props) => (
-    <DraftJsDropdownButton
-      {..._props}
-      optionsList={options}
-      content={<Icon name={calloutSVG} size="24px" />}
-    />
-  );
-};
-
-export default CalloutsButton;

package/src/config/RichTextEditor/ToolbarButtons/DraftJsDropdownButton.jsx

@@ -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 (
-    <div
-      className={`${theme.buttonWrapper} draftJsToolbarDropdown`}
-      onMouseDown={onMouseDown}
-      role="presentation"
-    >
-      <button
-        className={`${className} draftJsToolbarDropdown-toggle`}
-        onClick={openDropdown}
-        type="button"
-      >
-        {getDropdownToggleContent()}
-        <span className={`caret ${open ? 'up' : 'down'}`}></span>
-      </button>
-
-      <ul
-        className={`draftJsToolbarDropdown-optionswrapper ${
-          open ? '' : 'hide'
-        }`}
-      >
-        {optionsList.map((item) => {
-          let OptionButton = item.value;
-
-          return (
-            <li
-              key={item.block_type}
-              className="draftJsToolbarDropdown-option"
-              onClick={() => {
-                setOpen(false);
-              }}
-            >
-              <OptionButton {...props} />
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-};
-
-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);

package/src/config/RichTextEditor/ToolbarButtons/HeadingsButton.jsx

@@ -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>H2</h2>,
-      }),
-    },
-    {
-      block_type: 'header-three',
-      value: createBlockStyleButton({
-        blockType: 'header-three',
-        children: <h3>h3</h3>,
-      }),
-    },
-    {
-      block_type: 'header-four',
-      value: createBlockStyleButton({
-        blockType: 'header-four',
-        children: <h4>h4</h4>,
-      }),
-    },
-    {
-      block_type: 'header-five',
-      value: createBlockStyleButton({
-        blockType: 'header-five',
-        children: <h5>h5</h5>,
-      }),
-    },
-    {
-      block_type: 'header-six',
-      value: createBlockStyleButton({
-        blockType: 'header-six',
-        children: <h6>h6</h6>,
-      }),
-    },
-  ];
-
-  return (_props) => (
-    <DraftJsDropdownButton
-      {..._props}
-      optionsList={options}
-      content={<Icon name={textSVG} size="24px" />}
-    />
-  );
-};
-
-export default HeadingsButton;

package/src/config/RichTextEditor/ToolbarButtons/TextSizeButton.jsx

@@ -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: <Icon name={formatSVG} size="1.25em" />,
-      }),
-    },
-    {
-      block_type: 'text-smaller',
-      value: createInlineStyleButton({
-        style: 'TEXT_SMALLER',
-        children: <Icon name={formatSVG} size="0.75em" />,
-      }),
-    },
-  ];
-
-  return (_props)=>(
-    <DraftJsDropdownButton
-      {..._props}
-      optionsList={options}
-      content={<Icon name={formatSVG} size="1em" />}
-    />
-  );
-};
-*/
-
-const ButtonIcon = (props) => {
-  const intl = useIntl();
-  return (
-    <Icon
-      name={formatSVG}
-      size="1.25em"
-      title={intl.formatMessage(messages.TextSizeButton)}
-    />
-  );
-};
-
-const TextSizeButton = (props) => {
-  const createInlineStyleButton = props.draftJsCreateInlineStyleButton.default;
-  return createInlineStyleButton({
-    style: 'TEXT_LARGER',
-    children: <ButtonIcon />,
-  });
-};
-export default TextSizeButton;

package/src/config/RichTextEditor/ToolbarButtons/UnderlineButton.jsx

@@ -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: <Icon name={underlineSVG} size="24px" />,
-  });
-};
-
-export default UnderlineButton;