OverType – เอดิเตอร์ Markdown แบบ WYSIWYG ที่สร้างบนพื้นที่ข้อความอย่างเรียบง่าย

• OverType เป็นโอเพนซอร์ส เอดิเตอร์ WYSIWYG ที่ออกแบบมาเพื่อให้สามารถ แก้ไขเอกสาร Markdown แบบเห็นผลลัพธ์ได้ทันที
• จุดเด่นที่สุดของเอดิเตอร์นี้คือถูกพัฒนาด้วย HTML textarea เพียงอย่างเดียว จึงให้ โครงสร้างที่เบาและโหลดได้รวดเร็ว
• ไม่ต้องติดตั้งหรือใช้ไลบรารีภายนอกเพิ่มเติม จึงสามารถนำไปใช้ได้ทันทีแม้ในสภาพแวดล้อมที่เรียบง่าย
• เมื่อเทียบกับเอดิเตอร์ Markdown อื่น ๆ แล้ว มี ข้อจำกัดด้านสภาพแวดล้อมในการใช้งานน้อยกว่า และโค้ดก็ อ่านง่ายและดูแลรักษาง่าย
• มีพรีวิวแบบเรียลไทม์และ UI ที่ใช้งานง่ายโดยยึดผู้ใช้เป็นศูนย์กลาง ทำให้แม้แต่ นักพัฒนามือใหม่ ก็สามารถเขียนและแก้ไขเอกสาร Markdown ได้อย่างง่ายดาย

ฟีเจอร์และจุดเด่นหลัก

• น้ำหนักเบา: ไม่มีโค้ดหรือ dependency ที่ไม่จำเป็น จึง รันได้ทันทีบนเบราว์เซอร์
• โครงสร้างเรียบง่าย: ออกแบบบนพื้นฐานของ textarea เดียว ทำให้ ดีบักและขยายต่อได้ง่าย
• รองรับ WYSIWYG: เมื่อผู้ใช้ป้อนไวยากรณ์ Markdown ก็จะมี พรีวิวแบบภาพให้ทันที
• เข้าถึงง่าย: ไม่ต้องผ่านขั้นตอนติดตั้งที่ซับซ้อน ใครก็เริ่มใช้งานได้
• เป็นมิตรต่อผู้ใช้: โครงสร้างโปรเจกต์เข้าใจง่าย จึงเรียนรู้เร็วและนำไปใช้ได้ง่าย

ความได้เปรียบเมื่อเทียบกับทางเลือกอื่น

• เมื่อเทียบกับเอดิเตอร์ WYSIWYG ทั่วไปแล้ว มีขนาดเล็กมาก
• เมื่อเทียบกับเอดิเตอร์ที่สร้างบนเฟรมเวิร์กขนาดใหญ่ ดูแลรักษาและปรับแต่งได้ง่ายกว่า
• ด้วย ความเร็วในการโหลดสูงและการใช้หน่วยความจำน้อย จึงใช้งานได้ลื่นไหลแม้ในสภาพแวดล้อมสเปกต่ำ

แนวทางการใช้งาน

• ใช้เป็น เอดิเตอร์ Markdown สำหรับจดบันทึกอย่างง่าย
• ฝังใช้งานได้สะดวกในบริการที่ต้องการ ตัวแก้ไขเอกสารแบบฝังในระบบ
• เหมาะสำหรับ การศึกษา และ สภาพแวดล้อมสำหรับพัฒนาโปรโตไทป์

• ลองเดโม - https://overtype.dev/demo

[m00nlygreat]

ชอบมาก!

[GN⁺]

ความคิดเห็นจาก Hacker News

• เจ๋งมาก ถ้าเป็นแบบ drop-in แล้วทุกอย่างใช้งานได้ทันทีคงมีประโยชน์มาก ถ้าจะติสักนิด การบอกว่าเป็นการ "เรนเดอร์" Markdown จริง ๆ แล้วใกล้เคียงกับ "syntax highlighting" มากกว่า อีกแนวทางที่น่าสนใจคือใช้ CSS Custom Highlight API ซึ่งจะทำให้ไม่ต้องมี preview div และน่าจะเปิดให้ใช้ฟอนต์ที่ไม่ใช่ monospace หรือขนาดตัวอักษรที่ต่างกันกับส่วนอย่างหัวข้อได้ด้วย รายละเอียดเพิ่มเติมเกี่ยวกับ CSS Custom Highlight API
  • สงสัยว่าสามารถทำ highlight กับเนื้อหาใน textarea ได้ด้วยหรือไม่
  • ถ้าดูเดโมที่ขยายด้วย animation จะเห็นได้ว่ามีการฟอร์แมตแบบที่ต่างจากข้อความธรรมดาชัดเจน เช่น ตัวหนาหรือสัญลักษณ์ที่เปลี่ยนเป็นจุด
