@167pluto/rte

Creating an editor and using it

To create and use the editor, import PlutoRTE and DEFAULT_EDITOR_STATE, and provide the necessary props:

import { PlutoRTE, DEFAULT_EDITOR_STATE } from '@167pluto/rte';
import axios from '~/utils/axios';

const SomeComponent = () => {
  const editorRef = useRef < null > null;

  return <PlutoRTE editorRef={editorRef} initialEditorState={DEFAULT_EDITOR_STATE} axiosInstance={axios} mediaUploadEndpoint={'/media'} />;
};

Generating rich text editor's JSON

To generate the editor's JSON representation, use the generateJSON function:

import { generateJSON } from '@167pluto/rte';

const SomeComponent = () => {
  const editorRef = useRef < null > null;

  const json = generateJSON(editorRef);

  return <PlutoRTE editorRef={editorRef} initialEditorState={DEFAULT_EDITOR_STATE} axiosInstance={axios} mediaUploadEndpoint={'/media'} />;
};

Converting Editor JSON to HTML

To convert the editor's JSON output to HTML, use the convertToHTML function:

import { convertToHTML } from '@167pluto/rte';

const SomeComponent = () => {
  const htmlString = convertToHTML(editorJSON);

  return <div dangerouslySetInnerHTML={{ __html: htmlString }}></div>;
};

Displaying Embedded Tweets

To display embedded Twitter posts, add the following useEffect hook to your component:

import { convertToHTML } from '@167pluto/rte';

const SomeComponent = () => {
  const htmlString = convertToHTML(editorJSON);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://platform.twitter.com/widgets.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [htmlString]);

  return <div dangerouslySetInnerHTML={{ __html: htmlString }}></div>;
};

Toolbar options

The toolbar in Pluto Rich Text Editor is fully customizable. Here's the default configuration:

const toolbarOptions = {
  normal: true,
  heading1: true,
  heading2: true,
  heading3: true,
  heading4: true,
  heading5: true,
  heading6: true,
  bulletList: true,
  numberedList: true,
  bold: true,
  italic: true,
  underline: true,
  strikethrough: true,
  link: true,
  subscript: true,
  superscript: true,
  image: true,
  leftAlign: true,
  rightAlign: true,
  centerAlign: true,
  justifyAlign: true,
  startAlign: true,
  outdent: true,
  indent: true,
  endAlign: true,
  twitter: true,
  youtube: true
};

By default, all tools are enabled. To exclude specific tools, set their values to false in the toolbarOptions prop:

import { PlutoRTE, DEFAULT_EDITOR_STATE } from '@167pluto/rte';
import axios from '~/utils/axios';

const SomeComponent = () => {
  const editorRef = useRef < null > null;

  return (
    <PlutoRTE
      editorRef={editorRef}
      initialEditorState={DEFAULT_EDITOR_STATE}
      axiosInstance={axios}
      mediaUploadEndpoint={'/media'}
      toolbarOptions={{
        header1: false,
        twitter: false
      }}
    />
  );
};

In toolbarOptions prop just send tools that you want to be excluded. More tools are on the way.