fix(lib): update tiptap to v3 (#422)

Co-authored-by: mahula <lenzmath@posteo.de>

.gitignore

@@ -1,5 +1,6 @@
 .claude/
 data/
+node_modules/
 cypress/node_modules/
 cypress/results/
 cypress/runner-results/

app/vite.config.ts

@@ -20,9 +20,6 @@ export default defineConfig({
      */
   },
   plugins: [react(), tailwindcss(), tsConfigPaths()],
-  resolve: {
-    dedupe: ['react', 'react-dom', 'react-router-dom'],
-  },
   build: {
     sourcemap: true,
     rollupOptions: {
@@ -32,7 +29,7 @@ export default defineConfig({
             return 'utopia-ui'
           }
           if (id.includes('node_modules')) {
-            if (id.includes('react')) {
+            if (id.includes('react') || id.includes('scheduler') || id.includes('use-sync-external-store')) {
               return 'react'
             }
             if (id.includes('tiptap')) {
@@ -41,9 +38,7 @@ export default defineConfig({
             if (id.includes('leaflet')) {
               return 'leaflet'
             }
-            if (id.includes('lib/node_modules')) {
-              return 'utopia-ui-vendor'
-            } else return 'vendor'
+            return 'vendor'
           }
         },
       },

lib/package.json

@@ -97,21 +97,22 @@
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.17",
     "@tanstack/react-query": "^5.17.8",
-    "@tiptap/core": "^2.14.0",
-    "@tiptap/extension-bubble-menu": "^2.14.0",
-    "@tiptap/extension-color": "^2.12.0",
-    "@tiptap/extension-image": "^2.14.0",
-    "@tiptap/extension-link": "^2.14.0",
-    "@tiptap/extension-placeholder": "^2.14.0",
-    "@tiptap/extension-youtube": "^2.12.0",
-    "@tiptap/pm": "^2.12.0",
-    "@tiptap/react": "^2.12.0",
-    "@tiptap/starter-kit": "^2.12.0",
+    "@tiptap/core": "^3.6.5",
+    "@tiptap/extension-bubble-menu": "^3.6.5",
+    "@tiptap/extension-color": "^3.6.5",
+    "@tiptap/extension-image": "^3.6.5",
+    "@tiptap/extension-link": "^3.6.5",
+    "@tiptap/extension-placeholder": "^3.6.5",
+    "@tiptap/extension-youtube": "^3.6.5",
+    "@tiptap/pm": "^3.6.5",
+    "@tiptap/react": "^3.6.5",
+    "@tiptap/starter-kit": "^3.6.5",
     "axios": "^1.6.5",
     "browser-image-compression": "^2.0.2",
     "classnames": "^2.5.1",
@@ -129,10 +130,9 @@
     "react-markdown": "^9.0.1",
     "react-photo-album": "^3.0.2",
     "react-qr-code": "^2.0.16",
-    "react-router-dom": "^6.23.0",
     "react-toastify": "^9.1.3",
     "remark-breaks": "^4.0.0",
-    "tiptap-markdown": "^0.8.10",
+    "tiptap-markdown": "^0.9.0",
     "yet-another-react-lightbox": "^3.21.7"
   },
   "imports": {

lib/rollup.config.js

@@ -48,6 +48,8 @@ export default [
           /node_modules\/markdown-it-task-lists/,
           /node_modules\/classnames/,
           /node_modules\/react-qr-code/,
+          /node_modules\/use-sync-external-store/,
+          /node_modules\/fast-deep-equal/,
         ],
         requireReturnsDefault: 'auto',
       }),

lib/src/Components/Input/RichTextEditor.tsx

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { Color } from '@tiptap/extension-color'
 import { Image } from '@tiptap/extension-image'
 import { Link } from '@tiptap/extension-link'
@@ -13,6 +10,8 @@ import { Markdown } from 'tiptap-markdown'
 import { InputLabel } from './InputLabel'
 import { TextEditorMenu } from './TextEditorMenu'
 
+import type { MarkdownStorage } from 'tiptap-markdown'
+
 interface RichTextEditorProps {
   labelTitle?: string
   labelStyle?: string
@@ -23,6 +22,12 @@ interface RichTextEditorProps {
   updateFormValue?: (value: string) => void
 }
 
+declare module '@tiptap/core' {
+  interface Storage {
+    markdown: MarkdownStorage
+  }
+}
+
 /**
  * @category Input
  */
@@ -35,10 +40,10 @@ export function RichTextEditor({
   updateFormValue,
 }: RichTextEditorProps) {
   const handleChange = () => {
-    let newValue: string | undefined = editor?.storage.markdown.getMarkdown()
+    let newValue: string | undefined = editor.storage.markdown.getMarkdown()
 
     const regex = /!\[.*?\]\(.*?\)/g
-    newValue = newValue?.replace(regex, (match: string) => match + '\n\n')
+    newValue = newValue.replace(regex, (match: string) => match + '\n\n')
     if (updateFormValue && newValue) {
       updateFormValue(newValue)
     }
@@ -79,8 +84,8 @@ export function RichTextEditor({
   })
 
   useEffect(() => {
-    if (editor?.storage.markdown.getMarkdown() === '' || !editor?.storage.markdown.getMarkdown()) {
-      editor?.commands.setContent(defaultValue)
+    if (editor.storage.markdown.getMarkdown() === '' || !editor.storage.markdown.getMarkdown()) {
+      editor.commands.setContent(defaultValue)
     }
   }, [defaultValue, editor])
 
@@ -92,12 +97,10 @@ export function RichTextEditor({
       <div
         className={`editor-wrapper tw:border-base-content/20 tw:rounded-box tw:border tw:flex tw:flex-col tw:flex-1 tw:min-h-0`}
       >
-        {editor ? (
-          <>
-            {showMenu ? <TextEditorMenu editor={editor} /> : null}
-            <EditorContent editor={editor} />
-          </>
-        ) : null}
+        <>
+          {showMenu ? <TextEditorMenu editor={editor} /> : null}
+          <EditorContent editor={editor} />
+        </>
       </div>
     </div>
   )

package.json

@@ -0,0 +1,8 @@
+{
+  "name": "utopia-map-workspace",
+  "private": true,
+  "workspaces": [
+    "app",
+    "lib"
+  ]
+}