fix: do no close popover menu after creating a link (#17977)

PostHog · Oct 26, 2023 · 29fd836 · 29fd836
1 parent 9179e65
commit 29fd836
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/frontend/src/scenes/notebooks/Marks/NotebookMarkLink.tsx b/frontend/src/scenes/notebooks/Marks/NotebookMarkLink.tsx
@@ -59,5 +59,10 @@ export const NotebookMarkLink = Mark.create({
 })
 
 const isPostHogLink = (href: string): boolean => {
-    return new URL(href, window.location.origin).origin === window.location.origin
+    try {
+        const url = new URL(href, window.location.origin)
+        return url.origin === window.location.origin
+    } catch {
+        return false
+    }
 }
diff --git a/frontend/src/scenes/notebooks/Notebook/InlineMenu.tsx b/frontend/src/scenes/notebooks/Notebook/InlineMenu.tsx
@@ -3,10 +3,12 @@ import { Editor, isTextSelection } from '@tiptap/core'
 import { BubbleMenu } from '@tiptap/react'
 import { IconBold, IconDelete, IconItalic, IconLink, IconOpenInNew } from 'lib/lemon-ui/icons'
 import { isURL } from 'lib/utils'
+import { useRef } from 'react'
 import NotebookIconHeading from './NotebookIconHeading'
 
 export const InlineMenu = ({ editor }: { editor: Editor }): JSX.Element => {
     const { href, target } = editor.getAttributes('link')
+    const menuRef = useRef<HTMLDivElement>(null)
 
     const setLink = (href: string): void => {
         editor.commands.setMark('link', { href: href })
@@ -19,25 +21,29 @@ export const InlineMenu = ({ editor }: { editor: Editor }): JSX.Element => {
     return (
         <BubbleMenu
             editor={editor}
-            shouldShow={({ editor, view, state, from, to }) => {
-                const hasEditorFocus = view.hasFocus()
+            shouldShow={({ editor: { isEditable }, view, state, from, to }) => {
+                const isChildOfMenu = menuRef.current?.contains(document.activeElement)
+                const focused = view.hasFocus() || isChildOfMenu
                 const isTextBlock = isTextSelection(state.selection)
 
-                if (!hasEditorFocus || !editor.isEditable || !isTextBlock) {
+                if (!focused || !isEditable || !isTextBlock) {
                     return false
                 }
 
                 return state.doc.textBetween(from, to).length > 0
             }}
         >
-            <div className="NotebookInlineMenu flex bg-white rounded border items-center text-muted-alt p-1 space-x-0.5">
+            <div
+                ref={menuRef}
+                className="NotebookInlineMenu flex bg-white rounded border items-center text-muted-alt p-1 space-x-0.5"
+            >
                 {editor.isActive('link') ? (
                     <>
                         <LemonInput
                             size="small"
                             placeholder="https://posthog.com"
                             onChange={setLink}
-                            value={href}
+                            value={href ?? ''}
                             className="border-0"
                             autoFocus
                         />