@plone/volto 17.0.0-alpha.17 → 17.0.0-alpha.18

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/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/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/Blocks/Search/components/Facets.jsx

@@ -12,7 +12,7 @@ const messages = defineMessages({
   hideFilters: { id: 'Hide filters', defaultMessage: 'Hide filters' },
 });
 
-const showFacet = (index) => {
+const defaultShowFacet = (index) => {
   const { values } = index;
   return index
     ? hasNonValueOperation(index.operations || []) ||
@@ -91,7 +91,11 @@ const Facets = (props) => {
 
           // TODO :handle changing the type of facet (multi/nonmulti)
 
-          const { view: FacetWidget, stateToValue } = resolveExtension(
+          const {
+            view: FacetWidget,
+            stateToValue,
+            showFacet = defaultShowFacet,
+          } = resolveExtension(
             'type',
             search.extensions.facetWidgets.types,
             facetSettings,

package/src/components/manage/Blocks/ToC/Schema.jsx

@@ -10,7 +10,7 @@ const TableOfContentsSchema = ({ data }) => {
         fields: [
           'title',
           'hide_title',
-          ...(variation === 'default' ? ['ordered'] : []),
+          ...(variation === 'default' ? ['ordered'] : ['sticky']),
           'levels',
         ],
       },
@@ -39,6 +39,10 @@ const TableOfContentsSchema = ({ data }) => {
         title: 'Ordered',
         type: 'boolean',
       },
+      sticky: {
+        title: 'Sticky',
+        type: 'boolean',
+      },
     },
     required: [],
   };