[UI/UX] マークダウンエディタ開発

okeysea commented 3 years ago

ほしい機能の箇条書き

(Most) Markdownエディタのシンタックスハイライト
(Most) リアルタイムプレビュー
(Want) 画像はD&Dでも挿入できるようにする
(Want) アウトラインの表示
(Want) アウトラインの入れ替え機能

実装の方針

最小限の機能でエコシステムを作ったあと機能を追加する

実装の工程

Most Tasks

[x] 叩き台のライブラリの選定\
[x] 2ペイン画面の実装
[x] Markdownのプレビュー機能の実装
[x] Markdownのシンタックスハイライト機能の実装
[x] エディタ->サーバの投稿機能の実装

Want Tasks

Most Tasksの完了後工程を考える

okeysea commented 3 years ago

叩き台のライブラリの選定

a331279

候補

draft.js リッチテキストエディタを作れる。Reactとの親和性は高い。結論としてはMarkdownエディタとするにはオーバースペック。複雑なContentStateをいじくりまわす必要があって、非常に沼る可能性高し。WYSIWYGエディタを作りたいというわけではなくて、Markdownのシンタックスハイライトを多少リッチにできればいい(見出しを少し大きめにするなど)ので見送る。
CodeMirror 少し実験的に実装してみたところ、実現したいことはできそうだったので、CodeMirrorを採用する。Reactで使いたいので、react-codemirror2を導入。

okeysea commented 3 years ago

APIコントローラ

サーバーとのデータのやりとりで、通常のCRUDに合せてURLをハードコーディングして処理するか、別途API用のコントローラを用意してRESTful的な感じにしたほうが良いのだろうか。。。

URLヘルパがjavascriptでも使えれば楽なんだけど。

okeysea commented 3 years ago

markdown editor prototype

とりあえずコアの部分はできた....かな？

マークダウンの構文不足はパーサに実装していないのがそもそもの原因なので、投稿機能をつけたら取りかかることにする。
codemirrorの日本語入力時に変換候補の位置がずれる問題は、背後に隠れているinputを強引に位置とサイズ合わせすれば解決できそうかなと思う。強引って部分が引っかかるけど、codemirrorのinput要素を取得できるAPIがあるので、そういうことなのかな。
日本語入力時の下線の問題は、マークダウンのシンタックスハイライト(setTextMarkを使用)が原因(この機能をつけるまえは問題なかった)なので、日本語入力を監視して、一時的にハイライトを停止するか、もしくは自分で下線を引っぱるかすれば解決すると思われる。ただ日本語入力中の状態を検出する方法が思いつかないので調査を要する。(codemirrorでは実現しているので、ソースを見ればいける？)

okeysea commented 3 years ago

パフォーマンスの問題

入力した毎に、文書全体をパースするという実装になっているので、文書が長くなれば長くなるほどレスポンスが悪くなる。これが非常に気にいらないので、解決するには変更箇所とその影響を受ける部分のみをパースする漸進的な実装に変更するのが妥当と考えるのだが、他にやる事たくさんあるよね！？ってことで極めて遺憾ながら一旦保留することにする。

okeysea commented 3 years ago

Stateの管理がめんどくさい

バケツリレーは論外なので、Contextでがんばるか、難しいと噂のReduxを入れるか悩みどころ。今後も拡張していくことを考えたら、Redux一択なのだろうけど、これ以上風呂敷を広げるのは得策ではない気がしてならない。でもめんどくさい。

追記: 再考した結果よくわかってないものを、よくわかってないReactを使って製作している中で導入するとソースコード的な意味でカオスなことになる気しかしないので、Reduxの導入は現時点では見送ってある程度形になってテストが充実してからリファクタリング時にでも入れることにする。

okeysea commented 3 years ago

wasmer-rubyがビルド失敗する

サーバ側でWebAssemblyを使ってクライアントと共通のパーサを通すという構想であったのだが、gemのビルドができなかった。 Rustのバージョンを落せばいけるかもしれない。いけなかったら、FFIかコマンドライン経由でバイナリを直接実行するかどうかしないといけないけど、サンドボックス化されないのが懸念点。

追記: 一つずつ試して、rust 1.45.2 でビルド成功。

okeysea commented 3 years ago

とりあえず、ＵＩ周りは中途半端な感じになってしまったけど基本的な機能は実装できた。あまりここに時間をかけても仕方ないので、サーバーサイドの実装に入ることにする。

okeysea / logorg