From fdfd0b12a2c77cab89f96650436d7d5daa1e2b9f Mon Sep 17 00:00:00 2001
From: HichamELBSI <elabbassih@gmail.com>
Date: Tue, 25 Jan 2022 19:21:55 +0100
Subject: [PATCH] Fix markdown preview

Signed-off-by: HichamELBSI <elabbassih@gmail.com>
---
 .../content-manager/components/PreviewWysiwyg/Wrapper.js    | 4 ++++
 .../components/PreviewWysiwyg/utils/mdRenderer.js           | 2 +-
 .../admin/src/content-manager/components/Wysiwyg/Editor.js  | 5 ++++-
 .../components/Wysiwyg/EditorStylesContainer.js             | 3 ++-
 .../src/content-manager/components/Wysiwyg/WysiwygStyles.js | 1 +
 .../admin/src/content-manager/components/Wysiwyg/index.js   | 1 +
 .../content-manager/components/Wysiwyg/tests/index.test.js  | 2 ++
 packages/core/admin/package.json                            | 6 +++---
 .../lib/src/components/DateTimePicker/index.js              | 4 ++++
 .../helper-plugin/lib/src/components/GenericInput/index.js  | 1 +
 yarn.lock                                                   | 6 +++---
 11 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js b/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js
index d61954218b..200f63062c 100644
--- a/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js
+++ b/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js
@@ -23,6 +23,10 @@ const Wrapper = styled.div`
     margin-block-end: 10px;
   }
 
+  p {
+    margin-bottom: 10px;
+  }
+
   h1 {
     font-size: ${36 / 16}rem;
     font-weight: 600;
diff --git a/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js b/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js
index 17bc08d492..002fe85bad 100644
--- a/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js
+++ b/packages/core/admin/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js
@@ -20,7 +20,7 @@ loadCss();
 const md = new Markdown({
   html: true, // Enable HTML tags in source
   xhtmlOut: false,
-  breaks: false,
+  breaks: true,
   langPrefix: 'language-',
   linkify: true,
   typographer: true,
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/Editor.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/Editor.js
index 0f2081bc7e..a59dc2f2b4 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/Editor.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/Editor.js
@@ -12,6 +12,7 @@ const Editor = ({
   editorRef,
   error,
   isPreviewMode,
+  isExpandMode,
   name,
   onChange,
   placeholder,
@@ -64,7 +65,7 @@ const Editor = ({
 
   return (
     <EditorAndPreviewWrapper>
-      <EditorStylesContainer disabled={disabled || isPreviewMode}>
+      <EditorStylesContainer isExpandMode={isExpandMode} disabled={disabled || isPreviewMode}>
         <textarea ref={textareaRef} />
       </EditorStylesContainer>
       {isPreviewMode && <PreviewWysiwyg data={value} />}
@@ -76,6 +77,7 @@ Editor.defaultProps = {
   disabled: false,
   error: undefined,
   isPreviewMode: false,
+  isExpandMode: false,
   placeholder: '',
   value: '',
 };
@@ -85,6 +87,7 @@ Editor.propTypes = {
   editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
   error: PropTypes.string,
   isPreviewMode: PropTypes.bool,
+  isExpandMode: PropTypes.bool,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js
index c65a126795..0381de430b 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 /* stylelint-disable */
 export const EditorStylesContainer = styled.div`
   cursor: ${({ disabled }) => (disabled ? 'not-allowed !important' : 'auto')};
