Fix conflicts in RTE with multiple editor instances #3475

src/dom_components/view/ComponentTextView.js

@@ -28,7 +28,7 @@ export default ComponentView.extend({
    * Enable element content editing
    * @private
    * */
-  onActive(e) {
+  async onActive(e) {
     const { rte, em } = this;
 
     // We place this before stopPropagation in case of nested
@@ -45,7 +45,7 @@ export default ComponentView.extend({
 
     if (rte) {
       try {
-        this.activeRte = rte.enable(this, this.activeRte);
+        this.activeRte = await rte.enable(this, this.activeRte);
       } catch (err) {
         em.logError(err);
       }

src/rich_text_editor/index.js

@@ -289,25 +289,27 @@ export default () => {
      * @param {Object} rte The instance of already defined RTE
      * @private
      * */
-    enable(view, rte) {
+    async enable(view, rte) {
       lastEl = view.el;
+      const { customRte } = this;
       const canvas = config.em.get('Canvas');
       const em = config.em;
       const el = view.getChildrenContainer();
-      const customRte = this.customRte;
       lastElPos = canvas.getElementPos(lastEl);
 
       toolbar.style.display = '';
-      rte = customRte ? customRte.enable(el, rte) : this.initRte(el).enable();
+      const rteInst = await (customRte
+        ? customRte.enable(el, rte)
+        : this.initRte(el).enable());
 
       if (em) {
         setTimeout(this.updatePosition.bind(this), 0);
         em.off(eventsUp, this.updatePosition, this);
         em.on(eventsUp, this.updatePosition, this);
-        em.trigger('rte:enable', view, rte);
+        em.trigger('rte:enable', view, rteInst);
       }
 
-      return rte;
+      return rteInst;
     },
 
     /**

src/rich_text_editor/model/RichTextEditor.js

@@ -80,18 +80,18 @@ export default class RichTextEditor {
     this.setEl(el);
     this.updateActiveActions = this.updateActiveActions.bind(this);
 
-    const settAct = settings.actions || [];
+    const acts = (settings.actions || []).map(action => {
-    settAct.forEach((action, i) => {
+      let result = action;
       if (typeof action === 'string') {
-        action = defActions[action];
+        result = { ...defActions[action] };
       } else if (defActions[action.name]) {
-        action = { ...defActions[action.name], ...action };
+        result = { ...defActions[action.name], ...action };
       }
-      settAct[i] = action;
+      return result;
     });
-    const actions = settAct.length
+    const actions = acts.length
-      ? settAct
+      ? acts
-      : Object.keys(defActions).map(action => defActions[action]);
+      : Object.keys(defActions).map(a => defActions[a]);
 
     settings.classes = {
       ...{