@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

カット対象要素をマーキングするタイプのカットアンドペーストで、続行不能になったときのマーキング解除タイミング

複数エディタ間でのコピーアンドペーストを実現するためにシステムクリップボードを使っています。 カットアンドペーストも出来るようにしたいです。 ただし、このカットはテキストエディタとはちがい、カット操作したときはカットは行わずにマーキングだけ行います。

グーグルスプレッドシートの動作をイメージしてください。

f:id:ledsun:20220106222325p:plain
グーグルスプレッドシートでカット操作をするとカットされる予定の箇所が破線で囲まれる

このようなカットアンドペーストの場合は、ブラウザで複数エディタ間のカットアンドペーストは実現不可能です。 ペースト先のブラウザでペースト操作が行われたことがわからないからです。 サーバーを介してペーストイベントをカット対象のブラウザに通知すれば可能ですが、今回はサーバーはありません。 グーグルスプレッドシートでも、複数ブラウザ間でカットアンドペーストすると、コピーとして動作します。

このとき1つ困った動作があります。

  1. エディタ1でカットする
  2. エディタ2でコピーあるいはカットする

2の時点でシステムクリップボードからエディタ1でカットした情報が失われています。 エディタ1のカットを続行することは不可能です。 続行不可能になったので、エディタ1でのカット対象要素のマーキングを解除したいです。 ところがこれが出来ません。 別ブラウザでのペーストイベントが取得できないのと同様にコピー、カットイベントも取得できません。

こんなときにclipboardchangeがあればいいのですが・・・clipboardchangeイベントは実装されていない - @ledsun blog のです。

次の策として、エディタ1にフォーカスが戻ったときにシステムクリップボードの中身が変化しているか調べて、変更されていたらマーキング解除したいです。 ところがこれもできません。Asynchronous Clipboard APIを使うにはユーザーの許可が必要です。 ところがFirefoxで許可をとる方法、FirefoxでAsynchronous Clipboard APIのwrite, read, readText関数を使う方法 - @ledsun blog は非常にややこしいです。 これをすべてのユーザーに設定させるのは、Active Dictionaryでブラウザ設定を配っているような環境でもないと、難しそうです。

で、どうするかというと、エディタ1でペーストした際に、カット不能になっていたら、カット対象要素のマーキングを解除します。 グーグルスプレッドシートも同様の動作をします。