@webstudio-is/sdk-components-react 0.144.1-89bca38.0 → 0.151.0

package/lib/components.js

@@ -32,6 +32,57 @@ import {
 } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { ReactSdkContext } from "@webstudio-is/react-sdk";
+
+// src/html-embed-patchers.ts
+var isDOMContentLoaded = () => {
+  return document.readyState === "complete" || document.readyState === "interactive";
+};
+var eventListenerTasks = [];
+var domContentLoadedPatched = false;
+var patchDomEvents = () => {
+  if (isDOMContentLoaded() === false) {
+    console.error("DOMContentLoaded event has not been fired yet");
+    return;
+  }
+  if (domContentLoadedPatched) {
+    return;
+  }
+  domContentLoadedPatched = true;
+  console.info("Patching DOMContentLoaded event listener");
+  const originalAddEventListener = document.addEventListener;
+  const originalWindowAddEventListener = window.addEventListener;
+  const domContentLoadedEvent = new Event("DOMContentLoaded");
+  const windowLoadEvent = new Event("load");
+  window.addEventListener = (type, listener, options) => {
+    if (type === "DOMContentLoaded") {
+      eventListenerTasks.push(
+        () => listener.call(window, domContentLoadedEvent)
+      );
+    } else if (type === "load") {
+      eventListenerTasks.push(() => listener.call(window, windowLoadEvent));
+      originalWindowAddEventListener.call(window, type, listener, options);
+    } else {
+      originalWindowAddEventListener.call(window, type, listener, options);
+    }
+  };
+  document.addEventListener = (type, listener, options) => {
+    if (type === "DOMContentLoaded") {
+      eventListenerTasks.push(
+        () => listener.call(document, domContentLoadedEvent)
+      );
+    } else {
+      originalAddEventListener.call(document, type, listener, options);
+    }
+  };
+};
+var executeDomEvents = () => {
+  for (const task of eventListenerTasks) {
+    task();
+  }
+  eventListenerTasks.length = 0;
+};
+
+// src/html-embed.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var __testing__ = {
   scriptTestIdPrefix: "client-"
@@ -48,7 +99,7 @@ var insertScript = (sourceScript) => {
     }
     if (hasSrc) {
       script.addEventListener("load", () => {
-        resolve(script);
+        resolve();
       });
       script.addEventListener("error", reject);
     } else {
@@ -56,11 +107,30 @@ var insertScript = (sourceScript) => {
     }
     sourceScript.replaceWith(script);
     if (hasSrc === false) {
-      resolve(script);
+      resolve();
     }
   });
 };
-var execute = async (container) => {
+var syncTasksQueue = [];
+var processing = false;
+var processSyncTasks = async (syncTasks) => {
+  syncTasksQueue.push(...syncTasks);
+  await Promise.resolve();
+  if (processing) {
+    return;
+  }
+  patchDomEvents();
+  console.info("Start processing sync tasks");
+  processing = true;
+  while (syncTasksQueue.length > 0) {
+    const task = syncTasksQueue.shift();
+    await task();
+  }
+  executeDomEvents();
+  processing = false;
+  console.info("Stop processing sync tasks");
+};
+var execute = (container) => {
   const scripts = container.querySelectorAll("script");
   const syncTasks = [];
   const asyncTasks = [];
@@ -73,13 +143,11 @@ var execute = async (container) => {
   for (const task of asyncTasks) {
     task();
   }
-  for (const task of syncTasks) {
-    await task();
-  }
+  processSyncTasks(syncTasks);
 };
 var Placeholder = (props) => {
   const { code, innerRef, ...rest } = props;
-  return /* @__PURE__ */ jsx3("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Open the "Settings" panel to insert HTML code' });
+  return /* @__PURE__ */ jsx3("div", { ref: innerRef, ...rest, style: { padding: 20 }, children: 'Open the "Settings" panel to insert HTML code.' });
 };
 var useIsServer = () => {
   const isServer = useSyncExternalStore(
@@ -396,10 +464,21 @@ var Separator = forwardRef23(
 Separator.displayName = "Separator";
 
 // src/code-text.tsx
-import { forwardRef as forwardRef24 } from "react";
+import {
+  forwardRef as forwardRef24
+} from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
-var CodeText = forwardRef24(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx21("code", { ...props, ref, children: children ?? "Code you can edit" });
+var Placeholder2 = ({
+  innerRef,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx21("code", { ...rest, style: { padding: 20 }, ref: innerRef, children: `Open the "Settings" panel to edit the code.` });
+};
+var CodeText = forwardRef24(({ code, children, ...props }, ref) => {
+  if (children === void 0 && code === void 0 || String(code).trim().length === 0) {
+    return /* @__PURE__ */ jsx21(Placeholder2, { innerRef: ref, ...props });
+  }
+  return /* @__PURE__ */ jsx21("code", { ...props, ref, children: code ?? children });
 });
 CodeText.displayName = "CodeText";
 
@@ -771,6 +850,32 @@ var VimeoSpinner = forwardRef32(
   }
 );
 VimeoSpinner.displayName = "VimeoSpinner";
+
+// src/xml-node.tsx
+import { Children, forwardRef as forwardRef33 } from "react";
+import { jsx as jsx30, jsxs as jsxs2 } from "react/jsx-runtime";
+var XmlNode = forwardRef33(
+  ({ tag = "", children, ...props }, ref) => {
+    const isTextChild = Children.toArray(children).every(
+      (child) => typeof child === "string"
+    );
+    const elementName = tag.replace(/^[^\p{L}_]+/u, "").replaceAll(/[^\p{L}\p{N}\-._]+/gu, "");
+    return /* @__PURE__ */ jsxs2("div", { style: { display: isTextChild ? "flex" : "contents" }, ...props, children: [
+      /* @__PURE__ */ jsxs2("div", { style: { color: "rgb(16, 23, 233)" }, children: [
+        "<",
+        elementName,
+        ">"
+      ] }),
+      /* @__PURE__ */ jsx30("div", { ref, style: { marginLeft: isTextChild ? 0 : "1rem" }, children }),
+      /* @__PURE__ */ jsxs2("div", { style: { color: "rgb(16, 23, 233)" }, children: [
+        "</",
+        elementName,
+        ">"
+      ] })
+    ] });
+  }
+);
+XmlNode.displayName = "XmlNode";
 export {
   Blockquote,
   Body,
@@ -803,5 +908,6 @@ export {
   Vimeo,
   VimeoPlayButton,
   VimeoPreviewImage,
-  VimeoSpinner
+  VimeoSpinner,
+  XmlNode
 };