@crediblemark/build 0.25.8 → 0.25.9

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-HQYAIZI5.mjs} +110 -129
  2. package/dist/index.js +84 -103
  3. package/dist/index.mjs +1 -1
  4. package/dist/no-external.js +84 -103
  5. package/dist/no-external.mjs +1 -1
  6. package/package.json +2 -2
package/dist/{chunk-MWCFPGI6.mjs → chunk-HQYAIZI5.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,100 @@ 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
+ const html = document.documentElement;
153
+ const height = Math.max(
154
+ body.scrollHeight, body.offsetHeight,
155
+ html.clientHeight, html.scrollHeight, html.offsetHeight
156
+ );
157
+ window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
190
158
  }
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
- }
159
+ window.addEventListener('load', sendHeight);
160
+ window.addEventListener('resize', sendHeight);
161
+
162
+ if (window.ResizeObserver) {
163
+ new ResizeObserver(sendHeight).observe(document.body);
164
+ } else {
165
+ setInterval(sendHeight, 1000);
205
166
  }
206
- srcDoc = processed;
167
+ </script>
168
+ `;
169
+ 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(
170
+ htmlCode
171
+ );
172
+ const isStandalone = htmlCode.includes("<html") || htmlCode.includes("<!DOCTYPE") || htmlCode.includes("<body") || htmlCode.includes("<head>");
173
+ let srcDoc = "";
174
+ if (isStandalone) {
175
+ let processed = htmlCode;
176
+ if (processed.includes("</body>")) {
177
+ processed = processed.replace("</body>", `${resizeScript}</body>`);
207
178
  } 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
- `;
179
+ processed = processed + resizeScript;
231
180
  }
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
- }
181
+ if (needsTailwind && !processed.includes("cdn.tailwindcss.com") && !processed.includes("tailwindcss")) {
182
+ if (processed.includes("</head>")) {
183
+ processed = processed.replace(
184
+ "</head>",
185
+ `<script src="https://cdn.tailwindcss.com"></script></head>`
186
+ );
187
+ } else if (processed.includes("<head>")) {
188
+ processed = processed.replace(
189
+ "<head>",
190
+ `<head><script src="https://cdn.tailwindcss.com"></script>`
191
+ );
192
+ } else {
193
+ processed = `<script src="https://cdn.tailwindcss.com"></script>` + processed;
246
194
  }
247
- ) });
195
+ }
196
+ srcDoc = processed;
197
+ } else {
198
+ srcDoc = `
199
+ <!DOCTYPE html>
200
+ <html>
201
+ <head>
202
+ ${needsTailwind ? `<script src="https://cdn.tailwindcss.com"></script>` : ""}
203
+ <style>
204
+ *, *::before, *::after { box-sizing: border-box; }
205
+ body {
206
+ margin: 0;
207
+ padding: 0;
208
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
209
+ }
210
+ img, iframe, video {
211
+ max-width: 100%;
212
+ }
213
+ </style>
214
+ </head>
215
+ <body>
216
+ ${htmlCode}
217
+ ${resizeScript}
218
+ </body>
219
+ </html>
220
+ `;
248
221
  }
249
- return /* @__PURE__ */ jsx(
250
- "div",
222
+ return /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
223
+ "iframe",
251
224
  {
252
- ref: divRef,
253
- dangerouslySetInnerHTML: { __html: htmlCode },
254
- style: { width: "100%" }
225
+ srcDoc,
226
+ sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
227
+ title: "Html Mode Sandboxed Canvas",
228
+ loading: "lazy",
229
+ style: {
230
+ height: iframeHeight,
231
+ border: "none",
232
+ width: "100%",
233
+ display: "block",
234
+ background: "transparent"
235
+ }
255
236
  }
256
- );
237
+ ) });
257
238
  };
258
239
 
259
240
  // components/Render/index.tsx
@@ -755,7 +736,7 @@ import {
755
736
  forwardRef,
756
737
  useCallback,
757
738
  useContext as useContext2,
758
- useRef as useRef2,
739
+ useRef,
759
740
  memo as memo2
760
741
  } from "react";
