From db9aaba929e976c7a51175a07fd07d056832c2a6 Mon Sep 17 00:00:00 2001
From: Aristotelis <5459332+glutanimate@users.noreply.github.com>
Date: Thu, 18 Jan 2024 01:09:06 +0100
Subject: [PATCH] Make tags and tag suggestions able to be styled by add-ons
 (#2941)

* Expose tag name to add-ons via data attribute

* Expose autocomplete items to add-ons as data attributes

* Use common data-addon* prefix for attributes
---
 ts/tag-editor/AutocompleteItem.svelte | 2 ++
 ts/tag-editor/Tag.svelte              | 2 ++
 ts/tag-editor/TagWithTooltip.svelte   | 9 ++++++++-
 ts/tag-editor/WithAutocomplete.svelte | 2 ++
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/ts/tag-editor/AutocompleteItem.svelte b/ts/tag-editor/AutocompleteItem.svelte
index 0d7bdb87f..f29936cae 100644
--- a/ts/tag-editor/AutocompleteItem.svelte
+++ b/ts/tag-editor/AutocompleteItem.svelte
@@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     export let selected = false;
     export let active = false;
+    export let suggestion: string; // used by add-ons to target individual suggestions
 
     let buttonRef: HTMLElement;
 
@@ -24,6 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class="autocomplete-item"
     class:selected
     class:active
+    data-addon-suggestion={suggestion}
     on:mousedown|preventDefault
     on:mouseup
     on:mouseenter
diff --git a/ts/tag-editor/Tag.svelte b/ts/tag-editor/Tag.svelte
index 9f3a93e70..c3097e66e 100644
--- a/ts/tag-editor/Tag.svelte
+++ b/ts/tag-editor/Tag.svelte
@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let className: string = "";
     export { className as class };
 
+    export let tagName: string; // used by add-ons to target individual tag elements
     export let tooltip: string | undefined = undefined;
     export let selected = false;
 
@@ -32,6 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:flashing
     tabindex="-1"
     title={tooltip}
+    data-addon-tag={tagName}
     on:mousemove
     on:click
 >
diff --git a/ts/tag-editor/TagWithTooltip.svelte b/ts/tag-editor/TagWithTooltip.svelte
index dcb927387..1ef8f7de8 100644
--- a/ts/tag-editor/TagWithTooltip.svelte
+++ b/ts/tag-editor/TagWithTooltip.svelte
@@ -69,7 +69,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     class:empty={name === ""}
 >
     {#if active}
-        <Tag class={className} on:mousemove={setControlShift} on:click={onClick}>
+        <Tag
+            class={className}
+            tagName={name}
+            on:mousemove={setControlShift}
+            on:click={onClick}
+        >
             {name}
             <slot {selectMode} {hoverClass} />
         </Tag>
@@ -77,6 +82,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <WithTooltip {tooltip} trigger="hover" placement="top" let:createTooltip>
             <Tag
                 class={className}
+                tagName={name}
                 bind:flash
                 bind:selected
                 on:mousemove={setControlShift}
@@ -90,6 +96,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     {:else}
         <Tag
             class={className}
+            tagName={name}
             bind:flash
             bind:selected
             on:mousemove={setControlShift}
diff --git a/ts/tag-editor/WithAutocomplete.svelte b/ts/tag-editor/WithAutocomplete.svelte
index 0161067ff..3a8cb01f5 100644
--- a/ts/tag-editor/WithAutocomplete.svelte
+++ b/ts/tag-editor/WithAutocomplete.svelte
@@ -143,6 +143,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     <AutocompleteItem
                         selected
                         {active}
+                        {suggestion}
                         on:mousedown={() => setSelectedAndActive(index)}
                         on:mouseup={() => {
                             selectIndex(index);
@@ -155,6 +156,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     </AutocompleteItem>
                 {:else}
                     <AutocompleteItem
+                        {suggestion}
                         on:mousedown={() => setSelectedAndActive(index)}
                         on:mouseup={() => {
                             selectIndex(index);