@webstudio-is/react-sdk 0.65.0 → 0.67.0

package/lib/components/body.ws.js

@@ -1,4 +1,4 @@
-import { BodyIcon } from "@webstudio-is/icons";
+import { BodyIcon } from "@webstudio-is/icons/svg";
 import { body } from "../css/normalize";
 import {
   defaultStates
@@ -34,7 +34,7 @@ const presetStyle = {
 const meta = {
   type: "container",
   label: "Body",
-  Icon: BodyIcon,
+  icon: BodyIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/bold.ws.js

@@ -1,4 +1,4 @@
-import { BoldIcon } from "@webstudio-is/icons";
+import { BoldIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -10,7 +10,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Bold Text",
-  Icon: BoldIcon,
+  icon: BoldIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/box.ws.js

@@ -1,4 +1,4 @@
-import { BoxIcon } from "@webstudio-is/icons";
+import { BoxIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -31,7 +31,7 @@ const meta = {
   category: "general",
   type: "container",
   label: "Box",
-  Icon: BoxIcon,
+  icon: BoxIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/button.ws.js

@@ -1,4 +1,4 @@
-import { ButtonElementIcon } from "@webstudio-is/icons";
+import { ButtonElementIcon } from "@webstudio-is/icons/svg";
 import { button } from "../css/normalize";
 import {
   defaultStates
@@ -11,7 +11,7 @@ const meta = {
   category: "forms",
   type: "container",
   label: "Button",
-  Icon: ButtonElementIcon,
+  icon: ButtonElementIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/lib/components/checkbox-field.ws.js

@@ -1,4 +1,4 @@
-import { CheckboxCheckedIcon } from "@webstudio-is/icons";
+import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -14,7 +14,7 @@ const meta = {
   category: "forms",
   type: "container",
   label: "Checkbox",
-  Icon: CheckboxCheckedIcon,
+  icon: CheckboxCheckedIcon,
   states: defaultStates,
   presetStyle,
   children: [

package/lib/components/checkbox.ws.js

@@ -1,4 +1,4 @@
-import { CheckboxCheckedIcon } from "@webstudio-is/icons";
+import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -16,7 +16,7 @@ const presetStyle = {
 const meta = {
   type: "control",
   label: "Checkbox Input",
-  Icon: CheckboxCheckedIcon,
+  icon: CheckboxCheckedIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/lib/components/{code.js → code-text.js}

@@ -8,15 +8,15 @@ const displayVarNamespace = cssVars.unique("code-display");
 const blockStyle = {
   [cssVars.define(displayVarNamespace, true)]: "block"
 };
-const Code = forwardRef(
+const CodeText = forwardRef(
   ({ inline = false, ...props }, ref) => {
     const style = inline ? void 0 : blockStyle;
     return createElement(defaultTag, { ...props, style, ref });
   }
 );
-Code.displayName = "Code";
+CodeText.displayName = "CodeText";
 export {
-  Code,
+  CodeText,
   defaultTag,
   displayVarNamespace
 };

package/lib/components/{code.ws.js → code-text.ws.js}

@@ -1,9 +1,9 @@
-import { CodeIcon } from "@webstudio-is/icons";
+import { CodeTextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
-import { displayVarNamespace } from "./code";
-import { props } from "./__generated__/code.props";
+import { displayVarNamespace } from "./code-text";
+import { props } from "./__generated__/code-text.props";
 import { code } from "../css/normalize";
 const presetStyle = {
   code: [
@@ -33,8 +33,8 @@ const presetStyle = {
 const meta = {
   category: "general",
   type: "rich-text",
-  label: "Code",
-  Icon: CodeIcon,
+  label: "Code Text",
+  icon: CodeTextIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Code you can edit" }]

package/lib/components/component-meta.js

@@ -1,6 +1,6 @@
 import { z } from "zod";
 import { PropMeta } from "@webstudio-is/generate-arg-types";
-import { WsEmbedTemplate } from "../embed-template";
+import { EmbedTemplateStyleDecl, WsEmbedTemplate } from "../embed-template";
 const WsComponentPropsMeta = z.object({
   props: z.record(PropMeta),
   initialProps: z.array(z.string()).optional()
@@ -40,8 +40,8 @@ const WsComponentMeta = z.object({
   ]),
   acceptedParents: z.optional(z.array(z.string())),
   label: z.string(),
-  Icon: z.function(),
-  presetStyle: z.optional(z.any()),
+  icon: z.string(),
+  presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
   states: z.optional(z.array(ComponentState)),
   children: z.optional(WsEmbedTemplate)
 });

package/lib/components/components-utils.js

@@ -1,46 +1,5 @@
 import * as components from "./components";
 import { registeredComponents } from "./index";
-const componentNames = Object.keys({
-  Slot: 1,
-  Fragment: 1,
-  Box: 1,
-  Body: 1,
-  TextBlock: 1,
-  Heading: 1,
-  Paragraph: 1,
-  Link: 1,
-  LinkBlock: 1,
-  RichTextLink: 1,
-  Span: 1,
-  Bold: 1,
-  Italic: 1,
-  Superscript: 1,
-  Subscript: 1,
-  Button: 1,
-  Input: 1,
-  Form: 1,
-  Image: 1,
-  Blockquote: 1,
-  List: 1,
-  ListItem: 1,
-  Separator: 1,
-  Code: 1,
-  Label: 1,
-  SuccessMessage: 1,
-  ErrorMessage: 1,
-  Textarea: 1,
-  RadioButtonField: 1,
-  RadioButton: 1,
-  CheckboxField: 1,
-  Checkbox: 1
-});
-const getComponentNames = () => {
-  const uniqueNames = /* @__PURE__ */ new Set([
-    ...componentNames,
-    ...Object.keys(registeredComponents || {})
-  ]);
-  return Array.from(uniqueNames);
-};
 const getComponent = (name) => {
   return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : components[name];
 };
@@ -51,6 +10,5 @@ const createGetComponent = (comps) => {
 };
 export {
   createGetComponent,
-  getComponent,
-  getComponentNames
+  getComponent
 };

package/lib/components/components.js

@@ -1,5 +1,6 @@
 import { Slot } from "./slot";
 import { Fragment } from "./fragment";
+import { HtmlEmbed } from "./html-embed";
 import { Body } from "./body";
 import { Box } from "./box";
 import { TextBlock } from "./text-block";
@@ -21,7 +22,7 @@ import { Blockquote } from "./blockquote";
 import { List } from "./list";
 import { ListItem } from "./list-item";
 import { Separator } from "./separator";
-import { Code } from "./code";
+import { CodeText } from "./code-text";
 import { Label } from "./label";
 import { SuccessMessage } from "./success-message";
 import { ErrorMessage } from "./error-message";
@@ -38,11 +39,12 @@ export {
   Button,
   Checkbox,
   CheckboxField,
-  Code,
+  CodeText,
   ErrorMessage,
   Form,
   Fragment,
   Heading,
+  HtmlEmbed,
   Image,
   Input,
   Italic,

package/lib/components/error-message.ws.js

@@ -1,4 +1,4 @@
-import { BoxIcon } from "@webstudio-is/icons";
+import { BoxIcon } from "@webstudio-is/icons/svg";
 import { props } from "./__generated__/error-message.props";
 import { div } from "../css/normalize";
 const presetStyle = {
@@ -7,7 +7,7 @@ const presetStyle = {
 const meta = {
   type: "container",
   label: "Error Message",
-  Icon: BoxIcon,
+  icon: BoxIcon,
   presetStyle
 };
 const propsMeta = {

package/lib/components/form.ws.js

@@ -1,4 +1,4 @@
-import { FormIcon } from "@webstudio-is/icons";
+import { FormIcon } from "@webstudio-is/icons/svg";
 import { form } from "../css/normalize";
 import {
   defaultStates
@@ -14,7 +14,7 @@ const meta = {
   category: "forms",
   type: "container",
   label: "Form",
-  Icon: FormIcon,
+  icon: FormIcon,
   states: defaultStates,
   presetStyle,
   children: [

package/lib/components/fragment.ws.js

@@ -1,7 +1,7 @@
 const meta = {
   type: "container",
   label: "Fragment",
-  Icon: () => null
+  icon: ""
 };
 const propsMeta = {
   props: {}

package/lib/components/heading.ws.js

@@ -1,4 +1,4 @@
-import { HeadingIcon } from "@webstudio-is/icons";
+import { HeadingIcon } from "@webstudio-is/icons/svg";
 import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
 import {
   defaultStates
@@ -16,7 +16,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
-  Icon: HeadingIcon,
+  icon: HeadingIcon,
   children: [{ type: "text", value: "Heading you can edit" }],
   states: defaultStates,
   presetStyle

package/lib/components/html-embed.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef
+} from "react";
+import { mergeRefs } from "@react-aria/utils";
+import { ReactSdkContext } from "../context";
+const ExecutableHtml = (props) => {
+  const { code, innerRef, ...rest } = props;
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container === null || code === void 0) {
+      return;
+    }
+    const range = document.createRange();
+    range.setStart(container, 0);
+    const fragment = range.createContextualFragment(code);
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+    container.append(fragment);
+  }, [code]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: mergeRefs(innerRef, containerRef),
+      style: { display: "contents" }
+    }
+  );
+};
+const InnerHtml = (props) => {
+  const { code, innerRef, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: innerRef,
+      style: { display: "contents" },
+      dangerouslySetInnerHTML: { __html: props.code ?? "" }
+    }
+  );
+};
+const Placeholder = (props) => {
+  const { code, innerRef, ...rest } = props;
+  return /* @__PURE__ */ jsx("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Open "Properties" panel to insert HTML code' });
+};
+const HtmlEmbed = forwardRef((props, ref) => {
+  const { renderer } = useContext(ReactSdkContext);
+  const { code, executeScriptOnCanvas, ...rest } = props;
+  if (code === void 0 || code.trim().length === 0) {
+    return /* @__PURE__ */ jsx(Placeholder, { innerRef: ref, ...rest });
+  }
+  if (renderer === "canvas" && executeScriptOnCanvas === true) {
+    return /* @__PURE__ */ jsx(ExecutableHtml, { innerRef: ref, code, ...rest });
+  }
+  return /* @__PURE__ */ jsx(InnerHtml, { innerRef: ref, code, ...rest });
+});
+HtmlEmbed.displayName = "HtmlEmbed";
+export {
+  HtmlEmbed
+};

package/lib/components/html-embed.ws.js

@@ -0,0 +1,23 @@
+import { EmbedIcon } from "@webstudio-is/icons/svg";
+import { props } from "./__generated__/html-embed.props";
+const meta = {
+  category: "general",
+  type: "embed",
+  label: "HTML Embed",
+  icon: EmbedIcon
+};
+const propsMeta = {
+  props: {
+    ...props,
+    code: {
+      required: true,
+      control: "code",
+      type: "string",
+      rows: 10
+    }
+  }
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/image.ws.js

@@ -1,4 +1,4 @@
-import { ImageIcon } from "@webstudio-is/icons";
+import { ImageIcon } from "@webstudio-is/icons/svg";
 import { img } from "../css/normalize";
 import {
   defaultStates
@@ -24,7 +24,7 @@ const meta = {
   category: "media",
   type: "embed",
   label: "Image",
-  Icon: ImageIcon,
+  icon: ImageIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/index.js

@@ -1,6 +1,6 @@
-import { PropMeta } from "@webstudio-is/generate-arg-types";
 import { meta as SlotMeta } from "./slot.ws";
 import { meta as FragmentMeta } from "./fragment.ws";
+import { meta as HtmlEmbedMeta } from "./html-embed.ws";
 import { meta as BodyMeta } from "./body.ws";
 import { meta as BoxMeta } from "./box.ws";
 import { meta as TextBlockMeta } from "./text-block.ws";
@@ -22,7 +22,7 @@ import { meta as BlockquoteMeta } from "./blockquote.ws";
 import { meta as ListMeta } from "./list.ws";
 import { meta as ListItemMeta } from "./list-item.ws";
 import { meta as SeparatorMeta } from "./separator.ws";
-import { meta as CodeMeta } from "./code.ws";
+import { meta as CodeTextMeta } from "./code-text.ws";
 import { meta as LabelMeta } from "./label.ws";
 import { meta as SuccessMessageMeta } from "./success-message.ws";
 import { meta as ErrorMessageMeta } from "./error-message.ws";
@@ -33,6 +33,7 @@ import { meta as CheckboxFieldMeta } from "./checkbox-field.ws";
 import { meta as CheckboxMeta } from "./checkbox.ws";
 import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
 import { propsMeta as FragmentMetaPropsMeta } from "./fragment.ws";
+import { propsMeta as HtmlEmbedMetaPropsMeta } from "./html-embed.ws";
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
 import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
 import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
@@ -54,7 +55,7 @@ import { propsMeta as BlockquotePropsMeta } from "./blockquote.ws";
 import { propsMeta as ListPropsMeta } from "./list.ws";
 import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
 import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
-import { propsMeta as CodePropsMeta } from "./code.ws";
+import { propsMeta as CodeTextPropsMeta } from "./code-text.ws";
 import { propsMeta as LabelPropsMeta } from "./label.ws";
 import { propsMeta as SuccessMessagePropsMeta } from "./success-message.ws";
 import { propsMeta as ErrorMessagePropsMeta } from "./error-message.ws";
@@ -66,6 +67,7 @@ import { propsMeta as CheckboxPropsMeta } from "./checkbox.ws";
 const defaultMetas = {
   Slot: SlotMeta,
   Fragment: FragmentMeta,
+  HtmlEmbed: HtmlEmbedMeta,
   Box: BoxMeta,
   Body: BodyMeta,
   TextBlock: TextBlockMeta,
@@ -87,7 +89,7 @@ const defaultMetas = {
   List: ListMeta,
   ListItem: ListItemMeta,
   Separator: SeparatorMeta,
-  Code: CodeMeta,
+  CodeText: CodeTextMeta,
   Label: LabelMeta,
   SuccessMessage: SuccessMessageMeta,
   ErrorMessage: ErrorMessageMeta,
@@ -108,9 +110,10 @@ const registerComponentMetas = (overrides) => {
   }
   currentMetas = result;
 };
-const defaultPropsMetasRaw = {
+const defaultPropsMetas = {
   Slot: SlotMetaPropsMeta,
   Fragment: FragmentMetaPropsMeta,
+  HtmlEmbed: HtmlEmbedMetaPropsMeta,
   Box: BoxMetaPropsMeta,
   Body: BodyMetaPropsMeta,
   TextBlock: TextBlockMetaPropsMeta,
@@ -132,7 +135,7 @@ const defaultPropsMetasRaw = {
   List: ListPropsMeta,
   ListItem: ListItemPropsMeta,
   Separator: SeparatorPropsMeta,
-  Code: CodePropsMeta,
+  CodeText: CodeTextPropsMeta,
   Label: LabelPropsMeta,
   SuccessMessage: SuccessMessagePropsMeta,
   ErrorMessage: ErrorMessagePropsMeta,
@@ -142,59 +145,10 @@ const defaultPropsMetasRaw = {
   CheckboxField: CheckboxFieldPropsMeta,
   Checkbox: CheckboxPropsMeta
 };
-const defaultPropsMetas = defaultPropsMetasRaw;
-let registeredPropsMetas = {};
-let currentPropsMetas = void 0;
-const getComponentPropsMeta = (name) => {
-  if (currentPropsMetas === void 0) {
-    currentPropsMetas = {};
-    for (const name2 of Object.keys(defaultPropsMetas)) {
-      const props = computeProps(
-        defaultPropsMetas[name2],
-        registeredPropsMetas[name2] ?? {}
-      );
-      const initialProps = computeInitialProps(
-        props,
-        defaultPropsMetas[name2],
-        registeredPropsMetas[name2] ?? {}
-      );
-      currentPropsMetas[name2] = { props, initialProps };
-    }
-  }
-  return currentPropsMetas[name];
-};
-const registerComponentPropsMetas = (metas) => {
-  registeredPropsMetas = metas;
-  currentPropsMetas = void 0;
-};
 let registeredComponents;
 const registerComponents = (components) => {
   registeredComponents = components;
 };
-const computeProps = (defaults, overrides) => {
-  if (overrides) {
-    const allNames = (/* @__PURE__ */ new Set([
-      ...Object.keys(defaults.props ?? {}),
-      ...Object.keys(overrides?.props ?? {})
-    ])).values();
-    const result = {};
-    for (const name of allNames) {
-      result[name] = PropMeta.parse({
-        ...defaults.props[name],
-        ...overrides?.props?.[name]
-      });
-    }
-    return result;
-  }
-  return defaults.props;
-};
-const computeInitialProps = (props, defaults, overrides) => {
-  const initialProps = overrides?.initialProps ?? defaults?.initialProps ?? [];
-  const requiredProps = props ? Object.entries(props).filter(
-    ([name, value]) => value?.required && initialProps.includes(name) === false
-  ).map(([name]) => name) : [];
-  return [...initialProps, ...requiredProps];
-};
 const canAcceptComponent = (parentComponent, childComponent) => {
   const parentMeta = getComponentMeta(parentComponent);
   const childMeta = getComponentMeta(childComponent);
@@ -205,10 +159,10 @@ const canAcceptComponent = (parentComponent, childComponent) => {
 };
 export {
   canAcceptComponent,
+  defaultMetas,
+  defaultPropsMetas,
   getComponentMeta,
-  getComponentPropsMeta,
   registerComponentMetas,
-  registerComponentPropsMetas,
   registerComponents,
   registeredComponents
 };

package/lib/components/input.ws.js

@@ -1,4 +1,4 @@
-import { FormTextFieldIcon } from "@webstudio-is/icons";
+import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
 import { input } from "../css/normalize";
 import {
   defaultStates
@@ -11,7 +11,7 @@ const meta = {
   category: "forms",
   type: "control",
   label: "Text Input",
-  Icon: FormTextFieldIcon,
+  icon: FormTextFieldIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/lib/components/italic.ws.js

@@ -1,4 +1,4 @@
-import { TextItalicIcon } from "@webstudio-is/icons";
+import { TextItalicIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -16,7 +16,7 @@ const presetStyle = {
 const meta = {
   type: "rich-text-child",
   label: "Italic Text",
-  Icon: TextItalicIcon,
+  icon: TextItalicIcon,
   states: defaultStates,
   presetStyle
 };

package/lib/components/label.ws.js

@@ -1,4 +1,4 @@
-import { TextBlockIcon } from "@webstudio-is/icons";
+import { TextBlockIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -14,7 +14,7 @@ const meta = {
   category: "forms",
   type: "rich-text",
   label: "Input Label",
-  Icon: TextBlockIcon,
+  icon: TextBlockIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Form Label" }]

package/lib/components/link-block.ws.js

@@ -1,4 +1,4 @@
-import { LinkBlockIcon } from "@webstudio-is/icons";
+import { LinkBlockIcon } from "@webstudio-is/icons/svg";
 import { props } from "./__generated__/link-block.props";
 import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 import { a } from "../css/normalize";
@@ -15,7 +15,7 @@ const meta = {
   category: "general",
   type: "container",
   label: "Link Block",
-  Icon: LinkBlockIcon,
+  icon: LinkBlockIcon,
   states: linkMeta.states,
   presetStyle
 };

package/lib/components/link.ws.js

@@ -1,4 +1,4 @@
-import { LinkIcon } from "@webstudio-is/icons";
+import { LinkIcon } from "@webstudio-is/icons/svg";
 import { a } from "../css/normalize";
 import {
   defaultStates
@@ -21,7 +21,7 @@ const meta = {
   category: "general",
   type: "rich-text",
   label: "Link Text",
-  Icon: LinkIcon,
+  icon: LinkIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/lib/components/list-item.ws.js

@@ -1,4 +1,4 @@
-import { ListItemIcon } from "@webstudio-is/icons";
+import { ListItemIcon } from "@webstudio-is/icons/svg";
 import { li } from "../css/normalize";
 import {
   defaultStates
@@ -12,7 +12,7 @@ const meta = {
   type: "rich-text",
   acceptedParents: ["List"],
   label: "List Item",
-  Icon: ListItemIcon,
+  icon: ListItemIcon,
   children: [{ type: "text", value: "List Item you can edit" }],
   states: defaultStates,
   presetStyle

package/lib/components/list.ws.js

@@ -1,4 +1,4 @@
-import { ListIcon } from "@webstudio-is/icons";
+import { ListIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "./component-meta";
@@ -40,7 +40,7 @@ const meta = {
   category: "typography",
   type: "container",
   label: "List",
-  Icon: ListIcon,
+  icon: ListIcon,
   states: defaultStates,
   presetStyle,
   children: []

package/lib/components/paragraph.ws.js

@@ -1,4 +1,4 @@
-import { TextAlignLeftIcon } from "@webstudio-is/icons";
+import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
 import { p } from "../css/normalize";
 import {
   defaultStates
@@ -11,7 +11,7 @@ const meta = {
   category: "typography",
   type: "rich-text",
   label: "Paragraph",
-  Icon: TextAlignLeftIcon,
+  icon: TextAlignLeftIcon,
   children: [{ type: "text", value: "Pragraph you can edit" }],
   states: defaultStates,
   presetStyle