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

package/.changelog.draft

@@ -1,7 +1,9 @@
-## 1.1.0 (2026-10-07)
+## 1.2.0 (2026-10-12)
+
 
 ### Internal
 
-- Updated according to the figma-design and improved styles for usage with the distributions @TimoBroeskamp 
+- 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,14 @@
 
 <!-- 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

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.1.0",
+  "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/registry": "3.0.0-alpha.9",
-    "@plone/types": "2.0.0-alpha.14"
+    "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,4 +1,3 @@
-@import '~react-advanced-cropper/dist/style.css';
 @import '../../../theme/variables';
 @import '../../../theme/constants';
 

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