rn-rich-text-editor 0.0.1 → 0.0.2

package/dist/RichEditor.js

@@ -36,14 +36,111 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichEditor = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_webview_1 = require("react-native-webview");
+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) => {
     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)([]);
+    (0, react_1.useEffect)(() => {
+        const keyboardEventListeners = PlatformIOS
+            ? [
+                react_native_1.Keyboard.addListener('keyboardWillShow', () => setKeyboardOpen(true)),
+                react_native_1.Keyboard.addListener('keyboardWillHide', () => setKeyboardOpen(false)),
+            ]
+            : [
+                react_native_1.Keyboard.addListener('keyboardDidShow', () => setKeyboardOpen(true)),
+                react_native_1.Keyboard.addListener('keyboardDidHide', () => setKeyboardOpen(false)),
+            ];
+        return () => {
+            keyboardEventListeners.forEach(listener => listener.remove());
+        };
+    }, []);
+    const handleMessage = (event) => {
+        var _a, _b, _c, _d, _e;
+        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));
+                    break;
+                }
+                case messages_1.messages.CONTENT_CHANGE:
+                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, data);
+                    break;
+                case messages_1.messages.CONTENT_FOCUSED:
+                    (_b = props.onFocus) === null || _b === void 0 ? void 0 : _b.call(props);
+                    break;
+                case messages_1.messages.CONTENT_BLUR:
+                    (_c = props.onBlur) === null || _c === void 0 ? void 0 : _c.call(props);
+                    break;
+                case messages_1.messages.OFFSET_HEIGHT:
+                    (_d = props.onHeightChange) === null || _d === void 0 ? void 0 : _d.call(props, data);
+                    break;
+                default:
+                    (_e = props.onMessage) === null || _e === void 0 ? void 0 : _e.call(props, message);
+                    break;
+            }
+        }
+        catch (_f) {
+            // Non-JSON message, ignore
+        }
+    };
     (0, react_1.useImperativeHandle)(ref, () => ({
         sendAction(type) {
             var _a;
             (_a = webRef.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({ type }));
-        }
+        },
+        registerToolbar(listener) {
+            selectionChangeListeners.current.push(listener);
+        },
+        focusContentEditor() {
+            var _a, _b, _c, _d;
+            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);
+            }
+            (_d = webRef.current) === null || _d === void 0 ? void 0 : _d.postMessage(JSON.stringify({ type: 'focus' }));
+        },
+        dismissKeyboard() {
+            var _a;
+            (_a = webRef.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({ type: '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_native_webview_1.WebView, { ref: webRef, originWhitelist: ['*'], javaScriptEnabled: true, scrollEnabled: false, source: (0, createHTML_1.createHTML)(), onMessage: props.onMessage }));
+    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, ...props.webViewProps }),
+        react_native_1.Platform.OS === 'android' && (react_1.default.createElement(react_native_1.TextInput, { ref: inputRef, style: styles.hiddenInput }))));
+});
+const styles = react_native_1.StyleSheet.create({
+    hiddenInput: {
+        position: 'absolute',
+        width: 1,
+        height: 1,
+        zIndex: -999,
+        bottom: -999,
+        left: -999,
+    },
 });

package/dist/RichToolbar.d.ts

@@ -1 +1,32 @@
-export declare function RichToolbar({ editor }: any): any;
+import React from 'react';
+export declare const defaultActions: ("bold" | "italic" | "underline" | "checkboxList" | "link" | "keyboard")[];
+interface RichToolbarProps {
+    editor?: {
+        current: any;
+    };
+    getEditor?: () => any;
+    actions?: string[];
+    disabled?: boolean;
+    iconTint?: string;
+    selectedIconTint?: string;
+    disabledIconTint?: string;
+    iconSize?: number;
+    iconGap?: number;
+    style?: any;
+    itemStyle?: any;
+    selectedButtonStyle?: any;
+    unselectedButtonStyle?: any;
+    disabledButtonStyle?: any;
+    iconMap?: {
+        [key: string]: any;
+    };
+    renderAction?: (action: string, selected: boolean) => React.ReactElement;
+    onPressAddImage?: () => void;
+    onInsertLink?: () => void;
+    insertVideo?: () => void;
+    flatContainerStyle?: any;
+    horizontal?: boolean;
+    children?: React.ReactNode;
+}
+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 {};

package/dist/RichToolbar.js

@@ -1,13 +1,181 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultActions = void 0;
 exports.RichToolbar = RichToolbar;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const actions_1 = require("./actions");
