Add multiple image remove event listener

shibbirweb · Nov 2, 2020 · 10cf673 · 10cf673
1 parent fa68bcc
commit 10cf673
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -31,11 +31,11 @@ Use in CKEditor 5 initialization
 ClassicEditor.create(document.querySelector('#editor'), {
     //... 
     imageRemoveEvent: {
-        callback: (imageSrc, nodeObject) => {
-            //nodeObject api: https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_model_node-Node.html
-            // ... do your staff
-            console.log('callback invoked', imageSrc, nodeObject)
-
+        callback: (imagesSrc, nodeObjects) => {
+            // note: imagesSrc is array of src & nodeObjects is array of nodeObject
+            // node object api: https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_model_node-Node.html
+
+            console.log('callback called', imagesSrc, nodeObjects)
         }
     },
     // ...

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-image-remove-event-callback-plugin",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "CKEditor 5 image remove event handler plugin",
   "dependencies": {
     "@ckeditor/ckeditor5-core": "*",

diff --git a/src/ImageRemoveEvent.js b/src/ImageRemoveEvent.js
@@ -28,29 +28,44 @@ export default class ImageRemoveEvent {
                 includeChangesInGraveyard: true
             });
 
-            if (!changes || !changes[1]) {
+            if (changes.length === 0) {
                 return;
             }
 
-            const lastChange = changes[1]
+            let hasNoImageRemoved = true
 
-            if (lastChange && (lastChange.name && lastChange.name === 'image') && (lastChange.type && lastChange.type === 'remove')) {
-                // The graveyard tree root
-                const previousImageGraveyard = changes[0]
-
-                if (!previousImageGraveyard) {
-                    return;
+            changes.forEach(change => {
+                if (change && change.type === 'remove' && change.name === 'image') {
+                    hasNoImageRemoved = false
                 }
+            })
+
+            if (hasNoImageRemoved) {
+                return;
+            }
 
+            const removedImagesChanges = changes.filter(change => {
+                return (change.type === 'insert' && change.name === 'image')
+            })
+
+            const removedImagesSrc = [];
+            const removedImagesNode = [];
+
+            removedImagesChanges.forEach(change => {
                 // Root Element
-                const root = previousImageGraveyard.position.root
+                const root = change.position.root
                 // Removed node
                 const removedImageNode = root.getChild(0)
                 // Removed image src
                 const removedImageSrc = removedImageNode.getAttribute('src')
-                // Call the callback
-                return callback(removedImageSrc, removedImageNode)
-            }
+                // add into nodes
+                removedImagesNode.push(removedImageNode)
+                // add into srcs
+                removedImagesSrc.push(removedImageSrc)
+            })
+
+            // Call the callback
+            return callback(removedImagesSrc, removedImagesNode)
         })
     }
 }