TextEditor

TextEditor allows users to create, edit, and format text with various styling options. It provides a user-friendly interface by offering features such as font formatting, bullet points, numbering, hyperlinks, and more..

Props

Prop	Type	Default	Description
id	string		A unique id used when rendering multiple TextEditor component. Optional otherwise.
enableToolbar	boolean	true	If the enableToolbar prop is set to false, the toolbar, including the buttons, will be hidden.
readOnly	boolean	false	The editor will be in readonly mode when the readOnly prop is set to true
disableEditor	boolean	false	The editor will be in disabled background when disableEditor prop is set to true
onUpdate	func		callback called when the editor state changes.
value	MyValue		Value of the editor.
valueFormat	"JSON" \| "HTML"	JSON	returns the editor value in html format if valueFormat is set to "HTML" and accepts the html data as "string"
autoFormat			Auto formatting can be done as numbered or bulleted list when manually entered. eg: 1. , 1) , * , - , option+8

Examples

Basic

<TextEditor id="TextEditorBasic" />

Save and Render(JSON)

() => {
  const [message, setmessage] = React.useState([
    { type: 'p', children: [{ text: '' }] },
  ]);

  const [clicked, setClicked] = React.useState(false);
  const [displayValue, setDisplayValue] = React.useState([
    { children: [{ text: '' }] },
  ]);

  const jsonBoxStyle = {
    width: '518px',
    height: '100px',
    overflow: 'auto',
  };

  React.useEffect(() => {
    setmessage(message);
    setClicked(false);
  }, [message]);

  return (
    <>
      <TextEditor
        id="TextEditorJson"
        onUpdate={(val) => {
          setmessage(val);
        }}
        value={message}
        readOnly={clicked}
      />

      <Button
        style={{ margin: '10px 0px' }}
        onClick={() => {
          setClicked(true), setDisplayValue(message);
        }}
      >
        Save
      </Button>

      {clicked && (
        <>
          <h3> JSON Object: </h3>
          <Box sx={jsonBoxStyle}>
            <pre>{message}</pre>
          </Box>
        </>
      )}
    </>
  );
};

Save and Render(HTML)

() => {
  const [message, setmessage] = React.useState([
    { type: 'p', children: [{ text: '' }] },
  ]);

  const [clicked, setClicked] = React.useState(false);
  const [displayValue, setDisplayValue] = React.useState([
    { children: [{ text: '' }] },
  ]);

  const htmlBoxStyle = {
    width: '518px',
    height: '100px',
    overflow: 'auto',
  };

  React.useEffect(() => {
    setmessage(message);
    setClicked(false);
  }, [message]);

  return (
    <>
      <TextEditor
        id="TextEditorHtml"
        onUpdate={(val) => {
          setmessage(val);
        }}
        value={message}
        valueFormat={'HTML'}
      />

      <Button
        style={{ margin: '10px 0px' }}
        onClick={() => {
          setClicked(true), setDisplayValue(message);
        }}
      >
        Save
      </Button>

      {clicked && (
        <>
          <h3> HTML Data: </h3>
          <Box sx={htmlBoxStyle}>
            <pre>{message}</pre>
          </Box>
        </>
      )}
    </>
  );
};

Read Only

<TextEditor id="TextEditorReadOnly" readOnly={true} />

Read Only with no icon

<TextEditor id="TextEditorReadOnly" readOnly={true} iconVisible={false} />

Table Support (Read Only)

() => {
  // Hard coded Slate value
  const message = [
    { type: 'h2', text: 'Lorem Ipsum Table' },
    {
      type: 'table',
      children: [
        {
          type: 'tr',
          children: [
            {
              type: 'td',
              children: [
                {
                  type: 'p',
                  children: [{ bold: true, text: 'Table Support' }],
                },
              ],
            },
            {
              type: 'td',
              children: [
                {
                  type: 'p',
                  children: [{ bold: true, text: 'Awesome Table' }],
                },
              ],
            },
          ],
        },
        {
          type: 'tr',
          children: [
            {
              type: 'td',
              children: [
                {
                  type: 'p',
                  children: [
                    {
                      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt feugiat ante. Pellentesque in nisl sed mi consequat faucibus ultrices vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec pretium massa velit, ac ultricies quam efficitur eget. Sed elementum, magna id sodales ornare, tortor felis cursus velit, vitae feugiat metus sem eget odio. Nam sollicitudin sem eget sodales convallis. Vivamus semper in ligula non vehicula. ',
                    },
                  ],
                },
              ],
            },
            {
              type: 'td',
              children: [
                {
                  type: 'p',
                  children: [
                    {
                      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt feugiat ante. Pellentesque in nisl sed mi consequat faucibus ultrices vitae lectus. ',
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          type: 'tr',
          children: [
            {
              type: 'td',
              children: [
                {
                  type: 'p',
                  children: [
                    {
                      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt feugiat ante. Pellentesque in nisl sed mi consequat faucibus ultrices vitae lectus. ',
                    },
                  ],
                },
              ],
            },
            {
              type: 'td',
              children: [
                {
                  type: 'p',
                  children: [
                    {
                      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt feugiat ante. Pellentesque in nisl sed mi consequat faucibus ultrices vitae lectus. ',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
  ];
  return (
    <>
      <TextEditor id="TextEditorJson" value={message} readOnly />
    </>
  );
};