From d1c904ae4be84e7aa86deba87fffa6ccf84a3cee Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Sun, 15 Aug 2021 15:06:47 +0530
Subject: [PATCH] Fixed markdown bullet list exception (#177)

* fixed markdown bullet list exception

* minor changes
---
 .../main/resources/ui/src/assets/svg/list-ul.svg   |  1 +
 .../ui/src/components/common/popover/PopOver.tsx   |  3 ++-
 .../common/rich-text-editor/RichTextEditor.tsx     | 14 +++++++++++---
 .../rich-text-editor/RichTextEditorPreviewer.tsx   |  8 ++++++++
 .../common/rich-text-editor/ToolBarOptions.jsx     |  5 ++++-
 .../src/main/resources/ui/src/styles/temp.css      | 10 ++++++++++
 6 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 catalog-rest-service/src/main/resources/ui/src/assets/svg/list-ul.svg

diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/list-ul.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/list-ul.svg
new file mode 100644
index 00000000000..ae3ea22a096
--- /dev/null
+++ b/catalog-rest-service/src/main/resources/ui/src/assets/svg/list-ul.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 48a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm0 160a48 48 0 1 0 48 48 48 48 0 0 0-48-48zm448 16H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/></svg>
\ No newline at end of file
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/popover/PopOver.tsx b/catalog-rest-service/src/main/resources/ui/src/components/common/popover/PopOver.tsx
index ed14a10b200..07391273b55 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/common/popover/PopOver.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/popover/PopOver.tsx
@@ -22,6 +22,7 @@ import 'react-tippy/dist/tippy.css';
 import { PopOverProp, Position, Size, Theme, Trigger } from './PopOverTypes';
 
 const PopOver: React.FC<PopOverProp> = ({
+  arrow = true,
   children,
   className = '',
   html,
@@ -33,7 +34,7 @@ const PopOver: React.FC<PopOverProp> = ({
 }): JSX.Element => {
   return (
     <Tooltip
-      arrow
+      arrow={arrow}
       className={className}
       html={html}
       position={position}
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx
index 6ae7d5dddea..f12266cf9de 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.tsx
@@ -25,8 +25,9 @@ import React, {
 } from 'react';
 import { Editor } from 'react-draft-wysiwyg';
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+import ListUl from '../../../assets/svg/list-ul.svg';
 import { EditorProp, editorRef, Format } from './RichTextEditor.interface';
-import { Bold, Italic, Link, ULLIST } from './ToolBarOptions';
+import { Bold, Italic, Link } from './ToolBarOptions';
 
 const getIntialContent = (format: string, content?: string) => {
   /*eslint-disable  */
@@ -115,7 +116,15 @@ const RichTextEditor = forwardRef<editorRef, EditorProp>(
             editorState={editorState}
             readOnly={readonly}
             toolbar={{
-              options: [],
+              options: ['list'],
+              list: {
+                className: 'my-list tw-order-4',
+                options: ['unordered'],
+                unordered: {
+                  icon: ListUl,
+                  className: 'list-option ',
+                },
+              },
             }}
             toolbarClassName="tw-py-2 tw-border-0 tw-border-b tw-border-main"
             toolbarCustomButtons={
@@ -123,7 +132,6 @@ const RichTextEditor = forwardRef<editorRef, EditorProp>(
                 <Bold key="bold" />,
                 <Italic key="italic" />,
                 <Link key="link" />,
-                <ULLIST key="ulList" />,
               ]
             }
             toolbarHidden={readonly}
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx
index 39edaa551ea..ef45ffc29da 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditorPreviewer.tsx
@@ -39,6 +39,14 @@ const RichTextEditorPreviewer = ({ markdown }: { markdown: string }) => {
           h4: 'p',
           h5: 'p',
           h6: 'p',
+          ul: ({ node, children, ...props }) => {
+            const { ordered: _ordered, ...rest } = props;
+            return (
+              <ul style={{ marginLeft: '14px' }} {...rest}>
+                {children}
+              </ul>
+            );
+          },
         }}
         remarkPlugins={[gfm]}
       />
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/ToolBarOptions.jsx b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/ToolBarOptions.jsx
index 1c1f8421b6c..471c919ac34 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/ToolBarOptions.jsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/rich-text-editor/ToolBarOptions.jsx
@@ -84,6 +84,7 @@ export class Bold extends Component {
     return (
       <div className="rdw-option-wrapper tw-font-bold" onClick={this.makeBold}>
         <PopOver
+          arrow={false}
           position="bottom"
           size="small"
           title="Add bold text"
@@ -128,6 +129,7 @@ export class Link extends Component {
     return (
       <div className="rdw-option-wrapper " onClick={this.makeLink}>
         <PopOver
+          arrow={false}
           position="bottom"
           size="small"
           title="Add link"
@@ -172,6 +174,7 @@ export class Italic extends Component {
     return (
       <div className="rdw-option-wrapper " onClick={this.makeItalic}>
         <PopOver
+          arrow={false}
           position="bottom"
           size="small"
           title="Add italic text"
@@ -263,7 +266,7 @@ export class ULLIST extends Component {
           size="small"
           title="Add unordered list"
           trigger="mouseenter">
-          <i className="fas fa-list-ul" />
+          <i className="fas fa-list-ul " />
         </PopOver>
       </div>
     );
diff --git a/catalog-rest-service/src/main/resources/ui/src/styles/temp.css b/catalog-rest-service/src/main/resources/ui/src/styles/temp.css
index 139c4be35de..81267a6a670 100644
--- a/catalog-rest-service/src/main/resources/ui/src/styles/temp.css
+++ b/catalog-rest-service/src/main/resources/ui/src/styles/temp.css
@@ -687,3 +687,13 @@ strong {
 body .rdw-editor-main pre {
   background: none;
 }
+
+body .public-DraftStyleDefault-ul li::marker {
+  content: '- ';
+}
+.list-option img {
+  width: 16px;
+}
+body .list-option.rdw-option-active {
+  box-shadow: none;
+}