feat: highlight selected variant char

mkpoli · Oct 16, 2024 · 946f581 · 946f581
1 parent 607584d
commit 946f581
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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;