Refactor RTE getContent

src/dom_components/view/ComponentTextView.ts

@@ -86,7 +86,7 @@ export default class ComponentTextView extends ComponentView {
     }
 
     ev?.stopPropagation?.();
-    this.lastContent = this.getContent();
+    this.lastContent = await this.getContent();
 
     if (rte) {
       try {
@@ -120,8 +120,8 @@ export default class ComponentTextView extends ComponentView {
         em.logError(err as any);
       }
 
-      if (editable && this.getContent() !== this.lastContent) {
-        this.syncContent(opts);
+      if (editable && (await this.getContent()) !== this.lastContent) {
+        await this.syncContent(opts);
         this.lastContent = '';
       }
     }
@@ -133,19 +133,24 @@ export default class ComponentTextView extends ComponentView {
    * get content from RTE
    * @return string
    */
-  getContent() {
-    const { activeRte } = this;
+  async getContent() {
+    const { rte, activeRte } = this;
+    let result = '';
 
-    return typeof activeRte?.getContent === 'function' ? activeRte.getContent() : this.getChildrenContainer().innerHTML;
+    if (rte) {
+      result = await rte.getContent(this, activeRte!);
+    }
+
+    return result;
   }
 
   /**
    * Merge content from the DOM to the model
    */
-  syncContent(opts: ObjectAny = {}) {
+  async syncContent(opts: ObjectAny = {}) {
     const { model, rte, rteEnabled } = this;
     if (!rteEnabled && !opts.force) return;
-    const content = this.getContent();
+    const content = await this.getContent();
     const comps = model.components();
     const contentOpt: ObjectAny = { fromDisable: 1, ...opts };
     model.set('content', '', contentOpt);

src/rich_text_editor/index.ts

@@ -37,7 +37,7 @@
  * @module RichTextEditor
  */
 
-import { debounce, isString } from 'underscore';
+import { debounce, isFunction, isString } from 'underscore';
 import { Module } from '../abstract';
 import { Debounced, Model } from '../common';
 import ComponentView from '../dom_components/view/ComponentView';
@@ -78,9 +78,9 @@ export interface CustomRTE<T = any> {
   disable: (el: HTMLElement, rte: T) => any | Promise<any>;
   /**
    * Get HTML content from the custom RTE.
-   * If not specified, it will use the innerHTML of the element.
+   * If not specified, it will use the innerHTML of the element (passed also as `content` in options).
    */
-  getContent?: () => string;
+  getContent?: (el: HTMLElement, rte: T, opts: { content: string }) => string | Promise<string>;
   /**
    * Destroy the custom RTE.
    * Will be triggered on editor destroy.
@@ -386,7 +386,6 @@ export default class RichTextEditorModule extends Module<RichTextEditorConfig &
   async enable(view: ComponentView, rte: RichTextEditor, opts: any = {}) {
     this.lastEl = view.el;
     const { customRte, em } = this;
-    // @ts-ignore
     const el = view.getChildrenContainer();
 
     this.toolbar.style.display = '';
@@ -404,6 +403,17 @@ export default class RichTextEditorModule extends Module<RichTextEditorConfig &
     return rteInst;
   }
 
+  async getContent(view: ComponentView, rte: RichTextEditor) {
+    const { customRte } = this;
+    const content = view.getChildrenContainer().innerHTML;
+
+    if (customRte && isFunction(customRte.getContent)) {
+      return await customRte.getContent(view.el, rte, { content });
+    }
+
+    return content;
+  }
+
   hideToolbar() {
     const style = this.toolbar.style;
     const size = '-1000px';