GUI / PlainText双方向編集
anydownプロジェクトで本来やりたかった機能だけど、実装のめどがついてきたので。
https://anydown.github.io/anydown/
上記カンバンで実装されている。
テキストからGUIが生成される
Emoji as UI以前より考えていたこと
そのGUIを編集するとテキストにも反映される
つまり、２つ側面があって、どちらから編集してもよい。
3Dポリゴンモデラの三面図モードのようなもの。
なにが嬉しいか
テキストエリアという、誰もが使い方を知っているUIでオブジェクトの一括編集ができる
切り取り、貼り付け、コピー、一括置換、検索など
TrelloやMS Projectのキーバインドを覚えるのは不毛
なれるまではGUIから編集すればよく、テキストエリアの独自記法を覚える必要がない
あくまでテキストベースであり、テキストの状態でも「ある程度読める」状態を保つ
これは、ツールから逸脱して、別アプリに貼り付けたり、メールにペーストするなどの時に便利
何が良くないか
画面が２分割されるので普通に狭い
HTMLのWYSIWYG編集 / ソース編集のように、どちらかは全く使われないし収納されてる、みたいになりそう
プレーンテキストの表現力が低い
複雑な図を表現しようとすると、どんどんテキスト側の可読性が落ちていく
どんな仕組みにするか
プラグイン方式
VueのSingle File Componentとして定義
https://github.com/anydown/anydown/blob/master/src/CodeBlockKanban.vue
propsとして入力を取る（input: String）
更新がある度に、テキストデータ全体を呼び出し元に通知する
this.$emit("change", textData);
code blockのシンタックスハイライト拡張子記法を悪用し、そこにコンポーネント名を記載する
code blockのフェンスそのものでsplitを行い、レンダリングをmarkdown-itから奪い取って、コンポーネントにテキストまるごと渡す
この仕組みにより、テキストとして表現されるものならなんでも埋め込むことができ、また、プラグインの要件を満たせばサードパーティのエディタも簡単に作れる
#anydown