puck 是由 measured 构建的 react 开源可视化编辑器 - 是 builder.io、wordpress 和其他所见即所得工具的自托管替代品。
我们正在庆祝 github 上获得 5,000 颗星！感谢我们美好的社区！
puck v0.16 是一个重大版本，引入了头条权限 api 以及（你猜对了）生活质量的改进。这个花了一些时间来整理，我们感谢您的耐心和支持。
立即升级或开始使用：
npx create-puck-app@latest
权限使您能够在全局范围内、基于每个组件或动态地切换核心 puck 功能。 非常感谢@xaviemirmon 为此所做的努力。
export function editor() {
return (
<puck permissions="{{" delete: false duplicate: true></puck>
);
}
新的 actionbar 覆盖使您能够创建自定义操作栏覆盖，或使用 组件扩展默认操作栏：
const overrides = {
actionbar: ({ children }) => (
<actionbar label="actions">
{/* render default actions */}
<actionbar.group>{children}</actionbar.group>
{/* render new actions */}
<actionbar.group><actionbar.action onclick="{()"> console.log("clicked!")}>
★
</actionbar.action></actionbar.group></actionbar>
),
};
iframe 覆盖使您能够访问 iframe 文档，从而可以将样式注入到头部：
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 (
<puck initialhistory="{{" histories: state: historystate index: ...></puck>
);
}
onaction api 使您能够在 puck 的内部操作被调度时做出反应：
export function Editor() {
return (
<puck onaction="{(action," appstate prevappstate> {
if (action.type === "insert") {
console.log("New component was inserted", appState);
}
}}
/>
);
}
</puck>
使用 usepuck 历史记录 api 时，数据现在重命名为状态。
使用 usepuck 历史记录 api 时，id 现在是可选的。 puck 总是会生成一个 id，但 typescript 可能会抱怨。
当使用为resolvedata或resolvefields函数提供的lastdata选项时，并且没有以前的数据，lastdata现在将为null而不是{}。
完整变更日志：https://github.com/measuredco/puck/compare/v0.15.0...v0.16.0