Wordgard: ProseMirror के निर्माता का ब्राउज़र के लिए rich text editor

 (wordgard.net)
1 पॉइंट द्वारा GN⁺ 5 시간 전 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Wordgard ब्राउज़र में rich text editor बनाने के लिए एक open source JavaScript लाइब्रेरी है, जो ProseMirror के निर्माता द्वारा बनाए गए नए editor foundation पर आधारित है
  • यह free-form HTML editor की तुलना में document structure control पर ज़्यादा ध्यान देती है, जिससे developer यह बारीकी से तय कर सकते हैं कि किस तरह का content और semantic structure अनुमति होगी
  • जटिल custom editor को ध्यान में रखते हुए यह schema-based model और extension-केंद्रित संरचना प्रदान करती है, और ज़रूरत के अनुसार फीचर्स को बदला या संशोधित किया जा सकता है
  • accessibility, internationalization, RTL·bidirectional documents, structured content, functional style, और collaborative editing जैसी आवश्यकताओं को editor foundation स्तर पर संभालती है
  • MIT लाइसेंस वाला permissive open source प्रोजेक्ट है, लेकिन bug reports का स्वागत करता है और Pull request स्वीकार नहीं करता

document structure को नियंत्रित करने वाला editor foundation

  • Wordgard ब्राउज़र के भीतर rich text editor लागू करने के लिए एक open source JavaScript लाइब्रेरी है
  • यह free-form HTML editor नहीं, बल्कि developer को समर्थित content के प्रकार और document structure को सटीक रूप से नियंत्रित करने वाला semantic rich text editor system है
  • यह document structure को बारीकी से परिभाषित करने और custom document elements बनाने के लिए schema-based approach प्रदान करता है
  • programming interface को सामान्य उपयोगिता और flexibility को ध्यान में रखकर डिज़ाइन किया गया है, ताकि इसे बड़े requirements वाले custom editor की foundation के रूप में इस्तेमाल किया जा सके

extensibility, accessibility, और collaboration features

  • editor की अधिकांश सुविधाएँ extension के रूप में लागू की गई हैं, इसलिए यदि वे आवश्यकता के अनुसार न हों तो उन्हें बदला या संशोधित किया जा सकता है
  • accessibility features screen reader users, केवल keyboard इस्तेमाल करने वाले users, और mobile device environments को ध्यान में रखती हैं, साथ ही UI internationalization भी सपोर्ट करती हैं
  • दाएँ से बाएँ लिखी जाने वाली भाषाओं के लिए content और interface दोनों में direction awareness सपोर्ट करती है, और bidirectional content तथा RTL documents को संभाल सकती है
  • document tree में tables, nested lists, captions वाले figure, और custom structures जैसे structured content शामिल हो सकते हैं
  • system का बड़ा हिस्सा स्पष्टता और testability के लिए functional style में लिखा गया है
  • कई users एक ही document को एक साथ संपादित कर सकते हैं और concurrent edits को merge करने वाली collaborative editing को सपोर्ट करता है

