React-Steno

react-steno is a React library for WYSIWYG editor.

Installation

Use the package manager [npm] to install react-steno.

npm install react-steno

Features

• Make the selected text as Bold, Italic or Underline.
• Add customize background color to the editor and to font as well.
• If any text is seleted inside of editor and then applying the font color will apply the color to selected text.
• If no text is selected, then applying the font color will apply to the entire editor text.
• User will be able to retain the style of the content which the user is going to paste inside of editor.
• The above feature, will be helpfull when this editor is used inside of chatbox and one user wants to share the code with other user and the user also wants to keep the look of that code as it is looking inside of code editor.
• The parent component who is using the component, will be able to use the main methods like toggling the bold, italic and underline outside of editor component and anywhere inside of parent component.
• In simple words, the bold, italic and underline format options are not tightly coupled with our editor component and can be sued from anywhere inside of our parent component.
• user can create ordered and unordered list inside of editor.
• user has an option to change the font size from h1, h2, h3 ... h6 and normal indicate p tag.

Usage

Main Component of React-Steno.

Steno is the main component and consists of Tool bar options and the WYSIWYG editor.

Props

import Steno from "react-steno";

//props used by Steno.
<Steno 
    html={html}
    disabled={false} //indicate that the editor has to be in edit mode
    onChange={(val) => {setHtml(val)}}
    innerRef={editorRef} //ref attached to the editor
    backgroundColor={bgColor}
    onChangeBackgroundColor={(newColor) => setBgColor(newColor)}
    fontColor={textColor}
    onChangeFontColor={(newColor) => setTextColor(newColor)}
    functionRef={fnRef} //Ref which let parent component to access the methods inside of editor component
    isToolBarVisible={true} //to show/hide the toolbar options
    toolbarPosition={"bottom"} //to place the toolbar either at top or at bottom 
    formatStyle={false} //If true will let user to keep the style while pasting the content inside of editor
    onChangeOfKeepStyle={() => setFormatStyle(!formatStyle)} //handle to change the format style variable
    fileList={files} //List of file object to track the files selected by user
    onFileChange={handleFileChange} //handler to update the filelist array, This function will receive a file event object as an argument, when user add a new file/files to the list.
    removeTheFile={removeTheFile} //handler to delete the file from the filelist array, This function will receive a file name to be deleted as an argument.
    sendMsgOnEnter={false} //This will be used in case of chat application, where user wants to send msg on enter click.
    onEnterClickLogic={handleOnEnterClick} //If user selects sendMsgOnEnter as true, then he/she has to provide the onEnter logic
    autoHeight={true} //If autoHeight is true, then the editor area will grow from minEditorHeight to maxEditorHeight
    minEditorHeight='200px' // Default will be 100px
    maxEditorHeight="300px" // Default maxHeight will be 250px
    placeHolder="Type here..." // Default will be an empty string ""
    onClick={onClickOfEditor} // onClickOfEditor is a handler which handles the logic for on click of the editor
    toolbarChildVisibility={{ // toolbar object to manage the visibility of each toolbar option
      fontSize: true,
      textTransform: false,
      bold: true,
      italic: true,
      underline: true,
      makeLink: true,
      orderedList: false,
      unOrderedList: true,
      fontColor: false,
      backgroundColor: false,
      removeTextFormat: true,
      keepStyle: false,
      addFiles: true
    }}
    borderType={editorBorderType}
    onChangeOfBorderType={(val) => setEditorBorderType(val)}
    borderColor={editorBorderColor}
    onChangeOfBorderColor={(val) => setEditorBorderColor(val)}
    fontSize={fontSize}
    borderWidth={borderWidth}
    onChangeOfBorderWidth={(val) => setBorderWidth(val)}
    onChangeOfFontSize={(val) => setFontSize(val)}
    borderTypeConfig={{
      'solid': false,
      'dashed': true,
    }}
    enableResize={true}
    resizeConfig={{
      topLeft: true,
      topRight: true,
      bottomLeft: true,
      bottomRight: true
    }}
    applyFormatGlobally={false}
    verticalAlignment={'top' || 'center' || 'bottom'}
    horizontalAlignment={'left' || 'center' || 'right' || 'justify'}
/>

