rn-rich-text-editor 0.0.5 → 0.0.6

package/dist/RichToolbar.js

@@ -40,74 +40,66 @@ const react_native_1 = require("react-native");
 const actions_1 = require("./actions");
 exports.defaultActions = [
     actions_1.actions.keyboard,
-    actions_1.actions.undo,
-    actions_1.actions.redo,
     actions_1.actions.setBold,
     actions_1.actions.setItalic,
     actions_1.actions.setUnderline,
-    actions_1.actions.strikethrough,
     actions_1.actions.removeFormat,
-    actions_1.actions.insertUnorderedList,
-    actions_1.actions.insertOrderedList,
-    actions_1.actions.checkboxList,
-    actions_1.actions.blockquote,
-    actions_1.actions.code,
+    actions_1.actions.insertBulletsList,
     actions_1.actions.indent,
     actions_1.actions.outdent,
-    actions_1.actions.justifyLeft,
-    actions_1.actions.justifyCenter,
-    actions_1.actions.justifyRight,
-    actions_1.actions.justifyFull,
     actions_1.actions.insertLink,
 ];
-// Icons from img folder - direct require now that icons exist
 function getDefaultIcon() {
     return {
+        [actions_1.actions.insertImage]: require('./img/image.png'),
+        [actions_1.actions.keyboard]: require('./img/keyboard.png'),
         [actions_1.actions.setBold]: require('./img/bold.png'),
         [actions_1.actions.setItalic]: require('./img/italic.png'),
+        [actions_1.actions.setSubscript]: require('./img/subscript.png'),
+        [actions_1.actions.setSuperscript]: require('./img/superscript.png'),
+        [actions_1.actions.insertBulletsList]: require('./img/ul.png'),
+        [actions_1.actions.insertOrderedList]: require('./img/ol.png'),
+        [actions_1.actions.insertLink]: require('./img/link.png'),
+        [actions_1.actions.setStrikethrough]: require('./img/strikethrough.png'),
         [actions_1.actions.setUnderline]: require('./img/underline.png'),
-        [actions_1.actions.strikethrough]: require('./img/strikethrough.png'),
+        [actions_1.actions.heading1]: require('./img/heading1.png'),
+        [actions_1.actions.insertVideo]: require('./img/video.png'),
         [actions_1.actions.removeFormat]: require('./img/remove_format.png'),
+        [actions_1.actions.undo]: require('./img/undo.png'),
+        [actions_1.actions.redo]: require('./img/redo.png'),
         [actions_1.actions.checkboxList]: require('./img/checkbox.png'),
-        [actions_1.actions.insertUnorderedList]: require('./img/ul.png'),
-        [actions_1.actions.insertOrderedList]: require('./img/ol.png'),
-        [actions_1.actions.blockquote]: require('./img/blockquote.png'),
+        [actions_1.actions.table]: require('./img/table.png'),
         [actions_1.actions.code]: require('./img/code.png'),
-        [actions_1.actions.insertLink]: require('./img/link.png'),
-        [actions_1.actions.indent]: require('./img/indent.png'),
         [actions_1.actions.outdent]: require('./img/outdent.png'),
-        [actions_1.actions.justifyLeft]: require('./img/justify_left.png'),
-        [actions_1.actions.justifyCenter]: require('./img/justify_center.png'),
-        [actions_1.actions.justifyRight]: require('./img/justify_right.png'),
-        [actions_1.actions.justifyFull]: require('./img/justify_full.png'),
-        [actions_1.actions.undo]: require('./img/undo.png'),
-        [actions_1.actions.redo]: require('./img/redo.png'),
-        [actions_1.actions.keyboard]: require('./img/keyboard.png'),
+        [actions_1.actions.indent]: require('./img/indent.png'),
+        [actions_1.actions.alignLeft]: require('./img/justify_left.png'),
+        [actions_1.actions.alignCenter]: require('./img/justify_center.png'),
+        [actions_1.actions.alignRight]: require('./img/justify_right.png'),
+        [actions_1.actions.alignFull]: require('./img/justify_full.png'),
+        [actions_1.actions.blockquote]: require('./img/blockquote.png'),
+        [actions_1.actions.line]: require('./img/line.png'),
+        [actions_1.actions.fontSize]: require('./img/fontSize.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, }) {
+function RichToolbar({ editor: editorProp, 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, ...restProps }) {
     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 data = actionsProp.map(action => ({
+        action,
+        selected: items.includes(action) || items.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.');
+        const editor = (_a = editorProp === null || editorProp === void 0 ? void 0 : editorProp.current) !== null && _a !== void 0 ? _a : getEditor === null || getEditor === void 0 ? void 0 : getEditor();
+        if (!editor) {
+            if (__DEV__) {
+                console.warn('Toolbar has no editor. Please make sure the prop getEditor or editor returns a ref to the editor component.');
             }
         }
         else {
-            (_b = editorInstance.registerToolbar) === null || _b === void 0 ? void 0 : _b.call(editorInstance, setSelectedItems);
-            editorRef.current = editorInstance;
+            (_b = editor.registerToolbar) === null || _b === void 0 ? void 0 : _b.call(editor, (selectedItems) => setItems(selectedItems));
+            editorRef.current = editor;
         }
     };
     (0, react_1.useEffect)(() => {
@@ -121,22 +113,22 @@ function RichToolbar({ editor, getEditor, actions: actionsProp = exports.default
     };
     const handleKeyboard = () => {
         var _a, _b;
-        const editorInstance = editorRef.current;
-        if (!editorInstance) {
+        const editor = editorRef.current;
+        if (!editor) {
             mount();
             return;
         }
-        if (editorInstance.isKeyboardOpen) {
-            (_a = editorInstance.dismissKeyboard) === null || _a === void 0 ? void 0 : _a.call(editorInstance);
+        if (editor.isKeyboardOpen) {
+            (_a = editor.dismissKeyboard) === null || _a === void 0 ? void 0 : _a.call(editor);
         }
         else {
-            (_b = editorInstance.focusContentEditor) === null || _b === void 0 ? void 0 : _b.call(editorInstance);
+            (_b = editor.focusContentEditor) === null || _b === void 0 ? void 0 : _b.call(editor);
         }
     };
     const onPress = (action) => {
-        var _a, _b, _c, _d, _e;
-        const editorInstance = editorRef.current;
-        if (!editorInstance) {
+        var _a, _b, _c, _d, _e, _f;
+        const editor = editorRef.current;
+        if (!editor) {
             mount();
             return;
         }
@@ -146,43 +138,52 @@ function RichToolbar({ editor, getEditor, actions: actionsProp = exports.default
                     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);
+                (_a = editor.showAndroidKeyboard) === null || _a === void 0 ? void 0 : _a.call(editor);
+                (_b = editor.sendAction) === null || _b === void 0 ? void 0 : _b.call(editor, action);
+                break;
+            case actions_1.actions.insertImage:
+                onPressAddImage === null || onPressAddImage === void 0 ? void 0 : onPressAddImage();
+                break;
+            case actions_1.actions.insertVideo:
+                insertVideo === null || insertVideo === void 0 ? void 0 : insertVideo();
                 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.strikethrough:
-            case actions_1.actions.removeFormat:
-            case actions_1.actions.checkboxList:
-            case actions_1.actions.insertUnorderedList:
+            case actions_1.actions.undo:
+            case actions_1.actions.redo:
+            case actions_1.actions.insertBulletsList:
             case actions_1.actions.insertOrderedList:
-            case actions_1.actions.blockquote:
+            case actions_1.actions.checkboxList:
+            case actions_1.actions.setUnderline:
+            case actions_1.actions.heading1:
+            case actions_1.actions.heading2:
+            case actions_1.actions.heading3:
+            case actions_1.actions.heading4:
+            case actions_1.actions.heading5:
+            case actions_1.actions.heading6:
             case actions_1.actions.code:
+            case actions_1.actions.blockquote:
+            case actions_1.actions.line:
+            case actions_1.actions.setParagraph:
+            case actions_1.actions.removeFormat:
+            case actions_1.actions.alignLeft:
+            case actions_1.actions.alignCenter:
+            case actions_1.actions.alignRight:
+            case actions_1.actions.alignFull:
+            case actions_1.actions.setSubscript:
+            case actions_1.actions.setSuperscript:
+            case actions_1.actions.setStrikethrough:
+            case actions_1.actions.setHR:
             case actions_1.actions.indent:
             case actions_1.actions.outdent:
-            case actions_1.actions.justifyLeft:
-            case actions_1.actions.justifyCenter:
-            case actions_1.actions.justifyRight:
-            case actions_1.actions.justifyFull:
-            case actions_1.actions.undo:
-            case actions_1.actions.redo:
-                (_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);
+                (_c = editor.showAndroidKeyboard) === null || _c === void 0 ? void 0 : _c.call(editor);
+                (_d = editor.sendAction) === null || _d === void 0 ? void 0 : _d.call(editor, 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);
+                (_f = (_e = restProps)[action]) === null || _f === void 0 ? void 0 : _f.call(_e);
                 break;
         }
     };
@@ -198,7 +199,7 @@ function RichToolbar({ editor, getEditor, actions: actionsProp = exports.default
                 tintColor,
                 height: iconSize,
                 width: iconSize,
-            } }))) : (react_1.default.createElement(react_native_1.View, { style: { padding: 4 } }))));
+            } }))) : null));
     };
     const renderActionItem = (action, selected) => renderAction ? renderAction(action, selected) : defaultRenderAction(action, selected);
     const barStyle = [
@@ -221,3 +222,4 @@ const styles = react_native_1.StyleSheet.create({
         alignItems: 'center',
     },
 });
