feat(editor): Cmd+K, link-actief, voorgrond cmd-klik, slim plakken, koppen >= tekst

- Cmd/Ctrl+K opent de inline link-editor (nieuw of bewerken van de link bij de cursor).
- De Link-knop licht op (is-active) als de cursor op een link staat.
- Cmd/Ctrl-klik op een link opent nu op de **voorgrond** (zelfde blank-tab-patroon als
  de 'Openen'-knop) i.p.v. een achtergrond-tabblad.
- Slim plakken: een URL plakken terwijl tekst geselecteerd is maakt van die tekst een
  link naar de URL i.p.v. de tekst te vervangen.
- Kop-groottes em-gebaseerd (h1 1.5em .. h6 1em): een kop is nooit kleiner dan de
  paragraaf-tekst; de diepste kop is body-grootte, onderscheiden door vet.

100% dekking behouden.

Author: robbertbos

apps/boekhouding-frontend/src/assets/app.css

@@ -1475,11 +1475,13 @@ a.card-link:hover {
   margin-block-end: 0;
 }
 
-.markdown-content h2 { font-size: 1.3rem; }
-.markdown-content h3 { font-size: 1.17rem; }
-.markdown-content h4 { font-size: 1.05rem; }
-.markdown-content h5 { font-size: 0.95rem; }
-.markdown-content h6 { font-size: 0.88rem; }
+/* em-based so a heading is never smaller than the body text. */
+.markdown-content h1 { font-size: 1.5em; }
+.markdown-content h2 { font-size: 1.36em; }
+.markdown-content h3 { font-size: 1.24em; }
+.markdown-content h4 { font-size: 1.14em; }
+.markdown-content h5 { font-size: 1.06em; }
+.markdown-content h6 { font-size: 1em; }
 
 .markdown-content h2,
 .markdown-content h3,

packages/assessment-core/src/assets/base.css

@@ -384,14 +384,15 @@
   margin-block: 0.7em 0.1em;
 }
 
