[ui] add a link to a8s editor display

webui/src/components/display/blobs/ImageViewer.svelte

@@ -2,6 +2,7 @@
   import type { PutResult } from "upend/types";
   import { fetchEntity, useEntity } from "../../../lib/entity";
   import Spinner from "../../utils/Spinner.svelte";
+  import UpObject from "../UpObject.svelte";
 
   export let address: string;
   export let editable: boolean;
@@ -71,6 +72,9 @@
       });
   }
 
+  let a8sLinkTarget: HTMLDivElement;
+  let a8sLinkAddress: string;
+
   async function loaded() {
     imageLoaded = true;
     const { Annotorious } = await import("@recogito/annotorious");
@@ -79,7 +83,13 @@
       image: imageEl,
       drawOnSingleClick: true,
       fragmentUnit: "percent",
-      widgets: ["COMMENT"],
+      widgets: [
+        "COMMENT",
+        (info: { annotation: W3cAnnotation }) => {
+          a8sLinkAddress = info.annotation?.id;
+          return a8sLinkTarget;
+        },
+      ],
     });
 
     anno.on("createAnnotation", async (annotation) => {
@@ -170,6 +180,13 @@
     bind:this={imageEl}
     draggable="false"
   />
+  <div class="a8sUpLink" bind:this={a8sLinkTarget}>
+    {#if a8sLinkAddress}
+      <div class="link">
+        <UpObject link address={a8sLinkAddress} />
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style global lang="scss">
@@ -184,4 +201,16 @@
       max-height: var(--preview-height);
     }
   }
+
+  .r6o-editor {
+    font-family: inherit;
+  }
+
+  .a8sUpLink {
+    text-align: initial;
+
+    .link {
+      margin: 0.5em 1em;
+    }
+  }
 </style>