RichTextEditor

TODO: Write description.

Installyarn add @diallink-corp/convergo-react-richtexteditor
Version4.1.2
Usageimport {RichTextEditor} from '@diallink-corp/convergo-react-richtexteditor'

Playground

function Example() {
  const { createRootNode } = useRootNode();
  const { createHeadingNode } = useHeadingNode();
  const { createQuoteNode } = useQuoteNode();
  const { createParagraphNode } = useParagraphNode();
  const { createListItemNode } = useListItemNode();

  const initialValue = useMemo(() => {
    const root = createRootNode();
    root.appendChild(createHeadingNode(1)).appendChild(
      new TextNode('Welcome to the playground')
    );
    root
      .appendChild(createQuoteNode())
      .appendChild(
        new TextNode(
          "In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting."
        )
      );
    root
      .appendChild(createParagraphNode())
      .append(
        new TextNode('The playground is a demo environment built with '),
        new TextNode('@diallink-corp/convergo', null, {
          format: TextFormat.Underline
        }),
        new TextNode('. Try typing in '),
        new TextNode('some text', null, { format: TextFormat.Bold }),
        new TextNode(' with '),
        new TextNode('different', null, { format: TextFormat.Italic }),
        new TextNode(' formats.')
      );
    root
      .appendChild(createParagraphNode())
      .appendChild(
        new TextNode(
          'Make sure to check out the various plugins in the toolbar.'
        )
      );
    root
      .appendChild(createParagraphNode())
      .appendChild(
        new TextNode("If you'd like to find out more about Convergo, you can:")
      );

    const listItem1 = createListItemNode();
    listItem1.append(
      new TextNode('Visit the '),
      new LinkNode(
        'https://convergo.diallink.dev/docs/convergo-react/theming.html'
      ).appendChild(
        new TextNode('Convergo website')
      ).parentNode,
      new TextNode(' for documentation and more information.')
    );

    const listItem2 = createListItemNode();
    listItem2.append(
      new TextNode('Check out the code on our '),
      new LinkNode('https://github.com/diallink-corp/diallink-convergo')
        .appendChild(new TextNode('GitHub repository'))
        .parentNode,
      new TextNode('.')
    );

    root.appendChild(new ListNode('bullet')).append(listItem1, listItem2);
    root
      .appendChild(createParagraphNode())
      .append(
        new TextNode(
          "Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance "
        ),
        new EmojiNode('😊'),
        new TextNode('.')
      );

    return root;
  }, []);

  const [isQuickActionBarOpen, setQuickActionBarOpen] = useState();
  const [html, setHtml] = useState('');

  return (
    <>
      <RichTextEditor
        label="Convergo Rich Text Editor"
        placeholder="Enter some rich text..."
        onChange={setHtml}
        rootNode={initialValue}
        isRequired
      >
        <ToolbarPlugin isDisabled={isQuickActionBarOpen} />
        <ContentEditable />
        <QuickActionBarPlugin onOpenChange={setQuickActionBarOpen} />
        <TreeViewPlugin />
      </RichTextEditor>
      <Preview html={html} />
    </>
  );
}

