diff --git a/gulpfile.js b/gulpfile.js
index d81e4adda..1aaf17156 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -18,6 +18,7 @@ build.addSuppression(`Warning - [sass] The local CSS class 'ms-motion-slideUpOut
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-motion-slideDownOut' is not camelCase and will not be type-safe.`);
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-motion-slideUpIn' is not camelCase and will not be type-safe.`);
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-motion-slideDownIn' is not camelCase and will not be type-safe.`);
+build.addSuppression(`Warning - [sass] The local CSS class 'pnp-richtext-quill-container' is not camelCase and will not be type-safe.`);
 
 // Update the version number in the version.ts file
 gulp.task('versionUpdater', (done) => {
diff --git a/src/controls/richText/RichText.module.scss b/src/controls/richText/RichText.module.scss
index 118a5eee5..7e66866c2 100644
--- a/src/controls/richText/RichText.module.scss
+++ b/src/controls/richText/RichText.module.scss
@@ -105,347 +105,349 @@
   width: 100%;
 }
 
-:global(.pnp-richtext-quill-container) {
-  .ql-toolbar {
-    background-color: transparent;
-    color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
-    border: none;
-    display: none;
-
-    .ms-TooltipHost {
-      display: inline-block !important;
-    }
-
-    .ms-Dropdown-container {
-      display: inline-block !important;
-    }
-
-    .ms-Button {
-      background-color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
-      color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]" !important;
+:global {
+  .pnp-richtext-quill-container {
+    .ql-toolbar {
+      background-color: transparent;
+      color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+      border: none;
+      display: none;
 
-      &:hover {
-        background-color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
-        color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+      .ms-TooltipHost {
+        display: inline-block !important;
       }
 
-      &:focus {
-        border: 1px solid "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
-        outline: 0;
-        color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+      .ms-Dropdown-container {
+        display: inline-block !important;
       }
 
-      &:active {
-        color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+      .ms-Button {
+        background-color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
+        color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]" !important;
+
+        &:hover {
+          background-color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
+          color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+        }
+
+        &:focus {
+          border: 1px solid "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+          outline: 0;
+          color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+        }
+
+        &:active {
+          color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+        }
+
+        &.is-checked {
+          background-color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]" !important;
+        }
+      }
+      .ms-Dropdown-title {
+        background-color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
+        color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]" !important;
+        border: none;
+        min-height: 34px;
+        padding-bottom: 0px;
+        padding-left: 9px;
+        padding-right: 20px;
+        padding-top: 2px;
+        -webkit-transition: all 0.3s;
+        transition: all 0.3s;
+        -webkit-transition-property: background-color, color;
+        border-radius: 0;
+
+        &:hover {
+          background-color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
+          color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+        }
+
+        &:focus {
+          border: 1px solid "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+          outline: 0;
+          color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+        }
+
+        &:active {
+          color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+        }
       }
 
-      &.is-checked {
-        background-color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]" !important;
+      .ms-Dropdown-caretDownWrapper {
+        right: 4px;
+        margin-top: -1px;
       }
     }
-    .ms-Dropdown-title {
+
+    .ql-snow.ql-toolbar button,
+    .ql-snow .ql-toolbar button {
       background-color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
-      color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]" !important;
-      border: none;
-      min-height: 34px;
-      padding-bottom: 0px;
-      padding-left: 9px;
-      padding-right: 20px;
-      padding-top: 2px;
-      -webkit-transition: all 0.3s;
-      transition: all 0.3s;
-      -webkit-transition-property: background-color, color;
+      color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
+      font-size: 16px;
+      min-width: 34px;
+      height: 34px;
+      padding-top: 4px;
+      padding-left: 8px;
+      padding-right: 8px;
       border-radius: 0;
+    }
 
-      &:hover {
-        background-color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
-        color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
-      }
-
-      &:focus {
-        border: 1px solid "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
-        outline: 0;
-        color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
-      }
-
-      &:active {
-        color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
-      }
+    .ql-toolbar.ql-snow {
+      padding: 0px;
+      font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system,
+        BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
+      border: none;
+      margin-bottom: 2px;
+      z-index: 3;
+      -webkit-animation-name: ms-fadeIn, ms-slideUpIn10;
+      animation-name: ms-fadeIn, ms-slideUpIn10;
+      -webkit-animation-duration: 167ms;
+      animation-duration: 167ms;
+      -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+      animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+      -webkit-animation-fill-mode: both;
+      animation-fill-mode: both;
+      -webkit-transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);
+      transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);
     }
 
-    .ms-Dropdown-caretDownWrapper {
-      right: 4px;
-      margin-top: -1px;
+    .ql-snow.ql-toolbar:after,
+    .ql-snow .ql-toolbar:after {
+      clear: both;
+      content: "";
+      display: table;
+    }
+    .ql-container.ql-snow {
+      border: none;
     }
-  }
 
-  .ql-snow.ql-toolbar button,
-  .ql-snow .ql-toolbar button {
-    background-color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]";
-    color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
-    font-size: 16px;
-    min-width: 34px;
-    height: 34px;
-    padding-top: 4px;
-    padding-left: 8px;
-    padding-right: 8px;
-    border-radius: 0;
-  }
+    .ql-active .ql-editor:hover {
+      border-width: 1px;
+      border-style: solid;
+      border-color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
+    }
 
-  .ql-toolbar.ql-snow {
-    padding: 0px;
-    font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system,
-      BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
-    border: none;
-    margin-bottom: 2px;
-    z-index: 3;
-    -webkit-animation-name: ms-fadeIn, ms-slideUpIn10;
-    animation-name: ms-fadeIn, ms-slideUpIn10;
-    -webkit-animation-duration: 167ms;
-    animation-duration: 167ms;
-    -webkit-animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    -webkit-transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);
-    transition: all 367ms cubic-bezier(0.1, 0.9, 0.2, 1);
-  }
+    .ql-active .ql-editor:focus,
+    .ql-active .ql-editor:active,
+    .ql-active .ql-editor:active:hover {
+      border-width: 1px;
+      border-style: solid;
+      border-color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]";
+    }
 
