diff --git a/.creevey/images/Mobile/TriggerInfo/Default/chrome.png b/.creevey/images/Mobile/TriggerInfo/Default/chrome.png index 70cc23aaf..28dbdc864 100644 Binary files a/.creevey/images/Mobile/TriggerInfo/Default/chrome.png and b/.creevey/images/Mobile/TriggerInfo/Default/chrome.png differ diff --git a/.creevey/images/Mobile/TriggerInfo/Not everyday/chrome.png b/.creevey/images/Mobile/TriggerInfo/Not everyday/chrome.png index e8cc112e7..419907828 100644 Binary files a/.creevey/images/Mobile/TriggerInfo/Not everyday/chrome.png and b/.creevey/images/Mobile/TriggerInfo/Not everyday/chrome.png differ diff --git a/.creevey/images/Mobile/TriggerInfo/With throttling/chrome.png b/.creevey/images/Mobile/TriggerInfo/With throttling/chrome.png index 568b3e5c6..8d6c9124c 100644 Binary files a/.creevey/images/Mobile/TriggerInfo/With throttling/chrome.png and b/.creevey/images/Mobile/TriggerInfo/With throttling/chrome.png differ diff --git a/.creevey/images/Mobile/TriggerInfo/WithError/chrome.png b/.creevey/images/Mobile/TriggerInfo/WithError/chrome.png index adc674d4b..bcc969cdc 100644 Binary files a/.creevey/images/Mobile/TriggerInfo/WithError/chrome.png and b/.creevey/images/Mobile/TriggerInfo/WithError/chrome.png differ diff --git a/.creevey/images/Mobile/TriggerInfo/WithLogMessageError/chrome.png b/.creevey/images/Mobile/TriggerInfo/WithLogMessageError/chrome.png index 24d03ec2e..d52d81511 100644 Binary files a/.creevey/images/Mobile/TriggerInfo/WithLogMessageError/chrome.png and b/.creevey/images/Mobile/TriggerInfo/WithLogMessageError/chrome.png differ diff --git a/.creevey/images/Mobile/TriggerInfo/WithLongDescription/chrome.png b/.creevey/images/Mobile/TriggerInfo/WithLongDescription/chrome.png index 051362972..11ea194cf 100644 Binary files a/.creevey/images/Mobile/TriggerInfo/WithLongDescription/chrome.png and b/.creevey/images/Mobile/TriggerInfo/WithLongDescription/chrome.png differ diff --git a/.creevey/images/Mobile/TriggerInfo/WithLongName With spaces/chrome.png b/.creevey/images/Mobile/TriggerInfo/WithLongName With spaces/chrome.png index 5a33f6dae..8d5494824 100644 Binary files a/.creevey/images/Mobile/TriggerInfo/WithLongName With spaces/chrome.png and b/.creevey/images/Mobile/TriggerInfo/WithLongName With spaces/chrome.png differ diff --git a/.creevey/images/Mobile/TriggerInfoPage/Default/chrome.png b/.creevey/images/Mobile/TriggerInfoPage/Default/chrome.png index b2c7e78b8..02a453e0b 100644 Binary files a/.creevey/images/Mobile/TriggerInfoPage/Default/chrome.png and b/.creevey/images/Mobile/TriggerInfoPage/Default/chrome.png differ diff --git a/.creevey/images/Mobile/TriggerInfoPage/Not everyday/chrome.png b/.creevey/images/Mobile/TriggerInfoPage/Not everyday/chrome.png index d3ff052e0..760646abc 100644 Binary files a/.creevey/images/Mobile/TriggerInfoPage/Not everyday/chrome.png and b/.creevey/images/Mobile/TriggerInfoPage/Not everyday/chrome.png differ diff --git a/.creevey/images/Mobile/TriggerInfoPage/With throttling/chrome.png b/.creevey/images/Mobile/TriggerInfoPage/With throttling/chrome.png index 29717c45e..5a95990b7 100644 Binary files a/.creevey/images/Mobile/TriggerInfoPage/With throttling/chrome.png and b/.creevey/images/Mobile/TriggerInfoPage/With throttling/chrome.png differ diff --git a/.creevey/images/Mobile/TriggerInfoPage/WithError/chrome.png b/.creevey/images/Mobile/TriggerInfoPage/WithError/chrome.png index d6994cc6d..9af945ef9 100644 Binary files a/.creevey/images/Mobile/TriggerInfoPage/WithError/chrome.png and b/.creevey/images/Mobile/TriggerInfoPage/WithError/chrome.png differ diff --git a/package.json b/package.json index 2521e5b29..272e0a6f9 100644 --- a/package.json +++ b/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", diff --git a/src/Components/ContactEditForm/ContactEditForm.tsx b/src/Components/ContactEditForm/ContactEditForm.tsx index 08a1c221c..306afe334 100644 --- a/src/Components/ContactEditForm/ContactEditForm.tsx +++ b/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; contactInfo: Partial | null; @@ -71,13 +69,9 @@ export default class ContactEditForm extends React.Component { {currentContactConfig?.help && ( - /* ToDo избавиться от dangerouslySetInnerHTML */ -
+ + {currentContactConfig.help} + )}
); diff --git a/src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.less b/src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.less index f4c92e6c4..500c90e85 100644 --- a/src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.less +++ b/src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.less @@ -1,8 +1,5 @@ @import '../Styles/variables.less'; -.root { -} - .description { overflow: hidden; word-break: break-word; diff --git a/src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.tsx b/src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.tsx index ceef8fcfd..60b23a3d3 100644 --- a/src/Components/Mobile/MobileTriggerInfo/MobileTriggerInfo.tsx +++ b/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,7 +18,7 @@ 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"; @@ -27,8 +26,6 @@ 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 { {trigger != null && (
{trigger.desc && ( -
+ disallowedElements={purifyConfig} + > + {trigger.desc} + )} {sched != null && (
diff --git a/src/Components/Teams/TeamDescription/TeamDescription.less b/src/Components/Teams/TeamDescription/TeamDescription.less new file mode 100644 index 000000000..480ec0f5e --- /dev/null +++ b/src/Components/Teams/TeamDescription/TeamDescription.less @@ -0,0 +1,7 @@ +.descriptionContainer { + overflow: hidden; +} + +.editDescBtn { + margin-top: 8px; +} \ No newline at end of file diff --git a/src/Components/Teams/TeamDescription.tsx b/src/Components/Teams/TeamDescription/TeamDescription.tsx similarity index 55% rename from src/Components/Teams/TeamDescription.tsx rename to src/Components/Teams/TeamDescription/TeamDescription.tsx index 7df2c5e58..7b428e2b2 100644 --- a/src/Components/Teams/TeamDescription.tsx +++ b/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 ? ( - - {props.team.description}  - - + ) : (