function Example() {
  const { createRootNode } = useRootNode();
  const { createHeadingNode } = useHeadingNode();
  const { createQuoteNode } = useQuoteNode();
  const { createParagraphNode } = useParagraphNode();
  const { createListItemNode } = useListItemNode();

  const initialValue = useMemo(() => {
    const root = createRootNode();
    root.appendChild(createHeadingNode(1)).appendChild(
      new TextNode('Welcome to the playground')
    );
    root
      .appendChild(createQuoteNode())
      .appendChild(
        new TextNode(
          "In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting."
        )
      );
    root
      .appendChild(createParagraphNode())
      .append(
        new TextNode(
          'The playground is a demo environment built with '
        ),
        new TextNode('@diallink-corp/convergo', null, {
          format: TextFormat.Underline
        }),
        new TextNode('. Try typing in '),
        new TextNode('some text', null, {
          format: TextFormat.Bold
        }),
        new TextNode(' with '),
        new TextNode('different', null, {
          format: TextFormat.Italic
        }),
        new TextNode(' formats.')
      );
    root
      .appendChild(createParagraphNode())
      .appendChild(
        new TextNode(
          'Make sure to check out the various plugins in the toolbar.'
        )
      );
    root
      .appendChild(createParagraphNode())
      .appendChild(
        new TextNode(
          "If you'd like to find out more about Convergo, you can:"
        )
      );

    const listItem1 = createListItemNode();
    listItem1.append(
      new TextNode('Visit the '),
      new LinkNode(
        'https://convergo.diallink.dev/docs/convergo-react/theming.html'
      ).appendChild(
        new TextNode('Convergo website')
      ).parentNode,
      new TextNode(
        ' for documentation and more information.'
      )
    );

    const listItem2 = createListItemNode();
    listItem2.append(
      new TextNode('Check out the code on our '),
      new LinkNode(
        'https://github.com/diallink-corp/diallink-convergo'
      ).appendChild(new TextNode('GitHub repository'))
        .parentNode,
      new TextNode('.')
    );

    root.appendChild(new ListNode('bullet')).append(
      listItem1,
      listItem2
    );
    root
      .appendChild(createParagraphNode())
      .append(
        new TextNode(
          "Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance "
        ),
        new EmojiNode('😊'),
        new TextNode('.')
      );

    return root;
  }, []);

  const [isQuickActionBarOpen, setQuickActionBarOpen] =
    useState();
  const [html, setHtml] = useState('');

  return (
    <>
      <RichTextEditor
        label="Convergo Rich Text Editor"
        placeholder="Enter some rich text..."
        onChange={setHtml}
        rootNode={initialValue}
        isRequired
      >
        <ToolbarPlugin isDisabled={isQuickActionBarOpen} />
        <ContentEditable />
        <QuickActionBarPlugin
          onOpenChange={setQuickActionBarOpen}
        />
        <TreeViewPlugin />
      </RichTextEditor>
      <Preview html={html} />
    </>
  );
}

function Example() {
  const {
    createRootNode
  } = useRootNode();
  const {
    createHeadingNode
  } = useHeadingNode();
  const {
    createQuoteNode
  } = useQuoteNode();
  const {
    createParagraphNode
  } = useParagraphNode();
  const {
    createListItemNode
  } = useListItemNode();

  const initialValue =
    useMemo(() => {
      const root =
        createRootNode();
      root.appendChild(
        createHeadingNode(
          1
        )
      ).appendChild(
        new TextNode(
          'Welcome to the playground'
        )
      );
      root
        .appendChild(
          createQuoteNode()
        )
        .appendChild(
          new TextNode(
            "In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting."
          )
        );
      root
        .appendChild(
          createParagraphNode()
        )
        .append(
          new TextNode(
            'The playground is a demo environment built with '
          ),
          new TextNode(
            '@diallink-corp/convergo',
            null,
            {
              format:
                TextFormat
                  .Underline
            }
          ),
          new TextNode(
            '. Try typing in '
          ),
          new TextNode(
            'some text',
            null,
            {
              format:
                TextFormat
                  .Bold
            }
          ),
          new TextNode(
            ' with '
          ),
          new TextNode(
            'different',
            null,
            {
              format:
                TextFormat
                  .Italic
            }
          ),
          new TextNode(
            ' formats.'
          )
        );
      root
        .appendChild(
          createParagraphNode()
        )
        .appendChild(
          new TextNode(
            'Make sure to check out the various plugins in the toolbar.'
          )
        );
      root
        .appendChild(
          createParagraphNode()
        )
        .appendChild(
          new TextNode(
            "If you'd like to find out more about Convergo, you can:"
          )
        );

      const listItem1 =
        createListItemNode();
      listItem1.append(
        new TextNode(
          'Visit the '
        ),
        new LinkNode(
          'https://convergo.diallink.dev/docs/convergo-react/theming.html'
        ).appendChild(
          new TextNode(
            'Convergo website'
          )
        ).parentNode,
        new TextNode(
          ' for documentation and more information.'
        )
      );

      const listItem2 =
        createListItemNode();
      listItem2.append(
        new TextNode(
          'Check out the code on our '
        ),
        new LinkNode(
          'https://github.com/diallink-corp/diallink-convergo'
        ).appendChild(
          new TextNode(
            'GitHub repository'
          )
        )
          .parentNode,
        new TextNode('.')
      );

      root.appendChild(
        new ListNode(
          'bullet'
        )
      ).append(
        listItem1,
        listItem2
      );
      root
        .appendChild(
          createParagraphNode()
        )
        .append(
          new TextNode(
            "Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance "
          ),
          new EmojiNode(
            '😊'
          ),
          new TextNode(
            '.'
          )
        );

      return root;
    }, []);

  const [
    isQuickActionBarOpen,
    setQuickActionBarOpen
  ] = useState();
  const [html, setHtml] =
    useState('');

  return (
    <>
      <RichTextEditor
        label="Convergo Rich Text Editor"
        placeholder="Enter some rich text..."
        onChange={setHtml}
        rootNode={initialValue}
        isRequired
      >
        <ToolbarPlugin
          isDisabled={isQuickActionBarOpen}
        />
        <ContentEditable />
        <QuickActionBarPlugin
          onOpenChange={setQuickActionBarOpen}
        />
        <TreeViewPlugin />
      </RichTextEditor>
      <Preview
        html={html}
      />
    </>
  );
}

