Wordgard: Editor teks kaya untuk browser dari pembuat ProseMirror

 (wordgard.net)
1 poin oleh GN⁺ 5 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • Wordgard adalah pustaka JavaScript open-source untuk membuat editor teks kaya di browser, dibangun di atas fondasi editor baru dari pembuat ProseMirror
  • Alih-alih editor HTML bentuk bebas, pustaka ini berfokus pada pengendalian struktur dokumen, sehingga pengembang dapat menentukan dengan presisi jenis konten dan struktur makna yang diizinkan
  • Untuk editor kustom yang kompleks, pustaka ini menyediakan model berbasis skema dan struktur berpusat pada ekstensi, sehingga fitur dapat diganti atau dimodifikasi sesuai kebutuhan
  • Basis editor ini menangani kebutuhan seperti aksesibilitas, internasionalisasi, dokumen RTL dan dwibahasa, konten terstruktur, gaya fungsional, serta pengeditan kolaboratif
  • Ini adalah open-source permisif berlisensi MIT, tetapi proyek ini menyambut laporan bug dan tidak menerima pull request

Basis editor untuk mengendalikan struktur dokumen

  • Wordgard adalah pustaka JavaScript open-source untuk mengimplementasikan editor teks kaya di dalam browser
  • Ini bukan editor HTML bentuk bebas, melainkan sistem editor teks kaya semantik yang memungkinkan pengembang mengendalikan secara tepat jenis konten yang didukung dan struktur dokumen
  • Pustaka ini menawarkan pendekatan berbasis skema agar struktur dokumen dapat didefinisikan secara rinci dan elemen dokumen kustom dapat dibuat
  • Antarmuka pemrogramannya dirancang dengan tujuan generalitas dan fleksibilitas, sehingga dapat digunakan sebagai fondasi editor kustom dengan kebutuhan yang besar

Ekstensibilitas, aksesibilitas, dan fitur kolaborasi

  • Sebagian besar fitur editor diimplementasikan sebagai ekstensi (extension), sehingga dapat diganti atau dimodifikasi bila tidak sesuai kebutuhan
  • Fitur aksesibilitas mempertimbangkan pengguna screen reader, pengguna yang hanya memakai keyboard, dan lingkungan perangkat mobile, serta mendukung internasionalisasi UI
  • Untuk lingkungan penulisan dari kanan ke kiri, Wordgard mendukung kesadaran arah baik pada konten maupun antarmuka, sehingga dapat menangani konten dwibahasa dan dokumen RTL
  • Pohon dokumen dapat mencakup konten terstruktur seperti tabel, daftar bertingkat, figure dengan caption, dan struktur kustom
  • Bagian besar sistem ini ditulis dengan gaya fungsional demi kejelasan dan kemudahan pengujian
  • Wordgard mendukung pengeditan kolaboratif yang memungkinkan beberapa pengguna mengedit dokumen yang sama secara bersamaan dan menggabungkan hasil edit simultan

Lisensi dan pengelolaan proyek

Bacaan terkait

