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();
       }
     },

client/src/components/Projects/Projects.jsx

@@ -23,7 +23,7 @@ const Projects = React.memo(({
         <Grid className={styles.gridFix}>
           <Grid.Row>
             {items.map((item) => (
-              <Grid.Column key={item.id} width={4}>
+              <Grid.Column key={item.id} mobile={8} computer={4}>
                 <Link
                   to={
                     item.firstBoardId
@@ -39,7 +39,7 @@ const Projects = React.memo(({
               </Grid.Column>
             ))}
             {isEditable && (
-              <Grid.Column width={4}>
+              <Grid.Column mobile={8} computer={4}>
                 <button
                   type="button"
                   className={classNames(styles.card, styles.add)}

client/src/lib/custom-ui/components/Markdown/Markdown.jsx

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import ReactMarkdown from 'react-markdown';
+
+const Markdown = React.memo(({ linkStopPropagation, ...props }) => {
+  const handleLinkClick = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+
+  const linkRenderer = useCallback(
+    /* eslint-disable jsx-a11y/anchor-has-content,
+                      jsx-a11y/click-events-have-key-events,
+                      jsx-a11y/no-static-element-interactions,
+                      react/jsx-props-no-spreading */
+    (linkProps) => <a {...linkProps} onClick={handleLinkClick} />,
+    /* eslint-enable jsx-a11y/anchor-has-content,
+                     jsx-a11y/click-events-have-key-events,
+                     jsx-a11y/no-static-element-interactions,
+                     react/jsx-props-no-spreading */
+    [handleLinkClick],
+  );
+
+  let renderers;
+
+  if (linkStopPropagation) {
+    renderers = {
+      link: linkRenderer,
+    };
+  }
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <ReactMarkdown {...props} renderers={renderers} />;
+});
+
+Markdown.propTypes = {
+  linkStopPropagation: PropTypes.bool,
+};
+
+Markdown.defaultProps = {
+  linkStopPropagation: false,
+};
+
+export default Markdown;

client/src/lib/custom-ui/components/Markdown/index.js

@@ -0,0 +1,3 @@
+import Markdown from './Markdown';
+
+export default Markdown;

client/src/lib/custom-ui/index.js

@@ -1,5 +1,8 @@
 import Input from './components/Input';
 import Popup from './components/Popup';
+import Markdown from './components/Markdown';
 import DragScroller from './components/DragScroller';
 
-export { Input, Popup, DragScroller };
+export {
+  Input, Popup, Markdown, DragScroller,
+};