ট্রিক্স এবং টার্বো ফ্রেম ব্যবহার করে রেলে একটি ডায়নামিক টেবিল এডিটর তৈরি করুন

এই পোস্টে, আমরা আপনার Rails অ্যাপ্লিকেশনের জন্য একটি মৌলিক ActionText টেবিল সম্পাদক বাস্তবায়ন করব। আমরা শিখব কিভাবে:

• ActionText এবং Trix হ্যান্ডেল সংযুক্তি
• আমাদের নিজস্ব Attachable বাস্তবায়ন করতে টাইপ করুন, এবং একটি বেসিক টেবিল এডিটর তৈরি করতে এটির সুবিধা নিন
• টার্বো ফ্রেমগুলি টেবিল সম্পাদনা করতে ব্যবহার করা যেতে পারে
• Turbo সাহায্য করে এবং একই সময়ে পথ পায়

এই নিবন্ধটি 2020 সালের চমৎকার 'Adding Tables to ActionText With Stimulus.js' ব্লগ পোস্ট থেকে অনুপ্রেরণা নিয়ে এসেছে। যদিও এটি Turbo-এর আবির্ভাবের আগে লেখা হয়েছিল, যা আমরা বিষয়গুলিকে কিছুটা সহজ করার আশা করতে পারি।

চলুন চলুন!

রেলস 101-এ অ্যাকশন টেক্সট সংযুক্তি

দ্রষ্টব্য :এই প্রদর্শনটি ট্রিক্স এবং টার্বো ফ্রেমের কিছু বোঝার অনুমান করে। আপনি আমাদের 'Get Started with Hotwire in Your Ruby on Rails App' পোস্টটি হটওয়্যার এবং টার্বো ফ্রেমের মূল বিষয়গুলি শিখতে সহায়ক বলে মনে করতে পারেন৷

আপনি এই GitHub রেপোর সাথে কোড প্রদর্শন সহ অনুসরণ করতে পারেন।

অ্যাকশন টেক্সট ডকুমেন্টেশনে বর্ণনা করা হয়েছে:

অ্যাকশন টেক্সট রেলে সমৃদ্ধ পাঠ্য সামগ্রী এবং সম্পাদনা নিয়ে আসে। এতে ট্রিক্স এডিটর রয়েছে যা ফর্ম্যাটিং থেকে শুরু করে লিংক থেকে কোট থেকে তালিকা থেকে এমবেড করা ছবি এবং গ্যালারী পর্যন্ত সবকিছু পরিচালনা করে।

উচ্চ স্তরে, সংযুক্তিগুলি ActionText এর নথি মডেলের অংশ। তারা একটি স্বাক্ষরিত গ্লোবাল আইডি (SGID) দ্বারা সমাধানযোগ্য যে কোনও সংস্থানের জন্য কাস্টম টেমপ্লেট রেন্ডার করে। অন্য কথায়, ActionText একটি নির্দিষ্ট SGID-এর একটি রেফারেন্স <action-text-attachment> হিসাবে সঞ্চয় করে উপাদান:

যখনই অ্যাকশনটেক্সট এই ধরনের একটি উপাদানের মুখোমুখি হয়, তখন এটি to_attachable_partial_path কল করে সংশ্লিষ্ট সম্পদের উপর পদ্ধতি। ডিফল্টরূপে, এই পদ্ধতিটি to_partial_path-এ অর্পণ করে .

সুতরাং, একটি পূর্বরূপ হিসাবে, এইভাবে আমাদের Table এইচটিএমএল:

অ্যাকশন টেক্সট অ্যাটাচমেন্ট API-এর সাথে সামঞ্জস্য করতে, একটি ক্লাসকে শুধুমাত্র দুটি জিনিস করতে হবে:

1. to_sgid প্রয়োগ করুন GlobalID::Identification অন্তর্ভুক্ত করে . ডিফল্টরূপে, সমস্ত ActiveRecord::Base বংশধররা ইতিমধ্যেই এটা করে।
2. ActionText::Attachable অন্তর্ভুক্ত করুন মডিউল।

ActionText::Attachable মডিউল attachable_sgid এর মাধ্যমে একটি SGID-তে এবং থেকে যেকোন মডেলকে রূপান্তর করার আদর্শ উপায় সরবরাহ করে এবং from_attachable_sgid পদ্ধতি আমরা পরে এটি ব্যবহার করব।

এটি সংযুক্তি মেটাডেটা, যেমন ফাইলের আকার এবং নাম, সেইসাথে বিষয়বস্তুর প্রকারের জন্য সুবিধাজনক অ্যাক্সেসর প্রদান করে৷