onChange plugin

function Example() {
  const [serializedHTML, setSerializedHTML] = useState('');

  return (
    <>
      <RichTextEditor
        defaultValue={`<div><h1 class="" key="2" style="margin-block: 0px 1rem; font-size: 2.7rem; line-height: 3.6rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; padding-inline-start: 0rem;" align="center"><strong class="" key="147" style="font-weight: 600;">Welcome to the playground </strong><span class="" key="146" role="img">😊</span></h1><blockquote class="" key="4" style="font-size: 1.4rem; line-height: 2.2rem; color: rgb(104, 128, 161); font-weight: 400; font-family: Inter; font-style: normal; background-color: rgb(245, 249, 255); border-left: 4px solid rgb(235, 242, 255); margin-block: 0px 1rem; margin-inline: 2rem 0px; padding-inline-start: 2rem;"><span class="" key="5">In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.</span></blockquote><p class="" key="6" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="7">The playground is a demo environment built with </span><span class="" key="8" style="text-decoration-line: underline;">@diallink-corp/convergo</span><span class="" key="9">. Try typing in </span><strong class="" key="10" style="font-weight: 600;">some text</strong><span class="" key="11"> with </span><em class="" key="12" style="font-style: italic;">different</em><span class="" key="13"> formats.</span></p><p class="" key="14" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="15">Make sure to check out the various plugins in the toolbar.</span></p><p class="" key="16" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="17">If you'd like to find out more about Convergo, you can:</span></p><ul class="" key="28" style="padding-inline-start: 0rem;"><li class="" key="18" value="1" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" key="19">Visit the </span><a class="" key="20" href="https://convergo.diallink.dev/docs/convergo-react/theming.html"><span class="" key="21">Convergo website</span></a><span class="" key="22"> for documentation and more information.</span></li><li class="" key="23" value="2" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" key="24">Check out the code on our </span><a class="" key="25" href="https://github.com/diallink-corp/diallink-convergo"><span class="" key="26">GitHub repository</span></a><span class="" key="27">.</span></li></ul><p class="" key="29" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="30">Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance </span><span class="" key="31" role="img">😊</span><span class="" key="32">.</span></p></div>`}
        onChange={setSerializedHTML}
      >
        <ToolbarPlugin />
        <ContentEditable />
      </RichTextEditor>
      <Text>{serializedHTML}</Text>
    </>
  );
}

