From da3909bf7724cafd1f8c8c6df82f3357580f5ab7 Mon Sep 17 00:00:00 2001
From: wxik_noohle <stulip@126.com>
Date: Tue, 5 Jan 2021 16:04:01 +0800
Subject: [PATCH] publish 1.6.2

---
 examples/src/example.js |  39 +--
 index.d.ts              | 508 ++++++++++++++++++++--------------------
 package.json            |   2 +-
 3 files changed, 284 insertions(+), 265 deletions(-)

diff --git a/examples/src/example.js b/examples/src/example.js
index e8bd858..7dd5b42 100644
--- a/examples/src/example.js
+++ b/examples/src/example.js
@@ -180,7 +180,7 @@ class Example extends React.Component {
     createContentStyle(theme) {
         // Can be selected for more situations (cssText or contentCSSText).
         const contentStyle = {
-            backgroundColor: '#000033',
+            backgroundColor: '#2e3847',
             color: '#fff',
             placeholderColor: 'gray',
             // cssText: '#editor {background-color: #f3f3f3}', // initial valid
@@ -251,10 +251,10 @@ class Example extends React.Component {
         let that = this;
         const {contentStyle, theme, emojiVisible, disabled} = that.state;
         const {backgroundColor, color, placeholderColor} = contentStyle;
-        const themeBg = {backgroundColor};
+        const dark = theme === 'dark';
 
         return (
-            <SafeAreaView style={[styles.container, themeBg]}>
+            <SafeAreaView style={[styles.container, dark && styles.darkBack]}>
                 <StatusBar barStyle={theme !== 'dark' ? 'dark-content' : 'light-content'} />
                 <InsertLinkModal
                     placeholderColor={placeholderColor}
@@ -267,8 +267,8 @@ class Example extends React.Component {
                     <Button title={'HOME'} onPress={that.onHome} />
                     <Button title="Preview" onPress={that.save} />
                 </View>
-                <ScrollView style={[styles.scroll, themeBg]} keyboardDismissMode={'none'}>
-                    <View>
+                <ScrollView style={[styles.scroll, dark && styles.scrollDark]} keyboardDismissMode={'none'}>
+                    <View style={[styles.topVi, dark && styles.darkBack]}>
                         <View style={styles.item}>
                             <Text style={{color}}>To: </Text>
                             <TextInput
@@ -293,13 +293,12 @@ class Example extends React.Component {
                         </View>
                     </View>
                     <RichToolbar
-                        style={[styles.richBar, themeBg]}
+                        style={[styles.richBar, dark && styles.richBarDark]}
                         flatContainerStyle={styles.flatStyle}
                         editor={that.richText}
                         disabled={disabled}
-                        iconTint={color}
                         selectedIconTint={'#2095F2'}
-                        disabledIconTint={'#8b8b8b'}
+                        disabledIconTint={'#bfbfbf'}
                         onPressAddImage={that.onPressAddImage}
                         onInsertLink={that.onInsertLink}
                     />
@@ -307,9 +306,8 @@ class Example extends React.Component {
                         // initialFocus={true}
                         disabled={disabled}
                         editorStyle={contentStyle} // default light style
-                        containerStyle={themeBg}
                         ref={that.richText}
-                        style={[styles.rich, themeBg]}
+                        style={styles.rich}
                         placeholder={'please input content'}
                         initialContentHTML={initHTML}
                         editorInitializedCallback={that.editorInitializedCallback}
@@ -326,13 +324,13 @@ class Example extends React.Component {
                 </ScrollView>
                 <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
                     <RichToolbar
-                        // style={[styles.richBar, themeBg]}
+                        style={[styles.richBar, dark && styles.richBarDark]}
                         flatContainerStyle={styles.flatStyle}
                         editor={that.richText}
                         disabled={disabled}
                         // iconTint={color}
                         selectedIconTint={'#2095F2'}
-                        disabledIconTint={'#8b8b8b'}
+                        disabledIconTint={'#bfbfbf'}
                         onPressAddImage={that.onPressAddImage}
                         onInsertLink={that.onInsertLink}
                         // iconSize={24}
@@ -380,7 +378,7 @@ class Example extends React.Component {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#F5FCFF',
+        backgroundColor: '#efefef',
     },
     nav: {
         flexDirection: 'row',
@@ -391,13 +389,26 @@ const styles = StyleSheet.create({
         minHeight: 300,
         flex: 1,
     },
+    topVi: {
+        backgroundColor: '#fafafa',
+    },
     richBar: {
-        borderColor: '#e8e8e8',
+        borderColor: '#efefef',
         borderTopWidth: StyleSheet.hairlineWidth,
     },
+    richBarDark: {
+        backgroundColor: '#191d20',
+        borderColor: '#696969',
+    },
     scroll: {
         backgroundColor: '#ffffff',
     },
+    scrollDark: {
+        backgroundColor: '#2e3847',
+    },
+    darkBack: {
+        backgroundColor: '#191d20',
+    },
     item: {
         borderBottomWidth: StyleSheet.hairlineWidth,
         borderColor: '#e8e8e8',
diff --git a/index.d.ts b/index.d.ts
index 4bf5359..e0e0e62 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -2,256 +2,264 @@ import {WebViewProps} from 'react-native-webview';
 import {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
 import React from 'react';
 
-declare module 'react-native-pell-rich-editor' {
-    /** The RichTextEditor accepts all props from Webview */
-    export interface RichEditorProps extends WebViewProps {
-        /**
-         * Used for placement of editor
-         */
-        contentInset?: {top: number; bottom: number};
-
-        /**
-         * Wrap the editor webview inside a container.
-         * Default is true
-         */
-        useContainer?: boolean;
-
-        /**
-         * useContainer is false by inline view of initial height
-         */
-        initialHeight?: number | string;
-        /**
-         * Wrap the editor content placeholder
-         * Default is empty string
-         */
-        placeholder?: string;
-        /**
-         * Styling for container or for Webview depending on useContainer prop
-         */
-        style?: StyleProp<ViewStyle>;
-
-        /**
-         * Initial content to be rendered inside WebView
-         */
-        initialContentHTML?: string;
-
-        /**
-         * Boolean value to Initial content request focus. The default value is false.
-         */
-        initialFocus?: boolean;
-
-        /**
-         * Boolean value to disable editor. The default value is false.
-         */
-        disabled?: boolean;
-
-        /**
-         * String value to set text auto capitalization.
-         * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
-         */
-        autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
-
-        /**
-         * Boolean value to enable paste as plain text. The default value is false.
-         */
-        pasteAsPlainText?: boolean;
-
-        /**
-         * HTML element used to insert when the user presses enter. The default value is div.
-         */
-        defaultParagraphSeparator?: string;
-
-        /**
-         * Callback called after the editor has been initialized
-         */
-        editorInitializedCallback?: () => void;
-
-        /**
-         * Callback after editor data modification
-         */
-        onChange?: (text: string) => void;
-
-        /**
-         * Callback when the user pastes some content
-         * @param {string} data pastes values
-         */
-        onPaste?: (data: string) => void;
-
-        /**
-         * Callback when the user keyup some content
-         */
-        onKeyUp?: ({keyCode: number, key: string}) => void;
-
-        /**
-         * Callback when the user keydown some content
-         */
-        onKeyDown?: ({keyCode: number, key: string}) => void;
-
-        /**
-         * Callback when the editor focus some content
-         */
-        onFocus?: () => void;
-
-        /**
-         * Callback when the editor blur some content
-         */
-        onBlur?: () => void;
-
-        /**
-         * Callback after height change
-         */
-        onHeightChange?: (height: number) => void;
-
-        onMessage?: (message: {type: string; id: string; data?: any}) => void;
-
-        /**
-         * When first gaining focus, the cursor moves to the end of the text
-         * Default is true
-         */
-        firstFocusEnd?: boolean;
-
-        /**
-         * Styling for container or for Rich Editor more dark or light settings
-         */
-        editorStyle?: {
-            backgroundColor?: string; // editor background color
-            color?: string; // editor text color
-            placeholderColor?: string; // editor placeholder text color
-            contentCSSText?: string; // editor content css text
-            cssText?: string; // editor global css text
-        };
-    }
-
-    export type SelectionChangeListener = (items: string[]) => void;
-
-    export const actions: {[key: string]: string};
-
-    export type DefaultActions = ['image', 'bold', 'italic', 'unorderedList', 'orderedList', 'link'];
-
-    export type IconRecord = {
-        selected: boolean;
-        disabled: boolean;
-        tintColor: any;
-        iconSize: number;
+/** The RichTextEditor accepts all props from Webview */
+export interface RichEditorProps extends WebViewProps {
+    /**
+     * Used for placement of editor
+     */
+    contentInset?: {top: number; bottom: number};
+
+    /**
+     * Wrap the editor webview inside a container.
+     * Default is true
+     */
+    useContainer?: boolean;
+
+    /**
+     * useContainer is false by inline view of initial height
+     */
+    initialHeight?: number | string;
+    /**
+     * Wrap the editor content placeholder
+     * Default is empty string
+     */
+    placeholder?: string;
+    /**
+     * Styling for container or for Webview depending on useContainer prop
+     */
+    style?: StyleProp<ViewStyle>;
+
+    /**
+     * Initial content to be rendered inside WebView
+     */
+    initialContentHTML?: string;
+
+    /**
+     * Boolean value to Initial content request focus. The default value is false.
+     */
+    initialFocus?: boolean;
+
+    /**
+     * Boolean value to disable editor. The default value is false.
+     */
+    disabled?: boolean;
+
+    /**
+     * String value to set text auto capitalization.
+     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
+     */
+    autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+
+    /**
+     * Boolean value to enable paste as plain text. The default value is false.
+     */
+    pasteAsPlainText?: boolean;
+
+    /**
+     * HTML element used to insert when the user presses enter. The default value is div.
+     */
+    defaultParagraphSeparator?: string;
+
+    /**
+     * Callback called after the editor has been initialized
+     */
+    editorInitializedCallback?: () => void;
+
+    /**
+     * Callback after editor data modification
+     */
+    onChange?: (text: string) => void;
+
+    /**
+     * Callback when the user pastes some content
+     * @param {string} data pastes values
+     */
+    onPaste?: (data: string) => void;
+
+    /**
+     * Callback when the user keyup some content
+     */
+    onKeyUp?: ({keyCode: number, key: string}) => void;
+
+    /**
+     * Callback when the user keydown some content
+     */
+    onKeyDown?: ({keyCode: number, key: string}) => void;
+
+    /**
+     * Callback when the editor focus some content
+     */
+    onFocus?: () => void;
+
+    /**
+     * Callback when the editor blur some content
+     */
+    onBlur?: () => void;
+
+    /**
+     * Callback after height change
+     */
+    onHeightChange?: (height: number) => void;
+
+    onMessage?: (message: {type: string; id: string; data?: any}) => void;
+
+    /**
+     * When first gaining focus, the cursor moves to the end of the text
+     * Default is true
+     */
+    firstFocusEnd?: boolean;
+
+    /**
+     * Styling for container or for Rich Editor more dark or light settings
+     */
+    editorStyle?: {
+        backgroundColor?: string; // editor background color
+        color?: string; // editor text color
+        placeholderColor?: string; // editor placeholder text color
+        contentCSSText?: string; // editor content css text
+        cssText?: string; // editor global css text
     };
+}
+
+export type SelectionChangeListener = (items: string[]) => void;
+
+export const actions: {[key: string]: string};
+
+export type defaultActions = ['image', 'bold', 'italic', 'unorderedList', 'orderedList', 'link'];
+
+export type createHTML = (options?: Object) => string;
+
+export type getContentCSS = () => string;
+
+export type IconRecord = {
+    selected: boolean;
+    disabled: boolean;
+    tintColor: any;
+    iconSize: number;
+};
+
+export class RichEditor extends React.Component<RichEditorProps> {
+    // Public API
+
+    /**
+     * @deprecated please use onChange
+     */
+    getContentHtml: () => Promise<string>;
+
+    registerToolbar: (listener: SelectionChangeListener) => void;
+
+    /**
+     * @deprecated please use onFocus
+     */
+    setContentFocusHandler: (listener: () => void) => void;
+
+    /**
+     * Set current HTML to be rendered
+     */
+    setContentHTML: (html: string) => void;
+
+    blurContentEditor: () => void;
 
-    export class RichEditor extends React.Component<RichEditorProps> {
-        // Public API
-
-        /**
-         * @deprecated please use onChange
-         */
-        getContentHtml: () => Promise<string>;
-
-        registerToolbar: (listener: SelectionChangeListener) => void;
-
-        /**
-         * @deprecated please use onFocus
-         */
-        setContentFocusHandler: (listener: () => void) => void;
-
-        /**
-         * Set current HTML to be rendered
-         */
-        setContentHTML: (html: string) => void;
-
-        blurContentEditor: () => void;
-
-        focusContentEditor: () => void;
-
-        insertImage: (attributes: any, style?: string) => void;
-
-        insertVideo: (attributes: any, style?: string) => void;
-
-        insertLink: (title: string, url: string) => void;
-
-        insertText: (text: string) => void;
-
-        insertHTML: (html: string) => void;
-
-        /**
-         * $ = document.querySelector
-         * this.richText.current?.commandDOM(`$('#title').style.color='${color}'`);
-         * @param command
-         */
-        commandDOM: (command: string) => void;
-
-        /**
-         * Returns whether the keyboard is on
-         */
-        isKeyboardOpen: boolean;
-
-        /**
-         * Dismisses the active keyboard and removes focus.
-         */
-        dismissKeyboard: () => void;
-    }
-
-    export interface RichToolbarProps {
-        /**
-         * Function that returns a reference to the RichEditor instance
-         * Optional editor props
-         */
-        getEditor?: () => RichEditor;
-
-        /**
-         * React.createRef reference to the RichEditor instance
-         * Optional getEditor props
-         */
-        editor?: React.createRef;
-
-        unselectedButtonStyle?: StyleProp<ViewStyle>;
-        selectedButtonStyle?: StyleProp<ViewStyle>;
-        disabledButtonStyle?: StyleProp<ViewStyle>;
-
-        /**
-         * Color for selected button Icon
-         */
-        selectedIconTint?: string;
-        /**
-         * Color for unselected button Icon
-         */
-        iconTint?: string;
-        /**
-         * Color for disabled button Icon
-         */
-        disabledIconTint?: string;
-
-        /**
-         * Boolean value to disable editor. The default value is false.
-         */
-        disabled?: boolean;
-        /**
-         * Custom renderer for toolbar actions
-         */
-        renderAction?: (action: string, selected: boolean) => React.Element;
-
-        /**
-         * Custom style prop for the toolbar
-         */
-        style?: StyleProp<ViewStyle>;
-
-        /**
-         * Your own set if images for the toolbar
-         */
-        iconMap?: Record<string, (IconRecord) => React.Element | ImageSourcePropType>;
-
-        /**
-         * Logic for what happens when you press on the add image button
-         */
-        onPressAddImage?: () => void;
-
-        /**
-         *  Logic for what happens when you press on the add insert link button
-         */
-        onInsertLink?: () => void;
-
-        /**
-         * Custom actions you want the toolbar to permit.
-         * By default the toolbar permits an Action set of type DefaultActions
-         */
-        actions?: Partial<DefaultActions> | string[];
-    }
-
-    export class RichToolbar extends React.Component<RichToolbarProps> {}
+    focusContentEditor: () => void;
+
+    insertImage: (attributes: any, style?: string) => void;
+
+    insertVideo: (attributes: any, style?: string) => void;
+
+    insertLink: (title: string, url: string) => void;
+
+    insertText: (text: string) => void;
+
+    insertHTML: (html: string) => void;
+
+    /**
+     * $ = document.querySelector
+     * this.richText.current?.commandDOM(`$('#title').style.color='${color}'`);
+     */
+    commandDOM: (command: string) => void;
+
+    /**
+     * Execute JS in the editor
+     * $ = document
+     * this.richText.current?.commandDOM('$.execCommand('insertHTML', false, "<br/>")');
+     */
+    command: (command: string) => void;
+
+    /**
+     * Returns whether the keyboard is on
+     */
+    isKeyboardOpen: boolean;
+
+    /**
+     * Dismisses the active keyboard and removes focus.
+     */
+    dismissKeyboard: () => void;
 }
+
+export interface RichToolbarProps {
+    /**
+     * Function that returns a reference to the RichEditor instance
+     * Optional editor props
+     */
+    getEditor?: () => RichEditor;
+
+    /**
+     * React.createRef reference to the RichEditor instance
+     * Optional getEditor props
+     */
+    editor?: React.createRef;
+
+    unselectedButtonStyle?: StyleProp<ViewStyle>;
+    selectedButtonStyle?: StyleProp<ViewStyle>;
+    disabledButtonStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Color for selected button Icon
+     */
+    selectedIconTint?: string;
+    /**
+     * Color for unselected button Icon
+     */
+    iconTint?: string;
+    /**
+     * Color for disabled button Icon
+     */
+    disabledIconTint?: string;
+
+    /**
+     * Boolean value to disable editor. The default value is false.
+     */
+    disabled?: boolean;
+    /**
+     * Custom renderer for toolbar actions
+     */
+    renderAction?: (action: string, selected: boolean) => React.Element;
+
+    /**
+     * Custom style prop for the toolbar
+     */
+    style?: StyleProp<ViewStyle>;
+
+    /**
+     * Your own set if images for the toolbar
+     */
+    iconMap?: Record<string, (IconRecord) => React.Element | ImageSourcePropType>;
+
+    /**
+     * Logic for what happens when you press on the add image button
+     */
+    onPressAddImage?: () => void;
+
+    /**
+     *  Logic for what happens when you press on the add insert link button
+     */
+    onInsertLink?: () => void;
+
+    /**
+     * Custom actions you want the toolbar to permit.
+     * By default the toolbar permits an Action set of type DefaultActions
+     */
+    actions?: Partial<DefaultActions> | string[];
+}
+
+export class RichToolbar extends React.Component<RichToolbarProps> {}
diff --git a/package.json b/package.json
index 8a899cc..114b7dd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-native-pell-rich-editor",
   "description": "React Native Rich Editor",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "main": "src/index.js",
   "author": {
     "name": "wxik",