Rilis Wordgard 0.1

• Wordgard 0.1 adalah library editor rich text JavaScript baru yang dibuat dengan mencerminkan 9 tahun pengalaman setelah stabilnya ProseMirror serta desain CodeMirror 6
• Alih-alih mengubah ProseMirror yang ada menjadi 2.0 atau menambahkan fitur ke 1.x, proyek ini dirancang ulang dengan API baru tanpa beban kompatibilitas dan nama terpisah
• Desain intinya menggunakan model berbasis bagian perubahan alih-alih steps, serta menggabungkan tipe node·mark yang independen dengan sistem ekstensi facet ala CodeMirror
• Ketergantungan pada perilaku seleksi browser dikurangi dengan menangani sendiri seleksi pointer·keyboard, tetapi seleksi sentuh tetap memakai implementasi browser karena masalah menu konteks native
• Dapat dipasang melalui npm sebagai wordgard, dan dokumentasi serta manual referensinya juga sudah dipublikasikan, tetapi untuk sementara akan tetap berada di versi 0.x sambil melewati umpan balik dan perbaikan bug

---

Karakter dan status rilis Wordgard

• Wordgard adalah proyek yang mengulang kembali sistem editor rich text bergaya ProseMirror
• Banyak dipengaruhi oleh hal-hal yang dipelajari selama 9 tahun setelah ProseMirror stabil dan oleh redesain CodeMirror versi 6
• Ini adalah library JavaScript yang menampilkan antarmuka editor melalui DOM browser, dan berlisensi MIT
• Kodenya dipublikasikan di server Forgejo
• Dapat dipasang dari registry npm sebagai wordgard, dan cara pemakaiannya bisa dilihat di situs web

Mengapa membuat sistem baru tanpa mengganti ProseMirror

• ProseMirror akan tetap dipelihara, tetapi sebagian desainnya masih menyisakan hal-hal yang seharusnya dibuat berbeda menurut standar saat ini
• Jika ProseMirror 2.0 yang tidak kompatibel dirilis, bisa muncul ambiguitas tentang apa yang dimaksud orang saat menyebut “ProseMirror”
• Jika ide-ide baru ditempelkan ke ProseMirror 1.x dengan cara yang tetap kompatibel ke belakang, strukturnya bisa menjadi kompromistis
• Wordgard mengambil banyak ide dari ProseMirror, tetapi antarmuka pemrogramannya dirancang ulang dari awal tanpa mempertimbangkan kompatibilitas

Representasi perubahan: model berbasis section, bukan steps

• steps di ProseMirror adalah cara membagi perubahan menjadi beberapa operasi atomik, dengan tiap step diterapkan ke dokumen yang dihasilkan oleh step sebelumnya
• Pendekatan ini memang bekerja, tetapi koreksi posisi dan pelacakan rentang perubahan di banyak step menjadi rumit dan terasa canggung untuk ditangani
• Wordgard memakai model yang lebih sederhana berdasarkan representasi perubahan CodeMirror dan format “delta” dari ShareJS
  • Saat panjang dokumen 10 dan L disisipkan di posisi 4, itu direpresentasikan sebagai [keep 4] [replace 0 with "L"] [keep 6]
  • Jika dua karakter pertama dihapus, itu menjadi [replace 2 with ""] [keep 8]
• Untuk menangani rich text, ditambahkan section perubahan sehingga mark seperti penekanan, gaya tautan, atau alt text gambar bisa ditambah atau dihapus sambil mempertahankan strukturnya
  • Jika kata dari 3 sampai 6 dibuat tebal, itu direpresentasikan sebagai [keep 3] [update 3 +bold] [keep 4]
• Wordgard memakai indeks berbasis hitung token seperti ProseMirror untuk menangani posisi dokumen sebagai urutan datar token pembuka·penutup node dan token leaf
• Satu transaksi selalu memiliki satu perubahan, sehingga komposisi perubahan serta pemeriksaan·inferensinya menjadi lebih mudah
• Mendukung operational transform terbatas untuk menggabungkan beberapa perubahan yang dinyatakan berdasarkan dokumen awal yang sama
  • Ini dapat mengekspresikan transaksi dengan banyak perubahan secara lebih nyaman
  • Juga bisa dipakai untuk editing kolaboratif dan implementasi undo history yang hanya membatalkan sebagian perubahan

Cara menjaga struktur dokumen tetap valid

• Dokumen Wordgard bukan sekadar urutan token sederhana, tetapi harus berupa struktur pohon seimbang
• Misalnya, menghapus token penutup node dapat merusak keseimbangan token dan menghasilkan perubahan yang tidak bisa diterapkan
• Kode yang membuat kumpulan perubahan harus memeriksa dan menyesuaikan perubahan agar hasil akhirnya menjadi struktur dokumen yang valid
• Dalam operational transform, perubahan hasil transformasi juga tidak boleh membuat dokumen menjadi tidak valid
• Model perubahan Wordgard menurunkan fix-up change yang menyesuaikan hasil gabungan selama transformasi
  • Input digunakan dengan hati-hati agar koreksi yang sama dibuat untuk A-over-B dan B-over-A
  • Tanpa koreksi, dua urutan itu dapat menghasilkan dokumen yang sama, tetapi bisa jadi tidak valid
  • Dengan mengomposisikan koreksi yang sama, kedua urutan akan bertemu pada dokumen valid yang sama
