Tiptap Editor - ตัวแก้ไข WYSIWYG แบบ Headless

• เป็นเฟรมเวิร์กแบบ Headless ที่ไม่ให้ UI มาด้วย จึงเหมาะกับการปรับแต่งสไตล์
• ทำงานร่วมกับ React, Vue, Svelte, Alpine.js, Next.js, Nuxt.js และ Vanilla JS ได้อย่างยอดเยี่ยม
• พัฒนาบนพื้นฐานของ ProseMirror

[bbulbum]

ส่วนตัวแล้ว ในบรรดาที่เคยใช้มา ตัวนี้น่าจะใช้งานสะดวกที่สุดและออกแบบมาให้ขยายต่อได้ง่ายที่สุด
ปัญหาความไม่สะดวกที่รู้สึกตอนทำเอดิเตอร์ด้วย Slate หลายอย่างถูกแก้ไปได้เยอะมากจริง ๆ ที่นี่

[gomjellie]

พอจะแชร์ได้ไหมครับว่าตอนใช้ตัวแก้ไข Slate มีจุดไหนที่รู้สึกไม่สะดวกบ้าง?
ผมเคยใช้แค่ Tiptap แต่ได้ยินมาว่า Slate ก็น่าสนใจ เลยเริ่มสนใจขึ้นมาครับ!!

[firea32]

ส่วนของการสร้างคอมโพเนนต์ภายนอกสะดวกกว่ามาก โดยเฉพาะเวลาใช้ DOM ของตัวเองอย่างเช่นใน React ซึ่งจำเป็นต้องเรนเดอร์เป็นคอมโพเนนต์แทน HTML ตั้งแต่แรก Tiptap ถูกออกแบบโดยคำนึงถึงการทำโมดูลาร์ไว้แล้ว เลยแก้ไขและปรับแต่งได้ง่ายกว่าครับ

[bbulbum]

โดยรวมแล้วผมรู้สึกว่าเอกสารของ Slate เข้าใจยาก และมันดิบเกินไป เลยรู้สึกว่ามีหลายส่วนที่ต้องเรียนรู้เพิ่มเพื่อจะทำฟีเจอร์ที่ผมต้องการได้

เป็นความทรงจำเมื่อราว ๆ 2 ปีก่อน อาจต่างจากตอนนี้ไปบ้าง แต่ตอนนั้นผมเจอปัญหาแบบนี้ครับ

• ปัญหาการพิมพ์ภาษาเกาหลีบนมือถือ: หาต้นตอว่าเกิดจากตรงไหนยากมาก แต่น่าจะเกิดขึ้นระหว่างการคัสตอม เลยจำรายละเอียดที่แน่ชัดไม่ได้แล้ว
• ความยากในการควบคุมส่วนที่เกี่ยวกับการเลือกข้อความ: ตอนเพิ่มฟังก์ชันสำหรับจัดการคุณสมบัติให้กับตัวอักษรที่เลือกไว้ มันค่อนข้างซับซ้อนมาก (ตัวออบเจ็กต์เองก็ซับซ้อน)
• ความยากในการพัฒนาปลั๊กอิน: ผมเคยพยายามพัฒนาปลั๊กอินอย่างแผนที่ขึ้นมาเอง แต่ tiptap ออกแบบมาให้ต่อยอดและเพิ่มปลั๊กอินได้สะดวก เลยใช้งานสบายครับ

[gomjellie]

โอ้.... ขอบคุณครับ~!

[nemorize]

สามารถดูตัวอย่างเอดิเตอร์ที่ใช้งานได้ที่ https://tiptap.dev/docs/editor/installation/react#7-the-complete-setup

ส่วนตัวคิดว่าเอกสารประกอบทำมาได้ค่อนข้างดี แต่ก็มีองค์ประกอบที่ต้องสมัครแบบเสียเงินแทรกอยู่เป็นระยะ
อ่านเอกสารแล้วไม่ได้ถึงขั้นลำบากอะไร แต่ทั้งที่ไม่ได้จำเป็นก็ยังชวนให้เกิดกิเลสได้ เลยทั้งน่าทึ่งทั้งน่าหมั่นไส้.. ความรู้สึกมันซับซ้อนดีครับ

[savvykang]

