Add Custom Download Button Click Handler to Attaches Tool

.gitignore

@@ -2,4 +2,4 @@ node_modules/*
 npm-debug.log
 .idea/
 .DS_Store
-dist
+!dist

README.md

@@ -61,6 +61,7 @@ Attaches Tool supports these configuration parameters:
 | buttonText | `string` | (default: `Select file`) Placeholder for file upload button |
 | errorMessage | `string` | (default: `File upload failed`) Message to show if file upload failed |
 | additionalRequestHeaders | `object` | (default: `{}`) Object with any custom headers which will be added to request. Example: `{"X-CSRF-TOKEN": "W5fe2...hR8d1"}` |
+| downloadButton | `{onClick: function}` |Option custom onClick event handler to customize the onclick event of download icon|
 
 
 ## Output data
@@ -176,3 +177,51 @@ var editor = EditorJS({
   ...
 });
 ```
+
+## Providing custom download button event handlers
+
+As mentioned at the Config Params section, you have an ability to provide own custom onClick event handler for the download button.
+It is a quite simple: implement `onClick` method and pass them via `downloadButton` config param.
+This method will be invoked when the download button is clicked.
+
+
+| Method         | Arguments | Return value | Description |
+| -------------- | --------- | -------------| ------------|
+| onClick   | `MouseEvent`, `Object`    | `void` | Handle the click event for the download button, allowing custom logic |
+
+Example:
+
+```js
+import AttachesTool from '@editorjs/attaches';
+
+var editor = EditorJS({
+  ...
+
+  tools: {
+    ...
+    attaches: {
+      class: AttachesTool,
+      config: {
+        /**
+         * Custom download button handler
+         */
+        downloadButton: {
+          /**
+           * Custom logic to execute when download button is clicked
+           * @param {MouseEvent} event - The click event object
+           * @param {Object} data - The file data object, containing information such as url, name, size, extension
+           */
+          onClick: function(event, data) {
+            // Prevent the default download behavior
+            event.preventDefault();
+
+            // Custom download logic here
+            console.log('File download initiated:', data.file.url);
+          }
+        }
+      }
+    }
+  }
+  ...
+});
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/attaches",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "repository": "https://github.com/editor-js/attaches",
   "license": "MIT",
   "scripts": {
@@ -43,5 +43,9 @@
   },
   "dependencies": {
     "@codexteam/icons": "^0.0.4"
+  },
+  "volta": {
+    "node": "16.20.2",
+    "yarn": "1.22.22"
   }
 }

src/index.js

@@ -4,6 +4,7 @@ import Uploader from './uploader';
 import { make, moveCaretToTheEnd, isEmpty } from './utils/dom';
 import { getExtensionFromFileName } from './utils/file';
 import { IconChevronDown, IconFile } from '@codexteam/icons';
+import {onClickDownloadButton} from './utils/customEvents';
 
 const LOADER_TIMEOUT = 500;
 
@@ -47,6 +48,8 @@ const LOADER_TIMEOUT = 500;
  * @property {string} errorMessage - message to show if file uploading failed
  * @property {object} [uploader] - optional custom uploader
  * @property {function(File): Promise.<UploadResponseFormat>} [uploader.uploadByFile] - custom method that upload file and returns response
+ * @property {object} [downloadButton] - download button configuration
+ * @property {function(Event, AttachesToolData): void} [downloadButton.onClick] - custom method that handles download button click
  */
 
 /**
@@ -90,6 +93,7 @@ export default class AttachesTool {
       buttonText: config.buttonText || 'Select file to upload',
       errorMessage: config.errorMessage || 'File upload failed',
       uploader: config.uploader || undefined,
+      downloadButton: config.downloadButton || undefined,
       additionalRequestHeaders: config.additionalRequestHeaders || {},
     };
 
@@ -444,6 +448,14 @@ export default class AttachesTool {
         rel: 'nofollow noindex noreferrer',
       });
 
+      /**
+       * Registering the config.downloadButton.onClick handler.
+       * The function onClickDownloadButton will invoke the this.config.downloadButton.onClick function if it exists.
+       */
+      downloadIcon.addEventListener('click', (event) =>{
+        onClickDownloadButton(event, this.config, this.data);
+      });
+
       this.nodes.wrapper.appendChild(downloadIcon);
     }
   }

src/utils/customEvents.js

@@ -0,0 +1,13 @@
+/**
+ * Registers the config.downloadButton.onClick function to the click event of the download button
+ * if it is defined.
+ *
+ * @param {MouseEvent} event - The click event.
+ * @param {Object} config - The configuration object.
+ * @param {AttachesToolData} data - The data object.
+ */
+export function onClickDownloadButton(event, config, data) {
+  if (config && config.downloadButton && config.downloadButton.onClick && typeof config.downloadButton.onClick === 'function') {
+    config.downloadButton.onClick(event, data);
+  }
+}

yarn.lock

@@ -1551,8 +1551,8 @@ camelcase@^5.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
 
 caniuse-lite@^1.0.30001280:
-  version "1.0.30001282"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz#38c781ee0a90ccfe1fe7fefd00e43f5ffdcb96fd"
+  version "1.0.30001650"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001650.tgz"
 
 caseless@~0.12.0:
   version "0.12.0"