@plone-collective/volto-image-editor 1.0.0-alpha.2 → 1.0.1

package/.changelog.draft

@@ -1,8 +1,12 @@
-## 1.0.0-alpha.2 (2025-10-29)
+## 1.0.1 (2026-03-03)
 
 ### Feature
 
-- Update README to include a small demo of @plone-collective/volto-image-editor. @humanaice [#4](https://github.com/collective/volto-image-editor/issue/4)
-- Add Storybook stories for all components. @humanaice [#5](https://github.com/collective/volto-image-editor/issue/5)
+- 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 
 
 

package/CHANGELOG.md

@@ -8,6 +8,34 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.1 (2026-03-03)
+
+### 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 
+
+## 1.0.0 (2025-12-08)
+
+### Feature
+
+- CA, ES translations. @sneridagh [#16](https://github.com/collective/volto-image-editor/issue/16)
+- DE translations. @sneridagh [#17](https://github.com/collective/volto-image-editor/issue/17)
+- Allow overriding the default settings for an ImageEditor per project. @ericof [#18](https://github.com/collective/volto-image-editor/issue/18)
+
+### Internal
+
+- Added portuguese translation & Update translation files. @humanaice [#3](https://github.com/collective/volto-image-editor/issue/3)
+- Fixed circle crop. @humanaice [#8](https://github.com/collective/volto-image-editor/issue/8)
+- Updated to use plone/components and removed react-icons + add cypress. @humanaice [#12](https://github.com/collective/volto-image-editor/issue/12)
+- Registering as custom widget and removing shadow. @humanaice [#14](https://github.com/collective/volto-image-editor/issue/14)
+- Changed the CSS to facilitate future modifications, with variables and new icons. @humanaice 
+- Updated Slider to make it more simple and intuitive. @humanaice 
+
 ## 1.0.0-alpha.2 (2025-10-29)
 
 ### Feature

package/README.md

@@ -41,6 +41,80 @@ To install this add-on, edit the `package.json` of your policy package (usually
 
 After editing, follow your project's standard process to update dependencies and rebuild.
 
+## ⚙️ Configure Default Settings
+
+This add-on allows you to customize the image editor's behavior by modifying default settings. All settings are optional and can be configured in your Volto project's add-on configuration.
+
+### Available Settings
+
+The following table describes all available settings for the image editor:
+
+| Setting | Description | Type | Default Value |
+|---------|-------------|------|----------------|
+| aspectRatio | The aspect ratio constraint for cropping (width:height format) | `string` | `'16:9'` |
+| imageRestriction | How the image should be restricted within the crop area | `string` | `'fit-area'` |
+| stencilType | The shape of the crop stencil/box | `string` | `'rectangle'` |
+| minWidth | Minimum width for the crop area in pixels | `number` | `50` |
+| minHeight | Minimum height for the crop area in pixels | `number` | `50` |
+| maxCropWidth | Maximum width for the crop area in pixels | `undefined \| number` | `undefined` |
+| maxCropHeight | Maximum height for the crop area in pixels | `undefined \| number` | `undefined` |
+| scalable | Whether the image can be scaled/zoomed | `boolean` | `true` |
+| stencilGrid | Whether to display a grid overlay on the crop stencil | `boolean` | `true` |
+| minScale | Minimum scale factor for zooming | `number` | `0.1` |
+| maxScale | Maximum scale factor for zooming | `number` | `3` |
+
+### Configuration Examples
+
+#### Single Setting Modification
+
+To modify a single setting, update `config.settings.imageEditor` in your add-on's configuration file:
+
+```typescript
+import type { ConfigType } from '@plone/registry';
+
+function applyConfig(config: ConfigType) {
+  // Modify the default aspect ratio to 1:1
+  config.settings.imageEditor.aspectRatio = '1:1';
+
+  return config;
+}
+
+export default applyConfig;
+```
+
+#### Multiple Settings Modification
+
+If you need to modify multiple settings, we recommend using the `ImageSettings` type definition for type safety and better code documentation:
+
+```typescript
+import type { ConfigType } from '@plone/registry';
+import type { ImageSettings } from '@plone-collective/volto-image-editor/types/ImageSettings';
+
+function applyConfig(config: ConfigType) {
+  // Define your custom image editor settings
+  const imageEditorSettings: ImageSettings = {
+    aspectRatio: '1:1',
+    imageRestriction: 'fit-area',
+    stencilType: 'rectangle',
+    minWidth: 100,
+    minHeight: 100,
+    maxCropWidth: undefined,
+    maxCropHeight: undefined,
+    scalable: true,
+    stencilGrid: true,
+    minScale: 0.1,
+    maxScale: 3,
+  };
+
+  // Apply the custom settings
+  config.settings.imageEditor = imageEditorSettings;
+
+  return config;
+}
+
+export default applyConfig;
+```
+
 ## 🧪 Test Installation
 
 Visit http://localhost:3000/ in a browser, log in, and verify that the image editor features are available in the File widget.

package/babel.config.js

@@ -1,6 +1,6 @@
 module.exports = function (api) {
   api.cache(true);
-  const presets = ['razzle'];
+  const presets = ['@plone/razzle'];
   const plugins = [
     [
       'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work

package/locales/ca/LC_MESSAGES/volto.po

@@ -0,0 +1,192 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2025-11-04T14:12:41.399Z\n"
+"PO-Revision-Date: 2025-11-04 00:00+0000\n"
+"Last-Translator: Víctor Fernández de Alba <sneridagh@gmail.com>\n"
+"Language: ca\n"
+"Language-Team: CA <LL@li.org>\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"Preferred-Encodings: utf-8\n"
+"MIME-Version: 1.0\n"
+"Language-Code: ca\n"
+"Language-Name: Català\n"
+"Domain: volto\n"
+
+#. Default: "Aspect Ratio"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Aspect Ratio"
+msgstr "Relació d'aspecte"
+
+#. Default: "Choose a file"
+#: components/Widgets/FileWidget
+msgid "Choose a file"
+msgstr "Tria un fitxer"
+
+#. Default: "Circle"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Circle"
+msgstr "Cercle"
+
+#. Default: "Drop file here to replace the existing file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to replace the existing file"
+msgstr "Arrossega el fitxer aquí per substituir el fitxer existent"
+
+#. Default: "Drop file here to upload a new file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to upload a new file"
+msgstr "Arrossega el fitxer aquí per pujar un fitxer nou"
+
+#. Default: "Drop files here ..."
+#: components/Widgets/FileWidget
+msgid "Drop files here ..."
+msgstr "Arrossega fitxers aquí ..."
+
+#. Default: "Edit image"
+#: components/ImageEditor/Wrapper/ImageEditorWrapper
+msgid "Edit image"
+msgstr "Edita la imatge"
+
+#. Default: "Editor Settings"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Editor Settings"
+msgstr "Ajustos de l'editor"
+
+#. Default: "File is not of the accepted type {accept}"
+#: components/Widgets/FileWidget
+msgid "File is not of the accepted type {accept}"
+msgstr "El fitxer no és d'un tipus acceptat: {accept}"
+
+#. Default: "Fill"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Fill Area"
+msgstr "Omple l'àrea"
+
+#. Default: "Fit"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Fit Area"
+msgstr "Ajusta a l'àrea"
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Free aspect ratio"
+msgstr "Relació d'aspecte lliure"
+
+#. Default: "Image Restriction"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Image Restriction"
+msgstr "Restricció d'imatge"
+
+#. Default: "2:1"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Landscape (2:1)"
+msgstr "Apaïsat (2:1)"
+
+#. Default: "Max height"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Max height"
+msgstr "Alçada màxima"
+
+#. Default: "Max width"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Max width"
+msgstr "Amplada màxima"
+
+#. Default: "Maximum Crop Dimensions"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Maximum Crop Dimensions"
+msgstr "Dimensions màximes de retall"
+
+#. Default: "Min height"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Min height"
+msgstr "Alçada mínima"
+
+#. Default: "Min width"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Min width"
+msgstr "Amplada mínima"
+
+#. Default: "Minimum Dimensions"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Minimum Dimensions"
+msgstr "Dimensions mínimes"
+
+#. Default: "9:16"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Mobile (9:16)"
+msgstr "Mòbil (9:16)"
+
+#. Default: "4:3"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Monitor (4:3)"
+msgstr "Monitor (4:3)"
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "No Restriction"
+msgstr "Sense restricció"
+
+#. Default: "3:4"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Photo (3:4)"
+msgstr "Foto (3:4)"
+
+#. Default: "1:2"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Portrait (1:2)"
+msgstr "Retrat (1:2)"
+
+#. Default: "Rectangle"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Rectangle"
+msgstr "Rectangle"
+
+#. Default: "Replace existing file"
+#: components/Widgets/FileWidget
+msgid "Replace existing file"
+msgstr "Substitueix el fitxer existent"
+
+#. Default: "Reset rotation and flip"
+#: components/ImageEditor/components/Navigation/Navigation
+msgid "Reset rotation and flip"
+msgstr "Restableix la rotació i el volteig"
+
+#. Default: "1:1"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Square (1:1)"
+msgstr "Quadrat (1:1)"
+
+#. Default: "Stencil"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Stencil"
+msgstr "Plantilla"
+
+#. Default: "Stencil Grid"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Stencil Grid"
+msgstr "Quadrícula de plantilla"
+
+#. Default: "Stencil Type"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Stencil Type"
+msgstr "Tipus de plantilla"
+
+#. Default: "The file you uploaded exceeded the maximum allowed size of {size} bytes"
+#: components/Widgets/FileWidget
+msgid "The file you uploaded exceeded the maximum allowed size of {size} bytes"
+msgstr "El fitxer que has pujat supera la mida màxima permesa de {size} bytes"
+
+#. Default: "21:9"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Ultra Wide (21:9)"
+msgstr "Ultrapanoràmic (21:9)"
+
+#. Default: "16:9"
+#: components/ImageEditor/components/SettingsModal/SettingsModal
+msgid "Widescreen (16:9)"
+msgstr "Panoràmic (16:9)"

package/locales/de/LC_MESSAGES/volto.po

@@ -1,187 +1,192 @@
 msgid ""
 msgstr ""
-"Project-Id-Version: \n"
+"Project-Id-Version: Plone\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: \n"
-"PO-Revision-Date: \n"
+"POT-Creation-Date: 2025-11-04T14:12:41.399Z\n"
+"PO-Revision-Date: 2025-11-04 00:00+0000\n"
 "Last-Translator: \n"
 "Language: de\n"
-"Language-Team: \n"
-"Content-Type: \n"
-"Content-Transfer-Encoding: \n"
-"Plural-Forms: \n"
+"Language-Team: DE <LL@li.org>\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"Preferred-Encodings: utf-8\n"
+"MIME-Version: 1.0\n"
+"Language-Code: de\n"
+"Language-Name: Deutsch\n"
+"Domain: volto\n"
 
 #. Default: "Aspect Ratio"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Aspect Ratio"
-msgstr ""
+msgstr "Seitenverhältnis"
 
 #. Default: "Choose a file"
 #: components/Widgets/FileWidget
 msgid "Choose a file"
-msgstr ""
+msgstr "Datei auswählen"
 
 #. Default: "Circle"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Circle"
-msgstr ""
+msgstr "Kreis"
 
 #. Default: "Drop file here to replace the existing file"
 #: components/Widgets/FileWidget
 msgid "Drop file here to replace the existing file"
-msgstr ""
+msgstr "Datei hier ablegen, um die bestehende zu ersetzen"
 
 #. Default: "Drop file here to upload a new file"
 #: components/Widgets/FileWidget
 msgid "Drop file here to upload a new file"
-msgstr ""
+msgstr "Datei hier ablegen, um eine neue hochzuladen"
 
 #. Default: "Drop files here ..."
 #: components/Widgets/FileWidget
 msgid "Drop files here ..."
-msgstr ""
+msgstr "Dateien hier ablegen ..."
 
 #. Default: "Edit image"
-#: components/ImageEditor/ImageEditorWrapper
+#: components/ImageEditor/Wrapper/ImageEditorWrapper
 msgid "Edit image"
-msgstr ""
+msgstr "Bild bearbeiten"
 
 #. Default: "Editor Settings"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Editor Settings"
-msgstr ""
+msgstr "Editor-Einstellungen"
 
 #. Default: "File is not of the accepted type {accept}"
 #: components/Widgets/FileWidget
 msgid "File is not of the accepted type {accept}"
-msgstr ""
+msgstr "Die Datei ist kein akzeptierter Typ: {accept}"
 
 #. Default: "Fill"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Fill Area"
-msgstr ""
+msgstr "Bereich füllen"
 
 #. Default: "Fit"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Fit Area"
-msgstr ""
+msgstr "An Bereich anpassen"
 
 #. Default: "Free"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Free aspect ratio"
-msgstr ""
+msgstr "Freies Seitenverhältnis"
 
 #. Default: "Image Restriction"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Image Restriction"
-msgstr ""
+msgstr "Bildbeschränkung"
 
 #. Default: "2:1"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Landscape (2:1)"
-msgstr ""
+msgstr "Querformat (2:1)"
 
 #. Default: "Max height"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Max height"
-msgstr ""
+msgstr "Maximale Höhe"
 
 #. Default: "Max width"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Max width"
-msgstr ""
+msgstr "Maximale Breite"
 
 #. Default: "Maximum Crop Dimensions"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Maximum Crop Dimensions"
-msgstr ""
+msgstr "Maximale Zuschneidemaße"
 
 #. Default: "Min height"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Min height"
-msgstr ""
+msgstr "Minimale Höhe"
 
 #. Default: "Min width"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Min width"
-msgstr ""
+msgstr "Minimale Breite"
 
 #. Default: "Minimum Dimensions"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Minimum Dimensions"
-msgstr ""
+msgstr "Minimale Abmessungen"
 
 #. Default: "9:16"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Mobile (9:16)"
-msgstr ""
+msgstr "Mobil (9:16)"
 
 #. Default: "4:3"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Monitor (4:3)"
-msgstr ""
+msgstr "Monitor (4:3)"
 
 #. Default: "Free"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "No Restriction"
-msgstr ""
+msgstr "Keine Einschränkung"
 
 #. Default: "3:4"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Photo (3:4)"
-msgstr ""
+msgstr "Foto (3:4)"
 
 #. Default: "1:2"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Portrait (1:2)"
-msgstr ""
+msgstr "Hochformat (1:2)"
 
 #. Default: "Rectangle"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Rectangle"
-msgstr ""
+msgstr "Rechteck"
 
 #. Default: "Replace existing file"
 #: components/Widgets/FileWidget
 msgid "Replace existing file"
-msgstr ""
+msgstr "Bestehende Datei ersetzen"
 
 #. Default: "Reset rotation and flip"
-#: components/ImageEditor/components/Navigation
+#: components/ImageEditor/components/Navigation/Navigation
 msgid "Reset rotation and flip"
-msgstr ""
+msgstr "Drehung und Spiegelung zurücksetzen"
 
 #. Default: "1:1"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Square (1:1)"
-msgstr ""
+msgstr "Quadrat (1:1)"
 
 #. Default: "Stencil"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Stencil"
-msgstr ""
+msgstr "Schablone"
 
 #. Default: "Stencil Grid"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Stencil Grid"
-msgstr ""
+msgstr "Schablonengitter"
 
 #. Default: "Stencil Type"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Stencil Type"
-msgstr ""
+msgstr "Schablonentyp"
 
 #. Default: "The file you uploaded exceeded the maximum allowed size of {size} bytes"
 #: components/Widgets/FileWidget
 msgid "The file you uploaded exceeded the maximum allowed size of {size} bytes"
-msgstr ""
+msgstr "Die hochgeladene Datei überschreitet die maximal zulässige Größe von {size} Bytes"
 
 #. Default: "21:9"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Ultra Wide (21:9)"
-msgstr ""
+msgstr "Ultrabreit (21:9)"
 
 #. Default: "16:9"
-#: components/ImageEditor/components/SettingsModal
+#: components/ImageEditor/components/SettingsModal/SettingsModal
 msgid "Widescreen (16:9)"
-msgstr ""
+msgstr "Breitbild (16:9)"