170 lines
5.5 KiB
JavaScript
170 lines
5.5 KiB
JavaScript
import $ from 'jquery';
|
|
import Mousetrap from 'mousetrap';
|
|
import { clickCopyToClipboardButton } from '~/behaviors/copy_to_clipboard';
|
|
import { getSelectedFragment } from '~/lib/utils/common_utils';
|
|
import { isElementVisible } from '~/lib/utils/dom_utils';
|
|
import { DEBOUNCE_DROPDOWN_DELAY } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
|
|
import Sidebar from '~/right_sidebar';
|
|
import { CopyAsGFM } from '../markdown/copy_as_gfm';
|
|
import {
|
|
keysFor,
|
|
ISSUE_MR_CHANGE_ASSIGNEE,
|
|
ISSUE_MR_CHANGE_MILESTONE,
|
|
ISSUABLE_CHANGE_LABEL,
|
|
ISSUABLE_COMMENT_OR_REPLY,
|
|
ISSUABLE_EDIT_DESCRIPTION,
|
|
MR_COPY_SOURCE_BRANCH_NAME,
|
|
} from './keybindings';
|
|
import Shortcuts from './shortcuts';
|
|
|
|
export default class ShortcutsIssuable extends Shortcuts {
|
|
constructor() {
|
|
super();
|
|
|
|
Mousetrap.bind(keysFor(ISSUE_MR_CHANGE_ASSIGNEE), () =>
|
|
ShortcutsIssuable.openSidebarDropdown('assignee'),
|
|
);
|
|
Mousetrap.bind(keysFor(ISSUE_MR_CHANGE_MILESTONE), () =>
|
|
ShortcutsIssuable.openSidebarDropdown('milestone'),
|
|
);
|
|
Mousetrap.bind(keysFor(ISSUABLE_CHANGE_LABEL), () =>
|
|
ShortcutsIssuable.openSidebarDropdown('labels'),
|
|
);
|
|
Mousetrap.bind(keysFor(ISSUABLE_COMMENT_OR_REPLY), ShortcutsIssuable.replyWithSelectedText);
|
|
Mousetrap.bind(keysFor(ISSUABLE_EDIT_DESCRIPTION), ShortcutsIssuable.editIssue);
|
|
Mousetrap.bind(keysFor(MR_COPY_SOURCE_BRANCH_NAME), ShortcutsIssuable.copyBranchName);
|
|
|
|
/**
|
|
* We're attaching a global focus event listener on document for
|
|
* every markdown input field.
|
|
*/
|
|
$(document).on(
|
|
'focus',
|
|
'.js-vue-markdown-field .js-gfm-input',
|
|
ShortcutsIssuable.handleMarkdownFieldFocus,
|
|
);
|
|
}
|
|
|
|
/**
|
|
* This event handler preserves last focused markdown input field.
|
|
* @param {Object} event
|
|
*/
|
|
static handleMarkdownFieldFocus({ currentTarget }) {
|
|
ShortcutsIssuable.$lastFocusedReplyField = $(currentTarget);
|
|
}
|
|
|
|
static replyWithSelectedText() {
|
|
let $replyField = $('.js-main-target-form .js-vue-comment-form');
|
|
|
|
// Ensure that markdown input is still present in the DOM
|
|
// otherwise fall back to main comment input field.
|
|
if (
|
|
ShortcutsIssuable.$lastFocusedReplyField &&
|
|
isElementVisible(ShortcutsIssuable.$lastFocusedReplyField?.get(0))
|
|
) {
|
|
$replyField = ShortcutsIssuable.$lastFocusedReplyField;
|
|
}
|
|
|
|
if (!$replyField.length || $replyField.is(':hidden') /* Other tab selected in MR */) {
|
|
return false;
|
|
}
|
|
|
|
const documentFragment = getSelectedFragment(document.querySelector('#content-body'));
|
|
|
|
if (!documentFragment) {
|
|
$replyField.focus();
|
|
return false;
|
|
}
|
|
|
|
// Sanity check: Make sure the selected text comes from a discussion : it can either contain a message...
|
|
let foundMessage = Boolean(documentFragment.querySelector('.md'));
|
|
|
|
// ... Or come from a message
|
|
if (!foundMessage) {
|
|
if (documentFragment.originalNodes) {
|
|
documentFragment.originalNodes.forEach((e) => {
|
|
let node = e;
|
|
do {
|
|
// Text nodes don't define the `matches` method
|
|
if (node.matches && node.matches('.md')) {
|
|
foundMessage = true;
|
|
}
|
|
node = node.parentNode;
|
|
} while (node && !foundMessage);
|
|
});
|
|
}
|
|
|
|
// If there is no message, just select the reply field
|
|
if (!foundMessage) {
|
|
$replyField.focus();
|
|
return false;
|
|
}
|
|
}
|
|
|
|
const el = CopyAsGFM.transformGFMSelection(documentFragment.cloneNode(true));
|
|
const blockquoteEl = document.createElement('blockquote');
|
|
blockquoteEl.appendChild(el);
|
|
CopyAsGFM.nodeToGFM(blockquoteEl)
|
|
.then((text) => {
|
|
if (text.trim() === '') {
|
|
return false;
|
|
}
|
|
|
|
// If replyField already has some content, add a newline before our quote
|
|
const separator = ($replyField.val().trim() !== '' && '\n\n') || '';
|
|
$replyField
|
|
.val((a, current) => `${current}${separator}${text}\n\n`)
|
|
.trigger('input')
|
|
.trigger('change');
|
|
|
|
// Trigger autosize
|
|
const event = document.createEvent('Event');
|
|
event.initEvent('autosize:update', true, false);
|
|
$replyField.get(0).dispatchEvent(event);
|
|
|
|
// Focus the input field
|
|
$replyField.focus();
|
|
|
|
return false;
|
|
})
|
|
.catch(() => {});
|
|
|
|
return false;
|
|
}
|
|
|
|
static editIssue() {
|
|
// Need to click the element as on issues, editing is inline
|
|
// on merge request, editing is on a different page
|
|
document.querySelector('.js-issuable-edit').click();
|
|
|
|
return false;
|
|
}
|
|
|
|
static openSidebarDropdown(name) {
|
|
Sidebar.instance.openDropdown(name);
|
|
// Wait for the sidebar to trigger('click') open
|
|
// so it doesn't cause our dropdown to close preemptively
|
|
setTimeout(() => {
|
|
const editBtn =
|
|
document.querySelector(`.block.${name} .shortcut-sidebar-dropdown-toggle`) ||
|
|
document.querySelector(`.block.${name} .edit-link`);
|
|
editBtn.click();
|
|
}, DEBOUNCE_DROPDOWN_DELAY);
|
|
return false;
|
|
}
|
|
|
|
static copyBranchName() {
|
|
// There are two buttons - one that is shown when the sidebar
|
|
// is expanded, and one that is shown when it's collapsed.
|
|
const allCopyBtns = Array.from(document.querySelectorAll('.js-sidebar-source-branch button'));
|
|
|
|
// Select whichever button is currently visible so that
|
|
// the "Copied" tooltip is shown when a click is simulated.
|
|
const visibleBtn = allCopyBtns.find(isElementVisible);
|
|
|
|
if (visibleBtn) {
|
|
clickCopyToClipboardButton(visibleBtn);
|
|
}
|
|
}
|
|
}
|