feat: Upgrade TipTap Extensions (#10455)

Signed-off-by: Matt Krick <[email protected]>

.gitignore

@@ -3,6 +3,7 @@
 *.log
 *.heapprofile
 *.heapsnapshot
+.npmrc
 .DS_Store
 .awcache/
 .history/

packages/client/components/Avatar/Avatar.tsx

@@ -26,7 +26,7 @@ const Avatar = forwardRef<HTMLDivElement, Props>((props, ref) => {
       className={clsx(`${onClick && 'cursor-pointer'}`, className)}
     >
       <AvatarImage src={picture || defaultUserAvatar} alt={alt || 'Avatar'} />
-      <AvatarFallback>
+      <AvatarFallback delayMs={200}>
         <img src={defaultUserAvatar} alt={alt || 'Avatar not found'} />
       </AvatarFallback>
     </AvatarRoot>

packages/client/components/EmojiDropdown.tsx

@@ -0,0 +1,79 @@
+import {MentionNodeAttrs} from '@tiptap/extension-mention'
+import {SuggestionProps} from '@tiptap/suggestion'
+import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react'
+import TypeAheadLabel from './TypeAheadLabel'
+
+export default forwardRef(
+  (props: SuggestionProps<{id: string; native: string}, MentionNodeAttrs>, ref) => {
+    const {items, query, editor, range} = props
+    const [selectedIndex, setSelectedIndex] = useState(0)
+    const activeRef = useRef<HTMLDivElement>(null)
+    const selectItem = (idx: number) => {
+      const item = items[idx]
+      if (!item) return
+      editor.commands.insertContentAt(range, item.native + ' ')
+    }
+
+    const upHandler = () => {
+      setSelectedIndex((selectedIndex + items.length - 1) % items.length)
+    }
+
+    const downHandler = () => {
+      setSelectedIndex((selectedIndex + 1) % items.length)
+    }
+
+    const enterHandler = () => {
+      selectItem(selectedIndex)
+    }
+
+    useEffect(() => setSelectedIndex(0), [items])
+    useEffect(() => {
+      activeRef.current?.scrollIntoView({block: 'nearest'})
+    }, [activeRef.current])
+    useImperativeHandle(ref, () => ({
+      onKeyDown: ({event}: {event: React.KeyboardEvent}) => {
+        if (event.key === 'ArrowUp') {
+          upHandler()
+          return true
+        }
+
+        if (event.key === 'ArrowDown') {
+          downHandler()
+          return true
+        }
+
+        if (event.key === 'Enter' || event.key === 'Tab') {
+          enterHandler()
+          return true
+        }
+        return false
+      }
+    }))
+
+    return (
+      <div className='border-rad z-10 max-h-56 overflow-auto rounded-md bg-white py-1 shadow-lg outline-none [[data-placement="bottom-start"]_&]:animate-slideDown [[data-placement="top-start"]_&]:animate-slideUp'>
+        {items.length ? (
+          items.map((item, idx) => {
+            const isActive = idx === selectedIndex
+            return (
+              <div
+                ref={isActive ? activeRef : undefined}
+                data-highlighted={isActive}
+                className={
+                  'flex w-full cursor-pointer items-center rounded-md px-4 py-1 text-sm leading-8 text-slate-700 outline-none hover:!bg-slate-200 hover:text-slate-900 focus:bg-slate-200 data-highlighted:bg-slate-100 data-highlighted:text-slate-900'
+                }
+                key={item.id}
+                onClick={() => selectItem(idx)}
+              >
+                <span>{item.native}</span>
+                <TypeAheadLabel label={`:${item.id}:`} query={query} className='pl-3' />
+              </div>
+            )
+          })
+        ) : (
+          <div></div>
+        )}
+      </div>
+    )
+  }
+)

packages/client/components/MentionDropdown.tsx

@@ -0,0 +1,76 @@
+import {MentionNodeAttrs} from '@tiptap/extension-mention'
+import {SuggestionProps} from '@tiptap/suggestion'
+import React, {forwardRef, useEffect, useImperativeHandle, useState} from 'react'
+import Avatar from './Avatar/Avatar'
+import TypeAheadLabel from './TypeAheadLabel'
+
+export default forwardRef(
+  (
+    props: SuggestionProps<{id: string; preferredName: string; picture: string}, MentionNodeAttrs>,
+    ref
+  ) => {
+    const {command, items, query} = props
+    const [selectedIndex, setSelectedIndex] = useState(0)
+    const selectItem = (idx: number) => {
+      const item = items[idx]
+      if (!item) return
+      command({id: item.id, label: item.preferredName})
+    }
+
+    const upHandler = () => {
+      setSelectedIndex((selectedIndex + items.length - 1) % items.length)
+    }
+
+    const downHandler = () => {
+      setSelectedIndex((selectedIndex + 1) % items.length)
+    }
+
+    const enterHandler = () => {
+      selectItem(selectedIndex)
+    }
+
+    useEffect(() => setSelectedIndex(0), [items])
+
+    useImperativeHandle(ref, () => ({
+      onKeyDown: ({event}: {event: React.KeyboardEvent}) => {
+        if (event.key === 'ArrowUp') {
+          upHandler()
+          return true
+        }
+
+        if (event.key === 'ArrowDown') {
+          downHandler()
+          return true
+        }
+
+        if (event.key === 'Enter' || event.key === 'Tab') {
+          enterHandler()
+          return true
+        }
+        return false
+      }
+    }))
+
+    return (
+      <div className='border-rad z-10 rounded-md bg-white py-1 shadow-lg outline-none [[data-placement="bottom-start"]_&]:animate-slideDown [[data-placement="top-start"]_&]:animate-slideUp'>
+        {items.length ? (
+          items.map((item, idx) => (
+            <div
+              data-highlighted={idx === selectedIndex}
+              className={
+                'flex w-full cursor-pointer items-center rounded-md px-4 py-1 text-sm leading-8 text-slate-700 outline-none hover:!bg-slate-200 hover:text-slate-900 focus:bg-slate-200 data-highlighted:bg-slate-100 data-highlighted:text-slate-900'
+              }
+              key={item.id}
+              onClick={() => selectItem(idx)}
+            >
+              <Avatar picture={item.picture} className='h-6 w-6' />
+              <TypeAheadLabel label={item.preferredName} query={query} className='pl-3' />
+            </div>
+          ))
+        ) : (
+          <div></div>
+        )}
+      </div>
+    )
+  }
+)

packages/client/components/TaskTagDropdown.tsx

@@ -0,0 +1,82 @@
+import {MentionNodeAttrs} from '@tiptap/extension-mention'
+import {SuggestionProps} from '@tiptap/suggestion'
+import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react'
+import TypeAheadLabel from './TypeAheadLabel'
+
+export const TaskTagDropdown = forwardRef(
+  (props: SuggestionProps<{id: string; label: string}, MentionNodeAttrs>, ref) => {
+    const {command, items, query} = props
+    const [selectedIndex, setSelectedIndex] = useState(0)
+    const activeRef = useRef<HTMLDivElement>(null)
+    const selectItem = (idx: number) => {
+      const item = items[idx]
+      if (!item) return
+      command(item)
+    }
+
+    const upHandler = () => {
+      setSelectedIndex((selectedIndex + items.length - 1) % items.length)
+    }
+
+    const downHandler = () => {
+      setSelectedIndex((selectedIndex + 1) % items.length)
+    }
+
+    const enterHandler = () => {
+      selectItem(selectedIndex)
+    }
+
+    useEffect(() => setSelectedIndex(0), [items])
+
+    useImperativeHandle(ref, () => ({
+      onKeyDown: ({event}: {event: React.KeyboardEvent}) => {
+        if (event.key === 'ArrowUp') {
+          upHandler()
+          return true
+        }
+
+        if (event.key === 'ArrowDown') {
+          downHandler()
+          return true
+        }
+
+        if (event.key === 'Enter' || event.key === 'Tab') {
+          enterHandler()
+          return true
+        }
+        return false
+      }
+    }))
+
+    return (
+      <div className='border-rad z-10 max-h-56 overflow-auto rounded-md bg-white py-1 shadow-lg outline-none [[data-placement="bottom-start"]_&]:animate-slideDown [[data-placement="top-start"]_&]:animate-slideUp'>
+        {items.length ? (
+          items.map((item, idx) => {
+            const isActive = idx === selectedIndex
+            return (
+              <div
+                ref={isActive ? activeRef : undefined}
+                data-highlighted={isActive}
+                className={
+                  'flex w-full flex-shrink-0 cursor-pointer items-center rounded-md px-2 py-1 text-sm leading-8 text-slate-700 outline-none hover:!bg-slate-200 hover:text-slate-900 focus:bg-slate-200 data-highlighted:bg-slate-100 data-highlighted:text-slate-900'
+                }
+                key={item.id}
+                onClick={() => selectItem(idx)}
+              >
+                <TypeAheadLabel
+                  label={item.id}
+                  query={query}
+                  className='min-w-20 font-bold'
+                  highlight
+                />
+                <span className='flex justify-start pl-3'>{item.label}</span>
+              </div>
+            )
+          })
+        ) : (
+          <div></div>
+        )}
+      </div>
+    )
+  }
+)

packages/client/components/TeamPrompt/TeamPromptDiscussionDrawer.tsx

@@ -179,7 +179,7 @@ const TeamPromptDiscussionDrawer = ({meetingRef, onToggleDrawer}: Props) => {
           width={'100%'}
           header={
             <DiscussionHeaderWrapper>
-              <PromptResponseEditor content={contentJSON} readOnly={true} />
+              <PromptResponseEditor content={contentJSON} readOnly={true} teamId='' />
               <StyledReactjis key={localStageId} reactjis={reactjis} onToggle={onToggleReactji} />
             </DiscussionHeaderWrapper>
           }