simple-inline-editor

ToDo

- {x} 入力サジェスト

- { } Reactのコンポーネントとしてこれを使う

- ここが一つのゴールになりそう

inlineに組み込む

- {ogp展開として実装した} URLを貼り付けるとtitleをfetchしてくる処理

- APIとかあるかな？

- バックエンドも必要だし微妙だな

- {x} 記法の違いを吸収する仕組みの考案

- ロード時に旧記法を読みとって1行に埋め込みたい

- { } simple-inline-editorのデモページが動かない問題

- 作りこみ

- {x} 左側メニュー

- {x} 行選択がメニューに影響する

- {x} 右ペイン

- 右ペインに表示するリンク要素をどう用意する？

- Editorの機能で良いか？プラガブルにするか？

- とりあえずEditorの機能で用意することにした

- {x} 中央・右ペインをコンポーネントにする？

- タイトルとEditor

- Propsにuser, idを取る

- {x} そろそろgitで管理する（branchを切ったほうが良いかも）

- {x} 2hoplink

- ロードしたページに記載されているブラケティング一覧を取得

- Editorコンポーネント側のmakeLineの中でパースしているが・・

- Editor > Line

- キャッシュされている？

- リポジトリを更新してviteを起動しなおしたら直った

- {x} また全更新になっている・・なってなかった

- {x} menuがinajob決めうちになってる

- {x} ブラウザバックすると文字化けする

- {x} 存在しないページは保存しない

- { } ツールバー

- {x} New Diary

- ゼロ埋めを忘れていた

- {x} Delete

- { } rename

- promptでも良いかな？

- すでにページが存在したときとかにちゃんとエラーを報告したい

- {x} ダイアログ？

- {x} 切り出し

- {x} list取得先のuserがinajob決め打ち

- { } ブラウザバックがまだうまく動かない

- console.logを指定するとなぜか動く？

- そんなことなかった

- popstateにはなるけど・・

- 動くときもあるし、動かないときもある？

- {x} viewport device-widthを指定する

- {x} 深いインデントにスタイルがあたっていない

- {x} ページ遷移すると保存に失敗することがある

- 多分なおった

- {x} item構文

- {x} 空ページを作ると編集ができない

- defaultLinesが空だから（副作用）

- {x} rss記法で赤リンクを出したい

- { } 補完入力後にEnterを押すとエラーになる（Mac Chromeだけ？）

- { } Shift + →がうまく動かない（Mac Chromeだけ？）

- { } 関連ページリストの件数制限

- できれば展開

- {無効} rssでスラッシュを含むページに遷移できない

- {x} 書きかけのブラケティングが検索対象になっている

- ゴミがたまっていそう

- 加えて消す処理がうまく動いていなかったので直した

- { } files2.jsonが壊れたことを検知したい

- なんで壊れる？

- {x} img記法

- {x} oembed記法

- jsonpのAPIを使っている

- Twitter

- {x} Twitterの横幅が広すぎて、編集できない

- { } youtube

- { } schedule記法

- {x} coverの更新（これをやらないとページ一覧から画像が消える）

- {x} imgのアップロード画像参照

- {x} find記法

- {x} 切り出すとブロック記法が壊れる

- {x} 保存に失敗した派手にわかるようにする

- { } 保存に失敗した時にもっと派手にわかるようにする

- { } 引用記法で横向きぶち抜きになりスマートフォンでスクロールになる

- {x} キーイベントのハンドラをリファクタリング

- stateの更新がチェーンになってるのをなんとかしたほうが良さそうな気がする

- バッチ更新とかもやっても良さそう

- 今は自動バッチングされる？

- {x} キーワードポップアップの出る場所がほかの要素に隠れる

- { } 新規ページにテンプレートを挿入する機能がサイドパネル側で誤発動する

- {x} ログイン状態の表示、ログインボタン

- { } 関連ページ検索をクリアする

- { } 画像のアップロード

