rn-rich-text-editor 0.0.6 → 0.0.8

package/dist/RichEditor.d.ts

@@ -1,30 +1,160 @@
-export interface RichTextEditorRef {
-    registerToolbar: (listener: (items: string[]) => void) => void;
-    setContentFocusHandler: (listener: () => void) => void;
-    setContentHTML: (html: string) => void;
-    setPlaceholder: (placeholder: string) => void;
-    setContentStyle: (styles: any) => void;
-    setDisable: (dis: boolean) => void;
-    blurContentEditor: () => void;
-    focusContentEditor: () => void;
-    showAndroidKeyboard: () => void;
-    insertImage: (attributes: any, style?: any) => void;
-    insertVideo: (attributes: any, style?: any) => void;
-    insertText: (text: string) => void;
-    insertHTML: (html: string) => void;
-    insertLink: (title: string, url: string) => void;
-    injectJavascript: (script: string) => void;
-    preCode: (type: any) => void;
-    setFontSize: (size: any) => void;
-    setForeColor: (color: string) => void;
-    setHiliteColor: (color: string) => void;
-    setFontName: (name: string) => void;
-    commandDOM: (command: any) => void;
-    command: (command: any) => void;
-    dismissKeyboard: () => void;
-    getContentHtml: () => Promise<string>;
-    isKeyboardOpen: boolean;
+import { Component } from 'react';
+import { WebView } from 'react-native-webview';
+import { TextInput } from 'react-native';
+export interface RichTextEditorProps {
+    contentInset?: object;
+    style?: object;
+    placeholder?: string;
+    initialContentHTML?: string;
+    initialFocus?: boolean;
+    disabled?: boolean;
+    useContainer?: boolean;
+    pasteAsPlainText?: boolean;
+    autoCapitalize?: string;
+    defaultParagraphSeparator?: string;
+    editorInitializedCallback?: () => void;
+    initialHeight?: number;
+    dataDetectorTypes?: string[];
+    editorStyle?: {
+        backgroundColor?: string;
+        color?: string;
+        placeholderColor?: string;
+        initialCSSText?: string;
+        cssText?: string;
+        contentCSSText?: string;
+        caretColor?: string;
+        [key: string]: any;
+    };
+    html?: string | {
+        html: string;
+    };
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onChange?: (data: string) => void;
+    onPaste?: (data: any) => void;
+    onKeyUp?: (data: any) => void;
+    onKeyDown?: (data: any) => void;
+    onInput?: (data: any) => void;
+    onMessage?: (message: any) => void;
+    onCursorPosition?: (offsetY: number) => void;
+    onLink?: (data: any) => void;
+    onHeightChange?: (height: number) => void;
+    [key: string]: any;
 }
-export declare const RichTextEditor: any;
-export default RichTextEditor;
-export { RichTextEditor as RichEditor };
+interface RichTextEditorState {
+    html: {
+        html: string;
+    };
+    keyboardHeight: number;
+    height: number;
+}
+export default class RichTextEditor extends Component<RichTextEditorProps, RichTextEditorState> {
+    readonly props: RichTextEditorProps;
+    state: RichTextEditorState;
+    setState: Component<RichTextEditorProps, RichTextEditorState>['setState'];
+    webviewBridge: WebView | null;
+    _input: TextInput | null;
+    layout: {
+        x?: number;
+        y?: number;
+        width?: number;
+        height?: number;
+    };
+    unmount: boolean;
+    _keyOpen: boolean;
+    _focus: boolean;
+    selectionChangeListeners: Array<(items: string[]) => void>;
+    focusListeners: Array<() => void>;
+    contentResolve?: (value: string) => void;
+    contentReject?: (reason?: any) => void;
+    pendingContentHtml?: ReturnType<typeof setTimeout>;
+    keyboardEventListeners: Array<{
+        remove: () => void;
+    }>;
+    static defaultProps: {
+        contentInset: {};
+        style: {};
+        placeholder: string;
+        initialContentHTML: string;
+        initialFocus: boolean;
+        disabled: boolean;
+        useContainer: boolean;
+        pasteAsPlainText: boolean;
+        autoCapitalize: string;
+        defaultParagraphSeparator: string;
+        editorInitializedCallback: () => void;
+        initialHeight: number;
+        dataDetectorTypes: string[];
+    };
+    constructor(props: RichTextEditorProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    _onKeyboardWillShow(event: any): void;
+    _onKeyboardWillHide(event: any): void;
+    onMessage(event: any): void;
+    setWebHeight(height: any): void;
+    /**
+     * @param type - Action type (or single toolbar action name when called with 1 arg)
+     * @param action - Optional action name (e.g. 'result', 'setHtml')
+     * @param data - Optional payload
+     * @param options - Optional options
+     */
+    sendAction(type: string, action?: string, data?: any, options?: any): void;
+    componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
+    setRef(ref: WebView | null): void;
+    renderWebView(): any;
+    onViewLayout({ nativeEvent: { layout } }: {
+        nativeEvent: {
+            layout: any;
+        };
+    }): void;
+    render(): any;
+    registerToolbar(listener: any): void;
+    /**
+     * Subsequent versions will be deleted, please use onFocus
+     * @deprecated remove
+     * @param listener
+     */
+    setContentFocusHandler(listener: any): void;
+    setContentHTML(html: any): void;
+    setPlaceholder(placeholder: any): void;
+    setContentStyle(styles: any): void;
+    setDisable(dis: any): void;
+    blurContentEditor(): void;
+    focusContentEditor(): void;
+    /**
+     * open android keyboard
+     * @platform android
+     */
+    showAndroidKeyboard(): void;
+    /**
+     * @param attributes
+     * @param [style]
+     */
+    insertImage(attributes: any, style: any): void;
+    /**
+     * @param attributes
+     * @param [style]
+     */
+    insertVideo(attributes: any, style: any): void;
+    insertText(text: any): void;
+    insertHTML(html: any): void;
+    insertLink(title: any, url: any): void;
+    injectJavascript(script: string): void;
+    preCode(type: any): void;
+    setFontSize(size: any): void;
+    setForeColor(color: any): void;
+    setHiliteColor(color: any): void;
+    setFontName(name: any): void;
+    commandDOM(command: any): void;
+    command(command: any): void;
+    dismissKeyboard(): void;
+    get isKeyboardOpen(): boolean;
+    init(): void;
+    /**
+     * @deprecated please use onChange
+     * @returns {Promise}
+     */
+    getContentHtml(): Promise<unknown>;
+}
+export {};

package/dist/RichEditor.js

@@ -33,7 +33,6 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichEditor = exports.RichTextEditor = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_webview_1 = require("react-native-webview");
 const actions_1 = require("./actions");
@@ -41,126 +40,107 @@ const messages_1 = require("./messages");
 const react_native_1 = require("react-native");
 const createHTML_1 = require("./editor/createHTML");
 const PlatformIOS = react_native_1.Platform.OS === 'ios';
-function buildCreateHTMLOptions(props) {
-    const { editorStyle: { backgroundColor, color, placeholderColor, initialCSSText, cssText, contentCSSText, caretColor, } = {}, html, pasteAsPlainText, onPaste, onKeyUp, onKeyDown, onInput, enterKeyHint, autoCapitalize, autoCorrect, defaultParagraphSeparator, firstFocusEnd, useContainer, initialFocus, disabled, styleWithCSS, useCharacter, defaultHttps, } = props;
-    return {
-        backgroundColor,
-        color,
-        caretColor,
-        placeholderColor,
-        initialCSSText,
-        cssText,
-        contentCSSText,
-        pasteAsPlainText,
-        pasteListener: !!onPaste,
-        keyUpListener: !!onKeyUp,
-        keyDownListener: !!onKeyDown,
-        inputListener: !!onInput,
-        enterKeyHint,
-        autoCapitalize,
-        autoCorrect,
-        initialFocus: initialFocus && !disabled,
-        defaultParagraphSeparator,
-        firstFocusEnd,
-        useContainer,
-        styleWithCSS,
-        useCharacter,
-        defaultHttps,
-    };
-}
-exports.RichTextEditor = (0, react_1.forwardRef)(function RichTextEditor({ contentInset = {}, style = {}, placeholder = '', initialContentHTML = '', initialFocus = false, disabled = false, useContainer = true, pasteAsPlainText = false, autoCapitalize = 'off', defaultParagraphSeparator = 'div', editorInitializedCallback = () => { }, initialHeight = 0, dataDetectorTypes = ['none'], editorStyle, html: htmlProp, onFocus, onBlur, onChange, onPaste, onKeyUp, onKeyDown, onInput, onMessage, onCursorPosition, onLink, onHeightChange, ...rest }, ref) {
-    const webRef = (0, react_1.useRef)(null);
-    const inputRef = (0, react_1.useRef)(null);
-    const selectionChangeListeners = (0, react_1.useRef)([]);
-    const focusListeners = (0, react_1.useRef)([]);
-    const contentResolveRef = (0, react_1.useRef)();
-    const contentRejectRef = (0, react_1.useRef)();
-    const pendingContentHtmlRef = (0, react_1.useRef)();
-    const unmountRef = (0, react_1.useRef)(false);
-    const keyOpenRef = (0, react_1.useRef)(false);
-    const focusRef = (0, react_1.useRef)(false);
-    const layoutRef = (0, react_1.useRef)({});
-    const viewHTML = (0, react_1.useMemo)(() => htmlProp || (0, createHTML_1.createHTML)(buildCreateHTMLOptions({
-        editorStyle,
-        html: htmlProp,
-        pasteAsPlainText,
-        onPaste,
-        onKeyUp,
-        onKeyDown,
-        onInput,
-        enterKeyHint: rest.enterKeyHint,
-        autoCapitalize,
-        autoCorrect: rest.autoCorrect,
-        defaultParagraphSeparator,
-        firstFocusEnd: rest.firstFocusEnd,
-        useContainer,
-        initialFocus,
-        disabled,
-        styleWithCSS: rest.styleWithCSS,
-        useCharacter: rest.useCharacter,
-        defaultHttps: rest.defaultHttps,
-    })), []);
-    const [height, setHeight] = (0, react_1.useState)(initialHeight);
-    (0, react_1.useEffect)(() => {
-        unmountRef.current = false;
-        const keyboardShow = () => {
-            keyOpenRef.current = true;
-        };
-        const keyboardHide = () => {
-            keyOpenRef.current = false;
+class RichTextEditor extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.webviewBridge = null;
+        this._input = null;
+        this.layout = {};
+        this.unmount = false;
+        this._keyOpen = false;
+        this._focus = false;
+        this.selectionChangeListeners = [];
+        this.focusListeners = [];
+        this.keyboardEventListeners = [];
+        const that = this;
+        that.renderWebView = that.renderWebView.bind(that);
+        that.onMessage = that.onMessage.bind(that);
+        that.sendAction = that.sendAction.bind(that);
+        that.registerToolbar = that.registerToolbar.bind(that);
+        that._onKeyboardWillShow = that._onKeyboardWillShow.bind(that);
+        that._onKeyboardWillHide = that._onKeyboardWillHide.bind(that);
+        that.init = that.init.bind(that);
+        that.setRef = that.setRef.bind(that);
+        that.onViewLayout = that.onViewLayout.bind(that);
+        that.unmount = false;
+        that._keyOpen = false;
+        that._focus = false;
+        that.layout = {};
+        that.selectionChangeListeners = [];
+        const { editorStyle: { backgroundColor, color, placeholderColor, initialCSSText, cssText, contentCSSText, caretColor, } = {}, html, pasteAsPlainText, onPaste, onKeyUp, onKeyDown, onInput, enterKeyHint, autoCapitalize, autoCorrect, defaultParagraphSeparator, firstFocusEnd, useContainer, initialHeight, initialFocus, disabled, styleWithCSS, useCharacter, defaultHttps, } = props;
+        const htmlString = (typeof html === 'string' ? html : (html && typeof html === 'object' && 'html' in html ? html.html : undefined)) ||
+            (0, createHTML_1.createHTML)({
+                backgroundColor,
+                color,
+                caretColor,
+                placeholderColor,
+                initialCSSText,
+                cssText,
+                contentCSSText,
+                pasteAsPlainText,
+                pasteListener: !!onPaste,
+                keyUpListener: !!onKeyUp,
+                keyDownListener: !!onKeyDown,
+                inputListener: !!onInput,
+                enterKeyHint,
+                autoCapitalize,
+                autoCorrect,
+                initialFocus: initialFocus && !disabled,
+                defaultParagraphSeparator,
+                firstFocusEnd,
+                useContainer,
+                styleWithCSS,
+                useCharacter,
+                defaultHttps,
+            });
+        that.state = {
+            html: { html: htmlString },
+            keyboardHeight: 0,
+            height: (initialHeight !== null && initialHeight !== void 0 ? initialHeight : 0),
         };
-        const listeners = PlatformIOS
-            ? [
-                react_native_1.Keyboard.addListener('keyboardWillShow', keyboardShow),
-                react_native_1.Keyboard.addListener('keyboardWillHide', keyboardHide),
-            ]
-            : [
-                react_native_1.Keyboard.addListener('keyboardDidShow', keyboardShow),
-                react_native_1.Keyboard.addListener('keyboardDidHide', keyboardHide),
+        that.focusListeners = [];
+    }
+    componentDidMount() {
+        this.unmount = false;
+        if (PlatformIOS) {
+            this.keyboardEventListeners = [
+                react_native_1.Keyboard.addListener('keyboardWillShow', this._onKeyboardWillShow),
+                react_native_1.Keyboard.addListener('keyboardWillHide', this._onKeyboardWillHide),
             ];
-        return () => {
-            unmountRef.current = true;
-            listeners.forEach(l => l.remove());
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (editorStyle) {
-            sendAction(actions_1.actions.content, 'setContentStyle', editorStyle);
-        }
-    }, [editorStyle]);
-    (0, react_1.useEffect)(() => {
-        sendAction(actions_1.actions.content, 'setDisable', !!disabled);
-    }, [disabled]);
-    (0, react_1.useEffect)(() => {
-        sendAction(actions_1.actions.content, 'setPlaceholder', placeholder);
-    }, [placeholder]);
-    function sendAction(type, action, data, options) {
-        var _a, _b;
-        const jsonString = JSON.stringify({ type, name: action, data, options });
-        if (unmountRef.current || !webRef.current)
-            return;
-        const webRefAny = webRef.current;
-        if (typeof webRefAny.postMessage === 'function') {
-            webRefAny.postMessage(jsonString);
         }
         else {
-            (_b = (_a = webRef.current).injectJavaScript) === null || _b === void 0 ? void 0 : _b.call(_a, `window.dispatchEvent(new MessageEvent('message', { data: ${JSON.stringify(jsonString)} })); true;`);
+            this.keyboardEventListeners = [
+                react_native_1.Keyboard.addListener('keyboardDidShow', this._onKeyboardWillShow),
+                react_native_1.Keyboard.addListener('keyboardDidHide', this._onKeyboardWillHide),
+            ];
         }
     }
-    const handleMessage = (event) => {
-        var _a, _b;
+    componentWillUnmount() {
+        this.unmount = true;
+        this.keyboardEventListeners.forEach(eventListener => eventListener.remove());
+    }
+    _onKeyboardWillShow(event) {
+        this._keyOpen = true;
+    }
+    _onKeyboardWillHide(event) {
+        this._keyOpen = false;
+    }
+    onMessage(event) {
+        var _a;
+        const that = this;
+        const { onFocus, onBlur, onChange, onPaste, onKeyUp, onKeyDown, onInput, onMessage, onCursorPosition, onLink } = that.props;
         try {
             const message = JSON.parse(event.nativeEvent.data);
             const data = message.data;
             switch (message.type) {
                 case messages_1.messages.CONTENT_HTML_RESPONSE:
-                    if (contentResolveRef.current) {
-                        contentResolveRef.current(message.data);
-                        contentResolveRef.current = undefined;
-                        contentRejectRef.current = undefined;
-                        if (pendingContentHtmlRef.current) {
-                            clearTimeout(pendingContentHtmlRef.current);
-                            pendingContentHtmlRef.current = undefined;
+                    if (that.contentResolve) {
+                        that.contentResolve(message.data);
+                        that.contentResolve = undefined;
+                        that.contentReject = undefined;
+                        if (that.pendingContentHtml) {
+                            clearTimeout(that.pendingContentHtml);
+                            that.pendingContentHtml = undefined;
                         }
                     }
                     break;
@@ -171,15 +151,18 @@ exports.RichTextEditor = (0, react_1.forwardRef)(function RichTextEditor({ conte
                     console.log('FROM EDIT:', ...data);
                     break;
                 case messages_1.messages.SELECTION_CHANGE:
-                    selectionChangeListeners.current.forEach(listener => listener(message.data));
+                    const items = message.data;
+                    that.selectionChangeListeners.map(listener => {
+                        listener(items);
+                    });
                     break;
                 case messages_1.messages.CONTENT_FOCUSED:
-                    focusRef.current = true;
-                    focusListeners.current.forEach(fn => fn());
+                    that._focus = true;
+                    that.focusListeners.map(da => da()); // Subsequent versions will be deleted
                     onFocus === null || onFocus === void 0 ? void 0 : onFocus();
                     break;
                 case messages_1.messages.CONTENT_BLUR:
-                    focusRef.current = false;
+                    that._focus = false;
                     onBlur === null || onBlur === void 0 ? void 0 : onBlur();
                     break;
                 case messages_1.messages.CONTENT_CHANGE:
@@ -198,179 +181,239 @@ exports.RichTextEditor = (0, react_1.forwardRef)(function RichTextEditor({ conte
                     onInput === null || onInput === void 0 ? void 0 : onInput(data);
                     break;
                 case messages_1.messages.OFFSET_HEIGHT:
-                    if (data !== height) {
-                        const maxHeight = Math.max(data, initialHeight);
-                        if (!unmountRef.current && useContainer && maxHeight >= initialHeight) {
-                            setHeight(maxHeight);
-                        }
-                        onHeightChange === null || onHeightChange === void 0 ? void 0 : onHeightChange(data);
-                    }
+                    that.setWebHeight(data);
                     break;
-                case messages_1.messages.OFFSET_Y:
-                    const offsetY = Number(Number(data) + ((_b = (_a = layoutRef.current) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0));
+                case messages_1.messages.OFFSET_Y: {
+                    const offsetY = Number(Number(data) + ((_a = that.layout.y) !== null && _a !== void 0 ? _a : 0));
                     if (offsetY > 0)
                         onCursorPosition === null || onCursorPosition === void 0 ? void 0 : onCursorPosition(offsetY);
                     break;
+                }
                 default:
                     onMessage === null || onMessage === void 0 ? void 0 : onMessage(message);
                     break;
             }
         }
-        catch (_c) {
-            // Non-JSON message, ignore
+        catch (_b) {
+            //alert('NON JSON MESSAGE');
         }
-    };
-    const init = () => {
-        var _a, _b, _c;
-        if (initialContentHTML)
-            sendAction(actions_1.actions.content, 'setHtml', initialContentHTML);
-        if (placeholder)
-            sendAction(actions_1.actions.content, 'setPlaceholder', placeholder);
-        sendAction(actions_1.actions.content, 'setDisable', !!disabled);
-        editorInitializedCallback();
-        if (initialFocus && !disabled) {
-            if (react_native_1.Platform.OS === 'android') {
-                if (!keyOpenRef.current)
-                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                (_c = (_b = webRef.current) === null || _b === void 0 ? void 0 : _b.requestFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
+    }
+    setWebHeight(height) {
+        const { onHeightChange, useContainer, initialHeight } = this.props;
+        if (height !== this.state.height) {
+            const maxHeight = Math.max(height, initialHeight);
+            if (!this.unmount && useContainer && maxHeight >= initialHeight) {
+                this.setState({ height: maxHeight });
             }
-            sendAction(actions_1.actions.content, 'focus');
+            onHeightChange && onHeightChange(height);
         }
-        sendAction(actions_1.actions.init);
-    };
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        registerToolbar(listener) {
-            selectionChangeListeners.current = [...selectionChangeListeners.current, listener];
-        },
-        setContentFocusHandler(listener) {
-            focusListeners.current.push(listener);
-        },
-        setContentHTML(html) {
-            sendAction(actions_1.actions.content, 'setHtml', html);
-        },
-        setPlaceholder(placeholderText) {
-            sendAction(actions_1.actions.content, 'setPlaceholder', placeholderText);
-        },
-        setContentStyle(styles) {
-            sendAction(actions_1.actions.content, 'setContentStyle', styles);
-        },
-        setDisable(dis) {
-            sendAction(actions_1.actions.content, 'setDisable', !!dis);
-        },
-        blurContentEditor() {
-            sendAction(actions_1.actions.content, 'blur');
-        },
-        focusContentEditor() {
-            var _a, _b, _c;
-            if (react_native_1.Platform.OS === 'android') {
-                if (!keyOpenRef.current)
-                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                (_c = (_b = webRef.current) === null || _b === void 0 ? void 0 : _b.requestFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
-            }
-            sendAction(actions_1.actions.content, 'focus');
-        },
-        showAndroidKeyboard() {
-            var _a, _b, _c;
-            if (react_native_1.Platform.OS === 'android') {
-                if (!keyOpenRef.current)
-                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                (_c = (_b = webRef.current) === null || _b === void 0 ? void 0 : _b.requestFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
-            }
-        },
-        insertImage(attributes, styleOpt) {
-            sendAction(actions_1.actions.insertImage, 'result', attributes, styleOpt);
-        },
-        insertVideo(attributes, styleOpt) {
-            sendAction(actions_1.actions.insertVideo, 'result', attributes, styleOpt);
-        },
-        insertText(text) {
-            sendAction(actions_1.actions.insertText, 'result', text);
-        },
-        insertHTML(html) {
-            sendAction(actions_1.actions.insertHTML, 'result', html);
-        },
-        insertLink(title, url) {
-            var _a, _b, _c;
-            if (url) {
-                if (react_native_1.Platform.OS === 'android') {
-                    if (!keyOpenRef.current)
-                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    (_c = (_b = webRef.current) === null || _b === void 0 ? void 0 : _b.requestFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
-                }
-                sendAction(actions_1.actions.insertLink, 'result', { title, url });
-            }
-        },
-        injectJavascript(script) {
-            var _a, _b;
-            return (_b = (_a = webRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript) === null || _b === void 0 ? void 0 : _b.call(_a, script);
-        },
-        preCode(type) {
-            sendAction(actions_1.actions.code, 'result', type);
-        },
-        setFontSize(size) {
-            sendAction(actions_1.actions.fontSize, 'result', size);
-        },
-        setForeColor(color) {
-            sendAction(actions_1.actions.foreColor, 'result', color);
-        },
-        setHiliteColor(color) {
-            sendAction(actions_1.actions.hiliteColor, 'result', color);
-        },
-        setFontName(name) {
-            sendAction(actions_1.actions.fontName, 'result', name);
-        },
-        commandDOM(command) {
-            if (command)
-                sendAction(actions_1.actions.content, 'commandDOM', command);
-        },
-        command(command) {
-            if (command)
-                sendAction(actions_1.actions.content, 'command', command);
-        },
-        dismissKeyboard() {
-            if (focusRef.current)
-                sendAction(actions_1.actions.content, 'blur');
-            else
-                react_native_1.Keyboard.dismiss();
-        },
-        get isKeyboardOpen() {
-            return keyOpenRef.current;
-        },
-        getContentHtml() {
-            return new Promise((resolve, reject) => {
-                contentResolveRef.current = resolve;
-                contentRejectRef.current = reject;
-                sendAction(actions_1.actions.content, 'postHtml');
-                pendingContentHtmlRef.current = setTimeout(() => {
-                    if (contentRejectRef.current)
-                        contentRejectRef.current('timeout');
-                }, 5000);
-            });
-        },
-    }));
-    const onViewLayout = ({ nativeEvent: { layout } }) => {
-        layoutRef.current = layout;
-    };
-    const renderWebView = () => {
-        var _a;
+    }
+    /**
+     * @param type - Action type (or single toolbar action name when called with 1 arg)
+     * @param action - Optional action name (e.g. 'result', 'setHtml')
+     * @param data - Optional payload
+     * @param options - Optional options
+     */
+    sendAction(type, action, data, options) {
+        // Toolbar calls sendAction(action) with one arg; forward as type + 'result'
+        const name = arguments.length === 1 ? 'result' : action;
+        const payload = arguments.length === 1 ? undefined : data;
+        const opts = arguments.length === 1 ? undefined : options;
+        const jsonString = JSON.stringify({ type, name, data: payload, options: opts });
+        if (!this.unmount && this.webviewBridge) {
+            this.webviewBridge.postMessage(jsonString);
+        }
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        const { editorStyle, disabled, placeholder } = this.props;
+        if (prevProps.editorStyle !== editorStyle) {
+            editorStyle && this.setContentStyle(editorStyle);
+        }
+        if (disabled !== prevProps.disabled) {
+            this.setDisable(disabled);
+        }
+        if (placeholder !== prevProps.placeholder) {
+            this.setPlaceholder(placeholder);
+        }
+    }
+    setRef(ref) {
+        this.webviewBridge = ref;
+    }
+    renderWebView() {
+        const that = this;
+        const { html: _html, editorStyle, useContainer, style, onLink, dataDetectorTypes, ...rest } = that.props;
+        const { html: viewHTML } = that.state;
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_native_webview_1.WebView, { ref: webRef, useWebKit: true, scrollEnabled: false, hideKeyboardAccessoryView: true, keyboardDisplayRequiresUserAction: false, nestedScrollEnabled: !useContainer, style: [styles.webview, style], ...rest, onMessage: handleMessage, originWhitelist: ['*'], dataDetectorTypes: dataDetectorTypes, domStorageEnabled: false, bounces: false, javaScriptEnabled: true, source: { html: typeof viewHTML === 'string' ? viewHTML : (_a = viewHTML === null || viewHTML === void 0 ? void 0 : viewHTML.html) !== null && _a !== void 0 ? _a : '' }, onLoad: init, onShouldStartLoadWithRequest: (event) => {
-                    var _a, _b, _c;
+            react_1.default.createElement(react_native_webview_1.WebView, { useWebKit: true, scrollEnabled: false, hideKeyboardAccessoryView: true, keyboardDisplayRequiresUserAction: false, nestedScrollEnabled: !useContainer, style: [styles.webview, style], ...rest, ref: that.setRef, onMessage: that.onMessage, originWhitelist: ['*'], dataDetectorTypes: dataDetectorTypes, domStorageEnabled: false, bounces: false, javaScriptEnabled: true, source: viewHTML, onLoad: that.init, onShouldStartLoadWithRequest: event => {
+                    var _a;
                     if (event.url !== 'about:blank') {
-                        (_b = (_a = webRef.current) === null || _a === void 0 ? void 0 : _a.stopLoading) === null || _b === void 0 ? void 0 : _b.call(_a);
-                        (_c = react_native_1.Linking === null || react_native_1.Linking === void 0 ? void 0 : react_native_1.Linking.openURL) === null || _c === void 0 ? void 0 : _c.call(react_native_1.Linking, event.url);
+                        (_a = this.webviewBridge) === null || _a === void 0 ? void 0 : _a.stopLoading();
+                        react_native_1.Linking === null || react_native_1.Linking === void 0 ? void 0 : react_native_1.Linking.openURL(event.url);
                         return false;
                     }
                     return true;
                 } }),
-            react_native_1.Platform.OS === 'android' && react_1.default.createElement(react_native_1.TextInput, { ref: inputRef, style: styles._input })));
-    };
-    if (useContainer) {
-        return (react_1.default.createElement(react_native_1.View, { style: [style, { height }], onLayout: onViewLayout }, renderWebView()));
+            react_native_1.Platform.OS === 'android' && react_1.default.createElement(react_native_1.TextInput, { ref: ref => (that._input = ref), style: styles._input })));
     }
-    return renderWebView();
-});
-exports.RichEditor = exports.RichTextEditor;
+    onViewLayout({ nativeEvent: { layout } }) {
+        this.layout = layout;
+    }
+    render() {
+        let { height } = this.state;
+        // useContainer is an optional prop with default value of true
+        // If set to true, it will use a View wrapper with styles and height.
+        // If set to false, it will not use a View wrapper
+        const { useContainer, style } = this.props;
+        return useContainer ? (react_1.default.createElement(react_native_1.View, { style: [style, { height }], onLayout: this.onViewLayout }, this.renderWebView())) : (this.renderWebView());
+    }
+    registerToolbar(listener) {
+        this.selectionChangeListeners = [...this.selectionChangeListeners, listener];
+    }
+    /**
+     * Subsequent versions will be deleted, please use onFocus
+     * @deprecated remove
+     * @param listener
+     */
+    setContentFocusHandler(listener) {
+        this.focusListeners.push(listener);
+    }
+    setContentHTML(html) {
+        this.sendAction(actions_1.actions.content, 'setHtml', html);
+    }
+    setPlaceholder(placeholder) {
+        this.sendAction(actions_1.actions.content, 'setPlaceholder', placeholder);
+    }
+    setContentStyle(styles) {
+        this.sendAction(actions_1.actions.content, 'setContentStyle', styles);
+    }
+    setDisable(dis) {
+        this.sendAction(actions_1.actions.content, 'setDisable', !!dis);
+    }
+    blurContentEditor() {
+        this.sendAction(actions_1.actions.content, 'blur');
+    }
+    focusContentEditor() {
+        this.showAndroidKeyboard();
+        this.sendAction(actions_1.actions.content, 'focus');
+    }
+    /**
+     * open android keyboard
+     * @platform android
+     */
+    showAndroidKeyboard() {
+        var _a, _b;
+        let that = this;
+        if (react_native_1.Platform.OS === 'android') {
+            !that._keyOpen && that._input.focus();
+            (_b = (_a = that.webviewBridge) === null || _a === void 0 ? void 0 : _a.requestFocus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+    }
+    /**
+     * @param attributes
+     * @param [style]
+     */
+    insertImage(attributes, style) {
+        this.sendAction(actions_1.actions.insertImage, 'result', attributes, style);
+    }
+    /**
+     * @param attributes
+     * @param [style]
+     */
+    insertVideo(attributes, style) {
+        this.sendAction(actions_1.actions.insertVideo, 'result', attributes, style);
+    }
+    insertText(text) {
+        this.sendAction(actions_1.actions.insertText, 'result', text);
+    }
+    insertHTML(html) {
+        this.sendAction(actions_1.actions.insertHTML, 'result', html);
+    }
+    insertLink(title, url) {
+        if (url) {
+            this.showAndroidKeyboard();
+            this.sendAction(actions_1.actions.insertLink, 'result', { title, url });
+        }
+    }
+    injectJavascript(script) {
+        var _a, _b;
+        return (_b = (_a = this.webviewBridge) === null || _a === void 0 ? void 0 : _a.injectJavaScript) === null || _b === void 0 ? void 0 : _b.call(_a, script);
+    }
+    preCode(type) {
+        this.sendAction(actions_1.actions.code, 'result', type);
+    }
+    setFontSize(size) {
+        this.sendAction(actions_1.actions.fontSize, 'result', size);
+    }
+    setForeColor(color) {
+        this.sendAction(actions_1.actions.foreColor, 'result', color);
+    }
+    setHiliteColor(color) {
+        this.sendAction(actions_1.actions.hiliteColor, 'result', color);
+    }
+    setFontName(name) {
+        this.sendAction(actions_1.actions.fontName, 'result', name);
+    }
+    commandDOM(command) {
+        if (command) {
+            this.sendAction(actions_1.actions.content, 'commandDOM', command);
+        }
+    }
+    command(command) {
+        if (command) {
+            this.sendAction(actions_1.actions.content, 'command', command);
+        }
+    }
+    dismissKeyboard() {
+        this._focus ? this.blurContentEditor() : react_native_1.Keyboard.dismiss();
+    }
+    get isKeyboardOpen() {
+        return this._keyOpen;
+    }
+    init() {
+        let that = this;
+        const { initialFocus, initialContentHTML, placeholder, editorInitializedCallback, disabled } = that.props;
+        initialContentHTML && that.setContentHTML(initialContentHTML);
+        placeholder && that.setPlaceholder(placeholder);
+        that.setDisable(disabled);
+        editorInitializedCallback();
+        // initial request focus
+        initialFocus && !disabled && that.focusContentEditor();
+        // no visible ?
+        that.sendAction(actions_1.actions.init);
+    }
+    /**
+     * @deprecated please use onChange
+     * @returns {Promise}
+     */
+    async getContentHtml() {
+        return new Promise((resolve, reject) => {
+            this.contentResolve = resolve;
+            this.contentReject = reject;
+            this.sendAction(actions_1.actions.content, 'postHtml');
+            this.pendingContentHtml = setTimeout(() => {
+                if (this.contentReject) {
+                    this.contentReject('timeout');
+                }
+            }, 5000);
+        });
+    }
+}
+RichTextEditor.defaultProps = {
+    contentInset: {},
+    style: {},
+    placeholder: '',
+    initialContentHTML: '',
+    initialFocus: false,
+    disabled: false,
+    useContainer: true,
+    pasteAsPlainText: false,
+    autoCapitalize: 'off',
+    defaultParagraphSeparator: 'div',
+    editorInitializedCallback: () => { },
+    initialHeight: 0,
+    dataDetectorTypes: ['none'],
+};
+exports.default = RichTextEditor;
 const styles = react_native_1.StyleSheet.create({
     _input: {
         position: 'absolute',
@@ -384,4 +427,3 @@ const styles = react_native_1.StyleSheet.create({
         backgroundColor: 'transparent',
     },
 });
-exports.default = exports.RichTextEditor;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { RichEditor } from './RichEditor';
+export { default as RichTextEditor } from './RichEditor';
 export { RichToolbar, defaultActions } from './RichToolbar';
 export { actions } from './actions';
 export { createHTML } from './editor/createHTML';

package/dist/index.js

@@ -1,8 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getContentCSS = exports.createHTML = exports.actions = exports.defaultActions = exports.RichToolbar = exports.RichEditor = void 0;
+exports.getContentCSS = exports.createHTML = exports.actions = exports.defaultActions = exports.RichToolbar = exports.RichTextEditor = void 0;
 var RichEditor_1 = require("./RichEditor");
-Object.defineProperty(exports, "RichEditor", { enumerable: true, get: function () { return RichEditor_1.RichEditor; } });
+Object.defineProperty(exports, "RichTextEditor", { enumerable: true, get: function () { return __importDefault(RichEditor_1).default; } });
 var RichToolbar_1 = require("./RichToolbar");
 Object.defineProperty(exports, "RichToolbar", { enumerable: true, get: function () { return RichToolbar_1.RichToolbar; } });
 Object.defineProperty(exports, "defaultActions", { enumerable: true, get: function () { return RichToolbar_1.defaultActions; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-rich-text-editor",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "A rich text editor component for React Native",
   "keywords": [
     "react-native",