feat(editor): Docs-stijl blokstijl-dropdown, actieve-status-knoppen, codeblok

Vervangt de native select door een blokstijl-knop in de balk (zoals Google Docs):
[T Paragraaf v] opent een menu met Paragraaf + Kop 1 t/m Kop 6 (met H-markers en
een vinkje op het actieve blok). Koppen zijn nu direct H1..H6 (één hash = H1, zes =
H6, standaard markdown); de document-afhankelijke verschuiving voor PDF-export volgt
later, dus de baseHeadingLevel-offset is verwijderd.

Verder:
- Knoppen lichten op (is-active + aria-pressed) als hun mark/node actief staat bij de
  cursor, zodat duidelijk is dat een tweede klik het uitzet (o.a. citaat).
- Codeblok-knop toegevoegd (toggleCodeBlock).
- Knoppen gegroepeerd met dunne scheidingslijnen.
- De dropdown doet mee in de roving-tabindex (één tab-stop); menu met pijltjes/Escape.

Markdown blijft canoniek; 100% dekking behouden.

Author: robbertbos

apps/boekhouding-frontend/src/views/ProjectDetail.vue

@@ -380,7 +380,6 @@ const formatDate = (dateStr: string) =>
       <div v-if="editingDescription" class="editable-field-group rvo-margin-block-end--md">
         <MarkdownEditor
           :model-value="editDescription"
-          :base-heading-level="2"
           aria-label="Projectbeschrijving"
           @update:model-value="(value) => editDescription = value"
         />

apps/boekhouding-frontend/src/views/ProjectList.vue

@@ -88,7 +88,7 @@ const descriptionPreview = (markdown: string): string =>
         </div>
         <div class="rvo-form-field rvo-margin-block-end--md">
           <label class="rvo-form-field__label" id="projectDescLabel" for="projectDesc">Beschrijving (optioneel)</label>
-          <MarkdownEditor :model-value="newProjectDescription" :base-heading-level="2"
+          <MarkdownEditor :model-value="newProjectDescription"
             input-id="projectDesc" aria-labelledby="projectDescLabel"
             @update:model-value="(value) => newProjectDescription = value" />
         </div>

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

@@ -175,6 +175,7 @@
 .rvo-theme .markdown-toolbar {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: 0.15rem;
 }
 
@@ -197,7 +198,16 @@
   background: var(--rvo-color-grijs-100, #f3f3f3);
 }
 
