@skbkontur/markdown 1.12.3 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/README.md +27 -26
  2. package/index.d.ts +1 -1
  3. package/index.js +1 -1
  4. package/package.json +33 -29
  5. package/src/Markdown/Emoji/Emoji.logic.d.ts +15 -0
  6. package/src/Markdown/Emoji/Emoji.logic.js +12 -0
  7. package/src/Markdown/Emoji/Emoji.styled.d.ts +5 -0
  8. package/src/Markdown/Emoji/Emoji.styled.js +11 -0
  9. package/src/Markdown/Emoji/EmojiDropdown.d.ts +9 -0
  10. package/src/Markdown/Emoji/EmojiDropdown.js +23 -0
  11. package/src/Markdown/Markdown.d.ts +3 -5
  12. package/src/Markdown/Markdown.js +4 -2
  13. package/src/Markdown/Markdown.styled.d.ts +70 -4
  14. package/src/Markdown/MarkdownActions.d.ts +4 -2
  15. package/src/Markdown/MarkdownActions.js +23 -6
  16. package/src/Markdown/types.d.ts +2 -0
  17. package/src/MarkdownIcons/AttachLink.d.ts +0 -1
  18. package/src/MarkdownIcons/AttachPaperclip.d.ts +0 -1
  19. package/src/MarkdownIcons/CheckedList.d.ts +0 -1
  20. package/src/MarkdownIcons/Collapse.d.ts +0 -1
  21. package/src/MarkdownIcons/DocIcon.d.ts +0 -1
  22. package/src/MarkdownIcons/EmojiFace.d.ts +1 -0
  23. package/src/MarkdownIcons/EmojiFace.js +11 -0
  24. package/src/MarkdownIcons/Expand.d.ts +0 -1
  25. package/src/MarkdownIcons/EyeOpen.d.ts +0 -1
  26. package/src/MarkdownIcons/List.d.ts +0 -1
  27. package/src/MarkdownIcons/NumberedList.d.ts +0 -1
  28. package/src/MarkdownIcons/Table.d.ts +0 -1
  29. package/src/MarkdownIcons/ToolPencil.d.ts +0 -1
  30. package/src/MarkdownViewer/Helpers/MarkdownLink.d.ts +0 -1
  31. package/src/MarkdownViewer/MarkdownViewer.js +29 -5
  32. package/src/MarkdownViewer/MarkdownViewer.styles.d.ts +2 -0
  33. package/src/MarkdownViewer/MarkdownViewer.styles.js +16 -13
package/README.md CHANGED
@@ -15,48 +15,49 @@
15
15
  ### [Примеры использования](https://stackblitz.com/edit/skbkontur-markdown?file=src%2FApp.tsx)
16
16
 
17
17
  ### Markdown
18
+
18
19
  #### Props
19
20
 
20
- | prop | type | default | description |
21
- |-------------------------|------------------------------|-------|-----------------------------------------------------|
22
- | api? | MarkdownApi | undefined | Методы апи для загрузки/скачивания файлов и меншена |
23
- | fileApiUrl? | string | undefined | Url апи для файлов |
24
- | profileUrl? | string | undefined | Url для профиля сотрудника |
25
- | hideMarkdownActions? | boolean | undefined | Скрыть панель действий (кнопки помощи форматирования текста) |
26
- | markdownViewer? | (value: string) => ReactNode | undefined | Превьювер мардауна, по умолчанию используется MarkdownViewer |
27
- | panelHorizontalPadding? | number | undefined | Padding markdownActions (кнопки помощи форматирования текста), включает режим panel |
28
- | renderFilesValidation? | (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode | undefined | Render валидации файла, если она нужна, максимальный размер файла = 10mb |
21
+ | prop | type | default | description |
22
+ | ----------------------- | ------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------- |
23
+ | api? | MarkdownApi | undefined | Методы апи для загрузки/скачивания файлов и меншена |
24
+ | fileApiUrl? | string | undefined | Url апи для файлов |
25
+ | profileUrl? | string | undefined | Url для профиля сотрудника |
26
+ | markdownViewer? | (value: string) => ReactNode | undefined | Превьювер мардауна, по умолчанию используется MarkdownViewer |
27
+ | panelHorizontalPadding? | number | undefined | Padding markdownActions (кнопки помощи форматирования текста), включает режим panel |
28
+ | renderFilesValidation? | (horizontalPadding: HorizontalPaddings, onReset: () => void) => ReactNode | undefined | Render валидации файла, если она нужна, максимальный размер файла = 10mb |
29
+ | hideActionsOptions | object (HideActionsOptions) | undefined | Скрыть отдельные кнопки на панели действий |
29
30
 
30
31
  #### MarkdownApi
31
32
 
32
- | prop | type | default | description |
33
- |------------------|------------------------------|-----------|-----------------------------------------------------|
34
- | fileDownloadApi? |(id: string) => Promise<File>| undefined |Метод для загрузки файла|
35
- | fileUploadApi? |(file: File) => Promise<RefItem>| undefined |Метод для скачивания файла|
36
- | getUsersApi? |(query: string) => Promise<User[]>| undefined |Метод для получения списка пользователей|
33
+ | prop | type | default | description |
34
+ | ---------------- | ---------------------------------- | --------- | ---------------------------------------- |
35
+ | fileDownloadApi? | (id: string) => Promise<File> | undefined | Метод для загрузки файла |
36
+ | fileUploadApi? | (file: File) => Promise<RefItem> | undefined | Метод для скачивания файла |
37
+ | getUsersApi? | (query: string) => Promise<User[]> | undefined | Метод для получения списка пользователей |
37
38
 
38
39
  #### HorizontalPaddings
39
40
 
40
- | prop | type | default |
41
- |--------------------|------------------------------------|-----------|
41
+ | prop | type | default |
42
+ | ------------------ | ------ | --------- |
42
43
  | fullscreenPadding? | number | undefined |
43
- | panelPadding? | nmber | undefined |
44
+ | panelPadding? | nmber | undefined |
44
45
 
45
46
  #### MarkdownTheme
46
47
 
47
- | prop | type | description |
48
- | ---- |-----------------------------|--------------------------------------------------------------------------------------------------------------------|
49
- | colors |ColorScheme | Цветовая схема |
50
- | elementsFontSize |string| font-size переменных темы react-ui: tabFontSize, btnFontSizeSmall, hintFontSize, checkboxBoxSize, menuItemFontSize |
51
- | elementsLineHeight |string| line-height переменных темы react-ui: tabLineHeight |
52
- | themeMode |string| Темный/светлый режим темы |
53
- | droppablePlaceholderBgImage |string| Значение background-image для DroppablePlaceholder, если нужна пунктирная обводка в состоянии onDrag |
54
- | reactUiTheme |string| Тема react-ui |
48
+ | prop | type | description |
49
+ | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ |
50
+ | colors | ColorScheme | Цветовая схема |
51
+ | elementsFontSize | string | font-size переменных темы react-ui: tabFontSize, btnFontSizeSmall, hintFontSize, checkboxBoxSize, menuItemFontSize |
52
+ | elementsLineHeight | string | line-height переменных темы react-ui: tabLineHeight |
53
+ | themeMode | string | Темный/светлый режим темы |
54
+ | droppablePlaceholderBgImage | string | Значение background-image для DroppablePlaceholder, если нужна пунктирная обводка в состоянии onDrag |
55
+ | reactUiTheme | string | Тема react-ui |
55
56
 
56
57
  #### ColorScheme
57
58
 
58
59
  | prop | type | description |
59
- |----------------|--------|------------------------------------------------------------------------|
60
+ | -------------- | ------ | ---------------------------------------------------------------------- |
60
61
  | brand | string | Цвет сервиса |
61
62
  | disabledButton | string | Цвет текста кнопки для переменной btnDisabledTextColor |
62
63
  | grayDefault | string | Основной серый цвет, используется в кнопках, чекбоксах, иконках и т.д. |
package/index.d.ts CHANGED
@@ -2,6 +2,6 @@ export { Markdown, MarkdownProps } from './src/Markdown/Markdown';
2
2
  export { MarkdownCombination } from './src/MarkdownCombination/MarkdownCombination';
3
3
  export { markdownHelpItems, markdownHelpFiles, markdownHelpLists, markdownHelpOther, } from './src/Markdown/MarkdownHelpItems';
4
4
  export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
5
- export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode } from '././src/Markdown/types';
5
+ export { MarkdownApi, RefItem, User, Token, HorizontalPaddings, ViewMode, HideActionsOptions, } from '././src/Markdown/types';
6
6
  export { ThemeMode, ColorScheme } from './src/styles/types';
