首页 > 文章 > 前端

Puck vPermissions

来源：dev.to

时间：2024-09-18 14:52:02 216浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《Puck vPermissions》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

Puck vPermissions

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

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

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

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

立即升级或开始使用：

npx create-puck-app@latest

权限

权限使您能够在全局范围内、基于每个组件或动态地切换核心 puck 功能。非常感谢@xaviemirmon 为此所做的努力。

export function editor() {
  return (
    <puck
      permissions={{
        delete: false,
        duplicate: true
      }}
    />
  );
}

操作栏覆盖

新的 actionbar 覆盖使您能够创建自定义操作栏覆盖，或使用 <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: 0,
      }}
      // ...
    />
  );
}

对动作作出反应

onaction api 使您能够在 puck 的内部操作被调度时做出反应：

export function Editor() {
  return (
    <Puck
      onAction={(action, appState, prevAppState) => {
        if (action.type === "insert") {
          console.log("New component was inserted", appState);
        }
      }}
    />
  );
}