@skbkontur/markdown 1.0.3

package/README.md

@@ -0,0 +1,11 @@
+### Редактор и вьювер Markdown
+
+#### Компоненты
+
+- Markdown - редактор
+- MarkdownViewer - вьювер MD текста
+
+Компоненты работают на основе библиотеки [react-ui](https://tech.skbkontur.ru/react-ui/).
+В `peerDependencies` указана совместимая версия пакета `@skbkontur/react-ui`.
+Тема `Textarea` берется из ThemeContext из react-ui.
+Стилизация `Markdown` через `MarkdownThemeProvider`.

package/index.d.ts

@@ -0,0 +1,5 @@
+export { Markdown, MarkdownProps } from './src/Markdown/Markdown';
+export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
+export { MarkdownTheme } from './src/styles/theme';
+export { ThemeMode, ColorScheme } from './src/styles/types';
+export { MarkdownThemeProvider, MarkdownThemeConsumer } from './src/styles/styled-components';

package/index.js

@@ -0,0 +1,3 @@
+export { Markdown } from './src/Markdown/Markdown';
+export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
+export { MarkdownThemeProvider, MarkdownThemeConsumer } from './src/styles/styled-components';

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@skbkontur/markdown",
+  "version": "1.0.3",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "private": false,
+  "license": "UNLICENSED",
+  "author": "tsypilov_m",
+  "dependencies": {
+    "react-dropzone": "^14.2.3",
+    "react-foco": "^1.3.1",
+    "react-markdown": "^8.0.7",
+    "rehype-raw": "^6.1.1",
+    "rehype-sanitize": "5.0.1",
+    "remark-breaks": "^3.0.3",
+    "remark-gfm": "^3.0.1",
+    "styled-components": "5.1.0",
+    "turndown": "^7.1.2",
+    "turndown-plugin-gfm": "^1.0.2",
+    "uuid": "^9.0.0"
+  },
+  "scripts": {
+    "bump": "lerna version",
+    "build": "yarn tsc",
+    "lint-staged": "lint-staged",
+    "lint": "eslint --ext=ts,tsx src",
+    "lint:fix": "eslint --ext=.ts,tsx src --fix",
+    "prepare": "husky install .husky",
+    "build-storybook": "build-storybook --quiet",
+    "storybook": "start-storybook -p 6006 -s public",
+    "test-storybook": "test-storybook",
+    "creevey:ui": "creevey --ui --port=3003",
+    "screenshots:ci": "concurrently -k -s first \"http-server ./storybook-static -p 6006 -s\" \"yarn creevey\" \"yarn test-storybook\""
+  },
+  "peerDependencies": {
+    "@skbkontur/react-ui": ">=4.5.0 <5",
+    "@skbkontur/react-ui-validations": "^1.12.0",
+    "react": ">=16.9",
+    "react-dom": ">=16.9"
+  },
+  "devDependencies": {
+    "@skbkontur/react-ui": "^4.14.0",
+    "@skbkontur/react-ui-validations": "^1.12.0",
+    "@storybook/addon-a11y": "6.5.16",
+    "@storybook/addon-actions": "6.5.16",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addon-interactions": "6.5.3",
+    "@storybook/addon-links": "6.5.16",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
+    "@storybook/node-logger": "6.5.16",
+    "@storybook/preset-create-react-app": "4.1.2",
+    "@storybook/react": "6.5.16",
+    "@storybook/test-runner": "0.9.4",
+    "@types/node": "12.0.0",
+    "@types/react": "16.9.0",
+    "@types/react-dom": "16.9.0",
+    "@types/styled-components": "5.1.0",
+    "@types/turndown": "^5.0.1",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "5.57.0",
+    "@typescript-eslint/parser": "5.57.0",
+    "axe-playwright": "1.2.3",
+    "creevey": "0.9.0-beta.5",
+    "eslint": "8.32.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "0.6.12",
+    "eslint-plugin-typescript-sort-keys": "2.3.0",
+    "husky": "7.0.4",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "lerna": "5.0.0",
+    "lint-staged": "^12.3.4",
+    "prettier": "2.2.1",
+    "react": "16.9.0",
+    "react-dom": "16.9.0",
+    "stylelint": "13.13.1",
+    "stylelint-config-standard": "22.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-processor-styled-components": "^1.10.0",
+    "typescript": "4.9.4"
+  },
+  "files": [
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "index.js",
+    "index.d.ts"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "resolutions": {
+    "@types/react": "16.9.0",
+    "@types/react-dom": "16.9.0"
+  }
+}

package/src/Markdown/Files/Files.logic.d.ts

@@ -0,0 +1,13 @@
+import { Textarea } from '@skbkontur/react-ui';
+import { Nullable, RefItem } from '../types';
+import { RequestStatus } from '../utils/requestStatus';
+export declare const useFileLogic: (fileUploadApi?: ((file: File) => Promise<RefItem>) | undefined, fileDownloadApi?: ((id: string) => Promise<File>) | undefined, fileApiUrl?: string, textarea?: Nullable<Textarea>, cursorPosition?: number | null, disabled?: boolean) => {
+    requestStatus: RequestStatus;
+    error: boolean;
+    getRootProps: <T extends import("react-dropzone").DropzoneRootProps>(props?: T | undefined) => T;
+    isDragActive: boolean;
+    open: () => void;
+    uploadFile: (file: File) => Promise<void>;
+    downloadFile: (id: string) => Promise<void>;
+    onResetError: () => void;
+};

package/src/Markdown/Files/Files.logic.js

@@ -0,0 +1,123 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { Toast } from '@skbkontur/react-ui';
+import { useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { MarkdownFormat } from '../MarkdownFormat';
+import { setMarkdownFiles } from '../MarkdownHelpers/markdownHelpers';
+import { RequestStatus } from '../utils/requestStatus';
+import { saveFile } from '../utils/saveFile';
+var PARENTHESES_REGEXP = /[()[\]]/gm;
+export var useFileLogic = function (fileUploadApi, fileDownloadApi, fileApiUrl, textarea, cursorPosition, disabled) {
+    var _a = useDropzone({
+        multiple: false,
+        noClick: true,
+        disabled: disabled || !fileUploadApi || !fileDownloadApi,
+        onDrop: function (files) { return void uploadFile(files[0]); },
+    }), getRootProps = _a.getRootProps, isDragActive = _a.isDragActive, open = _a.open;
+    var _b = useState(RequestStatus.Default), requestStatus = _b[0], setRequestStatus = _b[1];
+    var _c = useState(false), error = _c[0], setError = _c[1];
+    function uploadFile(file) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, isImage, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!fileUploadApi) return [3 /*break*/, 4];
+                        if (file.size / Math.pow(1024, 2) >= 10) {
+                            setError(true);
+                            return [2 /*return*/];
+                        }
+                        setRequestStatus(RequestStatus.isFetching);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        setError(false);
+                        return [4 /*yield*/, fileUploadApi(new File([file], file.name.replace(PARENTHESES_REGEXP, '')))];
+                    case 2:
+                        response = _a.sent();
+                        isImage = file.type.includes('image');
+                        if (response && textarea) {
+                            setMarkdownFiles(response, textarea, isImage ? MarkdownFormat.image : MarkdownFormat.file, cursorPosition, fileApiUrl);
+                        }
+                        setRequestStatus(RequestStatus.isLoaded);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _a.sent();
+                        Toast.push('Ошибка загрузки файла');
+                        setRequestStatus(RequestStatus.isFailed);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    function downloadFile(id) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response, e_2;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!fileDownloadApi) return [3 /*break*/, 4];
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, fileDownloadApi(id)];
+                    case 2:
+                        response = _a.sent();
+                        saveFile(response);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_2 = _a.sent();
+                        Toast.push('Ошибка скачивания файла');
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    }
+    return {
+        requestStatus: requestStatus,
+        error: error,
+        getRootProps: getRootProps,
+        isDragActive: isDragActive,
+        open: open,
+        uploadFile: uploadFile,
+        downloadFile: downloadFile,
+        onResetError: function () { return setError(false); },
+    };
+};

