@plone/volto 18.0.0-alpha.2 → 18.0.0-alpha.4

package/src/components/manage/Blocks/Video/Body.jsx

@@ -5,39 +5,68 @@ import { Embed, Message } from 'semantic-ui-react';
 import cx from 'classnames';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 
-const Body = ({ data, isEditMode }) => {
-  let placeholder = data.preview_image
-    ? isInternalURL(data.preview_image)
-      ? `${flattenToAppURL(data.preview_image)}/@@images/image`
-      : data.preview_image
-    : null;
-
+//Extracting videoID, listID and thumbnailURL from the video URL
+const getVideoIDAndPlaceholder = (url) => {
   let videoID = null;
   let listID = null;
+  let thumbnailURL = null;
 
-  if (data.url) {
-    if (data.url.match('youtu')) {
-      if (data.url.match('list')) {
-        const matches = data.url.match(/^.*\?list=(.*)|^.*&list=(.*)$/);
+  if (url) {
+    if (url.match('youtu')) {
+      if (url.match('list')) {
+        const matches = url.match(/^.*\?list=(.*)|^.*&list=(.*)$/);
         listID = matches[1] || matches[2];
-      } else {
-        videoID = data.url.match(/.be\//)
-          ? data.url.match(/^.*\.be\/(.*)/)[1]
-          : data.url.match(/^.*\?v=(.*)$/)[1];
+
+        let thumbnailID = null;
+        if (url.match(/\?v=(.*)&list/)) {
+          thumbnailID = url.match(/^.*\?v=(.*)&list(.*)/)[1];
+        }
+        if (url.match(/\?v=(.*)\?list/)) {
+          thumbnailID = url.match(/^.*\?v=(.*)\?list(.*)/)[1];
+        }
+        thumbnailURL =
+          'https://img.youtube.com/vi/' + thumbnailID + '/sddefault.jpg';
+      } else if (url.match('live')) {
+        videoID = url.match(/^.*\/live\/(.*)/)[1];
+      } else if (url.match(/\.be\//)) {
+        videoID = url.match(/^.*\.be\/(.*)/)[1];
+      } else if (url.match(/\?v=/)) {
+        videoID = url.match(/^.*\?v=(.*)$/)[1];
       }
 
-      if (!placeholder) {
+      if (videoID) {
+        let thumbnailID = videoID;
+        if (videoID.match(/\?si=/)) {
+          thumbnailID = videoID.match(/(.*)\?si=(.*)/)[1];
+        }
         //load video preview image from youtube
-        placeholder =
-          'https://img.youtube.com/vi/' + videoID + '/sddefault.jpg';
+        thumbnailURL =
+          'https://img.youtube.com/vi/' + thumbnailID + '/sddefault.jpg';
       }
-    } else if (data.url.match('vimeo')) {
-      videoID = data.url.match(/^.*\.com\/(.*)/)[1];
-      if (!placeholder) {
-        placeholder = 'https://vumbnail.com/' + videoID + '.jpg';
+    } else if (url.match('vimeo')) {
+      videoID = url.match(/^.*\.com\/(.*)/)[1];
+      if (videoID) {
+        let thumbnailID = videoID;
+        if (videoID.match(/\?si=/)) {
+          thumbnailID = videoID.match(/(.*)\?si=(.*)/)[1];
+        }
+        thumbnailURL = 'https://vumbnail.com/' + thumbnailID + '.jpg';
       }
     }
   }
+  return { videoID, listID, thumbnailURL };
+};
+
+const Body = ({ data, isEditMode }) => {
+  let placeholder = data.preview_image
+    ? isInternalURL(data.preview_image)
+      ? `${flattenToAppURL(data.preview_image)}/@@images/image`
+      : data.preview_image
+    : null;
+
+  const { videoID, listID, thumbnailURL } = getVideoIDAndPlaceholder(data.url);
+
+  placeholder = !placeholder ? thumbnailURL : placeholder;
 
   const ref = React.createRef();
   const onKeyDown = (e) => {
@@ -130,3 +159,4 @@ Body.propTypes = {
 };
 
 export default Body;
+export { getVideoIDAndPlaceholder };

package/src/components/manage/Blocks/Video/Body.test.jsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import Body from './Body';
+import { getVideoIDAndPlaceholder } from './Body';
+import config from '@plone/volto/registry';
+
+config.blocks.blocksConfig = {
+  video: {
+    id: 'video',
+    title: 'Video',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+const mockStore = configureStore();
+
+test('renders a youtube video component with "list" in its url', () => {
+  const url =
+    'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: null,
+    listID: 'PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+    thumbnailURL: 'https://img.youtube.com/vi/KwRSRRyuk-Q/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a youtube video with "/live/" in its url', () => {
+  const url = 'https://www.youtube.com/live/ISdHvS6Ck3k?si=COeVakmC1lI6jQy3';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: 'ISdHvS6Ck3k?si=COeVakmC1lI6jQy3',
+    listID: null,
+    thumbnailURL: 'https://img.youtube.com/vi/ISdHvS6Ck3k/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a youtube video with ".be/" in its url', () => {
+  const url = 'https://youtu.be/P9j-xYdWT28?si=zZ2putStJbPBLCdt';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: 'P9j-xYdWT28?si=zZ2putStJbPBLCdt',
+    listID: null,
+    thumbnailURL: 'https://img.youtube.com/vi/P9j-xYdWT28/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a youtube video with "?v=" in its url', () => {
+  const url = 'https://www.youtube.com/watch?v=KUd6e105u_I';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: 'KUd6e105u_I',
+    listID: null,
+    thumbnailURL: 'https://img.youtube.com/vi/KUd6e105u_I/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a vimeo video url', () => {
+  const url = 'https://vimeo.com/639449679';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: '639449679',
+    listID: null,
+    thumbnailURL: 'https://vumbnail.com/639449679.jpg',
+  });
+});
+
+test('renders a youtube video body component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders a youtube video body component in edit mode', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+        }}
+        isEditMode={true}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders invalid video body component with invalid URL', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.google.com',
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders a error message for invalid video URL in edit mode', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.google.com',
+        }}
+        isEditMode={true}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/components/manage/Controlpanels/Users/UserGroupMembershipControlPanel.jsx

@@ -3,7 +3,7 @@
  * TODO Enrich with features of user control panel. Then replace user control panel.
  */
 import React, { useEffect } from 'react';
-import { find, toNumber } from 'lodash';
+import { find } from 'lodash';
 import { Portal } from 'react-portal';
 import { useHistory } from 'react-router';
 import { Link, useLocation } from 'react-router-dom';
@@ -38,7 +38,7 @@ const UserGroupMembershipPanel = () => {
     (state) => state.controlpanels.systeminformation,
   );
   const can_use_group_membership_panel = systeminformation
-    ? toNumber(systeminformation?.plone_restapi_version.slice(0, 4)) >= 8.24
+    ? parseFloat(systeminformation?.plone_restapi_version.slice(0, 4)) >= 8.24
     : false;
   const actions = useSelector((state) => state.actions?.actions ?? {});
   const ploneSetupAction = find(actions.user, {

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

@@ -148,7 +148,10 @@ class Form extends Component {
         ...formData,
       };
     }
-    // defaults for block editor; should be moved to schema on server side
+
+    // We initialize the formData snapshot in here, before the initial data checks
+    const initialFormData = cloneDeep(formData);
+
     // Adding fallback in case the fields are empty, so we are sure that the edit form
     // shows at least the default blocks
     if (
@@ -200,7 +203,7 @@ class Form extends Component {
 
     this.state = {
       formData,
-      initialFormData: cloneDeep(formData),
+      initialFormData,
       errors: {},
       selected: selectedBlock,
       multiSelected: [],

package/src/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { Breadcrumb, Container, Segment } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
@@ -19,13 +19,30 @@ const messages = defineMessages({
     id: 'Breadcrumbs',
     defaultMessage: 'Breadcrumbs',
   },
+  controlpanel: {
+    id: 'Site Setup',
+    defaultMessage: 'Site Setup',
+  },
 });
 
 const BreadcrumbsComponent = ({ pathname }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
+  const { pathname: realPath } = useLocation();
+  const controlpanelItems = [
+    {
+      url: '/controlpanel',
+      title: intl.formatMessage(messages.controlpanel),
+    },
+  ];
 
-  const items = useSelector((state) => state.breadcrumbs.items, shallowEqual);
+  const items = useSelector(
+    (state) =>
+      realPath.startsWith('/controlpanel')
+        ? controlpanelItems
+        : state.breadcrumbs.items,
+    shallowEqual,
+  );
   const root = useSelector((state) => state.breadcrumbs.root);
 
   useEffect(() => {

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

@@ -1,5 +1,13 @@
-import { toPublicURL, Helmet } from '@plone/volto/helpers';
+import React, { useEffect } from 'react';
+import {
+  toPublicURL,
+  Helmet,
+  hasApiExpander,
+  getBaseUrl,
+} from '@plone/volto/helpers';
+import { getNavroot } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
+import { useDispatch, useSelector } from 'react-redux';
 
 const ContentMetadataTags = (props) => {
   const {
@@ -13,23 +21,21 @@ 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_field = props.content[contentMetadataTagsImageField];
-    const preview_image = props.content.preview_image;
-    const preview_image_link = props.content.preview_image_link;
+    const image = props.content[contentMetadataTagsImageField];
     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,
@@ -37,7 +43,10 @@ const ContentMetadataTags = (props) => {
       height: null,
       width: null,
     };
-    contentImageInfo.contentHasImage = image?.scales?.large?.download || false;
+    contentImageInfo.contentHasImage =
+      opengraph_image?.scales?.large?.download ||
+      image?.scales?.large?.download ||
+      false;
 
     if (contentImageInfo.contentHasImage && opengraph_image?.scales?.large) {
       contentImageInfo.url = opengraph_image.scales.large.download;
@@ -54,16 +63,35 @@ 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>{(seo_title || title)?.replace(/\u00AD/g, '')}</title>
+        <title>{getTitle()?.replace(/\u00AD/g, '')}</title>
+        <link
+          rel="canonical"
+          href={seo_canonical_url || toPublicURL(props.content['@id'])}
+        />
         <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'])}
@@ -75,12 +103,6 @@ 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} />
         )}
@@ -94,21 +116,6 @@ 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>
     </>
   );

package/src/config/index.js

@@ -1,7 +1,3 @@
-/**
- * Config.
- * @module config
- */
 import { parse as parseUrl } from 'url';
 import { defaultWidget, widgetMapping } from './Widgets';
 import {

package/src/middleware/api.js

@@ -230,7 +230,7 @@ const apiMiddlewareFactory =
               config.settings.supportedLanguages.includes(lang)
             ) {
               const langFileName = toGettextLang(lang);
-              import('~/../locales/' + langFileName + '.json').then(
+              import('@root/../locales/' + langFileName + '.json').then(
                 (locale) => {
                   dispatch(changeLanguage(lang, locale.default));
                 },

package/tsconfig.json

@@ -17,10 +17,7 @@
     "jsx": "react-jsx",
     "paths": {
       "@plone/volto/*": ["./src/*"],
-      "@plone/volto-slate/*": ["./packages/volto-slate/src/*"],
-      "@plone/registry/*": ["./packages/registry/src/*"],
-      "@plone/registry": ["./packages/registry/src"],
-      "@plone/types/*": ["./packages/types/*"],
+      "@plone/volto-slate/*": ["../volto-slate/src/*"],
       "@root/*": ["./src/*"]
     }
   },

package/types/components/manage/Blocks/Video/Body.d.ts

@@ -8,3 +8,8 @@ declare namespace Body {
         let data: any;
     }
 }
+export function getVideoIDAndPlaceholder(url: any): {
+    videoID: any;
+    listID: any;
+    thumbnailURL: string;
+};

package/types/config/RichTextEditor/index.d.ts

@@ -1,16 +1,13 @@
 export function richtextEditorSettings(props: any): {
     extendedBlockRenderMap: any;
-    blockStyleFn: (contentBlock: any) => string;
-    listBlockTypes: string[];
-    richTextEditorPlugins: any[];
-    richTextEditorInlineToolbarButtons: any[];
-    FromHTMLCustomBlockFn: typeof FromHTMLCustomBlockFn;
+    blockStyleFn: any;
+    listBlockTypes: any;
+    richTextEditorPlugins: any;
+    richTextEditorInlineToolbarButtons: any;
+    FromHTMLCustomBlockFn: any;
     customStyleMap: any;
 };
 export namespace richtextViewSettings {
     export { ToHTMLRenderers };
     export { ToHTMLOptions };
 }
-import FromHTMLCustomBlockFn from './FromHTML';
-import ToHTMLRenderers from './ToHTML';
-import { options as ToHTMLOptions } from './ToHTML';

package/types/helpers/AsyncConnect/index.d.ts

@@ -14,6 +14,6 @@
  * with the "object promises" and that's our "object promises" (which it calls
  * internally "asyncItems").
  */
-export function asyncConnect(asyncItems: any, mapStateToProps: any, mapDispatchToProps: any, mergeProps: any, options: any): (Component: any) => import("react-redux").ConnectedComponent<any, any>;
-export const ReduxAsyncConnect: import("react-redux").ConnectedComponent<any, any>;
+export function asyncConnect(asyncItems: any, mapStateToProps: any, mapDispatchToProps: any, mergeProps: any, options: any): (Component: any) => any;
+export const ReduxAsyncConnect: any;
 export { loadOnServer, loadAsyncConnect } from "./ssr";

package/types/helpers/Url/Url.d.ts

@@ -118,21 +118,21 @@ export function flattenScales(path: string, image: object): object;
  * @param {string} url Url to be parsed.
  * @return {string} Base url of content object.
  */
-export const getBaseUrl: ((url: any) => any) & import("lodash").MemoizedFunction;
+export const getBaseUrl: any;
 /**
  * Get parent url.
  * @function getParentUrl
  * @param {string} url Url to be parsed.
  * @return {string} Parent url of content object.
  */
-export const getParentUrl: ((url: any) => any) & import("lodash").MemoizedFunction;
+export const getParentUrl: any;
 /**
  * Returns true if the current view is a cms ui view
  * @method isCmsUi
  * @param {string} currentPathname pathname of the current view
  * @returns {boolean} true if the current view is a cms ui view
  */
-export const isCmsUi: ((currentPathname: any) => any) & import("lodash").MemoizedFunction;
+export const isCmsUi: any;
 export function getFieldURL(data: object): string | any;
 export namespace URLUtils {
     export { normalizeTelephone };

package/types/icons/load-icons.d.ts

@@ -1,2 +1,2 @@
 export default icons;
-declare const icons: {};
+declare const icons: any;

package/webpack-plugins/webpack-less-plugin.js

@@ -140,6 +140,7 @@ module.exports = (userOptions = {}) => ({
           path.resolve('./theme'),
           path.resolve('./src'),
           /node_modules\/@plone\/volto\/theme/,
+          /packages\/volto\/theme/,
           /plone\.volto\/theme/,
           /node_modules\/semantic-ui-less/,
           ...Object.values(registry.getResolveAliases()),