7
7
  export { MarkdownTheme, MarkdownThemeProvider, MarkdownThemeConsumer, MarkdownThemeContext } from './src/styles/theme';
package/index.js CHANGED
@@ -2,5 +2,5 @@ export { Markdown } from './src/Markdown/Markdown';
2
2
  export { MarkdownCombination } from './src/MarkdownCombination/MarkdownCombination';
3
3
  export { markdownHelpItems, markdownHelpFiles, markdownHelpLists, markdownHelpOther, } from './src/Markdown/MarkdownHelpItems';
4
4
  export { MarkdownViewer } from './src/MarkdownViewer/MarkdownViewer';
5
- export { ViewMode } from '././src/Markdown/types';
5
+ export { ViewMode, } from '././src/Markdown/types';
6
6
  export { MarkdownThemeProvider, MarkdownThemeConsumer, MarkdownThemeContext } from './src/styles/theme';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skbkontur/markdown",
3
- "version": "1.12.3",
3
+ "version": "2.1.0",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/",
6
6
  "access": "public"
@@ -10,16 +10,21 @@
10
10
  "license": "UNLICENSED",
11
11
  "author": "tsypilov",
12
12
  "dependencies": {
13
+ "@emoji-mart/data": "1.2.1",
14
+ "@emoji-mart/react": "1.1.1",
13
15
  "@types/styled-components": "5.1.26",
14
16
  "@types/turndown": "^5.0.1",
15
17
  "@types/uuid": "^9.0.1",
18
+ "emoji-mart": "5.6.0",
16
19
  "react-dropzone": "^14.2.3",
17
20
  "react-foco": "^1.3.1",
18
21
  "react-markdown": "^8.0.7",
22
+ "rehype-katex": "6.0.0",
19
23
  "rehype-raw": "^6.1.1",
20
24
  "rehype-sanitize": "5.0.1",
21
25
  "remark-breaks": "^3.0.3",
22
26
  "remark-gfm": "^3.0.1",
27
+ "remark-math": "5.1.1",
23
28
  "styled-components": "5.3.11",
24
29
  "turndown": "^7.1.2",
25
30
  "turndown-plugin-gfm": "^1.0.2",
@@ -35,49 +40,46 @@
35
40
  "lint:fix": "eslint --ext=.ts,tsx src --fix",
36
41
  "stylelint": "stylelint \"src/**/*.styled.{tsx,ts}\"",
37
42
  "prepare": "husky install .husky",
38
- "storybook": "start-storybook -p 6007 -s public",
39
- "build-storybook": "build-storybook --quiet",
40
- "test-storybook": "test-storybook",
43
+ "start-storybook-server": "http-server ./storybook-static -p 6007 -s",
44
+ "storybook": "storybook dev -p 6007",
45
+ "build-storybook": "storybook build --quiet",
46
+ "test-storybook": "test-storybook --url http://127.0.0.1:6007",
41
47
  "test": "jest test",
42
48
  "test:ci": "cross-env CI=true jest test --passWithNoTests --testResultsProcessor=jest-teamcity-reporter",
43
49
  "creevey:ui": "creevey --ui --port=3003",
44
- "screenshots:ci": "concurrently -k -s first \"http-server ./storybook-static -p 6006 -s\" \"yarn creevey\" \"yarn test-storybook\""
50
+ "screenshots:ci": "concurrently -k -s first \"yarn start-storybook-server\" \"yarn creevey\" \"yarn test-storybook\""
45
51
  },
46
52
  "peerDependencies": {
47
- "@skbkontur/react-ui": ">=4.5.0 <5",
53
+ "@skbkontur/react-ui": ">=4.5.0",
48
54
  "@skbkontur/react-ui-validations": "^1.12.0",
49
- "react": ">=16.9",
50
- "react-dom": ">=16.9"
55
+ "react": ">=17",
56
+ "react-dom": ">=17"
51
57
  },
52
58
  "devDependencies": {
53
- "@babel/core": "7.18.0",
54
- "@babel/plugin-syntax-jsx": "7.21.4",
55
- "@babel/preset-env": "7.21.4",
56
- "@babel/preset-typescript": "7.21.4",
57
59
  "@skbkontur/react-ui": "^4.14.0",
58
60
  "@skbkontur/react-ui-validations": "^1.12.0",
59
- "@storybook/addon-a11y": "6.5.16",
60
- "@storybook/addon-actions": "6.5.16",
61
- "@storybook/addon-essentials": "6.5.16",
62
- "@storybook/addon-interactions": "6.5.3",
63
- "@storybook/addon-links": "6.5.16",
64
- "@storybook/builder-webpack5": "6.5.16",
65
- "@storybook/manager-webpack5": "6.5.16",
66
- "@storybook/node-logger": "6.5.16",
67
- "@storybook/preset-create-react-app": "4.1.2",
68
- "@storybook/react": "6.5.16",
69
- "@storybook/test-runner": "0.9.4",
61
+ "@storybook/addon-a11y": "8.2.8",
62
+ "@storybook/addon-actions": "8.2.8",
63
+ "@storybook/addon-essentials": "8.2.8",
64
+ "@storybook/addon-interactions": "8.2.8",
65
+ "@storybook/addon-links": "8.2.8",
66
+ "@storybook/node-logger": "8.2.8",
67
+ "@storybook/react": "8.2.8",
68
+ "@storybook/react-vite": "8.2.8",
69
+ "@storybook/test-runner": "0.19.1",
70
70
  "@swc/core": "1.3.50",
71
71
  "@swc/jest": "0.2.26",
72
+ "@swc/plugin-styled-components": "5.0.0",
72
73
  "@types/jest": "29.5.0",
73
74
  "@types/node": "12.0.0",
74
- "@types/react": "16.9.0",
75
- "@types/react-dom": "16.9.0",
75
+ "@types/react": "17.0.39",
76
+ "@types/react-dom": "17.0.25",
76
77
  "@typescript-eslint/eslint-plugin": "5.57.0",
77
78
  "@typescript-eslint/parser": "5.57.0",
79
+ "@vitejs/plugin-react-swc": "3.7.2",
78
80
  "axe-playwright": "1.2.3",
79
81
  "concurrently": "^7.0.0",
80
- "creevey": "0.9.0-beta.5",
82
+ "creevey": "0.9.2",
81
83
  "cross-env": "6.0.3",
82
84
  "eslint": "8.32.0",
83
85
  "eslint-config-prettier": "8.8.0",
@@ -96,13 +98,15 @@
96
98
  "lerna": "5.0.0",
97
99
  "lint-staged": "12.3.4",
98
100
  "prettier": "2.2.1",
99
- "react": "16.9.0",
100
- "react-dom": "16.9.0",
101
+ "react": "17",
102
+ "react-dom": "17",
103
+ "storybook": "8.2.8",
101
104
  "stylelint": "13.13.1",
102
105
  "stylelint-config-standard": "22.0.0",
103
106
  "stylelint-config-styled-components": "^0.1.1",
104
107
  "stylelint-processor-styled-components": "^1.10.0",
105
- "typescript": "4.9.4"
108
+ "typescript": "4.9.4",
109
+ "vite": "5.4.11"
106
110
  },
