Merge pull request wix-incubator#28 from philpettican/bugfix/insert-mention-apostrophe

insert-mention-apostrophe: Escape mention data.

Author: philpettican

README.md

@@ -155,7 +155,7 @@ To know when the title or content are in focus, use the following methods.
 
 To start the @mentioning process, use the following method:
 
--   `startMention`
+-   `startMention()`
 
 To insert an @mention, first either type an @ character to start the @mentioning process or call the startMention method, then use the following method:
 
@@ -165,6 +165,22 @@ 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/build.sh

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

example/package.json

@@ -1,32 +1,32 @@
 {
-  "name": "example",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "start": "react-native start",
-    "test": "jest",
-    "lint": "eslint ."
-  },
-  "dependencies": {
-    "react": "16.9.0",
-    "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:.yalc/react-native-zss-rich-text-editor"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.7.7",
-    "@babel/runtime": "^7.7.7",
-    "@react-native-community/eslint-config": "^0.0.5",
-    "babel-jest": "^24.9.0",
-    "eslint": "^6.8.0",
-    "jest": "^24.9.0",
-    "metro-react-native-babel-preset": "^0.57.0",
-    "react-test-renderer": "16.9.0"
-  },
-  "jest": {
-    "preset": "react-native"
-  }
+	"name": "example",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"android": "react-native run-android",
+		"ios": "react-native run-ios",
+		"start": "react-native start",
+		"test": "jest",
+		"lint": "eslint ."
+	},
+	"dependencies": {
+		"react": "16.9.0",
+		"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:../"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.7.7",
+		"@babel/runtime": "^7.7.7",
+		"@react-native-community/eslint-config": "^0.0.5",
+		"babel-jest": "^24.9.0",
+		"eslint": "^6.8.0",
+		"jest": "^24.9.0",
+		"metro-react-native-babel-preset": "^0.57.0",
+		"react-test-renderer": "16.9.0"
+	},
+	"jest": {
+		"preset": "react-native"
+	}
 }

example/yalc.lock

@@ -115,7 +115,8 @@ export default class RichTextEditor extends Component {
 		const { marginTop = 0, marginBottom = 0 } = this.props.style;
 		const spacing = marginTop + marginBottom + top + bottom;
 
-		const editorAvailableHeight = Dimensions.get('window').height - keyboardHeight * 2 - spacing;
+		const editorAvailableHeight =
+			Dimensions.get('window').height - keyboardHeight * 2 - spacing;
 		this.setEditorHeight(editorAvailableHeight);
 	}
 
@@ -803,7 +804,16 @@ export default class RichTextEditor extends Component {
 	}
 
 	insertMention(url, title, className) {
-		this._sendAction(actions.insertMention, { url, title, className });
+		const escapedUrl = url ? this.escapeJSONString(url) : url;
+		const escapedTitle = title ? this.escapeJSONString(title) : title;
+		const escapedClassName = className
+			? this.escapeJSONString(className)
+			: className;
+		this._sendAction(actions.insertMention, {
+			url: escapedUrl,
+			title: escapedTitle,
+			className: escapedClassName,
+		});
 	}
 
 	_onMentioning(message) {

src/RichTextEditor.js

@@ -8705,7 +8705,7 @@
 				// Next line is comented to prevent deselecting selection. It looks like work but if there are any issues will appear then uconmment it as well as code above.
 				//sel.collapseToStart();
 				var range = sel.getRangeAt(0);
-				var span = document.createElement('span');// something happening here preventing selection of elements
+				var span = document.createElement('span'); // something happening here preventing selection of elements
 				if (zss_editor.isUsingiOS) {
 					range.collapse(false);
 				}
@@ -8973,7 +8973,7 @@
 				/* zss_editor.log(`insertExternalCSS: ${uri}`); */
 				const link = document.createElement('link');
 				link.setAttribute('rel', 'stylesheet');
-				link.setAttribute('href', uri);
+				link.setAttribute('href', encodeHtmlEntities(uri));
 				link.onerror = () => {
 					zss_editor.log(`insertExternalCSS: ${uri} link failed`);
 				};
@@ -9005,8 +9005,8 @@
 
 				if (zss_editor.currentEditingLink) {
 					var c = zss_editor.currentEditingLink;
-					c.attr('href', url);
-					c.attr('class', className);
+					c.attr('href', encodeHtmlEntities(url));
+					c.attr('class', encodeHtmlEntities(className));
 					c.text(title);
 				}
 				zss_editor.enabledEditingItems();
@@ -9017,9 +9017,12 @@
 					`insertMention('${url}', '${title}', '${className}')`,
 				); */
 				var mentionLinkElement = document.createElement('a');
-				mentionLinkElement.className = className;
-				mentionLinkElement.setAttribute('href', url);
-				mentionLinkElement.textContent = title;
+				mentionLinkElement.className = encodeHtmlEntities(className);
+				mentionLinkElement.setAttribute(
+					'href',
+					encodeHtmlEntities(url),
+				);
+				mentionLinkElement.textContent = encodeHtmlEntities(title);
 				var space = document.createElement('span');
 				space.innerHTML = '\xa0';
 				zss_editor.replaceMentionWithElement(mentionLinkElement);