React Native Webview Quilljs

Quill.js editor and viewer components with no native code for React Native apps. This is a purely JavaScript component based on @zenomaro's react-quill project (https://github.com/zenoamaro/react-quill/)

Try it in Expo

Link to Expo Project Page

Installation

npm install --save react-native-webview-quilljs

or

yarn add react-native-webview-quilljs

and then

import {WebViewQuillEditor, WebViewQuillViewer} from 'react-native-webview-quilljs'

Usage

This package can be used to create both an editor and a viewer

// A Quill.js editor with the standard toolbar
<WebViewQuillJS
  defaultContent={this.state.defaultContent}
  backgroundColor={"#FAEBD7"}
  onMessageReceived={this.onMessageReceived}
/>

// A Quill.js viewer with no toolbar
<WebViewQuillJS
  backgroundColor={"#fffbef"}
  content={this.state.content}
  isReadOnly
/>

This component accepts the following props:

property	required	type	purpose
backgroundColor	optional	string	The background color of the Quill Component
content	optional	HTML, a Quill Delta, or a plain object representing a Delta	Content of a controlled viewer component
defaultContent	optional	HTML, a Quill Delta, or a plain object representing a Delta	Inital value of an uncontrolled editor component
doShowDebugMessages	optional	boolean	Show debug messages from the Webview Component
doShowQuillComponentDebugMessages	optional	boolean	Show debug messages from the contents of the Webview component
isReadOnly	optional	boolean	Editor or viewer component (false or true)
onError	optional	function	Function called if the Webview component experiences an Error
onLoadEnd	optional	function	Function called when the Webview has finished loading
onLoadStart	optional	function	Function called if the Webview begins loading
onMessageReceived	optional	function	Function called when the WebViewQuillJS component receives a message from the editor

Editor Messages & onMessageReceived function

A WebviewQuillJSMessage object is passed to the onMessageReceived function:

export type WebviewQuillJSMessage = {
  event?: WebviewQuillJSEvents,
  msg?: string,
  error?: string,
  payload?: any
};

WebviewQuillJSEvents consists of the following enumerated values:

export enum WebviewQuillJSEvents {
  QUILLJS_COMPONENT_MOUNTED = "QUILLJS_COMPONENT_MOUNTED",
  DOCUMENT_EVENT_LISTENER_ADDED = "DOCUMENT_EVENT_LISTENER_ADDED",
  WINDOW_EVENT_LISTENER_ADDED = "WINDOW_EVENT_LISTENER_ADDED",
  UNABLE_TO_ADD_EVENT_LISTENER = "UNABLE_TO_ADD_EVENT_LISTENER",
  DOCUMENT_EVENT_LISTENER_REMOVED = "DOCUMENT_EVENT_LISTENER_REMOVED",
  WINDOW_EVENT_LISTENER_REMOVED = "WINDOW_EVENT_LISTENER_REMOVED",

  // The following events correlate to the similarly named react-quill props
  // https://github.com/zenoamaro/react-quill/#props
  ON_CHANGE = "ON_CHANGE",
  ON_CHANGE_SELECTION = "ON_CHANGE_SELECTION",
  ON_FOCUS = "ON_FOCUS",
  ON_BLUR = "ON_BLUR",
  ON_KEY_PRESS = "ON_KEY_PRESS",
  ON_KEY_DOWN = "ON_KEY_DOWN",
  ON_KEY_UP = "ON_KEY_UP"
}

The payload object contains the values passed to by the corresponding react-quilljs prop functions here: https://github.com/zenoamaro/react-quill/#props

Changelog

0.9.0

• Replace Expo dependency with expo-asset-utils

0.8.3

• Updated onChangeCallback to receive the changes, contents, and previous contents of the delta

0.8.0

• Removes the propType specification for contentToDisplay to address issue #19

0.6.5

• Added initial testing framework

0.6.0

• Removed requirement to download JavaScript files from GitHub in order for the package to work. JavaScript files are now inline with the HTML which enables the package to work without an Internet connection.

• Added getViewerCallback and getEditorCallback

0.4.4

• Changed HTTP path for files to be downloaded in preparation for potential inline JS bundling or Expo Packager bundling of files.

0.4.0

• Added "backgroundColor" props for both the WebViewQuillViewer and WebViewQuillEditor

0.3.20

• Added copy and paste of HTML

0.3.10

• Revert file access features from 0.3.0.

0.3.0

• Library no longer relies on accessing WebView files from the Internet. All files needed by both the Editor and Viewer are included with the packages.
• Fonts display correctly on iOS devices

0.2.5

• Added onContentChange property to Editor

2.0.0

• Add TypeScript support
• Switch to react-native-community/react-native-webview implementation
• Simplify event communication

LICENSE

MIT