- {x} find記法のリンククリックでページ先頭に移動するのを抑制する

- { } 引用記法の直後にブロック記法が来ると引用記法の内容が消える？

- {x} 関連ページリストの並び順で日記ページを下にする、新しいものを上にする

- { } バグ仕込んでそう、左右ペインでページ遷移をすると、関連ページが0になるケースがある

- {x} qdrant検索(inline)

- {x} twitter

- { } 作成元ページを fromで自動的に入れる

- {x} 選択範囲をSNS投稿する

- { } rss記法でテンプレートを埋め込む

- { } typeの無いblockがレンダリングエラーになる

- {x} 入力補完で大文字・小文字を区別しない

- { } Shift+Enterが一度閉じると出てこない

- { } Shift+Enterがスマートフォンで操作できない

{ } rename

- 画面どうする？

- promptとalertで良いなら簡単か？

- 文字入力は今の行を引数にするというのはどうか？

{x} lastModifiedが更新できずエラーになることがある

- 頻発してストレス

- 再現する方法がわからない

- 直したつもりだが・・

{x} ソースコードがうまく変換できないようだ

- 引用記法が悪さをしてた

{x} rss記法で複数ソースを指定する

- rss記法の２行目をタイトルにしている

- RSSをカンマ区切りで入れる？

- Promise.allで複数読み込んで、マージするような動きにすればよさそう

{ } 引用記法が何かおかしい

- 箇条書きの下に引用記法があるのは何？

- 意図していない動きに見える

- でも何かギミックが動いているので認識がずれてそう

{x} 引用記法を改行するとエラーになる

- 仕様を見直す

- 引用記法をMarkdownに寄せたいが、引用記法の閉じの明示が難しい

- 全行頭に > を前置するというのが良さそう

- 記法アイデア

- ブロック希望みたいに何か欲しい

- Cosenseではリンク記法の特殊パターンで実装してる

- {{label red 赤い文字}} こういう感じ？

- 打鍵が多くて面倒だな

- {{r 赤い文字}}

- これでも良いけどね

- 1文字をどう使うか、悩み

- インライン記法の活用例

- ラベル label

- インライン画像 img

- 計算 calc

- カラーコード color

- カスタムラベル付きリンク link

- 数式 math

- チェックボックス check

- 特別な記法を使いたくない

- 空ブラケットとバツブラケットで良い気がする

- この文字は例外としてキーワードにしない

{x} キーワード補完後の改行で挙動不審

- リアルタイムにキーワード検索するのをやめると少し落ち着く

- keyの重複エラーがごくまれに出る

- もう直ったかな

{x} 保管に出てこないページが有る

- keywordsになくてpagesの方にあることがある

- 今はkeywordsしか見ていないようだ

{ } 検索

- 右ペインでできると便利？

- ビューが少し違うね

- やはり必要だと思う

{ } なぜかutilがimportできない

- よくわからないのでindex.tsでimportしてexportしてみる

- なぜダメなのかわからない、ディレクトリ構造と関係がある？

{x} jsonpとブロック記法の相性が悪い

- throwをうまく投げる方法が無さそう

- やはりブロック記法のインターフェースが微妙な気がする

- setRenderElementを引数に渡すのが良さそう

- そのまま返しても良い、とかにすると見通しもよさそう

- これを直してしまおう、catchするのもやめたい

- {x} simple-inline-editor側の修正

- {x} ng-front側の修正

{ } スマートフォンで動作確認

- 折り返さない行がある

- 引用記法

- textareaにフォーカスを当てるとズームする

- 日本語変換中にエラーになることがある

- 明朝体になる

{x} 赤リンク

- /page/twitter-5643382

- こちらはページがあるもの

- /keywords/twitter-5643382?detail=1

- こちらは候補

- count付き

- count=0ってのがある

- countの数字で色を決めればよい

- countが1なのは赤リンク

