diff --git a/web_src/js/features/comp/EasyMDE.js b/web_src/js/features/comp/EasyMDE.js index 922d03d396197..3a2f935dc286c 100644 --- a/web_src/js/features/comp/EasyMDE.js +++ b/web_src/js/features/comp/EasyMDE.js @@ -50,9 +50,10 @@ export async function importEasyMDE() { /** * create an EasyMDE editor for comment * @param textarea jQuery or HTMLElement + * @param easyMDEOptions the options for EasyMDE * @returns {null|EasyMDE} */ -export async function createCommentEasyMDE(textarea) { +export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) { if (textarea instanceof jQuery) { textarea = textarea[0]; } @@ -61,6 +62,7 @@ export async function createCommentEasyMDE(textarea) { } const EasyMDE = await importEasyMDE(); + const easyMDE = new EasyMDE({ autoDownloadFontAwesome: false, element: textarea, @@ -104,8 +106,7 @@ export async function createCommentEasyMDE(textarea) { className: 'fa fa-file', title: 'Revert to simple textarea', }, - ], - }); + ], ...easyMDEOptions}); const inputField = easyMDE.codemirror.getInputField(); inputField.classList.add('js-quick-submit'); easyMDE.codemirror.setOption('extraKeys', { diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 59d5e7b2864f5..4bdf9538223c1 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -459,7 +459,9 @@ export function initRepoPullRequestReview() { const $reviewBox = $('.review-box'); if ($reviewBox.length === 1) { (async () => { - await createCommentEasyMDE($reviewBox.find('textarea')); + // the editor's height is too large in some cases, and the panel cannot be scrolled with page now because there is `.repository .diff-detail-box.sticky { position: sticky; }` + // the temporary solution is to make the editor's height smaller (about 4 lines). GitHub also only show 4 lines for default. We can improve the UI (including Dropzone area) in future + await createCommentEasyMDE($reviewBox.find('textarea'), {minHeight: '80px'}); initCompImagePaste($reviewBox); })(); } diff --git a/web_src/less/features/dropzone.less b/web_src/less/features/dropzone.less index 1a54457129dac..d31aedff3e1e4 100644 --- a/web_src/less/features/dropzone.less +++ b/web_src/less/features/dropzone.less @@ -1,10 +1,16 @@ -.dropzone { - border: 2px dashed var(--color-secondary) !important; - background: none !important; - box-shadow: none !important; - padding: 0 !important; - min-height: 5rem !important; - border-radius: 4px !important; +.ui .field { + .dropzone { + border: 2px dashed var(--color-secondary); + background: none; + box-shadow: none; + padding: 0; + border-radius: 4px; + min-height: 0; + margin-top: -1em; // we have another `field` above, it's usually an EasyMDE editor with "status bar", so we do not need the space above. + .dz-message { + margin: 10px 0; + } + } } .dropzone .dz-button {