Scrapboxで一度作ったページをゆるく編集禁止にする

from 構想: PDFをGyazoにアップしたい

以下のような場合に編集禁止にしたい

pdf > ばらしてGyazoにアップロード > Scrapboxに貼り付け(Read用プロジェクトとする)

アクティブ読書用のScrapboxプロジェクト

こういうページは生成しただけで、いじったりしない

読む用

全文検索で引っかける用

GyazoのOCRも含む

書き込んだりするのは別のプロジェクトがある(Write用プロジェクトとする)

ブラウザでRead用プロジェクトとWrite用プロジェクトを並べて書くような想定

どちらも同じブラウザだと、うっかりRead用プロジェクトを触ってしまう

Read用プロジェクトとWrite用プロジェクトでテーマの色を変えてみるなど、最低限の対策を取ったうえでRead用プロジェクトを触れなくしたい

CSSで封じてみる

Stylusでscrapbox.io内のページタイトルに.pdfがつくページを表示する時のみ有効にしてみている

とりあえず思いついたのは#editorを触れないようにする

code:style.css

#editor {

pointer-events: none;

}

pointer-events

pointer-events - CSS: カスケーディングスタイルシート | MDN

これだと足りない

tabキーだとフォーカスを当てられる

focus()でもフォーカスを当てられる

code:js

document.querySelector('#text-input').focus();

こうかなあ

#text-input領域を消す

#editorを触れないようにする

テロメアの領域だけは戻す

code:style.css

#text-input {

display: none;

}

#editor {

pointer-events: none;

}

.line .telomere .telomere-border {

pointer-events: auto;

}

focus()は封じられていない

ドラッグアンドドロップも封じられていないかも(試してない)

色々試行錯誤中(2022/03/16)

エディターは封じ、大きい画像も封じる

普通の画像とテロメアとコードコピーボタンは生かす

code:style.css

.editor {

pointer-events: none;

}

.editor .modal-image a .strong-image {

pointer-events: none;

}

.editor .modal-image a .image,

.editor .telomere,

i {

pointer-events: all;

}