Apply the ViewSource plugin's filter on the editor's content. (dojo#171)

edhager · Sep 5, 2019 · 449943c · 449943c
1 parent 9b60132
commit 449943c
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 7 deletions.
diff --git a/_editor/plugins/ViewSource.js b/_editor/plugins/ViewSource.js
@@ -107,6 +107,15 @@ define([
 			this.editor = editor;
 			this._initButton();
 
+			// Filter the html content when it is set and retrieved in the editor.
+			this.removeValueFilterHandles();
+			this._setValueFilterHandle = aspect.before(this.editor, "setValue", lang.hitch(this, function (html) {
+				return [this._filter(html)];
+			}));
+			this._getValueFilterHandle = aspect.after(this.editor, "getValue", lang.hitch(this, function (html) {
+				return this._filter(html);
+			}));
+
 			this.editor.addKeyHandler(keys.F12, true, true, lang.hitch(this, function(e){
 				// Move the focus before switching
 				// It'll focus back.  Hiding a focused
@@ -152,9 +161,6 @@ define([
 						return cmd.toLowerCase() === "viewsource";
 					};
 					this.editor.onDisplayChanged();
-					html = ed.get("value");
-					html = this._filter(html);
-					ed.set("value", html);
 					array.forEach(edPlugins, function(p){
 						// Turn off any plugins not controlled by queryCommandenabled.
 						if(p && !(p instanceof ViewSource) && p.isInstanceOf(_Plugin)){
@@ -170,7 +176,7 @@ define([
 						};
 					}
 
-					this.sourceArea.value = html;
+					this.sourceArea.value = ed.get("value");
 
 					// Since neither iframe nor textarea have margin, border, or padding,
 					// just set sizes equal.
@@ -235,7 +241,7 @@ define([
 
 					this._setListener = aspect.after(this.editor, "setValue", lang.hitch(this, function(htmlTxt){
 						htmlTxt = htmlTxt || "";
-						htmlTxt = this._filter(htmlTxt);
+						// htmlTxt was filtered in setValue before aspect.
 						this.sourceArea.value = htmlTxt;
 					}), true);
 				}else{
@@ -262,8 +268,8 @@ define([
 					ed.queryCommandEnabled = ed._sourceQueryCommandEnabled;
 					if(!this._readOnly){
 						html = this.sourceArea.value;
-						html = this._filter(html);
 						ed.beginEditing();
+						// html will be filtered in setValue aspect.
 						ed.set("value", html);
 						ed.endEditing();
 					}
@@ -523,6 +529,17 @@ define([
 			return html;
 		},
 
+		removeValueFilterHandles: function () {
+			if (this._setValueFilterHandle) {
+				this._setValueFilterHandle.remove();
+				delete this._setValueFilterHandle;
+			}
+			if (this._getValueFilterHandle) {
+				this._getValueFilterHandle.remove();
+				delete this._getValueFilterHandle;
+			}
+		},
+
 		setSourceAreaCaret: function(){
 			// summary:
 			//		Internal function to set the caret in the sourceArea
@@ -557,6 +574,7 @@ define([
 				this._setListener.remove();
 				delete this._setListener;
 			}
+			this.removeValueFilterHandles();
 			this.inherited(arguments);
 		}
 	});

diff --git a/tests/editor/test_ViewSource.html b/tests/editor/test_ViewSource.html
@@ -9,12 +9,21 @@
 	<script type="text/javascript">
 		require([
 			"dojo/parser",
+			"dijit/registry",
 			"dijit/Editor",
 			"dijit/_editor/plugins/ViewSource",
 			"dijit/_editor/plugins/FullScreen",
 			"dojo/domReady!"
-		], function(parser){
+		], function(parser, registry){
 			parser.parse();
+
+			var editor = registry.byId("editor7");
+			editor.set("value", "<h1>ViewSource Plugin with onmouseover in content set via setValue.</h1>" +
+					"<p onmouseover=\"alert('Mouse over foobar');\">foobar</p>" +
+					"<h2>Things to test:</h2>\n" +
+					"<ol>" +
+					"<li>Move mouse over \"foobar\" and make sure alert is not displayed.</li>" +
+					"</ol>");
 		});
 	</script>
 </head>
@@ -147,6 +156,29 @@ <h2>Things to test:</h2>
 	</div>
 	<br>
 	<br>
+	<div>
+		<div id="editor6" data-dojo-type="dijit/Editor"
+			 data-dojo-props='"aria-label":"editor3",extraPlugins:["fullScreen", "viewSource"],
+			style:"background-color: white; width: 800px;", height:"300px" '>
+			<h1>ViewSource Plugin with onmouseover in content.</h1>
+			<p onmouseover="alert('Mouse over foobar');">foobar</p>
+
+			<h2>Things to test:</h2>
+			<ol>
+				<li>Move mouse over "foobar" and make sure alert is not displayed.</li>
+			</ol>
+		</div>
+	</div>
+	<br>
+	<br>
+	<div>
+		<div id="editor7" data-dojo-type="dijit/Editor"
+			 data-dojo-props='"aria-label":"editor3",extraPlugins:["fullScreen", "viewSource"],
+			style:"background-color: white; width: 800px;", height:"300px" '>
+		</div>
+	</div>
+	<br>
+	<br>
 	<div>Content after the editors.</div>
 </body>
 </html>