• เห็นด้วยสุด ๆ กับประเด็นที่ว่า "มีความวุ่นวายเพราะ CSS ที่สืบทอดมาจาก parent page ทำให้ margin, padding, line-height เพี้ยน" กรณีแบบนี้ใช้ Web Components กับ shadow DOM เป็นทางแก้ที่เหมาะมาก ถ้าคอมโพเนนต์นี้ห่อ textarea แทน div.editor ก็จะค่อย ๆ อัปเกรดประสบการณ์ textarea เดิมที่มีอยู่ได้
• ดูดีมาก ขอแชร์ลิงก์ที่เคยรวบรวมไว้เกี่ยวกับแนวทางแบบนี้ในอดีต
  • ตัวอย่าง editor จาก CSS Tricks
  • ไลบรารี code-input
  • ดูเหมือนว่า grugnotes.com ก็จัดการ Markdown ด้วยวิธีคล้าย ๆ กัน
• ระหว่างสำรวจเว็บไซต์ overtype.dev ไปก็เจอ rabbit hole ที่เจ๋งมาก ขอแนะนำแอป HTML เดี่ยวชื่อ hyperclay.com สนุกมากจริง ๆ
  • คิดว่าแนวทางนี้ใกล้เคียงมากกับทิศทางที่ WWW ตั้งใจไว้ตอนแรก เว็บเบราว์เซอร์ตัวแรกก็มีความสามารถด้านการแก้ไขจริง ๆ แอปที่ Tim Berners-Lee สร้างบน NeXT เป็นการห่อ rich text class ที่มีอยู่ในระบบปฏิบัติการ (TextView ซึ่งต่อมากลายเป็น NSTextView และยังใช้ในแอป TextEdit บน Mac จนถึงทุกวันนี้) แต่การแก้ไขหายไปด้วยสองเหตุผล อย่างแรกคือยังไม่มี HTTP PUT จึงบันทึก HTML ที่แก้แล้วได้แค่ในเครื่อง อย่างที่สองคือ Mosaic สร้างเบราว์เซอร์แบบข้ามแพลตฟอร์มขึ้นมา แต่การทำฟีเจอร์แก้ไขด้วยนั้นซับซ้อนเกินไปจึงตัดออกไป สุดท้ายผู้ใช้ส่วนใหญ่ก็ชินกับสภาพแวดล้อมที่ไม่มีความสามารถในการแก้ไข
  • ปกติไม่ค่อยอุทานแบบนี้ แต่ครั้งนี้ช็อกจริง ๆ ไม่เข้าใจว่าทำไมแนวทางนี้ถึงยังไม่ดังระเบิดแบบทุกวันนี้ และในยุคที่ vibe coding กำลังมาแรง วิธีแบบนี้น่าจะมีประสิทธิภาพและดีกว่ามาก
  • ทำให้นึกถึงการทดลองเจ๋ง ๆ ในวงการพัฒนาเว็บช่วงกลางทศวรรษ 2000 เชื่อว่าโปรเจกต์แบบนี้ช่วยยกระดับมาตรฐานและความคาดหวังของผู้ใช้ขึ้นไปอีกขั้น