function Example() {
  const [serializedHTML, setSerializedHTML] = useState('');

  return (
    <>
      <RichTextEditor
        defaultValue={`<div><h1 class="" key="2" style="margin-block: 0px 1rem; font-size: 2.7rem; line-height: 3.6rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; padding-inline-start: 0rem;" align="center"><strong class="" key="147" style="font-weight: 600;">Welcome to the playground </strong><span class="" key="146" role="img">😊</span></h1><blockquote class="" key="4" style="font-size: 1.4rem; line-height: 2.2rem; color: rgb(104, 128, 161); font-weight: 400; font-family: Inter; font-style: normal; background-color: rgb(245, 249, 255); border-left: 4px solid rgb(235, 242, 255); margin-block: 0px 1rem; margin-inline: 2rem 0px; padding-inline-start: 2rem;"><span class="" key="5">In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.</span></blockquote><p class="" key="6" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="7">The playground is a demo environment built with </span><span class="" key="8" style="text-decoration-line: underline;">@diallink-corp/convergo</span><span class="" key="9">. Try typing in </span><strong class="" key="10" style="font-weight: 600;">some text</strong><span class="" key="11"> with </span><em class="" key="12" style="font-style: italic;">different</em><span class="" key="13"> formats.</span></p><p class="" key="14" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="15">Make sure to check out the various plugins in the toolbar.</span></p><p class="" key="16" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="17">If you'd like to find out more about Convergo, you can:</span></p><ul class="" key="28" style="padding-inline-start: 0rem;"><li class="" key="18" value="1" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" key="19">Visit the </span><a class="" key="20" href="https://convergo.diallink.dev/docs/convergo-react/theming.html"><span class="" key="21">Convergo website</span></a><span class="" key="22"> for documentation and more information.</span></li><li class="" key="23" value="2" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" key="24">Check out the code on our </span><a class="" key="25" href="https://github.com/diallink-corp/diallink-convergo"><span class="" key="26">GitHub repository</span></a><span class="" key="27">.</span></li></ul><p class="" key="29" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="30">Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance </span><span class="" key="31" role="img">😊</span><span class="" key="32">.</span></p></div>`}
        onChange={setSerializedHTML}
      >
        <ToolbarPlugin />
        <ContentEditable />
      </RichTextEditor>
      <Text>{serializedHTML}</Text>
    </>
  );
}

function Example() {
  const [
    serializedHTML,
    setSerializedHTML
  ] = useState('');

  return (
    <>
      <RichTextEditor
        defaultValue={`<div><h1 class="" key="2" style="margin-block: 0px 1rem; font-size: 2.7rem; line-height: 3.6rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; padding-inline-start: 0rem;" align="center"><strong class="" key="147" style="font-weight: 600;">Welcome to the playground </strong><span class="" key="146" role="img">😊</span></h1><blockquote class="" key="4" style="font-size: 1.4rem; line-height: 2.2rem; color: rgb(104, 128, 161); font-weight: 400; font-family: Inter; font-style: normal; background-color: rgb(245, 249, 255); border-left: 4px solid rgb(235, 242, 255); margin-block: 0px 1rem; margin-inline: 2rem 0px; padding-inline-start: 2rem;"><span class="" key="5">In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.</span></blockquote><p class="" key="6" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="7">The playground is a demo environment built with </span><span class="" key="8" style="text-decoration-line: underline;">@diallink-corp/convergo</span><span class="" key="9">. Try typing in </span><strong class="" key="10" style="font-weight: 600;">some text</strong><span class="" key="11"> with </span><em class="" key="12" style="font-style: italic;">different</em><span class="" key="13"> formats.</span></p><p class="" key="14" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="15">Make sure to check out the various plugins in the toolbar.</span></p><p class="" key="16" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="17">If you'd like to find out more about Convergo, you can:</span></p><ul class="" key="28" style="padding-inline-start: 0rem;"><li class="" key="18" value="1" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" key="19">Visit the </span><a class="" key="20" href="https://convergo.diallink.dev/docs/convergo-react/theming.html"><span class="" key="21">Convergo website</span></a><span class="" key="22"> for documentation and more information.</span></li><li class="" key="23" value="2" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" key="24">Check out the code on our </span><a class="" key="25" href="https://github.com/diallink-corp/diallink-convergo"><span class="" key="26">GitHub repository</span></a><span class="" key="27">.</span></li></ul><p class="" key="29" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" key="30">Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance </span><span class="" key="31" role="img">😊</span><span class="" key="32">.</span></p></div>`}
        onChange={setSerializedHTML}
      >
        <ToolbarPlugin />
        <ContentEditable />
      </RichTextEditor>
      <Text>
        {serializedHTML}
      </Text>
    </>
  );
}

