@imageRemoved not triggering

[dionisanchez]

Hey guys,

I'm implementing the editor in a page from my app but @imageRemoved doesn't fire when I remove an image, either by using the delete key just like we delete text, or by selecting the image and deleting. BTW @imageAdded is working fine.

Im doing something wrong?

Tested on browsers:

Firefox Nightly 102.0a1 Chrome 101.0.4951.67

Project specs:

Backend: Laravel 8 Frontend: Vue 2.6.14

View code:

<template>
  <div class="container-fluid">
    <form @submit.prevent="submitForm">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-body">
              <bootstrap-alert />
              <div class="row">
                <div class="col-md-12 d-flex justify-content-center">
                  <!-- CONTENT -->
                  <div
                    class="form-group bmd-form-group app-page-editor-wrapper"
                    :class="{
                      'has-items': entry.content,
                      'is-focused': activeField == 'content',
                    }"
                  >
                    <vue-editor
                      id="app-page-editor"
                      class="pt-1"
                      :editor-toolbar="customToolbar"
                      :value="entry.content"
                      useCustomImageHandler
                      @imageAdded="handleImageAdded"
                      @imageRemoved="handleImageRemoved"
                      @input="updateContent"
                      @focus="focusField('content')"
                      @blur="clearFocus"
                    >
                    </vue-editor>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-footer"></div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { VueEditor } from "vue2-editor";
import Attachment from "@components/Attachments/Attachment";

export default {
  components: {
    VueEditor,
    Attachment,
  },
  data() {
    return {
      status: "",
      activeField: "",
      customToolbar: [
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        ["bold", "italic", "underline", "strike"],
        [
          { align: "" },
          { align: "center" },
          { align: "right" },
          { align: "justify" },
        ],
        ["blockquote"],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ color: [] }],
        ["link", "video"],
        ["clean"],
        ["image"],
      ],
    };
  },
  computed: {
    ...mapGetters("AppPagesTranslationsSingle", ["entry", "loading"]),
  },
  beforeDestroy() {
    this.resetState();
  },
  watch: {
    "$route.params.id": {
      immediate: true,
      handler() {
        this.resetState();
        this.fetchEditData(this.$route.params.id);
      },
    },
  },
  methods: {
    ...mapActions("AppPagesTranslationsSingle", [
      "fetchEditData",
      "updateData",
      "resetState",
      "setContent",
    ]),
    handleImageAdded(file, Editor, cursorLocation) {
      // This is working nice!
      // Code removed to improve visualization
    },
    handleImageRemoved(image) {
      // This one never fires ;(
      console.log('Image removed');
    },
    updateContent(value) {
      this.setContent(value);
    },
    submitForm() {
      this.updateData()
        .then(() => {
          this.$eventHub.$emit("update-success");
        })
        .catch((error) => {
          this.status = "failed";
          _.delay(() => {
            this.status = "";
          }, 3000);
        });
    },
    focusField(name) {
      this.activeField = name;
    },
    clearFocus() {
      this.activeField = "";
    },
  },
};
</script>
<style>
.app-page-editor-wrapper {
  max-width: 500px;
}
#app-page-editor {
  min-height: 600px;
  max-height: 600px;
  overflow: scroll;
}
</style>

Extended info and testing:

In my Vuejs Devtools I can see the events being triggered by the editor and as you can see @imageAdded works as expected but @imageRemoved never happens:

That second input line is me deleting the image previously uploaded.

[davidroyer]

This issue is stale because it has been open for 60 days with no activity.

[davidroyer]

This issue was closed because it has been inactive for 7 days since being marked as stale.