@plone-collective/volto-image-editor 1.0.0-alpha.1

package/locales/es/LC_MESSAGES/volto.po

@@ -0,0 +1,194 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2023-05-09 11:45-0400\n"
+"PO-Revision-Date: 2023-05-10 11:34-0400\n"
+"Last-Translator: Leonardo J. Caballero G. <leonardocaballero@gmail.com>\n"
+"Language: es\n"
+"Language-Team: ES <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: es\n"
+"Language-Name: Español\n"
+"Domain: volto\n"
+"X-Is-Fallback-For: es-ar es-bo es-cl es-co es-cr es-do es-ec es-es es-sv es-gt es-hn es-mx es-ni es-pa es-py es-pe es-pr es-us es-uy es-ve\n"
+"X-Generator: Poedit 2.2.1\n"
+
+#. Default: "Aspect Ratio"
+#: components/ImageEditor/components/SettingsModal
+msgid "Aspect Ratio"
+msgstr ""
+
+#. Default: "Choose a file"
+#: components/Widgets/FileWidget
+msgid "Choose a file"
+msgstr ""
+
+#. Default: "Circle"
+#: components/ImageEditor/components/SettingsModal
+msgid "Circle"
+msgstr ""
+
+#. Default: "Drop file here to replace the existing file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to replace the existing file"
+msgstr ""
+
+#. Default: "Drop file here to upload a new file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to upload a new file"
+msgstr ""
+
+#. Default: "Drop files here ..."
+#: components/Widgets/FileWidget
+msgid "Drop files here ..."
+msgstr ""
+
+#. Default: "Edit image"
+#: components/ImageEditor/ImageEditorWrapper
+msgid "Edit image"
+msgstr ""
+
+#. Default: "Editor Settings"
+#: components/ImageEditor/components/SettingsModal
+msgid "Editor Settings"
+msgstr ""
+
+#. Default: "File is not of the accepted type {accept}"
+#: components/Widgets/FileWidget
+msgid "File is not of the accepted type {accept}"
+msgstr ""
+
+#. Default: "Fill"
+#: components/ImageEditor/components/SettingsModal
+msgid "Fill Area"
+msgstr ""
+
+#. Default: "Fit"
+#: components/ImageEditor/components/SettingsModal
+msgid "Fit Area"
+msgstr ""
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal
+msgid "Free aspect ratio"
+msgstr ""
+
+#. Default: "Image Restriction"
+#: components/ImageEditor/components/SettingsModal
+msgid "Image Restriction"
+msgstr ""
+
+#. Default: "2:1"
+#: components/ImageEditor/components/SettingsModal
+msgid "Landscape (2:1)"
+msgstr ""
+
+#. Default: "Max height"
+#: components/ImageEditor/components/SettingsModal
+msgid "Max height"
+msgstr ""
+
+#. Default: "Max width"
+#: components/ImageEditor/components/SettingsModal
+msgid "Max width"
+msgstr ""
+
+#. Default: "Maximum Crop Dimensions"
+#: components/ImageEditor/components/SettingsModal
+msgid "Maximum Crop Dimensions"
+msgstr ""
+
+#. Default: "Min height"
+#: components/ImageEditor/components/SettingsModal
+msgid "Min height"
+msgstr ""
+
+#. Default: "Min width"
+#: components/ImageEditor/components/SettingsModal
+msgid "Min width"
+msgstr ""
+
+#. Default: "Minimum Dimensions"
+#: components/ImageEditor/components/SettingsModal
+msgid "Minimum Dimensions"
+msgstr ""
+
+#. Default: "9:16"
+#: components/ImageEditor/components/SettingsModal
+msgid "Mobile (9:16)"
+msgstr ""
+
+#. Default: "4:3"
+#: components/ImageEditor/components/SettingsModal
+msgid "Monitor (4:3)"
+msgstr ""
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal
+msgid "No Restriction"
+msgstr ""
+
+#. Default: "3:4"
+#: components/ImageEditor/components/SettingsModal
+msgid "Photo (3:4)"
+msgstr ""
+
+#. Default: "1:2"
+#: components/ImageEditor/components/SettingsModal
+msgid "Portrait (1:2)"
+msgstr ""
+
+#. Default: "Rectangle"
+#: components/ImageEditor/components/SettingsModal
+msgid "Rectangle"
+msgstr ""
+
+#. Default: "Replace existing file"
+#: components/Widgets/FileWidget
+msgid "Replace existing file"
+msgstr ""
+
+#. Default: "Reset rotation and flip"
+#: components/ImageEditor/components/Navigation
+msgid "Reset rotation and flip"
+msgstr ""
+
+#. Default: "1:1"
+#: components/ImageEditor/components/SettingsModal
+msgid "Square (1:1)"
+msgstr ""
+
+#. Default: "Stencil"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil"
+msgstr ""
+
+#. Default: "Stencil Grid"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil Grid"
+msgstr ""
+
+#. Default: "Stencil Type"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil Type"
+msgstr ""
+
+#. 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 ""
+
+#. Default: "21:9"
+#: components/ImageEditor/components/SettingsModal
+msgid "Ultra Wide (21:9)"
+msgstr ""
+
+#. Default: "16:9"
+#: components/ImageEditor/components/SettingsModal
+msgid "Widescreen (16:9)"
+msgstr ""

