pds-dev-kit-web-test 0.3.61 → 0.3.62

package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts

@@ -8,6 +8,7 @@ export declare const EMBEDED_SAMPLES: {
     SCRIPT2: string;
     FACEBOOK: string;
     ALERT: string;
+    DAUM: string;
 };
 export declare const sampleCustomsection1: {
     administrativeTitle: string;

package/dist/src/sub/DynamicLayout/pagesPreviewMock.js

@@ -10,7 +10,8 @@ exports.EMBEDED_SAMPLES = {
     CLEAN: '<div>CLEAN</div>',
     SCRIPT2: '<script src="https:/hello.js" type="text/javascript" async></script>',
     FACEBOOK: '<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fsminglive%2Fposts%2Fpfbid023o4i8jNwoh9B3bdQSXKcsKZiaU7rK8FuLtgGdt2crQugFWHA7aiPJZWxPpZMqTh3l&show_text=true&width=500" width="500"height="437"style="border:none;overflow:hidden"scrolling="no"frameborder="0"allowfullscreen="true"allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>',
-    ALERT: '<script>alert("this-is-no"); console.log("hi"); </script>'
+    ALERT: '<script>alert("this-is-no"); console.log("hi"); </script>',
+    DAUM: '<div id="daumRoughmapContainer1710850127862" class="root_daum_roughmap root_daum_roughmap_landing"></div><script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script><script charset="UTF-8">new daum.roughmap.Lander({"timestamp": "1710850127862", "key": "2ikv7", "mapWidth": "640", "mapHeight": "360"}).render(); console.log(\'what is this\')</script>'
 };
 exports.sampleCustomsection1 = {
     administrativeTitle: 'UNTITLED',
@@ -2038,7 +2039,7 @@ exports.sampleCustomsection5 = {
                         CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
                     },
                     CB_CONTENT_PROP_CODEBLOCK: {
-                        CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: exports.EMBEDED_SAMPLES.ALERT
+                        CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: exports.EMBEDED_SAMPLES.DAUM
                     },
                     CB_CONTENT_PROP_VISIBILITY: {
                         CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/EmbedIframe.js

@@ -11,24 +11,37 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var EmbedIframe = function (_a) {
+    // const blobUrl = useMemo(() => {
+    //   return getCodeBlobUrl(embedCode, style);
+    // }, [embedCode]);
     var embedCode = _a.embedCode, style = _a.style;
-    var blobUrl = (0, react_1.useMemo)(function () {
-        return getCodeBlobUrl(embedCode, style);
-    }, [embedCode]);
-    return ((0, jsx_runtime_1.jsx)(S_Iframe, { src: blobUrl, title: "\uD2B9\uBCC4\uD55C\uC774\uB984", sandbox: "allow-scripts allow-same-origin allow-forms" }));
+    var parsedCode = (0, react_1.useMemo)(function () {
+        return getHtmlCode(embedCode, style);
+    }, [embedCode, style]);
+    var iframeRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(function () {
+        if (!iframeRef.current) {
+            return;
+        }
+        var iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;
+        iframeDoc.open();
+        iframeDoc.write(parsedCode);
+        iframeDoc.close();
+    }, [parsedCode]);
+    return ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: "\uD2B9\uBCC4\uD55C\uC774\uB984", sandbox: "allow-scripts allow-same-origin allow-forms" }));
 };
 var S_Iframe = styled_components_1.default.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: none;\n  height: 100%;\n  width: 100%;\n"], ["\n  border: none;\n  height: 100%;\n  width: 100%;\n"])));
-function getCodeBlobUrl(code, style) {
+function getHtmlCode(code, style) {
     var styleString = Object.entries(style).reduce(function (styleStr, _a) {
         var prop = _a[0], value = _a[1];
         var kebabProp = prop.replace(/([a-z0])([A-Z])/g, '$1-$2').toLowerCase();
         return "".concat(styleStr).concat(kebabProp, ": ").concat(value, ";");
     }, '');
-    var fullCode = "\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\">\n        <title>\uCF54\uB4DC\uC528\uBE44</title>\n        <style>\n            html, body {\n                margin: 0;\n                padding: 0;\n                width: 100%;\n                height: 100%;\n                ".concat(styleString, "\n            }\n\n        </style>\n    </head>\n    <body>\n        ").concat(code, "\n    </body>\n    </html>\n    ");
+    var fullCode = "\n    <!DOCTYPE html>\n    <html lang=\"en\">\n    <head>\n        <meta charset=\"UTF-8\">\n        <style>\n            html, body {\n                margin: 0;\n                padding: 0;\n                width: 100%;\n                height: 100%;\n                ".concat(styleString, "\n            }\n\n        </style>\n    </head>\n    <body>\n        ").concat(code, "\n    </body>\n    </html>\n    ");
     // Use a blob to handle potentially complex scripts and avoid encoding issues
-    var blob = new Blob([fullCode], { type: 'text/html' });
-    var url = URL.createObjectURL(blob);
-    return url;
+    // const blob = new Blob([fullCode], { type: 'text/html' });
+    // const url = URL.createObjectURL(blob);
+    return fullCode;
 }
 exports.default = EmbedIframe;
 var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.61",
+  "version": "0.3.62",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,6 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.3.61]
+## [v0.3.62]
 ## 기준 pds-dev-kit-web 버전 @2.2.57
 ### sub
     * DynamicLayout
-        * domPurify(sanitizer) 사용하지 않고 blob iframe으로 사용.
-        * form 을 허용가능하게 한다.
+      * blob방식에서 iframe 직접 쓰기로 변경