@skbkontur/markdown 1.5.0 → 1.6.0

package/src/MarkdownIcons/NumberedList.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export var NumberedList = function () { return (React.createElement("svg", { width: "15", height: "14", viewBox: "0 0 15 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M2.71209 0.0472114C2.88778 0.129501 3.00001 0.305997 3.00001 0.500006V5.50001C3.00001 5.77615 2.77615 6.00001 2.50001 6.00001C2.22387 6.00001 2.00001 5.77615 2.00001 5.50001V1.56753L1.3201 2.13412C1.10797 2.3109 0.792684 2.28224 0.615902 2.0701C0.43912 1.85796 0.467782 1.54268 0.67992 1.3659L2.17992 0.115895C2.32896 -0.00830596 2.5364 -0.0350785 2.71209 0.0472114Z", fill: "currentColor" }),
+    React.createElement("path", { d: "M6.50001 2.00001C6.22387 2.00001 6.00001 2.22386 6.00001 2.50001C6.00001 2.77615 6.22387 3.00001 6.50001 3.00001H14.5C14.7762 3.00001 15 2.77615 15 2.50001C15 2.22386 14.7762 2.00001 14.5 2.00001H6.50001Z", fill: "currentColor" }),
+    React.createElement("path", { d: "M6.50001 10C6.22387 10 6.00001 10.2239 6.00001 10.5C6.00001 10.7761 6.22387 11 6.50001 11H14.5C14.7762 11 15 10.7761 15 10.5C15 10.2239 14.7762 10 14.5 10H6.50001Z", fill: "currentColor" }),
+    React.createElement("path", { d: "M1.55634 9.49196C1.68544 9.27177 1.8093 9.15912 1.92143 9.09655C2.03381 9.03383 2.17464 8.99896 2.37504 9.00003C2.5843 9.00114 2.77363 9.07222 2.9049 9.19165C3.02784 9.30349 3.13038 9.48457 3.13038 9.77831V9.93822C3.07661 10.3953 2.72366 10.6219 2.06126 11.0281C1.4712 11.3899 0.625013 11.9159 0.625013 13.0738V13.5C0.625013 13.7761 0.84887 14 1.12501 14H3.75001C4.02615 14 4.25001 13.7761 4.25001 13.5C4.25001 13.2239 4.02615 13 3.75001 13H1.62713C1.65634 12.5028 1.98696 12.2467 2.58403 11.8806C2.61887 11.8592 2.65517 11.8373 2.69263 11.8146C3.23939 11.484 4.03302 11.0042 4.1281 10.0123C4.12962 9.9964 4.13038 9.98047 4.13038 9.96454V9.77831C4.13038 9.22236 3.92303 8.76599 3.57784 8.45195C3.241 8.14551 2.80398 8.0023 2.38036 8.00004C2.05843 7.99833 1.73598 8.05487 1.43413 8.22331C1.13202 8.39189 0.890698 8.65015 0.693683 8.98618C0.554014 9.22439 0.633903 9.53073 0.87212 9.6704C1.11034 9.81007 1.41667 9.73018 1.55634 9.49196Z", fill: "currentColor" }))); };

package/src/MarkdownIcons/Table.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Table: () => JSX.Element;

package/src/MarkdownIcons/Table.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export var Table = function () { return (React.createElement("svg", { width: "14", height: "10", viewBox: "0 0 14 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M1 5V9H7M1 5V1H4H7M1 5H13M13 5V1H7M13 5V9H7M7 1V9", stroke: "currentColor", strokeLinecap: "round" }))); };

package/src/MarkdownIcons/ToolPencil.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ToolPencil: () => JSX.Element;

