rn-rich-text-editor 0.0.5 → 0.0.7

package/dist/RichEditor.d.ts

@@ -1 +1,31 @@
-export declare const RichEditor: any;
+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;
+    sendAction: (action: string) => void;
+}
+export declare const RichTextEditor: any;
+export default RichTextEditor;
+export { RichTextEditor as RichEditor };

package/dist/RichEditor.js

@@ -33,117 +33,352 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RichEditor = void 0;
+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");
+const messages_1 = require("./messages");
 const react_native_1 = require("react-native");
 const createHTML_1 = require("./editor/createHTML");
-const messages_1 = require("./messages");
 const PlatformIOS = react_native_1.Platform.OS === 'ios';
-exports.RichEditor = (0, react_1.forwardRef)((props, ref) => {
+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 [keyboardOpen, setKeyboardOpen] = (0, react_1.useState)(false);
     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)(() => {
-        const keyboardEventListeners = PlatformIOS
+        unmountRef.current = false;
+        const keyboardShow = () => {
+            keyOpenRef.current = true;
+        };
+        const keyboardHide = () => {
+            keyOpenRef.current = false;
+        };
+        const listeners = PlatformIOS
             ? [
-                react_native_1.Keyboard.addListener('keyboardWillShow', () => setKeyboardOpen(true)),
-                react_native_1.Keyboard.addListener('keyboardWillHide', () => setKeyboardOpen(false)),
+                react_native_1.Keyboard.addListener('keyboardWillShow', keyboardShow),
+                react_native_1.Keyboard.addListener('keyboardWillHide', keyboardHide),
             ]
             : [
-                react_native_1.Keyboard.addListener('keyboardDidShow', () => setKeyboardOpen(true)),
-                react_native_1.Keyboard.addListener('keyboardDidHide', () => setKeyboardOpen(false)),
+                react_native_1.Keyboard.addListener('keyboardDidShow', keyboardShow),
+                react_native_1.Keyboard.addListener('keyboardDidHide', keyboardHide),
             ];
         return () => {
-            keyboardEventListeners.forEach(listener => listener.remove());
+            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;`);
+        }
+    }
     const handleMessage = (event) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b;
         try {
             const message = JSON.parse(event.nativeEvent.data);
-            const { type, data } = message;
-            switch (type) {
-                case messages_1.messages.SELECTION_CHANGE: {
-                    // Convert selection data to array of active actions
-                    const activeItems = [];
-                    if (data.bold)
-                        activeItems.push('bold');
-                    if (data.italic)
-                        activeItems.push('italic');
-                    if (data.underline)
-                        activeItems.push('underline');
-                    selectionChangeListeners.current.forEach(listener => listener(activeItems));
+            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;
+                        }
+                    }
                     break;
-                }
-                case messages_1.messages.CONTENT_CHANGE:
-                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, data);
+                case messages_1.messages.LINK_TOUCHED:
+                    onLink === null || onLink === void 0 ? void 0 : onLink(data);
+                    break;
+                case messages_1.messages.LOG:
+                    console.log('FROM EDIT:', ...data);
+                    break;
+                case messages_1.messages.SELECTION_CHANGE:
+                    selectionChangeListeners.current.forEach(listener => listener(message.data));
                     break;
                 case messages_1.messages.CONTENT_FOCUSED:
-                    (_b = props.onFocus) === null || _b === void 0 ? void 0 : _b.call(props);
+                    focusRef.current = true;
+                    focusListeners.current.forEach(fn => fn());
+                    onFocus === null || onFocus === void 0 ? void 0 : onFocus();
                     break;
                 case messages_1.messages.CONTENT_BLUR:
-                    (_c = props.onBlur) === null || _c === void 0 ? void 0 : _c.call(props);
+                    focusRef.current = false;
+                    onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                    break;
+                case messages_1.messages.CONTENT_CHANGE:
+                    onChange === null || onChange === void 0 ? void 0 : onChange(data);
+                    break;
+                case messages_1.messages.CONTENT_PASTED:
+                    onPaste === null || onPaste === void 0 ? void 0 : onPaste(data);
+                    break;
+                case messages_1.messages.CONTENT_KEYUP:
+                    onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(data);
+                    break;
+                case messages_1.messages.CONTENT_KEYDOWN:
+                    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(data);
+                    break;
+                case messages_1.messages.ON_INPUT:
+                    onInput === null || onInput === void 0 ? void 0 : onInput(data);
                     break;
                 case messages_1.messages.OFFSET_HEIGHT:
-                    (_d = props.onHeightChange) === null || _d === void 0 ? void 0 : _d.call(props, data);
+                    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);
+                    }
+                    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));
+                    if (offsetY > 0)
+                        onCursorPosition === null || onCursorPosition === void 0 ? void 0 : onCursorPosition(offsetY);
                     break;
                 default:
-                    (_e = props.onMessage) === null || _e === void 0 ? void 0 : _e.call(props, message);
+                    onMessage === null || onMessage === void 0 ? void 0 : onMessage(message);
                     break;
             }
         }
-        catch (_f) {
+        catch (_c) {
             // Non-JSON message, ignore
         }
     };
-    const sendToWebView = (type) => {
-        var _a;
-        const data = JSON.stringify({ type });
-        const script = `window.dispatchEvent(new MessageEvent('message', { data: ${JSON.stringify(data)} })); true;`;
-        (_a = webRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript(script);
-    };
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        sendAction(type) {
-            sendToWebView(type);
-        },
-        registerToolbar(listener) {
-            selectionChangeListeners.current.push(listener);
-        },
-        focusContentEditor() {
-            var _a, _b, _c;
+    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') {
-                !keyboardOpen && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+                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);
             }
-            sendToWebView('focus');
-        },
-        dismissKeyboard() {
-            sendToWebView('blur');
-            react_native_1.Keyboard.dismiss();
-        },
-        get isKeyboardOpen() {
-            return keyboardOpen;
-        },
-        showAndroidKeyboard() {
-            var _a, _b, _c;
-            if (react_native_1.Platform.OS === 'android') {
-                !keyboardOpen && ((_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);
-            }
-        },
-    }));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_native_webview_1.WebView, { ref: webRef, originWhitelist: ['*'], javaScriptEnabled: true, scrollEnabled: false, source: (0, createHTML_1.createHTML)(), onMessage: handleMessage, style: [styles.editorWebView, props.style], ...props.webViewProps }),
-        react_native_1.Platform.OS === 'android' && (react_1.default.createElement(react_native_1.TextInput, { ref: inputRef, style: styles.hiddenInput }))));
+            sendAction(actions_1.actions.content, 'focus');
+        }
+        sendAction(actions_1.actions.init);
+    };
+    (0, react_1.useImperativeHandle)(ref, () => {
+        const postActionToWebView = sendAction;
+        return {
+            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;
+                    postActionToWebView(actions_1.actions.content, 'postHtml');
+                    pendingContentHtmlRef.current = setTimeout(() => {
+                        if (contentRejectRef.current)
+                            contentRejectRef.current('timeout');
+                    }, 5000);
+                });
+            },
+            sendAction(action) {
+                postActionToWebView(action, 'result');
+            },
+        };
+    });
+    const onViewLayout = ({ nativeEvent: { layout } }) => {
+        layoutRef.current = layout;
+    };
+    const renderWebView = () => {
+        var _a;
+        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;
+                    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);
+                        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()));
+    }
+    return renderWebView();
 });
+exports.RichEditor = exports.RichTextEditor;
 const styles = react_native_1.StyleSheet.create({
-    editorWebView: {
-        minHeight: 150,
-        backgroundColor: '#fff',
-    },
-    hiddenInput: {
+    _input: {
         position: 'absolute',
         width: 1,
         height: 1,
@@ -151,4 +386,8 @@ const styles = react_native_1.StyleSheet.create({
         bottom: -999,
         left: -999,
     },
+    webview: {
+        backgroundColor: 'transparent',
+    },
 });
+exports.default = exports.RichTextEditor;

package/dist/RichToolbar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const defaultActions: ("bold" | "italic" | "underline" | "strikethrough" | "removeFormat" | "checkboxList" | "insertUnorderedList" | "insertOrderedList" | "blockquote" | "code" | "link" | "indent" | "outdent" | "justifyLeft" | "justifyCenter" | "justifyRight" | "justifyFull" | "undo" | "redo" | "keyboard")[];
+export declare const defaultActions: string[];
 interface RichToolbarProps {
     editor?: {
         current: any;
@@ -27,6 +27,7 @@ interface RichToolbarProps {
     flatContainerStyle?: any;
     horizontal?: boolean;
     children?: React.ReactNode;
+    [key: string]: any;
 }
-export declare function RichToolbar({ editor, getEditor, actions: actionsProp, disabled, iconTint, selectedIconTint, disabledIconTint, iconSize, iconGap, style, itemStyle, selectedButtonStyle, unselectedButtonStyle, disabledButtonStyle, iconMap, renderAction, onPressAddImage, onInsertLink, insertVideo, flatContainerStyle, horizontal, children, }: Readonly<RichToolbarProps>): any;
-export {};
+export declare function RichToolbar({ editor: editorProp, getEditor, actions: actionsProp, disabled, iconTint, selectedIconTint, disabledIconTint, iconSize, iconGap, style, itemStyle, selectedButtonStyle, unselectedButtonStyle, disabledButtonStyle, iconMap, renderAction, onPressAddImage, onInsertLink, insertVideo, flatContainerStyle, horizontal, children, ...restProps }: Readonly<RichToolbarProps>): any;
+export default RichToolbar;