Rn-reddit-editor NPM

rn-reddit-editor

Rich text Reddit editor for React Native

Built on top of the excellent react-native-cn-quill package. ##NOTE: This is a work in progress!

Installation

npm install rn-reddit-editor

yarn add rn-reddit-editor

##Editor Props theme

Theme applied to the editor and toolbar

Type	Required
`'dark'` or `'light'`	Yes

pickImage

Function invoked when user presses on the toolbar image icon. It is up to you to handle image selection.

Type	Required
`() => void`	No

editorProps

react-native-cn-quill editor props

Type	Required
`EditorProps`	No

setHtml

Callback invoked when editor's HTML has changed

Type	Required
`(html: string) => void`	Yes

accessToken

Reddit access token. Required if you want to allow embedded images. If this property is not specified, the toolbar will not include an image button.

Type	Required
`string`	No

##Editor Methods

addImage(url: string, caption?: string): Promise<any>

Embeds an image into the editor HTML. This should generally be invoked from within the pickImage callback.

focus()

Focuses the editor

blur()

Blurs the editor

getContents(): Promise<any>

Returns the inner Quill JSON content

dangerouslyPasteHTML(html: string): Promise<void>

Pastes the specified HTML into the editor

Usage

import { Editor, htmlToRichTextJSON, EditorHandle } from "rn-reddit-editor";

const App = () => {
  const editor = useRef<EditorHandle>();
  const [theme, setTheme] = useState('light');
  const [html, setHtml] = useState<string>();

  const _pickImage = async () => {
    // retrieve an image url
    const url = 'image.png',
        caption = 'My awesome caption!';
    // embed the image in the markup
    await editor?.current?.addImage(url, caption);
  }

  const _submit = async () => {
      // convert raw HTML to Reddit richtext JSON
      const richtextJSON = htmlToRichTextJSON(html);
      const formData = new FormData();
      // add richtext JSON to request body
      formData.append('richtext_json', JSON.stringify(richtextJSON));
      // ...
      await submitComment(formData);
  }

  const _toggleTheme = () =>
    setTheme(theme === 'light' ? 'dark' : 'light')

  return (
    <>
      <Editor
        theme={theme}
        ref={editor}
        pickImage={_pickImage}
        setHtml={setHtml}
        accessToken="<reddit_access_token>"
      />
      <Button onPress={_submit}>Submit</Button>
      <Button onPress={_toggleTheme}>Toggle Theme</Button>
    </>
  )
}