Markdown support in card description and comment, fixes for mobile devices, update dependencies

client/src/components/CardModal/Actions/ItemComment.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Comment } from 'semantic-ui-react';
+import { Markdown } from '../../../lib/custom-ui';
 
 import EditComment from './EditComment';
 import User from '../../User';
@@ -39,7 +40,7 @@ const ItemComment = React.memo(
           </div>
           <EditComment ref={editComment} defaultData={data} onUpdate={onUpdate}>
             <>
-              <p className={styles.text}>{data.text}</p>
+              <Markdown source={data.text} linkTarget="_blank" className={styles.text} />
               <Comment.Actions>
                 {user.isCurrent && (
                   <Comment.Action

client/src/components/CardModal/Actions/ItemComment.module.css

@@ -38,6 +38,10 @@
   word-break: break-word;
 }
 
+.text img {
+  max-width: 100%;
+}
+
 .title {
   padding-bottom: 4px;
 }

client/src/components/CardModal/CardModal.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import {
   Button, Grid, Icon, Modal,
 } from 'semantic-ui-react';
+import { Markdown } from '../../lib/custom-ui';
 
 import NameField from './NameField';
 import EditDescription from './EditDescription';
@@ -109,7 +110,6 @@ const CardModal = React.memo(
         closeIcon
         size="small"
         centered={false}
-        className={styles.wrapper}
         onClose={onClose}
       >
         <Grid className={styles.grid}>
@@ -239,7 +239,7 @@ const CardModal = React.memo(
                   <EditDescription defaultValue={description} onUpdate={handleDescriptionUpdate}>
                     {description ? (
                       <button type="button" className={styles.descriptionText}>
-                        {description}
+                        <Markdown linkStopPropagation source={description} linkTarget="_blank" />
                       </button>
                     ) : (
                       <button type="button" className={styles.descriptionButton}>

client/src/components/CardModal/CardModal.module.css

@@ -3,8 +3,10 @@
   box-shadow: 0 1px 0 0 rgba(9, 45, 66, 0.13) !important;
   color: #444 !important;
   margin-top: 8px !important;
+  overflow: hidden;
   padding: 6px 8px 6px 18px !important;
   text-align: left !important;
+  text-overflow: ellipsis;
   transition: background 85ms ease !important;
 }
 
@@ -16,6 +18,7 @@
 
 .actionIcon {
   color: #17394d !important;
+  display: inline !important;
   margin-right: 8px !important;
 }
 
@@ -123,6 +126,10 @@
   width: 100%;
 }
 
+.descriptionText img {
+  max-width: 100%;
+}
+
 .grid {
   background: #f5f6f7;
   margin: 0 !important;

client/src/components/CardModal/EditDescription.jsx

@@ -47,14 +47,14 @@ const EditDescription = React.forwardRef(({ children, defaultValue, onUpdate },
   );
 
   const handleChildrenClick = useCallback(() => {
-    open();
+    if (!getSelection().toString()) {
+      open();
+    }
   }, [open]);
 
   const handleFieldKeyDown = useCallback(
     (event) => {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-
+      if (event.ctrlKey && event.key === 'Enter') {
         submit();
       }
     },