-function RichToolbar({ editor }) {
-    return (react_1.default.createElement(react_native_1.View, { style: { flexDirection: 'row', padding: 8 } }, Object.values(actions_1.actions).map(action => (react_1.default.createElement(react_native_1.TouchableOpacity, { key: action, onPress: () => { var _a; return (_a = editor === null || editor === void 0 ? void 0 : editor.current) === null || _a === void 0 ? void 0 : _a.sendAction(action); } },
-        react_1.default.createElement(react_native_1.Text, { style: { marginHorizontal: 10 } }, action))))));
+exports.defaultActions = [
+    actions_1.actions.keyboard,
+    actions_1.actions.setBold,
+    actions_1.actions.setItalic,
+    actions_1.actions.setUnderline,
+    actions_1.actions.checkboxList,
+    actions_1.actions.insertLink,
+];
+// Icons from img folder - direct require now that icons exist
+function getDefaultIcon() {
+    return {
+        [actions_1.actions.setBold]: require('./img/bold.png'),
+        [actions_1.actions.setItalic]: require('./img/italic.png'),
+        [actions_1.actions.setUnderline]: require('./img/underline.png'),
+        [actions_1.actions.checkboxList]: require('./img/checkbox.png'),
+        [actions_1.actions.insertLink]: require('./img/link.png'),
+        [actions_1.actions.keyboard]: require('./img/keyboard.png'),
+    };
 }
+const defaultIcons = getDefaultIcon();
+function RichToolbar({ editor, getEditor, actions: actionsProp = exports.defaultActions, disabled = false, iconTint = '#71787F', selectedIconTint, disabledIconTint, iconSize = 20, iconGap = 16, style, itemStyle, selectedButtonStyle, unselectedButtonStyle, disabledButtonStyle, iconMap, renderAction, onPressAddImage, onInsertLink, insertVideo, flatContainerStyle, horizontal = true, children, }) {
+    const editorRef = (0, react_1.useRef)(null);
+    const [items, setItems] = (0, react_1.useState)([]);
+    const [data, setData] = (0, react_1.useState)(actionsProp.map(action => ({ action, selected: false })));
+    const setSelectedItems = (newItems) => {
+        setItems(prev => (prev === newItems ? prev : newItems));
+        setData(actionsProp.map(action => ({
+            action,
+            selected: newItems.includes(action) || newItems.some(item => item && item === action),
+        })));
+    };
+    const mount = () => {
+        var _a, _b;
+        const editorInstance = (_a = editor === null || editor === void 0 ? void 0 : editor.current) !== null && _a !== void 0 ? _a : getEditor === null || getEditor === void 0 ? void 0 : getEditor();
+        if (!editorInstance) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('Toolbar has no editor. Please make sure the prop editor or getEditor returns a ref to the editor component.');
+            }
+        }
+        else {
+            (_b = editorInstance.registerToolbar) === null || _b === void 0 ? void 0 : _b.call(editorInstance, setSelectedItems);
+            editorRef.current = editorInstance;
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const t = setTimeout(mount);
+        return () => clearTimeout(t);
+    }, []);
+    const getButtonIcon = (action) => {
+        if (iconMap === null || iconMap === void 0 ? void 0 : iconMap[action])
+            return iconMap[action];
+        return defaultIcons[action];
+    };
+    const handleKeyboard = () => {
+        var _a, _b;
+        const editorInstance = editorRef.current;
+        if (!editorInstance) {
+            mount();
+            return;
+        }
+        if (editorInstance.isKeyboardOpen) {
+            (_a = editorInstance.dismissKeyboard) === null || _a === void 0 ? void 0 : _a.call(editorInstance);
+        }
+        else {
+            (_b = editorInstance.focusContentEditor) === null || _b === void 0 ? void 0 : _b.call(editorInstance);
+        }
+    };
+    const onPress = (action) => {
+        var _a, _b, _c, _d, _e;
+        const editorInstance = editorRef.current;
+        if (!editorInstance) {
+            mount();
+            return;
+        }
+        switch (action) {
+            case actions_1.actions.insertLink:
+                if (onInsertLink) {
+                    onInsertLink();
+                    return;
+                }
+                (_a = editorInstance.showAndroidKeyboard) === null || _a === void 0 ? void 0 : _a.call(editorInstance);
+                (_b = editorInstance.sendAction) === null || _b === void 0 ? void 0 : _b.call(editorInstance, action);
+                break;
+            case actions_1.actions.keyboard:
+                handleKeyboard();
+                break;
+            case actions_1.actions.setBold:
+            case actions_1.actions.setItalic:
+            case actions_1.actions.setUnderline:
+            case actions_1.actions.checkboxList:
+                (_c = editorInstance.showAndroidKeyboard) === null || _c === void 0 ? void 0 : _c.call(editorInstance);
+                (_d = editorInstance.sendAction) === null || _d === void 0 ? void 0 : _d.call(editorInstance, action);
+                break;
+            default:
+                if (action === 'image' && onPressAddImage) {
+                    onPressAddImage();
+                    return;
+                }
+                if (action === 'video' && insertVideo) {
+                    insertVideo();
+                    return;
+                }
+                (_e = editorInstance.sendAction) === null || _e === void 0 ? void 0 : _e.call(editorInstance, action);
+                break;
+        }
+    };
+    const defaultRenderAction = (action, selected) => {
+        const icon = getButtonIcon(action);
+        const buttonStyle = selected ? selectedButtonStyle : unselectedButtonStyle;
+        let tintColor = iconTint;
+        if (disabled && disabledIconTint)
+            tintColor = disabledIconTint;
+        else if (selected && selectedIconTint)
+            tintColor = selectedIconTint;
+        return (react_1.default.createElement(react_native_1.TouchableOpacity, { key: action, disabled: disabled, style: [{ width: iconGap + iconSize }, styles.item, itemStyle, buttonStyle], testID: "button_action", accessible: true, onPress: () => onPress(action) }, icon ? (typeof icon === 'function' ? (icon({ selected, disabled, tintColor, iconSize, iconGap })) : (react_1.default.createElement(react_native_1.Image, { source: icon, style: {
+                tintColor,
+                height: iconSize,
+                width: iconSize,
+            } }))) : (react_1.default.createElement(react_native_1.View, { style: { padding: 4 } }))));
+    };
+    const renderActionItem = (action, selected) => renderAction ? renderAction(action, selected) : defaultRenderAction(action, selected);
+    const barStyle = [
+        styles.barContainer,
+        style,
+        disabled && disabledButtonStyle,
+    ];
+    return (react_1.default.createElement(react_native_1.View, { style: barStyle },
+        react_1.default.createElement(react_native_1.FlatList, { horizontal: horizontal, style: flatContainerStyle, keyboardShouldPersistTaps: "always", keyExtractor: (item, index) => item.action + '-' + index, data: data, alwaysBounceHorizontal: false, showsHorizontalScrollIndicator: false, renderItem: ({ item }) => renderActionItem(item.action, item.selected) }),
+        children));
+}
+const styles = react_native_1.StyleSheet.create({
+    barContainer: {
+        height: 44,
+        backgroundColor: '#efefef',
+        alignItems: 'center',
+    },
+    item: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

package/dist/editor/createHTML.js

@@ -48,11 +48,46 @@ ${(0, contentCSS_1.getContentCSS)()}
     });
   });
 
