@unlayer/react-elements 0.1.16 → 0.1.18

package/dist/index.js

@@ -191,6 +191,50 @@ function textNodeToHtml(node) {
   }
   return html;
 }
+var NUMERIC_ALIGN = {
+  1: "left",
+  2: "center",
+  3: "right",
+  4: "justify"
+};
+function dirAttribute(direction) {
+  return direction === "ltr" || direction === "rtl" ? ` dir="${direction}"` : "";
+}
+function paragraphAlign(format) {
+  if (typeof format === "string") {
+    return ["left", "center", "right", "justify"].includes(format) ? format : void 0;
+  }
+  if (typeof format === "number") {
+    return NUMERIC_ALIGN[format];
+  }
+  return void 0;
+}
+function paragraphNodeToHtml(node, childrenHtml) {
+  const isInlineTool = !!node.isInlineTool;
+  const tag = isInlineTool ? "span" : "p";
+  const dir = dirAttribute(node.direction);
+  const styleParts = [];
+  if (node.style) {
+    styleParts.push(String(node.style).replace(/;+\s*$/, ""));
+  }
+  if (!isInlineTool) {
+    styleParts.push(
+      "margin: 0px",
+      "margin-block-start: 0px",
+      "margin-block-end: 0px"
+    );
+  }
+  const indent = Number(node.indent) || 0;
+  if (indent > 0) {
+    styleParts.push(`padding-inline-start: ${indent * 40}px`);
+  }
+  const align = paragraphAlign(node.format);
+  if (align) {
+    styleParts.push(`text-align: ${align}`);
+  }
+  const style = styleParts.length > 0 ? ` style="${escapeHtml(styleParts.join("; ") + ";")}"` : "";
+  return `<${tag}${dir}${style}>${childrenHtml || "<br>"}</${tag}>`;
+}
 function nodeToHtml(node) {
   if (!node || typeof node !== "object") return "";
   const type = node.type;
@@ -205,14 +249,11 @@ function nodeToHtml(node) {
     case "root":
       return childrenHtml;
     case "paragraph":
-    case "extended-paragraph": {
-      if (!childrenHtml) return "<p><br></p>";
-      const dir = node.direction ? ` dir="${node.direction}"` : "";
-      return `<p${dir}>${childrenHtml}</p>`;
-    }
+    case "extended-paragraph":
+      return paragraphNodeToHtml(node, childrenHtml);
     case "heading": {
-      const tag = node.tag || "h1";
-      const dir = node.direction ? ` dir="${node.direction}"` : "";
+      const tag = /^h[1-6]$/.test(node.tag) ? node.tag : "h1";
+      const dir = dirAttribute(node.direction);
       return `<${tag}${dir}>${childrenHtml}</${tag}>`;
     }
     case "link": {
@@ -572,16 +613,6 @@ function nextHtmlId(config, prefix) {
   ids[prefix] = (ids[prefix] || 0) + 1;
   return `${prefix}_${ids[prefix]}`;
 }
-function ensureMeta(values, type, index = 0) {
-  return {
-    ...values,
-    _meta: {
-      htmlID: `u_content_${type.toLowerCase()}_${index + 1}`,
-      htmlClassNames: `u_content_${type.toLowerCase()}`,
-      ...values._meta || {}
-    }
-  };
-}
 function renderComponent(config) {
   const { type, values, className, style, args = [], innerHTML, _config, exporter, metaContext } = config;
   try {
@@ -634,6 +665,7 @@ function createItemComponent(config) {
       style,
       // Internal props
       index = 0,
+      _metaHtmlId,
       colIndex = 0,
       cells = [],
       bodyValues = {},
@@ -651,11 +683,15 @@ function createItemComponent(config) {
       ...restProps
     });
     const finalValues = mergeValues(config.defaultValues, mappedValues);
-    const valuesWithMeta = ensureMeta(
-      finalValues,
-      config.name.toLowerCase(),
-      index
-    );
+    const metaName = config.metaName ?? config.name.toLowerCase();
+    const valuesWithMeta = {
+      ...finalValues,
+      _meta: {
+        htmlID: _metaHtmlId ?? `u_content_${metaName}_${index + 1}`,
+        htmlClassNames: `u_content_${metaName}`,
+        ...finalValues._meta || {}
+      }
+    };
     const safeBodyValues = {
       contentWidth: "500px",
       ...bodyValues
@@ -704,7 +740,11 @@ function createItemComponent(config) {
   ItemComponent[UNLAYER_CONFIG_KEY] = {
     name: config.name,
     defaultValues: config.defaultValues,
-    propMapper: config.propMapper
+    propMapper: config.propMapper,
+    contentType: config.contentType,
+    slug: config.slug,
+    metaName: config.metaName,
+    head: config.head
   };
   return ItemComponent;
 }
@@ -1115,7 +1155,7 @@ function getWidthPercentages(cells) {
     return { value, className };
   });
 }
-function generateGridCSS(cells, mode, contentWidth = 600, mobileBreakpoint = 620) {
+function generateGridCSS(cells, mode, contentWidth = 600, mobileBreakpoint = 480) {
   const widths = getWidthPercentages(cells);
   if (mode === "email") {
     const minQuery = `@media only screen and (min-width: ${contentWidth + 20}px)`;
@@ -1152,21 +1192,14 @@ ${widths.map(({ value, className }) => `  .no-stack .u-col-${className} { width:
   const columnCSS = widths.map(
     ({ value, className }) => `.u-row .u-col.u-col-${className} { flex: 0 0 ${value}%; max-width: ${value}%; }`
   ).join("\n");
-  const responsiveCSS = `
-@media only screen and (max-width: ${mobileBreakpoint}px) {
-  .u-row { width: 100% !important; }
-  .u-row .u-col {
-    display: block !important;
-    width: 100% !important;
-    min-width: 320px !important;
+  const responsiveCSS = mode === "document" ? "" : `
+@media (max-width: ${mobileBreakpoint}px) {
+  .u_row .container { max-width: 100% !important; }
+  .u-row:not(.no-stack) { flex-wrap: wrap; }
+  .u-row:not(.no-stack) .u-col {
+    flex: 0 0 100% !important;
     max-width: 100% !important;
   }
-  .u-row .u-col > div { margin: 0 auto; }
-  .no-stack .u-col {
-    min-width: 0 !important;
-    display: table-cell !important;
-  }
-${widths.map(({ value, className }) => `  .no-stack .u-col-${className} { width: ${value}% !important; }`).join("\n")}
 }`;
   return baseCSS + "\n" + columnCSS + "\n" + responsiveCSS;
 }
@@ -1333,9 +1366,12 @@ var Column = (props) => {
           if (typeof child.type === "function") {
             const ComponentType = child.type;
             const renderFn = ComponentType[UNLAYER_RENDER_KEY] || ComponentType;
+            const componentName = ComponentType?.[UNLAYER_CONFIG_KEY]?.metaName ?? (ComponentType?.displayName || ComponentType?.name || "component").toLowerCase();
+            const contentHtmlId = nextHtmlId(_config, `u_content_${componentName}`);
             const rendered = renderFn({
               ...child.props,
               _config,
+              _metaHtmlId: contentHtmlId,
               colIndex: index,
               cells,
               bodyValues,
@@ -1344,15 +1380,13 @@ var Column = (props) => {
             });
             if (rendered && typeof rendered === "object" && rendered.props && rendered.props.dangerouslySetInnerHTML) {
               const componentHTML = rendered.props.dangerouslySetInnerHTML.__html;
-              const componentType = child.type;
-              const componentName = (componentType?.displayName || componentType?.name || "component").toLowerCase();
               const childProps = child.props;
               const rawContainerPadding = childProps.containerPadding ?? childProps.values?.containerPadding ?? DEFAULT_CONTAINER_PADDING2;
               const containerPadding = typeof rawContainerPadding === "number" ? `${rawContainerPadding}px` : rawContainerPadding;
               const contentValues = {
                 containerPadding,
                 _meta: {
-                  htmlID: nextHtmlId(_config, `u_content_${componentName}`),
+                  htmlID: contentHtmlId,
                   htmlClassNames: `u_content_${componentName}`
                 }
               };
@@ -1523,7 +1557,7 @@ UnlayerProvider.displayName = "UnlayerProvider";
 function useUnlayerConfig() {
   return useContext(getUnlayerContext());
 }
-function ensureMeta2(values, type, index = 0) {
+function ensureMeta(values, type, index = 0) {
   return {
     ...values,
     _meta: {
@@ -1604,17 +1638,17 @@ function walkItem(element, bodyValues, displayMode, headConfig, counters, styles
   const { children, ...restProps } = element.props;
   const mappedValues = propMapper({ children, ...restProps });
   const finalValues = mergeValues(defaultValues, mappedValues);
-  const contentType = name.toLowerCase();
+  const contentType = config.metaName ?? name.toLowerCase();
   const count = nextCounter(counters, `u_content_${contentType}`);
-  const valuesWithMeta = ensureMeta2(finalValues, contentType, count - 1);
-  const head = heads[name];
+  const valuesWithMeta = ensureMeta(finalValues, contentType, count - 1);
+  const head = config.head ?? heads[name];
   callHead(head, valuesWithMeta, bodyValues, displayMode, headConfig, styles, scripts, tags);
 }
 function walkColumn(element, bodyValues, rowValues, displayMode, headConfig, counters, styles, scripts, tags) {
   const semanticProps = extractSemanticProps(element.props);
   const mapped = mapSemanticProps(semanticProps, COLUMN_DEFAULTS, "Column");
   const count = nextCounter(counters, "u_column");
-  const columnValues = ensureMeta2(mergeValues(COLUMN_DEFAULTS, mapped), "column", count - 1);
+  const columnValues = ensureMeta(mergeValues(COLUMN_DEFAULTS, mapped), "column", count - 1);
   const columnHead = heads["Column"];
   callHead(columnHead, columnValues, bodyValues, displayMode, headConfig, styles, scripts, tags);
   const children = collectChildren(element.props.children);
@@ -1626,7 +1660,7 @@ function walkRow(element, bodyValues, displayMode, headConfig, counters, styles,
   const semanticProps = extractSemanticProps(element.props, ["layout"]);
   const mapped = mapSemanticProps(semanticProps, ROW_DEFAULTS, "Row");
   const count = nextCounter(counters, "u_row");
-  const rowValues = ensureMeta2(mergeValues(ROW_DEFAULTS, mapped), "row", count - 1);
+  const rowValues = ensureMeta(mergeValues(ROW_DEFAULTS, mapped), "row", count - 1);
   const rowHead = heads["Row"];
   callHead(rowHead, rowValues, bodyValues, displayMode, headConfig, styles, scripts, tags);
   const children = collectChildren(element.props.children);
@@ -1649,7 +1683,7 @@ function extractHeadFromTree(element, options) {
   const counters = {};
   const semanticProps = extractSemanticProps(element.props);
   const mapped = mapSemanticProps(semanticProps, BODY_DEFAULTS, "Body");
-  const bodyValues = ensureMeta2(mergeValues(BODY_DEFAULTS, mapped), "body", 0);
+  const bodyValues = ensureMeta(mergeValues(BODY_DEFAULTS, mapped), "body", 0);
   const bodyHead = heads["Body"];
   callHead(bodyHead, bodyValues, bodyValues, displayMode, headConfig, styles, scripts, tags);
   const children = collectChildren(element.props.children);
@@ -1667,8 +1701,81 @@ function extractHeadFromTree(element, options) {
   };
 }
 
+// src/utils/document-layouts.ts
+function emailLayout(args) {
+  const { dir, titleTag, tagLines, styleTag, scriptTag, fontLinks, body } = args;
+  const head = [
+    titleTag,
+    tagLines,
+    styleTag,
+    scriptTag,
+    fontLinks && `<!--[if !mso]><!-->${fontLinks}<!--<![endif]-->`
+  ].filter(Boolean).join("\n  ");
+  return `<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html${dir} xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+<!--[if gte mso 9]>
+<xml>
+  <o:OfficeDocumentSettings>
+    <o:AllowPNG/>
+    <o:PixelsPerInch>96</o:PixelsPerInch>
+  </o:OfficeDocumentSettings>
+</xml>
+<![endif]-->
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="x-apple-disable-message-reformatting">
+  <!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
+  ${head}
+</head>
+${body}
+</html>
+`;
+}
+function documentLayout(args) {
+  const { dir, titleTag, tagLines, styleTag, scriptTag, fontLinks, body } = args;
+  const head = [titleTag, tagLines, styleTag, scriptTag, fontLinks].filter(Boolean).join("\n  ");
+  return `<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html${dir} xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  ${head}
+</head>
+${body}
+</html>
+`;
+}
+function webLayout(args) {
+  const { dir, titleTag, tagLines, styleTag, scriptTag, fontLinks, body } = args;
+  const head = [titleTag, fontLinks, tagLines, styleTag, scriptTag].filter(Boolean).join("\n    ");
+  return `<!doctype html>
+<html${dir}>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    ${head}
+  </head>
+  <body>
+${body}
+  </body>
+</html>
+`;
+}
+
 // src/utils/render-to-html.tsx
-function renderToHtml(element, config) {
+var MODE_BY_WRAPPER = {
+  Email: "email",
+  Page: "web",
+  Document: "document"
+};
+function resolveDisplayMode(element, mergedConfig) {
+  const displayName = element.type?.displayName;
+  const wrapperMode = displayName ? MODE_BY_WRAPPER[displayName] : void 0;
+  return wrapperMode ?? element.props.mode ?? mergedConfig.mode ?? "web";
+}
+function renderBody(element, config) {
   const mergedConfig = { ...DEFAULT_CONFIG, ...config };
   try {
     const enriched = React.cloneElement(element, { config: mergedConfig });
@@ -1681,14 +1788,52 @@ Tip: Ensure your tree uses Body > Row > Column > Item structure.`
     );
   }
 }
+function stripOuterDiv(html) {
+  const match = html.match(/^\s*<div[^>]*>([\s\S]*)<\/div>\s*$/);
+  return match ? match[1] : html;
+}
+function escapeForHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function renderToHtml(element, options) {
+  const { title, fonts = [], ...config } = options ?? {};
+  const mergedConfig = { ...DEFAULT_CONFIG, ...config };
+  const displayMode = resolveDisplayMode(element, mergedConfig);
+  const wrapperName = element.type?.displayName;
+  const isUnlayerWrapper = wrapperName === "Body" || (wrapperName ? wrapperName in MODE_BY_WRAPPER : false);
+  const rawBody = renderBody(element, config);
+  const body = isUnlayerWrapper ? stripOuterDiv(rawBody) : rawBody;
+  const { css, js, tags } = extractHeadFromTree(element, {
+    displayMode,
+    headConfig: mergedConfig.headConfig
+  });
+  const layoutArgs = {
+    dir: mergedConfig.textDirection ? ` dir="${escapeForHtml(String(mergedConfig.textDirection))}"` : "",
+    titleTag: title ? `<title>${escapeForHtml(title.trim())}</title>` : "",
+    styleTag: css ? `<style type="text/css">
+${css}
+</style>` : "",
+    scriptTag: js ? `<script type="application/javascript">
+${js}
+</script>` : "",
+    tagLines: tags.join("\n"),
+    fontLinks: fonts.filter((font) => font?.url).map(
+      (font) => `<link href="${escapeForHtml(font.url)}" rel="stylesheet" type="text/css">`
+    ).join(""),
+    body
+  };
+  if (displayMode === "email") return emailLayout(layoutArgs);
+  if (displayMode === "document") return documentLayout(layoutArgs);
+  return webLayout(layoutArgs);
+}
 function renderToPlainText(element, config) {
-  const html = renderToHtml(element, config);
+  const html = renderBody(element, config);
   return htmlToPlainText(html);
 }
 function renderToHtmlParts(element, config) {
-  const body = renderToHtml(element, config);
+  const body = renderBody(element, config);
   const mergedConfig = { ...DEFAULT_CONFIG, ...config };
-  const displayMode = element.props.mode ?? mergedConfig.mode ?? "web";
+  const displayMode = resolveDisplayMode(element, mergedConfig);
   const { css, js, tags } = extractHeadFromTree(element, {
     displayMode,
     headConfig: mergedConfig.headConfig
@@ -1811,10 +1956,11 @@ function processItem(element, counters, layout = {}) {
       `[Unlayer] renderToJson: <${name2}> is not a recognized Unlayer item component. Only components created with createItemComponent are supported.`
     );
   }
-  const { name, defaultValues, propMapper } = config;
-  const contentType = toContentType(name);
-  const count = nextCounter2(counters, `u_content_${contentType}`);
-  const id = makeId(`u_content_${contentType}`, count);
+  const { name, defaultValues, propMapper, slug } = config;
+  const contentType = config.contentType ?? toContentType(name);
+  const metaBase = `u_content_${config.metaName ?? contentType}`;
+  const count = nextCounter2(counters, metaBase);
+  const id = makeId(metaBase, count);
   const { children, ...restProps } = element.props;
   const mappedValues = propMapper({ children, ...restProps });
   const finalValues = mergeValues(defaultValues, mappedValues);
@@ -1827,7 +1973,7 @@ function processItem(element, counters, layout = {}) {
     ...finalValues,
     _meta: {
       htmlID: id,
-      htmlClassNames: `u_content_${contentType}`,
+      htmlClassNames: metaBase,
       ...finalValues._meta || {}
     },
     selectable: true,
@@ -1844,7 +1990,7 @@ function processItem(element, counters, layout = {}) {
     });
     values.src = pinImageSrc(itemSrc, availableWidth);
   }
-  return { type: contentType, values };
+  return slug ? { type: contentType, slug, values } : { type: contentType, values };
 }
 function processColumn(element, counters, layout = {}) {
   const count = nextCounter2(counters, "u_column");
@@ -1988,6 +2134,89 @@ function renderToJson(element) {
   };
 }
 
-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, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };
+// src/utils/register-tool.tsx
+function initialValuesFromOptions(options) {
+  const result = {};
+  for (const group of Object.values(options ?? {})) {
+    for (const [property, option] of Object.entries(group?.options ?? {})) {
+      if (!option || option.enabled === false) continue;
+      if (typeof option.defaultValue !== "undefined") {
+        result[property] = option.defaultValue;
+      }
+    }
+  }
+  return result;
+}
+function withSanitizer(exporter) {
+  return (values, ...args) => {
+    const html = String(exporter(values, ...args) ?? "");
+    const meta = args[args.length - 1];
+    const toSafeHtml = meta?.exporterConfig?.toSafeHtml;
+    return typeof toSafeHtml === "function" ? toSafeHtml(html) : html;
+  };
+}
+function withLinkNormalization(exporter, linkKeys) {
+  if (linkKeys.length === 0) return exporter;
+  return (values, ...args) => {
+    const out = { ...values };
+    for (const key of linkKeys) {
+      const normalized = normalizeLinkValue(out[key]);
+      if (normalized !== void 0) out[key] = normalized;
+    }
+    return exporter(out, ...args);
+  };
+}
+function linkWidgetKeys(options) {
+  const keys = [];
+  for (const group of Object.values(options ?? {})) {
+    for (const [key, option] of Object.entries(group?.options ?? {})) {
+      if (option && option.widget === "link") keys.push(key);
+    }
+  }
+  return keys;
+}
+function registerTool(tool) {
+  if (!tool?.name || typeof tool.name !== "string") {
+    throw new Error("[Unlayer] registerTool: `name` is required");
+  }
+  const exporters = tool.renderer?.exporters;
+  if (!exporters || !exporters.web && !exporters.email) {
+    throw new Error(
+      `[Unlayer] registerTool("${tool.name}"): \`renderer.exporters\` needs at least a \`web\` or \`email\` exporter`
+    );
+  }
+  const linkKeys = linkWidgetKeys(tool.options);
+  const sanitized = {};
+  for (const mode of ["web", "email", "document"]) {
+    const exporter = exporters[mode];
+    if (exporter) {
+      sanitized[mode] = withSanitizer(withLinkNormalization(exporter, linkKeys));
+    }
+  }
+  if (!sanitized.web && sanitized.email) sanitized.web = sanitized.email;
+  return createItemComponent({
+    name: tool.name,
+    displayName: tool.displayName ?? tool.name,
+    // Option-group widget defaults seed the values; tool-level `values`
+    // win — the editor's precedence.
+    defaultValues: {
+      ...initialValuesFromOptions(tool.options),
+      ...tool.values ?? {}
+    },
+    // Flat props are the tool's values; `values` is the escape hatch.
+    propMapper: ({ children: _children, values, ...rest }) => ({
+      ...values ?? {},
+      ...rest
+    }),
+    exporters: sanitized,
+    contentType: "custom",
+    slug: tool.name,
+    metaName: `custom_${tool.name}`,
+    head: tool.renderer.head
+  });
+}
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map