@skbkontur/markdown 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/markdown",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -52,8 +52,8 @@
   "peerDependencies": {
     "@skbkontur/react-ui": ">=4.5.0",
     "@skbkontur/react-ui-validations": ">=1.12.0",
-    "react": ">=17",
-    "react-dom": ">=17"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@skbkontur/react-ui": "^4.14.0",
@@ -72,8 +72,8 @@
     "@swc/plugin-styled-components": "5.0.0",
     "@types/jest": "29.5.0",
     "@types/node": "12.0.0",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.25",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "@typescript-eslint/eslint-plugin": "5.57.0",
     "@typescript-eslint/parser": "5.57.0",
     "@vitejs/plugin-react-swc": "3.7.2",
@@ -99,8 +99,8 @@
     "lint-staged": "12.3.4",
     "postcss-styled-syntax": "0.5.0",
     "prettier": "2.2.1",
-    "react": "17",
-    "react-dom": "17",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "storybook": "8.2.8",
     "stylelint": "15.11.0",
     "stylelint-config-standard": "34.0.0",
@@ -119,7 +119,6 @@
     }
   },
   "resolutions": {
-    "@types/react": "16.9.0",
-    "@types/react-dom": "16.9.0"
+    "@types/react": "18.0.28"
   }
 }

package/src/Markdown/Markdown.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
 import { MarkdownEditorProps } from './MarkdownEditor';
