ハクソク

世界を動かす技術を、日本語で。

Show HN: OverType – テキストエリアだけのMarkdown WYSIWYGエディタ

281日前

概要

  • WYSIWYGエディタの複雑さ に不満を持ち、独自のシンプルなMarkdownエディタ開発を決意
  • Markdownの可読性の低さ とクライアントの使い勝手の課題を解決したい動機
  • テキストエリアとプレビューの重ね合わせ による新しい編集体験の発想
  • 技術的課題と解決策 を経てOverTypeを完成
  • パフォーマンス・シンプルさ・使いやすさ を両立したエディタを公開

WYSIWYGエディタへの不満とMarkdownの課題

  • WYSIWYGエディタの重さ・複雑さ に対するフラストレーション
  • 軽量かつシンプルなスタイル付きテキスト入力 の実現を目指す開発動機
  • Markdownのままでは見た目が悪く、クライアントに不向き という現実
  • ContentEditableの限界 や既存ソリューションへの再考
  • Ghostの分割画面型エディタ （左：Markdown、右：プレビュー）に感銘

新しいMarkdownエディタの発想

  • プレビューをtextareaの背後に重ねる というアイデアの誕生
  • 完璧に重ね合わせることで、リッチテキスト編集のような体験 を実現
  • モノスペースフォント・同一フォントサイズ・Markdown記法の表示 というトレードオフ
  • シンプルさとパフォーマンスを重視した割り切り

技術的課題とその解決

  • リストの整列問題 ：箇条書き記号で文字幅がズレる問題をHTMLエンティティ（•）で解決

  • モノスペースフォントの落とし穴 ：太字や斜体で幅が変わるフォントに注意

  • 親ページからのCSS継承問題 ：margin, padding, line-heightのズレで整列が崩壊

  • 徹底した正規化 による解決策の採用

    • textareaとプレビューレイヤーの完全な重ね合わせ
    • textareaの背景・文字色を透明化し、カーソルのみ表示
    • 入力イベントでプレビューを即時更新＆スクロール同期

OverTypeの誕生と特徴

  • GitHubの<markdown-editor>要素 の発見と活用
  • OverType（https://overtype.dev） として公開
  • テキストエリアのネイティブ機能（undo/redo、モバイルキーボード、アクセシビリティ、パフォーマンス） をそのまま享受
  • 45KBの軽量パッケージ で動作
  • クロスブラウザ・モバイル対応のリッチMarkdownエディタ を実現

今後の展望とフィードバック募集

  • 全プロジェクトでの利用を計画
  • シンプルさとミニマルさの維持を重視
  • ユーザーからのフィードバック・改善要望を歓迎
  • デモ＆ドキュメント: https://overtype.dev
  • GitHubリポジトリ: https://github.com/panphora/overtype

Hackerたちの意見

すごくいいね！シンプルさが大好き。普通のテキストエリアと比べて欠点がないし、メリットがたくさんある。テキストエリアをかなり改善した感じ！前にcontextarea.comって似たようなものを作ったんだけど、オーバータイプも追加しようかな。

└

等幅フォントを使わなきゃいけないのは結構大きな欠点だね。僕にとっては、テクニカルなプログラマー向けじゃない製品には使わないってことになる。すごくクールなプロジェクトではあるけど、明らかな欠点があるって言ってるだけだよ。

WYSIWYGエディタだったら、画像のプレビューがあるはずだけど、どうやらただのテキストエリア用の構文ハイライトみたいだね。どちらにしてもいいプロジェクトだけど、ちょっと誇大広告かな。

└

画像のオプションが見当たらなかったんだけど、何か見逃してるかな？

見た目いいね！過去に集めたこのアプローチについてのリンクをいくつか紹介するね： - https://css-tricks.com/creating-an-editable-textarea-that-su... - https://github.com/WebCoder49/code-input それから、https://grugnotes.com もマークダウン用にこれをやってると思うよ。

これはかなりいいね！でも、透明な構文ハイライターって呼んだ方がいいと思う。https://grack.com/demos/adventure/ では、似たようなものに隠れた要素を使ったよ。ペーストや選択、テキストの他の良さを活かしたかったんだけど、完全に統合されたスタイリングでね。君と同じように、標準のテキスト入力ボックスの方が、contentEditableよりもずっと面白いって感じた。ここには、実際のマークダウンを表示しつつテキストエリアをほぼ完全に隠して（でもフォーカスは維持）、レンダリングされたマークアップの選択イベントをテキストエリアにエミュレートするっていう面白い中間地点があると思う。そうすれば、テキストエリアの堅実さを持った美しいエディタができるんじゃないかな。

これは実際にかなり賢いね。ただ、500kbの本格的なWYSIWYGエディタに膨れ上がらないように、シンプルさを保ってほしいな。

いいね！すぐに使えるならすごく便利そう。ちょっと細かいことを言うと、マークダウンを「レンダリング」してるっていうよりは「構文ハイライト」してる感じだね。別の面白いアプローチとして、CSSカスタムハイライトAPIを使うのもありかも。[0] そうすればプレビュー用のdivが必要なくなるし、非等幅フォントやヘッダー用のサイズの異なるテキストも可能になるかもしれないよ。[0] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_...

└

アニメーション付きのデモは、プレーンテキストとは違ったフォーマットを見せてるね（太字は太字だし、ハイフンが箇条書きに置き換わってる）。

└

テキストエリアの内容にハイライトを使える？

似たようなものを作ったよ！ https://github.com/andrewbaxter/malarkdowney - 主な違いは、俺のはh*スタイルの変更が適用されてて、ページの他の部分と視覚的に分離されてないってことかな。つまり、単なる構文ハイライトじゃなくて、もっと本格的な出力プレビューになってる。テキストオーバーレイのアプローチは、幅や高さに影響するスタイル変更をしたい場合にはうまくいかないと思う（オーバーレイが合わなくなっちゃうからね）。欠点は、contenteditableのカーソル移動が謎の理由で壊れちゃってること。

overtype.devのウェブサイトを見てたら、すごい深い穴にハマっちゃった（ちなみにいい仕事だね！）さらに素敵な穴を見つけたよ - https://hyperclay.com/ シングルHTMLアプリだよ :D 楽しんで！

https://github.com/inokawa/rich-textarea

これは単なるテキストエリアじゃなくて、他の多くのプロジェクトでも見られるパターンだね。