Handle error cases with text components

src/dom_components/view/ComponentTextView.js

@@ -62,18 +62,20 @@ export default ComponentView.extend({
    * Disable element content editing
    * @private
    * */
-  disableEditing() {
+  async disableEditing() {
     const { model, rte, activeRte, em } = this;
-    const editable = model.get('editable');
+    // There are rare cases when disableEditing is called when the view is already removed
+    // so, we have to check for the model, this will avoid breaking stuff.
+    const editable = model && model.get('editable');
 
-    if (rte && editable) {
+    if (rte) {
       try {
-        rte.disable(this, activeRte);
+        await rte.disable(this, activeRte);
       } catch (err) {
         em.logError(err);
       }
 
-      this.syncContent();
+      editable && this.syncContent();
     }
 
     this.toggleEvents();
@@ -164,7 +166,7 @@ export default ComponentView.extend({
    * @param {Boolean} enable
    */
   toggleEvents(enable) {
-    const { em, model } = this;
+    const { em, model, $el } = this;
     const mixins = { on, off };
     const method = enable ? 'on' : 'off';
     em.setEditing(enable ? this : 0);
@@ -175,11 +177,11 @@ export default ComponentView.extend({
     mixins.off(elDocs, 'mousedown', this.disableEditing);
     mixins[method](elDocs, 'mousedown', this.disableEditing);
     em[method]('toolbar:run:before', this.disableEditing);
-    model[method]('removed', this.disableEditing);
+    model && model[method]('removed', this.disableEditing);
 
     // Avoid closing edit mode on component click
-    this.$el.off('mousedown', this.disablePropagation);
+    $el && $el.off('mousedown', this.disablePropagation);
-    this.$el[method]('mousedown', this.disablePropagation);
+    $el && $el[method]('mousedown', this.disablePropagation);
 
     // Fixes #2210 but use this also as a replacement
     // of this fix: bd7b804f3b46eb45b4398304b2345ce870f232d2