OverType – Basit metin alanı tabanlı Markdown WYSIWYG editörü

• OverType, Markdown belgelerini doğrudan görsel olarak düzenlemek için tasarlanmış açık kaynaklı bir WYSIWYG editörüdür
• Bu editörün en büyük özelliği, yalnızca HTML textarea kullanılarak geliştirilmiş olmasıdır; bu sayede hafif yapı ve hızlı yükleme süresi sunar
• Kurulum veya ek harici kütüphane gerektirmez; bu yüzden basit ortamlarda da hemen kullanılabilir
• Diğer Markdown editörlerine kıyasla çalışma ortamı kısıtları daha azdır ve kodu okunabilir, yönetimi kolaydır
• Gerçek zamanlı önizleme ve kullanıcı odaklı sezgisel arayüzü sayesinde yeni başlayan geliştiriciler bile Markdown belgelerini kolayca yazıp düzenleyebilir

Temel özellikler ve avantajlar

• Hafiflik: Gereksiz kod veya bağımlılık yoktur; tarayıcıda doğrudan çalıştırılabilir
• Basit yapı: Tek bir textarea tabanlı tasarım sayesinde hata ayıklama ve genişletme kolaydır
• WYSIWYG desteği: Kullanıcı Markdown sözdizimini girdiğinde anında görsel önizleme sunar
• Erişilebilirlik: Karmaşık kurulum süreci olmadan herkes erişebilir
• Kullanıcı dostu: Proje yapısı sezgiseldir; hızlı öğrenme ve benimseme olasılığı yüksektir

Karşılaştırmalı üstünlükler

• Genel WYSIWYG editörlerine göre boyutu çok küçüktür
• Büyük framework tabanlı editörlere kıyasla bakımı ve özelleştirmesi daha kolaydır
• Hızlı yükleme süresi ve düşük bellek kullanımı sayesinde düşük donanımlı ortamlarda da sorunsuz kullanılabilir

Kullanım alanları

• Basit bir not amaçlı Markdown editörü
• Gömülü belge düzenleyicisi gereken hizmetlere kolayca embed edilebilir
• Eğitim amaçlı ve prototip geliştirme ortamları için uygundur

• Demoyu deneyin - https://overtype.dev/demo

[m00nlygreat]

Buna bayıldım!

[GN⁺]

Hacker News görüşleri

• Gerçekten harika; eğer drop-in şekilde her şey hemen çalışıyorsa çok faydalı olur diye düşünüyorum. Biraz takılacak olursam, buna Markdown'ı "render etmek" demektense aslında "syntax highlighting" demek daha doğru gibi. Bir diğer ilginç yöntem de CSS Custom Highlight API kullanmak olabilir; böylece preview div'ine gerek kalmaz ve başlıklar gibi yerlerde monospace olmayan fontlar ya da farklı metin boyutları da uygulanabilir gibi görünüyor. CSS Custom Highlight API hakkında daha fazla bilgi
  • textarea içeriğine de highlight uygulanıp uygulanamadığını merak ediyorum
  • Animasyonla genişletilmiş demoda, kalın yazı ya da nokta haline gelen semboller gibi öğelerin normal metinden belirgin biçimde farklı şekilde biçimlendirildiği görülebiliyor
• "Ana sayfadan miras alınan CSS yüzünden margin, padding ve line-height gibi şeylerin kayması kafa karıştırıcıydı" kısmına tamamen katılıyorum. Böyle durumlarda web component ve onun shadow DOM'u tam uygun çözüm olur. div.editor yerine bu component textarea'yı sararsa, mevcut textarea deneyimi kademeli olarak yükseltilebilir
• Gerçekten iyi görünüyor; geçmişte bu yaklaşımı ele alan bağlantıları topladığım için paylaşayım
  • CSS Tricks'in editör örneği
  • code-input kütüphanesi
  • grugnotes.com'da da Markdown bu şekilde işleniyor gibi görünüyor
