feat: markdown editor

package.json

@@ -92,7 +92,6 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-ga4": "^1.4.1",
-        "react-mde": "^11.5.0",
         "react-router-dom": "^5.3.0",
         "react-select": "5.8.0",
         "rxjs": "^7.8.1",
@@ -115,6 +114,7 @@
         "@uiw/codemirror-extensions-hyper-link": "4.23.10",
         "@uiw/codemirror-theme-github": "4.23.7",
         "@uiw/react-codemirror": "4.23.7",
+        "@uiw/react-md-editor": "^4.0.11",
         "@xyflow/react": "12.4.2",
         "ansi_up": "^5.2.1",
         "chart.js": "^4.5.0",

src/Common/GenericDescription/constant.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { commands } from '@uiw/react-md-editor'
+
+import { ReactComponent as BoldIcon } from '@Icons/ic-bold.svg'
+import { ReactComponent as CheckedListIcon } from '@Icons/ic-checked-list.svg'
+import { ReactComponent as CodeIcon } from '@Icons/ic-code.svg'
+import { ReactComponent as HeaderIcon } from '@Icons/ic-header.svg'
+import { ReactComponent as ImageIcon } from '@Icons/ic-image.svg'
+import { ReactComponent as ItalicIcon } from '@Icons/ic-italic.svg'
+import { ReactComponent as LinkIcon } from '@Icons/ic-link.svg'
+import { ReactComponent as OrderedListIcon } from '@Icons/ic-ordered-list.svg'
+import { ReactComponent as QuoteIcon } from '@Icons/ic-quote.svg'
+import { ReactComponent as StrikethroughIcon } from '@Icons/ic-strikethrough.svg'
+import { ReactComponent as UnorderedListIcon } from '@Icons/ic-unordered-list.svg'
+
+export const DESCRIPTION_EMPTY_ERROR_MSG = 'Readme cannot be empty. Please add some information or cancel the changes.'
+export const DESCRIPTION_UNSAVED_CHANGES_MSG = 'Are you sure you want to discard your changes?'
+
+export const TOOLBAR_SECONDARY_COMMANDS = [
+    {
+        ...commands.bold,
+        icon: <BoldIcon className="icon-dim-16 flex" />,
+    },
+    {
+        ...commands.italic,
+        icon: <ItalicIcon className="icon-dim-16 flex" />,
+    },
+    {
+        ...commands.strikethrough,
+        icon: <StrikethroughIcon className="icon-dim-16 flex" />,
+    },
+    {
+        ...commands.heading,
+        icon: <HeaderIcon className="icon-dim-16 flex" />,
+    },
+    {
+        ...commands.quote,
+        icon: <QuoteIcon className="icon-dim-16 flex" />,
+    },
+    {
+        ...commands.code,
+        icon: <CodeIcon className="icon-dim-16 flex" />,
+    },
+    {
+        ...commands.link,
+        icon: <LinkIcon className="icon-dim-16 flex" />,
+    },
+    {
+        ...commands.image,
+        icon: <ImageIcon className="icon-dim-16 flex" />,
+    },
+    {
+        ...commands.orderedListCommand,
+        icon: <OrderedListIcon className="icon-dim-16 flex" />,
+    },
+    {
+        ...commands.unorderedListCommand,
+        icon: <UnorderedListIcon className="icon-dim-16 flex" />,
+    },
+    {
+        ...commands.checkedListCommand,
+        icon: <CheckedListIcon className="icon-dim-16 flex" />,
+    },
+]

src/Common/GenericDescription/genericDescription.scss

@@ -14,165 +14,95 @@
  * limitations under the License.
  */
 