অবশেষে, এটি সম্পাদক এবং সমৃদ্ধ পাঠ্য দর্শনে একটি সংযুক্তি রেন্ডার করতে ব্যবহৃত আংশিকগুলির জন্য ডিফল্ট অবস্থান সরবরাহ করে৷

একটি টেবিল মডেল যোগ করা হচ্ছে

আমরা আমাদের টেবিল সমাধান বাস্তবায়নের জন্য ActionText এর সংযুক্তি API-কে পুঁজি করব। এর জন্য, আমাদের টেবিলের ডেটা ক্যাপচার করে একটি কাস্টম মডেল তৈরি করতে হবে এবং Attachable অন্তর্ভুক্ত করতে হবে। . আমরা টেবিল ডেটার জন্য একটি দ্বি-মাত্রিক অ্যারে রাখতে একটি সাধারণ JSON(B) কলাম ব্যবহার করব৷

আমাদের অন্বেষণ শুরু করতে, আসুন ActionText সক্ষম করে একটি নতুন Rails অ্যাপ তৈরি করি:

কারণ আমি আজ সৃজনশীল বোধ করছি না, আসুন একটি Article ভারা করি একটি শিরোনাম এবং সমৃদ্ধ পাঠ্য সামগ্রী সহ মডেল:

দেখুন, এখানে একটি আশ্চর্যজনক গোট! উপরের ইনস্টল কমান্ডটি একটি CreateActionTextTables তৈরি করেছে মাইগ্রেশন, তাই আমাদের এটির নাম পরিবর্তন করতে হবে CreateActionTextTablesTable . উপরন্তু, আমরা null: false, default: [["", ""], ["", ""]] ব্যবহার করে একটি 2x2 টেবিলে ডিফল্ট রাখব .

একটি Rails ActionText মডেলে একটি টেবিল যোগ করুন

রিচ টেক্সটে একটি টেবিল যোগ করার আগে, আমাদের ট্রিক্সের টুলবার প্যাচ করতে হবে:

এখানে, আমরা ম্যানুয়ালি ট্রিক্সের toolbarElement-এ একটি বোতাম যুক্ত করি . এটি একটি trix-table পর্যন্ত ওয়্যারিং উদ্দীপক নিয়ামক (যেটি আমরা এখনও তৈরি করতে পারিনি) নথিতে একটি টেবিল সন্নিবেশ করবে। আসুন এই বোতামটিকে CSS-এ বিষয়বস্তু হিসাবে একটি সুন্দর SVG দিন এবং কিছু টেবিল শৈলী সেট আপ করুন যখন আমরা এটিতে থাকি:

আপনি দেখতে পাচ্ছেন, আমরা সফলভাবে এটিকে "ফাইল-টুলস" গ্রুপে যুক্ত করেছি:

এখন টার্বোর সাহায্যে টেবিল যোগ করা এবং ম্যানিপুলেট করাতে ফিরে আসি। এর জন্য, আমাদের প্রথমে একটি create সহ একটি কন্ট্রোলার প্রয়োজন হবে কর্ম:

এই ক্রিয়াটি কমবেশি 'অন রেইলস' ব্লগ পোস্ট থেকে ধার করা যেতে পারে যা আমরা ভূমিকায় উদ্ধৃত করেছি। এটি ক্লায়েন্ট সাইডে একটি সংযুক্তি সন্নিবেশ করার জন্য প্রয়োজনীয় JSON তৈরি করে:একটি SGID এবং content সহ একটি editor থেকে রেন্ডার করা হয়েছে আংশিক, যেমনটা আমরা পরে দেখব।

আমরা প্রাসঙ্গিক সম্পদযুক্ত টেবিল রুট যোগ করি আমাদের কনফিগারেশনে:

এখন গভীর প্রান্তে নিমজ্জিত করার মুহূর্ত এসেছে:আমাদের টেবিল মডেল তৈরি করতে হবে। প্রথমে ActionText::Attachable অন্তর্ভুক্ত করা যাক এবং প্রাসঙ্গিক আংশিক পথ সংজ্ঞায়িত করুন:

মনে রাখবেন যে টেবিলের বিষয়বস্তু কীভাবে সংরক্ষণ করা হয় তা আমরা এখনও সংজ্ঞায়িত করিনি। যেহেতু আমরা এটিকে আমাদের ডাটাবেসে একটি JSON(B) কলাম হিসাবে ঘোষণা করেছি, আমরা যেকোন বিন্যাস বেছে নিতে স্বাধীন। উদ্ধৃত ব্লগ পোস্ট থেকে কিছুটা বিচ্যুত হয়ে, আসুন একটি দ্বি-মাত্রিক অ্যারে নিয়ে যাই। সুতরাং, আমরা সহজভাবে content এর উপর একটি নেস্টেড লুপ করতে পারি এই মত:

