OverType – Editor Markdown WYSIWYG berbasis area teks sederhana

• OverType adalah editor WYSIWYG open source yang dirancang agar dokumen Markdown dapat langsung diedit secara visual
• Fitur paling menonjol dari editor ini adalah implementasinya yang hanya menggunakan HTML textarea, sehingga menawarkan ukuran ringan dan kecepatan muat yang tinggi
• Karena tidak memerlukan instalasi atau library eksternal tambahan, editor ini bisa langsung digunakan bahkan di lingkungan yang sederhana
• Dibanding editor Markdown lain, editor ini memiliki lebih sedikit batasan pada lingkungan eksekusi, dan kodenya mudah dibaca serta mudah dirawat
• Dengan pratinjau real-time dan UI intuitif yang berfokus pada pengguna, bahkan developer pemula dapat dengan mudah menulis dan mengedit dokumen Markdown

Fitur utama dan keunggulan

• Ringan: Tanpa kode atau dependensi yang tidak perlu, sehingga bisa langsung dijalankan di browser
• Struktur sederhana: Desain berbasis satu textarea membuat debugging dan pengembangan lebih mudah
• Dukungan WYSIWYG: Saat pengguna memasukkan sintaks Markdown, editor memberikan pratinjau visual secara langsung
• Aksesibilitas: Tanpa proses instalasi yang rumit, siapa pun dapat mengaksesnya
• Ramah pengguna: Struktur proyek yang intuitif memungkinkan pembelajaran dan adopsi yang cepat

Keunggulan dibandingkan alternatif

• Dibanding editor WYSIWYG pada umumnya, ukurannya sangat kecil
• Dibanding editor berbasis framework besar, lebih mudah dirawat dan dikustomisasi
• Dengan kecepatan muat tinggi dan penggunaan memori yang rendah, editor ini dapat digunakan dengan lancar bahkan di lingkungan berspesifikasi rendah

Cara pemanfaatan

• Editor Markdown sederhana untuk mencatat
• Mudah di-embed ke layanan yang membutuhkan editor dokumen tersemat
• Cocok untuk tujuan pendidikan dan lingkungan pengembangan prototipe

• Coba demonya - https://overtype.dev/demo

[m00nlygreat]

Suka ini!

[GN⁺]

Komentar Hacker News

• Sangat keren, kalau semuanya benar-benar langsung berfungsi dengan cara drop-in rasanya akan sangat berguna; kalau sedikit mengkritik, menyebut ini sebagai "merender" Markdown sebenarnya lebih dekat ke "syntax highlighting"; pendekatan menarik lainnya adalah memakai CSS Custom Highlight API, yang berarti tidak perlu div pratinjau, dan sepertinya juga memungkinkan font non-monospasi atau ukuran teks berbeda untuk header, dll. Detail lebih lanjut tentang CSS Custom Highlight API
  • Penasaran apakah highlight juga bisa diterapkan pada isi textarea
  • Dari demo yang diperluas dengan animasi, terlihat bahwa formatting dilakukan dengan cara yang jelas berbeda dari teks biasa, seperti huruf tebal atau simbol yang berubah menjadi titik
• Sangat relate dengan bagian "ada kekacauan karena margin, padding, line-height, dan sebagainya jadi meleset akibat CSS yang diwarisi dari halaman induk"; untuk kasus seperti ini, web component dan shadow DOM-nya memang solusi yang pas; kalau komponen ini membungkus textarea alih-alih div.editor, pengalaman textarea yang sudah ada bisa di-upgrade secara bertahap
• Kelihatannya sangat bagus; saya pernah mengumpulkan tautan tentang pendekatan seperti ini, jadi sekalian saya bagikan
  • Contoh editor dari CSS Tricks
  • Library code-input
  • Sepertinya grugnotes.com juga menangani Markdown dengan cara seperti ini