107
111
  "files": [
108
112
  "src/**/*.js",
package/src/Markdown/Emoji/Emoji.logic.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { Textarea } from '@skbkontur/react-ui';
2
+ import { Nullable } from '../types';
3
+ /** FIXME: разобраться как достать тип EmojiData из либы emoji-mart */
4
+ export interface EmojiData {
5
+ emoticons: string[];
6
+ id: string;
7
+ keywords: string[];
8
+ name: string;
9
+ native: string;
10
+ shortcodes: string;
11
+ unified: string;
12
+ }
13
+ export declare const useEmojiLogic: (textarea: Nullable<Textarea>) => {
14
+ onSelectEmoji: (emoji: EmojiData) => void;
15
+ };
package/src/Markdown/Emoji/Emoji.logic.js ADDED
@@ -0,0 +1,12 @@
1
+ import { setMarkdownPastedHtml } from '../MarkdownHelpers/markdownHelpers';
2
+ export var useEmojiLogic = function (textarea) {
3
+ var onSelectEmoji = function (emoji) {
4
+ if (textarea) {
5
+ var textareaNode = textarea.node;
6
+ setMarkdownPastedHtml(emoji.native, textareaNode);
7
+ }
8
+ };
9
+ return {
10
+ onSelectEmoji: onSelectEmoji,
11
+ };
12
+ };
package/src/Markdown/Emoji/Emoji.styled.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Все доступные переменные для кастомизации стилей можно посмотреть здесь:
3
+ * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html
4
+ */
5
+ export declare const EmojiPickerWrapper: import("styled-components").StyledComponent<"div", import("../../..").MarkdownTheme, {}, never>;
package/src/Markdown/Emoji/Emoji.styled.js ADDED
@@ -0,0 +1,11 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
5
+ import styled from '../../styles/styled-components';
6
+ /**
7
+ * Все доступные переменные для кастомизации стилей можно посмотреть здесь:
8
+ * https://github.com/missive/emoji-mart/blob/main/packages/emoji-mart-website/example-custom-styles.html
9
+ */
10
+ export var EmojiPickerWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n em-emoji-picker {\n --font-family: inherit;\n --shadow: unset;\n --rgb-accent: ", ";\n --color-border: rgba(0, 0, 0, 0);\n }\n"], ["\n em-emoji-picker {\n --font-family: inherit;\n --shadow: unset;\n --rgb-accent: ", ";\n --color-border: rgba(0, 0, 0, 0);\n }\n"])), function (p) { return p.theme.colors.brand; });
11
+ var templateObject_1;
package/src/Markdown/Emoji/EmojiDropdown.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { EmojiData } from './Emoji.logic';
3
+ interface Props {
4
+ isPreviewMode: boolean;
5
+ onSelect: (emoji: EmojiData) => void;
6
+ showShortKey: boolean;
7
+ }
8
+ export declare const EmojiDropdown: React.FC<Props>;
9
+ export {};
package/src/Markdown/Emoji/EmojiDropdown.js ADDED
@@ -0,0 +1,23 @@
1
+ import data from '@emoji-mart/data';
2
+ import EmojiPicker from '@emoji-mart/react';
3
+ import { DropdownMenu } from '@skbkontur/react-ui';
4
+ import React, { useRef } from 'react';
5
+ import { EmojiPickerWrapper } from './Emoji.styled';
6
+ import { EmojiFace } from '../../MarkdownIcons/EmojiFace';
7
+ import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../../styles/theme';
8
+ import { MarkdownFormatButton } from '../MarkdownHelpers/MarkdownFormatButton';
9
+ export var EmojiDropdown = function (_a) {
10
+ var isPreviewMode = _a.isPreviewMode, showShortKey = _a.showShortKey, onSelect = _a.onSelect;
11
+ var dropdownMenuRef = useRef(null);
12
+ return (React.createElement(MarkdownThemeConsumer, null, function (theme) {
13
+ var currentTheme = theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME;
14
+ return (React.createElement(DropdownMenu, { ref: dropdownMenuRef, caption: React.createElement(MarkdownFormatButton, { showShortKey: showShortKey, hintText: "Emoji", disabled: isPreviewMode, icon: React.createElement(EmojiFace, null), text: "Emoji" }) },
15
+ React.createElement(EmojiPickerWrapper, null,
16
+ React.createElement(EmojiPicker, { data: data, locale: "ru", theme: currentTheme.themeMode, skinTonePosition: "none", previewPosition: "none", onEmojiSelect: handleSelectEmoji }))));
17
+ }));
18
+ function handleSelectEmoji(data) {
19
+ var _a;
20
+ onSelect(data);
21
+ (_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.close();
22
+ }
23
+ };
package/src/Markdown/Markdown.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FC, ReactNode } from 'react';
2
2
  import { MarkdownEditorProps } from './MarkdownEditor';
3
- import { HorizontalPaddings, MarkdownApi } from './types';
3
+ import { HorizontalPaddings, MarkdownApi, HideActionsOptions } from './types';
4
4
  export interface MarkdownProps extends MarkdownEditorProps {
5
5
  /** Методы апи для загрузки/скачивания файлов и меншена */
6
6
  api?: MarkdownApi;
@@ -8,10 +8,8 @@ export interface MarkdownProps extends MarkdownEditorProps {
8
8
  borderless?: boolean;
9
9
  /** Url апи для файлов */
10
10
  fileApiUrl?: string;
11
- /** Скрыть селект выбора размера текста */
12
- hideHeadersSelect?: boolean;
13
- /** Скрыть панель действий (кнопки помощи форматирования текста) */
14
- hideMarkdownActions?: boolean;
11
+ /** Скрывать выборочно опции */
12
+ hideActionsOptions?: HideActionsOptions;
15
13
  /** Превьювер мардауна, по умолчанию используется MarkdownViewer */
16
14
  markdownViewer?: (value: string) => ReactNode;
17
15
  /** Padding markdownActions (кнопки помощи форматирования текста), включает режим panel */
package/src/Markdown/Markdown.js CHANGED
@@ -25,6 +25,7 @@ import { HideBodyVerticalScroll } from '@skbkontur/react-ui/internal/HideBodyVer
25
25
  import React, { useEffect, useLayoutEffect, useRef, useState, } from 'react';
26
26
  import Foco from 'react-foco/lib';
27
27
  import { MENTION_WRAPPER_ID_POSTFIX } from './constants';
28
+ import { useEmojiLogic } from './Emoji/Emoji.logic';
28
29
  import { useFileLogic } from './Files/Files.logic';
29
30
  import { DroppablePlaceholder, getMarkdownReactUiTheme, MarkdownEditorBlock, MarkdownPreview, MentionWrapper, Wrapper, } from './Markdown.styled';
30
31
  import { MarkdownActions } from './MarkdownActions';
@@ -41,7 +42,7 @@ import { ThemeProvider } from '../styles/styled-components';
41
42
  import { DEFAULT_MARKDOWN_THEME, MarkdownThemeConsumer } from '../styles/theme';
42
43
  export var Markdown = function (props) {
43
44
  var _a;
44
- var panelHorizontalPadding = props.panelHorizontalPadding, hideMarkdownActions = props.hideMarkdownActions, onClick = props.onClick, onChange = props.onChange, onSelect = props.onSelect, markdownViewer = props.markdownViewer, renderFilesValidation = props.renderFilesValidation, fileApiUrl = props.fileApiUrl, profileUrl = props.profileUrl, api = props.api, hideHeadersSelect = props.hideHeadersSelect, borderless = props.borderless, _b = props.showShotKeys, showShotKeys = _b === void 0 ? true : _b, textareaProps = __rest(props, ["panelHorizontalPadding", "hideMarkdownActions", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "hideHeadersSelect", "borderless", "showShotKeys"]);
45
+ var panelHorizontalPadding = props.panelHorizontalPadding, onClick = props.onClick, onChange = props.onChange, onSelect = props.onSelect, markdownViewer = props.markdownViewer, renderFilesValidation = props.renderFilesValidation, fileApiUrl = props.fileApiUrl, profileUrl = props.profileUrl, api = props.api, borderless = props.borderless, _b = props.showShotKeys, showShotKeys = _b === void 0 ? true : _b, hideActionsOptions = props.hideActionsOptions, textareaProps = __rest(props, ["panelHorizontalPadding", "onClick", "onChange", "onSelect", "markdownViewer", "renderFilesValidation", "fileApiUrl", "profileUrl", "api", "borderless", "showShotKeys", "hideActionsOptions"]);
45
46
  var textareaRef = useRef(null);
46
47
  var _c = useState(), mention = _c[0], setMention = _c[1];
47
48
  var _d = useState(ViewMode.Edit), viewMode = _d[0], setViewMode = _d[1];
@@ -53,6 +54,7 @@ export var Markdown = function (props) {
53
54
  var isEditMode = viewMode === ViewMode.Edit;
54
55
  var width = fullscreen ? "100%" : textareaProps === null || textareaProps === void 0 ? void 0 : textareaProps.width;
55
56
  var _j = 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 = _j.getRootProps, isDragActive = _j.isDragActive, requestStatus = _j.requestStatus, open = _j.open, error = _j.error, onResetError = _j.onResetError;
57
+ var onSelectEmoji = useEmojiLogic(textareaRef.current).onSelectEmoji;
56
58
  usePasteFromClipboard(textareaRef.current, api === null || api === void 0 ? void 0 : api.fileUploadApi, api === null || api === void 0 ? void 0 : api.fileDownloadApi, fileApiUrl);
57
59
  useListenTextareaScroll(resetMention, textareaRef.current);
58
60
  useLayoutEffect(function () {
@@ -76,7 +78,7 @@ export var Markdown = function (props) {
76
78
  };
77
79
  var content = (React.createElement(Foco, { component: "div", onClickOutside: resetStates },
78
80
  React.createElement(Wrapper, __assign({}, getRootProps()),
79
- !hideMarkdownActions && (React.createElement(MarkdownActions, { showShortKeys: showShotKeys, textAreaRef: textareaRef, width: width, viewMode: viewMode, loadingFile: requestStatus === RequestStatus.isFetching, fullscreen: fullscreen, hideHeadersSelect: hideHeadersSelect, 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 })),
81
+ !(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), onOpenFileDialog: open, onChangeViewMode: setViewMode, onClickFullscreen: handleClickFullscreen, onSelectEmoji: onSelectEmoji })),
80
82
  isEditMode && error && (api === null || api === void 0 ? void 0 : api.getUsersApi) && (renderFilesValidation === null || renderFilesValidation === void 0 ? void 0 : renderFilesValidation(horizontalPaddings, onResetError)),
81
83
  isEditMode && renderEditContainer(),
82
84
  isDragActive && isEditMode && React.createElement(DroppablePlaceholder, __assign({}, horizontalPaddings))),
package/src/Markdown/Markdown.styled.d.ts CHANGED
@@ -115,6 +115,7 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
115
115
  linkDangerHoverColor?: string | undefined;
116
116
  linkDangerActiveColor?: string | undefined;
117
117
  linkIconMarginRight?: string | undefined;
118
+ linkIconMarginLeft?: string | undefined;
118
119
  linkHoverColor?: string | undefined;
119
120
  linkDisabledColor?: string | undefined;
120
121
  linkGrayedColor?: string | undefined;
@@ -127,14 +128,35 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
127
128
  linkLineBorderBottomWidth?: string | undefined;
128
129
  linkLineBorderBottomOpacity?: string | undefined;
129
130
  linkLineBorderBottomColor?: string | undefined;
131
+ linkFocusOutlineColor?: string | undefined;
132
+ linkFocusOutlineWidth?: string | undefined;
133
+ linkFocusOutline?: string | undefined;
130
134
  tokenDisabledBg?: string | undefined;
131
135
  tokenTextColorDisabled?: string | undefined;
132
136
  tokenFontSize?: string | undefined;
137
+ tokenFontSizeSmall?: string | undefined;
138
+ tokenFontSizeMedium?: string | undefined;
139
+ tokenFontSizeLarge?: string | undefined;
133
140
  tokenMarginY?: string | undefined;
134
141
  tokenMarginX?: string | undefined;
142
+ tokenMarginYSmall?: string | undefined;
143
+ tokenMarginXSmall?: string | undefined;
144
+ tokenMarginYMedium?: string | undefined;
145
+ tokenMarginXMedium?: string | undefined;
146
+ tokenMarginYLarge?: string | undefined;
147
+ tokenMarginXLarge?: string | undefined;
135
148
  tokenLineHeight?: string | undefined;
149
+ tokenLineHeightSmall?: string | undefined;
150
+ tokenLineHeightMedium?: string | undefined;
151
+ tokenLineHeightLarge?: string | undefined;
136
152
  tokenPaddingY?: string | undefined;
137
153
  tokenPaddingX?: string | undefined;
154
+ tokenPaddingYSmall?: string | undefined;
155
+ tokenPaddingXSmall?: string | undefined;
156
+ tokenPaddingYMedium?: string | undefined;
157
+ tokenPaddingXMedium?: string | undefined;
158
+ tokenPaddingYLarge?: string | undefined;
159
+ tokenPaddingXLarge?: string | undefined;
138
160
  tokenMarginBeforeIcon?: string | undefined;
139
161
  tokenRemoveIconSize?: string | undefined;
140
162
  tokenRemoveIconPaddingY?: string | undefined;
@@ -176,6 +198,10 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
176
198
  tokenDefaultActiveBg?: string | undefined;
177
199
  tokenDefaultActiveColor?: string | undefined;
178
200
  tokenDefaultActiveBorderColor?: string | undefined;
201
+ tokenInputLineHeight?: string | undefined;
202
+ tokenInputLineHeightSmall?: string | undefined;
203
+ tokenInputLineHeightMedium?: string | undefined;
204
+ tokenInputLineHeightLarge?: string | undefined;
179
205
  tokenInputBorderColor?: string | undefined;
180
206
  tokenInputBorderColorHover?: string | undefined;
181
207
  tokenInputBorderColorFocus?: string | undefined;
@@ -197,10 +223,16 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
197
223
  tokenInputPlaceholderColorDisabled?: string | undefined;
198
224
  tokenInputPaddingY?: string | undefined;
199
225
  tokenInputPaddingX?: string | undefined;
200
- tokenInputFontSize?: string | undefined;
201
- tokenInputLineHeight?: string | undefined;
202
- tokenInputInputPaddingLeft?: string | undefined;
203
- tokenInputInputPaddingRight?: string | undefined;
226
+ tokenInputPaddingYSmall?: string | undefined;
227
+ tokenInputPaddingXSmall?: string | undefined;
228
+ tokenInputPaddingYMedium?: string | undefined;
229
+ tokenInputPaddingXMedium?: string | undefined;
230
+ tokenInputPaddingYLarge?: string | undefined;
231
+ tokenInputPaddingXLarge?: string | undefined;
232
+ tokenInputPopupOffset?: string | undefined;
233
+ tokenInputPopupMarginSmall?: string | undefined;
234
+ tokenInputPopupMarginMedium?: string | undefined;
235
+ tokenInputPopupMarginLarge?: string | undefined;
204
236
  loaderBg?: string | undefined;
205
237
  loaderOpacity?: string | undefined;
206
238
  loaderBorderRadius?: string | undefined;
@@ -228,8 +260,14 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
228
260
  btnPaddingXMedium?: string | undefined;
229
261
  btnPaddingXLarge?: string | undefined;
230
262
  btnIconGapSmall?: string | undefined;
263
+ btnIconGapSmallLeft?: string | undefined;
264
+ btnIconGapSmallRight?: string | undefined;
231
265
  btnIconGapMedium?: string | undefined;
266
+ btnIconGapMediumLeft?: string | undefined;
267
+ btnIconGapMediumRight?: string | undefined;
232
268
  btnIconGapLarge?: string | undefined;
269
+ btnIconGapLargeLeft?: string | undefined;
270
+ btnIconGapLargeRight?: string | undefined;
233
271
  btnIconSizeSmall?: string | undefined;
234
272
  btnIconSizeMedium?: string | undefined;
235
273
  btnIconSizeLarge?: string | undefined;
@@ -244,6 +282,7 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
244
282
  btnDefaultActiveBg?: string | undefined;
245
283
  btnDefaultHoverBorderColor?: string | undefined;
246
284
  btnDefaultHoverBorderBottomColor?: string | undefined;
285
+ btnDefaultHoverTextColor?: string | undefined;
247
286
  btnDefaultActiveBorderColor: string;
248
287
  btnDefaultActiveBorderTopColor?: string | undefined;
249
288
  btnDefaultBorderColor?: string | undefined;
@@ -253,6 +292,7 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
253
292
  btnSuccessHoverBg?: string | undefined;
254
293
  btnSuccessHoverBorderColor?: string | undefined;
255
294
  btnSuccessHoverBorderBottomColor?: string | undefined;
295
+ btnSuccessHoverTextColor?: string | undefined;
256
296
  btnSuccessBorderColor?: string | undefined;
257
297
  btnSuccessBorderBottomColor?: string | undefined;
258
298
  btnSuccessBgStart?: string | undefined;
@@ -268,6 +308,7 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
268
308
  btnPrimaryHoverBg?: string | undefined;
269
309
  btnPrimaryHoverBorderColor?: string | undefined;
270
310
  btnPrimaryHoverBorderBottomColor?: string | undefined;
311
+ btnPrimaryHoverTextColor?: string | undefined;
271
312
  btnPrimaryBorderColor?: string | undefined;
272
313
  btnPrimaryBorderBottomColor?: string | undefined;
273
314
  btnPrimaryBgStart?: string | undefined;
@@ -283,6 +324,7 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
283
324
  btnDangerHoverBg?: string | undefined;
284
325
  btnDangerHoverBorderColor?: string | undefined;
285
326
  btnDangerHoverBorderBottomColor?: string | undefined;
327
+ btnDangerHoverTextColor?: string | undefined;
286
328
  btnDangerBorderColor?: string | undefined;
287
329
  btnDangerBorderBottomColor?: string | undefined;
288
330
  btnDangerBgStart?: string | undefined;
@@ -298,6 +340,7 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
298
340
  btnPayHoverBg?: string | undefined;
299
341
  btnPayHoverBorderColor?: string | undefined;
300
342
  btnPayHoverBorderBottomColor?: string | undefined;
343
+ btnPayHoverTextColor?: string | undefined;
301
344
  btnPayBorderColor?: string | undefined;
302
345
  btnPayBorderBottomColor?: string | undefined;
303
346
  btnPayBgStart?: string | undefined;
@@ -335,6 +378,7 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
335
378
  btnLinkLineBorderBottomWidth?: string | undefined;
336
379
  btnLinkLineBorderBottomOpacity?: string | undefined;
337
380
  btnLinkIconMarginRight?: string | undefined;
381
+ btnLinkIconMarginLeft?: string | undefined;
338
382
  btnErrorSecondary?: string | undefined;
339
383
  btnWarningSecondary?: string | undefined;
340
384
  btnOutlineColorFocus?: string | undefined;
@@ -346,13 +390,16 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
346
390
  btnBacklessHoverBg?: string | undefined;
347
391
  btnBacklessActiveBg?: string | undefined;
348
392
  btnBacklessBorderColor?: string | undefined;
393
+ btnBacklessDisabledBorderColor?: string | undefined;
349
394
  btnBacklessHoverBorderColor?: string | undefined;
395
+ btnBacklessHoverTextColor?: string | undefined;
350
396
  btnBacklessTextColor?: string | undefined;
351
397
  btnTextBg?: string | undefined;
352
398
  btnTextHoverBg?: string | undefined;
353
399
  btnTextActiveBg?: string | undefined;
354
400
  btnTextBorderColor?: string | undefined;
355
401
  btnTextTextColor?: string | undefined;
402
+ btnTextHoverTextColor?: string | undefined;
356
403
  btnTextHoverBorderColor?: string | undefined;
357
404
  btnWithIconPaddingLeftSmall?: string | undefined;
358
405
  btnWithIconPaddingLeftMedium?: string | undefined;
@@ -543,6 +590,7 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
543
590
  dateInputIconColor?: string | undefined;
544
591
  dateInputMaskColor?: string | undefined;
545
592
  dateInputComponentSelectedBgColor?: string | undefined;
593
+ dateInputComponentSelectedTextColor?: string | undefined;
546
594
  calendarBottomSeparatorBorderColor?: string | undefined;
547
595
  calendarBottomSeparatorBorderWidth?: string | undefined;
548
596
  calendarBottomSeparatorBorder?: string | undefined;
@@ -552,9 +600,13 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
552
600
  calendarCellActiveHoverColor?: string | undefined;
553
601
  calendarCellWeekendColor?: string | undefined;
554
602
  calendarCellTodayBorder?: string | undefined;
603
+ calendarCellBorderRadius?: string | undefined;
555
604
  calendarCellSelectedBgColor?: string | undefined;
556
605
  calendarCellSelectedFontColor?: string | undefined;
557
606
  calendarCellSize?: string | undefined;
607
+ calendarCellHeight?: string | undefined;
608
+ calendarCellWidth?: string | undefined;
609
+ calendarCellFontSize?: string | undefined;
558
610
  calendarCellLineHeight?: string | undefined;
559
611
  calendarMonthHeaderStickedBgColor?: string | undefined;
560
612
  calendarMonthTitleBorderBottomColor?: string | undefined;
@@ -568,6 +620,7 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
568
620
  calendarWrapperHeight?: string | undefined;
569
621
  calendarMonthMarginBottom?: string | undefined;
570
622
  calendarMaxMonthsToAppendOnScroll?: string | undefined;
623
+ calendarGridRowSpacing?: string | undefined;
571
624
  dateSelectLineHeight?: string | undefined;
572
625
  dateSelectFontSize?: string | undefined;
573
626
  dateSelectFontWeight?: string | undefined;
@@ -589,6 +642,15 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
589
642
  pickerTodayWrapperPaddingTop?: string | undefined;
590
643
  pickerTodayWrapperPaddingBottom?: string | undefined;
591
644
  pickerBorderRadius?: string | undefined;
645
+ mobileCalendarPaddingX?: string | undefined;
646
+ mobileCalendarCellWidth?: string | undefined;
647
+ mobileCalendarCellHeight?: string | undefined;
648
+ mobileCalendarCellBorderRadius?: string | undefined;
649
+ mobileCalendarCellFontSize?: string | undefined;
650
+ mobileCalendarGridRowSpacing?: string | undefined;
651
+ mobileDateSelectFontSize?: string | undefined;
652
+ mobileDateSelectLineHeight?: string | undefined;
653
+ mobileCalendarWrapperHeight?: string | undefined;
592
654
  dateSelectMenuBg?: string | undefined;
593
655
  dateSelectMenuItemBgActive?: string | undefined;
594
656
  dateSelectMenuItemBgDisabled?: string | undefined;
@@ -904,6 +966,7 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
904
966
  inputShadow?: string | undefined;
905
967
  inputBg?: string | undefined;
906
968
  inputIconColor?: string | undefined;
969
+ inputIconColorDisabled?: string | undefined;
907
970
  inputFocusedIconColor?: string | undefined;
908
971
  inputColor?: string | undefined;
909
972
  inputWidth?: string | undefined;
@@ -1171,6 +1234,7 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
1171
1234
  mobilePopupTopPadding?: string | undefined;
1172
1235
  mobilePopupContainerBottomPadding?: string | undefined;
1173
1236
  mobilePopupHeaderPadding?: string | undefined;
1237
+ mobilePopupFooterPadding?: string | undefined;
1174
1238
  mobilePopupContainerBorderRadius?: string | undefined;
1175
1239
  mobilePopupHeaderFontSize?: string | undefined;
1176
1240
  mobilePopupHeaderLineHeight?: string | undefined;
@@ -1271,4 +1335,6 @@ export declare const getMarkdownReactUiTheme: (theme: MarkdownTheme, reactUiThem
1271
1335
  miniModalFooterPaddingMobile?: string | undefined;
1272
1336
  miniModalHeaderPaddingMobile?: string | undefined;
1273
1337
  miniModalBodyPaddingMobile?: string | undefined;
1338
+ validationsTextColorError?: string | undefined;
1339
+ validationsTextColorWarning?: string | undefined;
1274
1340
  }>;
package/src/Markdown/MarkdownActions.d.ts CHANGED
@@ -1,17 +1,19 @@
1
1
  import { Textarea } from '@skbkontur/react-ui';
2
2
  import { FC, RefObject } from 'react';
3
- import { HorizontalPaddings, Nullable, ViewMode } from './types';
3
+ import { EmojiData } from './Emoji/Emoji.logic';
4
+ import { HideActionsOptions, HorizontalPaddings, Nullable, ViewMode } from './types';
4
5
  interface Props {
5
6
  horizontalPaddings: HorizontalPaddings;
6
7
  onChangeViewMode: (viewMode: ViewMode) => void;
7
8
  onClickFullscreen: () => void;
8
9
  onOpenFileDialog: () => void;
10
+ onSelectEmoji: (emoji: EmojiData) => void;
9
11
  showShortKeys: boolean;
10
12
  textAreaRef: RefObject<Textarea>;
11
13
  viewMode: ViewMode;
12
14
  fullscreen?: boolean;
13
15
  hasFilesApi?: boolean;
14
- hideHeadersSelect?: boolean;
16
+ hideOptions?: HideActionsOptions;
15
17
  loadingFile?: boolean;
16
18
  selectionEnd?: Nullable<number>;
17
19
  selectionStart?: Nullable<number>;
package/src/Markdown/MarkdownActions.js CHANGED
@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
12
12
  import { Dropdown } from '@skbkontur/react-ui';
13
13
  import React from 'react';
14
14
  import { COMMONMARK_HELP_URL } from './constants';
15
+ import { EmojiDropdown } from './Emoji/EmojiDropdown';
15
16
  import { ActionsWrapper, ButtonsWrapper, MarkdownDropdown, MarkdownMenuItem, MarkdownActionsWrapper, } from './Markdown.styled';
16
17
  import { MarkdownFormatButton } from './MarkdownHelpers/MarkdownFormatButton';
17
18
  import { setMarkdown } from './MarkdownHelpers/markdownHelpers';
@@ -25,18 +26,31 @@ import { Expand } from '../MarkdownIcons/Expand';
25
26
  import { EyeOpen } from '../MarkdownIcons/EyeOpen';
26
27
  import { ToolPencil } from '../MarkdownIcons/ToolPencil';
27
28
  export var MarkdownActions = function (_a) {
28
- 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, hideHeadersSelect = _a.hideHeadersSelect, width = _a.width, showShortKeys = _a.showShortKeys;
29
+ 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;
29
30
  var isPreviewMode = viewMode === ViewMode.Preview;
30
31
  return (React.createElement(MarkdownActionsWrapper, __assign({}, horizontalPaddings, { width: width }),
31
32
  React.createElement(ButtonsWrapper, __assign({}, horizontalPaddings),
32
33
  React.createElement(ActionsWrapper, null,
33
- hideHeadersSelect || (React.createElement(MarkdownDropdown, null,
34
+ !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.heading) && (React.createElement(MarkdownDropdown, null,
34
35
  React.createElement(Dropdown, { disablePortal: true, disabled: isPreviewMode, menuWidth: 280, caption: "\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A" }, markdownHelpHeaders.map(function (helper, idx) { return (React.createElement(MarkdownMenuItem, { key: idx, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } },
35
36
  React.createElement(MarkdownCombination, { showShortKey: showShortKeys, format: helper.format, text: helper.node }))); })))),
36
- markdownHelpText.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
37
- markdownHelpLists.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
38
- markdownHelpOther.map(function (helper, idx) { return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } })); }),
39
- 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 })),
37
+ markdownHelpText.map(function (helper, idx) {
38
+ if (isHiddenOptions(helper.format))
39
+ return null;
40
+ return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
41
+ }),
42
+ markdownHelpLists.map(function (helper, idx) {
43
+ if (isHiddenOptions(helper.format))
44
+ return null;
45
+ return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
46
+ }),
47
+ markdownHelpOther.map(function (helper, idx) {
48
+ if (isHiddenOptions(helper.format))
49
+ return null;
50
+ return (React.createElement(MarkdownFormatButton, { key: idx, showShortKey: showShortKeys, disabled: isPreviewMode, format: helper.format, hintText: helper.node, icon: helper.icon, text: helper.text, onClick: function (event) { return handleMarkdownItemClick(event, helper.format); } }));
51
+ }),
52
+ hasFilesApi && !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.file) && (React.createElement(MarkdownFormatButton, { hintText: "\u041F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u0444\u0430\u0439\u043B", showShortKey: showShortKeys, 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 })),
53
+ !(hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions.emoji) && (React.createElement(EmojiDropdown, { showShortKey: showShortKeys, isPreviewMode: isPreviewMode, onSelect: onSelectEmoji })),
40
54
  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 })),
41
55
  React.createElement(ActionsWrapper, null,
42
56
  renderViewModeButton(),
@@ -65,4 +79,7 @@ export var MarkdownActions = function (_a) {
65
79
  }
66
80
  }
67
81
  }
