@uploadcare/file-uploader 1.7.0 → 1.9.0-alpha.0

package/blocks/LocalEditorImage/LocalEditorImage.js

@@ -0,0 +1,139 @@
+// @ts-check
+import { ActivityBlock } from '../../abstract/ActivityBlock.js';
+import { UploaderBlock } from '../../abstract/UploaderBlock.js';
+
+import 'tui-color-picker';
+import 'tui-image-editor';
+
+var rImageType = /data:(image\/.+);base64,/;
+
+/**
+ * 
+ * @param {*} data 
+ * @returns 
+ */
+function base64ToBlob(data) {
+  var mimeString = '';
+  var raw, uInt8Array, i, rawLength;
+
+  // @ts-ignore
+  raw = data.replace(rImageType, function (header, imageType) {
+    mimeString = imageType;
+
+    return '';
+  });
+
+  raw = atob(raw);
+  rawLength = raw.length;
+  uInt8Array = new Uint8Array(rawLength); // eslint-disable-line
+
+  for (i = 0; i < rawLength; i += 1) {
+    uInt8Array[i] = raw.charCodeAt(i);
+  }
+
+  return new Blob([uInt8Array], { type: mimeString });
+}
+
+export class LocalEditorImage extends UploaderBlock {
+  couldBeCtxOwner = true;
+  static styleAttrs = ['uc-editor-image'];
+  activityType = ActivityBlock.activities.LOCAL_IMAGE_EDITOR;
+
+  /**
+   * @private
+   * @type {import('../../abstract/TypedData.js').TypedData | undefined}
+   */
+  _entry;
+
+  /**
+   * @private
+   * @type {undefined}
+   */
+  _instance;
+
+  get activityParams() {
+    const params = super.activityParams;
+    if ('internalId' in params) {
+      return params;
+    }
+    throw new Error(`Cloud Image Editor activity params not found`);
+  }
+
+  initCallback() {
+    super.initCallback();
+  
+    this.registerActivity(this.activityType, {
+      onActivate: () => this.mounted(),
+      onDeactivate: () => this.unmounted(),
+    });
+
+  }
+
+  mounted() {
+    const { internalId } = this.activityParams;
+    this._entry = this.uploadCollection.read(internalId);
+
+    if (!this._entry) {
+      throw new Error(`Entry with internalId "${internalId}" not found`);
+    }
+
+    const file = this._entry.getValue('file');
+    const cdnUrl = this._entry.getValue('cdnUrl');
+
+    // @ts-ignore
+    const instance = new tui.ImageEditor(document.querySelector('#tui-image-editor-container'), {
+      includeUI: {
+        loadImage: {
+          path: cdnUrl ? cdnUrl : URL.createObjectURL(file),
+          name: file?.name ?? "cdnUrl",
+        }
+      },
+      cssMaxWidth: 600,
+      cssMaxHeight: 300,
+      usageStatistics: false,
+    });
+
+    this._applyButton()
+
+    this._instance = instance;
+  }
+
+  _applyButton () {
+    const button = document.createElement('button');
+    button.setAttribute('class', 'tui-image-editor-download-btn-save');
+    button.textContent = 'Save'
+    
+    document.querySelector('.tui-image-editor-header-buttons')?.appendChild(button);
+
+    button.addEventListener('click', async (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (!this._entry) {
+        return;
+      }
+
+      // @ts-ignore
+      const dataURL = this._instance.toDataURL();
+      const blob = base64ToBlob(dataURL);
+
+      this._entry.setMultipleValues({
+        file: new File([blob], 'image.jpeg', {
+          lastModified: new Date().getTime(),
+          type: blob.type,
+        })
+      })
+
+      this.historyBack();
+    });
+  }
+
+  unmounted() {
+    this._instance = undefined;
+    this._entry = undefined;
+    // @ts-ignore
+    document.querySelector('#tui-image-editor-container').innerHTML = '';
+  }
+}
+
+LocalEditorImage.template = `<div id="tui-image-editor-container"></div>`;

package/blocks/LocalEditorImage/localEditorImage.css

@@ -0,0 +1,19 @@
+uc-local-editor-image {
+  width: 100%;
+  height: 648px;
+  min-width: 780px;
+  max-width: 1060px;
+  display: block;
+}
+
+uc-local-editor-image > #tui-image-editor-container {
+  
+}
+
+:where(uc-local-editor-image) > #tui-image-editor-container .tui-image-editor-header-logo {
+  display: none;
+}
+
+:where(uc-local-editor-image) > #tui-image-editor-container .tui-image-editor-header-buttons > *:not(.tui-image-editor-download-btn-save) {
+  display: none;
+}

