design-comuni-plone-theme 11.10.2 → 12.0.0-alpha.1

package/src/config/RichTextEditor/Plugins/AnchorPlugin/components/LinkButton/AddLinkForm.jsx

@@ -1,349 +0,0 @@
-/**
- * Add link form.
- * @module components/manage/AnchorPlugin/components/LinkButton/AddLinkForm
- * Customizzato
- * - Aggiunta gestione data-element
- * - Aggiunte opzioni per la select del data-element
- * - Modificate icone ed elementi per stilizzare il tooltip del link
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { compose } from 'redux';
-
-import cx from 'classnames';
-import {
-  addAppURL,
-  isInternalURL,
-  flattenToAppURL,
-  URLUtils,
-} from '@plone/volto/helpers';
-
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-import { Input, Form, Button } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import clearSVG from '@plone/volto/icons/clear.svg';
-import navTreeSVG from '@plone/volto/icons/nav.svg';
-import aheadSVG from '@plone/volto/icons/ahead.svg';
-
-import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
-import { withRouter } from 'react-router';
-
-import { Icon, SelectWidget } from '@plone/volto/components';
-
-const messages = defineMessages({
-  placeholder: {
-    id: 'Enter URL or select an item',
-    defaultMessage: 'Enter URL or select an item',
-  },
-  placeholderLighthouse: {
-    id: 'Select a data-element ID',
-    defaultMessage: 'Seleziona un data-element ID', // TO DO: da sistemare quando si risolve il bug su i18n
-  },
-});
-
-/**
- * Add link form class.
- * @class AddLinkForm
- * @extends Component
- */
-class AddLinkForm extends Component {
-  static propTypes = {
-    onChangeValue: PropTypes.func.isRequired,
-    onClear: PropTypes.func.isRequired,
-    onOverrideContent: PropTypes.func.isRequired,
-    theme: PropTypes.objectOf(PropTypes.any).isRequired,
-    openObjectBrowser: PropTypes.func.isRequired,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs AddLinkForm
-   */
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      dataElement: props.data.dataElement,
-      value: isInternalURL(props.data.url)
-        ? flattenToAppURL(props.data.url)
-        : props.data.url || '',
-      isInvalid: false,
-    };
-    this.onRef = this.onRef.bind(this);
-    this.onChange = this.onChange.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
-
-    // Options to data-element select
-    this.selectOptions = [
-      ['appointment-booking', 'appointment-booking'],
-      ['service-booking-access', 'service-booking-access'],
-      ['faq', 'faq'],
-      ['report-inefficiency', 'report-inefficiency'],
-      ['accessibility-link', 'accessibility-link'],
-      ['privacy-policy-link', 'privacy-policy-link'],
-      ['legal-notes', 'legal-notes'],
-      ['pager-link', 'pager-link'],
-    ];
-  }
-
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    setTimeout(() => this.input.focus(), 50);
-    document.addEventListener('mousedown', this.handleClickOutside, false);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClickOutside, false);
-  }
-
-  handleClickOutside = (e) => {
-    if (
-      this.linkFormContainer.current &&
-      doesNodeContainClick(this.linkFormContainer.current, e)
-    )
-      return;
-    if (this.linkFormContainer.current && this.props.isObjectBrowserOpen)
-      return;
-    this.onClose();
-  };
-
-  /**
-   * Ref handler
-   * @method onRef
-   * @param {Object} node Node
-   * @returns {undefined}
-   */
-  onRef(node) {
-    this.input = node;
-  }
-
-  linkFormContainer = React.createRef();
-
-  /**
-   * Change handler
-   * @method onChange
-   * @param {Object} value Value
-   * @returns {undefined}
-   */
-  onChange(value, clear) {
-    let nextState = { value };
-    if (!clear) {
-      if (
-        this.state.isInvalid &&
-        URLUtils.isUrl(URLUtils.normalizeUrl(value))
-      ) {
-        nextState.isInvalid = false;
-      }
-
-      if (isInternalURL(value)) {
-        nextState = { value: flattenToAppURL(value) };
-      }
-    }
-    this.setState(nextState);
-
-    if (clear) this.props.onClear();
-  }
-
-  /**
-   * Select item handler
-   * @method onSelectItem
-   * @param {string} e event
-   * @param {string} url Url
-   * @returns {undefined}
-   */
-  onSelectItem = (e, url) => {
-    e.preventDefault();
-    this.setState({
-      value: url,
-      isInvalid: false,
-    });
-    this.props.onChangeValue(addAppURL(url));
-  };
-
-  /**
-   * Clear handler
-   * @method clear
-   * @param {Object} value Value
-   * @returns {undefined}
-   */
-  clear() {
-    const nextState = { value: '' };
-    this.setState(nextState);
-
-    this.props.onClear();
-  }
-
-  /**
-   * Close handler
-   * @method onClose
-   * @returns {undefined}
-   */
-  onClose = () => this.props.onOverrideContent(undefined);
-
-  /**
-   * Keydown handler
-   * @method onKeyDown
-   * @param {Object} e Event object
-   * @returns {undefined}
-   */
-  onKeyDown(e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      this.onSubmit();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      this.onClose();
-    }
-  }
-
-  /**
-   * Submit handler
-   * @method onSubmit
-   * @returns {undefined}
-   */
-  onSubmit() {
-    let { value: url, dataElement } = this.state;
-
-    const checkedURL = URLUtils.checkAndNormalizeUrl(url);
-    url = checkedURL.url;
-    if (!checkedURL.isValid) {
-      this.setState({ isInvalid: true });
-      return;
-    }
-
-    const editorStateUrl = isInternalURL(url) ? addAppURL(url) : url;
-
-    this.props.onChangeValue(editorStateUrl, dataElement);
-    this.onClose();
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { value, isInvalid, dataElement } = this.state;
-    const className = isInvalid
-      ? cx(
-          'ui input editor-link',
-          'input-anchorlink-theme',
-          'input-anchorlink-theme-Invalid',
-        )
-      : cx('ui input editor-link', 'input-anchorlink-theme');
-
-    return (
-      <div className="link-form-container" ref={this.linkFormContainer}>
-        <Form.Field>
-          <div className="wrapper-fields">
-            {/* INPUT LINK */}
-            <div className="wrap-field">
-              <Input
-                className={className}
-                id={`field-link`}
-                name="link"
-                value={value || ''}
-                onChange={({ target }) => this.onChange(target.value)}
-                placeholder={this.props.intl.formatMessage(
-                  messages.placeholder,
-                )}
-                onKeyDown={this.onKeyDown}
-                ref={this.onRef}
-              />
-              {value.length > 0 ? (
-                <Button.Group>
-                  <Button
-                    basic
-                    className="cancel"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      this.clear();
-                    }}
-                  >
-                    <Icon name={clearSVG} size="20px" />
-                  </Button>
-                </Button.Group>
-              ) : (
-                <Button.Group>
-                  <Button
-                    basic
-                    icon
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      this.props.openObjectBrowser({
-                        mode: 'link',
-                        overlay: true,
-                        onSelectItem: (url) => {
-                          this.onChange(url);
-                          this.onSubmit();
-                        },
-                      });
-                    }}
-                  >
-                    <Icon name={navTreeSVG} size="22px" />
-                  </Button>
-                </Button.Group>
-              )}
-            </div>
-
-            {/* DATA-ELEMENT SELECT */}
-            <div className="wrap-field">
-              <SelectWidget
-                id="data-element-select"
-                title="data-element"
-                placeholder={this.props.intl.formatMessage(
-                  messages.placeholderLighthouse,
-                )}
-                isMulti={false}
-                value={dataElement}
-                onChange={(_, value) => {
-                  this.setState({ dataElement: value });
-                }}
-                choices={this.selectOptions}
-                noValueOption={false}
-                wrapped={false}
-              />
-            </div>
-          </div>
-
-          {/* BUTTON SUBMIT */}
-          <div className="wrapper-submit">
-            <Button.Group>
-              <Button
-                basic
-                primary
-                disabled={!value.length > 0}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  this.onSubmit();
-                }}
-                onKeyDown={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  this.onSubmit();
-                }}
-              >
-                <Icon name={aheadSVG} size="28px" />
-              </Button>
-            </Button.Group>
-          </div>
-        </Form.Field>
-      </div>
-    );
-  }
-}
-
-export default compose(injectIntl, withRouter, withObjectBrowser)(AddLinkForm);

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;