+  editor.addEventListener('focus', () => {
+    post('CONTENT_FOCUSED');
+  });
+
+  editor.addEventListener('blur', () => {
+    post('CONTENT_BLUR');
+  });
+
   window.addEventListener('message', e => {
     const msg = JSON.parse(e.data);
-    if (msg.type === 'bold') document.execCommand('bold');
-    if (msg.type === 'italic') document.execCommand('italic');
-    if (msg.type === 'underline') document.execCommand('underline');
+    const type = msg.type;
+    
+    if (type === 'bold') document.execCommand('bold');
+    else if (type === 'italic') document.execCommand('italic');
+    else if (type === 'underline') document.execCommand('underline');
+    else if (type === 'link') {
+      const url = prompt('Enter link URL:');
+      if (url) {
+        const sel = window.getSelection();
+        const range = sel.getRangeAt(0);
+        const link = document.createElement('a');
+        link.href = url;
+        link.textContent = sel.toString() || url;
+        range.deleteContents();
+        range.insertNode(link);
+      }
+    }
+    else if (type === 'checkboxList') {
+      if (document.queryCommandState('insertOrderedList')) {
+        document.execCommand('insertOrderedList');
+      } else {
+        document.execCommand('insertOrderedList');
+      }
+    }
+    else if (type === 'focus') {
+      editor.focus();
+    }
+    else if (type === 'blur') {
+      editor.blur();
+    }
   });
 </script>
 </body>

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { RichEditor } from './RichEditor';
-export { RichToolbar } from './RichToolbar';
+export { RichToolbar, defaultActions } from './RichToolbar';
 export { actions } from './actions';
 export { createHTML } from './editor/createHTML';
 export { getContentCSS } from './editor/contentCSS';

package/dist/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getContentCSS = exports.createHTML = exports.actions = exports.RichToolbar = exports.RichEditor = void 0;
+exports.getContentCSS = exports.createHTML = exports.actions = exports.defaultActions = exports.RichToolbar = exports.RichEditor = void 0;
 var RichEditor_1 = require("./RichEditor");
 Object.defineProperty(exports, "RichEditor", { enumerable: true, get: function () { return RichEditor_1.RichEditor; } });
 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; } });
 var actions_1 = require("./actions");
 Object.defineProperty(exports, "actions", { enumerable: true, get: function () { return actions_1.actions; } });
 var createHTML_1 = require("./editor/createHTML");

package/package.json

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