• ดูสมบูรณ์มาก สงสัยว่าสามารถทำฟีเจอร์แบบใน IDE อย่าง Cursor ที่แสดงข้อความ autocomplete สีเงินอยู่หน้าตำแหน่งเคอร์เซอร์ปัจจุบัน แล้วกด TAB เพื่อเขียนลงใน .value ได้ไหม
• ดีมากจริง ๆ ถ้าเรียกว่า "transparent syntax highlighter" น่าจะเหมาะกว่า ใน เดโม adventure ที่ผมเคยทำ ก็ใช้ <input text> แบบซ่อนคล้ายกัน เพื่อคงฟังก์ชันพื้นฐานอย่างการวางและการเลือกข้อความไว้ พร้อมกับรวมการตกแต่งสไตล์ให้แนบเนียนกว่าเดิม กล่อง input พื้นฐานนั้นง่ายกว่า contentEditable มากเลยดูน่าสนใจกว่า ถ้าทำให้มันเรนเดอร์ Markdown จริง ๆ โดยซ่อน textarea ไว้ทั้งหมดแต่ยังรักษา focus ไว้ และจำลอง selection event ของ markup ที่เรนเดอร์แล้วกลับไปที่ textarea ได้ ก็น่าจะได้ทั้งความเสถียรของ textbox และความสวยงามของ editor
  • เกร็ดที่น่าสนใจคือ syntax highlighting ในช่องค้นหาของ GitHub ก็ถูกเพิ่มเข้ามาด้วยวิธีแบบนี้ เมื่อก่อน Shortwave (อีเมลไคลเอนต์) ก็ทำด้วยวิธีเดียวกันนี้เหมือนกัน คือวาง view ไว้บน transparent input และบล็อกโพสต์นี้ช่วยยกระดับ UX ของการค้นหาไปได้อีกขั้น
    Delightful Search: More Than Meets the Eye (บล็อก Superhuman)
• เจ๋งมาก ชอบความเรียบง่ายแบบนี้จริง ๆ ไม่มีข้อเสียเมื่อเทียบกับ textarea เดิม แต่ให้ข้อดีเพิ่มขึ้นอีกมาก คิดว่าเป็นการยกระดับ textarea ไปอีกขั้น เคยทำโปรเจกต์คล้ายกันชื่อ contextarea.com มาก่อน และคิดว่าน่าจะดีถ้าเอา overtype มารวมกัน
  • คิดว่าการใช้ได้แค่ฟอนต์ monospace เป็นข้อเสีย ถ้าไม่ใช่นักพัฒนาหรือโปรแกรมเมอร์ ประโยชน์ใช้สอยในโปรดักต์อาจลดลง แน่นอนว่าตัวโปรเจกต์ยังเจ๋งอยู่ เพียงแค่หมายความว่ามีข้อจำกัดที่ชัดเจน
• สงสัยว่าเคยคิดจะห่อสิ่งนี้เป็น Web Component เพื่อให้ใช้งานได้ทันทีโดยไม่ต้องมี div+constructor call หรือเปล่า
• ถ้าเป็น WYSIWYG editor ก็น่าจะต้องมี image preview แต่ที่เห็นเหมือนมีแค่ syntax highlighting ใน text area ตัวโปรเจกต์ดีนะ แต่ข้อความโปรโมตค่อนข้างชวนให้เข้าใจผิด
  • นี่เป็นตัวอย่างของการใช้คำศัพท์ผิด WYSIWYG editor ที่แท้จริงจะไม่แสดง formatting markup เลย
  • ถ้าพิมพ์ข้อความ เลือกส่วนที่จะเน้น แล้วกดปุ่ม "B" ให้กลายเป็นตัวหนา แบบนี้ก็นับว่าเป็น WYSIWYG ได้ แม้จะไม่มี image preview ก็ตาม
  • ผมหาฟีเจอร์รูปภาพไม่เจอ เลยสงสัยว่าผมพลาดอะไรไปหรือเปล่า
• ขอแชร์ เดโม spell ที่ทำงานได้ใน 912 ไบต์
  • โห อันนี้ไม่ธรรมดาเลย ประทับใจมาก ถึงจะไม่ตรงกับ Markdown เป๊ะ ๆ แต่ดูเหมือนเป็น WYSIWYG ที่ทำได้มากกว่า overtype มาก (แน่นอนว่า overtype เองก็เป็นโปรเจกต์ที่ดีมาก) น่าตกใจจริง ๆ ว่า 912 ไบต์จะทำได้ขนาดนี้ รู้สึกว่าน่าจะทำบล็อกโพสต์ที่เรียบง่ายมาก ๆ ให้มีขนาดต่ำกว่า 14kb พร้อมรองรับคอมเมนต์ได้ด้วย และยังโหลดเร็วมากอีกต่างหาก ประทับใจจนแทบหาคำพูดไม่ออก