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,
         })

packages/suggestion/src/suggestion.ts

@@ -1,6 +1,8 @@
-import { Editor, Range } from '@tiptap/core'
 import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
+
+import { Editor, Range } from '@tiptap/core'
+
 import { findSuggestionMatch } from './findSuggestionMatch'
 
 export interface SuggestionOptions<I = any> {
@@ -44,7 +46,7 @@ export interface SuggestionProps<I = any> {
   items: I[],
   command: (props: I) => void,
   decorationNode: Element | null,
-  clientRect: (() => DOMRect) | null,
+  clientRect?: (() => DOMRect | null) | null,
 }
 
 export interface SuggestionKeyDownProps {
@@ -123,8 +125,7 @@ export function Suggestion<I = any>({
                 const { decorationId } = this.key?.getState(editor.state)
                 const currentDecorationNode = document.querySelector(`[data-decoration-id="${decorationId}"]`)
 
-                // @ts-ignore-error
-                return currentDecorationNode.getBoundingClientRect()
+                return currentDecorationNode?.getBoundingClientRect() || null
               }
               : null,
           }