-import { HorizontalPaddings, ViewMode, MarkdownApi, HideActionsOptions } from './types';
+import { HideActionsOptions, HorizontalPaddings, MarkdownApi, ViewMode } from './types';
 export interface MarkdownProps extends MarkdownEditorProps {
     /** Методы апи для загрузки/скачивания файлов и меншена */
     api?: MarkdownApi;

package/src/Markdown/Markdown.js

@@ -62,6 +62,7 @@ export var Markdown = function (props) {
     var onSelectEmoji = useEmojiLogic(textareaRef.current).onSelectEmoji;
     usePasteFromClipboard(textareaRef.current, api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl);
     useListenTextareaScroll(resetMention, textareaRef.current);
+    var fullscreenTextareaPadding = useFullscreenHorizontalPadding(fullscreen, viewMode, initialWidth);
     useLayoutEffect(function () {
         var _a;
         var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
@@ -79,14 +80,15 @@ export var Markdown = function (props) {
     }, [isMobile]);
     useEffect(function () {
         var _a;
-        if (fullscreen && isEditMode) {
+        if (fullscreen && isEditMode && textareaRef) {
             var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
-            textareaNode.focus();
-            textareaNode.selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0;
-            textareaNode.selectionEnd = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
+            if (textareaNode) {
+                textareaNode.focus();
+                textareaNode.selectionStart = selectionStart !== null && selectionStart !== void 0 ? selectionStart : 0;
+                textareaNode.selectionEnd = selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : 0;
+            }
         }
-    }, [fullscreen, isEditMode, selectionEnd, selectionStart]);
-    var fullscreenTextareaPadding = useFullscreenHorizontalPadding(fullscreen, viewMode, initialWidth);
+    }, [fullscreen, isEditMode, selectionEnd, selectionStart, textareaRef]);
     var horizontalPaddings = {
         panelPadding: panelHorizontalPadding,
         fullscreenPadding: fullscreenTextareaPadding,
@@ -95,7 +97,7 @@ export var Markdown = function (props) {
         React.createElement(Wrapper, __assign({}, getRootProps()),
             !(hideActionsOptions === null || hideActionsOptions === void 0 ? void 0 : hideActionsOptions.allActions) && (React.createElement(MarkdownActions, { showShortKeys: showShotKeys, textAreaRef: textareaRef, width: width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hideOptions: hideActionsOptions, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), isSplitViewAvailable: isSplitViewAvailable, disableFullscreen: isMobile, onOpenFileDialog: open, onChangeViewMode: handleChangeViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
             isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
-            fullscreen && viewMode === ViewMode.Split && (React.createElement(SplitViewContainer, null,
+            fullscreen && viewMode === ViewMode.Split && !fullscreenTextareaPadding && (React.createElement(SplitViewContainer, null,
                 React.createElement(SplitViewEditContainer, null, renderEditContainer()),
                 React.createElement(SplitViewPreviewContainer, { textareaWidth: textareaProps.width }, renderPreview()))),
             viewMode === ViewMode.Edit && renderEditContainer(),
@@ -175,6 +177,7 @@ export var Markdown = function (props) {
         setMention(undefined);
     }
     function handleClickFullscreen() {
+        setViewMode(function (prevState) { return (prevState !== ViewMode.Split && isSplitViewAvailable ? ViewMode.Split : ViewMode.Edit); });
         setFullScreen(!fullscreen);
     }
 };

package/src/Markdown/Markdown.styled.d.ts

@@ -21,10 +21,12 @@ export declare const MarkdownPreview: import("styled-components").StyledComponen
 } & HorizontalPaddings, never>;
 export declare const MarkdownActionsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {
     width?: Nullable<number | string>;
-} & HorizontalPaddings, never>;
+} & HorizontalPaddings & {
+    fullscreen?: boolean | undefined;
+}, never>;
 export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {
-    width?: Nullable<number | string>;
-} & HorizontalPaddings, never>;
+    fullscreen?: boolean | undefined;
+}, never>;
 export declare const ActionsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
 export declare const MarkdownButtonWrapper: import("styled-components").StyledComponent<typeof Button, MarkdownTheme, {}, never>;
 export declare const MarkdownButtonIcon: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;

package/src/Markdown/Markdown.styled.js

@@ -21,12 +21,18 @@ var panelStyle = function (_a) {
     var panelPadding = _a.panelPadding, theme = _a.theme;
     return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 6px ", "px;\n  background-color: ", ";\n  margin-bottom: 12px;\n"], ["\n  padding: 6px ", "px;\n  background-color: ", ";\n  margin-bottom: 12px;\n"])), panelPadding !== null && panelPadding !== void 0 ? panelPadding : 0, theme.colors.panelBg);
 };
+function getAllowedCssValue(value) {
+    return typeof value === 'number' ? value + 'px' : value;
+}
+function getMarkdownActionsPadding(isPadding, padding) {
+    return isPadding ? getAllowedCssValue(padding) : 0;
+}
 export var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n\n  &:focus-visible {\n    outline: 1px solid ", ";\n  }\n"], ["\n  position: relative;\n\n  &:focus-visible {\n    outline: 1px solid ", ";\n  }\n"])), function (p) { return p.theme.colors.brand; });
 var scrollbarStyle = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: ", ";\n  overflow-y: auto;\n"], ["\n  height: ", ";\n  overflow-y: auto;\n"])), FULLSCREEN_HEIGHT);
 export var FlexCenter = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n"], ["\n  display: flex;\n  justify-content: center;\n"])));
 export var SplitViewMaxWidth = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  max-width: 1580px;\n  width: 100%;\n"], ["\n  max-width: 1580px;\n  width: 100%;\n"])));
-export var SplitViewContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  gap: 32px;\n\n  @media (width >= 1980px) {\n    gap: '48px';\n  }\n"], ["\n  display: flex;\n  gap: 32px;\n\n  @media (width >= 1980px) {\n    gap: '48px';\n  }\n"])));
-export var SplitViewPreviewContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n\n  width: ", ";\n  ", ";\n"], ["\n  ", "\n\n  width: ", ";\n  ", ";\n"])), scrollbarStyle, function (p) { var _a; return (_a = p.textareaWidth) !== null && _a !== void 0 ? _a : undefined; }, function (p) { return !p.textareaWidth && 'flex: 1 0 0'; });
+export var SplitViewContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  gap: 32px;\n\n  @media (width >= 1980px) {\n    gap: 48px;\n  }\n"], ["\n  display: flex;\n  gap: 32px;\n\n  @media (width >= 1980px) {\n    gap: 48px;\n  }\n"])));
+export var SplitViewPreviewContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n\n  width: ", ";\n  ", ";\n"], ["\n  ", ";\n\n  width: ", ";\n  ", ";\n"])), scrollbarStyle, function (p) { return (p.textareaWidth ? getAllowedCssValue(p.textareaWidth) : undefined); }, function (p) { return !p.textareaWidth && 'flex: 1 0 0'; });
 export var SplitViewEditContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 100%;\n  min-width: 420px;\n  flex: 1 0 0;\n"], ["\n  width: 100%;\n  min-width: 420px;\n  flex: 1 0 0;\n"])));
 export var Avatar = styled.img.attrs({ alt: '' })(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  border-radius: 50%;\n  object-fit: cover;\n"], ["\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  border-radius: 50%;\n  object-fit: cover;\n"])), function (props) { return props.theme.colors.grayDefault; });
 export var UserWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  width: 244px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"], ["\n  width: 244px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n"])));
@@ -36,13 +42,13 @@ export var MarkdownPreview = styled.div(templateObject_13 || (templateObject_13
     var _b;
     var panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
     return (_b = fullscreenPadding !== null && fullscreenPadding !== void 0 ? fullscreenPadding : panelPadding) !== null && _b !== void 0 ? _b : 8;
-}, function (p) { return p.width && "width: ".concat(typeof p.width === 'string' ? p.width : "".concat(p.width, "px"), ";"); });
-export var MarkdownActionsWrapper = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  padding: ", " ", "px 0;\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  ", "\n  ", "\n  \n  a {\n    border: none !important;\n    text-decoration: none !important;\n  }\n"], ["\n  padding: ", " ", "px 0;\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  ", "\n  ", "\n  \n  a {\n    border: none !important;\n    text-decoration: none !important;\n  }\n"])), function (p) { return (p.fullscreenPadding ? '16px' : 0); }, function (p) { var _a; return (_a = p.fullscreenPadding) !== null && _a !== void 0 ? _a : 0; }, function (p) { return p.width && "width: ".concat(typeof p.width === 'string' ? p.width : "".concat(p.width, "px"), ";"); }, function (_a) {
-    var theme = _a.theme, panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
-    if (panelPadding && !fullscreenPadding)
+}, function (p) { return p.width && "width: ".concat(getAllowedCssValue(p.width), ";"); });
+export var MarkdownActionsWrapper = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  padding: ", "\n    ", " 0;\n  margin-bottom: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n  \n  a {\n    border: none !important;\n    text-decoration: none !important;\n  }\n"], ["\n  padding: ", "\n    ", " 0;\n  margin-bottom: ", "px;\n  box-sizing: border-box;\n  ", "\n  ", "\n  \n  a {\n    border: none !important;\n    text-decoration: none !important;\n  }\n"])), function (p) { return getMarkdownActionsPadding(!!p.fullscreenPadding, '16px'); }, function (p) { return getMarkdownActionsPadding(!!p.fullscreenPadding, p.fullscreenPadding); }, function (p) { return (p.fullscreen ? 12 : 4); }, function (p) { return p.width && "width: ".concat(getAllowedCssValue(p.width), ";"); }, function (_a) {
+    var theme = _a.theme, panelPadding = _a.panelPadding, fullscreen = _a.fullscreen;
+    if (panelPadding && !fullscreen)
         return panelStyle({ theme: theme, panelPadding: panelPadding });
 });
-export var ButtonsWrapper = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n  border-bottom: ", ";\n"])), function (p) { return (p.fullscreenPadding ? "1px solid ".concat(p.theme.colors.grayDefault) : 'none'); });
+export var ButtonsWrapper = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n  border-bottom: ", ";\n"])), function (p) { return (p.fullscreen ? "1px solid ".concat(p.theme.colors.grayDefault) : 'none'); });
 export var ActionsWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n"])));
 export var MarkdownButtonWrapper = styled(Button)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  button {\n    padding: 4px;\n    border: none;\n    box-sizing: border-box;\n  }\n"], ["\n  button {\n    padding: 4px;\n    border: none;\n    box-sizing: border-box;\n  }\n"])));
 export var MarkdownButtonIcon = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  height: 24px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: 24px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n"])));

package/src/Markdown/MarkdownActions.js

@@ -13,7 +13,7 @@ import { Dropdown, Hint } from '@skbkontur/react-ui';
 import React from 'react';
 import { COMMONMARK_HELP_URL } from './constants';
 import { EmojiDropdown } from './Emoji/EmojiDropdown';
-import { ActionsWrapper, ButtonsWrapper, MarkdownDropdown, MarkdownMenuItem, MarkdownActionsWrapper, } from './Markdown.styled';
+import { ActionsWrapper, ButtonsWrapper, MarkdownActionsWrapper, MarkdownDropdown, MarkdownMenuItem, } from './Markdown.styled';
 import { MarkdownFormatButton } from './MarkdownHelpers/MarkdownFormatButton';
 import { setMarkdown } from './MarkdownHelpers/markdownHelpers';
 import { markdownHelpHeaders, markdownHelpLists, markdownHelpOther, markdownHelpText } from './MarkdownHelpItems';
@@ -29,8 +29,8 @@ import { ToolPencil } from '../MarkdownIcons/ToolPencil';
 export var MarkdownActions = function (_a) {
     var textAreaRef = _a.textAreaRef, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd, loadingFile = _a.loadingFile, onOpenFileDialog = _a.onOpenFileDialog, onClickFullscreen = _a.onClickFullscreen, fullscreen = _a.fullscreen, viewMode = _a.viewMode, onChangeViewMode = _a.onChangeViewMode, horizontalPaddings = _a.horizontalPaddings, hasFilesApi = _a.hasFilesApi, width = _a.width, showShortKeys = _a.showShortKeys, hideOptions = _a.hideOptions, onSelectEmoji = _a.onSelectEmoji, isSplitViewAvailable = _a.isSplitViewAvailable, disableFullscreen = _a.disableFullscreen;
     var isPreviewMode = viewMode === ViewMode.Preview;
-    return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width }),
-        React.createElement(ButtonsWrapper, __assign({}, horizontalPaddings),
+    return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width, fullscreen: fullscreen }),
+        React.createElement(ButtonsWrapper, { fullscreen: fullscreen },
             React.createElement(ActionsWrapper, null,
                 !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.heading) && (React.createElement(MarkdownDropdown, null,
                     React.createElement(Hint, { text: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A", pos: "top left" },

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

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

package/src/Markdown/MarkdownHelpers/markdownTextareaHelpers.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { setMarkdownPastedHtml } from './markdownHelpers';
 import { MENTION_WRAPPER_ID_POSTFIX } from '../constants';
 import { ViewMode } from '../types';
@@ -73,7 +73,7 @@ export var useListenTextareaScroll = function (setMention, textarea) {
 };
 export var useFullscreenHorizontalPadding = function (fullscreen, viewMode, textareaWidth) {
     var _a = useState(), padding = _a[0], setPadding = _a[1];
-    useEffect(function () {
+    useLayoutEffect(function () {
         if (!fullscreen || !textareaWidth || viewMode === ViewMode.Split) {
             setPadding(undefined);
             return;

package/src/MarkdownIcons/AttachLink.d.ts

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

package/src/MarkdownIcons/AttachPaperclip.d.ts

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

package/src/MarkdownIcons/CheckedList.d.ts

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

package/src/MarkdownIcons/Collapse.d.ts

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

package/src/MarkdownIcons/DocIcon.d.ts

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

package/src/MarkdownIcons/EmojiFace.d.ts

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

package/src/MarkdownIcons/EmptyPrviewArrow.d.ts

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

package/src/MarkdownIcons/Expand.d.ts

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

package/src/MarkdownIcons/EyeOpen.d.ts

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

package/src/MarkdownIcons/List.d.ts

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

package/src/MarkdownIcons/NumberedList.d.ts

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

package/src/MarkdownIcons/SplitView.d.ts

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

package/src/MarkdownIcons/Table.d.ts

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

package/src/MarkdownIcons/ToolPencil.d.ts

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

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

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