From 70fd09db9b2a566fa4e95f7c522356cf036cfdaf Mon Sep 17 00:00:00 2001
From: wxik_noohle <stulip@126.com>
Date: Wed, 16 Dec 2020 18:07:54 +0800
Subject: [PATCH] Manipulate the DOM in the editor

---
 CHANGELOG.md            | 3 ++-
 README.md               | 7 +++++++
 examples/src/example.js | 9 +++++++--
 src/RichEditor.js       | 6 ++++++
 src/editor.js           | 5 +++++
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18c1570..2776fd8 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/README.md b/README.md
index ecccfa3..aaf5402 100644
--- a/README.md
+++ b/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.
diff --git a/examples/src/example.js b/examples/src/example.js
index f09a712..79daf7e 100644
--- a/examples/src/example.js
+++ b/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');
diff --git a/src/RichEditor.js b/src/RichEditor.js
index d09c4c1..80aac40 100755
--- a/src/RichEditor.js
+++ b/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;
diff --git a/src/editor.js b/src/editor.js
index 18b6cc3..5ce9f4a 100644
--- a/src/editor.js
+++ b/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>