package/blocks/themes/uc-basic/index.css

@@ -30,6 +30,7 @@
 @import url('../../CloudImageEditor/index.css');
 @import url('../../CloudImageEditorActivity/index.css');
 @import url('../../Select/select.css');
+@import url('../../LocalEditorImage/localEditorImage.css');
 
 /* POST RESET */
 @import url('post-reset.css');

package/env.d.ts

@@ -1,4 +1,4 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME: "blocks";
-export const PACKAGE_VERSION: "1.7.0";
+export const PACKAGE_VERSION: "1.8.0";
 //# sourceMappingURL=env.d.ts.map

package/env.js

@@ -1,3 +1,3 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME = 'blocks';
-export const PACKAGE_VERSION = '1.7.0';
+export const PACKAGE_VERSION = '1.8.0';

package/index.d.ts

@@ -27,6 +27,7 @@ export { FormInput } from "./blocks/FormInput/FormInput.js";
 export { ActivityHeader } from "./blocks/ActivityHeader/ActivityHeader.js";
 export { Select } from "./blocks/Select/Select.js";
 export { Copyright } from "./blocks/Copyright/Copyright.js";
+export { LocalEditorImage } from "./blocks/LocalEditorImage/LocalEditorImage.js";
 export { FileUploaderRegular } from "./solutions/file-uploader/regular/FileUploaderRegular.js";
 export { FileUploaderMinimal } from "./solutions/file-uploader/minimal/FileUploaderMinimal.js";
 export { FileUploaderInline } from "./solutions/file-uploader/inline/FileUploaderInline.js";

package/index.js

@@ -32,6 +32,7 @@ export { FormInput } from './blocks/FormInput/FormInput.js';
 export { ActivityHeader } from './blocks/ActivityHeader/ActivityHeader.js';
 export { Select } from './blocks/Select/Select.js';
 export { Copyright } from './blocks/Copyright/Copyright.js';
+export { LocalEditorImage } from './blocks/LocalEditorImage/LocalEditorImage.js';
 
 // Solutions:
 export { FileUploaderRegular } from './solutions/file-uploader/regular/FileUploaderRegular.js';

package/index.ssr.d.ts

@@ -8,6 +8,7 @@ export const ActivityBlock: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -24,6 +25,7 @@ export const ActivityHeader: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -96,6 +98,7 @@ export const CameraSource: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -154,6 +157,7 @@ export const CloudImageEditorActivity: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -256,6 +260,7 @@ export const DropArea: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     is: string;
@@ -368,6 +373,7 @@ export const ExternalSource: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -432,6 +438,7 @@ export const FileItem: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -503,6 +510,7 @@ export const FormInput: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -533,6 +541,57 @@ export const LineLoaderUi: {
     is: string;
     bindAttributes: () => void;
 };
