@webstudio-is/sdk-components-react 0.145.0 → 0.163.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(
@@ -133,7 +201,7 @@ var ServerEmbed = (props) => {
 var ClientEmbedWithNonExecutableScripts = ServerEmbed;
 var HtmlEmbed = forwardRef3(
   (props, ref) => {
-    const { code, executeScriptOnCanvas, clientOnly, ...rest } = props;
+    const { code, executeScriptOnCanvas, clientOnly, children, ...rest } = props;
     const { renderer } = useContext(ReactSdkContext);
     const isServer = useIsServer();
     const [ssrRendered] = useState(isServer);
@@ -317,33 +385,34 @@ var imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
 </svg>`)}`;
 var Image = forwardRef19(
   ({ loading = "lazy", ...props }, ref) => {
+    const src = String(props.src ?? "");
     const { imageLoader, renderer, assetBaseUrl } = useContext2(ReactSdkContext2);
     if (renderer === "canvas") {
       loading = "eager";
     }
-    if (props.src === void 0 || props.src.startsWith(assetBaseUrl) === false) {
+    if (src.startsWith(assetBaseUrl) === false) {
       return /* @__PURE__ */ jsx18(
         "img",
         {
           loading,
           ...props,
-          src: props.src || imagePlaceholderSvg,
+          src: src || imagePlaceholderSvg,
           ref
         },
-        props.src
+        src
       );
     }
-    const src = props.src.slice(assetBaseUrl.length);
+    const assetName = src.slice(assetBaseUrl.length);
     return /* @__PURE__ */ jsx18(
       WebstudioImage,
       {
         loading,
         ...props,
         loader: imageLoader,
-        src,
+        src: assetName,
         ref
       },
-      src
+      assetName
     );
   }
 );
@@ -396,10 +465,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 +851,382 @@ var VimeoSpinner = forwardRef32(
   }
 );
 VimeoSpinner.displayName = "VimeoSpinner";
+
+// src/xml-node.tsx
+import {
+  ReactSdkContext as ReactSdkContext4
+} from "@webstudio-is/react-sdk";
+import {
+  Children,
+  createElement as createElement4,
+  forwardRef as forwardRef33,
+  useContext as useContext7
+} from "react";
+import { jsx as jsx30, jsxs as jsxs2 } from "react/jsx-runtime";
+var XmlNode = forwardRef33(
+  ({ tag = "", children, ...props }, ref) => {
+    const { renderer } = useContext7(ReactSdkContext4);
+    const attributeEntries = Object.entries(props).filter(
+      ([key]) => key.startsWith("data-") === false && key.startsWith("aria-") === false
+    ).filter(([key]) => key !== "tabIndex").filter(([, value]) => typeof value !== "function");
+    if (renderer === void 0) {
+      const attrProps = Object.fromEntries(attributeEntries);
+      return createElement4(tag, attrProps, children);
+    }
+    const isTextChild = Children.toArray(children).every(
+      (child) => typeof child === "string"
+    );
+    const elementName = tag.replace(/^[^\p{L}_]+/u, "").replaceAll(/[^\p{L}\p{N}\-._]+/gu, "");
+    const attributes = attributeEntries.map(
+      ([key, value]) => `${key}=${JSON.stringify(value)}`
+    );
+    return /* @__PURE__ */ jsxs2("div", { style: { display: isTextChild ? "flex" : "contents" }, ...props, children: [
+      /* @__PURE__ */ jsxs2("div", { style: { color: "rgb(16, 23, 233)" }, children: [
+        "<",
+        [elementName, ...attributes].join(" "),
+        ">"
+      ] }),
+      /* @__PURE__ */ jsx30("div", { ref, style: { marginLeft: isTextChild ? 0 : "1rem" }, children }),
+      /* @__PURE__ */ jsxs2("div", { style: { color: "rgb(16, 23, 233)" }, children: [
+        "</",
+        elementName,
+        ">"
+      ] })
+    ] });
+  }
+);
+XmlNode.displayName = "XmlNode";
+
+// src/time.tsx
+import * as React from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var languages = [
+  "af",
+  "am",
+  "ar",
+  "az",
+  "be",
+  "bg",
+  "bn",
+  "bs",
+  "ca",
+  "cs",
+  "cy",
+  "da",
+  "de",
+  "el",
+  "en",
+  "es",
+  "et",
+  "eu",
+  "fa",
+  "fi",
+  "fr",
+  "ga",
+  "gl",
+  "gu",
+  "he",
+  "hi",
+  "hr",
+  "hu",
+  "hy",
+  "id",
+  "is",
+  "it",
+  "ja",
+  "ka",
+  "kk",
+  "km",
+  "kn",
+  "ko",
+  "ky",
+  "lb",
+  "lt",
+  "lv",
+  "mk",
+  "ml",
+  "mn",
+  "mr",
+  "ms",
+  "mt",
+  "nb",
+  "nl",
+  "nn",
+  "pl",
+  "pt",
+  "ro",
+  "ru",
+  "si",
+  "sk",
+  "sl",
+  "sq",
+  "sr",
+  "sv",
+  "sw",
+  "ta",
+  "te",
+  "th",
+  "tr",
+  "uk",
+  "ur",
+  "uz",
+  "vi",
+  "zh"
+];
+var countries = [
+  "AF",
+  "AL",
+  "DZ",
+  "AS",
+  "AD",
+  "AO",
+  "AI",
+  "AQ",
+  "AG",
+  "AR",
+  "AM",
+  "AW",
+  "AU",
+  "AT",
+  "AZ",
+  "BS",
+  "BH",
+  "BD",
+  "BB",
+  "BY",
+  "BE",
+  "BZ",
+  "BJ",
+  "BM",
+  "BT",
+  "BO",
+  "BA",
+  "BW",
+  "BR",
+  "BN",
+  "BG",
+  "BF",
+  "BI",
+  "CV",
+  "KH",
+  "CM",
+  "CA",
+  "KY",
+  "CF",
+  "TD",
+  "CL",
+  "CN",
+  "CO",
+  "KM",
+  "CG",
+  "CD",
+  "CR",
+  "HR",
+  "CU",
+  "CY",
+  "CZ",
+  "DK",
+  "DJ",
+  "DM",
+  "DO",
+  "EC",
+  "EG",
+  "SV",
+  "GQ",
+  "ER",
+  "EE",
+  "SZ",
+  "ET",
+  "FJ",
+  "FI",
+  "FR",
+  "GA",
+  "GM",
+  "GE",
+  "DE",
+  "GH",
+  "GR",
+  "GD",
+  "GT",
+  "GN",
+  "GW",
+  "GY",
+  "HT",
+  "HN",
+  "HU",
+  "IS",
+  "IN",
+  "ID",
+  "IR",
+  "IQ",
+  "IE",
+  "IL",
+  "IT",
+  "JM",
+  "JP",
+  "JO",
+  "KZ",
+  "KE",
+  "KI",
+  "KP",
+  "KR",
+  "KW",
+  "KG",
+  "LA",
+  "LV",
+  "LB",
+  "LS",
+  "LR",
+  "LY",
+  "LI",
+  "LT",
+  "LU",
+  "MG",
+  "MW",
+  "MY",
+  "MV",
+  "ML",
+  "MT",
+  "MH",
+  "MR",
+  "MU",
+  "MX",
+  "FM",
+  "MD",
+  "MC",
+  "MN",
+  "ME",
+  "MA",
+  "MZ",
+  "MM",
+  "NA",
+  "NR",
+  "NP",
+  "NL",
+  "NZ",
+  "NI",
+  "NE",
+  "NG",
+  "NO",
+  "OM",
+  "PK",
+  "PW",
+  "PA",
+  "PG",
+  "PY",
+  "PE",
+  "PH",
+  "PL",
+  "PT",
+  "QA",
+  "RO",
+  "RU",
+  "RW",
+  "KN",
+  "LC",
+  "VC",
+  "WS",
+  "SM",
+  "ST",
+  "SA",
+  "SN",
+  "RS",
+  "SC",
+  "SL",
+  "SG",
+  "SK",
+  "SI",
+  "SB",
+  "SO",
+  "ZA",
+  "SS",
+  "ES",
+  "LK",
+  "SD",
+  "SR",
+  "SE",
+  "CH",
+  "SY",
+  "TW",
+  "TJ",
+  "TZ",
+  "TH",
+  "TL",
+  "TG",
+  "TO",
+  "TT",
+  "TN",
+  "TR",
+  "TM",
+  "TV",
+  "UG",
+  "UA",
+  "AE",
+  "GB",
+  "US",
+  "UY",
+  "UZ",
+  "VU",
+  "VA",
+  "VE",
+  "VN",
+  "YE",
+  "ZM",
+  "ZW"
+];
+var INITIAL_DATE_STRING = "dateTime attribute is not set";
+var INVALID_DATE_STRING = "";
+var DEFAULT_LANGUAGE = "en";
+var DEFAULT_COUNTRY = "GB";
+var DEFAULT_DATE_STYLE = "medium";
+var DEFAULT_TIME_STYLE = "none";
+var languageOrDefault = (language) => {
+  return languages.includes(language) ? language : DEFAULT_LANGUAGE;
+};
+var countryOrDefault = (country) => {
+  return countries.includes(country) ? country : DEFAULT_COUNTRY;
+};
+var dateStyleOrUndefined = (value) => {
+  if (["full", "long", "medium", "short"].includes(value)) {
+    return value;
+  }
+  return void 0;
+};
+var timeStyleOrUndefined = (value) => {
+  if (["full", "long", "medium", "short"].includes(value)) {
+    return value;
+  }
+  return void 0;
+};
+var Time = React.forwardRef(
+  ({
+    language = DEFAULT_LANGUAGE,
+    country = DEFAULT_COUNTRY,
+    dateStyle = DEFAULT_DATE_STYLE,
+    timeStyle = DEFAULT_TIME_STYLE,
+    datetime = INITIAL_DATE_STRING,
+    ...props
+  }, ref) => {
+    const locale = `${languageOrDefault(language)}-${countryOrDefault(
+      country
+    )}`;
+    const options = {
+      dateStyle: dateStyleOrUndefined(dateStyle),
+      timeStyle: timeStyleOrUndefined(timeStyle)
+    };
+    const datetimeString = datetime === null ? INVALID_DATE_STRING : datetime.toString();
+    const date = new Date(datetimeString);
+    const isValidDate = false === Number.isNaN(date.getTime());
+    let formattedDate = datetimeString;
+    if (isValidDate) {
+      try {
+        formattedDate = new Intl.DateTimeFormat(locale, options).format(date);
+      } catch {
+      }
+    }
+    return /* @__PURE__ */ jsx31("time", { ref, dateTime: datetimeString, ...props, children: formattedDate });
+  }
+);
 export {
   Blockquote,
   Body,
@@ -800,8 +1256,10 @@ export {
   Superscript,
   Text,
   Textarea,
+  Time,
   Vimeo,
   VimeoPlayButton,
   VimeoPreviewImage,
-  VimeoSpinner
+  VimeoSpinner,
+  XmlNode
 };