From d9c71a54cfd5edaee96b895144b10e18f5fffcff Mon Sep 17 00:00:00 2001
From: llama <100429699+iamllama@users.noreply.github.com>
Date: Fri, 11 Apr 2025 17:34:47 +0800
Subject: [PATCH] Allow drag-dropping into plaintext editor (#3902)

* expose field index as data attr on container

* allow drag/dropping into fields' plaintext editors
---
 ts/editor/EditorField.svelte |  2 ++
 ts/editor/NoteEditor.svelte  | 24 ++++++++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
index 9408d0f05..89e797a29 100644
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@@ -60,6 +60,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let collapsed = false;
     export let flipInputs = false;
     export let dupe = false;
+    export let index;
 
     const directionStore = writable<"ltr" | "rtl">();
     setContext(directionKey, directionStore);
@@ -95,6 +96,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:mouseenter
     on:mouseleave
     role="presentation"
+    data-index={index}
 >
     <slot name="field-label" />
 
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index 5134cc327..164d088ed 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -45,6 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { bridgeCommand } from "@tslib/bridgecommand";
     import { onMount, tick } from "svelte";
     import { get, writable } from "svelte/store";
+    import { nodeIsCommonElement } from "@tslib/dom";
 
     import Absolute from "$lib/components/Absolute.svelte";
     import Badge from "$lib/components/Badge.svelte";
@@ -322,15 +323,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export function focusIfField(x: number, y: number): boolean {
         const elements = document.elementsFromPoint(x, y);
-        const first = elements[0];
+        const first = elements[0].closest(".field-container");
 
-        if (first.shadowRoot) {
-            const richTextInput = first.shadowRoot.lastElementChild! as HTMLElement;
-            richTextInput.focus();
-            return true;
+        if (!first || !nodeIsCommonElement(first)) {
+            return false;
         }
 
-        return false;
+        const index = parseInt(first.dataset?.index ?? "");
+
+        if (Number.isNaN(index) || !fields[index] || fieldsCollapsed[index]) {
+            return false;
+        }
+
+        if (richTextsHidden[index]) {
+            toggleRichTextInput(index);
+        } else {
+            richTextInputs[index].api.refocus();
+        }
+
+        return true;
     }
 
     let richTextInputs: RichTextInput[] = [];
@@ -668,6 +679,7 @@ the AddCards dialog) should be implemented in the user of this component.
                 <EditorField
                     {field}
                     {content}
+                    {index}
                     flipInputs={plainTextDefaults[index]}
                     api={fields[index]}
                     on:focusin={() => {