-.tab-description {
-    .tab-list__tab {
-        .tab-hover {
-            &:hover,
-            &.active {
-                color: var(--B500);
-                .edit-yaml-icon {
-                    path {
-                        stroke: var(--B500);
-                    }
-                }
-                .terminal-icon {
-                    path {
-                        fill: var(--B500);
-                    }
-                }
-            }
-        }
-        .node-details__active-tab {
-            height: 2px;
-            background-color: var(--B500);
-            border-radius: 2px 2px 0px 0px;
-            margin-top: -1px;
-        }
-    }
-}
-
-.cluster__body-details {
+.markdown-editor__wrapper {
     flex-basis: 100%;
 
     .pencil-icon:hover {
         color: var(--B500);
         text-decoration: none;
+
         svg path {
             stroke: var(--B500);
         }
     }
 
-    .mark-down-editor-container {
-        border: 1px solid var(--N200);
-        border-radius: 3px 3px 0 0;
-        font-family: 'Open Sans', Arial, sans-serif !important;
-        font-size: 13px !important;
-        line-height: 1.67;
-
-        .mark-down-editor-preview {
-            background-color: var(--bg-primary) !important;
-        }
-
-        .mark-down-editor-textarea-wrapper {
-            border-radius: 3px !important;
-            border: 1px solid var(--N200) !important;
-            background-color: var(--bg-secondary) !important;
-        }
+    .mark-down-editor__no-border {
+        border: 0px;
+    }
 
-        .mde-textarea-wrapper {
-            background-color: var(--bg-primary) !important;
-            padding: 10px !important;
-        }
+    .w-md-editor {
+        background-color: transparent;
+        box-shadow: none;
+
+        &-toolbar {
+            border-bottom: 1px solid var(--border-primary);
+            background-color: transparent;
+            padding-inline: 16px;
+            padding-block: 0px;
+            height: auto;
+
+            li {
+                .markdown-editor__tab-button {
+                    margin-block: 8px;
+                    background-color: var(--bg-primary);
+                    font-size: 13px;
+                    line-height: 20px;
+                    text-align: center;
+                    color: var(--N700);
+                    margin-right: 8px;
+                }
 
-        .mark-down-editor-toolbar {
-            justify-content: space-between !important;
-            padding-left: 16px !important;
-            padding-right: 16px !important;
-            background-color: var(--bg-primary) !important;
-            border-bottom: 1px solid var(--N200);
-        }
+                &.active {
+                    position: relative;
 
-        .mde-header {
-            height: 36px !important;
-            .mde-tabs {
-                height: inherit !important;
-                button {
-                    padding-left: 0px !important;
-                    padding-right: 0px !important;
-                    margin: 0 16px 0 0px !important;
-                    padding-top: 4px !important;
-                }
-                .active-tab {
-                    border-bottom: 2px solid var(--B500) !important;
-                    border-radius: 0px !important;
+                    .markdown-editor__tab-button {
+                        font-size: 13px;
+                        line-height: 20px;
+                        text-align: center;
+                        margin-right: 8px;
+                        color: var(--B500);
+                    }
                 }
-            }
-            ul.mde-header-group {
-                height: inherit !important;
-                display: flex !important;
-                justify-content: center !important;
-                align-items: center !important;
-                padding-top: 0px !important;
-                padding-bottom: 0px !important;
-                padding-right: 0px !important;
-                .mde-header-item button {
-                    padding: 10px 4px !important;
-                    height: inherit !important;
+
+                &.active::after {
+                    content: '';
+                    position: absolute;
+                    display: block;
+                    width: 100%;
+                    height: 2px;
+                    background-color: var(--B500);
+                    border-radius: 4px;
+                    bottom: 0px;
                 }
             }
         }
 
-        .mde-preview {
-            .mde-preview-content {
-                padding: 0px !important;
-
-                a {
-                    color: var(--B500);
-
-                    &.anchor {
-                        color: var(--N900);
+        .w-md-editor-content {
+            background: var(--bg-secondary);
+            border-radius: 3px;
+            margin: 12px;
+            border: 1px solid var(--border-primary);
+
+            &:has(.w-md-editor-preview) {
+                background: var(--bg-primary);
+                border-radius: 0px;
+                margin: 0px;
+                border: none;
+            }
 
-                        h1,
-                        h2,
-                        h3 {
-                            border-bottom: 1px solid var(--N200);
-                        }
-                    }
-                }
+            .w-md-editor-preview {
+                margin: 0px;
+                padding: 8px 0px;
+            }
 
-                pre {
-                    background-color: var(--bg-secondary);
+            .w-md-editor-input {
+                display: flex;
+                flex-direction: column;
 
-                    // Would need to add theming to fix this altogether
-                    > code {
-                        color: var(--B700);
-                        background-color: var(--transparent);
-                        border-radius: 1px;
-                        display: inline;
-                        margin: 0;
-                        overflow: visible;
-                        line-height: inherit;
-                        word-wrap: normal;
-                        white-space: pre;
-                        border: 0;
-                        padding: 0;
-                    }
+                .w-md-editor-text {
+                    flex-grow: 1;
                 }
             }
         }
-
-        .mark-down-editor__hidden {
-            display: none !important;
-        }
-    }
-
-    .mark-down-editor__no-border {
-        border: 0px;
-    }
-
-    .cluster__description-footer {
-        border-radius: 0 0 3px 3px;
-        border: 1px solid var(--N200);
-        border-top: 0px;
     }
-}
-
-.cluster__description-footer {
-    border-radius: 0 0 3px 3px;
-    border: 1px solid var(--N200);
-}
-
-.create-app-description {
-    border-bottom: 1px solid var(--N200) !important;
-    border-radius: 3px !important;
-}
+}

src/Common/GenericDescription/types.ts

@@ -20,15 +20,8 @@ export interface GenericDescriptionProps {
     updatedOn?: string
     updateDescription: (string) => Promise<void>
     title: string
-    tabIndex?: number
-    minEditorHeight?: number
     emptyStateConfig?: {
         img: string
         subtitle: JSX.Element
     }
 }
-
-export enum MDEditorSelectedTabType {
-    WRITE = 'write',
-    PREVIEW = 'preview',
-}