Better XML formatting, fix pointer cursor in sidebar, copy/create URL in response

src-web/components/GlobalHooks.tsx

@@ -1,4 +1,3 @@
-import { activeRequestAtom } from '../hooks/useActiveRequest';
 import { useSubscribeActiveWorkspaceId } from '../hooks/useActiveWorkspace';
 import { useActiveWorkspaceChangedToast } from '../hooks/useActiveWorkspaceChangedToast';
 import { useHotKey, useSubscribeHotKeys } from '../hooks/useHotKey';

src-web/components/core/Editor/Editor.css

@@ -238,15 +238,15 @@
 
 .cm-tooltip.cm-tooltip-hover {
   @apply shadow-lg bg-surface rounded text-text-subtle border border-border-subtle z-50 pointer-events-auto text-sm;
-  @apply px-2 py-1;
+  @apply p-1.5;
+
+  /* Style the tooltip for popping up "open in browser" and other stuff */
+  a, button {
+    @apply text-text hover:bg-surface-highlight w-full h-sm flex items-center px-2 rounded;
+  }
 
   a {
-    @apply text-text;
-
-    &:hover {
-      @apply underline;
-    }
-
+    @apply cursor-default !important;
     &::after {
       @apply text-text bg-text h-3 w-3 ml-1;
       content: '';

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

@@ -1,5 +1,9 @@
 import type { DecorationSet, ViewUpdate } from '@codemirror/view';
 import { Decoration, EditorView, hoverTooltip, MatchDecorator, ViewPlugin } from '@codemirror/view';
+import { activeWorkspaceIdAtom } from '../../../../hooks/useActiveWorkspace';
+import { copyToClipboard } from '../../../../lib/copy';
+import { createRequestAndNavigate } from '../../../../lib/createRequestAndNavigate';
+import { jotaiStore } from '../../../../lib/jotai';
 
 const REGEX =
   /(https?:\/\/([-a-zA-Z0-9@:%._+*~#=]{1,256})+(\.[a-zA-Z0-9()]{1,6})?\b([-a-zA-Z0-9()@:%_+*.~#?&/={}[\]]*))/g;
@@ -32,11 +36,38 @@ const tooltip = hoverTooltip(
       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';
+        const workspaceId = jotaiStore.get(activeWorkspaceIdAtom);
+        const link = text.substring(found!.start - from, found!.end - from);
+        const dom = document.createElement('div');
+
+        const $open = document.createElement('a');
+        $open.textContent = 'Open in browser';
+        $open.href = link;
+        $open.target = '_blank';
+        $open.rel = 'noopener noreferrer';
+
+        const $copy = document.createElement('button');
+        $copy.textContent = 'Copy to clipboard';
+        $copy.addEventListener('click', () => {
+          copyToClipboard(link);
+        });
+
+        const $create = document.createElement('button');
+        $create.textContent = 'Create new request';
+        $create.addEventListener('click', async () => {
+          await createRequestAndNavigate({
+            model: 'http_request',
+            workspaceId: workspaceId ?? 'n/a',
+            url: link,
+          });
+        });
+
+        dom.appendChild($open);
+        dom.appendChild($copy);
+        if (workspaceId != null) {
+          dom.appendChild($create);
+        }
+
         return { dom };
       },
     };

src-web/components/core/tree/TreeItem.tsx

@@ -296,7 +296,7 @@ function TreeItemInner<T extends { id: string }>({
           onClick={handleClick}
           onDoubleClick={handleDoubleClick}
           disabled={editing}
-          className="tree-item-inner px-2 focus:outline-none flex items-center gap-2 h-full whitespace-nowrap"
+          className="cursor-default tree-item-inner px-2 focus:outline-none flex items-center gap-2 h-full whitespace-nowrap"
           {...attributes}
           {...listeners}
           tabIndex={isLastSelected ? 0 : -1}

src-web/lib/formatters.ts

@@ -1,12 +1,5 @@
-import XmlBeautify from 'xml-beautify';
 import { invokeCmd } from './tauri';
 
-const INDENT = '  ';
-
-const xmlBeautifier = new XmlBeautify({
-  INDENT,
-});
-
 export async function tryFormatJson(text: string): Promise<string> {
   if (text === '') return text;
 
@@ -15,13 +8,12 @@ export async function tryFormatJson(text: string): Promise<string> {
     return result;
   } catch (err) {
     console.warn('Failed to format JSON', err);
-    // Nothing
   }
 
   try {
     return JSON.stringify(JSON.parse(text), null, 2);
   } catch (err) {
-    console.log("JSON beautify failed", err);
+    console.log('JSON beautify failed', err);
   }
 
   return text;
@@ -31,9 +23,11 @@ export async function tryFormatXml(text: string): Promise<string> {
   if (text === '') return text;
 
   try {
-    return xmlBeautifier.beautify(text);
+    const result = await invokeCmd<string>('cmd_format_xml', { text });
+    return result;
   } catch (err) {
-    console.log("XML beautify failed", err);
-    return text;
+    console.warn('Failed to format XML', err);
   }
+
+  return text;
 }

src-web/lib/tauri.ts

@@ -15,6 +15,7 @@ type TauriCmd =
   | 'cmd_dismiss_notification'
   | 'cmd_export_data'
   | 'cmd_format_json'
+  | 'cmd_format_xml'
   | 'cmd_get_http_authentication_config'
   | 'cmd_get_http_authentication_summaries'
   | 'cmd_get_sse_events'