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

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

@@ -0,0 +1,126 @@
+/*Customized LinkEditor to:
+- handle data-element
+- enhance link (enhanced_link_infos)
+*/
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { ReactEditor } from 'slate-react';
+import { Transforms } from 'slate';
+import {
+  _insertElement,
+  _unwrapElement,
+  _isActiveElement,
+  _getActiveElement,
+} from '@plone/volto-slate/elementEditor/utils';
+import { SIMPLELINK } from '@plone/volto-slate/constants';
+import { useSelectionPosition } from '@plone/volto-slate/hooks';
+import { setPluginOptions } from '@plone/volto-slate/actions';
+import { PositionedToolbar } from '@plone/volto-slate/editor/ui';
+import AddLinkForm from '@plone/volto/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm';
+import { simpleLinkDeserializer } from 'design-comuni-plone-theme/config/Slate/Link/deserializer';
+const LinkEditor = (props) => {
+  const { editor, pluginId, getActiveElement, unwrapElement, insertElement } =
+    props;
+  const pid = `${editor.uid}-${pluginId}`;
+  const showEditor = useSelector((state) => {
+    return state['slate_plugins']?.[pid]?.show_sidebar_editor;
+  });
+  const savedPosition = React.useRef();
+  const rect = useSelectionPosition();
+
+  const dispatch = useDispatch();
+
+  const active = getActiveElement(editor);
+  const [node] = active || [];
+
+  if (showEditor && !savedPosition.current) {
+    savedPosition.current = getPositionStyle(rect);
+  }
+  const dataElement =
+    node?.data?.dataElement || node?.data?.['data-element'] || '';
+
+  return showEditor ? (
+    <PositionedToolbar className="add-link" position={savedPosition.current}>
+      <AddLinkForm
+        block="draft-js"
+        placeholder={'Aggiungi un link'}
+        data={{ url: node?.data?.url || '', dataElement }}
+        theme={{}}
+        onChangeValue={(url, dataElement, item) => {
+          let enhanced_link_infos = null;
+          if (item && item.enhanced_links_enabled) {
+            enhanced_link_infos = {};
+            enhanced_link_infos['content-type'] = item.mime_type;
+            enhanced_link_infos.getObjSize = item.getObjSize;
+          }
+          if (!active) {
+            if (!editor.selection) editor.selection = editor.savedSelection;
+            insertElement(editor, { url, dataElement, enhanced_link_infos });
+          } else {
+            const selection = unwrapElement(editor);
+            editor.selection = selection;
+            insertElement(editor, { url, dataElement, enhanced_link_infos });
+          }
+          // ReactEditor.focus(editor);
+
+          dispatch(setPluginOptions(pid, { show_sidebar_editor: false }));
+          savedPosition.current = null;
+
+          ReactEditor.deselect(editor);
+          Transforms.collapse(editor, { edge: 'end' });
+          Transforms.insertText(editor, ' ');
+        }}
+        onClear={() => {
+          // clear button was pressed in the link edit popup
+          try {
+            const newSelection = JSON.parse(
+              JSON.stringify(unwrapElement(editor)),
+            );
+            editor.selection = newSelection;
+            editor.savedSelection = newSelection;
+          } catch (e) {
+            //do nothing when no link was setted yet, and you clear the select item to link
+          }
+        }}
+        onOverrideContent={(c) => {
+          dispatch(setPluginOptions(pid, { show_sidebar_editor: false }));
+          savedPosition.current = null;
+        }}
+      />
+    </PositionedToolbar>
+  ) : null;
+};
+function getPositionStyle(rect) {
+  return {
+    style: {
+      opacity: 1,
+      top: rect.top + window.pageYOffset - 6,
+      left: rect.left + window.pageXOffset + rect.width / 2,
+    },
+  };
+}
+
+export default function install(config) {
+  const { slate } = config.settings;
+  const PLUGINID = SIMPLELINK;
+  const insertElement = _insertElement(PLUGINID);
+  const getActiveElement = _getActiveElement(PLUGINID);
+  const isActiveElement = _isActiveElement(PLUGINID);
+  const unwrapElement = _unwrapElement(PLUGINID);
+  const pluginOptions = {
+    insertElement,
+    getActiveElement,
+    isActiveElement,
+    unwrapElement,
+  };
+  //remove Volto helper link to add custom helper link
+  slate.persistentHelpers = slate.persistentHelpers.filter(
+    (h) => h().props.pluginId !== 'link',
+  );
+  slate.persistentHelpers.push((props) => (
+    <LinkEditor {...props} pluginId={PLUGINID} {...pluginOptions} />
+  ));
+  slate.htmlTagsToSlate.A = simpleLinkDeserializer;
+
+  return config;
+}

