Merge branch 'main' into toolbar_handler_color_for_homepage

.github/workflows/docs-rtd-pr-preview.yml

@@ -6,8 +6,10 @@ on:
       - opened
     # Execute this action only on PRs that touch
     # documentation files.
-    # paths:
-    #   - "docs/**"
+    paths:
+      - "docs/source/**"
+      - .readthedocs.yaml
+      - requirements-docs.txt
 
 permissions:
   pull-requests: write

docs/source/release-notes/index.md

@@ -17,6 +17,39 @@ 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
+
+- Fix aria-label of items that are `folderish` in ObjectBrowserNav component when performing item search. Previously it said `Select item.title` now `Browse item.title`. This brings it in line with the aria-label when not performing an item search. @sneridagh [#6150](https://github.com/plone/volto/issues/6150)
+
+### Internal
+
+- Automatically add a PLIP issue to the PLIP project board. @stevepiercy [#6134](https://github.com/plone/volto/issues/6134)
+
+### Documentation
+
+- Fix link to renamed `src/constants/Languages.cjs`. @stevepiercy [#6135](https://github.com/plone/volto/issues/6135)
+
 ## 18.0.0-alpha.39 (2024-06-28)
 
 ### Bugfix

packages/volto-slate/CHANGELOG.md

@@ -8,6 +8,20 @@
 
 <!-- towncrier release notes start -->
 
+## 18.0.0-alpha.17 (2024-07-05)
+
+### Feature
+
+- Use the unused `toggleButton` prop in `PositionedToolbar` to render the toolbar in a different `portal` target falling back to `document.body` if `toggleButton` is not provided. @ichim-david
+
+  When `toggleButton` is provided as a `portal` target, allow negative left positioning except when the target is `document.body` to prevent the toolbar going off-screen and avoid breaking changes. @ichim-david [#6159](https://github.com/plone/volto/issues/6159)
+
+## 18.0.0-alpha.16 (2024-07-03)
+
+### Internal
+
+- Fix dependencies for the package @sneridagh [#6148](https://github.com/plone/volto/issues/6148)
+
 ## 18.0.0-alpha.15 (2024-06-28)
 
 ### Internal

packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "18.0.0-alpha.15",
+  "version": "18.0.0-alpha.17",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -28,7 +28,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-intersection-observer": "9.1.0",
+    "react-intl": "3.12.1",
+    "react-redux": "8.1.2",
+    "react-router-dom": "5.2.0",
+    "react-toastify": "5.5.0",
     "redux-mock-store": "1.5.4",
+    "semantic-ui-react": "2.1.5",
     "slate": "0.100.0",
     "slate-history": "0.100.0",
     "slate-hyperscript": "0.100.0",

packages/volto-slate/src/editor/less/editor.less

@@ -27,7 +27,7 @@
     }
 
     .link-form-container {
-      margin-left: 5px;
+      margin-left: 2px;
       display: flex; 
       align-items: center;
     }
@@ -53,6 +53,7 @@
     font-family: 'Poppins', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-size: 1rem;
     font-weight: normal;
+    min-width: 300px; // needed for image widget slate toolbar
 
     .expando {
       flex-grow: 1;

packages/volto-slate/src/editor/ui/PositionedToolbar.jsx

@@ -7,12 +7,19 @@ const PositionedToolbar = ({ toggleButton, className, children, position }) => {
   // TODO: "position" is actually an object like `{ style: {} }`
   // To be renamed as "attributes" or "attrs"
   const ref = React.useRef();
+  const portalTarget = toggleButton || document.body;
 
   React.useEffect(() => {
     const el = ref.current;
 
     const { style } = position || {};
-    const left = `${Math.max(style.left - el.offsetWidth / 2, 0)}px`;
+    // allow negative left positioning when portal isn't document.body
+    // we need to use Math.max to avoid Slate AddLink popup going off screen
+    // and it adds the toolbar to the body
+    const left =
+      portalTarget === document.body
+        ? `${Math.max(style.left - el.offsetWidth / 2, 0)}px`
+        : `${style.left - el.offsetWidth / 2}px`;
     const top = `${style.top - el.offsetHeight}px`;
 
     el.style.opacity = style.opacity;
@@ -24,7 +31,7 @@ const PositionedToolbar = ({ toggleButton, className, children, position }) => {
     <BasicToolbar className={`slate-inline-toolbar ${className}`} ref={ref}>
       {children}
     </BasicToolbar>,
-    document.body,
+    portalTarget,
   );
 };
 

packages/volto/CHANGELOG.md

@@ -17,6 +17,39 @@ 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
+
+- Fix aria-label of items that are `folderish` in ObjectBrowserNav component when performing item search. Previously it said `Select item.title` now `Browse item.title`. This brings it in line with the aria-label when not performing an item search. @sneridagh [#6150](https://github.com/plone/volto/issues/6150)
+
+### Internal
+
+- Automatically add a PLIP issue to the PLIP project board. @stevepiercy [#6134](https://github.com/plone/volto/issues/6134)
+
+### Documentation
+
+- Fix link to renamed `src/constants/Languages.cjs`. @stevepiercy [#6135](https://github.com/plone/volto/issues/6135)
+
 ## 18.0.0-alpha.39 (2024-06-28)
 
 ### Bugfix

packages/volto/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.0.0-alpha.39",
+  "version": "18.0.0-alpha.41",
   "repository": {
     "type": "git",
     "url": "[email protected]:plone/volto.git"

packages/volto/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)}

packages/volto/src/components/manage/AnchorPlugin/useLinkEditor.jsx

@@ -16,50 +16,50 @@ 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}
             data={{ url: value || '' }}
             theme={{}}
             objectBrowserPickerType={objectBrowserPickerType}
             onChangeValue={(url) => {
-              savedPosition.current = null;
               setShowLinkEditor(false);
               onChange(id, url);
             }}
             onClear={() => {}}
             onOverrideContent={(c) => {
-              savedPosition.current = null;
               setShowLinkEditor(false);
             }}
           />

packages/volto/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]}

packages/volto/src/components/manage/Sidebar/ObjectBrowserNav.jsx

@@ -60,9 +60,11 @@ const ObjectBrowserNav = ({
                 onClick={(e) => handleClickOnItem(item)}
                 onDoubleClick={() => handleDoubleClickOnItem(item)}
                 className="image-preview"
-                aria-label={`${intl.formatMessage(messages.select)} ${
-                  item.title
-                }`}
+                aria-label={
+                  item.is_folderish && mode === 'image'
+                    ? `${intl.formatMessage(messages.browse)} ${item.title}`
+                    : `${intl.formatMessage(messages.select)} ${item.title}`
+                }
               >
                 {item['@type'] === 'Image' ? (
                   <img

packages/volto/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;