• Sebagian besar perubahan tidak memerlukan koreksi, tetapi bila diperlukan pun sistem ini dirancang agar konvergensi tetap terjaga

Komposisi skema dan generalisasi mark

• Skema dokumen ProseMirror menentukan hubungan antar node secara langsung sehingga biasanya harus diatur manual
• Tipe node dan mark di ProseMirror hanya ada di dalam skema tertentu, sehingga tidak ada identitas node yang bisa dibagikan antar skema
• Di Wordgard, tipe node·mark adalah objek independen dan dapat dimasukkan ke dalam beberapa skema dokumen
• Objek-objek ini berfungsi seperti handle yang mendukung typing dan autocomplete, sehingga lebih mudah menyusun skema dari elemen yang diperlukan
• Skema dapat meng-override hubungan elemen yang sudah ada
  • Definisi node atau mark menentukan konten atau tipe target bawaan
  • Jika elemen yang sama ingin dipakai dengan cara berbeda, skema dapat mengubah hubungan tersebut
• Node bawaan dapat disediakan dengan fitur yang lebih kaya, sehingga ekstensi dukungan editing atau integrasi sistem seperti tombol menu lebih mudah ditempelkan langsung ke node tersebut
• Fitur yang dulu terikat ke properti node tertentu, seperti perataan teks atau alt text, bisa ditambahkan secara lebih modular melalui generalisasi mark
• Tipe node sendiri tidak perlu mengetahui mark mana yang menargetkannya

Mengapa melonggarkan pembatasan konten

• Fitur khas ProseMirror berupa penentuan konten yang diizinkan berbasis regex tidak didukung di Wordgard
• Deskripsi konten node di Wordgard hanya membatasi tipe anak apa yang didukung, bukan urutannya
• Pembatasan berbasis regex membuat penulisan kode manipulasi dokumen umum menjadi sulit
  • Kode yang tidak ditulis khusus untuk skema tertentu hampir tidak bisa mengasumsikan transformasi mana yang valid
  • Setiap operasi harus dicocokkan dengan pembatasan konten, dan proses ini halus sekaligus membebani
• Pembatasan yang terlalu mengunci bentuk dokumen dapat menghalangi tahap edit perantara saat pengguna sedang menuju bentuk yang diinginkan, sehingga merusak pengalaman pengguna
• Wordgard mendorong pendekatan bentuk dokumen yang lebih longgar
• Saat diperlukan invariant di luar aturan skema, Wordgard menyediakan abstraksi correction
  • Bentuk dokumen yang tidak diinginkan dapat diperbaiki secara terprogram
  • Ini memungkinkan koreksi yang lebih cerdas dan mempertimbangkan konteks dibanding pemaksaan ekspresi konten
  • Bahkan bisa dipakai untuk kondisi seperti menjamin tabel persegi panjang, yang tidak bisa dinyatakan dengan pembatasan ProseMirror sekalipun

Sistem ekstensi: facet ala CodeMirror 6

• Sistem ekstensi ProseMirror membuat plugin menangani banyak hal, dan urutan array memengaruhi prioritas
• Bisa terjadi satu plugin perlu prioritas rendah pada satu hook tetapi prioritas tinggi pada hook lain
• Sistem berbasis facets dari CodeMirror membuat ekstensi lebih terperinci dan memungkinkan tiap nilai ekstensi menetapkan kategori prioritasnya sendiri
• Facet adalah titik ekstensi bertipe yang dapat didefinisikan bukan hanya oleh library, tetapi juga oleh kode apa pun
• Di bagian ini, Wordgard hampir mengambil sistem CodeMirror apa adanya, termasuk mekanisme pembaruan state dan rekonfigurasinya
• Konfigurasi bukan berupa array plugin, melainkan pohon ekstensi
  • Definisi event handler
  • Pengaturan properti editor
  • Penambahan state editor baru
• Implementasi fitur biasanya terdiri dari bundel ekstensi yang bekerja bersama
• Elemen-elemen primitifnya dirancang agar sebagian besar bundel ekstensi dapat digabungkan dengan baik hanya dengan memasukkannya ke konfigurasi

Mengurangi ketergantungan browser dan menangani seleksi

• Banyak masalah ProseMirror berkaitan dengan ketergantungannya pada perilaku seleksi native browser
• Pendekatan lama membiarkan browser menangani perpindahan kursor pada teks dua arah atau konten bergaya tidak biasa, lalu hasilnya dipetakan ke model seleksi internal
• Dalam praktiknya, browser bisa gagal memindahkan kursor melewati sebagian konten, tidak menggambar kursor, menggambarnya di posisi yang salah, atau menunjukkan perilaku aneh saat drag seleksi dengan mouse
• Wordgard menangani sendiri hampir semua seleksi berbasis pointer dan keyboard
  • Mengimplementasikan penanganan teks dua arah
  • Membuat model tata letak konten
  • Menggambar kursor sendiri