Parameter	Type	Description
html	string	Required. variable to store the html in text format which is coming from WYSIWYG editor.
disabled	boolean	Required. variable to denote whether the editor has to be in edit mode or not.
onChange	function	Required. handler to update the html variable. the updated string from the editor will be passed to this function and write your logic inside this function to update the html.
innerRef	Ref	Required. Reference attached to the editor to control the focus and blur of the editor.
backgroundColor	string	Required. denotes the back ground color applied to the editor.
onChangeBackgroundColor	function	Required. handler to update the back ground color applied to the editor.
fontColor	string	Required. denotes the font color applied to the editor.
onChangeFontColor	function	Required. handler to update the font color applied to the editor.
functionRef	Ref	Required. This reference will be attached to a custom objects which will have methods to toggle bold, underline and italic. This Reference will let the parent compoenent to execute the functions which are inside of editor component. Please refer the Notes section to see all the methods which will be attached to this Ref.
isToolBarVisible	boolean	Default : true. show/hide the toolbar options
formatStyle	boolean	Default : false. If true will let user to keep the style while pasting the content inside of editor.
onChangeOfKeepStyle	function	handler to toggle the format style option.
toolbarPosition	string	Default : top denotes the position to place the toolbar at top or at bottom.
onFocus	function	Optional function to provide the custom logic when the editor is focused.
onBlur	function	Optional function to provide the custom logic when the editor is blurred.
fileList	Array of file object	Required If toolbarChildVisibility['addFiles'] !== false List of file object to track the files selected by user
onFileChange	function	Required If toolbarChildVisibility['addFiles'] !== false handler to update the filelist array, This function will receive a file event object as an argument.
removeTheFile	function	Required If toolbarChildVisibility['addFiles'] !== false handler to delete the file from the filelist array, This function will receive a file name to be deleted as an argument.
sendMsgOnEnter	boolean	Optional, Default is false This will be used in case of chat application, where user wants to send msg on enter click. when this is true, then user can get to the new line by using shift + enter, ctrl + enter or alt + enter(in windows) and option + enter (in mac).
onEnterClickLogic	function	Required, If sendMsgOnEnter is true Handler to handle the on enter logic provided by user. This function will receive the updated html text from the editor and user has to use this value inside the given function
autoHeight	boolean	Optional, Default : 'false' If autoHeight is true then the editor height will grow from minEditorHeight to maxEditorHeight.
minEditorHeight	String	Optional, Default : '100px' If autoHeight is true, then this minEditorHeight will be treated as css minHeight property on editor and if the autoHeight is false then minEditorHeight will be treated as css height property on editor.
maxEditorHeight	String	Optional, Default : '250px' If autoHeight is true, then this maxEditorHeight will be treated as css maxHeight property on editor.
placeHolder	string	Optional, Default : "" Place holder string will be shown inside of an editor when there no text typed. Default value will be an empty string.
onClick	function	Optional handler function which will holds the logic for on click of the editor.
toolbarChildVisibility	object	Optional Default will be true for each toolbar option toolbar object to manage the visibility of each toolbar option. each property name should match with the above given demo. In case if the object is not provided or the property is not mentioned then the particular toolbar option will be visible.
borderColor	string	Optonal. denotes the border color applied to the editor.
onChangeOfBorderColor	function	Required if borderColor is not undefined. handler to update the border color applied to the editor.
fontSize	number	Optional, Default : 16 It is the font size of the entire text editor.
onChangeOfFontSize	function	Optional. handler to update the font size applied to the editor.
borderWidth	number	Optional, Default : 1 It is the border width of the text editor area.
onChangeOfBorderWidth	function	Optional. handler to update the border width applied to the text editor area.
borderTypeConfig	Object	Optional. We have many different types of border and by default all if the borders type will be shown in the dropdown and if user wants to display only few of the border types then they can take the help of this prop and pass the key value property in which key denotes the border type name and value is a boolean true and false (denoting whether to display this border type in dropdown or not)
enableResize	boolean	Optional, Default : false enabling the resize will let the user to resize the text editor from 4 corners. The Resize on height will only work if the autoHeight prop is true.
resizeConfig	Object	Optional, Default : All 4 corners will be resizable if enableresize is true User can disable the resize from any of the corner. This prop will take key value property in which key is the corner name ('topLeft', 'bottomLeft', 'topRight', 'bottomRight') and value will be boolean value either true or false. false denoting the disabling of the particular corner resize.
verticalAlignment	String	Optional, Default : 'top' It will be used align the editor content vertically.
horizontalAlignment	String	Optional, Default : 'left' It will be used align the editor content horizontally.
applyFormatGlobally	Boolean	Optional, Default : false When applying the format like bold, italic, underline and strike through and user has not selected text, then enabling this prop will apply the format to the entire content in the editor.
padding	Number	Optional, Default : 5 It will set the padding for the editor area and the unit will be pixel.

Notes

• below are the details of all the functions which will be attached to the functionRef prop.

  • toggleStyle - This function is used to toggle the style of the selected text.

    • paran {e} - event object
    • param {action} - {String} - action to be performed on the selected text. any of the one value ['bold', 'italic', 'underline'].

  • handleHeadingChange - This function is used to change the type of the HTML element for the sentence where the mouse cursor is currenlty present.

    • param {e} - event object
    • param {action} - {String} - action to be performed on the selected text. any of the one value ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].

  • removeFormatting - This function is used to remove the formatting of the selected text.

    • param {e} - event object

  • toggleOrderedList - This function is used to create ordered list and unordered list at the given mouse cursor position.

    • param {e} - event object
    • param {listName} - {String} - what type of list to be added or removed at the given mouse cursor position. any of the one value ['ol', 'ul']

  • setTheColorForSelectedText - This function is used to set the color for the selected text.

    • param {selectedColor} - {String} - color to be applied on the selected text.

  • applyTextTransform - This function is used to apply the text transform on the selected text and if no text is selected then the text transform will be applied globally to the entire editor.

    • param {e} - event object
    • param {action} - {String} - action to be performed on the selected text. any of the one value ['all-Caps', 'default-text', 'capitalize', 'sentenceCase'].

The main components of React-Steno

Component	Description
ToolBar	It will consiste of list of all the formatting options which will be used by editor.
Editor	The Editor component is an engine of our machine. The Editor component will have all the methods to format the selected text.