@unlayer/react-elements 0.1.21 → 0.1.22

package/dist/index.d.cts

@@ -16,6 +16,8 @@ import { MenuValues } from '@unlayer/types/tools/menu';
 export { MenuValues } from '@unlayer/types/tools/menu';
 import { ParagraphValues } from '@unlayer/types/tools/paragraph';
 export { ParagraphValues } from '@unlayer/types/tools/paragraph';
+import { PageBreakValues } from '@unlayer/types/tools/page-break';
+export { PageBreakValues } from '@unlayer/types/tools/page-break';
 import { SocialValues } from '@unlayer/types/tools/social';
 export { SocialValues } from '@unlayer/types/tools/social';
 import { TableValues } from '@unlayer/types/tools/table';
@@ -592,6 +594,15 @@ interface ParagraphProps extends ItemComponentProps<ParagraphSemanticProps> {
  */
 declare const Paragraph: React$1.FC<ItemComponentProps<ParagraphSemanticProps>>;
 
+type PageBreakProps = ItemComponentProps<SemanticProps<PageBreakValues>>;
+/**
+ * PageBreak - Forces subsequent document content onto a new PDF page.
+ *
+ * Page breaks render only in document mode. In email and web output they are
+ * intentionally inert.
+ */
+declare const PageBreak: React$1.FC<ItemComponentProps<SemanticProps<PageBreakValues>>>;
+
 type SocialSemanticProps = Omit<SemanticProps<SocialValues>, "iconSize" | "spacing"> & {
     /** Social icons shorthand (array of {name, url}) */
     icons?: SocialIcon[];
@@ -806,7 +817,12 @@ declare namespace Page {
     var displayName: string;
 }
 
-type DocumentProps = Omit<BodyProps, "mode">;
+type DocumentPageSize = "A3" | "A4" | "A5" | "Legal" | "Letter" | "Tabloid";
+type DocumentOrientation = "portrait" | "landscape";
+type DocumentProps = Omit<BodyProps, "mode" | "documentSize" | "documentOrientation" | "documentMargin"> & {
+    documentSize?: DocumentPageSize;
+    documentOrientation?: DocumentOrientation;
+};
 /**
  * Document - Print-optimized rendering for PDF generation.
  *
@@ -814,7 +830,12 @@ type DocumentProps = Omit<BodyProps, "mode">;
  *
  * @example
  * ```tsx
- * <Document backgroundColor="#ffffff" contentWidth="700px">
+ * <Document
+ *   backgroundColor="#ffffff"
+ *   contentWidth="700px"
+ *   documentSize="A4"
+ *   documentOrientation="portrait"
+ * >
  *   <Row><Column><Paragraph text="Hello" /></Column></Row>
  * </Document>
  * ```
@@ -1126,4 +1147,4 @@ declare function registerTool(tool: ElementsToolConfig): React__default.FC<Eleme
 /** Alias of {@link registerTool}. */
 declare const registerElementsTool: typeof registerTool;
 
-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, type ElementsToolConfig, type ElementsToolProps, 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, type RenderToHtmlOptions, Row, type RowProps, type SizeInput, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type TextStyleProps, type ToolExporter, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, registerElementsTool, registerTool, 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 DocumentOrientation, type DocumentPageSize, type DocumentProps, type ElementsToolConfig, type ElementsToolProps, 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, PageBreak, type PageBreakProps, type PageProps, Paragraph, type ParagraphProps, type RenderToHtmlOptions, Row, type RowProps, type SizeInput, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type TextStyleProps, type ToolExporter, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, registerElementsTool, registerTool, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };

package/dist/index.d.ts

@@ -16,6 +16,8 @@ import { MenuValues } from '@unlayer/types/tools/menu';
 export { MenuValues } from '@unlayer/types/tools/menu';
 import { ParagraphValues } from '@unlayer/types/tools/paragraph';
 export { ParagraphValues } from '@unlayer/types/tools/paragraph';
+import { PageBreakValues } from '@unlayer/types/tools/page-break';
+export { PageBreakValues } from '@unlayer/types/tools/page-break';
 import { SocialValues } from '@unlayer/types/tools/social';
 export { SocialValues } from '@unlayer/types/tools/social';
 import { TableValues } from '@unlayer/types/tools/table';
@@ -592,6 +594,15 @@ interface ParagraphProps extends ItemComponentProps<ParagraphSemanticProps> {
  */
 declare const Paragraph: React$1.FC<ItemComponentProps<ParagraphSemanticProps>>;
 
+type PageBreakProps = ItemComponentProps<SemanticProps<PageBreakValues>>;
+/**
+ * PageBreak - Forces subsequent document content onto a new PDF page.
+ *
+ * Page breaks render only in document mode. In email and web output they are
+ * intentionally inert.
+ */
+declare const PageBreak: React$1.FC<ItemComponentProps<SemanticProps<PageBreakValues>>>;
+
 type SocialSemanticProps = Omit<SemanticProps<SocialValues>, "iconSize" | "spacing"> & {
     /** Social icons shorthand (array of {name, url}) */
     icons?: SocialIcon[];
@@ -806,7 +817,12 @@ declare namespace Page {
     var displayName: string;
 }
 
-type DocumentProps = Omit<BodyProps, "mode">;
+type DocumentPageSize = "A3" | "A4" | "A5" | "Legal" | "Letter" | "Tabloid";
+type DocumentOrientation = "portrait" | "landscape";
+type DocumentProps = Omit<BodyProps, "mode" | "documentSize" | "documentOrientation" | "documentMargin"> & {
+    documentSize?: DocumentPageSize;
+    documentOrientation?: DocumentOrientation;
+};
 /**
  * Document - Print-optimized rendering for PDF generation.
  *
@@ -814,7 +830,12 @@ type DocumentProps = Omit<BodyProps, "mode">;
  *
  * @example
  * ```tsx
- * <Document backgroundColor="#ffffff" contentWidth="700px">
+ * <Document
+ *   backgroundColor="#ffffff"
+ *   contentWidth="700px"
+ *   documentSize="A4"
+ *   documentOrientation="portrait"
+ * >
  *   <Row><Column><Paragraph text="Hello" /></Column></Row>
  * </Document>
  * ```
@@ -1126,4 +1147,4 @@ declare function registerTool(tool: ElementsToolConfig): React__default.FC<Eleme
 /** Alias of {@link registerTool}. */
 declare const registerElementsTool: typeof registerTool;
 
-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, type ElementsToolConfig, type ElementsToolProps, 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, type RenderToHtmlOptions, Row, type RowProps, type SizeInput, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type TextStyleProps, type ToolExporter, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, registerElementsTool, registerTool, 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 DocumentOrientation, type DocumentPageSize, type DocumentProps, type ElementsToolConfig, type ElementsToolProps, 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, PageBreak, type PageBreakProps, type PageProps, Paragraph, type ParagraphProps, type RenderToHtmlOptions, Row, type RowProps, type SizeInput, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type TextStyleProps, type ToolExporter, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, registerElementsTool, registerTool, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };

package/dist/index.js

@@ -796,7 +796,8 @@ function createItemComponent(config) {
     contentType: config.contentType,
     slug: config.slug,
     metaName: config.metaName,
-    head: config.head
+    head: config.head,
+    omitEmptyOutput: config.omitEmptyOutput
   };
   return ItemComponent;
 }
@@ -1008,13 +1009,45 @@ var Paragraph = createItemComponent({
   exporters: ParagraphExporters
 });
 var Paragraph_default = Paragraph;
-var DEFAULT_ICONS = SocialDefaults.icons ?? { iconType: "circle", icons: [] };
+
+// src/components/PageBreak.tsx
 var DEFAULT_VALUES8 = {
+  color: "#6b7280"
+};
+var pageBreakExporters = {
+  // Page breaks are a document-only concept. Keep the unsupported renderers
+  // inert so a component rendered outside <Document> does not throw.
+  web: () => "",
+  email: () => "",
+  document: () => '<div class="u-content-page-break" aria-hidden="true"></div>'
+};
+var pageBreakHead = {
+  css: (_values, _bodyValues, meta) => meta.displayMode === "document" ? `
+      .u-content-page-break {
+        break-after: page;
+        page-break-after: always;
+      }
+    ` : void 0
+};
+var PageBreak = createItemComponent({
+  name: "PageBreak",
+  contentType: "page_break",
+  metaName: "page_break",
+  defaultValues: DEFAULT_VALUES8,
+  propMapper: (props) => mapSemanticProps(props, DEFAULT_VALUES8, "PageBreak"),
+  displayName: "PageBreak",
+  exporters: pageBreakExporters,
+  head: pageBreakHead,
+  omitEmptyOutput: true
+});
+var PageBreak_default = PageBreak;
+var DEFAULT_ICONS = SocialDefaults.icons ?? { iconType: "circle", icons: [] };
+var DEFAULT_VALUES9 = {
   ...SocialDefaults
 };
 var Social = createItemComponent({
   name: "Social",
-  defaultValues: DEFAULT_VALUES8,
+  defaultValues: DEFAULT_VALUES9,
   propMapper: (props) => {
     const { icons, iconType, ...rest } = props;
     const coerceSizes = (base) => {
@@ -1035,7 +1068,7 @@ var Social = createItemComponent({
       }));
       const base = mapSemanticProps(
         rest,
-        DEFAULT_VALUES8,
+        DEFAULT_VALUES9,
         "Social"
       );
       base.icons = {
@@ -1047,14 +1080,14 @@ var Social = createItemComponent({
     if (iconType !== void 0) {
       const base = mapSemanticProps(
         rest,
-        DEFAULT_VALUES8,
+        DEFAULT_VALUES9,
         "Social"
       );
       base.icons = { ...DEFAULT_ICONS, ...base.icons, iconType };
       return coerceSizes(base);
     }
     return coerceSizes(
-      mapSemanticProps(props, DEFAULT_VALUES8, "Social")
+      mapSemanticProps(props, DEFAULT_VALUES9, "Social")
     );
   },
   displayName: "Social",
@@ -1062,20 +1095,20 @@ var Social = createItemComponent({
 });
 var Social_default = Social;
 var DEFAULT_TABLE = { headers: [], rows: [], footers: [] };
-var DEFAULT_VALUES9 = {
+var DEFAULT_VALUES10 = {
   ...TableDefaults,
   table: DEFAULT_TABLE
   // Schema doesn't include table data structure
 };
 var Table = createItemComponent({
   name: "Table",
-  defaultValues: DEFAULT_VALUES9,
+  defaultValues: DEFAULT_VALUES10,
   propMapper: (props) => {
     const { headers, data, columns, rows, ...rest } = props;
     if (headers || data || typeof columns === "number" || typeof rows === "number") {
       const base = mapSemanticProps(
         rest,
-        DEFAULT_VALUES9,
+        DEFAULT_VALUES10,
         "Table"
       );
       const colCount = headers ? headers.length : typeof columns === "number" ? columns : data?.[0]?.length ?? 0;
@@ -1107,7 +1140,7 @@ var Table = createItemComponent({
     }
     return mapSemanticProps(
       props,
-      DEFAULT_VALUES9,
+      DEFAULT_VALUES10,
       "Table"
     );
   },
@@ -1122,7 +1155,7 @@ var DEFAULT_VIDEO = {
   loading: false,
   ...VideoDefaults.video
 };
-var DEFAULT_VALUES10 = {
+var DEFAULT_VALUES11 = {
   ...VideoDefaults,
   video: DEFAULT_VIDEO
 };
@@ -1150,14 +1183,14 @@ function parseVideoUrl(url) {
 }
 var Video = createItemComponent({
   name: "Video",
-  defaultValues: DEFAULT_VALUES10,
+  defaultValues: DEFAULT_VALUES11,
   propMapper: (props) => {
     const { videoUrl, ...rest } = props;
     if (typeof videoUrl === "string") {
       const parsed = parseVideoUrl(videoUrl);
       const base = mapSemanticProps(
         rest,
-        DEFAULT_VALUES10,
+        DEFAULT_VALUES11,
         "Video"
       );
       if (parsed) {
@@ -1167,7 +1200,7 @@ var Video = createItemComponent({
     }
     return mapSemanticProps(
       props,
-      DEFAULT_VALUES10,
+      DEFAULT_VALUES11,
       "Video"
     );
   },
@@ -1195,7 +1228,7 @@ var {
 var BODY_DEFAULTS = bodyRest;
 var ROW_DEFAULTS = { ...RowDefaults };
 var COLUMN_DEFAULTS = { ...ColumnDefaults };
-var DEFAULT_VALUES11 = ROW_DEFAULTS;
+var DEFAULT_VALUES12 = ROW_DEFAULTS;
 var DEFAULT_BODY_VALUES = BODY_DEFAULTS;
 function getWidthPercentages(cells) {
   if (cells.length === 0) return [];
@@ -1333,7 +1366,7 @@ var Row = (props) => {
   const safeBodyValues = { ...DEFAULT_BODY_VALUES, ...bodyValues };
   const values = mapSemanticProps(
     semanticProps,
-    DEFAULT_VALUES11,
+    DEFAULT_VALUES12,
     "Row"
   );
   const valuesWithMeta = {
@@ -1371,7 +1404,7 @@ var Row = (props) => {
 Row.displayName = "Row";
 var Row_default = Row;
 var DEFAULT_CONTAINER_PADDING2 = "10px";
-var DEFAULT_VALUES12 = COLUMN_DEFAULTS;
+var DEFAULT_VALUES13 = COLUMN_DEFAULTS;
 function renderColumnToHtml(innerHTML, values, index, cells, bodyValues, rowValues, mode) {
   const columnExporter = ColumnExporters[mode] || ColumnExporters.web;
   return columnExporter(innerHTML, values, index, cells, bodyValues, rowValues);
@@ -1396,7 +1429,7 @@ var Column = (props) => {
   const mode = modeProp ?? _config?.mode ?? "web";
   const values = mapSemanticProps(
     semanticProps,
-    DEFAULT_VALUES12,
+    DEFAULT_VALUES13,
     "Column"
   );
   const valuesWithMeta = {
@@ -1432,6 +1465,7 @@ var Column = (props) => {
             });
             if (rendered && typeof rendered === "object" && rendered.props && rendered.props.dangerouslySetInnerHTML) {
               const componentHTML = rendered.props.dangerouslySetInnerHTML.__html;
+              if (!componentHTML && ComponentType?.[UNLAYER_CONFIG_KEY]?.omitEmptyOutput) return;
               const childProps = child.props;
               const rawContainerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING2;
               const containerPadding = typeof rawContainerPadding === "number" ? `${rawContainerPadding}px` : rawContainerPadding;
@@ -1479,7 +1513,7 @@ var Column = (props) => {
 };
 Column.displayName = "Column";
 var Column_default = Column;
-var DEFAULT_VALUES13 = BODY_DEFAULTS;
+var DEFAULT_VALUES14 = BODY_DEFAULTS;
 var MAX_PREVIEW_LENGTH = 150;
 var PADDING_CHARS = [
   "\xA0",
@@ -1525,8 +1559,8 @@ var Body = (props) => {
   const _config = { ...resolvedConfig, mode };
   _config.__ids = {};
   const values = mergeValues(
-    DEFAULT_VALUES13,
-    mapSemanticProps(semanticProps, DEFAULT_VALUES13, "Body")
+    DEFAULT_VALUES14,
+    mapSemanticProps(semanticProps, DEFAULT_VALUES14, "Body")
   );
   const valuesWithMeta = {
     ...values,
@@ -2272,6 +2306,6 @@ function registerTool(tool) {
 }
 var registerElementsTool = registerTool;
 
-export { Body_default as Body, Button_default as Button, Column_default as Column, ColumnLayouts, DEFAULT_CONFIG, Divider_default as Divider, Document, Email, Heading_default as Heading, Html_default as Html, Image_default as Image, Menu_default as Menu, Page, Paragraph_default as Paragraph, Row_default as Row, Social_default as Social, Table_default as Table, UnlayerProvider, Video_default as Video, htmlToTextJson, registerElementsTool, registerTool, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };
+export { Body_default as Body, Button_default as Button, Column_default as Column, ColumnLayouts, DEFAULT_CONFIG, Divider_default as Divider, Document, Email, Heading_default as Heading, Html_default as Html, Image_default as Image, Menu_default as Menu, Page, PageBreak_default as PageBreak, Paragraph_default as Paragraph, Row_default as Row, Social_default as Social, Table_default as Table, UnlayerProvider, Video_default as Video, htmlToTextJson, registerElementsTool, registerTool, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map