@skbkontur/markdown 2.6.3 → 2.7.0-alpha.0

package/src/MarkdownViewer/Helpers/MarkdownImage.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ImgHref } from '../MarkdownViewer.styles';
-export var MarkdownImage = function (_a) {
-    var src = _a.src;
+export const MarkdownImage = ({ src }) => {
     return (React.createElement(ImgHref, { "aria-label": "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435", href: src, target: "_blank", rel: "noopener noreferrer" },
         React.createElement("img", { src: src, alt: "" })));
 };

package/src/MarkdownViewer/Helpers/MarkdownLink.js

@@ -1,6 +1,3 @@
 import React from 'react';
 import { Href } from '../MarkdownViewer.styles';
-export var MarkdownLink = function (_a) {
-    var href = _a.href, children = _a.children, target = _a.target;
-    return (React.createElement(Href, { href: href, target: target !== null && target !== void 0 ? target : '_blank', rel: "noopener noreferrer" }, children));
-};
+export const MarkdownLink = ({ href, children, target }) => (React.createElement(Href, { href: href, target: target ?? '_blank', rel: "noopener noreferrer" }, children));

package/src/MarkdownViewer/Helpers/MarkdownTable.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Table, TableWrapper } from '../MarkdownViewer.styles';
-export var MarkdownTable = function (_a) {
-    var children = _a.children;
+export const MarkdownTable = ({ children }) => {
     return (React.createElement(TableWrapper, null,
         React.createElement(Table, null, children)));
 };

package/src/MarkdownViewer/MarkdownViewer.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { Button } from '@skbkontur/react-ui';
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
@@ -28,24 +17,27 @@ import { CheckboxCheckedIcon } from '../MarkdownIcons/CheckboxCheckedIcon';
 import { CheckboxUncheckedIcon } from '../MarkdownIcons/CheckboxUncheckedIcon';
 import { ThemeProvider } from '../styles/styled-components';
 import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
-export var MarkdownViewer = function (_a) {
-    var source = _a.source, _b = _a.fileApiUrl, fileApiUrl = _b === void 0 ? '' : _b, _c = _a.profileUrl, profileUrl = _c === void 0 ? '' : _c, downloadFileApi = _a.downloadFileApi;
-    var downloadFile = useFileLogic(undefined, downloadFileApi).downloadFile;
+export const MarkdownViewer = ({ source, fileApiUrl = '', profileUrl = '', downloadFileApi, }) => {
+    const { downloadFile } = useFileLogic(undefined, downloadFileApi);
     if (!source) {
         return null;
     }
-    return (React.createElement(MarkdownThemeConsumer, null, function (theme) { return (React.createElement(ThemeProvider, { theme: theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME },
+    return (React.createElement(MarkdownThemeConsumer, null, theme => (React.createElement(ThemeProvider, { theme: theme ?? DEFAULT_MARKDOWN_THEME },
         React.createElement(Wrapper, { "aria-label": "\u0424\u043E\u0440\u043C\u0430\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u043D\u044B\u0439 \u0442\u0435\u043A\u0441\u0442" },
             React.createElement(ReactMarkdown, { components: getCustomComponents(), remarkPlugins: [gfm, remarkMath, remarkBreaks], rehypePlugins: [
                     rehypeRaw,
                     [
                         rehypeSanitize,
                         {
-                            attributes: __assign(__assign({}, defaultSchema.attributes), { div: [['className', /^language-./, 'math-inline', 'math-display', 'math']], span: [['className', /^language-./, 'math-inline', 'math-display', 'math']] }),
+                            attributes: {
+                                ...defaultSchema.attributes,
+                                div: [['className', /^language-./, 'math-inline', 'math-display', 'math']],
+                                span: [['className', /^language-./, 'math-inline', 'math-display', 'math']],
+                            },
                         },
                     ],
                     rehypeKatex,
-                ], linkTarget: "_blank" }, source)))); }));
+                ], linkTarget: "_blank" }, source))))));
     function getCustomComponents() {
         return {
             a: renderLink,
@@ -53,22 +45,22 @@ export var MarkdownViewer = function (_a) {
             input: renderInput,
             ul: renderList,
             ol: renderOrderedList,
-            blockquote: function (props) { return React.createElement(BlockQuote, null, props.children); },
-            p: function (props) { return React.createElement(Paragraph, null, props.children); },
-            img: function (props) { var _a; return React.createElement(MarkdownImage, { src: (_a = props.src) !== null && _a !== void 0 ? _a : '' }); },
-            table: function (props) { return React.createElement(MarkdownTable, null, props.children); },
+            blockquote: props => React.createElement(BlockQuote, null, props.children),
+            p: props => React.createElement(Paragraph, null, props.children),
+            img: props => React.createElement(MarkdownImage, { src: props.src ?? '' }),
+            table: props => React.createElement(MarkdownTable, null, props.children),
         };
     }
     function renderListItem(props) {
-        var children = props.children;
+        const children = props.children;
         return checkIfChecklistItem(props) ? React.createElement(CheckListItem, null, children) : React.createElement(ListItem, null, children);
     }
     function renderLink(props) {
-        var _a = props.href, href = _a === void 0 ? '' : _a, children = props.children;
+        const { href = '', children } = props;
         if (fileApiUrl && href.startsWith(fileApiUrl)) {
-            var id_1 = href.replace(fileApiUrl, '');
+            const id = href.replace(fileApiUrl, '');
             return (React.createElement(FileButtonWrapper, null,
-                React.createElement(Button, { use: "link", icon: React.createElement(AttachPaperclip, null), onClick: function () { return downloadFile(id_1); } },
+                React.createElement(Button, { use: "link", icon: React.createElement(AttachPaperclip, null), onClick: () => downloadFile(id) },
                     React.createElement(FileName, null, children),
                     React.createElement(VisuallyHidden, null,
                         "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0444\u0430\u0439\u043B $",
@@ -86,6 +78,6 @@ export var MarkdownViewer = function (_a) {
         return React.createElement("ul", { style: getListStyle(!!props.depth) }, props.children);
     }
     function renderOrderedList(props) {
-        return React.createElement("ol", { style: getListStyle(!!(props === null || props === void 0 ? void 0 : props.depth)) }, props.children);
+        return React.createElement("ol", { style: getListStyle(!!props?.depth) }, props.children);
     }
 };

package/src/MarkdownViewer/MarkdownViewer.styles.js

@@ -1,23 +1,167 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import styled, { css } from '../styles/styled-components';
-var baseVisuallyHiddenStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"], ["\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n"])));
-export var CheckBoxWrapper = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: baseline;\n  transform: translateX(-10%);\n"], ["\n  display: inline-flex;\n  align-items: baseline;\n  transform: translateX(-10%);\n"])));
-export var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  position: relative;\n\n  word-break: break-word;\n\n  p,\n  hr,\n  table,\n  blockquote {\n    margin-bottom: 16px;\n  }\n\n  ul > li > ", ", ul > li > p > ", " {\n    display: inline-flex;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    padding: 0;\n  }\n\n  ul,\n  ol,\n  li {\n    p {\n      margin: 0;\n    }\n  }\n\n  h1 {\n    margin-top: 36px;\n    margin-bottom: 28px;\n  }\n\n  h2 {\n    margin-top: 32px;\n    margin-bottom: 24px;\n  }\n\n  h3 {\n    margin-top: 28px;\n    margin-bottom: 20px;\n  }\n\n  h4 {\n    margin-top: 24px;\n    margin-bottom: 16px;\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  button {\n    text-align: left;\n    color: ", ";\n  }\n\n  table {\n    background: transparent;\n  }\n\n  blockquote {\n    margin: 24px 0;\n    padding-left: 16px;\n  }\n\n  hr {\n    margin-top: 0;\n  }\n\n  code {\n    display: inline-block;\n    white-space: pre-wrap;\n    padding: 4px;\n    border-radius: 8px;\n    border: 1px solid ", ";\n  }\n\n  ul,\n  ol {\n    padding-inline-start: 0;\n\n    li {\n      margin-inline-start: 0;\n      margin: 8px 0 8px 20px;\n    }\n  }\n\n  .math {\n    [aria-hidden='true'] {\n      ", ";\n    }\n  }\n\n  & > *:first-child {\n    margin-top: 0 !important;\n    padding-top: 0 !important;\n  }\n\n  & > *:last-child {\n    margin-bottom: 0 !important;\n    padding-bottom: 0 !important;\n  }\n"], ["\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  position: relative;\n\n  word-break: break-word;\n\n  p,\n  hr,\n  table,\n  blockquote {\n    margin-bottom: 16px;\n  }\n\n  ul > li > ", ", ul > li > p > ", " {\n    display: inline-flex;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    padding: 0;\n  }\n\n  ul,\n  ol,\n  li {\n    p {\n      margin: 0;\n    }\n  }\n\n  h1 {\n    margin-top: 36px;\n    margin-bottom: 28px;\n  }\n\n  h2 {\n    margin-top: 32px;\n    margin-bottom: 24px;\n  }\n\n  h3 {\n    margin-top: 28px;\n    margin-bottom: 20px;\n  }\n\n  h4 {\n    margin-top: 24px;\n    margin-bottom: 16px;\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  button {\n    text-align: left;\n    color: ", ";\n  }\n\n  table {\n    background: transparent;\n  }\n\n  blockquote {\n    margin: 24px 0;\n    padding-left: 16px;\n  }\n\n  hr {\n    margin-top: 0;\n  }\n\n  code {\n    display: inline-block;\n    white-space: pre-wrap;\n    padding: 4px;\n    border-radius: 8px;\n    border: 1px solid ", ";\n  }\n\n  ul,\n  ol {\n    padding-inline-start: 0;\n\n    li {\n      margin-inline-start: 0;\n      margin: 8px 0 8px 20px;\n    }\n  }\n\n  .math {\n    [aria-hidden='true'] {\n      ", ";\n    }\n  }\n\n  & > *:first-child {\n    margin-top: 0 !important;\n    padding-top: 0 !important;\n  }\n\n  & > *:last-child {\n    margin-bottom: 0 !important;\n    padding-bottom: 0 !important;\n  }\n"])), CheckBoxWrapper, CheckBoxWrapper, function (p) { var _a, _b; return (_b = (_a = p.theme) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.link; }, function (p) { var _a, _b; return (_b = (_a = p.theme) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.grayDefault; }, baseVisuallyHiddenStyle);
-export var CheckListItem = styled.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  list-style: none;\n  margin-left: 0 !important;\n  padding-inline-start: 22px;\n  position: relative;\n"], ["\n  list-style: none;\n  margin-left: 0 !important;\n  padding-inline-start: 22px;\n  position: relative;\n"])));
-export var ListItem = styled.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-inline-start: 2px;\n"], ["\n  padding-inline-start: 2px;\n"])));
-export var Paragraph = styled.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
-export var BlockQuote = styled.blockquote(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n  padding-left: 8px;\n  border-left: 4px solid ", ";\n"], ["\n  margin: 0;\n  padding-left: 8px;\n  border-left: 4px solid ", ";\n"])), function (p) { var _a, _b; return (_b = (_a = p.theme) === null || _a === void 0 ? void 0 : _a.colors) === null || _b === void 0 ? void 0 : _b.grayDefault; });
-export var FileButtonWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  white-space: pre-wrap;\n"], ["\n  display: flex;\n  white-space: pre-wrap;\n"])));
-export var Href = styled.a(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  white-space: pre-wrap;\n"], ["\n  white-space: pre-wrap;\n"])));
-export var FileName = styled.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  white-space: pre-wrap;\n"], ["\n  white-space: pre-wrap;\n"])));
-export var ImgHref = styled.a(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  text-decoration: none !important;\n  border: none !important;\n"], ["\n  text-decoration: none !important;\n  border: none !important;\n"])));
-export var TableWrapper = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  width: 100%;\n  overflow-x: auto;\n"], ["\n  width: 100%;\n  overflow-x: auto;\n"])));
-export var Table = styled.table(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  width: 100%;\n  min-width: 400px;\n"], ["\n  width: 100%;\n  min-width: 400px;\n"])));
+const baseVisuallyHiddenStyle = css `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+`;
+export const CheckBoxWrapper = styled.span `
+  display: inline-flex;
+  align-items: baseline;
+  transform: translateX(-10%);
+`;
+export const Wrapper = styled.div `
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  position: relative;
+
+  word-break: break-word;
+
+  p,
+  hr,
+  table,
+  blockquote {
+    margin-bottom: 16px;
+  }
+
+  ul > li > ${CheckBoxWrapper}, ul > li > p > ${CheckBoxWrapper} {
+    display: inline-flex;
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    padding: 0;
+  }
+
+  ul,
+  ol,
+  li {
+    p {
+      margin: 0;
+    }
+  }
+
+  h1 {
+    margin-top: 36px;
+    margin-bottom: 28px;
+  }
+
+  h2 {
+    margin-top: 32px;
+    margin-bottom: 24px;
+  }
+
+  h3 {
+    margin-top: 28px;
+    margin-bottom: 20px;
+  }
+
+  h4 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  button {
+    text-align: left;
+    color: ${p => p.theme?.colors?.link};
+  }
+
+  table {
+    background: transparent;
+  }
+
+  blockquote {
+    margin: 24px 0;
+    padding-left: 16px;
+  }
+
+  hr {
+    margin-top: 0;
+  }
+
+  code {
+    display: inline-block;
+    white-space: pre-wrap;
+    padding: 4px;
+    border-radius: 8px;
+    border: 1px solid ${p => p.theme?.colors?.grayDefault};
+  }
+
+  ul,
+  ol {
+    padding-inline-start: 0;
+
+    li {
+      margin-inline-start: 0;
+      margin: 8px 0 8px 20px;
+    }
+  }
+
+  .math {
+    [aria-hidden='true'] {
+      ${baseVisuallyHiddenStyle};
+    }
+  }
+
+  & > *:first-child {
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+  }
+`;
+export const CheckListItem = styled.li `
+  list-style: none;
+  margin-left: 0 !important;
+  padding-inline-start: 22px;
+  position: relative;
+`;
+export const ListItem = styled.li `
+  padding-inline-start: 2px;
+`;
+export const Paragraph = styled.p `
+  margin: 0;
+`;
+export const BlockQuote = styled.blockquote `
+  margin: 0;
+  padding-left: 8px;
+  border-left: 4px solid ${p => p.theme?.colors?.grayDefault};
+`;
+export const FileButtonWrapper = styled.div `
+  display: flex;
+  white-space: pre-wrap;
+`;
+export const Href = styled.a `
+  white-space: pre-wrap;
+`;
+export const FileName = styled.span `
+  white-space: pre-wrap;
+`;
+export const ImgHref = styled.a `
+  text-decoration: none !important;
+  border: none !important;
+`;
+export const TableWrapper = styled.div `
+  width: 100%;
+  overflow-x: auto;
+`;
+export const Table = styled.table `
+  width: 100%;
+  min-width: 400px;
+`;
 export function getListStyle(depth) {
     return depth ? { marginTop: 4 } : { marginBottom: 16 };
 }
-export var VisuallyHidden = styled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), baseVisuallyHiddenStyle);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+export const VisuallyHidden = styled.span `
+  ${baseVisuallyHiddenStyle};
+`;

package/src/styles/styled-components.js

@@ -1,4 +1,4 @@
 import * as styledComponents from 'styled-components';
-var _a = styledComponents, styled = _a.default, css = _a.css, ThemeProvider = _a.ThemeProvider, createGlobalStyle = _a.createGlobalStyle, useTheme = _a.useTheme;
+const { default: styled, css, ThemeProvider, createGlobalStyle, useTheme, } = styledComponents;
 export { css, ThemeProvider, useTheme, createGlobalStyle };
 export default styled;

package/src/styles/theme.js

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-export var DEFAULT_MARKDOWN_THEME = {
+export const DEFAULT_MARKDOWN_THEME = {
     colors: {
         text: '#222',
         brand: '#e76f57',
@@ -14,7 +14,7 @@ export var DEFAULT_MARKDOWN_THEME = {
     elementsLineHeight: '24px',
     themeMode: 'light',
 };
-export var DEFAULT_MARKDOWN_DARK_THEME = {
+export const DEFAULT_MARKDOWN_DARK_THEME = {
     colors: {
         text: '#fff',
         brand: '#e76f57',
@@ -29,6 +29,6 @@ export var DEFAULT_MARKDOWN_DARK_THEME = {
     elementsLineHeight: '24px',
     themeMode: 'dark',
 };
-export var MarkdownThemeContext = createContext(DEFAULT_MARKDOWN_THEME);
-export var MarkdownThemeProvider = MarkdownThemeContext.Provider;
-export var MarkdownThemeConsumer = MarkdownThemeContext.Consumer;
+export const MarkdownThemeContext = createContext(DEFAULT_MARKDOWN_THEME);
+export const MarkdownThemeProvider = MarkdownThemeContext.Provider;
+export const MarkdownThemeConsumer = MarkdownThemeContext.Consumer;