Manually replacing imageURL breaks the document

[MahmoudGamalEid]

Question Regarding image embedding in Flutter

I have an editor with an _onImagePickCallback function as follows:

 Future<String> _onImagePickCallback(File file) async {
  File? croppedFile = await ImageCropper.cropImage(
        cropStyle: CropStyle.rectangle,
        sourcePath: file.path,
        aspectRatioPresets: [
          CropAspectRatioPreset.square,
          CropAspectRatioPreset.ratio3x2,
          CropAspectRatioPreset.original,
          CropAspectRatioPreset.ratio4x3,
          CropAspectRatioPreset.ratio16x9
        ],
        androidUiSettings: AndroidUiSettings(
            toolbarTitle: 'Crop your image',
            toolbarColor: Colors.deepPurple,
            toolbarWidgetColor: Colors.white,
            initAspectRatio: CropAspectRatioPreset.original,
            lockAspectRatio: false),
        iosUiSettings: IOSUiSettings(
          minimumAspectRatio: 1.0,
        ));
   return croppedFile!.path.toString();
  }

The image renders fine and works as expected
and if i choose to upload the image right away to firebase storage like so

 Future<String> _onImagePickCallback(File file) async {
    Reference firebaseStorageRef = FirebaseStorage.instance
        .ref()
        .child('uploads/images/${file.path.split("/").last}');
    TaskSnapshot taskSnapshot = await firebaseStorageRef.putFile(file);
    String downloadURL = await taskSnapshot.ref.getDownloadURL();
    return downloadURL;
}

It also works as expected and the image is rendered properly.

However if I attempt to parse the delta of the doc and look for image tags and upload the images and replace the existing local file path with a firebase storage URL,Instead of rendering an image a literal text is displayed.

something like {image: http://10.0.2.2:9199/v0/b/restOfURL}

I inspected the delta of the document when I use the upload during editing method mentioned above and its identical to my replace method yet the first one works and the second doesn't.

what am I doing wrong?

I am doing this for two reasons :

1. Uploading an image while editing takes time and there is no way to give feedback to the user that the image is uploading so the image appears suddenly in the editor
2. I only want the images to be uploaded to the server once the user "commits" to his change and as long as the user is editing the document the images do not upload yet

My guess is that there is some other operation that is being done to the document to let it know that this tag is in fact an image and not text other than the "{image: " part

is my guess correct?
is it not possible to do what I am trying to do ?