• overtype.dev sitesini kurcalarken gerçekten harika bir rabbit hole keşfettim; hyperclay.com adlı tek HTML uygulamasını tavsiye ederim, çok keyif aldım
  • Bunun, WWW'nin başlangıçta hedeflediği yöne çok yakın olduğunu düşünüyorum. İlk web tarayıcısı da aslında düzenleme işlevi sunuyordu. Tim Berners-Lee'nin NeXT üzerinde yaptığı uygulama, işletim sisteminin yerleşik zengin metin sınıfını (TextView) saran bir yapıydı; bu daha sonra NSTextView oldu ve bugün hâlâ Mac'teki TextEdit uygulamasında kullanılıyor. Ancak düzenleme iki nedenle ortadan kayboldu: Birincisi, HTTP PUT olmadığı için değiştirilmiş HTML yalnızca yerelde kaydedilebiliyordu. İkincisi, Mosaic çok platformlu bir tarayıcı yaptı ama düzenleme özelliğini de eklemek fazla karmaşık olduğundan bunu çıkardı. Sonuçta çoğu kullanıcı düzenleme özelliği olmayan bir ortama alıştı
  • Böyle hayranlığımı sık sık dile getirmem ama bu kez gerçekten sarsıldım. Bu yaklaşımın neden bugün çok daha patlayıcı biçimde yayılmadığını anlamıyorum; özellikle vibe coding'in yükseldiği bu dönemde bunun çok daha verimli ve daha iyi olduğunu düşünüyorum
  • 2000'lerin ortasındaki web geliştirmede denenen harika deneyleri hatırlatıyor. Böyle projelerin standartları ve kullanıcı beklentilerini bir kademe yukarı taşıdığına inanıyorum
• Oldukça olgun görünüyor. IDE'lerde Cursor'daki gibi, mevcut imlecin önünde gümüş renkli otomatik tamamlama metni gösterip TAB tuşuna basınca bunun .value içine yazılması da yapılabilir mi diye merak ediyorum
• Gerçekten hoş; buna "şeffaf syntax highlighter" demek daha uygun olabilir. Yaptığım adventure demosunda da benzer şekilde gizli bir <input text> kullanmıştım; amaç yapıştırma ve seçim gibi temel işlevleri korurken stil tarafını da tamamen bütünleştirmekti. contentEditable yerine temel input kutuları çok daha basit olduğu için daha çekici geliyor. Buna gerçek Markdown render'ı ekleyip textarea'yı tamamen gizli tutarken odağı korur ve render edilmiş işaretlemenin seçim olaylarını textarea'ya birebir emüle ederseniz, hem metin kutusunun kararlılığını hem de güzel bir editörü elde edebilirsiniz diye düşünüyorum
  • Küçük bir ilginç bilgi: GitHub'un arama kutusundaki syntax highlighting bu şekilde ekleniyor. Eskiden Shortwave'de de (e-posta istemcisi) aynı yaklaşım kullanılmıştı; şeffaf input üstüne bir görünüm bindiriliyordu. Ayrıca şu blog yazısı sayesinde arama UX'ini bir seviye yukarı taşıyabilmiştik
    Delightful Search: More Than Meets the Eye (Superhuman blogu)
• Fazlasıyla harika; bu sadeliği gerçekten seviyorum. Mevcut textarea'ya göre hiçbir dezavantajı yokken daha fazla avantaj sunuyor. textarea'yı bambaşka bir seviyeye taşıdığını düşünüyorum. Daha önce benzer bir proje olarak contextarea.com diye bir şey yapmıştım; buna overtype'ı eklemek iyi olabilir
  • Yalnızca monospace font kullanılabilmesi bence bir dezavantaj. Geliştirici ya da programcı olmayanlar için üründe kullanım alanını azaltır. Tabii proje yine de çok iyi; sadece belirgin bir kısıt olduğunu söylemek istiyorum
• Bunu bir web component içine sarıp div + constructor çağrısı olmadan doğrudan kullanılabilir hale getirmeyi düşünüp düşünmediğini merak ediyorum
• Eğer bu bir WYSIWYG editörse resim önizlemesi olması gerekirdi; ama görünen o ki aslında sadece metin alanında syntax highlighting sağlıyor. Proje güzel ama tanıtım metni biraz yanıltıcı
  • Bu, terimin hatalı kullanımına bir örnek. Gerçek bir WYSIWYG editör biçimlendirme işaretlemesini hiç göstermez
  • Metni yazıp, vurgulamak istediğin kısmı seçip "B" düğmesine basınca kalın oluyorsa, resim önizlemesi hariç buna WYSIWYG denebilir
  • Görsel özelliğini bulamadım; acaba gözümden kaçan bir şey mi var diye merak ediyorum
• 912 baytta çalışan spell demosunu paylaşayım
  • İnanılmaz; gerçekten çok etkilendim. Markdown'a tam uymasa da overtype'tan çok daha fazla özellik sunan bir WYSIWYG gibi görünüyor (tabii overtype da gerçekten iyi bir proje). 912 baytta bu kadarını yapmak şaşırtıcı. 14kb'nin altında çok basit bir blog yazısı üretip içine yorum işlevi bile koyarak yine de inanılmaz hızlı yüklenen bir şey yapılabilir gibi geliyor. Hayranlığımı anlatmakta kelimeler yetersiz kalıyor