Fix css style issue due to bootstrap.

packages/editor/src/bootstrap-fixes.css

@@ -0,0 +1,20 @@
+/* 
+    These are patches or hacks to avoid boostrap interfering with Mui styles
+    This file is meant to be removed when removing bootstrap
+*/ 
+/* 
+/* bootstrap modal */
+
+.wise-editor .modal {
+    overflow: hidden;
+}
+
+.modal-backdrop {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0,0,0,0.5);
+    z-index: 1000;
+}

packages/editor/src/components/toolbar/index.tsx

@@ -43,7 +43,7 @@ export default function Toolbar({
 }: ToolbarPropsType): React.ReactElement {
     const intl = useIntl();
     return (
-        <HeaderContainer>
+        <HeaderContainer className="wise-editor">
             <div id="toolbar">
                 <div id="backToList">
                     <img src={BackIconSvg} />

packages/editor/src/global-styled.css

@@ -1,7 +1,8 @@
 /********************************************************************************/
 /* Header & Toolbar Styles */
 /********************************************************************************/
-@import "bootstrap.min.css";
+@import "bootstrap-prefix.min.css";
+@import "bootstrap-fixes.css";
 
 html {
     /* avoid bootstrap overriding font-size and breaking Mui */
@@ -129,7 +130,7 @@ div.shareModalDialog {
     background-color: #efefef;
 }
 
-.popover {
+.wise-editor .popover {
     font-size: 13px;
     max-width: none;
 }

packages/editor/src/index.tsx

@@ -100,7 +100,8 @@ const Editor = ({
                     onAction={onAction}
                 />
             }
-            <div id="mindplot" style={mindplotStyle}></div>
+            <div id="mindplot" style={mindplotStyle} className="wise-editor"></div>
+            <div id="mindplot-tooltips" className="wise-editor"></div>
             <Footer editorMode={options.mode} />
         </IntlProvider >
     );

packages/mindplot/src/components/NoteIcon.ts

@@ -55,7 +55,6 @@ class NoteIcon extends Icon {
     }
     this._tip = new FloatingTip($(me.getImage().peer._native), {
       title: $msg('NOTE'),
-      container: 'body',
       // Content can also be a function of the target element!
       content() {
         return me._buildTooltipContent();

packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js

@@ -59,6 +59,8 @@ class BootstrapDialog extends Options {
       $(this).remove();
     });
     this._native.on('shown.bs.modal', this.onDialogShown);
+
+    this._native.appendTo('#mindplot-tooltips');
   }
 
   _buildFooter() {

packages/mindplot/src/components/widget/FloatingTip.js

@@ -27,7 +27,7 @@ const defaultOptions = {
   title: '',
   content: '',
   delay: 0,
-  container: false,
+  container: '#mindplot-tooltips',
   destroyOnExit: false,
 };
 

packages/mindplot/src/components/widget/LinkIconTooltip.js

@@ -31,7 +31,6 @@ class LinkIconTooltip extends FloatingTip {
       },
       html: true,
       placement: 'bottom',
-      container: 'body',
       title: $msg('LINK'),
       trigger: 'manual',
       template: '<div id="linkPopover" class="popover" onmouseover="jQuery(this).mouseleave(function() {jQuery(this).fadeOut(200); });" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',