82
+ function isHiddenOptions(format) {
83
+ return hideOptions === null || hideOptions === void 0 ? void 0 : hideOptions[format];
84
+ }
68
85
  };
package/src/Markdown/types.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { THEME_2022 } from '@skbkontur/react-ui';
2
+ import { MarkdownFormat } from './MarkdownFormat';
2
3
  export declare enum ViewMode {
3
4
  Preview = "Preview",
4
5
  Edit = "Edit"
@@ -37,3 +38,4 @@ export interface TestCase<V, E> {
37
38
  values: V;
38
39
  }
39
40
  export type ReactUIThemeType = Partial<typeof THEME_2022>;
41
+ export type HideActionsOptions = Partial<Record<MarkdownFormat | 'heading' | 'emoji' | 'allActions', boolean>>;
package/src/MarkdownIcons/AttachLink.d.ts CHANGED
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const AttachLink: () => JSX.Element;
package/src/MarkdownIcons/AttachPaperclip.d.ts CHANGED
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const AttachPaperclip: () => JSX.Element;
package/src/MarkdownIcons/CheckedList.d.ts CHANGED
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const CheckedList: () => JSX.Element;
package/src/MarkdownIcons/Collapse.d.ts CHANGED
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const Collapse: () => JSX.Element;
package/src/MarkdownIcons/DocIcon.d.ts CHANGED
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const DocIcon: () => JSX.Element;
package/src/MarkdownIcons/EmojiFace.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const EmojiFace: () => JSX.Element;
package/src/MarkdownIcons/EmojiFace.js ADDED
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ export var EmojiFace = function () { return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" },
3
+ React.createElement("g", { clipPath: "url(#a)" },
4
+ React.createElement("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", clipPath: "url(#b)" },
5
+ React.createElement("path", { d: "M2 8a6 6 0 1 1 12 0M14 8A6 6 0 1 1 2 8M5.667 6v.667M10.333 6v.667" }),
6
+ React.createElement("path", { d: "M10.333 9.792s-.876.875-2.334.875-2.333-.875-2.333-.875" }))),
7
+ React.createElement("defs", null,
8
+ React.createElement("clipPath", { id: "a" },
9
+ React.createElement("path", { fill: "#fff", d: "M0 0h16v16H0z" })),
10
+ React.createElement("clipPath", { id: "b" },
11
+ React.createElement("path", { fill: "#fff", d: "M0 0h16v16H0z" }))))); };
package/src/MarkdownIcons/Expand.d.ts CHANGED
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const Expand: () => JSX.Element;
package/src/MarkdownIcons/EyeOpen.d.ts CHANGED
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const EyeOpen: () => JSX.Element;
package/src/MarkdownIcons/List.d.ts CHANGED
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const List: () => JSX.Element;
package/src/MarkdownIcons/NumberedList.d.ts CHANGED
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const NumberedList: () => JSX.Element;
package/src/MarkdownIcons/Table.d.ts CHANGED
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const Table: () => JSX.Element;
package/src/MarkdownIcons/ToolPencil.d.ts CHANGED
@@ -1,2 +1 @@
1
- /// <reference types="react" />
2
1
  export declare const ToolPencil: () => JSX.Element;