-.rvo-theme .markdown-toolbar__button:focus-visible {
+/* An active mark/node is shown with a filled, tinted button so it is clear a
+   second click toggles it off. */
+.rvo-theme .markdown-toolbar__button.is-active {
+  background: var(--rvo-color-lichtblauw, #e5f1fb);
+  border-color: var(--rvo-color-logoblauw, #007bc7);
+  color: var(--rvo-color-logoblauw, #007bc7);
+}
+
+.rvo-theme .markdown-toolbar__button:focus-visible,
+.rvo-theme .markdown-toolbar__block-button:focus-visible {
   outline: 2px solid var(--rvo-color-hemelblauw);
   outline-offset: 1px;
 }
@@ -206,14 +216,105 @@
   display: block;
 }
 
-/* The heading-level dropdown sits in the footer toolbar, so keep it compact and
-   aligned with the icon buttons rather than at the full form-field height. */
-.rvo-theme .markdown-toolbar__heading {
+/* Thin vertical separator between button groups. */
+.rvo-theme .markdown-toolbar__sep {
+  align-self: stretch;
+  width: 1px;
+  min-height: 1.4rem;
+  margin-inline: 0.25rem;
+  background: var(--rvo-color-grijs-300, #ccc);
+}
+.rvo-theme .markdown-toolbar__sep:first-child {
+  display: none;
+}
+
+/* Block-style dropdown (paragraph / Kop 1..6), styled like a toolbar button. */
+.rvo-theme .markdown-toolbar__block {
+  position: relative;
+}
+
+.rvo-theme .markdown-toolbar__block-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
   height: 1.75rem;
-  min-height: 0;
-  padding-block: 0;
-  font-size: 0.8rem;
-  margin-inline-end: 0.2rem;
+  padding: 0 0.4rem;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background: none;
+  color: var(--rvo-color-zwart, #000);
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+.rvo-theme .markdown-toolbar__block-button:hover {
+  background: var(--rvo-color-grijs-100, #f3f3f3);
+}
+
+.rvo-theme .markdown-toolbar__block-marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.4rem;
+  font-weight: 700;
+  font-size: 0.7rem;
+  color: var(--rvo-color-grijs-700, #555);
+}
+
+.rvo-theme .markdown-toolbar__block-label {
+  min-width: 3.6rem;
+  text-align: start;
+}
+
+.rvo-theme .markdown-toolbar__caret {
+  display: block;
+  color: var(--rvo-color-grijs-700, #555);
+}
+
+.rvo-theme .markdown-toolbar__menu {
+  position: absolute;
+  bottom: calc(100% + 0.3rem);
+  inset-inline-start: 0;
+  z-index: 20;
+  min-width: 11rem;
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: 0.25rem;
+  background: #fff;
+  border: 1px solid var(--rvo-color-grijs-300, #ccc);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.rvo-theme .markdown-toolbar__menuitem {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.35rem 0.5rem;
+  border: 0;
+  border-radius: 3px;
+  background: none;
+  color: var(--rvo-color-zwart, #000);
+  font-size: 0.9rem;
+  text-align: start;
+  cursor: pointer;
+}
+.rvo-theme .markdown-toolbar__menuitem:hover,
+.rvo-theme .markdown-toolbar__menuitem:focus-visible {
+  background: var(--rvo-color-grijs-100, #f3f3f3);
+  outline: none;
+}
+.rvo-theme .markdown-toolbar__menuitem.is-active {
+  background: var(--rvo-color-lichtblauw, #e5f1fb);
+}
+
+.rvo-theme .markdown-toolbar__menuitem-label {
+  flex: 1;
+}
+
+.rvo-theme .markdown-toolbar__check {
+  display: block;
+  color: var(--rvo-color-logoblauw, #007bc7);
 }
 
 /* WYSIWYG editor surface (Mattermost-style): one bordered shell with the

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

@@ -24,27 +24,17 @@ const props = defineProps<{
   // A direct accessible name, for hosts without a separate visible label element
   // to point at via ariaLabelledby.
   ariaLabel?: string
-  // The top heading level available inside the field. A field sits below the
-  // document/section structure, so its first heading defaults to H2; a deeper
-  // host can raise it (e.g. H3). Levels from here down to H6 are all available,
-  // so an answer can have a small sub-heading hierarchy.
-  baseHeadingLevel?: number
 }>()
 
 const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
 
 // 1..6 matches TipTap's Level union without importing the heading extension type.
 type Level = 1 | 2 | 3 | 4 | 5 | 6
-// Clamp to a valid HTML heading level. An out-of-range or fractional prop would
-// otherwise build an invalid schema and emit <hundefined>/<h0> tags.
-const baseLevel = Math.min(Math.max(Math.round(props.baseHeadingLevel ?? 2), 1), 6) as Level
-// Every level from the base down to H6, so deeper markdown (## , ### ...) and
-// pasted content keep their depth instead of collapsing onto one level.
-const headingLevels = Array.from({ length: 6 - baseLevel + 1 }, (_, i) => baseLevel + i) as Level[]
+const headingLevels: Level[] = [1, 2, 3, 4, 5, 6]
 
 // Input rules: typed `[text](url)` becomes a link, and a `#`..`######` shortcut
-// maps relatively onto the field's levels — one hash is the base level, each extra
-// hash one level deeper, capped at H6 (a field never has H1).
+// becomes the matching heading level (one hash = H1, six = H6) — standard markdown.
+// A document-aware offset for PDF export is applied later, not here.
 const MarkdownInputRules = Extension.create({
   name: 'markdownInputRules',
   addInputRules() {
@@ -53,7 +43,7 @@ const MarkdownInputRules = Extension.create({
       textblockTypeInputRule({
         find: /^(#{1,6})\s$/,
         type: this.editor.schema.nodes.heading,
-        getAttributes: (match) => ({ level: Math.min(baseLevel - 1 + match[1].length, 6) }),
+        getAttributes: (match) => ({ level: match[1].length }),
       }),
     ]
   },
@@ -88,28 +78,32 @@ const editor = useEditor({
   },
   onUpdate: ({ editor }) => {
     emit('update:modelValue', editor.getMarkdown())
-    syncActiveHeading()
+    syncActiveState()
   },
-  onSelectionUpdate: syncActiveHeading,
+  onSelectionUpdate: syncActiveState,
 })
 
-// The level dropdown reflects the block at the cursor. Tracked explicitly off the
-// editor's own events (selection + content) rather than relying on render-time
-// reactivity, so it stays correct as the cursor moves.
-const activeHeadingLevel = ref<number | null>(null)
-function syncActiveHeading() {
+// The toolbar reflects the block + marks at the cursor: the dropdown shows the
+// block type (paragraph or heading level) and each format button lights up when
+// its mark/node is active. Tracked explicitly off the editor's own events rather
+// than render-time reactivity, so it stays correct as the cursor moves.
+const activeBlock = ref<number | null>(null)
+const activeMarks = ref<Record<string, boolean>>({})
+function syncActiveState() {
   const instance = editor.value
   /* istanbul ignore if @preserve -- only invoked from the editor's own events, after creation. */
   if (!instance) return
-  if (!instance.isActive('heading')) {
-    activeHeadingLevel.value = null
-    return
+  activeBlock.value = instance.isActive('heading') ? (instance.getAttributes('heading').level as number) : null
+  activeMarks.value = {
+    bold: instance.isActive('bold'),
+    italic: instance.isActive('italic'),
+    strikethrough: instance.isActive('strike'),
+    code: instance.isActive('code'),
+    bulletList: instance.isActive('bulletList'),
+    orderedList: instance.isActive('orderedList'),
+    blockquote: instance.isActive('blockquote'),
+    codeBlock: instance.isActive('codeBlock'),
   }
-  // Clamp into the field's range so a legacy out-of-range heading (e.g. a stored
-  // '# ' H1, which the editor renders at the base level) still maps to a real
-  // dropdown option instead of silently showing "Gewone tekst".
-  const level = instance.getAttributes('heading').level as number
-  activeHeadingLevel.value = Math.min(Math.max(level, baseLevel), 6)
 }
 
 // Apply external value changes (e.g. reference prefill) without clobbering what
@@ -207,6 +201,9 @@ function handleCommand(command: MarkdownCommand) {
     case 'code':
       instance.chain().focus().toggleCode().run()
       break
+    case 'codeBlock':
+      instance.chain().focus().toggleCodeBlock().run()
+      break
     case 'divider':
       instance.chain().focus().setHorizontalRule().run()
       break
@@ -254,7 +251,7 @@ defineExpose({ editor })
     </div>
 
     <div class="markdown-editor__footer">
-      <MarkdownToolbar :heading-levels="headingLevels" :active-heading-level="activeHeadingLevel"
+      <MarkdownToolbar :heading-levels="headingLevels" :active-block="activeBlock" :active-marks="activeMarks"
         @command="handleCommand" @heading="setHeading" />
     </div>
   </div>