package/locales/pt_BR/LC_MESSAGES/volto.po

@@ -0,0 +1,192 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2023-04-06T16:01:32.969Z\n"
+"PO-Revision-Date: \n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language: \n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"MIME-Version: 1.0\n"
+"Language-Code: pt_BR\n"
+"Language-Name: Português do Brasil\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+#. Default: "Aspect Ratio"
+#: components/ImageEditor/components/SettingsModal
+msgid "Aspect Ratio"
+msgstr ""
+
+#. Default: "Choose a file"
+#: components/Widgets/FileWidget
+msgid "Choose a file"
+msgstr ""
+
+#. Default: "Circle"
+#: components/ImageEditor/components/SettingsModal
+msgid "Circle"
+msgstr ""
+
+#. Default: "Drop file here to replace the existing file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to replace the existing file"
+msgstr ""
+
+#. Default: "Drop file here to upload a new file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to upload a new file"
+msgstr ""
+
+#. Default: "Drop files here ..."
+#: components/Widgets/FileWidget
+msgid "Drop files here ..."
+msgstr ""
+
+#. Default: "Edit image"
+#: components/ImageEditor/ImageEditorWrapper
+msgid "Edit image"
+msgstr ""
+
+#. Default: "Editor Settings"
+#: components/ImageEditor/components/SettingsModal
+msgid "Editor Settings"
+msgstr ""
+
+#. Default: "File is not of the accepted type {accept}"
+#: components/Widgets/FileWidget
+msgid "File is not of the accepted type {accept}"
+msgstr ""
+
+#. Default: "Fill"
+#: components/ImageEditor/components/SettingsModal
+msgid "Fill Area"
+msgstr ""
+
+#. Default: "Fit"
+#: components/ImageEditor/components/SettingsModal
+msgid "Fit Area"
+msgstr ""
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal
+msgid "Free aspect ratio"
+msgstr ""
+
+#. Default: "Image Restriction"
+#: components/ImageEditor/components/SettingsModal
+msgid "Image Restriction"
+msgstr ""
+
+#. Default: "2:1"
+#: components/ImageEditor/components/SettingsModal
+msgid "Landscape (2:1)"
+msgstr ""
+
+#. Default: "Max height"
+#: components/ImageEditor/components/SettingsModal
+msgid "Max height"
+msgstr ""
+
+#. Default: "Max width"
+#: components/ImageEditor/components/SettingsModal
+msgid "Max width"
+msgstr ""
+
+#. Default: "Maximum Crop Dimensions"
+#: components/ImageEditor/components/SettingsModal
+msgid "Maximum Crop Dimensions"
+msgstr ""
+
+#. Default: "Min height"
+#: components/ImageEditor/components/SettingsModal
+msgid "Min height"
+msgstr ""
+
+#. Default: "Min width"
+#: components/ImageEditor/components/SettingsModal
+msgid "Min width"
+msgstr ""
+
+#. Default: "Minimum Dimensions"
+#: components/ImageEditor/components/SettingsModal
+msgid "Minimum Dimensions"
+msgstr ""
+
+#. Default: "9:16"
+#: components/ImageEditor/components/SettingsModal
+msgid "Mobile (9:16)"
+msgstr ""
+
+#. Default: "4:3"
+#: components/ImageEditor/components/SettingsModal
+msgid "Monitor (4:3)"
+msgstr ""
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal
+msgid "No Restriction"
+msgstr ""
+
+#. Default: "3:4"
+#: components/ImageEditor/components/SettingsModal
+msgid "Photo (3:4)"
+msgstr ""
+
+#. Default: "1:2"
+#: components/ImageEditor/components/SettingsModal
+msgid "Portrait (1:2)"
+msgstr ""
+
+#. Default: "Rectangle"
+#: components/ImageEditor/components/SettingsModal
+msgid "Rectangle"
+msgstr ""
+
+#. Default: "Replace existing file"
+#: components/Widgets/FileWidget
+msgid "Replace existing file"
+msgstr ""
+
+#. Default: "Reset rotation and flip"
+#: components/ImageEditor/components/Navigation
+msgid "Reset rotation and flip"
+msgstr ""
+
+#. Default: "1:1"
+#: components/ImageEditor/components/SettingsModal
+msgid "Square (1:1)"
+msgstr ""
+
+#. Default: "Stencil"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil"
+msgstr ""
+
+#. Default: "Stencil Grid"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil Grid"
+msgstr ""
+
+#. Default: "Stencil Type"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil Type"
+msgstr ""
+
+#. 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 ""
+
+#. Default: "21:9"
+#: components/ImageEditor/components/SettingsModal
+msgid "Ultra Wide (21:9)"
+msgstr ""
+
+#. Default: "16:9"
+#: components/ImageEditor/components/SettingsModal
+msgid "Widescreen (16:9)"
+msgstr ""

