@plone/volto 18.0.0-alpha.8 → 18.0.0

package/src/components/manage/Controlpanels/index.tsx

@@ -0,0 +1,181 @@
+import loadable from '@loadable/component';
+import { getSystemInformation, listControlpanels } from '@plone/volto/actions';
+import { asyncConnect } from '@plone/volto/helpers';
+
+// CONTROLPANELS
+
+const LoadableControlpanels = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Controlpanels" */ '@plone/volto/components/manage/Controlpanels/Controlpanels'
+    ),
+);
+
+export const Controlpanels = asyncConnect([
+  {
+    key: 'controlpanels',
+    promise: async ({ store: { dispatch } }: any) =>
+      await dispatch(listControlpanels()),
+  },
+  {
+    key: 'systemInformation',
+    promise: async ({ store: { dispatch } }: any) =>
+      await dispatch(getSystemInformation()),
+  },
+])(LoadableControlpanels);
+
+export const Controlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Controlpanels" */ '@plone/volto/components/manage/Controlpanels/Controlpanel'
+    ),
+);
+
+// RULES CONTROLPANELS
+
+export const RulesControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/Rules'
+    ),
+);
+
+export const AddRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/AddRule'
+    ),
+);
+
+export const EditRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/EditRule'
+    ),
+);
+
+export const ConfigureRuleControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "RulesControlpanel" */ '@plone/volto/components/manage/Controlpanels/Rules/ConfigureRule'
+    ),
+);
+
+// USERS CONTROLPANELS
+
+export const UsersControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "UsersControlpanel" */ '@plone/volto/components/manage/Controlpanels/Users/UsersControlpanel'
+    ),
+);
+
+export const RenderUsers = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "UsersControlpanel" */ '@plone/volto/components/manage/Controlpanels/Users/RenderUsers'
+    ),
+);
+
+export const UserGroupMembershipControlPanel = loadable(
+  () =>
+    import(
+      '@plone/volto/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel'
+    ),
+);
+
+export const GroupsControlpanel = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "GroupsControlpanel" */ '@plone/volto/components/manage/Controlpanels/Groups/GroupsControlpanel'
+    ),
+);
+
+export const RenderGroups = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "GroupsControlpanel" */ '@plone/volto/components/manage/Controlpanels/Groups/RenderGroups'
+    ),
+);
+
+// RELATIONS CONTROLPANEL
+
+export const RelationsControlpanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/Relations/Relations'),
+);
+
+// ALIASES CONTROLPANEL
+
+export const AliasesControlpanel = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/Aliases'),
+);
+
+// UNDO CONTROLPANEL
+
+export const UndoControlpanel = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/UndoControlpanel'),
+);
+
+// ADDONS CONTROLPANEL
+
+export const AddonsControlpanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/AddonsControlpanel'),
+);
+
+// CONTENT TYPES CONTROLPANEL
+
+export const ContentType = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentType'
+    ),
+);
+
+export const ContentTypeLayout = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypeLayout'
+    ),
+);
+
+export const ContentTypeSchema = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypeSchema'
+    ),
+);
+
+export const ContentTypes = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "ContentTypesControlpanel" */ '@plone/volto/components/manage/Controlpanels/ContentTypes'
+    ),
+);
+
+// VERSION OVERVIEW
+
+export const VersionOverview = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/VersionOverview'),
+);
+
+// PLONE UPGRADES CONTROLPANELS
+
+export const UpgradeControlPanel = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/UpgradeControlPanel'),
+);
+
+// MODERATE COMMENTS CONTROLPANEL
+
+export const ModerateComments = loadable(
+  () => import('@plone/volto/components/manage/Controlpanels/ModerateComments'),
+);
+
+// DATABASE INFORMATION CONTROLPANELS
+
+export const DatabaseInformation = loadable(
+  () =>
+    import('@plone/volto/components/manage/Controlpanels/DatabaseInformation'),
+);

package/src/components/manage/Delete/Delete.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { Button, Container, List, Segment } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
@@ -110,15 +110,15 @@ const Delete = () => {
             </Segment>
           </Segment.Group>
         </Container>
-        {isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {isClient &&
+          createPortal(
             <Toolbar
               pathname={pathname}
               hideDefaultViewButtons
               inner={<span />}
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </div>
     );
   }

package/src/components/manage/Delete/Delete.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -8,9 +8,7 @@ import Delete from './Delete';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 describe('Delete', () => {
   it('renders an empty delete component', () => {
@@ -27,15 +25,16 @@ describe('Delete', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Delete location={{ pathname: '/blog', search: {} }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 
   it('renders a delete component', () => {
@@ -54,14 +53,15 @@ describe('Delete', () => {
         messages: {},
       },
     });
-    const component = renderer.create(
+    const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
           <Delete location={{ pathname: '/blog', search: {} }} />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+
+    expect(container).toMatchSnapshot();
   });
 });

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

@@ -11,7 +11,7 @@ import { compose } from 'redux';
 import { filter, isEqual, map } from 'lodash';
 import { Container, Button, Dropdown, Grid, Table } from 'semantic-ui-react';
 import { Link, withRouter } from 'react-router-dom';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
 
@@ -23,12 +23,12 @@ import {
   hasBlocksData,
 } from '@plone/volto/helpers';
 import {
-  DiffField,
   FormattedDate,
   Icon,
   Toolbar,
   Unauthorized,
 } from '@plone/volto/components';
+import DiffField from '@plone/volto/components/manage/Diff/DiffField';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -333,8 +333,8 @@ class Diff extends Component {
               view={this.props.view}
             />
           )}
-        {this.state.isClient && (
-          <Portal node={document.getElementById('toolbar')}>
+        {this.state.isClient &&
+          createPortal(
             <Toolbar
               pathname={this.props.pathname}
               hideDefaultViewButtons
@@ -351,9 +351,9 @@ class Diff extends Component {
                   />
                 </Link>
               }
-            />
-          </Portal>
-        )}
+            />,
+            document.getElementById('toolbar'),
+          )}
       </Container>
     );
   }

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

@@ -8,9 +8,7 @@ import Diff from './Diff';
 
 const mockStore = configureStore();
 
-jest.mock('react-portal', () => ({
-  Portal: jest.fn(() => <div id="Portal" />),
-}));
+jest.mock('../Toolbar/Toolbar', () => jest.fn(() => <div id="Portal" />));
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
@@ -75,6 +73,7 @@ describe('Diff', () => {
       <Provider store={store}>
         <MemoryRouter initialEntries={['/blog?one=0&two=1']}>
           <Diff />
+          <div id="toolbar"></div>
         </MemoryRouter>
       </Provider>,
     );

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;
+                  }),
                   '',
                 ),
               }}