• Seleksi sentuh menjadi pengecualian dan tetap memakai implementasi native
  • Jika diimplementasikan ulang, menu konteks native tampaknya akan rusak
  • Pada ponsel dan tablet, sulit menggantikan menu konteks tersebut
  • Seleksi sentuh juga cenderung menunjukkan perilaku aneh yang lebih sedikit dibanding seleksi keyboard

Penanganan event input dan penghapusan pemantauan perubahan DOM

• Selama 9 tahun terakhir, dukungan browser untuk event editing, terutama dukungan beforeinput, menjadi lebih konsisten
• Meski masih perlu pengujian di lingkungan penggunaan nyata, Wordgard tampaknya bisa berjalan tanpa trik pemantauan perubahan DOM dan parsing konten yang diandalkan ProseMirror
• Wordgard menangani event beforeinput untuk semua hal kecuali input teks komposisi
• Pendekatan ini menghindari sekumpulan masalah yang membutuhkan banyak solusi sementara yang kotor

Stabilitas, rencana versi, lisensi

• Wordgard berada sedikit lebih maju dibanding keadaan proyek-proyek sebelumnya saat pertama kali diumumkan
• Antarmuka intinya sudah mendukung hampir semua fungsi yang diinginkan, dan sejumlah ekstensi juga telah ditulis untuk memeriksa apakah desainnya praktis
• Dokumentasinya masih agak kasar, tetapi manual referensi sudah lengkap dan dapat digunakan
• Sebelum dipakai orang dalam pekerjaan nyata, banyak masalah mungkin belum akan terlihat
• Masih ada fitur yang ingin ditambahkan ke depan, dan setelah rilis diharapkan orang lain juga akan ikut meninjaunya
• Sebagian antarmuka publik mungkin perlu dipikirkan ulang seiring munculnya lebih banyak wawasan
• Versi pertamanya adalah 0.1, dan untuk sementara akan tetap berada di versi 0.x guna mengumpulkan umpan balik, memperbaiki bug, dan merapikan bagian-bagian kasar
  • Periode ini diperkirakan setidaknya sekitar 1 tahun
• Seperti proyek-proyek sebelumnya, lisensinya adalah MIT
• Lisensi yang lebih ketat sempat dipertimbangkan, tetapi karena lebih tertarik pada penggunaan yang luas, dipilihlah lisensi permisif

Model AI, pembuatan kode, kebijakan pull request

• Model bahasa tidak digunakan untuk membuat perangkat lunak ini
• Karena kode JavaScript-nya ada di web dan dokumentasinya harus dipublikasikan, dianggap tidak ada cara tepercaya untuk mencegah kode dan ide yang terbuka masuk ke model bahasa besar
• Di Wordgard, dilakukan eksperimen untuk tidak menerima pull request, berbeda dari praktik open source standar
• Proses meninjau perubahan besar dan menyesuaikannya agar sesuai harapan sering kali menjadi pekerjaan yang lebih besar daripada mengimplementasikannya langsung
• Karena biaya pembuatan kode turun drastis, struktur di mana orang lain melempar kode lalu maintainer harus meninjau·memeliharanya atau menjelaskan alasan penolakan menjadi semakin kurang menarik

[GN⁺]

Komentar di Lobste.rs

• Sebagai penulis, saya akan sesekali memantau thread ini jika ada pertanyaan atau masukan

  • Kelihatannya cukup mengesankan. Saya tidak melihatnya di FAQ, jadi saya penasaran bagaimana ini bisa digunakan atau dikonfigurasi untuk penyuntingan Markdown
    Mungkin kita bisa membuat HTML dengan renderer Markdown lalu mengeditnya di Wordgard, tetapi setelah itu bagaimana cara mengekstrak Markdown dari isi editor?
  • Saya penasaran jalur migrasi seperti apa yang akan ditempuh orang-orang yang memakai ProseMirror
    Apakah pada akhirnya mereka akan pindah ke Wordgard? Jika ada orang yang ingin memakai ProseMirror untuk proyek baru, kapan sebaiknya mereka memilih Wordgard?

• Contains 0% AI

  Not having PRs is an effective way to nip the problem of people submitting LLM-generated slop code in the bud.

  Dan ada juga karya seni keren yang dibuat oleh real, human artist
  Bagus

• Selamat besar untuk proyek dan presentasi Marijn. Kelihatannya keren, dan saya juga suka karya seni Kamila Stankiewicz

• Homepage utama proyeknya adalah https://wordgard.net/

• As a deviation from standard open-source practice, I'm doing an experiment where I don't take pull requests for Wordgard.

  Bagian ini, terutama seluruh paragraf terakhirnya, benar-benar menarik
  Saya juga penasaran apakah pendekatan seperti ini akan menjadi lebih umum untuk sementara waktu, sampai kita memiliki hubungan yang lebih baik dengan pembuatan kode oleh AI, atau sampai kita memilih untuk tidak berhubungan sama sekali
  Sebagai catatan, kodenya berlisensi MIT