feat(Mattermost Plugin): TipTap link menu

ParabolInc · Feb 12, 2025 · 05f749b · 05f749b
1 parent 23f4656
commit 05f749b
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 54 deletions.
diff --git a/packages/client/components/promptResponse/StandardBubbleMenu.tsx b/packages/client/components/promptResponse/StandardBubbleMenu.tsx
@@ -18,7 +18,11 @@ export const StandardBubbleMenu = (props: Props) => {
   }
 
   return (
-    <BubbleMenu editor={editor} tippyOptions={{duration: 100}} shouldShow={shouldShowBubbleMenu}>
+    <BubbleMenu
+      editor={editor}
+      tippyOptions={{duration: 100, role: 'dialog'}}
+      shouldShow={shouldShowBubbleMenu}
+    >
       <div className='flex items-center rounded-sm border-[1px] border-solid border-slate-600 bg-white p-[3px]'>
         <BubbleMenuButton
           onClick={() => editor.chain().focus().toggleBold().run()}

diff --git a/packages/client/components/promptResponse/TipTapLinkMenu.tsx b/packages/client/components/promptResponse/TipTapLinkMenu.tsx
@@ -1,6 +1,12 @@
-import * as Popover from '@radix-ui/react-popover'
 import type {EditorEvents} from '@tiptap/core'
-import {Editor, getMarkRange, getMarkType, getTextBetween, useEditorState} from '@tiptap/react'
+import {
+  BubbleMenu,
+  Editor,
+  getMarkRange,
+  getMarkType,
+  getTextBetween,
+  useEditorState
+} from '@tiptap/react'
 import {useCallback, useEffect, useRef, useState} from 'react'
 import {TipTapLinkEditor} from './TipTapLinkEditor'
 import {TipTapLinkPreview} from './TipTapLinkPreview'
@@ -122,55 +128,28 @@ export const TipTapLinkMenu = (props: Props) => {
       .run()
     setLinkState(null)
   }, [editor])
-  const onOpenChange = (willOpen: boolean) => {
-    const isLinkActive = editor.isActive('link')
-    if (willOpen) {
-      setLinkState(isLinkActive ? 'preview' : 'edit')
-    } else {
-      // special case when switching from preview to edit radix-ui triggers onOpenChange(false)
-      if (!(oldLinkStateRef.current === 'preview' && linkState === 'edit')) {
-        setLinkState(null)
-      }
-      oldLinkStateRef.current = null
-    }
-  }
-  const transformRef = useRef<undefined | string>(undefined)
-  const getTransform = () => {
-    const coords = editor.view.coordsAtPos(editor.state.selection.from)
-    const {left, top} = coords
-    if (left !== 0 && top !== 0) {
-      transformRef.current = `translate(${coords.left}px,${coords.top + 20}px)`
-    }
-    return transformRef.current
-  }
+
   if (!linkState) return null
   return (
-    <Popover.Root open onOpenChange={onOpenChange}>
-      <Popover.Trigger asChild />
-      <Popover.Portal>
-        <Popover.Content
-          asChild
-          onOpenAutoFocus={(e) => {
-            // necessary for link preview to prevent focusing the first button
-            e.preventDefault()
-          }}
-        >
-          <div className='absolute top-0 left-0 z-10' style={{transform: getTransform()}}>
-            {linkState === 'edit' && (
-              <TipTapLinkEditor
-                initialUrl={link}
-                initialText={text}
-                onSetLink={onSetLink}
-                useLinkEditor={useLinkEditor}
-              />
-            )}
-            {linkState === 'preview' && (
-              <TipTapLinkPreview url={link} onClear={onUnsetLink} onEdit={handleEdit} />
-            )}
-          </div>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
+    <BubbleMenu
+      editor={editor}
+      tippyOptions={{duration: 100, role: 'dialog'}}
+      shouldShow={() => true}
+    >
+      <div className='absolute top-0 left-0 z-10'>
+        {linkState === 'edit' && (
+          <TipTapLinkEditor
+            initialUrl={link}
+            initialText={text}
+            onSetLink={onSetLink}
+            useLinkEditor={useLinkEditor}
+          />
+        )}
+        {linkState === 'preview' && (
+          <TipTapLinkPreview url={link} onClear={onUnsetLink} onEdit={handleEdit} />
+        )}
+      </div>
+    </BubbleMenu>
   )
 }
 

diff --git a/packages/mattermost-plugin/hooks/useTipTapTaskEditor.tsx b/packages/mattermost-plugin/hooks/useTipTapTaskEditor.tsx
@@ -1,5 +1,6 @@
 import Mention from '@tiptap/extension-mention'
 import Placeholder from '@tiptap/extension-placeholder'
+import Underline from '@tiptap/extension-underline'
 import {useEditor} from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import {TiptapLinkExtension} from 'parabol-client/components/promptResponse/TiptapLinkExtension'
@@ -13,6 +14,7 @@ export const useTipTapTaskEditor = (content: string) => {
     content: contentJSON,
     extensions: [
       StarterKit,
+      Underline,
       Placeholder.configure({
         showOnlyWhenEditable: false,
         placeholder: 'Describe what “Done” looks like'

diff --git a/packages/mattermost-plugin/index.css b/packages/mattermost-plugin/index.css
@@ -3,13 +3,26 @@
 @import "tailwindcss/utilities.css" layer(utilities);
 @source "../client";
 
-.form-control.h-auto {
-  @apply h-auto;
-}
-
+/* make popper work together with bootstrap modals and existing z-indexes */
 div[data-radix-popper-content-wrapper] {
   @apply z-1500;
   > div {
     @apply z-1500;
   }
 }
+
+/* hacks to overwrite some of Mattermosts styles for specific use cases of ours */
+.form-control.h-auto {
+  @apply h-auto;
+}
+.truncate.flex {
+  @apply flex;
+}
+
+.tippy-box[role="dialog"] {
+  @apply bg-white shadow-lg rounded-lg;
+  button {
+    @apply m-1 w-16 items-center px-4 border-none rounded font-semibold outline-none hover:bg-slate-500 data-[highlighted=true]:bg-slate-500 bg-slate-300;
+  }
+}
+