diff --git a/app/components/Editor/Editor.js b/app/components/Editor/Editor.js index 211cf01f2..dd9a1ad94 100644 --- a/app/components/Editor/Editor.js +++ b/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 { onClickLink={this.onClickLink} onShowToast={this.onShowToast} getLinkComponent={this.getLinkComponent} + tooltip={EditorTooltip} {...this.props} /> ); } } +const EditorTooltip = props => ; + export default withTheme( // $FlowIssue - https://github.com/facebook/flow/issues/6103 React.forwardRef((props, ref) => ) diff --git a/app/components/Tooltip.js b/app/components/Tooltip.js index 14ee7f4df..3dfc9ebd2 100644 --- a/app/components/Tooltip.js +++ b/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 ( - - + + ); }; diff --git a/package.json b/package.json index d130c6155..6bd9eb6d3 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index b2db79d9c..a7979a415 100644 --- a/yarn.lock +++ b/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"