@kids-reporter/draft-renderer 0.4.35 → 0.4.36

package/lib/block-renderers/embedded-code-block.js

@@ -8,7 +8,6 @@ exports.EmbeddedCodeInArticleBody = EmbeddedCodeInArticleBody;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _mediaQuery = require("../utils/media-query");
-var _nodeHtmlParser = require("node-html-parser");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -43,67 +42,45 @@ const EmbeddedCodeBlock = ({
     embeddedCode
   } = data;
   const embedded = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!embedded.current) return;
+    const node = embedded.current;
+    const fragment = document.createDocumentFragment();
 
-  // `embeddedCode` is a string, which may includes
-  // multiple script tags and other html tags.
-  // Here we separate script tags and other html tags
-  // by using the isomorphic html parser 'node-html-parser'
-  // into scripts nodes and non-script nodes.
-  //
-  // For non-script nodes we simply put them into dangerouslySetInnerHtml.
-  //
-  // For scripts nodes we only append them on the client side. So we handle scripts
-  // nodes when useEffect is called.
-  // The reasons we don't insert script tags through dangerouslySetInnerHtml:
-  // 1. Since react use setInnerHtml to append the htmlStirng received from
-  //    dangerouslySetInnerHtml, scripts won't be triggered.
-  // 2. Although the setInnerhtml way won't trigger script tags, those script tags
-  //    will still show on the HTML provided from SSR. When the browser parse the
-  //    html it will run those script and produce unexpected behavior.
-  const nodes = (0, _react.useMemo)(() => {
-    const ele = (0, _nodeHtmlParser.parse)(`<div id="draft-embed">${embeddedCode}</div>`);
+    // `embeddedCode` is a string, which may includes
+    // multiple '<script>' tags and other html tags.
+    // For executing '<script>' tags on the browser,
+    // we need to extract '<script>' tags from `embeddedCode` string first.
+    //
+    // The approach we have here is to parse html string into elements,
+    // and we could use DOM element built-in functions,
+    // such as `querySelectorAll` method, to query '<script>' elements,
+    // and other non '<script>' elements.
+    const parser = new DOMParser();
+    const ele = parser.parseFromString(`<div id="draft-embed">${embeddedCode}</div>`, 'text/html');
     const scripts = ele.querySelectorAll('script');
+    const nonScripts = ele.querySelectorAll('div#draft-embed > :not(script)');
+    nonScripts.forEach(ele => {
+      fragment.appendChild(ele);
+    });
     scripts.forEach(s => {
-      s.remove();
+      const scriptEle = document.createElement('script');
+      const attrs = s.attributes;
+      for (let i = 0; i < attrs.length; i++) {
+        scriptEle.setAttribute(attrs[i].name, attrs[i].value);
+      }
+      scriptEle.text = s.text || '';
+      fragment.appendChild(scriptEle);
     });
-    const nonScripts = ele.querySelectorAll('div#draft-embed > :not(script)');
-    const nonScriptsHtml = nonScripts.reduce((prev, next) => prev + next.toString(), '');
-    return {
-      scripts,
-      nonScripts,
-      nonScriptsHtml
-    };
+    node.appendChild(fragment);
   }, [embeddedCode]);
-  const {
-    scripts,
-    nonScriptsHtml
-  } = nodes;
-  (0, _react.useEffect)(() => {
-    if (embedded.current) {
-      const node = embedded.current;
-      const fragment = document.createDocumentFragment();
-      scripts.forEach(s => {
-        const scriptEle = document.createElement('script');
-        const attrs = s.attributes;
-        for (const key in attrs) {
-          scriptEle.setAttribute(key, attrs[key]);
-        }
-        scriptEle.text = s.text || '';
-        fragment.appendChild(scriptEle);
-      });
-      node.appendChild(fragment);
-    }
-  }, [scripts]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className
   }, /*#__PURE__*/_react.default.createElement("input", {
     hidden: true,
     disabled: true
   }), /*#__PURE__*/_react.default.createElement(Block, {
-    ref: embedded,
-    dangerouslySetInnerHTML: {
-      __html: nonScriptsHtml
-    }
+    ref: embedded
   }), caption && /*#__PURE__*/_react.default.createElement(Caption, null, caption));
 };
 exports.EmbeddedCodeBlock = EmbeddedCodeBlock;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "0.4.35",
+  "version": "0.4.36",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -26,7 +26,6 @@
     "babel-loader": "^8.2.5",
     "body-scroll-lock": "3.1.5",
     "html-webpack-plugin": "^5.5.0",
-    "node-html-parser": "^6.1.5",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2"
   },
@@ -45,4 +44,4 @@
     "react-dom": "18.2.0",
     "styled-components": "5.3.5"
   }
-}
+}