+  height: 100%;
   /* BASICS */
   .CodeMirror-placeholder {
     color: ${({ theme }) => theme.colors.neutral600} !important;
@@ -12,7 +13,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror {
     /* Set height, width, borders, and global font properties here */
     font-size: ${14 / 16}rem;
-    height: 290px;
+    height: ${({ isExpandMode }) => (isExpandMode ? '100%' : '290px')};
     color: ${({ theme }) => theme.colors.neutral800};
     direction: ltr;
     font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js
index c1d80eda2f..e68864056a 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js
@@ -45,6 +45,7 @@ export const IconButtonGroupMargin = styled(IconButtonGroup)`
 
 export const EditorAndPreviewWrapper = styled.div`
   position: relative;
+  height: calc(100% - 48px);
 `;
 
 // FOOTER
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/index.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/index.js
index 5e174af4d8..f738d20dd0 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/index.js
@@ -155,6 +155,7 @@ const Wysiwyg = ({
 
           <Editor
             disabled={disabled}
+            isExpandMode={isExpandMode}
             editorRef={editorRef}
             error={errorMessage}
             isPreviewMode={isPreviewMode}
diff --git a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
index eaee1ba33f..69bad684fd 100644
--- a/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/components/Wysiwyg/tests/index.test.js
@@ -610,6 +610,7 @@ describe('Wysiwyg render and actions buttons', () => {
 
       .c32 {
         cursor: auto;
+        height: 100%;
       }
 
       .c32 .CodeMirror-placeholder {
@@ -1010,6 +1011,7 @@ describe('Wysiwyg render and actions buttons', () => {
 
       .c31 {
         position: relative;
+        height: calc(100% - 48px);
       }
 
       .c36 {
diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json
index 306c43048a..b06551cb1a 100644
--- a/packages/core/admin/package.json
+++ b/packages/core/admin/package.json
@@ -87,12 +87,12 @@
     "koa-passport": "4.1.4",
     "koa-static": "5.0.0",
     "lodash": "4.17.21",
-    "markdown-it": "^12.0.6",
+    "markdown-it": "^12.3.2",
     "markdown-it-abbr": "^1.0.4",
     "markdown-it-container": "^3.0.0",
-    "markdown-it-deflist": "^2.0.3",
+    "markdown-it-deflist": "^2.1.0",
     "markdown-it-emoji": "^2.0.0",
-    "markdown-it-footnote": "^3.0.2",
+    "markdown-it-footnote": "^3.0.3",
     "markdown-it-ins": "^3.0.1",
     "markdown-it-mark": "^3.0.1",
     "markdown-it-sub": "^1.0.0",
diff --git a/packages/core/helper-plugin/lib/src/components/DateTimePicker/index.js b/packages/core/helper-plugin/lib/src/components/DateTimePicker/index.js
index 84296a17a2..efd7b7e083 100644
--- a/packages/core/helper-plugin/lib/src/components/DateTimePicker/index.js
+++ b/packages/core/helper-plugin/lib/src/components/DateTimePicker/index.js
@@ -38,6 +38,7 @@ const DateTimePicker = ({
   name,
   required,
   size,
+  step,
   value,
   ...props
 }) => {
@@ -146,6 +147,7 @@ const DateTimePicker = ({
             onClear={onClear && handleTimeClear}
             clearLabel={clearLabel}
             disabled={disabled}
+            step={step}
           />
         </Stack>
         <FieldHint />
@@ -168,6 +170,7 @@ DateTimePicker.defaultProps = {
   onClear: undefined,
   required: false,
   size: 'M',
+  step: 1,
   value: undefined,
 };
 
@@ -184,6 +187,7 @@ DateTimePicker.propTypes = {
   onClear: PropTypes.func,
   required: PropTypes.bool,
   size: PropTypes.oneOf(['S', 'M']),
+  step: PropTypes.number,
   value: PropTypes.instanceOf(Date),
 };
 
diff --git a/packages/core/helper-plugin/lib/src/components/GenericInput/index.js b/packages/core/helper-plugin/lib/src/components/GenericInput/index.js
index 8a6bcdc02c..981dce5513 100644
--- a/packages/core/helper-plugin/lib/src/components/GenericInput/index.js
+++ b/packages/core/helper-plugin/lib/src/components/GenericInput/index.js
@@ -146,6 +146,7 @@ const GenericInput = ({
 
             onChange({ target: { name, value: formattedDate, type } });
           }}
+          step={step}
           onClear={() => onChange({ target: { name, value: '', type } })}
           placeholder={formattedPlaceholder}
           required={required}
diff --git a/yarn.lock b/yarn.lock
index 326452c8b4..36d7f95fa5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15239,7 +15239,7 @@ markdown-it-container@^3.0.0:
   resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-3.0.0.tgz#1d19b06040a020f9a827577bb7dbf67aa5de9a5b"
   integrity sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw==
 
-markdown-it-deflist@^2.0.3:
+markdown-it-deflist@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/markdown-it-deflist/-/markdown-it-deflist-2.1.0.tgz#50d7a56b9544cd81252f7623bd785e28a8dcef5c"
   integrity sha512-3OuqoRUlSxJiuQYu0cWTLHNhhq2xtoSFqsZK8plANg91+RJQU1ziQ6lA2LzmFAEes18uPBsHZpcX6We5l76Nzg==
@@ -15249,7 +15249,7 @@ markdown-it-emoji@^2.0.0:
   resolved "https://registry.yarnpkg.com/markdown-it-emoji/-/markdown-it-emoji-2.0.0.tgz#3164ad4c009efd946e98274f7562ad611089a231"
   integrity sha512-39j7/9vP/CPCKbEI44oV8yoPJTpvfeReTn/COgRhSpNrjWF3PfP/JUxxB0hxV6ynOY8KH8Y8aX9NMDdo6z+6YQ==
 
-markdown-it-footnote@^3.0.2:
+markdown-it-footnote@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/markdown-it-footnote/-/markdown-it-footnote-3.0.3.tgz#e0e4c0d67390a4c5f0c75f73be605c7c190ca4d8"
   integrity sha512-YZMSuCGVZAjzKMn+xqIco9d1cLGxbELHZ9do/TSYVzraooV8ypsppKNmUJ0fVH5ljkCInQAtFpm8Rb3eXSrt5w==
@@ -15274,7 +15274,7 @@ markdown-it-sup@1.0.0:
   resolved "https://registry.yarnpkg.com/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz#cb9c9ff91a5255ac08f3fd3d63286e15df0a1fc3"
   integrity sha1-y5yf+RpSVawI8/09YyhuFd8KH8M=
 
-markdown-it@^12.0.6:
+markdown-it@^12.3.2:
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
   integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==