package/src/MarkdownViewer/Helpers/MarkdownLink.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  import { MarkdownLinkProps } from '../types';
3
2
  export declare const MarkdownLink: ({ href, children, target }: MarkdownLinkProps) => JSX.Element;
package/src/MarkdownViewer/MarkdownViewer.js CHANGED
@@ -1,14 +1,27 @@
1
- import { Button, Checkbox } from '@skbkontur/react-ui';
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { Button } from '@skbkontur/react-ui';
2
13
  import React from 'react';
3
14
  import ReactMarkdown from 'react-markdown';
15
+ import rehypeKatex from 'rehype-katex';
4
16
  import rehypeRaw from 'rehype-raw';
5
- import rehypeSanitize from 'rehype-sanitize';
17
+ import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
6
18
  import remarkBreaks from 'remark-breaks';
7
19
  import gfm from 'remark-gfm';
20
+ import remarkMath from 'remark-math';
8
21
  import { MarkdownImage } from './Helpers/MarkdownImage';
9
22
  import { MarkdownLink } from './Helpers/MarkdownLink';
10
23
  import { MarkdownTable } from './Helpers/MarkdownTable';
11
- import { BlockQuote, FileButtonWrapper, FileName, getListStyle, ListItem, Paragraph, VisuallyHidden, Wrapper, } from './MarkdownViewer.styles';
24
+ import { BlockQuote, CheckBoxWrapper, FileButtonWrapper, FileName, getListStyle, ListItem, Paragraph, VisuallyHidden, Wrapper, } from './MarkdownViewer.styles';
12
25
  import { useFileLogic } from '../Markdown/Files/Files.logic';
