@plone/volto 17.0.0-alpha.8 → 17.0.0

package/packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx

@@ -6,13 +6,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { map, remove } from 'lodash';
-import { Button, Segment, Table, Form } from 'semantic-ui-react';
-import { Portal } from 'react-portal';
+import { Button, Table } from 'semantic-ui-react';
 import cx from 'classnames';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
 
 import Cell from './Cell';
-import { Field, Icon } from '@plone/volto/components';
+import { BlockDataForm, Icon, SidebarPortal } from '@plone/volto/components';
+import TableSchema from './schema';
 
 import rowBeforeSVG from '@plone/volto/icons/row-before.svg';
 import rowAfterSVG from '@plone/volto/icons/row-after.svg';
@@ -130,42 +130,6 @@ const messages = defineMessages({
     id: 'Delete col',
     defaultMessage: 'Delete col',
   },
-  hideHeaders: {
-    id: 'Hide headers',
-    defaultMessage: 'Hide headers',
-  },
-  sortable: {
-    id: 'Make the table sortable',
-    defaultMessage: 'Make the table sortable',
-  },
-  sortableDescription: {
-    id: 'Visible only in view mode',
-    defaultMessage: 'Visible only in view mode',
-  },
-  fixed: {
-    id: 'Fixed width table cells',
-    defaultMessage: 'Fixed width table cells',
-  },
-  compact: {
-    id: 'Make the table compact',
-    defaultMessage: 'Make the table compact',
-  },
-  basic: {
-    id: 'Reduce complexity',
-    defaultMessage: 'Reduce complexity',
-  },
-  celled: {
-    id: 'Divide each row into separate cells',
-    defaultMessage: 'Divide each row into separate cells',
-  },
-  inverted: {
-    id: 'Table color inverted',
-    defaultMessage: 'Table color inverted',
-  },
-  striped: {
-    id: 'Stripe alternate rows with color',
-    defaultMessage: 'Stripe alternate rows with color',
-  },
   left: {
     id: 'Left',
     defaultMessage: 'Left',
@@ -255,15 +219,6 @@ class Edit extends Component {
     this.onDeleteCol = this.onDeleteCol.bind(this);
     this.onChangeCell = this.onChangeCell.bind(this);
     this.toggleCellType = this.toggleCellType.bind(this);
-    this.toggleBool = this.toggleBool.bind(this);
-    this.toggleHideHeaders = this.toggleHideHeaders.bind(this);
-    this.toggleSortable = this.toggleSortable.bind(this);
-    this.toggleFixed = this.toggleFixed.bind(this);
-    this.toggleCompact = this.toggleCompact.bind(this);
-    this.toggleBasic = this.toggleBasic.bind(this);
-    this.toggleCelled = this.toggleCelled.bind(this);
-    this.toggleInverted = this.toggleInverted.bind(this);
-    this.toggleStriped = this.toggleStriped.bind(this);
   }
 
   /**
@@ -519,95 +474,6 @@ class Edit extends Component {
     });
   }
 
-  /**
-   * Toggles bool state data ('fixed', 'compact' etc. can be true or false).
-   * @method toggleBool
-   * @param {string} value Key in the table state to toggle.
-   * @returns {undefined}
-   */
-  toggleBool(value) {
-    const table = this.props.data.table;
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      table: {
-        ...table,
-        [value]: !table[value],
-      },
-    });
-  }
-
-  /**
-   * Toggle fixed
-   * @method toggleHideHeaders
-   * @returns {undefined}
-   */
-  toggleHideHeaders() {
-    this.toggleBool('hideHeaders');
-  }
-
-  /**
-   * Toggle sortable
-   * @method toggleSortable
-   * @returns {undefined}
-   */
-  toggleSortable() {
-    this.toggleBool('sortable');
-  }
-
-  /**
-   * Toggle fixed
-   * @method toggleFixed
-   * @returns {undefined}
-   */
-  toggleFixed() {
-    this.toggleBool('fixed');
-  }
-
-  /**
-   * Toggle compact
-   * @method toggleCompact
-   * @returns {undefined}
-   */
-  toggleCompact() {
-    this.toggleBool('compact');
-  }
-
-  /**
-   * Toggle basic
-   * @method toggleBasic
-   * @returns {undefined}
-   */
-  toggleBasic() {
-    this.toggleBool('basic');
-  }
-
-  /**
-   * Toggle celled
-   * @method toggleCelled
-   * @returns {undefined}
-   */
-  toggleCelled() {
-    this.toggleBool('celled');
-  }
-
-  /**
-   * Toggle inverted
-   * @method toggleInverted
-   * @returns {undefined}
-   */
-  toggleInverted() {
-    this.toggleBool('inverted');
-  }
-
-  /**
-   * Toggle striped
-   * @method toggleStriped
-   * @returns {undefined}
-   */
-  toggleStriped() {
-    this.toggleBool('striped');
-  }
-
   componentDidUpdate(prevProps) {
     if (prevProps.selected && !this.props.selected) {
       this.setState({ selected: null });
@@ -623,6 +489,7 @@ class Edit extends Component {
     const headers = this.props.data.table?.rows?.[0]?.cells || [];
     const rows =
       this.props.data.table?.rows?.filter((_, index) => index > 0) || [];
+    const schema = TableSchema(this.props);
 
     return (
       // TODO: use slate-table instead of table, but first copy the CSS styles
@@ -802,80 +669,22 @@ class Edit extends Component {
           </Table>
         )}
         {this.props.selected && this.state.selected && this.state.isClient && (
-          <Portal node={document.getElementById('sidebar-properties')}>
-            <Form method="post" onSubmit={(event) => event.preventDefault()}>
-              <Segment secondary attached>
-                <FormattedMessage id="Table" defaultMessage="Table" />
-              </Segment>
-              <Segment attached>
-                <Field
-                  id="hideHeaders"
-                  title={this.props.intl.formatMessage(messages.hideHeaders)}
-                  type="boolean"
-                  value={
-                    this.props.data.table && this.props.data.table.hideHeaders
-                  }
-                  onChange={() => this.toggleHideHeaders()}
-                />
-                <Field
-                  id="sortable"
-                  title={this.props.intl.formatMessage(messages.sortable)}
-                  description={this.props.intl.formatMessage(
-                    messages.sortableDescription,
-                  )}
-                  type="boolean"
-                  value={
-                    this.props.data.table && this.props.data.table.sortable
-                  }
-                  onChange={() => this.toggleSortable()}
-                />
-                <Field
-                  id="fixed"
-                  title={this.props.intl.formatMessage(messages.fixed)}
-                  type="boolean"
-                  value={this.props.data.table && this.props.data.table.fixed}
-                  onChange={() => this.toggleFixed()}
-                />
-                <Field
-                  id="celled"
-                  title={this.props.intl.formatMessage(messages.celled)}
-                  type="boolean"
-                  value={this.props.data.table && this.props.data.table.celled}
-                  onChange={this.toggleCelled}
-                />
-                <Field
-                  id="striped"
-                  title={this.props.intl.formatMessage(messages.striped)}
-                  type="boolean"
-                  value={this.props.data.table && this.props.data.table.striped}
-                  onChange={this.toggleStriped}
-                />
-                <Field
-                  id="compact"
-                  title={this.props.intl.formatMessage(messages.compact)}
-                  type="boolean"
-                  value={this.props.data.table && this.props.data.table.compact}
-                  onChange={() => this.toggleCompact()}
-                />
-                <Field
-                  id="basic"
-                  title={this.props.intl.formatMessage(messages.basic)}
-                  type="boolean"
-                  value={this.props.data.table && this.props.data.table.basic}
-                  onChange={this.toggleBasic}
-                />
-                <Field
-                  id="inverted"
-                  title={this.props.intl.formatMessage(messages.inverted)}
-                  type="boolean"
-                  value={
-                    this.props.data.table && this.props.data.table.inverted
-                  }
-                  onChange={this.toggleInverted}
-                />
-              </Segment>
-            </Form>
-          </Portal>
+          <SidebarPortal selected={this.props.selected}>
+            <BlockDataForm
+              schema={schema}
+              title={schema.title}
+              onChangeField={(id, value) => {
+                this.props.onChangeBlock(this.props.block, {
+                  ...this.props.data,
+                  [id]: value,
+                });
+              }}
+              onChangeBlock={this.props.onChangeBlock}
+              formData={this.props.data}
+              block={this.props.block}
+              blocksConfig={this.props.blocksConfig}
+            />
+          </SidebarPortal>
         )}
       </div>
     );

package/packages/volto-slate/src/blocks/Table/schema.js

@@ -0,0 +1,122 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  hideHeaders: {
+    id: 'Hide headers',
+    defaultMessage: 'Hide headers',
+  },
+  sortable: {
+    id: 'Make the table sortable',
+    defaultMessage: 'Make the table sortable',
+  },
+  sortableDescription: {
+    id: 'Visible only in view mode',
+    defaultMessage: 'Visible only in view mode',
+  },
+  fixed: {
+    id: 'Fixed width table cells',
+    defaultMessage: 'Fixed width table cells',
+  },
+  compact: {
+    id: 'Make the table compact',
+    defaultMessage: 'Make the table compact',
+  },
+  basic: {
+    id: 'Reduce complexity',
+    defaultMessage: 'Reduce complexity',
+  },
+  celled: {
+    id: 'Divide each row into separate cells',
+    defaultMessage: 'Divide each row into separate cells',
+  },
+  inverted: {
+    id: 'Table color inverted',
+    defaultMessage: 'Table color inverted',
+  },
+  striped: {
+    id: 'Stripe alternate rows with color',
+    defaultMessage: 'Stripe alternate rows with color',
+  },
+});
+
+function TableSchema(props) {
+  const { intl } = props;
+  return {
+    title: 'Table block',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'hideHeaders',
+          'sortable',
+          'fixed',
+          'celled',
+          'striped',
+          'compact',
+          'basic',
+          'inverted',
+        ],
+      },
+    ],
+    properties: {
+      hideHeaders: {
+        title: intl.formatMessage(messages.hideHeaders),
+        type: 'boolean',
+      },
+      sortable: {
+        title: intl.formatMessage(messages.sortable),
+        type: 'boolean',
+      },
+      fixed: {
+        title: intl.formatMessage(messages.fixed),
+        type: 'boolean',
+      },
+      celled: {
+        title: intl.formatMessage(messages.celled),
+        type: 'boolean',
+      },
+      striped: {
+        title: intl.formatMessage(messages.striped),
+        type: 'boolean',
+      },
+      compact: {
+        title: intl.formatMessage(messages.compact),
+        type: 'boolean',
+      },
+      basic: {
+        title: intl.formatMessage(messages.basic),
+        type: 'boolean',
+      },
+      inverted: {
+        title: intl.formatMessage(messages.inverted),
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+}
+
+export function TableBlockSchema(props) {
+  return {
+    title: 'Table block',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['table'],
+      },
+    ],
+    properties: {
+      table: {
+        title: 'Table block',
+        widget: 'object',
+        schema: TableSchema(props),
+      },
+    },
+
+    required: [],
+  };
+}
+
+export default TableBlockSchema;