-  .ql-snow.ql-toolbar:after,
-  .ql-snow .ql-toolbar:after {
-    clear: both;
-    content: "";
-    display: table;
-  }
-  .ql-container.ql-snow {
-    border: none;
-  }
+    .ql-active .ql-toolbar {
+      display: inline-flex;
+      position: absolute;
+      top: -28px;
+      opacity: 1;
+      height: 34px;
+      -webkit-box-shadow: 0 0 5px 0 #c8c8c8;
+      box-shadow: 0px 0px 5px 0px #c8c8c8;
+    }
 
-  .ql-active .ql-editor:hover {
-    border-width: 1px;
-    border-style: solid;
-    border-color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
-  }
+    .ql-snow .ql-editor, .ql-editor{
+      // border: 1px solid transparent;
+      padding-left: 10px;
+      padding-right: 10px;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      min-height: 68px;
+      font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system,
+        BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
+      font-size: 18px;
 
-  .ql-active .ql-editor:focus,
-  .ql-active .ql-editor:active,
-  .ql-active .ql-editor:active:hover {
-    border-width: 1px;
-    border-style: solid;
-    border-color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]";
-  }
+      h2 {
+        font-weight: 600 !important;
+        font-size: 28px;
+      }
 
-  .ql-active .ql-toolbar {
-    display: inline-flex;
-    position: absolute;
-    top: -28px;
-    opacity: 1;
-    height: 34px;
-    -webkit-box-shadow: 0 0 5px 0 #c8c8c8;
-    box-shadow: 0px 0px 5px 0px #c8c8c8;
-  }
+      h3 {
+        font-size: 24px;
+        font-weight: 600 !important;
+      }
 
