अपने वेब ऐप्लिकेशन में बदलाव करने की बेहतर सुविधाओं को शामिल करना, डेवलपर के लिए हमेशा एक आसान काम नहीं रहा है. वेब प्लैटफ़ॉर्म, <input> और <textarea> जैसे एलिमेंट का इस्तेमाल करके, सामान्य टेक्स्ट और एचटीएमएल दस्तावेज़ों, दोनों में बदलाव करने की सुविधा देता है. इसके अलावा, एलिमेंट पर contenteditable एट्रिब्यूट लागू करके भी ऐसा किया जा सकता है. हालांकि, इन एलिमेंट टाइप की बुनियादी क्षमताएं अक्सर इस बात के लिए काफ़ी नहीं होती कि डेवलपर अपने ऐप्लिकेशन में क्या हासिल करना चाहते हैं.
डेवलपर अक्सर खुद का कस्टम एडिटर व्यू लागू करते हैं जो उनके उपयोगकर्ताओं की ज़रूरत के फ़ंक्शन को लागू करता है. हो सकता है कि एडिटर व्यू को जटिल DOM के साथ या <canvas> एलिमेंट के साथ बनाया गया हो—लेकिन डेवलपर को टेक्स्ट इनपुट पाने के लिए, सिर्फ़ ऐसे एलिमेंट की ज़रूरत होती है जिसे बदलाव किया जा सके. इसलिए, उसे अपने पेज पर कहीं भी छिपा हुआ contenteditable एलिमेंट लगाना होगा.
ऐसा तब होता है, जब उपयोगकर्ता ऐप्लिकेशन के कस्टम एडिटर व्यू में कॉन्टेंट में सीधे तौर पर बदलाव करता है, जबकि डेवलपर को असल में छिपे हुए एलिमेंट में इवेंट हैंडलर की मदद से इनपुट मिल रहा होता है. इसके बाद, वह इनपुट दिखने वाले एडिटर व्यू में उसे कॉपी कर देता है. इससे डेवलपर को समस्या हो सकती है, क्योंकि डेवलपर को, छिपे हुए contenteditable एलिमेंट में बदलाव करने के लिए, ब्राउज़र के डिफ़ॉल्ट व्यवहार से समस्या होती है.
इस क्लास की समस्याओं को हल करने के लिए, Microsoft Edge की टीम ने EditContext का स्टैंडर्ड तय किया है. यह वेब प्लैटफ़ॉर्म का एक नया एपीआई है. इसकी मदद से, डेवलपर सीधे तौर पर टेक्स्ट इनपुट पा सकते हैं. ऐसा करने के लिए, उन्हें ब्राउज़र की डिफ़ॉल्ट सेटिंग में बदलाव करने की ज़रूरत नहीं होती.
असल दुनिया का एक उदाहरण
उदाहरण के लिए, जब उपयोगकर्ता Word Online में साथ मिलकर काम कर रहे हों. उपयोगकर्ता एक साथ बदलाव कर सकते हैं और एक-दूसरे के बदलाव और कर्सर की स्थिति देख सकते हैं. हालांकि, अगर कोई सहयोगी जैपनीज़ टेक्स्ट लिखने के लिए, इनपुट के तरीके में बदलाव करने वाला टूल (IME) विंडो का इस्तेमाल कर रहा है, तो उसके एडिटर को दूसरे उपयोगकर्ताओं के बदलाव दिखाने के लिए अपडेट नहीं किया जाएगा. ऐसा तब तक होगा, जब तक IME उपयोगकर्ता अपनी कंपोज़िशन पूरी नहीं कर लेता. ऐसा इसलिए होता है, क्योंकि कोई चालू IME कंपोज़िशन होने पर, उसमें बदलाव किए जा रहे DOM के हिस्से में बदलाव करने पर, कंपोज़िशन को समय से पहले रद्द किया जा सकता है. ऐप्लिकेशन को व्यू अपडेट करने के लिए, IME विंडो बंद होने तक इंतज़ार करना होगा. इससे, देरी हो सकती है और साथ मिलकर काम करने में रुकावट आ सकती है.
डेवलपर और उपयोगकर्ता, दोनों को बेहतर अनुभव देने के लिए, डेवलपर को एचटीएमएल DOM व्यू से टेक्स्ट इनपुट को अलग करने का कोई तरीका चाहिए. EditorContext API से इस समस्या को हल किया जा सकता है.
EditContext की बुनियादी बातें
EditorContext की मदद से, डेटा और कंपोज़िशन इनपुट को सीधे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);
});
लेखक की ज़िम्मेदारियां
EditorContext API का इस्तेमाल करने पर, इनपुट के बेहतर तरीकों का इस्तेमाल करना आसान हो जाता है. जैसे, IME कंपोज़िशन विंडो, इमोजी पिकर, और ऑपरेटिंग सिस्टम के अन्य इनपुट प्लैटफ़ॉर्म. आपके बदलाव किए जा सकने वाले एलिमेंट में ऐसा करने के लिए, EditContext API को कुछ जानकारी की ज़रूरत है. टेक्स्ट को रेंडर करने और चुनने के अलावा, कुछ अन्य काम भी हैं, जिन्हें आपको EditorContext 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 इवेंट सुनें और अपने एडिटर व्यू में इवेंट के लिए तय की गई फ़ॉर्मैटिंग लागू करें. कुछ भाषाएं लिखते समय IMEs इन टेक्स्ट सजावट का इस्तेमाल करते हैं. उदाहरण के लिए, जैपनीज़ IME यह दिखाने के लिए अंडरलाइन का इस्तेमाल करेगा कि टेक्स्ट के किस हिस्से को सक्रिय तौर पर बनाया जा रहा है.
रिच टेक्स्ट में बदलाव करने के व्यवहार को मैनेज करना
टेक्स्ट में बदलाव करने की बेहतर सुविधाओं को मैनेज करने के लिए, 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> एलिमेंट के साथ काम करती है.
एडिटकॉन्टेक्स्ट बनाम contenteditable
अगर आपको सभी सुविधाओं वाले एडिटर का इस्तेमाल करना है और टेक्स्ट इनपुट को मैनेज करने के तरीके पर पूरा कंट्रोल चाहिए, तो EditorContext एक बेहतरीन विकल्प है. इसके अलावा, अगर आपको एक से ज़्यादा उपयोगकर्ताओं के साथ मिलकर बदलाव करने जैसी ऐडवांस सुविधाएं जोड़नी हैं, तो भी यह बेहतरीन विकल्प है. हालांकि, EditContext का इस्तेमाल करने के लिए, ऊपर बताई गई सभी ज़रूरी शर्तों को देखते हुए, अगर आपको टेक्स्ट में बदलाव करने की आसान सुविधा की ज़रूरत है, तो हो सकता है कि आप <input>, <textarea> एलिमेंट या contenteditable एट्रिब्यूट का इस्तेमाल करना चाहें.
आगे की योजना
Microsoft Edge की टीम ने Chrome में काम करने वाले इंजीनियर के साथ मिलकर,EditContext को Chromium में लागू किया है. यह टीम Chrome और Edge, दोनों के रिलीज़ 121 (जनवरी 2024) के साथ शिपिंग कर रही है. फ़िलहाल, यह सिर्फ़ Chromium का इस्तेमाल करने वाले ब्राउज़र में उपलब्ध है. हालांकि, EditContext API में Mozilla और WebKit की पोज़िशन देखी जा सकती हैं.
हम चाहते हैं कि वेब डेवलपर आसानी से वेब पर, अपने हिसाब से बदलाव करने का बेहतरीन अनुभव दे पाएं. साथ ही, हमारा मानना है कि EditorContext API की मदद से, मौजूदा समस्याओं को हल किया जा सकता है और टेक्स्ट इनपुट को सीधे तौर पर मैनेज किया जा सकता है.
अगर आपको इस एपीआई के बारे में ज़्यादा जानना है, तो एमडीएन का दस्तावेज़ देखें. एपीआई के डिज़ाइन के बारे में सुझाव, शिकायत या राय सबमिट करने के लिए, EditContext API के GitHub डेटा स्टोर करने की जगह में कोई समस्या खोलें. एपीआई लागू करने से जुड़ी गड़बड़ियों की रिपोर्ट करने के लिए, crbug.com पर गड़बड़ी की शिकायत सबमिट करें.