lf-pagebuilder-vue

lf-pagebuilder-vue

Editor visual para construir páginas HTML usando los componentes de libreria-astro-lefebvre.

⚡ Referencia rápida — Todas las opciones

Modo 1 — Componente Vue

npm install lf-pagebuilder-vue

<template>
  <Pagebuilder
    :isProduction="false"
    :debugMode="false"
    :submitForm="false"
    inputId="mi-input-hidden"
    :excludeComponentTypes="['SEO', 'Footer']"
    :excludeComponentTags="['boton', 'destacado']"
    :includeOnlyComponentTags="['articulo']"
    :visibleSections="['Header', 'Body', 'Footer']"
    allowRenderMode="open"
    limboToken="eyJ..."
    ateneaToken="eyJ..."
    :ledithorAiTools="['improve', 'improve-stream']"
    client:only="vue"
  />
</template>

<script setup>
import { Pagebuilder } from 'lf-pagebuilder-vue';
import 'lf-pagebuilder-vue/styles';
</script>

Categorías disponibles para excludeComponentTypes: Call to Action, Contenido, Separador, Texto, Cabecera, Footer, Imagen, Repetidor, Formulario, Título, SEO

Modo 2 — Script IIFE (Symfony / Twig / cualquier backend)

<link rel="stylesheet" href="/build/lf-pagebuilder-iife.css">
<script src="/build/lf-pagebuilder-iife.iife.js"></script>

<!-- EDITOR (crear) -->
<input
  type="hidden"
  class="js-lf-pagebuilder-vue-input"
  name="pagebuilder[pageConfig]"
  id="pagebuilder-new"
  value=""
  data-is-production="false"
  data-debug-mode="true"
  data-submit-form="true"
  data-allow-render-mode="open"
  data-limbo-token="eyJ..."
  data-atenea-token="eyJ..."
  data-ledithor-ai-tools='["improve","improve-stream"]'
/>

<!-- EDITOR (editar) -->
<input
  type="hidden"
  class="js-lf-pagebuilder-vue-input"
  name="pagebuilder[pageConfig]"
  id="pagebuilder-123"
  value="{JSON existente del pageConfig}"
  data-is-production="false"
  data-submit-form="true"
  data-exclude-component-types="SEO,Footer,Cabecera"
  data-limbo-token="eyJ..."
/>