package/packages/volto-slate/src/blocks/Text/DefaultTextBlockEditor.jsx

@@ -6,7 +6,11 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useInView } from 'react-intersection-observer';
 import { Dimmer, Loader, Message, Segment } from 'semantic-ui-react';
 
-import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
+import {
+  flattenToAppURL,
+  getBaseUrl,
+  validateFileUploadSize,
+} from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import {
   BlockDataForm,
@@ -71,6 +75,7 @@ export const DefaultTextBlockEditor = (props) => {
   const { slate } = config.settings;
   const { textblockExtensions } = slate;
   const { value } = data;
+  const intl = useIntl();
 
   // const [addNewBlockOpened, setAddNewBlockOpened] = React.useState();
   const [showDropzone, setShowDropzone] = React.useState(false);
@@ -106,6 +111,7 @@ export const DefaultTextBlockEditor = (props) => {
       files.forEach((file) => {
         const [mime] = file.type.split('/');
         if (mime !== 'image') return;
+        if (!validateFileUploadSize(file, intl.formatMessage)) return;
 
         readAsDataURL(file).then((data) => {
           const fields = data.match(/^data:(.*);(.*),(.*)$/);
@@ -127,7 +133,7 @@ export const DefaultTextBlockEditor = (props) => {
       });
       setShowDropzone(false);
     },
-    [pathname, uploadContent, block],
+    [pathname, uploadContent, block, intl.formatMessage],
   );
 
   const { loaded, loading } = uploadRequest;
@@ -178,7 +184,6 @@ export const DefaultTextBlockEditor = (props) => {
     instructions = formDescription;
   }
 
-  const intl = useIntl();
   const placeholder =
     data.placeholder || formTitle || intl.formatMessage(messages.text);
   const schema = TextBlockSchema(data);

package/packages/volto-slate/src/blocks/Text/TextBlockView.jsx

@@ -1,26 +1,31 @@
-import { serializeNodes } from '@plone/volto-slate/editor/render';
+import {
+  serializeNodes,
+  serializeNodesToText,
+} from '@plone/volto-slate/editor/render';
 import config from '@plone/volto/registry';
+import { isEqual } from 'lodash';
+import Slugger from 'github-slugger';
+import { normalizeString } from '@plone/volto/helpers';
 
 const TextBlockView = (props) => {
   const { id, data, styling = {} } = props;
   const { value, override_toc } = data;
   const metadata = props.metadata || props.properties;
-  return serializeNodes(
-    value,
-    (node, path) => {
-      const res = { ...styling };
-      if (node.type) {
-        if (
-          config.settings.slate.topLevelTargetElements.includes(node.type) ||
-          override_toc
-        ) {
-          res.id = id;
-        }
+  const { topLevelTargetElements } = config.settings.slate;
+
+  const getAttributes = (node, path) => {
+    const res = { ...styling };
+    if (node.type && isEqual(path, [0])) {
+      if (topLevelTargetElements.includes(node.type) || override_toc) {
+        const text = serializeNodesToText(node?.children || []);
+        const slug = Slugger.slug(normalizeString(text));
+        res.id = slug || id;
       }
-      return res;
-    },
-    { metadata: metadata },
-  );
+    }
+    return res;
+  };
+
+  return serializeNodes(value, getAttributes, { metadata: metadata });
 };
 
 export default TextBlockView;

package/packages/volto-slate/src/blocks/Text/extensions/withDeserializers.js

@@ -1,7 +1,7 @@
 import isUrl from 'is-url';
 import imageExtensions from 'image-extensions';
 import { blockTagDeserializer } from '@plone/volto-slate/editor/deserialize';
-import { getBaseUrl } from '@plone/volto/helpers';
+import { getBaseUrl, validateFileUploadSize } from '@plone/volto/helpers';
 import { v4 as uuid } from 'uuid';
 import { Transforms } from 'slate';
 
@@ -66,7 +66,9 @@ export const withDeserializers = (editor) => {
     ...editor.dataTransferHandlers,
     files: (files) => {
       const unprocessed = [];
+      const { intl } = editor.getBlockProps();
       for (const file of files) {
+        if (!validateFileUploadSize(file, intl.formatMessage)) return;
         const reader = new FileReader();
         const [mime] = file.type.split('/');
         if (mime === 'image') {

package/packages/volto-slate/src/blocks/Text/index.js

@@ -35,7 +35,7 @@ import textSVG from '@plone/volto/icons/subtext.svg';
 
 export { TextBlockView, TextBlockEdit, TextBlockSchema };
 
-export default (config) => {
+export default function applyConfig(config) {
   config.settings.slate = {
     // TODO: should we inverse order? First here gets executed last
     textblockExtensions: [
@@ -102,11 +102,6 @@ export default (config) => {
     ...config.settings.slate, // TODO: is this correct for volto-slate addons?
   };
 
-  config.settings.integratesBlockStyles = [
-    ...(config.settings.integratesBlockStyles || []),
-    'slate',
-  ];
-
   const slateBlockConfig = {
     id: 'slate',
     title: 'Text',
@@ -164,5 +159,13 @@ export default (config) => {
     edit: (props) => <TextBlockEdit {...props} detached />,
     restricted: true,
   };
+
+  if (config.blocks.blocksConfig.gridBlock) {
+    // This is required in order to initialize the inner blocksConfig
+    // for the grid block, since the slate block lives in an add-on
+    // it should be responsible to fill itself into the grid configuration
+    config.blocks.blocksConfig.gridBlock.blocksConfig.slate = slateBlockConfig;
+  }
+
   return config;
-};
+}

package/packages/volto-slate/src/editor/config.jsx

@@ -43,6 +43,7 @@ import {
   bTagDeserializer,
   codeTagDeserializer,
 } from './deserialize';
+import { renderLinkElement } from './render';
 
 // Registry of available buttons
 export const buttons = {
@@ -234,10 +235,10 @@ export const defaultBlockType = 'p';
 export const elements = {
   default: ({ attributes, children }) => <p {...attributes}>{children}</p>,
 
-  h1: ({ attributes, children }) => <h1 {...attributes}>{children}</h1>,
-  h2: ({ attributes, children }) => <h2 {...attributes}>{children}</h2>,
-  h3: ({ attributes, children }) => <h3 {...attributes}>{children}</h3>,
-  h4: ({ attributes, children }) => <h4 {...attributes}>{children}</h4>,
+  h1: renderLinkElement('h1'),
+  h2: renderLinkElement('h2'),
+  h3: renderLinkElement('h3'),
+  h4: renderLinkElement('h4'),
 
   li: ({ attributes, children }) => <li {...attributes}>{children}</li>,
   ol: ({ attributes, children }) => <ol {...attributes}>{children}</ol>,

package/packages/volto-slate/src/editor/index.js

@@ -1,9 +1,9 @@
 import * as slateConfig from './config';
 import installDefaultPlugins from './plugins';
-export SlateEditor from './SlateEditor';
-export EditorReference from './EditorReference';
+export { default as SlateEditor } from './SlateEditor';
+export { default as EditorReference } from './EditorReference';
 
-export default (config) => {
+export default function applyConfig(config) {
   config.settings.slate = {
     ...slateConfig,
     // showExpandedToolbar: false,
@@ -11,4 +11,4 @@ export default (config) => {
   };
   config = installDefaultPlugins(config);
   return config;
-};
+}

package/packages/volto-slate/src/editor/less/slate.less

@@ -0,0 +1,28 @@
+h1,
+h2,
+h3,
+h4 {
+  &:hover {
+    a.anchor {
+      svg {
+        opacity: 1;
+        transform: rotate(15deg);
+      }
+    }
+  }
+
+  a.anchor {
+    position: absolute;
+    display: inline-block;
+    margin-left: 5px;
+    vertical-align: middle;
+
+    svg {
+      width: 1.6ch;
+      fill: #42526e;
+      opacity: 0;
+      transform: rotate(15deg) translate(-8px, 2px);
+      transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
+    }
+  }
+}

package/packages/volto-slate/src/editor/plugins/Link/render.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import cx from 'classnames';
 import { UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
@@ -20,18 +21,16 @@ const ViewLink = ({ url, target, download, children }) => {
 
 export const LinkElement = (props) => {
   const { attributes, children, element, mode = 'edit' } = props;
+  const isInternalUrl = isInternalURL(element.data?.url);
+  const linkUrl = element.data?.url;
 
   return mode === 'view' ? (
     <ViewLink {...(element.data || {})}>{children}</ViewLink>
   ) : (
     <a
       {...attributes}
-      className="slate-editor-link"
-      href={
-        isInternalURL(element.data?.url)
-          ? flattenToAppURL(element.data?.url)
-          : element.data?.url
-      }
+      className={cx('slate-editor-link', { external: !isInternalUrl })}
+      href={isInternalUrl ? flattenToAppURL(linkUrl) : linkUrl}
       onClick={(e) => e.preventDefault()}
     >
       {Array.isArray(children)

package/packages/volto-slate/src/editor/plugins/StyleMenu/StyleMenu.jsx

@@ -28,13 +28,13 @@ const StyleMenuButton = ({ icon, active, ...props }) => (
   <ToolbarButton {...props} icon={icon} active={active} />
 );
 
-const MenuOpts = ({ editor, toSelect, option, ...rest }) => {
+const MenuOpts = ({ editor, toSelect, option, type }) => {
   const isActive = toSelect.includes(option);
   return (
     <Dropdown.Item
       as="span"
       active={isActive}
-      className={cx({ active: isActive })}
+      className={cx(`${type}-${option.value}`, { active: isActive })}
       {...omit(option, ['isBlock'])}
       data-isblock={option.isBlock}
       onClick={(event, selItem) => {
@@ -118,7 +118,12 @@ const StylingsButton = (props) => {
               content={intl.formatMessage(messages.inlineStyle)}
             />
             {inlineOpts.map((option, index) => (
-              <MenuOpts {...menuItemProps} option={option} key={index} />
+              <MenuOpts
+                {...menuItemProps}
+                type="inline-style"
+                option={option}
+                key={index}
+              />
             ))}
           </>
         )}
@@ -129,7 +134,12 @@ const StylingsButton = (props) => {
               content={intl.formatMessage(messages.paragraphStyle)}
             />
             {blockOpts.map((option, index) => (
-              <MenuOpts {...menuItemProps} option={option} key={index} />
+              <MenuOpts
+                {...menuItemProps}
+                type="block-style"
+                option={option}
+                key={index}
+              />
             ))}
           </>
         )}