HeadlinesBriefing favicon HeadlinesBriefing.com

بناء محرر نص مخصص من الصفر

Hacker News •
×

ملهمًا بالإحباط من جودة البرمجيات الحديثة والشعور 'They don't make 'em like Sublime Text anymore'، شرع المؤلف في بناء محرر نص مخصص. تستكشف الرحلة ثلاث طرق عرض: <canvas>، contenteditable، و<textarea>.

حقق التجربة الأولية باستخدام <canvas> عرضًا بمعدل 60–120 إطارًا في الثانية لكنه lacked التفاعلية الأصلية. كشف تنفيذ الميزات الأساسية مثل وضع المؤشر، والكتابة، وتسليط الضوء على الأسطر عن غياب العناصر الأساسية: اختيار النص، والتراجع/الإعادة، وتمرير التدفق. حسّن الحل الهجين باستخدام <div> مخفي لحسابات التمرير الأصلية التمرير، لكن <canvas> ظل أساسيًا غير قابل للوصول.

التبديل إلى contenteditable="plaintext-only" قدم اختيارًا أصليًا، وسجل trاجع، وإمكانية الوصول مجانًا. مكّنت واجهة برمجة تطبيقات الاختيار من عرض المؤشر المخصص، على الرغم من أن الأداء تدهور بشكل غير متوقع مع الملفات الأكبر، خاصة في Chromium.

أخيرًا، أثبت نهج <textarea> أنه أكثر أداءً بشكل ملحوظ للنصوص الأطول. تم إضافة تسليط الضوء على الصياغة عبر طبقة ثالثة باستخدام Micro Lighter، على الرغم من أن واجهة برمجة تطبيقات النطاق غير الشفاف الجديدة قد تمكّن من التمييز الأصلي. يلاحظ المؤلف أن Tree-sitter والتمرير الافتراضي يمكن أن يحسّنا المتانة، لكنه يعترف بأن العرض التجريبي الحالي يمثل "90% من محرر نص مع 1% من الميزات".

الكيانات الرئيسية: الشركات: Apple، Chromium، Web Kit، Firefox

الأسئلة الشائعة: لماذا يكون <textarea> أكثر أداءً من contenteditable لملفات النص الكبيرة؟

<textarea> هو عنصر تحكم أصلي في النموذج محسّن بواسطة المتصفحات لإدخال النص العادي، ويتجنب التعقيد في التخطيط وعرض المحتوى لـ contenteditable، والذي يجب أن يتعامل مع تنسيق النص الغني، والتحقق من الإملاء، والهياكل HTML العشوائية حتى في وضع plaintext-only.