async content

serikshaikamalov · Jul 18, 2024 · 17707dd · 17707dd
1 parent 57ab7b9
commit 17707dd
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/components/wysiwyg-editor.js b/components/wysiwyg-editor.js
@@ -47,24 +47,33 @@ class WYSIWYGEditor extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    setTimeout(() => {
-      const editor = this.renderRoot.querySelector('#editor')
-      console.log("editor: ", editor);
+  }
+
+  firstUpdated() {
+    const editor = this.renderRoot.querySelector('#editor')
+    console.log("firstUpdated() editor ", editor)
+
+    if (this.content) {
+      editor.innerHTML = this.content
+    }
 
-      if (this.content) {
-        editor.innerHTML = this.content
-      }
+    editor.addEventListener('paste', (e) => {
+      e.preventDefault();
 
+      console.log("pasing: ", e);
 
-      editor.addEventListener('paste', (e) => {
-        e.preventDefault();
+      let text = e.clipboardData.getData('text/plain');
+      document.execCommand('insertText', false, text);
+    });
+  }
 
-        console.log("pasing: ", e);
+  updated(changedProperties) {
+    console.log("updated()", changedProperties);
 
-        let text = e.clipboardData.getData('text/plain');
-        document.execCommand('insertText', false, text);
-      });
-    }, 1000);
+    if (changedProperties.has('content')) {
+      const editor = this.renderRoot.querySelector('#editor')
+      editor.innerHTML = this.content || ""
+    }
   }
 
   render() {
@@ -121,9 +130,8 @@ class WYSIWYGEditor extends LitElement {
     document.execCommand(command, false, value);
   }
   _updateContent(event) {
-    this.content = event.target.innerHTML;
     if (this.onChange) {
-      this.onChange(this.content, this.name)
+      this.onChange(event.target.innerHTML, this.name)
     }
   }
 }

diff --git a/examples/wysiwyg-editor/main.js b/examples/wysiwyg-editor/main.js
@@ -11,11 +11,14 @@ class WYSIWYGEditorExample extends LitElement {
 
     constructor() {
         super()
-        this.content = 'asd <b>Serik</b> <i>Berik<br><br><br></i>'
     }
 
     connectedCallback() {
         super.connectedCallback();
+
+        setTimeout(() => {
+            this.content = `asd <b>Serik</b> <i>Berik<br><br><br></i>`
+        }, 2000);
     }
 
     onChange(v) {