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

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;

package/src/config/RichTextEditor/config.js

@@ -1,253 +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) => (
-            <React.Fragment key={index}>
-              {item}
-              {index !== last && <br />}
-            </React.Fragment>
-          ));
-        } else {
-          return subchildren;
-        }
-      });
-    } else {
-      return subchild;
-    }
-  });
-};
-const ItaliaBlocksHtmlRenderers = {
-  blockquote: (children, { keys }) =>
-    children.map((child, i) => (
-      <blockquote key={keys[i]}>{renderHTMLBlock(child)}</blockquote>
-    )),
-  'align-center': (children, { keys }) =>
-    children.map((child, i) => (
-      <p id={keys[i]} key={keys[i]} className="text-center">
-        {renderHTMLBlock(child)}
-      </p>
-    )),
-  'align-right': (children, { keys }) =>
-    children.map((child, i) => (
-      <p id={keys[i]} key={keys[i]} className="text-end">
-        {renderHTMLBlock(child)}
-      </p>
-    )),
-  'align-justify': (children, { keys }) =>
-    children.map((child, i) => (
-      <p id={keys[i]} key={keys[i]} className="text-justify">
-        {renderHTMLBlock(child)}
-      </p>
-    )),
-  callout: (children, { keys }) =>
-    children.map((child, i) => (
-      <p id={keys[i]} key={keys[i]} className="callout" role="note">
-        {renderHTMLBlock(child)}
-      </p>
-    )),
-  'callout-bg': (children, { keys }) =>
-    children.map((child, i) => (
-      <p id={keys[i]} key={keys[i]} className="callout-bg" role="note">
-        {renderHTMLBlock(child)}
-      </p>
-    )),
-  buttons: (children, { keys }) =>
-    children.map((child, i) => (
-      <p id={keys[i]} key={keys[i]} className="draftjs-buttons">
-        {renderHTMLBlock(child)}
-      </p>
-    )),
-};
-
-const ItaliaInlineHtmlRenderers = {
-  TEXT_LARGER: (children, { key }) => (
-    <span key={key} className="draftjs-text-larger">
-      {children}
-    </span>
-  ),
-};
-
-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 === 'text-center') {
-      ret = {
-        type: 'align-center',
-      };
-    } else if (element.className === 'text-end') {
-      ret = {
-        type: 'align-right',
-      };
-    } else if (element.className === 'text-justify') {
-      ret = {
-        type: 'align-justify',
-      };
-    }
-  }
-  return ret;
-};
-
-const ItaliaFromHTMLCustomInlineFn = (element, { Style }) => {
-  if (element.tagName === 'SPAN') {
-    if (element.className === 'draftjs-text-larger') {
-      return Style('TEXT_LARGER');
-    }
-  }
-};
-
-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: (props) => <p {...props} style={{ textAlign: 'center' }} />,
-      },
-      'align-right': {
-        element: (props) => <p {...props} style={{ textAlign: 'right' }} />,
-      },
-      'align-justify': {
-        element: (props) => <p {...props} style={{ textAlign: 'justify' }} />,
-      },
-      '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 = {
-        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,
-      FromHTMLCustomInlineFn: ItaliaFromHTMLCustomInlineFn,
-      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 (
-          <LinkEntity key={other.key} {...props}>
-            {children}
-          </LinkEntity>
-        );
-      },
-    },
-    blocks: {
-      ...ToHTMLRenderers.blocks,
-      ...ItaliaBlocksHtmlRenderers,
-    },
-    inline: { ...ToHTMLRenderers.inline, ...ItaliaInlineHtmlRenderers },
-  };
-
-  return config;
-}