Merge pull request #708 from Abderahman88/v1-RichTextFirstLink

RichText anchor bug V1

Author: AJIXuMuK

src/controls/richText/RichText.tsx

@@ -369,7 +369,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
                   }} />
 
         <TextField label={strings.TextToDisplayLabel}
-                   value={this.state.insertUrlText || this.state.insertUrl}
+                   value={this.state.insertUrlText}
                    onChanged={(newValue?: string) => {
                     if (newValue !== this.state.insertUrl) {
                       this.setState({
@@ -385,7 +385,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
                 <Link className={`${styles.action} ${styles.unlinkButton}`} onClick={this.handleRemoveLink}>{strings.RemoveLinkLabel}</Link>
               )
             }
-            <PrimaryButton className={styles.action} onClick={this.handleCreateLink} text={strings.SaveButtonLabel} />
+            <PrimaryButton className={styles.action} onClick={this.handleCreateLink} text={strings.SaveButtonLabel} disabled={this.checkLinkUrl()} />
             <DefaultButton className={styles.action} onClick={this.closeDialog} text={strings.CancelButtonLabel} />
           </div>
         </DialogFooter>
@@ -569,7 +569,7 @@ id="DropDownStyles"
         <ReactQuill ref={this.linkQuill}
                     placeholder={placeholder}
                     modules={modules}
-                    value={text || ''}
+                    defaultValue={text || ''} //property value causes issues, defaultValue does not
                     onChange={this.handleChange}
                     onChangeSelection={this.handleChangeSelection}
                     onFocus={this.handleOnFocus} />
@@ -690,7 +690,7 @@ id="DropDownStyles"
     }
 
     if (cursorPosition > -1) {
-      const textToInsert: string = this.state.insertUrlText !== undefined ? this.state.insertUrlText : this.state.insertUrl;
+      const textToInsert: string = (this.state.insertUrlText !== undefined && this.state.insertUrlText !== "") ? this.state.insertUrlText : this.state.insertUrl;
       const urlToInsert: string = this.state.insertUrl;
       quill.insertText(cursorPosition, textToInsert);
       quill.setSelection(cursorPosition, textToInsert.length);
@@ -704,6 +704,17 @@ id="DropDownStyles"
     });
   }
 
+  /**
+   * Disable Save-button if hyperlink is undefined or empty
+   * This prevents the user of adding an empty hyperlink
+   */
+  private checkLinkUrl = () => {
+    if (this.state.insertUrl !== undefined && this.state.insertUrl != "") {
+      return false;
+    }
+    return true;
+  }
+
   /**
    * Applies a format to the selection
    * @param name format name