rn-rich-text-editor 0.0.3 → 0.0.5

package/dist/RichEditor.js

@@ -98,25 +98,29 @@ exports.RichEditor = (0, react_1.forwardRef)((props, ref) => {
             // 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) {
-            var _a;
-            (_a = webRef.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({ type }));
+            sendToWebView(type);
         },
         registerToolbar(listener) {
             selectionChangeListeners.current.push(listener);
         },
         focusContentEditor() {
-            var _a, _b, _c, _d;
+            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);
             }
-            (_d = webRef.current) === null || _d === void 0 ? void 0 : _d.postMessage(JSON.stringify({ type: 'focus' }));
+            sendToWebView('focus');
         },
         dismissKeyboard() {
-            var _a;
-            (_a = webRef.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({ type: 'blur' }));
+            sendToWebView('blur');
             react_native_1.Keyboard.dismiss();
         },
         get isKeyboardOpen() {
@@ -131,10 +135,14 @@ exports.RichEditor = (0, react_1.forwardRef)((props, ref) => {
         },
     }));
     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_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 }))));
 });
 const styles = react_native_1.StyleSheet.create({
+    editorWebView: {
+        minHeight: 150,
+        backgroundColor: '#fff',
+    },
     hiddenInput: {
         position: 'absolute',
         width: 1,

package/dist/RichToolbar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const defaultActions: ("bold" | "italic" | "underline" | "checkboxList" | "link" | "keyboard")[];
+export declare const defaultActions: ("bold" | "italic" | "underline" | "strikethrough" | "removeFormat" | "checkboxList" | "insertUnorderedList" | "insertOrderedList" | "blockquote" | "code" | "link" | "indent" | "outdent" | "justifyLeft" | "justifyCenter" | "justifyRight" | "justifyFull" | "undo" | "redo" | "keyboard")[];
 interface RichToolbarProps {
     editor?: {
         current: any;

package/dist/RichToolbar.js

@@ -40,10 +40,24 @@ 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.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
@@ -52,8 +66,22 @@ function getDefaultIcon() {
         [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.strikethrough]: require('./img/strikethrough.png'),
+        [actions_1.actions.removeFormat]: require('./img/remove_format.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.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'),
     };
 }
@@ -127,7 +155,21 @@ function RichToolbar({ editor, getEditor, actions: actionsProp = exports.default
             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.insertOrderedList:
+            case actions_1.actions.blockquote:
+            case actions_1.actions.code:
+            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);
                 break;

package/dist/actions.d.ts

@@ -2,8 +2,22 @@ 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";
 };

package/dist/actions.js

@@ -5,8 +5,22 @@ exports.actions = {
     setBold: 'bold',
     setItalic: 'italic',
     setUnderline: 'underline',
+    strikethrough: 'strikethrough',
+    removeFormat: 'removeFormat',
     checkboxList: 'checkboxList',
+    insertUnorderedList: 'insertUnorderedList',
+    insertOrderedList: 'insertOrderedList',
+    blockquote: 'blockquote',
+    code: 'code',
     insertLink: 'link',
+    indent: 'indent',
+    outdent: 'outdent',
+    justifyLeft: 'justifyLeft',
+    justifyCenter: 'justifyCenter',
+    justifyRight: 'justifyRight',
+    justifyFull: 'justifyFull',
+    undo: 'undo',
+    redo: 'redo',
     keyboard: 'keyboard',
-    init: 'init'
+    init: 'init',
 };

package/dist/editor/createHTML.js

@@ -10,11 +10,19 @@ function createHTML() {
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 <style>
-  body { margin:0; font-family: system-ui; }
+  html, body {
+    margin: 0;
+    padding: 0;
+    font-family: system-ui;
+    min-height: 200px;
+    height: 100%;
+  }
   #editor {
     padding: 12px;
-    min-height: 100%;
+    min-height: 150px;
     outline: none;
+    -webkit-user-select: text;
+    user-select: text;
   }
   [placeholder]:empty::before {
     content: attr(placeholder);
@@ -59,35 +67,63 @@ ${(0, contentCSS_1.getContentCSS)()}
   window.addEventListener('message', e => {
     const msg = JSON.parse(e.data);
     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')) {
+
+    if (type === 'focus') {
+      editor.focus();
+    } else if (type === 'blur') {
+      editor.blur();
+    } else {
+      // Restore focus so format commands apply to the editor (important when toolbar tap steals focus)
+      editor.focus();
+      if (type === 'bold') {
+        document.execCommand('bold');
+      } else if (type === 'italic') {
+        document.execCommand('italic');
+      } else if (type === 'underline') {
+        document.execCommand('underline');
+      } else if (type === 'strikethrough') {
+        document.execCommand('strikeThrough');
+      } else if (type === 'removeFormat') {
+        document.execCommand('removeFormat');
+      } else if (type === 'undo') {
+        document.execCommand('undo');
+      } else if (type === 'redo') {
+        document.execCommand('redo');
+      } else if (type === 'insertUnorderedList') {
+        document.execCommand('insertUnorderedList');
+      } else if (type === 'insertOrderedList') {
         document.execCommand('insertOrderedList');
-      } else {
+      } else if (type === 'checkboxList') {
         document.execCommand('insertOrderedList');
+      } else if (type === 'indent') {
+        document.execCommand('indent');
+      } else if (type === 'outdent') {
+        document.execCommand('outdent');
+      } else if (type === 'justifyLeft') {
+        document.execCommand('justifyLeft');
+      } else if (type === 'justifyCenter') {
+        document.execCommand('justifyCenter');
+      } else if (type === 'justifyRight') {
+        document.execCommand('justifyRight');
+      } else if (type === 'justifyFull') {
+        document.execCommand('justifyFull');
+      } else if (type === 'blockquote') {
+        document.execCommand('formatBlock', false, 'blockquote');
+      } else if (type === 'code') {
+        document.execCommand('formatBlock', false, 'pre');
+      } 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 === 'focus') {
-      editor.focus();
-    }
-    else if (type === 'blur') {
-      editor.blur();
-    }
   });
 </script>
 </body>

package/package.json

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