package/src/MarkdownIcons/ToolPencil.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export var ToolPencil = function () { return (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.4755 0.43885C11.8897 -0.146935 10.94 -0.146934 10.3542 0.438852L0.43934 10.3537C0.158035 10.635 0 11.0165 0 11.4144V13.5001C0 13.7763 0.223858 14.0001 0.5 14.0001H2.58579C2.98361 14.0001 3.36514 13.8421 3.64645 13.5608L13.5613 3.64595C14.1471 3.06017 14.1471 2.11042 13.5613 1.52463L12.4755 0.43885ZM11.0613 1.14596C11.2566 0.950696 11.5731 0.950696 11.7684 1.14596L12.8542 2.23174C13.0495 2.427 13.0495 2.74358 12.8542 2.93885L11.75 4.04305L9.9571 2.25016L11.0613 1.14596ZM9.25 2.95726L1.14645 11.0608C1.05268 11.1546 1 11.2818 1 11.4144V13.0001H2.58579C2.71839 13.0001 2.84557 12.9475 2.93934 12.8537L11.0429 4.75015L9.25 2.95726Z", fill: "currentColor" }))); };

package/src/MarkdownViewer/Helpers/MarkdownImage.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface Props {
+    src: string;
+}
+export declare const MarkdownImage: FC<Props>;
+export {};

package/src/MarkdownViewer/Helpers/MarkdownImage.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ImgHref } from '../MarkdownViewer.styles';
+export var MarkdownImage = function (_a) {
+    var src = _a.src;
+    return (React.createElement(ImgHref, { href: src, target: "_blank", rel: "noopener noreferrer" },
+        React.createElement("img", { src: src, alt: "" })));
+};

package/src/MarkdownViewer/Helpers/MarkdownLink.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { MarkdownLinkProps } from '../types';
+export declare const MarkdownLink: ({ href, children, target }: MarkdownLinkProps) => JSX.Element;

package/src/MarkdownViewer/Helpers/MarkdownLink.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export var MarkdownLink = function (_a) {
+    var href = _a.href, children = _a.children, target = _a.target;
+    return (React.createElement("a", { href: href, target: target !== null && target !== void 0 ? target : '_blank', rel: "noopener noreferrer" }, children));
+};

package/src/MarkdownViewer/MarkdownViewer.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+export interface MarkdownViewerProps {
+    /** Метод апи для скачивания файлов */
+    downloadFileApi?: (id: string) => Promise<File>;
+    /** Url апи для файлов  */
+    fileApiUrl?: string;
+    /** Url для профиля сотрудника  */
+    profileUrl?: string;
+    /** MD-текст  */
+    source?: string;
+}
+export declare const MarkdownViewer: FC<MarkdownViewerProps>;

package/src/MarkdownViewer/MarkdownViewer.js

@@ -0,0 +1,70 @@
+import { Button, Checkbox } from '@skbkontur/react-ui';
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
+import remarkBreaks from 'remark-breaks';
+import gfm from 'remark-gfm';
+import { MarkdownImage } from './Helpers/MarkdownImage';
+import { MarkdownLink } from './Helpers/MarkdownLink';
+import { BlockQuote, FileButtonWrapper, getListStyle, ListItem, Paragraph, VisuallyHidden, Wrapper, } from './MarkdownViewer.styles';
+import { useFileLogic } from '../Markdown/Files/Files.logic';
+import { AttachPaperclip } from '../MarkdownIcons/AttachPaperclip';
+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;
+    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 },
+        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, remarkBreaks], rehypePlugins: [rehypeRaw, rehypeSanitize], linkTarget: "_blank" }, source)))); }));
+    function getCustomComponents() {
+        return {
+            a: renderLink,
+            li: renderListItem,
+            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 : '' }); },
+        };
+    }
+    function renderListItem(props) {
+        var children = props.children;
+        if (props.ordered)
+            return React.createElement("li", null, children);
+        return checkIfChecklistItem(props) ? getCheckListItem(children) : React.createElement("li", null, children);
+    }
+    function renderLink(props) {
+        var _a = props.href, href = _a === void 0 ? '' : _a, children = props.children;
+        if (fileApiUrl && href.startsWith(fileApiUrl)) {
+            var id_1 = href.replace(fileApiUrl, '');
+            return (React.createElement(FileButtonWrapper, null,
+                React.createElement(Button, { use: "link", icon: React.createElement(AttachPaperclip, null), onClick: function () { return downloadFile(id_1); } },
+                    children,
+                    React.createElement(VisuallyHidden, null,
+                        "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0444\u0430\u0439\u043B $",
+                        children))));
+        }
+        return href.startsWith('@') ? (React.createElement(MarkdownLink, { href: profileUrl + href.replace('@', '/') }, children)) : (React.createElement(MarkdownLink, { href: href }, children));
+    }
+    function checkIfChecklistItem(props) {
+        return props.checked !== null || props.className === 'task-list-item';
+    }
+    function getCheckListItem(children) {
+        return React.createElement(ListItem, null, children);
+    }
+    function renderInput(props) {
+        return React.createElement(Checkbox, { checked: props.checked }, props.children);
+    }
+    function renderList(props) {
+        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);
+    }
+};

package/src/MarkdownViewer/MarkdownViewer.styles.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("../..").MarkdownTheme, {}, never>;
+export declare const ListItem: import("styled-components").StyledComponent<"li", import("../..").MarkdownTheme, {}, never>;
+export declare const Paragraph: import("styled-components").StyledComponent<"p", import("../..").MarkdownTheme, {}, never>;
+export declare const BlockQuote: import("styled-components").StyledComponent<"blockquote", import("../..").MarkdownTheme, {}, never>;
+export declare const FileButtonWrapper: import("styled-components").StyledComponent<"div", import("../..").MarkdownTheme, {}, never>;
+export declare const ImgHref: import("styled-components").StyledComponent<"a", import("../..").MarkdownTheme, {}, never>;
+export declare function getListStyle(depth: boolean): CSSProperties;
+export declare const VisuallyHidden: import("styled-components").StyledComponent<"span", import("../..").MarkdownTheme, {}, never>;

package/src/MarkdownViewer/MarkdownViewer.styles.js