package/src/config/Slate/Link/renderer.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { UniversalLink } from '@plone/volto/components';
+import config from '@plone/volto/registry';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+import { EnhanceLink } from 'design-comuni-plone-theme/helpers';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+
+const ViewLink = ({
+  url,
+  target,
+  download,
+  children,
+  className,
+  dataElement,
+}) => {
+  const { openExternalLinkInNewTab } = config.settings;
+  let dataElementAttr = {};
+  if (dataElement) {
+    dataElementAttr['data-element'] = dataElement;
+  }
+  return (
+    <UniversalLink
+      href={url}
+      openLinkInNewTab={
+        (openExternalLinkInNewTab && !isInternalURL(url)) || target === '_blank'
+      }
+      download={download}
+      className={className}
+      {...dataElementAttr}
+    >
+      {children}
+    </UniversalLink>
+  );
+};
+
+export const LinkElement = (props) => {
+  const { attributes, children, element, mode = 'edit' } = props;
+
+  let dataElementAttr = {};
+  if (element.data.dataElement) {
+    dataElementAttr['data-element'] = element.data.dataElement;
+  }
+
+  let enhanced_link = element.data.enhanced_link_infos
+    ? EnhanceLink({
+        enhanced_link_infos: {
+          ...element.data.enhanced_link_infos, //{mime_type: 'image/png', getObjSize: '1.3 MB'}
+          filename: element.data.url,
+        },
+      })
+    : null;
+
+  const extended_children = enhanced_link?.children ?? <></>;
+
+  return mode === 'view' ? (
+    <ViewLink {...(element.data || {})} {...attributes}>
+      {children}
+      {extended_children}
+    </ViewLink>
+  ) : (
+    <a
+      {...attributes}
+      {...dataElementAttr}
+      className={'slate-editor-link ' + (attributes.className ?? '')}
+      href={
+        isInternalURL(element.data?.url)
+          ? flattenToAppURL(element.data?.url)
+          : element.data?.url
+      }
+      onClick={(e) => e.preventDefault()}
+    >
+      {Array.isArray(children)
+        ? children.map((child, i) => {
+            if (child?.props?.decorations) {
+              const isSelection =
+                child.props.decorations.findIndex((deco) => deco.isSelection) >
+                -1;
+              if (isSelection)
+                return (
+                  <span className="highlight-selection" key={`${i}-sel`}>
+                    {child}
+                  </span>
+                );
+            }
+            return child;
+          })
+        : children}
+      {extended_children}
+      {!isInternalURL(element.data?.url) &&
+        config.settings.siteProperties.markSpecialLinks && (
+          <Icon
+            icon="it-external-link"
+            size="xs"
+            className="ms-1 align-sub external-link"
+          />
+        )}
+    </a>
+  );
+};

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useSlate } from 'slate-react';
+
+import { ToolbarButton } from '@plone/volto-slate/editor/ui';
+
+import circleMenuSVG from '@plone/volto/icons/circle-menu.svg';
+
+import {
+  toggleStyle,
+  isLinkStyleActive,
+} from 'design-comuni-plone-theme/config/Slate/dropdownUtils';
+import { insertToolbarButtons } from 'design-comuni-plone-theme/config/Slate/utils';
+import { LinkElement as ItaliaLinkElement } from 'design-comuni-plone-theme/config/Slate/Link/renderer';
+
+const LinkButtonButton = ({ icon, active, ...props }) => {
+  const CLASSNAME = 'btn btn-primary inline-link';
+  const editor = useSlate();
+  const isActive = isLinkStyleActive(editor, CLASSNAME);
+
+  return (
+    <ToolbarButton
+      {...props}
+      icon={icon}
+      active={isActive}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        toggleStyle(editor, { cssClass: CLASSNAME, isBlock: false });
+      }}
+    />
+  );
+};
+
+export default function install(config) {
+  const { slate } = config.settings;
+
+  slate.buttons.linkButton = (props) => (
+    <LinkButtonButton title="Stile bottone" icon={circleMenuSVG} {...props} />
+  );
+  slate.elements.link = ItaliaLinkElement;
+
+  //aggiungo il bottone di headings alla toolbar, dopo strikethrough
+  insertToolbarButtons(['linkButton'], 'link', slate);
+
+  //htmlTagToSlate deserializer is defined in ./Link/deserializer.js
+  return config;
+}

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useSlate } from 'slate-react';
+
+import { ToolbarButton } from '@plone/volto-slate/editor/ui';
+
+import textLargerSVG from 'design-comuni-plone-theme/icons/text-larger.svg';
+
+import {
+  toggleStyle,
+  isInlineStyleActive,
+} from 'design-comuni-plone-theme/config/Slate/dropdownUtils';
+import { insertToolbarButtons } from 'design-comuni-plone-theme/config/Slate/utils';
+
+export const TextLargerElement = ({ attributes, children, element }) => {
+  return <span {...attributes}>{children}</span>;
+};
+
+const TextLargerButton = ({ icon, active, ...props }) => {
+  const CLASSNAME = 'text-larger';
+  const editor = useSlate();
+  const isActive = isInlineStyleActive(editor, CLASSNAME);
+
+  return (
+    <ToolbarButton
+      {...props}
+      icon={icon}
+      active={isActive}
+      onMouseDown={(event) => {
+        return toggleStyle(editor, { cssClass: CLASSNAME, isBlock: false });
+      }}
+    />
+  );
+};
+
+export default function install(config) {
+  const { slate } = config.settings;
+
+  slate.buttons.textLarger = (props) => (
+    <TextLargerButton
+      title="Testo più grande"
+      icon={textLargerSVG}
+      {...props}
+    />
+  );
+  slate.elements.textLarger = TextLargerElement;
+
+  //aggiungo il bottone di headings alla toolbar, dopo strikethrough
+  insertToolbarButtons(['textLarger'], 'strikethrough', slate);
+
+  return config;
+}

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

