Clickable links in response viewer

src-web/components/core/Editor/hyperlink/extension.ts

@@ -0,0 +1,98 @@
+import type { DecorationSet, ViewUpdate } from '@codemirror/view';
+import { Decoration, hoverTooltip, MatchDecorator, ViewPlugin } from '@codemirror/view';
+import { EditorView } from 'codemirror';
+
+const REGEX =
+  /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&/=]*))/g;
+
+const tooltip = hoverTooltip(
+  (view, pos, side) => {
+    const { from, text } = view.state.doc.lineAt(pos);
+    let match;
+    let found: { start: number; end: number } | null = null;
+
+    while ((match = REGEX.exec(text))) {
+      const start = from + match.index;
+      const end = start + match[0].length;
+
+      if (pos >= start && pos <= end) {
+        found = { start, end };
+        break;
+      }
+    }
+
+    if (found == null) {
+      return null;
+    }
+
+    if ((found.start == pos && side < 0) || (found.end == pos && side > 0)) {
+      return null;
+    }
+
+    return {
+      pos: found.start,
+      end: found.end,
+      create() {
+        const dom = document.createElement('a');
+        dom.textContent = 'Open in browser';
+        dom.href = text.substring(found!.start - from, found!.end - from);
+        dom.target = '_blank';
+        dom.rel = 'noopener noreferrer';
+        return { dom };
+      },
+    };
+  },
+  {
+    hoverTime: 100,
+  },
+);
+
+const decorator = function () {
+  const placeholderMatcher = new MatchDecorator({
+    regexp: REGEX,
+    decoration(match, view, matchStartPos) {
+      const matchEndPos = matchStartPos + match[0].length - 1;
+
+      // Don't decorate if the cursor is inside the match
+      for (const r of view.state.selection.ranges) {
+        if (r.from > matchStartPos && r.to <= matchEndPos) {
+          return Decoration.replace({});
+        }
+      }
+
+      const groupMatch = match[1];
+      if (groupMatch == null) {
+        // Should never happen, but make TS happy
+        console.warn('Group match was empty', match);
+        return Decoration.replace({});
+      }
+
+      return Decoration.mark({
+        class: 'hyperlink-widget',
+      });
+    },
+  });
+
+  return ViewPlugin.fromClass(
+    class {
+      placeholders: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.placeholders = placeholderMatcher.createDeco(view);
+      }
+
+      update(update: ViewUpdate) {
+        this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders);
+      }
+    },
+    {
+      decorations: (instance) => instance.placeholders,
+      provide: (plugin) =>
+        EditorView.bidiIsolatedRanges.of((view) => {
+          return view.plugin(plugin)?.placeholders || Decoration.none;
+        }),
+    },
+  );
+};
+
+export const hyperlink = [tooltip, decorator()];