package/src/Markdown/Markdown.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react';
+import { MarkdownEditorProps } from './MarkdownEditor';
+import { HorizontalPaddings, MarkdownApi } from './types';
+export interface MarkdownProps extends MarkdownEditorProps {
+    /** Методы апи для загрузки/скачивания файлов и меншена */
+    api?: MarkdownApi;
+    /** Url апи для файлов  */
+    fileApiUrl?: string;
+    /** Скрыть панель действий (кнопки помощи форматирования текста) */
+    hideMarkdownActions?: boolean;
+    /** Превьювер мардауна, по умолчанию используется MarkdownViewer */
+    markdownViewer?: (value: string) => ReactNode;
+    /** Padding markdownActions (кнопки помощи форматирования текста), включает режим panel */
+    panelHorizontalPadding?: number;
+    /** Url для профиля сотрудника  */
+    profileUrl?: string;
+    /** Render валидации файла, если она нужна, максимальный размер файла = 10mb */
+    renderFilesValidation?: (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode;
+}
+export declare const Markdown: FC<MarkdownProps>;

package/src/Markdown/Markdown.js

@@ -0,0 +1,148 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { SidePage, ThemeContext } from '@skbkontur/react-ui';
+import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVerticalScroll';
+import React, { useEffect, useLayoutEffect, useRef, useState, } from 'react';
+import Foco from 'react-foco/lib';
+import { MENTION_WRAPPER_ID_POSTFIX } from './constants';
+import { useFileLogic } from './Files/Files.logic';
+import { DroppablePlaceholder, getMarkdownReactUiTheme, MarkdownEditorBlock, MarkdownPreview, MentionWrapper, Wrapper, } from './Markdown.styled';
+import { MarkdownActions } from './MarkdownActions';
+import { MarkdownEditor } from './MarkdownEditor';
+import { usePasteFromClipboard } from './MarkdownHelpers/markdownHelpers';
+import { getMentionValue, mentionActions } from './MarkdownHelpers/markdownMentionHelpers';
+import { getCursorCoordinates, getFullscreenHorizontalPadding, useListenTextareaScroll, } from './MarkdownHelpers/markdownTextareaHelpers';
+import { MarkdownMention } from './MarkdownMention';
+import { ViewMode } from './types';
+import { Guid } from './utils/guid';
+import { RequestStatus } from './utils/requestStatus';
+import { MarkdownViewer } from '../MarkdownViewer';
+import { MarkdownThemeProvider, MarkdownThemeConsumer } from '../styles/styled-components';
+import { DEFAULT_MARKDOWN_THEME } from '../styles/theme';
+export var Markdown = function (props) {
+    var _a;
+    var panelHorizontalPadding = props.panelHorizontalPadding, hideMarkdownActions = props.hideMarkdownActions, onClick = props.onClick, onChange = props.onChange, onSelect = props.onSelect, markdownViewer = props.markdownViewer, renderFilesValidation = props.renderFilesValidation, _b = props.fileApiUrl, fileApiUrl = _b === void 0 ? '' : _b, _c = props.profileUrl, profileUrl = _c === void 0 ? '' : _c, api = props.api, textareaProps = __rest(props, ["panelHorizontalPadding", "hideMarkdownActions", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api"]);
+    var textareaRef = useRef(null);
+    var _d = useState(), mention = _d[0], setMention = _d[1];
+    var _e = useState(ViewMode.Edit), viewMode = _e[0], setViewMode = _e[1];
+    var _f = useState(false), fullscreen = _f[0], setFullScreen = _f[1];
+    var _g = useState(0), initialWidth = _g[0], setInitialWidth = _g[1];
+    var _h = useState(), selectionStart = _h[0], setSelectionStart = _h[1];
+    var _j = useState(), selectionEnd = _j[0], setSelectionEnd = _j[1];
+    var guid = useRef(new Guid().generate()).current;
+    var isEditMode = viewMode === ViewMode.Edit;
+    var _k = useFileLogic(api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl, textareaRef.current, selectionStart, !isEditMode), getRootProps = _k.getRootProps, isDragActive = _k.isDragActive, requestStatus = _k.requestStatus, open = _k.open, error = _k.error, onResetError = _k.onResetError;
+    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);
+    useLayoutEffect(function () {
+        var _a;
+        var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
+        setInitialWidth(textareaNode.getBoundingClientRect().width);
+    }, []);
+    useEffect(function () {
+        var _a;
+        if (fullscreen && isEditMode) {
+            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;
+        }
+    }, [fullscreen, isEditMode, selectionEnd, selectionStart]);
+    var fullscreenTextareaPadding = getFullscreenHorizontalPadding(fullscreen, initialWidth);
+    var horizontalPaddings = {
+        panelPadding: panelHorizontalPadding,
+        fullscreenPadding: fullscreenTextareaPadding,
+    };
+    var content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
+        React.createElement(Wrapper, __assign({}, getRootProps()),
+            !hideMarkdownActions && (React.createElement(MarkdownActions, { textAreaRef: textareaRef, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, selectionStart: selectionStart, selectionEnd: selectionEnd, horizontalPaddings: horizontalPaddings, hasFilesApi: !!(api === null || api === void 0 ? void 0 : api.fileDownloadApi) && !!(api === null || api === void 0 ? void 0 : api.fileUploadApi), onOpenFileDialog: open, onChangeViewMode: setViewMode, onClickFullscreen: handleClickFullscreen })),
+            isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
+            isEditMode && renderEditContainer(),
+            isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings))),
+        !isEditMode && (React.createElement(MarkdownPreview, __assign({}, horizontalPaddings), (markdownViewer === null || markdownViewer === void 0 ? void 0 : markdownViewer(props.value)) || (React.createElement(MarkdownViewer, { source: (_a = props.value) !== null && _a !== void 0 ? _a : '', fileApiUrl: fileApiUrl, profileUrl: profileUrl }))))));
+    return (React.createElement(MarkdownThemeConsumer, null, function (theme) {
+        var defaultTheme = theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME;
+        var reactUiTheme = getMarkdownReactUiTheme(defaultTheme, theme === null || theme === void 0 ? void 0 : theme.reactUiTheme, panelHorizontalPadding, fullscreenTextareaPadding);
+        return (React.createElement(MarkdownThemeProvider, { theme: defaultTheme },
+            React.createElement(ThemeContext.Provider, { value: reactUiTheme }, fullscreen ? renderFullScreen() : content)));
+    }));
+    function renderFullScreen() {
+        return (React.createElement(SidePage, { disableAnimations: true, width: "100vw", onClose: function () { return setFullScreen(false); } },
+            React.createElement(HideBodyVerticalScroll, null),
+            React.createElement(SidePage.Body, null,
+                React.createElement(SidePage.Container, null, content))));
+    }
+    function renderEditContainer() {
+        var showMention = !!mention && !!getMentionValue(mention);
+        return (React.createElement(MarkdownEditorBlock, null,
+            React.createElement(MentionWrapper, { id: "".concat(guid).concat(MENTION_WRAPPER_ID_POSTFIX) }),
+            showMention && renderMentions(),
+            React.createElement(MarkdownEditor, __assign({}, textareaProps, { width: fullscreen ? "100%" : textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.width, textareaRef: textareaRef, onChange: listenChange, onSelect: listenSelection, onClick: listenClick }))));
+    }
+    function renderMentions() {
+        var _a;
+        if (textareaRef.current && mention && (api === null || api === void 0 ? void 0 : api.getUsersApi)) {
+            var textareaNode = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.node;
+            var position = getCursorCoordinates(textareaNode, guid);
+            return (React.createElement(MarkdownMention, { value: getMentionValue(mention), getUsersApi: api.getUsersApi, y: position.y, x: position.x, onUserSelect: handleSelectUser }));
+        }
+    }
+    function handleSelectUser(login, name) {
+        if (textareaRef.current && mention) {
+            var htmlTextArea = textareaRef.current;
+            htmlTextArea.setSelectionRange(mention.positions[0] ? mention.positions[0] - 1 : 0, mention.positions[1]);
+            document.execCommand('insertText', false, "[".concat(name, "](@").concat(login, ")"));
+            resetMention();
+        }
+    }
+    function listenSelection(event) {
+        var _a = event.currentTarget, textSelectionStart = _a.selectionStart, textSelectionEnd = _a.selectionEnd;
+        setSelectionStart(textSelectionStart);
+        setSelectionEnd(textSelectionEnd);
+        onSelect && onSelect(event);
+        checkMention(event);
+    }
+    function listenChange(event) {
+        onChange && onChange(event);
+        checkMention(event);
+    }
+    function listenClick(event) {
+        onClick && onClick(event);
+        checkMention(event);
+    }
+    function checkMention(event) {
+        if (api === null || api === void 0 ? void 0 : api.getUsersApi)
+            mentionActions(event, setMention);
+    }
+    function resetStates() {
+        resetMention();
+        setSelectionStart(undefined);
+        setSelectionEnd(undefined);
+    }
+    function resetMention() {
+        setMention(undefined);
+    }
+    function handleClickFullscreen() {
+        setFullScreen(!fullscreen);
+    }
+};

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

