@skbkontur/markdown 1.9.1 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"

package/src/Markdown/MarkdownActions.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { Dropdown } from '@skbkontur/react-ui';
 import React from 'react';
+import { COMMONMARK_HELP_URL } from './constants';
 import { ActionsWrapper, ButtonsWrapper, MarkdownDropdown, MarkdownMenuItem, MarkdownActionsWrapper, } from './Markdown.styled';
 import { MarkdownCombination } from './MarkdownHelpers/MarkdownCombination';
 import { MarkdownFormatButton } from './MarkdownHelpers/MarkdownFormatButton';
@@ -19,6 +20,7 @@ import { markdownHelpHeaders, markdownHelpLists, markdownHelpOther, markdownHelp
 import { ViewMode } from './types';
 import { AttachPaperclip } from '../MarkdownIcons/AttachPaperclip';
 import { Collapse } from '../MarkdownIcons/Collapse';
+import { DocIcon } from '../MarkdownIcons/DocIcon';
 import { Expand } from '../MarkdownIcons/Expand';
 import { EyeOpen } from '../MarkdownIcons/EyeOpen';
 import { ToolPencil } from '../MarkdownIcons/ToolPencil';
@@ -34,7 +36,8 @@ export var MarkdownActions = function (_a) {
                 markdownHelpText.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
                 markdownHelpLists.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
                 markdownHelpOther.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
-                hasFilesApi && (React.createElement(MarkdownFormatButton, { hintText: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", disabled: isPreviewMode, isLoading: loadingFile, icon: React.createElement(AttachPaperclip, null), text: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", onClick: onOpenFileDialog }))),
+                hasFilesApi && (React.createElement(MarkdownFormatButton, { hintText: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", disabled: isPreviewMode, isLoading: loadingFile, icon: React.createElement(AttachPaperclip, null), text: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", onClick: onOpenFileDialog })),
+                React.createElement(MarkdownFormatButton, { hintText: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u044F Markdown", icon: React.createElement(DocIcon, null), text: "\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u044F Markdown", href: COMMONMARK_HELP_URL })),
             React.createElement(ActionsWrapper, null,
                 renderViewModeButton(),
                 React.createElement(MarkdownFormatButton, { hintText: fullscreen ? 'Свернуть' : 'Развернуть', icon: fullscreen ? React.createElement(Collapse, null) : React.createElement(Expand, null), text: fullscreen ? 'Свернуть' : 'Развернуть', onClick: onClickFullscreen })))));

package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.d.ts

@@ -1,8 +1,9 @@
 import { FC } from 'react';
-import { MarkdownButtonProps } from './MarkdownButton';
+import { MarkdownButtonProps } from './types';
 import { MarkdownFormat } from '../MarkdownFormat';
 interface Props extends MarkdownButtonProps {
     format?: MarkdownFormat;
+    href?: string;
 }
 export declare const MarkdownFormatButton: FC<Props>;
 export {};

package/src/Markdown/MarkdownHelpers/MarkdownFormatButton.js

@@ -3,9 +3,9 @@ import React from 'react';
 import { MarkdownCombination } from './MarkdownCombination';
 import { MarkdownButtonIcon, MarkdownButtonWrapper, VisuallyHidden } from '../Markdown.styled';
 export var MarkdownFormatButton = function (_a) {
-    var icon = _a.icon, hintText = _a.hintText, onClick = _a.onClick, format = _a.format, disabled = _a.disabled, text = _a.text;
-    return (React.createElement(Hint, { manual: disabled, text: format ? React.createElement(MarkdownCombination, { format: format, text: hintText }) : hintText, pos: "top center", maxWidth: 360 },
-        React.createElement(MarkdownButtonWrapper, { borderless: true, disabled: disabled, onClick: onClick },
-            React.createElement(MarkdownButtonIcon, null, icon),
-            React.createElement(VisuallyHidden, null, text))));
+    var icon = _a.icon, hintText = _a.hintText, onClick = _a.onClick, format = _a.format, disabled = _a.disabled, text = _a.text, href = _a.href;
+    var button = (React.createElement(MarkdownButtonWrapper, { borderless: true, disabled: disabled, onClick: onClick },
+        React.createElement(MarkdownButtonIcon, null, icon),
+        React.createElement(VisuallyHidden, null, text)));
+    return (React.createElement(Hint, { manual: disabled, text: format ? React.createElement(MarkdownCombination, { format: format, text: hintText }) : hintText, pos: "top center", maxWidth: 360 }, href ? (React.createElement("a", { href: href, tabIndex: -1, target: "_blank", rel: "noopener noreferrer nofollow" }, button)) : (button)));
 };