ผมรู้สึกว่ายากที่จะเห็นด้วยกับคำกล่าวที่ว่ามีเอกสารประกอบค่อนข้างดี ในความรู้สึกของผม ช่องว่างระหว่างเอกสารเริ่มต้นใช้งานกับเอกสาร API กว้างเกินไป จึงทำให้เส้นโค้งการเรียนรู้สูง ในโปรเจกต์ React ที่พวกเรากำลังทำอยู่ เรามองว่าสไตล์การทำเอกสารของ Prosemirror และ react-prosemirror เป็นมิตรกับผู้ใช้มากกว่าและมีความสมบูรณ์มากกว่า จึงเลือก react-prosemirror และไม่ได้เลือก tiptap

ระหว่างที่พยายามทำความเข้าใจตัวอย่าง React เพื่อสร้าง sample code สำหรับ POC ตามความต้องการของเรา ก็พบปัญหาต่อไปนี้

1. เมื่อเพิ่ม StarterKit แล้ว องค์ประกอบที่ใช้งานได้มีอะไรบ้าง? ต้องไปหาเอกสารแยกตามชื่อแพ็กเกจเอง ทำให้หลุดจากโฟกัสระหว่างที่กำลังลองรันตัวอย่างของ tiptap
2. ListItem รวมอยู่ใน StarterKit แล้ว แต่ทำไมในตัวอย่างถึงยังใส่ ListItem เข้าไปในโปรเจกต์อีก? คำตอบคือเพื่อกำหนดค่าคอนฟิกของ extension
3. ทำไมต้องใช้ไวยากรณ์อย่าง editor().chain().focus()? ไม่มีการอธิบายหลักการออกแบบหรือคำอธิบายเกี่ยวกับ method chaining
4. Bubble menu และ Floating menu ไม่มีอยู่ในตัวอย่าง React ต้องไปเปิดดูเอกสารว่าเหตุใดฟังก์ชันที่เห็นในหน้า Try it live (https://templates.tiptap.dev/pjrwkQtNpq) จึงหายไปและทำงานไม่เหมือนกัน
5. ไม่มีฟีเจอร์ตาราง จึงไปค้นหาคำว่า table ในหน้า Extensions แล้วพบ Table, TableCell, TableHeader, TableRow ในผลการค้นหา ต้องเพิ่มทั้งหมดนี้เลยหรือไม่?
6. ผมพอจะเพิ่ม Table และ extension ต่าง ๆ เข้าไปได้แบบงม ๆ แล้ว หากจะตรวจสอบว่าฟังก์ชันทำงานถูกต้องหรือไม่ ก็ต้องเริ่มจากการแทรกตารางก่อน แล้วจะเขียนคำสั่งของ toolbar อย่างไร? ฟังก์ชันของคำสั่งเหล่านั้นควรถูกเพิ่มไว้ตรงไหนของ editor toolbar? ไม่มี hint เลย
7. มีข้อกำหนดว่าต้องไม่สามารถซ้อนตารางอีกตารางหนึ่งภายในตารางได้ แล้วจะเขียน logic สำหรับตรวจสอบว่าเคอร์เซอร์อยู่ภายในตารางหรือไม่อย่างไร? ไม่มี hint เลย
8. จำได้ว่า Color ถูกแพ็กเป็น extension เลยเกิดความสงสัยจึงเปิดดู source code พอเห็นว่าในไดเรกทอรี src มีไฟล์อยู่แค่สองไฟล์ก็ถอนหายใจ ไม่เข้าใจเจตนาว่าทำไมถึงแยกโมดูลย่อยเล็ก ๆ แบบนี้ออกมา ฟีเจอร์เล็กขนาดนี้ถ้าทำเป็นแพ็กเกจ มันจะเพิ่มภาระเรื่องการจัดการเวอร์ชัน dependency มากกว่าจะเพิ่มการนำกลับมาใช้ซ้ำหรือเปล่า?

[nemorize]

สำหรับข้อ 1-3, 4-6, 8 ผมแทบไม่รู้สึกถึงข้อสงสัยหรือความไม่สะดวกใด ๆ เลย เลยเห็นด้วยได้ยากครับ

1-2
StarterKit ก็สมชื่อว่าเป็น Kit สำหรับการเริ่มต้น ดังนั้นพอถึงจุดใช้งานจริงก็ดูเหมือนจะไม่ได้มีความหมายมากนัก
กรณีของ ListItem ก็เป็นอย่างที่คุณบอกครับ มันเป็นองค์ประกอบสำหรับตั้งค่า Color extension เช่นกัน ซึ่งผมคิดว่าเป็นเรื่องที่ถ้าไม่ใช้ StarterKit ก็จบ

3
chain().something().run() แม้จะเป็นแค่ syntax sugar แต่ผมคิดว่ามันก็เป็นฟีเจอร์ที่เหมาะกับคอนเซปต์ของไลบรารีแบบ battery-included
ผมใช้งานมันได้มีประโยชน์มากในสภาพแวดล้อมมือถือ ที่แอ็กชันอย่างทำตัวหนาแล้วโฟกัสต่อถือว่าแทบจำเป็น

4
ฟีเจอร์นี้ผมไม่ได้ใช้ เลยไม่ค่อยทราบครับ
(ผมคิดว่าในแง่ที่เราไม่จำเป็นต้องเห็นข้อมูลของฟีเจอร์ที่ตัวเองจะไม่ใช้ มันก็เป็นข้อดีที่มาแลกกับข้อเสียที่คุณพูดถึงในข้อ 1 ว่าทำให้หลุดจากภาวะจดจ่อ)

5-6
ทั้งมีระบุไว้อย่างดีในเอกสารของแต่ละ extension อยู่แล้ว และโดยทั่วไปก็ไม่ได้ต่างอะไรจากการทำ editor ตามปกติเลย
พูดตรง ๆ ว่าในข้อ 6 ส่วนที่คุณพูดถึงนั้น ผมเองก็ไม่แน่ใจเหมือนกันว่าผมเข้าใจที่คุณ savvykang พูดถูกหรือเปล่า... รู้สึกคิดอยู่ตลอดว่า "ทำไมอันนี้ถึงเป็นข้อสงสัยล่ะ...? แล้วต้องการ hint แบบไหนกันแน่...?" ฮ่า ๆ...

7
"เหมือนกับของ node อื่น ๆ" เราสามารถเช็กโฟกัสได้ด้วย editor.isActive('table')
แต่ผมคิดว่าเรื่องนี้คงไม่ใช่ปัญหาที่แก้ได้แค่รู้ว่าโฟกัสอยู่ที่ node ไหนเท่านั้นนะครับ ดูเหมือนจะเป็น requirement ที่ต้องคำนึงถึงหลายอย่าง เช่น การกรองตอนวางเนื้อหา การแทรกผ่าน developer tools ฯลฯ

8
ผมเห็นด้วยในส่วนที่ว่าการจัดการเวอร์ชันของ dependency เป็นภาระ แต่ในแง่ที่เราไม่จำเป็นต้องแบกโค้ดของฟีเจอร์ที่ไม่ต้องใช้ไว้ด้วย ผมก็มองว่ามันเป็นข้อดีเหมือนกัน
พอดีกับเคสของเราที่เป็นสถานการณ์ไม่ใช้ Color extension ที่คุณยกมานั่นแหละครับ ผมว่ามันมีทั้งข้อดีและข้อเสียในแบบของมัน

.
ผมคิดว่า react-prosemirror กับ tiptap ที่คุณพูดถึงนั้นเป็นคนละแนวคิดกันโดยสิ้นเชิง

ตัวหนึ่งคือเครื่องมือที่ทำให้ใช้ prosemirror แบบเป็น React มากขึ้น
vs
อีกตัวคือไม่สำคัญว่าจะอิง prosemirror หรือไม่ แต่ยังไงก็คือเครื่องมือที่รวบรวมทุกอย่างที่จำเป็นต่อการสร้าง editor ที่เหมาะกับบริการของเราไว้ให้ครบ

[nemorize]

เพราะเป็นตัวที่ฝั่ง Vue ได้รับความนิยมอยู่แล้ว เลยลังเลอยู่ว่าจะเขียนถึงดีไหม
แต่พอลองนำไปใช้กับ SvelteKit ในครั้งนี้แล้วรู้สึกพอใจมากพอสมควร เลยเอามาแชร์ครับ

ก่อนหน้านี้ในฝั่ง Svelte ยังไม่มี WYSIWYG editor ที่รู้สึกว่า "ใช่เลย!" จนน่าพอใจ เลยค่อนข้างกังวลอยู่
ถ้าใครกำลังเจอปัญหาแบบเดียวกันอยู่ ลองหยิบตัวนี้ไปใช้ดูสักครั้งก็น่าจะไม่เลวครับ