@crediblemark/build 0.25.8 → 0.25.10

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 (6) hide show
  1. package/dist/{chunk-MWCFPGI6.mjs → chunk-32BKYUSW.mjs} +107 -129
  2. package/dist/index.js +81 -103
  3. package/dist/index.mjs +1 -1
  4. package/dist/no-external.js +81 -103
  5. package/dist/no-external.mjs +1 -1
  6. package/package.json +2 -2
package/dist/{chunk-MWCFPGI6.mjs → chunk-32BKYUSW.mjs} RENAMED
@@ -125,17 +125,15 @@ var overrideKeys = [
125
125
  import { useMemo } from "react";
126
126
 
127
127
  // components/HtmlModeRender/index.tsx
128
- import { useId, useState, useEffect, useRef } from "react";
128
+ import { useId, useState, useEffect } from "react";
129
129
  import { jsx } from "react/jsx-runtime";
130
130
  var HtmlModeRender = ({
131
131
  htmlCode,
132
132
  isEditing
133
133
  }) => {
134
134
  const id = useId().replace(/:/g, "");
135
- const [iframeHeight, setIframeHeight] = useState("100%");
136
- const divRef = useRef(null);
135
+ const [iframeHeight, setIframeHeight] = useState("100vh");
137
136
  useEffect(() => {
138
- if (!isEditing) return;
139
137
  const handleMessage = (event) => {
140
138
  if (event.data && event.data.type === "resize-iframe" && event.data.id === id) {
141
139
  setIframeHeight(`${event.data.height}px`);
@@ -143,117 +141,97 @@ var HtmlModeRender = ({
143
141
  };
144
142
  window.addEventListener("message", handleMessage);
145
143
  return () => window.removeEventListener("message", handleMessage);
146
- }, [id, isEditing]);
147
- useEffect(() => {
148
- if (isEditing || !divRef.current || !htmlCode) return;
149
- const scripts = divRef.current.querySelectorAll("script");
150
- scripts.forEach((script) => {
151
- const newScript = document.createElement("script");
152
- Array.from(script.attributes).forEach(
153
- (attr) => newScript.setAttribute(attr.name, attr.value)
154
- );
155
- newScript.appendChild(document.createTextNode(script.innerHTML));
156
- script.parentNode?.replaceChild(newScript, script);
157
- });
158
- }, [htmlCode, isEditing]);
144
+ }, [id]);
159
145
  if (!htmlCode) {
160
146
  return /* @__PURE__ */ jsx("div", { style: { padding: 48, textAlign: "center", color: "#666" }, children: "Belum ada kode HTML yang ditempel." });
161
147
  }
162
- if (isEditing) {
163
- const resizeScript = `
164
- <script>
165
- function sendHeight() {
166
- const height = document.documentElement.scrollHeight || document.body.scrollHeight;
167
- window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
168
- }
169
- window.addEventListener('load', sendHeight);
170
- window.addEventListener('resize', sendHeight);
171
-
172
- if (window.ResizeObserver) {
173
- new ResizeObserver(sendHeight).observe(document.body);
174
- } else {
175
- setInterval(sendHeight, 1000);
176
- }
177
- </script>
178
- `;
179
- const needsTailwind = htmlCode.includes("cdn.tailwindcss.com") || htmlCode.includes("tailwindcss") || /\b(bg-|text-|p[xy]?[-0-9]|m[xy]?[-0-9]|flex|grid|border-|rounded-|shadow-|justify-|items-|gap-|relative|absolute|hidden|w-|h-|leading-|tracking-|font-|transition|duration-|ease-|hover:|focus:|sm:|md:|lg:|xl:)/.test(
180
- htmlCode
181
- );
182
- const isStandalone = htmlCode.includes("<html") || htmlCode.includes("<!DOCTYPE") || htmlCode.includes("<body") || htmlCode.includes("<head>");
183
- let srcDoc = "";
184
- if (isStandalone) {
185
- let processed = htmlCode;
186
- if (processed.includes("</body>")) {
187
- processed = processed.replace("</body>", `${resizeScript}</body>`);
188
- } else {
189
- processed = processed + resizeScript;
148
+ const resizeScript = `
149
+ <script>
150
+ function sendHeight() {
151
+ const body = document.body;
152
+ // calculate content height safely, avoiding clientHeight/viewport height which prevents shrinking
153
+ const height = Math.max(body.scrollHeight, body.offsetHeight);
154
+ window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
190
155
  }
191
- if (needsTailwind && !processed.includes("cdn.tailwindcss.com") && !processed.includes("tailwindcss")) {
192
- if (processed.includes("</head>")) {
193
- processed = processed.replace(
194
- "</head>",
195
- `<script src="https://cdn.tailwindcss.com"></script></head>`
196
- );
197
- } else if (processed.includes("<head>")) {
198
- processed = processed.replace(
199
- "<head>",
200
- `<head><script src="https://cdn.tailwindcss.com"></script>`
201
- );
202
- } else {
203
- processed = `<script src="https://cdn.tailwindcss.com"></script>` + processed;
204
- }
156
+ window.addEventListener('load', sendHeight);
157
+ window.addEventListener('resize', sendHeight);
158
+
159
+ if (window.ResizeObserver) {
160
+ new ResizeObserver(sendHeight).observe(document.body);
161
+ } else {
162
+ setInterval(sendHeight, 1000);
205
163
  }
206
- srcDoc = processed;
164
+ </script>
165
+ `;
166
+ const needsTailwind = htmlCode.includes("cdn.tailwindcss.com") || htmlCode.includes("tailwindcss") || /\b(bg-|text-|p[xy]?[-0-9]|m[xy]?[-0-9]|flex|grid|border-|rounded-|shadow-|justify-|items-|gap-|relative|absolute|hidden|w-|h-|leading-|tracking-|font-|transition|duration-|ease-|hover:|focus:|sm:|md:|lg:|xl:)/.test(
167
+ htmlCode
168
+ );
169
+ const isStandalone = htmlCode.includes("<html") || htmlCode.includes("<!DOCTYPE") || htmlCode.includes("<body") || htmlCode.includes("<head>");
170
+ let srcDoc = "";
171
+ if (isStandalone) {
172
+ let processed = htmlCode;
173
+ if (processed.includes("</body>")) {
174
+ processed = processed.replace("</body>", `${resizeScript}</body>`);
207
175
  } else {
208
- srcDoc = `
209
- <!DOCTYPE html>
210
- <html>
211
- <head>
212
- ${needsTailwind ? `<script src="https://cdn.tailwindcss.com"></script>` : ""}
213
- <style>
214
- *, *::before, *::after { box-sizing: border-box; }
215
- body {
216
- margin: 0;
217
- padding: 0;
218
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
219
- }
220
- img, iframe, video {
221
- max-width: 100%;
222
- }
223
- </style>
224
- </head>
225
- <body>
226
- ${htmlCode}
227
- ${resizeScript}
228
- </body>
229
- </html>
230
- `;
176
+ processed = processed + resizeScript;
231
177
  }
232
- return /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
233
- "iframe",
234
- {
235
- srcDoc,
236
- sandbox: "allow-scripts",
237
- title: "Html Mode Sandboxed Canvas",
238
- loading: "lazy",
239
- style: {
240
- height: iframeHeight,
241
- border: "none",
242
- width: "100%",
243
- display: "block",
244
- background: "transparent"
245
- }
178
+ if (needsTailwind && !processed.includes("cdn.tailwindcss.com") && !processed.includes("tailwindcss")) {
179
+ if (processed.includes("</head>")) {
180
+ processed = processed.replace(
181
+ "</head>",
182
+ `<script src="https://cdn.tailwindcss.com"></script></head>`
183
+ );
184
+ } else if (processed.includes("<head>")) {
185
+ processed = processed.replace(
186
+ "<head>",
187
+ `<head><script src="https://cdn.tailwindcss.com"></script>`
188
+ );
189
+ } else {
190
+ processed = `<script src="https://cdn.tailwindcss.com"></script>` + processed;
246
191
  }
247
- ) });
192
+ }
193
+ srcDoc = processed;
194
+ } else {
195
+ srcDoc = `
196
+ <!DOCTYPE html>
197
+ <html>
198
+ <head>
199
+ ${needsTailwind ? `<script src="https://cdn.tailwindcss.com"></script>` : ""}
200
+ <style>
201
+ *, *::before, *::after { box-sizing: border-box; }
202
+ body {
203
+ margin: 0;
204
+ padding: 0;
205
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
206
+ }
207
+ img, iframe, video {
208
+ max-width: 100%;
209
+ }
210
+ </style>
211
+ </head>
212
+ <body>
213
+ ${htmlCode}
214
+ ${resizeScript}
215
+ </body>
216
+ </html>
217
+ `;
248
218
  }
249
- return /* @__PURE__ */ jsx(
250
- "div",
219
+ return /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
220
+ "iframe",
251
221
  {
252
- ref: divRef,
253
- dangerouslySetInnerHTML: { __html: htmlCode },
254
- style: { width: "100%" }
222
+ srcDoc,
223
+ sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
224
+ title: "Html Mode Sandboxed Canvas",
225
+ loading: "lazy",
226
+ style: {
227
+ height: iframeHeight,
228
+ border: "none",
229
+ width: "100%",
230
+ display: "block",
231
+ background: "transparent"
232
+ }
255
233
  }
256
- );
234
+ ) });
257
235
  };
