From c212ef960a191b33a0728645e4d84a579812c367 Mon Sep 17 00:00:00 2001
From: Hugo Bernier <hugoabernier@live.ca>
Date: Wed, 24 Apr 2019 23:43:17 -0400
Subject: [PATCH] Fixed #279

---
 package-lock.json                          | 13 +++++---
 src/controls/richText/RichText.module.scss | 35 ++++++++++++----------
 src/controls/richText/RichText.tsx         | 14 +++++++--
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 287ad6c21..0bb46d8e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6690,7 +6690,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7105,7 +7106,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7161,6 +7163,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7204,12 +7207,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/src/controls/richText/RichText.module.scss b/src/controls/richText/RichText.module.scss
index 43509a801..5f85859fb 100644
--- a/src/controls/richText/RichText.module.scss
+++ b/src/controls/richText/RichText.module.scss
@@ -63,6 +63,7 @@
 }
 
 .toolbarDropDownOption {
+
   &.toolbarButtonH2 {
     font-size: 21px;
     font-weight: 100;
@@ -378,23 +379,25 @@
     line-height: 1.3;
   }
 
-  .ms-Dropdown-item {
-    background-color: $ms-color-neutralPrimary !important;
-    color: $ms-color-neutralLighterAlt !important;
-    -webkit-transition: all 0.3s;
-    transition: all 0.3s;
-    -webkit-transition-property: background-color, color;
-  }
+  div#DropDownStyles-list, div#DropDownAlign-list, div#DropDownLists-list {
+    .ms-Dropdown-item {
+      background-color: $ms-color-neutralPrimary !important;
+      color: $ms-color-neutralLighterAlt !important;
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s;
+      -webkit-transition-property: background-color, color;
+    }
 
-  .ms-Dropdown-item:hover {
-    background-color: $ms-color-neutralSecondaryAlt !important;
-    color: $ms-color-neutralLighterAlt !important;
-    cursor: pointer;
-  }
+    .ms-Dropdown-item:hover {
+      background-color: $ms-color-neutralSecondaryAlt !important;
+      color: $ms-color-neutralLighterAlt !important;
+      cursor: pointer;
+    }
 
-  .ms-Dropdown-item.is-selected,
-  .ms-Dropdown-item.is-selected:hover {
-    background-color: $ms-color-themePrimary !important;
-    color: $ms-color-neutralLighterAlt !important;
+    .ms-Dropdown-item.is-selected,
+    .ms-Dropdown-item.is-selected:hover {
+      background-color: $ms-color-themePrimary !important;
+      color: $ms-color-neutralLighterAlt !important;
+    }
   }
 }
diff --git a/src/controls/richText/RichText.tsx b/src/controls/richText/RichText.tsx
index 81fb66434..0315c9a14 100644
--- a/src/controls/richText/RichText.tsx
+++ b/src/controls/richText/RichText.tsx
@@ -16,6 +16,7 @@ import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { elementContains } from 'office-ui-fabric-react/lib/Utilities';
 import * as telemetry from '../../common/telemetry';
+import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
 
 
 const TOOLBARPADDING: number = 28;
@@ -27,6 +28,9 @@ const TOOLBARPADDING: number = 28;
  * - Block quotes only work on single lines. This is a frequently-requested feature with Quill that isn't available yet.
  * - Tables aren't supported yet. I'll gladly add table formatting support if users request it.
  */
+
+initializeIcons();
+
 export class RichText extends React.Component<IRichTextProps, IRichTextState> {
   private _quillElem: ReactQuill = undefined;
   private _wrapperRef: HTMLDivElement = undefined;
@@ -36,7 +40,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
   private ddStyleOpts = [{
     key: 0,
     text: strings.HeaderNormalText,
-    data: {}
+    data: { }
   }, {
     key: 2,
     text: strings.HeaderH2,
@@ -439,11 +443,13 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     Quill.register(SizeClass, true);
 
     return (
-      <div ref={(ref) => this._wrapperRef = ref} className={`${styles.richtext && this.state.editing ? 'ql-active' : undefined} ${this.props.className}`}>
+      <div ref={(ref) => this._wrapperRef = ref} className={`${styles.richtext && this.state.editing ? 'ql-active' : ''} ${this.props.className}`}>
         <div id={this._toolbarId} style={{top:this.state.wrapperTop}}>
           {
             showStyles && (
-              <Dropdown className={`${styles.headerDropDown} ${styles.toolbarDropDown}`}
+              <Dropdown
+id="DropDownStyles"
+              className={`${styles.headerDropDown} ${styles.toolbarDropDown}`}
                         onRenderCaretDown={() => <Icon className={styles.toolbarSubmenuCaret} iconName="CaretDownSolid8" />}
                         selectedKey={this.state.formats.header || 0}
                         options={this.ddStyleOpts}
@@ -492,6 +498,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
           {
             showAlign && (
               <Dropdown className={`${styles.toolbarDropDown}`}
+              id="DropDownAlign"
                         onRenderCaretDown={() => <Icon className={styles.toolbarSubmenuCaret} iconName="CaretDownSolid8" />}
                         selectedKey={this.state.formats.align || 'left'}
                         options={this.ddAlignOpts}
@@ -504,6 +511,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
           {
             showList && (
               <Dropdown className={styles.toolbarDropDown}
+              id="DropDownLists"
                         onRenderCaretDown={() => <Icon className={styles.toolbarSubmenuCaret} iconName="CaretDownSolid8" />}
                         selectedKey={this.state.formats.list}
                         options={this.ddListOpts}