@evergis/react 4.0.98 → 4.0.99

package/dist/react.esm.js

@@ -10060,6 +10060,20 @@ const ElementLink = memo(({ type, elementConfig }) => {
         : jsx(LocalLink, { style: style, link: link });
 });
 
+/**
+ * Пер-тег переопределение типографики из конфига. Пустой результат, если для тега
+ * ничего не задано — тогда действует дефолт, объявленный в самом правиле тега.
+ */
+const tagTypography = (tag) => ({ $typography }) => {
+    const style = $typography?.[tag];
+    if (!style)
+        return "";
+    return css `
+    ${style.fontSize && `font-size: ${style.fontSize};`}
+    ${style.lineHeight && `line-height: ${style.lineHeight};`}
+    ${style.fontWeight != null && `font-weight: ${style.fontWeight};`}
+  `;
+};
 const MarkdownWrapper = styled.div.withConfig({ displayName: "MarkdownWrapper", componentId: "sc-1iv8z8a" }) `
   padding: 0;
   background: transparent;
@@ -10074,6 +10088,7 @@ const MarkdownWrapper = styled.div.withConfig({ displayName: "MarkdownWrapper",
     letter-spacing: 0.0052rem;
     margin: 0 0 1rem 0;
     font-weight: 400;
+    ${tagTypography("p")}
 
     &:last-child {
       margin-bottom: 0;
@@ -10089,16 +10104,31 @@ const MarkdownWrapper = styled.div.withConfig({ displayName: "MarkdownWrapper",
   h1 {
     font-size: 1.5rem;
     line-height: 1.75rem;
+    ${tagTypography("h1")}
   }
 
   h2 {
     font-size: 1.25rem;
     line-height: 1.5rem;
+    ${tagTypography("h2")}
   }
 
   h3 {
     font-size: 1rem;
     line-height: 1.25rem;
+    ${tagTypography("h3")}
+  }
+
+  h4 {
+    ${tagTypography("h4")}
+  }
+
+  h5 {
+    ${tagTypography("h5")}
+  }
+
+  h6 {
+    ${tagTypography("h6")}
   }
 
   /* Images */
@@ -10133,6 +10163,7 @@ const MarkdownWrapper = styled.div.withConfig({ displayName: "MarkdownWrapper",
       font-size: 0.875rem;
       line-height: 1rem;
       margin-bottom: 0.5rem;
+      ${tagTypography("li")}
     }
   }
 
@@ -10143,6 +10174,7 @@ const MarkdownWrapper = styled.div.withConfig({ displayName: "MarkdownWrapper",
     border-radius: 0.25rem;
     font-family: monospace;
     font-size: 0.8125rem;
+    ${tagTypography("code")}
   }
 
   pre {
@@ -10195,8 +10227,7 @@ const ElementMarkdown = memo(({ elementConfig, type }) => {
     const { t } = useGlobalContext();
     const [expanded, setExpanded] = useState(false);
     const { attributeName, value, options } = elementConfig || {};
-    const { noMargin } = options || {};
-    const expandLength = options?.expandLength || 0;
+    const { noMargin, expandLength = 0, typography } = options || {};
     // Get Markdown content from:
     // 1. value (static content)
     // 2. attribute by attributeName (dynamic content from data)
@@ -10212,16 +10243,16 @@ const ElementMarkdown = memo(({ elementConfig, type }) => {
     const shouldShowExpand = expandLength > 0 && markdownString.length > expandLength;
     // If expand is not needed, show full content
     if (!shouldShowExpand) {
-        return (jsx(MarkdownWrapper, { "$noMargin": noMargin, children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw, [rehypeSanitize, sanitizeSchema]], children: markdownString }) }));
+        return (jsx(MarkdownWrapper, { "$typography": typography, "$noMargin": noMargin, children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw, [rehypeSanitize, sanitizeSchema]], children: markdownString }) }));
     }
     // Collapsed state
     if (!expanded) {
         // Truncated content for collapsed state
         const truncatedContent = markdownString.substring(0, expandLength);
-        return (jsxs(MarkdownWrapper, { "$noMargin": noMargin, children: [jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw, [rehypeSanitize, sanitizeSchema]], children: truncatedContent }), jsx(LegendToggler, { onClick: () => setExpanded(true), children: t("more", { ns: "dashboard", defaultValue: "Подробнее" }) })] }));
+        return (jsxs(MarkdownWrapper, { "$typography": typography, "$noMargin": noMargin, children: [jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw, [rehypeSanitize, sanitizeSchema]], children: truncatedContent }), jsx(LegendToggler, { onClick: () => setExpanded(true), children: t("more", { ns: "dashboard", defaultValue: "Подробнее" }) })] }));
     }
     // Expanded state
-    return (jsxs(MarkdownWrapper, { "$noMargin": noMargin, children: [jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw, rehypeSanitize], children: markdownString }), jsx(LegendToggler, { toggled: true, onClick: () => setExpanded(false), children: t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) })] }));
+    return (jsxs(MarkdownWrapper, { "$typography": typography, "$noMargin": noMargin, children: [jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw, [rehypeSanitize, sanitizeSchema]], children: markdownString }), jsx(LegendToggler, { toggled: true, onClick: () => setExpanded(false), children: t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) })] }));
 });
 
 const SmallPreviewContainer = styled.div.withConfig({ displayName: "SmallPreviewContainer", componentId: "sc-1tgzhdl" }) `