Fix "ref-issue" handling in markup (#35739)

This is a follow up for #35662, and also fix #31181, help #30275, fix #31161

web_src/js/markup/refissue.ts

@@ -0,0 +1,41 @@
+import {queryElems} from '../utils/dom.ts';
+import {parseIssueHref} from '../utils.ts';
+import {createApp} from 'vue';
+import ContextPopup from '../components/ContextPopup.vue';
+import {createTippy, getAttachedTippyInstance} from '../modules/tippy.ts';
+
+export function initMarkupRefIssue(el: HTMLElement) {
+  queryElems(el, '.ref-issue', (el) => {
+    el.addEventListener('mouseenter', showMarkupRefIssuePopup);
+    el.addEventListener('focus', showMarkupRefIssuePopup);
+  });
+}
+
+export function showMarkupRefIssuePopup(e: MouseEvent | FocusEvent) {
+  const refIssue = e.currentTarget as HTMLElement;
+  if (getAttachedTippyInstance(refIssue)) return;
+  if (refIssue.classList.contains('ref-external-issue')) return;
+
+  const issuePathInfo = parseIssueHref(refIssue.getAttribute('href'));
+  if (!issuePathInfo.ownerName) return;
+
+  const el = document.createElement('div');
+  const tippy = createTippy(refIssue, {
+    theme: 'default',
+    content: el,
+    trigger: 'mouseenter focus',
+    placement: 'top-start',
+    interactive: true,
+    role: 'dialog',
+    interactiveBorder: 5,
+    // onHide() { return false }, // help to keep the popup and debug the layout
+    onShow: () => {
+      const view = createApp(ContextPopup, {
+        // backend: GetIssueInfo
+        loadIssueInfoUrl: `${window.config.appSubUrl}/${issuePathInfo.ownerName}/${issuePathInfo.repoName}/issues/${issuePathInfo.indexString}/info`,
+      });
+      view.mount(el);
+    },
+  });
+  tippy.show();
+}