Fix selection events (#6325)

* Pass options in setSelected * Allow force sync from custom RTE
GrapesJS · Nov 22, 2024 · fe28073 · fe28073
1 parent 36572c3
commit fe28073
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/packages/core/src/dom_components/view/ComponentTextView.ts b/packages/core/src/dom_components/view/ComponentTextView.ts
@@ -1,6 +1,6 @@
 import { bindAll } from 'underscore';
 import { AddOptions, DisableOptions, ObjectAny, WithHTMLParserOptions } from '../../common';
-import RichTextEditorModule from '../../rich_text_editor';
+import RichTextEditorModule, { RteDisableResult } from '../../rich_text_editor';
 import RichTextEditor from '../../rich_text_editor/model/RichTextEditor';
 import { off, on } from '../../utils/dom';
 import { getComponentModel } from '../../utils/mixins';
@@ -115,14 +115,17 @@ export default class ComponentTextView<TComp extends ComponentText = ComponentTe
     const editable = model && model.get('editable');
 
     if (rte) {
+      let disableRes: RteDisableResult = {};
+      const content = await this.getContent();
+
       try {
-        await rte.disable(this, activeRte, opts);
+        disableRes = await rte.disable(this, activeRte, opts);
       } catch (err) {
         em.logError(err as any);
       }
 
-      if (editable && (await this.getContent()) !== this.lastContent) {
-        await this.syncContent(opts);
+      if (editable && (content !== this.lastContent || disableRes.forceSync)) {
+        await this.syncContent({ ...opts, content });
         this.lastContent = '';
       }
     }
@@ -151,7 +154,7 @@ export default class ComponentTextView<TComp extends ComponentText = ComponentTe
   async syncContent(opts: ObjectAny = {}) {
     const { model, rte, rteEnabled } = this;
     if (!rteEnabled && !opts.force) return;
-    const content = await this.getContent();
+    const content = opts.content ?? (await this.getContent());
     const comps = model.components();
     const contentOpt: ObjectAny = { fromDisable: 1, ...opts };
     model.set('content', '', contentOpt);
@@ -213,12 +216,11 @@ export default class ComponentTextView<TComp extends ComponentText = ComponentTe
    * @param  {Event} e
    */
   onInput() {
-    const { em } = this;
     const evPfx = 'component';
     const ev = [`${evPfx}:update`, `${evPfx}:input`].join(' ');
 
     // Update toolbars
-    em && em.trigger(ev, this.model);
+    this.em?.trigger(ev, this.model);
   }
 
   /**

diff --git a/packages/core/src/editor/model/Editor.ts b/packages/core/src/editor/model/Editor.ts
@@ -555,19 +555,19 @@ export default class EditorModel extends Model {
 
         if (!isUndefined(min)) {
           while (min !== index) {
-            this.addSelected(coll.at(min));
+            this.addSelected(coll.at(min), opts);
             min++;
           }
         }
 
         if (!isUndefined(max)) {
           while (max !== index) {
-            this.addSelected(coll.at(max));
+            this.addSelected(coll.at(max), opts);
             max--;
           }
         }
 
-        return this.addSelected(model);
+        return this.addSelected(model, opts);
       }
 
       !multiple && this.removeSelected(selected.filter((s) => s !== model));

diff --git a/packages/core/src/rich_text_editor/index.ts b/packages/core/src/rich_text_editor/index.ts
@@ -67,6 +67,10 @@ interface ModelRTE {
   currentView?: ComponentView;
 }
 
+export interface RteDisableResult {
+  forceSync?: boolean;
+}
+
 export default class RichTextEditorModule extends Module<RichTextEditorConfig & { pStylePrefix?: string }> {
   pfx: string;
   toolbar!: HTMLElement;
@@ -400,14 +404,18 @@ export default class RichTextEditorModule extends Module<RichTextEditorConfig &
    * @param {Object} rte The instance of already defined RTE
    * @private
    * */
-  disable(view: ComponentView, rte?: RichTextEditor, opts: DisableOptions = {}) {
+  async disable(view: ComponentView, rte?: RichTextEditor, opts: DisableOptions = {}) {
+    let result: RteDisableResult = {};
     const { em } = this;
     const customRte = this.customRte;
     // @ts-ignore
     const el = view.getChildrenContainer();
 
     if (customRte) {
-      customRte.disable(el, rte);
+      const res = await customRte.disable(el, rte);
+      if (res) {
+        result = res;
+      }
     } else {
       rte && rte.disable();
     }
@@ -420,5 +428,7 @@ export default class RichTextEditorModule extends Module<RichTextEditorConfig &
     }
 
     this.model.unset('currentView');
+
+    return result;
   }
 }