design-comuni-plone-theme 11.29.2 → 12.0.0

package/src/config/Slate/Alignment/AlignMenu.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { useSlate } from 'slate-react';
+import { Dropdown } from 'semantic-ui-react';
+import { useIntl, defineMessages } from 'react-intl';
+import cx from 'classnames';
+import { omit } from 'lodash';
+import {
+  isBlockStyleActive,
+  toggleStyle,
+} from 'design-comuni-plone-theme/config/Slate/dropdownUtils';
+
+import { Icon } from '@plone/volto/components';
+import { ToolbarButton } from '@plone/volto-slate/editor/ui';
+
+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 'design-comuni-plone-theme/config/Slate/dropdownStyle.scss';
+
+const messages = defineMessages({
+  align: {
+    id: 'Allineamento',
+    defaultMessage: 'Allineamento',
+  },
+
+  align_left: {
+    id: 'Allinea a sinistra',
+    defaultMessage: 'Allinea a sinistra',
+  },
+  align_center: {
+    id: 'Allinea al centro',
+    defaultMessage: 'Allinea al centro',
+  },
+  align_right: {
+    id: 'Allinea a destra',
+    defaultMessage: 'Allinea a destra',
+  },
+  align_justify: {
+    id: 'Allinea il testo giustificato',
+    defaultMessage: 'Allinea il testo giustificato',
+  },
+});
+
+const ALIGN_OPTIONS = [
+  {
+    cssClass: 'text-left',
+    title: messages.align_left,
+    icon: alignLeftSVG,
+  },
+  {
+    cssClass: 'text-center',
+    title: messages.align_center,
+    icon: alignCenterSVG,
+  },
+  {
+    cssClass: 'text-end',
+    title: messages.align_right,
+    icon: alignRightSVG,
+  },
+  {
+    cssClass: 'text-justify',
+    title: messages.align_justify,
+    icon: alignJustifySVG,
+  },
+];
+
+const AlignMenuButton = ({ icon, active, ...props }) => {
+  return (
+    <ToolbarButton
+      {...props}
+      icon={icon}
+      active={active}
+      onMouseDown={() => {}}
+    />
+  );
+};
+
+const MenuOpts = ({ editor, toSelect, option, type }) => {
+  const isActive = toSelect.includes(option);
+
+  return (
+    <Dropdown.Item
+      as="span"
+      active={isActive}
+      className={cx(`${type}-${option.value}`, { active: isActive })}
+      {...omit(option, ['isBlock', 'originalIcon'])}
+      data-isblock={option.isBlock}
+      onClick={(event, selItem) => {
+        toggleStyle(editor, {
+          cssClass: selItem.value,
+          isBlock: true,
+          oneOf: ALIGN_OPTIONS.reduce((acc, o) => [...acc, o.cssClass], []),
+        });
+      }}
+    />
+  );
+};
+
+const AlignButton = (props) => {
+  const editor = useSlate();
+  const intl = useIntl();
+
+  const blockOpts = ALIGN_OPTIONS.map((def) => {
+    return {
+      value: def.cssClass,
+      text: def.text,
+      title: intl.formatMessage(def.title),
+      icon: (props) => <Icon name={def.icon} size="24px" />,
+      isBlock: true,
+      originalIcon: def.icon,
+    };
+  });
+
+  // Calculating the initial selection.
+  const toSelect = [];
+  let selectedIcon = ALIGN_OPTIONS[0].icon;
+
+  // block styles
+  for (const val of blockOpts) {
+    const ia = isBlockStyleActive(editor, val.value);
+
+    if (ia) {
+      toSelect.push(val);
+      selectedIcon = val.originalIcon;
+    }
+  }
+
+  const menuItemProps = {
+    toSelect,
+    editor,
+  };
+
+  return (
+    <Dropdown
+      id="align-menu"
+      pointing="top left"
+      multiple
+      value={toSelect}
+      additionLabel={intl.formatMessage(messages.align)}
+      trigger={
+        <AlignMenuButton
+          title={intl.formatMessage(messages.align)}
+          icon={selectedIcon}
+          active={toSelect.length > 0}
+        />
+      }
+      onMouseDown={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+    >
+      <Dropdown.Menu>
+        {blockOpts.length &&
+          blockOpts.map((option, index) => (
+            <MenuOpts
+              {...menuItemProps}
+              type="block-align"
+              option={option}
+              key={index}
+            />
+          ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default AlignButton;

package/src/config/Slate/Alignment/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import AlignMenu from './AlignMenu';
+
+const messages = defineMessages({
+  align: {
+    id: 'Allineamento',
+    defaultMessage: 'Allineamento',
+  },
+});
+
+export const AlignElement = ({ attributes, children, element }) => {
+  return (
+    <p {...attributes} align="test">
+      {children}
+    </p>
+  );
+};
+
+const AlignButton = (props) => {
+  const intl = useIntl();
+  return <AlignMenu {...props} title={intl.formatMessage(messages.align)} />;
+};
+
+export default function install(config) {
+  const { slate } = config.settings;
+
+  slate.buttons.align = AlignButton;
+
+  slate.elements['align'] = AlignElement;
+
+  //lo metto come primo elemento della toolbar
+  slate.toolbarButtons = ['align', 'separator', ...slate.toolbarButtons];
+  slate.expandedToolbarButtons = [
+    'align',
+    'separator',
+    ...slate.expandedToolbarButtons,
+  ];
+
+  //il deserializer html per aggiungere le classi è definito in deserializers.js
+  return config;
+}

package/src/config/Slate/Blockquote/BlockquoteMenu.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { useSlate } from 'slate-react';
+import { Dropdown } from 'semantic-ui-react';
+import { useIntl, defineMessages } from 'react-intl';
+import cx from 'classnames';
+import { omit } from 'lodash';
+import {
+  isBlockStyleActive,
+  toggleStyle,
+} from 'design-comuni-plone-theme/config/Slate/dropdownUtils';
+
+import { Icon } from '@plone/volto/components';
+import { ToolbarButton } from '@plone/volto-slate/editor/ui';
+
+import blockquoteSimpleIcon from 'design-comuni-plone-theme/icons/blockquote-simple.svg';
+import blockquoteCardIcon from 'design-comuni-plone-theme/icons/blockquote-card.svg';
+import blockquoteCardDarkIcon from 'design-comuni-plone-theme/icons/blockquote-card-dark.svg';
+
+import 'design-comuni-plone-theme/config/Slate/dropdownStyle.scss';
+
+const OPTIONS = [
+  {
+    title: 'Blockquote semplice',
+    format: 'blockquote',
+    icon: blockquoteSimpleIcon,
+    cssClass: 'blockquote',
+  },
+  {
+    title: 'Blockquote card',
+    format: 'blockquote',
+    icon: blockquoteCardIcon,
+    cssClass: 'blockquote-card',
+  },
+  {
+    title: 'Blockquote card scuro',
+    format: 'blockquote',
+    icon: blockquoteCardDarkIcon,
+    cssClass: 'blockquote-card dark',
+  },
+];
+
+const messages = defineMessages({
+  blockquote: {
+    id: 'Blockquote',
+    defaultMessage: 'Blockquote',
+  },
+});
+
+const BlockquoteMenuButton = ({ icon, active, ...props }) => (
+  <ToolbarButton {...props} icon={icon} active={active} />
+);
+
+const MenuOpts = ({ editor, toSelect, option, type, ...props }) => {
+  const isActive = toSelect.includes(option);
+
+  return (
+    <Dropdown.Item
+      as="span"
+      active={isActive}
+      className={cx(`${type}-${option.value}`, { active: isActive })}
+      {...omit(option, ['isBlock', 'originalIcon'])}
+      data-isblock={option.isBlock}
+      onClick={(event, selItem) => {
+        toggleStyle(editor, {
+          cssClass: selItem.value,
+          isBlock: true,
+          format: selItem.format,
+          allowedChildren: props.allowedChildren,
+          oneOf: OPTIONS.reduce((acc, o) => [...acc, o.cssClass], []),
+        });
+      }}
+    />
+  );
+};
+
+const BlockquoteButton = (props) => {
+  const editor = useSlate();
+  const intl = useIntl();
+
+  const blockOpts = OPTIONS.map((def) => {
+    return {
+      value: def.cssClass,
+      text: def.text,
+      title: def.title,
+      format: def.format,
+      icon: (props) => <Icon name={def.icon} size="24px" />,
+      isBlock: true,
+      originalIcon: def.icon,
+    };
+  });
+
+  // Calculating the initial selection.
+  const toSelect = [];
+  let selectedIcon = blockquoteCardIcon;
+
+  const oneOf = OPTIONS.reduce((acc, o) => [...acc, o.cssClass], []);
+  // block styles
+  for (const val of blockOpts) {
+    const ia = isBlockStyleActive(editor, val.value, oneOf);
+
+    if (ia) {
+      toSelect.push(val);
+      selectedIcon = val.originalIcon;
+    }
+  }
+
+  const menuItemProps = {
+    toSelect,
+    editor,
+    ...props,
+  };
+
+  const showMenu = blockOpts.length;
+
+  return showMenu ? (
+    <Dropdown
+      id="blockquote-menu"
+      pointing="top left"
+      multiple
+      value={toSelect}
+      additionLabel={intl.formatMessage(messages.blockquote)}
+      trigger={
+        <BlockquoteMenuButton
+          title={intl.formatMessage(messages.blockquote)}
+          icon={selectedIcon}
+          active={toSelect.length > 0}
+        />
+      }
+      onMouseDown={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+    >
+      <Dropdown.Menu>
+        {blockOpts.length &&
+          blockOpts.map((option, index) => (
+            <MenuOpts
+              {...menuItemProps}
+              type="block-blockquote"
+              option={option}
+              key={index}
+            />
+          ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  ) : (
+    ''
+  );
+};
+
+export default BlockquoteButton;

package/src/config/Slate/Blockquote/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import BlockquoteMenu from './BlockquoteMenu';
+
+export default function install(config) {
+  const { slate } = config.settings;
+
+  slate.elements.blockquote = ({ children, attributes, ...otherProps }) => {
+    return (
+      <blockquote {...attributes}>
+        <p>{children}</p>
+      </blockquote>
+    );
+  };
+  slate.buttons.blockquote = (props) => (
+    <BlockquoteMenu {...props} title="Blockquote" />
+  );
+
+  return config;
+}

package/src/config/Slate/Headings/HeadingsMenu.jsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { useSlate } from 'slate-react';
+import { Dropdown } from 'semantic-ui-react';
+import { useIntl, defineMessages } from 'react-intl';
+import cx from 'classnames';
+import { omit } from 'lodash';
+import config from '@plone/volto/registry';
+import { isBlockActive } from '@plone/volto-slate/utils';
+
+import { ToolbarButton, BlockButton } from '@plone/volto-slate/editor/ui';
+
+import headingIcon from '@plone/volto/icons/heading.svg';
+
+import 'design-comuni-plone-theme/config/Slate/dropdownStyle.scss';
+import 'design-comuni-plone-theme/config/Slate/Headings/headingsMenu.scss';
+
+const OPTIONS = [
+  {
+    title: 'h2',
+    format: 'h2',
+    content: 'h2',
+    className: 'headings-h2',
+  },
+  {
+    title: 'h3',
+    format: 'h3',
+    content: 'h3',
+    className: 'headings-h3',
+  },
+  {
+    title: 'h4',
+    format: 'h4',
+    content: 'h4',
+    className: 'headings-h4',
+  },
+  {
+    title: 'h5',
+    format: 'h5',
+    content: 'h5',
+    className: 'headings-h5',
+  },
+  {
+    title: 'h6',
+    format: 'h6',
+    content: 'h6',
+    className: 'headings-h6',
+  },
+];
+
+const messages = defineMessages({
+  title: {
+    id: 'Titolo',
+    defaultMessage: 'Titolo',
+  },
+});
+
+const HeadingsMenuButton = ({ icon, active, ...props }) => (
+  <ToolbarButton {...props} icon={icon} active={active} />
+);
+
+const MenuOpts = ({ editor, toSelect, option, type }) => {
+  const isActive = toSelect.includes(option);
+  return (
+    <Dropdown.Item
+      as="span"
+      active={isActive}
+      className={cx(`${type}-${option.format}`, {
+        active: isActive,
+      })}
+    >
+      <BlockButton
+        {...omit(option, ['isBlock'])}
+        data-isblock={option.isBlock}
+        allowedChildren={config.settings.slate.allowedHeadlineElements}
+      />
+    </Dropdown.Item>
+  );
+};
+
+const HeadingsButton = (props) => {
+  const editor = useSlate();
+  const intl = useIntl();
+
+  // Calculating the initial selection.
+  const toSelect = [];
+
+  // block styles
+  for (const opt of OPTIONS) {
+    const ia = isBlockActive(editor, opt.format);
+
+    if (ia) {
+      toSelect.push(opt);
+    }
+  }
+
+  const menuItemProps = {
+    toSelect,
+    editor,
+  };
+
+  const showMenu = OPTIONS.length;
+
+  return showMenu ? (
+    <Dropdown
+      id="headings-menu"
+      pointing="top left"
+      multiple
+      value={toSelect}
+      additionLabel={intl.formatMessage(messages.title)}
+      trigger={
+        <HeadingsMenuButton
+          title={intl.formatMessage(messages.title)}
+          icon={headingIcon}
+          active={toSelect.length > 0}
+        />
+      }
+      onMouseDown={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+    >
+      <Dropdown.Menu>
+        {OPTIONS.length > 0 &&
+          OPTIONS.map((option, index) => (
+            <MenuOpts
+              {...menuItemProps}
+              type="headings"
+              option={option}
+              key={index}
+            />
+          ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  ) : (
+    ''
+  );
+};
+
+export default HeadingsButton;

package/src/config/Slate/Headings/headingsMenu.scss

@@ -0,0 +1,44 @@
+.slate-toolbar .ui.dropdown#headings-menu .menu {
+  .item {
+    padding: 0 !important;
+    text-align: center;
+    .button-wrapper {
+      margin: 0;
+      .ui.button {
+        border: none;
+        border-radius: 0;
+        padding: 0.78571429rem 1.14285714rem !important;
+
+        &,
+        &.active {
+          background-color: transparent !important;
+          color: rgba(0, 0, 0, 0.6) !important;
+        }
+
+        &.headings-h2 {
+          font-size: 2.222rem;
+          font-family: 'Titillium Web', Geneva, Tahoma, sans-serif;
+        }
+        &.headings-h3 {
+          font-size: 1.777rem;
+          font-family: 'Titillium Web', Geneva, Tahoma, sans-serif;
+        }
+        &.headings-h4 {
+          font-size: 1.555rem;
+          font-weight: 600;
+          font-family: 'Titillium Web', Geneva, Tahoma, sans-serif;
+        }
+        &.headings-h5 {
+          font-size: 1.333rem;
+          font-weight: 400;
+          font-family: 'Titillium Web', Geneva, Tahoma, sans-serif;
+        }
+        &.headings-h6 {
+          font-size: 1rem;
+          font-weight: 600;
+          font-family: 'Titillium Web', Geneva, Tahoma, sans-serif;
+        }
+      }
+    }
+  }
+}

package/src/config/Slate/Headings/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import HeadingsMenu from './HeadingsMenu';
+import { insertToolbarButtons } from 'design-comuni-plone-theme/config/Slate/utils';
+import { renderLinkElement } from '@plone/volto-slate/editor/render';
+
+export default function install(config) {
+  const { slate } = config.settings;
+
+  slate.buttons.headings = (props) => (
+    <HeadingsMenu {...props} title="Titolo" />
+  );
+
+  //sovrascivo gli elements h2,h3,h4 per fare in modo che usino anche le classi di blocco (es allineamento)
+  slate.elements['h2'] = ({ attributes, children }) =>
+    renderLinkElement('h2')({
+      attributes,
+      children,
+      className: attributes.className,
+    });
+  slate.elements['h3'] = ({ attributes, children }) =>
+    renderLinkElement('h3')({
+      attributes,
+      children,
+      className: attributes.className,
+    });
+  slate.elements['h4'] = ({ attributes, children }) =>
+    renderLinkElement('h4')({
+      attributes,
+      children,
+      className: attributes.className,
+    });
+  //aggiungo gli elements h5, h6 perchè non previsti da volto
+  slate.elements['h5'] = ({ attributes, children }) =>
+    renderLinkElement('h5')({
+      attributes,
+      children,
+      className: attributes.className,
+    });
+  slate.elements['h6'] = ({ attributes, children }) =>
+    renderLinkElement('h6')({
+      attributes,
+      children,
+      className: attributes.className,
+    });
+
+  // rimuovo i bottoni di heading di volto
+  slate.toolbarButtons = slate.toolbarButtons.filter(
+    (b) => b !== 'heading-two' && b !== 'heading-three',
+  );
+  slate.expandedToolbarButtons = slate.expandedToolbarButtons.filter(
+    (b) => b !== 'heading-two' && b !== 'heading-three',
+  );
+
+  //aggiungo il bottone di headings alla toolbar, dopo strikethrough
+  insertToolbarButtons(
+    ['separator', 'headings', 'separator'],
+    'strikethrough',
+    slate,
+  );
+
+  return config;
+}

package/src/config/Slate/Link/deserializer.js

@@ -0,0 +1,25 @@
+import { jsx } from 'slate-hyperscript';
+import { deserialize } from '@plone/volto-slate/editor/deserialize';
+import { SIMPLELINK } from '@plone/volto-slate/constants';
+
+export const simpleLinkDeserializer = (editor, el) => {
+  let parent = el;
+
+  let children = Array.from(parent.childNodes)
+    .map((el) => deserialize(editor, el))
+    .flat();
+
+  if (!children.length) children = [{ text: '' }];
+  const attrs = {
+    type: SIMPLELINK,
+    data: {
+      url: el.getAttribute('href'),
+      dataElement: el.getAttribute('data-element'),
+    },
+    styleName: el.getAttribute('class'),
+  };
+
+  return jsx('element', attrs, children);
+};
+
+simpleLinkDeserializer.id = 'simpleLinkDeserializer';