Default value

<RichTextEditor
  defaultValue={`<div style="padding-inline-start: 0rem;font-size: 1.4rem;line-height: 2.2rem;font-weight: 400;color: hsla(218, 97%, 23%, 1);width: 100%;user-select: text;white-space: pre-wrap;word-break: break-word;-webkit-font-smoothing: antialiased;"><h1 class="" data-editor-key="751" align="center" style="margin-block: 0px 1rem; font-size: 2.7rem; line-height: 3.6rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; padding-inline-start: 0rem;"><strong class="" data-editor-key="752" style="font-weight: 600;">Welcome to the playground </strong><span class="" data-editor-key="753">😊</span></h1><blockquote class="" data-editor-key="754" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: rgb(104, 128, 161); font-weight: 400; font-family: Inter; font-style: normal; background-color: rgb(245, 249, 255); border-left: 4px solid rgb(235, 242, 255); margin-block: 0px 1rem; margin-inline: 2rem 0px; padding-inline-start: 2rem;"><span class="" data-editor-key="755">In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.</span></blockquote><p class="" data-editor-key="756" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="757">The playground is a demo environment built with </span><span class="" data-editor-key="758" style="text-decoration-line: underline;">@diallink-corp/convergo</span><span class="" data-editor-key="759">. Try typing in </span><strong class="" data-editor-key="760" style="font-weight: 600;">some text</strong><span class="" data-editor-key="761"> with </span><em class="" data-editor-key="762" style="font-style: italic;">different</em><span class="" data-editor-key="763"> formats.</span></p><p class="" data-editor-key="764" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="765">Make sure to check out the various plugins in the toolbar.</span></p><p class="" data-editor-key="766" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="767">If you'd like to find out more about Convergo, you can:</span></p><ul class="" data-editor-key="768" style="padding-inline-start: 0rem;"><li class="" data-editor-key="769" align="left" value="1" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" data-editor-key="770">Visit the </span><a class="" data-editor-key="771" href="https://convergo.diallink.dev/docs/convergo-react/theming.html"><span class="" data-editor-key="772">Convergo website</span></a><span class="" data-editor-key="773"> for documentation and more information.</span></li><li class="" data-editor-key="774" align="left" value="2" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" data-editor-key="775">Check out the code on our </span><a class="" data-editor-key="776" href="https://github.com/diallink-corp/diallink-convergo"><span class="" data-editor-key="777">GitHub repository</span></a><span class="" data-editor-key="778">.</span></li></ul><p class="" data-editor-key="779" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="782">Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 😊.</span></p></div>`}
>
  <ToolbarPlugin />
  <ContentEditable />
