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
```
+* `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 = `
-
Rich Editor
+Rich Editor
React Native
And
@@ -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
});