Merge pull request #21561 from overleaf/rd-ide-paste

Migrate the editor pasted content popover to Bootstrap 5

GitOrigin-RevId: 2f89d0d6818e219dc5b786b5f21d4d47a91b06c8

services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx

@@ -8,13 +8,16 @@ import {
   useState,
 } from 'react'
 import Icon from '../../../../shared/components/icon'
-import { Overlay, Popover } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { EditorView } from '@codemirror/view'
 import { PastedContent } from '../../extensions/visual/pasted-content'
 import useEventListener from '../../../../shared/hooks/use-event-listener'
 import { FeedbackBadge } from '@/shared/components/feedback-badge'
 import { sendMB } from '@/infrastructure/event-tracking'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import MaterialIcon from '@/shared/components/material-icon'
+import OLOverlay from '@/features/ui/components/ol/ol-overlay'
+import OLPopover from '@/features/ui/components/ol/ol-popover'
 
 const isMac = /Mac/.test(window.navigator?.platform)
 
@@ -96,22 +99,34 @@ export const PastedContentMenu: FC<{
         onClick={() => setMenuOpen(isOpen => !isOpen)}
         style={{ userSelect: 'none' }}
       >
+        <BootstrapVersionSwitcher
+          bs3={
+            <>
               <Icon type="clipboard" fw />
               <Icon type="caret-down" fw />
+            </>
+          }
+          bs5={
+            <>
+              <MaterialIcon type="content_copy" />
+              <MaterialIcon type="expand_more" />
+            </>
+          }
+        />
       </button>
 
       {menuOpen && (
-        <Overlay
+        <OLOverlay
           show
           onHide={() => setMenuOpen(false)}
-          animation={false}
+          transition={false}
           container={view.scrollDOM}
           containerPadding={0}
           placement="bottom"
           rootClose
-          target={toggleButtonRef.current ?? undefined}
+          target={toggleButtonRef?.current}
         >
-          <Popover
+          <OLPopover
             id="popover-pasted-content-menu"
             className="ol-cm-pasted-content-menu-popover"
           >
@@ -183,8 +198,8 @@ export const PastedContentMenu: FC<{
                 </span>
               </MenuItem>
             </div>
-          </Popover>
+          </OLPopover>
-        </Overlay>
+        </OLOverlay>
       )}
     </>
   )

services/web/frontend/js/features/source-editor/extensions/visual/pasted-content.tsx

@@ -49,17 +49,29 @@ const pastedContentTheme = EditorView.baseTheme({
     background: 'none',
     borderRadius: '8px',
     border: '1px solid rgb(125, 125, 125)',
+    color: 'inherit',
     margin: '0 4px',
     opacity: '0.7',
     '&:hover': {
       opacity: '1',
     },
+    '& .material-symbols': {
+      verticalAlign: 'text-bottom',
+    },
   },
   '.ol-cm-pasted-content-menu-popover': {
+    backgroundColor: '#fff',
     maxWidth: 'unset',
     '& .popover-content': {
       padding: 0,
     },
+    '& .popover-body': {
+      color: 'inherit',
+      padding: 0,
+    },
+    '& .popover-arrow::after': {
+      borderBottomColor: '#fff',
+    },
   },
   '&dark .ol-cm-pasted-content-menu-popover': {
     background: 'rgba(0, 0, 0)',
@@ -72,6 +84,7 @@ const pastedContentTheme = EditorView.baseTheme({
     fontFamily: '"Lato", sans-serif',
   },
   '.ol-cm-pasted-content-menu-item': {
+    color: 'inherit',
     border: 'none',
     background: 'none',
     padding: '8px 16px',