• Saat menjelajahi situs overtype.dev saya menemukan rabbit hole yang benar-benar keren; saya merekomendasikan aplikasi HTML tunggal hyperclay.com, sangat menyenangkan memakainya
  • Menurut saya pendekatan ini sangat dekat dengan arah yang mula-mula dituju WWW; browser web pertama sebenarnya juga menyediakan fungsi editor; aplikasi yang dibuat Tim Berners-Lee di NeXT pada dasarnya membungkus kelas rich text bawaan sistem operasi, TextView (yang kemudian menjadi NSTextView dan masih dipakai di aplikasi TextEdit di Mac sekarang), tetapi editing menghilang karena dua alasan: pertama, tidak ada HTTP PUT sehingga HTML yang sudah diedit hanya bisa disimpan secara lokal; kedua, Mosaic membuat browser multiplatform, tetapi menambahkan fitur editing terlalu rumit sehingga dibuang; hasilnya, kebanyakan pengguna akhirnya terbiasa dengan lingkungan tanpa kemampuan edit
  • Saya tidak sering kagum seperti ini, tetapi kali ini benar-benar mengejutkan; saya tidak paham kenapa pendekatan ini belum meledak popularitasnya seperti sekarang, dan di era vibe coding seperti sekarang saya rasa cara seperti ini jauh lebih efisien dan lebih baik
  • Mengingatkan saya pada eksperimen-eksperimen keren dalam web development pertengahan 2000-an; saya percaya proyek seperti ini berperan menaikkan standar dan ekspektasi pengguna satu tingkat lagi
• Terlihat sangat matang; saya penasaran apakah bisa juga dibuat fitur seperti di IDE atau Cursor, yaitu menampilkan teks autocompletion berwarna perak di depan kursor saat ini lalu menekan TAB untuk memasukkannya ke .value
• Sangat oke; mungkin lebih cocok disebut "highlighter sintaks transparan"; di demo adventure yang pernah saya buat saya juga memakai <input text> tersembunyi dengan pendekatan serupa, agar fungsi dasar seperti paste dan selection tetap bekerja sambil styling tetap sepenuhnya menyatu; kotak input bawaan jauh lebih sederhana daripada contentEditable, jadi lebih menarik; kalau Markdown sungguhan dirender di sini sambil textarea disembunyikan sepenuhnya tetapi tetap mempertahankan fokus, lalu event selection dari markup hasil render diemulasikan apa adanya ke textarea, saya rasa kita bisa mendapatkan kestabilan textbox sekaligus editor yang indah
  • Fakta menarik: syntax highlighting di kotak pencarian GitHub ditambahkan dengan cara seperti ini; dulu Shortwave (klien email) juga mengimplementasikannya dengan pendekatan yang sama, yaitu menaruh view di atas input transparan; dan dengan merujuk ke blog ini, UX pencarian bisa dinaikkan ke level berikutnya
    Delightful Search: More Than Meets the Eye (blog Superhuman)
• Sangat keren; saya suka kesederhanaan seperti ini; tidak ada kekurangan dibanding textarea yang sudah ada, tetapi memberi jauh lebih banyak keuntungan; menurut saya ini membawa textarea ke level yang benar-benar baru; dulu saya pernah membuat proyek serupa bernama contextarea.com, dan rasanya akan bagus kalau digabungkan dengan overtype
  • Menurut saya kekurangannya adalah hanya bisa memakai font monospasi; kalau bukan untuk developer atau programmer, kegunaannya dalam produk jadi berkurang; tentu proyeknya tetap keren, saya hanya maksudkan bahwa memang ada batasan yang jelas
• Penasaran apakah pernah dipertimbangkan untuk membungkus ini sebagai web component supaya bisa langsung dipakai tanpa perlu div + pemanggilan konstruktor
• Kalau ini editor WYSIWYG, seharusnya ada pratinjau gambar, tetapi kelihatannya yang sebenarnya diberikan hanya syntax highlighting di textarea; proyeknya bagus, tetapi copy promosinya agak menyesatkan
  • Ini contoh penggunaan istilah yang keliru; editor WYSIWYG sejati sama sekali tidak menampilkan markup formatting
  • Kalau kita mengetik teks, menandai bagian yang ingin ditebalkan, lalu menekan tombol "B" dan teksnya menjadi tebal, maka itu bisa disebut WYSIWYG, terlepas dari pratinjau gambar
  • Saya tidak menemukan fitur gambar; penasaran apakah saya melewatkan sesuatu
• Saya membagikan demo spell yang berjalan dalam 912 byte
  • Ini benar-benar gila, saya sangat terkesan; mungkin tidak benar-benar cocok untuk Markdown, tetapi terlihat seperti WYSIWYG yang menawarkan jauh lebih banyak fitur daripada overtype (meskipun overtype juga proyek yang sangat bagus); mengejutkan bahwa sebanyak ini bisa dilakukan dalam 912 byte; rasanya memungkinkan membuat posting blog yang sangat sederhana di bawah 14kb, lengkap dengan fitur komentar di dalamnya, dan tetap memuat sangat cepat; saya sampai kekurangan kata untuk mengungkapkan kekaguman