Puck vPermissions

puck vpermissions

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 (
    <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 覆盖使您能够访问 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 时，数据现在重命名为状态。

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的详细内容，更多请关注其它相关文章！