@webstudio-is/react-sdk 0.193.0 → 0.195.0

package/lib/index.js

@@ -164,7 +164,10 @@ var descendantMeta = {
   type: "control",
   label: "Descendant",
   icon: PaintBrushIcon,
-  detachable: false
+  constraints: {
+    relation: "parent",
+    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
+  }
 };
 var descendantPropsMeta = {
   props: {
@@ -194,29 +197,38 @@ var descendantPropsMeta = {
   },
   initialProps: ["selector"]
 };
+var blockComponent = "ws:block";
 var blockTemplateComponent = "ws:block-template";
 var blockTemplateMeta = {
   category: "hidden",
-  detachable: false,
   type: "container",
   icon: AddTemplateInstanceIcon,
-  stylable: false
+  stylable: false,
+  constraints: {
+    relation: "parent",
+    component: { $eq: blockComponent }
+  }
 };
 var blockTemplatePropsMeta = {
   props: {},
   initialProps: []
 };
-var blockComponent = "ws:block";
 var blockMeta = {
   category: "data",
   order: 2,
   type: "container",
   label: "Content Block",
   icon: EditIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $nin: [collectionComponent, blockComponent] }
-  },
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $nin: [collectionComponent, blockComponent] }
+    },
+    {
+      relation: "child",
+      component: { $eq: blockTemplateComponent }
+    }
+  ],
   stylable: false,
   template: [
     {
@@ -225,59 +237,204 @@ var blockMeta = {
       props: [],
       children: [
         {
+          component: blockTemplateComponent,
           type: "instance",
           label: "Templates",
-          component: blockTemplateComponent,
           children: [
             {
-              type: "instance",
               component: "Paragraph",
-              children: [
+              type: "instance",
+              children: []
+            },
+            {
+              component: "Heading",
+              type: "instance",
+              label: "Heading 1",
+              props: [
                 {
-                  type: "text",
-                  value: "Paragraph text you can edit",
-                  placeholder: true
+                  name: "tag",
+                  type: "string",
+                  value: "h1"
                 }
-              ]
+              ],
+              children: []
             },
             {
+              component: "Heading",
               type: "instance",
+              label: "Heading 2",
+              props: [
+                {
+                  name: "tag",
+                  type: "string",
+                  value: "h2"
+                }
+              ],
+              children: []
+            },
+            {
+              component: "Heading",
+              type: "instance",
+              label: "Heading 3",
+              props: [
+                {
+                  name: "tag",
+                  type: "string",
+                  value: "h3"
+                }
+              ],
+              children: []
+            },
+            {
+              component: "Heading",
+              type: "instance",
+              label: "Heading 4",
+              props: [
+                {
+                  name: "tag",
+                  type: "string",
+                  value: "h4"
+                }
+              ],
+              children: []
+            },
+            {
+              component: "Heading",
+              type: "instance",
+              label: "Heading 5",
+              props: [
+                {
+                  name: "tag",
+                  type: "string",
+                  value: "h5"
+                }
+              ],
+              children: []
+            },
+            {
+              component: "Heading",
+              type: "instance",
+              label: "Heading 6",
+              props: [
+                {
+                  name: "tag",
+                  type: "string",
+                  value: "h6"
+                }
+              ],
+              children: []
+            },
+            {
               component: "List",
+              type: "instance",
+              label: "List (Unordered)",
               children: [
                 {
+                  component: "ListItem",
                   type: "instance",
+                  children: [{ type: "text", value: "list item you can edit" }]
+                },
+                {
                   component: "ListItem",
-                  children: [
-                    {
-                      type: "text",
-                      value: "List Item text you can edit",
-                      placeholder: true
-                    }
-                  ]
+                  type: "instance",
+                  children: [{ type: "text", value: "list item you can edit" }]
                 },
                 {
+                  component: "ListItem",
                   type: "instance",
+                  children: [{ type: "text", value: "list item you can edit" }]
+                }
+              ]
+            },
+            {
+              component: "List",
+              type: "instance",
+              label: "List (Ordered)",
+              props: [
+                {
+                  name: "ordered",
+                  type: "boolean",
+                  value: true
+                }
+              ],
+              children: [
+                {
                   component: "ListItem",
-                  children: [
-                    {
-                      type: "text",
-                      value: "List Item text you can edit",
-                      placeholder: true
-                    }
-                  ]
+                  type: "instance",
+                  children: [{ type: "text", value: "list item you can edit" }]
                 },
                 {
+                  component: "ListItem",
                   type: "instance",
+                  children: [{ type: "text", value: "list item you can edit" }]
+                },
+                {
                   component: "ListItem",
-                  children: [
-                    {
-                      type: "text",
-                      value: "List Item text you can edit",
-                      placeholder: true
-                    }
-                  ]
+                  type: "instance",
+                  children: [{ type: "text", value: "list item you can edit" }]
                 }
               ]
+            },
+            {
+              component: "Link",
+              type: "instance",
+              children: []
+            },
+            {
+              component: "Image",
+              type: "instance",
+              styles: [
+                {
+                  property: "marginRight",
+                  value: {
+                    type: "keyword",
+                    value: "auto"
+                  }
+                },
+                {
+                  property: "marginLeft",
+                  value: {
+                    type: "keyword",
+                    value: "auto"
+                  }
+                },
+                {
+                  property: "width",
+                  value: {
+                    type: "unit",
+                    unit: "%",
+                    value: 100
+                  }
+                },
+                {
+                  property: "height",
+                  value: {
+                    type: "keyword",
+                    value: "auto"
+                  }
+                }
+              ],
+              children: []
+            },
+            {
+              component: "Separator",
+              type: "instance",
+              children: []
+            },
+            {
+              component: "Blockquote",
+              type: "instance",
+              children: []
+            },
+            {
+              component: "HtmlEmbed",
+              type: "instance",
+              children: []
+            },
+            {
+              component: "CodeText",
+              type: "instance",
+              children: []
             }
           ]
         },
@@ -805,8 +962,6 @@ import { Matchers } from "@webstudio-is/sdk";
 // src/embed-template.ts
 import { z as z2 } from "zod";
 import { nanoid } from "nanoid";
-import { titleCase } from "title-case";
-import { noCase } from "change-case";
 import {
   encodeDataSourceVariable,
   transpileExpression
@@ -888,7 +1043,6 @@ var EmbedTemplateInstance = z2.lazy(
     label: z2.optional(z2.string()),
     variables: z2.optional(z2.record(z2.string(), EmbedTemplateVariable)),
     props: z2.optional(z2.array(EmbedTemplateProp)),
-    tokens: z2.optional(z2.array(z2.string())),
     styles: z2.optional(z2.array(EmbedTemplateStyleDecl)),
     children: WsEmbedTemplate
   })
@@ -1001,32 +1155,6 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
         }
       }
       const styleSourceIds = [];
-      if (item.tokens) {
-        const meta = metas.get(item.component);
-        if (meta?.presetTokens) {
-          for (const name of item.tokens) {
-            const tokenValue = meta.presetTokens[name];
-            if (tokenValue) {
-              const styleSourceId = `${item.component}:${name}`;
-              styleSourceIds.push(styleSourceId);
-              styleSources.push({
-                type: "token",
-                id: styleSourceId,
-                name: titleCase(noCase(name))
-              });
-              for (const styleDecl of tokenValue.styles) {
-                styles.push({
-                  breakpointId: defaultBreakpointId,
-                  styleSourceId,
-                  state: styleDecl.state,
-                  property: styleDecl.property,
-                  value: styleDecl.value
-                });
-              }
-            }
-          }
-        }
-      }
       if (item.styles) {
         const styleSourceId = generateId();
         styleSources.push({
@@ -1221,10 +1349,6 @@ var ComponentState = z3.object({
   selector: z3.string(),
   label: z3.string()
 });
-var ComponentToken = z3.object({
-  variant: z3.optional(z3.string()),
-  styles: z3.array(EmbedTemplateStyleDecl)
-});
 var defaultStates = [
   { selector: ":hover", label: "Hover" },
   { selector: ":active", label: "Active" },
@@ -1246,17 +1370,12 @@ var WsComponentMeta = z3.object({
   // naming every item manually
   indexWithinAncestor: z3.optional(z3.string()),
   stylable: z3.optional(z3.boolean()),
-  // specifies whether the instance can be deleted,
-  // copied or dragged out of its parent instance
-  // true by default
-  detachable: z3.optional(z3.boolean()),
   label: z3.optional(z3.string()),
   description: z3.string().optional(),
   icon: z3.string(),
   presetStyle: z3.optional(
     z3.record(z3.string(), z3.array(EmbedTemplateStyleDecl))
   ),
-  presetTokens: z3.optional(z3.record(z3.string(), ComponentToken)),
   states: z3.optional(z3.array(ComponentState)),
   template: z3.optional(WsEmbedTemplate),
   order: z3.number().optional()

package/lib/runtime.js

@@ -6,7 +6,6 @@ import {
 } from "@webstudio-is/sdk/runtime";
 var ReactSdkContext = createContext({
   assetBaseUrl: "/",
-  imageBaseUrl: "/",
   imageLoader: ({ src }) => src,
   resources: {}
 });