@plone-collective/volto-image-editor 1.0.1 → 1.2.0

package/.changelog.draft

@@ -1,12 +1,9 @@
-## 1.0.1 (2026-03-03)
+## 1.2.0 (2026-10-12)
 
-### Feature
-
-- Added support for lazyload the widget. @sneridagh 
 
 ### Internal
 
-- Fixed Acceptance Tests and added them to main.yml. @humanaice [#23](https://github.com/collective/volto-image-editor/issue/23)
-- Use Volto 19a27. @sneridagh 
+- Fixed the image being displaced on first edit. @TimoBroeskamp [#27](https://github.com/collective/volto-image-editor/issues/27)
+- Updated the add-on boilerplate to the latest cookieplone-templates frontend add-on template: Volto 19.5.0, pnpm 10, Vitest for unit tests, and updated GitHub workflows. @ericof [#29](https://github.com/collective/volto-image-editor/issues/29)
 
 

package/CHANGELOG.md

@@ -8,6 +8,20 @@
 
 <!-- towncrier release notes start -->
 
+## 1.2.0 (2026-10-12)
+
+
+### Internal
+
+- Fixed the image being displaced on first edit. @TimoBroeskamp [#27](https://github.com/collective/volto-image-editor/issues/27)
+- Updated the add-on boilerplate to the latest cookieplone-templates frontend add-on template: Volto 19.5.0, pnpm 10, Vitest for unit tests, and updated GitHub workflows. @ericof [#29](https://github.com/collective/volto-image-editor/issues/29)
+
+## 1.1.0 (2026-10-07)
+
+### Internal
+
+- Updated according to the figma-design and improved styles for usage with the distributions @TimoBroeskamp 
+
 ## 1.0.1 (2026-03-03)
 
 ### Feature

package/news/.changelog_template.jinja

@@ -0,0 +1,15 @@
+{% if sections[""] %}
+{% for category, val in definitions.items() if category in sections[""] %}
+
+### {{ definitions[category]['name'] }}
+
+{% for text, values in sections[""][category].items() %}
+- {{ text }} {{ values|join(', ') }}
+{% endfor %}
+
+{% endfor %}
+{% else %}
+No significant changes.
+
+
+{% endif %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone-collective/volto-image-editor",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "An image editor to be used with Plone and Volto.",
   "main": "src/index.ts",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "url": "https://github.com/sponsors/plone"
   },
   "bugs": {
-    "url": "https://github.com/collective/volto-image-edito/issues"
+    "url": "https://github.com/collective/volto-image-editor/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -33,21 +33,26 @@
   "dependencies": {
     "context-filter-polyfill": "0.3.23",
     "react-advanced-cropper": "0.20.1",
-    "@plone/components": "4.0.0-alpha.6"
+    "@plone/components": "4.2.2"
   },
   "peerDependencies": {
     "advanced-cropper": "~0.17.1",
     "classnames": "*",
-    "react": "18.2.0",
+    "react": "^18.2.0",
     "react-aria-components": "*",
-    "react-dom": "18.2.0",
-    "@plone/types": "2.0.0-alpha.14",
-    "@plone/registry": "3.0.0-alpha.9"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.2.0",
     "@types/node": "^20.2.5",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "release-it": "^19.0.5",
-    "@plone/scripts": "4.0.0-alpha.5"
+    "typescript": "^5.7.3",
+    "vitest": "^3.1.2",
+    "@plone/scripts": "4.0.2",
+    "@plone/registry": "3.0.3",
+    "@plone/types": "2.1.0"
   },
   "scripts": {
     "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",

package/src/components/ImageEditor/Editor/ImageEditor.scss

@@ -1,10 +1,26 @@
-@import '~react-advanced-cropper/dist/style.css';
 @import '../../../theme/variables';
 @import '../../../theme/constants';
 
+.image-widget .image-widget-cropper {
+  button {
+    padding: 20px 0px;
+    border: none;
+    color: rgba(0, 0, 0, 0.9);
+    text-decoration: underline;
+  }
+}
+
+.ui.grid.image-widget-grid .file-widget-dropzone img {
+  margin-top: 0px;
+}
+
 .image-editor {
+  display: grid;
   width: 100%;
+  height: 100%;
   color: $settings-header-color;
+  grid-template-columns: 100%;
+  grid-template-rows: 1fr 80px;
 
   &__preview {
     position: absolute;
@@ -19,7 +35,7 @@
 
   &__cropper {
     position: relative;
-    height: 500px;
+    height: 100%;
     max-height: 100vh;
     background: $color-gray-dark;
 

package/src/components/ImageEditor/Editor/ImageEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useLayoutEffect } from 'react';
+import React, { useState, useRef, useLayoutEffect, useEffect } from 'react';
 import cn from 'classnames';
 import {
   Cropper,
@@ -16,6 +16,9 @@ import { AdjustableCropperBackground } from '@plone-collective/volto-image-edito
 import { SettingsModal } from '@plone-collective/volto-image-editor/components/ImageEditor/components/SettingsModal/SettingsModal';
 import type { ImageSettings } from '@plone-collective/volto-image-editor/types/ImageSettings';
 import { ResetIcon } from '@plone-collective/volto-image-editor/icons/ResetIcon';
+// Plain CSS must not go through the SCSS loader chain: resolve-url-loader 5
+// (Volto 19.5) fails the CI build when an upstream loader gives no source map.
+import 'react-advanced-cropper/dist/style.css';
 import './ImageEditor.scss';
 
 if (typeof window !== 'undefined') {
@@ -24,6 +27,7 @@ if (typeof window !== 'undefined') {
 
 const ImageEditor = ({ src, onImageSave, onCancel }) => {
   const cropperRef = useRef<CropperRef>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const previewRef = useRef<CropperPreviewRef>(null);
 
   const [mode, setMode] = useState('crop');
@@ -105,6 +109,14 @@ const ImageEditor = ({ src, onImageSave, onCancel }) => {
     return () => clearTimeout(timer);
   }, [src]);
 
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => cropperRef.current?.refresh());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
   const onSave = () => {
     if (cropperRef.current) {
       const canvas = cropperRef.current.getCanvas();
@@ -213,7 +225,7 @@ const ImageEditor = ({ src, onImageSave, onCancel }) => {
 
   return (
     <div className={'image-editor'}>
-      <div className="image-editor__cropper">
+      <div ref={containerRef} className="image-editor__cropper">
         <Cropper
           src={src}
           ref={cropperRef}

package/src/components/ImageEditor/Wrapper/ImageEditorWrapper.scss

@@ -1,16 +1,18 @@
 @import '../../../theme/variables';
 
 .react-aria-ModalOverlay {
+  z-index: 150;
   .react-aria-Modal.image-cropper-modal {
-    width: 100%;
-    max-width: $editor-width;
+    width: 70vw;
+    max-width: unset;
+    height: 70vh;
     border: 0;
     background-color: $settings-header-bg;
 
     .react-aria-Dialog {
-      display: flex;
+      width: 100%;
+      height: 100%;
       align-items: center;
-      justify-content: center;
       padding: 0;
     }
   }

package/src/components/ImageEditor/Wrapper/ImageEditorWrapper.tsx

@@ -83,7 +83,7 @@ const ImageEditorWrapper: React.FC<ImageEditorWrapperProps> = ({
     <div className={`image-widget ${className || ''}`}>
       <div className="image-widget-cropper">
         <DialogTrigger>
-          <Button onPress={() => setOpen(true)}>
+          <Button download={false} onPress={() => setOpen(true)}>
             {buttonText || (
               <FormattedMessage id="Edit image" defaultMessage="Edit image" />
             )}

package/src/components/ImageEditor/components/Navigation/Navigation.scss

@@ -5,6 +5,7 @@
   display: flex;
   height: 100%;
   align-items: center;
+  align-self: flex-end;
   justify-content: space-between;
   padding: $image-editor-spacing-lg;
   border-top: solid 1px $image-editor-border-color;

package/src/components/ImageEditor/components/SettingsModal/SettingsModal.scss

@@ -33,14 +33,16 @@
   }
 
   &__content {
-    display: flex;
+    display: grid;
     overflow: hidden;
     width: 100%;
+    height: 100%;
     max-height: 100%;
-    flex-direction: column;
     animation: scaleIn $image-editor-transition-fast ease-out;
     background: $settings-body-bg;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0px 60px rgba(0, 0, 0, 0.5);
+    grid-template-columns: 100%;
+    grid-template-rows: 80px 1fr;
   }
 
   &__header {
@@ -60,7 +62,9 @@
   }
 
   &__close {
-    padding: $image-editor-spacing-xs $image-editor-spacing-sm;
+    display: grid;
+    align-self: center;
+    padding: $image-editor-spacing-sm;
     border: none;
     border-radius: $image-editor-border-radius-sm;
     background: transparent;
@@ -86,7 +90,6 @@
   }
 
   &__label {
-    display: block;
     margin-bottom: $image-editor-spacing-sm;
     color: $settings-body-color;
     font-size: 14px;

package/src/components/ImageEditor/components/SettingsModal/SettingsModal.tsx

@@ -32,6 +32,7 @@ import {
   RectangleStencilIcon,
   CircleStencilIcon,
 } from '@plone-collective/volto-image-editor/icons/StencilIcons';
+import BackSVG from '@plone/volto/icons/back.svg';
 import './SettingsModal.scss';
 
 const messages = defineMessages({
@@ -205,7 +206,12 @@ export const SettingsModal: FC<Props> = ({
                 className="image-editor-settings-modal__close"
                 onClick={onToggle}
               >
-                ✕
+                <Icon size="base">
+                  <svg
+                    {...BackSVG.attributes}
+                    dangerouslySetInnerHTML={{ __html: BackSVG.content }}
+                  />
+                </Icon>
               </Button>
             </div>
 

package/src/components/Widgets/FileWidget.tsx

@@ -150,6 +150,8 @@ const FileWidget = (props) => {
       <Grid className="image-widget-grid">
         <Grid.Row stretched>
           <Grid.Column stretched width={mainColumnWidth}>
+            {isImage && <ImageEditorWrapper value={value} setData={setData} />}
+
             <Dropzone
               onDrop={onDrop}
               {...(props.size ? { maxSize: props.size } : {})}
@@ -225,11 +227,6 @@ const FileWidget = (props) => {
               )}
             </div>
           </Grid.Column>
-          {isImage && (
-            <Grid.Column stretched width="2" className={'image-editor-cta'}>
-              <ImageEditorWrapper value={value} setData={setData} />
-            </Grid.Column>
-          )}
         </Grid.Row>
       </Grid>
     </FormFieldWrapper>

package/src/icons/svg/back.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+  <polygon fill-rule="evenodd" points="31 17 8.414 17 18.707 6.707 17.293 5.293 4.586 18 17.293 30.707 18.707 29.293 8.414 19 31 19"/>
+</svg>

package/src/theme/variables.scss

@@ -15,7 +15,7 @@ $nav-button-color-hover: $color-black !default;
 $nav-button-bg-active: $color-black !default;
 $nav-button-color-active: $color-white !default;
 
-$nav-button-close-color: $color-red !default;
+$nav-button-close-color: $color-gray-dark !default;
 
 $editor-button-bg: $color-gray-dark !default;
 $editor-button-color: $color-white !default;

package/towncrier.toml

@@ -3,9 +3,9 @@ filename = "CHANGELOG.md"
 directory = "news/"
 title_format = "## {version} ({project_date})"
 underlines = ["", "", ""]
-template = "./node_modules/@plone/scripts/templates/towncrier_template.jinja"
+template = "./news/.changelog_template.jinja"
 start_string = "<!-- towncrier release notes start -->\n"
-issue_format = "[#{issue}](https://github.com/collective/volto-image-editor/issue/{issue})"
+issue_format = "[#{issue}](https://github.com/collective/volto-image-editor/issues/{issue})"
 
 [[tool.towncrier.type]]
 directory = "breaking"
@@ -31,3 +31,8 @@ showcontent = true
 directory = "documentation"
 name = "Documentation"
 showcontent = true
+
+[[tool.towncrier.type]]
+directory = "tests"
+name = "Tests"
+showcontent = true

package/vitest.config.mjs

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+import voltoVitestConfig from '@plone/volto/vitest.config.mjs';
+import path from 'path';
+
+export default defineConfig({
+  ...voltoVitestConfig,
+  resolve: {
+    alias: {
+      '@plone/volto': path.resolve(__dirname, '../../core/packages/volto/src'), // Add paths accordingly
+      // 'promise-file-reader': require.resolve('promise-file-reader') // Add to identify dependency from package
+    },
+  },
+});