fix: Fixed issues with embedded linked items in Super editor (#2918)

* Fixed items being embedded twice when linking them in a Super note
* Fixed Remove button not working for embedded linked items in Super editor

packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx

@@ -56,8 +56,10 @@ const LinkedItemBubble = ({
     setShowUnlinkButton(true)
   }
 
-  const onBlur = () => {
+  const onBlur: React.FocusEventHandler<HTMLButtonElement | HTMLAnchorElement> = (event) => {
-    setShowUnlinkButton(false)
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setShowUnlinkButton(false)
+    }
     setWasClicked(false)
   }
 
@@ -131,7 +133,7 @@ const LinkedItemBubble = ({
           <button
             ref={(el) => (unlinkButtonRef.current = el as HTMLElement)}
             role="button"
-            className="-mr-1 ml-2 inline-flex cursor-pointer border-0 bg-transparent p-0 h-[1.15em] align-middle"
+            className="-mr-1 ml-2 inline-flex h-[1.15em] cursor-pointer border-0 bg-transparent p-0 align-middle"
             onClick={onUnlinkClick}
           >
             <Icon type="close" className="text-neutral hover:text-info" size="small" />

packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemBubblePlugin/Nodes/BubbleComponent.tsx

@@ -30,15 +30,11 @@ export function BubbleComponent({ itemUuid, node }: BubbleComponentProps) {
     [toggleAppPane, linkingController],
   )
 
-  const unlinkPressed = useCallback(
+  const unlinkPressed = useCallback(async () => {
-    async (itemToUnlink: LinkableItem) => {
+    editor.update(() => {
-      linkingController.unlinkItemFromSelectedItem(itemToUnlink).catch(console.error)
+      node.remove()
-      editor.update(() => {
+    })
-        node.remove()
+  }, [linkingController, node, editor])
-      })
-    },
-    [linkingController, node, editor],
-  )
 
   if (!item) {
     return <div>Unable to find item {itemUuid}</div>

packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionItemComponent.tsx

@@ -32,13 +32,7 @@ export function ItemSelectionItemComponent({ index, isSelected, onClick, onMouse
       onClick={onClick}
     >
       {option.item && <LinkedItemMeta item={option.item} searchQuery={searchQuery} />}
-      {!option.item && (
+      {!option.item && <LinkedItemSearchResultsAddTagOption searchQuery={searchQuery} isFocused={isSelected} />}
-        <LinkedItemSearchResultsAddTagOption
-          searchQuery={searchQuery}
-          onClickCallback={onClick}
-          isFocused={isSelected}
-        />
-      )}
     </li>
   )
 }