ActionView দ্বারা অনুরোধ করা হলেই উপরের আংশিকটি রেন্ডার হবে , উদাহরণস্বরূপ। এর পরে, আমাদের একটি editor তৈরি করতে হবে আংশিক ট্রিক্সে ইনলাইনে ব্যবহার করা হবে:

শুধুমাত্র পার্থক্য, আপনি সম্ভবত লক্ষ্য করেছেন যে, আমরা এখন এটিকে টার্বো ফ্রেমে মোড়ানো, একটি DOM আইডি হিসাবে SGID ব্যবহার করে। উপরন্তু, আমরা বিভাজক ব্লকগুলিতে সারি এবং কলামের সূচী প্রদান করি এবং ভিতরের DIV contenteditable তৈরি করে ইনলাইন সম্পাদনার জন্য প্রস্তুত করি — আমরা পরে যাবো।

আমরা এখন আমাদের টুলবারের টেবিল বোতামটিকে সার্ভার-সাইড কন্ট্রোলার অ্যাকশনের সাথে সংযুক্ত করব যা আমরা লিখেছি। এটি করার জন্য, আমাদের প্রথমে প্রকল্পে Rails's request.js লাইব্রেরি আনতে হবে। এই লাইব্রেরি আমাদের post পরিচালনা করতে সাহায্য করবে যথাযথ CSRF-টোকেন, ইত্যাদি সহ ক্লায়েন্টের কাছ থেকে অনুরোধ:

একটি নতুন ট্রিক্স টেবিল স্টিমুলাস কন্ট্রোলার তৈরি করুন

এখন সবকিছু সেট আপ করা হয়েছে, আসুন একটি নতুন ট্রিক্স-টেবিল তৈরি করি উদ্দীপক নিয়ামক। এতে, আমরা attachTable বাস্তবায়ন করব আমাদের টুলবার বোতাম দ্বারা উল্লেখ করা কর্ম:

এটি টেবিলের create এ পোস্ট করা হবে রুট, একটি Trix সংযুক্তি হিসাবে JSON প্রতিক্রিয়া সন্নিবেশ করা হচ্ছে . এটি আবার OnRails ব্লগ পোস্ট থেকে ধার করে, অবহেলিত rails-ujs বিনিময় করে নতুন request.js এর জন্য কল করে লাইব্রেরি।

এখন ফর্মের মার্কআপে যোগ করে আমাদের অ্যাপে এই কন্ট্রোলারটি ব্যবহার করতে হবে:

Stimulus.js এর সৌন্দর্য হল form-এ শুধুমাত্র দুটি ডেটা অ্যাট্রিবিউট যোগ করা উপাদান পছন্দসই ফলাফল অর্জন করে। আমরা এখন আমাদের নিবন্ধের বিষয়বস্তুতে একটি মাত্র বোতাম ক্লিকের মাধ্যমে টেবিল যোগ করতে সক্ষম হচ্ছি:

টার্বো ফ্রেমের মাধ্যমে সারণি ম্যানিপুলেট করা

এখন যেহেতু আমরা টেবিল সংযুক্তি তৈরি করতে পারি, আসুন বিষয়বস্তু ম্যানিপুলেট করার দিকে আমাদের ফোকাস স্থানান্তর করা যাক। দেখা যাচ্ছে, টার্বো ফ্রেমগুলি হল প্রায়৷ এখানে একটি প্রাকৃতিক ফিট।

সারণী সারি এবং কলাম যোগ করুন এবং মুছুন

টেবিল সারি এবং কলাম যোগ করতে এবং মুছে ফেলতে, আমরা প্রতিটি অপারেশনের জন্য চারটি বোতাম সমন্বিত একটি মিনি-টুলবার তৈরি করি। button_to ব্যবহার করুন সহায়ক এবং URLটিকে update এ সেট করুন সংশ্লিষ্ট টেবিলের জন্য রুট। আসুন সংশ্লিষ্ট ক্রিয়াকলাপ যোগ করি যা আমরা অতিরিক্ত পরামিতি হিসাবে ট্রিগার করতে চাই:

পালাক্রমে, আমাদের TablesController এ সংশ্লিষ্ট নিয়ামক ক্রিয়া(গুলি) যোগ করতে হবে . লক্ষ্য করুন যে update অ্যাকশন সেই ক্রিয়াগুলিকে মডেলে অর্পণ করে৷

