From 946f581f044ba94371e8f8e6779191cd69dd2895 Mon Sep 17 00:00:00 2001
From: mkpoli <git@mkpo.li>
Date: Thu, 17 Oct 2024 00:30:36 +0900
Subject: [PATCH] feat: highlight selected variant char

---
 src/lib/VariantKanji.svelte                     | 2 +-
 src/lib/buttons/InsertButtonVariantKanji.svelte | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/lib/VariantKanji.svelte b/src/lib/VariantKanji.svelte
index 6634501..de6956d 100644
--- a/src/lib/VariantKanji.svelte
+++ b/src/lib/VariantKanji.svelte
@@ -91,7 +91,7 @@ $effect(() => {
 					<InsertButton color={color} text={traditional} display={`${traditional}=${simplified}`} />
 				{/each}
 				{#each Object.entries(GROUPED_VARIANTS) as [key, variants]}
-					<InsertButtonVariantKanji display={key} variants={variants.map(([display, [compatibility, variantSelector]]) => ([display, selectVariant(compatibility, variantSelector)]))} />
+					<InsertButtonVariantKanji display={key} variants={variants.map(([display, [compatibility, variantSelector]]) => ([display, selectVariant(compatibility, variantSelector)]))} selection={editor.selectedText} />
 				{/each}
 			</div>
 		</div>
diff --git a/src/lib/buttons/InsertButtonVariantKanji.svelte b/src/lib/buttons/InsertButtonVariantKanji.svelte
index 566ef9f..2db7f26 100644
--- a/src/lib/buttons/InsertButtonVariantKanji.svelte
+++ b/src/lib/buttons/InsertButtonVariantKanji.svelte
@@ -6,9 +6,11 @@ import tippy, { type Instance as TippyInstance } from "tippy.js";
 let {
 	display,
 	variants,
+	selection,
 }: {
 	display: string;
 	variants: readonly (readonly [display: string, variant: string | null])[];
+	selection: string;
 } = $props();
 
 let instance: TippyInstance | undefined;
@@ -34,7 +36,7 @@ onMount(() => {
 const editor = getContext<Editor>("editor");
 </script>
 
-<button bind:this={button} class:active>{display}</button>
+<button bind:this={button} class:active class:selected={variants.some(([display, _v]) => selection.includes(display))}>{display}</button>
 
 <div class="variants" bind:this={variantsContainer}>
   {#each variants as [display, variant]}
@@ -77,6 +79,11 @@ const editor = getContext<Editor>("editor");
     background-color: #eee;
   }
 
+  button.selected {
+    border-color: #765300;
+    background-color: #fff0cc;
+  }
+
   .variants {
     display: flex;
     flex-direction: column;