feat: Added tooltips to editor controls

app/components/Editor/Editor.js

@@ -7,6 +7,7 @@ import { withTheme } from 'styled-components';
 import RichMarkdownEditor from 'rich-markdown-editor';
 import { uploadFile } from 'utils/uploadFile';
 import isInternalUrl from 'utils/isInternalUrl';
+import Tooltip from 'components/Tooltip';
 import Embed from './Embed';
 import embeds from '../../embeds';
 
@@ -84,12 +85,15 @@ class Editor extends React.Component<Props> {
         onClickLink={this.onClickLink}
         onShowToast={this.onShowToast}
         getLinkComponent={this.getLinkComponent}
+        tooltip={EditorTooltip}
         {...this.props}
       />
     );
   }
 }
 
+const EditorTooltip = props => <Tooltip offset={8} {...props} />;
+
 export default withTheme(
   // $FlowIssue - https://github.com/facebook/flow/issues/6103
   React.forwardRef((props, ref) => <Editor {...props} forwardedRef={ref} />)

app/components/Tooltip.js

@@ -18,7 +18,7 @@ const GlobalStyles = createGlobalStyle`
     left:50%;
     -webkit-transform:translateX(-50%);
     transform:translateX(-50%);
-    margin:0 0 8px 0;
+    margin:0 0 ${props => props.offset + 8}px 0;
     text-align:left
   }
   .tooltip-container.tooltip-container-visible{
@@ -67,7 +67,7 @@ const GlobalStyles = createGlobalStyle`
     box-sizing:content-box;
     z-index:-1;
     position:absolute;
-    bottom:-4px;
+    bottom: -4px;
     left:50%;
     -webkit-transform:translateX(-50%) rotateZ(45deg);
     transform:translateX(-50%) rotateZ(45deg);
@@ -90,7 +90,7 @@ const GlobalStyles = createGlobalStyle`
   }
   .tooltip.tooltip-bottom .tooltip-container .tooltip-content:before{
     bottom:auto;
-    top:-4px;
+    top: -4px;
     border-top:1px solid ${props => props.theme.tooltipBackground};
     border-right:none;
     border-bottom:none;
@@ -98,7 +98,7 @@ const GlobalStyles = createGlobalStyle`
   }
   .tooltip.tooltip-bottom .tooltip-container .tooltip-content:after{
     bottom:auto;
-    top:-4px
+    top: -4px;
   }
   .tooltip.tooltip-right .tooltip-container{
     top:50%;
@@ -110,7 +110,7 @@ const GlobalStyles = createGlobalStyle`
   }
   .tooltip.tooltip-right .tooltip-container .tooltip-content:before{
     bottom:auto;
-    left:-4px;
+    left: -4px;
     top:50%;
     -webkit-transform:translatey(-50%) rotateZ(45deg);
     transform:translatey(-50%) rotateZ(45deg);
@@ -121,7 +121,7 @@ const GlobalStyles = createGlobalStyle`
   }
   .tooltip.tooltip-right .tooltip-container .tooltip-content:after{
     bottom:auto;
-    left:-4px;
+    left: -4px;
     top:50%;
     -webkit-transform:translatey(-50%) rotateZ(45deg);
     transform:translatey(-50%) rotateZ(45deg)
@@ -137,7 +137,7 @@ const GlobalStyles = createGlobalStyle`
   }
   .tooltip.tooltip-left .tooltip-container .tooltip-content:before{
     bottom:auto;
-    right:-4px;
+    right: -4px;
     left:auto;
     top:50%;
     -webkit-transform:translatey(-50%) rotateZ(45deg);
@@ -194,11 +194,18 @@ const GlobalStyles = createGlobalStyle`
   }
 `;
 
-const Tooltip = function(props: *) {
+type Props = {
+  tooltip: React.Node,
+  placement?: 'top' | 'bottom' | 'left' | 'right',
+  children: React.Node,
+  offset?: number,
+};
+
+const Tooltip = function({ offset = 0, ...rest }: Props) {
   return (
     <React.Fragment>
-      <GlobalStyles />
-      <TooltipTrigger {...props} />
+      <GlobalStyles offset={offset} />
+      <TooltipTrigger {...rest} />
     </React.Fragment>
   );
 };

package.json

@@ -141,7 +141,7 @@
     "react-router-dom": "^4.3.1",
     "react-waypoint": "^7.3.1",
     "redis": "^2.6.2",
-    "rich-markdown-editor": "^9.6.2",
+    "rich-markdown-editor": "^9.8.1",
     "safestart": "1.1.0",
     "sequelize": "^5.8.12",
     "sequelize-cli": "^5.5.0",

yarn.lock

@@ -7873,9 +7873,9 @@ retry-axios@0.3.2, retry-axios@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/retry-axios/-/retry-axios-0.3.2.tgz#5757c80f585b4cc4c4986aa2ffd47a60c6d35e13"
 
-rich-markdown-editor@^9.6.2:
-  version "9.6.2"
-  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-9.6.2.tgz#46243821fd876386785be3af5065a0e8bbf9a3f3"
+rich-markdown-editor@^9.8.1:
+  version "9.8.1"
+  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-9.8.1.tgz#299e055f8077a11ed82931600e4a66ef5c710d80"
   dependencies:
     "@domoinc/slate-edit-table" "^0.22.2"
     "@tommoor/slate-edit-list" "0.19.0-0"