package/locales/volto.pot

@@ -0,0 +1,189 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2025-10-16T17:39:09.551Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"MIME-Version: 1.0\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+#. Default: "Aspect Ratio"
+#: components/ImageEditor/components/SettingsModal
+msgid "Aspect Ratio"
+msgstr ""
+
+#. Default: "Choose a file"
+#: components/Widgets/FileWidget
+msgid "Choose a file"
+msgstr ""
+
+#. Default: "Circle"
+#: components/ImageEditor/components/SettingsModal
+msgid "Circle"
+msgstr ""
+
+#. Default: "Drop file here to replace the existing file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to replace the existing file"
+msgstr ""
+
+#. Default: "Drop file here to upload a new file"
+#: components/Widgets/FileWidget
+msgid "Drop file here to upload a new file"
+msgstr ""
+
+#. Default: "Drop files here ..."
+#: components/Widgets/FileWidget
+msgid "Drop files here ..."
+msgstr ""
+
+#. Default: "Edit image"
+#: components/ImageEditor/ImageEditorWrapper
+msgid "Edit image"
+msgstr ""
+
+#. Default: "Editor Settings"
+#: components/ImageEditor/components/SettingsModal
+msgid "Editor Settings"
+msgstr ""
+
+#. Default: "File is not of the accepted type {accept}"
+#: components/Widgets/FileWidget
+msgid "File is not of the accepted type {accept}"
+msgstr ""
+
+#. Default: "Fill"
+#: components/ImageEditor/components/SettingsModal
+msgid "Fill Area"
+msgstr ""
+
+#. Default: "Fit"
+#: components/ImageEditor/components/SettingsModal
+msgid "Fit Area"
+msgstr ""
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal
+msgid "Free aspect ratio"
+msgstr ""
+
+#. Default: "Image Restriction"
+#: components/ImageEditor/components/SettingsModal
+msgid "Image Restriction"
+msgstr ""
+
+#. Default: "2:1"
+#: components/ImageEditor/components/SettingsModal
+msgid "Landscape (2:1)"
+msgstr ""
+
+#. Default: "Max height"
+#: components/ImageEditor/components/SettingsModal
+msgid "Max height"
+msgstr ""
+
+#. Default: "Max width"
+#: components/ImageEditor/components/SettingsModal
+msgid "Max width"
+msgstr ""
+
+#. Default: "Maximum Crop Dimensions"
+#: components/ImageEditor/components/SettingsModal
+msgid "Maximum Crop Dimensions"
+msgstr ""
+
+#. Default: "Min height"
+#: components/ImageEditor/components/SettingsModal
+msgid "Min height"
+msgstr ""
+
+#. Default: "Min width"
+#: components/ImageEditor/components/SettingsModal
+msgid "Min width"
+msgstr ""
+
+#. Default: "Minimum Dimensions"
+#: components/ImageEditor/components/SettingsModal
+msgid "Minimum Dimensions"
+msgstr ""
+
+#. Default: "9:16"
+#: components/ImageEditor/components/SettingsModal
+msgid "Mobile (9:16)"
+msgstr ""
+
+#. Default: "4:3"
+#: components/ImageEditor/components/SettingsModal
+msgid "Monitor (4:3)"
+msgstr ""
+
+#. Default: "Free"
+#: components/ImageEditor/components/SettingsModal
+msgid "No Restriction"
+msgstr ""
+
+#. Default: "3:4"
+#: components/ImageEditor/components/SettingsModal
+msgid "Photo (3:4)"
+msgstr ""
+
+#. Default: "1:2"
+#: components/ImageEditor/components/SettingsModal
+msgid "Portrait (1:2)"
+msgstr ""
+
+#. Default: "Rectangle"
+#: components/ImageEditor/components/SettingsModal
+msgid "Rectangle"
+msgstr ""
+
+#. Default: "Replace existing file"
+#: components/Widgets/FileWidget
+msgid "Replace existing file"
+msgstr ""
+
+#. Default: "Reset rotation and flip"
+#: components/ImageEditor/components/Navigation
+msgid "Reset rotation and flip"
+msgstr ""
+
+#. Default: "1:1"
+#: components/ImageEditor/components/SettingsModal
+msgid "Square (1:1)"
+msgstr ""
+
+#. Default: "Stencil"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil"
+msgstr ""
+
+#. Default: "Stencil Grid"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil Grid"
+msgstr ""
+
+#. Default: "Stencil Type"
+#: components/ImageEditor/components/SettingsModal
+msgid "Stencil Type"
+msgstr ""
+
+#. 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 ""
+
+#. Default: "21:9"
+#: components/ImageEditor/components/SettingsModal
+msgid "Ultra Wide (21:9)"
+msgstr ""
+
+#. Default: "16:9"
+#: components/ImageEditor/components/SettingsModal
+msgid "Widescreen (16:9)"
+msgstr ""

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@plone-collective/volto-image-editor",
+  "version": "1.0.0-alpha.1",
+  "description": "An image editor to be used with Plone and Volto.",
+  "main": "src/index.ts",
+  "license": "MIT",
+  "keywords": [
+    "volto-addon",
+    "volto",
+    "plone",
+    "react"
+  ],
+  "author": "Simples Consultoria",
+  "homepage": "https://github.com/collective/volto-image-editor#readme",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:collective/volto-image-editor"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "addons": [],
+  "dependencies": {
+    "context-filter-polyfill": "0.3.23",
+    "react-advanced-cropper": "0.20.1",
+    "react-icons": "^5.5.0",
+    "@plone/components": "4.0.0-alpha.0"
+  },
+  "peerDependencies": {
+    "advanced-cropper": "~0.17.1",
+    "classnames": "*",
+    "react": "18.2.0",
+    "react-aria-components": "*",
+    "react-dom": "18.2.0",
+    "@plone/types": "2.0.0-alpha.5",
+    "@plone/registry": "3.0.0-alpha.5"
+  },
+  "devDependencies": {
+    "@types/node": "^20.2.5",
+    "release-it": "^19.0.5",
+    "@plone/scripts": "4.0.0-alpha.2"
+  },
+  "scripts": {
+    "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
+    "dry-release": "release-it --dry-run",
+    "release": "release-it",
+    "release-major-alpha": "release-it major --preRelease=alpha",
+    "release-alpha": "release-it --preRelease=alpha"
+  }
+}

package/src/components/ImageEditor/ImageEditor.scss

@@ -0,0 +1,59 @@
+@import '~react-advanced-cropper/dist/style.css';
+@import '../../theme/constants';
+
+.image-editor {
+  width: 100%;
+  border: solid 1px #2b2a30;
+  color: $theme-color;
+  &__preview {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 45px;
+    height: 45px;
+    border: solid 1px #2b2a30;
+    border-radius: 50%;
+    background: black;
+  }
+  &__cropper {
+    position: relative;
+    display: flex;
+    height: 500px;
+    max-height: 100vh;
+    align-items: center;
+    justify-content: center;
+    background: #0f0e13;
+  }
+  &__slider {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    width: 100%;
+    transform: translateX(-50%);
+  }
+  &__cropper-overlay {
+    transition: 0.5s;
+    &--faded {
+      color: rgba(black, 0.9);
+    }
+  }
+  &__service {
+    position: absolute;
+    left: -100%;
+    pointer-events: none;
+  }
+  &__reset-button {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: rgba(white, 0.1);
+    &:hover {
+      background: rgba(white, 0.2);
+      fill: $theme-color;
+    }
+    &--hidden {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+}