Fix broken TAU view in design and preview mode

[Issue] #128 [Problem] Iframes that display application content were missing doctype declaration [Solution] Add doctype declaration to iframe sources Signed-off-by: Pawel Kaczmarczyk <p.kaczmarczy@samsung.com>
Samsung · Jul 12, 2019 · 8cf029c · 8cf029c
1 parent c63052b
commit 8cf029c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/design-editor/src/pane/design-editor-element.js b/design-editor/src/pane/design-editor-element.js
@@ -25,7 +25,7 @@ import editor from '../editor';
 import {TooltipElement} from '../panel/tooltip-element';
 import {Devices} from '../system/devices';
 import utils from '../utils/utils';
-import {removeMediaQueryConstraints} from '../utils/iframe';
+import {removeMediaQueryConstraints, addDoctypeDeclaration} from '../utils/iframe';
 import pathUtils from '../utils/path-utils';
 import fs from 'fs-extra';
 import path, {relative} from 'path';
@@ -220,6 +220,7 @@ class DesignEditor extends DressElement {
 						`
 					);
 				htmlContent = removeMediaQueryConstraints(htmlContent);
+				htmlContent = addDoctypeDeclaration(htmlContent);
 
 				iframeDocument.write(htmlContent);
 				iframeDocument.close();

diff --git a/design-editor/src/panel/preview/preview-element.js b/design-editor/src/panel/preview/preview-element.js
@@ -5,10 +5,11 @@ import {DressElement} from '../../utils/dress-element';
 import {EVENTS, eventEmitter} from '../../events-emitter';
 import pathUtils from '../../utils/path-utils';
 import {checkGlobalContext} from '../../utils/utils';
-import {removeMediaQueryConstraints} from '../../utils/iframe';
+import {removeMediaQueryConstraints, addDoctypeDeclaration} from '../../utils/iframe';
 import LibraryCreator from '../../system/libraries/library-creator';
 import fs from 'fs-extra';
 import path from 'path';
+import {pipe} from '../../utils/utils';
 import { promisify } from 'util';
 
 const TEMPLATE_PATH = '/panel/preview/preview-element.html';
@@ -168,11 +169,10 @@ class Preview extends DressElement {
 	createPreviewDocument(contents, location) {
 		const relativePathToFile = pathUtils.joinPaths(location, 'temporary-preview.html'),
 			writeFile = promisify(fs.writeFile),
-			parsedContents = this.signMainPage(
-				this.addHelperCSSLibrary(
-					removeMediaQueryConstraints(contents)
-				)
-			);
+			processPipe = pipe([addDoctypeDeclaration, removeMediaQueryConstraints,
+				this.addHelperCSSLibrary.bind(this), this.signMainPage.bind(this)]),
+			parsedContents = processPipe(contents);
+
 		this.fsPath = pathUtils.createProjectPath(relativePathToFile);
 
 		return writeFile(this.fsPath, parsedContents)

diff --git a/design-editor/src/utils/iframe.js b/design-editor/src/utils/iframe.js
@@ -4,3 +4,7 @@ export function removeMediaQueryConstraints(htmlText) {
 	return htmlText
 		.replace(/media="all and \(-tizen-geometric-shape: circle\)"/g, '');
 }
+
+export function addDoctypeDeclaration(htmlText) {
+	return `<!DOCTYPE html>\n ${htmlText}`;
+}
diff --git a/design-editor/src/utils/utils.js b/design-editor/src/utils/utils.js
@@ -74,10 +74,19 @@ export function isDemoVersion() {
 		.getViewState('projectType') === 'demo';
 }
 
+/**
+ * Returns a function that performs pipe operation of given functions in order
+ * @param {function} functions Array of functions to call
+ */
+export function pipe (functions) {
+	return functions.reduce((f1, f2) => (a) => f2(f1(a)));
+}
+
 export default {
 	checkGlobalContext,
 	urlJoin,
 	generateAbsolutePath,
 	timeoutPromise,
-	isDemoVersion
+	isDemoVersion,
+	pipe
 };