Puck es el editor visual de código abierto para React creado por Measured, una alternativa autohospedada a builder.io, WordPress y otras herramientas WYSIWYG.

¡Estamos celebrando las 5000 estrellas en GitHub! ¡Gracias a nuestra maravillosa comunidad!

Puck v0.16 es un gran lanzamiento, que presenta la API de permisos de titulares y, lo adivinaste, mejoras en la calidad de vida. Tomó un tiempo armarlo y agradecemos su paciencia y apoyo.

• Permisos: alterna funciones de Puck como duplicación, arrastre y eliminación a través de los nuevos permisos y API de resolvePermissions.
• Anulación de la barra de acciones: crea barras de acciones personalizadas usando la anulación de la barra de acciones, o extiende la predeterminada usando el nuevo componente .
• inyección de estilo de iframe: acceda al documento de iframe para inyectar estilos directamente o realizar otros cambios a través de la nueva anulación de iframe. También presentamos el complemento de caché de emociones para el caso de uso común de Emotion.
• Inyección de historial: inyecta el historial de deshacer/rehacer a través de una serie de nuevas API
• Reaccionar a las acciones: reaccionar a las acciones enviadas por Puck a través de la devolución de llamada onAction.
• Campos opcionales: Ya no es necesario definir accesorios opcionales en los campos, ya que se pueden definir

Actualice hoy o comience con:

npx create-puck-app@latest

Permisos

Los permisos le permiten alternar la funcionalidad principal de Puck globalmente, por componente o dinámicamente. Muchas gracias a @xaviemirmon por sus esfuerzos en esto.

export function Editor() {
  return (
    
  );
}

Anulación de la barra de acciones

La nueva anulación de actionBar le permite crear una superposición de barra de acciones personalizada o ampliar la predeterminada utilizando el componente :

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

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

inyección de estilo iframe

La anulación de iframe le permite acceder al documento iframe, lo que permite inyectar estilos en el encabezado:

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

    return {children}>;
  },
};

El nuevo complemento de caché de emociones utiliza esta API para crear un caché de emociones dentro del iframe, lo que hace que Puck sea fácil de usar con cualquier biblioteca de componentes basada en Emotion.

inyección de historia

Utilice las nuevas API de inyección de historial para proporcionar su propio historial de deshacer/rehacer a través de la propiedad initialHistory, o dinámicamente a través de las funciones setHistories y setHistoryIndex de usePuck().history.

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

export function Editor() {
  return (
    
  );
}

Reaccionar a las acciones

La API onAction te permite reaccionar a las acciones internas de Puck a medida que se envían:

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

Cambios importantes

historia.datos ahora es historia.estado

Cuando se utiliza la API de historial de usePuck, los datos ahora cambian de nombre a estado.

History.id ahora es opcional (TypeScript)

Cuando se utiliza la identificación de API del historial de usePuck ahora es opcional. Puck siempre generará una identificación, pero TypeScript puede quejarse.

lastData ahora se devuelve como nulo en lugar de {} cuando está vacío en los solucionadores

Cuando se utiliza la opción lastData proporcionada para las funciones resolveData o resolveFields, y no hay datos anteriores, lastData ahora será nulo en lugar de {}.

Registro de cambios completo

Características

• agregar anulación de actionBar para agregar controles de componentes (48ec0d7)
• agregar exportación RSC automática, reemplazando el paquete /rsc (d21eba6)
• agregue el accesorio isDisabled al cajón.Artículo (cad95b8)
• agregar tipo genérico para usarPuck hook (01703a9)
• agregar anulación de iframe para inyección de estilo (7cac376)
• agregar accesorio de historia inicial a Puck (54b5a87)
• agregar API onAction para rastrear y reaccionar a los cambios de estado (c7007ac)
• agregar API de permisos (a43914d)
• agregar complemento para inyectar caché de emociones (f8a88b9)
• agregar API resolvePermissions (f0655f0)
• agregue la opción waitForStyles a la configuración de iframe (bc81d9c)
• llamar a resolveData cuando se inserte un nuevo elemento (3298831)
• no exige campos para accesorios opcionales (5a219ef)
• exportar componente ActionBar para usarlo en anulaciones (04fd6c5)
• inferir el tipo de datos de la configuración del usuario (50045bb)
• hacer que la identificación sea opcional en el tipo de historial (CAMBIO ÚLTIMO) (d917229)
• proporcionar compilación del módulo ES (ff9076b)
• cambiar el nombre de historial.datos a historial.estado (CAMBIO ÚLTIMO) (b09244c)
• muestra el control giratorio si la carga del iframe tarda más de 500 ms (cfecf54)
• agilizar el uso de la API de historial de Puck (c8b2807)
• actualizar la receta "siguiente" a [email protected] (60fe631)

Corrección de errores

• agregue favicon a la siguiente receta para evitar Puck 404 (2c52d27)
• agregar el estado de solo lectura que falta a los campos externos (bf1449d)
• siempre registrar el historial en la inserción del componente (88c5ab6)
• no almacenar en caché/editar ruta en la siguiente receta (94f16b2)
• no envíe botones si Puck los usó en el formulario (f761e5f)
• asegúrese de que los tipos de demostración estén satisfechos con TypeScript@5 (958dc25)
• exportar tipo de complemento faltante (eb42734)
• corrige el fallo si falta un componente en los datos de la configuración (0daf478)
• mejorar la resiliencia de iframe CSS para algunos marcos, como Mantine (538cb05)
• hacer que los tipos de configuración y datos sean más sólidos (6bcf555)
• evitar el bucle infinito al usar complementos con algunos marcos (3870871)
• evitar que Tailwind entre en conflicto con la selección de zoom de la ventana gráfica (9151255)
• eliminar el margen del cuerpo en la receta de remezcla (0898b26)
• cambiar el tamaño de la ventana gráfica cuando se cambia a través del estado de la aplicación (14419ec)
• resolver campos al cambiar entre elementos del mismo tipo (a3518ca)
• devuelve lastData como nulo en lugar de un objeto vacío en los solucionadores (CAMBIO ÚLTIMO) (648eb92)
• muestra advertencia si los estilos del analizador de encabezados no están cargados (4e7110b)
• use el color correcto en las etiquetas FieldLabel (b0469a1)

Nuevos contribuyentes

• @mkilpatrick hizo su primera contribución en https://github.com/measuredco/puck/pull/505
• @nova4u hizo su primera contribución en https://github.com/measuredco/puck/pull/538
• @antonmalyavkin hizo su primera contribución en https://github.com/measuredco/puck/pull/585

Registro de cambios completo: https://github.com/measuredco/puck/compare/v0.15.0...v0.16.0