@@ -0,0 +1,69 @@
+import { Button, MenuItem, THEME_2022 } from '@skbkontur/react-ui';
+import { CSSProperties } from 'react';
+import { HorizontalPaddings } from './types';
+import { MarkdownTheme } from '../styles/theme';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
+export declare const Avatar: import("styled-components").StyledComponent<"img", MarkdownTheme, {
+    alt: "";
+}, "alt">;
+export declare const UserWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
+export declare const DroppablePlaceholder: import("styled-components").StyledComponent<"div", MarkdownTheme, HorizontalPaddings, never>;
+export declare const MentionWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
+export declare const MarkdownPreview: import("styled-components").StyledComponent<"div", MarkdownTheme, HorizontalPaddings, never>;
+export declare const MarkdownActionsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, HorizontalPaddings, never>;
+export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, 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>;
+export declare const MarkdownDropdown: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
+export declare const MarkdownSymbolWrapper: import("styled-components").StyledComponent<"span", MarkdownTheme, {}, never>;
+export declare const MarkdownMenuItem: import("styled-components").StyledComponent<typeof MenuItem, MarkdownTheme, {}, never>;
+export declare const HintContentWrapper: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
+export declare const MarkdownEditorBlock: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
+export declare const getMarkdownMentionStyle: (x: number, y: number) => CSSProperties;
+export declare const UserDescriptions: import("styled-components").StyledComponent<"div", MarkdownTheme, {}, never>;
+export declare const MentionMenuItem: import("styled-components").StyledComponent<typeof MenuItem, MarkdownTheme, {}, never>;
+export declare const VisuallyHidden: import("styled-components").StyledComponent<"span", MarkdownTheme, {}, never>;
+export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiTheme?: typeof THEME_2022, panelHorizontalPadding?: number, fullScreenTextareaPadding?: number) => Readonly<Readonly<typeof import("@skbkontur/react-ui/cjs/internal/themes/DefaultTheme").DefaultTheme> & {
+    textareaMinHeight?: string | undefined;
+    textareaBorderColor?: string | undefined;
+    textareaBorderColorFocus?: string | undefined;
+    textareaBorderTopColor?: string | undefined;
+    textareaShadow?: string | undefined;
+    textareaPaddingX?: string | undefined;
+    textareaPaddingY?: string | undefined;
+    tabFontSize: string;
+    tabPaddingY: string;
+    tabPaddingX: string;
+    tabColorHover: string;
+    tabColorFocus: string;
+    tabLineHeight: string;
+    tabBorderWidth: string;
+    selectBorderWidth: string;
+    btnDefaultBg: string;
+    btnDefaultActiveBorderColor: string;
+    btnDisabledBg: string;
+    btnDisabledBorderColor: string;
+    btnDisabledTextColor: string;
+    btnDefaultHoverBg: string | undefined;
+    btnFontSizeSmall: string;
+    checkboxPaddingY: string;
+    checkboxBg: string;
+    checkboxHoverBg: string;
+    checkboxCheckedBg: string;
+    checkboxShadow: string;
+    checkboxShadowHover: string;
+    checkboxCheckedHoverShadow: string;
+    checkboxCheckedShadow: string;
+    checkboxCheckedActiveShadow: string;
+    checkboxShadowActive: string;
+    checkboxCheckedColor: string;
+    checkboxBoxSize: string;
+    menuItemFontSize: string;
+    menuItemPaddingY: string;
+    menuItemPaddingX: string;
+    hintFontSize: string;
+    hintColor: string;
+    selectPaddingXSmall: string;
+    selectLineHeightSmall: string;
+}>;