- それを補完入力したら青リンク

- countの計算が謎

- SearchCacheの対象が間違ってそう

- ブラケティングしたものが正解

- 更新された

- リンクが2つ以上あれば青リンク

- リンクが1つなら赤リンクだが、、

- ページが定義されてたら、リンクが1つでも赤では？

- 上のリンクから計算しなおした方が良さそう？

- 初めからcountに1足しておけばよい気がする

- unknownを作ってみた

- これは通常現れない

{x} bodyを指定して新しいページを作る

- 遷移前に仕込むのが難しい

- Appの方で新しいページに遷移の指示を出す

- EditorPaneがページ遷移をする、

Dialogを実装したい

- rename

- confirmでもよいか？

- amz

- dialogが良いのか？

- これ代替を考えたい

- Linkと同じ仕組みで行のコマンドで実装するのはどうか？

- 次の行に結果が挿入される？

- textPopupHandlersに実装したいが・・

- textChangeRequestしかインターフェースがない

- 無視して動かせるか？

- 一覧画面をどう出すか悩ましい

- EditorPaneに実装する？

- 一覧が画面を出す仕組みが必要

- PropsでAppから持ってくるか

- Appに実装する？

- どのEditorPaneに挿入するかわからない

- textPopupHandlersは行番号を持っていない

- Shift + Enterでやるかな・・

- 雑に実装できたが、リファクタリングしたい

- {雑にやった} jsonp周りの型

- {x} DialogListItemの宣言位置

- {x} 離脱時に保存する

- {なにもやらなくてOK}Escでダイアログを閉じたときの処理

- Delete

- 即座に削除でいいかな

Dialogが必要かどうかを考えたい

保存する瞬間にページを移動すると意図しない保存になる？

- pageSaveになぜコールバックで内容を指定しているのか謎

{x} コピペするとおかしい

- ブラケティング部分が特におかしい

{x} ブラケティングの適切な処理

- キーワードが追加されたら、追加処理が必要（これはもうできているか？）

- sendSearchで実装している

- noCache=falseで呼んでいる

- わかりにくい・・

- noCache=trueで呼ぶ必要がある気がする

- これでキャッシュではなく再度検索が実行される

- あ、もしくはsearch-cacheを読んで後でキャッシュさせるのか

- なるほど

- これは連続で呼ぶとサーバ側で処理が遅延される

- 旧実装ではsaveのときに一緒に呼んでいる

- ここで前回のキーワードとの差分を見て、減ったものも対象に追加することで、削除処理も実現している

- 対象

- そのページ名にブラケティングしたもの

- 毎回更新する必要はなさそうだが、ページが出来た初回はmust

- ページに存在するブラケティング

- 毎回更新する必要はなく、ページに追加されたときだけ更新すればよい

- ページにかつて存在したブラケティング

- すべてが対象ではなく、以前は存在して、今はなくなったもののみを更新すればよい

- 細かい制御はできるが、雑に全部更新しても問題はない

- キーワードが削除たら、更新処理が必要

{x} 切り出しの実装

- 選択領域のハンドラは、文字列は得られるけど、何行目とかの情報が無い

- とりあえず新しいページを作るだけを実装するか

- 情報があった、これで行けるか？

- 実装をAppにするかEditorPaneにするか悩ましい

- EditorPaneで良い気がしてきた

- ページ操作周りをライブラリに切り出そう

- たぶ

{x} カーソル移動がおかしい

- 箇条書きを壊したとき

- 謎に選択される

- 行を結合するとき

- 1つずれる

- 多分直せた

{x} 上の方を編集するとしたのblock要素が再描画される

- 致命的

- blockだけではなくすべての行がそうだった

- keyの扱いをうまいことやりたいな

- 以前どうやったんだろう？

- グローバル変数で数字を管理してユニークな番号を採番している

- それっぽいのが出来た

- Editorのlinesに謎にIDを振ってからスタートしないといけないのがちょっとキモい

