Add fix and test for Firefox issue where "stylesheet" prop is ignored.

developit · Aug 22, 2017 · afeb52b · afeb52b
1 parent 686e9b9
commit afeb52b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/index.js b/src/index.js
@@ -57,6 +57,7 @@ export default class RichTextArea extends Component {
 	componentDidMount() {
 		this.updateHeightTimer = setInterval(this.updateHeight, 1000);
 		this.proxyEvents({}, this.props);
+		this.componentDidUpdate();
 	}
 
 	componentWillUnmount() {
@@ -110,7 +111,7 @@ export default class RichTextArea extends Component {
 			s = doc.getElementById('prtcss'+UID);
 		if (s) s.parentNode.removeChild(s);
 
-		let head = doc.head || doc.getElementsByTagName('head')[0];
+		let head = doc.getElementsByTagName('head')[0];
 		if (!head) head = doc.body.parentNode.insertBefore(doc.createElement('head'), doc.body);
 
 		s = doc.createElement('style');
@@ -124,8 +125,8 @@ export default class RichTextArea extends Component {
 		if (!doc || (doc.body && doc.body._hasbeensetup===true)) return;
 
 		if (!doc.body) {
-			doc.open();
-			doc.write('<!DOCTYPE html><html><body contentEditable></body></html>');
+			doc.open('text/html');
+			doc.write('<!DOCTYPE html><html><head></head><body contentEditable></body></html>');
 			doc.close();
 		}
 		doc.designMode = 'on';

diff --git a/test/index.js b/test/index.js
@@ -32,5 +32,28 @@ describe('preact-richtextarea', () => {
 				</richtextarea>
 			);
 		});
+
+		describe('stylesheet', () => {
+			let scratch;
+			before( () => {
+				scratch = document.createElement('div');
+				document.body.appendChild(scratch);
+			});
+			beforeEach( () => {
+				scratch.innerHTML = '';
+			});
+			after( () => {
+				document.body.removeChild(scratch);
+			})
+
+			it('should inject stylesheet', () => {
+				let stylesheet = `strong { color: rgb(255, 0, 0); }`;
+				render(<RichTextArea stylesheet={stylesheet} value="foo <strong>bar</strong> baz" />, scratch);
+
+				let strong = scratch.querySelector('iframe').contentWindow.document.querySelector('strong');
+				expect(strong).to.exist;
+				expect(window.getComputedStyle(strong).color).to.equal('rgb(255, 0, 0)');
+			});
+		});
 	});
 });