@webstudio-is/react-sdk 0.194.0 → 0.196.0

package/lib/index.js

@@ -82,7 +82,7 @@ import {
 
 // src/core-components.ts
 import {
-  EditIcon,
+  ContentBlockIcon,
   ListViewIcon,
   PaintBrushIcon,
   SettingsIcon,
@@ -166,7 +166,7 @@ var descendantMeta = {
   icon: PaintBrushIcon,
   constraints: {
     relation: "parent",
-    component: { $eq: "HtmlEmbed" }
+    component: { $in: ["HtmlEmbed", "MarkdownEmbed"] }
   }
 };
 var descendantPropsMeta = {
@@ -214,11 +214,10 @@ var blockTemplatePropsMeta = {
   initialProps: []
 };
 var blockMeta = {
-  category: "data",
-  order: 2,
+  category: "typography",
   type: "container",
   label: "Content Block",
-  icon: EditIcon,
+  icon: ContentBlockIcon,
   constraints: [
     {
       relation: "ancestor",
@@ -237,59 +236,184 @@ 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: []
+                }
+              ]
+            },
+            {
+              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: []
+                }
+              ]
+            },
+            {
+              component: "Link",
+              type: "instance",
+              children: []
+            },
+            {
+              component: "Image",
+              type: "instance",
+              styles: [
+                {
+                  property: "marginRight",
+                  value: {
+                    type: "keyword",
+                    value: "auto"
+                  }
                 },
                 {
-                  type: "instance",
-                  component: "ListItem",
-                  children: [
-                    {
-                      type: "text",
-                      value: "List Item text you can edit",
-                      placeholder: true
-                    }
-                  ]
+                  property: "marginLeft",
+                  value: {
+                    type: "keyword",
+                    value: "auto"
+                  }
                 },
                 {
-                  type: "instance",
-                  component: "ListItem",
-                  children: [
-                    {
-                      type: "text",
-                      value: "List Item text you can edit",
-                      placeholder: true
-                    }
-                  ]
+                  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: []
             }
           ]
         },
@@ -628,6 +752,8 @@ var showAttribute = "data-ws-show";
 var indexAttribute = "data-ws-index";
 var collapsedAttribute = "data-ws-collapsed";
 var textContentAttribute = "data-ws-text-content";
+var editablePlaceholderVariable = "--data-ws-editable-placeholder";
+var editingPlaceholderVariable = "--data-ws-editing-placeholder";
 var attributeNameStartChar = "A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
 var attributeNameChar = attributeNameStartChar + ":\\-0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
 var validAttributeNameRegex = new RegExp(
@@ -1081,13 +1207,14 @@ var createInstancesFromTemplate = (treeTemplate, instances, props, dataSourceByR
   }
   return parentChildren;
 };
-var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId, generateId = nanoid) => {
+var generateDataFromEmbedTemplate = (treeTemplate, metas, generateId = nanoid) => {
   const instances = [];
   const props = [];
   const dataSourceByRef = /* @__PURE__ */ new Map();
   const styleSourceSelections = [];
   const styleSources = [];
   const styles = [];
+  const baseBreakpointId = generateId();
   const children = createInstancesFromTemplate(
     treeTemplate,
     instances,
@@ -1097,9 +1224,16 @@ var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId, g
     styleSources,
     styles,
     metas,
-    defaultBreakpointId,
+    baseBreakpointId,
     generateId
   );
+  const breakpoints = [];
+  if (styles.length > 0) {
+    breakpoints.push({
+      id: baseBreakpointId,
+      label: ""
+    });
+  }
   return {
     children,
     instances,
@@ -1108,8 +1242,8 @@ var generateDataFromEmbedTemplate = (treeTemplate, metas, defaultBreakpointId, g
     styleSourceSelections,
     styleSources,
     styles,
+    breakpoints,
     assets: [],
-    breakpoints: [],
     resources: []
   };
 };
@@ -1189,10 +1323,11 @@ var WsComponentPropsMeta = z3.object({
 });
 var componentCategories = [
   "general",
-  "text",
-  "data",
+  "typography",
   "media",
+  "data",
   "forms",
+  "localization",
   "radix",
   "xml",
   "hidden",
@@ -1674,6 +1809,8 @@ export {
   createImageValueTransformer,
   defaultStates,
   descendantComponent,
+  editablePlaceholderVariable,
+  editingPlaceholderVariable,
   generateCss,
   generateDataFromEmbedTemplate,
   generateJsxChildren,

package/lib/types/components/component-meta.d.ts

@@ -723,7 +723,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     initialProps?: string[] | undefined;
 }>;
 export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
-export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "xml", "hidden", "internal"];
+export declare const componentCategories: readonly ["general", "typography", "media", "data", "forms", "localization", "radix", "xml", "hidden", "internal"];
 export declare const stateCategories: readonly ["states", "component-states"];
 export declare const ComponentState: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["states", "component-states"]>>;
@@ -741,7 +741,7 @@ export declare const ComponentState: z.ZodObject<{
 export type ComponentState = z.infer<typeof ComponentState>;
 export declare const defaultStates: ComponentState[];
 export declare const WsComponentMeta: z.ZodObject<{
-    category: z.ZodOptional<z.ZodEnum<["general", "text", "data", "media", "forms", "radix", "xml", "hidden", "internal"]>>;
+    category: z.ZodOptional<z.ZodEnum<["general", "typography", "media", "data", "forms", "localization", "radix", "xml", "hidden", "internal"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text-child"]>;
     constraints: z.ZodOptional<z.ZodUnion<[z.ZodObject<{
         relation: z.ZodUnion<[z.ZodLiteral<"ancestor">, z.ZodLiteral<"parent">, z.ZodLiteral<"self">, z.ZodLiteral<"child">, z.ZodLiteral<"descendant">]>;
@@ -1463,7 +1463,7 @@ export declare const WsComponentMeta: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     type: "control" | "embed" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
+    category?: "data" | "xml" | "hidden" | "media" | "general" | "typography" | "forms" | "radix" | "internal" | "localization" | undefined;
     constraints?: {
         relation: "ancestor" | "parent" | "self" | "child" | "descendant";
         component?: {
@@ -1790,7 +1790,7 @@ export declare const WsComponentMeta: z.ZodObject<{
 }, {
     type: "control" | "embed" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
+    category?: "data" | "xml" | "hidden" | "media" | "general" | "typography" | "forms" | "radix" | "internal" | "localization" | undefined;
     constraints?: {
         relation: "ancestor" | "parent" | "self" | "child" | "descendant";
         component?: {

package/lib/types/embed-template.d.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 import type { Simplify } from "type-fest";
-import type { Instance, Breakpoint, WebstudioFragment } from "@webstudio-is/sdk";
+import type { Instance, WebstudioFragment } from "@webstudio-is/sdk";
 import { StyleValue, type StyleProperty } from "@webstudio-is/css-engine";
 import type { WsComponentMeta } from "./components/component-meta";
 declare const EmbedTemplateText: z.ZodObject<{
@@ -2249,11 +2249,11 @@ export declare const WsEmbedTemplate: z.ZodLazy<z.ZodArray<z.ZodUnion<[z.ZodType
     type: "expression";
 }>]>, "many">>;
 export type WsEmbedTemplate = z.infer<typeof WsEmbedTemplate>;
-export declare const generateDataFromEmbedTemplate: (treeTemplate: WsEmbedTemplate, metas: Map<Instance["component"], WsComponentMeta>, defaultBreakpointId: Breakpoint["id"], generateId?: () => string) => WebstudioFragment;
+export declare const generateDataFromEmbedTemplate: (treeTemplate: WsEmbedTemplate, metas: Map<Instance["component"], WsComponentMeta>, generateId?: () => string) => WebstudioFragment;
 export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, components: Set<EmbedTemplateInstance["component"]>) => {
     type: "control" | "embed" | "container" | "rich-text-child";
     description?: string | undefined;
-    category?: "data" | "xml" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "internal" | undefined;
+    category?: "data" | "xml" | "hidden" | "media" | "general" | "typography" | "forms" | "radix" | "internal" | "localization" | undefined;
     label?: string | undefined;
     order?: number | undefined;
     template?: ({
@@ -2264,6 +2264,7 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
         value: string;
         type: "expression";
     } | EmbedTemplateInstance)[] | undefined;
+    icon: string;
     constraints?: {
         relation: "ancestor" | "parent" | "self" | "child" | "descendant";
         component?: {
@@ -2295,7 +2296,6 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
     }[] | undefined;
     indexWithinAncestor?: string | undefined;
     stylable?: boolean | undefined;
-    icon: string;
     states?: {
         label: string;
         selector: string;

package/lib/types/props.d.ts

@@ -101,4 +101,6 @@ export declare const showAttribute: "data-ws-show";
 export declare const indexAttribute: "data-ws-index";
 export declare const collapsedAttribute: "data-ws-collapsed";
 export declare const textContentAttribute: "data-ws-text-content";
+export declare const editablePlaceholderVariable: "--data-ws-editable-placeholder";
+export declare const editingPlaceholderVariable: "--data-ws-editing-placeholder";
 export declare const isAttributeNameSafe: (attributeName: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.194.0",
+  "version": "0.196.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -14,6 +14,7 @@
     "type-fest": "^4.28.0",
     "vitest": "^2.1.8",
     "zod": "^3.22.4",
+    "@webstudio-is/template": "0.196.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "peerDependencies": {
@@ -25,11 +26,11 @@
     "change-case": "^5.4.4",
     "html-tags": "^4.0.0",
     "nanoid": "^5.0.8",
-    "@webstudio-is/css-engine": "0.194.0",
-    "@webstudio-is/icons": "^0.194.0",
-    "@webstudio-is/fonts": "0.194.0",
-    "@webstudio-is/sdk": "0.194.0",
-    "@webstudio-is/image": "0.194.0"
+    "@webstudio-is/css-engine": "0.196.0",
+    "@webstudio-is/icons": "^0.196.0",
+    "@webstudio-is/fonts": "0.196.0",
+    "@webstudio-is/sdk": "0.196.0",
+    "@webstudio-is/image": "0.196.0"
   },
   "exports": {
     ".": {