761
742
  import { useVirtualizer } from "@tanstack/react-virtual";
@@ -1027,7 +1008,7 @@ var VirtualizedLayerTreeItems = memo2(({
1027
1008
  selectedPathIds,
1028
1009
  tree
1029
1010
  }) => {
1030
- const listRef = useRef2(null);
1011
+ const listRef = useRef(null);
1031
1012
  const virtualizer = useVirtualizer({
1032
1013
  count: tree.items.length,
1033
1014
  estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
@@ -1575,12 +1556,12 @@ import {
1575
1556
  useCallback as useCallback12,
1576
1557
  useEffect as useEffect15,
1577
1558
  useMemo as useMemo15,
1578
- useRef as useRef10,
1559
+ useRef as useRef9,
1579
1560
  useState as useState15
1580
1561
  } from "react";
1581
1562
 
1582
1563
  // 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";
1564
+ import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef3, useMemo as useMemo7, useState as useState7 } from "react";
1584
1565
 
1585
1566
  // components/AutoFrame/index.tsx
1586
1567
  import {
@@ -1588,7 +1569,7 @@ import {
1588
1569
  useCallback as useCallback3,
1589
1570
  useContext as useContext4,
1590
1571
  useEffect as useEffect6,
1591
- useRef as useRef3,
1572
+ useRef as useRef2,
1592
1573
  useState as useState6
1593
1574
  } from "react";
1594
1575
  import hash from "object-hash";
@@ -1830,8 +1811,8 @@ function AutoFrame({
1830
1811
  const handleStylesLoaded = useCallback3(() => {
1831
1812
  setStylesLoaded(true);
1832
1813
  }, []);
1833
- const onReadyRef = useRef3(onReady);
1834
- const onNotReadyRef = useRef3(onNotReady);
1814
+ const onReadyRef = useRef2(onReady);
1815
+ const onNotReadyRef = useRef2(onNotReady);
1835
1816
  useEffect6(() => {
1836
1817
  onReadyRef.current = onReady;
1837
1818
  onNotReadyRef.current = onNotReady;
@@ -1980,7 +1961,7 @@ var Preview = ({ id = "credbuild-preview" }) => {
1980
1961
  const isHtmlMode = rootProps?.mode === "html";
1981
1962
  const htmlViewMode = rootProps?.htmlViewMode || (rootProps?.htmlCode ? "preview" : "code");
1982
1963
  const htmlCode = rootProps?.htmlCode || "";
1983
- const ref = useRef4(null);
1964
+ const ref = useRef3(null);
1984
1965
  useBubbleIframeEvents(ref);
1985
1966
  const [localCode, setLocalCode] = useState7(htmlCode);
1986
1967
  useEffect7(() => {
@@ -2316,7 +2297,7 @@ import {
2316
2297
  useCallback as useCallback6,
2317
2298
  useEffect as useEffect9,
2318
2299
  useMemo as useMemo9,
2319
- useRef as useRef5,
2300
+ useRef as useRef4,
2320
2301
  useState as useState9
2321
2302
  } from "react";
2322
2303
  import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
@@ -2650,7 +2631,7 @@ import { jsx as jsx19 } from "react/jsx-runtime";
2650
2631
  var DEBUG = false;
2651
2632
  var AREA_CHANGE_DEBOUNCE_MS = 100;
2652
2633
  var useTempDisableFallback = (timeout2) => {
2653
- const lastFallbackDisable = useRef5(null);
2634
+ const lastFallbackDisable = useRef4(null);
2654
2635
  return useCallback6((manager) => {
2655
2636
  collisionStore.setState({ fallbackEnabled: false });
2656
2637
  const fallbackId = generateId();
@@ -2670,7 +2651,7 @@ var DragDropContextClient = ({
2670
2651
  const dispatch = useAppStore((s) => s.dispatch);
2671
2652
  const instanceId = useAppStore((s) => s.instanceId);
2672
2653
  const appStore = useAppStoreApi();
2673
- const debouncedParamsRef = useRef5(null);
2654
+ const debouncedParamsRef = useRef4(null);
2674
2655
  const tempDisableFallback = useTempDisableFallback(100);
2675
2656
  const [zoneStore] = useState9(() => {
2676
2657
  const rootVirtualizers = /* @__PURE__ */ new Map();
@@ -2816,8 +2797,8 @@ var DragDropContextClient = ({
2816
2797
  ]);
2817
2798
  const sensors = useSensors();
2818
2799
  const [dragListeners, setDragListeners] = useState9({});
2819
- const dragMode = useRef5(null);
2820
- const initialSelector = useRef5(void 0);
2800
+ const dragMode = useRef4(null);
2801
+ const initialSelector = useRef4(void 0);
2821
2802
  const nextContextValue = useMemo9(
2822
2803
  () => ({
2823
2804
  mode: "edit",
@@ -3309,7 +3290,7 @@ import { useShallow as useShallow3 } from "zustand/react/shallow";
3309
3290
  import {
3310
3291
  createContext as createContext5,
3311
3292
  useContext as useContext7,
3312
- useRef as useRef6,
3293
+ useRef as useRef5,
3313
3294
  useMemo as useMemo11
3314
3295
  } from "react";
3315
3296
  import { jsx as jsx22 } from "react/jsx-runtime";
@@ -3317,7 +3298,7 @@ var FrameContext = createContext5(null);
3317
3298
  var FrameProvider = ({
3318
3299
  children
3319
3300
  }) => {
3320
- const frameRef = useRef6(null);
3301
+ const frameRef = useRef5(null);
3321
3302
  const value = useMemo11(
3322
3303
  () => ({
3323
3304
  frameRef
@@ -3756,7 +3737,7 @@ import {
3756
3737
  useCallback as useCallback8,
3757
3738
  useEffect as useEffect11,
3758
3739
  useMemo as useMemo13,
3759
- useRef as useRef7,
3740
+ useRef as useRef6,
3760
3741
  useState as useState12
3761
3742
  } from "react";
3762
3743
 
@@ -3814,7 +3795,7 @@ var Canvas = () => {
3814
3795
  const isNonFullWidth = viewports.current.width !== "100%";
3815
3796
  const shouldApplyViewport = true;
3816
3797
  const [showTransition, setShowTransition] = useState12(false);
3817
- const isResizingRef = useRef7(false);
3798
+ const isResizingRef = useRef6(false);
3818
3799
  const defaultRender = useMemo13(() => {
3819
3800
  const CredBuildDefault = ({ children }) => /* @__PURE__ */ jsx25(Fragment9, { children });
3820
3801
  return CredBuildDefault;
@@ -4020,10 +4001,10 @@ var Canvas = () => {
4020
4001
  };
4021
4002
 
4022
4003
  // lib/use-sidebar-resize.ts
4023
- import { useCallback as useCallback9, useEffect as useEffect12, useRef as useRef8, useState as useState13 } from "react";
4004
+ import { useCallback as useCallback9, useEffect as useEffect12, useRef as useRef7, useState as useState13 } from "react";
4024
4005
  function useSidebarResize(position, dispatch) {
4025
4006
  const [width, setWidth] = useState13(null);
4026
- const sidebarRef = useRef8(null);
4007
+ const sidebarRef = useRef7(null);
4027
4008
  const storeWidth = useAppStore(
4028
4009
  (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
4029
4010
  );
@@ -4101,7 +4082,7 @@ function useSidebarResize(position, dispatch) {
4101
4082
  }
4102
4083
 
4103
4084
  // components/CredBuild/components/ResizeHandle/index.tsx
4104
- import { useCallback as useCallback10, useRef as useRef9 } from "react";
4085
+ import { useCallback as useCallback10, useRef as useRef8 } from "react";
4105
4086
 
4106
4087
  // css-module:/home/runner/work/credbuild/credbuild/components/CredBuild/components/ResizeHandle/styles.module.css#css-module
4107
4088
  var styles_module_default17 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
@@ -4117,10 +4098,10 @@ var ResizeHandle = ({
4117
4098
  }) => {
4118
4099
  const { frameRef } = useCanvasFrame();
4119
4100
  const resetAutoZoom = useResetAutoZoom(frameRef);
4120
- const handleRef = useRef9(null);
4121
- const isDragging = useRef9(false);
4122
- const startX = useRef9(0);
4123
- const startWidth = useRef9(0);
4101
+ const handleRef = useRef8(null);
4102
+ const isDragging = useRef8(false);
4103
+ const startX = useRef8(0);
4104
+ const startWidth = useRef8(0);
4124
4105
  const handleMouseMove = useCallback10(
4125
4106
  (e) => {
4126
4107
  if (!isDragging.current) return;
@@ -4750,7 +4731,7 @@ function CredBuildProvider({ children }) {
4750
4731
  index: initialHistoryIndex,
4751
4732
  initialAppState
4752
4733
  });
4753
- const previousData = useRef10(null);
4734
+ const previousData = useRef9(null);
4754
4735
  useEffect15(() => {
4755
4736
  return appStore.subscribe(
4756
4737
  (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,100 @@ 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
+ const html = document.documentElement;
12264
+ const height = Math.max(
12265
+ body.scrollHeight, body.offsetHeight,
12266
+ html.clientHeight, html.scrollHeight, html.offsetHeight
12267
+ );
12268
+ window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
12301
12269
  }
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
- }
12270
+ window.addEventListener('load', sendHeight);
12271
+ window.addEventListener('resize', sendHeight);
12272
+
12273
+ if (window.ResizeObserver) {
12274
+ new ResizeObserver(sendHeight).observe(document.body);
12275
+ } else {
12276
+ setInterval(sendHeight, 1000);
12316
12277
  }
12317
- srcDoc = processed;
12278
+ </script>
12279
+ `;
12280
+ 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(
12281
+ htmlCode
12282
+ );
12283
+ const isStandalone = htmlCode.includes("<html") || htmlCode.includes("<!DOCTYPE") || htmlCode.includes("<body") || htmlCode.includes("<head>");
12284
+ let srcDoc = "";
12285
+ if (isStandalone) {
12286
+ let processed = htmlCode;
12287
+ if (processed.includes("</body>")) {
12288
+ processed = processed.replace("</body>", `${resizeScript}</body>`);
12318
12289
  } 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
- `;
12290
+ processed = processed + resizeScript;
12342
12291
  }
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
- }
12292
+ if (needsTailwind && !processed.includes("cdn.tailwindcss.com") && !processed.includes("tailwindcss")) {
12293
+ if (processed.includes("</head>")) {
12294
+ processed = processed.replace(
12295
+ "</head>",
12296
+ `<script src="https://cdn.tailwindcss.com"></script></head>`
12297
+ );
12298
+ } else if (processed.includes("<head>")) {
12299
+ processed = processed.replace(
12300
+ "<head>",
12301
+ `<head><script src="https://cdn.tailwindcss.com"></script>`
12302
+ );
12303
+ } else {
12304
+ processed = `<script src="https://cdn.tailwindcss.com"></script>` + processed;
12357
12305
  }
12358
- ) });
12306
+ }
12307
+ srcDoc = processed;
12308
+ } else {
12309
+ srcDoc = `
12310
+ <!DOCTYPE html>
12311
+ <html>
12312
+ <head>
12313
+ ${needsTailwind ? `<script src="https://cdn.tailwindcss.com"></script>` : ""}
12314
+ <style>
12315
+ *, *::before, *::after { box-sizing: border-box; }
12316
+ body {
12317
+ margin: 0;
12318
+ padding: 0;
12319
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12320
+ }
12321
+ img, iframe, video {
12322
+ max-width: 100%;
12323
+ }
12324
+ </style>
12325
+ </head>
12326
+ <body>
12327
+ ${htmlCode}
12328
+ ${resizeScript}
12329
+ </body>
12330
+ </html>
12331
+ `;
12359
12332
  }
12360
- return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
12361
- "div",
12333
+ return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
12334
+ "iframe",
12362
12335
  {
12363
- ref: divRef,
12364
- dangerouslySetInnerHTML: { __html: htmlCode },
12365
- style: { width: "100%" }
12336
+ srcDoc,
12337
+ sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
12338
+ title: "Html Mode Sandboxed Canvas",
12339
+ loading: "lazy",
12340
+ style: {
12341
+ height: iframeHeight,
12342
+ border: "none",
12343
+ width: "100%",
12344
+ display: "block",
12345
+ background: "transparent"
12346
+ }
12366
12347
  }
12367
- );
12348
+ ) });
12368
12349
  };
12369
12350
 
12370
12351
  // 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-HQYAIZI5.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,100 @@ 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
+ const html = document.documentElement;
12264
+ const height = Math.max(
12265
+ body.scrollHeight, body.offsetHeight,
12266
+ html.clientHeight, html.scrollHeight, html.offsetHeight
12267
+ );
12268
+ window.parent.postMessage({ type: 'resize-iframe', id: '${id}', height: height }, '*');
12301
12269
  }
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
- }
12270
+ window.addEventListener('load', sendHeight);
12271
+ window.addEventListener('resize', sendHeight);
12272
+
12273
+ if (window.ResizeObserver) {
12274
+ new ResizeObserver(sendHeight).observe(document.body);
12275
+ } else {
12276
+ setInterval(sendHeight, 1000);
12316
12277
  }
12317
- srcDoc = processed;
12278
+ </script>
12279
+ `;
12280
+ 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(
12281
+ htmlCode
12282
+ );
12283
+ const isStandalone = htmlCode.includes("<html") || htmlCode.includes("<!DOCTYPE") || htmlCode.includes("<body") || htmlCode.includes("<head>");
12284
+ let srcDoc = "";
12285
+ if (isStandalone) {
12286
+ let processed = htmlCode;
12287
+ if (processed.includes("</body>")) {
12288
+ processed = processed.replace("</body>", `${resizeScript}</body>`);
12318
12289
  } 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
- `;
12290
+ processed = processed + resizeScript;
12342
12291
  }
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
- }
12292
+ if (needsTailwind && !processed.includes("cdn.tailwindcss.com") && !processed.includes("tailwindcss")) {
12293
+ if (processed.includes("</head>")) {
12294
+ processed = processed.replace(
12295
+ "</head>",
12296
+ `<script src="https://cdn.tailwindcss.com"></script></head>`
12297
+ );
12298
+ } else if (processed.includes("<head>")) {
12299
+ processed = processed.replace(
12300
+ "<head>",
12301
+ `<head><script src="https://cdn.tailwindcss.com"></script>`
12302
+ );
12303
+ } else {
12304
+ processed = `<script src="https://cdn.tailwindcss.com"></script>` + processed;
12357
12305
  }
12358
- ) });
12306
+ }
12307
+ srcDoc = processed;
12308
+ } else {
12309
+ srcDoc = `
12310
+ <!DOCTYPE html>
12311
+ <html>
12312
+ <head>
12313
+ ${needsTailwind ? `<script src="https://cdn.tailwindcss.com"></script>` : ""}
12314
+ <style>
12315
+ *, *::before, *::after { box-sizing: border-box; }
12316
+ body {
12317
+ margin: 0;
12318
+ padding: 0;
12319
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12320
+ }
12321
+ img, iframe, video {
12322
+ max-width: 100%;
12323
+ }
12324
+ </style>
12325
+ </head>
12326
+ <body>
12327
+ ${htmlCode}
12328
+ ${resizeScript}
12329
+ </body>
12330
+ </html>
12331
+ `;
12359
12332
  }
12360
- return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
12361
- "div",
12333
+ return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
12334
+ "iframe",
12362
12335
  {
12363
- ref: divRef,
12364
- dangerouslySetInnerHTML: { __html: htmlCode },
12365
- style: { width: "100%" }
12336
+ srcDoc,
12337
+ sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
12338
+ title: "Html Mode Sandboxed Canvas",
12339
+ loading: "lazy",
12340
+ style: {
12341
+ height: iframeHeight,
12342
+ border: "none",
12343
+ width: "100%",
12344
+ display: "block",
12345
+ background: "transparent"
12346
+ }
12366
12347
  }
12367
- );
12348
+ ) });
12368
12349
  };
12369
12350
 
12370
12351
  // 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-HQYAIZI5.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.9",
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
+ }