@evergis/react 4.0.98 → 4.0.99

package/dist/components/Dashboard/componentTypes.d.ts

@@ -74,7 +74,7 @@ export interface ElementLinkConfig extends Omit<ConfigContainerChild, "options"
 export interface ElementLinkProps extends Omit<ContainerProps, "elementConfig"> {
     elementConfig?: ElementLinkConfig;
 }
-export type ElementMarkdownOptions = Pick<ConfigOptions, "expandLength" | "noMargin">;
+export type ElementMarkdownOptions = Pick<ConfigOptions, "expandLength" | "noMargin" | "typography">;
 export interface ElementMarkdownConfig extends Omit<ConfigContainerChild, "options" | "type"> {
     type?: "markdown";
     options?: ElementMarkdownOptions;

package/dist/components/Dashboard/elements/ElementMarkdown/styled.d.ts

@@ -1,3 +1,6 @@
-export declare const MarkdownWrapper: import('styled-components').StyledComponent<"div", any, {
+import { MarkdownTypography } from '../../types';
+export interface MarkdownWrapperProps {
+    $typography?: MarkdownTypography;
     $noMargin?: boolean;
-}, never>;
+}
+export declare const MarkdownWrapper: import('styled-components').StyledComponent<"div", any, MarkdownWrapperProps, never>;

package/dist/components/Dashboard/types.d.ts

@@ -180,6 +180,19 @@ export interface ConfigLayoutOptions {
     barWidth?: number;
     barHeight?: number;
 }
+/** Теги markdown, для которых можно переопределить типографику из конфига. */
+export type MarkdownTypographyTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "li" | "code";
+/** Переопределение размера/интервала/начертания одного тега markdown. */
+export interface MarkdownTagTypography {
+    fontSize?: FontSizeToken | string;
+    lineHeight?: string;
+    fontWeight?: number | string;
+}
+/**
+ * Пер-тег типографика markdown-виджета. Отсутствующий тег или свойство —
+ * дефолт `MarkdownWrapper` (см. `elements/ElementMarkdown/styled.ts`).
+ */
+export type MarkdownTypography = Partial<Record<MarkdownTypographyTag, MarkdownTagTypography>>;
 /** Типографика и цвета. */
 export interface ConfigTypographyOptions {
     fontSize?: string;
@@ -192,6 +205,7 @@ export interface ConfigTypographyOptions {
     colors?: string[];
     colorAttribute?: string;
     statusColors?: Record<RemoteTaskStatus, string>;
+    typography?: MarkdownTypography;
 }
 /** Поведение «раскрытия». */
 export interface ConfigExpandableOptions {

package/dist/index.js

@@ -10062,6 +10062,20 @@ const ElementLink = React.memo(({ type, elementConfig }) => {
         : jsxRuntime.jsx(LocalLink, { style: style, link: link });
 });
 
+/**
+ * Пер-тег переопределение типографики из конфига. Пустой результат, если для тега
+ * ничего не задано — тогда действует дефолт, объявленный в самом правиле тега.
+ */
+const tagTypography = (tag) => ({ $typography }) => {
+    const style = $typography?.[tag];
+    if (!style)
+        return "";
+    return styled.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;
@@ -10076,6 +10090,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;
@@ -10091,16 +10106,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 */
@@ -10135,6 +10165,7 @@ const MarkdownWrapper = styled.div.withConfig({ displayName: "MarkdownWrapper",
       font-size: 0.875rem;
       line-height: 1rem;
       margin-bottom: 0.5rem;
+      ${tagTypography("li")}
     }
   }
 
@@ -10145,6 +10176,7 @@ const MarkdownWrapper = styled.div.withConfig({ displayName: "MarkdownWrapper",
     border-radius: 0.25rem;
     font-family: monospace;
     font-size: 0.8125rem;
+    ${tagTypography("code")}
   }
 
   pre {
@@ -10197,8 +10229,7 @@ const ElementMarkdown = React.memo(({ elementConfig, type }) => {
     const { t } = useGlobalContext();
     const [expanded, setExpanded] = React.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)
@@ -10214,16 +10245,16 @@ const ElementMarkdown = React.memo(({ elementConfig, type }) => {
     const shouldShowExpand = expandLength > 0 && markdownString.length > expandLength;
     // If expand is not needed, show full content
     if (!shouldShowExpand) {
-        return (jsxRuntime.jsx(MarkdownWrapper, { "$noMargin": noMargin, children: jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw, [rehypeSanitize, sanitizeSchema]], children: markdownString }) }));
+        return (jsxRuntime.jsx(MarkdownWrapper, { "$typography": typography, "$noMargin": noMargin, children: jsxRuntime.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 (jsxRuntime.jsxs(MarkdownWrapper, { "$noMargin": noMargin, children: [jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw, [rehypeSanitize, sanitizeSchema]], children: truncatedContent }), jsxRuntime.jsx(uilibGl.LegendToggler, { onClick: () => setExpanded(true), children: t("more", { ns: "dashboard", defaultValue: "Подробнее" }) })] }));
+        return (jsxRuntime.jsxs(MarkdownWrapper, { "$typography": typography, "$noMargin": noMargin, children: [jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw, [rehypeSanitize, sanitizeSchema]], children: truncatedContent }), jsxRuntime.jsx(uilibGl.LegendToggler, { onClick: () => setExpanded(true), children: t("more", { ns: "dashboard", defaultValue: "Подробнее" }) })] }));
     }
     // Expanded state
-    return (jsxRuntime.jsxs(MarkdownWrapper, { "$noMargin": noMargin, children: [jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw, rehypeSanitize], children: markdownString }), jsxRuntime.jsx(uilibGl.LegendToggler, { toggled: true, onClick: () => setExpanded(false), children: t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) })] }));
+    return (jsxRuntime.jsxs(MarkdownWrapper, { "$typography": typography, "$noMargin": noMargin, children: [jsxRuntime.jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeRaw, [rehypeSanitize, sanitizeSchema]], children: markdownString }), jsxRuntime.jsx(uilibGl.LegendToggler, { toggled: true, onClick: () => setExpanded(false), children: t("hide", { ns: "dashboard", defaultValue: "Свернуть" }) })] }));
 });
 
 const SmallPreviewContainer = styled.div.withConfig({ displayName: "SmallPreviewContainer", componentId: "sc-1tgzhdl" }) `