Puck هو المحرر المرئي مفتوح المصدر لـ React الذي تم إنشاؤه بواسطة Measured - وهو بديل مستضاف ذاتيًا لـ builder.io وWordPress وأدوات WYSIWYG الأخرى.

نحتفل بحصولنا على 5000 نجمة على GitHub! شكرا لمجتمعنا الرائع!

يعد Puck v0.16 إصدارًا كبيرًا يقدم واجهة برمجة تطبيقات الأذونات الرئيسية و- كما خمنت - تحسينات في جودة الحياة. استغرق إعداد هذا الأمر بعض الوقت، ونحن نقدر سعة صدرك ودعمك.

• الأذونات: تبديل ميزات Puck مثل النسخ والسحب والحذف من خلال الأذونات الجديدة وواجهات برمجة تطبيقات ResolvePermissions.
• تجاوز شريط الإجراءات: قم بإنشاء أشرطة إجراءات مخصصة باستخدام تجاوز شريط الإجراءات، أو قم بتوسيع الشريط الافتراضي باستخدام مكون الجديد.
• إدخال نمط iframe: قم بالوصول إلى مستند iframe لإدخال الأنماط مباشرةً، أو إجراء تغييرات أخرى، عبر تجاوز iframe الجديد. لقد قدمنا ​​أيضًا المكوّن الإضافي لذاكرة التخزين المؤقت للعواطف لحالة استخدام العاطفة الشائعة.
• إدخال التاريخ: أدخل سجل التراجع/الإعادة عبر سلسلة من واجهات برمجة التطبيقات الجديدة
• الرد على الإجراءات: الرد على الإجراءات التي ترسلها Puck عبر رد الاتصال onAction.
• الحقول الاختيارية: لم تعد الدعائم الاختيارية مطلوبة للتعريف في الحقول، حيث يمكن تعريفها

الترقية اليوم أو البدء باستخدام:

npx create-puck-app@latest

الأذونات

تمكنك الأذونات من تبديل وظائف Puck الأساسية عالميًا، على أساس كل مكون أو ديناميكيًا. شكرًا جزيلًا لـxaviemirmon على جهوده في هذا الشأن.

export function Editor() {
  return (
    
  );
}

تجاوز شريط الإجراءات

يمكّنك تجاوز شريط الإجراءات الجديد من إنشاء تراكب شريط إجراءات مخصص، أو توسيع الشريط الافتراضي باستخدام مكون :

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

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

حقن نمط iframe

يمكّنك تجاوز iframe من الوصول إلى مستند iframe، مما يجعل من الممكن إدخال الأنماط في الرأس:

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

    return {children}>;
  },
};

يستخدم البرنامج الإضافي الجديد لذاكرة التخزين المؤقت للعواطف واجهة برمجة التطبيقات هذه لإنشاء ذاكرة تخزين مؤقت للعواطف داخل إطار iframe، مما يجعل من السهل استخدام Puck مع أي مكتبة مكونة تعتمد على المشاعر.

حقن التاريخ

استخدم واجهات برمجة التطبيقات الجديدة لإدخال التاريخ لتوفير سجل التراجع/الإعادة الخاص بك عبر الخاصية الأولية للتاريخ، أو ديناميكيًا عبر وظائف setHistories وsetHistoryIndex من usePuck().history.

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

export function Editor() {
  return (
    
  );
}

الرد على الأفعال

تمكّنك واجهة برمجة تطبيقات onAction من التفاعل مع إجراءات Puck الداخلية فور إرسالها:

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

كسر التغييرات

History.data أصبح الآن History.state

عند استخدام واجهة برمجة تطبيقات سجل usePuck، تتم الآن إعادة تسمية البيانات إلى الحالة.

أصبح History.id الآن اختياريًا (TypeScript)

عند استخدام معرف usePuck History API أصبح الآن اختياريًا. سوف يقوم Puck دائمًا بإنشاء معرف، ولكن قد يشتكي TypeScript.

