बड़े अपडेट: GrapesJS के लिए TinyMCE 8 और प्लेसहोल्डर 2.0

TinyMCE 8 इनलाइन टेक्स्ट एडिटर - एक नया अध्याय

प्लगइन अब 8TinyMCE पर चलता है - सबसे सक्षम WYSIWYG संपादकों में से एक की नवीनतम रिलीज। हमने पैकेज का नाम वही रखा, लेकिन हुड के नीचे यह एक मौलिक रूप से अलग प्लगइन है।

क्या नया

बॉक्स से बाहर दो संपादन मोड। ब्लॉक तत्वों (,<p><div> , , <li>आदि) को पूर्ण टूलबार मिलता है - स्वरूपण, इंडेंटेशन, संरेखण, सूचियाँ, लिंक। इनलाइन तत्व (, <a><span>, <button>, -<h1>)<h5> एक कॉम्पैक्ट inline_toolbarप्राप्त करते हैं, और - महत्वपूर्ण रूप से - एक इनलाइन तत्व के अंदर एंटर दबाने से अब तत्व से बाहर निकलने के बजाय सम्मिलित होता है।<br>

प्रथम श्रेणी GrapesJS स्टूडियो समर्थन। नया parentToolbar: true विकल्प पैरेंट दस्तावेज़ में टूलबार को प्रस्तुत करता है, जो स्टूडियो चयन ओवरले और घटक बैज के साथ z-इंडेक्स संघर्षों को समाप्त करता है। टूलबार तब भी दिखाई देता है जब फोकस iframe और TinyMCE ड्रॉपडाउन के बीच चलता है - कोई और झिलमिलाहट नहीं।

गंभीर तकनीकी ओवरहाल। स्रोत अब बंडल प्रकार .d.ts की परिभाषाओं के साथ एक पूर्ण TypeScript पुनर्लेखन है। हमने मेमोरी लीक और एक XSS भेद्यता को ठीक किया जो शाखा में 0.1.x रहता था। स्पष्ट टियरडाउन के लिए एक नई सार्वजनिक destroy() विधि है - प्रत्येक ईवेंट श्रोता, MutationObserver, और टूलबार DOM नोड को सफाई से जारी किया जाता है।

लचीला कॉन्फ़िगरेशन। टिनी क्लाउड सीडीएन और एक स्व-होस्टेड TinyMCE दोनों के साथ काम करता है। नया tinymce विकल्प किसी भी मूल tinymce.init() पैरामीटर के लिए एक पास-थ्रू है - license_key, font_family_formatscontent_styletoolbar_modeजो कुछ भी आपको चाहिए। टूलबार या तो एक स्ट्रिंग ()'bold italic | link' या बहु-पंक्ति लेआउट के लिए स्ट्रिंग्स की एक सरणी स्वीकार करता है।

अनुकूलता

• GrapesJS: ≥ 0.21, < 1.0
• TinyMCE: 8.x
• बंडल: ईएसएम + यूएमडी + TypeScript घोषणाएं
• ओपन-सोर्स GrapesJS और GrapesJS स्टूडियो एसडीके दोनों के साथ काम करता है

GJS.Market पर प्लगइन पेज →

प्लेसहोल्डर 2.0 — प्रीमियम ड्रैग अनुभव

ड्रैगिंग करते समय GrapesJS दिखाता है कि डिफ़ॉल्ट ग्रे आयत वास्तव में एक प्रीमियम अनुभव नहीं है। प्लेसहोल्डर 2.0 इसे ब्लॉक के लाइव, पूर्ण आकार के पूर्वावलोकन से बदल देता है - इसकी सभी शैलियों को लागू करने के साथ - साथ ही चिकनी एनिमेशन और ड्रॉप-ज़ोन हाइलाइटिंग। उपयोगकर्ता वास्तव में देखते हैं कि वे क्या रख रहे हैं और वास्तव में यह कहां उतरेगा।

v1.5.0 में क्या है

यह कोई पैच नहीं है - यह एक ग्राउंड-अप पुनर्निर्माण है। वही व्यवहार जिसे आप पसंद करते थे, नीचे आधुनिक टूलचेन।

