QiitaやGoogleなどで使える、クオートで囲うBookmarklet作ってみた

クオートで囲うの面倒くさい

選択して"やshift+@で囲ってくれるエディターの便利機能に体が慣れてしまった。
誰か作ってるだろうけど、練習用に作ってみた。

使い方

• コピーしてブックマーク編集のURL欄に貼り付け、使いたい場面でそれをクリック。
• カーソルが十字になる。
• 文字を選択して`とか"とか{とか押すだけ。詳しくはソース参照。

bookmarklet

javascript:
/* eslint semi: "error"*/
(() => {
  function sandwich(p1, p2) {
    if (p2 === undefined) {
      p2 = p1.slice(p1.length / 2);
      p1 = p1.slice(0, p1.length / 2);
    }
    var textarea = document.activeElement;
    var pos_start = textarea.selectionStart;
    var pos_end = textarea.selectionEnd;
    var val = textarea.value;
    var range = val.slice(pos_start, pos_end);
    var beforeNode = val.slice(0, pos_start);
    var afterNode = val.slice(pos_end);
    var insertNode = p1 + range + p2;
    textarea.value = beforeNode + insertNode + afterNode;
    textarea.setSelectionRange(pos_start + p1.length, pos_end + p1.length);
  }
  function handleKeydown(ev) {
    var el = ev.target;
    if (!['TEXTAREA', 'INPUT'].includes(el.tagName)) return;
    if (el.selectionStart === el.selectionEnd) return;
    var pd = () => ev.preventDefault() || true;

    if (ev.key === '`' && ev.ctrlKey) return pd() && sandwich('\n```\n', '\n```\n');
    if (ev.key === '`') return pd() && sandwich('``');
    if (ev.key === '{') return pd() && sandwich('{}');
    if (ev.key === '[') return pd() && sandwich('[]');
    if (ev.key === '(') return pd() && sandwich('()');
    if (ev.key === '~') return pd() && sandwich('~~~~');
    if (ev.key === '*') return pd() && sandwich('****');
    if (ev.key === '_') return pd() && sandwich('__');
    if (ev.key === '"') return pd() && sandwich('""');
    if (ev.key === '\'') return pd() && sandwich('\'\'');
    if (ev.key === '>') return pd() && sandwich('> ', '');
    if (ev.key === 'L' && ev.ctrlKey) return pd() && sandwich('[](', ')');
    return true;
  };
  /* main */
  document.addEventListener('keydown', handleKeydown, {once: !true});
  document.title = '@' + document.title;
  var style = document.createElement('style');
  style.textContent = 'textarea,input{ cursor: crosshair;box-shadow: inset #f005 0px 0px 20px 0px;}';
  document.body.appendChild(style);
})();

作ってみて分かったこと

• 書き換えた瞬間、編集履歴が消える。
  • ctrl+zで戻れない
  • ブラウザIDEとかは戻れるし、別の方法があるんだろうなあ。
  • Qiitaで補助機能発動で編集履歴が消えることあるのはこれかあ。
• Qiitaでは、書き換えの直後はプレビューに反映されない。
  • ev.preventDefault()してるからかな。
• 日本語入力中だと、なんかおかしい。
• 総合的に、そんなに便利じゃない。
• ```はctrlかcontrolのコンビネーション。
  • alt系にしたかったけど。Macでev.keyが不明になり諦める。
• Qiitaにドラッグアンドドロップで使えるリンクを作れなかった。
  • markdownのリンク書式にコードを改行消して入力してみたが、括弧の認識がずれて無理だった。
• Bookmarklet Builder
  • http://subsimple.com/bookmarklets/jsbuilder.htm
  • が let const に対応してなかった。
• bookmarkletはセミコロン必須、コメントアウトはブロック。
  • スペースや改行は削除せずそのままで良い。
• 動作してるかどうか分かる何かが必要。alertは邪魔くさい。
  • カーソル変化は楽で良いと思った。bodyでなくtextareaに。
  • 背景色やoutlineも考えたけど、条件が様々だから決めれないし、アクティブ時に上書きされたりする。
  • ポップみたいなもの。邪魔になる。イベントでdisplay:noneすればいけそう。
• vscodeでjavascript:(123)て書いても怒られない。
  • ラベルはまだ良くわからない。
• アロー関数のが短いので使っていたが、ソース的に分かりにくいのでnamed function?にする。

参考にさせてもらったページ