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 文档，从而可以将样式注入到头部：
const overrides = { iframe: ({ children, document }) => { useeffect(() => { if (document) { document.body.setattribute("style", "background: hotpink;"); } }, [document]); return {children}新的情感缓存插件使用此 api 在 iframe 内创建情感缓存，使 puck 易于与任何基于情感的组件库一起使用。
Elser AI Comics 一个免费且强大的AI漫画生成工具，助力你三步创作自己的一出好戏
522 查看详情 历史注射
使用新的历史记录注入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)为 usepuck 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)将“下一个”配方升级到 typescript@5.5.4 (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
以上就是Puck vPermissions的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/898968.html
微信扫一扫 
支付宝扫一扫 
