@skbkontur/markdown 1.0.3

package/src/MarkdownViewer/MarkdownViewer.js

@@ -0,0 +1,64 @@
+import { Checkbox } from '@skbkontur/react-ui';
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkBreaks from 'remark-breaks';
+import gfm from 'remark-gfm';
+import { MarkdownImage } from './Helpers/MarkdownImage';
+import { MarkdownLink } from './Helpers/MarkdownLink';
+import { BlockQuote, checkboxStyle, FileButtonWrapper, getListStyle, ListItem, Paragraph, Wrapper, } from './MarkdownViewer.styles';
+import { useFileLogic } from '../Markdown/Files/Files.logic';
+import { AttachPaperclip } from '../MarkdownIcons/AttachPaperclip';
+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(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], 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 (href.startsWith(fileApiUrl)) {
+            var id_1 = href.replace(fileApiUrl, '');
+            return (React.createElement(FileButtonWrapper, null,
+                React.createElement(AttachPaperclip, null),
+                "\u00A0",
+                React.createElement("button", { "aria-label": "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0444\u0430\u0439\u043B ".concat(children), onClick: function () { return downloadFile(id_1); } }, 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, { style: checkboxStyle, 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,8 @@
+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 checkboxStyle: CSSProperties;
+export declare function getListStyle(depth: boolean): CSSProperties;

package/src/MarkdownViewer/MarkdownViewer.styles.js

@@ -0,0 +1,15 @@
+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\n  ul,\n  ol {\n    p {\n      margin-bottom: 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\n  ul,\n  ol {\n    p {\n      margin-bottom: 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 checkboxStyle = { marginLeft: 4 };
+export function getListStyle(depth) {
+    return depth ? { marginTop: 4 } : { marginBottom: 16 };
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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>, MarkdownThemeProvider: styledComponents.ThemeProviderComponent<MarkdownTheme, MarkdownTheme>, MarkdownThemeConsumer: import("react").Consumer<MarkdownTheme>;
+export { css, MarkdownThemeProvider, MarkdownThemeConsumer };
+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, MarkdownThemeProvider = _a.ThemeProvider, MarkdownThemeConsumer = _a.ThemeConsumer;
+export { css, MarkdownThemeProvider, MarkdownThemeConsumer };
+export default styled;

package/src/styles/theme.d.ts

@@ -0,0 +1,11 @@
+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;

package/src/styles/theme.js

@@ -0,0 +1,13 @@
+export var DEFAULT_MARKDOWN_THEME = {
+    colors: {
+        white: '#fff',
+        brand: '#e76f57',
+        grayDefault: '#858585',
+        disabledButton: '#adadad',
+        panelBg: '#d6d6d6',
+        link: '#51adff',
+    },
+    elementsFontSize: '16px',
+    elementsLineHeight: '24px',
+    themeMode: 'light',
+};

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 {};