chore: Bump @tiptap to v3 (#525)

Author: dependabot[bot]

.changeset/sour-hairs-judge.md

@@ -0,0 +1,5 @@
+---
+'@aragon/gov-ui-kit': minor
+---
+
+Bump @tiptap to v3

package.json

@@ -54,23 +54,20 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.2.0",
     "@radix-ui/react-visually-hidden": "^1.2.0",
-    "@tiptap/core": "^2.26.0",
-    "@tiptap/extension-code-block": "^2.26.0",
-    "@tiptap/extension-image": "^2.26.0",
-    "@tiptap/extension-link": "^2.26.0",
-    "@tiptap/extension-placeholder": "^2.26.0",
-    "@tiptap/extension-text-style": "^2.26.0",
-    "@tiptap/pm": "^2.26.0",
-    "@tiptap/react": "^2.26.0",
-    "@tiptap/starter-kit": "^2.26.0",
+    "@tiptap/core": "^3.5.0",
+    "@tiptap/extension-image": "^3.5.0",
+    "@tiptap/extensions": "^3.5.0",
+    "@tiptap/pm": "^3.5.0",
+    "@tiptap/react": "^3.5.0",
+    "@tiptap/starter-kit": "^3.5.0",
     "blockies-ts": "^1.0.0",
     "classnames": "^2.5.0",
     "framer-motion": "^12.23.0",
     "luxon": "^3.7.0",
     "react-dropzone": "^14.3.0",
     "react-imask": "^7.6.0",
     "sanitize-html": "^2.17.0",
-    "tiptap-markdown": "^0.8.10"
+    "tiptap-markdown": "^0.9.0"
   },
   "peerDependencies": {
     "@tailwindcss/typography": "^0.5.0",

src/core/components/documentParser/documentParser.stories.tsx

@@ -36,8 +36,7 @@ This is a **markdown** ~~formatted text~~ with \`inline code\`.
 const x = 10;
 \`\`\`
 
-![Sample Image](https://aragon-1.mypinata.cloud/ipfs/QmX4q3fu1QkSfdVFUAmSUWziCmnXtitp2TVKLbrFVBcPvv)
-`,
+![Sample Image](https://aragon-1.mypinata.cloud/ipfs/QmX4q3fu1QkSfdVFUAmSUWziCmnXtitp2TVKLbrFVBcPvv)`,
     },
 };
 
@@ -57,8 +56,7 @@ export const WithHTML: Story = {
     </li>
 </ul>
 <pre><code>const x = 10;</code></pre>
-<img src="https://aragon-1.mypinata.cloud/ipfs/QmX4q3fu1QkSfdVFUAmSUWziCmnXtitp2TVKLbrFVBcPvv" alt="Sample Image">
-`,
+<img src="https://aragon-1.mypinata.cloud/ipfs/QmX4q3fu1QkSfdVFUAmSUWziCmnXtitp2TVKLbrFVBcPvv" alt="Sample Image">`,
     },
 };
 

src/core/components/documentParser/documentParser.tsx

@@ -1,5 +1,4 @@
 import { Image } from '@tiptap/extension-image';
-import TipTapLink from '@tiptap/extension-link';
 import { EditorContent, useEditor } from '@tiptap/react';
 import { StarterKit } from '@tiptap/starter-kit';
 import classNames from 'classnames';
@@ -33,11 +32,11 @@ export const DocumentParser: React.FC<IDocumentParserProps> = (props) => {
         return sanitizeHtml(document, { allowedTags, allowedAttributes, disallowedTagsMode });
     };
 
-    const extensions = [StarterKit, Image, Markdown, TipTapLink.configure({ openOnClick: false })];
+    const extensions = [StarterKit.configure({ link: { openOnClick: false } }), Image, Markdown];
     const parser = useEditor({ editable: false, immediatelyRender, extensions, content: sanitizeDocument(document) });
 
     useEffect(() => {
-        parser?.commands.setContent(sanitizeDocument(document), true);
+        parser.commands.setContent(sanitizeDocument(document));
     }, [document, parser]);
 
     return (

src/core/components/forms/textAreaRichText/textAreaRichText.stories.tsx

@@ -41,7 +41,15 @@ export const Controlled: Story = {
             '<p>Hello <strong>dev</strong>, check this <a href="https://aragon.org" target="_blank">link</a>.</p>',
         );
 
-        return <TextAreaRichText value={value} onChange={setValue} {...props} />;
+        return (
+            <div className="flex grow flex-col gap-2">
+                <TextAreaRichText value={value} onChange={setValue} {...props} />
+                <div className="flex flex-col gap-1">
+                    <p className="text-md text-neutral-800">Output</p>
+                    <p className="text-neutral-500">{value}</p>
+                </div>
+            </div>
+        );
     },
 };
 