-/* Distinct, shrinking sizes for every level so a multi-level sub-heading
-   hierarchy (H2..H6) stays visually distinguishable inside the field. */
-.rvo-theme .markdown-editor .ProseMirror h1 { font-size: 1.45rem; }
-.rvo-theme .markdown-editor .ProseMirror h2 { font-size: 1.3rem; }
-.rvo-theme .markdown-editor .ProseMirror h3 { font-size: 1.17rem; }
-.rvo-theme .markdown-editor .ProseMirror h4 { font-size: 1.05rem; }
-.rvo-theme .markdown-editor .ProseMirror h5 { font-size: 0.95rem; }
-.rvo-theme .markdown-editor .ProseMirror h6 { font-size: 0.88rem; color: var(--rvo-color-grijs-700, #555); }
+/* Sizes are em-based (relative to the body text), so every heading level stays
+   distinct yet never smaller than a paragraph — the deepest level is exactly the
+   body size, set apart by its bold weight. */
+.rvo-theme .markdown-editor .ProseMirror h1 { font-size: 1.5em; }
+.rvo-theme .markdown-editor .ProseMirror h2 { font-size: 1.36em; }
+.rvo-theme .markdown-editor .ProseMirror h3 { font-size: 1.24em; }
+.rvo-theme .markdown-editor .ProseMirror h4 { font-size: 1.14em; }
+.rvo-theme .markdown-editor .ProseMirror h5 { font-size: 1.06em; }
+.rvo-theme .markdown-editor .ProseMirror h6 { font-size: 1em; }
 
 .rvo-theme .markdown-editor .ProseMirror p {
   margin-block: 0.25rem;

packages/assessment-core/src/components/task/MarkdownEditor.vue

@@ -75,6 +75,27 @@ const editor = useEditor({
     // Cmd/Ctrl+click opens a link in a focused tab and stops the editor from
     // moving the selection (the logic lives in openLinkOnModifierClick).
     handleClick: (_view, _pos, event) => openLinkOnModifierClick(event as MouseEvent),
+    // Cmd/Ctrl+K opens the inline link editor (add a new link or edit the one at
+    // the cursor), matching the common editor shortcut.
+    handleKeyDown: (_view, event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+        event.preventDefault()
+        openLinkEditor()
+        return true
+      }
+      return false
+    },
+    // Pasting a URL over a non-empty selection links that text instead of
+    // replacing it with the raw URL.
+    handlePaste: (view, event) => {
+      const text = event.clipboardData?.getData('text/plain')?.trim()
+      if (text && !view.state.selection.empty && /^https?:\/\/\S+$/i.test(text)) {
+        // The editor exists while the user is pasting into it.
+        editor.value!.chain().focus().setLink({ href: text }).run()
+        return true
+      }
+      return false
+    },
   },
   onUpdate: ({ editor }) => {
     emit('update:modelValue', editor.getMarkdown())
@@ -104,6 +125,7 @@ function syncActiveState() {
     orderedList: instance.isActive('orderedList'),
     blockquote: instance.isActive('blockquote'),
     codeBlock: instance.isActive('codeBlock'),
+    link: instance.isActive('link'),
   }
 }
 

packages/assessment-core/src/components/task/MarkdownToolbar.vue

@@ -179,7 +179,7 @@ function onKeydown(event: KeyboardEvent) {
       <span class="markdown-toolbar__sep" role="separator" aria-orientation="vertical"></span>
       <button v-for="button in group" :key="button.command" type="button"
         class="markdown-toolbar__control markdown-toolbar__button"
-        :class="{ 'is-active': button.toggle && activeMarks[button.command] }"
+        :class="{ 'is-active': activeMarks[button.command] }"
         :tabindex="rovingIndex[button.command] === activeIndex ? 0 : -1"
         :aria-label="button.label" :title="buttonTitle(button)"
         :aria-pressed="button.toggle ? Boolean(activeMarks[button.command]) : undefined"

packages/assessment-core/src/utils/markdownLinkRule.ts

@@ -34,22 +34,27 @@ export function markdownLinkInputRule(link: MarkType): InputRule {
 }
 
 // While editing, a plain click on a link just places the cursor. Holding the
-// platform modifier (Cmd on macOS, Ctrl elsewhere) opens the link in a new tab,
-// matching common editors. Used as a ProseMirror handleClick: it preventDefaults
-// the native handling and returns true so the editor does not also move the
-// selection (which would otherwise select the clicked line). Returns false (lets
-// the editor place the cursor) for a plain click or a non-openable link.
+// platform modifier (Cmd on macOS, Ctrl elsewhere) opens the link in a focused
+// new tab, matching common editors. Used as a ProseMirror handleClick: it
+// preventDefaults the native handling and returns true so the editor does not
+// also move the selection (which would otherwise select the clicked line).
+// Returns false (lets the editor place the cursor) for a plain click or a
+// non-openable link.
 //
-// Security: only http(s) hrefs are opened, blocking javascript:/data: that could
-// hide in user-entered link markdown. noopener,noreferrer severs window.opener so
-// the opened page cannot navigate this tab back to a phishing page (reverse
-// tabnabbing). A programmatic window.open already lands in the foreground, so no
-// .focus() is needed (and noopener makes the return value null anyway).
+// Foreground without reverse-tabnabbing: open a blank same-origin tab, null its
+// opener before navigating to the (possibly cross-origin) href, then focus it.
+// Only http(s) is opened, blocking javascript:/data: hidden in link markdown.
 export function openLinkOnModifierClick(event: MouseEvent): boolean {
   if (!(event.metaKey || event.ctrlKey)) return false
   const anchor = (event.target as HTMLElement | null)?.closest('a') as HTMLAnchorElement | null
   if (!anchor || !/^https?:\/\//i.test(anchor.href)) return false
   event.preventDefault()
-  window.open(anchor.href, '_blank', 'noopener,noreferrer')
+  const tab = window.open('about:blank', '_blank')
+  /* istanbul ignore else @preserve -- a popup blocker can return null. */
+  if (tab) {
+    tab.opener = null
+    tab.location.replace(anchor.href)
+    tab.focus()
+  }
   return true
 }

packages/assessment-core/test/cov/components-task-MarkdownEditor.cov.test.ts

@@ -1,6 +1,7 @@
 import { describe, it, expect, beforeAll, vi } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
 import type { Editor } from '@tiptap/core'
+import { Slice } from '@tiptap/pm/model'
 import MarkdownEditor from '../../src/components/task/MarkdownEditor.vue'
 
 // jsdom has no layout engine; ProseMirror measures the DOM via Range.getClientRects
@@ -145,17 +146,56 @@ describe('MarkdownEditor.vue (WYSIWYG)', () => {
     wrapper.unmount()
   })
 
-  it('opens a link in a new tab on Cmd/Ctrl+click via the editor handleClick', async () => {
+  it('opens the link editor on Cmd/Ctrl+K and ignores other modifier keys', async () => {
     const wrapper = await mountEditor({ modelValue: 'tekst' })
     const editor = getEditor(wrapper)
-    const openSpy = vi.fn()
+    const press = (key: string, mods: Record<string, boolean> = {}) =>
+      editor.view.someProp('handleKeyDown', (h: (...a: unknown[]) => boolean) =>
+        h(editor.view, new KeyboardEvent('keydown', { key, cancelable: true, ...mods })))
+    press('k', { metaKey: true })
+    await flushPromises()
+    expect(wrapper.find('.markdown-editor__linkbar').exists()).toBe(true)
+    // The handler runs for another Cmd shortcut but declines it.
+    press('q', { ctrlKey: true })
+    wrapper.unmount()
+  })
+
+  it('links the selected text when a URL is pasted, and otherwise pastes normally', async () => {
+    const wrapper = await mountEditor({ modelValue: 'Mijn site' })
+    const editor = getEditor(wrapper)
+    // someProp also runs other extensions' paste handlers (Link reads the slice,
+    // CodeBlock JSON-parses a clipboard key); pass an empty slice and only return
+    // text for text/plain so those handlers no-op instead of throwing.
+    const paste = (text: string) =>
+      editor.view.someProp('handlePaste', (h: (...a: unknown[]) => boolean) =>
+        h(editor.view, { clipboardData: { getData: (type: string) => (type === 'text/plain' ? text : '') } }, Slice.empty))
+
+    editor.commands.selectAll()
+    paste('https://example.org') // URL over a selection → link the text
+    await flushPromises()
+    expect(wrapper.find('.ProseMirror').html()).toContain('href="https://example.org"')
+
+    expect(paste('gewone tekst')).toBeFalsy() // non-URL → default paste
+    expect(paste('')).toBeFalsy() // empty clipboard → default paste
+    editor.commands.setTextSelection(1) // collapse the selection
+    expect(paste('https://x.org')).toBeFalsy() // URL but nothing selected → default paste
+    wrapper.unmount()
+  })
+
+  it('opens a focused tab on Cmd/Ctrl+click via the editor handleClick', async () => {
+    const wrapper = await mountEditor({ modelValue: 'tekst' })
+    const editor = getEditor(wrapper)
+    const tab = { opener: {} as unknown, location: { replace: vi.fn() }, focus: vi.fn() }
+    const openSpy = vi.fn(() => tab)
     vi.stubGlobal('open', openSpy)
     const anchor = document.createElement('a')
     anchor.href = 'https://x.org'
     const event = new MouseEvent('click', { cancelable: true, metaKey: true })
     Object.defineProperty(event, 'target', { value: anchor })
     editor.view.someProp('handleClick', (handler: (...args: unknown[]) => boolean) => handler(editor.view, 1, event))
-    expect(openSpy).toHaveBeenCalledWith('https://x.org/', '_blank', 'noopener,noreferrer')
+    expect(openSpy).toHaveBeenCalledWith('about:blank', '_blank')
+    expect(tab.location.replace).toHaveBeenCalledWith('https://x.org/')
+    expect(tab.focus).toHaveBeenCalled()
     vi.unstubAllGlobals()
     wrapper.unmount()
   })

packages/assessment-core/test/cov/components-task-MarkdownToolbar.cov.test.ts

@@ -132,17 +132,21 @@ describe('MarkdownToolbar.vue', () => {
     expect((document.activeElement as HTMLElement).textContent).toContain('Paragraaf')
   })
 
-  it('lights up active toggle buttons (is-active + aria-pressed) and leaves inserts unpressed', () => {
-    const wrapper = mountToolbar({ activeMarks: { bold: true, blockquote: false } })
+  it('lights up active toggle buttons (is-active + aria-pressed) and the link button when on a link', () => {
+    const wrapper = mountToolbar({ activeMarks: { bold: true, blockquote: false, link: true } })
     const bold = wrapper.find('button[aria-label="Vet"]')
     expect(bold.classes()).toContain('is-active')
     expect(bold.attributes('aria-pressed')).toBe('true')
     const quote = wrapper.find('button[aria-label="Citaat"]')
     expect(quote.classes()).not.toContain('is-active')
     expect(quote.attributes('aria-pressed')).toBe('false')
-    // Inserts (divider, link) are not toggles -> no aria-pressed, never active.
+    // Link highlights when the cursor is on a link, but it is not a toggle (no aria-pressed).
+    const link = wrapper.find('button[aria-label="Link"]')
+    expect(link.classes()).toContain('is-active')
+    expect(link.attributes('aria-pressed')).toBeUndefined()
+    // Divider is neither active nor pressed.
+    expect(wrapper.find('button[aria-label="Scheidingslijn"]').classes()).not.toContain('is-active')
     expect(wrapper.find('button[aria-label="Scheidingslijn"]').attributes('aria-pressed')).toBeUndefined()
-    expect(wrapper.find('button[aria-label="Link"]').attributes('aria-pressed')).toBeUndefined()
   })
 
   it('shows the keyboard shortcut in the tooltip, or just the label when there is none', () => {

packages/assessment-core/test/cov/utils-markdownLinkRule.cov.test.ts

@@ -66,16 +66,20 @@ describe('markdownLinkRule', () => {
 })
 
 describe('openLinkOnModifierClick', () => {
-  it('opens a noopener tab and prevents the default on Cmd/Ctrl+click of an http(s) link', () => {
-    const openSpy = vi.fn()
+  it('opens a focused tab (opener severed before navigating) on Cmd/Ctrl+click of an http(s) link', () => {
+    const tab = { opener: {} as unknown, location: { replace: vi.fn() }, focus: vi.fn() }
+    const openSpy = vi.fn(() => tab)
     vi.stubGlobal('open', openSpy)
     const anchor = document.createElement('a')
     anchor.href = 'https://x.org'
 
     const event = clickEvent(anchor, { metaKey: true })
     expect(openLinkOnModifierClick(event)).toBe(true)
     expect(event.defaultPrevented).toBe(true)
-    expect(openSpy).toHaveBeenCalledWith('https://x.org/', '_blank', 'noopener,noreferrer')
+    expect(openSpy).toHaveBeenCalledWith('about:blank', '_blank')
+    expect(tab.opener).toBeNull()
+    expect(tab.location.replace).toHaveBeenCalledWith('https://x.org/')
+    expect(tab.focus).toHaveBeenCalled()
 
     expect(openLinkOnModifierClick(clickEvent(anchor, { ctrlKey: true }))).toBe(true) // Ctrl variant
     vi.unstubAllGlobals()