insert-mention-content-change: Use document.execCommand('insertHTML', ...) to insert @mentions to trigger change events.

Author: philpettican

README.md

@@ -165,22 +165,6 @@ This method registers a function that will get called whenver the cursor positio
 
 -   `registerToolbar(listener)`
 
-## Testing changes using the example app
-
--   Install `yalc` globally. See https://www.npmjs.com/package/yalc for more details
--   `$ yarn`
--   `$ cd ios && pod install && cd ..`
--   `$ bash build.sh`
--   `$ react-native run-ios`
--   or
--   `$ react-native run-android`
--   In order for the example app to refresh with the latest changes, you need to:
--   re-run `$ bash build.sh`
--   Stop and restart the metro bundler and then run
--   `$ react-native run-ios`
--   or
--   `$ react-native run-android`
-
 ### Example Usage:
 
 ```javascript

example/App.js

@@ -19,6 +19,8 @@ export default class RichTextExample extends Component {
 	state = {
 		mentionListVisible: false,
 		mentionSearchText: '',
+		content:
+			'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>',
 	};
 
 	constructor(props) {
@@ -28,6 +30,7 @@ export default class RichTextExample extends Component {
 		this.onMentioning = this.onMentioning.bind(this);
 		this.onFinishMention = this.onFinishMention.bind(this);
 		this.onListItemPress = this.onListItemPress.bind(this);
+		this.onContentChange = this.onContentChange.bind(this);
 	}
 
 	onMentioning(text) {
@@ -45,9 +48,9 @@ export default class RichTextExample extends Component {
 	}
 
 	onListItemPress(item, index, items) {
-		console.log('item', item);
-		console.log('index', index);
-		console.log('items', items);
+		//console.log('item', item);
+		//console.log('index', index);
+		//console.log('items', items);
 
 		const { name } = item;
 		this.richtext.insertMention(
@@ -73,6 +76,8 @@ export default class RichTextExample extends Component {
 	}
 
 	render() {
+		const { content } = this.state;
+
 		return (
 			<View style={styles.container}>
 				{false && this.renderInsertHTMLTest()}
@@ -82,9 +87,8 @@ export default class RichTextExample extends Component {
 					ref={r => (this.richtext = r)}
 					style={styles.richText}
 					initialTitleHTML={'Title!!'}
-					initialContentHTML={
-						'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>'
-					}
+					enableOnChange={true}
+					initialContentHTML={content}
 					editorInitializedCallback={() => this.onEditorInitialized()}
 					customCSS={CSS}
 					onMentioning={this.onMentioning}
@@ -98,6 +102,7 @@ export default class RichTextExample extends Component {
 
 	onEditorInitialized() {
 		this.setFocusHandlers();
+		this.setContentChangeListener();
 		this.getHTML();
 		this.richtext.insertExternalCSS(EXTERNAL_CSS);
 	}
@@ -137,6 +142,17 @@ export default class RichTextExample extends Component {
 		});
 	}
 
+	setContentChangeListener() {
+		this.richtext.registerContentChangeListener(this.onContentChange);
+	}
+
+	onContentChange(value) {
+		//console.log('onContentChange', value);
+		this.setState({
+			content: value,
+		});
+	}
+
 	renderInsertHTMLTest() {
 		return (
 			<Button

example/README.md

@@ -0,0 +1,40 @@
+# Example project
+
+## Install deps
+
+```bash
+cd example
+yarn install
+cd ios
+pod install
+```
+
+## Running (ios)
+
+```bash
+cd example
+react-native run-ios
+```
+
+## Running (android)
+
+```bash
+cd example
+react-native run-android
+```
+
+## Testing changes
+
+-   Install `yalc` globally. See https://www.npmjs.com/package/yalc for more details
+
+```bash
+cd example
+bash build.sh
+```
+
+-   In order for the example app to refresh with the latest changes, you need to:
+-   Run `$ bash build.sh`
+-   Stop and restart the metro bundler and then run
+-   `$ react-native run-ios`
+-   or
+-   `$ react-native run-android`

example/build.sh

@@ -1,4 +1,4 @@
 cd ..
 yalc publish
 cd example/
-yalc add react-native-zss-rich-text-editor
+yalc link react-native-zss-rich-text-editor

example/package.json

@@ -14,7 +14,7 @@
 		"react-native": "0.61.5",
 		"react-native-keyboard-spacer": "^0.4.1",
 		"react-native-webview": "^8.1.2",
-		"react-native-zss-rich-text-editor": "file:../"
+		"react-native-zss-rich-text-editor": "../"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.7.7",

src/assets/editor.html

@@ -8426,27 +8426,6 @@
 				}
 			}
 
-			zss_editor.replaceMentionWithElement = function(element) {
-				if (!element) {
-					return;
-				}
-
-				/* zss_editor.log('replaceMentionWithElement()'); */
-				var externalMentionSpan = document.getElementById(
-					mentionExternalSpanId,
-				);
-				if (!externalMentionSpan) {
-					return;
-				}
-
-				var externalMentionSpanParent = externalMentionSpan.parentNode;
-				externalMentionSpanParent.removeChild(externalMentionSpan);
-				insertElementAtCursor(element);
-				insertElementAtCursor(document.createTextNode('\u00A0'));
-
-				fireEventDidExitMentionMode();
-			};
-
 			function setupTouchEndEnableEditing(editorId) {
 				$('#' + editorId).on('touchend', function(e) {
 					zss_editor.enabledEditingItems(e);
@@ -9016,16 +8995,36 @@
 				/* zss_editor.log(
 					`insertMention('${url}', '${title}', '${className}')`,
 				); */
+				zss_editor.removeMentionRemains();
 				var mentionLinkElement = document.createElement('a');
 				mentionLinkElement.className = encodeHtmlEntities(className);
 				mentionLinkElement.setAttribute(
 					'href',
 					encodeHtmlEntities(url),
 				);
 				mentionLinkElement.textContent = encodeHtmlEntities(title);
+				document.execCommand(
+					'insertHTML',
+					false,
+					mentionLinkElement.outerHTML,
+				);
 				var space = document.createElement('span');
 				space.innerHTML = '\xa0';
-				zss_editor.replaceMentionWithElement(mentionLinkElement);
+				document.execCommand('insertHTML', false, space.outerHTML);
+				fireEventDidExitMentionMode();
+			};
+
+			zss_editor.removeMentionRemains = function() {
+				/* zss_editor.log('removeMentionRemains()'); */
+				var externalMentionSpan = document.getElementById(
+					mentionExternalSpanId,
+				);
+				if (!externalMentionSpan) {
+					return;
+				}
+
+				var externalMentionSpanParent = externalMentionSpan.parentNode;
+				externalMentionSpanParent.removeChild(externalMentionSpan);
 			};
 
 			function removeNode(previous) {