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

@@ -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

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
 >

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}

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);