Puck é o editor visual de código aberto para React desenvolvido pela Measured - uma alternativa auto-hospedada para builder.io, WordPress e outras ferramentas WYSIWYG.

Estamos comemorando 5.000 estrelas no GitHub! Obrigado à nossa maravilhosa comunidade!

Puck v0.16 é um grande lançamento, apresentando a API de permissões de título e - você adivinhou - melhorias na qualidade de vida. Este demorou um pouco para ser montado e agradecemos sua paciência e apoio.

• Permissões: alterne recursos do Puck como duplicação, arrastar, exclusão por meio das novas permissões e APIs resolvePermissions.
• Substituição da barra de ação: crie barras de ação personalizadas usando a substituição actionBar ou estenda a padrão usando o novo componente .
• injeção de estilo iframe: Acesse o documento iframe para injetar estilos diretamente ou fazer outras alterações por meio da nova substituição de iframe. Também introduzimos o plugin Emotion-cache para o caso de uso comum do Emotion.
• Injeção de histórico: Injete o histórico de desfazer/refazer por meio de uma série de novas APIs
• Reagir às ações: Reaja às ações enviadas pelo Puck por meio do retorno de chamada onAction.
• Campos opcionais: Adereços opcionais não são mais necessários para serem definidos em campos, pois podem ser definidos

Faça upgrade hoje ou comece com:

npx create-puck-app@latest

Permissões

As permissões permitem que você alterne a funcionalidade principal do Puck globalmente, por componente ou dinamicamente. Muito obrigado a @xaviemirmon por seus esforços nisso.

export function Editor() {
  return (
    
  );
}

Substituição da barra de ação

A nova substituição actionBar permite que você crie uma sobreposição de barra de ação personalizada ou estenda a padrão usando o componente :

const overrides = {
  actionBar: ({ children }) => (
    
      {/* Render default actions */}
      {children}

      {/* Render new actions */}
      
         console.log("Clicked!")}>
          ★
        
      
    
  ),
};

injeção de estilo iframe

A substituição do iframe permite acessar o documento iframe, possibilitando injetar estilos no cabeçalho:

const overrides = {
  iframe: ({ children, document }) => {
    useEffect(() => {
      if (document) {
        document.body.setAttribute("style", "background: hotpink;");
      }
    }, [document]);

    return {children}>;
  },
};

O novo plug-in de cache de emoções usa esta API para criar um cache de emoções dentro do iframe, tornando o Puck fácil de usar com qualquer biblioteca de componentes baseada em emoções.

Injeção de história

Use as novas APIs de injeção de histórico para fornecer seu próprio histórico de desfazer/refazer por meio da propriedade inicialHistory ou dinamicamente por meio das funções setHistories e setHistoryIndex de usePuck().history.

const historyState = {
  data: {
    root: {
      props: { title: "My History" },
    },
  },
};

export function Editor() {
  return (
    
  );
}

Reaja às ações

A API onAction permite que você reaja às ações internas do Puck conforme elas são despachadas:

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

Quebrando mudanças

histórico.dados agora é histórico.estado

Ao usar a API de histórico usePuck, os dados agora são renomeados como estado.

history.id agora é opcional (TypeScript)

Ao usar o ID da API de histórico usePuck agora é opcional. O Puck sempre gerará um ID, mas o TypeScript pode reclamar.

lastData agora é retornado como nulo em vez de {} quando vazio em resolvedores

Ao usar a opção lastData fornecida para funções resolveData ou resolveFields e não houver dados anteriores, lastData agora será nulo em vez de {}.

Registro de alterações completo

Características

• adicionar substituição de actionBar para adicionar controles de componentes (48ec0d7)
• adicionar exportação RSC automática, substituindo pacote /rsc (d21eba6)
• adicionar suporte isDisabled a Drawer.Item (cad95b8)
• adicionar tipo genérico ao gancho usePuck (01703a9)
• adicionar substituição de iframe para injeção de estilo (7cac376)
• adicionar adereço inicialHistory ao Puck (54b5a87)
• adicionar API onAction para rastrear e reagir a mudanças de estado (c7007ac)
• adicionar API de permissões (a43914d)
• adicionar plugin para injetar cache de emoções (f8a88b9)
• adicionar API resolvePermissions (f0655f0)
• adicionar opção waitForStyles à configuração do iframe (bc81d9c)
• chamar resolveData quando um novo item for inserido (3298831)
• não exija campos para adereços opcionais (5a219ef)
• exportar componente ActionBar para uso em substituições (04fd6c5)
• inferir o tipo de dados da configuração do usuário (50045bb)
• tornar o ID opcional no tipo de histórico (BREAKING CHANGE) (d917229)
• fornecer construção do módulo ES (ff9076b)
• renomear history.data para history.state (BREAKING CHANGE) (b09244c)
• mostrar girador se o carregamento do iframe demorar mais de 500 ms (cfecf54)
• simplificar API de histórico usePuck (c8b2807)
• atualizar receita "próxima" para [email protected] (60fe631)

Correções de bugs

• adicione favicon à próxima receita para evitar Puck 404 (2c52d27)
• adicionar estado readOnly ausente aos campos externos (bf1449d)
• sempre registre o histórico na inserção do componente (88c5ab6)
• não armazenar em cache/editar rota na próxima receita (94f16b2)
• não envie botões se Puck for usado no formulário (f761e5f)
• garantir que os tipos de demonstração estejam satisfeitos com TypeScript@5 (958dc25)
• exportar tipo de plug-in ausente (eb42734)
• corrigir falha se o componente nos dados estiver faltando na configuração (0daf478)
• melhorar a resiliência do iframe CSS para algumas estruturas, como Mantine (538cb05)
• tornar os tipos de configuração e dados mais robustos (6bcf555)
• evitar loop infinito ao usar plug-ins com alguns frameworks (3870871)
• evitar que o Tailwind entre em conflito com a seleção de zoom da janela de visualização (9151255)
• remover margem do corpo na receita de remix (0898b26)
• redimensionar a janela de visualização quando alterado por meio do estado do aplicativo (14419ec)
• resolver campos ao alternar entre itens do mesmo tipo (a3518ca)
• retornar lastData como nulo em vez de objeto vazio em resolvedores (BREAKING CHANGE) (648eb92)
• mostrar aviso se os estilos do analisador de título não estiverem carregados (4e7110b)
• use a cor correta nos rótulos FieldLabel (b0469a1)

Novos colaboradores

• @mkilpatrick fez sua primeira contribuição em https://github.com/measuredco/puck/pull/505
• @nova4u fez sua primeira contribuição em https://github.com/measuredco/puck/pull/538
• @antonmalyavkin fez sua primeira contribuição em https://github.com/measuredco/puck/pull/585

Registro de alterações completo: https://github.com/measuredco/puck/compare/v0.15.0...v0.16.0