@@ -0,0 +1,10 @@
+import { insertToolbarButtons } from 'design-comuni-plone-theme/config/Slate/utils';
+
+export default function install(config) {
+  const { slate } = config.settings;
+
+  //aggiungo il bottone di underline alla toolbar, dopo bold
+  insertToolbarButtons(['underline'], 'italic', slate);
+
+  return config;
+}

package/src/config/Slate/config.js

@@ -0,0 +1,43 @@
+//config.settings.slate.contextToolbarButtons
+import RichTextWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/RichTextWidget';
+import HtmlSlateWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/HtmlSlateWidget';
+import installAlignment from 'design-comuni-plone-theme/config/Slate/Alignment';
+import installHeadings from 'design-comuni-plone-theme/config/Slate/Headings';
+import installUnderline from 'design-comuni-plone-theme/config/Slate/Underline';
+import installBlockquote from 'design-comuni-plone-theme/config/Slate/Blockquote';
+import installLinkButton from 'design-comuni-plone-theme/config/Slate/LinkButton';
+import installTextLarger from 'design-comuni-plone-theme/config/Slate/TextLarger';
+import installLink from 'design-comuni-plone-theme/config/Slate/Link';
+
+import installHandlers from 'design-comuni-plone-theme/config/Slate/handlers';
+import installDeserializers from 'design-comuni-plone-theme/config/Slate/deserializers';
+
+export default function applyItaliaSlateConfig(config) {
+  installAlignment(config);
+  installHeadings(config);
+  installUnderline(config);
+  installTextLarger(config);
+  installLink(config);
+  installBlockquote(config);
+  installLinkButton(config);
+
+  installHandlers(config);
+  installDeserializers(config);
+
+  //remove callout because there's a Volto's block for it
+  delete config.settings.slate.elements.callout;
+  delete config.settings.slate.buttons.callout;
+  config.settings.slate.toolbarButtons = config.settings.slate.toolbarButtons.filter(
+    (b) => b !== 'callout',
+  );
+  config.settings.slate.expandedToolbarButtons = config.settings.slate.toolbarButtons.filter(
+    (b) => b !== 'callout',
+  );
+
+  //add wrapper public-ui to widgets
+  config.widgets.widget.slate = RichTextWidget;
+  config.widgets.widget.slate_richtext = RichTextWidget;
+  config.widgets.widget.slate_html = HtmlSlateWidget;
+  config.widgets.widget.richtext = HtmlSlateWidget;
+  return config;
+}

