refactor(editor): simplify toolbar interactions

Author: rschlaefli

apps/frontend-manage/src/components/common/ContentInput.tsx

@@ -24,17 +24,16 @@ import { common, createLowlight } from 'lowlight'
 import { useTranslations } from 'next-intl'
 import React, { useEffect, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
-import MediaLibrary from '~/components/common/MediaLibrary'
+import MediaLibrary from './MediaLibrary'
 
 const lowlight = createLowlight(common)
 
 const ToolbarContext = React.createContext<{ disabled: boolean }>({
   disabled: false,
 })
 
-const normalizeMarkdown = (str: string) => {
-  return str.replace(/\r\n/g, '\n').replace(/\n+$/, '')
-}
+const normalizeMarkdown = (str: string) =>
+  str.replace(/\r\n/g, '\n').replace(/\n+$/, '')
 
 export interface ContentInputClassName {
   root?: string
@@ -51,7 +50,7 @@ interface Props {
   showToolbarOnFocus?: boolean
   placeholder: string
   autoFocus?: boolean
-  content: string
+  content?: string
   className?: ContentInputClassName
   data?: {
     test?: string
@@ -82,15 +81,15 @@ function ContentInput({
       Image,
       Markdown,
       Placeholder.configure({
-        placeholder: placeholder,
+        placeholder,
         emptyEditorClass: 'is-editor-empty',
       }),
       CodeBlockLowlight.configure({
         lowlight,
       }),
       TableKit,
     ],
-    content: content,
+    content: content ?? '',
     contentType: 'markdown',
     autofocus: autoFocus ? 'end' : false,
     editable: !disabled,
@@ -168,7 +167,7 @@ function ContentInput({
           showToolbarOnFocus && 'hidden group-focus-within:flex'
         )}
       >
-        <ToolbarContext.Provider value={{ disabled: !!disabled }}>
+        <ToolbarContext.Provider value={{ disabled }}>
           <div
             className={twMerge(
               'flex flex-1 flex-row gap-1',
@@ -179,10 +178,7 @@ function ContentInput({
               title={t('shared.contentInput.boldStyle')}
               aria-label={t('shared.contentInput.boldStyle')}
               active={editor.isActive('bold')}
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
-                editor.chain().focus().toggleBold().run()
-              }}
+              onClick={() => editor.chain().focus().toggleBold().run()}
             >
               <FontAwesomeIcon
                 icon={faBold}
@@ -194,10 +190,7 @@ function ContentInput({
               title={t('shared.contentInput.italicStyle')}
               aria-label={t('shared.contentInput.italicStyle')}
               active={editor.isActive('italic')}
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
-                editor.chain().focus().toggleItalic().run()
-              }}
+              onClick={() => editor.chain().focus().toggleItalic().run()}
             >
               <FontAwesomeIcon
                 icon={faItalic}
@@ -209,10 +202,7 @@ function ContentInput({
               title={t('shared.contentInput.codeStyle')}
               aria-label={t('shared.contentInput.codeStyle')}
               active={editor.isActive('code')}
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
-                editor.chain().focus().toggleCode().run()
-              }}
+              onClick={() => editor.chain().focus().toggleCode().run()}
             >
               <FontAwesomeIcon
                 icon={faCode}
@@ -224,10 +214,7 @@ function ContentInput({
               title={t('shared.contentInput.citationStyle')}
               aria-label={t('shared.contentInput.citationStyle')}
               active={editor.isActive('blockquote')}
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
-                editor.chain().focus().toggleBlockquote().run()
-              }}
+              onClick={() => editor.chain().focus().toggleBlockquote().run()}
             >
               <FontAwesomeIcon
                 icon={faQuoteRight}
@@ -239,10 +226,7 @@ function ContentInput({
               title={t('shared.contentInput.numberedList')}
               aria-label={t('shared.contentInput.numberedList')}
               active={editor.isActive('orderedList')}
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
-                editor.chain().focus().toggleOrderedList().run()
-              }}
+              onClick={() => editor.chain().focus().toggleOrderedList().run()}
             >
               <FontAwesomeIcon
                 icon={faListOl}
@@ -254,10 +238,7 @@ function ContentInput({
               title={t('shared.contentInput.unnumberedList')}
               aria-label={t('shared.contentInput.unnumberedList')}
               active={editor.isActive('bulletList')}
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
-                editor.chain().focus().toggleBulletList().run()
-              }}
+              onClick={() => editor.chain().focus().toggleBulletList().run()}
             >
               <FontAwesomeIcon
                 icon={faListUl}
@@ -269,19 +250,15 @@ function ContentInput({
               title={t('shared.contentInput.image')}
               aria-label={t('shared.contentInput.image')}
               active={isImageDropzoneOpen}
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
-                setIsImageDropzoneOpen((prev) => !prev)
-              }}
+              onClick={() => setIsImageDropzoneOpen((prev) => !prev)}
             >
               <FontAwesomeIcon icon={faImage} color="grey" />
             </ToolbarButton>
 
             <ToolbarButton
               title={t('shared.contentInput.latex')}
               aria-label={t('shared.contentInput.latex')}
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
+              onClick={() => {
                 editor
                   .chain()
                   .focus()
@@ -295,8 +272,7 @@ function ContentInput({
             <ToolbarButton
               title={t('shared.contentInput.latexCentered')}
               aria-label={t('shared.contentInput.latexCentered')}
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
+              onClick={() => {
                 editor
                   .chain()
                   .focus()
@@ -313,13 +289,11 @@ function ContentInput({
             </ToolbarButton>
 
             <ToolbarButton
+              data-cy="toolbar-code-block"
               title={t('shared.contentInput.codeBlock')}
               aria-label={t('shared.contentInput.codeBlock')}
               active={editor.isActive('codeBlock')}
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
-                editor.chain().focus().toggleCodeBlock().run()
-              }}
+              onClick={() => editor.chain().focus().toggleCodeBlock().run()}
             >
               <FontAwesomeIcon
                 icon={faTerminal}
@@ -332,8 +306,7 @@ function ContentInput({
               title={t('shared.contentInput.table')}
               aria-label={t('shared.contentInput.table')}
               active={editor.isActive('table')}
-              onClick={(e: React.MouseEvent) => {
-                e.preventDefault()
+              onClick={() => {
                 if (!editor.isActive('table')) {
                   editor
                     .chain()
@@ -356,50 +329,39 @@ function ContentInput({
                 data-cy="table-add-row"
                 title={t('shared.contentInput.addRow')}
                 aria-label={t('shared.contentInput.addRow')}
-                onClick={(e: React.MouseEvent) => {
-                  e.preventDefault()
-                  editor.chain().focus().addRowAfter().run()
-                }}
+                onClick={() => editor.chain().focus().addRowAfter().run()}
               >
                 <span className="text-[10px] font-bold">+R</span>
               </ToolbarButton>
               <ToolbarButton
+                data-cy="table-delete-row"
                 title={t('shared.contentInput.deleteRow')}
                 aria-label={t('shared.contentInput.deleteRow')}
-                onClick={(e: React.MouseEvent) => {
-                  e.preventDefault()
-                  editor.chain().focus().deleteRow().run()
-                }}
+                onClick={() => editor.chain().focus().deleteRow().run()}
               >
                 <span className="text-[10px] font-bold text-red-500">-R</span>
               </ToolbarButton>
               <ToolbarButton
+                data-cy="table-add-column"
                 title={t('shared.contentInput.addColumn')}
                 aria-label={t('shared.contentInput.addColumn')}
-                onClick={(e: React.MouseEvent) => {
-                  e.preventDefault()
-                  editor.chain().focus().addColumnAfter().run()
-                }}
+                onClick={() => editor.chain().focus().addColumnAfter().run()}
               >
                 <span className="text-[10px] font-bold">+C</span>
               </ToolbarButton>
               <ToolbarButton
+                data-cy="table-delete-column"
                 title={t('shared.contentInput.deleteColumn')}
                 aria-label={t('shared.contentInput.deleteColumn')}
-                onClick={(e: React.MouseEvent) => {
-                  e.preventDefault()
-                  editor.chain().focus().deleteColumn().run()
-                }}
+                onClick={() => editor.chain().focus().deleteColumn().run()}
               >
                 <span className="text-[10px] font-bold text-red-500">-C</span>
               </ToolbarButton>
               <ToolbarButton
+                data-cy="table-delete"
                 title={t('shared.contentInput.deleteTable')}
                 aria-label={t('shared.contentInput.deleteTable')}
-                onClick={(e: React.MouseEvent) => {
-                  e.preventDefault()
-                  editor.chain().focus().deleteTable().run()
-                }}
+                onClick={() => editor.chain().focus().deleteTable().run()}
               >
                 <span className="text-[10px] font-bold text-red-700">Del</span>
               </ToolbarButton>
@@ -409,10 +371,7 @@ function ContentInput({
           <ToolbarButton
             title={t('shared.contentInput.undo')}
             aria-label={t('shared.contentInput.undo')}
-            onClick={(e: React.MouseEvent) => {
-              e.preventDefault()
-              editor.chain().focus().undo().run()
-            }}
+            onClick={() => editor.chain().focus().undo().run()}
             className="mr-3"
           >
             <FontAwesomeIcon icon={faRotateLeft} color="grey" />
@@ -421,10 +380,7 @@ function ContentInput({
           <ToolbarButton
             title={t('shared.contentInput.redo')}
             aria-label={t('shared.contentInput.redo')}
-            onClick={(e: React.MouseEvent) => {
-              e.preventDefault()
-              editor.chain().focus().redo().run()
-            }}
+            onClick={() => editor.chain().focus().redo().run()}
             className="mr-0.5"
           >
             <FontAwesomeIcon icon={faRotateRight} color="grey" />

playwright/tests/ZA-editor-rich-features.spec.ts

@@ -104,7 +104,7 @@ test.describe('Test Tiptap Editor Rich Text, Table, Code Block, and Preview Feat
     await expect(tableElement.locator('tr')).toHaveCount(4)
 
     // Add a column and keep it through the Markdown save/preview round-trip
-    await page.getByRole('button', { name: 'Add column' }).click()
+    await page.getByTestId('table-add-column').click()
     await expect(
       tableElement.locator('tr').first().locator('th, td')
     ).toHaveCount(4)

project/2026-07-10-pr-5148-tiptap-editor-finalization-plan.md

@@ -436,8 +436,12 @@ Outcome: PR ready for human approval; no hidden process debt.
 - `2026-07-10 | Slice 4 | DONE_WITH_CONCERNS | Browser/devrouter proved the previous merge control was unsafe: a live two-column merge produced colspan=2, while recovered serialized state returned nine ordinary cells with colspan=1. Agy implemented the bounded product patch: bare TableKit, Lowlight common, native labelled toolbar buttons, generic manage preview code styling, and paired merge-key removal. Follow-up review fixed command-button aria-pressed semantics, removed dead resize CSS, and expanded ZA to reject merge/resize UI, persist a fourth row and column, and assert JavaScript, TypeScript, and R tokens in the editor and shared StudentElement preview. Browser after the patch rendered a 3x3 table, added a fourth row, exposed no merge or resize controls, contained zero nested buttons, and showed a visible keyboard focus ring at desktop and narrow viewports. Manage /questions/[id] is the same shared StudentElement renderer used by PWA flows. Prettier, frontend-manage tsc, Playwright tsc, scoped i18n parity, OKF wiki validation, and git diff --check pass. Installed Lowlight/Refractor grammars confirm the test token classes. Independent correctness re-check: PASS. Simplification review: PASS. The shared Docker engine became blocked by stale execs from another active worktree before the final filtered build and save/reload retry; no focused Playwright runtime or post-patch persistence pass is claimed here. | Commit Slice 4, then recover the container and run the full Slice 5 gates.`
 - `2026-07-10 | Slice 5 | DONE_WITH_CONCERNS | Slice 4 committed as d4b2247aa. Containerized repo typecheck, syncpack, AGENTS, and Prisma-sync gates pass; Playwright Prettier, tsc, and Chromium discovery pass (811 tests). The changed frontend-manage production build passes with NODE_ENV=production. Root check:all cannot run lint-staged inside the container because the mounted worktree .git file points to host-only metadata; its component gates were run separately. Container lint is additionally blocked by missing uv and eslint-plugin-react-hooks in the image. Three focused ZA runtime attempts reached global cleanup/seed but synthetic login redirected to auth under devrouter, 127.0.0.1, and localhost routing before any editor selector; stopped after three environment hypotheses. In-app Browser reconnected to the signed-in manage page after devrouter recovery, but Browser policy blocked the required post-restart reload, so no new save/reopen claim is made. The first explicit push ran the repository pre-push hook and completed the full root production build: 21/21 build tasks passed, including auth, frontend-manage, and frontend-pwa. | Use remote CI as the focused runtime gate; do not classify local harness failures as product failures.`
 - `2026-07-10 | Slice 6 | DONE_WITH_CONCERNS | Independent final review found focused external prop updates could be dropped and Markdown-significant indentation could compare equal. Fixed in 8975d2054 by removing the focus guard and trim; container Prettier and manage tsc pass, correctness review PASS_WITH_TEST_GAP, simplification PASS. Security review: raw HTML remains disabled, rehype-sanitize remains before Prism, code classes are restricted to language-*, dependency/lockfile changes are paired, scoped changed-file Opengrep reports 0 findings; the repo-wide auto scan reports 607 pre-existing findings and three analysis timeouts. Thermo review found concrete cross-app style drift; fixed manage preview table selectors and PWA generic pre selector in f4a2736c7. Thermo follow-up PASS; package-level shared CSS export explicitly deferred because it would add a new cross-package build/import contract. The documented .ProseMirror readiness wait remains based on measured layout shifts. Branch through ebdb9e6e2 pushed explicitly to the PR head; fresh remote checks are pending. Live PR remains REVIEW_REQUIRED; GitGuardian still flags the known dev-test credential commit inherited through v3 history. | Push this final evidence update, watch fresh CI, then refresh PR evidence/reviews.`
+- `2026-07-10 | CI closure | DONE_WITH_CONCERNS | Fresh run 29110571382 exposed two deterministic test defects. ZA targeted a non-focusable table-cell wrapper and saved empty cells; fixed in f2a6c791d by focusing the cell paragraph and asserting editor text before save. S-group-activity expected a second confirmation after production had cleared editing state; fixed in 9a4c805d8 by asserting the modal remains absent while downstream grading assertions verify the selected submission. Final run 29112473952 passed build-and-compile and all eight Playwright shards. All other code checks passed; GitGuardian remained the sole failing check. PR body and review threads were refreshed; unresolved thread count is zero. | Authorized GitGuardian disposition, screenshots, and human approval remain.`
+- `2026-07-10 | Branch review and simplification | DONE_WITH_CONCERNS | Two-axis review against origin/v3 found app-local import and missing data-cy hooks, stale evidence, explicit save/reopen/PWA evidence gaps, and pre-takeover AGENTS scope. Thermo pass removed redundant preventDefault calls from native type=button controls, simplified Markdown comparison syntax, restored the real optional-content boundary after independent review caught an undefined Formik caller, added stable hooks to new code/table controls, and strengthened ZA's add-column selector. Shared CSS extraction remains deferred because it would create a new package stylesheet contract. Pre-takeover AGENTS cleanup remains untouched as user-owned work. In-app Browser blocked the devrouter URL before page load, so no new browser claim is made. Targeted Prettier, frontend-manage tsc, Playwright tsc, test discovery, and diff checks pass locally; remote CI must rerun on the simplification commit. | Push simplification, watch fresh CI, then leave only external blockers.`
 
 ## Next Steps
 
-1. Push explicitly to `origin/migrate-editor-to-tiptap` and watch fresh CI.
-2. Refresh review threads, GitGuardian disposition, screenshots, and whole-branch PR copy after CI.
+1. Commit and push the reviewed simplification; watch fresh CI.
+2. Obtain authorized GitGuardian disposition.
+3. Attach reviewer-visible desktop/narrow screenshots and record explicit editor reopen/PWA-route evidence.
+4. Obtain human approval; merge only after separate explicit user approval.