@haleyinc/mui-rich-editor

mui-rich-editor

Library for a rich text editor and viewer built with Material UI and Slate js

Install

npm i --save @haleyinc/mui-rich-editor

Usage

import { RichEditor, parseContent, stringify } from '@haleyinc/mui-rich-editor'

<RichEditor
    val={parseContent(content)}
    placeholder='Start here...'
    toggleFullScreen={toggleDialog}
    isFullscreen={isDialogOpen}
    onChange={c => {
        setContent(stringify(c))
    }}
    isEditable={true}
/>

Display Rich Text

import { RichEditor, parseContent } from '@haleyinc/mui-rich-editor'

<RichEditor
    val={parseContent(content)}
    isEditable={false}
/>

Exports

Export	Description
RichEditor	The editor and component to display the rich text
RichEditorDialog	Dialog component to allow editor to go fullscreen
parseContent	Helper function to parse a string value to the object the editor is expecting
stringify	Helper function to stringify the rich text object to a string in order to store the value easily
ICONS	Icon map to each action
TIPS	Icon description for each action
FormatIcon	React component to render Icon from action and active status

Props

RichEditor Props

Prop	Description	Required	Default
val	Value to render in editor.	Yes	Will render object with empty text
onChange	Function to call when content in the editor has changed.	No	noop
toggleFullScreen	Function to handle the toggling of fullscreen.	No	noop
isFullscreen	Boolean value to signify if the editor is in fullscreen mode.	No	false
isEditable	Boolean value to signify if the editor is in edit mode or display mode.	No	true
placeholder	String to put as placeholder in editor	'Start typing here…'
transformLink	Function to alter link before it is rendered. Must return a link. (Used for tracking link clicks by redirecting from backend).	link => link

RichEditorDialog Props

Prop	Description	Required	Default
open	Boolean value to signify if the dialog is open or not.	Yes	false
children	Children to render inside the dialog content. Should be the RichEditor itself.	Yes

Resources

Material UI

• Docs

Rich Editor - Slate

• Docs
• Examples
• Serializing
• Inlines
• Images