Skip to content

Commit dc39171

Browse files
om-ukrom-ukr
committed
AXON-1337: Add AKE with default functionality to comments area (#1145)
* AXON-1337: Add AKE with default functionality to comments area * AXON-1337: Remove unused CSS
1 parent 1442750 commit dc39171

File tree

6 files changed

+41
-264
lines changed

6 files changed

+41
-264
lines changed

‎src/react/atlascode/common/AtlGlobalStyles.tsx‎

Lines changed: 6 additions & 225 deletions
Original file line numberDiff line numberDiff line change
@@ -45,232 +45,13 @@ const useStyles = makeStyles(
4545
? lighten(theme.palette.background.default, 0.15)
4646
: darken(theme.palette.background.default, 0.15),
4747
},
48-
// '.ProseMirror': {
49-
// position: 'relative',
50-
// wordWrap: 'break-word',
51-
// whiteSpace: 'pre-wrap',
52-
// WebkitFontVariantLigatures: 'none',
53-
// fontVariantLigatures: 'none',
54-
// padding: '4px 8px 4px 14px',
55-
// lineHeight: '1.2',
56-
// outline: 'none',
57-
// },
58-
// '.ProseMirror pre': { whiteSpace: 'pre-wrap' },
59-
// '.ProseMirror li': { position: 'relative' },
60-
// '.ProseMirror-hideselection *::selection': { background: 'transparent' },
61-
// '.ProseMirror-hideselection *::-moz-selection': { background: 'transparent' },
62-
// '.ProseMirror-hideselection': { caretColor: 'transparent' },
63-
// '.ProseMirror-selectednode': { outline: '2px solid #8cf' },
64-
// 'li.ProseMirror-selectednode': { outline: 'none' },
65-
// 'li.ProseMirror-selectednode:after': {
66-
// content: '""',
67-
// position: 'absolute',
68-
// left: '-32px',
69-
// right: '-2px',
70-
// top: '-2px',
71-
// bottom: '-2px',
72-
// border: '2px solid #8cf',
73-
// pointerEvents: 'none',
74-
// },
75-
// '.ProseMirror-textblock-dropdown': { minWidth: '3em' },
76-
// '.ProseMirror-menu': { margin: '0 -4px', lineHeight: '1' },
77-
// '.ProseMirror-tooltip .ProseMirror-menu': {
78-
// width: ['-webkit-fit-content', 'fit-content'],
79-
// whiteSpace: 'pre',
80-
// },
81-
// '.ProseMirror-menuitem': { marginRight: '3px', display: 'inline-block' },
82-
// '.ProseMirror-menuseparator': {
83-
// borderRight: '1px solid #ddd',
84-
// marginRight: '3px',
85-
// },
86-
// '.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu': {
87-
// fontSize: '90%',
88-
// whiteSpace: 'nowrap',
89-
// },
90-
// '.ProseMirror-menu-dropdown': {
91-
// verticalAlign: '1px',
92-
// cursor: 'pointer',
93-
// position: 'relative',
94-
// paddingRight: '15px',
95-
// },
96-
// '.ProseMirror-menu-dropdown-wrap': {
97-
// padding: '1px 0 1px 4px',
98-
// display: 'inline-block',
99-
// position: 'relative',
100-
// },
101-
// '.ProseMirror-menu-dropdown:after': {
102-
// content: '""',
103-
// borderLeft: '4px solid transparent',
104-
// borderRight: '4px solid transparent',
105-
// borderTop: '4px solid currentColor',
106-
// opacity: '.6',
107-
// position: 'absolute',
108-
// right: '4px',
109-
// top: 'calc(50% - 2px)',
110-
// },
111-
// '.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu': {
112-
// position: 'absolute',
113-
// background: 'white',
114-
// color: '#666',
115-
// border: '1px solid #aaa',
116-
// padding: '2px',
117-
// },
118-
// '.ProseMirror-menu-dropdown-menu': { zIndex: '15', minWidth: '6em' },
119-
// '.ProseMirror-menu-dropdown-item': {
120-
// cursor: 'pointer',
121-
// padding: '2px 8px 2px 4px',
122-
// },
123-
// '.ProseMirror-menu-dropdown-item:hover': { background: '#f2f2f2' },
124-
// '.ProseMirror-menu-submenu-wrap': {
125-
// position: 'relative',
126-
// marginRight: '-4px',
127-
// },
128-
// '.ProseMirror-menu-submenu-label:after': {
129-
// content: '""',
130-
// borderTop: '4px solid transparent',
131-
// borderBottom: '4px solid transparent',
132-
// borderLeft: '4px solid currentColor',
133-
// opacity: '.6',
134-
// position: 'absolute',
135-
// right: '4px',
136-
// top: 'calc(50% - 4px)',
137-
// },
138-
// '.ProseMirror-menu-submenu': {
139-
// display: 'none',
140-
// minWidth: '4em',
141-
// left: '100%',
142-
// top: '-3px',
143-
// },
144-
// '.ProseMirror-menu-active': { background: '#eee', borderRadius: '4px' },
145-
// '.ProseMirror-menu-disabled': { opacity: '.3' },
146-
// '.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu':
147-
// {
148-
// display: 'block',
149-
// },
150-
// '.ProseMirror-menubar': {
151-
// borderTopLeftRadius: 'inherit',
152-
// borderTopRightRadius: 'inherit',
153-
// position: 'relative',
154-
// minHeight: '1em',
155-
// //color: '#666',
156-
// padding: '1px 6px',
157-
// top: '0',
158-
// left: '0',
159-
// right: '0',
160-
// borderBottom: '1px solid silver',
161-
// //background: 'white',
162-
// zIndex: '10',
163-
// boxSizing: 'border-box',
164-
// overflow: 'visible',
165-
// },
166-
// '.ProseMirror-icon': {
167-
// display: 'inline-block',
168-
// lineHeight: '.8',
169-
// verticalAlign: '-2px',
170-
// padding: '2px 8px',
171-
// cursor: 'pointer',
172-
// },
173-
// '.ProseMirror-menu-disabled.ProseMirror-icon': { cursor: 'default' },
174-
// '.ProseMirror-icon svg': { fill: 'currentColor', height: '1em' },
175-
// '.ProseMirror-icon span': { verticalAlign: 'text-top' },
176-
// '.ProseMirror-gapcursor': {
177-
// display: 'none',
178-
// pointerEvents: 'none',
179-
// position: 'absolute',
180-
// },
181-
// '.ProseMirror-gapcursor:after': {
182-
// content: '""',
183-
// display: 'block',
184-
// position: 'absolute',
185-
// top: '-2px',
186-
// width: '20px',
187-
// borderTop: '1px solid black',
188-
// animation: 'ProseMirror-cursor-blink 1.1s steps(2, start) infinite',
189-
// },
190-
// '@keyframes ProseMirror-cursor-blink': { to: { visibility: 'hidden' } },
191-
// '.ProseMirror-focused .ProseMirror-gapcursor': { display: 'block' },
192-
// '.ProseMirror-example-setup-style hr': {
193-
// padding: '2px 10px',
194-
// border: 'none',
195-
// margin: '1em 0',
196-
// },
197-
// '.ProseMirror-example-setup-style hr:after': {
198-
// content: '""',
199-
// display: 'block',
200-
// height: '1px',
201-
// backgroundColor: 'silver',
202-
// lineHeight: '2px',
203-
// },
204-
// '.ProseMirror ul, .ProseMirror ol': { paddingLeft: '30px' },
205-
// '.ProseMirror blockquote': {
206-
// paddingLeft: '1em',
207-
// borderLeft: '3px solid #eee',
208-
// marginLeft: '0',
209-
// marginRight: '0',
210-
// },
211-
// '.ProseMirror-example-setup-style img': { cursor: 'default' },
212-
// '.ProseMirror-prompt': {
213-
// background: 'white',
214-
// padding: '5px 10px 5px 15px',
215-
// border: '1px solid silver',
216-
// position: 'fixed',
217-
// borderRadius: '3px',
218-
// zIndex: '11',
219-
// boxShadow: '-.5px 2px 5px rgba(0, 0, 0, .2)',
220-
// },
221-
// '.ProseMirror-prompt h5': {
222-
// margin: '0',
223-
// fontWeight: 'normal',
224-
// fontSize: '100%',
225-
// color: '#444',
226-
// },
227-
// '.ProseMirror-prompt input[type="text"],.ProseMirror-prompt textarea': {
228-
// background: '#eee',
229-
// border: 'none',
230-
// outline: 'none',
231-
// },
232-
// '.ProseMirror-prompt input[type="text"]': { padding: '0 4px' },
233-
// '.ProseMirror-prompt-close': {
234-
// position: 'absolute',
235-
// left: '2px',
236-
// top: '1px',
237-
// color: '#666',
238-
// border: 'none',
239-
// background: 'transparent',
240-
// padding: '0',
241-
// },
242-
// '.ProseMirror-prompt-close:after': { content: '"✕"', fontSize: '12px' },
243-
// '.ProseMirror-invalid': {
244-
// background: '#ffc',
245-
// border: '1px solid #cc7',
246-
// borderRadius: '4px',
247-
// padding: '5px 10px',
248-
// position: 'absolute',
249-
// minWidth: '10em',
250-
// },
251-
// '.ProseMirror-prompt-buttons': { marginTop: '5px', display: 'none' },
252-
// '.ProseMirror p:first-child,.ProseMirror h1:first-child,.ProseMirror h2:first-child,.ProseMirror h3:first-child,.ProseMirror h4:first-child,.ProseMirror h5:first-child,.ProseMirror h6:first-child':
253-
// {
254-
// marginTop: '10px',
255-
// },
256-
// '.ProseMirror p': { marginBottom: '1em' },
257-
// '.suggestion-item-active': { background: '#08c', color: '#fff' },
258-
// '.prosemirror-mention-node': {
259-
// 'background-color':
260-
// theme.palette.mode === 'dark'
261-
// ? lighten(theme.palette.background.default, 0.15)
262-
// : darken(theme.palette.background.default, 0.15),
263-
// },
264-
// '.prosemirror-tag-node': { color: '#08c' },
265-
// '.prosemirror-suggestion': {
266-
// background: 'rgba(0, 0, 0, 0.05)',
267-
// border: '1px solid #999',
268-
// },
269-
'.suggestion-item-list': { background: '#fff', border: '1px solid #999' },
270-
'.suggestion-item': { padding: '5px' },
271-
'.suggestion-item:before': { borderTop: '1px solid' },
48+
// fix vertical alignment of headings in dropdown for formatting text (atlaskit editor)
49+
'.akEditor span[role="menuitem"] :is(h1, h2, h3, h4, h5, h6)': {
50+
'margin-block-end': 0,
51+
'font-weight': 'var(--ds-font-weight-medium, 500)',
52+
},
27253
// hide assistive element in atlaskit editor toolbar
273-
'.assistive': {
54+
'.akEditor .assistive': {
27455
border: '0 !important',
27556
clip: 'rect(1px, 1px, 1px, 1px) !important',
27657
height: '1px !important',

‎src/react/atlascode/common/CommentForm.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { Avatar, Grid } from '@mui/material';
22
import React from 'react';
3+
import { AtlascodeMentionProvider } from 'src/webviews/components/issue/common/AtlaskitEditor/AtlascodeMentionsProvider';
4+
import AtlaskitEditor from 'src/webviews/components/issue/common/AtlaskitEditor/AtlaskitEditor';
35

46
import { User } from '../../../bitbucket/model';
5-
// import { MarkdownEditor } from './editor/MarkdownEditor';
67

78
type CommentFormProps = {
89
currentUser: User;
@@ -21,12 +22,15 @@ const CommentForm: React.FC<CommentFormProps> = (props: CommentFormProps) => {
2122
<Grid item xs={10}>
2223
<Grid container spacing={1} direction="column">
2324
<Grid item>
24-
{/* <MarkdownEditor
25-
initialContent={props.initialContent}
25+
<AtlaskitEditor
26+
defaultValue={props.initialContent}
2627
onSave={props.onSave}
2728
onCancel={props.onCancel}
28-
fetchUsers={props.fetchUsers}
29-
/> */}
29+
mentionProvider={Promise.resolve({
30+
unsubscribe: () => {},
31+
} as any as AtlascodeMentionProvider)}
32+
isBitbucket={true}
33+
/>
3034
</Grid>
3135
</Grid>
3236
</Grid>

‎src/react/atlascode/pullrequest/NestedComment.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -208,14 +208,16 @@ export const NestedComment: React.FunctionComponent<NestedCommentProps> = ({
208208
</Box>
209209
</Grid>
210210
<Grid item>
211-
<Box hidden={!isReplying}>
212-
<CommentForm
213-
currentUser={currentUser}
214-
onSave={handleSave}
215-
onCancel={handleCancel}
216-
fetchUsers={fetchUsers}
217-
/>
218-
</Box>
211+
{isReplying && (
212+
<Box hidden={!isReplying}>
213+
<CommentForm
214+
currentUser={currentUser}
215+
onSave={handleSave}
216+
onCancel={handleCancel}
217+
fetchUsers={fetchUsers}
218+
/>
219+
</Box>
220+
)}
219221
</Grid>
220222
<Grid item>
221223
<Box hidden={comment.children.length === 0}>
@@ -233,15 +235,17 @@ export const NestedComment: React.FunctionComponent<NestedCommentProps> = ({
233235
</Grid>
234236
</Box>
235237
{/* Edit form */}
236-
<Box hidden={!isEditing}>
237-
<CommentForm
238-
initialContent={comment.rawContent}
239-
currentUser={currentUser}
240-
onSave={handleEdit}
241-
onCancel={handleCancelEdit}
242-
fetchUsers={fetchUsers}
243-
/>
244-
</Box>
238+
{isEditing && (
239+
<Box hidden={!isEditing}>
240+
<CommentForm
241+
initialContent={comment.htmlContent}
242+
currentUser={currentUser}
243+
onSave={handleEdit}
244+
onCancel={handleCancelEdit}
245+
fetchUsers={fetchUsers}
246+
/>
247+
</Box>
248+
)}
245249
</React.Fragment>
246250
);
247251
};

‎src/webviews/components/issue/common/AtlaskitEditor/AtlaskitEditor.css‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,6 @@
55
margin: 0 2px;
66
}
77

8-
[data-testid*="ak-editor-main-toolbar"] {
9-
z-index: 1 !important;
10-
}
11-
12-
/*!* All Atlaskit editor popup menus *!*/
13-
[data-testid*="dropdown"],
14-
[aria-label*="Bold"],
15-
[aria-label*="Italic"],
16-
[aria-label*="Underline"] {
17-
z-index: 999;
18-
}
19-
208
/*!* Override any conflicting z-index from other components *!*/
219
.ac-form-select__menu,
2210
.ac-select__menu,

‎src/webviews/components/issue/common/AtlaskitEditor/AtlaskitEditor.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { textColorPlugin } from '@atlaskit/editor-plugin-text-color';
1313
import { toolbarListsIndentationPlugin } from '@atlaskit/editor-plugin-toolbar-lists-indentation';
1414
import { WikiMarkupTransformer } from '@atlaskit/editor-wikimarkup-transformer';
1515
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
16-
import React from 'react';
16+
import React, { useMemo } from 'react';
1717

1818
interface AtlaskitEditorProps extends Omit<Partial<EditorNextProps>, 'onChange' | 'onSave'> {
1919
onSave?: (content: string) => void;
@@ -37,7 +37,7 @@ const AtlaskitEditor: React.FC<AtlaskitEditorProps> = (props: AtlaskitEditorProp
3737
mentionProvider,
3838
isBitbucket = false,
3939
} = props;
40-
const TextTransformer = isBitbucket ? BitbucketTransformer : WikiMarkupTransformer;
40+
const TextTransformer = useMemo(() => (isBitbucket ? BitbucketTransformer : WikiMarkupTransformer), [isBitbucket]);
4141
const { preset, editorApi } = usePreset(() => {
4242
return (
4343
createDefaultPreset({
@@ -183,7 +183,7 @@ const AtlaskitEditor: React.FC<AtlaskitEditorProps> = (props: AtlaskitEditorProp
183183
return (
184184
<div ref={editorContainerRef}>
185185
<ComposableEditor
186-
useStickyToolbar={true}
186+
useStickyToolbar={!isBitbucket}
187187
assistiveLabel="Rich text editor for comments"
188188
preset={preset}
189189
defaultValue={defaultValue}

‎src/webviews/components/issue/view-issue-screen/mainpanel/IssueCommentComponent.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { RenderedContent } from '../../../RenderedContent';
1717
import { AtlascodeMentionProvider } from '../../common/AtlaskitEditor/AtlascodeMentionsProvider';
1818
import AtlaskitEditor from '../../common/AtlaskitEditor/AtlaskitEditor';
1919
import JiraIssueTextAreaEditor from '../../common/JiraIssueTextArea';
20-
import { useEditorState } from '../EditorStateContext';
20+
import { EditorType, useEditorState } from '../EditorStateContext';
2121
import { useEditorForceClose } from '../hooks/useEditorForceClose';
2222

2323
export type IssueCommentComponentProps = {
@@ -59,7 +59,7 @@ const CommentComponent: React.FC<{
5959
mentionProvider,
6060
}) => {
6161
const { openEditor, closeEditor, isEditorActive } = useEditorState();
62-
const editorId = `edit-comment-${comment.id}` as const;
62+
const editorId = `edit-comment-${comment.id}` as EditorType;
6363
const [localIsEditing, setLocalIsEditing] = React.useState(false);
6464
const isEditing = isAtlaskitEditorEnabled ? isEditorActive(editorId) : localIsEditing;
6565

0 commit comments

Comments
 (0)