editor: handle paste event manually

On each paste event, re-render the line number in case the clipboard
contains new lines.

1 files changed, 18 insertions, 4 deletions

diff --git a/editor/editor.ts b/editor/editor.ts
index 620d6b8..6bdbfca 100644
--- a/editor/editor.ts
+++ b/editor/editor.ts
@@ -98,10 +98,11 @@ export class WuiEditor {
       this.elContent.setAttribute("contenteditable", "true");
       this.elContent.setAttribute("spellcheck", "false");
 
-      this.elContent.addEventListener("paste", () => {
-        setTimeout(() => {
-          this.render(this.getContent());
-        }, 100);
+      this.elContent.addEventListener("paste", (ev: ClipboardEvent) => {
+        ev.preventDefault();
+        const text = ev.clipboardData?.getData("text/plain");
+        document.execCommand("insertText", false, text);
+        this.renderLineNumber(this.getContent());
       });
 
       this.elContent.onkeydown = (ev: KeyboardEvent) => {
@@ -207,4 +208,17 @@ export class WuiEditor {
 
     this.totalLine = lines.length;
   }
+
+  private renderLineNumber(content: string) {
+    const lines = content.split("\n");
+
+    this.elLineNumber.innerText = "";
+    lines.forEach((_: string, x: number) => {
+      const el = document.createElement("div");
+      el.innerText = `${x + 1}`;
+      this.elLineNumber.appendChild(el);
+    });
+
+    this.totalLine = lines.length;
+  }
 }