Added custom color swatch as property

Author: Eric Weintraub

src/controls/richText/RichText.tsx

@@ -107,7 +107,6 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
 
   constructor(props: IRichTextProps) {
     super(props);
-
     telemetry.track('ReactRichText', {
       className: !!props.className
     });
@@ -579,7 +578,8 @@ id="DropDownStyles"
                               editor={this.getEditor()}
                               isOpen={this.state.morePaneVisible}
                               onClose={this.handleClosePanel}
-                              onLink={this.showInsertLinkDialog} />
+                              onLink={this.showInsertLinkDialog} 
+                              customColors={this.props.customColors}/>
 
         {
           this.renderLinkDialog()

src/controls/richText/RichText.types.ts

@@ -1,3 +1,4 @@
+import { ISwatchColor } from './SwatchColorPickerGroup.types';
 export interface IRichTextProps {
   /**
      * CSS class to apply to the rich text editor.
@@ -27,6 +28,11 @@ export interface IRichTextProps {
    */
   styleOptions?: StyleOptions;
 
+  /**
+   * Additional colors to include in swatch
+   */
+  customColors?: ISwatchColor[];
+
   /**
    * Callback issued when the rich text changes.
    * Returns the text that will be inserted in the rich text control.

src/controls/richText/RichTextPropertyPane.tsx

@@ -317,14 +317,19 @@ export default class RichTextPropertyPane extends React.Component<IRichTextPrope
   private renderColorStylesGroup = (): JSX.Element => {
     const color: string = this.state.formats.color || ThemeColorHelper.GetThemeColor(styles.NeutralPrimary);
     const backgroundColor: string = this.state.formats.background || "rgba(0, 0, 0, 0)";
+
+    /**
+     * Add custom colors if passed as a property
+     */
+    let fontColorGroups = ["themeColors","standardColors"];
+    this.props.customColors && fontColorGroups.push('customColors');
+
     return (
       <div className={styles.propertyPaneGroupField}>
         <div className="ms-CustomFieldHost">
           <div className={styles.controlsInOneRow}>
-            <RteColorPicker colorPickerGroups={[
-                              "themeColors",
-                              "standardColors"
-                            ]}
+            <RteColorPicker colorPickerGroups={fontColorGroups} // changed to variable
+                            customColors={this.props.customColors}
                             buttonLabel={strings.FontColorLabel}
                             id="fontColor-propertyPaneButton"
                             defaultButtonLabel={strings.AutomaticFontColor}

src/controls/richText/RichTextPropertyPane.types.ts

@@ -1,9 +1,11 @@
 import { Quill } from 'react-quill';
+import { ISwatchColor } from './SwatchColorPickerGroup.types';
 
 export interface IRichTextPropertyPaneProps {
   className?: string;
   editor: Quill;
   isOpen: boolean;
+  customColors?: ISwatchColor[];
   onClose: () => void;
   onLink: () => void;
 }

src/controls/richText/RteColorPicker.tsx

@@ -26,7 +26,6 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
    */
   public render(): React.ReactElement<IRteColorPickerProps> {
     const { buttonLabel, defaultButtonLabel, fillThemeColor, id, previewColor } = this.props;
-
     return (
       <div>
         <div ref={(ref) => this.wrapperRef = ref}>
@@ -36,7 +35,8 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
             <DefaultButton className={styles.colorPickerButton}
                            aria-describedby={id}
                            onClick={() => this.handleColorChanged(previewColor)}>
-              <svg className={`${styles.previewSvg} ${previewColor === "rgba(0, 0, 0, 0)" ? styles.border : ""}`}
+              {/* Added border to white */}
+              <svg className={`${styles.previewSvg} ${(previewColor === "rgba(0, 0, 0, 0)" || previewColor === "#ffffff") ? styles.border : ""}`}
                    fill={previewColor}
                    viewBox="0 0 20 20">
                 <rect className={styles.previewRectangle}
@@ -110,6 +110,12 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
       case "highlightColors":
         groupName = strings.HighlightColorsGroupName;
         break;
+      case "standardColors":
+        groupName = strings.StandardColorsGroupName;
+        break;
+      case "customColors":
+        groupName = strings.CustomColorsGroupName;
+        break;
       default:
         groupName = strings.HighlightColorsGroupName;
         break;
@@ -241,6 +247,9 @@ export default class RteColorPicker extends React.Component<IRteColorPickerProps
           }
         ];
         break;
+      case 'customColors':
+        groupColors = this.props.customColors;
+        break;
       default:
         groupColors = [
           {

src/controls/richText/RteColorPicker.types.ts

@@ -1,3 +1,5 @@
+import { ISwatchColor } from './SwatchColorPickerGroup.types';
+
 export interface IRteColorPickerProps {
   id: string;
   buttonLabel: string;
@@ -8,6 +10,7 @@ export interface IRteColorPickerProps {
   previewColor: string;
   selectedColor: string;
   switchToDefaultColor: () => void;
+  customColors?: ISwatchColor[];
 }
 
 export interface IRteColorPickerState {

src/controls/richText/SwatchColorPickerGroup.tsx

@@ -9,7 +9,6 @@ import { chunk } from '@microsoft/sp-lodash-subset';
 export default class SwatchColorPickerGroup extends React.Component<ISwatchColorPickerGroupProps, ISwatchColorPickerGroupState> {
   public render(): React.ReactElement<ISwatchColorPickerGroupProps> {
     const colorRows = chunk(this.props.groupColors, 5);
-
     return (
       <div>
         <Label htmlFor={this.props.groupText}