package/src/Markdown/Markdown.styled.js

@@ -0,0 +1,72 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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, MenuItem, ThemeFactory } from '@skbkontur/react-ui';
+import styled, { css } from '../styles/styled-components';
+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);
+};
+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; });
+export var Avatar = styled.img.attrs({ alt: '' })(templateObject_3 || (templateObject_3 = __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_4 || (templateObject_4 = __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"])));
+export var DroppablePlaceholder = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: 100%;\n  height: 100%;\n  padding: ", "px;\n  border-radius: 8px;\n  z-index: 100;\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),\n    rgba(255, 255, 255, ", ");\n  background-image: ", ";\n"], ["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  width: 100%;\n  height: 100%;\n  padding: ", "px;\n  border-radius: 8px;\n  z-index: 100;\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),\n    rgba(255, 255, 255, ", ");\n  background-image: ", ";\n"])), function (p) { return (p.panelPadding || p.fullscreenPadding ? 0 : -8); }, function (p) { return (p.panelPadding || p.fullscreenPadding ? 0 : -8); }, function (p) { return (p.panelPadding || p.fullscreenPadding ? 0 : 8); }, function (p) { return (p.theme.themeMode === 'dark' ? 0.1 : 0.7); }, function (p) { var _a, _b; return (_b = (_a = p.theme) === null || _a === void 0 ? void 0 : _a.droppablePlaceholderBgImage) !== null && _b !== void 0 ? _b : ''; });
+export var MentionWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+export var MarkdownPreview = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  padding: 6px ", "px;\n"], ["\n  padding: 6px ", "px;\n"])), function (_a) {
+    var _b;
+    var panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
+    return (_b = fullscreenPadding !== null && fullscreenPadding !== void 0 ? fullscreenPadding : panelPadding) !== null && _b !== void 0 ? _b : 8;
+});
+export var MarkdownActionsWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: 0 ", ";\n  margin-bottom: 4px;\n\n  ", ";\n"], ["\n  padding: 0 ", ";\n  margin-bottom: 4px;\n\n  ", ";\n"])), function (p) { var _a; return "".concat((_a = p.fullscreenPadding) !== null && _a !== void 0 ? _a : 0, "px"); }, function (_a) {
+    var theme = _a.theme, panelPadding = _a.panelPadding, fullscreenPadding = _a.fullscreenPadding;
+    if (panelPadding && !fullscreenPadding)
+        return panelStyle({ theme: theme, panelPadding: panelPadding });
+});
+export var ButtonsWrapper = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  margin: 0 -7px;\n"])));
+export var ActionsWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+export var MarkdownButtonWrapper = styled(Button)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  button {\n    padding: 4px 6px;\n    border: none;\n    box-sizing: border-box;\n  }\n"], ["\n  button {\n    padding: 4px 6px;\n    border: none;\n    box-sizing: border-box;\n  }\n"])));
+export var MarkdownButtonIcon = styled.div(templateObject_12 || (templateObject_12 = __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"])));
+export var MarkdownDropdown = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  button {\n    padding-top: 0;\n    padding-bottom: 0;\n    font-size: ", ";\n  }\n"], ["\n  button {\n    padding-top: 0;\n    padding-bottom: 0;\n    font-size: ", ";\n  }\n"])), function (p) { return p.theme.elementsFontSize; });
+export var MarkdownSymbolWrapper = styled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (p) { return p.theme.colors.brand; });
+export var MarkdownMenuItem = styled(MenuItem)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  padding-left: 8px;\n  padding-right: 8px;\n  color: ", ";\n"], ["\n  padding-left: 8px;\n  padding-right: 8px;\n  color: ", ";\n"])), function (p) { return p.theme.colors.grayDefault; });
+export var HintContentWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  width: 100%;\n"])));
+export var MarkdownEditorBlock = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+export var getMarkdownMentionStyle = function (x, y) { return ({
+    position: 'absolute',
+    top: y,
+    left: x,
+}); };
+export var UserDescriptions = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  white-space: pre-line;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  overflow: hidden;\n  margin-top: 4px;\n"], ["\n  white-space: pre-line;\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  overflow: hidden;\n  margin-top: 4px;\n"])));
+export var MentionMenuItem = styled(MenuItem)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  padding: 4px 28px;\n"], ["\n  padding: 4px 28px;\n"])));
+export var VisuallyHidden = styled.span(templateObject_20 || (templateObject_20 = __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 getMarkdownReactUiTheme = function (theme, reactUiTheme, panelHorizontalPadding, fullScreenTextareaPadding) {
+    var elementsFontSize = theme.elementsFontSize, elementsLineHeight = theme.elementsLineHeight, themeMode = theme.themeMode, colors = theme.colors;
+    return ThemeFactory.create(__assign(__assign({ tabFontSize: elementsFontSize, tabPaddingY: '0', tabPaddingX: '6px', tabColorHover: 'transparent', tabColorFocus: 'transparent', tabLineHeight: elementsLineHeight, tabBorderWidth: '0', selectBorderWidth: '0', btnDefaultBg: 'transparent', btnDefaultActiveBorderColor: 'transparent', btnDisabledBg: 'transparent', btnDisabledBorderColor: 'transparent', btnDisabledTextColor: colors.disabledButton, btnDefaultHoverBg: themeMode === 'light' ? reactUiTheme === null || reactUiTheme === void 0 ? void 0 : reactUiTheme.btnDefaultHoverBg : reactUiTheme === null || reactUiTheme === void 0 ? void 0 : reactUiTheme.btnDisabledBg, btnFontSizeSmall: elementsFontSize, checkboxPaddingY: '0', checkboxBg: 'transparent', checkboxHoverBg: 'transparent', checkboxCheckedBg: 'transparent', checkboxShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxShadowHover: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedHoverShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedActiveShadow: "0 0 0 1px ".concat(colors.grayDefault), checkboxShadowActive: "0 0 0 1px ".concat(colors.grayDefault), checkboxCheckedColor: colors.grayDefault, checkboxBoxSize: elementsFontSize, menuItemFontSize: elementsFontSize, menuItemPaddingY: '4px', menuItemPaddingX: '28px', hintFontSize: elementsFontSize, hintColor: themeMode === 'light' ? colors.white : colors.grayDefault, selectPaddingXSmall: '8px', selectLineHeightSmall: '24px' }, (panelHorizontalPadding && {
+        textareaBorderColor: 'transparent',
+        textareaBorderColorFocus: 'transparent',
+        textareaBorderTopColor: 'transparent',
+        textareaShadow: 'none',
+        textareaPaddingX: "".concat(panelHorizontalPadding, "px"),
+    })), (fullScreenTextareaPadding && {
+        textareaMinHeight: '90vh',
+        textareaBorderColor: 'transparent',
+        textareaBorderColorFocus: 'transparent',
+        textareaBorderTopColor: 'transparent',
+        textareaShadow: 'none',
+        textareaPaddingX: "".concat(fullScreenTextareaPadding, "px"),
+        textareaPaddingY: "0",
+    })), reactUiTheme);
+};
+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, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;

package/src/Markdown/MarkdownActions.d.ts

@@ -0,0 +1,18 @@
+import { Textarea } from '@skbkontur/react-ui';
+import { FC, RefObject } from 'react';
+import { HorizontalPaddings, ViewMode } from './types';
+interface Props {
+    horizontalPaddings: HorizontalPaddings;
+    onChangeViewMode: (viewMode: ViewMode) => void;
+    onClickFullscreen: () => void;
+    onOpenFileDialog: () => void;
+    textAreaRef: RefObject<Textarea>;
+    viewMode: ViewMode;
+    fullscreen?: boolean;
+    hasFilesApi?: boolean;
+    loadingFile?: boolean;
+    selectionEnd?: number | null;
+    selectionStart?: number | null;
+}
+export declare const MarkdownActions: FC<Props>;
+export {};