Scrapboxみたいなのを作っている

完全に真似するつもりはない

進捗

エディタ部分はほぼ出来上がっている

足りないのは選択機能とかそこらへん

共同編集やStream等のコラボレーション機能は全てomitしてる

構造的に実装が困難そうなのもある

diffの置き場として便利なので実装しようか迷ってる

行にID振ってないのでdiffにしか使えなくて微妙い

ログ

途中からだけど

トップに画像出すために新しい物を上に配置している

https://gyazo.com/475dbfd3b2ae0ac6af9bd36a38ecc412

範囲選択ができるようになった

実装は結構難産

bulletのDOMのサイズの取り扱いに結構苦労したが、今この画像をコピペするために範囲選択をした所本家はこのへんを考慮していないことが判明した

こうなる

https://gyazo.com/d6e495c8fa8730cc6b7be0b9f43f27bf

これ井戸端がUserCSSいじってるからでは？

これ頑張って調整する必要なかったのでは感あるな

まだバグがある

見て分かる通りカーソルの位置しか記法が展開されてない他bulletの位置を選択するとバグったりする

https://gyazo.com/140f8b13a49ae5c655b2ecf89f17c994

リンク記法等をScrapboxっぽく表示できるようにしたり

正規表現でリンクとその前後のスペースを取って隠蔽してる

記法の隠蔽にはCSSを使っている

ScrapboxはDOM自体を差し替えてる

0幅の文字が発生したことによりクリック場所の特定処理（後で書く）が完全に崩壊したので書き直した

横の位置関係しか見てなかったので改行との区別がつかなかった

外部リンクに飛べるようにしたりした

この間に色々変えてるので書きたいな

これ自身のIssue trackerとしてずっと使ってるけど普通に使えてる

効果的に課題を管理できると実装が捗る

やるべきことが定まっているので取り組みやすい

Issue以外の物も入れておけるので一貫して管理できて便利

設計書などを一緒に入れている

https://gyazo.com/ef3b2a69bbbbe852013982588b633fec

サーバー側のコードを実装するついでにキーハンドリングをかけるようにした

インデントしたり消したりできるし保存もできるので実用的になった

そして設計が破綻している事に気付いた

コミットを鯖側で全然覚えていないのでUndoの実装の難易度が高すぎる

https://gyazo.com/bf82acd1fb420852fe1dea070d78b6f7

composition(start|end)をハンドリングして動作を変えている

https://gyazo.com/582e97f49c38bf8c46a954379fb9096e

textarea縮めるのを忘れていてバグらせた図

https://gyazo.com/8a871ccf0956382ddde6aa46ee59e373

隠しtextareaに文字が入力されたらそれに応じて裏側のテキストとカーソルを操作する

サーバーに送るための編集命令を流用して無駄にImmutableの塊にしたらState Monadっぽくなった

React的には正しいんだろうけど

再描画はReactにお膳立てしてるのでいい感じにやってくれる

ちなみにスペースおかしいのはすぐに直った

実は削除を誤魔化し実装している

特定の文字が入力されると削除扱いされるということをやっている

https://gyazo.com/f23f77f9432004720957d6caebe8ae96

大体Scrapboxと同じ方法を取っているがjQueryは使っていない

クロスブラウザ対応などするつもりはないし依存を増やしたくなかったので自前で頑張った