Skip to content

Commit 6cc5c5e

Browse files
AbhishekA1509AbhishekA1509
authored
Merge pull request #1002 from devtron-labs/feat/markdown-editor
feat: markdown editor
2 parents 14c0746 + b563377 commit 6cc5c5e

9 files changed

Lines changed: 2260 additions & 731 deletions

File tree

‎package-lock.json‎

Lines changed: 1956 additions & 194 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@
9292
"react": "^17.0.2",
9393
"react-dom": "^17.0.2",
9494
"react-ga4": "^1.4.1",
95-
"react-mde": "^11.5.0",
9695
"react-router-dom": "^5.3.0",
9796
"react-select": "5.8.0",
9897
"rxjs": "^7.8.1",
@@ -115,6 +114,7 @@
115114
"@uiw/codemirror-extensions-hyper-link": "4.23.10",
116115
"@uiw/codemirror-theme-github": "4.23.7",
117116
"@uiw/react-codemirror": "4.23.7",
117+
"@uiw/react-md-editor": "^4.0.11",
118118
"@xyflow/react": "12.4.2",
119119
"ansi_up": "^5.2.1",
120120
"chart.js": "^4.5.0",

‎src/Common/GenericDescription/GenericDescription.tsx‎

Lines changed: 157 additions & 146 deletions
Large diffs are not rendered by default.

‎src/Common/GenericDescription/constant.ts‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/Common/GenericDescription/constant.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/*
2+
* Copyright (c) 2024. Devtron Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { commands } from '@uiw/react-md-editor'
18+
19+
import { ReactComponent as BoldIcon } from '@Icons/ic-bold.svg'
20+
import { ReactComponent as CheckedListIcon } from '@Icons/ic-checked-list.svg'
21+
import { ReactComponent as CodeIcon } from '@Icons/ic-code.svg'
22+
import { ReactComponent as HeaderIcon } from '@Icons/ic-header.svg'
23+
import { ReactComponent as ImageIcon } from '@Icons/ic-image.svg'
24+
import { ReactComponent as ItalicIcon } from '@Icons/ic-italic.svg'
25+
import { ReactComponent as LinkIcon } from '@Icons/ic-link.svg'
26+
import { ReactComponent as OrderedListIcon } from '@Icons/ic-ordered-list.svg'
27+
import { ReactComponent as QuoteIcon } from '@Icons/ic-quote.svg'
28+
import { ReactComponent as StrikethroughIcon } from '@Icons/ic-strikethrough.svg'
29+
import { ReactComponent as UnorderedListIcon } from '@Icons/ic-unordered-list.svg'
30+
31+
export const DESCRIPTION_EMPTY_ERROR_MSG = 'Readme cannot be empty. Please add some information or cancel the changes.'
32+
export const DESCRIPTION_UNSAVED_CHANGES_MSG = 'Are you sure you want to discard your changes?'
33+
34+
export const TOOLBAR_SECONDARY_COMMANDS = [
35+
{
36+
...commands.bold,
37+
icon: <BoldIcon className="icon-dim-16 flex" />,
38+
},
39+
{
40+
...commands.italic,
41+
icon: <ItalicIcon className="icon-dim-16 flex" />,
42+
},
43+
{
44+
...commands.strikethrough,
45+
icon: <StrikethroughIcon className="icon-dim-16 flex" />,
46+
},
47+
{
48+
...commands.heading,
49+
icon: <HeaderIcon className="icon-dim-16 flex" />,
50+
},
51+
{
52+
...commands.quote,
53+
icon: <QuoteIcon className="icon-dim-16 flex" />,
54+
},
55+
{
56+
...commands.code,
57+
icon: <CodeIcon className="icon-dim-16 flex" />,
58+
},
59+
{
60+
...commands.link,
61+
icon: <LinkIcon className="icon-dim-16 flex" />,
62+
},
63+
{
64+
...commands.image,
65+
icon: <ImageIcon className="icon-dim-16 flex" />,
66+
},
67+
{
68+
...commands.orderedListCommand,
69+
icon: <OrderedListIcon className="icon-dim-16 flex" />,
70+
},
71+
{
72+
...commands.unorderedListCommand,
73+
icon: <UnorderedListIcon className="icon-dim-16 flex" />,
74+
},
75+
{
76+
...commands.checkedListCommand,
77+
icon: <CheckedListIcon className="icon-dim-16 flex" />,
78+
},
79+
]

‎src/Common/GenericDescription/genericDescription.scss‎

Lines changed: 67 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -14,165 +14,95 @@
1414
* limitations under the License.
1515
*/
1616