लाइसेंस और प्रोजेक्ट संचालन

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 5 시간 전
Hacker News की राय

  • ज़्यादातर लोग शायद “क्यों?” जानना चाहेंगे। यह दस्तावेज़ ProseMirror से अंतर बताता है, इसलिए उस सवाल का सबसे नज़दीकी जवाब यही लगा: https://wordgard.net/docs/prosemirror/
    ध्यान देने वाली एक बात यह है कि कोई upgrade path नहीं है। ProseMirror के साथ कई concepts साझा हैं, लेकिन migrate करने के लिए काफी काम करना पड़ेगा। Obsidian CodeMirror-आधारित है, इसलिए शायद नहीं बदलेगा, लेकिन tiptap.dev जैसी जगहों पर असर हो सकता है
    @merijn, जानना चाहूँगा कि क्या आप समझा सकते हैं कि switching cost उठाने लायक Wordgard क्यों है
    संशोधन: देखा कि Marijn के निजी ब्लॉग में कई मुद्दों पर बात की गई है, और बेहतर context के लिए https://marijnhaverbeke.nl/blog/wordgard-0.1.html को HN पर submit किया है

    • “क्या Wordgard switching cost उठाने लायक है?” इसका जवाब शायद नहीं भी हो सकता है। अगर आप ProseMirror से संतुष्ट हैं, तो ProseMirror ही इस्तेमाल करते रहें, और मैं उसे support करता रहूँगा
      लेकिन ब्लॉग पोस्ट में बताए मुताबिक, ProseMirror में जिन कुछ समस्याओं से सामना हुआ, उनसे बचने के लिए काफी नई design insights जमा हो गई थीं, इसलिए नया iteration बनाना चाहा
      वेबसाइट के docs section में ब्लॉग पोस्ट का link जोड़ दूँगा
      और नाम merijn नहीं, marijn है
    • ब्लॉग में लिखा है, “अब ProseMirror वाला pun भी मुझे खास पसंद नहीं है। मतलब CodeMirror, लेकिन prose के लिए, समझे?” तो अब शायद किसी के Codegard बनाने की बारी है
    • असली दिलचस्प सवाल है, “switching cost उठाने लायक यह क्यों है?” इससे भी ज़रूरी, इसे बस ProseMirror v2 क्यों नहीं बनाया गया
      landing page पर “क्या” से ज़्यादा “क्यों” की जानकारी चाहिए लगती है

  • editor से अलग, design करने वाले artist ने सच में impress किया। बहुत polished और तुरंत ध्यान खींचने वाला: https://kamilastankiewicz.com/

    • मेरी भी यही राय है। सच में खूबसूरत है, और सोच रहा हूँ कि मौजूदा website में ऐसी illustrations जोड़ने में कितना खर्च आएगा
    • graphics हैरान कर देने वाले अच्छे हैं और थोड़ा Ghibli feel भी देते हैं। rich text editor के context में यह कहना अजीब लगता है

  • लगभग 25 साल पहले स्कूल newspaper के लिए PHP-Nuke site चलाने के लिए WYSIWYG editor सेट करना बड़ी बाधा था, और याद है कि आखिरकार उसे पार कर लिया था
    ऐसी functionality के लिए 15 साल पहले ही पास हो चुका कोई web standard implementation न होना समझ से बाहर है

    • contenteditable है, और Wordgard या ProseMirror जैसी चीज़ें मूल रूप से उसी के ऊपर बनी हैं। बाकी हिस्सा ज़्यादातर user interface और उन systems के साथ interoperability है जो arbitrary HTML input नहीं चाहते
    • लंबे समय तक browser vendors साधारण text selection behavior की details पर भी सहमत नहीं हो पाए

  • यह हैरान करने लायक बढ़िया दिखता है
    हाल ही में कुछ ऐसा ही ढूँढ रहा था और आखिरकार खुद बना लिया, जिसमें block-based Operational Transformation (OT) से local server पर sync किया और remote server के लिए diff-based sync जोड़ा
    system guide पढ़ते हुए लगातार सिर हिला रहा हूँ। समानताएँ और contrasts देखकर काफी validation जैसा महसूस हो रहा है

    • ProseMirror ने, और शायद Wordgard ने भी, बहुत सारी चीज़ें सही की हैं

  • एक बहुत basic area है जहाँ हर editor fail हुआ है: क्या iPhone से editor के अंदर पूरा वाक्य type किया जा सकता है
    Wordgard यह test पास नहीं कर पाया। autocorrect या keyboard suggestions से आने वाला input निगल लिया जाता है, और partially typed या गलत spelling वाले words delete हो जाते हैं

    • ProseMirror, और sibling comment में बताए Lexical को भी, यह हिस्सा अच्छी तरह संभालना चाहिए
      mobile Safari और Android Chrome अपने desktop sibling browsers के विपरीत बहुत अजीब behavior करते हैं, और standards को भी काफी ढीले ढंग से लेते हैं। इसलिए ठीक से काम कराने के लिए अक्सर लंबी tail वाले workaround code की ज़रूरत पड़ती है
      Wordgard भी आखिरकार वहाँ पहुँचेगा, लेकिन first release से पहले focus architecture पर था
    • कुछ साल पहले web-based rich text editors evaluate किए थे। desktop पर सभी ठीक दिखे, लेकिन mobile पर जो भी try किया, सब गड़बड़ था
      selection नहीं होता, autocorrect टूट जाता, text पर tap करने से cursor move नहीं करता, input रुक जाता, element focus खो दे फिर भी keyboard गायब नहीं होता—ऐसा सब था
      पिछले दशकों में web में सही rich text element जोड़ने की कई कोशिशें हुई हैं, लेकिन पता नहीं सब क्यों fail हुईं। शायद यह बड़ा, complex और बिना reward वाला काम है
      proper native rich text support web की बड़ी blind spots में से एक है। native platforms ने यह समस्या दशकों पहले हल कर ली थी

  • करीब 6 साल पहले @ style remote resource autocomplete, यानी दूसरे users या documents को reference करने की capability, research और implement करने में बहुत मेहनत की थी। इस editor का extension model ProseMirror का evolved रूप लगता है
    अच्छा होगा अगर यह dinosaur example के आधार पर खुद बनाने वाली चीज़ न होकर built-in default feature हो। ऐसी text editor library इस्तेमाल करते समय मेरा number one use case यही होता है, और उसके बाद WYSIWYG

    • @ mention style built-in हो और सिर्फ API दिया जाए, तो बढ़िया होगा
      first-class mobile support भी उतना ही ज़रूरी है

  • ProseMirror को TipTap के साथ इस्तेमाल करते समय दिक्कत यह थी कि document के JSON representation को programmatically manipulate करके data extract करना बहुत बार करना पड़ता है। इसके लिए statically typed representation चाहिए होता है, या कम से कम strongly preferred हो जाता है
    ProseMirror में इसके लिए कोई खास mechanism नहीं है, इसलिए आखिरकार दो में से एक करना पड़ा

    1. schema को दो बार define किया। एक बार ProseMirror में, एक बार Zod जैसी चीज़ में, और फिर यह सुनिश्चित करने के लिए ढेर सारे equivalence tests रखे कि दोनों schemas match करते हैं
    2. एक meta schema definition layer बनाई जो ProseMirror schema output कर सके, लेकिन standard schema spec https://standardschema.dev/ को follow करे। यह approach Tiptap जैसी चीज़ इस्तेमाल न करने पर ज़्यादा practical है
      Wordgard अभी try नहीं किया है, इसलिए नहीं जानता कि यह इस समस्या को handle करता है या नहीं, लेकिन यह एक pain point है जिसे solve किया जाए तो अच्छा होगा

  • website का artwork खूबसूरत है। ध्यान खींचने का यह तरीका जैसे फिर से भूला हुआ याद आ गया हो

    • “AI 0% included” भी है। यह artist सच में कमाल है
    • हर तरफ AI garbage भरे होने के बीच हाथ से बनाई खूबसूरत illustrations देखना सच में refreshing है

  • web पर WYSIWYG मुझे पसंद नहीं। forum post को लंबा और tedious तरीके से format करो और tab बंद कर दो तो सब गायब
    local text editor इस्तेमाल करके web form में Ctrl+V से paste करना पसंद करता हूँ। Markdown हो तो ऐसा किया जा सकता है

    • कुछ platforms को localStorage से यह समस्या हल करते देखा है। type करते समय “draft” auto-save करते हैं, और page फिर से खोलने पर naturally restore कर देते हैं
      गलती से tab बंद करने के बाद पहली बार यह अनुभव हुआ तो सच में सुखद surprise था
    • Linear देखिए। मेरा उनसे संबंध नहीं है, लेकिन कल ही गलती से dialog बंद कर दिया था और फिर issue create पर क्लिक किया तो मेरा लिखा लंबा text जस का तस था
      point यह है कि यह tech problem नहीं, product problem है
    • परिस्थिति पर निर्भर करता है। मेरे blog में web-based editor है, लेकिन वह बस Markdown इस्तेमाल करता है और preview जोड़ता है, इसलिए described workflow जैसा ही है
      notes app में मैंने WYSIWYG इस्तेमाल करने का फैसला किया, क्योंकि split view के लिए जगह नहीं है और मैं सिर्फ raw Markdown भी नहीं देखना चाहता था
      WYSIWYG से सबसे बड़ी शिकायत यह है कि वह बाधा बन सकता है। जैसे verbatim block बना दिया और कभी-कभी उस block से बाहर निकल ही नहीं पाते। Teams की बात कर रहा हूँ। शायद इसी वजह से LaTeX इतना पसंद था
    • ProseMirror और दूसरे editors के लिए अच्छे backends पहले से मौजूद हैं। configure करना मुश्किल नहीं है
    • सहमत हूँ, लेकिन बहुत लोग WYSIWYG पसंद करते हैं। सरल तरीका यह है कि कई HTML editors या Markdown editors की तरह side-by-side view दे दिया जाए

  • काफी समय बाद असली art देखकर सच में खुशी हुई। अच्छा लग रहा है