From 96381f3f2c9b13bbd4335208ee3fffa0a6974ee8 Mon Sep 17 00:00:00 2001
From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com>
Date: Sat, 5 Nov 2022 02:05:21 +0100
Subject: [PATCH] Make dupes highlight persist on field blur (#2182)

---
 ts/editor/EditorField.svelte | 19 +++++++++++++++----
 ts/editor/NoteEditor.svelte  |  4 +---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
index 90f748271..fc2e649ee 100644
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@@ -56,6 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let field: FieldData;
     export let collapsed = false;
     export let flipInputs = false;
+    export let dupe = false;
 
     const directionStore = writable<"ltr" | "rtl">();
     setContext(directionKey, directionStore);
@@ -89,7 +90,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <slot name="field-label" />
 
     <Collapsible collapse={collapsed} let:collapsed={hidden}>
-        <div use:elementResolve class="editor-field" on:focusin on:focusout {hidden}>
+        <div
+            use:elementResolve
+            class="editor-field"
+            class:dupe
+            on:focusin
+            on:focusout
+            {hidden}
+        >
             <EditingArea
                 {content}
                 fontFamily={field.fontFamily}
@@ -120,10 +128,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         @include elevation(1);
 
+        outline-offset: -1px;
+        &.dupe,
+        &.dupe:focus-within {
+            outline: 2px solid var(--accent-danger);
+        }
         &:focus-within {
-            /* --focus-color set in NoteEditor.svelte */
-            outline: 2px solid var(--focus-color);
-            outline-offset: -1px;
+            outline: 2px solid var(--border-focus);
         }
     }
 </style>
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index bcded1ebc..544c7bd12 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -436,9 +436,7 @@ the AddCards dialog) should be implemented in the user of this component.
                             $hoveredField = null;
                         }}
                         collapsed={fieldsCollapsed[index]}
-                        --focus-color={cols[index] === "dupe"
-                            ? "var(--accent-danger)"
-                            : "var(--border-focus)"}
+                        dupe={cols[index] === "dupe"}
                     >
                         <svelte:fragment slot="field-label">
                             <LabelContainer