fix: super improvements (#1995)

* feat(super): autolink selection with cmd + k

* feat: super note importer

* feat: handle html import

* fix: ignore load change event emitted by on change plugin

packages/web/src/javascripts/Components/Popover/Popover.tsx

@@ -27,6 +27,7 @@ const useRegisterPopoverToParent = (popoverId: string) => {
 
 type Props = PopoverProps & {
   open: boolean
+  disableClickOutside?: boolean
 }
 
 const Popover = ({
@@ -39,6 +40,7 @@ const Popover = ({
   overrideZIndex,
   side,
   togglePopover,
+  disableClickOutside,
 }: Props) => {
   const popoverId = useRef(UuidGenerator.GenerateUuid())
 
@@ -96,6 +98,7 @@ const Popover = ({
         overrideZIndex={overrideZIndex}
         side={side}
         togglePopover={togglePopover}
+        disableClickOutside={disableClickOutside}
       >
         {children}
       </PositionedPopoverContent>

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -23,6 +23,7 @@ const PositionedPopoverContent = ({
   overrideZIndex,
   side = 'bottom',
   togglePopover,
+  disableClickOutside,
 }: PopoverContentProps) => {
   const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
   const popoverRect = useAutoElementRect(popoverElement)
@@ -50,6 +51,7 @@ const PositionedPopoverContent = ({
     anchorElement,
     togglePopover,
     childPopovers,
+    disabled: disableClickOutside,
   })
 
   useDisableBodyScrollOnMobile()

packages/web/src/javascripts/Components/Popover/Types.ts

@@ -44,6 +44,7 @@ export type PopoverContentProps = CommonPopoverProps & {
   anchorPoint?: Point
   childPopovers: Set<string>
   id: string
+  disableClickOutside?: boolean
 }
 
 export type PopoverProps =

packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts

@@ -6,6 +6,7 @@ type Options = {
   anchorElement: HTMLElement | null | undefined
   togglePopover: () => void
   childPopovers: Set<string>
+  disabled?: boolean
 }
 
 export const usePopoverCloseOnClickOutside = ({
@@ -13,6 +14,7 @@ export const usePopoverCloseOnClickOutside = ({
   anchorElement,
   togglePopover,
   childPopovers,
+  disabled,
 }: Options) => {
   useEffect(() => {
     const closeIfClickedOutside = (event: MouseEvent) => {
@@ -31,7 +33,9 @@ export const usePopoverCloseOnClickOutside = ({
       const isDescendantOfChallengeModal = !!target.closest('.challenge-modal')
 
       if (!isDescendantOfMenu && !isAnchorElement && !isDescendantOfChildPopover && !isDescendantOfChallengeModal) {
-        togglePopover()
+        if (!disabled) {
+          togglePopover()
+        }
       }
     }
 
@@ -41,5 +45,5 @@ export const usePopoverCloseOnClickOutside = ({
       document.removeEventListener('click', closeIfClickedOutside, { capture: true })
       document.removeEventListener('contextmenu', closeIfClickedOutside, { capture: true })
     }
-  }, [anchorElement, childPopovers, popoverElement, togglePopover])
+  }, [anchorElement, childPopovers, popoverElement, togglePopover, disabled])
 }