1 komentar

 
GN⁺ 5 jam lalu
Komentar Hacker News

  • Kebanyakan orang sepertinya ingin tahu “mengapa?”. Dokumen ini membahas perbedaannya dengan ProseMirror, jadi inilah jawaban yang paling mendekati pertanyaan itu: https://wordgard.net/docs/prosemirror/
    Satu hal yang perlu diperhatikan adalah tidak adanya jalur upgrade. Ada banyak konsep yang sama dengan ProseMirror, tetapi untuk beralih tampaknya butuh cukup banyak pekerjaan. Obsidian berbasis CodeMirror, jadi sepertinya tidak akan beralih, tetapi tempat seperti tiptap.dev mungkin bisa terdampak
    @merijn, saya penasaran apakah Anda bisa menjelaskan mengapa Wordgard cukup bernilai untuk menanggung biaya migrasinya
    Edit: Saya melihat banyak isu dibahas di blog pribadi Marijn, dan mengirimkan https://marijnhaverbeke.nl/blog/wordgard-0.1.html ke HN agar konteksnya lebih baik

    • Soal “apakah Wordgard cukup bernilai untuk menanggung biaya migrasi?”, mungkin saja tidak. Kalau Anda puas dengan ProseMirror, teruslah memakai ProseMirror, dan saya akan terus mendukungnya
      Namun, seperti yang dijelaskan di posting blog, saya sudah mengumpulkan cukup banyak wawasan desain baru yang bisa menghindari beberapa masalah yang saya temui di ProseMirror, sehingga saya ingin membuat iterasi baru
      Saya akan menambahkan tautan posting blog ke bagian dokumentasi situs web
      Dan namanya marijn, bukan merijn
    • Di blog tertulis “Saya juga tidak lagi terlalu menyukai permainan kata ProseMirror. Maksudnya CodeMirror, tetapi untuk prosa, paham kan?”, jadi sepertinya sekarang giliran seseorang membuat Codegard
    • “Mengapa layak menanggung biaya migrasinya?” adalah pertanyaan yang benar-benar ingin diketahui. Lebih penting lagi, saya juga penasaran mengapa ini tidak dibuat saja sebagai ProseMirror v2
      Landing page tampaknya butuh lebih banyak informasi tentang “mengapa” daripada “apa”

  • Terlepas dari editornya, artis yang menangani desainnya benar-benar mengesankan. Sangat rapi dan langsung menarik perhatian: https://kamilastankiewicz.com/

    • Saya juga berpikir begitu. Benar-benar indah, dan saya penasaran kira-kira berapa biayanya untuk memasukkan ilustrasi seperti ini ke situs web yang sudah ada
    • Grafiknya luar biasa bagus dan juga terasa seperti Ghibli. Aneh rasanya mengatakan hal seperti ini dalam konteks editor rich text

  • Sekitar 25 tahun lalu, saya ingat tantangan besar untuk membuat editor WYSIWYG berjalan demi meluncurkan situs PHP-Nuke untuk koran sekolah, dan akhirnya berhasil melewatinya
    Rasanya tidak masuk akal bahwa belum ada implementasi standar web untuk fitur seperti ini yang sudah lolos 15 tahun lalu

    • Ada contenteditable, dan hal-hal seperti Wordgard atau ProseMirror pada dasarnya dibangun di atasnya. Sisanya lebih dekat ke antarmuka pengguna dan interoperabilitas dengan sistem yang tidak menginginkan input HTML sembarang
    • Untuk waktu yang lama, vendor browser bahkan tidak bisa menyepakati detail perilaku seleksi teks sederhana

  • Ini terlihat sangat bagus sampai mengejutkan
    Baru-baru ini saya mencari sesuatu yang mirip lalu akhirnya membuat sendiri, dengan operational transform (OT) berbasis blok yang disinkronkan ke server lokal dan sinkronisasi berbasis diff ke server jarak jauh
    Saat membaca panduan sistemnya, saya terus mengangguk. Melihat kesamaan dan perbedaannya terasa cukup memvalidasi

    • ProseMirror, dan mungkin Wordgard juga, menangani sangat banyak hal dengan benar

  • Ada satu area yang sangat mendasar tempat semua editor gagal. Yaitu apakah Anda bisa mengetik kalimat lengkap di dalam editor dengan iPhone
    Wordgard tidak lulus tes ini. Input dari auto-correct atau saran keyboard tertelan, dan kata yang baru diketik sebagian atau salah eja dihapus

    • ProseMirror, dan Lexical yang disebut di komentar saudara juga, seharusnya bisa menangani bagian ini dengan baik
      Mobile Safari dan Android Chrome melakukan banyak sekali hal aneh, berbeda dari browser saudara mereka di desktop, dan memperlakukan standar dengan cukup longgar. Karena itu, agar bisa berfungsi dengan benar sering kali dibutuhkan ekor panjang kode workaround
      Wordgard pada akhirnya akan sampai ke sana, tetapi fokus sebelum rilis pertama adalah arsitektur
    • Beberapa tahun lalu saya meninjau editor rich text berbasis web. Di desktop semuanya terlihat baik-baik saja, tetapi di mobile semua yang saya coba berantakan
      Tidak bisa memilih teks, auto-correct rusak, mengetuk teks tidak memindahkan kursor, input berhenti, keyboard tidak hilang meski elemen kehilangan fokus, dan semacamnya
      Selama beberapa dekade terakhir, sudah ada beberapa upaya untuk menambahkan elemen rich text yang layak ke web, tetapi saya tidak tahu mengapa semuanya gagal. Mungkin karena itu pekerjaan besar, kompleks, dan tidak ada imbalannya
      Dukungan rich text native yang layak adalah salah satu blind spot besar web. Platform native sudah menyelesaikan masalah ini puluhan tahun lalu

  • Sekitar 6 tahun lalu, saya sangat kesulitan meneliti dan mengimplementasikan auto-complete sumber daya jarak jauh bergaya @, yaitu fitur untuk merujuk pengguna atau dokumen lain. Cara editor ini melakukan ekstensi terlihat seperti evolusi ProseMirror
    Akan sangat bagus kalau ini menjadi fitur bawaan dasar, bukan sesuatu yang harus dibuat sendiri berdasarkan contoh dinosaurus. Setiap kali memakai library editor teks seperti ini, use case nomor satu saya adalah ini, lalu berikutnya WYSIWYG

    • Akan sangat bagus kalau gaya mention @ disediakan bawaan dan API-nya saja yang diberikan
      Dukungan mobile kelas utama juga sama perlunya

  • Hal yang menyulitkan saat memakai ProseMirror lewat TipTap adalah sangat sering saya harus memanipulasi representasi JSON dokumen secara programatis untuk mengekstrak data. Untuk itu, saya butuh, atau setidaknya sangat menginginkan, representasi dengan tipe statis
    ProseMirror tidak punya mekanisme khusus untuk ini, jadi akhirnya saya melakukan salah satu dari dua hal

    1. Mendefinisikan skema dua kali. Sekali dengan ProseMirror, sekali dengan sesuatu seperti Zod, lalu menaruh banyak tes kesetaraan untuk memastikan kedua skema cocok
    2. Membuat lapisan definisi meta-skema yang bisa menghasilkan skema ProseMirror, tetapi mengikuti spesifikasi skema standar https://standardschema.dev/ . Pendekatan ini lebih praktis saat tidak memakai sesuatu seperti Tiptap
      Saya belum mencoba Wordgard, jadi tidak tahu apakah ini menangani masalah tersebut, tetapi saya mencatatnya sebagai titik sakit yang akan bagus jika diselesaikan

  • Artwork di situs webnya indah. Rasanya seperti cara menarik perhatian seperti ini sempat terlupakan

    • Juga “0% AI di dalamnya”. Artis ini benar-benar keren
    • Di tengah melimpahnya sampah AI di mana-mana, melihat ilustrasi indah yang digambar tangan benar-benar menyegarkan

  • Saya tidak suka WYSIWYG di web. Anda memformat posting forum panjang dan membosankan, lalu menutup tab dan semuanya hilang
    Saya lebih suka memakai editor teks lokal lalu menempelkannya ke form web dengan Ctrl+V. Kalau Markdown, itu bisa dilakukan

    • Saya pernah melihat beberapa platform menyelesaikan masalah ini dengan localStorage. Mereka otomatis menyimpan “draf” saat Anda mengetik, dan memulihkannya secara alami saat halaman dibuka lagi
      Saat pertama kali mengalami ini setelah tidak sengaja menutup tab, itu benar-benar kejutan yang menyenangkan
    • Coba lihat Linear. Saya tidak berafiliasi, tetapi baru kemarin saya tidak sengaja menutup dialog, lalu saat menekan buat issue lagi, tulisan panjang yang saya ketik masih ada
      Intinya, ini bukan masalah teknis, melainkan masalah produk
    • Tergantung kasusnya. Blog saya punya editor berbasis web, tetapi bentuknya hanya Markdown dengan pratinjau, jadi mirip dengan alur kerja yang Anda jelaskan
      Untuk aplikasi catatan, saya memutuskan memakai WYSIWYG karena tidak ada ruang untuk split view dan saya juga tidak ingin hanya melihat sumber Markdown
      Keluhan terbesar saya terhadap WYSIWYG adalah ia bisa mengganggu. Misalnya saat saya membuat blok verbatim lalu tidak bisa keluar dari blok itu. Saya sedang menatap Teams saat mengatakan ini. Mungkin itu juga sebabnya saya begitu menyukai LaTeX
    • Sudah ada backend yang bagus untuk ProseMirror dan editor lain. Tidak sulit untuk menyiapkannya
    • Setuju, tetapi banyak orang lebih suka WYSIWYG. Sederhananya, bisa saja menyediakan tampilan berdampingan seperti banyak editor HTML atau editor Markdown

  • Senang sekali bisa melihat seni sungguhan setelah sekian lama. Enak dilihat