<!-- VISTA PÚBLICA (solo lectura) -->
<div id="lf-pagebuilder-render"></div>
<script>
  window.LfPagebuilder.render({
    el: '#lf-pagebuilder-render',
    pageConfig: {{ pageConfig|raw }},  {# string JSON o objeto #}
    isProduction: true
  });
</script>

El id del input se usa como clave de localStorage y como referencia interna. Si no tiene id, se genera uno automáticamente.

Compatibilidad de atributos: El componente acepta también los tokens como atributos planos (sin prefijo data-): limboToken="...", ateneaToken="...", ledithorAiTools='[...]'. La forma recomendada es siempre data-*.

API global window.LfPagebuilder

El IIFE se auto-inicializa en DOMContentLoaded si hay elementos con el selector .js-lf-pagebuilder-vue-input en el DOM. No es necesario llamar a init() manualmente.

Integración con Symfony/Twig — Contrato completo

Cómo funciona el intercambio de datos con el formulario

El componente actúa como un "enhanced textarea":

1. Lee su valor inicial de input.value — en onMounted, el editor lee el JSON del value del input y lo carga como estado inicial del canvas. Si está vacío, el editor empieza en blanco (modo crear). Si contiene JSON, lo inicializa con esa configuración (modo editar).

2. Escribe en input.value al guardar — cuando el usuario pulsa "Guardar" dentro del editor, el JSON actualizado se escribe en input.value.

3. Envía el formulario si data-submit-form="true" — después de escribir en input.value, busca el <form> padre y llama a .submit(). Esto permite que Symfony valide y persista el pageConfig.

{# Crear #}
<form method="post" action="{{ path('landing_create') }}">
  <input type="hidden"
         id="pagebuilder-new"
         name="pagebuilder[pageConfig]"
         class="js-lf-pagebuilder-vue-input"
         value=""
         data-is-production="{{ app.environment == 'prod' ? 'true' : 'false' }}"
         data-submit-form="true"
         data-limbo-token="{{ limboToken }}"
         data-atenea-token="{{ ateneaToken }}"
         data-ledithor-ai-tools='["improve","improve-stream"]'
  />
  {# El CSRF token y otros campos del formulario van aquí #}
</form>

{# Editar #}
<form method="post" action="{{ path('landing_edit', {id: landing.id}) }}">
  <input type="hidden"
         id="pagebuilder-{{ landing.id }}"
         name="pagebuilder[pageConfig]"
         class="js-lf-pagebuilder-vue-input"
         value="{{ landing.pageConfig|json_encode }}"
         data-is-production="{{ app.environment == 'prod' ? 'true' : 'false' }}"
         data-submit-form="true"
         data-exclude-component-types="SEO,Footer,Cabecera"
         data-limbo-token="{{ limboToken }}"
  />
</form>

{# Vista pública #}
<div id="lf-pagebuilder-render"></div>
<script>
  window.LfPagebuilder.render({
    el: '#lf-pagebuilder-render',
    pageConfig: {{ landing.pageConfig|raw }},
    isProduction: {{ app.environment == 'prod' ? 'true' : 'false' }}
  });
</script>

Instalación

npm i lf-pagebuilder-vue

Luego en tu package.json, cambia la versión a latest para tener siempre la última:

{
  "dependencies": {
    "lf-pagebuilder-vue": "latest"
  }
}

¿Qué es?

El Pagebuilder permite al usuario arrastrar y configurar componentes de la librería de componentes Astro de Lefebvre para diseñar páginas de forma visual.

El Pagebuilder NO renderiza la página final. Genera un JSON de configuración que se envía a una API externa renderizadora, que es la encargada de generar el HTML final.

Integración con Limbo (gestión de imágenes)

Si se quiere usar el sistema de imágenes Limbo desde el Pagebuilder:

Variables de entorno (.env):

PUBLIC_LIMBO_PUBLIC_KEY=pk_tu_public_key
IS_PROD=FALSE

Obtener token server-side y pasarlo al componente:

---
import { Pagebuilder } from 'lf-pagebuilder-vue';
import { fetchLimboToken } from 'lf-pagebuilder-vue/limbo';

let limboToken = '';
try {
  const result = await fetchLimboToken({
    publicKey: import.meta.env.PUBLIC_LIMBO_PUBLIC_KEY || '',
    isProduction: import.meta.env.IS_PROD === 'TRUE'
  });
  limboToken = result.token;
} catch (e) {
  console.error('[Pagebuilder] Error obteniendo token de Limbo:', e);
}
---

<Pagebuilder
  limboToken={limboToken}
  isProduction={import.meta.env.IS_PROD === 'TRUE'}
  inputId="mi-input"
  client:only="vue"
/>

El token se obtiene en el frontmatter (server-side), evitando exponer la Public Key al cliente.

fetchLimboToken — opciones

import { fetchLimboToken } from 'lf-pagebuilder-vue/limbo';

const { token, expires_in } = await fetchLimboToken({
  publicKey: 'pk_xxx',       // requerido
  isProduction: false,        // opcional, default: false
  limboApiUrl: 'https://...' // opcional, sobreescribe isProduction
});

Integración con Atenea (IA en el editor de texto)

Si se quiere usar las funcionalidades de IA de LedithorEditor (botón "Improve", etc.):

Variables de entorno (.env):

ATENEA_USERNAME=ledithor
ATENEA_APIKEY=tu_apikey_aqui
IS_PROD=FALSE

Obtener token server-side y pasarlo al componente:

---
import { Pagebuilder } from 'lf-pagebuilder-vue';
import { fetchAteneaToken } from 'lf-pagebuilder-vue/atenea';

let ateneaToken = '';
try {
  const result = await fetchAteneaToken({
    username: import.meta.env.ATENEA_USERNAME || '',
    apiKey:   import.meta.env.ATENEA_APIKEY || '',
    isProduction: import.meta.env.IS_PROD === 'TRUE'
  });
  ateneaToken = result.token;
} catch (e) {
  console.error('[Pagebuilder] Error obteniendo token de Atenea:', e);
}
---

<Pagebuilder
  ateneaToken={ateneaToken}
  :ledithorAiTools="['improve', 'improve-stream']"
  client:only="vue"
/>

Si ateneaToken no se proporciona (o está vacío), el botón de IA no aparece en el editor de texto. ledithorAiTools solo tiene efecto si hay token.

fetchAteneaToken — opciones

import { fetchAteneaToken } from 'lf-pagebuilder-vue/atenea';

const { token, expiresAt } = await fetchAteneaToken({
  username: 'ledithor',       // requerido
  apiKey: 'tu_apikey',        // requerido
  isProduction: false,         // opcional, default: false
  ateneaApiUrl: 'https://...' // opcional, sobreescribe isProduction
});
// expiresAt: Unix timestamp (segundos) del claim `exp` del JWT

Funcionalidades del editor

Color de fondo en filas y columnas

Cada fila y cada columna del editor puede tener un color de fondo personalizado con soporte de canal alpha (opacidad). El color se configura desde el panel de configuración de la fila o columna y se exporta junto al resto de la configuración del layout.

El color se almacena en el JSON de configuración como un valor rgba(r, g, b, a) dentro de la propiedad backgroundColor:

{
  "rows": [
    {
      "config": {
        "backgroundColor": "rgba(255, 200, 100, 0.75)"
      },
      "columns": [
        {
          "config": {
            "backgroundColor": "rgba(240, 240, 240, 1)"
          },
          "components": []
        }
      ]
    }
  ]
}

Resaltado de elemento en edición

Cuando se abre el panel de configuración de una fila, columna o componente, el elemento correspondiente se resalta visualmente con un borde ámbar y un halo de sombra. El resaltado desaparece al cerrar el panel.

Build

El proyecto tiene dos builds:

Build estándar (librería npm)

npm run build

Genera en dist/:

• index.js — ES Module
• index.cjs — CommonJS
• index.d.ts — Tipos TypeScript
• limbo.js / limbo.cjs — Utilidades de Limbo (server-side)
• atenea.js / atenea.cjs — Utilidades de Atenea (server-side)
• styles.css — Estilos

Build Symfony (IIFE)

npm run build:symfony

Genera en dist-symfony/:

• lf-pagebuilder-iife.iife.js — Script autocontenido (incluye Vue y todas las dependencias)
• lf-pagebuilder-iife.css — Estilos con utilidades Tailwind prefijadas (mecano:)

Build completo

npm run build:all

Ejecuta ambos builds.

⚠️ Desarrollo local

IMPORTANTE: Lee esta sección completa antes de trabajar con este proyecto localmente.

Trabajar con npm link

Para probar cambios localmente en otro proyecto sin publicar:

# 1. En lf-pagebuilder-vue
cd /ruta/a/lf-pagebuilder-vue
npm link

# 2. En tu proyecto consumidor
cd /ruta/a/tu-proyecto
npm link lf-pagebuilder-vue

⚠️ CRÍTICO: Múltiples librerías con npm link

Este proyecto depende de libreria-astro-lefebvre. Si necesitas trabajar con ambas librerías localmente:

# ❌ INCORRECTO - El segundo comando ROMPE el primero
npm link lf-pagebuilder-vue
npm link libreria-astro-lefebvre

# ✅ CORRECTO - Linkear TODAS en UN SOLO comando
npm link lf-pagebuilder-vue libreria-astro-lefebvre

Flujo completo para trabajar con ambas librerías

# 1. En lf-pagebuilder-vue
cd /ruta/a/lf-pagebuilder-vue
npm link

# 2. En libreria-astro-lefebvre
cd /ruta/a/libreria-astro-lefebvre
npm link

# 3. En tu proyecto consumidor — AMBAS EN UN SOLO COMANDO
cd /ruta/a/tu-proyecto
npm link lf-pagebuilder-vue libreria-astro-lefebvre

Deshacer los enlaces

cd /ruta/a/tu-proyecto
npm unlink lf-pagebuilder-vue libreria-astro-lefebvre
npm install

Watch mode

npm run dev

Ejecuta vite build --watch y recompila automáticamente cuando hay cambios.

📘 Publicar en npm

Para publicar una nueva versión:

1. Subir la versión en package.json
2. Compilar y publicar:

   npm run build:all
   npm publish --access public
   

Configurar acceso a npm (primera vez)

1. Solicitar acceso al equipo desarrollowebteamlef en npm
2. Crear un token de acceso en tu perfil de npm → Access Tokens
3. Añadir el token en ~/.npmrc:

   //registry.npmjs.org/:_authToken=TU_TOKEN_AQUI
   

Instalación y dependencias

Dependencias requeridas en el proyecto padre

npm install lf-pagebuilder-vue@latest vue@^3.3.0 vuedraggable@^4.1.0

Configuración en proyectos Astro

npm install @astrojs/vue tailwindcss @tailwindcss/vite

En astro.config.mjs:

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  integrations: [vue()],
  vite: {
    plugins: [tailwindcss()],
    ssr: {
      noExternal: ['libreria-astro-lefebvre', 'lf-pagebuilder-vue'],
    },
  },
});