বিকাশকারীদের জন্য তাদের ওয়েব অ্যাপ্লিকেশনগুলিতে উন্নত সম্পাদনা ক্ষমতা অন্তর্ভুক্ত করা সর্বদা একটি সহজ কাজ নয়। ওয়েব প্ল্যাটফর্মটি <input> এবং <textarea> এর মত উপাদান ব্যবহার করে বা উপাদানগুলিতে contenteditable বৈশিষ্ট্য প্রয়োগ করে প্লেইন টেক্সট এবং HTML নথি উভয়ের জন্য সম্পাদনাযোগ্যতা প্রদান করে। যাইহোক, এই উপাদান প্রকারের মৌলিক ক্ষমতাগুলি প্রায়ই ডেভেলপাররা তাদের অ্যাপে যা অর্জন করতে চায় তার জন্য যথেষ্ট নয়।
বিকাশকারীরা প্রায়শই তাদের নিজস্ব কাস্টম এডিটর ভিউ বাস্তবায়ন করে যা তাদের ব্যবহারকারীদের প্রয়োজনীয় কার্যকারিতা প্রয়োগ করে। এডিটর ভিউ একটি জটিল DOM দিয়ে তৈরি হতে পারে—অথবা একটি <canvas> এলিমেন্ট দিয়েও—কিন্তু যেহেতু ডেভেলপারের টেক্সট ইনপুট পাওয়ার একমাত্র উপায় একটি ফোকাসড এডিটেবল এলিমেন্ট প্রয়োজন, তাই তাদের একটি লুকানো contenteditable উপাদান রাখতে হবে কোথাও তাদের পৃষ্ঠা।
ফলাফল হল যখন ব্যবহারকারী অ্যাপের কাস্টম এডিটর ভিউতে বিষয়বস্তু সরাসরি সম্পাদনা করছেন বলে মনে হচ্ছে, ডেভেলপার আসলে লুকানো উপাদানে ইভেন্ট হ্যান্ডলারের সাথে ইনপুট গ্রহণ করছে এবং তারপর দৃশ্যমান এডিটর ভিউতে মিরর করছে। এটি সমস্যার কারণ হতে পারে কারণ ডেভেলপার লুকানো contenteditable উপাদানে ব্রাউজার-ডিফল্ট সম্পাদনা আচরণের সাথে লড়াই করে।
এই শ্রেণীর সমস্যা সমাধানের জন্য, Microsoft Edge টিম EditContext- এর প্রমিতকরণকে চালিত করেছে, একটি নতুন ওয়েব প্ল্যাটফর্ম API যা ডেভেলপারদের ব্রাউজারের ডিফল্ট সম্পাদনা আচরণের সাথে আবদ্ধ না হয়ে সরাসরি টেক্সট ইনপুট গ্রহণ করতে দেয়।
একটি বাস্তব বিশ্বের উদাহরণ
উদাহরণস্বরূপ, যখন ব্যবহারকারীরা Word Online-এ সহযোগিতা করছেন। ব্যবহারকারীরা একে অপরের পরিবর্তন এবং কার্সার অবস্থান সহ-সম্পাদনা করতে এবং দেখতে পারেন। যাইহোক, যদি একজন সহযোগী জাপানি পাঠ্য রচনা করতে একটি ইনপুট মেথড এডিটর (IME) উইন্ডো ব্যবহার করে, উদাহরণস্বরূপ, IME ব্যবহারকারী তাদের রচনা শেষ না করা পর্যন্ত তাদের সম্পাদক অন্যান্য ব্যবহারকারীদের থেকে পরিবর্তনগুলি দেখানোর জন্য আপডেট করা হবে না৷ এর কারণ হল একটি সক্রিয় IME কম্পোজিশন থাকাকালীন DOM-এর এলাকায় পরিবর্তন করা হলে তা সময়ের আগেই বাতিল হয়ে যেতে পারে। ভিউ আপডেট করতে আইএমই উইন্ডো বন্ধ না হওয়া পর্যন্ত অ্যাপ্লিকেশনটিকে অপেক্ষা করতে হবে, যা বিলম্বের কারণ হতে পারে এবং সহযোগিতাকে বাধাগ্রস্ত করতে পারে।
একটি ভাল বিকাশকারী এবং ব্যবহারকারীর অভিজ্ঞতা উভয়ই প্রদান করতে, বিকাশকারীদের HTML DOM ভিউ থেকে পাঠ্য ইনপুট ডিকপল করার একটি উপায় প্রয়োজন৷ EditContext API হল এই সমস্যার সমাধান।
EditContext এর মৌলিক বিষয়
EditContext এর সাহায্যে, আপনি DOM-এ পরিবর্তনগুলি পর্যবেক্ষণ না করে সরাসরি 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 ব্যবহার করার সময় আপনাকে অবশ্যই কিছু করতে হবে।
একটি সম্পাদনাযোগ্য অঞ্চলের দিক পরিচালনা করা, বা ব্যবহারকারীর নির্বাচন পরিবর্তন হলে
যখনই সম্পাদনাযোগ্য অঞ্চলের আকার বা ব্যবহারকারীর নির্বাচন পরিবর্তন হয় তখন EditContext দৃষ্টান্ত জানাতে updateControlBounds() এবং updateSelectionBounds() পদ্ধতিতে কল করুন। এটি প্ল্যাটফর্মকে IME উইন্ডো এবং অন্যান্য প্ল্যাটফর্ম-নির্দিষ্ট সম্পাদনা UI কোথায় দেখাবে তা স্থির করতে সাহায্য করে৷
// 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);
সম্পাদক UI এর অবস্থান পরিচালনা করা
characterboundsupdate ইভেন্টের জন্য শুনুন এবং IME উইন্ডো এবং অন্যান্য প্ল্যাটফর্ম-নির্দিষ্ট সম্পাদনা UI কোথায় দেখাতে হবে তা প্ল্যাটফর্মকে সিদ্ধান্ত নিতে সাহায্য করতে প্রতিক্রিয়া হিসেবে updateCharacterBounds() কে কল করুন।
বিন্যাস প্রয়োগ করা হচ্ছে
textformatupdate ইভেন্টের জন্য শুনুন এবং আপনার এডিটর ভিউতে ইভেন্ট দ্বারা নির্দিষ্ট করা ফরম্যাটিং প্রয়োগ করুন। এই পাঠ্য সজ্জা IME দ্বারা নির্দিষ্ট ভাষা রচনা করার সময় ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি জাপানি 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
আপনি যদি একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত সম্পাদক প্রয়োগ করেন এবং পাঠ্য ইনপুট কীভাবে পরিচালনা করা হয় তার উপর সম্পূর্ণ নিয়ন্ত্রণ রাখতে চান বা আপনি একাধিক ব্যবহারকারীর সাথে সহ-সম্পাদনা করার মতো উন্নত বৈশিষ্ট্য যুক্ত করতে চাইলে EditContext একটি দুর্দান্ত পছন্দ। যাইহোক, EditContext ব্যবহার করার জন্য পূর্ববর্তী সমস্ত প্রয়োজনীয়তার প্রেক্ষিতে, যদি আপনার যা প্রয়োজন তা হল সাধারণ পাঠ্য সম্পাদনা সমর্থন, আপনি সম্ভবত এখনও <input> , <textarea> উপাদানগুলি, বা contenteditable বৈশিষ্ট্যগুলি ব্যবহার করতে চাইবেন।
উন্মুখ
Microsoft এজ টিম ক্রোম প্রকৌশলীদের সাথে সহযোগিতার মাধ্যমে Chromium-এ EditContext প্রয়োগ করেছে এবং Chrome এবং Edge উভয়ের রিলিজ 121 (জানুয়ারি 2024) এর সাথে শিপিং করছে। আপাতত, এটি শুধুমাত্র ক্রোমিয়াম-ভিত্তিক ব্রাউজারেই উপলব্ধ, তবে আপনি EditContext API-এ Mozilla এবং WebKit-এর অবস্থানগুলি পড়তে পারেন৷
আমরা চাই যে ওয়েব ডেভেলপারদের জন্য ওয়েবে শক্তিশালী কাস্টম সম্পাদনার অভিজ্ঞতা তৈরি করা সহজতর হোক, এবং আমরা বিশ্বাস করি যে EditContext API বিদ্যমান চ্যালেঞ্জগুলি মোকাবেলা করে এবং পাঠ্য ইনপুট পরিচালনা করার আরও সরাসরি উপায় অফার করে এটি অর্জন করে।
আপনি API সম্পর্কে আরও জানতে চাইলে, MDN ডকুমেন্টেশন দেখুন। API এর ডিজাইন সম্পর্কে প্রতিক্রিয়া জমা দিতে, EditContext API-এর Github সংগ্রহস্থলে একটি সমস্যা খুলুন। API বাস্তবায়নের সাথে বাগ রিপোর্ট করতে, crbug.com এ একটি বাগ জমা দিন।