src/core/components/forms/textAreaRichText/textAreaRichText.test.tsx

@@ -72,6 +72,13 @@ describe('<TextAreaRichText /> component', () => {
         expect(onChange).toHaveBeenLastCalledWith('# test');
     });
 
+    it("replaces backslash and newline soft breaks with two-space newlines when valueFormat is 'markdown'", async () => {
+        const onChange = jest.fn();
+        render(createTestComponent({ onChange, valueFormat: 'markdown' }));
+        await userEvent.type(screen.getByRole('textbox'), 'line 1{shift>}{enter}{/shift}line 2');
+        expect(onChange).toHaveBeenLastCalledWith('line 1  \nline 2');
+    });
+
     it('defaults to empty string instead of empty paragraph when input is empty', async () => {
         const onChange = jest.fn();
         render(createTestComponent({ onChange }));
@@ -80,12 +87,10 @@ describe('<TextAreaRichText /> component', () => {
         expect(onChange).toHaveBeenLastCalledWith('');
     });
 
-    it('formats pasted markdown content', async () => {
+    it('correctly formats pasted markdown content', async () => {
         const onChange = jest.fn();
         render(createTestComponent({ onChange }));
-        const event = {
-            getData: (type: string) => (type === 'text/plain' ? '# Heading' : ''),
-        } as DataTransfer;
+        const event = { getData: (type: string) => (type === 'text/plain' ? '# Heading' : '') } as DataTransfer;
         await userEvent.click(screen.getByRole('textbox'));
         await userEvent.paste(event);
         expect(onChange).toHaveBeenLastCalledWith('<h1>Heading</h1>');

src/core/components/forms/textAreaRichText/textAreaRichText.tsx

@@ -1,5 +1,4 @@
-import { Link } from '@tiptap/extension-link';
-import { Placeholder } from '@tiptap/extension-placeholder';
+import { Placeholder } from '@tiptap/extensions';
 import { EditorContent, useEditor } from '@tiptap/react';
 import { StarterKit } from '@tiptap/starter-kit';
 import classNames from 'classnames';
@@ -69,13 +68,8 @@ export const TextAreaRichText: React.FC<ITextAreaRichTextProps> = (props) => {
     const randomId = useRandomId(id);
 
     const extensions = [
-        StarterKit,
-        Placeholder.configure({
-            placeholder,
-            emptyNodeClass: placeholderClasses,
-            showOnlyWhenEditable: false,
-        }),
-        Link,
+        StarterKit.configure({ trailingNode: false }),
+        Placeholder.configure({ placeholder, emptyNodeClass: placeholderClasses, showOnlyWhenEditable: false }),
         Markdown.configure({ transformPastedText: true }),
     ];
 
@@ -86,7 +80,7 @@ export const TextAreaRichText: React.FC<ITextAreaRichTextProps> = (props) => {
         immediatelyRender,
         editorProps: {
             attributes: {
-                class: 'outline-hidden p-4 [overflow-wrap:anywhere]! prose prose-neutral min-h-40 h-full max-w-none leading-normal',
+                class: 'relative outline-hidden p-4 [overflow-wrap:anywhere]! prose prose-neutral min-h-40 h-full max-w-none leading-normal',
                 role: 'textbox',
                 'aria-labelledby': randomId,
             },
@@ -101,13 +95,11 @@ export const TextAreaRichText: React.FC<ITextAreaRichTextProps> = (props) => {
                 html: () => editor.getHTML(),
                 text: () => editor.getText(),
                 markdown: () => {
-                    const markdownStorage = editor.storage.markdown as MarkdownStorage | undefined;
+                    const { storage } = editor;
+                    const markdownStorage = 'markdown' in storage ? (storage.markdown as MarkdownStorage) : undefined;
 
-                    if (markdownStorage) {
-                        return markdownStorage.getMarkdown();
-                    }
-
-                    return editor.getHTML();
+                    // Replace soft break syntax emitted by tiptap-markdown (backslash + newline) with standard two-space newline
+                    return markdownStorage?.getMarkdown().replace(/\\\n/g, '  \n');
                 },
             };
 
@@ -131,7 +123,7 @@ export const TextAreaRichText: React.FC<ITextAreaRichTextProps> = (props) => {
 
     // Update editable setting on Tiptap editor on disabled property change
     useEffect(() => {
-        editor?.setEditable(!disabled);
+        editor.setEditable(!disabled);
     }, [editor, disabled]);
 
     // Add keydown listener to reset expanded state on ESC key down