টেবিলের কাঠামোর পরিবর্তনগুলি সংরক্ষিত হওয়ার পরে, আমরা টেবিলের সম্পাদনা দৃশ্যে পুনঃনির্দেশ করি। এটি একই editor রেন্ডার করে আংশিক, যার একই টার্বো ফ্রেম উল্লেখ করার পার্শ্ব-প্রতিক্রিয়া রয়েছে। এইভাবে টার্বো ম্যাচিং ফ্রেম সনাক্ত করতে পারে এবং একটির পরিবর্তে অন্যটি প্রতিস্থাপন করতে পারে৷

এখন আমাদের Table-এ অনুপস্থিত কমান্ডগুলি বাস্তবায়ন করতে হবে মডেল।

উল্লেখযোগ্যভাবে, একটি দ্বি-মাত্রিক অ্যারের আমাদের সাধারণ ডেটা কাঠামোর কারণে, add/remove<sub>column</sub>/row পদ্ধতিগুলি কলাম এবং সারি গণনা পরিবর্তন করার জন্য নিছক প্রক্সি। একবার এটি হয়ে গেলে, আমরা বোতাম ক্লিকের মাধ্যমে আমাদের টেবিলের গঠন পরিবর্তন করতে পারি:

সারণী কোষের বিষয়বস্তু সম্পাদনা করুন

কলাম এবং সারির সংখ্যা পরিবর্তন করার পাশাপাশি, আমরা ঘরের বিষয়বস্তুও সম্পাদনা করতে চাই। এটি অর্জন করতে, আমরা আবার উদ্ধৃত ব্লগ পোস্টের উপর খুব বেশি ঝুঁকব এবং একটি উদ্দীপক টেবিল সম্পাদক নিয়ন্ত্রক তৈরি করব৷

updateCell প্যারামিটার হিসাবে সারি এবং কলাম সূচী পাস করে যখনই একটি ঘর সম্পাদনা করা হয় তখন পদ্ধতিটি একটি প্যাচ অনুরোধ জারি করবে। এখন, আমাদের যা করতে হবে তা হল এটিকে আমাদের DOM:

সার্ভার-সাইড TablesController , অবশ্যই, এখন এই অপারেশন পরিচালনা করার একটি উপায় প্রয়োজন. সৌভাগ্যবশত, আমাদের শর্তে আরেকটি শাখা যোগ করে আমাদের ধারণার সরলীকৃত প্রমাণে এটি সহজেই করা যায়। আমরা নিশ্চিত করি যে update অ্যাকশন এখন JSON-টাইপ অনুরোধগুলি পরিচালনা করতে পারে, এমনকি যদি এটি শুধুমাত্র এখানে একটি খালি বস্তু ফেরত দেয়।

মনে রাখবেন যে একটি প্রোডাকশন অ্যাপে, আমি আপনাকে if/elsif/else থেকে অপারেশন স্যানিটাইজ করার জন্য একটি ভিন্ন কৌশল বেছে নেওয়ার পরামর্শ দেব। অবস্থা আমি সম্ভবত এই ক্ষেত্রে একজন মধ্যস্থতাকারী বা প্রক্সির কাছে পৌঁছাব৷

রুবিতে ট্রিক্সের সীমাবদ্ধতা

এই মুহুর্তে, আমি অনুমান করি যে এই অ্যাকাউন্টটি নিখুঁত অর্থে তৈরি হয়েছে, কিন্তু আমি একটি সমালোচনামূলক বিবরণ ছেড়ে দিয়েছি। যদিও আমরা অন্তর্নিহিত ডাটাবেস মডেলটি ঠিকভাবে ধরে রাখছি, আমরা এটিকে ট্রিক্সের অভ্যন্তরীণ ছায়া উপস্থাপনের সাথে সিঙ্ক করছি না। এই কারণেই যখন আমরা এটি থেকে ফোকাস করি তখন টেবিলটি পূর্বে সঞ্চিত উপস্থাপনায় ফিরে আসে:

আমরা যদি এখন পৃষ্ঠাটি রিফ্রেশ করি, তাহলে যোগ করা বিষয়বস্তু প্রদর্শিত হবে, কারণ ট্রিক্সের নথিটি নতুনভাবে শুরু করা হয়েছে।

আমি এই সমস্যাটি পিন করেছি যেখানে ট্রিক্স তার অভ্যন্তরীণ নথি সিঙ্ক করে যখন নির্বাচন পরিবর্তন হয়। এটি এখানে ছায়া উপাদান থেকে এটি উন্মোচন করে।

