Merge pull request #8408 from michaelchadwick/remove-html-editor-render-modifier

Remove HtmlEditor render modifier

Author: dartajax

packages/ilios-common/.lint-todo

@@ -1,5 +1,3 @@
-add|ember-template-lint|no-at-ember-render-modifiers|2|2|2|2|ad17d66e0fe1720bc8ddedc12dff3a105709765c|1731542400000|1762646400000|1793750400000|addon/components/html-editor.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|d39abab22a3e75d93f69335da422e7ef73b36283|1731542400000|1762646400000|1793750400000|addon/components/html-editor.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|1fb6f249958ee245e6abc413681c9fe096120cef|1731542400000|1762646400000|1793750400000|addon/components/session-copy.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|4|2|4|2|856162ce473b112534763bb641aae7a4422d8e2e|1731542400000|1762646400000|1793750400000|addon/components/session-copy.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|23cd787c79c34a628dadb6e96dd4004d42eebb79|1731542400000|1762646400000|1793750400000|addon/components/session-offerings-list.hbs

packages/ilios-common/addon/components/html-editor.hbs

@@ -1,8 +1,9 @@
-<div
-  {{did-insert (perform this.loadEditor) this.options}}
-  {{did-update (perform this.loadEditor) this.options}}
-  id={{this.editorId}}
-  class="html-editor"
-  data-test-html-editor
-  data-test-load-finished={{this.loadFinished}}>
-</div>
+{{#if this.loadFroalaData.isResolved}}
+  <div
+    {{this.editorInserted this.options}}
+    id={{this.editorId}}
+    class="html-editor"
+    data-test-html-editor
+    data-test-load-finished={{this.loadFinished}}>
+  </div>
+{{/if}}

packages/ilios-common/addon/components/html-editor.js

@@ -1,16 +1,17 @@
 import Component from '@glimmer/component';
 import { service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
-import { restartableTask } from 'ember-concurrency';
+import { cached, tracked } from '@glimmer/tracking';
 import { loadFroalaEditor } from 'ilios-common/utils/load-froala-editor';
 import { guidFor } from '@ember/object/internals';
+import { modifier } from 'ember-modifier';
+import { TrackedAsyncData } from 'ember-async-data';
 
 export default class HtmlEditorComponent extends Component {
   @service intl;
-  @tracked editor = null;
   @tracked editorId = null;
   @tracked loadFinished = false;
 
+  editor = null;
   defaultButtons = {
     moreText: {
       buttons: ['bold', 'italic', 'subscript', 'superscript', 'formatOL', 'formatUL', 'insertLink'],
@@ -27,6 +28,29 @@ export default class HtmlEditorComponent extends Component {
     this.editorId = guidFor(this);
   }
 
+  @cached
+  get loadFroalaData() {
+    return new TrackedAsyncData(loadFroalaEditor());
+  }
+
+  editorInserted = modifier((element, [options]) => {
+    if (!this.editor) {
+      const { FroalaEditor } = this.loadFroalaData.value;
+      const component = this;
+      // getting the Froala instance inside its constructor callback
+      // https://froala.com/wysiwyg-editor/examples/getHTML/
+      this.editor = new FroalaEditor(element, options, function () {
+        this.html.set(component.args.content);
+        if (component.args.autoFocus) {
+          this.events.focus();
+        }
+        component.loadFinished = true;
+      });
+    }
+
+    return true;
+  });
+
   get options() {
     return {
       key: 'Kb3A3pE2E2A1E4G4I4oCd2ZSb1XHi1Cb2a1KIWCWMJHXCLSwG1G1B2C1B1C7F6E1E4F4==',
@@ -73,26 +97,4 @@ export default class HtmlEditorComponent extends Component {
       this.editor = null;
     }
   }
-  createEditor(element, options) {
-    return new Promise((resolve) => {
-      loadFroalaEditor().then(({ FroalaEditor }) => {
-        new FroalaEditor(element, options, function () {
-          resolve(this);
-        });
-      });
-    });
-  }
-
-  loadEditor = restartableTask(async (element, [options]) => {
-    if (!this.editor) {
-      this.editor = await this.createEditor(element, options);
-      this.editor.html.set(this.args.content);
-      if (this.args.autofocus) {
-        this.editor.events.focus();
-      }
-      this.loadFinished = true;
-    }
-
-    return true;
-  });
 }