पक रिएक्ट के लिए मेज़र्ड द्वारा निर्मित ओपन-सोर्स विज़ुअल एडिटर है - बिल्डर.आईओ, वर्डप्रेस और अन्य WYSIWYG टूल का एक स्व-होस्टेड विकल्प।

हम GitHub पर 5,000 सितारों का जश्न मना रहे हैं! हमारे अद्भुत समुदाय को धन्यवाद!

पक v0.16 एक बड़ी रिलीज है, जो हेडलाइन अनुमति एपीआई और - आपने अनुमान लगाया - जीवन की गुणवत्ता में सुधार पेश करती है। इसे तैयार करने में थोड़ा समय लगा, और हम आपके धैर्य और समर्थन की सराहना करते हैं।

• अनुमतियाँ: नई अनुमतियों और रिज़ॉल्वपर्मिशन एपीआई के माध्यम से डुप्लिकेशन, ड्रैगिंग, डिलीट जैसी सुविधाओं को टॉगल करें।
• एक्शन बार ओवरराइड: एक्शनबार ओवरराइड का उपयोग करके कस्टम एक्शन बार बनाएं, या नए घटक का उपयोग करके डिफ़ॉल्ट का विस्तार करें।
• आईफ्रेम स्टाइल इंजेक्शन: नए आईफ्रेम ओवरराइड के माध्यम से शैलियों को सीधे इंजेक्ट करने, या अन्य परिवर्तन करने के लिए आईफ्रेम दस्तावेज़ तक पहुंचें। हमने सामान्य इमोशन उपयोग-मामले के लिए इमोशन-कैश प्लगइन भी पेश किया।
• इतिहास इंजेक्शन: नए एपीआई की एक श्रृंखला के माध्यम से पूर्ववत/पुनः इतिहास को इंजेक्ट करें
• क्रियाओं पर प्रतिक्रिया: ऑनएक्शन कॉलबैक के माध्यम से पक द्वारा भेजी गई क्रियाओं पर प्रतिक्रिया दें।
• वैकल्पिक फ़ील्ड: वैकल्पिक प्रॉप्स को अब फ़ील्ड में परिभाषित करने की आवश्यकता नहीं है, क्योंकि उन्हें परिभाषित किया जा सकता है

आज ही अपग्रेड करें या इसके साथ शुरुआत करें:

npx create-puck-app@latest

अनुमतियां

अनुमतियाँ आपको विश्व स्तर पर, प्रति-घटक के आधार पर या गतिशील रूप से कोर पक कार्यक्षमता को टॉगल करने में सक्षम बनाती हैं। इस पर उनके प्रयासों के लिए @xaviemirmon को बहुत-बहुत धन्यवाद।

export function Editor() {
  return (
    
  );
}

एक्शन बार ओवरराइड

नया एक्शनबार ओवरराइड आपको एक कस्टम एक्शन बार ओवरले बनाने या घटक का उपयोग करके डिफ़ॉल्ट को विस्तारित करने में सक्षम बनाता है:

const overrides = {
  actionBar: ({ children }) => (
    
      {/* Render default actions */}
      {children}

      {/* Render new actions */}
      
         console.log("Clicked!")}>
          ★
        
      
    
  ),
};

आईफ्रेम शैली इंजेक्शन

iframe ओवरराइड आपको iframe दस्तावेज़ तक पहुंचने में सक्षम बनाता है, जिससे शैलियों को सिर में इंजेक्ट करना संभव हो जाता है:

const overrides = {
  iframe: ({ children, document }) => {
    useEffect(() => {
      if (document) {
        document.body.setAttribute("style", "background: hotpink;");
      }
    }, [document]);

    return {children}>;
  },
};

नया इमोशन-कैश प्लगइन आईफ्रेम के अंदर इमोशन कैश बनाने के लिए इस एपीआई का उपयोग करता है, जिससे पक को किसी भी इमोशन-आधारित घटक लाइब्रेरी के साथ उपयोग करना आसान हो जाता है।

इतिहास इंजेक्शन

initialHistory प्रोप के माध्यम से, या गतिशील रूप से setHistoryies और setHistoryIndex फ़ंक्शंस के माध्यम से अपना स्वयं का पूर्ववत/पुनः इतिहास प्रदान करने के लिए नए इतिहास इंजेक्शन एपीआई का उपयोग करें। usePuck().history।

const historyState = {
  data: {
    root: {
      props: { title: "My History" },
    },
  },
};

export function Editor() {
  return (
    
  );
}

क्रियाओं पर प्रतिक्रिया करें

ऑनएक्शन एपीआई आपको भेजे जाने पर पक की आंतरिक कार्रवाइयों पर प्रतिक्रिया करने में सक्षम बनाता है:

export function Editor() {
  return (
     {
        if (action.type === "insert") {
          console.log("New component was inserted", appState);
        }
      }}
    />
  );
}

परिवर्तन तोड़ना

इतिहास.डेटा अब इतिहास.राज्य है

यूजपक हिस्ट्री एपीआई का उपयोग करते समय, डेटा का नाम अब बदल दिया गया है।

इतिहास.आईडी अब वैकल्पिक है (टाइपस्क्रिप्ट)

उपयोग करते समय Puck इतिहास API आईडी अब वैकल्पिक है। पक हमेशा एक आईडी उत्पन्न करेगा, लेकिन टाइपस्क्रिप्ट शिकायत कर सकता है।

रिज़ॉल्वर में खाली होने पर लास्टडेटा अब {} के बजाय शून्य के रूप में लौटाया जाता है

