Merge pull request #3029 from appirio-tech/feature/draftjs-link-editor

New DraftJs Link Editor functionality…

Author: vikasrohit

package-lock.json

@@ -87,7 +87,6 @@
     "draft-js": "^0.10.1",
     "draft-js-drag-n-drop-plugin": "^2.0.0-rc2",
     "draft-js-image-plugin": "^2.0.0-rc2",
-    "draft-js-link-plugin": "^1.2.2",
     "draft-js-mention-plugin": "^2.0.0-rc2",
     "draft-js-plugins-editor": "^2.0.0-rc2",
     "draft-js-utils": "^0.1.7",
@@ -125,6 +124,7 @@
     "react-infinite-scroller": "^1.1.1",
     "react-layout-pane": "^0.1.16",
     "react-modal": "^1.9.7",
+    "react-popper": "^1.3.3",
     "react-redux": "^4.4.5",
     "react-responsive": "^4.1.0",
     "react-router-dom": "^4.2.2",

package.json

@@ -1,10 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import {EditorState, RichUtils, SelectionState} from 'draft-js'
+import {EditorState, RichUtils} from 'draft-js'
 import addImage from 'draft-js-image-plugin/lib/modifiers/addImage'
 import linkifyIt from 'linkify-it'
 import tlds from 'tlds'
-import {hasEntity, getCurrentEntity} from '../../helpers/draftJSHelper'
 import EditorIcons from './EditorIcons'
 import Alert from 'react-s-alert'
 
@@ -175,31 +174,6 @@ class LinkModal extends React.Component {
   }
 }
 
-class AddLinkModal extends React.Component {
-  render () {
-    const editorState = this.props.getEditorState()
-    const entitySelected = hasEntity('LINK', editorState)
-    const entity = getCurrentEntity(editorState)
-    let entityData = null
-
-    if (entitySelected && entity) {
-      entityData = entity.getData()
-    }
-    const url = entityData ? entityData.url : null
-
-    return (
-      <div className={'addLinkModal'}>
-        <LinkModal
-          url={url}
-          showUnlink={entitySelected}
-          type={'LINK'}
-          {...this.props}
-        />
-      </div>
-    )
-  }
-}
-
 class AddImageModal extends React.Component {
   render () {
     return (
@@ -224,51 +198,20 @@ export default class AddLinkButton extends React.Component {
   }
 
   toggleAddLink() {
-    const editorState = this.props.getEditorState()
-    const selection = editorState.getSelection()
-    if (selection.isCollapsed()) {
-      Alert.error('Please select some piece of text .')
-    }
-    if (!selection.getHasFocus()) {
-      return
-    }
-    if (this.props.type === 'link' && selection.isCollapsed()) {
-      const currentEntity = getCurrentEntity(editorState)
-      if (currentEntity && currentEntity.getType() === 'LINK') {
-        return
+    if (this.props.type !== 'link') {
+      const editorState = this.props.getEditorState()
+      const selection = editorState.getSelection()
+      if (selection.isCollapsed()) {
+        Alert.error('Please select some piece of text .')
       }
-
-      const key = selection.getAnchorKey()
-      const block = editorState
-        .getCurrentContent()
-        .getBlockForKey(key)
-      const text = block.getText()
-      const match = linkify.match(text)
-
-      if (!match || !match.length) {
+      if (!selection.getHasFocus()) {
         return
       }
 
-      const contentState = editorState.getCurrentContent()
-      const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {url: match[0].url})
-      const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
-
-      const selectionState = SelectionState.createEmpty(key)
-      const updatedSelection = selectionState.merge({
-        anchorOffset: 0,
-        focusOffset: block.getLength()
-      })
-
-      const newState = RichUtils.toggleLink(
-        editorState,
-        updatedSelection,
-        entityKey
-      )
-      this.props.setEditorState(newState)
-      return
+      this.show()
+    } else {
+      this.props.onEditLink()
     }
-
-    this.show()
   }
 
   show() {
@@ -296,15 +239,6 @@ export default class AddLinkButton extends React.Component {
             EditorIcons.render(type, active || modalVisible)
           }
         </button>
-        {
-          modalVisible && type === 'link' &&
-          <AddLinkModal
-            getEditorState={getEditorState}
-            setEditorState={setEditorState}
-            theme={theme}
-            closeModal={this.hide}
-          />
-        }
         {
           modalVisible && type === 'image' &&
           <AddImageModal

src/components/RichTextArea/AddLinkButton.jsx

@@ -0,0 +1,99 @@
+@import "~tc-ui/src/styles/tc-includes";
+
+.wrapper {
+  font-size: 14px;
+  background-color: $tc-gray-0;
+  padding: $base-unit * 3;
+  border-radius: $base-unit;
+  box-shadow: 1px 1px 18px 1px rgba($tc-gray-50, 0.34);
+  z-index: 4;
+}
+
+.editForm {
+  width: 360px;
+}
+
+.actionBtnLink,
+.link:link,
+.link:active,
+.link:visited {
+  color: $tc-dark-blue-110;
+  text-decoration: none;
+  cursor: pointer;
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.formControlContainer {
+  position: relative;
+  margin-top: 15px;
+  margin-bottom: 18px;
+}
+
+.formControlLabel {
+  position: absolute;
+  background-color: $tc-gray-0;
+  color: $tc-gray-70;
+  font-size: 12px;
+  left: 12px;
+  top: 0;
+  transform: translateY(-50%);
+}
+
+.formControl {
+  border-color: $tc-gray-10;
+
+  &:focus {
+    border-color: $tc-light-blue-110;
+  }
+}
+
+.applyButtonWrapper {
+  text-align: right;
+}
+
+.popperArrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+}
+
+.wrapper[data-placement^="top"],
+.wrapper[data-placement^="bottom"] {
+  .popperArrow {
+    border-width: 5px;
+    left: calc(50% - 5px);
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+.wrapper[data-placement^="top"] {
+  margin-bottom: 5px;
+
+  .popperArrow {
+    bottom: -5px;
+    border-bottom-width: 0;
+    border-color: $tc-gray-0 transparent transparent transparent;
+  }
+}
+
+.wrapper[data-placement^="bottom"] {
+  margin-top: 5px;
+
+  .popperArrow {
+    top: -5px;
+    border-top-width: 0;
+    border-color: transparent transparent $tc-gray-0 transparent;
+  }
+}
+
+.wrapper[data-placement^="top"],
+.wrapper[data-placement^="bottom"] {
+  .hidePopperArrow {
+    border-color: transparent;
+  }
+}