Adjustments for Ruby Compatibility with MagicEditor (#58)

notthatjen · web-flow · commit eeda3c158f5d · 2021-08-16T14:12:46.000+08:00
* Add fixes * Fixes for advisable app (#57) * Remove classes in collection template * Remove dompurifier * use className instead of class * Update magic-editor version * add react-dom to dependencies * Fix sanitizeHTML issue * remove yarn.lock * ignore yarn lock, dist * Use magic editor recent version * fix collection template * Use magic editor canary * Puse magic editor v1
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 .env*
 node_modules
 package-lock.json
+yarn.lock
 yarn-error.log
-.DS_Store
+.DS_Store
+dist
diff --git a/dist/main.js b/dist/main.js
diff --git a/package.json b/package.json
@@ -23,8 +23,8 @@
   "dependencies": {
     "@emotion/hash": "^0.8.0",
     "axios": "0.20.0",
-    "isomorphic-dompurify": "^0.6.0",
     "lodash.kebabcase": "^4.1.1",
+    "react-dom": "^17.0.2",
     "react-hotkeys-hook": "^3.3.2",
     "react-inlinesvg": "^2.3.0",
     "react-router-dom": "^5.2.0"
diff --git a/src/ChunkCollection.jsx b/src/ChunkCollection.jsx
@@ -105,28 +105,39 @@ export function ChunkCollection({
             {typeof children === "function"
               ? children(getChunk, chunk, index)
               : children}
-          </div>
+          </div>  
         </ChunkCollectionContext.Provider>
       ))}
       {chunks.length && (
         <ChunkCollectionContext.Provider
           key={chunks[0].identifier + "dummy"}
           value={placeholderChunk}
         >
-          <template
+          <Template
             className={computeClassName(
-              itemClass,
               "chunks-col-placeholder-wrapper"
             )}
           >
             {typeof children === "function"
               ? children(getChunk, placeholderChunk, 0)
               : children}
-          </template>
+          </Template>
         </ChunkCollectionContext.Provider>
       )}
     </div>
   );
 }
 
+function Template({ children, ...attrs }) {
+  console.log
+  return (
+    <em-template
+      {...attrs}
+      style={{display: "none"}}
+    >
+      {children}
+    </em-template>
+  );
+}
+
 export default ChunkCollection;
