@plone/volto 16.21.2 → 16.22.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/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: [
@@ -165,4 +165,4 @@ export default (config) => {
     restricted: true,
   };
   return config;
-};
+}

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/plugins/StyleMenu/utils.js

@@ -72,19 +72,28 @@ export const toggleInlineStyle = (editor, style) => {
 };
 
 export const isBlockStyleActive = (editor, style) => {
+  const keyName = `style-${style}`;
   const sn = Array.from(
     Editor.nodes(editor, {
-      match: (n) => !Editor.isEditor(n) && typeof n.styleName === 'string',
-      mode: 'highest',
+      match: (n) => {
+        const isStyle = typeof n.styleName === 'string' || n[keyName];
+        return !Editor.isEditor(n) && isStyle;
+      },
+      mode: 'all',
     }),
   );
 
   for (const [n] of sn) {
-    if (n.styleName.split(' ').filter((x) => x === style).length > 0) {
+    if (typeof n.styleName === 'string') {
+      if (n.styleName.split(' ').filter((x) => x === style).length > 0) {
+        return true;
+      }
+    } else if (
+      n[keyName] &&
+      keyName.split('-').filter((x) => x === style).length > 0
+    )
       return true;
-    }
   }
-
   return false;
 };
 

package/packages/volto-slate/src/editor/ui/SlateContextToolbar.jsx

@@ -3,11 +3,11 @@ import Toolbar from './Toolbar';
 
 // A toolbar that conditionally renders itself based on the presense of
 // children
-export default ({ editor, plugins, show }) => {
+export default function SlateContextToolbar({ editor, plugins, show }) {
   if (!show) {
     return null;
   }
 
   const components = plugins.map((plug) => plug(editor)).filter((c) => !!c);
   return components.length ? <Toolbar>{components}</Toolbar> : '';
-};
+}

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

@@ -1,15 +1,15 @@
-export BasicToolbar from './BasicToolbar';
-export BlockButton from './BlockButton';
-export ClearFormattingButton from './ClearFormattingButton';
-export ExpandedToolbar from './ExpandedToolbar';
-export Expando from './Expando';
-export MarkButton from './MarkButton';
-export Menu from './Menu';
-export Separator from './Separator';
-export SlateContextToolbar from './SlateContextToolbar';
-export SlateToolbar from './SlateToolbar';
-export Toolbar from './Toolbar';
-export ToolbarButton from './ToolbarButton';
-export MarkElementButton from './MarkElementButton';
-export PositionedToolbar from './PositionedToolbar';
-export InlineToolbar from './InlineToolbar';
+export { default as BasicToolbar } from './BasicToolbar';
+export { default as BlockButton } from './BlockButton';
+export { default as ClearFormattingButton } from './ClearFormattingButton';
+export { default as ExpandedToolbar } from './ExpandedToolbar';
+export { default as Expando } from './Expando';
+export { default as MarkButton } from './MarkButton';
+export { default as Menu } from './Menu';
+export { default as Separator } from './Separator';
+export { default as SlateContextToolbar } from './SlateContextToolbar';
+export { default as SlateToolbar } from './SlateToolbar';
+export { default as Toolbar } from './Toolbar';
+export { default as ToolbarButton } from './ToolbarButton';
+export { default as MarkElementButton } from './MarkElementButton';
+export { default as PositionedToolbar } from './PositionedToolbar';
+export { default as InlineToolbar } from './InlineToolbar';

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

@@ -8,7 +8,7 @@ import RichTextWidgetView from './widgets/RichTextWidgetView';
 import HtmlSlateWidget from './widgets/HtmlSlateWidget';
 import ObjectByTypeWidget from './widgets/ObjectByTypeWidget';
 
-export default (config) => {
+export default function applyConfig(config) {
   config = [installSlate, installTextBlock, installTableBlock].reduce(
     (acc, apply) => apply(acc),
     config,
@@ -58,4 +58,4 @@ export default (config) => {
   }
 
   return config;
-};
+}

package/packages/volto-slate/src/utils/blocks.js

@@ -125,6 +125,13 @@ export function createEmptyParagraph() {
   };
 }
 
