Rich Text Slate React Component

Introduction

rich-text-slate-rc provides an out-of-the-box rich text editor based on slate, and supports image uploading via uss-js-sdk.

We know that the slate editor provides powerful customization capabilities, and we can freely develop various plugins according to our own business needs, but if we repeatedly develop plugins in each project, it is a time-consuming thing.

So we wrap the rich-text-slate-rc component to support a series of operations, including：

• redo
• undo
• bold
• italic
• underline
• h1
• h2
• h3
• alignment[left]
• alignment[center]
• alignment[right]
• numbered-list
• bulleted-list
• strikethrough
• image uploader
• table[Insert Column,Remove Column,Insert Row,Remove Row,Remove Table]

Installation

• install from npm

yarn config set registry https://npm.shopee.io
yarn add rich-text-slate-rc

Getting Started

1. Rich text editor

import { RichEditor, encodeSlateValueToString } from 'rich-text-slate-rc'
import { Form } from 'antd'

// USS config of your project
export const USS_CONFIG = {
  appId: 'xxx',
  appSecret: 'xxx',
  baseUrl: 'https://xxx',
  bucketName: 'xxx'
}

const Com = () => {
  const [form] = Form.useForm()

  const handleFinish = values => {
    const { richText } = values
    const richTextString = encodeSlateValueToString(richText)
  }

  return (
    <Form form={form} onFinish={handleFinish}>
      <Form.Item name='richText' label='Rich Text'>
        <RichEditor ussOptions={USS_CONFIG} />
      </Form.Item>
      <Form.Item>
        <Button type='primary' htmlType='submit'>
          Save
        </Button>
      </Form.Item>
    </Form>
  )
}

2. Display rich text

import { RichTextDisplay } from 'rich-text-slate-rc'

const Com = ({ value }) => {
  return <RichTextDisplay value={value} />
}

API

RichTextDisplay

Component for displaying rich text.

| Param | Required | Type | Description | | ----- | -------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | value | - | Descendant[] | string | Value.The type of value is same as the value property of the component Slate in react-slate.It also can accept string that encoded from Descendant[]. |

RichEditor

Component for editing rich text.

| Param | Required | Type | Description | | ------------- | -------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ussOptions | - | IUSSOptions | Uss config, refs uss-js-sdk,USS API 文档 | | searchEmailFn | - | (config: { keyword: string }) => Promise<{ items: IHrisStaffsRespDataItems[]; [key: string]: any }> | Search email function.This function is called to filter users when we mention someone in hris. | | initialValue | - | Descendant[] | Initial value.The type of initialValue is same as the value property of the component Slate in react-slate. | | onChange | - | (value:Descendant[])=>void | This function is called when user input. |

IUSSOptions

| Param | Required | Type | Description | | --------------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------ | | appId | ✔️ | string | App id | | appSecret | ✔️ | string | App secret | | baseUrl | ✔️ | string | server domain | | bucketName | ✔️ | string | bucket name | | downloadBaseUrl | - | string | If the download server domain is difference from the upload server domain,please set downloadBaseUrl additionally. |

IHrisStaffsRespDataItems

| Param | Required | Type | Description | | ----- | -------- | ------ | ----------- | | email | ✔️ | string | User email | | name | ✔️ | string | User name |

Methods

• encodeSlateValueToString
• decodeStringToSlateValue
• getText
• getSlateMentions
• isEmptyValue
• serializeHtml
• deserializeHtml

encodeSlateValueToString Encode the slate value as a string to save to the database.

decodeStringToSlateValue Decode encoded string to slate value.

getText Get plain text from slate value.

getSlateMentions Sometimes you want to get all mention email list from slate value to notify BE to send an email to the users.This function will return a list of email list.

isEmptyValue To check if slate value is empty.

serializeHtml Serialize slate value to html string.

deserializeHtml Deserialize html element to slate value.

Related Docs

• USS API 文档