add embedded image

Author: Abderahman88

src/controls/richText/RichText.tsx

@@ -100,6 +100,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
       showAlign: true,
       showList: true,
       showLink: true,
+      showImage: true,
       showMore: true
     }
   };
@@ -115,9 +116,11 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
       editing: false,
       morePaneVisible: false,
       hideDialog: true,
+      hideImageDialog: true,
       formats: {},
       insertUrl: undefined,
       insertUrlText: undefined,
+      insertImageUrl: undefined,
       selectedText: undefined,
       selectedUrl: undefined,
       wrapperTop: 0
@@ -392,6 +395,40 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     );
   }
 
+  /**
+  * Renders the "Insert Image" dialog
+   */
+  private renderImageDialog = (): JSX.Element => {
+    return (
+      <Dialog hidden={this.state.hideImageDialog}
+              onDismiss={this.closeImageDialog}
+              dialogContentProps={{
+                type: DialogType.normal,
+                title: strings.InsertImageTitle,
+              }}
+              modalProps={{
+                className: styles.insertLinkDialog,
+                isBlocking: true,
+                containerClassName: 'ms-dialogMainOverride'
+              }}>
+        <TextField label={strings.AddressFieldLabel}
+                   value={this.state.insertImageUrl !== undefined ? this.state.insertImageUrl : ""}
+                   onChanged={(newValue?: string) => {
+                    this.setState({
+                      insertImageUrl: newValue
+                    });
+                  }} />
+
+        <DialogFooter className={styles.actions}>
+          <div className={`ms-Dialog-actionsRight ${styles.actionsRight}`}>
+            <PrimaryButton className={styles.action} onClick={this.handleInsertImage} text={strings.SaveButtonLabel} disabled={this.checkImageLinkUrl()} />
+            <DefaultButton className={styles.action} onClick={this.closeImageDialog} text={strings.CancelButtonLabel} />
+          </div>
+        </DialogFooter>
+      </Dialog>
+    );
+  }
+
   /**
    * Renders the Rich Text Editor
    */
@@ -409,7 +446,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     }
 
     // Okay, we're in edit mode.
-    const { placeholder, styleOptions: { showStyles, showBold, showItalic, showUnderline, showAlign, showList, showLink, showMore } } = this.props;
+    const { placeholder, styleOptions: { showStyles, showBold, showItalic, showUnderline, showAlign, showList, showLink, showMore, showImage} } = this.props;
 
     // Get a unique id for the toolbar
     const modules = {
@@ -551,6 +588,20 @@ id="DropDownStyles"
                             }} />
               </TooltipHost>
             )
+          }
+           {
+            showImage && (
+              <TooltipHost content={strings.ImageTitle}
+                           id="image-richtextbutton"
+                           calloutProps={{ gapSpace: 0 }}>
+                <IconButton checked={this.state.formats!.link !== undefined}
+                            onClick={this.showInsertImageDialog}
+                            aria-describedby="image-richtextbutton"
+                            iconProps={{
+                              iconName: 'PictureFill'
+                            }} />
+              </TooltipHost>
+            )
           }
           {
             showMore && (
@@ -583,6 +634,10 @@ id="DropDownStyles"
         {
           this.renderLinkDialog()
         }
+        {
+          this.renderImageDialog()
+        }
+        
       </div>
     );
   }
@@ -659,6 +714,29 @@ id="DropDownStyles"
     this.setState({ hideDialog: true });
   }
 
+  /**
+   * Displays the insert link dialog
+   */
+  private showInsertImageDialog = () => {
+    const quill = this.getEditor();
+    const range = quill.getSelection();
+
+    this.setState({
+      hideImageDialog: false,
+      selectedRange: range
+    });
+  }
+
+  /**
+   * Hides the insert image dialog
+   */
+  private closeImageDialog = () => {
+    this.setState({ 
+      hideImageDialog: true,
+      insertImageUrl: undefined,
+     });
+  }
+
   /**
    * When user enters the richtext editor, displays the border
    */
