Skip to content

AXON-1337: Add AKE with default functionality to comments area #1145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 13, 2025
Merged

AXON-1337: Add AKE with default functionality to comments area #1145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f075e0e
AXON-1337: Add AKE with default functionality to comments area
om-ukr Oct 9, 2025
8652051
AXON-1337: Remove unused CSS
om-ukr Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
231 changes: 6 additions & 225 deletions src/react/atlascode/common/AtlGlobalStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,232 +45,13 @@ const useStyles = makeStyles(
? lighten(theme.palette.background.default, 0.15)
: darken(theme.palette.background.default, 0.15),
},
// '.ProseMirror': {
// position: 'relative',
// wordWrap: 'break-word',
// whiteSpace: 'pre-wrap',
// WebkitFontVariantLigatures: 'none',
// fontVariantLigatures: 'none',
// padding: '4px 8px 4px 14px',
// lineHeight: '1.2',
// outline: 'none',
// },
// '.ProseMirror pre': { whiteSpace: 'pre-wrap' },
// '.ProseMirror li': { position: 'relative' },
// '.ProseMirror-hideselection *::selection': { background: 'transparent' },
// '.ProseMirror-hideselection *::-moz-selection': { background: 'transparent' },
// '.ProseMirror-hideselection': { caretColor: 'transparent' },
// '.ProseMirror-selectednode': { outline: '2px solid #8cf' },
// 'li.ProseMirror-selectednode': { outline: 'none' },
// 'li.ProseMirror-selectednode:after': {
// content: '""',
// position: 'absolute',
// left: '-32px',
// right: '-2px',
// top: '-2px',
// bottom: '-2px',
// border: '2px solid #8cf',
// pointerEvents: 'none',
// },
// '.ProseMirror-textblock-dropdown': { minWidth: '3em' },
// '.ProseMirror-menu': { margin: '0 -4px', lineHeight: '1' },
// '.ProseMirror-tooltip .ProseMirror-menu': {
// width: ['-webkit-fit-content', 'fit-content'],
// whiteSpace: 'pre',
// },
// '.ProseMirror-menuitem': { marginRight: '3px', display: 'inline-block' },
// '.ProseMirror-menuseparator': {
// borderRight: '1px solid #ddd',
// marginRight: '3px',
// },
// '.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu': {
// fontSize: '90%',
// whiteSpace: 'nowrap',
// },
// '.ProseMirror-menu-dropdown': {
// verticalAlign: '1px',
// cursor: 'pointer',
// position: 'relative',
// paddingRight: '15px',
// },
// '.ProseMirror-menu-dropdown-wrap': {
// padding: '1px 0 1px 4px',
// display: 'inline-block',
// position: 'relative',
// },
// '.ProseMirror-menu-dropdown:after': {
// content: '""',
// borderLeft: '4px solid transparent',
// borderRight: '4px solid transparent',
// borderTop: '4px solid currentColor',
// opacity: '.6',
// position: 'absolute',
// right: '4px',
// top: 'calc(50% - 2px)',
// },
// '.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu': {
// position: 'absolute',
// background: 'white',
// color: '#666',
// border: '1px solid #aaa',
// padding: '2px',
// },
// '.ProseMirror-menu-dropdown-menu': { zIndex: '15', minWidth: '6em' },
// '.ProseMirror-menu-dropdown-item': {
// cursor: 'pointer',
// padding: '2px 8px 2px 4px',
// },
// '.ProseMirror-menu-dropdown-item:hover': { background: '#f2f2f2' },
// '.ProseMirror-menu-submenu-wrap': {
// position: 'relative',
// marginRight: '-4px',
// },
// '.ProseMirror-menu-submenu-label:after': {
// content: '""',
// borderTop: '4px solid transparent',
// borderBottom: '4px solid transparent',
// borderLeft: '4px solid currentColor',
// opacity: '.6',
// position: 'absolute',
// right: '4px',
// top: 'calc(50% - 4px)',
// },
// '.ProseMirror-menu-submenu': {
// display: 'none',
// minWidth: '4em',
// left: '100%',
// top: '-3px',
// },
// '.ProseMirror-menu-active': { background: '#eee', borderRadius: '4px' },
// '.ProseMirror-menu-disabled': { opacity: '.3' },
// '.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu':
// {
// display: 'block',
// },
// '.ProseMirror-menubar': {
// borderTopLeftRadius: 'inherit',
// borderTopRightRadius: 'inherit',
// position: 'relative',
// minHeight: '1em',
// //color: '#666',
// padding: '1px 6px',
// top: '0',
// left: '0',
// right: '0',
// borderBottom: '1px solid silver',
// //background: 'white',
// zIndex: '10',
// boxSizing: 'border-box',
// overflow: 'visible',
// },
// '.ProseMirror-icon': {
// display: 'inline-block',
// lineHeight: '.8',
// verticalAlign: '-2px',
// padding: '2px 8px',
// cursor: 'pointer',
// },
// '.ProseMirror-menu-disabled.ProseMirror-icon': { cursor: 'default' },
// '.ProseMirror-icon svg': { fill: 'currentColor', height: '1em' },
// '.ProseMirror-icon span': { verticalAlign: 'text-top' },
// '.ProseMirror-gapcursor': {
// display: 'none',
// pointerEvents: 'none',
// position: 'absolute',
// },
// '.ProseMirror-gapcursor:after': {
// content: '""',
// display: 'block',
// position: 'absolute',
// top: '-2px',
// width: '20px',
// borderTop: '1px solid black',
// animation: 'ProseMirror-cursor-blink 1.1s steps(2, start) infinite',
// },
// '@keyframes ProseMirror-cursor-blink': { to: { visibility: 'hidden' } },
// '.ProseMirror-focused .ProseMirror-gapcursor': { display: 'block' },
// '.ProseMirror-example-setup-style hr': {
// padding: '2px 10px',
// border: 'none',
// margin: '1em 0',
// },
// '.ProseMirror-example-setup-style hr:after': {
// content: '""',
// display: 'block',
// height: '1px',
// backgroundColor: 'silver',
// lineHeight: '2px',
// },
// '.ProseMirror ul, .ProseMirror ol': { paddingLeft: '30px' },
// '.ProseMirror blockquote': {
// paddingLeft: '1em',
// borderLeft: '3px solid #eee',
// marginLeft: '0',
// marginRight: '0',
// },
// '.ProseMirror-example-setup-style img': { cursor: 'default' },
// '.ProseMirror-prompt': {
// background: 'white',
// padding: '5px 10px 5px 15px',
// border: '1px solid silver',
// position: 'fixed',
// borderRadius: '3px',
// zIndex: '11',
// boxShadow: '-.5px 2px 5px rgba(0, 0, 0, .2)',
// },
// '.ProseMirror-prompt h5': {
// margin: '0',
// fontWeight: 'normal',
// fontSize: '100%',
// color: '#444',
// },
// '.ProseMirror-prompt input[type="text"],.ProseMirror-prompt textarea': {
// background: '#eee',
// border: 'none',
// outline: 'none',
// },
// '.ProseMirror-prompt input[type="text"]': { padding: '0 4px' },
// '.ProseMirror-prompt-close': {
// position: 'absolute',
// left: '2px',
// top: '1px',
// color: '#666',
// border: 'none',
// background: 'transparent',
// padding: '0',
// },
// '.ProseMirror-prompt-close:after': { content: '"✕"', fontSize: '12px' },
// '.ProseMirror-invalid': {
// background: '#ffc',
// border: '1px solid #cc7',
// borderRadius: '4px',
// padding: '5px 10px',
// position: 'absolute',
// minWidth: '10em',
// },
// '.ProseMirror-prompt-buttons': { marginTop: '5px', display: 'none' },
// '.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':
// {
// marginTop: '10px',
// },
// '.ProseMirror p': { marginBottom: '1em' },
// '.suggestion-item-active': { background: '#08c', color: '#fff' },
// '.prosemirror-mention-node': {
// 'background-color':
// theme.palette.mode === 'dark'
// ? lighten(theme.palette.background.default, 0.15)
// : darken(theme.palette.background.default, 0.15),
// },
// '.prosemirror-tag-node': { color: '#08c' },
// '.prosemirror-suggestion': {
// background: 'rgba(0, 0, 0, 0.05)',
// border: '1px solid #999',
// },
'.suggestion-item-list': { background: '#fff', border: '1px solid #999' },
'.suggestion-item': { padding: '5px' },
'.suggestion-item:before': { borderTop: '1px solid' },
// fix vertical alignment of headings in dropdown for formatting text (atlaskit editor)
'.akEditor span[role="menuitem"] :is(h1, h2, h3, h4, h5, h6)': {
'margin-block-end': 0,
'font-weight': 'var(--ds-font-weight-medium, 500)',
},
// hide assistive element in atlaskit editor toolbar
'.assistive': {
'.akEditor .assistive': {
border: '0 !important',
clip: 'rect(1px, 1px, 1px, 1px) !important',
height: '1px !important',
Expand Down
14 changes: 9 additions & 5 deletions src/react/atlascode/common/CommentForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Avatar, Grid } from '@mui/material';
import React from 'react';
import { AtlascodeMentionProvider } from 'src/webviews/components/issue/common/AtlaskitEditor/AtlascodeMentionsProvider';
import AtlaskitEditor from 'src/webviews/components/issue/common/AtlaskitEditor/AtlaskitEditor';

import { User } from '../../../bitbucket/model';
// import { MarkdownEditor } from './editor/MarkdownEditor';

type CommentFormProps = {
currentUser: User;
Expand All @@ -21,12 +22,15 @@ const CommentForm: React.FC<CommentFormProps> = (props: CommentFormProps) => {
<Grid item xs={10}>
<Grid container spacing={1} direction="column">
<Grid item>
{/* <MarkdownEditor
initialContent={props.initialContent}
<AtlaskitEditor
defaultValue={props.initialContent}
onSave={props.onSave}
onCancel={props.onCancel}
fetchUsers={props.fetchUsers}
/> */}
mentionProvider={Promise.resolve({
unsubscribe: () => {},
} as any as AtlascodeMentionProvider)}
isBitbucket={true}
/>
</Grid>
</Grid>
</Grid>
Expand Down
38 changes: 21 additions & 17 deletions src/react/atlascode/pullrequest/NestedComment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,14 +208,16 @@ export const NestedComment: React.FunctionComponent<NestedCommentProps> = ({
</Box>
</Grid>
<Grid item>
<Box hidden={!isReplying}>
<CommentForm
currentUser={currentUser}
onSave={handleSave}
onCancel={handleCancel}
fetchUsers={fetchUsers}
/>
</Box>
{isReplying && (
<Box hidden={!isReplying}>
<CommentForm
currentUser={currentUser}
onSave={handleSave}
onCancel={handleCancel}
fetchUsers={fetchUsers}
/>
</Box>
)}
</Grid>
<Grid item>
<Box hidden={comment.children.length === 0}>
Expand All @@ -233,15 +235,17 @@ export const NestedComment: React.FunctionComponent<NestedCommentProps> = ({
</Grid>
</Box>
{/* Edit form */}
<Box hidden={!isEditing}>
<CommentForm
initialContent={comment.rawContent}
currentUser={currentUser}
onSave={handleEdit}
onCancel={handleCancelEdit}
fetchUsers={fetchUsers}
/>
</Box>
{isEditing && (
<Box hidden={!isEditing}>
<CommentForm
initialContent={comment.htmlContent}
currentUser={currentUser}
onSave={handleEdit}
onCancel={handleCancelEdit}
fetchUsers={fetchUsers}
/>
</Box>
)}
</React.Fragment>
);
};
12 changes: 0 additions & 12 deletions src/webviews/components/issue/common/AtlaskitEditor/AtlaskitEditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,6 @@
margin: 0 2px;
}

[data-testid*="ak-editor-main-toolbar"] {
z-index: 1 !important;
}

/*!* All Atlaskit editor popup menus *!*/
[data-testid*="dropdown"],
[aria-label*="Bold"],
[aria-label*="Italic"],
[aria-label*="Underline"] {
z-index: 999;
}

/*!* Override any conflicting z-index from other components *!*/
.ac-form-select__menu,
.ac-select__menu,
Expand Down
6 changes: 3 additions & 3 deletions src/webviews/components/issue/common/AtlaskitEditor/AtlaskitEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { textColorPlugin } from '@atlaskit/editor-plugin-text-color';
import { toolbarListsIndentationPlugin } from '@atlaskit/editor-plugin-toolbar-lists-indentation';
import { WikiMarkupTransformer } from '@atlaskit/editor-wikimarkup-transformer';
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
import React from 'react';
import React, { useMemo } from 'react';

interface AtlaskitEditorProps extends Omit<Partial<EditorNextProps>, 'onChange' | 'onSave'> {
onSave?: (content: string) => void;
Expand All @@ -37,7 +37,7 @@ const AtlaskitEditor: React.FC<AtlaskitEditorProps> = (props: AtlaskitEditorProp
mentionProvider,
isBitbucket = false,
} = props;
const TextTransformer = isBitbucket ? BitbucketTransformer : WikiMarkupTransformer;
const TextTransformer = useMemo(() => (isBitbucket ? BitbucketTransformer : WikiMarkupTransformer), [isBitbucket]);
const { preset, editorApi } = usePreset(() => {
return (
createDefaultPreset({
Expand Down Expand Up @@ -183,7 +183,7 @@ const AtlaskitEditor: React.FC<AtlaskitEditorProps> = (props: AtlaskitEditorProp
return (
<div ref={editorContainerRef}>
<ComposableEditor
useStickyToolbar={true}
useStickyToolbar={!isBitbucket}
assistiveLabel="Rich text editor for comments"
preset={preset}
defaultValue={defaultValue}
Expand Down
4 changes: 2 additions & 2 deletions src/webviews/components/issue/view-issue-screen/mainpanel/IssueCommentComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { RenderedContent } from '../../../RenderedContent';
import { AtlascodeMentionProvider } from '../../common/AtlaskitEditor/AtlascodeMentionsProvider';
import AtlaskitEditor from '../../common/AtlaskitEditor/AtlaskitEditor';
import JiraIssueTextAreaEditor from '../../common/JiraIssueTextArea';
import { useEditorState } from '../EditorStateContext';
import { EditorType, useEditorState } from '../EditorStateContext';
import { useEditorForceClose } from '../hooks/useEditorForceClose';

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

Expand Down