Feature/markdown team desc

package.json

@@ -37,7 +37,7 @@
         "codemirror": "^6.0.1",
         "color-hash": "1.0.3",
         "date-fns": "2.9.0",
-        "dompurify": "2.2.6",
+        "dompurify":"^3.0.6",
         "file-saver": "2.0.2",
         "jest": "^29.7.0",
         "lodash": "^4.17.21",
@@ -50,11 +50,11 @@
         "react-dom": "^16.14.0",
         "react-foco": "1.2.0",
         "react-hot-loader": "4.13.0",
+        "react-markdown":"^8.0.7",
         "react-router": "5.1.2",
         "react-router-dom": "5.1.2",
         "react-virtualized-auto-sizer": "^1.0.20",
         "reflect-metadata": "^0.1.13",
-        "remarkable": "^2.0.1",
         "start-server-and-test": "1.14.0"
     },
     "devDependencies": {
@@ -76,9 +76,9 @@
         "@storybook/builder-webpack5": "6.4.22",
         "@storybook/manager-webpack5": "6.4.22",
         "@storybook/react": "6.4.22",
+        "@types/dompurify":"^3.0.4",
         "@types/classnames": "2.2.10",
         "@types/color-hash": "^1.0.0",
-        "@types/dompurify": "2.2.1",
         "@types/file-saver": "^2.0.1",
         "@types/jest": "26.0.9",
         "@types/jest-environment-puppeteer": "4.3.2",
@@ -89,7 +89,6 @@
         "@types/react-dom": "16.9.8",
         "@types/react-router-dom": "5.1.5",
         "@types/react-window": "^1.8.5",
-        "@types/remarkable": "^2.0.3",
         "@types/storybook-react-router": "1.0.4",
         "@typescript-eslint/eslint-plugin": "^6.9.0",
         "@typescript-eslint/parser": "^6.9.0",

src/Components/ContactEditForm/ContactEditForm.tsx

@@ -2,18 +2,16 @@ import * as React from "react";
 import { Input } from "@skbkontur/react-ui/components/Input";
 import { Select } from "@skbkontur/react-ui/components/Select";
 import { ValidationWrapperV1, tooltip, ValidationInfo } from "@skbkontur/react-ui-validations";
-import { Remarkable } from "remarkable";
 import { ContactConfig } from "../../Domain/Config";
 import { Contact } from "../../Domain/Contact";
 import ContactTypeIcon from "../ContactTypeIcon/ContactTypeIcon";
+import ReactMarkdown from "react-markdown";
 import classNames from "classnames/bind";
 
 import styles from "./ContactEditForm.less";
 
 const cn = classNames.bind(styles);
 
-const md = new Remarkable({ breaks: true });
-
 type Props = {
     contactDescriptions: Array<ContactConfig>;
     contactInfo: Partial<Contact> | null;
@@ -71,13 +69,9 @@ export default class ContactEditForm extends React.Component<Props> {
                     </ValidationWrapperV1>
                 </div>
                 {currentContactConfig?.help && (
-                    /* ToDo избавиться от dangerouslySetInnerHTML */
-                    <div
-                        dangerouslySetInnerHTML={{
-                            __html: md.render(currentContactConfig.help),
-                        }}
-                        className={cn("row", "comment")}
-                    />
+                    <ReactMarkdown className={cn("row", "comment")}>
+                        {currentContactConfig.help}
+                    </ReactMarkdown>
                 )}
             </div>
         );

src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.less

@@ -1,8 +1,5 @@
 @import '../Styles/variables.less';
 
-.root {
-}
-
 .description {
     overflow: hidden;
     word-break: break-word;

src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { addMinutes, format, getUnixTime, startOfDay } from "date-fns";
-import { Remarkable } from "remarkable";
 import { Sticky } from "@skbkontur/react-ui/components/Sticky";
 import { Modal } from "@skbkontur/react-ui/components/Modal";
 import FlagSolidIcon from "@skbkontur/react-icons/FlagSolid";
@@ -19,16 +18,14 @@ import {
 import getStatusColor, { unknownColor } from "../Styles/StatusColor";
 import { getUTCDate, humanizeDuration } from "../../../helpers/DateUtil";
 import MobileHeader from "../MobileHeader/MobileHeader";
-import { sanitize } from "dompurify";
+import ReactMarkdown from "react-markdown";
 import { purifyConfig } from "../../../Domain/DOMPurify";
 import classNames from "classnames/bind";
 
 import styles from "./MobileTriggerInfo.less";
 
 const cn = classNames.bind(styles);
 
-const md = new Remarkable({ breaks: true });
-
 type Props = {
     data?: Trigger | null;
     triggerState?: TriggerState | null;
@@ -103,12 +100,12 @@ export default class MobileTriggerInfo extends React.Component<Props, State> {
                         {trigger != null && (
                             <div className={cn("info")}>
                                 {trigger.desc && (
-                                    <div
+                                    <ReactMarkdown
                                         className={cn("plain-row", "description")}
-                                        dangerouslySetInnerHTML={{
-                                            __html: sanitize(md.render(trigger.desc), purifyConfig),
-                                        }}
-                                    />
+                                        disallowedElements={purifyConfig}
+                                    >
+                                        {trigger.desc}
+                                    </ReactMarkdown>
                                 )}
                                 {sched != null && (
                                     <div className={cn("form-row")}>

src/Components/Teams/TeamDescription/TeamDescription.less

@@ -0,0 +1,7 @@
+.descriptionContainer {
+    overflow: hidden;
+}
+
+.editDescBtn {
+    margin-top: 8px;
+}

src/Components/Teams/TeamDescription.tsx → src/Components/Teams/TeamDescription/TeamDescription.tsx

@@ -2,9 +2,15 @@ import React, { ReactElement, useState } from "react";
 import { Button } from "@skbkontur/react-ui";
 import EditIcon from "@skbkontur/react-icons/Edit";
 import AddIcon from "@skbkontur/react-icons/Add";
-import { Team } from "../../Domain/Team";
-import { TeamEditor } from "./TeamEditor";
-import { Hovered, HoveredShow } from "./Hovered/Hovered";
+import { Team } from "../../../Domain/Team";
+import { TeamEditor } from "../TeamEditor/TeamEditor";
+import ReactMarkdown from "react-markdown";
+import { purifyConfig } from "../../../Domain/DOMPurify";
+import classNames from "classnames/bind";
+
+import styles from "./TeamDescription.less";
+
+const cn = classNames.bind(styles);
 
 interface TeamDescriptionProps {
     team: Team;
@@ -20,17 +26,21 @@ export function TeamDescription(props: TeamDescriptionProps): ReactElement {
     };
 
     const description = props.team.description ? (
-        <Hovered>
-            {props.team.description}&nbsp;
-            <HoveredShow>
-                <Button
-                    icon={<EditIcon />}
-                    use={"link"}
-                    onClick={() => setEdit(true)}
-                    width="20px"
-                />
-            </HoveredShow>
-        </Hovered>
+        <>
+            <div className={cn("wysiwyg", "descriptionContainer")}>
+                <ReactMarkdown disallowedElements={purifyConfig}>
+                    {props.team.description}
+                </ReactMarkdown>
+            </div>
+            <Button
+                className={cn("editDescBtn")}
+                icon={<EditIcon />}
+                use={"link"}
+                onClick={() => setEdit(true)}
+            >
+                Edit Description
+            </Button>
+        </>
     ) : (
         <Button icon={<AddIcon />} use={"link"} onClick={() => setEdit(true)}>
             Add description

src/Components/Teams/TeamEditor/TeamEditor.less

@@ -0,0 +1,4 @@
+.description-preview {
+    padding: 20px;
+    border: 1px dashed #ccc;
+}