- ng-frontに組み込んだらkeyの重複エラーが出る

- simple-inline-editorとng-frontをローカルでテストする方法

- simple-inline-editorをビルドする

- npm link simple-inline-editor

- npm run force

- キャッシュを飛ばす

{x}入力補完の調整

- ページの上の方

- 量が多い時

- これは最悪キーワード数を制限するとかでよさそう

ブロック記法で非同期更新

React.jsでどうやるのかわからない

- ブロック記法のハンドラの引数にsetLineを持ち込む？

- setLineが描画ごとに再生成されてしまう

- ブロック記法のハンドラをsetLineの見えるスコープで定義する？

- このハンドラが描画ごとに再生成されてしまう

- useEffectでやる？

- LineのuseEffectで内容に変更があった時に実行する？

- Lineのもととなる文字列を変更監視対象にすれば関係ない行の変更では更新が走らないはず

- 何を書くの？

- ブロック記法のハンドラを引数に取る

- ブロック記法のハンドラの引数にレンダリング結果を反映するsetterを渡す

- このsetterはuseEffectの監視対象にする必要はない？

- Suspence

- これっぽい

- まさに

- > これまで非同期処理を実装したい場合は以下のように useState で状態を管理して useEffect でしていました。

- > 使い方の規約のある (opinionated) フレームワークを使用せずにサスペンスを使ったデータフェッチを行うことは、まだサポートされていません。サスペンス対応のデータソースを実装するための要件はまだ不安定であり、ドキュメント化されていません。データソースをサスペンスと統合するための公式な API は、React の将来のバージョンでリリースされる予定です。

- 開発モードだと動く

- 該当コンポーネントを利用しないと動く

- 想像するに外からimportしてきたソース上でReactを見失っているのではないか？

> code

TypeError: Cannot read properties of null (reading 'useEffect')

at $.useEffect

<<

- npm linkが関係ありそうなことが出ている

- うまくいく方法を見つけた

- npm linkをやめる

- node_modulesにそのままsimple-inline-editorをコピーする

- simple-inline-editor以下のnode_modulesを消す

- なぜこれでうまくいく？

- うまくいかないときにsimple-inline-editorのnode_modulesを読み込んでいるようだ

- これをやめさせたい

- ライブラリ側の package.jsonがよくない？

- package.jsonのfiles指定が有効にならない問題とみた

- 明記してあった！

- githubを使うのが楽そう

- filesが反映される

- distもgithubに上げないといけない

- 内容的にはgh-pagesブランチの中身なのだが、package.jsonがない

- distをメインブランチに入れた

- OK

- githubを参照する方式なのでsimple-inline-editorのローカルの変更は直ちに反映されるわけではないので注意

ページのロード

- なんとなくできた

組み込み

- /web以外のエンドポイントに取り込んでみる

- まずはexportがいい感じにできること

- Viteのライブラリモードを理解する必要がありそう

- どうやって利用するかによるのでは？

- 多分TypeScriptのまま読み込む方法がありそう

> code bash

$ npm link ../../simple-inline-editor

<<

- simple-inline-editorをライブラリモードにしたらgh-pagesが使えない問題あり

- 取り敢えず順調そう

- ng-frontとして開発中

Reactのコンポーネントとしてこれを使う

- バックエンドの付いたWikiとして利用してみる（やっと来た）

- simple-inline-editorを参照する形でフロントエンドを構築する

- バックエンドはnodeにするか、Goにするか？

- Goにしたい

- 今までのバックエンドがそのまま使えるかな？

- いやいや、普通にinlnieに組み込んだらそれでよいのでは？

- /webのエントリポイントではない別のところで新しいUIを使うようにできないか？

ブラケットの途中だと表示されない

- 単なるバグだった、直した

日本語入力と入力補完

- 日本語入力していると入力補完が出ない問題

- 直した

寄り道してフレームワークを交換

