@plone/volto 17.18.2 → 17.20.0

package/src/components/manage/Contents/ContentsPropertiesModal.jsx

@@ -1,12 +1,14 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty, map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { usePrevious } from '@plone/volto/helpers';
+import { cloneDeepSchema } from '@plone/volto/helpers/Utils/Utils';
 import { updateContent } from '@plone/volto/actions';
 import { ModalForm } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   properties: {
@@ -65,12 +67,83 @@ const messages = defineMessages({
 });
 
 const ContentsPropertiesModal = (props) => {
-  const { onCancel, onOk, open, items } = props;
+  const { onCancel, onOk, open, items, values } = props;
   const intl = useIntl();
   const dispatch = useDispatch();
   const request = useSelector((state) => state.content.update);
   const prevrequestloading = usePrevious(request.loading);
 
+  const baseSchema = {
+    fieldsets: [
+      {
+        id: 'default',
+        title: intl.formatMessage(messages.default),
+        fields: [
+          'effective',
+          'expires',
+          'rights',
+          'creators',
+          'exclude_from_nav',
+        ],
+      },
+    ],
+    properties: {
+      effective: {
+        description: intl.formatMessage(messages.effectiveDescription),
+        title: intl.formatMessage(messages.effectiveTitle),
+        type: 'string',
+        widget: 'datetime',
+      },
+      expires: {
+        description: intl.formatMessage(messages.expiresDescription),
+        title: intl.formatMessage(messages.expiresTitle),
+        type: 'string',
+        widget: 'datetime',
+      },
+      rights: {
+        description: intl.formatMessage(messages.rightsDescription),
+        title: intl.formatMessage(messages.rightsTitle),
+        type: 'string',
+        widget: 'textarea',
+      },
+      creators: {
+        description: intl.formatMessage(messages.creatorsDescription),
+        title: intl.formatMessage(messages.creatorsTitle),
+        type: 'array',
+      },
+      exclude_from_nav: {
+        description: intl.formatMessage(messages.excludeFromNavDescription),
+        title: intl.formatMessage(messages.excludeFromNavTitle),
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+  const schemaEnhancer = config.settings.contentPropertiesSchemaEnhancer;
+  let schema = schemaEnhancer
+    ? schemaEnhancer({
+        schema: cloneDeepSchema(baseSchema),
+        intl,
+      })
+    : baseSchema;
+
+  const initialData = {};
+  if (values?.length) {
+    for (const name of Object.keys(schema.properties)) {
+      const firstValue = values[0][name];
+      // should not show floor or ceiling dates
+      if (
+        (name === 'effective' && firstValue && firstValue <= '1970') ||
+        (name === 'expires' && firstValue && firstValue >= '2499')
+      ) {
+        continue;
+      }
+      if (values.every((item) => item[name] === firstValue)) {
+        initialData[name] = firstValue;
+      }
+    }
+  }
+
   useEffect(() => {
     if (prevrequestloading && request.loaded) {
       onOk();
@@ -78,13 +151,19 @@ const ContentsPropertiesModal = (props) => {
   }, [onOk, prevrequestloading, request.loaded]);
 
   const onSubmit = (data) => {
-    if (isEmpty(data)) {
+    let changes = {};
+    for (const name of Object.keys(data)) {
+      if (data[name] !== initialData[name]) {
+        changes[name] = data[name];
+      }
+    }
+    if (isEmpty(changes)) {
       onOk();
     } else {
       dispatch(
         updateContent(
           items,
-          map(items, () => data),
+          map(items, () => changes),
         ),
       );
     }
@@ -97,54 +176,8 @@ const ContentsPropertiesModal = (props) => {
         onSubmit={onSubmit}
         onCancel={onCancel}
         title={intl.formatMessage(messages.properties)}
-        schema={{
-          fieldsets: [
-            {
-              id: 'default',
-              title: intl.formatMessage(messages.default),
-              fields: [
-                'effective',
-                'expires',
-                'rights',
-                'creators',
-                'exclude_from_nav',
-              ],
-            },
-          ],
-          properties: {
-            effective: {
-              description: intl.formatMessage(messages.effectiveDescription),
-              title: intl.formatMessage(messages.effectiveTitle),
-              type: 'string',
-              widget: 'datetime',
-            },
-            expires: {
-              description: intl.formatMessage(messages.expiresDescription),
-              title: intl.formatMessage(messages.expiresTitle),
-              type: 'string',
-              widget: 'datetime',
-            },
-            rights: {
-              description: intl.formatMessage(messages.rightsDescription),
-              title: intl.formatMessage(messages.rightsTitle),
-              type: 'string',
-              widget: 'textarea',
-            },
-            creators: {
-              description: intl.formatMessage(messages.creatorsDescription),
-              title: intl.formatMessage(messages.creatorsTitle),
-              type: 'array',
-            },
-            exclude_from_nav: {
-              description: intl.formatMessage(
-                messages.excludeFromNavDescription,
-              ),
-              title: intl.formatMessage(messages.excludeFromNavTitle),
-              type: 'boolean',
-            },
-          },
-          required: [],
-        }}
+        schema={schema}
+        formData={initialData}
       />
     )
   );

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

@@ -695,6 +695,7 @@ class Form extends Component {
             properties={formData}
             navRoot={navRoot}
             type={type}
+            errors={this.state.errors}
             pathname={this.props.pathname}
             selectedBlock={this.state.selected}
             multiSelected={this.state.multiSelected}

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -590,7 +590,7 @@ class Toolbar extends Component {
                 aria-label={this.props.intl.formatMessage(
                   messages.shrinkToolbar,
                 )}
-                className={cx({
+                className={cx('toolbar-handler-button', {
                   [this.props.content?.review_state]:
                     this.props.content?.review_state,
                 })}

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

@@ -4,10 +4,10 @@
  */
 
 import React, { useState } from 'react';
-import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'semantic-ui-react';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { isInternalURL, flattenToAppURL, URLUtils } from '@plone/volto/helpers';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -15,13 +15,13 @@ import navTreeSVG from '@plone/volto/icons/nav.svg';
 
 /** Widget to edit urls
  *
- * This is the default widget used for the `remoteUrl` field. You can also use
+ * This is a widget used for getting and setting an internal url. You can also use
  * it by declaring a field like:
  *
  * ```jsx
  * {
  *  title: "URL",
- *  widget: 'url',
+ *  widget: 'internal_url',
  * }
  * ```
  */
@@ -35,20 +35,20 @@ export const InternalUrlWidget = (props) => {
     maxLength,
     placeholder,
     isDisabled,
+    value,
   } = props;
   const inputId = `field-${id}`;
 
-  const [value, setValue] = useState(flattenToAppURL(props.value));
   const [isInvalid, setIsInvalid] = useState(false);
+
   /**
    * Clear handler
    * @method clear
    * @param {Object} value Value
-   * @returns {undefined}
+   * @returns {string} Empty string
    */
   const clear = () => {
-    setValue('');
-    onChange(id, undefined);
+    onChange(id, '');
   };
 
   const onChangeValue = (_value) => {
@@ -63,8 +63,6 @@ export const InternalUrlWidget = (props) => {
       }
     }
 
-    setValue(newValue);
-
     newValue = isInternalURL(newValue) ? flattenToAppURL(newValue) : newValue;
 
     if (!isInternalURL(newValue) && newValue.length > 0) {
@@ -75,7 +73,7 @@ export const InternalUrlWidget = (props) => {
       }
     }
 
-    onChange(id, newValue === '' ? undefined : newValue);
+    onChange(id, newValue);
   };
 
   return (
@@ -89,12 +87,10 @@ export const InternalUrlWidget = (props) => {
           disabled={isDisabled}
           placeholder={placeholder}
           onChange={({ target }) => onChangeValue(target.value)}
-          onBlur={({ target }) =>
-            onBlur(id, target.value === '' ? undefined : target.value)
-          }
+          onBlur={({ target }) => onBlur(id, target.value)}
           onClick={() => onClick()}
-          minLength={minLength || null}
-          maxLength={maxLength || null}
+          minLength={minLength}
+          maxLength={maxLength}
           error={isInvalid}
         />
         {value?.length > 0 ? (
@@ -177,4 +173,4 @@ InternalUrlWidget.defaultProps = {
   maxLength: null,
 };
 
-export default compose(withObjectBrowser)(InternalUrlWidget);
+export default withObjectBrowser(InternalUrlWidget);

package/src/config/index.js

@@ -185,6 +185,7 @@ let config = {
     ],
     showSelfRegistration: false,
     contentMetadataTagsImageField: 'image',
+    contentPropertiesSchemaEnhancer: null,
     hasWorkingCopySupport: false,
     maxUndoLevels: 200, // undo history size for the main form
     addonsInfo: addonsInfo,

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/theme/themes/pastanaga/extras/blocks.less

@@ -1119,6 +1119,12 @@ div.image-upload-widget-image {
     flex-direction: row;
     align-items: center;
     margin-right: 0.5em;
+
+    .sorted-label-value {
+      margin-right: 0.5em;
+      margin-left: 0.7em;
+      color: @lightGrey;
+    }
   }
 
   .sort-label {

package/theme/themes/pastanaga/extras/toolbar.less

@@ -129,7 +129,7 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
     }
 
     .toolbar-handler {
-      button {
+      .toolbar-handler-button {
         opacity: 0.3;
       }
 
@@ -243,7 +243,7 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
       width: 100%;
       justify-content: center;
 
-      button {
+      .toolbar-handler-button {
         width: @toolbarWidth;
         height: 20px;
         padding: 0;
@@ -428,7 +428,7 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
         flex-direction: column;
         justify-content: center;
 
-        button {
+        .toolbar-handler-button {
           width: @toolbarWidthMin;
           height: @toolbarWidth;
 
@@ -752,3 +752,10 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
   }
 }
 // End Orphaned CSS
+
+// Toolbar handler color in homepage
+.contenttype-plone-site {
+  #toolbar .toolbar-handler .toolbar-handler-button:before {
+    background: @teal-blue;
+  }
+}

package/types/hooks/index.d.ts

@@ -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/types/hooks/user/useUser.d.ts

@@ -0,0 +1,2 @@
+export default useUser;
+declare function useUser(): any;