-  .ql-snow .ql-editor, .ql-editor{
-    // border: 1px solid transparent;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 8px;
-    padding-bottom: 8px;
-    min-height: 68px;
-    font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system,
-      BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
-    font-size: 18px;
+      h4 {
+        font-size: 20px;
+        font-weight: 600 !important;
+      }
 
-    h2 {
-      font-weight: 600 !important;
-      font-size: 28px;
-    }
+      blockquote,
+      div,
+      h2,
+      h3,
+      h4,
+      ol,
+      p,
+      ul {
+        -webkit-font-smoothing: antialiased;
+        line-height: 1.3;
+        // margin: 0 0 16px;
+        word-wrap: break-word;
+      }
 
-    h3 {
-      font-size: 24px;
-      font-weight: 600 !important;
-    }
+      blockquote {
+        border-bottom-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        border-left-style: none;
+        border-left-width: 0;
+        border-left-color: transparent;
+        border-right-style: none;
+        border-right-width: 0;
+        border-right-color: transparent;
+        border-top-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
+        border-top-style: solid;
+        border-top-width: 1px;
+        font-size: 20px;
+        font-style: italic;
+        font-weight: 600;
+        line-height: 1.3;
+        margin-bottom: 28px;
+        padding-bottom: 32px;
+        margin-top: 28px;
+        margin-right: 0px;
+        margin-left: 0px;
+        padding-left: 32px;
+        padding-right: 32px;
+        padding-top: 32px;
+        text-align: center;
+      }
 
-    h4 {
-      font-size: 20px;
-      font-weight: 600 !important;
-    }
+      .ql-size-xsmall {
+        font-size: 10px;
+      }
 
-    blockquote,
-    div,
-    h2,
-    h3,
-    h4,
-    ol,
-    p,
-    ul {
-      -webkit-font-smoothing: antialiased;
-      line-height: 1.3;
-      // margin: 0 0 16px;
-      word-wrap: break-word;
-    }
+      .ql-size-small {
+        font-size: 12px;
+      }
 
-    blockquote {
-      border-bottom-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
-      border-bottom-style: solid;
-      border-bottom-width: 1px;
-      border-left-style: none;
-      border-left-width: 0;
-      border-left-color: transparent;
-      border-right-style: none;
-      border-right-width: 0;
-      border-right-color: transparent;
-      border-top-color: "[theme:neutralLighter, default:#{$ms-color-neutralLighter}]";
-      border-top-style: solid;
-      border-top-width: 1px;
-      font-size: 20px;
-      font-style: italic;
-      font-weight: 600;
-      line-height: 1.3;
-      margin-bottom: 28px;
-      padding-bottom: 32px;
-      margin-top: 28px;
-      margin-right: 0px;
-      margin-left: 0px;
-      padding-left: 32px;
-      padding-right: 32px;
-      padding-top: 32px;
-      text-align: center;
-    }
+      .ql-size-medium {
+        font-size: 14px;
+      }
 
-    .ql-size-xsmall {
-      font-size: 10px;
-    }
+      .ql-size-mediumplus {
+        font-size: 16px;
+      }
 
-    .ql-size-small {
-      font-size: 12px;
-    }
+      .ql-size-large {
+        font-size: 18px;
+      }
 
-    .ql-size-medium {
-      font-size: 14px;
-    }
+      .ql-size-xlarge {
+        font-size: 20px;
+      }
 
-    .ql-size-mediumplus {
-      font-size: 16px;
-    }
+      .ql-size-xlargeplus {
+        font-size: 24px;
+      }
 
-    .ql-size-large {
-      font-size: 18px;
-    }
+      .ql-size-xxlarge {
+        font-size: 28px;
+      }
 
-    .ql-size-xlarge {
-      font-size: 20px;
-    }
+      .ql-size-xxxlarge {
+        font-size: 32px;
+      }
 
-    .ql-size-xlargeplus {
-      font-size: 24px;
-    }
+      .ql-size-xxlargeplus {
+        font-size: 36px;
+      }
 
-    .ql-size-xxlarge {
-      font-size: 28px;
-    }
+      .ql-size-super {
+        font-size: 42px;
+      }
 
-    .ql-size-xxxlarge {
-      font-size: 32px;
+      .ql-size-superlarge {
+        font-size: 68px;
+      }
     }
 
-    .ql-size-xxlargeplus {
-      font-size: 36px;
+    @media screen and (min-width: 1024px) {
+      .ql-editor div,
+      .ql-editor ol,
+      .ql-editor p,
+      .ql-editor ul {
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 1.3;
+      }
     }
 
-    .ql-size-super {
-      font-size: 42px;
+    .ql-active .ql-editor {
+      // background-color: red;
+      color: inherit;
     }
 
-    .ql-size-superlarge {
-      font-size: 68px;
+    .ql-tooltip {
+      display: none !important;
     }
-  }
 
-  @media screen and (min-width: 1024px) {
-    .ql-editor div,
-    .ql-editor ol,
-    .ql-editor p,
-    .ql-editor ul {
+    .ql-editor.ql-blank::before {
+      font-style: normal;
+      color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
       font-size: 18px;
       font-weight: 400;
       line-height: 1.3;
     }
-  }
-
-  .ql-active .ql-editor {
-    // background-color: red;
-    color: inherit;
-  }
-
-  .ql-tooltip {
-    display: none !important;
-  }
 
-  .ql-editor.ql-blank::before {
-    font-style: normal;
-    color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 1.3;
-  }
-
-  // correct border/hover/active border, same as with other controls, no jumping
-  .quill {
-    .ql-editor {
-      border-width: 1px;
-      border-style: solid;
-      border-color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
-      &:hover {
-        border-color: "[theme:neutralDark, default:#{$ms-color-neutralDark}]";
-      }
-      &:active::after, &:active:focus::after, &:active:hover::after, &:focus::after {
-        content: "";
-        pointer-events: none;
-        position: absolute;
+    // correct border/hover/active border, same as with other controls, no jumping
+    .quill {
+      .ql-editor {
+        border-width: 1px;
         border-style: solid;
-        border-width: 2px;
-        inset: -1px;
-        border-color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]";
-        border-radius: 2px;
+        border-color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]";
+        &:hover {
+          border-color: "[theme:neutralDark, default:#{$ms-color-neutralDark}]";
+        }
+        &:active::after, &:active:focus::after, &:active:hover::after, &:focus::after {
+          content: "";
+          pointer-events: none;
+          position: absolute;
+          border-style: solid;
+          border-width: 2px;
+          inset: -1px;
+          border-color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]";
+          border-radius: 2px;
+        }
       }
     }
-  }
 
-  // hyperlin color on dark theme
-  .ql-editor {
-    a {
-      color: "[theme:themePrimary, default: #{$ms-color-themePrimary}]";
-      &:hover {
-        color: "[theme:themeDarker, default: #{$ms-color-themeDarker}]";
+    // hyperlink color on dark theme
+    .ql-editor {
+      a {
+        color: "[theme:themePrimary, default: #{$ms-color-themePrimary}]";
+        &:hover {
+          color: "[theme:themeDarker, default: #{$ms-color-themeDarker}]";
+        }
       }
     }
-  }
-
-  .ql-editor ol li:not(.ql-direction-rtl),
-  .ql-editor ul li:not(.ql-direction-rtl) {
-    padding-left: 0;
-  }
 
-  div#DropDownStyles-list, div#DropDownAlign-list, div#DropDownLists-list {
-    .ms-Dropdown-item {
-      background-color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]" !important;
-      color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]" !important;
-      -webkit-transition: all 0.3s;
-      transition: all 0.3s;
-      -webkit-transition-property: background-color, color;
+    .ql-editor ol li:not(.ql-direction-rtl),
+    .ql-editor ul li:not(.ql-direction-rtl) {
+      padding-left: 0;
     }
 
-    .ms-Dropdown-item:hover {
-      background-color: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]" !important;
-      color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]" !important;
-      cursor: pointer;
-    }
+    div#DropDownStyles-list, div#DropDownAlign-list, div#DropDownLists-list {
+      .ms-Dropdown-item {
+        background-color: "[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]" !important;
+        color: "[theme:neutralLighterAlt, default:#{$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: "[theme:neutralTertiary, default:#{$ms-color-neutralTertiary}]" !important;
+        color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]" !important;
+        cursor: pointer;
+      }
 
-    .ms-Dropdown-item.is-selected,
-    .ms-Dropdown-item.is-selected:hover {
-      background-color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]" !important;
-      color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]" !important;
+      .ms-Dropdown-item.is-selected,
+      .ms-Dropdown-item.is-selected:hover {
+        background-color: "[theme:themePrimary, default:#{$ms-color-themePrimary}]" !important;
+        color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]" !important;
+      }
     }
   }
 }