+export function createParagraph(text) {
+  return {
+    type: config.settings.slate.defaultBlockType,
+    children: [{ text }],
+  };
+}
+
 export const isSingleBlockTypeActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
     match: (n) => n.type === format,

package/packages/volto-slate/src/widgets/RichTextWidget.jsx

@@ -4,13 +4,26 @@
  */
 
 import React from 'react';
+import isUndefined from 'lodash/isUndefined';
+import isString from 'lodash/isString';
 import { FormFieldWrapper } from '@plone/volto/components';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
 
-import { createEmptyParagraph } from '../utils/blocks';
+import { createEmptyParagraph, createParagraph } from '../utils/blocks';
 
 import './style.css';
 
+const getValue = (value) => {
+  if (isUndefined(value) || !isUndefined(value?.data)) {
+    return [createEmptyParagraph()];
+  }
+  // Previously this was a text field
+  if (isString(value)) {
+    return [createParagraph(value)];
+  }
+  return value;
+};
+
 const SlateRichTextWidget = (props) => {
   const {
     id,
@@ -42,13 +55,7 @@ const SlateRichTextWidget = (props) => {
           readOnly={readOnly}
           id={id}
           name={id}
-          value={
-            typeof value === 'undefined' ||
-            typeof value?.data !==
-              'undefined' /* previously this was a Draft block */
-              ? [createEmptyParagraph()]
-              : value
-          }
+          value={getValue(value)}
           onChange={(newValue) => {
             onChange(id, newValue);
           }}

package/src/components/manage/AnchorPlugin/index.jsx

@@ -44,7 +44,7 @@ function unboundRemoveEntity(editorState) {
   return newEditorState;
 }
 
-export default (config = {}) => {
+export default function AnchorPlugin(config = {}) {
   // ToDo: Get rif of the remainings of having the original CSS modules
   const defaultTheme = {};
 
@@ -79,4 +79,4 @@ export default (config = {}) => {
         setEditorState(removeEntity(getEditorState())),
     }),
   };
-};
+}

package/src/components/manage/AnchorPlugin/utils/EditorUtils.js

@@ -1,4 +1,4 @@
-export default ({ draftJs }) => ({
+const EditorUtils = ({ draftJs }) => ({
   createLinkAtSelection(editorState, url) {
     const contentState = editorState
       .getCurrentContent()
@@ -43,3 +43,5 @@ export default ({ draftJs }) => ({
     return entity && entity.getType() === entityType;
   },
 });
+
+export default EditorUtils;

package/src/components/manage/Blocks/Block/Style.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import cx from 'classnames';
 
-export default ({ data, detached, children }) => {
+export default function Style({ data, detached, children }) {
   return (
     <div
       className={cx(
@@ -25,4 +25,4 @@ export default ({ data, detached, children }) => {
       </div>
     </div>
   );
-};
+}

package/src/components/manage/Blocks/Listing/getAsyncData.js

@@ -1,7 +1,12 @@
 import { getQueryStringResults } from '@plone/volto/actions';
 import { resolveBlockExtensions } from '@plone/volto/helpers';
 
-export default ({ dispatch, data, path, blocksConfig }) => {
+export default function getListingBlockAsyncData({
+  dispatch,
+  data,
+  path,
+  blocksConfig,
+}) {
   const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
 
   return [
@@ -18,4 +23,4 @@ export default ({ dispatch, data, path, blocksConfig }) => {
       ),
     ),
   ];
-};
+}

package/src/components/manage/Blocks/Listing/withQuerystringResults.jsx

@@ -54,10 +54,9 @@ export default function withQuerystringResults(WrappedComponent) {
     const hasQuery = querystring?.query?.length > 0;
     const hasLoaded = hasQuery ? querystringResults?.[id]?.loaded : true;
 
-    const listingItems =
-      querystring?.query?.length > 0 && querystringResults?.[id]
-        ? querystringResults?.[id]?.items || []
-        : folderItems;
+    const listingItems = hasQuery
+      ? querystringResults?.[id]?.items || []
+      : folderItems;
 
     const showAsFolderListing = !hasQuery && content?.items_total > b_size;
     const showAsQueryListing =