source/features/limit-commit-title-length.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import './limit-commit-title-length.css';
import select from 'select-dom';
import features from '../libs/features';
import onPrMergePanelOpen from '../libs/on-pr-merge-panel-open';

function init(): void {
	const inputField = select<HTMLInputElement>([
		'#commit-summary-input', // Commit title on edit file page
		'#merge_title_field' // PR merge message field
	].join(','));

	// The input field doesn't exist on PR merge page if you don't have access to that repo
	if (!inputField) {
		return;
	}

	inputField.addEventListener('input', () => {
		inputField.setCustomValidity(inputField.value.length > 72 ? `The title should be maximum 72 characters, but is ${inputField.value.length}` : '');
	});

	// For PR merges, GitHub restores any saved commit messages on page load
	// Triggering input event for these fields immediately validates the form
	onPrMergePanelOpen(() => {
		inputField.dispatchEvent(new Event('input'));
	});
}

features.add({
	id: __featureName__,
	description: 'Limits the commit title fields to 72 characters.',
	screenshot: 'https://user-images.githubusercontent.com/37769974/60379478-106b3280-9a51-11e9-88b9-0e3607f214cd.gif',
	load: features.onAjaxedPages,
	include: [
		features.isPRConversation,
		features.isEditingFile
	],
	init
});