Make different onPaste behavior for Editable and Codable

ts/editor/codable.ts

@@ -70,7 +70,11 @@ export class Codable extends HTMLTextAreaElement {
         this.codeMirror.setCursor(this.codeMirror.lineCount(), 0);
     }
 
-    enterBehavior(): void {
+    onEnter(): void {
+        /* default */
+    }
+
+    onPaste(): void {
         /* default */
     }
 }

ts/editor/editable.ts

@@ -1,6 +1,7 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import { bridgeCommand } from "./lib";
 import { nodeIsInline, caretToEnd, getBlockElement } from "./helpers";
 
 function containsInlineContent(field: Element): boolean {
@@ -41,7 +42,7 @@ export class Editable extends HTMLElement {
         caretToEnd(this);
     }
 
-    enterBehavior(event: KeyboardEvent): void {
+    onEnter(event: KeyboardEvent): void {
         if (
             !getBlockElement(this.getRootNode() as Document | ShadowRoot) !==
             event.shiftKey
@@ -50,4 +51,9 @@ export class Editable extends HTMLElement {
             document.execCommand("insertLineBreak");
         }
     }
+
+    onPaste(event: ClipboardEvent): void {
+        bridgeCommand("paste");
+        event.preventDefault();
+    }
 }

ts/editor/editingArea.ts

@@ -13,11 +13,6 @@ import { bridgeCommand } from "./lib";
 import { onInput, onKey, onKeyUp } from "./inputHandlers";
 import { onFocus, onBlur } from "./focusHandlers";
 
-function onPaste(evt: ClipboardEvent): void {
-    bridgeCommand("paste");
-    evt.preventDefault();
-}
-
 function onCutOrCopy(): void {
     bridgeCommand("cutOrCopy");
 }
@@ -48,6 +43,8 @@ export class EditingArea extends HTMLDivElement {
             is: "anki-codable",
         }) as Codable;
         this.shadowRoot!.appendChild(this.codable);
+
+        this.onPaste = this.onPaste.bind(this);
     }
 
     get activeInput(): Editable | Codable {
@@ -72,7 +69,7 @@ export class EditingArea extends HTMLDivElement {
         this.addEventListener("input", onInput);
         this.addEventListener("focus", onFocus);
         this.addEventListener("blur", onBlur);
-        this.addEventListener("paste", onPaste);
+        this.addEventListener("paste", this.onPaste);
         this.addEventListener("copy", onCutOrCopy);
         this.addEventListener("oncut", onCutOrCopy);
         this.addEventListener("mouseup", updateActiveButtons);
@@ -87,7 +84,7 @@ export class EditingArea extends HTMLDivElement {
         this.removeEventListener("input", onInput);
         this.removeEventListener("focus", onFocus);
         this.removeEventListener("blur", onBlur);
-        this.removeEventListener("paste", onPaste);
+        this.removeEventListener("paste", this.onPaste);
         this.removeEventListener("copy", onCutOrCopy);
         this.removeEventListener("oncut", onCutOrCopy);
         this.removeEventListener("mouseup", updateActiveButtons);
@@ -138,8 +135,12 @@ export class EditingArea extends HTMLDivElement {
         return document.activeElement === this;
     }
 
-    enterBehavior(event: KeyboardEvent): void {
-        this.activeInput.enterBehavior(event);
+    onEnter(event: KeyboardEvent): void {
+        this.activeInput.onEnter(event);
+    }
+
+    onPaste(event: ClipboardEvent): void {
+        this.activeInput.onPaste(event);
     }
 
     toggleHtmlEdit(): void {

ts/editor/inputHandlers.ts

@@ -27,7 +27,7 @@ export function onKey(evt: KeyboardEvent): void {
 
     // prefer <br> instead of <div></div>
     if (evt.code === "Enter") {
-        return currentField.enterBehavior(evt);
+        return currentField.onEnter(evt);
     }
 
     // // fix Ctrl+right/left handling in RTL fields