🐛(frontend) sanitize pasted and dropped content in document title

Prevent rich-text formatting when pasting or dropping into document title.

Author: Ovgodd

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Changed
+
+- 🐛(frontend) sanitize pasted and dropped content in document title #2210
+
 ## [v5.0.0] - 2026-04-08
 
 ### Added

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -144,6 +144,36 @@ test.describe('Doc Header', () => {
     await cleanup();
   });
 
+  test('it pastes plain text in the title without keeping formatting', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'doc-title-paste', browserName, 1);
+
+    const docTitle = page.getByRole('textbox', { name: 'Document title' });
+    await docTitle.click();
+    await page.keyboard.press('Control+a');
+
+    await page.evaluate(() => {
+      const el = document.querySelector('[aria-label="Document title"]');
+      if (!el) {
+        return;
+      }
+
+      const dt = new DataTransfer();
+      dt.setData('text/plain', 'Pasted plain text');
+      dt.setData('text/html', '<b><em>Pasted plain text</em></b>');
+      el.dispatchEvent(
+        new ClipboardEvent('paste', { clipboardData: dt, bubbles: true }),
+      );
+    });
+
+    await docTitle.blur();
+    await expect(docTitle).toHaveText('Pasted plain text');
+    // Ensure formatting tags from text/html were not inserted.
+    await expect(docTitle.locator('b, em, strong, i')).toHaveCount(0);
+  });
+
   test('it updates the title doc adding a leading emoji', async ({
     page,
     browserName,

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx

@@ -153,6 +153,40 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
     }
   };
 
+  const insertPlainText = (plainText: string, target: HTMLElement) => {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      return;
+    }
+
+    const range = selection.getRangeAt(0);
+    if (!target.contains(range.commonAncestorContainer)) {
+      target.focus();
+      range.selectNodeContents(target);
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+    range.deleteContents();
+    range.insertNode(document.createTextNode(plainText));
+  };
+
+  const handlePaste = (event: React.ClipboardEvent<HTMLSpanElement>) => {
+    event.preventDefault();
+    insertPlainText(
+      event.clipboardData.getData('text/plain'),
+      event.currentTarget,
+    );
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLSpanElement>) => {
+    event.preventDefault();
+    insertPlainText(
+      event.dataTransfer.getData('text/plain'),
+      event.currentTarget,
+    );
+  };
+
   useEffect(() => {
     setTitleDisplay(isTopRoot ? doc.title : titleWithoutEmoji);
   }, [doc.title, isTopRoot, titleWithoutEmoji]);
@@ -181,6 +215,8 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
           onBlurCapture={(event) =>
             handleTitleSubmit(event.target.textContent || '')
           }
+          onPasteCapture={handlePaste}
+          onDropCapture={handleDrop}
           $padding={{ right: 'big' }}
           $css={css`
             &[contenteditable='true']:empty:not(:focus):before {