package/src/Markdown/MarkdownHelpers/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode, SyntheticEvent } from 'react';
+export interface MarkdownButtonProps {
+    hintText: ReactNode;
+    icon: ReactNode;
+    text: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    onClick?: (event: SyntheticEvent) => void;
+}

package/src/Markdown/MarkdownHelpers/types.js

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

package/src/Markdown/MarkdownMention.js

@@ -39,18 +39,18 @@ import { Menu } from '@skbkontur/react-ui/internal/Menu';
 import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { markdownRenderContainer, textEditorDebounceTime } from './constants';
+import { MARKDOWN_RENDER_CONTAINER, INPUT_DEBOUNCE_TIME } from './constants';
 import { getMarkdownMentionStyle, MentionMenuItem, UserDescriptions, UserWrapper, Avatar } from './Markdown.styled';
 import { getAvatarUrl, useMenuKeyListener } from './MarkdownHelpers/markdownMentionHelpers';
 export var MarkdownMention = function (_a) {
     var value = _a.value, onUserSelect = _a.onUserSelect, x = _a.x, y = _a.y, getUsersApi = _a.getUsersApi;
     var _b = useState(), users = _b[0], setUsers = _b[1];
     var menuRef = useRef(null);
-    var markdownMentionsRef = useRef(document.getElementById(markdownRenderContainer));
-    var timerRef = useRef(textEditorDebounceTime);
+    var markdownMentionsRef = useRef(document.getElementById(MARKDOWN_RENDER_CONTAINER));
+    var timerRef = useRef(INPUT_DEBOUNCE_TIME);
     if (!markdownMentionsRef.current) {
         var container = document.createElement('div');
-        container.id = markdownRenderContainer;
+        container.id = MARKDOWN_RENDER_CONTAINER;
         document.body.appendChild(container);
         markdownMentionsRef.current = container;
     }
@@ -69,7 +69,7 @@ export var MarkdownMention = function (_a) {
                     }
                 });
             }); };