13
26
  import { AttachPaperclip } from '../MarkdownIcons/AttachPaperclip';
14
27
  import { ThemeProvider } from '../styles/styled-components';
@@ -21,7 +34,16 @@ export var MarkdownViewer = function (_a) {
21
34
  }
22
35
  return (React.createElement(MarkdownThemeConsumer, null, function (theme) { return (React.createElement(ThemeProvider, { theme: theme !== null && theme !== void 0 ? theme : DEFAULT_MARKDOWN_THEME },
23
36
  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" },
24
- React.createElement(ReactMarkdown, { components: getCustomComponents(), remarkPlugins: [gfm, remarkBreaks], rehypePlugins: [rehypeRaw, rehypeSanitize], linkTarget: "_blank" }, source)))); }));
37
+ React.createElement(ReactMarkdown, { components: getCustomComponents(), remarkPlugins: [gfm, remarkMath, remarkBreaks], rehypePlugins: [
38
+ rehypeRaw,
39
+ [
40
+ rehypeSanitize,
41
+ {
42
+ attributes: __assign(__assign({}, defaultSchema.attributes), { div: [['className', /^language-./, 'math-inline', 'math-display', 'math']], span: [['className', /^language-./, 'math-inline', 'math-display', 'math']] }),
43
+ },
44
+ ],
45
+ rehypeKatex,
46
+ ], linkTarget: "_blank" }, source)))); }));
25
47
  function getCustomComponents() {
26
48
  return {
27
49
  a: renderLink,
@@ -61,7 +83,9 @@ export var MarkdownViewer = function (_a) {
61
83
  return React.createElement(ListItem, null, children);
62
84
  }
63
85
  function renderInput(props) {
64
- return React.createElement(Checkbox, { checked: props.checked }, props.children);
86
+ return (React.createElement(React.Fragment, null,
87
+ React.createElement(CheckBoxWrapper, { checked: props.checked }),
88
+ props.children));
65
89
  }
66
90
  function renderList(props) {
67
91
  return React.createElement("ul", { style: getListStyle(!!props.depth) }, props.children);
package/src/MarkdownViewer/MarkdownViewer.styles.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { Checkbox } from '@skbkontur/react-ui';
1
2
  import { CSSProperties } from 'react';
2
3
  export declare const Wrapper: import("styled-components").StyledComponent<"div", import("../..").MarkdownTheme, {}, never>;
3
4
  export declare const ListItem: import("styled-components").StyledComponent<"li", import("../..").MarkdownTheme, {}, never>;
@@ -9,5 +10,6 @@ export declare const FileName: import("styled-components").StyledComponent<"span
9
10
  export declare const ImgHref: import("styled-components").StyledComponent<"a", import("../..").MarkdownTheme, {}, never>;
10
11
  export declare const TableWrapper: import("styled-components").StyledComponent<"div", import("../..").MarkdownTheme, {}, never>;
11
12
  export declare const Table: import("styled-components").StyledComponent<"table", import("../..").MarkdownTheme, {}, never>;
13
+ export declare const CheckBoxWrapper: import("styled-components").StyledComponent<typeof Checkbox, import("../..").MarkdownTheme, {}, never>;
12
14
  export declare function getListStyle(depth: boolean): CSSProperties;
13
15
  export declare const VisuallyHidden: import("styled-components").StyledComponent<"span", import("../..").MarkdownTheme, {}, never>;
package/src/MarkdownViewer/MarkdownViewer.styles.js CHANGED
@@ -2,19 +2,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
2
2
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
3
  return cooked;
4
4
  };
5
- import styled from '../styles/styled-components';
6
- 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; });
7
- 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"])));
8
- export var Paragraph = styled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
9
- 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; });
10
- 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"])));
11
- export var Href = styled.a(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
12
- export var FileName = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
13
- 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"])));
14
- export var TableWrapper = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: 100%;\n overflow-x: auto;\n"], ["\n width: 100%;\n overflow-x: auto;\n"])));
15
- export var Table = styled.table(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 100%;\n min-width: 400px;\n"], ["\n width: 100%;\n min-width: 400px;\n"])));
5
+ import { Checkbox } from '@skbkontur/react-ui';
6
+ import styled, { css } from '../styles/styled-components';
7
+ var baseVisuallyHiddenStyle = css(templateObject_1 || (templateObject_1 = __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"])));
8
+ export var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __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 .math {\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 ul,\n ol {\n padding-inline-start: 0;\n\n li {\n margin-inline-start: 0;\n }\n\n li {\n margin-left: 20px;\n }\n }\n\n .math {\n [aria-hidden='true'] {\n ", ";\n }\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 .math {\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 ul,\n ol {\n padding-inline-start: 0;\n\n li {\n margin-inline-start: 0;\n }\n\n li {\n margin-left: 20px;\n }\n }\n\n .math {\n [aria-hidden='true'] {\n ", ";\n }\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; }, baseVisuallyHiddenStyle);
9
+ export var ListItem = styled.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n list-style: none;\n margin-left: 0 !important;\n padding-inline-start: 20px;\n position: relative;\n"], ["\n list-style: none;\n margin-left: 0 !important;\n padding-inline-start: 20px;\n position: relative;\n"])));
10
+ export var Paragraph = styled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
11
+ export var BlockQuote = styled.blockquote(templateObject_5 || (templateObject_5 = __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; });
12
+ export var FileButtonWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n white-space: pre-wrap;\n"], ["\n display: flex;\n white-space: pre-wrap;\n"])));
13
+ export var Href = styled.a(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
14
+ export var FileName = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n white-space: pre-wrap;\n"], ["\n white-space: pre-wrap;\n"])));
15
+ export var ImgHref = styled.a(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n text-decoration: none !important;\n border: none !important;\n"], ["\n text-decoration: none !important;\n border: none !important;\n"])));
16
+ export var TableWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 100%;\n overflow-x: auto;\n"], ["\n width: 100%;\n overflow-x: auto;\n"])));
17
+ export var Table = styled.table(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n min-width: 400px;\n"], ["\n width: 100%;\n min-width: 400px;\n"])));
18
+ export var CheckBoxWrapper = styled(Checkbox)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: inline-flex;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n padding: 2px 0;\n"], ["\n display: inline-flex;\n position: absolute;\n inset-inline-start: 0;\n inset-block-start: 0;\n padding: 2px 0;\n"])));
16
19
  export function getListStyle(depth) {
17
20
  return depth ? { marginTop: 4 } : { marginBottom: 16 };
18
21
  }
19
- export var VisuallyHidden = styled.span(templateObject_11 || (templateObject_11 = __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"])));
20
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
22
+ export var VisuallyHidden = styled.span(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), baseVisuallyHiddenStyle);
23
+ 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;