আমি turbo:submit এর সাথে যুক্ত করার চেষ্টা করেছি একটি টেবিল ঝাপসা করার সময় ইভেন্ট এবং সিঙ্ক প্রতিরোধ করা, কিন্তু আমি যে সমাধানগুলি নিয়ে এসেছি সেগুলি খুব লোমযুক্ত এবং অভ্যন্তরীণ API-এর উপর অত্যন্ত নির্ভরশীল বলে মনে হচ্ছে৷

এটি মোকাবেলা করার সবচেয়ে টার্বো-এসক উপায়, আমার ধারণা, পুরো ফর্মটিকে একটি আগ্রহী-লোড করা টার্বো ফ্রেমে মোড়ানো এবং যখনই ট্রিক্সের বিষয়বস্তু পরিবর্তিত হয় তখন এটিকে পুনরায় লোড করতে বলা।

এইরকম কিছু কৌশল করা উচিত:

আপনি যদি আপনার ফর্ম টার্বো ফ্রেমে আবদ্ধ করেন যা আপনি src থেকে লোড করেন :

যদিও এই পদ্ধতিটি শুধুমাত্র ইতিমধ্যে টিকে থাকা বেস রেকর্ডের সাথে কাজ করে।

ট্রিক্সে সতর্কতার চূড়ান্ত শব্দ

আমরা যে ধারণাটি তৈরি করেছি তার প্রমাণ JSON-এ টেবিলের সিরিয়ালাইজ করা এবং জাভাস্ক্রিপ্ট ইভেন্ট শোনার অতিরিক্ত জটিলতা দূর করতে সার্ভার-রেন্ডার করা HTML ব্যবহার করে। এটি যেকোন অ্যাকশন টেক্সট ইনস্টলেশনের জন্য বহনযোগ্য এবং সহজেই একটি রত্ন থেকে বের করা যেতে পারে।

কয়েকটি ত্রুটি রয়েছে, যদিও, সবচেয়ে স্পষ্ট হল ট্রিক্সের নথি মডেলের সাথে প্রয়োজনীয় পুনরায় সিঙ্ক করা। এমন পরিস্থিতি হতে পারে যেখানে প্রস্তাবিত সমাধানটি কার্যকরী এবং অন্যগুলি যেখানে এটি নো-গো। যতক্ষণ না ট্রিক্স একটি টার্বো-সামঞ্জস্যপূর্ণ ইন্টারফেস অর্জন করে, ততক্ষণ এর আশেপাশে কোন উপায় নেই।

দ্বিতীয় ক্যাচ হল এটি Trix এর undo ব্যবহার করে না কার্যকারিতা (কিন্তু এটি যেকোনো ট্রিক্স সংযুক্তির ক্ষেত্রে সত্য)। একইভাবে, অভ্যন্তরীণ API টি টুইক করার পরিবর্তে আপস্ট্রিম পরিবর্তনের জন্য অপেক্ষা করা বুদ্ধিমানের কাজ হবে।

রেপ আপ

এই পোস্টে, আমরা অ্যাকশন টেক্সট সংযুক্তিগুলির মূল বিষয়গুলিকে দ্রুত দেখে নেওয়া শুরু করেছি৷ তারপরে আমরা টার্বো ফ্রেমগুলি ব্যবহার করে এটিকে টুইক করার আগে একটি ActionText মডেলে একটি টেবিল যুক্ত করেছি। অবশেষে, আমরা ট্রিক্স ব্যবহারের কিছু সীমাবদ্ধতা স্পর্শ করেছি।

প্রদত্ত যে Trix v2 চলছে, CoffeeScript থেকে প্লেইন আধুনিক JavaScript-এ একটি অনুবাদ সমন্বিত, এখন এটির Turbo সামঞ্জস্যের সমাধান করার জন্য একটি ভাল সময় হবে৷ বর্তমানে, এই ধরনের একটি মোড়ক দেখতে কেমন হতে পারে তার সুযোগ আমার সামর্থ্যের বাইরে, তবে এটি নিশ্চিতভাবে সুযোগের জানালার মতো দেখাচ্ছে৷

শুভ কোডিং!

পি.এস. আপনি যদি রুবি ম্যাজিক পোস্টগুলি প্রেস থেকে বের হওয়ার সাথে সাথে পড়তে চান তবে আমাদের রুবি ম্যাজিক নিউজলেটারে সাবস্ক্রাইব করুন এবং একটি পোস্ট মিস করবেন না!