@@ -0,0 +1,16 @@
+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 from '../styles/styled-components';
+export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n\n  word-break: break-word;\n\n  p,\n  table,\n  blockquote {\n    margin-bottom: 16px;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  ul,\n  ol,\n  li {\n    p {\n      margin: 0;\n    }\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5 {\n    margin-bottom: 8px;\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  overflow-wrap: break-word;\n  word-wrap: break-word;\n\n  word-break: break-word;\n\n  p,\n  table,\n  blockquote {\n    margin-bottom: 16px;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  ul,\n  ol,\n  li {\n    p {\n      margin: 0;\n    }\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5 {\n    margin-bottom: 8px;\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"])), 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; });
+export var ListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  list-style: none;\n  margin-inline-start: -20px;\n"], ["\n  list-style: none;\n  margin-inline-start: -20px;\n"])));
+export var Paragraph = styled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+export var BlockQuote = styled.blockquote(templateObject_4 || (templateObject_4 = __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_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+export var ImgHref = styled.a(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  text-decoration: none !important;\n  border: none !important;\n"], ["\n  text-decoration: none !important;\n  border: none !important;\n"])));
+export function getListStyle(depth) {
+    return depth ? { marginTop: 4 } : { marginBottom: 16 };
+}
+export var VisuallyHidden = styled.span(templateObject_7 || (templateObject_7 = __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"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/src/MarkdownViewer/index.d.ts

@@ -0,0 +1 @@
+export { MarkdownViewer } from './MarkdownViewer';

package/src/MarkdownViewer/index.js

@@ -0,0 +1 @@
+export { MarkdownViewer } from './MarkdownViewer';

package/src/MarkdownViewer/types.d.ts

@@ -0,0 +1,7 @@
+import { AnchorHTMLAttributes, InputHTMLAttributes, PropsWithChildren } from 'react';
+import { LiProps, SpecialComponents } from 'react-markdown/lib/ast-to-react';
+import { NormalComponents } from 'react-markdown/lib/complex-types';
+export type MarkdownLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export type MarkdownInputProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
+export type MarkdownLiProps = PropsWithChildren<LiProps>;
+export type CustomComponentsProps = Partial<Omit<NormalComponents, keyof SpecialComponents> & SpecialComponents> | undefined;

package/src/MarkdownViewer/types.js

@@ -0,0 +1 @@
+export {};

package/src/styles/styled-components.d.ts

@@ -0,0 +1,5 @@
+import * as styledComponents from 'styled-components';
+import { MarkdownTheme } from './theme';
+declare const styled: styledComponents.ThemedStyledInterface<MarkdownTheme>, css: styledComponents.ThemedCssFunction<MarkdownTheme>, ThemeProvider: styledComponents.BaseThemeProviderComponent<MarkdownTheme, MarkdownTheme>, createGlobalStyle: <P extends object = {}>(first: TemplateStringsArray | styledComponents.CSSObject | styledComponents.InterpolationFunction<styledComponents.ThemedStyledProps<P, MarkdownTheme>>, ...interpolations: styledComponents.Interpolation<styledComponents.ThemedStyledProps<P, MarkdownTheme>>[]) => styledComponents.GlobalStyleComponent<P, MarkdownTheme>, useTheme: () => MarkdownTheme;
+export { css, ThemeProvider, useTheme, createGlobalStyle };
+export default styled;

package/src/styles/styled-components.js

@@ -0,0 +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;
+export { css, ThemeProvider, useTheme, createGlobalStyle };
+export default styled;

package/src/styles/theme.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { THEME_2022 } from '@skbkontur/react-ui';
+import { ColorScheme, ThemeMode } from './types';
+export interface MarkdownTheme {
+    colors: ColorScheme;
+    elementsFontSize: string;
+    elementsLineHeight: string;
+    themeMode: ThemeMode;
+    droppablePlaceholderBgImage?: string;
+    reactUiTheme?: typeof THEME_2022;
+}
+export declare const DEFAULT_MARKDOWN_THEME: MarkdownTheme;
+export declare const MarkdownThemeContext: import("react").Context<MarkdownTheme>;
+export declare const MarkdownThemeProvider: import("react").Provider<MarkdownTheme>;
+export declare const MarkdownThemeConsumer: import("react").Consumer<MarkdownTheme>;

package/src/styles/theme.js

@@ -0,0 +1,17 @@
+import { createContext } from 'react';
+export var DEFAULT_MARKDOWN_THEME = {
+    colors: {
+        white: '#fff',
+        brand: '#e76f57',
+        grayDefault: '#858585',
+        disabledButton: '#adadad',
+        panelBg: '#d6d6d6',
+        link: '#51adff',
+    },
+    elementsFontSize: '16px',
+    elementsLineHeight: '24px',
+    themeMode: 'light',
+};
+export var MarkdownThemeContext = createContext(DEFAULT_MARKDOWN_THEME);
+export var MarkdownThemeProvider = MarkdownThemeContext.Provider;
+export var MarkdownThemeConsumer = MarkdownThemeContext.Consumer;

package/src/styles/types.d.ts

@@ -0,0 +1,9 @@
+export interface ColorScheme {
+    brand: string;
+    disabledButton: string;
+    grayDefault: string;
+    link: string;
+    panelBg: string;
+    white: string;
+}
+export type ThemeMode = 'dark' | 'light';

package/src/styles/types.js

@@ -0,0 +1 @@
+export {};