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

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/index.js

@@ -108,6 +108,7 @@ export History from '@plone/volto/components/manage/History/History';
 export Sharing from '@plone/volto/components/manage/Sharing/Sharing';
 export Rules from '@plone/volto/components/manage/Rules/Rules';
 export Aliases from '@plone/volto/components/manage/Aliases/Aliases';
+export LinksToItem from '@plone/volto/components/manage/LinksToItem/LinksToItem';
 export Workflow from '@plone/volto/components/manage/Workflow/Workflow';
 export Messages from '@plone/volto/components/manage/Messages/Messages';
 export BlockChooser from '@plone/volto/components/manage/BlockChooser/BlockChooser';

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

@@ -13,7 +13,14 @@ const messages = defineMessages({
 });
 
 const SearchInput = (props) => {
-  const { data, searchText, setSearchText, isLive, onTriggerSearch } = props;
+  const {
+    data,
+    searchText,
+    setSearchText,
+    isLive,
+    onTriggerSearch,
+    removeSearchQuery,
+  } = props;
   const intl = useIntl();
 
   return (
@@ -44,7 +51,7 @@ const SearchInput = (props) => {
             className="search-input-clear-icon-button"
             onClick={() => {
               setSearchText('');
-              onTriggerSearch('');
+              removeSearchQuery();
             }}
           >
             <Icon name={clearSVG} />

package/src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -301,7 +301,7 @@ const withSearch = (options) => (WrappedComponent) => {
               id,
               query: data.query || {},
               facets: toSearchFacets || facets,
-              searchText: toSearchText || searchText,
+              searchText: toSearchText ? toSearchText.trim() : '',
               sortOn: toSortOn || sortOn,
               sortOrder: toSortOrder || sortOrder,
               facetSettings,
@@ -329,6 +329,16 @@ const withSearch = (options) => (WrappedComponent) => {
       ],
     );
 
+    const removeSearchQuery = () => {
+      searchData.query = searchData.query.reduce(
+        // Remove SearchableText from query
+        (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+        [],
+      );
+      setSearchData(searchData);
+      setLocationSearchData(getSearchFields(searchData));
+    };
+
     const querystringResults = useSelector(
       (state) => state.querystringsearch.subrequests,
     );
@@ -347,6 +357,7 @@ const withSearch = (options) => (WrappedComponent) => {
         sortOrder={sortOrder}
         searchedText={urlSearchText}
         searchText={searchText}
+        removeSearchQuery={removeSearchQuery}
         setSearchText={setSearchText}
         onTriggerSearch={onTriggerSearch}
         totalItems={totalItems}

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: [],
   };

package/src/components/manage/Blocks/ToC/variations/HorizontalMenu.jsx

@@ -1,12 +1,7 @@
-/**
- * View toc block.
- * @module components/manage/Blocks/ToC/View
- */
-
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import { Menu } from 'semantic-ui-react';
+import { Menu, Dropdown } from 'semantic-ui-react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import AnchorLink from 'react-anchor-link-smooth-scroll';
 import Slugger from 'github-slugger';
@@ -36,6 +31,131 @@ const RenderMenuItems = ({ items }) => {
  * @extends Component
  */
 const View = ({ data, tocEntries }) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  // When the page is resized to prevent items from the TOC from going out of the viewport,
+  // a dropdown menu is added containing all the items that don't fit.
+  const handleResize = () => {
+    const menuElement = document.querySelector('.responsive-menu');
+    const containerWidth = menuElement.offsetWidth;
+
+    // Get all divs that contain the items from the TOC, except the dropdown button
+    const nested = document.querySelectorAll(
+      '.responsive-menu .item:not(.dropdown)',
+    );
+    const nestedArray = Object.values(nested);
+    const middle = Math.ceil(nestedArray.length / 2);
+    const firstHalfNested = nestedArray.slice(0, middle);
+    const secondHalfNested = nestedArray.slice(middle);
+
+    const dropdown = document.querySelector('.dropdown');
+    const dropdownWidth = dropdown.offsetWidth;
+
+    const firstHalfNestedHiddenItems = [];
+
+    // Add a 'hidden' class for the items that should be in the dropdown
+    firstHalfNested.forEach((item) => {
+      const itemOffsetLeft = item.offsetLeft;
+      const itemOffsetWidth = item.offsetWidth;
+      if (itemOffsetLeft + itemOffsetWidth > containerWidth - dropdownWidth) {
+        item.classList.add('hidden');
+        firstHalfNestedHiddenItems.push(item);
+      } else {
+        item.classList.remove('hidden');
+      }
+    });
+
+    secondHalfNested.forEach((item) => item.classList.add('hidden-dropdown'));
+
+    const diff = firstHalfNested.length - firstHalfNestedHiddenItems.length;
+    const secondHalfNestedShownItems = secondHalfNested.slice(diff);
+    secondHalfNestedShownItems.forEach((item) =>
+      item.classList.remove('hidden-dropdown'),
+    );
+
+    // If there are elements that should be displayed in the dropdown, show the dropdown button
+    if (secondHalfNestedShownItems.length > 0)
+      dropdown.classList.remove('hidden-dropdown');
+    else {
+      dropdown.classList.add('hidden-dropdown');
+    }
+  };
+
+  const handleDropdownKeyDown = (event) => {
+    const dropdownMenu = document.querySelector('.menu.transition');
+    if (event.key === 'ArrowDown' && isDropdownOpen) {
+      event.preventDefault();
+      const menuItems = dropdownMenu.querySelectorAll(
+        '.item:not(.hidden-dropdown)',
+      );
+      const focusedItem = dropdownMenu.querySelector('.item.focused');
+      const focusedIndex = Array.from(menuItems).indexOf(focusedItem);
+
+      if (focusedIndex === -1) {
+        // No item is currently focused, so focus the first item
+        menuItems[0].classList.add('focused');
+      } else if (focusedIndex === menuItems.length - 1) {
+        // Remove focus from the currently focused item and close the dropdown
+        focusedItem.classList.remove('focused');
+        setIsDropdownOpen(false);
+
+        // Focus the next element on the page
+        const nextElement = dropdownMenu.nextElementSibling;
+        if (nextElement) {
+          nextElement.focus();
+        }
+      } else {
+        // Remove focus from the currently focused item
+        focusedItem.classList.remove('focused');
+
+        // Focus the next item or wrap around to the first item
+        const nextIndex = (focusedIndex + 1) % menuItems.length;
+        menuItems[nextIndex].classList.add('focused');
+      }
+    } else if (event.key === 'Enter' && isDropdownOpen) {
+      const focusedItem = dropdownMenu.querySelector('.item.focused');
+      if (focusedItem) {
+        focusedItem.querySelector('a').click();
+        focusedItem.classList.remove('focused');
+      }
+    } else if (event.key === 'Tab') {
+      const focusedItem = dropdownMenu.querySelector('.item.focused');
+      if (focusedItem) {
+        focusedItem.classList.remove('focused');
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (data.sticky) {
+      const toc = document.querySelector('.horizontalMenu');
+      const tocPos = toc ? toc.offsetTop : 0;
+
+      const handleScroll = () => {
+        let scrollPos = window.scrollY;
+        if (scrollPos > tocPos && toc) {
+          toc.classList.add('sticky-toc');
+        } else if (scrollPos <= tocPos && toc) {
+          toc.classList.remove('sticky-toc');
+        }
+      };
+
+      window.addEventListener('scroll', handleScroll);
+
+      return () => {
+        window.removeEventListener('scroll', handleScroll);
+      };
+    }
+  }, [data.sticky]);
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+
   return (
     <>
       {data.title && !data.hide_title ? (
@@ -50,8 +170,22 @@ const View = ({ data, tocEntries }) => {
       ) : (
         ''
       )}
-      <Menu>
+      <Menu className="responsive-menu">
         <RenderMenuItems items={tocEntries} />
+        <Dropdown
+          item
+          text="More"
+          className="hidden-dropdown"
+          open={isDropdownOpen}
+          onOpen={() => setIsDropdownOpen(true)}
+          onClose={() => setIsDropdownOpen(false)}
+          tabIndex={0}
+          onKeyDown={handleDropdownKeyDown}
+        >
+          <Dropdown.Menu>
+            <RenderMenuItems items={tocEntries} />
+          </Dropdown.Menu>
+        </Dropdown>
       </Menu>
     </>
   );