WordPressでコピペした時にスペース（空白）が消えるのを防ぐ方法の解決（Chrome拡張機能で回避案）

以前、ソースコードをコピペしたらスペースが消えてしまうのを防ぐ方法の記事を書きました。

正直なところ解決方法というよりは運用で回避する、というニュアンスだったので

もう少し解決方法を調べたところ、Chrome拡張機能でややゴリ押しですが解決の糸口が見えてきたので現状をば。

ただ、まだまだ使える段階ではないので引き続き考えます・・・。

ちなみに以前の記事は▼コチラ▼です。

WordPressでコピペした時にスペース（空白）が消えるのを防ぐ方法（妥協案）

必要なChrome拡張機能をインストール

ScriptAutoRunnerを使用します。

インストール手順や詳しい説明は開発者様がQiitaに記事を書いていますので、そちらが参考になります。

ブラウザでユーザースクリプトを実行する拡張機能は、GreaseMonkey、Tampermonkey がメジャーなようでしたが、

もっとシンプルなものでよかったので、ScriptAutoRunnerを選択しました。

コード

Shift + Q ボタンでトリガーとなって実行される仕様です。

const triggerUrl = "https://trialanderror.jp/wp-admin/post-new.php";
if ((location.href === triggerUrl)) {
    // 子フレームのイベント
    $('iframe').contents().on('keydown', function(e) {
        if (e.shiftKey && e.ctrlKey & e.key==="Q") {
            $("#content-html").click();
            navigator.clipboard.readText().then(function(contents) {
                contents = contents.replace(/</g, "<") contents = contents.replace(/>/g, ">")
                contents = "[" + "code" + "]" + contents + "[" + "/code" + "]";
                $("#content").val(
                    "<" + "pre" + ">" +
                    contents +
                    "<" + "/pre" + ">"
                );
                $("#content-tmce").click();
            });
        }
    });
}

問題点

ただし上記コードには問題点があります。

新規投稿時のみ有効

対象のURLが新規投稿時のURLの為、編集時には実行されません。

編集時には記事IDがURLに含まれる為、正規表現でこねくり回す必要があったので後回しとしました。

全ての内容を上書きしてしまう

テキストエリア要素を取得後、内容を置き換えている為、最初の一回しかコードを貼り付けできません（致命的）。

ビジュアルモード ⇒ テキストモードの切り替え時にカーソル位置が変わってしまうようで、

記事執筆中にプログラムから上手い事カーソル位置にコードを貼り付けるのは難しそう・・・？

となるとこの方向性自体を考え直す必要があるのかも。

おわりに

テキストモードへの切り替えは手動として、

コードの前後に<pre></pre>と<code></code>を付ける処理だけ自動化する、

というのが落としどころかも・・・。