+export const LocalEditorImage: {
+    new (): {};
+    styleAttrs: any[];
+    template: string;
+    extSrcList: {
+        FACEBOOK: string;
+        DROPBOX: string;
+        GDRIVE: string;
+        GPHOTOS: string;
+        INSTAGRAM: string;
+        FLICKR: string;
+        VK: string;
+        EVERNOTE: string;
+        BOX: string;
+        ONEDRIVE: string;
+        HUDDLE: string;
+    };
+    sourceTypes: {
+        LOCAL: string;
+        DROP_AREA: string;
+        CAMERA: string;
+        EXTERNAL: string;
+        API: string;
+        URL: string;
+        DRAW: string;
+        FACEBOOK: string;
+        DROPBOX: string;
+        GDRIVE: string;
+        GPHOTOS: string;
+        INSTAGRAM: string;
+        FLICKR: string;
+        VK: string;
+        EVERNOTE: string;
+        BOX: string;
+        ONEDRIVE: string;
+        HUDDLE: string;
+    };
+    activities: {
+        START_FROM: string;
+        CAMERA: string;
+        DRAW: string;
+        UPLOAD_LIST: string;
+        URL: string;
+        CLOUD_IMG_EDIT: string;
+        EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
+    };
+    reg: () => void;
+    is: string;
+    bindAttributes: () => void;
+};
 export const Modal: {
     new (): {};
     styleAttrs: any[];
@@ -543,7 +602,7 @@ export const Modal: {
     bindAttributes: () => void;
 };
 export const PACKAGE_NAME: "blocks";
-export const PACKAGE_VERSION: "1.7.0";
+export const PACKAGE_VERSION: "1.8.0";
 export const PresenceToggle: {
     new (): {};
     template: string;
@@ -604,6 +663,7 @@ export const ProgressBarCommon: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -664,6 +724,7 @@ export const SimpleBtn: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     is: string;
@@ -729,6 +790,7 @@ export const SourceBtn: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -753,6 +815,7 @@ export const StartFrom: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -835,6 +898,7 @@ export const UploadCtxProvider: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -885,6 +949,7 @@ export const UploadList: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -965,6 +1030,7 @@ export const UploaderBlock: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];
@@ -1015,6 +1081,7 @@ export const UrlSource: {
         URL: string;
         CLOUD_IMG_EDIT: string;
         EXTERNAL: string;
+        LOCAL_IMAGE_EDITOR: string;
     };
     reg: () => void;
     styleAttrs: any[];

package/index.ssr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.ssr.d.ts","sourceRoot":"","sources":["index.ssr.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;EAcE;AACF;;;;;;;;;;;;;;;EAcE;AACF;;;;;EAIE;AACF;;;;;;EAKE;AACF;;;;;;;;EAYE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqFE;AACF;;;;;;;;EAuCE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAuCE;AACF;;;;;;;EA0FE;AACF;;;;;;;EAaE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkEE;AACF;;;;;;;EAWE;AACF;;;;;;;EAWE;AACF;;;;;;;EASE;AACF;;;;;;EAKE;AACF;;;;;;;EAWE;AACF;;;;;;;EAME;AACF;;;;;;;EAWE;AACF;;;;;;;EA2IE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EE;;;;;;;;;;;;;;AAcF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmFE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAYE;AACF;;;;;;EAwBE;AACF;;;;;;;EAUE;AACF;;;;;;;;EAWE;AACF,oCAAqC;AACrC,sCAAuC;AACvC;;;;;;;EAME;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DE;AACF;;;;;;;EAeE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;EAWE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsEE;AACK,yCAAiC;AACjC,qCAA6B;AAC7B,6CAAqC;AACrC,oCAA4B"}
+{"version":3,"file":"index.ssr.d.ts","sourceRoot":"","sources":["index.ssr.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;EAIE;AACF;;;;;;EAKE;AACF;;;;;;;;EAYE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsFE;AACF;;;;;;;;EAuCE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDE;AACF;;;;;;;;EAuCE;AACF;;;;;;;EA0FE;AACF;;;;;;;EAaE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AACF;;;;;;;EAWE;AACF;;;;;;;EAWE;AACF;;;;;;;EASE;AACF;;;;;;EAKE;AACF;;;;;;;EAWE;AACF;;;;;;;EAME;AACF;;;;;;;EAWE;AACF;;;;;;;EA2IE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4EE;;;;;;;;;;;;;;AAcF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoFE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDE;AACF;;;;;;;;EAYE;AACF;;;;;;EAwBE;AACF;;;;;;;EAUE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDE;AACF;;;;;;;;EAWE;AACF,oCAAqC;AACrC,sCAAuC;AACvC;;;;;;;EAME;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DE;AACF;;;;;;;EAeE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;;EAgBE;AACF;;;;;;;;;;;;EAWE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+FE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuEE;AACK,yCAAiC;AACjC,qCAA6B;AAC7B,6CAAqC;AACrC,oCAA4B"}

package/index.ssr.js

@@ -7,6 +7,7 @@ export const ActivityBlock = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -22,6 +23,7 @@ export const ActivityHeader = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -132,6 +134,7 @@ export const CameraSource = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -220,6 +223,7 @@ export const CloudImageEditorActivity = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -456,6 +460,7 @@ export const DropArea = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static is = `sym-1`;
@@ -742,6 +747,7 @@ export const ExternalSource = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -839,6 +845,7 @@ export const FileItem = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -906,6 +913,7 @@ export const FormInput = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -961,6 +969,56 @@ export const LineLoaderUi = class {
   static is = `sym-1`;
   static bindAttributes = () => {};
 };
+export const LocalEditorImage = class {
+  static styleAttrs = [];
+  static template = `<div id="tui-image-editor-container"></div>`;
+  static extSrcList = {
+    FACEBOOK: "facebook",
+    DROPBOX: "dropbox",
+    GDRIVE: "gdrive",
+    GPHOTOS: "gphotos",
+    INSTAGRAM: "instagram",
+    FLICKR: "flickr",
+    VK: "vk",
+    EVERNOTE: "evernote",
+    BOX: "box",
+    ONEDRIVE: "onedrive",
+    HUDDLE: "huddle",
+  };
+  static sourceTypes = {
+    LOCAL: "local",
+    DROP_AREA: "drop-area",
+    CAMERA: "camera",
+    EXTERNAL: "external",
+    API: "js-api",
+    URL: "url",
+    DRAW: "draw",
+    FACEBOOK: "facebook",
+    DROPBOX: "dropbox",
+    GDRIVE: "gdrive",
+    GPHOTOS: "gphotos",
+    INSTAGRAM: "instagram",
+    FLICKR: "flickr",
+    VK: "vk",
+    EVERNOTE: "evernote",
+    BOX: "box",
+    ONEDRIVE: "onedrive",
+    HUDDLE: "huddle",
+  };
+  static activities = {
+    START_FROM: "start-from",
+    CAMERA: "camera",
+    DRAW: "draw",
+    UPLOAD_LIST: "upload-list",
+    URL: "url",
+    CLOUD_IMG_EDIT: "cloud-image-edit",
+    EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
+  };
+  static reg = () => {};
+  static is = `sym-1`;
+  static bindAttributes = () => {};
+};
 export const Modal = class {
   static styleAttrs = [];
   static StateConsumerScope = `modal`;
@@ -974,7 +1032,7 @@ export const Modal = class {
   static bindAttributes = () => {};
 };
 export const PACKAGE_NAME = `blocks`;
-export const PACKAGE_VERSION = `1.7.0`;
+export const PACKAGE_VERSION = `1.8.0`;
 export const PresenceToggle = class {
   static template = `<slot></slot> `;
   static reg = () => {};
@@ -1032,6 +1090,7 @@ export const ProgressBarCommon = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -1099,6 +1158,7 @@ export const SimpleBtn = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static is = `sym-1`;
@@ -1175,6 +1235,7 @@ export const SourceBtn = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -1197,6 +1258,7 @@ export const StartFrom = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -1277,6 +1339,7 @@ export const UploadCtxProvider = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -1372,6 +1435,7 @@ export const UploadList = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -1440,6 +1504,7 @@ export const UploaderBlock = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];
@@ -1511,6 +1576,7 @@ export const UrlSource = class {
     URL: "url",
     CLOUD_IMG_EDIT: "cloud-image-edit",
     EXTERNAL: "external",
+    LOCAL_IMAGE_EDITOR: "local-image-editor",
   };
   static reg = () => {};
   static styleAttrs = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.7.0",
+  "version": "1.9.0-alpha.0",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",
@@ -35,7 +35,9 @@
     "MIT"
   ],
   "type": "module",
-  "sideEffects": ["*.css"],
+  "sideEffects": [
+    "*.css"
+  ],
   "module": "./index.js",
   "exports": {
     ".": {
@@ -51,6 +53,7 @@
     "./locales/*": "./locales/*"
   },
   "repository": "https://github.com/uploadcare/file-uploader/",
+  "homepage": "https://uploadcare.com/",
   "files": [
     "{abstract,blocks,solutions,web,utils,types,locales}/**/*.{js,css,d.ts,d.ts.map}",
     "index.{js,d.ts,d.ts.map}",
@@ -137,6 +140,7 @@
     "@symbiotejs/symbiote": "^1.11.7",
     "@uploadcare/image-shrink": "^6.14.1",
     "@uploadcare/upload-client": "^6.14.1",
-    "keyux": "^0.7.1"
+    "keyux": "^0.7.1",
+    "tui-image-editor": "^3.15.3"
   }
 }

package/solutions/file-uploader/regular/FileUploaderRegular.js

@@ -55,6 +55,7 @@ FileUploaderRegular.template = /* HTML */ `
     <uc-url-source></uc-url-source>
     <uc-external-source></uc-external-source>
     <uc-cloud-image-editor-activity></uc-cloud-image-editor-activity>
+    <uc-local-editor-image></uc-local-editor-image>
   </uc-modal>
 `;