</RichTextEditor>
<RichTextEditor
  defaultValue={`<div style="padding-inline-start: 0rem;font-size: 1.4rem;line-height: 2.2rem;font-weight: 400;color: hsla(218, 97%, 23%, 1);width: 100%;user-select: text;white-space: pre-wrap;word-break: break-word;-webkit-font-smoothing: antialiased;"><h1 class="" data-editor-key="751" align="center" style="margin-block: 0px 1rem; font-size: 2.7rem; line-height: 3.6rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; padding-inline-start: 0rem;"><strong class="" data-editor-key="752" style="font-weight: 600;">Welcome to the playground </strong><span class="" data-editor-key="753">😊</span></h1><blockquote class="" data-editor-key="754" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: rgb(104, 128, 161); font-weight: 400; font-family: Inter; font-style: normal; background-color: rgb(245, 249, 255); border-left: 4px solid rgb(235, 242, 255); margin-block: 0px 1rem; margin-inline: 2rem 0px; padding-inline-start: 2rem;"><span class="" data-editor-key="755">In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.</span></blockquote><p class="" data-editor-key="756" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="757">The playground is a demo environment built with </span><span class="" data-editor-key="758" style="text-decoration-line: underline;">@diallink-corp/convergo</span><span class="" data-editor-key="759">. Try typing in </span><strong class="" data-editor-key="760" style="font-weight: 600;">some text</strong><span class="" data-editor-key="761"> with </span><em class="" data-editor-key="762" style="font-style: italic;">different</em><span class="" data-editor-key="763"> formats.</span></p><p class="" data-editor-key="764" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="765">Make sure to check out the various plugins in the toolbar.</span></p><p class="" data-editor-key="766" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="767">If you'd like to find out more about Convergo, you can:</span></p><ul class="" data-editor-key="768" style="padding-inline-start: 0rem;"><li class="" data-editor-key="769" align="left" value="1" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" data-editor-key="770">Visit the </span><a class="" data-editor-key="771" href="https://convergo.diallink.dev/docs/convergo-react/theming.html"><span class="" data-editor-key="772">Convergo website</span></a><span class="" data-editor-key="773"> for documentation and more information.</span></li><li class="" data-editor-key="774" align="left" value="2" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" data-editor-key="775">Check out the code on our </span><a class="" data-editor-key="776" href="https://github.com/diallink-corp/diallink-convergo"><span class="" data-editor-key="777">GitHub repository</span></a><span class="" data-editor-key="778">.</span></li></ul><p class="" data-editor-key="779" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="782">Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 😊.</span></p></div>`}
>
  <ToolbarPlugin />
  <ContentEditable />
</RichTextEditor>
<RichTextEditor
  defaultValue={`<div style="padding-inline-start: 0rem;font-size: 1.4rem;line-height: 2.2rem;font-weight: 400;color: hsla(218, 97%, 23%, 1);width: 100%;user-select: text;white-space: pre-wrap;word-break: break-word;-webkit-font-smoothing: antialiased;"><h1 class="" data-editor-key="751" align="center" style="margin-block: 0px 1rem; font-size: 2.7rem; line-height: 3.6rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; padding-inline-start: 0rem;"><strong class="" data-editor-key="752" style="font-weight: 600;">Welcome to the playground </strong><span class="" data-editor-key="753">😊</span></h1><blockquote class="" data-editor-key="754" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: rgb(104, 128, 161); font-weight: 400; font-family: Inter; font-style: normal; background-color: rgb(245, 249, 255); border-left: 4px solid rgb(235, 242, 255); margin-block: 0px 1rem; margin-inline: 2rem 0px; padding-inline-start: 2rem;"><span class="" data-editor-key="755">In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.</span></blockquote><p class="" data-editor-key="756" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="757">The playground is a demo environment built with </span><span class="" data-editor-key="758" style="text-decoration-line: underline;">@diallink-corp/convergo</span><span class="" data-editor-key="759">. Try typing in </span><strong class="" data-editor-key="760" style="font-weight: 600;">some text</strong><span class="" data-editor-key="761"> with </span><em class="" data-editor-key="762" style="font-style: italic;">different</em><span class="" data-editor-key="763"> formats.</span></p><p class="" data-editor-key="764" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="765">Make sure to check out the various plugins in the toolbar.</span></p><p class="" data-editor-key="766" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="767">If you'd like to find out more about Convergo, you can:</span></p><ul class="" data-editor-key="768" style="padding-inline-start: 0rem;"><li class="" data-editor-key="769" align="left" value="1" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" data-editor-key="770">Visit the </span><a class="" data-editor-key="771" href="https://convergo.diallink.dev/docs/convergo-react/theming.html"><span class="" data-editor-key="772">Convergo website</span></a><span class="" data-editor-key="773"> for documentation and more information.</span></li><li class="" data-editor-key="774" align="left" value="2" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; list-style-position: inside; padding-inline-start: 4rem;"><span class="" data-editor-key="775">Check out the code on our </span><a class="" data-editor-key="776" href="https://github.com/diallink-corp/diallink-convergo"><span class="" data-editor-key="777">GitHub repository</span></a><span class="" data-editor-key="778">.</span></li></ul><p class="" data-editor-key="779" align="left" style="font-size: 1.4rem; line-height: 2.2rem; color: inherit; font-weight: 400; font-family: Inter; font-style: normal; margin-block: 0px 0.5rem; padding-inline-start: 0rem;"><span class="" data-editor-key="782">Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 😊.</span></p></div>`}