+exports.default = RichToolbar;

package/dist/actions.d.ts

@@ -1,23 +1,58 @@
 export declare const actions: {
-    readonly setBold: "bold";
-    readonly setItalic: "italic";
-    readonly setUnderline: "underline";
-    readonly strikethrough: "strikethrough";
-    readonly removeFormat: "removeFormat";
-    readonly checkboxList: "checkboxList";
-    readonly insertUnorderedList: "insertUnorderedList";
-    readonly insertOrderedList: "insertOrderedList";
-    readonly blockquote: "blockquote";
-    readonly code: "code";
-    readonly insertLink: "link";
-    readonly indent: "indent";
-    readonly outdent: "outdent";
-    readonly justifyLeft: "justifyLeft";
-    readonly justifyCenter: "justifyCenter";
-    readonly justifyRight: "justifyRight";
-    readonly justifyFull: "justifyFull";
-    readonly undo: "undo";
-    readonly redo: "redo";
-    readonly keyboard: "keyboard";
-    readonly init: "init";
+    content: string;
+    updateHeight: string;
+    setBold: string;
+    setItalic: string;
+    setUnderline: string;
+    heading1: string;
+    heading2: string;
+    heading3: string;
+    heading4: string;
+    heading5: string;
+    heading6: string;
+    insertLine: string;
+    setParagraph: string;
+    removeFormat: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    alignFull: string;
+    insertBulletsList: string;
+    insertOrderedList: string;
+    checkboxList: string;
+    insertLink: string;
+    insertText: string;
+    insertHTML: string;
+    insertImage: string;
+    insertVideo: string;
+    fontSize: string;
+    fontName: string;
+    setSubscript: string;
+    setSuperscript: string;
+    setStrikethrough: string;
+    setHR: string;
+    indent: string;
+    outdent: string;
+    undo: string;
+    redo: string;
+    code: string;
+    table: string;
+    line: string;
+    foreColor: string;
+    hiliteColor: string;
+    blockquote: string;
+    keyboard: string;
+    setTitlePlaceholder: string;
+    setContentPlaceholder: string;
+    setTitleFocusHandler: string;
+    setContentFocusHandler: string;
+    prepareInsert: string;
+    restoreSelection: string;
+    setCustomCSS: string;
+    setTextColor: string;
+    setBackgroundColor: string;
+    init: string;
+    setEditorHeight: string;
+    setFooterHeight: string;
+    setPlatform: string;
 };

