From 168ef0bd6a7ecbd435c0e0884330371a3c9d72da Mon Sep 17 00:00:00 2001
From: Matt Krick <matt.krick@gmail.com>
Date: Mon, 18 Nov 2024 16:18:46 -0800
Subject: [PATCH] feat: Upgrade TipTap Extensions (#10455)

Signed-off-by: Matt Krick <matt.krick@gmail.com>
---
 .gitignore                                    |   1 +
 packages/client/components/Avatar/Avatar.tsx  |   2 +-
 .../EditorLinkChangerTipTap.tsx               |  59 ------
 .../EditorLinkViewerTipTap.tsx                |  37 ----
 packages/client/components/EmojiDropdown.tsx  |  79 +++++++
 .../client/components/MentionDropdown.tsx     |  76 +++++++
 .../client/components/TaskTagDropdown.tsx     |  82 ++++++++
 .../TeamPrompt/TeamPromptDiscussionDrawer.tsx |   2 +-
 packages/client/components/TypeAheadLabel.tsx |  19 +-
 .../promptResponse/EmojiMenuTipTap.tsx        |  78 -------
 .../promptResponse/MentionsTipTap.tsx         | 158 --------------
 .../promptResponse/PromptResponseEditor.tsx   | 194 +++++-------------
 .../promptResponse/TipTapLinkEditor.tsx       |  69 +++++++
 .../promptResponse/TipTapLinkMenu.tsx         | 140 +++++++++++++
 .../promptResponse/TipTapLinkPreview.tsx      |  61 ++++++
 .../promptResponse/TiptapLinkExtension.ts     |  52 +++++
 .../promptResponse/isTextSelected.ts          |  20 ++
 .../components/promptResponse/tiptapConfig.ts | 117 -----------
 .../TeamPromptResponseSummaryCard.tsx         |   4 +-
 packages/client/package.json                  |   1 +
 packages/client/styles/theme/global.css       |  82 ++++++--
 packages/client/ui/Button/Button.tsx          |  17 +-
 packages/client/ui/Tooltip/TooltipContent.tsx |   4 +-
 packages/client/ui/cn.ts                      |   4 +
 packages/client/utils/tiptapEmojiConfig.ts    |  74 +++++++
 packages/client/utils/tiptapMentionConfig.ts  | 109 ++++++++++
 packages/client/utils/tiptapTagConfig.ts      |  81 ++++++++
 .../server/graphql/mutations/createTask.ts    |  13 +-
 .../mutations/upsertTeamPromptResponse.ts     |   5 +-
 packages/server/utils/convertToTipTap.ts      |  34 +++
 .../server/utils/serverTipTapExtensions.ts    |  24 +++
 yarn.lock                                     |   7 +
 32 files changed, 1061 insertions(+), 644 deletions(-)
 delete mode 100644 packages/client/components/EditorLinkChanger/EditorLinkChangerTipTap.tsx
 delete mode 100644 packages/client/components/EditorLinkViewer/EditorLinkViewerTipTap.tsx
 create mode 100644 packages/client/components/EmojiDropdown.tsx
 create mode 100644 packages/client/components/MentionDropdown.tsx
 create mode 100644 packages/client/components/TaskTagDropdown.tsx
 delete mode 100644 packages/client/components/promptResponse/EmojiMenuTipTap.tsx
 delete mode 100644 packages/client/components/promptResponse/MentionsTipTap.tsx
 create mode 100644 packages/client/components/promptResponse/TipTapLinkEditor.tsx
 create mode 100644 packages/client/components/promptResponse/TipTapLinkMenu.tsx
 create mode 100644 packages/client/components/promptResponse/TipTapLinkPreview.tsx
 create mode 100644 packages/client/components/promptResponse/TiptapLinkExtension.ts
 create mode 100644 packages/client/components/promptResponse/isTextSelected.ts
 delete mode 100644 packages/client/components/promptResponse/tiptapConfig.ts
 create mode 100644 packages/client/ui/cn.ts
 create mode 100644 packages/client/utils/tiptapEmojiConfig.ts
 create mode 100644 packages/client/utils/tiptapMentionConfig.ts
 create mode 100644 packages/client/utils/tiptapTagConfig.ts
 create mode 100644 packages/server/utils/convertToTipTap.ts
 create mode 100644 packages/server/utils/serverTipTapExtensions.ts

diff --git a/.gitignore b/.gitignore
index 17e64e722f4..ab6206019e8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 *.log
 *.heapprofile
 *.heapsnapshot
+.npmrc
 .DS_Store
 .awcache/
 .history/
diff --git a/packages/client/components/Avatar/Avatar.tsx b/packages/client/components/Avatar/Avatar.tsx
index 3a0f9b2bac5..5130f1a844f 100644
--- a/packages/client/components/Avatar/Avatar.tsx
+++ b/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>
diff --git a/packages/client/components/EditorLinkChanger/EditorLinkChangerTipTap.tsx b/packages/client/components/EditorLinkChanger/EditorLinkChangerTipTap.tsx
deleted file mode 100644
index 0a3f8f1d2c5..00000000000
--- a/packages/client/components/EditorLinkChanger/EditorLinkChangerTipTap.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import {Editor} from '@tiptap/react'
-import {useState} from 'react'
-import {BBox} from '~/types/animations'
-import EditorLinkChangerModal from './EditorLinkChangerModal'
-
-interface Props {
-  link: string | null
-
-  originCoords: BBox
-  removeModal(allowFocus: boolean): void
-
-  tiptapEditor: Editor
-
-  text: string | null
-}
-
-const EditorLinkChangerTipTap = (props: Props) => {
-  const {text, link, removeModal, originCoords, tiptapEditor} = props
-  const [selection] = useState(tiptapEditor.view.state.selection)
-  const handleSubmit = ({text: newText, href}: {text: string; href: string}) => {
-    tiptapEditor
-      .chain()
-      .focus()
-      .setTextSelection(selection)
-      .command(({tr}) => {
-        if (text !== newText) {
-          // Replace the existing text iff it was changed.
-          tr.insertText(newText)
-        }
-
-        return true
-      })
-      // Something weird happens with the selection when the Link extension's 'inclusive' attribute is 'false' and we
-      // change the text, so manually update the selection with what it should be based on the change in text length.
-      .setTextSelection({
-        from: selection.from,
-        to: selection.to + newText.length - (text?.length ?? 0)
-      })
-      .setLink({href})
-      .run()
-  }
-
-  const handleEscape = () => {
-    setTimeout(() => tiptapEditor.commands.focus(), 0)
-  }
-
-  return (
-    <EditorLinkChangerModal
-      text={text}
-      link={link}
-      removeModal={removeModal}
-      handleSubmit={handleSubmit}
-      handleEscape={handleEscape}
-      originCoords={originCoords}
-    />
-  )
-}
-
-export default EditorLinkChangerTipTap
diff --git a/packages/client/components/EditorLinkViewer/EditorLinkViewerTipTap.tsx b/packages/client/components/EditorLinkViewer/EditorLinkViewerTipTap.tsx
deleted file mode 100644
index e87a693876b..00000000000
--- a/packages/client/components/EditorLinkViewer/EditorLinkViewerTipTap.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import {Editor} from '@tiptap/react'
-import {BBox} from '../../types/animations'
-import EditorLinkViewer from './EditorLinkViewer'
-
-interface Props {
-  href: string
-  addHyperlink: () => void
-  tiptapEditor: Editor
-  originCoords: BBox
-  removeModal: () => void
-}
-
-const EditorLinkViewerDraft = (props: Props) => {
-  const {href, addHyperlink, removeModal, tiptapEditor, originCoords} = props
-
-  const handleRemove = () => {
-    const {from, to} = tiptapEditor.view.state.selection
-    if (to === from) {
-      // TipTap won't correctly extend to the full mark if the cursor is just to the right of the link.
-      tiptapEditor.commands.setTextSelection({to: to - 1, from: from - 1})
-    }
-
-    tiptapEditor.chain().extendMarkRange('link').unsetLink().run()
-  }
-
-  return (
-    <EditorLinkViewer
-      href={href}
-      addHyperlink={addHyperlink}
-      onRemove={handleRemove}
-      originCoords={originCoords}
-      removeModal={removeModal}
-    />
-  )
-}
-
-export default EditorLinkViewerDraft
diff --git a/packages/client/components/EmojiDropdown.tsx b/packages/client/components/EmojiDropdown.tsx
new file mode 100644
index 00000000000..467a80216d1
--- /dev/null
+++ b/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>
+    )
+  }
+)
diff --git a/packages/client/components/MentionDropdown.tsx b/packages/client/components/MentionDropdown.tsx
new file mode 100644
index 00000000000..5c3c5d3732a
--- /dev/null
+++ b/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>
+    )
+  }
+)
diff --git a/packages/client/components/TaskTagDropdown.tsx b/packages/client/components/TaskTagDropdown.tsx
new file mode 100644
index 00000000000..d55a87d4fbf
--- /dev/null
+++ b/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>
+    )
+  }
+)
diff --git a/packages/client/components/TeamPrompt/TeamPromptDiscussionDrawer.tsx b/packages/client/components/TeamPrompt/TeamPromptDiscussionDrawer.tsx
index 22a82e13173..18f65270e4e 100644
--- a/packages/client/components/TeamPrompt/TeamPromptDiscussionDrawer.tsx
+++ b/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>
           }
