#WOA-2354|Resolved|Improve link dialog

src/RichTextEditor.js

@@ -32,6 +32,7 @@ export default class RichTextEditor extends Component {
     this.state = {
       listeners: [],
       showLinkDialog: false,
+      linkInitialUrl: '',
       linkTitle: '',
       linkUrl: '',
       keyboardHeight: 0
@@ -107,6 +108,17 @@ export default class RichTextEditor extends Component {
             }
           }
           break;
+        case messages.SELECTED_TEXT_RESPONSE:
+          if (this.selectedTextResolve) {
+            this.selectedTextResolve(message.data);
+            this.selectedTextResolve = undefined;
+            this.selectedTextReject = undefined;
+            if (this.pendingSelectedText) {
+              clearTimeout(this.pendingSelectedText);
+              this.pendingSelectedText = undefined;
+            }
+          }
+          break;
         case messages.ZSS_INITIALIZED:
           if (this.props.customCSS) {
             this.setCustomCSS(this.props.customCSS);
@@ -117,6 +129,11 @@ export default class RichTextEditor extends Component {
           this.setContentHTML(this.props.initialContentHTML);
           this.props.editorInitializedCallback && this.props.editorInitializedCallback();
 
+          break;
+        case messages.LINK_TOUCHED:
+          this.prepareInsert();
+          const {title, url} = message.data;
+          this.showLinkDialog(title, url);
           break;
         case messages.LOG:
           console.log('FROM ZSS', message.data);
@@ -180,13 +197,14 @@ export default class RichTextEditor extends Component {
   _hideModal() {
     this.setState({
       showLinkDialog: false,
+      linkInitialUrl: '',
       linkTitle: '',
       linkUrl: ''
     })
   }
 
   _renderModalButtons() {
-    const insertDisabled = this.state.linkTitle.trim().length <= 0 || this.state.linkUrl.trim().length <= 0;
+    const insertUpdateDisabled = this.state.linkTitle.trim().length <= 0 || this.state.linkUrl.trim().length <= 0;
     const containerPlatformStyle = PlatfomIOS ? {justifyContent: 'space-between'} : {paddingTop: 15};
     const buttonPlatformStyle = PlatfomIOS ? {flex: 1, height: 45, justifyContent: 'center'} : {};
     return (
@@ -197,25 +215,37 @@ export default class RichTextEditor extends Component {
             style={buttonPlatformStyle}
         >
           <Text style={[styles.button, {paddingRight: 10}]}>
-            {PlatfomIOS ? 'Cancel' : 'CANCEL'}
+            {this._upperCaseButtonTextIfNeeded('Cancel')}
           </Text>
         </TouchableOpacity>
         <TouchableOpacity
             onPress={() => {
-              this.insertLink(this.state.linkUrl, this.state.linkTitle);
+              if (this._linkIsNew()) {
+                this.insertLink(this.state.linkUrl, this.state.linkTitle);
+              } else {
+                this.updateLink(this.state.linkUrl, this.state.linkTitle);
+              }
               this._hideModal();
             }}
-            disabled={insertDisabled}
+            disabled={insertUpdateDisabled}
             style={buttonPlatformStyle}
         >
-          <Text style={[styles.button, {opacity: insertDisabled ? 0.5 : 1}]}>
-            {PlatfomIOS ? 'Insert' : 'INSERT'}
+          <Text style={[styles.button, {opacity: insertUpdateDisabled ? 0.5 : 1}]}>
+            {this._upperCaseButtonTextIfNeeded(this._linkIsNew() ? 'Insert' : 'Update')}
           </Text>
         </TouchableOpacity>
       </View>
     );
   }
 
+  _linkIsNew() {
+    return !this.state.linkInitialUrl;
+  }
+
+  _upperCaseButtonTextIfNeeded(buttonText) {
+    return PlatfomIOS ? buttonText : buttonText.toLowerCase();
+  }
+
   render() {
     //in release build, external html files in Android can't be required, so they must be placed in the assets folder and accessed via uri
     const pageSource = PlatfomIOS ? require('./editor.html') : { uri: 'file:///android_asset/editor.html' };
@@ -259,8 +289,11 @@ export default class RichTextEditor extends Component {
   //-------------------------------------------------------------------------------
   //--------------- Public API
 
-  showLinkDialog() {
+  showLinkDialog(optionalTitle = '', optionalUrl = '') {
     this.setState({
+      linkInitialUrl: optionalUrl,
+      linkTitle: optionalTitle,
+      linkUrl: optionalUrl,
       showLinkDialog: true
     });
   }
@@ -364,10 +397,13 @@ export default class RichTextEditor extends Component {
   }
 
   insertLink(url, title) {
-
     this._sendAction(actions.insertLink, {url, title});
   }
 
+  updateLink(url, title) {
+    this._sendAction(actions.updateLink, {url, title});
+  }
+
   insertImage(url, alt) {
     this._sendAction(actions.insertImage, {url, alt});
     this.prepareInsert(); //This must be called BEFORE insertImage. But WebViewBridge uses a stack :/
@@ -471,6 +507,20 @@ export default class RichTextEditor extends Component {
     });
   }
 
+  async getSelectedText() {
+    return new Promise((resolve, reject) => {
+      this.selectedTextResolve = resolve;
+      this.selectedTextReject = reject;
+      this._sendAction(actions.getSelectedText);
+
+      this.pendingSelectedText = setTimeout(() => {
+        if (this.selectedTextReject) {
+          this.selectedTextReject('timeout')
+        }
+      }, 5000);
+    });
+  }
+
   setTitleFocusHandler(callbackHandler) {
     this.titleFocusHandler = callbackHandler;
     this._sendAction(actions.setTitleFocusHandler);

src/RichTextToolbar.js

@@ -167,7 +167,9 @@ export default class RichTextToolbar extends Component {
         if(this.props.onPressAddLink) {
           this.props.onPressAddLink();
         } else {
-          this.state.editor.showLinkDialog();
+          this.state.editor.getSelectedText().then(selectedText => {
+            this.state.editor.showLinkDialog(selectedText);
+          });
         }
         break;
       case actions.insertImage:

src/WebviewMessageHandler.js

@@ -73,6 +73,9 @@ export const InjectedMessageHandler = `
         case '${actions.insertLink}':
           zss_editor.insertLink(action.data.url, action.data.title);
           break;
+        case '${actions.updateLink}':
+          zss_editor.updateLink(action.data.url, action.data.title);
+          break;
         case '${actions.insertImage}':
           zss_editor.insertImage(action.data.url, action.data.alt);
           break;
@@ -118,6 +121,10 @@ export const InjectedMessageHandler = `
         case '${actions.setContentFocusHandler}':
           zss_editor.setContentFocusHandler();
           break;
+        case '${actions.getSelectedText}':
+          var selectedText = getSelection().toString();
+          WebViewBridge.send(JSON.stringify({type: '${messages.SELECTED_TEXT_RESPONSE}', data: selectedText}));
+          break;
         case '${actions.focusContent}':
           zss_editor.focusContent();
           break;

src/const.js

@@ -4,6 +4,7 @@ export const actions = {
   getTitleHtml: 'GET_TITLE_HTML',
   getTitleText: 'GET_TITLE_TEXT',
   getContentHtml: 'GET_CONTENT_HTML',
+  getSelectedText: 'GET_SELECTED_TEXT',
   blurTitleEditor: 'BLUR_TITLE_EDITOR',
   blurContentEditor: 'BLUR_CONTENT_EDITOR',
   focusTitle: 'FOCUS_TITLE',
@@ -27,6 +28,7 @@ export const actions = {
   insertBulletsList: 'unorderedList',
   insertOrderedList: 'orderedList',
   insertLink: 'INST_LINK',
+  updateLink: 'UPDATE_LINK',
   insertImage: 'INST_IMAGE',
   setSubscript: 'subscript',
   setSuperscript: 'superscript',
@@ -56,5 +58,7 @@ export const messages = {
   LOG: 'LOG',
   TITLE_FOCUSED: 'TITLE_FOCUSED',
   CONTENT_FOCUSED: 'CONTENT_FOCUSED',
-  SELECTION_CHANGE: 'SELECTION_CHANGE'
+  SELECTION_CHANGE: 'SELECTION_CHANGE',
+  SELECTED_TEXT_RESPONSE: 'SELECTED_TEXT_RESPONSE',
+  LINK_TOUCHED: 'LINK_TOUCHED'
 };

src/editor.html

@@ -851,6 +851,20 @@
 				}
 			}
 
+			function setCurrentEditingLinkOnTouch() {
+				$('#zss_editor_content').delegate('a', 'touchend', function(event) {
+					var anchor = $(event.currentTarget);
+
+					zss_editor.currentEditingLink = anchor;
+
+					var link = {
+						title: anchor.text(),
+						url: anchor.attr('href')
+					};
+					WebViewBridge.send(JSON.stringify({type: 'LINK_TOUCHED', data: link}))
+				});
+			}
+
 			function preventLinkFollowingOnTouch() {
 				$('#zss_editor_content').delegate('a', 'touchend', function(event) {
 					event.preventDefault();
@@ -886,6 +900,7 @@
 				setupTouchEndFocus('zss_editor_title');
 				setupTouchEndFocus('zss_editor_content');
 
+				setCurrentEditingLinkOnTouch();
 				preventLinkFollowingOnTouch();
 
 				whenPastingInsertAsPlainText('zss_editor_title');
@@ -1219,24 +1234,8 @@
 
 				zss_editor.restorerange();
 				var sel = document.getSelection();
-				console.log(sel);
-				if (sel.toString().length != 0) {
-					if (sel.rangeCount) {
-
-						var el = document.createElement("a");
-						el.setAttribute("href", url);
-						el.setAttribute("title", title);
-
-						var range = sel.getRangeAt(0).cloneRange();
-						range.surroundContents(el);
-						sel.removeAllRanges();
-						sel.addRange(range);
-					}
-				}
-				else
-				{
-					document.execCommand("insertHTML",false,"<a href='"+url+"'>"+title+"</a>");
-				}
+				sel.deleteFromDocument();
+				document.execCommand("insertHTML",false,"<a href='"+url+"'>"+title+"</a>");
 
 				zss_editor.enabledEditingItems();
 			}
@@ -1248,7 +1247,7 @@
 				if (zss_editor.currentEditingLink) {
 					var c = zss_editor.currentEditingLink;
 					c.attr('href', url);
-					c.attr('title', title);
+					c.text(title);
 				}
 				zss_editor.enabledEditingItems();
 
@@ -1493,18 +1492,6 @@
 						items.push('fonts');
 					}
 
-					// Link
-					if (nodeName == 'a') {
-						zss_editor.currentEditingLink = t;
-						var title = t.attr('title');
-						items.push('link:'+t.attr('href'));
-						if (t.attr('title') !== undefined) {
-							items.push('link-title:'+t.attr('title'));
-						}
-
-					} else {
-						zss_editor.currentEditingLink = null;
-					}
 					// Blockquote
 					if (nodeName == 'blockquote') {
 						items.push('indent');