HeadlinesBriefing favicon HeadlinesBriefing.com

शुरू से कस्टम टेक्स्ट एडिटर बनाना

Hacker News •
×

आधुनिक सॉफ्टवेयर गुणवत्ता में निराशा और 'They don't make 'em like Sublime Text anymore' की भावना से प्रेरित, लेखक ने कस्टम टेक्स्ट एडिटर बनाने की यात्रा शुरू की। यात्रा में तीन रेंडरिंग दृष्टिकोणों का अन्वेषण किया गया: <canvas>, contenteditable और <textarea>।

<canvas> का प्रारंभिक प्रयोग 60–120 FPS रेंडरिंग हासिल किया लेकिन मूल अंतरक्रियता की कमी थी। कर्सर स्थिति, टाइपिंग और लाइन हाइलाइटिंग जैसी बुनियादी सुविधाओं को लागू करने से आवश्यक तत्वों की कमी सामने आई: टेक्स्ट चयन, undo/redo, और ओवरफ़्लो स्क्रॉलिंग। एक हाइब्रिड समाधान जिसमें मूल स्क्रॉल गणना के लिए छिपा हुआ <div> उपयोग किया गया, ने स्क्रॉलिंग में सुधार किया, लेकिन <canvas> मूल रूप से अप्राप्य रहा।

contenteditable="plaintext-only" पर स्विच करने से मूल चयन, undo इतिहास और मुफ्त में एक्सेसिबिलिटी मिली। Selection API ने कस्टम कर्सर रेंडरिंग सक्षम किया, हालांकि बड़े फाइलों में प्रदर्शन अप्रत्याशित रूप से घट गया, विशेष रूप से Chromium में।

अंत में, <textarea> दृष्टिकोण लंबे टेक्स्ट के लिए बहुत अधिक प्रदर्शनकारी साबित हुआ। सिंटैक्स हाइलाइटिंग को Micro Lighter का उपयोग करके एक तीसरी परत जोड़कर जोड़ा गया, हालांकि नई Opaque Range API मूल हाइलाइट्स सक्षम कर सकती है। लेखक बताते हैं कि Tree-sitter और वर्चुअलाइज़्ड स्क्रॉलिंग रोबस्टनेस में सुधार ला सकते हैं, लेकिन स्वीकार करते हैं कि वर्तमान डेमो "90% टेक्स्ट एडिटर, 1% सुविधाओं" का प्रतिनिधित्व करता है।

मुख्य इकाइयाँ: कंपनियाँ: Apple, Chromium, Web Kit, Firefox