📄 MeDF — แก้ PDF ภาษาไทย ในเบราว์เซอร์ ไฟล์ไม่ออกจากเครื่อง

▶ ลองใช้เลย — ไม่ต้องติดตั้ง ไม่ต้องสมัคร

ลากไฟล์ PDF เข้ามา แล้วแก้ได้เลยในเบราว์เซอร์ เติมข้อความ แทรกรูป เซ็นชื่อ วางตราประทับ หรือไฮไลต์ แล้วกด Export กลับออกมาเป็น PDF ที่ข้อความเดิมยังคมชัด คัดลอกได้ และค้นหาได้ เพราะหน้าต้นฉบับถูก คัดลอก มาทั้งแผ่นแล้ววาดทับ ไม่ได้แปลงเป็นรูปภาพ

ไม่มีเซิร์ฟเวอร์ ไม่มีการอัปโหลด ไม่มีบัญชีผู้ใช้ — ไฟล์ของคุณอยู่ในแท็บเบราว์เซอร์เท่านั้น ติดตั้งเป็นแอปบนเครื่องได้ (PWA) แล้วใช้ต่อแบบออฟไลน์

จุดที่ต่างจากเครื่องมือต่างชาติคือ ภาษาไทยไม่พัง — ฝัง Sarabun ครบทุกน้ำหนัก วางสระและวรรณยุกต์ตามตำแหน่งจริง และตัดคำด้วย Intl.Segmenter('th') ของเบราว์เซอร์เอง

English TL;DR — Drop a PDF in the browser and edit it: text, images, signatures, shapes, highlights. Export puts your overlay on top of the original page objects — copyPages(), not a raster — so the document's own text stays sharp, selectable and searchable. There is no server: no upload, no account, no database. The file never leaves the tab, and the whole thing installs as a PWA and keeps working offline. The part that is hard, and the reason this exists, is Thai: the full Sarabun family is embedded per export, vowels and tone marks are placed by real metrics rather than guessed, and line breaking uses the browser's own Intl.Segmenter('th') because Thai has no spaces between words. 154 unit tests run with node --test and no test framework; 59 more drive a real Chromium against the built site.

---

📋 สารบัญ

• ทำไมถึงทำโปรเจกต์นี้
• ลองใน 60 วินาที
• วิธีรัน
• ฟีเจอร์
  • วางองค์ประกอบ 8 ชนิด
  • Export ที่ข้อความเดิมยังคมชัด
  • ภาษาไทยที่ไม่พัง
  • ลากและปรับขนาดแบบที่นิ้วกับเมาส์คาดหวัง
  • จัดการหน้าเอกสาร
  • เซ็นชื่อด้วยเมาส์หรือนิ้ว
  • Undo/Redo ที่นับเป็นท่า ไม่ใช่เป็นเฟรม
  • ใช้บนมือถือได้จริง
  • สองภาษา (ไทย / English)
• เทคโนโลยีที่ใช้
• สถาปัตยกรรม
• โครงสร้างโปรเจกต์
• ระบบพิกัด 3 ชั้น
• ระบบสองภาษา (i18n)
• การทดสอบ
• ตรวจ UX/UI อัตโนมัติ
• สิ่งที่จะทำต่อ
• ผู้เขียน
• License

---

🎯 ทำไมถึงทำโปรเจกต์นี้

ปัญหาจริงคือ "ไม่มีไฟล์ต้นฉบับแล้ว" ไม่ใช่ "อยากวางของทับ PDF"

คนทำงานเอกสารมี PDF อยู่ในมือ แต่ไฟล์ Word หรือ InDesign ต้นทางหายไปแล้ว — คนทำลาออก เอเจนซี่คิดเงินเพิ่ม หรือผ่านมาสองปีไม่มีใครหาเจอ พอต้องแก้เลขสัญญาบรรทัดเดียว ทางเลือกที่เหลือคือพิมพ์ใหม่ทั้งหน้า หรือหาโปรแกรมเถื่อนมาลง

เครื่องมือที่มีอยู่ตอบไม่ตรงสามข้อ

1. เว็บแก้ PDF ส่วนใหญ่ต้องอัปโหลดไฟล์ขึ้นเซิร์ฟเวอร์ต่างประเทศ ซึ่งองค์กรไทยที่มีนโยบาย ข้อมูลใช้ไม่ได้เลย สัญญา ใบเสนอราคา และเอกสาร HR ไม่ควรออกจากเครื่อง
2. Acrobat/Foxit เถื่อน ราคา 0 บาท คือคู่แข่งอันดับหนึ่งจริง ๆ แผนที่ไม่มีคำตอบให้ข้อนี้ คือแผนที่ใช้ไม่ได้ — คำตอบของ MeDF คือ ของเถื่อนก็แก้ภาษาไทยพังเหมือนกัน และ บางองค์กรใช้ของเถื่อนไม่ได้ เพราะโดนตรวจลิขสิทธิ์
3. เครื่องมือต่างชาติทำภาษาไทยไม่ดี สระลอย วรรณยุกต์เพี้ยน ฟอนต์เปลี่ยนเอง และตัดบรรทัดผิดเพราะภาษาไทยไม่มีช่องว่างระหว่างคำ