17-
.tab-description {
18-
.tab-list__tab {
19-
.tab-hover {
20-
&:hover,
21-
&.active {
22-
color: var(--B500);
23-
.edit-yaml-icon {
24-
path {
25-
stroke: var(--B500);
26-
}
27-
}
28-
.terminal-icon {
29-
path {
30-
fill: var(--B500);
31-
}
32-
}
33-
}
34-
}
35-
.node-details__active-tab {
36-
height: 2px;
37-
background-color: var(--B500);
38-
border-radius: 2px 2px 0px 0px;
39-
margin-top: -1px;
40-
}
41-
}
42-
}
43-
44-
.cluster__body-details {
17+
.markdown-editor__wrapper {
4518
flex-basis: 100%;
4619

4720
.pencil-icon:hover {
4821
color: var(--B500);
4922
text-decoration: none;
23+
5024
svg path {
5125
stroke: var(--B500);
5226
}
5327
}
5428

55-
.mark-down-editor-container {
56-
border: 1px solid var(--N200);
57-
border-radius: 3px 3px 0 0;
58-
font-family: 'Open Sans', Arial, sans-serif !important;
59-
font-size: 13px !important;
60-
line-height: 1.67;
61-
62-
.mark-down-editor-preview {
63-
background-color: var(--bg-primary) !important;
64-
}
65-
66-
.mark-down-editor-textarea-wrapper {
67-
border-radius: 3px !important;
68-
border: 1px solid var(--N200) !important;
69-
background-color: var(--bg-secondary) !important;
70-
}
29+
.mark-down-editor__no-border {
30+
border: 0px;
31+
}
7132

72-
.mde-textarea-wrapper {
73-
background-color: var(--bg-primary) !important;
74-
padding: 10px !important;
75-
}
33+
.w-md-editor {
34+
background-color: transparent;
35+
box-shadow: none;
36+
37+
&-toolbar {
38+
border-bottom: 1px solid var(--border-primary);
39+
background-color: transparent;
40+
padding-inline: 16px;
41+
padding-block: 0px;
42+
height: auto;
43+
44+
li {
45+
.markdown-editor__tab-button {
46+
margin-block: 8px;
47+
background-color: var(--bg-primary);
48+
font-size: 13px;
49+
line-height: 20px;
50+
text-align: center;
51+
color: var(--N700);
52+
margin-right: 8px;
53+
}
7654

77-
.mark-down-editor-toolbar {
78-
justify-content: space-between !important;
79-
padding-left: 16px !important;
80-
padding-right: 16px !important;
81-
background-color: var(--bg-primary) !important;
82-
border-bottom: 1px solid var(--N200);
83-
}
55+
&.active {
56+
position: relative;
8457

85-
.mde-header {
86-
height: 36px !important;
87-
.mde-tabs {
88-
height: inherit !important;
89-
button {
90-
padding-left: 0px !important;
91-
padding-right: 0px !important;
92-
margin: 0 16px 0 0px !important;
93-
padding-top: 4px !important;
94-
}
95-
.active-tab {
96-
border-bottom: 2px solid var(--B500) !important;
97-
border-radius: 0px !important;
58+
.markdown-editor__tab-button {
59+
font-size: 13px;
60+
line-height: 20px;
61+
text-align: center;
62+
margin-right: 8px;
63+
color: var(--B500);
64+
}
9865
}
99-
}
100-
ul.mde-header-group {
101-
height: inherit !important;
102-
display: flex !important;
103-
justify-content: center !important;
104-
align-items: center !important;
105-
padding-top: 0px !important;
106-
padding-bottom: 0px !important;
107-
padding-right: 0px !important;
108-
.mde-header-item button {
109-
padding: 10px 4px !important;
110-
height: inherit !important;
66+
67+
&.active::after {
68+
content: '';
69+
position: absolute;
70+
display: block;
71+
width: 100%;
72+
height: 2px;
73+
background-color: var(--B500);
74+
border-radius: 4px;
75+
bottom: 0px;
11176
}
11277
}
11378
}
11479

115-
.mde-preview {
116-
.mde-preview-content {
117-
padding: 0px !important;
118-
119-
a {
120-
color: var(--B500);
121-
122-
&.anchor {
123-
color: var(--N900);
80+
.w-md-editor-content {
81+
background: var(--bg-secondary);
82+
border-radius: 3px;
83+
margin: 12px;
84+
border: 1px solid var(--border-primary);
85+
86+
&:has(.w-md-editor-preview) {
87+
background: var(--bg-primary);
88+
border-radius: 0px;
89+
margin: 0px;
90+
border: none;
91+
}
12492

125-
h1,
126-
h2,
127-
h3 {
128-
border-bottom: 1px solid var(--N200);
129-
}
130-
}
131-
}
93+
.w-md-editor-preview {
94+
margin: 0px;
95+
padding: 8px 0px;
96+
}
13297

133-
pre {
134-
background-color: var(--bg-secondary);
98+
.w-md-editor-input {
99+
display: flex;
100+
flex-direction: column;
135101

136-
// Would need to add theming to fix this altogether
137-
> code {
138-
color: var(--B700);
139-
background-color: var(--transparent);
140-
border-radius: 1px;
141-
display: inline;
142-
margin: 0;
143-
overflow: visible;
144-
line-height: inherit;
145-
word-wrap: normal;
146-
white-space: pre;
147-
border: 0;
148-
padding: 0;
149-
}
102+
.w-md-editor-text {
103+
flex-grow: 1;
150104
}
151105
}
152106
}
153-
154-
.mark-down-editor__hidden {
155-
display: none !important;
156-
}
157-
}
158-
159-
.mark-down-editor__no-border {
160-
border: 0px;
161-
}
162-
163-
.cluster__description-footer {
164-
border-radius: 0 0 3px 3px;
165-
border: 1px solid var(--N200);
166-
border-top: 0px;
167107
}
168-
}
169-
170-
.cluster__description-footer {
171-
border-radius: 0 0 3px 3px;
172-
border: 1px solid var(--N200);
173-
}
174-
175-
.create-app-description {
176-
border-bottom: 1px solid var(--N200) !important;
177-
border-radius: 3px !important;
178-
}
108+
}

‎src/Common/GenericDescription/types.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,8 @@ export interface GenericDescriptionProps {
2020
updatedOn?: string
2121
updateDescription: (string) => Promise<void>
2222
title: string
23-
tabIndex?: number
24-
minEditorHeight?: number
2523
emptyStateConfig?: {
2624
img: string
2725
subtitle: JSX.Element
2826
}
2927
}
30-
31-
export enum MDEditorSelectedTabType {
32-
WRITE = 'write',
33-
PREVIEW = 'preview',
34-
}

0 commit comments

Comments
 (0)