Improve link rendering in QuickLook

src/quicklook/scroll.ts → src/quicklook/interaction.ts

@@ -1,5 +1,18 @@
 import type { Mode } from './mode';
 
+/**
+ * Disable the force-touch deep press (link preview / look up) on links, while
+ * keeping it available for normal text.
+ */
+export function interceptForceTouch() {
+  document.addEventListener('webkitmouseforcewillbegin', event => {
+    const target = event.target;
+    if (target instanceof Element && target.closest('a') !== null) {
+      event.preventDefault();
+    }
+  });
+}
+
 /**
  * Redirect pinch-zoom to the preview pane in preview mode by overriding the
  * `pinchZoomTarget` resolver from `@light`.

src/quicklook/ui.ts

@@ -1,7 +1,7 @@
 import { createToolbar } from './toolbar';
 import { currentMode, saveMode } from './mode';
 import { getEditorText } from './editor';
-import { interceptPinchZoom, interceptDragging, interceptWheelEvent, trackToolbarSeparator } from './scroll';
+import { interceptForceTouch, interceptPinchZoom, interceptDragging, interceptWheelEvent, trackToolbarSeparator } from './interaction';
 import { renderMarkdown, handlePostRender } from '../render';
 import { replaceImageURLs } from '../features/image';
 import { appendStyle } from '../shared/utils';
@@ -54,6 +54,7 @@ export function setUpQuickLook(previewPane: HTMLElement) {
     }
   });
 
+  interceptForceTouch();
   interceptPinchZoom(currentMode, previewPane);
   interceptDragging(currentMode, previewPane);
   interceptWheelEvent(currentMode, previewPane, toolbar);
@@ -103,6 +104,14 @@ function createRenderer(previewPane: HTMLElement): {
       try {
         const innerHTML = replaceImageURLs(await renderMarkdown(getEditorText(), false));
         previewPane.innerHTML = `<div class="quicklook-content">${innerHTML}</div>`;
+
+        // Links aren't interactive in quicklook; drop href so WebKit treats them
+        // as selectable plain text.
+        previewPane.querySelectorAll('a[href]').forEach(anchor => {
+          anchor.removeAttribute('href');
+          anchor.removeAttribute('target');
+        });
+
         handlePostRender(() => {});
         rendered = true;
       } catch (error) {

styles/quicklook.css

@@ -15,9 +15,14 @@ body {
 
 /* Links are not interactive in quicklook */
 .quicklook .markdown-body a,
-.quicklook .markdown-body a:hover {
+.quicklook .markdown-body a:hover,
+.quicklook .markdown-body a:not([href]) {
+  color: var(--fgColor-accent);
   text-decoration: none;
   cursor: text;
+  user-select: text;
+  -webkit-user-select: text;
+  -webkit-touch-callout: none;
 }
 
 .quicklook .markdown-body.overlay {