@makeswift/runtime 0.0.0-1faafb3 → 0.0.0-20221019211549

package/dist/Embed.cjs.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var React = require("react");
+var styled = require("styled-components");
+var cssMediaRules = require("./cssMediaRules.cjs.js");
+var index = require("./index.cjs.js");
+var jsxRuntime = require("react/jsx-runtime");
+require("use-sync-external-store/shim/with-selector");
+require("./react-page.cjs.js");
+require("redux");
+require("redux-thunk");
+require("./actions.cjs.js");
+require("./image.cjs.js");
+require("./color.cjs.js");
+require("./slot.cjs.js");
+require("next/dynamic");
+require("@apollo/client");
+require("@apollo/client/link/batch-http");
+require("slate");
+require("./graphql.cjs.js");
+require("./shape.cjs.js");
+require("./text-input.cjs.js");
+require("@emotion/css");
+require("color");
+require("scroll-into-view-if-needed");
+require("./box-models.cjs.js");
+require("css-box-model");
+require("react-dom");
+require("html-react-parser");
+require("next/head");
+require("@emotion/server/create-instance");
+require("next/document");
+require("cookie");
+require("cors");
+require("http-proxy");
+require("set-cookie-parser");
+require("uuid/v4");
+require("corporate-ipsum");
+function _interopDefaultLegacy(e) {
+  return e && typeof e === "object" && "default" in e ? e : { "default": e };
+}
+var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
+const Container = styled__default["default"].div.withConfig({
+  shouldForwardProp: (prop) => !["width", "margin"].includes(prop)
+})`
+  min-height: 15px;
+  ${cssMediaRules.cssWidth()}
+  ${cssMediaRules.cssMargin()}
+`;
+const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;">
+<svg width="316" height="168" viewBox="0 0 316 168" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="78" width="30" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="116" width="78" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect y="20" width="120" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="128" y="20" width="30" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="166" y="20" width="78" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect y="60" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="20" y="80" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="40" y="100" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="88" y="100" width="110" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="206" y="100" width="24" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="238" y="100" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="40" y="120" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="88" y="120" width="50" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="146" y="120" width="24" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="178" y="120" width="90" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="276" y="120" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="20" y="140" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect y="160" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+</svg>
+</div>`;
+const SCRIPT_TAG = "script";
+const Embed = React.forwardRef(function Embed2({
+  id,
+  width,
+  margin,
+  html = defaultHtml
+}, ref) {
+  const [container, setContainer] = React.useState(null);
+  const [shouldRender, setShouldRender] = React.useState(false);
+  index.useIsomorphicLayoutEffect(() => {
+    setShouldRender(true);
+  }, []);
+  React.useImperativeHandle(ref, () => container, [container]);
+  React.useEffect(() => {
+    if (!container)
+      return;
+    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+      acceptNode(node) {
+        return node.tagName.toLowerCase() === SCRIPT_TAG ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+      }
+    });
+    const nodes = [];
+    while (walker.nextNode())
+      nodes.push(walker.currentNode);
+    async function executeScriptsInOrder() {
+      for (let i = 0; i < nodes.length; i++) {
+        await new Promise((resolve) => {
+          var _a, _b;
+          const node = nodes[i];
+          const script = node.ownerDocument.createElement(SCRIPT_TAG);
+          script.textContent = node.textContent;
+          Array.from(node.attributes).forEach(({
+            name,
+            value
+          }) => {
+            script.setAttribute(name, value);
+          });
+          script.onload = () => resolve();
+          script.onerror = () => resolve();
+          (_a = node.parentNode) == null ? void 0 : _a.insertBefore(script, node);
+          (_b = node.parentNode) == null ? void 0 : _b.removeChild(node);
+          if (!script.hasAttribute("src"))
+            resolve();
+        });
+      }
+    }
+    executeScriptsInOrder().catch((error) => {
+      console.error(error);
+    });
+  }, [container, html]);
+  if (shouldRender === false)
+    return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, {
+    ref: setContainer,
+    id,
+    width,
+    margin,
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  });
+});
+exports["default"] = Embed;
+//# sourceMappingURL=Embed.cjs.js.map

package/dist/Embed.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Embed.cjs.js","sources":["../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\nimport styled from 'styled-components'\n\nimport { cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ElementIDValue,\n  MarginValue,\n  TextAreaValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\n\ntype Props = {\n  id?: ElementIDValue\n  html?: TextAreaValue\n  width?: WidthValue\n  margin?: MarginValue\n}\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  min-height: 15px;\n  ${cssWidth()}\n  ${cssMargin()}\n`\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle(ref, () => container, [container])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  if (shouldRender === false) return null\n\n  return (\n    <Container\n      ref={setContainer}\n      id={id}\n      width={width}\n      margin={margin}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","defaultHtml","SCRIPT_TAG","Embed","forwardRef","id","width","margin","html","ref","container","setContainer","useState","shouldRender","setShouldRender","useIsomorphicLayoutEffect","useImperativeHandle","useEffect","walker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","node","tagName","toLowerCase","FILTER_ACCEPT","FILTER_REJECT","nodes","nextNode","push","currentNode","i","length","Promise","resolve","script","createElement","textContent","Array","from","attributes","forEach","name","value","setAttribute","onload","onerror","parentNode","insertBefore","removeChild","hasAttribute","catch","error","console","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,YAAYC,gBAAAA,WAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADU,CAAtB;AAAA;AAAA,IAIdE,cAAW,SAAA;AAAA,IACXC,cAAY,UAAA;AAAA;AAGhB,MAAMC,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBrB,MAAMC,aAAa;AAEbC,MAAAA,QAAQC,MAAAA,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAQC,OAAOP;AAAAA,GAC5BQ,KACA;AACA,QAAM,CAACC,WAAWC,gBAAgBC,MAAAA,SAAgC,IAAxB;AACpC,QAAA,CAACC,cAAcC,mBAAmBF,MAAAA,SAAS,KAAD;AAEhDG,QAAAA,0BAA0B,MAAM;AAC9BD,oBAAgB,IAAD;AAAA,EADQ,GAEtB,CAFsB,CAAA;AAIzBE,QAAAA,oBAAoBP,KAAK,MAAMC,WAAW,CAACA,SAAD,CAAvB;AAEnBO,QAAAA,UAAU,MAAM;AAGV,QAAA,CAACP;AAAW;AAEhB,UAAMQ,SAASR,UAAUS,cAAcC,iBAAiBV,WAAWW,WAAWC,cAAc;AAAA,MAC1FC,WAAWC,MAAe;AACxB,eAAOA,KAAKC,QAAQC,kBAAkBxB,aAClCmB,WAAWM,gBACXN,WAAWO;AAAAA,MAChB;AAAA,IAAA,CALY;AAQf,UAAMC,QAAmB,CAAA;AAEzB,WAAOX,OAAOY,SAAP;AAAyBC,YAAAA,KAAKb,OAAOc;AAOL,2CAAA;AACrC,eAASC,IAAI,GAAGA,IAAIJ,MAAMK,QAAQD,KAAK;AAC/B,cAAA,IAAIE,QAAcC,CAAW,YAAA;;AACjC,gBAAMZ,OAAOK,MAAMI;AACbI,gBAAAA,SAASb,KAAKL,cAAcmB,cAAcpC,UAAjC;AAEfmC,iBAAOE,cAAcf,KAAKe;AAC1BC,gBAAMC,KAAKjB,KAAKkB,UAAhB,EAA4BC,QAAQ,CAAC;AAAA,YAAEC;AAAAA,YAAMC;AAAAA,gBAAY;AAChDC,mBAAAA,aAAaF,MAAMC,KAA1B;AAAA,UAAA,CADF;AAIOE,iBAAAA,SAAS,MAAMX;AACfY,iBAAAA,UAAU,MAAMZ;AAElBa,qBAAAA,eAAAA,mBAAYC,aAAab,QAAQb;AACjCyB,qBAAAA,eAAAA,mBAAYE,YAAY3B;AAEzB,cAAA,CAACa,OAAOe,aAAa,KAApB;AAAmC;QAAA,CAfpC;AAAA,MAiBP;AAAA,IACF;AAEoB,0BAAA,EAAGC,MAAMC,CAAS,UAAA;AAErCC,cAAQD,MAAMA,KAAd;AAAA,IAAA,CAFF;AAAA,EAAA,GAIC,CAAC5C,WAAWF,IAAZ,CAhDM;AAkDT,MAAIK,iBAAiB;AAAc,WAAA;AAEnC,wCACG,WAAD;AAAA,IACE,KAAKF;AAAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,MAAE6C,QAAQhD;AAAAA,IAAV;AAAA,EAAA,CAN7B;AASD,CA1EuB;;"}

package/dist/Embed.es.js

@@ -0,0 +1,130 @@
+import { forwardRef, useState, useImperativeHandle, useEffect } from "react";
+import styled from "styled-components";
+import { a as cssWidth, b as cssMargin } from "./cssMediaRules.es.js";
+import { q as useIsomorphicLayoutEffect } from "./index.es.js";
+import { jsx } from "react/jsx-runtime";
+import "use-sync-external-store/shim/with-selector";
+import "./react-page.es.js";
+import "redux";
+import "redux-thunk";
+import "./actions.es.js";
+import "./image.es.js";
+import "./color.es.js";
+import "./slot.es.js";
+import "next/dynamic";
+import "@apollo/client";
+import "@apollo/client/link/batch-http";
+import "slate";
+import "./graphql.es.js";
+import "./shape.es.js";
+import "./text-input.es.js";
+import "@emotion/css";
+import "color";
+import "scroll-into-view-if-needed";
+import "./box-models.es.js";
+import "css-box-model";
+import "react-dom";
+import "html-react-parser";
+import "next/head";
+import "@emotion/server/create-instance";
+import "next/document";
+import "cookie";
+import "cors";
+import "http-proxy";
+import "set-cookie-parser";
+import "uuid/v4";
+import "corporate-ipsum";
+const Container = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["width", "margin"].includes(prop)
+})`
+  min-height: 15px;
+  ${cssWidth()}
+  ${cssMargin()}
+`;
+const defaultHtml = `<div style="padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;">
+<svg width="316" height="168" viewBox="0 0 316 168" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="70" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="78" width="30" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="116" width="78" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect y="20" width="120" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="128" y="20" width="30" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="166" y="20" width="78" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect y="60" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="20" y="80" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="40" y="100" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="88" y="100" width="110" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="206" y="100" width="24" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="238" y="100" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="40" y="120" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="88" y="120" width="50" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="146" y="120" width="24" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="178" y="120" width="90" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.25"/>
+<rect x="276" y="120" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect x="20" y="140" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+<rect y="160" width="40" height="8" rx="2" fill="#A1A8C2" fill-opacity="0.5"/>
+</svg>
+</div>`;
+const SCRIPT_TAG = "script";
+const Embed = forwardRef(function Embed2({
+  id,
+  width,
+  margin,
+  html = defaultHtml
+}, ref) {
+  const [container, setContainer] = useState(null);
+  const [shouldRender, setShouldRender] = useState(false);
+  useIsomorphicLayoutEffect(() => {
+    setShouldRender(true);
+  }, []);
+  useImperativeHandle(ref, () => container, [container]);
+  useEffect(() => {
+    if (!container)
+      return;
+    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+      acceptNode(node) {
+        return node.tagName.toLowerCase() === SCRIPT_TAG ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+      }
+    });
+    const nodes = [];
+    while (walker.nextNode())
+      nodes.push(walker.currentNode);
+    async function executeScriptsInOrder() {
+      for (let i = 0; i < nodes.length; i++) {
+        await new Promise((resolve) => {
+          var _a, _b;
+          const node = nodes[i];
+          const script = node.ownerDocument.createElement(SCRIPT_TAG);
+          script.textContent = node.textContent;
+          Array.from(node.attributes).forEach(({
+            name,
+            value
+          }) => {
+            script.setAttribute(name, value);
+          });
+          script.onload = () => resolve();
+          script.onerror = () => resolve();
+          (_a = node.parentNode) == null ? void 0 : _a.insertBefore(script, node);
+          (_b = node.parentNode) == null ? void 0 : _b.removeChild(node);
+          if (!script.hasAttribute("src"))
+            resolve();
+        });
+      }
+    }
+    executeScriptsInOrder().catch((error) => {
+      console.error(error);
+    });
+  }, [container, html]);
+  if (shouldRender === false)
+    return null;
+  return /* @__PURE__ */ jsx(Container, {
+    ref: setContainer,
+    id,
+    width,
+    margin,
+    dangerouslySetInnerHTML: {
+      __html: html
+    }
+  });
+});
+export { Embed as default };
+//# sourceMappingURL=Embed.es.js.map