package/src/config/Slate/deserializers.js

@@ -0,0 +1,66 @@
+import { jsx } from 'slate-hyperscript';
+import { deserializeChildren } from '@plone/volto-slate/editor/deserialize';
+import { TD, TH } from '@plone/volto-slate/constants';
+
+/*rispetto a quello di volto-slate:
+- aggiunge anche la classe (styleName) se era stata impostata
+*/
+export const blockTagDeserializer = (tagname) => (editor, el, options) => {
+  // if (tagname === 'h2') debugger;
+  let children = deserializeChildren(el, editor, options).filter(
+    (n) => n !== null,
+  );
+
+  if (
+    [TD, TH].includes(tagname) &&
+    children.length > 0 &&
+    typeof children[0] === 'string'
+  ) {
+    // TODO: should here be handled the cases when there are more strings in
+    // `children` or when there are besides strings other types of nodes too?
+    const p = { type: 'div', children: [{ text: '' }] };
+    p.children[0].text = children[0];
+    children = [p];
+  }
+
+  // normalizes block elements so that they're never empty
+  // Avoids a hard crash from the Slate editor
+  const hasValidChildren = children.length && children.find((c) => !!c);
+  if (!hasValidChildren) {
+    children = [{ text: '' }];
+  }
+
+  return jsx(
+    'element',
+    { type: tagname, styleName: el.getAttribute('class') },
+    children,
+  );
+};
+
+/*rispetto a quello di volto-slate:
+- se il tag body contiene direttamente dei children <li> allora crea un <ul> wrapper
+*/
+export const bodyTagDeserializer = () => (editor, el, options) => {
+  if (
+    el?.firstElementChild?.nodeName === 'LI' &&
+    el?.lastElementChild?.nodeName === 'LI'
+  ) {
+    return jsx(
+      'element',
+      { type: 'ul' },
+      deserializeChildren(el, editor, options),
+    );
+  }
+  return jsx('fragment', {}, deserializeChildren(el, editor, options));
+};
+
+export default function install(config) {
+  config.settings.slate.htmlTagsToSlate.BODY = bodyTagDeserializer();
+  config.settings.slate.htmlTagsToSlate.P = blockTagDeserializer('p');
+  config.settings.slate.htmlTagsToSlate.OL = blockTagDeserializer('ol');
+  config.settings.slate.htmlTagsToSlate.UL = blockTagDeserializer('ul');
+  config.settings.slate.htmlTagsToSlate.BLOCKQUOTE =
+    blockTagDeserializer('blockquote');
+
+  //A (link) deserializer is defined in ./Link/deserializer.js
+}

package/src/config/Slate/dropdownStyle.scss

@@ -0,0 +1,14 @@
+.cms-ui .slate-inline-toolbar {
+  .ui.buttons {
+    flex-wrap: wrap;
+  }
+  .ui.dropdown .menu > .item {
+    &.active {
+      color: #007eb1;
+      background-color: lighten(#007eb1, 60);
+    }
+    > .icon {
+      margin-right: 0;
+    }
+  }
+}