diff --git a/services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx b/services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx
index e524cc6c04..d026590fc4 100644
--- a/services/web/frontend/js/features/source-editor/components/paste-html/pasted-content-menu.tsx
+++ b/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' }}
>
-
-
+
+
+
+ >
+ }
+ bs5={
+ <>
+
+
+ >
+ }
+ />
{menuOpen && (
- setMenuOpen(false)}
- animation={false}
+ transition={false}
container={view.scrollDOM}
containerPadding={0}
placement="bottom"
rootClose
- target={toggleButtonRef.current ?? undefined}
+ target={toggleButtonRef?.current}
>
-
-
+
+
)}
>
)
diff --git a/services/web/frontend/js/features/source-editor/extensions/visual/pasted-content.tsx b/services/web/frontend/js/features/source-editor/extensions/visual/pasted-content.tsx
index 061c77d315..754f23e3ec 100644
--- a/services/web/frontend/js/features/source-editor/extensions/visual/pasted-content.tsx
+++ b/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',