Scrapboxみたいなのを作っている
from Scrapboxみたいなのを実装する
興味本位と実用を兼ねてScrapboxを写経している
完全に真似するつもりはない
あくまで自分が必要な機能だけ
進捗
エディタ部分はほぼ出来上がっている
足りないのは選択機能とかそこらへん
共同編集やStream等のコラボレーション機能は全てomitしてる
構造的に実装が困難そうなのもある
テロメアもない
diffの置き場として便利なので実装しようか迷ってる
行にID振ってないのでdiffにしか使えなくて微妙い
ログ
途中からだけど
トップに画像出すために新しい物を上に配置している
範囲選択ができるようになった
実装は結構難産
bulletのDOMのサイズの取り扱いに結構苦労したが、今この画像をコピペするために範囲選択をした所本家はこのへんを考慮していないことが判明した
こうなる
これ井戸端がUserCSSいじってるからでは？
これ頑張って調整する必要なかったのでは感あるな
まだバグがある
見て分かる通りカーソルの位置しか記法が展開されてない他bulletの位置を選択するとバグったりする
https://scrapbox.io/villagepump/2021/06/23#60d3bedc1280f00000dd7c69 によるとカーソルの位置しか展開されないのはScrapboxもそうらしい
インデント選択したらずれる件はdenote作っている過程で原因が判明した
DOCTYPE宣言が抜けていた
リンク記法等をScrapboxっぽく表示できるようにしたり
正規表現でリンクとその前後のスペースを取って隠蔽してる
記法の隠蔽にはCSSを使っている
position: absolute で配置して誤魔化してるScrapboxはDOM自体を差し替えてる
0幅の文字が発生したことによりクリック場所の特定処理（後で書く）が完全に崩壊したので書き直した
横の位置関係しか見てなかったので改行との区別がつかなかった
外部リンクに飛べるようにしたりした
この間に色々変えてるので書きたいな
これ自身のIssue trackerとしてずっと使ってるけど普通に使えてる
効果的に課題を管理できると実装が捗る
やるべきことが定まっているので取り組みやすい
Issue以外の物も入れておけるので一貫して管理できて便利
設計書などを一緒に入れている
サーバー側のコードを実装するついでにキーハンドリングをかけるようにした
インデントしたり消したりできるし保存もできるので実用的になった
そして設計が破綻している事に気付いた
コミットを鯖側で全然覚えていないのでUndoの実装の難易度が高すぎる
composition(start|end)をハンドリングして動作を変えている
textareaの見た目回りは
さん同様Atomのコードがとても参考になった
textarea縮めるのを忘れていてバグらせた図
ページが横に拡がろうとするのがHTMLにおける最低限のモバイル対応により抑えられたのが原因
隠しtextareaに文字が入力されたらそれに応じて裏側のテキストとカーソルを操作する
サーバーに送るための編集命令を流用して無駄にImmutableの塊にしたらState Monadっぽくなった
React的には正しいんだろうけど
再描画はReactにお膳立てしてるのでいい感じにやってくれる
ちなみにスペースおかしいのはすぐに直った
white-space: break-spaces; をセットしたらおk実は削除を誤魔化し実装している
特定の文字が入力されると削除扱いされるということをやっている
大体Scrapboxと同じ方法を取っているがjQueryは使っていない
クロスブラウザ対応などするつもりはないし依存を増やしたくなかったので自前で頑張った
React Hooksを使っているとさんが言う所の円環の理を回すのを勝手にやってくれるので楽
カーソルの位置のStateとカーソルの座標のStateを用意しておいて、座標のStateを計算する関数を
useLayoutEffect() で位置のStateに依存させておくと位置のStateをセットすると座標を勝手に計算してくれる