258
236
 
259
237
  // components/Render/index.tsx
@@ -755,7 +733,7 @@ import {
755
733
  forwardRef,
756
734
  useCallback,
757
735
  useContext as useContext2,
758
- useRef as useRef2,
736
+ useRef,
759
737
  memo as memo2
760
738
  } from "react";
761
739
  import { useVirtualizer } from "@tanstack/react-virtual";
@@ -1027,7 +1005,7 @@ var VirtualizedLayerTreeItems = memo2(({
1027
1005
  selectedPathIds,
1028
1006
  tree
1029
1007
  }) => {
1030
- const listRef = useRef2(null);
1008
+ const listRef = useRef(null);
1031
1009
  const virtualizer = useVirtualizer({
1032
1010
  count: tree.items.length,
1033
1011
  estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
@@ -1575,12 +1553,12 @@ import {
1575
1553
  useCallback as useCallback12,
1576
1554
  useEffect as useEffect15,
1577
1555
  useMemo as useMemo15,
1578
- useRef as useRef10,
1556
+ useRef as useRef9,
1579
1557
  useState as useState15
1580
1558
  } from "react";
1581
1559
 
1582
1560
  // components/CredBuild/components/Preview/index.tsx
1583
- import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef4, useMemo as useMemo7, useState as useState7 } from "react";
1561
+ import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef3, useMemo as useMemo7, useState as useState7 } from "react";
1584
1562
 
1585
1563
  // components/AutoFrame/index.tsx
1586
1564
  import {
@@ -1588,7 +1566,7 @@ import {
1588
1566
  useCallback as useCallback3,
1589
1567
  useContext as useContext4,
1590
1568
  useEffect as useEffect6,
1591
- useRef as useRef3,
1569
+ useRef as useRef2,
1592
1570
  useState as useState6
1593
1571
  } from "react";
1594
1572
  import hash from "object-hash";
@@ -1830,8 +1808,8 @@ function AutoFrame({
1830
1808
  const handleStylesLoaded = useCallback3(() => {
1831
1809
  setStylesLoaded(true);
1832
1810
  }, []);
1833
- const onReadyRef = useRef3(onReady);
1834
- const onNotReadyRef = useRef3(onNotReady);
1811
+ const onReadyRef = useRef2(onReady);
1812
+ const onNotReadyRef = useRef2(onNotReady);
1835
1813
  useEffect6(() => {
1836
1814
  onReadyRef.current = onReady;
1837
1815
  onNotReadyRef.current = onNotReady;
@@ -1980,7 +1958,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
1980
1958
  const isHtmlMode = rootProps?.mode === "html";
1981
1959
  const htmlViewMode = rootProps?.htmlViewMode || (rootProps?.htmlCode ? "preview" : "code");
1982
1960
  const htmlCode = rootProps?.htmlCode || "";
1983
- const ref = useRef4(null);
1961
+ const ref = useRef3(null);
1984
1962
  useBubbleIframeEvents(ref);
1985
1963
  const [localCode, setLocalCode] = useState7(htmlCode);
1986
1964
  useEffect7(() => {
@@ -2316,7 +2294,7 @@ import {
2316
2294
  useCallback as useCallback6,
2317
2295
  useEffect as useEffect9,
2318
2296
  useMemo as useMemo9,
2319
- useRef as useRef5,
2297
+ useRef as useRef4,
2320
2298
  useState as useState9
2321
2299
  } from "react";
2322
2300
  import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
@@ -2650,7 +2628,7 @@ import { jsx as jsx19 } from "react/jsx-runtime";
2650
2628
  var DEBUG = false;
2651
2629
  var AREA_CHANGE_DEBOUNCE_MS = 100;
2652
2630
  var useTempDisableFallback = (timeout2) => {
2653
- const lastFallbackDisable = useRef5(null);
2631
+ const lastFallbackDisable = useRef4(null);
2654
2632
  return useCallback6((manager) => {
2655
2633
  collisionStore.setState({ fallbackEnabled: false });
2656
2634
  const fallbackId = generateId();
@@ -2670,7 +2648,7 @@ var DragDropContextClient = ({
2670
2648
  const dispatch = useAppStore((s) => s.dispatch);
2671
2649
  const instanceId = useAppStore((s) => s.instanceId);
2672
2650
  const appStore = useAppStoreApi();
2673
- const debouncedParamsRef = useRef5(null);
2651
+ const debouncedParamsRef = useRef4(null);
2674
2652
  const tempDisableFallback = useTempDisableFallback(100);
2675
2653
  const [zoneStore] = useState9(() => {
2676
2654
  const rootVirtualizers = /* @__PURE__ */ new Map();
@@ -2816,8 +2794,8 @@ var DragDropContextClient = ({
2816
2794
  ]);
2817
2795
  const sensors = useSensors();
2818
2796
  const [dragListeners, setDragListeners] = useState9({});
2819
- const dragMode = useRef5(null);
2820
- const initialSelector = useRef5(void 0);
2797
+ const dragMode = useRef4(null);
2798
+ const initialSelector = useRef4(void 0);
2821
2799
  const nextContextValue = useMemo9(
2822
2800
  () => ({
2823
2801
  mode: "edit",
@@ -3309,7 +3287,7 @@ import { useShallow as useShallow3 } from "zustand/react/shallow";
3309
3287
  import {
3310
3288
  createContext as createContext5,
3311
3289
  useContext as useContext7,
3312
- useRef as useRef6,
3290
+ useRef as useRef5,
3313
3291
  useMemo as useMemo11
3314
3292
  } from "react";
3315
3293
  import { jsx as jsx22 } from "react/jsx-runtime";
@@ -3317,7 +3295,7 @@ var FrameContext = createContext5(null);
3317
3295
  var FrameProvider = ({
3318
3296
  children
3319
3297
  }) => {
3320
- const frameRef = useRef6(null);
3298
+ const frameRef = useRef5(null);
3321
3299
  const value = useMemo11(
3322
3300
  () => ({
3323
3301
  frameRef
@@ -3756,7 +3734,7 @@ import {
3756
3734
  useCallback as useCallback8,
3757
3735
  useEffect as useEffect11,
3758
3736
  useMemo as useMemo13,
3759
- useRef as useRef7,
3737
+ useRef as useRef6,
3760
3738
  useState as useState12
3761
3739
  } from "react";
3762
3740
 
@@ -3814,7 +3792,7 @@ var Canvas = () => {
3814
3792
  const isNonFullWidth = viewports.current.width !== "100%";
3815
3793
  const shouldApplyViewport = true;
3816
3794
  const [showTransition, setShowTransition] = useState12(false);
3817
- const isResizingRef = useRef7(false);
3795
+ const isResizingRef = useRef6(false);
3818
3796
  const defaultRender = useMemo13(() => {
3819
3797
  const CredBuildDefault = ({ children }) => /* @__PURE__ */ jsx25(Fragment9, { children });
3820
3798
  return CredBuildDefault;
@@ -4020,10 +3998,10 @@ var Canvas = () => {
4020
3998
  };
4021
3999
 
4022
4000
  // lib/use-sidebar-resize.ts
4023
- import { useCallback as useCallback9, useEffect as useEffect12, useRef as useRef8, useState as useState13 } from "react";
4001
+ import { useCallback as useCallback9, useEffect as useEffect12, useRef as useRef7, useState as useState13 } from "react";
4024
4002
  function useSidebarResize(position, dispatch) {
4025
4003
  const [width, setWidth] = useState13(null);
4026
- const sidebarRef = useRef8(null);
4004
+ const sidebarRef = useRef7(null);
4027
4005
  const storeWidth = useAppStore(
4028
4006
  (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
4029
4007
  );
@@ -4101,7 +4079,7 @@ function useSidebarResize(position, dispatch) {
4101
4079
  }
4102
4080
 
4103
4081
  // components/CredBuild/components/ResizeHandle/index.tsx
4104
- import { useCallback as useCallback10, useRef as useRef9 } from "react";
4082
+ import { useCallback as useCallback10, useRef as useRef8 } from "react";
4105
4083
 
4106
4084
  // css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/ResizeHandle/styles.module.css#css-module
4107
4085
  var styles_module_default17 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
@@ -4117,10 +4095,10 @@ var ResizeHandle = ({
4117
4095
  }) => {
4118
4096
  const { frameRef } = useCanvasFrame();
4119
4097
  const resetAutoZoom = useResetAutoZoom(frameRef);
4120
- const handleRef = useRef9(null);
4121
- const isDragging = useRef9(false);
4122
- const startX = useRef9(0);
4123
- const startWidth = useRef9(0);
4098
+ const handleRef = useRef8(null);
4099
+ const isDragging = useRef8(false);
4100
+ const startX = useRef8(0);
4101
+ const startWidth = useRef8(0);
4124
4102
  const handleMouseMove = useCallback10(
4125
4103
  (e) => {
4126
4104
  if (!isDragging.current) return;
@@ -4750,7 +4728,7 @@ function CredBuildProvider({ children }) {
4750
4728
  index: initialHistoryIndex,
4751
4729
  initialAppState
4752
4730
  });
4753
- const previousData = useRef10(null);
4731
+ const previousData = useRef9(null);
4754
4732
  useEffect15(() => {
4755
4733
  return appStore.subscribe(
4756
4734
  (s) => s.state.data,
package/dist/index.js CHANGED
@@ -12243,10 +12243,8 @@ var HtmlModeRender = ({
12243
12243
  isEditing
12244
12244
  }) => {
12245
12245
  const id = (0, import_react81.useId)().replace(/:/g, "");
12246
- const [iframeHeight, setIframeHeight] = (0, import_react81.useState)("100%");
12247
- const divRef = (0, import_react81.useRef)(null);
12246
+ const [iframeHeight, setIframeHeight] = (0, import_react81.useState)("100vh");
12248
12247
  (0, import_react81.useEffect)(() => {
12249
- if (!isEditing) return;
12250
12248
  const handleMessage = (event) => {
12251
12249
  if (event.data && event.data.type === "resize-iframe" && event.data.id === id) {
12252
12250
  setIframeHeight(`${event.data.height}px`);
@@ -12254,117 +12252,97 @@ var HtmlModeRender = ({
12254
12252
  };
12255
12253
  window.addEventListener("message", handleMessage);
12256
12254
  return () => window.removeEventListener("message", handleMessage);
12257
- }, [id, isEditing]);
12258
- (0, import_react81.useEffect)(() => {
12259
- if (isEditing || !divRef.current || !htmlCode) return;
12260
- const scripts = divRef.current.querySelectorAll("script");
12261
- scripts.forEach((script) => {
12262
- const newScript = document.createElement("script");
12263
- Array.from(script.attributes).forEach(
12264
- (attr) => newScript.setAttribute(attr.name, attr.value)
12265
- );
12266
- newScript.appendChild(document.createTextNode(script.innerHTML));
12267
- script.parentNode?.replaceChild(newScript, script);
12268
- });
12269
- }, [htmlCode, isEditing]);
12255
+ }, [id]);
12270
12256
  if (!htmlCode) {
12271
12257
  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { style: { padding: 48, textAlign: "center", color: "#666" }, children: "Belum ada kode HTML yang ditempel." });
12272
12258
  }
12273
- if (isEditing) {
12274
- const resizeScript = `
12275
- <script>
12276
- function sendHeight() {
12277
- const height = document.documentElement.scrollHeight || document.body.scrollHeight;
12278
- window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
12279
- }
12280
- window.addEventListener('load', sendHeight);
12281
- window.addEventListener('resize', sendHeight);
12282
-
12283
- if (window.ResizeObserver) {
12284
- new ResizeObserver(sendHeight).observe(document.body);
12285
- } else {
12286
- setInterval(sendHeight, 1000);
12287
- }
12288
- </script>
12289
- `;
12290
- const needsTailwind = htmlCode.includes("cdn.tailwindcss.com") || htmlCode.includes("tailwindcss") || /\b(bg-|text-|p[xy]?[-0-9]|m[xy]?[-0-9]|flex|grid|border-|rounded-|shadow-|justify-|items-|gap-|relative|absolute|hidden|w-|h-|leading-|tracking-|font-|transition|duration-|ease-|hover:|focus:|sm:|md:|lg:|xl:)/.test(
12291
- htmlCode
12292
- );
12293
- const isStandalone = htmlCode.includes("<html") || htmlCode.includes("<!DOCTYPE") || htmlCode.includes("<body") || htmlCode.includes("<head>");
12294
- let srcDoc = "";
12295
- if (isStandalone) {
12296
- let processed = htmlCode;
12297
- if (processed.includes("</body>")) {
12298
- processed = processed.replace("</body>", `${resizeScript}</body>`);
12299
- } else {
12300
- processed = processed + resizeScript;
12259
+ const resizeScript = `
12260
+ <script>
12261
+ function sendHeight() {
12262
+ const body = document.body;
12263
+ // calculate content height safely, avoiding clientHeight/viewport height which prevents shrinking
12264
+ const height = Math.max(body.scrollHeight, body.offsetHeight);
12265
+ window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
12301
12266
  }
12302
- if (needsTailwind && !processed.includes("cdn.tailwindcss.com") && !processed.includes("tailwindcss")) {
12303
- if (processed.includes("</head>")) {
12304
- processed = processed.replace(
12305
- "</head>",
12306
- `<script src="https://cdn.tailwindcss.com"></script></head>`
12307
- );
12308
- } else if (processed.includes("<head>")) {
12309
- processed = processed.replace(
12310
- "<head>",
12311
- `<head><script src="https://cdn.tailwindcss.com"></script>`
12312
- );
12313
- } else {
12314
- processed = `<script src="https://cdn.tailwindcss.com"></script>` + processed;
12315
- }
12267
+ window.addEventListener('load', sendHeight);
12268
+ window.addEventListener('resize', sendHeight);
12269
+
12270
+ if (window.ResizeObserver) {
12271
+ new ResizeObserver(sendHeight).observe(document.body);
12272
+ } else {
12273
+ setInterval(sendHeight, 1000);
12316
12274
  }
12317
- srcDoc = processed;
12275
+ </script>
12276
+ `;
12277
+ const needsTailwind = htmlCode.includes("cdn.tailwindcss.com") || htmlCode.includes("tailwindcss") || /\b(bg-|text-|p[xy]?[-0-9]|m[xy]?[-0-9]|flex|grid|border-|rounded-|shadow-|justify-|items-|gap-|relative|absolute|hidden|w-|h-|leading-|tracking-|font-|transition|duration-|ease-|hover:|focus:|sm:|md:|lg:|xl:)/.test(
12278
+ htmlCode
12279
+ );
12280
+ const isStandalone = htmlCode.includes("<html") || htmlCode.includes("<!DOCTYPE") || htmlCode.includes("<body") || htmlCode.includes("<head>");
12281
+ let srcDoc = "";
12282
+ if (isStandalone) {
12283
+ let processed = htmlCode;
12284
+ if (processed.includes("</body>")) {
12285
+ processed = processed.replace("</body>", `${resizeScript}</body>`);
12318
12286
  } else {
12319
- srcDoc = `
12320
- <!DOCTYPE html>
12321
- <html>
12322
- <head>
12323
- ${needsTailwind ? `<script src="https://cdn.tailwindcss.com"></script>` : ""}
12324
- <style>
12325
- *, *::before, *::after { box-sizing: border-box; }
12326
- body {
12327
- margin: 0;
12328
- padding: 0;
12329
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12330
- }
12331
- img, iframe, video {
12332
- max-width: 100%;
12333
- }
12334
- </style>
12335
- </head>
12336
- <body>
12337
- ${htmlCode}
12338
- ${resizeScript}
12339
- </body>
12340
- </html>
12341
- `;
12287
+ processed = processed + resizeScript;
12342
12288
  }
12343
- return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
12344
- "iframe",
12345
- {
12346
- srcDoc,
12347
- sandbox: "allow-scripts",
12348
- title: "Html Mode Sandboxed Canvas",
12349
- loading: "lazy",
12350
- style: {
12351
- height: iframeHeight,
12352
- border: "none",
12353
- width: "100%",
12354
- display: "block",
12355
- background: "transparent"
12356
- }
12289
+ if (needsTailwind && !processed.includes("cdn.tailwindcss.com") && !processed.includes("tailwindcss")) {
12290
+ if (processed.includes("</head>")) {
12291
+ processed = processed.replace(
12292
+ "</head>",
12293
+ `<script src="https://cdn.tailwindcss.com"></script></head>`
12294
+ );
12295
+ } else if (processed.includes("<head>")) {
12296
+ processed = processed.replace(
12297
+ "<head>",
12298
+ `<head><script src="https://cdn.tailwindcss.com"></script>`
12299
+ );
12300
+ } else {
12301
+ processed = `<script src="https://cdn.tailwindcss.com"></script>` + processed;
12357
12302
  }
12358
- ) });
12303
+ }
12304
+ srcDoc = processed;
12305
+ } else {
12306
+ srcDoc = `
12307
+ <!DOCTYPE html>
12308
+ <html>
12309
+ <head>
12310
+ ${needsTailwind ? `<script src="https://cdn.tailwindcss.com"></script>` : ""}
12311
+ <style>
12312
+ *, *::before, *::after { box-sizing: border-box; }
12313
+ body {
12314
+ margin: 0;
12315
+ padding: 0;
12316
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12317
+ }
12318
+ img, iframe, video {
12319
+ max-width: 100%;
12320
+ }
12321
+ </style>
12322
+ </head>
12323
+ <body>
12324
+ ${htmlCode}
12325
+ ${resizeScript}
12326
+ </body>
12327
+ </html>
12328
+ `;
12359
12329
  }
12360
- return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
12361
- "div",
12330
+ return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
12331
+ "iframe",
12362
12332
  {
12363
- ref: divRef,
12364
- dangerouslySetInnerHTML: { __html: htmlCode },
12365
- style: { width: "100%" }
12333
+ srcDoc,
12334
+ sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
12335
+ title: "Html Mode Sandboxed Canvas",
12336
+ loading: "lazy",
12337
+ style: {
12338
+ height: iframeHeight,
12339
+ border: "none",
12340
+ width: "100%",
12341
+ display: "block",
12342
+ background: "transparent"
12343
+ }
12366
12344
  }
12367
- );
12345
+ ) });
12368
12346
  };
12369
12347
 
12370
12348
  // components/Render/index.tsx
package/dist/index.mjs CHANGED
@@ -10,7 +10,7 @@ import {
10
10
  overrideKeys,
11
11
  useCredBuild,
12
12
  useGetCredBuild
13
- } from "./chunk-MWCFPGI6.mjs";
13
+ } from "./chunk-32BKYUSW.mjs";
14
14
  import {
15
15
  ColorPickerField,
16
16
  Drawer,
package/dist/no-external.js CHANGED
@@ -12243,10 +12243,8 @@ var HtmlModeRender = ({
12243
12243
  isEditing
12244
12244
  }) => {
12245
12245
  const id = (0, import_react81.useId)().replace(/:/g, "");
12246
- const [iframeHeight, setIframeHeight] = (0, import_react81.useState)("100%");
12247
- const divRef = (0, import_react81.useRef)(null);
12246
+ const [iframeHeight, setIframeHeight] = (0, import_react81.useState)("100vh");
12248
12247
  (0, import_react81.useEffect)(() => {
12249
- if (!isEditing) return;
12250
12248
  const handleMessage = (event) => {
12251
12249
  if (event.data && event.data.type === "resize-iframe" && event.data.id === id) {
12252
12250
  setIframeHeight(`${event.data.height}px`);
@@ -12254,117 +12252,97 @@ var HtmlModeRender = ({
12254
12252
  };
12255
12253
  window.addEventListener("message", handleMessage);
12256
12254
  return () => window.removeEventListener("message", handleMessage);
12257
- }, [id, isEditing]);
12258
- (0, import_react81.useEffect)(() => {
12259
- if (isEditing || !divRef.current || !htmlCode) return;
12260
- const scripts = divRef.current.querySelectorAll("script");
12261
- scripts.forEach((script) => {
12262
- const newScript = document.createElement("script");
12263
- Array.from(script.attributes).forEach(
12264
- (attr) => newScript.setAttribute(attr.name, attr.value)
12265
- );
12266
- newScript.appendChild(document.createTextNode(script.innerHTML));
12267
- script.parentNode?.replaceChild(newScript, script);
12268
- });
12269
- }, [htmlCode, isEditing]);
12255
+ }, [id]);
12270
12256
  if (!htmlCode) {
12271
12257
  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { style: { padding: 48, textAlign: "center", color: "#666" }, children: "Belum ada kode HTML yang ditempel." });
12272
12258
  }
12273
- if (isEditing) {
12274
- const resizeScript = `
12275
- <script>
12276
- function sendHeight() {
12277
- const height = document.documentElement.scrollHeight || document.body.scrollHeight;
12278
- window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
12279
- }
12280
- window.addEventListener('load', sendHeight);
12281
- window.addEventListener('resize', sendHeight);
12282
-
12283
- if (window.ResizeObserver) {
12284
- new ResizeObserver(sendHeight).observe(document.body);
12285
- } else {
12286
- setInterval(sendHeight, 1000);
12287
- }
12288
- </script>
12289
- `;
12290
- const needsTailwind = htmlCode.includes("cdn.tailwindcss.com") || htmlCode.includes("tailwindcss") || /\b(bg-|text-|p[xy]?[-0-9]|m[xy]?[-0-9]|flex|grid|border-|rounded-|shadow-|justify-|items-|gap-|relative|absolute|hidden|w-|h-|leading-|tracking-|font-|transition|duration-|ease-|hover:|focus:|sm:|md:|lg:|xl:)/.test(
12291
- htmlCode
12292
- );
12293
- const isStandalone = htmlCode.includes("<html") || htmlCode.includes("<!DOCTYPE") || htmlCode.includes("<body") || htmlCode.includes("<head>");
12294
- let srcDoc = "";
12295
- if (isStandalone) {
12296
- let processed = htmlCode;
12297
- if (processed.includes("</body>")) {
12298
- processed = processed.replace("</body>", `${resizeScript}</body>`);
12299
- } else {
12300
- processed = processed + resizeScript;
12259
+ const resizeScript = `
12260
+ <script>
12261
+ function sendHeight() {
12262
+ const body = document.body;
12263
+ // calculate content height safely, avoiding clientHeight/viewport height which prevents shrinking
12264
+ const height = Math.max(body.scrollHeight, body.offsetHeight);
12265
+ window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
12301
12266
  }
12302
- if (needsTailwind && !processed.includes("cdn.tailwindcss.com") && !processed.includes("tailwindcss")) {
12303
- if (processed.includes("</head>")) {
12304
- processed = processed.replace(
12305
- "</head>",
12306
- `<script src="https://cdn.tailwindcss.com"></script></head>`
12307
- );
12308
- } else if (processed.includes("<head>")) {
12309
- processed = processed.replace(
12310
- "<head>",
12311
- `<head><script src="https://cdn.tailwindcss.com"></script>`
12312
- );
12313
- } else {
12314
- processed = `<script src="https://cdn.tailwindcss.com"></script>` + processed;
12315
- }
12267
+ window.addEventListener('load', sendHeight);
12268
+ window.addEventListener('resize', sendHeight);
12269
+
12270
+ if (window.ResizeObserver) {
12271
+ new ResizeObserver(sendHeight).observe(document.body);
12272
+ } else {
12273
+ setInterval(sendHeight, 1000);
12316
12274
  }
12317
- srcDoc = processed;
12275
+ </script>
12276
+ `;
12277
+ const needsTailwind = htmlCode.includes("cdn.tailwindcss.com") || htmlCode.includes("tailwindcss") || /\b(bg-|text-|p[xy]?[-0-9]|m[xy]?[-0-9]|flex|grid|border-|rounded-|shadow-|justify-|items-|gap-|relative|absolute|hidden|w-|h-|leading-|tracking-|font-|transition|duration-|ease-|hover:|focus:|sm:|md:|lg:|xl:)/.test(
12278
+ htmlCode
12279
+ );
12280
+ const isStandalone = htmlCode.includes("<html") || htmlCode.includes("<!DOCTYPE") || htmlCode.includes("<body") || htmlCode.includes("<head>");
12281
+ let srcDoc = "";
12282
+ if (isStandalone) {
12283
+ let processed = htmlCode;
12284
+ if (processed.includes("</body>")) {
12285
+ processed = processed.replace("</body>", `${resizeScript}</body>`);
12318
12286
  } else {
12319
- srcDoc = `
12320
- <!DOCTYPE html>
12321
- <html>
12322
- <head>
12323
- ${needsTailwind ? `<script src="https://cdn.tailwindcss.com"></script>` : ""}
12324
- <style>
12325
- *, *::before, *::after { box-sizing: border-box; }
12326
- body {
12327
- margin: 0;
12328
- padding: 0;
12329
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12330
- }
12331
- img, iframe, video {
12332
- max-width: 100%;
12333
- }
12334
- </style>
12335
- </head>
12336
- <body>
12337
- ${htmlCode}
12338
- ${resizeScript}
12339
- </body>
12340
- </html>
12341
- `;
12287
+ processed = processed + resizeScript;
12342
12288
  }
12343
- return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
12344
- "iframe",
12345
- {
12346
- srcDoc,
12347
- sandbox: "allow-scripts",
12348
- title: "Html Mode Sandboxed Canvas",
12349
- loading: "lazy",
12350
- style: {
12351
- height: iframeHeight,
12352
- border: "none",
12353
- width: "100%",
12354
- display: "block",
12355
- background: "transparent"
12356
- }
12289
+ if (needsTailwind && !processed.includes("cdn.tailwindcss.com") && !processed.includes("tailwindcss")) {
12290
+ if (processed.includes("</head>")) {
12291
+ processed = processed.replace(
12292
+ "</head>",
12293
+ `<script src="https://cdn.tailwindcss.com"></script></head>`
12294
+ );
12295
+ } else if (processed.includes("<head>")) {
12296
+ processed = processed.replace(
12297
+ "<head>",
12298
+ `<head><script src="https://cdn.tailwindcss.com"></script>`
12299
+ );
12300
+ } else {
12301
+ processed = `<script src="https://cdn.tailwindcss.com"></script>` + processed;
12357
12302
  }
12358
- ) });
12303
+ }
12304
+ srcDoc = processed;
12305
+ } else {
12306
+ srcDoc = `
12307
+ <!DOCTYPE html>
12308
+ <html>
12309
+ <head>
12310
+ ${needsTailwind ? `<script src="https://cdn.tailwindcss.com"></script>` : ""}
12311
+ <style>
12312
+ *, *::before, *::after { box-sizing: border-box; }
12313
+ body {
12314
+ margin: 0;
12315
+ padding: 0;
12316
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12317
+ }
12318
+ img, iframe, video {
12319
+ max-width: 100%;
12320
+ }
12321
+ </style>
12322
+ </head>
12323
+ <body>
12324
+ ${htmlCode}
12325
+ ${resizeScript}
12326
+ </body>
12327
+ </html>
12328
+ `;
12359
12329
  }
12360
- return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
12361
- "div",
12330
+ return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
12331
+ "iframe",
12362
12332
  {
12363
- ref: divRef,
12364
- dangerouslySetInnerHTML: { __html: htmlCode },
12365
- style: { width: "100%" }
12333
+ srcDoc,
12334
+ sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
12335
+ title: "Html Mode Sandboxed Canvas",
12336
+ loading: "lazy",
12337
+ style: {
12338
+ height: iframeHeight,
12339
+ border: "none",
12340
+ width: "100%",
12341
+ display: "block",
12342
+ background: "transparent"
12343
+ }
12366
12344
  }
12367
- );
12345
+ ) });
12368
12346
  };
12369
12347
 
12370
12348
  // components/Render/index.tsx
package/dist/no-external.mjs CHANGED
@@ -10,7 +10,7 @@ import {
10
10
  overrideKeys,
11
11
  useCredBuild,
12
12
  useGetCredBuild
13
- } from "./chunk-MWCFPGI6.mjs";
13
+ } from "./chunk-32BKYUSW.mjs";
14
14
  import {
15
15
  ColorPickerField,
16
16
  Drawer,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crediblemark/build",
3
- "version": "0.25.8",
3
+ "version": "0.25.10",
4
4
  "description": "The open-source visual editor for React",
5
5
  "author": "Rasyiqi Crediblemark",
6
6
  "repository": {
@@ -154,4 +154,4 @@
154
154
  "peerDependencies": {
155
155
  "react": "^19.2.6"
156
156
  }
157
- }
157
+ }