@plone/volto 18.0.0-alpha.43 → 18.0.0-alpha.45

package/src/components/manage/Diff/DiffField.jsx

@@ -4,7 +4,6 @@
  */
 
 import React from 'react';
-// import { diffWords as dWords } from 'diff';
 import { join, map } from 'lodash';
 import PropTypes from 'prop-types';
 import { Grid } from 'semantic-ui-react';
@@ -13,20 +12,128 @@ import { Provider } from 'react-intl-redux';
 import { createBrowserHistory } from 'history';
 import { ConnectedRouter } from 'connected-react-router';
 import { useSelector } from 'react-redux';
-
+import config from '@plone/volto/registry';
 import { Api } from '@plone/volto/helpers';
 import configureStore from '@plone/volto/store';
-import { DefaultView } from '@plone/volto/components/';
+import { RenderBlocks } from '@plone/volto/components';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
-
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
-/**
- * Enhanced diff words utility
- * @function diffWords
- * @param oneStr Field one
- * @param twoStr Field two
- */
+const isHtmlTag = (str) => {
+  // Match complete HTML tags, including:
+  // 1. Opening tags like <div>, <img src="example" />, <svg>...</svg>
+  // 2. Self-closing tags like <img />, <br />
+  // 3. Closing tags like </div>
+  return /^<([a-zA-Z]+[0-9]*)\b[^>]*>|^<\/([a-zA-Z]+[0-9]*)\b[^>]*>$|^<([a-zA-Z]+[0-9]*)\b[^>]*\/>$/.test(
+    str,
+  );
+};
+
+const splitWords = (str) => {
+  if (typeof str !== 'string') return str;
+  if (!str) return [];
+
+  const result = [];
+  let currentWord = '';
+  let insideTag = false;
+  let insideSpecialTag = false;
+  let tagBuffer = '';
+
+  // Special tags that should not be split (e.g., <img />, <svg> ... </svg>)
+  const specialTags = ['img', 'svg'];
+
+  for (let i = 0; i < str.length; i++) {
+    const char = str[i];
+
+    // Start of an HTML tag
+    if (char === '<') {
+      if (currentWord) {
+        result.push(currentWord); // Push text before the tag
+        currentWord = '';
+      }
+      insideTag = true;
+      tagBuffer += char;
+    }
+    // End of an HTML tag
+    else if (char === '>') {
+      tagBuffer += char;
+      insideTag = false;
+
+      // Check if the tagBuffer contains a special tag
+      const tagNameMatch = tagBuffer.match(/^<\/?([a-zA-Z]+[0-9]*)\b/);
+      if (tagNameMatch && specialTags.includes(tagNameMatch[1])) {
+        insideSpecialTag =
+          tagNameMatch[0].startsWith('<') && !tagNameMatch[0].startsWith('</');
+        result.push(tagBuffer); // Push the complete special tag as one unit
+        tagBuffer = '';
+        continue;
+      }
+
+      result.push(tagBuffer); // Push the complete tag
+      tagBuffer = '';
+    }
+    // Inside the tag or special tag
+    else if (insideTag || insideSpecialTag) {
+      tagBuffer += char;
+    }
+    // Space outside of tags - push current word
+    else if (char === ' ' && !insideTag && !insideSpecialTag) {
+      if (currentWord) {
+        result.push(currentWord);
+        currentWord = '';
+      }
+      result.push(' ');
+    } else if (
+      char === ',' &&
+      i < str.length - 1 &&
+      str[i + 1] !== ' ' &&
+      !insideTag &&
+      !insideSpecialTag
+    ) {
+      if (currentWord) {
+        result.push(currentWord + char);
+        currentWord = '';
+      }
+      result.push(' ');
+    }
+    // Accumulate characters outside of tags
+    else {
+      currentWord += char;
+    }
+  }
+
+  // Push any remaining text
+  if (currentWord) {
+    result.push(currentWord);
+  }
+  if (tagBuffer) {
+    result.push(tagBuffer); // Push remaining tagBuffer
+  }
+
+  return result;
+};
+
+const formatDiffPart = (part, value, side) => {
+  if (!isHtmlTag(value)) {
+    if (part.removed && (side === 'left' || side === 'unified')) {
+      return `<span class="deletion">${value}</span>`;
+    } else if (part.removed) return '';
+    else if (part.added && (side === 'right' || side === 'unified')) {
+      return `<span class="addition">${value}</span>`;
+    } else if (part.added) return '';
+    return value;
+  } else {
+    if (side === 'unified' && part.added) return value;
+    else if (side === 'unified' && part.removed) return '';
+    if (part.removed && side === 'left') {
+      return value;
+    } else if (part.removed) return '';
+    else if (part.added && side === 'right') {
+      return value;
+    } else if (part.added) return '';
+    return value;
+  }
+};
 
 /**
  * Diff field component.
@@ -36,6 +143,7 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
  * @param {Object} schema Field schema
  * @returns {string} Markup of the component.
  */
