Zenn
📝

Pleasanter でもコードをコピーしたい

2023/12/15に公開
pleasanter
tech

これは2023 個人アドベントカレンダーの 5 日目の記事です。

tl;dr

  • 公式マニュアルのコードブロックに「COPY CODE」ボタンができてる
    COPY CODE
  • 内容/説明のようなマークダウン書式が使える項目のコードブロックでもコピーがしたいので作ってみた

解決したかったこと

個人的に Wiki のサイトをメモ帳にしていて、ちょっとコピーして使いたいフレーズとかをためこんでます。

で、コピーしようとするときに、ダブルクリックで単語が選択できるブラウザの機能に頼って、ダブルクリックすることがあるのですが、そうすると、編集モードに入ってあさっての場所にカーソルが飛ぶので非常に体験が悪いと感じていたので対応してみました。

double click works wrong

冒頭のように、公式マニュアルもそうなんですが、最近はやりの Notion はコードブロックにコピーボタンが付いてくることから着想しました。

実装

方針としては、スクリプト機能(これは Wiki でも使える)で、画面のクリックイベントを登録してクリップボードにコピーします。

html

コピーしたことをお知らせするためのメッセージを HTML 機能で追加します。

Wiki の管理から HTML タブで下記を挿入位置 "Body script top" あたりに追加してください。

出力先は「新規作成」と「編集」にします。

<div class="success-msg">クリップボードにコピーしました</div>

css

上記で作った HTML のメッセージのスタイルを指定します。
Wiki の管理からスタイルタブで下記を追加します。

出力先は「新規作成」と「編集」にします。

.success-msg {
  display: none;
  position: fixed;
  width: 300px;
  height: 40px;
  line-height: 40px;
  background-color: #29aba4;
  color: #fff;
  top: 100px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  border-radius: 5px;
}

スクリプト

最後に、イベント発火で実行するスクリプトを追加します。

出力先は「新規作成」と「編集」にします。

$(document).on('click', 'div code', (e) => {
  const t = $(e.target);
  navigator.clipboard.writeText(t.text());
  $('.success-msg').fadeIn('slow', function () {
    $(this).delay(1000).fadeOut('slow');
  });
});

ここで注意というか自分もはまったところについて共有します。
編集画面の画面項目に作用させる場合 Pleasanter エンジニアならまずは $p.events.on_editor_load で実装すると思います。
ただ、このようにすると、説明項目を編集モードにして戻った後や更新をした後などに DOM が書き代わり、かつエディタのロードが発火しない局面で、上手く動作しなくなります。
このため、上記では意図的に document のイベントとして、クリックイベントを登録しています。

また、この例は 'div code' のセレクタを利用しており、バッククォート(```)1 つだけで囲む文中のコードブロックには適用されないことにご注意ください。

click to copy

まとめ

  • Pleasanter は HTML、スタイル、スクリプトをそれぞれ、自由に追加できる仕組みがあるので見た目の加工が非常にやりやすいと感じました。
    • 今回のコードはほとんどこちらの記事を参考にさせていただいています。
    • このように CodePen で HTML/CSS/Javascript を組み合わせたサンプルは、検索するといくらでも出てきますが、これらがほぼそのまま利用できるのはありがたい。
      • もし、スクリプトだけでやろうとしたら、jQuery で DOM を作って足したり、css を適用したりするコードにアレンジしないといけないけれども、そういう辛さがない
  • Pleasanter のマークダウンでは HTML の特殊文字(例えば > )が実体参照(&gt;)にエスケープされるので、ただただコピーしても使えない可能性があるのは課題
  • デザイン・機能的に、マークダウンのスタイルが公式ドキュメントくらいリッチになるとありがたいので機能改善をまちたい
GitHubで編集を提案

Discussion