@plone/volto 18.0.0-alpha.40 → 18.0.0-alpha.41

package/CHANGELOG.md

@@ -17,6 +17,25 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.0.0-alpha.41 (2024-07-05)
+
+### Breaking
+
+- Fixed image widget position and look and feel in sidebar. @ichim-david
+
+  Breaking:
+  - Updated the markup of the widget in the sidebar to render the widget on a single column bellow the label.
+  - AddLink Pop-up of the widget is now rendered inside `toolbar-inner` instead of the document body, this fixes the positioning of the toolbar when scrolling. [#6159](https://github.com/plone/volto/issues/6159)
+
+### Bugfix
+
+- Revisit login/logout process, better catching of edge cases @sneridagh [#6155](https://github.com/plone/volto/issues/6155)
+- Restored browse link in `Slate` `AddLink` Pop-up. @ichim-david
+  Fixed recursive error when uploading an image using the `Image` widget. @sneridagh
+  Fixed image display when using an external URL. @sneridagh
+  Fixed the position of the `Image` widget toolbar when scrolling by changing the position of the toolbar to be within the widget area instead of the body. @ichim-david
+  Improved display of `AddLink` Pop-up when using it inside the `Image` widget where we don't have a link picker. @ichim-david [#6159](https://github.com/plone/volto/issues/6159)
+
 ## 18.0.0-alpha.40 (2024-07-03)
 
 ### Bugfix

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.0.0-alpha.40",
+  "version": "18.0.0-alpha.41",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -236,8 +236,8 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
-    "@plone/volto-slate": "18.0.0-alpha.16",
     "@plone/registry": "1.7.0",
+    "@plone/volto-slate": "18.0.0-alpha.17",
     "@plone/scripts": "3.6.2"
   },
   "devDependencies": {

package/src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx

@@ -64,6 +64,7 @@ class AddLinkForm extends Component {
   };
 
   static defaultProps = {
+    objectBrowserPickerType: 'link',
     placeholder: 'Enter URL or select an item',
   };
 
@@ -246,7 +247,6 @@ class AddLinkForm extends Component {
           <div className="wrapper">
             <Input
               className={className}
-              id={`field-link`}
               name="link"
               value={value || ''}
               onChange={({ target }) => this.onChange(target.value)}

package/src/components/manage/AnchorPlugin/useLinkEditor.jsx

@@ -16,36 +16,38 @@ import React from 'react';
 import { PositionedToolbar } from '@plone/volto-slate/editor/ui';
 import AddLinkForm from '@plone/volto/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm';
 
-function getPositionStyle(el) {
-  const rect = el.getBoundingClientRect();
-
-  return {
-    style: {
-      opacity: 1,
-      top: rect.top + window.pageYOffset - 6,
-      left: rect.left + window.pageXOffset + rect.width / 2,
-    },
-  };
+function getPositionStyle(position) {
+  return (
+    position || {
+      style: {
+        opacity: 1,
+        top: -5,
+        left: 55,
+      },
+    }
+  );
 }
 
 const useLinkEditor = () => {
   const [showLinkEditor, setShowLinkEditor] = React.useState(false);
   const show = React.useCallback(() => setShowLinkEditor(true), []);
-  const savedPosition = React.useRef();
   const anchorNode = React.useRef();
 
-  if (anchorNode.current) {
-    savedPosition.current = getPositionStyle(anchorNode.current);
-  }
-
   const LinkEditor = React.useCallback(
     (props) => {
-      const { id, value, onChange, placeholder, objectBrowserPickerType } =
-        props;
-      return showLinkEditor && anchorNode.current && savedPosition.current ? (
+      const {
+        id,
+        value,
+        onChange,
+        placeholder,
+        objectBrowserPickerType,
+        position,
+      } = props;
+      return showLinkEditor && anchorNode.current ? (
         <PositionedToolbar
           className="add-link"
-          position={savedPosition.current}
+          toggleButton={anchorNode.current}
+          position={getPositionStyle(position)}
         >
           <AddLinkForm
             placeholder={placeholder}
@@ -53,13 +55,11 @@ const useLinkEditor = () => {
             theme={{}}
             objectBrowserPickerType={objectBrowserPickerType}
             onChangeValue={(url) => {
-              savedPosition.current = null;
               setShowLinkEditor(false);
               onChange(id, url);
             }}
             onClear={() => {}}
             onOverrideContent={(c) => {
-              savedPosition.current = null;
               setShowLinkEditor(false);
             }}
           />

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

@@ -153,8 +153,8 @@ const InlineForm = (props) => {
               focus={index === focusIndex}
               value={formData[field]}
               required={schema.required.indexOf(field) !== -1}
-              onChange={(id, value) => {
-                onChangeField(id, value);
+              onChange={(id, value, itemInfo) => {
+                onChangeField(id, value, itemInfo);
               }}
               key={field}
               error={errors[field]}

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

@@ -14,6 +14,7 @@ import {
   getBaseUrl,
   isInternalURL,
   validateFileUploadSize,
+  usePrevious,
 } from '@plone/volto/helpers';
 import { createContent } from '@plone/volto/actions';
 import { readAsDataURL } from 'promise-file-reader';
@@ -91,13 +92,14 @@ const UnconnectedImageInput = (props) => {
 
   const requestId = `image-upload-${id}`;
 
-  const { loading, loaded } = props.request;
+  const loaded = props.request.loaded;
   const { content } = props;
   const imageId = content?.['@id'];
   const image = content?.image;
+  let loading = false;
 
   useEffect(() => {
-    if (uploading && !loading && loaded) {
+    if (uploading && loading && loaded) {
       setUploading(false);
       onChange(id, imageId, {
         image_field: 'image',
@@ -106,6 +108,8 @@ const UnconnectedImageInput = (props) => {
     }
   }, [loading, loaded, uploading, imageId, image, id, onChange]); // Explicitly list all dependencies
 
+  loading = usePrevious(props.request?.loading);
+
   const handleUpload = React.useCallback(
     (eventOrFile) => {
       if (restrictFileUpload === true) return;
@@ -161,7 +165,11 @@ const UnconnectedImageInput = (props) => {
       {selected && <ImageToolbar {...props} />}
       <img
         className={props.className}
-        src={`${flattenToAppURL(value)}/@@images/image/${imageSize}`}
+        src={
+          isInternalURL(value)
+            ? `${flattenToAppURL(value)}/@@images/image/${imageSize}`
+            : value
+        }
         alt=""
       />
     </div>
@@ -302,10 +310,25 @@ export const ImageInput = compose(
   ),
 )(withObjectBrowser(UnconnectedImageInput));
 
-const ImageUploadWidget = (props) => (
-  <FormFieldWrapper {...props} className="image-upload-widget">
-    <ImageInput {...props} />
-  </FormFieldWrapper>
-);
+const ImageUploadWidget = (props) => {
+  const { fieldSet, id, title } = props;
+  return (
+    <FormFieldWrapper
+      {...props}
+      columns={1}
+      className="block image-upload-widget"
+    >
+      <div className="wrapper">
+        <label
+          id={`fieldset-${fieldSet}-field-label-${id}`}
+          htmlFor={`field-${id}`}
+        >
+          {title}
+        </label>
+      </div>
+      <ImageInput {...props} />
+    </FormFieldWrapper>
+  );
+};
 
 export default ImageUploadWidget;

package/src/components/theme/Login/Login.jsx

@@ -12,10 +12,15 @@ import {
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
 
-import { Helmet } from '@plone/volto/helpers';
+import { Helmet, usePrevious } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import { Icon } from '@plone/volto/components';
-import { login, resetLoginRequest } from '@plone/volto/actions';
+import {
+  login,
+  logout,
+  resetLoginRequest,
+  purgeMessages,
+} from '@plone/volto/actions';
 import { toast } from 'react-toastify';
 import { Toast } from '@plone/volto/components';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
@@ -78,8 +83,22 @@ const Login = (props) => {
     location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
     '/';
 
+  const previousToken = usePrevious(token);
+
   useEffect(() => {
-    if (token && !(props.isLogout || location?.state?.isLogout)) {
+    if (location?.state?.isLogout) {
+      // Execute a true Logout action
+      // This is needed to cover the use case of being logged in in
+      // another backend (eg. in development), having a token for
+      // localhost and try to use it, the login route has to know that
+      // it's the same as it comes from a logout
+      // See also Unauthorized.jsx
+      dispatch(logout());
+      dispatch(purgeMessages());
+      // Reset the location state
+      history.push(`${location.pathname}${location.search}`);
+    } else if (token && token !== previousToken) {
+      // We just did a true login action
       history.push(returnUrl || '/');
       if (toast.isActive('loggedOut')) {
         toast.dismiss('loggedOut');
@@ -116,8 +135,10 @@ const Login = (props) => {
     intl,
     history,
     returnUrl,
-    props.isLogout,
+    location.search,
+    location.pathname,
     location?.state?.isLogout,
+    previousToken,
   ]);
 
   const onLogin = (event) => {

package/src/components/theme/Logout/Logout.jsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { defineMessages, useIntl } from 'react-intl';
 import qs from 'query-string';
-import { Login, Toast } from '@plone/volto/components';
+import { Toast } from '@plone/volto/components';
 import { logout, purgeMessages } from '@plone/volto/actions';
 import { toast } from 'react-toastify';
 
@@ -55,7 +55,7 @@ const Logout = ({ location }) => {
     }
   }, [history, returnUrl, intl, token]);
 
-  return <Login location={{ query: location.query }} isLogout={true} />;
+  return '';
 };
 
 export default Logout;

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

@@ -151,13 +151,13 @@
 .ui.form .inline.field .link-form-container {
   .wrapper {
     display: flex;
-    border-bottom: 1px solid @lightGreyBorderColor;
 
     .ui.input.input-anchorlink-theme {
       vertical-align: unset;
 
       input {
-        height: unset;
+        width: 100%;
+        height: unset; // input is only 40px and form.overrides sets height to 60px
       }
     }
   }

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

@@ -446,6 +446,7 @@ div.image-upload-widget-image {
   text-align: center;
 
   .toolbar-wrapper {
+    position: relative;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
@@ -726,10 +727,22 @@ div.image-upload-widget-image {
 
 .link-form-container {
   .inline.field .wrapper {
-    min-height: initial;
+    width: 270px; // needed to ensure placeholder shows and buttons are aligned to the right
+    min-height: initial; // overrides .input.field .wrapper
+    justify-content: space-between;
     border-bottom: none;
   }
 
+  .ui.input-anchorlink-theme {
+    width: 100% !important; // overrides form.less width: auto
+    max-width: 81%; // needed so buttons don't shift to the right when value is present
+    margin-left: 0 !important; // overrides .block .toolbar-inner .ui.input
+  }
+
+  .ui.buttons {
+    width: auto; // for Add Link popup button to be aligned to the right
+  }
+
   button {
     padding: 0;
     border: 0;
@@ -743,10 +756,6 @@ div.image-upload-widget-image {
       outline: none;
     }
   }
-
-  .ui.input {
-    min-width: 250px;
-  }
 }
 
 .blocks-chooser {

package/types/components/theme/Logout/Logout.d.ts

@@ -1,4 +1,4 @@
 export default Logout;
 declare function Logout({ location }: {
     location: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): string;