diff --git a/packages/client/components/TypeAheadLabel.tsx b/packages/client/components/TypeAheadLabel.tsx
index 3f98dd91162..e6baff21726 100644
--- a/packages/client/components/TypeAheadLabel.tsx
+++ b/packages/client/components/TypeAheadLabel.tsx
@@ -1,30 +1,23 @@
-import styled from '@emotion/styled'
 import * as DOMPurify from 'dompurify'
-import {PALETTE} from '~/styles/paletteV3'
+import {twMerge} from 'tailwind-merge'
 import getSafeRegex from '~/utils/getSafeRegex'
 
 interface Props {
   query: string
   label: string
   highlight?: boolean
+  className?: string
 }
 
-const Span = styled('span')({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-})
-
 const TypeAheadLabel = (props: Props) => {
-  const {query, label, highlight} = props
-  const queryHtml = highlight
-    ? `<mark style="background: ${PALETTE.SKY_300}">$&</mark>`
-    : `<b>$&</b>`
+  const {query, label, highlight, className} = props
+  const queryHtml = highlight ? `<mark className="bg-sky-300">$&</mark>` : `<b>$&</b>`
   const cleanInnerHtml = DOMPurify.sanitize(
     query ? label.replace(getSafeRegex(query, 'gi'), queryHtml) : label
   )
   return (
-    <Span
+    <span
+      className={twMerge('overflow-hidden text-ellipsis whitespace-nowrap', className)}
       dangerouslySetInnerHTML={{
         __html: cleanInnerHtml
       }}
diff --git a/packages/client/components/promptResponse/EmojiMenuTipTap.tsx b/packages/client/components/promptResponse/EmojiMenuTipTap.tsx
deleted file mode 100644
index 0ba531dd8eb..00000000000
--- a/packages/client/components/promptResponse/EmojiMenuTipTap.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import {Editor, Range} from '@tiptap/core'
-import Suggestion from '@tiptap/suggestion'
-import {PluginKey} from 'prosemirror-state'
-import {useEffect, useState} from 'react'
-import EmojiMenuContainer from '../TaskEditor/EmojiMenuContainer'
-import {getSelectionBoundingBox} from './tiptapConfig'
-
-interface Props {
-  tiptapEditor: Editor
-}
-
-const pluginKey = new PluginKey('emojiMenu')
-
-const EmojiMenuTipTap = (props: Props) => {
-  const {tiptapEditor} = props
-  const [openEmojiMenu, setOpenEmojiMenu] = useState(false)
-  const [emojiQuery, setEmojiQuery] = useState('')
-  const [range, setRange] = useState<Range | null>(null)
-
-  useEffect(() => {
-    if (tiptapEditor.isDestroyed) {
-      return
-    }
-
-    const plugin = Suggestion({
-      // The 'pluginKey' type definition seems to be a mismatch between prosemirror and this
-      // extension, so cast to 'any' to get around it.
-      // :TODO: (jmtaber129): get these type definitions to play nice.
-      pluginKey: pluginKey as any,
-      editor: tiptapEditor,
-      char: ':',
-      render: () => ({
-        onStart: ({range}) => {
-          setRange(range)
-          setOpenEmojiMenu(true)
-        },
-        onExit: () => {
-          setRange(null)
-          setOpenEmojiMenu(false)
-        },
-        onUpdate: ({query, range}) => {
-          setOpenEmojiMenu(true)
-          setRange(range)
-          setEmojiQuery(query)
-        }
-      })
-    }) as any
-
-    tiptapEditor.registerPlugin(plugin)
-    return () => {
-      tiptapEditor.unregisterPlugin(pluginKey)
-    }
-  }, [tiptapEditor, setOpenEmojiMenu, setEmojiQuery])
-
-  const onSelectEmoji = (emoji: string) => {
-    if (!range) return
-    tiptapEditor
-      .chain()
-      .focus()
-      .setTextSelection(range)
-      .command(({tr}) => {
-        tr.insertText(emoji)
-
-        return true
-      })
-      .run()
-  }
-
-  return openEmojiMenu && tiptapEditor.isFocused ? (
-    <EmojiMenuContainer
-      originCoords={getSelectionBoundingBox(tiptapEditor)}
-      onSelectEmoji={onSelectEmoji}
-      query={emojiQuery}
-    />
-  ) : null
-}
-
-export default EmojiMenuTipTap
diff --git a/packages/client/components/promptResponse/MentionsTipTap.tsx b/packages/client/components/promptResponse/MentionsTipTap.tsx
deleted file mode 100644
index 6ff69235a0d..00000000000
--- a/packages/client/components/promptResponse/MentionsTipTap.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import {Editor, Range} from '@tiptap/core'
-import Suggestion from '@tiptap/suggestion'
-import {PluginKey} from 'prosemirror-state'
-import {Suspense, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'
-import TeamMemberId from '../../shared/gqlIds/TeamMemberId'
-import SuggestMentionableUsersRoot from '../SuggestMentionableUsersRoot'
-import {MentionSuggestion} from '../TaskEditor/useSuggestions'
-import {getSelectionBoundingBox} from './tiptapConfig'
-
-interface Props {
-  tiptapEditor: Editor
-  teamId: string
-}
-
-const pluginKey = new PluginKey('mentionMenu')
-
-const MentionsTipTap = (props: Props) => {
-  const {tiptapEditor, teamId} = props
-  const [openMentions, setOpenMentions] = useState(false)
-  const [mentionQuery, setMentionQuery] = useState('')
-  const [range, setRange] = useState<Range | null>(null)
-  const [active, setActive] = useState(0)
-
-  const [suggestions, setSuggestions] = useState<MentionSuggestion[]>([])
-
-  useEffect(() => setActive(0), [suggestions])
-
-  const onSelectMention = useCallback(
-    (item: MentionSuggestion) => {
-      if (!range) return
-      const nodeAfter = tiptapEditor.view.state.selection.$to.nodeAfter
-      const overrideSpace = nodeAfter?.text?.startsWith(' ')
-
-      if (overrideSpace) {
-        range.to += 1
-      }
-
-      const {userId} = TeamMemberId.split(item.id)
-
-      tiptapEditor
-        .chain()
-        .focus()
-        .insertContentAt(range, [
-          {
-            type: 'mention',
-            attrs: {
-              id: userId,
-              label: item.preferredName
-            }
-          },
-          {
-            type: 'text',
-            text: ' '
-          }
-        ])
-        .run()
-    },
-    [tiptapEditor, range]
-  )
-
-  const keyHandlerRef = useRef<any>(null)
-
-  useImperativeHandle(
-    keyHandlerRef,
-    () => ({
-      upHandler: () => {
-        setActive((active + suggestions.length - 1) % suggestions.length)
-      },
-      downHandler: () => {
-        setActive((active + 1) % suggestions.length)
-      },
-      enterHandler: () => {
-        onSelectMention(suggestions[active]!)
-      }
-    }),
-    [setActive, active, onSelectMention, suggestions]
-  )
-
-  useEffect(() => {
-    if (tiptapEditor.isDestroyed) {
-      return
-    }
-
-    const plugin = Suggestion({
-      // The 'pluginKey' type definition seems to be a mismatch between prosemirror and this
-      // extension, so cast to 'any' to get around it.
-      // :TODO: (jmtaber129): get these type definitions to play nice.
-      pluginKey: pluginKey as any,
-      editor: tiptapEditor,
-      char: '@',
-      render: () => ({
-        onStart: ({range}) => {
-          setRange(range)
-          setOpenMentions(true)
-        },
-        onExit: () => {
-          setRange(null)
-          setOpenMentions(false)
-        },
-        onUpdate: ({query, range}) => {
-          setOpenMentions(true)
-          setRange(range)
-          setMentionQuery(query)
-        },
-        onKeyDown: ({event}) => {
-          if (event.key === 'Escape') {
-            setOpenMentions(false)
-            return true
-          }
-
-          if (!keyHandlerRef.current) {
-            return false
-          }
-
-          if (event.key === 'ArrowUp') {
-            keyHandlerRef.current.upHandler()
-            return true
-          }
-
-          if (event.key === 'ArrowDown') {
-            keyHandlerRef.current.downHandler()
-            return true
-          }
-
-          if (event.key === 'Enter' || event.key === 'Tab') {
-            keyHandlerRef.current.enterHandler()
-            return true
-          }
-
-          return false
-        }
-      })
-    }) as any
-
-    // Other plugins that tiptap adds will try to handle the certain keydown events without giving
-    // us a chance to handle them here, so bump up the priority for us.
-    tiptapEditor.registerPlugin(plugin, (newPlugin, plugins) => [newPlugin, ...plugins])
-    return () => {
-      tiptapEditor.unregisterPlugin(pluginKey)
-    }
-  }, [tiptapEditor, setOpenMentions, setMentionQuery])
-
-  return openMentions && tiptapEditor.isFocused ? (
-    <Suspense fallback={''}>
-      <SuggestMentionableUsersRoot
-        active={active || 0}
-        handleSelect={onSelectMention}
-        setSuggestions={setSuggestions}
-        suggestions={suggestions}
-        triggerWord={mentionQuery}
-        teamId={teamId}
-        originCoords={getSelectionBoundingBox(tiptapEditor)}
-      />
-    </Suspense>
-  ) : null
-}
-
-export default MentionsTipTap
diff --git a/packages/client/components/promptResponse/PromptResponseEditor.tsx b/packages/client/components/promptResponse/PromptResponseEditor.tsx
index 323713cc9f6..04a8c4a20e2 100644
--- a/packages/client/components/promptResponse/PromptResponseEditor.tsx
+++ b/packages/client/components/promptResponse/PromptResponseEditor.tsx
@@ -1,18 +1,22 @@
 import styled from '@emotion/styled'
 import {Link} from '@mui/icons-material'
 import {Editor as EditorState} from '@tiptap/core'
+import Mention from '@tiptap/extension-mention'
+import Placeholder from '@tiptap/extension-placeholder'
 import {BubbleMenu, EditorContent, JSONContent, useEditor} from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
 import areEqual from 'fbjs/lib/areEqual'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {PALETTE} from '~/styles/paletteV3'
 import {Radius} from '~/types/constEnums'
+import useAtmosphere from '../../hooks/useAtmosphere'
+import {tiptapEmojiConfig} from '../../utils/tiptapEmojiConfig'
+import {tiptapMentionConfig} from '../../utils/tiptapMentionConfig'
 import BaseButton from '../BaseButton'
-import EditorLinkChangerTipTap from '../EditorLinkChanger/EditorLinkChangerTipTap'
-import EditorLinkViewerTipTap from '../EditorLinkViewer/EditorLinkViewerTipTap'
-import EmojiMenuTipTap from './EmojiMenuTipTap'
-import MentionsTipTap from './MentionsTipTap'
-import {unfurlLoomLinks} from './loomExtension'
-import {LinkMenuProps, LinkPreviewProps, createEditorExtensions, getLinkProps} from './tiptapConfig'
+import isTextSelected from './isTextSelected'
+import {LoomExtension, unfurlLoomLinks} from './loomExtension'
+import {TiptapLinkExtension} from './TiptapLinkExtension'
+import TipTapLinkMenu, {LinkMenuState} from './TipTapLinkMenu'
 
 const LinkIcon = styled(Link)({
   height: 18,
@@ -29,7 +33,7 @@ const BubbleMenuWrapper = styled('div')({
   padding: '4px'
 })
 
-const BubbleMenuButton = styled(BaseButton)<{isActive: boolean}>(({isActive}) => ({
+const BubbleMenuButton = styled(BaseButton)<{isActive?: boolean}>(({isActive}) => ({
   height: '20px',
   width: '22px',
   padding: '4px 0px 4px 0px',
@@ -65,66 +69,9 @@ const CancelButton = styled(SubmitButton)({
   color: PALETTE.SLATE_700
 })
 
-const StyledEditor = styled('div')`
-  .ProseMirror {
-    min-height: 40px;
-    line-height: 1.25;
-  }
-
-  .ProseMirror :is(ul, ol) {
-    list-style-position: outside;
-    padding-inline-start: 16px;
-    margin-block-start: 4px;
-    margin-block-end: 4px;
-  }
-
-  .ProseMirror :is(ol) {
-    margin-inline-start: 2px;
-  }
-
-  .ProseMirror p.is-editor-empty:first-child::before {
-    color: #adb5bd;
-    content: attr(data-placeholder);
-    float: left;
-    height: 0;
-    pointer-events: none;
-  }
-
-  .ProseMirror [data-type='mention'] {
-    background-color: ${PALETTE.GOLD_100};
-    border-radius: 2;
-    font-weight: 600;
-  }
-
-  .ProseMirror-focused:focus {
-    outline: none;
-  }
-
-  a {
-    text-decoration: underline;
-    color: ${PALETTE.SLATE_700};
-    :hover {
-      cursor: pointer;
-    }
-  }
-
-  .ProseMirror p {
-    margin-block-start: 4px;
-    margin-block-end: 4px;
-  }
-
-  hr.ProseMirror-selectednode {
-    border-top: 1px solid #68cef8;
-  }
-
-  hr {
-    border-top: 1px solid ${PALETTE.SLATE_400};
-  }
-`
-
 interface Props {
   autoFocus?: boolean
-  teamId?: string
+  teamId: string
   content: JSONContent | null
   handleSubmit?: (editor: EditorState) => void
   readOnly: boolean
@@ -142,6 +89,7 @@ const PromptResponseEditor = (props: Props) => {
     teamId,
     draftStorageKey
   } = props
+  const atmosphere = useAtmosphere()
   const [isEditing, setIsEditing] = useState(false)
   const [autoFocus, setAutoFocus] = useState(autoFocusProp)
 
@@ -150,31 +98,6 @@ const PromptResponseEditor = (props: Props) => {
     [rawContent, readOnly]
   )
 
-  const [linkOverlayProps, setLinkOverlayProps] = useState<
-    | {
-        linkMenuProps: LinkMenuProps
-        linkPreviewProps: undefined
-      }
-    | {
-        linkMenuProps: undefined
-        linkPreviewProps: LinkPreviewProps
-      }
-    | undefined
-  >()
-
-  const setLinkMenuProps = useCallback(
-    (props: LinkMenuProps) => {
-      setLinkOverlayProps({linkMenuProps: props, linkPreviewProps: undefined})
-    },
-    [setLinkOverlayProps]
-  )
-  const setLinkPreviewProps = useCallback(
-    (props: LinkPreviewProps) => {
-      setLinkOverlayProps({linkPreviewProps: props, linkMenuProps: undefined})
-    },
-    [setLinkOverlayProps]
-  )
-
   const editorRef = useRef<HTMLDivElement>(null)
 
   const setEditing = useCallback(
@@ -218,28 +141,36 @@ const PromptResponseEditor = (props: Props) => {
     }
   }
 
+  const [linkState, setLinkState] = useState<LinkMenuState>(null)
+
+  const openLinkEditor = () => {
+    setLinkState('edit')
+  }
+
   const editor = useEditor(
     {
       content,
-      extensions: createEditorExtensions(
-        setLinkMenuProps,
-        setLinkPreviewProps,
-        setLinkOverlayProps,
-        placeholder
-      ),
+      extensions: [
+        StarterKit,
+        LoomExtension,
+        Placeholder.configure({
+          showOnlyWhenEditable: false,
+          placeholder
+        }),
+        Mention.configure(tiptapMentionConfig(atmosphere, teamId)),
+        Mention.extend({name: 'emojiMention'}).configure(tiptapEmojiConfig),
+        TiptapLinkExtension.configure({
+          openOnClick: false,
+          popover: {
+            setLinkState
+          }
+        })
+      ],
       autofocus: autoFocus,
       onUpdate,
       editable: !readOnly
     },
-    [
-      content,
-      readOnly,
-      setLinkMenuProps,
-      setLinkPreviewProps,
-      setLinkOverlayProps,
-      onSubmit,
-      onUpdate
-    ]
+    [content, readOnly, onSubmit, onUpdate]
   )
 
   useEffect(() => {
@@ -260,21 +191,22 @@ const PromptResponseEditor = (props: Props) => {
     editor?.commands.setContent(draftContent)
   }, [editor])
 
-  const onAddHyperlink = () => {
-    if (!editor) {
-      return
-    }
-
-    setLinkMenuProps(getLinkProps(editor))
+  const shouldShowBubbleMenu = () => {
+    if (!editor || editor.isActive('link')) return false
+    return isTextSelected(editor)
   }
 
   return (
     <>
-      <StyledEditor>
+      <div>
         {editor && !readOnly && (
           <>
             <div>
-              <BubbleMenu editor={editor} tippyOptions={{duration: 100}}>
+              <BubbleMenu
+                editor={editor}
+                tippyOptions={{duration: 100}}
+                shouldShow={shouldShowBubbleMenu}
+              >
                 <BubbleMenuWrapper>
                   <BubbleMenuButton
                     onClick={() => editor.chain().focus().toggleBold().run()}
@@ -294,40 +226,24 @@ const PromptResponseEditor = (props: Props) => {
                   >
                     <s>S</s>
                   </BubbleMenuButton>
-                  <BubbleMenuButton onClick={onAddHyperlink} isActive={editor.isActive('link')}>
+                  <BubbleMenuButton onClick={openLinkEditor}>
                     <LinkIcon />
                   </BubbleMenuButton>
                 </BubbleMenuWrapper>
               </BubbleMenu>
             </div>
-            <EmojiMenuTipTap tiptapEditor={editor} />
-            {teamId && <MentionsTipTap tiptapEditor={editor} teamId={teamId} />}
-            {linkOverlayProps?.linkMenuProps && (
-              <EditorLinkChangerTipTap
-                text={linkOverlayProps.linkMenuProps.text}
-                link={linkOverlayProps.linkMenuProps.href}
-                tiptapEditor={editor}
-                originCoords={linkOverlayProps.linkMenuProps.originCoords}
-                removeModal={() => {
-                  setLinkOverlayProps(undefined)
-                }}
-              />
-            )}
-            {linkOverlayProps?.linkPreviewProps && (
-              <EditorLinkViewerTipTap
-                href={linkOverlayProps.linkPreviewProps.href}
-                tiptapEditor={editor}
-                addHyperlink={onAddHyperlink}
-                originCoords={linkOverlayProps.linkPreviewProps.originCoords}
-                removeModal={() => {
-                  setLinkOverlayProps(undefined)
-                }}
-              />
-            )}
+            <TipTapLinkMenu
+              editor={editor}
+              setLinkState={(linkState: LinkMenuState) => {
+                editor.commands.focus()
+                setLinkState(linkState)
+              }}
+              linkState={linkState}
+            />
           </>
         )}
         <EditorContent ref={editorRef} editor={editor} />
-      </StyledEditor>
+      </div>
       {!readOnly && (
         // The render conditions for these buttons *should* only be true when 'readOnly' is false, but let's be explicit
         // about it.
diff --git a/packages/client/components/promptResponse/TipTapLinkEditor.tsx b/packages/client/components/promptResponse/TipTapLinkEditor.tsx
new file mode 100644
index 00000000000..8fdfa7c4e68
--- /dev/null
+++ b/packages/client/components/promptResponse/TipTapLinkEditor.tsx
@@ -0,0 +1,69 @@
+import {Link, Title} from '@mui/icons-material'
+import {useCallback, useMemo, useState} from 'react'
+import {Button} from '../../ui/Button/Button'
+import linkify from '../../utils/linkify'
+
+export type props = {
+  initialUrl: string
+  initialText: string
+  onSetLink: (link: {text: string; url: string}) => void
+}
+
+export const TipTapLinkEditor = (props: props) => {
+  const {onSetLink, initialUrl, initialText} = props
+
+  const [url, setUrl] = useState(initialUrl)
+  const [text, setText] = useState(initialText)
+  const onChangeURL = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setUrl(event.target.value)
+  }, [])
+  const onChangeText = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setText(event.target.value)
+  }, [])
+  const isValidUrl = useMemo(() => (!url ? false : linkify.match(url)), [url])
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault()
+      if (!isValidUrl) return
+      onSetLink({text, url})
+    },
+    [url, text, isValidUrl, onSetLink]
+  )
+  return (
+    <div className={'flex items-center rounded-md bg-white p-2 shadow-lg'}>
+      <form onSubmit={handleSubmit} className='flex flex-col items-center'>
+        <label className='bg-neutral-100 dark:bg-neutral-900 flex cursor-text items-center gap-2 rounded-lg p-2'>
+          <Link className='flex-none text-slate-700' />
+          <input
+            autoFocus
+            type='url'
+            className='min-w-52 flex-1 bg-transparent text-sm text-slate-700 outline-none'
+            placeholder='Enter URL'
+            value={url}
+            onChange={onChangeURL}
+          />
+        </label>
+        <label className='bg-neutral-100 dark:bg-neutral-900 flex cursor-text items-center gap-2 rounded-lg p-2'>
+          <Title className='flex-none text-slate-700' />
+          <input
+            className='min-w-52 flex-1 bg-transparent text-sm text-slate-700 outline-none'
+            placeholder='Link Title'
+            value={text}
+            onChange={onChangeText}
+          />
+        </label>
+        <div className='flex w-full items-end justify-end'>
+          <Button
+            variant='flat'
+            size='sm'
+            type='submit'
+            disabled={!isValidUrl}
+            className='font-semibold text-slate-800'
+          >
+            Save
+          </Button>
+        </div>
+      </form>
+    </div>
+  )
+}
diff --git a/packages/client/components/promptResponse/TipTapLinkMenu.tsx b/packages/client/components/promptResponse/TipTapLinkMenu.tsx
new file mode 100644
index 00000000000..01a93be6a01
--- /dev/null
+++ b/packages/client/components/promptResponse/TipTapLinkMenu.tsx
@@ -0,0 +1,140 @@
+import * as Popover from '@radix-ui/react-popover'
+import {Editor, getMarkRange, getMarkType, getTextBetween, useEditorState} from '@tiptap/react'
+import {useCallback} from 'react'
+import {TipTapLinkEditor} from './TipTapLinkEditor'
+import {TipTapLinkPreview} from './TipTapLinkPreview'
+
+const getContent = (editor: Editor, typeOrName: string) => {
+  const range = getRangeForType(editor, typeOrName)
+  if (!range) return ''
+  return getTextBetween(editor.state.doc, range)
+}
+
+const getRangeForType = (editor: Editor, typeOrName: string) => {
+  const {state} = editor
+  const {selection, schema} = state
+  const {$from} = selection
+  const type = getMarkType(typeOrName, schema)
+  return getMarkRange($from, type)
+}
+
+export type LinkMenuState = 'preview' | 'edit' | null
+interface Props {
+  editor: Editor
+  linkState: LinkMenuState
+  setLinkState: (linkState: LinkMenuState) => void
+}
+export const TipTapLinkMenu = (props: Props) => {
+  const {editor, linkState, setLinkState} = props
+
+  const getRect = () => {
+    if (!editor) return {top: 0, left: 0}
+    const coords = editor.view.coordsAtPos(editor.state.selection.from)
+    return {
+      top: coords.top,
+      left: coords.left
+    }
+  }
+
+  const {link, text} = useEditorState({
+    editor,
+    selector: ({editor}) => {
+      const attrs = editor.getAttributes('link')
+      if (attrs.href) {
+        const text = getContent(editor, 'link')
+        return {link: attrs.href, text}
+      }
+      const {state} = editor
+      const {selection} = state
+      const {from, to} = selection
+      const text = getTextBetween(editor.state.doc, {from, to})
+      return {link: '', text}
+    }
+  })
+
+  const handleEdit = useCallback(() => {
+    setLinkState('edit')
+  }, [])
+
+  const onSetLink = useCallback(
+    ({text, url}: {text: string; url: string}) => {
+      const range = getRangeForType(editor, 'link')
+      if (!range) {
+        const {state} = editor
+        const {selection} = state
+        const {from} = selection
+        const nextTo = from + text.length
+        // adding a new link
+        editor
+          .chain()
+          .focus()
+          .command(({tr}) => {
+            tr.insertText(text)
+            return true
+          })
+          .setTextSelection({
+            from,
+            to: nextTo
+          })
+          .setLink({href: url, target: '_blank'})
+          .setTextSelection({from: nextTo, to: nextTo})
+          .run()
+        return
+      }
+      const {from} = range
+      const to = from + text.length
+      editor
+        .chain()
+        .focus()
+        .setTextSelection(range)
+        .insertContent(text)
+        .setTextSelection({
+          from,
+          to
+        })
+        .setLink({href: url, target: '_blank'})
+        .setTextSelection({from: to, to})
+        .run()
+      setLinkState(null)
+    },
+    [editor]
+  )
+  const onUnsetLink = useCallback(() => {
+    const range = getRangeForType(editor, 'link')
+    if (!range) return
+    editor
+      .chain()
+      .focus()
+      .extendMarkRange('link')
+      .unsetLink()
+      .setTextSelection({from: range.to, to: range.to})
+      .run()
+    setLinkState(null)
+  }, [editor])
+
+  const rect = getRect()
+  const transform = `translate(${rect.left}px,${rect.top + 20}px)`
+  const onOpenChange = (willOpen: boolean) => {
+    setLinkState(willOpen ? (editor.isActive('link') ? 'preview' : 'edit') : null)
+  }
+  return (
+    <Popover.Root open onOpenChange={onOpenChange}>
+      <Popover.Trigger asChild />
+      <Popover.Portal>
+        <Popover.Content>
+          <div className='absolute left-0 top-0' style={{transform}}>
+            {linkState === 'edit' && (
+              <TipTapLinkEditor initialUrl={link} initialText={text} onSetLink={onSetLink} />
+            )}
+            {linkState === 'preview' && (
+              <TipTapLinkPreview url={link} onClear={onUnsetLink} onEdit={handleEdit} />
+            )}
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  )
+  return null
+}
+
+export default TipTapLinkMenu
diff --git a/packages/client/components/promptResponse/TipTapLinkPreview.tsx b/packages/client/components/promptResponse/TipTapLinkPreview.tsx
new file mode 100644
index 00000000000..5bb8590c095
--- /dev/null
+++ b/packages/client/components/promptResponse/TipTapLinkPreview.tsx
@@ -0,0 +1,61 @@
+import {Delete, Edit, Link} from '@mui/icons-material'
+import {Tooltip} from '../../ui/Tooltip/Tooltip'
+import {TooltipContent} from '../../ui/Tooltip/TooltipContent'
+import {TooltipTrigger} from '../../ui/Tooltip/TooltipTrigger'
+
+export type Props = {
+  url: string
+  onEdit: () => void
+  onClear: () => void
+}
+
+export const TipTapLinkPreview = (props: Props) => {
+  const {onClear, onEdit, url} = props
+  return (
+    <div
+      className={
+        'flex items-center justify-center truncate rounded-md bg-white p-1 text-sm shadow-lg'
+      }
+    >
+      <Link className='flex-none pr-1 text-base text-slate-700' />
+      <a
+        href={url}
+        target='_blank'
+        rel='noopener noreferrer'
+        className='max-w-64 truncate break-all text-sm underline'
+      >
+        {url}
+      </a>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            className={
+              'flex cursor-pointer appearance-none items-center justify-center bg-transparent p-1'
+            }
+            aria-label='Edit'
+          >
+            <Edit onClick={onEdit} className='text-base' />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side='top' align='center'>
+          {'Edit link'}
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            className={
+              'flex cursor-pointer appearance-none items-center justify-center bg-transparent p-1'
+            }
+            aria-label='Remove link'
+          >
+            <Delete onClick={onClear} className='text-base' />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side='top' align='center'>
+          {'Remove link'}
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  )
+}
diff --git a/packages/client/components/promptResponse/TiptapLinkExtension.ts b/packages/client/components/promptResponse/TiptapLinkExtension.ts
new file mode 100644
index 00000000000..e9f4b59bc3a
--- /dev/null
+++ b/packages/client/components/promptResponse/TiptapLinkExtension.ts
@@ -0,0 +1,52 @@
+import {mergeAttributes} from '@tiptap/core'
+import BaseLink, {LinkOptions} from '@tiptap/extension-link'
+import {Plugin} from '@tiptap/pm/state'
+import {EditorView} from '@tiptap/pm/view'
+import {LinkMenuState} from './TipTapLinkMenu'
+
+interface ExtendedOptions extends LinkOptions {
+  popover: {
+    setLinkState: (linkState: LinkMenuState) => void
+  }
+}
+export const TiptapLinkExtension = BaseLink.extend<ExtendedOptions>({
+  // if the caret is at the end of the link, it is not part of the link
+  inclusive: false,
+  addKeyboardShortcuts(this) {
+    return {
+      'Mod-k': () => {
+        this.options.popover.setLinkState('edit')
+        return true
+      }
+    }
+  },
+  parseHTML() {
+    return [{tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])'}]
+  },
+
+  renderHTML({HTMLAttributes}) {
+    return ['a', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {class: 'link'}), 0]
+  },
+  onSelectionUpdate() {
+    const href = this.editor.getAttributes('link').href
+    this.options.popover.setLinkState(href ? 'preview' : null)
+  },
+  addProseMirrorPlugins() {
+    const {editor} = this
+    return [
+      ...(this.parent?.() || []),
+      new Plugin({
+        props: {
+          handleKeyDown: (_view: EditorView, event: KeyboardEvent) => {
+            const {selection} = editor.state
+            if (event.key === 'Escape' && selection.empty !== true) {
+              editor.commands.focus(selection.to, {scrollIntoView: false})
+              return true
+            }
+            return false
+          }
+        }
+      })
+    ]
+  }
+})
diff --git a/packages/client/components/promptResponse/isTextSelected.ts b/packages/client/components/promptResponse/isTextSelected.ts
new file mode 100644
index 00000000000..4f087880cfb
--- /dev/null
+++ b/packages/client/components/promptResponse/isTextSelected.ts
@@ -0,0 +1,20 @@
+import {isTextSelection} from '@tiptap/core'
+import {Editor} from '@tiptap/react'
+
+export const isTextSelected = (editor: Editor) => {
+  const {
+    state: {
+      doc,
+      selection,
+      selection: {empty, from, to}
+    }
+  } = editor
+
+  // Sometime check for `empty` is not enough.
+  // Doubleclick an empty paragraph returns a node size of 2.
+  // So we check also for an empty text size.
+  const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(selection)
+  return !(empty || isEmptyTextBlock || !editor.isEditable)
+}
+
+export default isTextSelected
diff --git a/packages/client/components/promptResponse/tiptapConfig.ts b/packages/client/components/promptResponse/tiptapConfig.ts
deleted file mode 100644
index 2cc48dac3a4..00000000000
--- a/packages/client/components/promptResponse/tiptapConfig.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import {Editor, isNodeSelection, posToDOMRect} from '@tiptap/core'
-import Link from '@tiptap/extension-link'
-import Mention from '@tiptap/extension-mention'
-import Placeholder from '@tiptap/extension-placeholder'
-import StarterKit from '@tiptap/starter-kit'
-import {BBox} from '~/types/animations'
-import {LoomExtension} from './loomExtension'
-
-export interface LinkMenuProps {
-  text: string
-  href: string
-  originCoords: BBox
-}
-export interface LinkPreviewProps {
-  href: string
-  originCoords: BBox
-}
-export type LinkOverlayProps =
-  | {
-      linkMenuProps: LinkMenuProps
-      linkPreviewProps: undefined
-    }
-  | {
-      linkMenuProps: undefined
-      linkPreviewProps: LinkPreviewProps
-    }
-  | undefined
-
-export const getSelectionBoundingBox = (editor: Editor) => {
-  const selection = editor.view.state.selection
-  const {from, to} = selection
-
-  if (isNodeSelection(selection)) {
-    const node = editor.view.nodeDOM(from) as HTMLElement
-
-    if (node) {
-      return node.getBoundingClientRect()
-    }
-  }
-
-  return posToDOMRect(editor?.view, from, to)
-}
-
-export const getLinkProps = (editor: Editor) => {
-  editor.commands.extendMarkRange('link')
-  let {from, to} = editor.view.state.selection
-  if (to === from && editor.isActive('link')) {
-    // If the cursor is on a link, but hasn't selected any specific part of the link text, expand the selection
-    // to the full link.
-    editor.commands.setTextSelection({to: to - 1, from: from - 1})
-    editor.commands.extendMarkRange('link')
-    const selection = editor.view.state.selection
-    to = selection.to
-    from = selection.from
-  }
-  const href: string | undefined = editor.getAttributes('link').href
-  const text = editor.state.doc.textBetween(from, to, '')
-  const originCoords = getSelectionBoundingBox(editor)
-
-  return {text, href: href ?? '', originCoords}
-}
-
-/**
- * Returns tip tap extensions configuration shared by the client and the server
- * @param placeholder
- * @returns an array of extensions to be used by the tip tap editor
- */
-export const createEditorExtensions = (
-  setLinkMenuProps?: (props: LinkMenuProps) => void,
-  setLinkPreviewProps?: (props: LinkPreviewProps) => void,
-  setLinkOverlayProps?: (props: LinkOverlayProps) => void,
-  placeholder?: string
-) => [
-  StarterKit,
-  LoomExtension,
-  Link.extend({
-    inclusive: false,
-    addKeyboardShortcuts() {
-      return {
-        'Mod-k': () => {
-          if (!setLinkMenuProps) {
-            return false
-          }
-
-          setLinkMenuProps(getLinkProps(this.editor))
-          return true
-        }
-      }
-    },
-    onSelectionUpdate() {
-      const href = this.editor.getAttributes('link').href
-      if (href && setLinkPreviewProps) {
-        setLinkPreviewProps({href, originCoords: getSelectionBoundingBox(this.editor)})
-      } else if (setLinkOverlayProps) {
-        setLinkOverlayProps(undefined)
-      }
-    }
-  }).configure({
-    openOnClick: false
-  }),
-  Placeholder.configure({
-    showOnlyWhenEditable: false,
-    placeholder
-  }),
-  Mention.extend({
-    // Prevent the out-of-the-box 'mention' extension from adding its own 'suggestion' plugin. We'll
-    // be adding our own through our custom mentions React component.
-    addProseMirrorPlugins() {
-      return []
-    }
-  }).configure({
-    renderLabel({node}) {
-      return `${node.attrs.label ?? node.attrs.id}`
-    },
-    suggestion: {}
-  })
-]
diff --git a/packages/client/modules/email/components/SummaryEmail/MeetingSummaryEmail/TeamPromptResponseSummaryCard.tsx b/packages/client/modules/email/components/SummaryEmail/MeetingSummaryEmail/TeamPromptResponseSummaryCard.tsx
index bd0439c0529..9ba97448509 100644
--- a/packages/client/modules/email/components/SummaryEmail/MeetingSummaryEmail/TeamPromptResponseSummaryCard.tsx
+++ b/packages/client/modules/email/components/SummaryEmail/MeetingSummaryEmail/TeamPromptResponseSummaryCard.tsx
@@ -5,7 +5,7 @@ import {TeamPromptResponseSummaryCard_stage$key} from 'parabol-client/__generate
 import * as React from 'react'
 import {useFragment} from 'react-relay'
 import {PALETTE} from '~/styles/paletteV3'
-import {createEditorExtensions} from '../../../../../components/promptResponse/tiptapConfig'
+import {serverTipTapExtensions} from '../../../../../../server/utils/serverTipTapExtensions'
 
 const responseSummaryCardStyles: React.CSSProperties = {
   padding: '12px',
@@ -112,7 +112,7 @@ const TeamPromptResponseSummaryCard = (props: Props) => {
   const {user, preferredName} = teamMember
   const {rasterPicture} = user
   const contentJSON = response ? JSON.parse(response.content) : null
-  const html = generateHTML(contentJSON, createEditorExtensions())
+  const html = generateHTML(contentJSON, serverTipTapExtensions)
 
   return (
     <div style={responseSummaryCardStyles}>
diff --git a/packages/client/package.json b/packages/client/package.json
index 77f95a8abaa..9a8f7a9a7c8 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -29,6 +29,7 @@
     "@types/cleave.js": "^1.4.7",
     "@types/dompurify": "^2.4.0",
     "@types/draft-js": "^0.10.24",
+    "@types/emoji-mart": "^3.0.14",
     "@types/fbjs": "^3.0.4",
     "@types/humanize-duration": "3.27.1",
     "@types/jest": "^29.5.12",
diff --git a/packages/client/styles/theme/global.css b/packages/client/styles/theme/global.css
index 4b8d81dbb31..4f33567f322 100644
--- a/packages/client/styles/theme/global.css
+++ b/packages/client/styles/theme/global.css
@@ -149,24 +149,6 @@
       display: none !important;
     }
   }
-
-  /*::-webkit-scrollbar {
-    -webkit-appearance: none;
-    width:6px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius:3px;
-    background-color:rgba(0, 0, 0, 0.3);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background:rgba(0, 0, 0, 0.5);
-  }
-
-  ::-webkit-scrollbar-thumb:window-inactive {
-    background:rgba(0, 0, 0, 0.2);
-  }*/
 }
 
 /** Customize daypicker styles */
@@ -181,14 +163,74 @@
 
 /** Customize draft-js */
 .draft-blockquote {
-  @apply my-[8px] mx-0 border-l-2 border-solid border-l-slate-500 px-[8px] py-0 italic;
+  @apply mx-0 my-[8px] border-l-2 border-solid border-l-slate-500 px-[8px] py-0 italic;
 }
 
 .draft-codeblock {
-  @apply m-0 rounded-[1px] border-l-2 border-solid border-l-slate-500 bg-slate-200 py-0 px-[8px] font-mono font-[13px] leading-normal;
+  @apply m-0 rounded-[1px] border-l-2 border-solid border-l-slate-500 bg-slate-200 px-[8px] py-0 font-mono font-[13px] leading-normal;
 }
 
 .link-style a {
   @apply text-sky-500;
   text-decoration: underline;
 }
+
+/** Customize TipTap */
+.ProseMirror {
+  min-height: 40px;
+  line-height: 1.25;
+}
+
+.ProseMirror :is(ul, ol) {
+  list-style-position: outside;
+  padding-inline-start: 16px;
+  margin-block-start: 4px;
+  margin-block-end: 4px;
+}
+
+.ProseMirror :is(ol) {
+  margin-inline-start: 2px;
+}
+
+.ProseMirror p.is-editor-empty:first-child::before {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.ProseMirror [data-type='mention'] {
+  background-color: theme('colors.gold.100');
+  border-radius: 2;
+  font-weight: 600;
+}
+
+.ProseMirror [data-type='taskTag'] {
+  font-weight: 600;
+}
+
+.ProseMirror-focused:focus {
+  outline: none;
+}
+
+.ProseMirror a {
+  text-decoration: underline;
+  color: theme('colors.slate.700');
+  :hover {
+    cursor: pointer;
+  }
+}
+
+.ProseMirror p {
+  margin-block-start: 4px;
+  margin-block-end: 4px;
+}
+
+hr.ProseMirror-selectednode {
+  border-top: 1px solid #68cef8;
+}
+
+.ProseMirror hr {
+  border-top: 1px solid theme('colors.slate.400');
+}
diff --git a/packages/client/ui/Button/Button.tsx b/packages/client/ui/Button/Button.tsx
index 82f4b98cf20..d6b51d9170b 100644
--- a/packages/client/ui/Button/Button.tsx
+++ b/packages/client/ui/Button/Button.tsx
@@ -1,7 +1,6 @@
 import {Slot} from '@radix-ui/react-slot'
-import clsx from 'clsx'
 import * as React from 'react'
-import {twMerge} from 'tailwind-merge'
+import {cn} from '../cn'
 
 type Variant = 'primary' | 'secondary' | 'destructive' | 'ghost' | 'link' | 'outline' | 'flat'
 type Size = 'sm' | 'md' | 'lg' | 'default'
@@ -47,14 +46,12 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Comp = asChild ? Slot : 'button'
     return (
       <Comp
-        className={twMerge(
-          clsx(
-            BASE_STYLES,
-            VARIANT_STYLES[variant],
-            size ? SIZE_STYLES[size] : null,
-            SHAPE_STYLES[shape],
-            className
-          )
+        className={cn(
+          BASE_STYLES,
+          VARIANT_STYLES[variant],
+          size ? SIZE_STYLES[size] : null,
+          SHAPE_STYLES[shape],
+          className
         )}
         ref={ref}
         {...props}
diff --git a/packages/client/ui/Tooltip/TooltipContent.tsx b/packages/client/ui/Tooltip/TooltipContent.tsx
index f107a15e904..f0084d73001 100644
--- a/packages/client/ui/Tooltip/TooltipContent.tsx
+++ b/packages/client/ui/Tooltip/TooltipContent.tsx
@@ -1,5 +1,5 @@
 import {Content, Portal} from '@radix-ui/react-tooltip'
-import {twMerge} from 'tailwind-merge'
+import {cn} from '../cn'
 import {forwardRadix} from '../forwardRadix'
 
 export const TooltipContent = forwardRadix<typeof Content>(
@@ -10,7 +10,7 @@ export const TooltipContent = forwardRadix<typeof Content>(
         side='top'
         align='center'
         sideOffset={2}
-        className={twMerge(
+        className={cn(
           'pointer-events-none z-20 animate-scaleIn overflow-hidden whitespace-nowrap rounded-sm bg-slate-700 px-2 py-1 text-center text-xs font-bold text-white',
           className
         )}
diff --git a/packages/client/ui/cn.ts b/packages/client/ui/cn.ts
new file mode 100644
index 00000000000..fb6a461af04
--- /dev/null
+++ b/packages/client/ui/cn.ts
@@ -0,0 +1,4 @@
+import {type ClassValue, clsx} from 'clsx'
+import {twMerge} from 'tailwind-merge'
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
diff --git a/packages/client/utils/tiptapEmojiConfig.ts b/packages/client/utils/tiptapEmojiConfig.ts
new file mode 100644
index 00000000000..7d7923c48ac
--- /dev/null
+++ b/packages/client/utils/tiptapEmojiConfig.ts
@@ -0,0 +1,74 @@
+import {MentionNodeAttrs, MentionOptions} from '@tiptap/extension-mention'
+import {ReactRenderer} from '@tiptap/react'
+import tippy, {Instance, Props} from 'tippy.js'
+import EmojiDropdown from '../components/EmojiDropdown'
+
+import data, {Emoji} from '@emoji-mart/data'
+import {PluginKey} from '@tiptap/pm/state'
+import {init, SearchIndex} from 'emoji-mart'
+
+init({data})
+
+export const tiptapEmojiConfig: Partial<MentionOptions<any, MentionNodeAttrs>> = {
+  suggestion: {
+    pluginKey: new PluginKey('emoji'),
+    char: ':',
+    items: async ({query}) => {
+      const emojis: Emoji[] = await SearchIndex.search(query || '')
+      if (!emojis) return []
+      return emojis.map((emoji) => ({
+        id: emoji.id,
+        native: emoji.skins[0]!.native
+      }))
+    },
+
+    // Using radix-ui isn't possible here because radix-ui will steal focus from the editor when it opens the portal
+    // radix-ui also requires a trigger/anchor, which is why we use tippy
+    render: () => {
+      type GetReferenceClientRect = () => DOMRect
+      let component: ReactRenderer<any, any> | undefined
+      let popup: Instance<Props>
+
+      return {
+        onStart: (props) => {
+          component = new ReactRenderer(EmojiDropdown, {
+            props,
+            editor: props.editor
+          })
+          if (!props.clientRect) return
+          popup = tippy(document.body, {
+            animation: false,
+            getReferenceClientRect: props.clientRect as GetReferenceClientRect,
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'bottom-start'
+          })
+        },
+
+        onUpdate(props) {
+          component?.updateProps(props)
+          if (!props.clientRect) return
+          popup?.setProps({
+            getReferenceClientRect: props.clientRect as GetReferenceClientRect
+          })
+        },
+
+        onKeyDown(props) {
+          if (props.event.key === 'Escape') {
+            popup?.hide()
+            return true
+          }
+          return component?.ref?.onKeyDown(props)
+        },
+
+        onExit() {
+          popup?.destroy()
+          component?.destroy()
+        }
+      }
+    }
+  }
+}
diff --git a/packages/client/utils/tiptapMentionConfig.ts b/packages/client/utils/tiptapMentionConfig.ts
new file mode 100644
index 00000000000..bb807477792
--- /dev/null
+++ b/packages/client/utils/tiptapMentionConfig.ts
@@ -0,0 +1,109 @@
+import {MentionNodeAttrs, MentionOptions} from '@tiptap/extension-mention'
+import {ReactRenderer} from '@tiptap/react'
+import graphql from 'babel-plugin-relay/macro'
+import stringScore from 'string-score'
+import tippy, {Instance, Props} from 'tippy.js'
+import {tiptapMentionConfigQuery} from '../__generated__/tiptapMentionConfigQuery.graphql'
+import Atmosphere from '../Atmosphere'
+import MentionDropdown from '../components/MentionDropdown'
+
+const queryNode = graphql`
+  query tiptapMentionConfigQuery($teamId: ID!) {
+    viewer {
+      team(teamId: $teamId) {
+        teamMembers {
+          id
+          picture
+          preferredName
+        }
+      }
+    }
+  }
+`
+
+export const tiptapMentionConfig = (
+  atmosphere: Atmosphere,
+  teamId: string
+): Partial<MentionOptions<any, MentionNodeAttrs>> => ({
+  // renderText does not fire, bug in TipTap? Fallback to using more verbose renderHTML
+  renderHTML({options, node}) {
+    return ['span', options.HTMLAttributes, `${node.attrs.label ?? node.attrs.id}`]
+  },
+  suggestion: {
+    // some users have first & last name
+    allowSpaces: true,
+    decorationClass: 'mention',
+    items: async ({query}) => {
+      const res = await atmosphere.fetchQuery<tiptapMentionConfigQuery>(queryNode, {teamId})
+      if (!res) return []
+      const {viewer} = res
+      const {team} = viewer
+      const {teamMembers} = team!
+      return (
+        teamMembers
+          .map((teamMember) => {
+            const score = query ? stringScore(teamMember.preferredName, query) : 1
+            return {
+              teamMember,
+              score
+            }
+          })
+          .sort((a, b) => (a.score < b.score ? 1 : -1))
+          .slice(0, 6)
+          // If you type "Foo" and the options are "Foo" and "Giraffe", remove "Giraffe"
+          .filter((obj, _idx, arr) => obj.score > 0 && arr[0]!.score - obj.score < 0.3)
+          .map((s) => ({...s.teamMember}))
+      )
+    },
+
+    // Using radix-ui isn't possible here because radix-ui will steal focus from the editor when it opens the portal
+    // radix-ui also requires a trigger/anchor, which is why we use tippy
+    render: () => {
+      type GetReferenceClientRect = () => DOMRect
+      let component: ReactRenderer<any, any> | undefined
+      let popup: Instance<Props>
+
+      return {
+        onStart: (props) => {
+          component = new ReactRenderer(MentionDropdown, {
+            props,
+            editor: props.editor
+          })
+          if (!props.clientRect) return
+
+          popup = tippy(document.body, {
+            animation: false,
+            getReferenceClientRect: props.clientRect as GetReferenceClientRect,
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'bottom-start'
+          })
+        },
+
+        onUpdate(props) {
+          component?.updateProps(props)
+          if (!props.clientRect) return
+          popup?.setProps({
+            getReferenceClientRect: props.clientRect as GetReferenceClientRect
+          })
+        },
+
+        onKeyDown(props) {
+          if (props.event.key === 'Escape') {
+            popup?.hide()
+            return true
+          }
+          return component?.ref?.onKeyDown(props)
+        },
+
+        onExit() {
+          popup?.destroy()
+          component?.destroy()
+        }
+      }
+    }
+  }
+})
diff --git a/packages/client/utils/tiptapTagConfig.ts b/packages/client/utils/tiptapTagConfig.ts
new file mode 100644
index 00000000000..1dfba4d572d
--- /dev/null
+++ b/packages/client/utils/tiptapTagConfig.ts
@@ -0,0 +1,81 @@
+import {MentionNodeAttrs, MentionOptions} from '@tiptap/extension-mention'
+import {PluginKey} from '@tiptap/pm/state'
+import {ReactRenderer} from '@tiptap/react'
+import tippy, {Instance, Props} from 'tippy.js'
+import {TaskTagDropdown} from '../components/TaskTagDropdown'
+
+const tags = [
+  {
+    id: 'private',
+    label: 'Only you will be able to see this task'
+  },
+  {
+    id: 'archived',
+    label: 'Hidden from your main board'
+  }
+]
+
+export const tiptapTagConfig: Partial<MentionOptions<any, MentionNodeAttrs>> = {
+  // renderText does not fire, bug in TipTap? Fallback to using more verbose renderHTML
+  renderHTML({options, node}) {
+    return ['span', options.HTMLAttributes, `#${node.attrs.id}`]
+  },
+  deleteTriggerWithBackspace: true,
+  suggestion: {
+    pluginKey: new PluginKey('tag'),
+    char: '#',
+    items: async ({query}) => {
+      if (!query) return tags
+      return tags.filter((tag) => tag.id.startsWith(query.toLowerCase()))
+    },
+
+    // Using radix-ui isn't possible here because radix-ui will steal focus from the editor when it opens the portal
+    // radix-ui also requires a trigger/anchor, which is why we use tippy
+    render: () => {
+      type GetReferenceClientRect = () => DOMRect
+      let component: ReactRenderer<any, any> | undefined
+      let popup: Instance<Props>
+
+      return {
+        onStart: (props) => {
+          component = new ReactRenderer(TaskTagDropdown, {
+            props,
+            editor: props.editor
+          })
+          if (!props.clientRect) return
+          popup = tippy(document.body, {
+            animation: false,
+            getReferenceClientRect: props.clientRect as GetReferenceClientRect,
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'bottom-start'
+          })
+        },
+
+        onUpdate(props) {
+          component?.updateProps(props)
+          if (!props.clientRect) return
+          popup?.setProps({
+            getReferenceClientRect: props.clientRect as GetReferenceClientRect
+          })
+        },
+
+        onKeyDown(props) {
+          if (props.event.key === 'Escape') {
+            popup?.hide()
+            return true
+          }
+          return component?.ref?.onKeyDown(props)
+        },
+
+        onExit() {
+          popup?.destroy()
+          component?.destroy()
+        }
+      }
+    }
+  }
+}
diff --git a/packages/server/graphql/mutations/createTask.ts b/packages/server/graphql/mutations/createTask.ts
index d0d3f485000..0299b2075ea 100644
--- a/packages/server/graphql/mutations/createTask.ts
+++ b/packages/server/graphql/mutations/createTask.ts
@@ -3,11 +3,11 @@ import {Insertable} from 'kysely'
 import {SubscriptionChannel} from 'parabol-client/types/constEnums'
 import getTypeFromEntityMap from 'parabol-client/utils/draftjs/getTypeFromEntityMap'
 import toTeamMemberId from 'parabol-client/utils/relay/toTeamMemberId'
-import normalizeRawDraftJS from 'parabol-client/validation/normalizeRawDraftJS'
 import MeetingMemberId from '../../../client/shared/gqlIds/MeetingMemberId'
 import dndNoise from '../../../client/utils/dndNoise'
 import extractTextFromDraftString from '../../../client/utils/draftjs/extractTextFromDraftString'
 import getTagsFromEntityMap from '../../../client/utils/draftjs/getTagsFromEntityMap'
+import normalizeRawDraftJS from '../../../client/validation/normalizeRawDraftJS'
 import generateUID from '../../generateUID'
 import updatePrevUsedRepoIntegrationsCache from '../../integrations/updatePrevUsedRepoIntegrationsCache'
 import getKysely from '../../postgres/getKysely'
@@ -188,11 +188,14 @@ export default {
     }
 
     const content = normalizeRawDraftJS(newTask.content)
+    // const content = convertToTipTap(newTask.content)
+    // const plaintextContent = generateText(content, serverTipTapExtensions)
 
     // see if the task already exists
     const integrationRes = await createTaskInService(
       newTask.integration,
-      content,
+      // TODO: FIX ME
+      content as any,
       viewerId,
       teamId,
       context,
@@ -223,12 +226,14 @@ export default {
       threadSortOrder,
       threadParentId,
       userId: userId || null,
-      tags: getTagsFromEntityMap<TaskTag>(JSON.parse(content).entityMap)
+      // FIXME
+      tags: getTagsFromEntityMap<TaskTag>(JSON.parse(content as any).entityMap)
     }
     const {id: taskId} = task
     const teamMembers = await dataLoader.get('teamMembersByTeamId').load(teamId)
     await pg.insertInto('Task').values(task).execute()
-    handleAddTaskNotifications(teamMembers, task, viewerId, teamId, {
+    // FIXME
+    handleAddTaskNotifications(teamMembers, task as any, viewerId, teamId, {
       operationId,
       mutatorId
     }).catch()
diff --git a/packages/server/graphql/public/mutations/upsertTeamPromptResponse.ts b/packages/server/graphql/public/mutations/upsertTeamPromptResponse.ts
index ec07653dffd..cd5d32de2a0 100644
--- a/packages/server/graphql/public/mutations/upsertTeamPromptResponse.ts
+++ b/packages/server/graphql/public/mutations/upsertTeamPromptResponse.ts
@@ -1,5 +1,4 @@
 import {generateText, JSONContent} from '@tiptap/core'
-import {createEditorExtensions} from 'parabol-client/components/promptResponse/tiptapConfig'
 import TeamPromptResponseId from 'parabol-client/shared/gqlIds/TeamPromptResponseId'
 import {SubscriptionChannel} from 'parabol-client/types/constEnums'
 import {upsertTeamPromptResponse as upsertTeamPromptResponseQuery} from '../../../postgres/queries/upsertTeamPromptResponses'
@@ -7,12 +6,12 @@ import {TeamPromptResponse} from '../../../postgres/types'
 import {analytics} from '../../../utils/analytics/analytics'
 import {getUserId, isTeamMember} from '../../../utils/authorization'
 import publish from '../../../utils/publish'
+import {serverTipTapExtensions} from '../../../utils/serverTipTapExtensions'
 import standardError from '../../../utils/standardError'
 import {IntegrationNotifier} from '../../mutations/helpers/notifications/IntegrationNotifier'
 import {MutationResolvers} from '../resolverTypes'
 import publishNotification from './helpers/publishNotification'
 import createTeamPromptMentionNotifications from './helpers/publishTeamPromptMentions'
-
 const upsertTeamPromptResponse: MutationResolvers['upsertTeamPromptResponse'] = async (
   _source,
   {teamPromptResponseId: inputTeamPromptResponseId, meetingId, content},
@@ -63,7 +62,7 @@ const upsertTeamPromptResponse: MutationResolvers['upsertTeamPromptResponse'] =
 
   let plaintextContent: string
   try {
-    plaintextContent = generateText(contentJSON, createEditorExtensions())
+    plaintextContent = generateText(contentJSON, serverTipTapExtensions)
   } catch (e) {
     return standardError(new Error('Invalid editor format'), {userId: viewerId})
   }
diff --git a/packages/server/utils/convertToTipTap.ts b/packages/server/utils/convertToTipTap.ts
new file mode 100644
index 00000000000..ef106a01d5b
--- /dev/null
+++ b/packages/server/utils/convertToTipTap.ts
@@ -0,0 +1,34 @@
+import {JSONContent} from '@tiptap/core'
+import {Bold} from '@tiptap/extension-bold'
+import {Document} from '@tiptap/extension-document'
+import {Paragraph} from '@tiptap/extension-paragraph'
+import {Text} from '@tiptap/extension-text'
+import {generateJSON} from '@tiptap/html'
+import {convertFromRaw, RawDraftContentState} from 'draft-js'
+import {stateToHTML} from 'draft-js-export-html'
+
+const isDraftJSContent = (
+  content: JSONContent | RawDraftContentState
+): content is RawDraftContentState => {
+  return 'blocks' in content
+}
+
+export const convertToTipTap = (contentStr: string | null | undefined) => {
+  // TODO: add extensions to handle tags and mentions
+  const tipTapExtensions = [Document, Paragraph, Text, Bold]
+  if (!contentStr) {
+    // return an empty str
+    return generateJSON(`<p></p>`, tipTapExtensions)
+  }
+  let parsedContent: JSONContent | RawDraftContentState
+  try {
+    parsedContent = JSON.parse(contentStr)
+  } catch (e) {
+    return generateJSON(`<p></p>`, tipTapExtensions)
+  }
+  if (!isDraftJSContent(parsedContent)) return parsedContent
+  const contentState = convertFromRaw(parsedContent)
+  // TODO: blockRenderers! convert entity map to match what tiptap expects
+  const html = stateToHTML(contentState)
+  return generateJSON(html, tipTapExtensions) as JSONContent
+}
diff --git a/packages/server/utils/serverTipTapExtensions.ts b/packages/server/utils/serverTipTapExtensions.ts
new file mode 100644
index 00000000000..8b57092a503
--- /dev/null
+++ b/packages/server/utils/serverTipTapExtensions.ts
@@ -0,0 +1,24 @@
+import {mergeAttributes} from '@tiptap/core'
+import BaseLink from '@tiptap/extension-link'
+import Mention from '@tiptap/extension-mention'
+import StarterKit from '@tiptap/starter-kit'
+import {LoomExtension} from '../../client/components/promptResponse/loomExtension'
+
+export const serverTipTapExtensions = [
+  StarterKit,
+  LoomExtension,
+  Mention.configure({
+    renderText({node}) {
+      return node.attrs.label
+    }
+  }),
+  BaseLink.extend({
+    parseHTML() {
+      return [{tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])'}]
+    },
+
+    renderHTML({HTMLAttributes}) {
+      return ['a', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {class: 'link'}), 0]
+    }
+  })
+]
diff --git a/yarn.lock b/yarn.lock
index ed77b8e5902..6ee701b2afa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7608,6 +7608,13 @@
     "@types/react" "*"
     immutable "~3.7.4"
 
+"@types/emoji-mart@^3.0.14":
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/@types/emoji-mart/-/emoji-mart-3.0.14.tgz#219b8badbf1899cdb9790b5c2fafebea899ff5b3"
+  integrity sha512-/vMkVnet466bK37ugf2jry9ldCZklFPXYMB2m+qNo3vkP2I7L0cvtNFPKAjfcHgPg9Z8pbYqVqZn7AgsC0qf+g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/eslint-scope@^3.7.7":
   version "3.7.7"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"