feat(editor): onderstrepen, knopvolgorde, foreground-link, compactere balk

- Onderstrepen toegevoegd (StarterKit-mark; serialiseert als `++..++` en round-trip
  in de editor). marked kent `++` niet, dus een kleine inline-extensie rendert het
  als <u> in de HTML-preview én in de PDF-export (decoration: underline). Opslag
  blijft markdown — geen raw HTML.
- Knopvolgorde per wens: blokstijl | vet/cursief/onderstrepen/doorhalen | opsomming/
  genummerd/citaat | link/scheidingslijn/code/codeblok.
- Link 'Openen' opent nu op de **voorgrond** (blanco tab, opener losgekoppeld vóór
  navigatie, dan focus) i.p.v. een verborgen tabblad; mailto via window.open(noopener).
- P/Hx-markers even groot als de andere icoontjes; balk iets naar links (minder
  padding).

100% dekking behouden.

Author: robbertbos

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

@@ -236,9 +236,9 @@
 .rvo-theme .markdown-toolbar__block-button {
   display: inline-flex;
   align-items: center;
-  gap: 0.3rem;
+  gap: 0.25rem;
   height: 1.75rem;
-  padding: 0 0.4rem;
+  padding: 0 0.4rem 0 0.25rem;
   border: 1px solid transparent;
   border-radius: 3px;
   background: none;
@@ -250,13 +250,14 @@
   background: var(--rvo-color-grijs-100, #f3f3f3);
 }
 
+/* The P / Hx marker reads as an icon, so size it like the other toolbar icons. */
 .rvo-theme .markdown-toolbar__block-marker {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 1.4rem;
+  min-width: 1.25rem;
   font-weight: 700;
-  font-size: 0.7rem;
+  font-size: 0.95rem;
   color: var(--rvo-color-grijs-700, #555);
 }
 
@@ -345,7 +346,7 @@
 .rvo-theme .markdown-editor__footer {
   display: flex;
   align-items: center;
-  padding: 0.2rem 0.4rem;
+  padding: 0.2rem 0.4rem 0.2rem 0.25rem;
   border-top: 1px solid var(--rvo-color-grijs-200, #e6e6e6);
   background: var(--rvo-color-grijs-100, #f3f3f3);
   border-radius: 0 0 4px 4px;

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

@@ -97,6 +97,7 @@ function syncActiveState() {
   activeMarks.value = {
     bold: instance.isActive('bold'),
     italic: instance.isActive('italic'),
+    underline: instance.isActive('underline'),
     strikethrough: instance.isActive('strike'),
     code: instance.isActive('code'),
     bulletList: instance.isActive('bulletList'),
@@ -157,7 +158,20 @@ function applyLink() {
 
 function openLink() {
   const url = linkUrl.value.trim()
-  if (url) window.open(url, '_blank', 'noopener,noreferrer')
+  if (/^https?:\/\//i.test(url)) {
+    // Open in the FOREGROUND: a blank same-origin tab whose opener we null before
+    // navigating, so the user lands on the link without the reverse-tabnabbing
+    // risk of an opener reference (noopener would block the foreground focus).
+    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(url)
+      tab.focus()
+    }
+  } else if (/^mailto:/i.test(url)) {
+    window.open(url, '_blank', 'noopener,noreferrer')
+  }
 }
 
 function removeLink() {
@@ -186,6 +200,9 @@ function handleCommand(command: MarkdownCommand) {
     case 'italic':
       instance.chain().focus().toggleItalic().run()
       break
+    case 'underline':
+      instance.chain().focus().toggleUnderline().run()
+      break
     case 'strikethrough':
       instance.chain().focus().toggleStrike().run()
       break

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

@@ -44,18 +44,19 @@ const groups: Btn[][] = [
   [
     { command: 'bold', label: 'Vet', toggle: true, shortcut: { key: 'B' }, paths: ['M7 5h6a3.5 3.5 0 0 1 0 7h-6z', 'M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7'] },
     { command: 'italic', label: 'Cursief', toggle: true, shortcut: { key: 'I' }, paths: ['M11 5h6', 'M7 19h6', 'M14 5l-4 14'] },
+    { command: 'underline', label: 'Onderstrepen', toggle: true, shortcut: { key: 'U' }, paths: ['M7 5v5a5 5 0 0 0 10 0v-5', 'M5 19h14'] },
     { command: 'strikethrough', label: 'Doorhalen', toggle: true, shortcut: { key: 'S', shift: true }, paths: ['M5 12h14', 'M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7', 'M8.5 17.5a4 2 0 0 0 4 1.5h1a3.5 3.5 0 0 0 .5 -6.95'] },
-    { command: 'code', label: 'Code', toggle: true, shortcut: { key: 'E' }, paths: ['M7 8l-4 4l4 4', 'M17 8l4 4l-4 4', 'M14 4l-4 16'] },
   ],
   [
     { command: 'bulletList', label: 'Opsommingslijst', toggle: true, shortcut: { key: '8', shift: true }, paths: ['M9 6h11', 'M9 12h11', 'M9 18h11', 'M5 6h.01', 'M5 12h.01', 'M5 18h.01'] },
     { command: 'orderedList', label: 'Genummerde lijst', toggle: true, shortcut: { key: '7', shift: true }, paths: ['M11 6h9', 'M11 12h9', 'M12 18h8', 'M4 16a2 2 0 1 1 4 0c0 .591 -.602 1.46 -1 2l-3 3h4', 'M6 10v-6l-2 2'] },
     { command: 'blockquote', label: 'Citaat', toggle: true, shortcut: { key: 'B', shift: true }, paths: ['M6 15h15', 'M21 19h-15', 'M15 11h6', 'M21 7h-6', 'M9 9h1a1 1 0 0 1 -1 1v-2.5a2 2 0 0 1 2 -2', 'M3 9h1a1 1 0 0 1 -1 1v-2.5a2 2 0 0 1 2 -2'] },
-    { command: 'codeBlock', label: 'Codeblok', toggle: true, paths: ['M7 4a2 2 0 0 0 -2 2v3a2 2 0 0 1 -2 2a2 2 0 0 1 2 2v3a2 2 0 0 0 2 2', 'M17 4a2 2 0 0 1 2 2v3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2v3a2 2 0 0 1 -2 2'] },
-    { command: 'divider', label: 'Scheidingslijn', paths: ['M4 12h16'] },
   ],
   [
     { command: 'link', label: 'Link', paths: ['M9 15l6 -6', 'M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464', 'M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463'] },
+    { command: 'divider', label: 'Scheidingslijn', paths: ['M4 12h16'] },
+    { command: 'code', label: 'Code', toggle: true, shortcut: { key: 'E' }, paths: ['M7 8l-4 4l4 4', 'M17 8l4 4l-4 4', 'M14 4l-4 16'] },
+    { command: 'codeBlock', label: 'Codeblok', toggle: true, paths: ['M7 4a2 2 0 0 0 -2 2v3a2 2 0 0 1 -2 2a2 2 0 0 1 2 2v3a2 2 0 0 0 2 2', 'M17 4a2 2 0 0 1 2 2v3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2v3a2 2 0 0 1 -2 2'] },
   ],
 ]
 

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

@@ -1,7 +1,26 @@
-import { Marked, type Tokens, type Token, type MarkedToken } from 'marked'
+import { Marked, type Tokens, type Token, type MarkedToken, type TokenizerAndRendererExtension } from 'marked'
 import type { Content } from 'pdfmake/interfaces'
 import { escapeHtml } from './escapeHtml'
 
+// `++text++` underline, matching what @tiptap/markdown serialises (marked has no
+// built-in underline). A small inline extension renders it for both the HTML
+// preview and the PDF lexer. The rendered output is a fixed <u> tag whose inner
+// content goes through the safe inline renderers, so no raw HTML can leak in.
+const underlineExtension: TokenizerAndRendererExtension = {
+  name: 'underline',
+  level: 'inline',
+  start(src) { return src.indexOf('++') },
+  tokenizer(src) {
+    const match = /^\+\+([\s\S]+?)\+\+/.exec(src)
+    if (!match) return undefined
+    return { type: 'underline', raw: match[0], text: match[1], tokens: this.lexer.inlineTokens(match[1]) }
+  },
+  renderer(token) {
+    // The tokenizer always sets `tokens`, so it is present here.
+    return `<u>${this.parser.parseInline(token.tokens!)}</u>`
+  },
+}
+
 // Marked instance with a custom renderer that acts as an allowlist.
 // Only safe HTML tags are produced; raw HTML input and images are stripped.
 // Links are rendered with target="_blank" and rel="noopener noreferrer".
@@ -27,10 +46,11 @@ const safeMarked = new Marked({
     // All remaining methods use the default renderer (safe tags only)
   },
 })
+safeMarked.use({ extensions: [underlineExtension] })
 
 /**
  * Parse markdown to sanitized HTML for preview rendering.
- * Uses an allowlist renderer: only safe tags (p, strong, em, ul, ol, li, h1-h6,
+ * Uses an allowlist renderer: only safe tags (p, strong, em, u, ul, ol, li, h1-h6,
  * code, pre, blockquote, hr, br, del, a) are produced. Raw HTML and images
  * are stripped. Links open in a new tab.
  */
@@ -58,6 +78,11 @@ function processInlineTokens(tokens: Token[]): PdfText[] {
   const parts: PdfText[] = []
   for (const token of tokens) {
     const t = token as MarkedToken
+    // `underline` is our custom inline token (not part of MarkedToken's union).
+    if ((t as { type: string }).type === 'underline') {
+      parts.push({ text: processInlineTokens((t as unknown as { tokens: Token[] }).tokens), decoration: 'underline' })
+      continue
+    }
     switch (t.type) {
       case 'strong':
         parts.push({ text: processInlineTokens(t.tokens), bold: true })
@@ -189,7 +214,9 @@ function processBlockTokens(tokens: Token[]): Content[] {
 export function markdownToPdfContent(markdown: string): Content {
   if (!markdown) return { text: '' }
 
-  const tokens = new Marked({ breaks: true }).lexer(markdown)
+  const pdfMarked = new Marked({ breaks: true })
+  pdfMarked.use({ extensions: [underlineExtension] })
+  const tokens = pdfMarked.lexer(markdown)
   const content = processBlockTokens(tokens)
 
   if (content.length === 0) return { text: '' }

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

@@ -6,6 +6,7 @@
 export type MarkdownCommand =
   | 'bold'
   | 'italic'
+  | 'underline'
   | 'strikethrough'
   | 'bulletList'
   | 'orderedList'

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

@@ -58,7 +58,7 @@ describe('MarkdownEditor.vue (WYSIWYG)', () => {
 
   it('applies every formatting command and emits markdown on a document change', async () => {
     const wrapper = await mountEditor({ modelValue: 'Hallo' })
-    const labels = ['Vet', 'Cursief', 'Doorhalen', 'Opsommingslijst', 'Genummerde lijst', 'Citaat', 'Code', 'Scheidingslijn']
+    const labels = ['Vet', 'Cursief', 'Onderstrepen', 'Doorhalen', 'Opsommingslijst', 'Genummerde lijst', 'Citaat', 'Code', 'Scheidingslijn']
     for (const label of labels) {
       await wrapper.find(`button[aria-label="${label}"]`).trigger('click')
       await flushPromises()
@@ -93,8 +93,9 @@ describe('MarkdownEditor.vue (WYSIWYG)', () => {
     wrapper.unmount()
   })
 
-  it('edits an existing link: pre-fills the url, opens it, and removes it', async () => {
-    const openSpy = vi.fn()
+  it('edits an existing link: pre-fills the url, opens it in the foreground, and removes it', async () => {
+    const tab = { opener: {} as unknown, location: { replace: vi.fn() }, focus: vi.fn() }
+    const openSpy = vi.fn(() => tab)
     vi.stubGlobal('open', openSpy)
     const wrapper = await mountEditor({ modelValue: 'tekst' })
     const editor = getEditor(wrapper)
@@ -107,14 +108,23 @@ describe('MarkdownEditor.vue (WYSIWYG)', () => {
     expect((wrapper.find('.markdown-editor__linkinput').element as HTMLInputElement).value).toBe('https://x.org')
     expect(linkButton(wrapper, 'Opslaan').exists()).toBe(true)
 
-    // Openen → opens in a new tab.
+    // Openen → foreground tab: a blank tab whose opener is severed before navigating.
+    await linkButton(wrapper, 'Openen').trigger('click')
+    expect(openSpy).toHaveBeenCalledWith('about:blank', '_blank')
+    expect(tab.opener).toBeNull()
+    expect(tab.location.replace).toHaveBeenCalledWith('https://x.org')
+    expect(tab.focus).toHaveBeenCalled()
+
+    // A mailto link opens via window.open with noopener.
+    await wrapper.find('.markdown-editor__linkinput').setValue('mailto:a@b.nl')
     await linkButton(wrapper, 'Openen').trigger('click')
-    expect(openSpy).toHaveBeenCalledWith('https://x.org', '_blank', 'noopener,noreferrer')
+    expect(openSpy).toHaveBeenCalledWith('mailto:a@b.nl', '_blank', 'noopener,noreferrer')
 
-    // With an empty url, Openen is a no-op.
+    // A non-openable url (empty) is a no-op.
+    openSpy.mockClear()
     await wrapper.find('.markdown-editor__linkinput').setValue('')
     await linkButton(wrapper, 'Openen').trigger('click')
-    expect(openSpy).toHaveBeenCalledTimes(1)
+    expect(openSpy).not.toHaveBeenCalled()
 
     // Verwijderen removes the link and closes the bar.
     await linkButton(wrapper, 'Verwijderen').trigger('click')

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

@@ -17,19 +17,19 @@ function blockButton(wrapper: ReturnType<typeof mount>) {
   return wrapper.find('.markdown-toolbar__block-button')
 }
 
-// block dropdown (index 0) + 10 buttons.
-const TEN_MINUS = Array(10).fill('-1')
+// block dropdown (index 0) + 11 buttons.
+const BUTTONS_MINUS = Array(11).fill('-1')
 
 describe('MarkdownToolbar.vue', () => {
   it('renders a labelled toolbar: block dropdown (tab stop) + grouped buttons with separators', () => {
     const wrapper = mountToolbar()
     const toolbar = wrapper.find('[role="toolbar"]')
     expect(toolbar.attributes('aria-label')).toBe('Tekstopmaak')
-    expect(wrapper.findAll('.markdown-toolbar__button')).toHaveLength(10)
+    expect(wrapper.findAll('.markdown-toolbar__button')).toHaveLength(11)
     expect(wrapper.findAll('.markdown-toolbar__sep')).toHaveLength(3)
-    expect(controlTabindexes(wrapper)).toEqual(['0', ...TEN_MINUS]) // dropdown holds the tab stop
+    expect(controlTabindexes(wrapper)).toEqual(['0', ...BUTTONS_MINUS]) // dropdown holds the tab stop
     expect(wrapper.findAll('.markdown-toolbar__button').map((b) => b.attributes('aria-label'))).toEqual([
-      'Vet', 'Cursief', 'Doorhalen', 'Code', 'Opsommingslijst', 'Genummerde lijst', 'Citaat', 'Codeblok', 'Scheidingslijn', 'Link',
+      'Vet', 'Cursief', 'Onderstrepen', 'Doorhalen', 'Opsommingslijst', 'Genummerde lijst', 'Citaat', 'Link', 'Scheidingslijn', 'Code', 'Codeblok',
     ])
   })
 
@@ -171,11 +171,11 @@ describe('MarkdownToolbar.vue', () => {
     await toolbar.trigger('keydown', { key: 'ArrowLeft' }) // Vet(1) -> dropdown(0)
     expect(controlTabindexes(wrapper)[0]).toBe('0')
     await toolbar.trigger('keydown', { key: 'ArrowLeft' }) // dropdown(0) -> last (wrap)
-    expect(controlTabindexes(wrapper)[10]).toBe('0')
+    expect(controlTabindexes(wrapper)[11]).toBe('0')
     await toolbar.trigger('keydown', { key: 'ArrowRight' }) // last -> dropdown(0) (wrap)
     expect(controlTabindexes(wrapper)[0]).toBe('0')
     await toolbar.trigger('keydown', { key: 'End' })
-    expect(controlTabindexes(wrapper)[10]).toBe('0')
+    expect(controlTabindexes(wrapper)[11]).toBe('0')
     await toolbar.trigger('keydown', { key: 'Home' })
     expect(controlTabindexes(wrapper)[0]).toBe('0')
   })
@@ -184,7 +184,7 @@ describe('MarkdownToolbar.vue', () => {
     const wrapper = mountToolbar()
     const toolbar = wrapper.find('[role="toolbar"]')
     await toolbar.trigger('keydown', { key: 'ArrowDown' }) // not a roving key
-    expect(controlTabindexes(wrapper)).toEqual(['0', ...TEN_MINUS])
+    expect(controlTabindexes(wrapper)).toEqual(['0', ...BUTTONS_MINUS])
     // A key bubbling from the menu must not move the toolbar tab stop.
     await blockButton(wrapper).trigger('click')
     await flushPromises()

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

@@ -15,6 +15,14 @@ describe('renderMarkdownToHtml', () => {
     expect(renderMarkdownToHtml('Hello world')).toContain('<p>Hello world</p>')
   })
 
+  it('renders ++text++ as <u> underline, and leaves an unterminated ++ literal', () => {
+    expect(renderMarkdownToHtml('++onder++ streep')).toContain('<u>onder</u>')
+    // Nested inline marks inside the underline are still parsed.
+    expect(renderMarkdownToHtml('++**vet**++')).toContain('<u><strong>vet</strong></u>')
+    // No closing ++ -> the tokenizer returns undefined and the text stays literal.
+    expect(renderMarkdownToHtml('++incompleet')).toContain('++incompleet')
+  })
+
   it('strips raw HTML via the html() renderer', () => {
     const html = renderMarkdownToHtml('<script>alert("xss")</script>')
     expect(html).not.toContain('<script>')
@@ -110,6 +118,14 @@ describe('markdownToPdfContent — inline token handling (processInlineTokens)',
     expect(delItem).toBeDefined()
   })
 
+  it('renders ++underline++ with an underline decoration', () => {
+    const content = markdownToPdfContent('++onder++') as any
+    const item = textArray(content).find(
+      (t: any) => typeof t === 'object' && t.decoration === 'underline',
+    )
+    expect(item).toBeDefined()
+  })
+
   it('handles codespan with background colour', () => {
     const content = markdownToPdfContent('`code`') as any
     const span = textArray(content).find((t: any) => typeof t === 'object' && t.background === '#e8e8e8')