@skbkontur/markdown 1.12.2 → 2.0.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.
- package/package.json +30 -29
- package/src/Markdown/Markdown.styled.d.ts +70 -4
- package/src/Markdown/MarkdownHelpers/markdownTextareaHelpers.js +1 -3
- package/src/MarkdownIcons/AttachLink.d.ts +0 -1
- package/src/MarkdownIcons/AttachPaperclip.d.ts +0 -1
- package/src/MarkdownIcons/CheckedList.d.ts +0 -1
- package/src/MarkdownIcons/Collapse.d.ts +0 -1
- package/src/MarkdownIcons/DocIcon.d.ts +0 -1
- package/src/MarkdownIcons/Expand.d.ts +0 -1
- package/src/MarkdownIcons/EyeOpen.d.ts +0 -1
- package/src/MarkdownIcons/List.d.ts +0 -1
- package/src/MarkdownIcons/NumberedList.d.ts +0 -1
- package/src/MarkdownIcons/Table.d.ts +0 -1
- package/src/MarkdownIcons/ToolPencil.d.ts +0 -1
- package/src/MarkdownViewer/Helpers/MarkdownLink.d.ts +0 -1
- package/src/MarkdownViewer/MarkdownViewer.js +29 -5
- package/src/MarkdownViewer/MarkdownViewer.styles.d.ts +2 -0
- package/src/MarkdownViewer/MarkdownViewer.styles.js +16 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skbkontur/markdown",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"registry": "https://registry.npmjs.org/",
|
|
6
6
|
"access": "public"
|
|
@@ -16,10 +16,12 @@
|
|
|
16
16
|
"react-dropzone": "^14.2.3",
|
|
17
17
|
"react-foco": "^1.3.1",
|
|
18
18
|
"react-markdown": "^8.0.7",
|
|
19
|
+
"rehype-katex": "6.0.0",
|
|
19
20
|
"rehype-raw": "^6.1.1",
|
|
20
21
|
"rehype-sanitize": "5.0.1",
|
|
21
22
|
"remark-breaks": "^3.0.3",
|
|
22
23
|
"remark-gfm": "^3.0.1",
|
|
24
|
+
"remark-math": "5.1.1",
|
|
23
25
|
"styled-components": "5.3.11",
|
|
24
26
|
"turndown": "^7.1.2",
|
|
25
27
|
"turndown-plugin-gfm": "^1.0.2",
|
|
@@ -35,49 +37,46 @@
|
|
|
35
37
|
"lint:fix": "eslint --ext=.ts,tsx src --fix",
|
|
36
38
|
"stylelint": "stylelint \"src/**/*.styled.{tsx,ts}\"",
|
|
37
39
|
"prepare": "husky install .husky",
|
|
38
|
-
"storybook": "
|
|
39
|
-
"
|
|
40
|
-
"
|
|
40
|
+
"start-storybook-server": "http-server ./storybook-static -p 6007 -s",
|
|
41
|
+
"storybook": "storybook dev -p 6007",
|
|
42
|
+
"build-storybook": "storybook build --quiet",
|
|
43
|
+
"test-storybook": "test-storybook --url http://127.0.0.1:6007",
|
|
41
44
|
"test": "jest test",
|
|
42
45
|
"test:ci": "cross-env CI=true jest test --passWithNoTests --testResultsProcessor=jest-teamcity-reporter",
|
|
43
46
|
"creevey:ui": "creevey --ui --port=3003",
|
|
44
|
-
"screenshots:ci": "concurrently -k -s first \"
|
|
47
|
+
"screenshots:ci": "concurrently -k -s first \"yarn start-storybook-server\" \"yarn creevey\" \"yarn test-storybook\""
|
|
45
48
|
},
|
|
46
49
|
"peerDependencies": {
|
|
47
|
-
"@skbkontur/react-ui": ">=4.5.0
|
|
50
|
+
"@skbkontur/react-ui": ">=4.5.0",
|
|
48
51
|
"@skbkontur/react-ui-validations": "^1.12.0",
|
|
49
|
-
"react": ">=
|
|
50
|
-
"react-dom": ">=
|
|
52
|
+
"react": ">=17",
|
|
53
|
+
"react-dom": ">=17"
|
|
51
54
|
},
|
|
52
55
|
"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
56
|
"@skbkontur/react-ui": "^4.14.0",
|
|
58
57
|
"@skbkontur/react-ui-validations": "^1.12.0",
|
|
59
|
-
"@storybook/addon-a11y": "
|
|
60
|
-
"@storybook/addon-actions": "
|
|
61
|
-
"@storybook/addon-essentials": "
|
|
62
|
-
"@storybook/addon-interactions": "
|
|
63
|
-
"@storybook/addon-links": "
|
|
64
|
-
"@storybook/
|
|
65
|
-
"@storybook/
|
|
66
|
-
"@storybook/
|
|
67
|
-
"@storybook/
|
|
68
|
-
"@storybook/react": "6.5.16",
|
|
69
|
-
"@storybook/test-runner": "0.9.4",
|
|
58
|
+
"@storybook/addon-a11y": "8.2.8",
|
|
59
|
+
"@storybook/addon-actions": "8.2.8",
|
|
60
|
+
"@storybook/addon-essentials": "8.2.8",
|
|
61
|
+
"@storybook/addon-interactions": "8.2.8",
|
|
62
|
+
"@storybook/addon-links": "8.2.8",
|
|
63
|
+
"@storybook/node-logger": "8.2.8",
|
|
64
|
+
"@storybook/react": "8.2.8",
|
|
65
|
+
"@storybook/react-vite": "8.2.8",
|
|
66
|
+
"@storybook/test-runner": "0.19.1",
|
|
70
67
|
"@swc/core": "1.3.50",
|
|
71
68
|
"@swc/jest": "0.2.26",
|
|
69
|
+
"@swc/plugin-styled-components": "5.0.0",
|
|
72
70
|
"@types/jest": "29.5.0",
|
|
73
71
|
"@types/node": "12.0.0",
|
|
74
|
-
"@types/react": "
|
|
75
|
-
"@types/react-dom": "
|
|
72
|
+
"@types/react": "17.0.39",
|
|
73
|
+
"@types/react-dom": "17.0.25",
|
|
76
74
|
"@typescript-eslint/eslint-plugin": "5.57.0",
|
|
77
75
|
"@typescript-eslint/parser": "5.57.0",
|
|
76
|
+
"@vitejs/plugin-react-swc": "3.7.2",
|
|
78
77
|
"axe-playwright": "1.2.3",
|
|
79
78
|
"concurrently": "^7.0.0",
|
|
80
|
-
"creevey": "0.9.
|
|
79
|
+
"creevey": "0.9.2",
|
|
81
80
|
"cross-env": "6.0.3",
|
|
82
81
|
"eslint": "8.32.0",
|
|
83
82
|
"eslint-config-prettier": "8.8.0",
|
|
@@ -96,13 +95,15 @@
|
|
|
96
95
|
"lerna": "5.0.0",
|
|
97
96
|
"lint-staged": "12.3.4",
|
|
98
97
|
"prettier": "2.2.1",
|
|
99
|
-
"react": "
|
|
100
|
-
"react-dom": "
|
|
98
|
+
"react": "17",
|
|
99
|
+
"react-dom": "17",
|
|
100
|
+
"storybook": "8.2.8",
|
|
101
101
|
"stylelint": "13.13.1",
|
|
102
102
|
"stylelint-config-standard": "22.0.0",
|
|
103
103
|
"stylelint-config-styled-components": "^0.1.1",
|
|
104
104
|
"stylelint-processor-styled-components": "^1.10.0",
|
|
105
|
-
"typescript": "4.9.4"
|
|
105
|
+
"typescript": "4.9.4",
|
|
106
|
+
"vite": "5.4.11"
|
|
106
107
|
},
|
|
107
108
|
"files": [
|
|
108
109
|
"src/**/*.js",
|
|
@@ -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
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
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
|
}>;
|
|
@@ -12,10 +12,8 @@ export var getTextareaTokens = function (value) {
|
|
|
12
12
|
var start = i ? prevPositions[1] + 1 : prevPositions[0];
|
|
13
13
|
var val = splitValue[i] || '';
|
|
14
14
|
var end = i ? start + (val.length - 1 || 0) : val.length;
|
|
15
|
-
if (val === ' ')
|
|
15
|
+
if (val === ' ' || val === '\n')
|
|
16
16
|
end = start;
|
|
17
|
-
if (val === '\n')
|
|
18
|
-
end = end - 1;
|
|
19
17
|
tokens.push({
|
|
20
18
|
value: val,
|
|
21
19
|
positions: [start, end],
|
|
@@ -1,14 +1,27 @@
|
|
|
1
|
-
|
|
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: [
|
|
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(
|
|
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);
|
|
@@ -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>;
|
|
@@ -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
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export var
|
|
9
|
-
export var
|
|
10
|
-
export var
|
|
11
|
-
export var
|
|
12
|
-
export var
|
|
13
|
-
export var
|
|
14
|
-
export var
|
|
15
|
-
export var
|
|
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(
|
|
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;
|