डेवलपर के लिए, अपने वेब ऐप्लिकेशन में बदलाव करने की बेहतर सुविधाएं शामिल करना हमेशा आसान नहीं रहा है. वेब प्लैटफ़ॉर्म पर, <input> और <textarea> जैसे एलिमेंट का इस्तेमाल करके या एलिमेंट पर contenteditable एट्रिब्यूट लागू करके, सादे टेक्स्ट और एचटीएमएल दस्तावेज़, दोनों में बदलाव किया जा सकता है. हालांकि, डेवलपर को अपने ऐप्लिकेशन में जो करना है उसके लिए, इन एलिमेंट टाइप की बुनियादी सुविधाएं अक्सर काफ़ी नहीं होती हैं.
डेवलपर अक्सर अपने कस्टम एडिटर व्यू को लागू करते हैं, जो उनके उपयोगकर्ताओं की ज़रूरतों के हिसाब से काम करता है. एडिटर व्यू को किसी जटिल डीओएम या <canvas> एलिमेंट के साथ बनाया जा सकता है. हालांकि, डेवलपर को टेक्स्ट इनपुट पाने के लिए, फ़ोकस किए जा सकने वाले एलिमेंट की ज़रूरत होती है. इसलिए, उन्हें अपने पेज पर कहीं छिपा हुआ contenteditable एलिमेंट भी डालना होगा.
इस वजह से, उपयोगकर्ता को ऐप्लिकेशन के कस्टम एडिटर व्यू में कॉन्टेंट में सीधे तौर पर बदलाव करते हुए दिखता है, जबकि डेवलपर को छिपे हुए एलिमेंट में इवेंट हैंडलर के साथ इनपुट मिल रहा होता है. इसके बाद, डेवलपर उसे दिखने वाले एडिटर व्यू में दिखाता है. इससे समस्याएं आ सकती हैं, क्योंकि डेवलपर को छिपे हुए contenteditable एलिमेंट में, ब्राउज़र के डिफ़ॉल्ट तौर पर लागू होने वाले बदलावों से निपटना पड़ता है.
Microsoft Edge की टीम ने इस तरह की समस्याओं को हल करने के लिए, EditContext एपीआई का स्टैंडर्ड वर्शन तैयार किया है. यह एक नया वेब प्लैटफ़ॉर्म एपीआई है. इसकी मदद से डेवलपर, ब्राउज़र में बदलाव करने के डिफ़ॉल्ट तरीके से जुड़े हुए, सीधे टेक्स्ट इनपुट पा सकते हैं.
असल दुनिया का उदाहरण
उदाहरण के लिए, जब उपयोगकर्ता Word Online में मिलकर काम कर रहे हों. उपयोगकर्ता सह-बदलाव कर सकते हैं और एक-दूसरे के बदलाव और कर्सर की स्थिति देख सकते हैं. हालांकि, अगर कोई सहयोगी जैपनीज़ टेक्स्ट लिखने के लिए इनपुट मेथड एडिटर (आईएमई) विंडो का इस्तेमाल कर रहा है, तो जब तक वह अपना कॉम्पोज़िशन पूरा नहीं कर लेता, तब तक दूसरे उपयोगकर्ताओं के बदलावों को दिखाने के लिए उसका एडिटर अपडेट नहीं किया जाएगा. ऐसा इसलिए होता है, क्योंकि IME कंपोज़िशन के चालू रहने के दौरान, डीओएम के एरिया में बदलाव किए जा सकते हैं. इससे कंपोज़िशन समय से पहले रद्द हो सकती है. ऐप्लिकेशन को व्यू अपडेट करने के लिए, तब तक इंतज़ार करना होगा, जब तक IME विंडो बंद न हो जाए. इस वजह से, देरी हो सकती है और साथ मिलकर काम करने में रुकावट आ सकती है.
डेवलपर और उपयोगकर्ता, दोनों को बेहतर अनुभव देने के लिए, डेवलपर को एचटीएमएल DOM व्यू से टेक्स्ट इनपुट को अलग करने का तरीका चाहिए. इस समस्या का समाधान करने के लिए,EditContext API का इस्तेमाल किया जाएगा.
EditContext के बारे में बुनियादी जानकारी
EditContext की मदद से, डीओएम में होने वाले बदलावों को देखने के बजाय, सीधे EditContext API के प्लैटफ़ॉर्म से टेक्स्ट और कॉम्पोज़िशन इनपुट पाया जा सकता है. इससे, इनपुट को मैनेज करने के तरीके पर ज़्यादा बेहतर तरीके से कंट्रोल किया जा सकता है. साथ ही, <canvas> एलिमेंट में बदलाव करने की सुविधा भी जोड़ी जा सकती है.
किसी एलिमेंट के साथ EditContext इंस्टेंस जोड़ने पर, उसमें बदलाव किया जा सकता है:
// This will be our editable element.
const element = document.querySelector('#editor-element');
// Creating the EditContext object.
const editContext = new EditContext();
// Associating the EditContext object with our DOM element.
// The element is now focusable and can receive text input.
element.editContext = editContext;
// In order to render the text typed by the user onto the
// page, as well as the user's selection, you'll need to
// receive the input in a textupdate event callback.
editContext.addEventListener('textupdate', event => {
element.textContent = editContext.text;
// For brevity, the code to render the selection
// isn't shown here.
renderSelection(event.selectionStart, event.selectionEnd);
});
लेखक की ज़िम्मेदारियां
EditContext API का इस्तेमाल करने से, इनपुट के बेहतर तरीकों का इस्तेमाल करना आसान हो जाता है. जैसे, IME कंपज़िशन विंडो, इमोजी पिकर, और ऑपरेटिंग सिस्टम के अन्य इनपुट प्लैटफ़ॉर्म. बदलाव किए जा सकने वाले एलिमेंट में यह सब करने के लिए, EditContext API को कुछ जानकारी की ज़रूरत होती है. टेक्स्ट और चुने गए टेक्स्ट को रेंडर करने के अलावा, EditContext API का इस्तेमाल करते समय आपको कुछ और भी काम करने होंगे.
बदलाव किए जा सकने वाले क्षेत्र को मैनेज करना या अगर उपयोगकर्ता के चुने गए हिस्से में बदलाव होता है
जब भी बदलाव किए जा सकने वाले क्षेत्र का साइज़ या उपयोगकर्ता की चुनी गई सेटिंग में बदलाव हो, तब एडिट कॉन्टेक्स्ट इंस्टेंस की सूचना देने के लिए, updateControlBounds() और updateSelectionBounds() तरीकों को कॉल करें. इससे प्लैटफ़ॉर्म यह तय कर पाता है कि IME विंडो और प्लैटफ़ॉर्म के हिसाब से बदलाव करने के लिए उपलब्ध अन्य यूज़र इंटरफ़ेस (यूआई) को कहां दिखाना है.
// It's necessary to provide bounds information because EditContext
// is generic enough to work with any type of web editor, even
// <canvas>-based editors. The API doesn't make any assumptions as
// to how the editor is implemented or how the selection is rendered.
// Bounds are given in the client coordinate space.
const controlBound = editorElement.getBoundingClientRect();
const selection = document.getSelection();
const selectionBound = selection.getRangeAt(0).getBoundingClientRect();
editContext.updateControlBounds(controlBound);
editContext.updateSelectionBounds(selectionBound);
एडिटर यूज़र इंटरफ़ेस (यूआई) की पोज़िशन मैनेज करना
characterboundsupdate इवेंट को सुनें और इसके जवाब में updateCharacterBounds() को कॉल करें. इससे प्लैटफ़ॉर्म यह तय कर पाएगा कि IME विंडो और प्लैटफ़ॉर्म के हिसाब से, बदलाव करने के लिए उपलब्ध अन्य यूज़र इंटरफ़ेस कहां दिखाने हैं.
फ़ॉर्मैटिंग लागू करना
textformatupdate इवेंट को सुनें और इवेंट के हिसाब से फ़ॉर्मैटिंग को अपने एडिटर व्यू में लागू करें. कुछ भाषाओं में लिखते समय, आईएमई इन टेक्स्ट डेकोरेशन का इस्तेमाल करते हैं. उदाहरण के लिए, जैपनीज़ आईएमई, टेक्स्ट के जिस हिस्से को लिखा जा रहा है उसे अंडरलाइन करेगा.
रिच टेक्स्ट में बदलाव करने के तरीके को मैनेज करना
beforeinput इवेंट को सुनें, ताकि आप रिच टेक्स्ट में बदलाव करने के उन सभी तरीकों को मैनेज कर सकें जिनका इस्तेमाल करना है. जैसे, टेक्स्ट को बोल्ड या इटैलिक करने के लिए हॉटकी या वर्तनी की जांच की सुविधा का इस्तेमाल करना.
उपयोगकर्ता के चुने गए विकल्पों में बदलाव मैनेज करना
जब कीबोर्ड या माउस इनपुट की वजह से, उपयोगकर्ता का चुना गया आइटम बदलता है, तो आपको EditContext इंस्टेंस को बदलाव के बारे में बताना होगा. ऐसा करना ज़रूरी है, क्योंकि EditContext API का इस्तेमाल कई तरह के कामों के लिए किया जा सकता है. जैसे, <canvas> एलिमेंट के साथ रेंडर किए गए एडिटर, जहां ब्राउज़र अपने-आप चुने गए टेक्स्ट में हुए बदलावों का पता नहीं लगा सकता.
document.addEventListener('selectionchange', () => {
const selection = document.getSelection();
// EditContext doesn't handle caret navigation, so all the caret navigation/selection that happens
// in DOM space needs to be mapped to plain text space by the author and passed to EditContext.
// This example code assumes the editable area only contains text under a single node.
editContext.updateSelection(selection.anchorOffset, selection.focusOffset);
});
अगर EditContext के साथ इस्तेमाल किया जा रहा एलिमेंट <canvas> एलिमेंट है, तो आपको चुनने और कैरेट नेविगेशन के व्यवहार को भी लागू करना होगा. जैसे, ऐरो बटन की मदद से टेक्स्ट पर नेविगेट करना. इसके अलावा, ब्राउज़र में पहले से मौजूद वर्तनी जांच की सुविधा सिर्फ़ <canvas> एलिमेंट के अलावा अन्य एलिमेंट में काम करती है.
EditContext बनाम contenteditable
अगर आपको सभी सुविधाओं वाला एडिटर लागू करना है और टेक्स्ट इनपुट को मैनेज करने के तरीके पर पूरा कंट्रोल रखना है, तो EditContext एक बेहतरीन विकल्प है. इसके अलावा, अगर आपको एक से ज़्यादा उपयोगकर्ताओं के साथ मिलकर बदलाव करने जैसी बेहतर सुविधाएं जोड़नी हैं, तो भी EditContext का इस्तेमाल किया जा सकता है. हालांकि, EditContext का इस्तेमाल करने से जुड़ी सभी ज़रूरी शर्तों को ध्यान में रखते हुए, अगर आपको सिर्फ़ टेक्स्ट में बदलाव करने की सुविधा चाहिए, तो हो सकता है कि आप अब भी <input>, <textarea> एलिमेंट या contenteditable एट्रिब्यूट का इस्तेमाल करना चाहें.
आने वाले समय में आपसे मिलकर खुशी होगी
Microsoft Edge की टीम ने Chrome के इंजीनियरों के साथ मिलकर, Chromium में EditContext को लागू किया है. यह सुविधा, Chrome और Edge, दोनों के 121 वर्शन (जनवरी 2024) के साथ शिप की जा रही है. फ़िलहाल, यह सिर्फ़ Chromium का इस्तेमाल करने वाले ब्राउज़र में उपलब्ध है. हालांकि, आप एडिट कॉन्टेक्स्ट एपीआई पर Mozilla की और WebKit की स्थितियां पढ़ सकते हैं.
हम चाहते हैं कि वेब डेवलपर, वेब पर बदलाव करने के बेहतरीन और पसंद के मुताबिक अनुभव आसानी से उपलब्ध करा सकें. हमें लगता है कि EditContext API, मौजूदा समस्याओं को हल करके और टेक्स्ट इनपुट को मैनेज करने का एक बेहतर तरीका उपलब्ध कराकर, ऐसा कर सकता है.
अगर आपको एपीआई के बारे में ज़्यादा जानना है, तो MDN दस्तावेज़ देखें. एपीआई के डिज़ाइन के बारे में सुझाव/राय देने या शिकायत करने के लिए, EditContext API के GitHub रिपॉज़िटरी में कोई समस्या खोलें. एपीआई को लागू करने से जुड़ी गड़बड़ियों की शिकायत करने के लिए, crbug.com पर गड़बड़ी की शिकायत सबमिट करें.