Puck 是由 Measured 构建的 React 开源可视化编辑器 - builder.io、WordPress 和其他所见即所得工具的自托管替代品。

我们正在庆祝 GitHub 上获得 5,000 颗星！感谢我们美好的社区！

Puck v0.16 是一个重大版本，引入了头条权限 API 以及（你猜对了）生活质量的改进。这个花了一些时间来整理，我们感谢您的耐心和支持。

• 权限：通过新权限和resolvePermissions API切换Puck的复制、拖动、删除等功能。
• 操作栏覆盖：使用actionBar覆盖创建自定义操作栏，或使用新的组件扩展默认操作栏。
• iframe 样式注入：访问 iframe 文档以直接注入样式，或通过新的 iframe 覆盖进行其他更改。我们还为常见的情感用例引入了情感缓存插件。
• 历史注入：通过一系列新的API注入撤消/重做历史记录
• 对操作做出反应：对 Puck 通过 onAction 回调调度的操作做出反应。
• 可选字段：不再需要在字段中定义可选属性，因为它们可以被定义

立即升级或开始使用：

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);
        }
      }}
    />
  );
}

重大变化

历史数据现在是历史状态

使用 usePuck 历史记录 API 时，数据现在重命名为状态。

History.id 现在是可选的（TypeScript）

使用 usePuck 历史 API 时，ID 现在是可选的。 Puck 总是会生成一个 id，但 TypeScript 可能会抱怨。

当解析器中为空时，lastData 现在返回为 null，而不是 {}

当使用为resolveData或resolveFields函数提供的lastData选项时，并且没有以前的数据，lastData现在将为null而不是{}。

完整变更日志

特征

• 添加 actionBar 覆盖以添加组件控件 (48ec0d7)
• 添加自动 RSC 导出，替换 /rsc 捆绑包 (d21eba6)
• 将 isDisabled 属性添加到 Drawer.Item (cad95b8)
• 添加泛型类型以使用Puck hook (01703a9)
• 添加 iframe 覆盖以进行样式注入 (7cac376)
• 将initialHistory属性添加到Puck (54b5a87)
• 添加 onAction API 来跟踪状态变化并做出反应 (c7007ac)
• 添加权限API (a43914d)
• 添加用于注入情感缓存的插件(f8a88b9)
• 添加resolvePermissions API (f0655f0)
• 将 waitForStyles 选项添加到 iframe 配置 (bc81d9c)
• 插入新项目时调用resolveData (3298831)
• 不强制要求可选属性的字段 (5a219ef)
• 导出 ActionBar 组件以用于覆盖 (04fd6c5)
• 从用户配置推断数据类型 (50045bb)
• 使 ID 在历史记录类型中可选（重大更改）(d917229)
• 提供ES模块构建（ff9076b）
• 将history.data重命名为history.state（重大变更）(b09244c)
• 如果 iframe 加载时间超过 500 毫秒则显示微调器 (cfecf54)
• 简化 usePuck 历史 API (c8b2807)
• 将“下一个”配方升级到 [email protected] (60fe631)

错误修复

• 将图标添加到下一个配方以防止 Puck 404 (2c52d27)
• 将缺少的只读状态添加到外部字段 (bf1449d)
• 始终记录组件插入历史记录 (88c5ab6)
• 不要在下一个配方中缓存/编辑路线(94f16b2)
• 如果在表单 (f761e5f) 中使用 Puck，则不要提交按钮
• 确保演示类型满足 TypeScript@5 (958dc25)
• 导出缺少的插件类型 (eb42734)
• 修复配置中缺少数据组件时崩溃的问题（0daf478）
• 提高某些框架的 iframe CSS 弹性，例如 Mantine (538cb05)
• 使配置和数据类型更加健壮(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