Puck は、Measured によって構築された React 用のオープンソース ビジュアル エディターです。builder.io、WordPress、およびその他の WYSIWYG ツールに代わる自己ホスト型のツールです。

GitHub のスター数 5,000 を祝います!私たちの素晴らしいコミュニティに感謝します!

Puck v0.16 は大きなリリースであり、ヘッドライン パーミッション API と、ご想像のとおり、生活の質の向上を導入しています。これをまとめるのに時間がかかりましたが、忍耐とサポートに感謝します。

• 権限: 新しい権限とresolvePermissions APIを使用して、複製、ドラッグ、削除などのPuck機能を切り替えます。
• アクション バー オーバーライド: actionBar オーバーライドを使用してカスタム アクション バーを作成するか、新しい コンポーネントを使用してデフォルトのアクション バーを拡張します。
• iframe スタイルの挿入: iframe ドキュメントにアクセスしてスタイルを直接挿入するか、新しい iframe オーバーライドを介して他の変更を加えます。また、一般的な感情のユースケース用に感情キャッシュ プラグインも導入しました。
• 履歴の挿入: 一連の新しい API を介して元に戻す/やり直しの履歴を挿入します
• アクションに反応: onAction コールバックを介して Puck によってディスパッチされたアクションに反応します。
• オプションのフィールド: オプションの小道具は定義できるため、フィールドで定義する必要がなくなりました

今すぐアップグレードするか、次の方法で始めましょう:

npx create-puck-app@latest

権限

権限を使用すると、Puck のコア機能をグローバルに、コンポーネントごとに、または動的に切り替えることができます。 これに関して尽力してくれた @xaviemirmon に多大な感謝を申し上げます。

export function Editor() {
  return (
    
  );
}

アクションバーの上書き

新しい actionBar オーバーライドを使用すると、カスタム アクション バー オーバーレイを作成したり、 コンポーネントを使用してデフォルトのアクション バー オーバーレイを拡張したりできます:

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

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

iframe スタイルのインジェクション

iframe オーバーライドを使用すると、iframe ドキュメントにアクセスできるようになり、スタイルを head に挿入できるようになります:

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

    return {children}>;
  },
};

新しい感情キャッシュ プラグインは、この API を使用して iframe 内に感情キャッシュを作成し、感情ベースのコンポーネント ライブラリで Puck を簡単に使用できるようにします。

履歴の挿入

新しい履歴挿入 API を使用して、initialHistory プロパティを介して、または usePuck().history の setHistories および setHistoryIndex 関数を介して動的に独自の元に戻す/やり直し履歴を提供します。

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

export function Editor() {
  return (
    
  );
}

アクションに反応する

onAction API を使用すると、Puck の内部アクションがディスパッチされたときにそれに反応できます:

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

重大な変更

History.data は、history.state になりました。

usePuck 履歴 API を使用すると、データの名前が state に変更されるようになりました。

History.id がオプションになりました (TypeScript)

usePuck 履歴 API ID を使用する場合、オプションになりました。 Puck は常に ID を生成しますが、TypeScript が文句を言う可能性があります。

リゾルバーで空の場合、lastData が {} ではなく null として返されるようになりました

resolveData 関数またはsolveFields 関数に提供されている lastData オプションを使用し、以前のデータがない場合、lastData は {} ではなく null になります。

完全な変更ログ

特徴

• コンポーネント コントロールを追加するための actionBar オーバーライドを追加 (48ec0d7)
• 自動 RSC エクスポートを追加し、/rsc バンドルを置き換えます (d21eba6)
• isDisabled プロパティを Drawer.Item に追加 (cad95b8)
• Puck フックを使用するジェネリック型を追加 (01703a9)
• スタイル挿入用の iframe オーバーライドを追加 (7cac376)
• initialHistory プロパティをパックに追加 (54b5a87)
• 状態の変化を追跡して対応するための onAction API を追加 (c7007ac)
• 権限 API の追加 (a43914d)
• 感情キャッシュを挿入するプラグインを追加 (f8a88b9)
• resolvePermissions API (f0655f0) を追加
• iframe 設定に waitForStyles オプションを追加 (bc81d9c)
• 新しいアイテムが挿入されたときにresolveDataを呼び出す (3298831)
• オプションの小道具のフィールドを必須にしません (5a219ef)
• オーバーライドで使用するために ActionBar コンポーネントをエクスポートします (04fd6c5)
• ユーザー設定からデータ型を推測 (50045bb)
• 履歴タイプで ID をオプションにする (重大な変更) (d917229)
• ES モジュール ビルド (ff9076b) を提供します
• history.data の名前をhistory.state に変更 (重大な変更) (b09244c)
• iframe の読み込みに 500 ミリ秒以上かかる場合にスピナーを表示する (cfecf54)
• Puck 履歴 API の使用を効率化します (c8b2807)
• 「次の」レシピを [email protected] にアップグレード (60fe631)

バグ修正

• パック 404 を防ぐために次のレシピにファビコンを追加します (2c52d27)
• 欠落している readOnly 状態を外部フィールドに追加 (bf1449d)
• コンポーネント挿入時に履歴を常に記録する (88c5ab6)
• 次のレシピでルートをキャッシュしない/編集しない (94f16b2)
• Puck がフォーム (f761e5f) で使用されている場合はボタンを送信しない
• デモ タイプが TypeScript@5 (958dc25) に準拠していることを確認します
• 欠落しているプラ​​グイン タイプをエクスポートする (eb42734)
• データ内のコンポーネントが設定に欠落している場合にクラッシュする問題を修正 (0daf478)
• Mantine (538cb05) などの一部のフレームワークの iframe CSS の復元力を向上させます
• 構成とデータ タイプをより堅牢にする (6bcf555)
• 一部のフレームワークでプラグインを使用するときに無限ループを防止する (3870871)
• Tailwind がビューポート ズーム選択と衝突しないようにする (9151255)
• リミックスレシピのボディマージンを削除 (0898b26)
• アプリの状態によって変更されたときにビューポートのサイズを変更する (14419ec)
• 同じタイプの項目間で切り替えるときにフィールドを解決する (a3518ca)
• リゾルバーで lastData を空のオブジェクトではなく null として返す (重大な変更) (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