⏭️

GitHubのtext area内で Tabキーが使えるようにする

2023/12/28に公開

GitHub

GitHubのtextareaの仕様

GitHubのmarkdownのtextareaでは、
Tabキーを押すと、スペース等が入力されるわけではなく、フォーカスしている要素が移動するという仕様になっていると思います。

ただ、調べていたところ、
なぜか文字を選択している、時はインデントの入力/削除ができるようになっていました。

検索していて、この記事を見つけて初めて知りました。

作ったもの

先日の記事と同じく、Tampermonkeyでtab入力を検知して、spaceを入れるスクリプトを書きました。

導入方法

こちらのリポジトリのREADMEから、

tampermonkeyの導入
UserScriptのインストール

をして、Githubの任意のページを開くと使えます。

解説

実際の実装はGitHubで見ていただければ良いかと思うので、
日本語のコメントを付けてざっくり説明すると、

if (e.target.tagName === 'TEXTAREA') {
  const textarea = e.target;
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;

  if (start !== end) {
     // もしテキスト選択されていたら、GitHubのネイティブTab挿入機能が動くので何もせず終了
     return;
  }

  if (e.keyCode === 9) {
      e.preventDefault();

      if (e.shiftKey) {
	  // shift + tabが押されたら、インデントを削除
	  if (textarea.value.substring(start - tabSize, start) === spaces) {
	      textarea.value = textarea.value.substring(0, start - tabSize) + textarea.value.substring(end);
	      textarea.selectionStart = textarea.selectionEnd = start - tabSize;
	  }
      } else {
	  // tabが押されたら、インデントを削除
	  textarea.value = textarea.value.substring(0, start) + spaces + textarea.value.substring(end);
	  textarea.selectionStart = textarea.selectionEnd = start + tabSize;
      }
  }
}

GitHubのtextareaの仕様

作ったもの

導入方法

解説

Discussion