flutter-quill icon indicating copy to clipboard operation
flutter-quill copied to clipboard

onImageRemovedCallback not called when Image is Removed with a keystroke(backspace)

Open Uche01 opened this issue 1 year ago • 5 comments

Is there an existing issue for this?

The question

I am trying to delete an image from file system when an image is removed from the editor. Overriding the callback onImageRemovedCallback appears to work only when image is removed by clicking on the 'Remove' option on the image actions popup. However, when image is removed by clicking backspace key on the keyboard, the callback is not fired. How can I fix this?

Here is the call back code:

QuillEditorImageEmbedConfigurations imageEmbedConfigurations = QuillEditorImageEmbedConfigurations(  
    onImageRemovedCallback: (imageUrl) async {
      final file = File(imageUrl);
      if (await file.exists()) {
        await file.delete();
        print('File deleted successfully');
      } else {
        print('File does not exist');
      }
    },
  );

Uche01 avatar Aug 15 '24 13:08 Uche01

You can create a custom Rule that extends from DeleteRule and verify if the content that will be removed is an image (by now is the solution that i can think)

CatHood0 avatar Aug 29 '24 05:08 CatHood0

By now we don't have plan to add this by now. Probably in future releases this will be fixed (at this moment we need to take more attention to issues that are affecting to the perfomance and the stability of the package).

CatHood0 avatar Sep 21 '24 03:09 CatHood0

There are similar issues related to this, will reopen it since I do plan on a solution when I have the time, should not make changes directly to flutter_quill for this fix.

at this moment we need to take more attention to issues that are affecting to the perfomance and the stability of the package

This is why a fix will take a while before introducing it.

EchoEllet avatar Sep 21 '24 13:09 EchoEllet

A workaround is to use onKeyPressed to prevent the user from deleting the image embed using the backspace.

I am trying to delete an image from file system when an image is removed from the editor. Overriding the callback onImageRemovedCallback appears to work only when image is removed by clicking on the 'Remove' option on the image actions popup.

I'm not sure if it should be called, the editor supports the history feature with undo and redo and they can undo the change, which will restore the image and if you delete it, it will cause an error (file not found).

EchoEllet avatar Mar 23 '25 17:03 EchoEllet

I'm not sure if it should be called. The editor supports the history feature with undo and redo, and they can undo the change, which will restore the image. If you delete it, it will cause a "file not found" error.

True, I've done something like that before. But since undo/redo operations are supported, I opted to implement a function that identifies the embeds that were deleted and then deletes them from the server/storage (all of this once it's confirmed that we're no longer modifying the document).

If the OP follows what I chose to do, he/she should take into account this method of dart_quill_delta_simplify: getAllEmbeds.

As a quick example of this:

final Iterable<Delta> oldEmbedsState = oldDelta
        // every delta probably will have only 1 operation that contains the embed part
        .getAllEmbeds()
        .map((DeltaRangeResult result) => result.delta);

final Iterable<Delta> newEmbedsState = newDelta
        // every delta probably will have only 1 operation that contains the embed part
        .getAllEmbeds()
        .map((DeltaRangeResult result) => result.delta);

// ... at this point, you can make your comparation 
// about what was removed or updated (`DeltaRangeResult` contains the offset 
// where the embed match is positioned)

CatHood0 avatar Mar 23 '25 18:03 CatHood0