diff --git a/src/controls/richText/RichText.tsx b/src/controls/richText/RichText.tsx
index 1f9367f60..6f248beb3 100644
--- a/src/controls/richText/RichText.tsx
+++ b/src/controls/richText/RichText.tsx
@@ -632,184 +632,189 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
 
     return (
       <div
-        ref={(ref) => {
-          this._wrapperRef = ref;
-        }}
         className={
-          css(
-            styles.richtext && this.state.editing ? 'ql-active' : null,
-            CONTAINER_CLASS,
-            this.props.className || null
-          ) || null
+          css(CONTAINER_CLASS)
         }
-        style={style}
       >
-        {renderLabel}
-        <div id={this._toolbarId} style={{ top: this.state.wrapperTop }}>
-          {showStyles && (
-            <Dropdown
-              id="DropDownStyles"
-              className={`${styles.headerDropDown} ${styles.toolbarDropDown}`}
-              onRenderCaretDown={() => (
-                <Icon
-                  className={styles.toolbarSubmenuCaret}
-                  iconName="CaretDownSolid8"
-                />
-              )}
-              selectedKey={this.state.formats.header || 0}
-              options={this.ddStyleOpts}
-              onChange={this.onChangeHeading}
-              onRenderOption={this.onRenderStyleOption}
-              onRenderTitle={this.onRenderStyleTitle}
-            />
-          )}
-          {showBold && (
-            <TooltipHost
-              content={strings.BoldTitle}
-              id="bold-richtextbutton"
-              calloutProps={{ gapSpace: 0 }}
-            >
-              <IconButton
-                iconProps={{ iconName: 'Bold' }}
-                aria-describedby="bold-richtextbutton"
-                checked={this.state.formats.bold}
-                onClick={this.onChangeBold}
-              />
-            </TooltipHost>
-          )}
-          {showItalic && (
-            <TooltipHost
-              content={strings.ItalicTitle}
-              id="italic-richtextbutton"
-              calloutProps={{ gapSpace: 0 }}
-            >
-              <IconButton
-                iconProps={{ iconName: 'Italic' }}
-                aria-describedby="italic-richtextbutton"
-                checked={this.state.formats.italic}
-                onClick={this.onChangeItalic}
-              />
-            </TooltipHost>
-          )}
-          {showUnderline && (
-            <TooltipHost
-              content={strings.UnderlineTitle}
-              id="underline-richtextbutton"
-              calloutProps={{ gapSpace: 0 }}
-            >
-              <IconButton
-                iconProps={{ iconName: 'Underline' }}
-                aria-describedby="underline-richtextbutton"
-                checked={this.state.formats.underline}
-                onClick={this.onChangeUnderline}
+        <div
+          ref={(ref) => {
+            this._wrapperRef = ref;
+          }}
+          className={
+            css(
+              styles.richtext && this.state.editing ? 'ql-active' : null,
+              this.props.className || null
+            ) || null
+          }
+          style={style}
+        >
+          {renderLabel}
+          <div id={this._toolbarId} style={{ top: this.state.wrapperTop }}>
+            {showStyles && (
+              <Dropdown
+                id="DropDownStyles"
+                className={`${styles.headerDropDown} ${styles.toolbarDropDown}`}
+                onRenderCaretDown={() => (
+                  <Icon
+                    className={styles.toolbarSubmenuCaret}
+                    iconName="CaretDownSolid8"
+                  />
+                )}
+                selectedKey={this.state.formats.header || 0}
+                options={this.ddStyleOpts}
+                onChange={this.onChangeHeading}
+                onRenderOption={this.onRenderStyleOption}
+                onRenderTitle={this.onRenderStyleTitle}
               />
-            </TooltipHost>
-          )}
-          {showAlign && (
-            <Dropdown
-              className={`${styles.toolbarDropDown}`}
-              id="DropDownAlign"
-              onRenderCaretDown={() => (
-                <Icon
-                  className={styles.toolbarSubmenuCaret}
-                  iconName="CaretDownSolid8"
+            )}
+            {showBold && (
+              <TooltipHost
+                content={strings.BoldTitle}
+                id="bold-richtextbutton"
+                calloutProps={{ gapSpace: 0 }}
+              >
+                <IconButton
+                  iconProps={{ iconName: 'Bold' }}
+                  aria-describedby="bold-richtextbutton"
+                  checked={this.state.formats.bold}
+                  onClick={this.onChangeBold}
                 />
-              )}
-              selectedKey={this.state.formats.align || 'left'}
-              options={this.ddAlignOpts}
-              onChange={this.onChangeAlign}
-              onRenderOption={this.onRenderAlignOption}
-              onRenderTitle={this.onRenderAlignTitle}
-            />
-          )}
-          {showList && (
-            <Dropdown
-              className={styles.toolbarDropDown}
-              id="DropDownLists"
-              onRenderCaretDown={() => (
-                <Icon
-                  className={styles.toolbarSubmenuCaret}
-                  iconName="CaretDownSolid8"
+              </TooltipHost>
+            )}
+            {showItalic && (
+              <TooltipHost
+                content={strings.ItalicTitle}
+                id="italic-richtextbutton"
+                calloutProps={{ gapSpace: 0 }}
+              >
+                <IconButton
+                  iconProps={{ iconName: 'Italic' }}
+                  aria-describedby="italic-richtextbutton"
+                  checked={this.state.formats.italic}
+                  onClick={this.onChangeItalic}
                 />
-              )}
-              selectedKey={this.state.formats.list}
-              options={this.ddListOpts}
-              // this option is not available yet
-              notifyOnReselect={true} // allows re-selecting selected item to turn it off
-              onChange={this.onChangeList}
-              onRenderOption={this.onRenderListOption}
-              onRenderTitle={this.onRenderListTitle}
-              onRenderPlaceholder={this.onRenderListPlaceholder}
-            />
-          )}
-          {showLink && (
-            <TooltipHost
-              content={strings.LinkTitle}
-              id="link-richtextbutton"
-              calloutProps={{ gapSpace: 0 }}
-            >
-              <IconButton
-                checked={this.state.formats?.link !== undefined}
-                onClick={this.showInsertLinkDialog}
-                aria-describedby="link-richtextbutton"
-                iconProps={{
-                  iconName: 'Link',
-                }}
-              />
-            </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>
+            )}
+            {showUnderline && (
+              <TooltipHost
+                content={strings.UnderlineTitle}
+                id="underline-richtextbutton"
+                calloutProps={{ gapSpace: 0 }}
+              >
+                <IconButton
+                  iconProps={{ iconName: 'Underline' }}
+                  aria-describedby="underline-richtextbutton"
+                  checked={this.state.formats.underline}
+                  onClick={this.onChangeUnderline}
+                />
+              </TooltipHost>
+            )}
+            {showAlign && (
+              <Dropdown
+                className={`${styles.toolbarDropDown}`}
+                id="DropDownAlign"
+                onRenderCaretDown={() => (
+                  <Icon
+                    className={styles.toolbarSubmenuCaret}
+                    iconName="CaretDownSolid8"
+                  />
+                )}
+                selectedKey={this.state.formats.align || 'left'}
+                options={this.ddAlignOpts}
+                onChange={this.onChangeAlign}
+                onRenderOption={this.onRenderAlignOption}
+                onRenderTitle={this.onRenderAlignTitle}
               />
-            </TooltipHost>
-          )}
-          {showMore && (
-            <TooltipHost
-              content={strings.MoreTitle}
-              id="more-richtextbutton"
-              calloutProps={{ gapSpace: 0 }}
-            >
-              <IconButton
-                iconProps={{ iconName: 'More' }}
-                aria-describedby="more-richtextbutton"
-                onClick={this.handleShowMore}
+            )}
+            {showList && (
+              <Dropdown
+                className={styles.toolbarDropDown}
+                id="DropDownLists"
+                onRenderCaretDown={() => (
+                  <Icon
+                    className={styles.toolbarSubmenuCaret}
+                    iconName="CaretDownSolid8"
+                  />
+                )}
+                selectedKey={this.state.formats.list}
+                options={this.ddListOpts}
+                // this option is not available yet
+                notifyOnReselect={true} // allows re-selecting selected item to turn it off
+                onChange={this.onChangeList}
+                onRenderOption={this.onRenderListOption}
+                onRenderTitle={this.onRenderListTitle}
+                onRenderPlaceholder={this.onRenderListPlaceholder}
               />
-            </TooltipHost>
-          )}
-        </div>
+            )}
+            {showLink && (
+              <TooltipHost
+                content={strings.LinkTitle}
+                id="link-richtextbutton"
+                calloutProps={{ gapSpace: 0 }}
+              >
+                <IconButton
+                  checked={this.state.formats?.link !== undefined}
+                  onClick={this.showInsertLinkDialog}
+                  aria-describedby="link-richtextbutton"
+                  iconProps={{
+                    iconName: 'Link',
+                  }}
+                />
+              </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 && (
+              <TooltipHost
+                content={strings.MoreTitle}
+                id="more-richtextbutton"
+                calloutProps={{ gapSpace: 0 }}
+              >
+                <IconButton
+                  iconProps={{ iconName: 'More' }}
+                  aria-describedby="more-richtextbutton"
+                  onClick={this.handleShowMore}
+                />
+              </TooltipHost>
+            )}
+          </div>
 
-        <ReactQuill
-          ref={this.linkQuill}
-          id={this._richTextId}
-          placeholder={placeholder}
-          modules={modules}
-          value={text || ''} //property value causes issues, defaultValue does not
-          onChange={this.handleChange}
-          onChangeSelection={this.handleChangeSelection}
-          onFocus={this.handleOnFocus}
-        />
+          <ReactQuill
+            ref={this.linkQuill}
+            id={this._richTextId}
+            placeholder={placeholder}
+            modules={modules}
+            value={text || ''} //property value causes issues, defaultValue does not
+            onChange={this.handleChange}
+            onChangeSelection={this.handleChangeSelection}
+            onFocus={this.handleOnFocus}
+          />
 
-        <RichTextPropertyPane
-          ref={this.linkPropertyPane}
-          editor={this.getEditor()}
-          isOpen={this.state.morePaneVisible}
-          onClose={this.handleClosePanel}
-          onLink={this.showInsertLinkDialog}
-          customColors={this.props.customColors}
-        />
+          <RichTextPropertyPane
+            ref={this.linkPropertyPane}
+            editor={this.getEditor()}
+            isOpen={this.state.morePaneVisible}
+            onClose={this.handleClosePanel}
+            onLink={this.showInsertLinkDialog}
+            customColors={this.props.customColors}
+          />
 
-        {this.renderLinkDialog()}
-        {this.renderImageDialog()}
+          {this.renderLinkDialog()}
+          {this.renderImageDialog()}
+        </div>
       </div>
     );
   }