>
  <ToolbarPlugin />
  <ContentEditable />
</RichTextEditor>

Toolbar plugin

<RichTextEditor>
  <ContentEditable />
  <ToolbarPlugin />
</RichTextEditor>
<RichTextEditor>
  <ContentEditable />
  <ToolbarPlugin />
</RichTextEditor>
<RichTextEditor>
  <ContentEditable />
  <ToolbarPlugin />
</RichTextEditor>

Quick actions plugin

function Example() {
  const [isQuickActionBarOpen, setQuickActionBarOpen] = useState();

  return (
    <RichTextEditor>
      <QuickActionBarPlugin onOpenChange={setQuickActionBarOpen} />
      <ToolbarPlugin isDisabled={isQuickActionBarOpen} />
      <ContentEditable />
    </RichTextEditor>
  );
}
function Example() {
  const [isQuickActionBarOpen, setQuickActionBarOpen] =
    useState();

  return (
    <RichTextEditor>
      <QuickActionBarPlugin
        onOpenChange={setQuickActionBarOpen}
      />
      <ToolbarPlugin isDisabled={isQuickActionBarOpen} />
      <ContentEditable />
    </RichTextEditor>
  );
}

function Example() {
  const [
    isQuickActionBarOpen,
    setQuickActionBarOpen
  ] = useState();

  return (
    <RichTextEditor>
      <QuickActionBarPlugin
        onOpenChange={setQuickActionBarOpen}
      />
      <ToolbarPlugin
        isDisabled={isQuickActionBarOpen}
      />
      <ContentEditable />
    </RichTextEditor>
  );
}

Placeholder

<RichTextEditor placeholder='Enter some rich text...'>
  <ToolbarPlugin />
  <ContentEditable />
</RichTextEditor>
<RichTextEditor placeholder='Enter some rich text...'>
  <ToolbarPlugin />
  <ContentEditable />
</RichTextEditor>
<RichTextEditor placeholder="Enter some rich text...">
  <ToolbarPlugin />
  <ContentEditable />
</RichTextEditor>

Error Message

function Example() {
  const [errorMessage, setErrorMessage] = useState();

  const validate = (content) => {
    if (!/<span.*>.+<\/span/.test(content)) {
      setErrorMessage('Field is required');
    } else {
      setErrorMessage('');
    }
  };

  return (
    <RichTextEditor
      label="Convergo Rich Text Editor"
      isRequired
      errorMessage={errorMessage}
      onChange={validate}
    >
      <ToolbarPlugin />
      <ContentEditable />
    </RichTextEditor>
  );
}

function Example() {
  const [errorMessage, setErrorMessage] = useState();

  const validate = (content) => {
    if (!/<span.*>.+<\/span/.test(content)) {
      setErrorMessage('Field is required');
    } else {
      setErrorMessage('');
    }
  };

  return (
    <RichTextEditor
      label="Convergo Rich Text Editor"
      isRequired
      errorMessage={errorMessage}
      onChange={validate}
    >
      <ToolbarPlugin />
      <ContentEditable />
    </RichTextEditor>
  );
}

