guttyar-2213
Vueで色々なエディタのいいとこ取りをしたエディタを作る
進みがすごろくのようだ、いつ終わるんだこれ。 その2でも1から作り直すことになっていたが、もう一回1から作り直す(最後とは言ってない)。 ネイティブの辛さVSCodeのmonaco-editorはカーソルがネイティブでなく、入力もその位置にテキストエリアを配置して行われている。 ネイティブに頼るとカーソル、選択範囲はかなり辛い。なのでその方法でチャレンジし直すことにした。 求めてたものが見つかってしまった見出しの通り、見つかってしまった。 https://marktex
JSで数値に対して最低値を適用するプログラムをメモ const min = (n, m) => n < m ? m : n
順番がおかしい？その5では行番号の表示をする予定なので、行番号部分のスタイルを整えるために自作します。 ほぼコピペMarkdownのスタイルを作るために、以下のCSSを参考にする。 コピペでもいい、というか今回はコピペした。 変えたければお好みで。 body, htmlなどマークアップに直接関係のないスタイルは削除。 今回は少しばかり調整とSCSS化を行なった。 あと、適用範囲を指定の部分に留めるため、.markdown-bodyとクラスをつけた部分だけ適用するようにす
完成形 HTMLの構造<div class="e-container"> <div class="e-content"> <div class="e-wrapper"> <div class="editor" contenteditable="true" ></div> <div class="e-placeholder"> {{ placeholder }} <!-- 直接書い
どうしてそうなったのかSlate/Draftjsなどが痒いところに手が届かないことに気づいた。 なのでライブラリをMarkdownベースで作ることにした。 なぜVue.jsなのか=> 慣れているから。 2019/06/05時点での進捗
きっかけでぶつかった壁を乗り越える為にできた計画。 機能は - コンパイル- データツリーの作成- 変換前の文字indexから変換後の文字indexを返す- indexを用いたスタイルの取得 など。もしかしたら増えるかもしれない。 進捗 コンパイル* H1 ~ 6* Code Block- Blockquote <= 難易度高い* HR- List <= 難易度超高い- Table <= 難易度超高い- Checkbox- Strong- EM* inline Cod
parse("*1234*", [1, 5]) // => [0, 4] みたいに使える関数ないかな
marked、ソースマップ的なのが欲しい
エディタ自体は https://github.com/yabwe/medium-editor とかでいいのだけどMarkdownが使えないのがね。。
今回は丸っとhttps://qiita.com/ksakiyama134/items/b7f0afcd43e7411f898dを参考にします。 とりあえずプロジェクト作成&yarn addさっそくエディタをつくっていきましょう。とはいえ、Reactが動く環境をまず整えないといけません。create-react-appを使ってプロジェクトを生成します。 $ create-react-app 201812-react-slate-app $ cd 201812-react-sl
きっかけとあるWebサービスの記事のエディタを作っていた時、 - Markdownで書ける (markedが使える)- Medium / note みたいな選択しているところにスタイルをつけられるツールバーがある- | Source | Preview | みたいに2パネルじゃない- 使いやすい 上の条件を満たすエディタが見つからなかったのでこの計画がスタートした。 2番目の条件はなかったら作ればいいやと思って条件から外して検索してもいいエディタが見つからない。 Ty