يتم الآن إرجاع lastData كقيمة خالية بدلاً من {} عندما تكون فارغة في وحدات الحل

عند استخدام خيار lastData المقدم لوظائف ResolveData أو ResolveFields، ولا توجد بيانات سابقة، ستصبح lastData الآن فارغة بدلاً من {}.

سجل التغيير الكامل

سمات

• إضافة تجاوز شريط الإجراءات لإضافة عناصر التحكم في المكونات (48ec0d7)
• إضافة تصدير RSC تلقائي، واستبدال حزمة /rsc (d21eba6)
• إضافة دعامة معطلة إلى الدرج.العنصر (cad95b8)
• إضافة نوع عام للاستخدام خطاف بوك (01703a9)
• إضافة تجاوز iframe لحقن النمط (7cac376)
• إضافة خاصية التاريخ الأولي إلى Puck (54b5a87)
• إضافة onAction API لتتبع تغييرات الحالة والتفاعل معها (c7007ac)
• إضافة واجهة برمجة تطبيقات الأذونات (a43914d)
• إضافة مكون إضافي لإدخال ذاكرة التخزين المؤقت للعواطف (f8a88b9)
• إضافة واجهة برمجة تطبيقات ResolvePermissions (f0655f0)
• إضافة خيار waitForStyles إلى تكوين iframe (bc81d9c)
• استدعاء ResolveData عند إدراج عنصر جديد (3298831)
• لا تقم بتفويض الحقول للدعائم الاختيارية (5a219ef)
• تصدير مكون ActionBar لاستخدامه في التجاوزات (04fd6c5)
• استنتج نوع البيانات من تكوين المستخدم (50045bb)
• جعل المعرف اختياريًا في نوع السجل (تغيير عاجل) (d917229)
• توفير إصدار وحدة ES (ff9076b)
• إعادة تسمية History.data إلى History.state (تغيير عاجل) (b09244c)
• إظهار الدوار إذا كان تحميل iframe يستغرق أكثر من 500 مللي ثانية (cfecf54)
• تبسيط واجهة برمجة تطبيقات سجل usePuck (c8b2807)
• ترقية الوصفة "التالية" إلى [email protected] (60fe631)

إصلاحات الأخطاء

• أضف الرمز المفضل إلى الوصفة التالية لمنع Puck 404 (2c52d27)
• إضافة حالة القراءة فقط المفقودة إلى الحقول الخارجية (bf1449d)
• سجل السجل دائمًا عند إدراج المكون (88c5ab6)
• لا تقم بتخزين/تحرير المسار في الوصفة التالية (94f16b2)
• لا ترسل الأزرار في حالة استخدام Puck في النموذج (f761e5f)
• التأكد من أن الأنواع التجريبية راضية عن TypeScript@5 (958dc25)
• تصدير نوع البرنامج المساعد المفقود (eb42734)
• إصلاح العطل إذا كان مكون البيانات مفقودًا من التكوين (0daf478)
• تحسين مرونة iframe CSS لبعض أطر العمل، مثل Mantine (538cb05)
• جعل أنواع التكوين والبيانات أكثر قوة (6bcf555)
• منع التكرار اللانهائي عند استخدام المكونات الإضافية مع بعض الأطر (3870871)
• منع الريح الخلفية من التعارض مع تحديد تكبير/تصغير إطار العرض (9151255)
• إزالة هامش الجسم في وصفة الريمكس (0898b26)
• تغيير حجم إطار العرض عند تغييره عبر حالة التطبيق (14419ec)
• حل الحقول عند التبديل بين العناصر من نفس النوع (a3518ca)
• إرجاع البيانات الأخيرة ككائن فارغ بدلاً من كائن فارغ في أدوات الحل (تغيير مفاجئ) (648eb92)
• إظهار تحذير إذا لم يتم تحميل أنماط محلل العناوين (4e7110b)
• استخدام اللون الصحيح في تسميات FieldLabel (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