+
 const DiffField = ({
   one,
   two,
@@ -51,7 +159,10 @@ const DiffField = ({
     timeStyle: 'short',
   };
   const diffWords = (oneStr, twoStr) => {
-    return diffLib.diffWords(String(oneStr), String(twoStr));
+    return diffLib.diffArrays(
+      splitWords(String(oneStr)),
+      splitWords(String(twoStr)),
+    );
   };
 
   let parts, oneArray, twoArray;
@@ -78,14 +189,14 @@ const DiffField = ({
           ReactDOMServer.renderToStaticMarkup(
             <Provider store={store}>
               <ConnectedRouter history={history}>
-                <DefaultView content={contentOne} />
+                <RenderBlocks content={contentOne} />
               </ConnectedRouter>
             </Provider>,
           ),
           ReactDOMServer.renderToStaticMarkup(
             <Provider store={store}>
               <ConnectedRouter history={history}>
-                <DefaultView content={contentTwo} />
+                <RenderBlocks content={contentTwo} />
               </ConnectedRouter>
             </Provider>,
           ),
@@ -116,7 +227,30 @@ const DiffField = ({
       }
       case 'textarea':
       default:
-        parts = diffWords(one, two);
+        const Widget = config.widgets?.views?.widget?.[schema.widget];
+
+        if (Widget) {
+          const api = new Api();
+          const history = createBrowserHistory();
+          const store = configureStore(window.__data, history, api);
+          parts = diffWords(
+            ReactDOMServer.renderToStaticMarkup(
+              <Provider store={store}>
+                <ConnectedRouter history={history}>
+                  <Widget value={one} />
+                </ConnectedRouter>
+              </Provider>,
+            ),
+            ReactDOMServer.renderToStaticMarkup(
+              <Provider store={store}>
+                <ConnectedRouter history={history}>
+                  <Widget value={two} />
+                </ConnectedRouter>
+              </Provider>,
+            ),
+          );
+        } else parts = diffWords(one, two);
+
         break;
     }
   } else if (schema.type === 'object') {
@@ -128,6 +262,7 @@ const DiffField = ({
   } else {
     parts = diffWords(one?.title || one, two?.title || two);
   }
+
   return (
     <Grid data-testid="DiffField">
       <Grid.Row>
@@ -140,14 +275,12 @@ const DiffField = ({
             <span
               dangerouslySetInnerHTML={{
                 __html: join(
-                  map(
-                    parts,
-                    (part) =>
-                      (part.removed &&
-                        `<span class="deletion">${part.value}</span>`) ||
-                      (!part.added && `<span>${part.value}</span>`) ||
-                      '',
-                  ),
+                  map(parts, (part) => {
+                    let combined = (part.value || []).reduce((acc, value) => {
+                      return acc + formatDiffPart(part, value, 'left');
+                    }, '');
+                    return combined;
+                  }),
                   '',
                 ),
               }}
@@ -157,14 +290,12 @@ const DiffField = ({
             <span
               dangerouslySetInnerHTML={{
                 __html: join(
-                  map(
-                    parts,
-                    (part) =>
-                      (part.added &&
-                        `<span class="addition">${part.value}</span>`) ||
-                      (!part.removed && `<span>${part.value}</span>`) ||
-                      '',
-                  ),
+                  map(parts, (part) => {
+                    let combined = (part.value || []).reduce((acc, value) => {
+                      return acc + formatDiffPart(part, value, 'right');
+                    }, '');
+                    return combined;
+                  }),
                   '',
                 ),
               }}
@@ -178,15 +309,12 @@ const DiffField = ({
             <span
               dangerouslySetInnerHTML={{
                 __html: join(
-                  map(
-                    parts,
-                    (part) =>
-                      (part.removed &&
-                        `<span class="deletion">${part.value}</span>`) ||
-                      (part.added &&
-                        `<span class="addition">${part.value}</span>`) ||
-                      (!part.added && `<span>${part.value}</span>`),
-                  ),
+                  map(parts, (part) => {
+                    let combined = (part.value || []).reduce((acc, value) => {
+                      return acc + formatDiffPart(part, value, 'unified');
+                    }, '');
+                    return combined;
+                  }),
                   '',
                 ),
               }}

package/src/components/manage/Form/Form.jsx

@@ -274,19 +274,22 @@ class Form extends Component {
         selected: null,
       });
     }
-
-    if (requestError && prevProps.requestError !== requestError) {
+    if (requestError) {
       errors =
         FormValidation.giveServerErrorsToCorrespondingFields(requestError);
-      activeIndex = FormValidation.showFirstTabWithErrors({
-        errors,
-        schema: this.props.schema,
-      });
-
-      this.setState({
-        errors,
-        activeIndex,
-      });
+      if (
+        !isEqual(prevProps.requestError, requestError) ||
+        !isEqual(this.state.errors, errors)
+      ) {
+        activeIndex = FormValidation.showFirstTabWithErrors({
+          errors,
+          schema: this.props.schema,
+        });
+        this.setState({
+          errors,
+          activeIndex,
+        });
+      }
     }
 
     if (this.props.onChangeFormData) {
@@ -563,13 +566,11 @@ class Form extends Component {
         }
       });
     }
-
     if (keys(errors).length > 0 || keys(blocksErrors).length > 0) {
       const activeIndex = FormValidation.showFirstTabWithErrors({
         errors,
         schema: this.props.schema,
       });
-
       this.setState({
         errors: {
           ...errors,
@@ -580,14 +581,23 @@ class Form extends Component {
 
       if (keys(errors).length > 0) {
         // Changes the focus to the metadata tab in the sidebar if error
-        Object.keys(errors).forEach((err) =>
-          toast.error(
-            <Toast
-              error
-              title={this.props.schema.properties[err].title || err}
-              content={errors[err].join(', ')}
-            />,
-          ),
+        toast.error(
+          <Toast
+            error
+            title={this.props.intl.formatMessage(messages.error)}
+            content={
+              <ul>
+                {Object.keys(errors).map((err, index) => (
+                  <li key={index}>
+                    <strong>
+                      {this.props.schema.properties[err].title || err}:
+                    </strong>{' '}
+                    {errors[err]}
+                  </li>
+                ))}
+              </ul>
+            }
+          />,
         );
         this.props.setSidebarTab(0);
       } else if (keys(blocksErrors).length > 0) {
@@ -714,7 +724,6 @@ class Form extends Component {
     const schema = this.removeBlocksLayoutFields(originalSchema);
     const Container =
       config.getComponent({ name: 'Container' }).component || SemanticContainer;
-
     return this.props.visual ? (
       // Removing this from SSR is important, since react-beautiful-dnd supports SSR,
       // but draftJS don't like it much and the hydration gets messed up

package/src/components/manage/Sidebar/SidebarPopup.jsx

@@ -16,6 +16,13 @@ const SidebarPopup = (props) => {
     onClose();
   };
 
+  const handleEscapeKey = (e) => {
+    if (open && e.key === 'Escape') {
+      onClose();
+      e.stopPropagation();
+    }
+  };
+
   const [isClient, setIsClient] = React.useState(false);
   React.useEffect(() => {
     setIsClient(true);
@@ -23,11 +30,12 @@ const SidebarPopup = (props) => {
 
   React.useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside, false);
+    document.addEventListener('keyup', handleEscapeKey, false);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside, false);
+      document.removeEventListener('keyup', handleEscapeKey, false);
     };
   });
-
   return (
     <>
       {overlay && (

package/src/components/manage/Toast/Toast.jsx

@@ -29,7 +29,7 @@ const Toast = (props) => {
       <Icon name={getIcon(props)} size="18px" />
       <div className="toast-inner-content">
         {title && <h4>{title}</h4>}
-        <p>{content}</p>
+        <div>{content}</div>
       </div>
     </>
   );
@@ -37,7 +37,7 @@ const Toast = (props) => {
 
 Toast.propTypes = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  content: PropTypes.string.isRequired,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   info: PropTypes.bool,
   success: PropTypes.bool,
   error: PropTypes.bool,

package/src/components/manage/Widgets/ArrayWidget.jsx

@@ -314,6 +314,7 @@ class ArrayWidget extends Component {
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
           getHelperDimensions={({ node }) => node.getBoundingClientRect()}
           id={`field-${this.props.id}`}
+          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
           key={this.props.id}
           isDisabled={this.props.disabled || this.props.isDisabled}
           className="react-select-container"

package/src/components/manage/Widgets/FormFieldWrapper.jsx

@@ -8,6 +8,8 @@ import { Form, Grid, Icon as IconOld, Label } from 'semantic-ui-react';
 import { map } from 'lodash';
 import cx from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
+import LanguageSVG from '@plone/volto/icons/language.svg';
+import { Icon } from '@plone/volto/components';
 
 const messages = defineMessages({
   edit: {
@@ -22,6 +24,11 @@ const messages = defineMessages({
     id: 'Language independent field.',
     defaultMessage: 'Language independent field.',
   },
+  language_independent_icon_title: {
+    id: 'Language independent icon title',
+    defaultMessage:
+      'This is a language independent field. Any value you enter here will overwrite the corresponding field of all members of the translation group when you save this form.',
+  },
 });
 /**
  * FormFieldWrapper component class.
@@ -91,6 +98,9 @@ class FormFieldWrapper extends Component {
       noForInFieldLabel,
       multilingual_options,
     } = this.props;
+
+    const languageIndependent = multilingual_options?.language_independent;
+
     const wdg = (
       <>
         {this.props.children}
@@ -112,9 +122,7 @@ class FormFieldWrapper extends Component {
           description ? 'help' : '',
           className,
           `field-wrapper-${id}`,
-          multilingual_options?.language_independent
-            ? 'language-independent-field'
-            : null,
+          languageIndependent ? 'language-independent-field' : null,
         )}
       >
         <Grid>
@@ -133,6 +141,18 @@ class FormFieldWrapper extends Component {
                       />
                     )}
                     {title}
+                    {languageIndependent && (
+                      <div className="languageIndependent-icon">
+                        <Icon
+                          title={intl.formatMessage(
+                            messages.language_independent_icon_title,
+                          )}
+                          name={LanguageSVG}
+                          size="24px"
+                          color="#555"
+                        />
+                      </div>
+                    )}
                   </label>
                 </div>
               </Grid.Column>

package/src/components/manage/Widgets/SelectWidget.jsx

@@ -224,6 +224,7 @@ class SelectWidget extends Component {
           id={`field-${id}`}
           key={choices}
           name={id}
+          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${id}`}
           menuShouldScrollIntoView={false}
           isDisabled={disabled}
           isSearchable={true}

package/src/components/manage/Widgets/TokenWidget.jsx

@@ -173,6 +173,7 @@ class TokenWidget extends Component {
       <FormFieldWrapper {...this.props}>
         <CreatableSelect
           id={`field-${this.props.id}`}
+          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
           key={this.props.id}
           menuShouldScrollIntoView={false}
           isDisabled={this.props.isDisabled}

package/src/config/NonContentRoutesPublic.jsx

@@ -0,0 +1,15 @@
+// PublicUi routes that are nonContentRoutes, and should not be members of isCmsUi
+// You can include either RegEx or a string representing the ending of the
+// nonContentRoute. For example, '/add' will match '/foo/bar/add'.
+export const nonContentRoutesPublic = [
+  '/login',
+  '/logout',
+  '/sitemap',
+  '/register',
+  '/search',
+  '/change-password',
+  '/contact-form',
+  '/register',
+  /\/passwordreset\/.*$/,
+  '/passwordreset',
+];

package/src/config/index.js

@@ -8,6 +8,7 @@ import {
   layoutViewsNamesMapping,
 } from './Views';
 import { nonContentRoutes } from './NonContentRoutes';
+import { nonContentRoutesPublic } from './NonContentRoutesPublic';
 import {
   groupBlocksOrder,
   requiredBlocks,
@@ -113,6 +114,7 @@ let config = {
     legacyTraverse: process.env.RAZZLE_LEGACY_TRAVERSE || false,
     cookieExpires: 15552000, //in seconds. Default is 6 month (15552000)
     nonContentRoutes,
+    nonContentRoutesPublic,
     imageObjects: ['Image'],
     reservedIds: ['login', 'layout', 'plone', 'zip', 'properties'],
     downloadableObjects: ['File'], //list of content-types for which the direct download of the file will be carried out if the user is not authenticated

package/src/helpers/Blocks/Blocks.js

@@ -718,7 +718,7 @@ export function isBlockContainer(block) {
  * @param {Object} types A list with the list of types to be matched
  * @return {Array} An array of block ids
  */
-export function findBlocks(blocks, types, result = []) {
+export function findBlocks(blocks = {}, types, result = []) {
   Object.keys(blocks).forEach((blockId) => {
     const block = blocks[blockId];
     // check blocks from data as well since some add-ons use that

package/src/helpers/Url/Url.js

@@ -139,7 +139,10 @@ export const isCmsUi = memoize((currentPathname) => {
   // because the regexp test does not take that into account
   // https://github.com/plone/volto/issues/870
   return settings.nonContentRoutes.reduce(
-    (acc, route) => acc || new RegExp(route).test(`/${fullPath}`),
+    (acc, route) =>
+      acc ||
+      (!settings.nonContentRoutesPublic?.includes(route) &&
+        new RegExp(route).test(fullPath)),
     false,
   );
 });

package/src/helpers/Url/Url.test.js

@@ -151,15 +151,29 @@ describe('Url', () => {
   describe('isCmsUi', () => {
     [...settings.nonContentRoutes, '/controlpanel/mypanel'].forEach((route) => {
       if (typeof route === 'string') {
-        it(`matches non-content-route ${route}`, () => {
-          expect(isCmsUi(`/mycontent/${route}`)).toBe(true);
-        });
+        if (settings.nonContentRoutesPublic.includes(route)) {
+          it(`matches non-content-route-public ${route}`, () => {
+            expect(isCmsUi(route)).toBe(false);
+          });
+        } else {
+          it(`matches non-content-route ${route}`, () => {
+            expect(isCmsUi(`/mycontent/${route}`)).toBe(true);
+          });
+        }
       }
     });
 
     it('returns false on non-cms-ui views', () => {
       expect(isCmsUi('/mycontent')).toBe(false);
     });
+
+    it('returns true on non content routes', () => {
+      expect(isCmsUi('/mycontent/historyview')).toBe(true);
+    });
+
+    it('returns false on public non content routes', () => {
+      expect(isCmsUi('/mycontent/login')).toBe(false);
+    });
   });
 
   describe('flattenHTMLToAppURL', () => {

package/src/hooks/index.js

@@ -1,2 +1,3 @@
 export { default as useClipboard } from '@plone/volto/hooks/clipboard/useClipboard';
 export { useClient } from '@plone/volto/hooks/client/useClient';
+export { default as useUser } from '@plone/volto/hooks/user/useUser';

package/src/hooks/user/useUser.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import jwtDecode from 'jwt-decode';
+import { getUser } from '@plone/volto/actions';
+
+const useUser = () => {
+  const users = useSelector((state) => state.users);
+  const user = users?.user;
+  const userId = useSelector((state) =>
+    state.userSession.token ? jwtDecode(state.userSession.token).sub : '',
+  );
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!user?.id && users?.get.loading === false) {
+      dispatch(getUser(userId));
+    }
+  }, [dispatch, userId, user, users?.get.loading]);
+
+  return user;
+};
+
+export default useUser;

package/test-setup-config.jsx

@@ -10,6 +10,7 @@ import React from 'react';
 import config from '@plone/volto/registry';
 import { loadables } from '@plone/volto/config/Loadables';
 import { nonContentRoutes } from '@plone/volto/config/NonContentRoutes';
+import { nonContentRoutesPublic } from '@plone/volto/config/NonContentRoutesPublic';
 import { contentIcons } from '@plone/volto/config/ContentIcons';
 import {
   styleClassNameConverters,
@@ -35,6 +36,7 @@ config.set('settings', {
   showTags: true,
   isMultilingual: false,
   nonContentRoutes,
+  nonContentRoutesPublic,
   contentIcons: contentIcons,
   loadables,
   lazyBundles: {

package/theme/themes/pastanaga/collections/form.overrides

@@ -50,6 +50,7 @@
 
   &:focus {
     border-radius: 0;
+    color: @textColor;
   }
 }
 

package/theme/themes/pastanaga/collections/table.overrides

@@ -6,7 +6,7 @@
 }
 
 /* Headers */
-.ui.table th {
+.ui.table thead th {
   padding: @headerVerticalPadding @headerHorizontalPadding;
   border-left: @headerDivider;
   background: @headerBackground;
@@ -34,3 +34,8 @@
 .ui.table tr:first-child > th:only-child {
   border-radius: @borderRadius @borderRadius 0em 0em;
 }
+
+/* inline link color*/
+.ui.table.inverted a {
+  color: @lightPrimaryColor;
+}