मुख्य कंटेंट तक स्किप करें

परिचय

@powerduck/md-editor ब्राउज़र में एम्बेड किया जा सकने वाला उच्च-प्रदर्शन Markdown एडिटर है। यह CodeMirror 6 संपादन क्षेत्र को markdown-it से बनने वाले लाइव प्रीव्यू के साथ जोड़ता है। इसमें KaTeX सूत्र, Markmap माइंड मैप, कोड हाइलाइटिंग, सूचना ब्लॉक, कॉन्फ़िगर करने योग्य टूलबार, कीबोर्ड शॉर्टकट, इमेज अपलोड हुक, @मेंशन और दस्तावेज़ लिंक डालने की सुविधा है।

  • पैकेज का नाम: @powerduck/md-editor
  • लाइसेंस: MIT
  • मॉड्यूल प्रारूप: ECMAScript मॉड्यूल (type: "module"), जिसमें ESM (dist/index.mjs) और CJS (dist/index.cjs) बिल्ड तथा टाइप घोषणाएँ (dist/index.d.ts) शामिल हैं।

मुख्य सुविधाएँ​

नीचे की सुविधाएँ लागू किए गए सोर्स मॉड्यूल के आधार पर बताई गई हैं:

  • Markdown संपादन: CodeMirror 6 के साथ Markdown सिंटैक्स हाइलाइटिंग और हल्की/गहरी हाइलाइट थीम।
  • KaTeX सूत्र: स्वतंत्र markdown-it प्लगइन से इनलाइन $...$ और ब्लॉक $$...$$ सूत्र। $5 जैसे मुद्रा मान अनुमान-आधारित नियमों से सूत्र पार्सिंग से बाहर रखे जाते हैं।
  • Markmap माइंड मैप: ```mindmap फ़ेंस वाले ब्लॉक से रेंडर होते हैं। markmap-lib और markmap-view डायनेमिक रूप से इम्पोर्ट होते हैं, इसलिए माइंड मैप न होने पर शुरुआती बंडल का आकार नहीं बढ़ाते।
  • कोड हाइलाइटिंग: highlight.js के साथ macOS शैली के तीन रंगीन बिंदुओं वाला हेडर, भाषा लेबल और एक क्लिक में कॉपी करने का बटन।
  • सूचना ब्लॉक: :::notice, :::info, :::tip, :::success, :::warning, :::danger के लिए आइकन और उपयुक्त रंग।
  • GitHub शैली का प्रीव्यू: github-markdown-css का उपयोग करता है।
  • पूर्ण टूलबार: 22 क्रियाएँ, इमेज/वीडियो/YouTube/तालिका डालने के डायलॉग, सूत्र और माइंड मैप टेम्पलेट चुनने की सुविधा तथा सभी शॉर्टकट दिखाने वाला सहायता डायलॉग।
  • कीबोर्ड शॉर्टकट: Mod, Windows/Linux पर Ctrl और macOS पर Cmd के अनुरूप है।
  • कॉन्फ़िगर करने योग्य टूलबार: शामिल किए जाने वाले आइटम की ऐरे या हर आइटम की सेटिंग (show, label, icon) से नियंत्रित होता है।
  • इमेज अपलोड हुक: एडिटर में इमेज पेस्ट या ड्रैग-ड्रॉप करने पर onImageUpload कॉल होता है।
  • @मेंशन ड्रॉपडाउन: mention विकल्पों से कॉन्फ़िगर होता है; चुने गए मेंशन प्रीव्यू में स्टाइल किए गए बैज के रूप में दिखते हैं।
  • दस्तावेज़ लिंक डालना: docLink से कॉन्फ़िगर होकर साधारण लिंक या :::doc-link प्रीव्यू कार्ड डालता है। मेटाडेटा अंतर्निहित लोडर या कस्टम हुक से आता है; अलग ओरिजिन की रिक्वेस्ट पर ब्राउज़र के CORS नियम लागू होते हैं।
  • वीडियो रेंडरिंग: इमेज सिंटैक्स में URL का अंत .mp4, .webm, .ogg या अन्य पहचाने गए एक्सटेंशन से होने पर <video controls> एलिमेंट बनता है।
  • स्वतंत्र रेंडरर: renderMarkdown(source, options) एडिटर माउंट किए बिना प्रीव्यू वाले ही प्लगइन और स्टाइल से HTML बनाता है।
  • ब्लॉक-स्तरीय क्रमिक रेंडरिंग: सोर्स को ATX शीर्षकों पर ब्लॉक में बाँटा जाता है और केवल बदले हुए ब्लॉक दोबारा रेंडर होते हैं। बाकी ब्लॉक मौजूदा DOM नोड दोबारा इस्तेमाल करते हैं, जिनमें पहले से आरंभ किए गए माइंड मैप SVG भी शामिल हैं। परिणाम सामग्री के हैश के आधार पर कैश होते हैं।
  • अनुकूली डिबाउंस: प्रीव्यू रेंडरिंग का विलंब दस्तावेज़ की लंबाई के अनुसार बदलता है, जिसका आधार 120 मिलीसेकंड और अधिकतम 600 मिलीसेकंड है।
  • दो संपादन मोड: simple में केवल संपादन और प्रीव्यू, बिना टूलबार के; complex में टूलबार और स्टेटस बार। मोड रनटाइम पर बदले जा सकते हैं।
  • दो थीम: light और dark, जिन्हें data-theme एट्रिब्यूट और CSS कस्टम प्रॉपर्टी से लागू किया जाता है।

आर्किटेक्चर का अवलोकन​

लाइब्रेरी दो इंटरफ़ेस प्रदान करती है:

  1. साधारण JavaScript क्लास: मुख्य API का केंद्र MarkdownEditor है, जिसे कंटेनर एलिमेंट के साथ बनाया जाता है। इसमें CodeEditor (CodeMirror रैपर), Renderer (markdown-it रैपर), प्रीव्यू के लिए IncrementalRenderer और complex मोड में Toolbar तथा StatusBar शामिल होते हैं। पॉपअप डायलॉग, @मेंशन कंट्रोलर और दस्तावेज़ लिंक कंट्रोलर ज़रूरत पर माउंट होने वाले मॉड्यूल हैं।

  2. React सबपाथ एक्सपोर्ट: MarkdownEditorReact, ./react से एक्सपोर्ट होने वाला forwardRef कंपोनेंट है। यह साधारण MarkdownEditor इंस्टेंस को रैप करता है, नियंत्रित और अनियंत्रित value उपयोग का समर्थन करता है तथा ref के माध्यम से आदेश-आधारित MarkdownEditorHandle देता है। React का प्रवेश बिंदु अलग है, इसलिए React न इस्तेमाल करने वाले प्रोजेक्ट को react और react-dom इंस्टॉल नहीं करने पड़ते।

रेंडरिंग में एक सिंक्रोनस markdown-it चरण है, जो माइंड मैप के लिए प्लेसहोल्डर HTML बनाता है, और एक एसिंक्रोनस आरंभीकरण चरण Renderer.hydrate है, जो उन्हें इंटरैक्टिव SVG आरेख में बदलता है। renderMarkdown सिंक्रोनस HTML लौटाता है; माइंड मैप SVG बनाने के लिए Renderer.render इस्तेमाल करें, HTML को DOM में डालें और फिर Renderer.hydrate कॉल करें। क्रमिक रेंडरर सीधे प्रीव्यू कंटेनर पर काम करता है।

ब्राउज़र समर्थन​

लाइब्रेरी DOM वाले आधुनिक ब्राउज़र के लिए है। CodeMirror 6, KaTeX और markmap-view पैकेज निर्भरताएँ हैं, ब्राउज़र की सुविधाएँ नहीं; इंटरैक्टिव माइंड मैप ResizeObserver इस्तेमाल करते हैं। उपलब्ध होने पर Clipboard API का उपयोग होता है। navigator.clipboard अनुपलब्ध होने पर, जैसे गैर-HTTPS वातावरण में, कोड ब्लॉक कॉपी करने के लिए document.execCommand('copy') इस्तेमाल होता है। माइंड मैप मॉड्यूल केवल वैश्विक ResizeObserver अनुपस्थित होने पर उसका खाली कार्यान्वयन जोड़ता है, ताकि इम्पोर्ट के समय उसके न होने की त्रुटि न आए; यह कार्यान्वयन वास्तविक आकार-परिवर्तन सूचनाएँ नहीं देता।

लाइसेंस​

@powerduck/md-editor MIT लाइसेंस के तहत जारी किया गया है।

अगले चरण​