-            timerRef.current = window.setTimeout(function () { return void load_1(); }, textEditorDebounceTime);
+            timerRef.current = window.setTimeout(function () { return void load_1(); }, INPUT_DEBOUNCE_TIME);
         }
         catch (e) {
             Toast.push('Ошибка в получении списка пользователей');

package/src/Markdown/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const MENTION_WRAPPER_ID_POSTFIX = "_MentionWrapper";
-export declare const textEditorDebounceTime = 500;
-export declare const markdownRenderContainer = "markdownRenderContainer";
+export declare const INPUT_DEBOUNCE_TIME = 500;
+export declare const MARKDOWN_RENDER_CONTAINER = "markdownRenderContainer";
+export declare const COMMONMARK_HELP_URL = "https://commonmark.org/help/";

package/src/Markdown/constants.js

@@ -1,3 +1,4 @@
 export var MENTION_WRAPPER_ID_POSTFIX = '_MentionWrapper';
-export var textEditorDebounceTime = 500;
-export var markdownRenderContainer = 'markdownRenderContainer';
+export var INPUT_DEBOUNCE_TIME = 500;
+export var MARKDOWN_RENDER_CONTAINER = 'markdownRenderContainer';
+export var COMMONMARK_HELP_URL = 'https://commonmark.org/help/';

package/src/MarkdownIcons/DocIcon.d.ts

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

package/src/MarkdownIcons/DocIcon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export var DocIcon = function () { return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+    React.createElement("path", { d: "M8.25 10.5C8.25 10.9142 7.91422 11.25 7.5 11.25C7.08579 11.25 6.75 10.9142 6.75 10.5C6.75 10.0858 7.08579 9.75 7.5 9.75C7.91422 9.75 8.25 10.0858 8.25 10.5Z", fill: "currentColor" }),
+    React.createElement("path", { d: "M6.01202 5.83809C6.01202 5.1921 6.62173 4.57056 7.50193 4.57056C8.38213 4.57056 8.99184 5.1921 8.99184 5.83809C8.99184 6.31522 8.67149 6.76725 8.14079 6.98297C7.53085 7.2309 7.00193 7.71814 7.00193 8.4894C7.00193 8.76554 7.22579 8.9894 7.50193 8.9894C7.77807 8.9894 8.00193 8.76554 8.00193 8.4894C8.00193 8.2739 8.12418 8.06918 8.51735 7.90936C9.35886 7.5673 9.99184 6.78904 9.99184 5.83809C9.99184 4.53171 8.81972 3.57056 7.50193 3.57056C6.18414 3.57056 5.01202 4.53171 5.01202 5.83809C5.01202 6.11423 5.23588 6.33809 5.51202 6.33809C5.78817 6.33809 6.01202 6.11423 6.01202 5.83809Z", fill: "currentColor" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 7.5C1 3.91015 3.91015 1 7.5 1C11.0899 1 14 3.91015 14 7.5C14 11.0899 11.0899 14 7.5 14C3.91015 14 1 11.0899 1 7.5ZM7.5 2C4.46243 2 2 4.46243 2 7.5C2 10.5376 4.46243 13 7.5 13C10.5376 13 13 10.5376 13 7.5C13 4.46243 10.5376 2 7.5 2Z", fill: "currentColor" }))); };

package/src/MarkdownViewer/Helpers/MarkdownLink.js

@@ -1,5 +1,6 @@
 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("a", { href: href, target: target !== null && target !== void 0 ? target : '_blank', rel: "noopener noreferrer" }, children));
+    return (React.createElement(Href, { href: href, target: target !== null && target !== void 0 ? target : '_blank', rel: "noopener noreferrer" }, children));
 };

package/src/MarkdownViewer/MarkdownViewer.js

@@ -7,7 +7,7 @@ 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 { BlockQuote, FileButtonWrapper, FileName, 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';
@@ -45,7 +45,7 @@ export var MarkdownViewer = function (_a) {
             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(FileName, null, children),
                     React.createElement(VisuallyHidden, null,
                         "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C \u0444\u0430\u0439\u043B $",
                         children))));

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

@@ -4,6 +4,8 @@ export declare const ListItem: import("styled-components").StyledComponent<"li",
 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 Href: import("styled-components").StyledComponent<"a", import("../..").MarkdownTheme, {}, never>;
+export declare const FileName: import("styled-components").StyledComponent<"span", 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

@@ -7,10 +7,12 @@ export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTe
 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 var FileButtonWrapper = styled.div(templateObject_5 || (templateObject_5 = __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_6 || (templateObject_6 = __makeTemplateObject(["\n  white-space: pre-wrap;\n"], ["\n  white-space: pre-wrap;\n"])));
+export var FileName = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  white-space: pre-wrap;\n"], ["\n  white-space: pre-wrap;\n"])));
+export var ImgHref = styled.a(templateObject_8 || (templateObject_8 = __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;
+export var VisuallyHidden = styled.span(templateObject_9 || (templateObject_9 = __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, templateObject_8, templateObject_9;

package/src/Markdown/MarkdownHelpers/MarkdownButton.d.ts

@@ -1,10 +0,0 @@
-import { FC, ReactNode, SyntheticEvent } from 'react';
-export interface MarkdownButtonProps {
-    hintText: ReactNode;
-    icon: ReactNode;
-    onClick: (event: SyntheticEvent) => void;
-    text: string;
-    disabled?: boolean;
-    isLoading?: boolean;
-}
-export declare const MarkdownButton: FC<MarkdownButtonProps>;

package/src/Markdown/MarkdownHelpers/MarkdownButton.js

@@ -1,10 +0,0 @@
-import { Hint } from '@skbkontur/react-ui';
-import React from 'react';
-import { MarkdownButtonWrapper, VisuallyHidden } from '../Markdown.styled';
-export var MarkdownButton = function (_a) {
-    var icon = _a.icon, hintText = _a.hintText, onClick = _a.onClick, isLoading = _a.isLoading, disabled = _a.disabled, text = _a.text;
-    return (React.createElement(Hint, { pos: "top center", manual: disabled, text: hintText, maxWidth: 300 },
-        React.createElement(MarkdownButtonWrapper, { borderless: true, loading: isLoading, disabled: disabled, onClick: onClick },
-            icon,
-            React.createElement(VisuallyHidden, null, text))));
-};