fix(suggestion): 🐛 make clientrect prop optional as it can potentially be undefined (#2813)

This commit makes the clientRect prop optional - this means that this value can be null. This allows developers using the suggestion extension to know that they have to implement a check for the clientRect before using it.

#2795

demos/src/Examples/Community/React/suggestion.js

@@ -1,5 +1,7 @@
-import { ReactRenderer } from '@tiptap/react'
 import tippy from 'tippy.js'
+
+import { ReactRenderer } from '@tiptap/react'
+
 import { MentionList } from './MentionList'
 
 export default {
@@ -20,6 +22,10 @@ export default {
           editor: props.editor,
         })
 
+        if (!props.clientRect) {
+          return
+        }
+
         popup = tippy('body', {
           getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
@@ -34,6 +40,10 @@ export default {
       onUpdate(props) {
         reactRenderer.updateProps(props)
 
+        if (!props.clientRect) {
+          return
+        }
+
         popup[0].setProps({
           getReferenceClientRect: props.clientRect,
         })

demos/src/Examples/Community/Vue/suggestion.js

@@ -1,5 +1,7 @@
-import { VueRenderer } from '@tiptap/vue-3'
 import tippy from 'tippy.js'
+
+import { VueRenderer } from '@tiptap/vue-3'
+
 import MentionList from './MentionList.vue'
 
 export default {
@@ -23,6 +25,10 @@ export default {
           editor: props.editor,
         })
 
+        if (!props.clientRect) {
+          return
+        }
+
         popup = tippy('body', {
           getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
@@ -37,6 +43,10 @@ export default {
       onUpdate(props) {
         component.updateProps(props)
 
+        if (!props.clientRect) {
+          return
+        }
+
         popup[0].setProps({
           getReferenceClientRect: props.clientRect,
         })

demos/src/Experiments/Commands/Vue/suggestion.js

@@ -1,5 +1,7 @@
 import tippy from 'tippy.js'
+
 import { VueRenderer } from '@tiptap/vue-3'
+
 import CommandsList from './CommandsList.vue'
 
 export default {
@@ -66,6 +68,10 @@ export default {
           editor: props.editor,
         })
 
+        if (!props.clientRect) {
+          return
+        }
+
         popup = tippy('body', {
           getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
@@ -80,6 +86,10 @@ export default {
       onUpdate(props) {
         component.updateProps(props)
 
+        if (!props.clientRect) {
+          return
+        }
+
         popup[0].setProps({
           getReferenceClientRect: props.clientRect,
         })

demos/src/Nodes/Mention/React/suggestion.js

@@ -1,5 +1,7 @@
-import { ReactRenderer } from '@tiptap/react'
 import tippy from 'tippy.js'
+
+import { ReactRenderer } from '@tiptap/react'
+
 import MentionList from './MentionList.jsx'
 
 export default {
@@ -46,6 +48,10 @@ export default {
           editor: props.editor,
         })
 
+        if (!props.clientRect) {
+          return
+        }
+
         popup = tippy('body', {
           getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
@@ -60,6 +66,10 @@ export default {
       onUpdate(props) {
         component.updateProps(props)
 
+        if (!props.clientRect) {
+          return
+        }
+
         popup[0].setProps({
           getReferenceClientRect: props.clientRect,
         })

demos/src/Nodes/Mention/Vue/suggestion.js

@@ -1,5 +1,7 @@
-import { VueRenderer } from '@tiptap/vue-3'
 import tippy from 'tippy.js'
+
+import { VueRenderer } from '@tiptap/vue-3'
+
 import MentionList from './MentionList.vue'
 
 export default {
@@ -24,6 +26,10 @@ export default {
           editor: props.editor,
         })
 
+        if (!props.clientRect) {
+          return
+        }
+
         popup = tippy('body', {
           getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
@@ -38,6 +44,10 @@ export default {
       onUpdate(props) {
         component.updateProps(props)
 
+        if (!props.clientRect) {
+          return
+        }
+
         popup[0].setProps({
           getReferenceClientRect: props.clientRect,
         })