@plone/volto 17.4.0 → 17.6.0

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

@@ -411,7 +411,8 @@ class Contents extends Component {
       showWorkflow: false,
       itemsToDelete: [],
       containedItemsToDelete: [],
-      brokenReferences: [],
+      brokenReferences: 0,
+      breaches: [],
       showAllItemsToDelete: true,
       items: this.props.items,
       filter: '',
@@ -450,20 +451,37 @@ class Contents extends Component {
       const linkintegrityInfo = await this.props.linkIntegrityCheck(
         map(this.state.itemsToDelete, (item) => this.getFieldById(item, 'UID')),
       );
-      let containedItems = 0;
-      let brokenReferencesCount = 0;
+      const containedItems = linkintegrityInfo
+        .map((result) => result.items_total ?? 0)
+        .reduce((acc, value) => acc + value, 0);
+      const breaches = linkintegrityInfo.flatMap((result) =>
+        result.breaches.map((source) => ({
+          source: source,
+          target: result,
+        })),
+      );
+      const source_by_uid = breaches.reduce(
+        (acc, value) => acc.set(value.source.uid, value.source),
+        new Map(),
+      );
+      const by_source = breaches.reduce((acc, value) => {
+        if (acc.get(value.source.uid) === undefined) {
+          acc.set(value.source.uid, new Set());
+        }
+        acc.get(value.source.uid).add(value.target);
+        return acc;
+      }, new Map());
 
-      linkintegrityInfo.forEach((item) => {
-        containedItems += item.items_total ?? 0;
-        brokenReferencesCount += item.breaches.length;
-      });
       this.setState({
         containedItemsToDelete: containedItems,
-        brokenReferences: brokenReferencesCount,
-        brokenLinksList:
-          linkintegrityInfo.length === 1
-            ? linkintegrityInfo[0]['@id'] + '/links-to-item'
-            : null,
+        brokenReferences: by_source.size,
+        linksAndReferencesViewLink: linkintegrityInfo.length
+          ? linkintegrityInfo[0]['@id'] + '/links-to-item'
+          : null,
+        breaches: Array.from(by_source, (entry) => ({
+          source: source_by_uid.get(entry[0]),
+          targets: Array.from(entry[1]),
+        })),
         showAllItemsToDelete:
           this.state.itemsToDelete.length < this.deleteItemsToShowThreshold,
       });
@@ -1188,7 +1206,11 @@ class Contents extends Component {
                 <article id="content">
                   <Confirm
                     open={this.state.showDelete}
-                    confirmButton="Delete"
+                    confirmButton={
+                      this.state.brokenReferences === 0
+                        ? 'Delete'
+                        : 'Delete item and break links'
+                    }
                     header={
                       this.state.itemsToDelete.length === 1
                         ? this.props.intl.formatMessage(
@@ -1200,114 +1222,14 @@ class Contents extends Component {
                     }
                     content={
                       <div className="content">
-                        <p>
-                          {this.state.itemsToDelete.length > 1 ? (
-                            this.state.containedItemsToDelete > 0 ? (
-                              <>
-                                <FormattedMessage
-                                  id="Some items are also a folder.
-                              By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
-                                  defaultMessage="Some items are also a folder.
-                              By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
-                                  values={{
-                                    containedItemsToDelete: (
-                                      <span>
-                                        {this.state.containedItemsToDelete}
-                                      </span>
-                                    ),
-                                    variation: (
-                                      <span>
-                                        {this.state.containedItemsToDelete ===
-                                        1 ? (
-                                          <FormattedMessage
-                                            id="item"
-                                            defaultMessage="item"
-                                          />
-                                        ) : (
-                                          <FormattedMessage
-                                            id="items"
-                                            defaultMessage="items"
-                                          />
-                                        )}
-                                      </span>
-                                    ),
-                                  }}
-                                />
-                                {this.state.brokenReferences > 0 && (
-                                  <>
-                                    <br />
-                                    <FormattedMessage
-                                      id="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
-                                      defaultMessage="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
-                                      values={{
-                                        brokenReferences: (
-                                          <span>
-                                            {this.state.brokenReferences}
-                                          </span>
-                                        ),
-                                        variation: (
-                                          <span>
-                                            {this.state.brokenReferences ===
-                                            1 ? (
-                                              <FormattedMessage
-                                                id="reference"
-                                                defaultMessage="reference"
-                                              />
-                                            ) : (
-                                              <FormattedMessage
-                                                id="references"
-                                                defaultMessage="references"
-                                              />
-                                            )}
-                                          </span>
-                                        ),
-                                      }}
-                                    />
-                                  </>
-                                )}
-                              </>
-                            ) : (
-                              <>
-                                {this.state.brokenReferences > 0 && (
-                                  <>
-                                    <FormattedMessage
-                                      id="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
-                                      defaultMessage="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
-                                      values={{
-                                        brokenReferences: (
-                                          <span>
-                                            {this.state.brokenReferences}
-                                          </span>
-                                        ),
-                                        variation: (
-                                          <span>
-                                            {this.state.brokenReferences ===
-                                            1 ? (
-                                              <FormattedMessage
-                                                id="reference"
-                                                defaultMessage="reference"
-                                              />
-                                            ) : (
-                                              <FormattedMessage
-                                                id="references"
-                                                defaultMessage="references"
-                                              />
-                                            )}
-                                          </span>
-                                        ),
-                                      }}
-                                    />
-                                  </>
-                                )}
-                              </>
-                            )
-                          ) : this.state.containedItemsToDelete > 0 ? (
+                        {this.state.itemsToDelete.length > 1 ? (
+                          this.state.containedItemsToDelete > 0 ? (
                             <>
                               <FormattedMessage
-                                id="This item is also a folder.
-                            By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
-                                defaultMessage="This item is also a folder.
-                            By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
+                                id="Some items are also a folder.
+                              By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
+                                defaultMessage="Some items are also a folder.
+                              By deleting them you will delete {containedItemsToDelete} {variation} inside the folders."
                                 values={{
                                   containedItemsToDelete: (
                                     <span>
@@ -1336,8 +1258,41 @@ class Contents extends Component {
                                 <>
                                   <br />
                                   <FormattedMessage
-                                    id="This item is referenced by other items. By deleting it {brokenReferences} {variation} will be broken."
-                                    defaultMessage="This item is referenced by other items. By deleting it {brokenReferences} {variation} will be broken."
+                                    id="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
+                                    defaultMessage="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
+                                    values={{
+                                      brokenReferences: (
+                                        <span>
+                                          {this.state.brokenReferences}
+                                        </span>
+                                      ),
+                                      variation: (
+                                        <span>
+                                          {this.state.brokenReferences === 1 ? (
+                                            <FormattedMessage
+                                              id="reference"
+                                              defaultMessage="reference"
+                                            />
+                                          ) : (
+                                            <FormattedMessage
+                                              id="references"
+                                              defaultMessage="references"
+                                            />
+                                          )}
+                                        </span>
+                                      ),
+                                    }}
+                                  />
+                                </>
+                              )}
+                            </>
+                          ) : (
+                            <>
+                              {this.state.brokenReferences > 0 && (
+                                <>
+                                  <FormattedMessage
+                                    id="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
+                                    defaultMessage="Some items are referenced by other contents. By deleting them {brokenReferences} {variation} will be broken."
                                     values={{
                                       brokenReferences: (
                                         <span>
@@ -1361,62 +1316,183 @@ class Contents extends Component {
                                       ),
                                     }}
                                   />
-                                  <div className="broken-links-list-link-wrapper">
+                                </>
+                              )}
+                            </>
+                          )
+                        ) : this.state.containedItemsToDelete > 0 ? (
+                          <>
+                            <FormattedMessage
+                              id="This item is also a folder.
+                            By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
+                              defaultMessage="This item is also a folder.
+                            By deleting it you will delete {containedItemsToDelete} {variation} inside the folder."
+                              values={{
+                                containedItemsToDelete: (
+                                  <span>
+                                    {this.state.containedItemsToDelete}
+                                  </span>
+                                ),
+                                variation: (
+                                  <span>
+                                    {this.state.containedItemsToDelete === 1 ? (
+                                      <FormattedMessage
+                                        id="item"
+                                        defaultMessage="item"
+                                      />
+                                    ) : (
+                                      <FormattedMessage
+                                        id="items"
+                                        defaultMessage="items"
+                                      />
+                                    )}
+                                  </span>
+                                ),
+                              }}
+                            />
+                            {this.state.brokenReferences > 0 && (
+                              <>
+                                <br />
+                                <FormattedMessage
+                                  id="Deleting this item breaks {brokenReferences} {variation}."
+                                  defaultMessage="Deleting this item breaks {brokenReferences} {variation}."
+                                  values={{
+                                    brokenReferences: (
+                                      <span>{this.state.brokenReferences}</span>
+                                    ),
+                                    variation: (
+                                      <span>
+                                        {this.state.brokenReferences === 1 ? (
+                                          <FormattedMessage
+                                            id="reference"
+                                            defaultMessage="reference"
+                                          />
+                                        ) : (
+                                          <FormattedMessage
+                                            id="references"
+                                            defaultMessage="references"
+                                          />
+                                        )}
+                                      </span>
+                                    ),
+                                  }}
+                                />
+                                <div className="broken-links-list">
+                                  <FormattedMessage id="These items will have broken links" />
+                                  <ul>
+                                    {this.state.breaches.map((breach) => (
+                                      <li key={breach.source['@id']}>
+                                        <Link
+                                          to={flattenToAppURL(
+                                            breach.source['@id'],
+                                          )}
+                                          title="Navigate to this item"
+                                        >
+                                          {breach.source.title}
+                                        </Link>{' '}
+                                        refers to{' '}
+                                        {breach.targets
+                                          .map((target) => (
+                                            <Link
+                                              to={flattenToAppURL(
+                                                target['@id'],
+                                              )}
+                                              title="Navigate to this item"
+                                            >
+                                              {target.title}
+                                            </Link>
+                                          ))
+                                          .reduce((result, item) => (
+                                            <>
+                                              {result}, {item}
+                                            </>
+                                          ))}
+                                      </li>
+                                    ))}
+                                  </ul>
+                                  {this.state.linksAndReferencesViewLink && (
                                     <Link
                                       to={flattenToAppURL(
-                                        this.state.brokenLinksList,
+                                        this.state.linksAndReferencesViewLink,
                                       )}
                                     >
                                       <FormattedMessage
-                                        id="View broken links list"
-                                        defaultMessage="View broken links list"
+                                        id="View links and references to this item"
+                                        defaultMessage="View links and references to this item"
                                       />
                                     </Link>
-                                  </div>
-                                </>
-                              )}
-                            </>
-                          ) : this.state.brokenReferences > 0 ? (
-                            <>
-                              <FormattedMessage
-                                id="This item is referenced by other items. By deleting it {brokenReferences} {variation} will be broken."
-                                defaultMessage="This item is referenced by other items. By deleting it {brokenReferences} {variation} will be broken."
-                                values={{
-                                  brokenReferences: (
-                                    <span>{this.state.brokenReferences}</span>
-                                  ),
-                                  variation: (
-                                    <span>
-                                      {this.state.brokenReferences === 1 ? (
-                                        <FormattedMessage
-                                          id="reference"
-                                          defaultMessage="reference"
-                                        />
-                                      ) : (
-                                        <FormattedMessage
-                                          id="references"
-                                          defaultMessage="references"
-                                        />
-                                      )}
-                                    </span>
-                                  ),
-                                }}
-                              />
-                              <div className="broken-links-list-link-wrapper">
+                                  )}
+                                </div>
+                              </>
+                            )}
+                          </>
+                        ) : this.state.brokenReferences > 0 ? (
+                          <>
+                            <FormattedMessage
+                              id="Deleting this item breaks {brokenReferences} {variation}."
+                              defaultMessage="Deleting this item breaks {brokenReferences} {variation}."
+                              values={{
+                                brokenReferences: (
+                                  <span>{this.state.brokenReferences}</span>
+                                ),
+                                variation: (
+                                  <span>
+                                    {this.state.brokenReferences === 1 ? (
+                                      <FormattedMessage
+                                        id="reference"
+                                        defaultMessage="reference"
+                                      />
+                                    ) : (
+                                      <FormattedMessage id="references" />
+                                    )}
+                                  </span>
+                                ),
+                              }}
+                            />
+                            <div className="broken-links-list">
+                              <FormattedMessage id="These items will have broken links" />
+                              <ul>
+                                {this.state.breaches.map((breach) => (
+                                  <li key={breach.source['@id']}>
+                                    <Link
+                                      to={flattenToAppURL(breach.source['@id'])}
+                                      title="Navigate to this item"
+                                    >
+                                      {breach.source.title}
+                                    </Link>{' '}
+                                    refers to{' '}
+                                    {breach.targets
+                                      .map((target) => (
+                                        <Link
+                                          to={flattenToAppURL(target['@id'])}
+                                          title="Navigate to this item"
+                                        >
+                                          {target.title}
+                                        </Link>
+                                      ))
+                                      .reduce((result, item) => (
+                                        <>
+                                          {result}, {item}
+                                        </>
+                                      ))}
+                                  </li>
+                                ))}
+                              </ul>
+                              {this.state.linksAndReferencesViewLink && (
                                 <Link
                                   to={flattenToAppURL(
-                                    this.state.brokenLinksList,
+                                    this.state.linksAndReferencesViewLink,
                                   )}
                                 >
                                   <FormattedMessage
-                                    id="View broken links list"
-                                    defaultMessage="View broken links list"
+                                    id="View links and references to this item"
+                                    defaultMessage="View links and references to this item"
                                   />
                                 </Link>
-                              </div>
-                            </>
-                          ) : null}
-                        </p>
+                              )}
+                            </div>
+                          </>
+                        ) : null}
                       </div>
                     }
                     onCancel={this.onDeleteCancel}
@@ -2219,7 +2295,7 @@ export default compose(
   asyncConnect([
     {
       key: 'actions',
-      // Dispatch async/await to make the operation syncronous, otherwise it returns
+      // Dispatch async/await to make the operation synchronous, otherwise it returns
       // before the promise is resolved
       promise: async ({ location, store: { dispatch } }) =>
         await dispatch(listActions(getBaseUrl(location.pathname))),

package/src/components/manage/TextLineEdit/TextLineEdit.jsx

@@ -174,7 +174,7 @@ export const TextLineEdit = (props) => {
     return <div />;
   }
   return (
-    <Slate editor={editor} onChange={handleChange} value={initialValue}>
+    <Slate editor={editor} onChange={handleChange} initialValue={initialValue}>
       <Editable
         readOnly={!editable}
         onKeyDown={handleKeyDown}

package/src/components/theme/ContentMetadataTags/ContentMetadataTags.jsx

@@ -1,13 +1,5 @@
-import React, { useEffect } from 'react';
-import {
-  toPublicURL,
-  Helmet,
-  hasApiExpander,
-  getBaseUrl,
-} from '@plone/volto/helpers';
-import { getNavroot } from '@plone/volto/actions';
+import { toPublicURL, Helmet } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
-import { useDispatch, useSelector } from 'react-redux';
 
 const ContentMetadataTags = (props) => {
   const {
@@ -21,21 +13,23 @@ const ContentMetadataTags = (props) => {
     description,
   } = props.content;
 
-  const dispatch = useDispatch();
-  const pathname = useSelector((state) => state.router.location.pathname);
-  const navroot = useSelector((state) => state.navroot?.data?.navroot);
-  const site = useSelector((state) => state.site?.data);
-
-  useEffect(() => {
-    if (pathname && !hasApiExpander('navroot', getBaseUrl(pathname))) {
-      dispatch(getNavroot(getBaseUrl(pathname)));
-    }
-  }, [dispatch, pathname]);
-
   const getContentImageInfo = () => {
     const { contentMetadataTagsImageField } = config.settings;
-    const image = props.content[contentMetadataTagsImageField];
+    const image_field = props.content[contentMetadataTagsImageField];
+    const preview_image = props.content.preview_image;
+    const preview_image_link = props.content.preview_image_link;
     const { opengraph_image } = props.content;
+    let image = undefined;
+
+    if (opengraph_image !== undefined && opengraph_image) {
+      image = opengraph_image;
+    } else if (preview_image_link !== undefined && preview_image_link) {
+      image = preview_image_link[contentMetadataTagsImageField];
+    } else if (preview_image !== undefined && preview_image) {
+      image = preview_image;
+    } else if (image_field !== undefined && image_field) {
+      image = image_field;
+    }
 
     const contentImageInfo = {
       contentHasImage: false,
@@ -43,10 +37,7 @@ const ContentMetadataTags = (props) => {
       height: null,
       width: null,
     };
-    contentImageInfo.contentHasImage =
-      opengraph_image?.scales?.large?.download ||
-      image?.scales?.large?.download ||
-      false;
+    contentImageInfo.contentHasImage = image?.scales?.large?.download || false;
 
     if (contentImageInfo.contentHasImage && opengraph_image?.scales?.large) {
       contentImageInfo.url = opengraph_image.scales.large.download;
@@ -63,35 +54,16 @@ const ContentMetadataTags = (props) => {
 
   const contentImageInfo = getContentImageInfo();
 
-  const getTitle = () => {
-    const includeSiteTitle =
-      config?.settings?.siteTitleFormat?.includeSiteTitle || false;
-    const titleAndSiteTitleSeparator =
-      config?.settings?.titleAndSiteTitleSeparator || '-';
-    const navRootTitle = navroot?.title;
-    const siteRootTitle = site?.['plone.site_title'];
-    const titlePart = navRootTitle || siteRootTitle;
-
-    if (includeSiteTitle && titlePart && titlePart !== title) {
-      return seo_title || `${title} ${titleAndSiteTitleSeparator} ${titlePart}`;
-    } else {
-      return seo_title || title;
-    }
-  };
-
   return (
     <>
       <Helmet>
-        <title>{getTitle()?.replace(/\u00AD/g, '')}</title>
-        <link
-          rel="canonical"
-          href={seo_canonical_url || toPublicURL(props.content['@id'])}
-        />
+        <title>{(seo_title || title)?.replace(/\u00AD/g, '')}</title>
         <meta name="description" content={seo_description || description} />
         <meta
           property="og:title"
           content={opengraph_title || seo_title || title}
         />
+        <meta property="og:type" content={'website'} />
         <meta
           property="og:url"
           content={seo_canonical_url || toPublicURL(props.content['@id'])}
@@ -103,6 +75,12 @@ const ContentMetadataTags = (props) => {
             content={toPublicURL(contentImageInfo.url)}
           />
         )}
+        {contentImageInfo.contentHasImage && (
+          <meta
+            property="twitter:image"
+            content={toPublicURL(contentImageInfo.url)}
+          />
+        )}
         {contentImageInfo.contentHasImage && (
           <meta property="og:image:width" content={contentImageInfo.width} />
         )}
@@ -116,6 +94,21 @@ const ContentMetadataTags = (props) => {
           />
         )}
         <meta name="twitter:card" content="summary_large_image" />
+        <meta
+          property="twitter:url"
+          content={seo_canonical_url || toPublicURL(props.content['@id'])}
+        />
+        {/* TODO: Improve SEO backend metadata providers by adding the twitter handler */}
+        {/* <meta property="twitter:site" content={'@my_twitter_handler'} /> */}
+        <meta
+          property="twitter:title"
+          content={opengraph_title || seo_title || title}
+        />
+        <meta
+          property="twitter:description"
+          content={seo_description || description}
+        />
+        <meta property="twitter:domain" content={config.settings.publicURL} />
       </Helmet>
     </>
   );