@@ -703,6 +781,28 @@ id="DropDownStyles"
     });
   }
 
+  /**
+   * Called when user insert an image
+   */
+  private handleInsertImage = () => {
+    const { insertImageUrl, selectedRange } = this.state;
+    try {
+        const quill = this.getEditor();
+        const cursorPosition: number = selectedRange!.index;
+        quill.insertEmbed(cursorPosition, 'image', insertImageUrl, "user");
+        this.setState({
+          insertImageUrl: undefined,
+          hideImageDialog: true,
+        });
+    } catch {
+        //Close the image dialog if something went wrong
+        this.setState({
+          insertImageUrl: undefined,
+          hideImageDialog: true,
+        });
+    }
+  }
+
   /**
    * Disable Save-button if hyperlink is undefined or empty
    * This prevents the user of adding an empty hyperlink
@@ -714,6 +814,17 @@ id="DropDownStyles"
     return true;
   }
 
+  /**
+   * Disable Save-button if hyperlink for the imported image is undefined or empty
+   * This prevents the user of adding an empty image
+   */
+  private checkImageLinkUrl = () => {
+    if (this.state.insertImageUrl !== undefined && this.state.insertImageUrl != "") {
+      return false;
+    }
+    return true;
+  }
+
   /**
    * Applies a format to the selection
    * @param name format name

src/controls/richText/RichText.types.ts

@@ -80,6 +80,12 @@ export interface StyleOptions {
    */
   showMore?: boolean;
 
+  /**
+   * Indicates if we should show the Image button.
+   * @defaultvalue true
+   */
+  showImage?: boolean;
+
   /**
    * Indicates if we should show the Styles button (Heading 1, Heading 2, ..., Pull quote)
    * @defaultvalue true
@@ -109,6 +115,12 @@ export interface IRichTextState {
    */
   hideDialog: boolean;
 
+  
+  /**
+   * Whether to hide the insert image dialog
+   */
+  hideImageDialog: boolean;
+
   /**
    * The URL to insert
    */
@@ -119,6 +131,11 @@ export interface IRichTextState {
    */
   insertUrlText: string;
 
+  /**
+   * The URL of image to insert
+   */
+  insertImageUrl: string;
+
   /**
    * Whether the "More" pane is visible
    */

src/loc/en-us.ts

@@ -101,10 +101,12 @@ define([], () => {
     AlignTitle: "Align",
     ListTitle: "List",
     LinkTitle: "Hyperlink",
+    ImageTitle: "Image",
     MoreTitle: "More",
     FormattingPaneTitle: "Text formatting",
     CloseButton: "Close",
     InsertLinkTitle: "Insert link",
+    InsertImageTitle: "Insert image",
     AddressFieldLabel: "Address",
     TextToDisplayLabel: "Text to display",
     SaveButtonLabel: "Save",

src/loc/mystrings.d.ts

@@ -73,10 +73,12 @@ declare interface IControlStrings {
   AlignTitle: string;
   ListTitle: string;
   LinkTitle: string;
+  ImageTitle: string;
   MoreTitle: string;
   FormattingPaneTitle: string;
   CloseButton: string;
   InsertLinkTitle: string;
+  InsertImageTitle: string;
   AddressFieldLabel: string;
   TextToDisplayLabel: string;
   SaveButtonLabel: string;

src/loc/nl-nl.ts

@@ -90,10 +90,12 @@ define([], () => {
   "AlignTitle": "Uitlijnen",
   "ListTitle": "Lijst",
   "LinkTitle": "Hyperlink",
+  "ImageTitle": "Afbeelding",
   "MoreTitle": "Meer",
   "FormattingPaneTitle": "Tekstopmaak",
   "CloseButton": "Sluiten",
   "InsertLinkTitle": "Koppeling invoegen",
+  "InsertImageTitle": "Afbeelding invoegen",
   "AddressFieldLabel": "Adres",
   "TextToDisplayLabel": "Weer te geven tekst",
   "SaveButtonLabel": "Opslaan",