Merge pull request #1773 from HarminderSethi/dev

Added style property to Rich text control.
pnp · Mar 4, 2024 · b8cb07c · b8cb07c
2 parents 4cbc6ea + 9e65307
commit b8cb07c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/docs/documentation/docs/controls/RichText.md b/docs/documentation/docs/controls/RichText.md
@@ -70,6 +70,7 @@ The RichText control can be configured with the following properties:
 | id | string | no | The ID to apply to the RichText control. |
 | label | string | no | The label displayed above the RichText control. |
 | className | string | no | The custom CSS class to apply to the RichText control. |
+| style | React.CSSProperties | no | The custom styles to apply to the RichText control. |
 | isEditMode | boolean | no | `true` indicates that users will be able to edit the content of the RichText control. `false` will display the rich text as read-only. |
 | styleOptions | StyleOptions | no | Define the styles you want to show or hide for the rich text editor |
 | value | string | no | Sets the rich text to display in the RichText control. |

diff --git a/src/controls/richText/RichText.tsx b/src/controls/richText/RichText.tsx
@@ -467,7 +467,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, showImage } } = this.props;
+    const { placeholder,style, styleOptions: { showStyles, showBold, showItalic, showUnderline, showAlign, showList, showLink, showMore, showImage } } = this.props;
 
     // Get a unique id for the toolbar
     const modules = {
@@ -516,7 +516,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     ReactQuillInstance.register(sizeClass, true);
 
     return (
-      <div ref={(ref) => { this._wrapperRef = ref; }} className={css(styles.richtext && this.state.editing ? 'ql-active' : null, this.props.className || null) || null}>
+      <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 }}>
           {

diff --git a/src/controls/richText/RichText.types.ts b/src/controls/richText/RichText.types.ts
@@ -1,3 +1,4 @@
+import React from 'react';
 import { ISwatchColor } from './SwatchColorPickerGroup.types';
 export interface IRichTextProps {
   /**
@@ -18,6 +19,12 @@ export interface IRichTextProps {
    */
   className?: string;
 
+  /**
+   * Styles to apply to the rich text editor.
+   * @defaultvalue null
+   */
+  style?: React.CSSProperties;
+
   /**
    * Indicates if the rich text editor should be in edit mode
    * @defaultvalue true
@@ -28,7 +35,7 @@ export interface IRichTextProps {
    * Placeholder text to show when editor is empty.
    * @defaultvalue undefined
    */
-  placeholder? : string;
+  placeholder?: string;
 
   /**
    * The HTML text containing the rich text