package/dist/Embed.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Embed.es.js","sources":["../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\nimport styled from 'styled-components'\n\nimport { cssMargin, cssWidth } from '../../utils/cssMediaRules'\nimport {\n  ElementIDValue,\n  MarginValue,\n  TextAreaValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\n\ntype Props = {\n  id?: ElementIDValue\n  html?: TextAreaValue\n  width?: WidthValue\n  margin?: MarginValue\n}\n\nconst Container = styled.div.withConfig({\n  shouldForwardProp: prop => !['width', 'margin'].includes(prop),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n  min-height: 15px;\n  ${cssWidth()}\n  ${cssMargin()}\n`\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle(ref, () => container, [container])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  if (shouldRender === false) return null\n\n  return (\n    <Container\n      ref={setContainer}\n      id={id}\n      width={width}\n      margin={margin}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"names":["Container","styled","div","withConfig","shouldForwardProp","prop","includes","cssWidth","cssMargin","defaultHtml","SCRIPT_TAG","Embed","forwardRef","id","width","margin","html","ref","container","setContainer","useState","shouldRender","setShouldRender","useIsomorphicLayoutEffect","useImperativeHandle","useEffect","walker","ownerDocument","createTreeWalker","NodeFilter","SHOW_ELEMENT","acceptNode","node","tagName","toLowerCase","FILTER_ACCEPT","FILTER_REJECT","nodes","nextNode","push","currentNode","i","length","Promise","resolve","script","createElement","textContent","Array","from","attributes","forEach","name","value","setAttribute","onload","onerror","parentNode","insertBefore","removeChild","hasAttribute","catch","error","console","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,YAAYC,OAAOC,IAAIC,WAAW;AAAA,EACtCC,mBAAmBC,UAAQ,CAAC,CAAC,SAAS,QAAV,EAAoBC,SAASD,IAA7B;AADU,CAAtB;AAAA;AAAA,IAIdE,SAAW;AAAA,IACXC,UAAY;AAAA;AAGhB,MAAMC,cAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBrB,MAAMC,aAAa;AAEbC,MAAAA,QAAQC,WAAW,gBACvB;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAOC;AAAAA,EAAQC,OAAOP;AAAAA,GAC5BQ,KACA;AACA,QAAM,CAACC,WAAWC,gBAAgBC,SAAgC,IAAxB;AACpC,QAAA,CAACC,cAAcC,mBAAmBF,SAAS,KAAD;AAEhDG,4BAA0B,MAAM;AAC9BD,oBAAgB,IAAD;AAAA,EADQ,GAEtB,CAFsB,CAAA;AAIzBE,sBAAoBP,KAAK,MAAMC,WAAW,CAACA,SAAD,CAAvB;AAEnBO,YAAU,MAAM;AAGV,QAAA,CAACP;AAAW;AAEhB,UAAMQ,SAASR,UAAUS,cAAcC,iBAAiBV,WAAWW,WAAWC,cAAc;AAAA,MAC1FC,WAAWC,MAAe;AACxB,eAAOA,KAAKC,QAAQC,kBAAkBxB,aAClCmB,WAAWM,gBACXN,WAAWO;AAAAA,MAChB;AAAA,IAAA,CALY;AAQf,UAAMC,QAAmB,CAAA;AAEzB,WAAOX,OAAOY,SAAP;AAAyBC,YAAAA,KAAKb,OAAOc;AAOL,2CAAA;AACrC,eAASC,IAAI,GAAGA,IAAIJ,MAAMK,QAAQD,KAAK;AAC/B,cAAA,IAAIE,QAAcC,CAAW,YAAA;;AACjC,gBAAMZ,OAAOK,MAAMI;AACbI,gBAAAA,SAASb,KAAKL,cAAcmB,cAAcpC,UAAjC;AAEfmC,iBAAOE,cAAcf,KAAKe;AAC1BC,gBAAMC,KAAKjB,KAAKkB,UAAhB,EAA4BC,QAAQ,CAAC;AAAA,YAAEC;AAAAA,YAAMC;AAAAA,gBAAY;AAChDC,mBAAAA,aAAaF,MAAMC,KAA1B;AAAA,UAAA,CADF;AAIOE,iBAAAA,SAAS,MAAMX;AACfY,iBAAAA,UAAU,MAAMZ;AAElBa,qBAAAA,eAAAA,mBAAYC,aAAab,QAAQb;AACjCyB,qBAAAA,eAAAA,mBAAYE,YAAY3B;AAEzB,cAAA,CAACa,OAAOe,aAAa,KAApB;AAAmC;QAAA,CAfpC;AAAA,MAiBP;AAAA,IACF;AAEoB,0BAAA,EAAGC,MAAMC,CAAS,UAAA;AAErCC,cAAQD,MAAMA,KAAd;AAAA,IAAA,CAFF;AAAA,EAAA,GAIC,CAAC5C,WAAWF,IAAZ,CAhDM;AAkDT,MAAIK,iBAAiB;AAAc,WAAA;AAEnC,6BACG,WAAD;AAAA,IACE,KAAKF;AAAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,MAAE6C,QAAQhD;AAAAA,IAAV;AAAA,EAAA,CAN7B;AASD,CA1EuB;;"}