Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added style property to Rich text control. #1773

Merged
merged 1 commit into from
Mar 4, 2024
Merged

Added style property to Rich text control. #1773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/documentation/docs/controls/RichText.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
4 changes: 2 additions & 2 deletions src/controls/richText/RichText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 }}>
{
Expand Down
9 changes: 8 additions & 1 deletion src/controls/richText/RichText.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React from 'react';
import { ISwatchColor } from './SwatchColorPickerGroup.types';
export interface IRichTextProps {
/**
Expand All @@ -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
Expand All @@ -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
Expand Down