@unlayer/react-elements 0.1.14 → 0.1.16

package/dist/index.d.cts

@@ -160,7 +160,7 @@ declare const DEFAULT_CONFIG: UnlayerConfig;
  * configurations that match exactly what the Unlayer editor supports.
  *
  * Usage:
- * import { ColumnLayouts } from '@unlayer-internal/shared-elements';
+ * import { ColumnLayouts } from '@unlayer/react-elements';
  * <Row layout={ColumnLayouts.TwoEqual}>
  *   <Column>...</Column>
  *   <Column>...</Column>
@@ -368,7 +368,8 @@ interface ButtonProps extends ItemComponentProps<ButtonSemanticProps> {
  *
  * @example Flat Props (Simple - most common)
  * ```tsx
- * <Button color="white" backgroundColor="#3b82f6" fontSize="16px">
+ * // `href` accepts a plain URL string (the ergonomic form).
+ * <Button href="https://example.com" color="white" backgroundColor="#3b82f6" fontSize="16px">
  *   Click me
  * </Button>
  * ```
@@ -466,6 +467,13 @@ interface HtmlProps extends ItemComponentProps<SemanticProps<HtmlValues>> {
 /**
  * Html - Universal SSR/Client Component for custom HTML with Automatic Semantic Props
  *
+ * ⚠️ Renders the HTML verbatim — it is NOT sanitized by default. Only pass HTML
+ * you trust, and make sure it is valid: notably, an inline SVG inside a `url(...)`
+ * must be URL-encoded, because a raw `"` inside a double-quoted `style="…"`
+ * closes the attribute and the rest leaks out as text. To sanitize (matching the
+ * editor's HTML block, which strips scripts/event handlers), pass a `toSafeHtml`
+ * function via the `UnlayerProvider` config.
+ *
  * @example Flat Props
  * ```tsx
  * <Html html="<div>Custom HTML</div>" />
@@ -578,15 +586,21 @@ interface ParagraphProps extends ItemComponentProps<ParagraphSemanticProps> {
  */
 declare const Paragraph: React$1.FC<ItemComponentProps<ParagraphSemanticProps>>;
 
-type SocialSemanticProps = SemanticProps<SocialValues> & {
+type SocialSemanticProps = Omit<SemanticProps<SocialValues>, "iconSize" | "spacing"> & {
     /** Social icons shorthand (array of {name, url}) */
     icons?: SocialIcon[];
     /** Icon shape */
     iconType?: "circle" | "rounded" | "squared";
+    /** Icon size in px — a number (34) or px string ("34px"). */
+    iconSize?: SizeInput;
+    /** Gap between icons in px — a number or px string. */
+    spacing?: SizeInput;
 };
-interface SocialProps extends Omit<ItemComponentProps<SemanticProps<SocialValues>>, "icons"> {
+interface SocialProps extends Omit<ItemComponentProps<SemanticProps<SocialValues>>, "icons" | "iconSize" | "spacing"> {
     icons?: SocialIcon[] | SocialValues["icons"];
     iconType?: "circle" | "rounded" | "squared";
+    iconSize?: SizeInput;
+    spacing?: SizeInput;
 }
 /**
  * Social - Renders social-media icon links.
@@ -958,4 +972,4 @@ declare function renderToHtmlParts(element: React__default.ReactElement, config?
 declare function renderRowToJson(element: React__default.ReactElement): DesignRow;
 declare function renderToJson(element: React__default.ReactElement): DesignJSON;
 
-export { Body, Button, type ButtonProps, Column, type ColumnLayout, ColumnLayouts, DEFAULT_CONFIG, type DesignBody, type DesignColumn, type DesignContent, type DesignJSON, type DesignRow, Divider, type DividerProps, Document, type DocumentProps, Email, type EmailProps, Heading, type HeadingProps, type Href, Html, type HtmlParts, type HtmlProps, type Icons, Image, type ImageProps, type LinkStyle, Menu, type MenuItem, type MenuProps, Page, type PageProps, Paragraph, type ParagraphProps, Row, type RowProps, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };
+export { Body, type BorderInput, Button, type ButtonProps, Column, type ColumnLayout, ColumnLayouts, DEFAULT_CONFIG, type DesignBody, type DesignColumn, type DesignContent, type DesignJSON, type DesignRow, Divider, type DividerProps, Document, type DocumentProps, Email, type EmailProps, type FontFamilyInput, type FontWeightInput, Heading, type HeadingLevel, type HeadingProps, type Href, Html, type HtmlParts, type HtmlProps, type Icons, Image, type ImageProps, type ImageSrcInput, type LinkStyle, Menu, type MenuItem, type MenuProps, Page, type PageProps, Paragraph, type ParagraphProps, Row, type RowProps, type SizeInput, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type TextStyleProps, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };

package/dist/index.d.ts

@@ -160,7 +160,7 @@ declare const DEFAULT_CONFIG: UnlayerConfig;
  * configurations that match exactly what the Unlayer editor supports.
  *
  * Usage:
- * import { ColumnLayouts } from '@unlayer-internal/shared-elements';
+ * import { ColumnLayouts } from '@unlayer/react-elements';
  * <Row layout={ColumnLayouts.TwoEqual}>
  *   <Column>...</Column>
  *   <Column>...</Column>
@@ -368,7 +368,8 @@ interface ButtonProps extends ItemComponentProps<ButtonSemanticProps> {
  *
  * @example Flat Props (Simple - most common)
  * ```tsx
- * <Button color="white" backgroundColor="#3b82f6" fontSize="16px">
+ * // `href` accepts a plain URL string (the ergonomic form).
+ * <Button href="https://example.com" color="white" backgroundColor="#3b82f6" fontSize="16px">
  *   Click me
  * </Button>
  * ```
@@ -466,6 +467,13 @@ interface HtmlProps extends ItemComponentProps<SemanticProps<HtmlValues>> {
 /**
  * Html - Universal SSR/Client Component for custom HTML with Automatic Semantic Props
  *
+ * ⚠️ Renders the HTML verbatim — it is NOT sanitized by default. Only pass HTML
+ * you trust, and make sure it is valid: notably, an inline SVG inside a `url(...)`
+ * must be URL-encoded, because a raw `"` inside a double-quoted `style="…"`
+ * closes the attribute and the rest leaks out as text. To sanitize (matching the
+ * editor's HTML block, which strips scripts/event handlers), pass a `toSafeHtml`
+ * function via the `UnlayerProvider` config.
+ *
  * @example Flat Props
  * ```tsx
  * <Html html="<div>Custom HTML</div>" />
@@ -578,15 +586,21 @@ interface ParagraphProps extends ItemComponentProps<ParagraphSemanticProps> {
  */
 declare const Paragraph: React$1.FC<ItemComponentProps<ParagraphSemanticProps>>;
 
-type SocialSemanticProps = SemanticProps<SocialValues> & {
+type SocialSemanticProps = Omit<SemanticProps<SocialValues>, "iconSize" | "spacing"> & {
     /** Social icons shorthand (array of {name, url}) */
     icons?: SocialIcon[];
     /** Icon shape */
     iconType?: "circle" | "rounded" | "squared";
+    /** Icon size in px — a number (34) or px string ("34px"). */
+    iconSize?: SizeInput;
+    /** Gap between icons in px — a number or px string. */
+    spacing?: SizeInput;
 };
-interface SocialProps extends Omit<ItemComponentProps<SemanticProps<SocialValues>>, "icons"> {
+interface SocialProps extends Omit<ItemComponentProps<SemanticProps<SocialValues>>, "icons" | "iconSize" | "spacing"> {
     icons?: SocialIcon[] | SocialValues["icons"];
     iconType?: "circle" | "rounded" | "squared";
+    iconSize?: SizeInput;
+    spacing?: SizeInput;
 }
 /**
  * Social - Renders social-media icon links.
@@ -958,4 +972,4 @@ declare function renderToHtmlParts(element: React__default.ReactElement, config?
 declare function renderRowToJson(element: React__default.ReactElement): DesignRow;
 declare function renderToJson(element: React__default.ReactElement): DesignJSON;
 
-export { Body, Button, type ButtonProps, Column, type ColumnLayout, ColumnLayouts, DEFAULT_CONFIG, type DesignBody, type DesignColumn, type DesignContent, type DesignJSON, type DesignRow, Divider, type DividerProps, Document, type DocumentProps, Email, type EmailProps, Heading, type HeadingProps, type Href, Html, type HtmlParts, type HtmlProps, type Icons, Image, type ImageProps, type LinkStyle, Menu, type MenuItem, type MenuProps, Page, type PageProps, Paragraph, type ParagraphProps, Row, type RowProps, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };
+export { Body, type BorderInput, Button, type ButtonProps, Column, type ColumnLayout, ColumnLayouts, DEFAULT_CONFIG, type DesignBody, type DesignColumn, type DesignContent, type DesignJSON, type DesignRow, Divider, type DividerProps, Document, type DocumentProps, Email, type EmailProps, type FontFamilyInput, type FontWeightInput, Heading, type HeadingLevel, type HeadingProps, type Href, Html, type HtmlParts, type HtmlProps, type Icons, Image, type ImageProps, type ImageSrcInput, type LinkStyle, Menu, type MenuItem, type MenuProps, Page, type PageProps, Paragraph, type ParagraphProps, Row, type RowProps, type SizeInput, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type TextStyleProps, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };

package/dist/index.js

@@ -339,14 +339,27 @@ function mapSemanticProps(props, defaultValues, componentType) {
     delete userProps.html;
     delete result.html;
   }
-  for (const key of ["href", "action"]) {
-    const v = userProps[key];
+  const canonicalizeLink = (v) => {
     if (typeof v === "string") {
-      userProps[key] = {
-        name: "web",
-        values: { href: v, target: "_blank" }
-      };
+      return { name: "web", values: { href: v, target: "_blank" } };
+    }
+    if (v && typeof v === "object" && "name" in v && v.attrs && typeof v.attrs === "object") {
+      const { href: attrsHref, target: attrsTarget, ...customAttrs } = v.attrs;
+      if (attrsHref !== void 0 || attrsTarget !== void 0) {
+        const linkValues = { ...v.values };
+        if (!linkValues.href && attrsHref !== void 0) linkValues.href = attrsHref;
+        if (!linkValues.target && attrsTarget !== void 0) linkValues.target = attrsTarget;
+        const next = { ...v, values: linkValues };
+        if (Object.keys(customAttrs).length) next.attrs = customAttrs;
+        else delete next.attrs;
+        return next;
+      }
     }
+    return v;
+  };
+  for (const key of ["href", "action"]) {
+    if (userProps[key] !== void 0) userProps[key] = canonicalizeLink(userProps[key]);
+    if (result[key] !== void 0) result[key] = canonicalizeLink(result[key]);
   }
   normalizeCssProps(userProps);
   const nestedGroups = analyzeNestedStructure(defaultValues);
@@ -395,6 +408,16 @@ function mapSemanticProps(props, defaultValues, componentType) {
     if (Object.keys(collected).length > 0) {
       final.border = { ...final.border || {}, ...collected };
     }
+    if (final.border && typeof final.border === "object") {
+      const b = { ...final.border };
+      for (const key of Object.keys(b)) {
+        if (!/Width$/.test(key)) continue;
+        const v = b[key];
+        if (typeof v === "number") b[key] = `${v}px`;
+        else if (typeof v === "string" && /^\d+(?:\.\d+)?$/.test(v.trim())) b[key] = `${v.trim()}px`;
+      }
+      final.border = b;
+    }
   }
   return final;
 }
@@ -406,12 +429,14 @@ function normalizeLinkValue(value) {
   if (typeof value !== "object") return void 0;
   const v = value;
   if ("url" in v) return v;
-  if ("name" in v && v.values && typeof v.values === "object") {
-    const inner = v.values;
+  if ("name" in v && (v.values && typeof v.values === "object" || v.attrs && typeof v.attrs === "object")) {
+    const inner = v.values && typeof v.values === "object" ? v.values : {};
+    const attrs = v.attrs && typeof v.attrs === "object" ? v.attrs : {};
+    const { href: attrsHref, target: attrsTarget, ...customAttrs } = attrs;
     return {
-      url: inner.href ?? "",
-      target: inner.target ?? "_blank",
-      ...v.attrs ?? {}
+      url: inner.href || attrsHref || "",
+      target: inner.target || attrsTarget || "_blank",
+      ...customAttrs
     };
   }
   return void 0;
@@ -763,11 +788,11 @@ var Html = createItemComponent({
   exporters: HtmlExporters
 });
 var Html_default = Html;
+var { height: _placeholderHeight, ...defaultSrc } = ImageDefaults.src;
 var DEFAULT_VALUES5 = {
   ...ImageDefaults,
-  // Override src with autoWidth/maxWidth for responsive rendering
   src: {
-    ...ImageDefaults.src,
+    ...defaultSrc,
     autoWidth: true,
     maxWidth: "100%"
   }
@@ -809,7 +834,7 @@ var Image = createItemComponent({
       };
       let displayPct;
       let displayPx;
-      for (const candidate of [widthProp, maxWidthProp, userSrc.maxWidth]) {
+      for (const candidate of [widthProp, maxWidthProp, userSrc.maxWidth, userSrc.width]) {
         if (candidate === void 0) continue;
         const pct = asPercent(candidate);
         if (pct) {
@@ -900,6 +925,17 @@ var Social = createItemComponent({
   defaultValues: DEFAULT_VALUES8,
   propMapper: (props) => {
     const { icons, iconType, ...rest } = props;
+    const coerceSizes = (base) => {
+      for (const key of ["iconSize", "spacing"]) {
+        const v = base[key];
+        if (typeof v === "string") {
+          const m = /^(\d+(?:\.\d+)?)(?:px)?$/.exec(v.trim());
+          if (m) base[key] = parseFloat(m[1]);
+          else delete base[key];
+        }
+      }
+      return base;
+    };
     if (Array.isArray(icons)) {
       const mapped = icons.map((icon) => ({
         name: icon.name,
@@ -914,7 +950,7 @@ var Social = createItemComponent({
         iconType: iconType ?? base.icons?.iconType ?? "circle",
         icons: mapped
       };
-      return base;
+      return coerceSizes(base);
     }
     if (iconType !== void 0) {
       const base = mapSemanticProps(
@@ -923,12 +959,10 @@ var Social = createItemComponent({
         "Social"
       );
       base.icons = { ...DEFAULT_ICONS, ...base.icons, iconType };
-      return base;
+      return coerceSizes(base);
     }
-    return mapSemanticProps(
-      props,
-      DEFAULT_VALUES8,
-      "Social"
+    return coerceSizes(
+      mapSemanticProps(props, DEFAULT_VALUES8, "Social")
     );
   },
   displayName: "Social",
@@ -1199,10 +1233,17 @@ var Row = (props) => {
     ...semanticProps
   } = props;
   const mode = modeProp ?? _config?.mode ?? "web";
-  let cells = propsCells || [1];
+  let cells;
   if (layout) {
     validateColumnLayout(layout, React.Children.count(children));
     cells = layout.cells;
+  } else if (propsCells) {
+    cells = propsCells;
+  } else {
+    const columnCount = React.Children.toArray(children).filter(
+      (c) => React.isValidElement(c) && /^Column$/.test(c.type?.displayName || c.type?.name || "")
+    ).length;
+    cells = Array(Math.max(1, columnCount)).fill(1);
   }
   const safeBodyValues = { ...DEFAULT_BODY_VALUES, ...bodyValues };
   const values = mapSemanticProps(