Puck vPermissions

百变鹏仔 3天前 #JavaScript

文章标签 Puck

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 }) =&gt; (    <actionbar label="actions">      {/* render default actions */}      <actionbar.group>{children}</actionbar.group>      {/* render new actions */}      <actionbar.group><actionbar.action onclick="{()"> console.log("clicked!")}&gt;          ★        </actionbar.action></actionbar.group></actionbar>  ),};

iframe样式注入

iframe 覆盖使您能够访问 iframe 文档，从而可以将样式注入到头部：

const overrides = {  iframe: ({ children, document }) =&gt; {    useeffect(() =&gt; {      if (document) {        document.body.setattribute("style", "background: hotpink;");      }    }, [document]);    return {children}&gt;;  },};

新的情感缓存插件使用此 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);        }      }}    /&gt;  );}</puck>

重大变化

历史数据现在是历史状态

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

history.id 现在是可选的（typescript）

使用 usepuck 历史记录 api 时，id 现在是可选的。 puck 总是会生成一个 id，但 typescript 可能会抱怨。

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

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

完整变更日志

特征

错误修复

新贡献者

完整变更日志：https://github.com/measuredco/puck/compare/v0.15.0...v0.16.0

文章推荐