Merge pull request #760 from dadi/fix/link-inserting

Fix position of link input in rich editor
dadi · Jul 25, 2019 · d37eab9 · d37eab9
2 parents e1e4c89 + 85d0f30
commit d37eab9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 26 deletions.
diff --git a/app/components/RichEditor/RichEditor.jsx b/app/components/RichEditor/RichEditor.jsx
@@ -162,6 +162,12 @@ export default class RichEditor extends React.Component {
     }
   }
 
+  componentDidUpdate(_, prevState) {
+    if (this.state.isFullscreen !== prevState.isFullscreen) {
+      this.containerBounds = this.container.getBoundingClientRect()
+    }
+  }
+
   componentWillMount() {
     this.hotKeys.removeListener()
   }
@@ -500,10 +506,7 @@ export default class RichEditor extends React.Component {
     const valueIsLink = this.hasInline(NODE_LINK)
 
     return (
-      <div
-        className={containerStyle.getClasses()}
-        ref={el => (this.container = el)}
-      >
+      <div className={containerStyle.getClasses()}>
         {isSelectingMedia && (
           <Modal
             onRequestClose={this.handleToggleMediaSelect.bind(this, false)}
@@ -605,7 +608,10 @@ export default class RichEditor extends React.Component {
           </div>
         </RichEditorToolbar>
 
-        <div className={editorWrapperStyle.getClasses()}>
+        <div
+          className={editorWrapperStyle.getClasses()}
+          ref={el => (this.container = el)}
+        >
           <Editor
             className={styles.editor}
             onChange={this.handleChange.bind(this)}

diff --git a/app/components/RichEditor/RichEditorLink.css b/app/components/RichEditor/RichEditorLink.css
@@ -32,11 +32,8 @@ input:focus {
 .popup {
   background-color: black;
   border-radius: 4px;
-  bottom: 100%;
   box-shadow: 7px 6px 25px rgba(0, 0, 0, 0.3);
   color: white;
-  left: 0;
-  margin: 6px 0 10px 0;
   padding: 5px 10px;
   position: absolute;
   z-index: 10;

diff --git a/app/components/RichEditor/RichEditorLink.jsx b/app/components/RichEditor/RichEditorLink.jsx
@@ -38,12 +38,13 @@ export default class RichEditorLink extends React.Component {
     this.state = {
       editing: props.href === '',
       href: props.href,
-      offsetRight: 0
+      popupStyle: {}
     }
   }
 
   componentDidMount() {
     document.body.addEventListener('mousedown', this.clickHandler)
+    this.offsetPopup()
   }
 
   componentWillUnmount() {
@@ -80,25 +81,24 @@ export default class RichEditorLink extends React.Component {
     })
   }
 
-  handlePopupRef(element) {
+  offsetPopup() {
     const {bounds} = this.props
+    const {popupElement, container} = this
 
-    if (!bounds || !element || this.hasAdjustedPosition) {
+    if (!bounds || !popupElement || !container) {
       return
     }
 
-    const {right, top} = element.getBoundingClientRect()
-    const offsetRight = right - bounds.right
-    const offsetTop = top - bounds.top - element.clientHeight * 2.5
+    const {right} = popupElement.getBoundingClientRect()
+    const {top: linkTop} = this.container.getBoundingClientRect()
 
-    this.hasAdjustedPosition = true
+    const leftOffset = Math.min(bounds.right - right, 0)
+    const verticalOffset = -popupElement.clientHeight * 1.5
+    const topOrBottom = bounds.top > linkTop + verticalOffset ? 'bottom' : 'top'
 
-    if (offsetRight > 0 || offsetTop < 0) {
-      this.setState({
-        offsetRight: Math.max(offsetRight, 0),
-        offsetTop: Math.abs(Math.min(offsetTop, 0))
-      })
-    }
+    this.setState({
+      popupStyle: {left: leftOffset, [topOrBottom]: verticalOffset}
+    })
   }
 
   handleSave(event) {
@@ -118,10 +118,15 @@ export default class RichEditorLink extends React.Component {
 
   render() {
     const {children} = this.props
-    const {editing, href, offsetRight, offsetTop} = this.state
+    const {editing, href, popupStyle} = this.state
 
     return (
-      <span className={styles.container} ref={el => (this.container = el)}>
+      <span
+        className={styles.container}
+        ref={el => {
+          this.container = el
+        }}
+      >
         <a href={href} onClick={this.handleLinkClick.bind(this)}>
           {children}
         </a>
@@ -130,10 +135,10 @@ export default class RichEditorLink extends React.Component {
           <div
             className={styles.popup}
             contentEditable={false}
-            ref={this.handlePopupRef.bind(this)}
-            style={{
-              transform: `translate3d(-${offsetRight}px, ${offsetTop}px, 0)`
+            ref={el => {
+              this.popupElement = el
             }}
+            style={popupStyle}
           >
             <form className={styles.form} onSubmit={this.handleSave.bind(this)}>
               <input