package/dist/actions.js

@@ -2,25 +2,60 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.actions = void 0;
 exports.actions = {
+    content: 'content',
+    updateHeight: 'UPDATE_HEIGHT',
     setBold: 'bold',
     setItalic: 'italic',
     setUnderline: 'underline',
-    strikethrough: 'strikethrough',
+    heading1: 'heading1',
+    heading2: 'heading2',
+    heading3: 'heading3',
+    heading4: 'heading4',
+    heading5: 'heading5',
+    heading6: 'heading6',
+    insertLine: 'line',
+    setParagraph: 'paragraph',
     removeFormat: 'removeFormat',
+    alignLeft: 'justifyLeft',
+    alignCenter: 'justifyCenter',
+    alignRight: 'justifyRight',
+    alignFull: 'justifyFull',
+    insertBulletsList: 'unorderedList',
+    insertOrderedList: 'orderedList',
     checkboxList: 'checkboxList',
-    insertUnorderedList: 'insertUnorderedList',
-    insertOrderedList: 'insertOrderedList',
-    blockquote: 'blockquote',
-    code: 'code',
     insertLink: 'link',
+    insertText: 'text',
+    insertHTML: 'html',
+    insertImage: 'image',
+    insertVideo: 'video',
+    fontSize: 'fontSize',
+    fontName: 'fontName',
+    setSubscript: 'subscript',
+    setSuperscript: 'superscript',
+    setStrikethrough: 'strikeThrough',
+    setHR: 'horizontalRule',
     indent: 'indent',
     outdent: 'outdent',
-    justifyLeft: 'justifyLeft',
-    justifyCenter: 'justifyCenter',
-    justifyRight: 'justifyRight',
-    justifyFull: 'justifyFull',
     undo: 'undo',
     redo: 'redo',
+    code: 'code',
+    table: 'table',
+    line: 'line',
+    foreColor: 'foreColor',
+    hiliteColor: 'hiliteColor',
+    blockquote: 'quote',
     keyboard: 'keyboard',
+    setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
+    setContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',
+    setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
+    setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
+    prepareInsert: 'PREPARE_INSERT',
+    restoreSelection: 'RESTORE_SELECTION',
+    setCustomCSS: 'SET_CUSTOM_CSS',
+    setTextColor: 'SET_TEXT_COLOR',
+    setBackgroundColor: 'SET_BACKGROUND_COLOR',
     init: 'init',
+    setEditorHeight: 'SET_EDITOR_HEIGHT',
+    setFooterHeight: 'SET_FOOTER_HEIGHT',
+    setPlatform: 'SET_PLATFORM',
 };