• TypeScript-प्रथम - तत्काल स्वत: पूर्ण के लिए बंडल घोषणाओं .d.ts के साथ पूर्ण स्रोत पुनर्लेखन।
• GrapesJS 0.21 और 0.22 बॉक्स से बाहर काम करते हैं।
• ~8 KB gzipped - Vite-संचालित बिल्ड, पुराने वेबपैक बंडल के आकार का लगभग आधा।
• 10 अंतर्निहित एनीमेशन प्रीसेट + अपने स्वयं के @keyframesलिए समर्थन।
• कस्टम प्लेसहोल्डर मोड — यदि कोई लाइव पूर्वावलोकन आपके UX के लिए सही नहीं है, तो इसे अपने स्वयं के HTML/CSS (उदाहरण के लिए एक पतला ड्रॉप संकेतक) के लिए स्वैप करें।
• कॉन्फ़िगर करने योग्य ड्रॉप-ज़ोन रंग के माध्यम से dropZoneColor — अपने ब्रांड से मेल खाता है।
• ठीक समय flipDurationMsउजागर - , flipThresholdPx, और escapeDispatchDelayMs अब सार्वजनिक विकल्प हैं।
• साफ आंसू - idempotent, destroy()पर कोई लीक श्रोता editor.destroy().
• विकल्प सत्यापन - अमान्य मान चुपचाप टूटने के बजाय स्पष्ट console.warn के साथ डिफ़ॉल्ट पर वापस आ जाते हैं।
• Vitest पर 76 यूनिट + एकीकरण परीक्षण , साथ ही एक नाटककार E2E सुइट।
• फ़ायरफ़ॉक्स फिक्स - ड्रैग-आउटसाइड-कैनवास व्यवहार अब सभी प्रमुख ब्राउज़रों में विश्वसनीय है।
• GrapesJS स्टूडियो एसडीके संगतता - स्टूडियो संपादक के अंदर काम करता है।

हर वाइब के लिए 10 एनिमेशन

एक नरम Slidein (स्केल + फीका + अधिकतम-ऊंचाई) से और Zoom-in soft एक क्यूबिक-बेज़ियर ओवरशूट के साथ, एक नाटकीय Flip-in (3 डी एक्स-अक्ष फ्लिप) और एक उछलती Elastic drop लैंडिंग के साथ। और अगर कोई भी प्रीसेट फिट नहीं होता है, तो अपने स्वयं के प्लग इन करें - एक .animation क्लास के साथ पास customAnimation @keyframes करें, और प्लगइन इसे उठाता है।

जहां यह चमकता है

• SaaS पेज बिल्डर्स - उपयोगकर्ताओं को वास्तव में प्रीमियम ड्रैग-एंड-ड्रॉप फील देता है।
• सीएमएस संपादक - सामग्री ब्लॉक मूर्त लगते हैं।
• ईमेल बिल्डर्स - ड्रॉप से पहले ब्लॉक प्लेसमेंट दिखाई देता है।
• लैंडिंग-पेज टूल और GrapesJS स्टूडियो प्रोजेक्ट।

मूल से अपग्रेड क्यों करें

यदि आप अभी भी मूल प्लेसहोल्डर प्लगइन पर हैं: यह वेबपैक 3 + बैबेल 6 पर बनाया गया था और अब आधुनिक टूलचेन के साथ अच्छी तरह से नहीं खेलता है। कोई TypeScript नहीं, कोई प्रकार नहीं, कोई स्टूडियो एसडीके समर्थन नहीं, हार्डकोडेड रंग और समय, नहीं - destroy() और श्रोता संपादक उदाहरणों में लीक हो गए। v1.5.0 सार्वजनिक एपीआई को बदले बिना यह सब ठीक करता है, इसलिए माइग्रेशन को आपके एकीकरण को फिर से लिखने की आवश्यकता नहीं है।

→ प्लगइन पेज GJS.Market

आगे क्या होगा

दोनों प्लगइन्स अब एक ही आधुनिक नींव पर बैठते हैं: TypeScript, क्लीन टियरडाउन, कॉन्फ़िगरेशन सत्यापन, स्टूडियो एसडीके समर्थन। यही वह आधार है जिस पर हम सुविधाओं के अगले दौर का निर्माण करेंगे - बने रहें।

यदि आप पहले से ही इन प्लगइन्स के मालिक हैं, तो अपडेट आपके लाइसेंस में शामिल हैं - अपने GJS.Market खाते से नए संस्करण प्राप्त करें। यदि आप नहीं करते हैं, तो दोनों पर वर्तमान में छूट दी जाती है।

प्रश्न, बग रिपोर्ट, विचार - उन्हें हमारे रास्ते भेजें। हम सब कुछ पढ़ते हैं।

- द डेवफ्यूचर टीम