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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts +2 -0
  2. package/dist/src/sub/DynamicLayout/pagesPreviewMock.js +9 -7
  3. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/EmbedIframe.js +25 -10
  4. package/package.json +1 -1
  5. package/release-note.md +2 -3
package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts CHANGED
@@ -8,6 +8,8 @@ export declare const EMBEDED_SAMPLES: {
8
8
  SCRIPT2: string;
9
9
  FACEBOOK: string;
10
10
  ALERT: string;
11
+ DAUM: string;
12
+ TWITTER: string;
11
13
  };
12
14
  export declare const sampleCustomsection1: {
13
15
  administrativeTitle: string;
package/dist/src/sub/DynamicLayout/pagesPreviewMock.js CHANGED
@@ -3,14 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.sampleCustomsection6 = exports.sampleCustomsection5 = exports.sampleCustomsection4 = exports.sampleCustomsection3 = exports.sampleCustomsection2 = exports.sampleCustomsection1 = exports.EMBEDED_SAMPLES = void 0;
4
4
  exports.EMBEDED_SAMPLES = {
5
5
  GOOGLE_MAPS: '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d508.40856699559515!2d127.04604546611074!3d37.5412884534309!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca484b232aab9%3A0x3016af9babd6093e!2z7ISc7Jq47Yq567OE7IucIOyEseuPmeq1rCDrmp3shKzroZwgMzE3!5e0!3m2!1sko!2skr!4v1690098445797!5m2!1sko!2skr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>',
6
- GOOGLE_FORMS: '<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeXlFI2qpbGOGQ5Zvk3JkkJXo0qsznrpjjIutpk9nGfpPFCIA/viewform?embedded=true" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">로드 중…</iframe>',
7
- SCRIPT: '<div class="whattime-inline-widget" data-code="9WVUWfsUhi" style="min-width: 320px; height: 690px;"></div><link href="https://whattime.co.kr/widget/widget.css" rel="stylesheet"><script src="https://whattime.co.kr/widget/widget.js" type="text/javascript" async></script>',
6
+ GOOGLE_FORMS: '<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeXlFI2qpbGOGQ5Zvk3JkkJXo0qsznrpjjIutpk9nGfpPFCIA/viewform?embedded=true" width="100px" height="100px" frameborder="0" marginheight="0" marginwidth="0">로드 중…</iframe>',
7
+ SCRIPT: '<div class="whattime-inline-widget" data-code="9WVUWfsUhi" style="width: 320px; height: 690px;"></div><link href="https://whattime.co.kr/widget/widget.css" rel="stylesheet"><script src="https://whattime.co.kr/widget/widget.js" type="text/javascript" async></script>',
8
8
  DIV: '<div style="background-color: black"><button>sample-button</button></div>',
9
9
  DIRTY: '<img src=x onerror=alert(1)//>',
10
10
  CLEAN: '<div>CLEAN</div>',
11
11
  SCRIPT2: '<script src="https:/hello.js" type="text/javascript" async></script>',
12
12
  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>',
13
- ALERT: '<script>alert("this-is-no"); console.log("hi"); </script>'
13
+ ALERT: '<script>alert("this-is-no"); console.log("hi"); </script>',
14
+ 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>',
15
+ TWITTER: '<a class="twitter-timeline" href="https://twitter.com/XDevelopers?ref_src=twsrc%5Etfw">Tweets by XDevelopers</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>'
14
16
  };
15
17
  exports.sampleCustomsection1 = {
16
18
  administrativeTitle: 'UNTITLED',
@@ -2038,7 +2040,7 @@ exports.sampleCustomsection5 = {
2038
2040
  CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
2039
2041
  },
2040
2042
  CB_CONTENT_PROP_CODEBLOCK: {
2041
- CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: exports.EMBEDED_SAMPLES.ALERT
2043
+ CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: exports.EMBEDED_SAMPLES.DAUM
2042
2044
  },
2043
2045
  CB_CONTENT_PROP_VISIBILITY: {
2044
2046
  CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
@@ -2142,7 +2144,7 @@ exports.sampleCustomsection5 = {
2142
2144
  currentVersion: '2023-08-03',
2143
2145
  data: {
2144
2146
  CB_CONTENT_PROP_CODEBLOCK: {
2145
- CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: exports.EMBEDED_SAMPLES.CLEAN,
2147
+ CB_CONTENT_PROP_CODEBLOCK_SPEC_CODE: exports.EMBEDED_SAMPLES.TWITTER,
2146
2148
  CB_CONTENT_PROP_CODEBLOCK_SPEC_LANG: 'HTML'
2147
2149
  },
2148
2150
  CB_CONTENT_PROP_HOVER: {
@@ -2417,9 +2419,9 @@ exports.sampleCustomsection5 = {
2417
2419
  'CB_EFFECT_PROP_ENTANIM_SPEC_TFUNC:MOBILE': null
2418
2420
  },
2419
2421
  CB_LAYOUT_PROP_ARRANGE: {
2420
- CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL: 'LEFT',
2422
+ CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL: 'CENTER',
2421
2423
  'CB_LAYOUT_PROP_ARRANGE_SPEC_HORIZONTAL:MOBILE': 'MIDDLE',
2422
- CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL: 'TOP',
2424
+ CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL: 'MIDDLE',
2423
2425
  'CB_LAYOUT_PROP_ARRANGE_SPEC_VERTICAL:MOBILE': null
2424
2426
  },
2425
2427
  CB_LAYOUT_PROP_PADDING: {
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Embed/EmbedIframe.js CHANGED
@@ -11,24 +11,39 @@ var jsx_runtime_1 = require("react/jsx-runtime");
11
11
  var react_1 = require("react");
12
12
  var styled_components_1 = __importDefault(require("styled-components"));
13
13
  var EmbedIframe = function (_a) {
14
+ // const blobUrl = useMemo(() => {
15
+ // return getCodeBlobUrl(embedCode, style);
16
+ // }, [embedCode]);
14
17
  var embedCode = _a.embedCode, style = _a.style;
15
- var blobUrl = (0, react_1.useMemo)(function () {
16
- return getCodeBlobUrl(embedCode, style);
17
- }, [embedCode]);
18
- return ((0, jsx_runtime_1.jsx)(S_Iframe, { src: blobUrl, title: "\uD2B9\uBCC4\uD55C\uC774\uB984", sandbox: "allow-scripts allow-same-origin allow-forms" }));
18
+ var parsedCode = (0, react_1.useMemo)(function () {
19
+ return getHtmlCode(embedCode, style);
20
+ }, [embedCode, style]);
21
+ var iframeRef = (0, react_1.useRef)(null);
22
+ (0, react_1.useLayoutEffect)(function () {
23
+ if (!iframeRef.current) {
24
+ return;
25
+ }
26
+ var iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;
27
+ iframeDoc.open();
28
+ iframeDoc.write(parsedCode);
29
+ iframeDoc.close();
30
+ }, [parsedCode]);
31
+ return ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: "\uD2B9\uBCC4\uD55C\uC774\uB984",
32
+ // sandbox="allow-scripts allow-same-origin allow-forms"
33
+ allow: "accelerometer; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; clipboard-write;", sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads allow-pointer-lock" }));
19
34
  };
20
- 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"])));
21
- function getCodeBlobUrl(code, style) {
35
+ var S_Iframe = styled_components_1.default.iframe(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: none;\n display: block;\n height: 100%;\n width: 100%;\n"], ["\n border: none;\n display: block;\n height: 100%;\n width: 100%;\n"])));
36
+ function getHtmlCode(code, style) {
22
37
  var styleString = Object.entries(style).reduce(function (styleStr, _a) {
23
38
  var prop = _a[0], value = _a[1];
24
39
  var kebabProp = prop.replace(/([a-z0])([A-Z])/g, '$1-$2').toLowerCase();
25
40
  return "".concat(styleStr).concat(kebabProp, ": ").concat(value, ";");
26
41
  }, '');
27
- 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 ");
42
+ 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 display: inline-flex !important;\n ".concat(styleString, "\n }\n\n body > div { \n flex-grow: 1;\n width: 100%;\n }\n </style>\n </head>\n <body>\n\n ").concat(code, "\n\n </body>\n </html>\n ");
28
43
  // Use a blob to handle potentially complex scripts and avoid encoding issues
29
- var blob = new Blob([fullCode], { type: 'text/html' });
30
- var url = URL.createObjectURL(blob);
31
- return url;
44
+ // const blob = new Blob([fullCode], { type: 'text/html' });
45
+ // const url = URL.createObjectURL(blob);
46
+ return fullCode;
32
47
  }
33
48
  exports.default = EmbedIframe;
34
49
  var templateObject_1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "0.3.61",
3
+ "version": "0.3.63",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
package/release-note.md CHANGED
@@ -1,7 +1,6 @@
1
1
  # pds-dev-kit-web-test Release Notes
2
- ## [v0.3.61]
2
+ ## [v0.3.63]
3
3
  ## 기준 pds-dev-kit-web 버전 @2.2.57
4
4
  ### sub
5
5
  * DynamicLayout
6
- * domPurify(sanitizer) 사용하지 않고 blob iframe으로 사용.
7
- * form 을 허용가능하게 한다.
6
+ * twitter embed의 width가 잡히지 않는 문제 해결