Fix markdown preview

Signed-off-by: HichamELBSI <elabbassih@gmail.com>
2025-11-02 10:55:37 +00:00 · 2022-01-25 19:21:55 +01:00 · 2022-01-25 19:21:55 +01:00 · fdfd0b12a2
commit fdfd0b12a2
parent 3f23b6c01f
11 changed files with 26 additions and 9 deletions
--- 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;
--- 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,
--- 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,
--- 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,
--- 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
--- 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}
--- 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 {
--- 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",
--- 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),
 };

--- 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}
--- 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==