package/dist/editor/contentCSS.js

@@ -3,23 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getContentCSS = getContentCSS;
 function getContentCSS() {
     return `
-    <style>
-      img, video {
-        max-width: 100%;
-        display: block;
-        margin: 12px auto;
-      }
-      blockquote {
-        border-left: 4px solid #ddd;
-        padding-left: 12px;
-        margin: 12px 0;
-      }
-      pre {
-        background: #f4f4f4;
-        padding: 10px;
-        border-radius: 6px;
-        font-family: monospace;
-      }
-    </style>
-    `;
+  <style>
+      video {max-width: 98%;margin-left:auto;margin-right:auto;display: block;}
+      img {max-width: 98%;vertical-align: middle;}
+      table {width: 100% !important;}
+      table td {width: inherit;}
+      table span { font-size: 12px !important; }
+      .x-todo li {list-style:none;}
+      .x-todo-box {position: relative; left: -24px;}
+      .x-todo-box input{position: absolute;}
+      blockquote{border-left: 6px solid #ddd;padding: 5px 0 5px 10px;margin: 15px 0 15px 15px;}
+      hr{display: block;height: 0; border: 0;border-top: 1px solid #ccc; margin: 15px 0; padding: 0;}
+      pre{padding: 10px 5px 10px 10px;margin: 15px 0;display: block;line-height: 18px;background: #F0F0F0;border-radius: 6px;font-size: 13px; font-family: 'monaco', 'Consolas', "Liberation Mono", Courier, monospace; word-break: break-all; word-wrap: break-word;overflow-x: auto;}
+      pre code {display: block;font-size: inherit;white-space: pre-wrap;color: inherit;}
+  </style>
+  `;
 }

package/dist/editor/createHTML.d.ts

@@ -1,3 +1,3 @@
-export declare function createHTML(): {
-    html: string;
-};
+declare function createHTML(options?: {}): string;
+declare const HTML: string;
+export { HTML, createHTML };