function Example() {
  const [
    errorMessage,
    setErrorMessage
  ] = useState();

  const validate = (
    content
  ) => {
    if (
      !/<span.*>.+<\/span/
        .test(content)
    ) {
      setErrorMessage(
        'Field is required'
      );
    } else {
      setErrorMessage(
        ''
      );
    }
  };

  return (
    <RichTextEditor
      label="Convergo Rich Text Editor"
      isRequired
      errorMessage={errorMessage}
      onChange={validate}
    >
      <ToolbarPlugin />
      <ContentEditable />
    </RichTextEditor>
  );
}

ReadOnly

<RichTextEditor
  isReadOnly
  placeholder="Enter some rich text..."
  defaultValue={`<div style="padding-inline-start: 0rem;font-size: 1.4rem;line-height: 2.2rem;font-weight: 400;color: hsla(218, 97%, 23%, 1);width: 100%;user-select: text;white-space: pre-wrap;word-break: break-word;-webkit-font-smoothing: antialiased;"><h1 class="" data-editor-key="1022" style="margin-block: 0px 1rem; font-size: 2.8rem; line-height: 3.6rem; font-weight: 400; padding-inline-start: 0rem;" align="center"><strong class="" data-editor-key="1025" style="font-weight: 600; font-family: &quot;Courier New&quot;;">Welcome to the playground 😊</strong></h1><h2 class="" data-editor-key="1028" style="margin-block: 0px 1rem; font-size: 2rem; line-height: 2.8rem; font-weight: 400; padding-inline-start: 0rem;" align="center"><span class="" data-editor-key="1026" style="font-family: &quot;Courier New&quot;;">This example is read only.</span></h2></div>`}
>
  <ToolbarPlugin />
  <ContentEditable />
</RichTextEditor>
<RichTextEditor
  isReadOnly
  placeholder="Enter some rich text..."
  defaultValue={`<div style="padding-inline-start: 0rem;font-size: 1.4rem;line-height: 2.2rem;font-weight: 400;color: hsla(218, 97%, 23%, 1);width: 100%;user-select: text;white-space: pre-wrap;word-break: break-word;-webkit-font-smoothing: antialiased;"><h1 class="" data-editor-key="1022" style="margin-block: 0px 1rem; font-size: 2.8rem; line-height: 3.6rem; font-weight: 400; padding-inline-start: 0rem;" align="center"><strong class="" data-editor-key="1025" style="font-weight: 600; font-family: &quot;Courier New&quot;;">Welcome to the playground 😊</strong></h1><h2 class="" data-editor-key="1028" style="margin-block: 0px 1rem; font-size: 2rem; line-height: 2.8rem; font-weight: 400; padding-inline-start: 0rem;" align="center"><span class="" data-editor-key="1026" style="font-family: &quot;Courier New&quot;;">This example is read only.</span></h2></div>`}
>
  <ToolbarPlugin />
  <ContentEditable />
</RichTextEditor>
<RichTextEditor
  isReadOnly
  placeholder="Enter some rich text..."
  defaultValue={`<div style="padding-inline-start: 0rem;font-size: 1.4rem;line-height: 2.2rem;font-weight: 400;color: hsla(218, 97%, 23%, 1);width: 100%;user-select: text;white-space: pre-wrap;word-break: break-word;-webkit-font-smoothing: antialiased;"><h1 class="" data-editor-key="1022" style="margin-block: 0px 1rem; font-size: 2.8rem; line-height: 3.6rem; font-weight: 400; padding-inline-start: 0rem;" align="center"><strong class="" data-editor-key="1025" style="font-weight: 600; font-family: &quot;Courier New&quot;;">Welcome to the playground 😊</strong></h1><h2 class="" data-editor-key="1028" style="margin-block: 0px 1rem; font-size: 2rem; line-height: 2.8rem; font-weight: 400; padding-inline-start: 0rem;" align="center"><span class="" data-editor-key="1026" style="font-family: &quot;Courier New&quot;;">This example is read only.</span></h2></div>`}
>
  <ToolbarPlugin />
  <ContentEditable />
</RichTextEditor>

Accessibility

In order to support internationalization, provide a localized string to the label or aria-label prop.

API