रिज़ॉल्यूशनडेटा या रिज़ॉल्वफ़ील्ड फ़ंक्शंस के लिए प्रदान किए गए अंतिमडेटा विकल्प का उपयोग करते समय, और कोई पिछला डेटा नहीं है, अंतिमडेटा अब {} के बजाय शून्य हो जाएगा।

पूर्ण चेंजलॉग

विशेषताएँ

• घटक नियंत्रण जोड़ने के लिए एक्शनबार ओवरराइड जोड़ें (48ec0d7)
• /rsc बंडल (d21eba6) को प्रतिस्थापित करते हुए स्वचालित RSC निर्यात जोड़ें
• Drawer.Item (cad95b8) में isDisabled प्रोप जोड़ें
• पुक हुक (01703ए9) का उपयोग करने के लिए सामान्य प्रकार जोड़ें
• स्टाइल इंजेक्शन के लिए आईफ्रेम ओवरराइड जोड़ें (7सीएसी376)
• पक में प्रारंभिक इतिहास प्रोप जोड़ें (54बी5ए87)
• राज्य परिवर्तनों को ट्रैक करने और उन पर प्रतिक्रिया देने के लिए ऑनएक्शन एपीआई जोड़ें (c7007ac)
• अनुमतियां एपीआई जोड़ें (ए43914डी)
• इमोशन कैश इंजेक्ट करने के लिए प्लगइन जोड़ें (f8a88b9)
• रिज़ॉल्यूशनपरमिशन एपीआई जोड़ें (f0655f0)
• iframe config (bc81d9c) में waitForStyles विकल्प जोड़ें
• नया आइटम डालने पर रिज़ॉल्वडेटा पर कॉल करें (3298831)
• वैकल्पिक प्रॉप्स के लिए फ़ील्ड अनिवार्य नहीं है (5a219ef)
• ओवरराइड्स में उपयोग के लिए एक्शनबार घटक निर्यात करें (04fd6c5)
• उपयोगकर्ता कॉन्फ़िगरेशन (50045बीबी) से डेटा प्रकार का अनुमान लगाएं
• इतिहास प्रकार में आईडी को वैकल्पिक बनाएं (ब्रेकिंग चेंज) (d917229)
• ईएस मॉड्यूल बिल्ड प्रदान करें (एफएफ9076बी)
• इतिहास.डेटा का नाम बदलकर इतिहास.राज्य कर दें (ब्रेकिंग चेंज) (बी09244सी)
• यदि आईफ्रेम लोड 500 एमएस से अधिक लेता है तो स्पिनर दिखाएं (सीएफईसीएफ54)
• पुक इतिहास एपीआई (c8b2807) के उपयोग को सुव्यवस्थित करें
• "अगली" रेसिपी को टाइपस्क्रिप्ट@5.5.4 (60fe631) पर अपग्रेड करें

कंप्यूटर प्रोग्राम या प्रणाली में बग को दूर करना

• पक 404 (2सी52डी27) को रोकने के लिए अगली रेसिपी में फ़ेविकॉन जोड़ें
• बाहरी फ़ील्ड में अनुपलब्ध केवल पढ़ने योग्य स्थिति जोड़ें (bf1449d)
• हमेशा कंपोनेंट इंसर्ट पर इतिहास रिकॉर्ड करें (88c5ab6)
• अगली रेसिपी में रूट को कैश/संपादित न करें (94f16b2)
• यदि फॉर्म (f761e5f) में पक का उपयोग किया गया है तो बटन सबमिट न करें
• सुनिश्चित करें कि डेमो प्रकार टाइपस्क्रिप्ट@5 (958डीसी25) से संतुष्ट हैं
• अनुपलब्ध प्लगइन प्रकार निर्यात करें (eb42734)
• यदि डेटा में घटक कॉन्फ़िगरेशन (0daf478) से गायब है तो क्रैश को ठीक करें
• मैंटाइन (538सीबी05) जैसे कुछ फ्रेमवर्क के लिए आईफ्रेम सीएसएस की लचीलापन में सुधार करें
• कॉन्फिग और डेटा प्रकारों को अधिक मजबूत बनाएं (6बीसीएफ555)
• कुछ फ्रेमवर्क के साथ प्लगइन्स का उपयोग करते समय अनंत लूप को रोकें (3870871)
• टेलविंड को व्यूपोर्ट ज़ूम चयन (9151255) के साथ टकराव से रोकें
• रीमिक्स रेसिपी में बॉडी मार्जिन हटाएं (0898बी26)
• ऐप स्थिति (14419ईसी) के माध्यम से बदले जाने पर व्यूपोर्ट का आकार बदलें
• एक ही प्रकार की वस्तुओं के बीच स्विच करते समय फ़ील्ड को हल करें (a3518ca)
• रिज़ॉल्वर में खाली ऑब्जेक्ट के बजाय अंतिम डेटा को शून्य के रूप में लौटाएं (ब्रेकिंग चेंज) (648eb92)
• यदि शीर्षक-विश्लेषक शैलियाँ लोड नहीं हुई हैं तो चेतावनी दिखाएं (4e7110बी)
• फील्डलेबल लेबल में सही रंग का उपयोग करें (b0469a1)

नये योगदानकर्ता

• @mkilpatrick ने https://github.com/measuredco/puck/pull/505 में अपना पहला योगदान दिया
• @nova4u ने https://github.com/measuredco/puck/pull/538 में अपना पहला योगदान दिया
• @antonmalyavkin ने https://github.com/measuredco/puck/pull/585 में अपना पहला योगदान दिया

पूर्ण चेंजलॉग: https://github.com/measuredco/puck/compare/v0.15.0...v0.16.0