โฟกัสของโปรเจกต์จึงอยู่ที่ ความถูกต้องของภาษาไทย + ไฟล์ไม่ออกจากเครื่อง มากกว่าจำนวนฟีเจอร์ ทิศทางระยะยาวและเกณฑ์ที่จะใช้ตัดสินใจหยุด อยู่ใน docs/PRODUCT_DIRECTION.md

---

⏱️ ลองใน 60 วินาที

1. เปิด หน้าลองใช้ — ไม่ต้องสมัคร ไม่ต้องติดตั้ง
2. ลากไฟล์ PDF เข้ามา (หรือกด "ใช้เอกสารตัวอย่าง" ถ้ายังไม่มีไฟล์ในมือ) → ระบบสร้างสัญญาจ้างภาษาไทยให้ในเบราว์เซอร์
3. กด T แล้วคลิกบนหน้า → พิมพ์ข้อความไทยลงไป ลากไปวางตรงไหนก็ได้
4. กด Export PDF → ได้ไฟล์กลับมา ลองเปิดแล้ว ลากคลุมข้อความเดิม ดู จะเห็นว่ายังคัดลอกได้ ไม่ได้กลายเป็นรูป

เปิด DevTools → Network ไว้ด้วยก็ได้ จะเห็นว่าไม่มี request ไหนส่งไฟล์ออกไปเลย (มีเทสต์คุมข้อนี้อยู่จริง — ดูหัวข้อการทดสอบ)

---

🚀 วิธีรัน

ประมาณ 2 นาที · ไม่ต้องมีฐานข้อมูล ไม่ต้องมี backend ไม่ต้องตั้งค่า environment อะไรเลย

ขั้นที่ 0 — ดาวน์โหลดโค้ด

git clone https://github.com/SuruchBoss/MeDF.git
cd MeDF

ต้องมี: Node.js 20.9 ขึ้นไป (แนะนำ 22 — เทสต์ระดับ unit ใช้ TypeScript ของ Node โดยตรง)

ขั้นที่ 1 — ติดตั้งและรัน

npm install
npm run dev        # เปิด http://localhost:4173

เท่านี้ครบ ไม่มีไฟล์ .env ที่ต้องเตรียม เพราะไม่มีอะไรต้องเชื่อมต่อ

ขั้นที่ 2 — build เป็นเว็บสถิต

npm run build      # ได้ไฟล์ทั้งเว็บที่ apps/web/out/
npm run preview    # เสิร์ฟโฟลเดอร์นั้นที่ http://localhost:4173

out/ เป็นไฟล์ล้วน เอาไปวางบน GitHub Pages, Netlify, S3, nginx หรือแฟลชไดรฟ์ก็ได้

ขั้นที่ 3 — deploy ขึ้น GitHub Pages

มี workflow ให้แล้วที่ .github/workflows/pages.yml สิ่งที่ต้องทำครั้งเดียวคือไปที่ Settings → Pages → Source → GitHub Actions

ถ้า deploy ใต้เส้นทางย่อย (https://user.github.io/MeDF/) ต้องบอก base path ด้วย — workflow อ่านจาก Pages API ให้อัตโนมัติ ส่วนตอน build เองใช้

NEXT_PUBLIC_BASE_PATH=/MeDF npm run build

🔧 แก้ปัญหาที่พบบ่อย

อาการ	สาเหตุและทางแก้
หน้าเปล่า ๆ หลัง deploy	ตั้ง NEXT_PUBLIC_BASE_PATH ไม่ตรงกับเส้นทางที่เสิร์ฟจริง
PDF ไม่ขึ้น หมุนค้าง	pdf.worker.min.mjs ไม่ได้ถูกคัดลอกไป public/ — รัน npm run build ใหม่ (มี prebuild คัดลอกให้)
ฟอนต์ไทยเป็นกล่องสี่เหลี่ยมใน PDF ที่ export	ไฟล์ .ttf ใน apps/web/public/fonts/ หาย — ต้องมีครบ 4 น้ำหนัก
npm test ค้างที่ browser test	ยังไม่ได้ npx playwright install chromium

---

This is the beginning of the README. Read the rest at the original. Read the full README ↗