別リポジトリから利用できるようにする

- ローカルで使えるのね

- あ、でもreact-scriptsでいろいろやっているのでそのままでは使え無さそう

- rollup.jsを使う？

tabで箇条書きレベルを変更すると選択範囲がずれる

- 単なるバグだった

補完文字を決定すると・・

カーソル位置がおかしくなる

- 単なるバグだった

選択文字の扱い

- カーソルの移動を厳密にやることにしたせいで文字の選択ができなくなった・・

- ということで選択状態もstateにした

- これはMacでうまく動くか不明

スペースでインデント

- tabのインデントはスマートフォンではできないのでスペースでもできるようにしたい

- あと、箇条書きをダイレクトに書いた時/解除した時にカーソル位置がおかしくなる

- columnを正確に覚えておく必要があるが・・

- なぜ起きている？

- 箇条書きをテキストエリアに含めていない

- 深い理由が無いので、やめようかな・・

- インデントの記号を装飾したときにきれいにそろう

- linesが変化したときにcolumnを再現すれば良さそう

- 通常キー入力がおかしい

- keydownで処理している、文字が入りカーソルが動くところ

- ここでカーソルを動かすとカーソルが先に移動して文字が入る・・

- 文字を入力した後カーソルを動かしてほしいのだが・・

- 文字の入力も自前でやればこの問題は避けられるが・・

- onChangeのところでカーソル位置を完全に制御するようにした

- ちょっと不格好だけどkeydownでカーソル位置を計算したものをグローバル変数で渡す

- スペースでインデントを深くできるようにする

- 今のinlineがそうだね

- ちょっと挙動が違うけどできたっぽい

- まだおかしい

- 1文字目をBSで削除したとき

- OK 単なるプログラミングミス

- 未確定の日本語をBSで削った時

- ちょっと直したけど、ちょっとカーソル位置が微妙

- そもそもProcessのときはsetCursorしないのが良さそう

- 未確定の文字が入力されたときもonChangeが発行される？

- Stateで日本語入力中かを見るのが良さそう

- この課題は後回しにしたいな・・

- useRefだった

- Staetだと再描画が走る

- onCompositionStart, onCompositionEndで日本語入力中を検知してonChageを抑制する

- 手で箇条書きを作った時

- 編集前と編集後でprefixに変化があった時に再計算したい

- 編集前と編集後の状況をkeydownの中で検知できる？

- 手で箇条書きを削除したとき

カーソル位置を合わせる

- tab, shift+tabで箇条書きが始まる時、終わる時にカーソルが末尾に移動する

- columnの値は記録できていない

- 現状は行の末尾ということにしている

- DOMをレンダリングするときにこれに基づいてカーソル位置が末尾になる

- tabを押したときに現在のカーソル位置をcolに格納すれば良さそう

- 謎のwarningが出ている

- 変更前には出ていなかった

- もう少し調査する

ポップアップの仕組みを使える？

- TextareaWithMenuにpoupHandlersを指定すればメニューが出せる

- 表示位置はselect stateで管理している

- 今はonSelectで設定している

- 選択しているとメニューが出るようになっている

- この選択している、の条件を広げれば行けそう

後は補完候補をキーボードで選択する機能

- まだないな・・

- ポップアップが出ているときにEnterを押すと候補から確定する

- Tabとか上下キーで候補を移すのはそのあと考えよう

カーソルを制御したい

- 入力補完後にカーソルが乱れる問題

- できた

- 結局setCurosr, setLineをバケツリレーする羽目になったな・・

確定できた

候補をキーボードで選ぶ機能

- できたかな

- ロジックが複雑

- クリックで確定できるようにした

ブラケットを入力するときに半角にするのがだるい

/CatWithNeko/半角角カッコをワンタッチで出せるようにしたい

- F10かなぁ・・

commitできてないけど何がまだ何だっけ？

- できてるっぽいのでcommitした