diff --git a/src/Editmode.jsx b/src/Editmode.jsx
@@ -44,10 +44,14 @@ export function Editmode({
     const script = document.createElement("script");
 
     script.src =
-      "https://unpkg.com/editmode-magic-editor@^0/dist/magic-editor.js";
-    script.setAttribute("async", "");
-    document.body.append(script);
-
+      "https://unpkg.com/editmode-magic-editor@~1/dist/magic-editor.js";
+    
+    if (!window["magicEditorInjected"]) {
+      script.setAttribute("async", "");
+      document.body.append(script);
+      window["magicEditorInjected"] = true
+    }
+    
     if (!cachedItem) {
       api
         .get(`/projects/${projectId}`)
diff --git a/src/useChunk.js b/src/useChunk.js
@@ -8,14 +8,16 @@ import {
   computeContentKey,
   getCachedData,
   storeCache,
+  setDefaultContent,
+  tryParse
 } from "./utilities";
 
 export function useChunk(
   defaultContent,
   { identifier, type, contentKey, field }
 ) {
-  const { projectId, defaultChunks, branch, next } =
-    useContext(EditmodeContext);
+  defaultContent = setDefaultContent(defaultContent)
+  const { projectId, defaultChunks, branch, next } = useContext(EditmodeContext);
   let [chunk, setChunk] = useState(undefined);
 
   if (!contentKey) {
@@ -52,22 +54,25 @@ export function useChunk(
       if (branchId) cacheId += branchId;
       let cachedChunk = getCachedData(cacheId);
       let newChunk = cachedChunk
-        ? JSON.parse(cachedChunk)
-        : fallbackChunk || {
-            chunk_type: type || "single_line_text",
-            content: defaultContent,
-            content_key: contentKey,
-          };
+        && tryParse(cachedChunk)
+        || fallbackChunk
+        || {
+        chunk_type: type || "single_line_text",
+        content: defaultContent,
+        content_key: contentKey,
+      };
 
       if (newChunk) setChunk(newChunk);
 
-      // Fetch new data
+    // Fetch new data
       let error;
       api
         .get(url)
         .then((res) => {
-          storeCache(cacheId, res.data);
-          if (!cachedChunk) setChunk(res.data);
+          if (!res.data.message) {
+            storeCache(cacheId, res.data);
+            if (!cachedChunk) setChunk(res.data);
+          }
         }) // Store chunk to localstorage
         .catch((error) => console.log(error)); // Set error state
 
diff --git a/src/useGetChunk.js b/src/useGetChunk.js
@@ -1,8 +1,8 @@
-import { storeCache, getCachedData, api } from "./utilities";
+import { storeCache, getCachedData, api, tryParse } from "./utilities";
 import { EditmodeContext } from "./EditmodeContext";
 import { useEffect, useState, useContext } from "react";
 
-export const useGetChunk = (identifier, field = "") => {
+export const useGetChunk = (identifier, field = "", fallback = "") => {
   const { projectId, defaultChunks, next } = useContext(EditmodeContext);
   const [project, setProject] = useState(projectId);
   const [chunk, setChunk] = useState(undefined);
@@ -17,7 +17,11 @@ export const useGetChunk = (identifier, field = "") => {
       }
 
       const cachedChunk = getCachedData(cacheId);
-      if (cachedChunk) setChunk(JSON.parse(cachedChunk));
+      const newChunk = cachedChunk && tryParse(cachedChunk) || {
+        chunk_type: "single_line_text",
+        content: fallback,
+      }
+      setChunk(newChunk)
 
       let url = `chunks/${identifier}?project_id=${project}`;
 
diff --git a/src/utilities/computeClassName.js b/src/utilities/computeClassName.js
@@ -1,4 +1,4 @@
-export function computeClassName(className, defaultClassName) {
+export function computeClassName(className = "", defaultClassName = "") {
   className = className ? `${className} ${defaultClassName}` : defaultClassName;
   return className;
 }
diff --git a/src/utilities/index.js b/src/utilities/index.js
@@ -10,4 +10,13 @@ export { transformImage } from "./transformImage";
 export { computeClassName } from "./computeClassName";
 export { api } from "./api";
 export { renderChunk } from "./renderChunk.jsx";
+export { setDefaultContent } from "./setDefaultContent"
 export { filterByTag } from "./filterTags";
+
+export const tryParse = (string) => {
+  try {
+    return JSON.parse(string)
+  } catch (error) {
+    return null
+  }
+}
diff --git a/src/utilities/renderChunk.jsx b/src/utilities/renderChunk.jsx
@@ -15,7 +15,7 @@ export const renderChunk = (data, props, cacheId) => {
     "data-chunk-type": chunk.chunk_type,
     "data-chunk-cache-id": cacheId,
     "key": chunk.identifier,
-    class: props.className
+    "class": props.className || ""
   }
 
   switch (chunk.chunk_type) {
@@ -31,7 +31,7 @@ export const renderChunk = (data, props, cacheId) => {
         {...defaultprops}
         dangerouslySetInnerHTML={{__html: parsedChunk}}
         {...props}
-        class={"editmode-richtext-editor " + props.className}
+        class={"editmode-richtext-editor " + (props.className || "")}
       />);
     case "image":
       if (isSvg(chunk.content)) {
diff --git a/src/utilities/sanitizeContent.js b/src/utilities/sanitizeContent.js
@@ -1,7 +1,5 @@
-import DOMpurify from "isomorphic-dompurify";
-
 export const sanitizeContent = (data, props) => {
-  const sanitizedContent = DOMpurify.sanitize(data.content);
+  const sanitizedContent = HtmlSanitizer.SanitizeHtml(data.content);
   const chunk = { ...data, content: sanitizedContent };
   const tokens = (chunk.content.match(/\{{(.*?)\}}/g)|| []).map(t => t.substr(2, t.length-4))
   
@@ -17,3 +15,102 @@ export const sanitizeContent = (data, props) => {
 
   return { chunk, parsedChunk }
 }
+
+
+var HtmlSanitizer = new (function () {
+	var tagWhitelist_ = {
+		'A': true, 'ABBR': true, 'B': true, 'BLOCKQUOTE': true, 'BODY': true, 'BR': true, 'CENTER': true, 'CODE': true, 'DIV': true, 'EM': true, 'FONT': true,
+		'H1': true, 'H2': true, 'H3': true, 'H4': true, 'H5': true, 'H6': true, 'HR': true, 'I': true, 'IMG': true, 'LABEL': true, 'LI': true, 'OL': true, 'P': true, 'PRE': true,
+		'SMALL': true, 'SOURCE': true, 'SPAN': true, 'STRONG': true, 'TABLE': true, 'TBODY': true, 'TR': true, 'TD': true, 'TH': true, 'THEAD': true, 'UL': true, 'U': true, 'VIDEO': true
+	};
+
+	var contentTagWhiteList_ = { 'FORM': true }; //tags that will be converted to DIVs
+
+	var attributeWhitelist_ = { 'align': true, 'color': true, 'controls': true, 'height': true, 'href': true, 'src': true, 'style': true, 'target': true, 'title': true, 'type': true, 'width': true };
+
+	var cssWhitelist_ = { 'color': true, 'background-color': true, 'font-size': true, 'text-align': true, 'text-decoration': true, 'font-weight': true };
+
+	var schemaWhiteList_ = [ 'http:', 'https:', 'data:', 'm-files:', 'file:', 'ftp:' ]; //which "protocols" are allowed in "href", "src" etc
+
+	var uriAttributes_ = { 'href': true, 'action': true };
+
+	this.SanitizeHtml = function(input) {
+		if (!input || input == "") return ""; //to save performance and not create iframe
+
+		//firefox "bogus node" workaround
+		if (input == "<br>") return "";
+
+		var iframe = document.createElement('iframe');
+		iframe['sandbox'] = 'allow-same-origin';
+		iframe.style.display = 'none';
+		document.body.appendChild(iframe); // necessary so the iframe contains a document
+		var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
+		if (iframedoc.body == null) iframedoc.write("<body></body>"); // null in IE
+		iframedoc.body.innerHTML = input;
+
+		function makeSanitizedCopy(node) {
+			if (node.nodeType == Node.TEXT_NODE) {
+				var newNode = node.cloneNode(true);
+			} else if (node.nodeType == Node.ELEMENT_NODE && (tagWhitelist_[node.tagName] || contentTagWhiteList_[node.tagName])) {
+
+				//remove useless empty spans (lots of those when pasting from MS Outlook)
+				if ((node.tagName == "SPAN" || node.tagName == "B" || node.tagName == "I" || node.tagName == "U")
+					&& node.innerHTML.trim() == "") {
+					return document.createDocumentFragment();
+				}
+
+				if (contentTagWhiteList_[node.tagName])
+					newNode = iframedoc.createElement('DIV'); //convert to DIV
+				else
+					newNode = iframedoc.createElement(node.tagName);
+
+				for (var i = 0; i < node.attributes.length; i++) {
+					var attr = node.attributes[i];
+					if (attributeWhitelist_[attr.name]) {
+						if (attr.name == "style") {
+							for (s = 0; s < node.style.length; s++) {
+								var styleName = node.style[s];
+								if (cssWhitelist_[styleName])
+									newNode.style.setProperty(styleName, node.style.getPropertyValue(styleName));
+							}
+						}
+						else {
+							if (uriAttributes_[attr.name]) { //if this is a "uri" attribute, that can have "javascript:" or something
+								if (attr.value.indexOf(":") > -1 && !startsWithAny(attr.value, schemaWhiteList_))
+									continue;
+							}
+							newNode.setAttribute(attr.name, attr.value);
+						}
+					}
+				}
+				for (i = 0; i < node.childNodes.length; i++) {
+					var subCopy = makeSanitizedCopy(node.childNodes[i]);
+					newNode.appendChild(subCopy, false);
+				}
+			} else {
+				newNode = document.createDocumentFragment();
+			}
+			return newNode;
+		};
+
+		var resultElement = makeSanitizedCopy(iframedoc.body);
+		document.body.removeChild(iframe);
+		return resultElement.innerHTML
+			.replace(/<br[^>]*>(\S)/g, "<br>\n$1")
+			.replace(/div><div/g, "div>\n<div"); //replace is just for cleaner code
+	}
+
+	function startsWithAny(str, substrings) {
+		for (var i = 0; i < substrings.length; i++) {
+			if (str.indexOf(substrings[i]) == 0) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	this.AllowedTags = tagWhitelist_;
+	this.AllowedAttributes = attributeWhitelist_;
+	this.AllowedCssStyles = cssWhitelist_;
+	this.AllowedSchemas = schemaWhiteList_;
+});
diff --git a/src/utilities/setDefaultContent.js b/src/utilities/setDefaultContent.js
@@ -0,0 +1,9 @@
+export const setDefaultContent = (content) => {
+  let cleanContent = content
+
+  if (Array.isArray(content)) {
+    cleanContent = content.join("")
+  }
+
+  return cleanContent
+}
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-export function computeClassName(className, defaultClassName) {`
	`1`	`+export function computeClassName(className = "", defaultClassName = "") {`
`2`	`2`	className = className ? `${className} ${defaultClassName}` : defaultClassName;
`3`	`3`	`return className;`
`4`	`4`	`}`