Manipulate the DOM in the editor

CHANGELOG.md

@@ -2,7 +2,8 @@
 
 ## 1.5.0
 - Add `onMessage` props on editor Callback outside postMessage internal type processing
-- Added `_.sendEvent(type, data)` event callback to RN, using onMessage to receive callback
+- Add `_.sendEvent(type, data)` event callback to RN, using onMessage to receive callback
+- Add `commandDOM` method can manipulate DOM
 
 ## 1.4.0
 #### Added

README.md

@@ -65,6 +65,13 @@ The editor component. Simply place this component in your view hierarchy to rece
     <img src="" ontouchstart="_.sendEvent('ImgClick')"/>
     ```
 
+* `commandDOM`
+   Manipulate the DOM in the editor
+   ```
+    // $ = document.querySelector
+    this.richText.current?.commandDOM(`$('#title').style.color='${color}'`);
+    ```
+
 * `useContainer`
 
 	A boolean value that determines if a View container is wrapped around the WebView. The default value is true. If you are using your own View to wrap this library around, set this value to false.

examples/src/example.js

@@ -24,7 +24,7 @@ import {InsertLinkModal} from './insertLink';
 import {EmojiView} from './emoji';
 
 const initHTML = `<br/>
-<center><b ontouchstart="_.sendEvent('TitleClick')">Rich Editor</b></center>
+<center><b ontouchstart="_.sendEvent('TitleClick')" id="title">Rich Editor</b></center>
 <center>
 <a href="https://github.com/wxik/react-native-rich-editor">React Native</a>
 <span>And</span>
@@ -207,7 +207,12 @@ class Example extends React.Component {
     handleMessage = ({type, data}) => {
         switch (type) {
             case 'ImgClick':
-                Alert.alert('Click Image');
+                const index = this._tempIndex || 0;
+                const color = ['red', 'blue', 'gray', 'yellow', 'coral'][index];
+                this._tempIndex = index + 1 >= color.length ? 0 : index + 1;
+
+                // command: $ = document.querySelector
+                this.richText.current?.commandDOM(`$('#title').style.color='${color}'`);
                 break;
             case 'TitleClick':
                 Alert.alert('Click Title');

src/RichEditor.js

@@ -329,6 +329,12 @@ export default class RichTextEditor extends Component {
         }
     }
 
+    commandDOM(command) {
+        if (command) {
+            this._sendAction(actions.content, 'commandDOM', command);
+        }
+    }
+
     init() {
         let that = this;
         const {initialFocus, initialContentHTML, placeholder, editorInitializedCallback, disabled} = that.props;

src/editor.js

@@ -188,6 +188,10 @@ function createHTML(options = {}) {
                             console.log("set placeholderColor error!")
                         }
                     }
+                },
+
+                commandDOM: function (command){
+                    try {new Function("$", command)(exports.document.querySelector.bind(exports.document))} catch(e){console.error(e)};
                 }
             },
 
@@ -336,6 +340,7 @@ function createHTML(options = {}) {
         }
     })({
         window: window.ReactNativeWebView || window.parent,
+        document: document
     });
 </script>
 </body>