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

package/src/theme/_cms-ui.scss

@@ -1,8 +1,17 @@
 @import 'cms-ui_container';
 
 body.cms-ui {
+  font-size: 16px;
+  line-height: 1.5;
+
+  @include media-breakpoint-up(sm) {
+    font-size: 18px;
+    line-height: 1.555;
+  }
   .block {
-    font-family: $font-family-serif;
+    font-family: $font-family-sans-serif;
+    font-weight: $font-weight-base;
+    line-height: $line-height-base;
 
     %heading {
       margin-top: 0; /* 1*/
@@ -48,21 +57,6 @@ body.cms-ui {
 
     @import 'bootstrap-italia/src/scss/custom/type'; //to apply styles for headers on different screen sizes
 
-    // Placeholder block title
-    .title {
-      .public-DraftEditorPlaceholder-inner {
-        font-family: $font-family-sans-serif;
-      }
-    }
-
-    &.title {
-      .public-DraftEditorPlaceholder-inner {
-        font-size: 2.66rem;
-        font-weight: bold;
-        line-height: 1.25;
-      }
-    }
-
     //align
     .text-center {
       text-align: center;
@@ -85,15 +79,33 @@ body.cms-ui {
   &.contenttype-argomento,
   &.contenttype-pagina-argomento,
   &.contenttype-cartellamodulistica {
-    &:not(.section-add) {
-      .block {
-        font-family: $font-family-sans-serif;
-        font-weight: 300;
-        line-height: 1.555;
+    .block {
+      font-family: $font-family-sans-serif;
+      font-weight: 300;
+      line-height: 1.555;
+    }
+  }
+
+  .simple-text-editor-widget {
+    .simple-text-input {
+      min-width: 1px;
+      display: inline-block;
+      &:empty:before {
+        content: attr(placeholder);
+        pointer-events: none;
+        display: block; /* For Firefox */
+        font-weight: inherit;
+        opacity: 0.333;
       }
     }
   }
 
+  .detached-slate-editor {
+    p:not(:last-child) {
+      margin-bottom: 1rem !important;
+    }
+  }
+
   .it-header-wrapper,
   .public-ui {
     font-size: 18px;
@@ -148,6 +160,8 @@ body.cms-ui {
         height: auto;
         color: #444;
         font-weight: normal;
+        height: auto;
+        font-size: 0.7rem;
       }
 
       #field-data-element-select {
@@ -252,14 +266,6 @@ body.cms-ui {
     }
   }
 
-  .menu-configuration-widget {
-    .menu-blocks-container {
-      .DraftEditor-editorContainer .public-DraftEditor-content {
-        min-height: 19px;
-      }
-    }
-  }
-
   .sidebar-container .object-listing,
   .icon-align-name {
     svg.icon {
@@ -381,21 +387,33 @@ body.cms-ui {
     .button.tertiary.active {
       background-color: $tertiary;
     }
-
-    // Alert block
-    .button.info,
-    .button.info.active {
-      background-color: $alert-info;
+    .button.success,
+    .button.success.active {
+      background-color: $success;
     }
 
     .button.warning,
-    .button.warning.active {
-      background-color: $alert-warning;
+    .button.success.warning {
+      background-color: $warning;
     }
 
     .button.danger,
     .button.danger.active {
-      background-color: $alert-danger;
+      background-color: $danger;
+    }
+
+    .button.callout_default,
+    .button.callout_default.active {
+      background-color: $secondary;
+    }
+    .button.callout_note,
+    .button.callout_note.active {
+      background-color: $primary;
+    }
+
+    .button.info,
+    .button.info.active {
+      background-color: $info;
     }
   }
 
@@ -411,48 +429,16 @@ body.cms-ui {
     }
   }
 
-  /*.DraftEditor-root {
-    font-family: $font-family-serif;
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-family: $font-family-sans-serif;
-    }
-  }*/
-
-  //stili per l'editor di testo dei ct con i campi
-  .DraftEditor-root {
-    .public-DraftStyleDefault-block {
-      margin-bottom: 1rem;
-    }
-
-    li {
-      .public-DraftStyleDefault-block {
-        margin-bottom: unset;
-      }
-    }
-  }
-
-  .block.text {
-    .DraftEditor-root {
-      .public-DraftStyleDefault-block {
-        margin-bottom: unset;
+  .field-wrapper-icon {
+    .icon-container.italia-icon {
+      svg.icon {
+        height: 1.5em;
       }
     }
   }
 
   // z-index necessario su Volto 17 finché non passiamo ad usare slate
   .block {
-    .DraftEditor-root {
-      .DraftEditor-editorContainer,
-      .public-DraftEditorPlaceholder-root {
-        z-index: 0;
-      }
-    }
-
     &.image {
       .block.align {
         &.left,
@@ -473,18 +459,6 @@ body.cms-ui {
     }
   }
 
-  .footer-configuration-widget {
-    .DraftEditor-editorContainer {
-      a.link-anchorlink-theme {
-        color: #06c;
-
-        &:hover {
-          color: darken(#06c, 20);
-        }
-      }
-    }
-  }
-
   &.section-controlpanel {
     a {
       text-decoration: none;
@@ -519,10 +493,6 @@ body.cms-ui {
 
   .block-editor-title,
   .block-editor-description {
-    .DraftEditor-root {
-      padding: 0 1.333em;
-    }
-
     & + [class^='block-editor'] {
       margin-top: 2.8rem;
     }
@@ -544,78 +514,6 @@ body.cms-ui {
 
   /////
 
-  .draftJsToolbarDropdown {
-    position: relative;
-
-    .draftJsToolbarDropdown-toggle {
-      display: flex;
-      width: 42px;
-      align-items: center;
-      justify-content: space-between;
-
-      .caret {
-        display: inline-block;
-        width: 0;
-        height: 0;
-
-        border: 5px solid transparent;
-
-        &.down {
-          border-top-color: #888;
-          margin-top: 5px;
-        }
-
-        &.up {
-          border-bottom-color: #888;
-          margin-bottom: 5px;
-        }
-      }
-    }
-
-    ul.draftJsToolbarDropdown-optionswrapper {
-      position: absolute;
-      top: 35px;
-      left: 50%;
-      padding: 0;
-      margin: 0;
-      background-color: #fff;
-      border-bottom-left-radius: 3px;
-      border-bottom-right-radius: 3px;
-      box-shadow:
-        0 0 8px rgba(0, 0, 0, 0.1),
-        0 2px 4px rgba(0, 0, 0, 0.05);
-      list-style-type: none;
-      transform: translateX(-50%);
-
-      &.hide {
-        display: none;
-      }
-
-      .draftJsToolbarDropdown-option {
-        padding: 0.5rem;
-        color: $neutral-2-b5;
-
-        svg {
-          fill: $neutral-2-b5 !important;
-        }
-
-        > * {
-          display: block;
-        }
-
-        button {
-          width: 100%;
-          height: auto;
-
-          > * {
-            margin: 0;
-            color: $neutral-2-b5;
-          }
-        }
-      }
-    }
-  }
-
   .column.color-chooser {
     padding-top: 0.5em;
     padding-bottom: 0.5em;

package/src/theme/extras/_forms.scss

@@ -12,7 +12,7 @@ $sidebarFormBg: #fafafa;
     .ui.input input[type='text'],
     .ui.input input[type='url'],
     textarea,
-    .DraftEditor-root {
+    .slate-editor {
       padding-right: 10px;
       padding-left: 10px;
       margin-top: 0.5rem;
@@ -40,20 +40,8 @@ $sidebarFormBg: #fafafa;
       padding: 10px;
     }
 
-    .DraftEditor-editorContainer {
-      .public-DraftEditor-content {
-        min-height: 60px;
-      }
-    }
-
     .blocks-widget-container {
-      .DraftEditor-editorContainer {
-        .public-DraftEditor-content {
-          min-height: unset;
-        }
-      }
-
-      .DraftEditor-root {
+      .slate-editor {
         border-bottom: none;
         background-color: transparent;
       }

package/src/theme/site.scss

@@ -90,6 +90,7 @@
 @import 'ItaliaTheme/Blocks/simpleCardTemplate';
 @import 'ItaliaTheme/Blocks/search';
 @import 'ItaliaTheme/Blocks/gridBlock';
+@import 'ItaliaTheme/Blocks/callout';
 
 @import 'ItaliaTheme/Views/uo';
 @import 'ItaliaTheme/Views/evento';

package/test-setup-config.js

@@ -10,6 +10,30 @@
 import '@plone/volto/config';
 import config from '@plone/volto/registry';
 import applyItaliaConfig from './src';
+import TextBlockView from '@plone/volto-slate/blocks/Text/TextBlockView';
+import TextBlockEdit from '@plone/volto-slate/blocks/Text/TextBlockEdit';
+import TextBlockSchema from '@plone/volto-slate/blocks/Text/TextBlockSchema';
+
+//slate config need to exists for italiaConfig
+config.set('settings', {
+  ...config.settings,
+  slate: {
+    elements: {
+      default: ({ attributes, children }) => <p {...attributes}>{children}</p>,
+    },
+    leafs: {},
+    persistentHelpers: [],
+    contextToolbarButtons: [],
+    textblockExtensions: [],
+    extensions: [],
+    elementToolbarButtons: {},
+    buttons: {},
+    toolbarButtons: [],
+    expandedToolbarButtons: [],
+    htmlTagsToSlate: {},
+    topLevelTargetElements: [],
+  },
+});
 
 applyItaliaConfig(config);
 
@@ -83,3 +107,37 @@ config.set('experimental', {
     enabled: false,
   },
 });
+
+const slateBlockConfig = {
+  id: 'slate',
+  view: TextBlockView,
+  edit: TextBlockEdit,
+  schema: TextBlockSchema,
+  blockHasValue: (data) => {
+    // TODO: this should be handled better
+    return data && !!data.plaintext?.trim();
+  },
+  tocEntry: (block = {}) => {
+    const { value, override_toc, entry_text, level, plaintext } = block;
+    const type = value?.[0]?.type;
+    return override_toc && level
+      ? [parseInt(level.slice(1)), entry_text]
+      : config.settings.slate.topLevelTargetElements.includes(type)
+      ? [parseInt(type.slice(1)), plaintext]
+      : null;
+  },
+};
+config.set('blocks', {
+  ...config.blocks,
+  blocksConfig: {
+    ...(config.blocks.blocksConfig ?? {}),
+    slate: slateBlockConfig,
+    gridBlock: {
+      ...(config.blocks.blocksConfig?.gridBlock ?? {}),
+      blocksConfig: {
+        ...(config.blocks.blocksConfig?.gridBlock?.blocksConfig ?? {}),
+        slate: slateBlockConfig,
+      },
+    },
+  },
+});

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Block.jsx

@@ -1,151 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useEffect } from 'react';
-import { Card, CardBody, CardTitle } from 'design-react-kit';
-import { defineMessages, useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import redraft from 'redraft';
-import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { Divider } from 'semantic-ui-react';
-import cx from 'classnames';
-import config from '@plone/volto/registry';
-
-const messages = defineMessages({
-  simple_card_title: {
-    id: 'Type the title…',
-    defaultMessage: 'Type the title…',
-  },
-  simple_card_content: {
-    id: 'Type description…',
-    defaultMessage: 'Digita la descrizione…',
-  },
-  simple_card_click: {
-    id: 'Type text…',
-    defaultMessage: 'Digita il testo…',
-  },
-});
-
-const Block = ({
-  inEditMode,
-  data,
-  block,
-  onChange,
-  onSelectBlock,
-  onAddBlock,
-  onFocusPreviousBlock,
-  onFocusNextBlock,
-  index,
-  selected,
-}) => {
-  const intl = useIntl();
-  const title = data?.simple_card_title?.blocks[0]?.text;
-  const content = data?.simple_card_content;
-  const [selectedField, setSelectedField] = useState('title');
-
-  useEffect(() => {
-    if (selected) {
-      setSelectedField('title');
-    } else {
-      setSelectedField(null);
-    }
-  }, [selected]);
-
-  return (
-    <div className="simple-text-card-wrapper">
-      <Card color="white" className="no-after card-bg rounded" space tag="div">
-        <CardBody>
-          <div className={cx('simple-text-card', { 'cms-ui': inEditMode })}>
-            {inEditMode ? (
-              <>
-                <CardTitle tag="h3" className="h4">
-                  <div
-                    onClick={() => {
-                      setSelectedField('title');
-                    }}
-                    onFocus={() => {
-                      setSelectedField('title');
-                    }}
-                  >
-                    <TextEditorWidget
-                      data={data}
-                      fieldName="simple_card_title"
-                      selected={selectedField === 'title'}
-                      block={block}
-                      onChangeBlock={(data) =>
-                        onChange(data, 'simple_card_title')
-                      }
-                      placeholder={intl.formatMessage(
-                        messages.simple_card_title,
-                      )}
-                      showToolbar={false}
-                      onSelectBlock={() => {}}
-                      onAddBlock={() => {
-                        setSelectedField('content');
-                      }}
-                      onFocusNextBlock={() => {
-                        setSelectedField('content');
-                      }}
-                      onFocusPreviousBlock={onFocusPreviousBlock}
-                    />
-                  </div>
-                </CardTitle>
-                <Divider />
-                <div
-                  onClick={() => {
-                    setSelectedField('content');
-                  }}
-                  onFocus={() => {
-                    setSelectedField('content');
-                  }}
-                >
-                  <TextEditorWidget
-                    data={data}
-                    fieldName="simple_card_content"
-                    selected={selectedField === 'content'}
-                    block={block}
-                    onChangeBlock={(data) =>
-                      onChange(data, 'simple_card_content')
-                    }
-                    placeholder={intl.formatMessage(
-                      messages.simple_card_content,
-                    )}
-                    showToolbar={true}
-                    onSelectBlock={onSelectBlock}
-                    onAddBlock={onAddBlock}
-                    index={index}
-                    onFocusNextBlock={onFocusNextBlock}
-                    onFocusPreviousBlock={() => {
-                      setSelectedField('title');
-                    }}
-                  />
-                </div>
-              </>
-            ) : (
-              <>
-                <CardTitle tag="h3" id={block.id + '-title'} className="h4">
-                  {title}
-                </CardTitle>
-                <hr />
-                {redraft(
-                  content,
-                  config.settings.richtextViewSettings.ToHTMLRenderers,
-                  config.settings.richtextViewSettings.ToHTMLOptions,
-                )}
-              </>
-            )}
-          </div>
-        </CardBody>
-      </Card>
-    </div>
-  );
-};
-
-Block.propTypes = {
-  entityMap: PropTypes.any,
-  data: PropTypes.any,
-  block: PropTypes.any,
-  inEditMode: PropTypes.bool.isRequired,
-  onChange: PropTypes.func,
-};
-
-export default Block;

package/src/config/RichTextEditor/LinkEntity.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
-import { IntlProvider } from 'react-intl';
-
-const LinkEntity = connect((state) => ({
-  token: state.userSession.token,
-}))((props) => {
-  const { token, url, target, targetUrl, download, children, dataElement } =
-    props;
-  const to = token ? url : targetUrl || url;
-
-  return (
-    <IntlProvider>
-      <UniversalLink
-        href={to}
-        openLinkInNewTab={target === '_blank' || undefined}
-        download={download}
-        data-element={dataElement || props['data-element'] || null}
-      >
-        {children}
-      </UniversalLink>
-    </IntlProvider>
-  );
-});
-
-export default LinkEntity;

package/src/config/RichTextEditor/Plugins/AnchorPlugin/components/Link/index.jsx

@@ -1,44 +0,0 @@
-/**
- * Questo è il link quando viene mostrato dentro l'editor nelle viste di edit
- * Customizzato
- * - aggiunto data-element
- * - aggiunto icona link esterno
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-
-const propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  entityKey: PropTypes.string,
-  getEditorState: PropTypes.func.isRequired,
-  target: PropTypes.string,
-};
-
-const Link = ({ children, className, entityKey, getEditorState, target }) => {
-  const entity = getEditorState().getCurrentContent().getEntity(entityKey);
-  const entityData = entity ? entity.get('data') : undefined;
-  const href = (entityData && entityData.url) || undefined;
-
-  return (
-    <a
-      className={className}
-      title={href}
-      href={isInternalURL(href) ? flattenToAppURL(href) : href}
-      target={target}
-      rel="noopener noreferrer"
-      data-element={entityData.dataElement || entityData['data-element']}
-    >
-      {children}
-    </a>
-  );
-};
-
-Link.propTypes = propTypes;
-Link.defaultProps = {
-  className: null,
-  entityKey: null,
-  target: null,
-};
-export default Link;