wagtail-visual-editor 0.1.0__py3-none-any.whl

wagtail_visual_editor/__init__.py

@@ -0,0 +1 @@
+__version__ = "0.1.0"

wagtail_visual_editor/apps.py

@@ -0,0 +1,10 @@
+from django.apps import AppConfig
+
+
+class WagtailVisualEditorConfig(AppConfig):
+    name = "wagtail_visual_editor"
+    label = "wagtail_visual_editor"
+    verbose_name = "Wagtail visual editor"
+
+    def ready(self):
+        from . import checks  # noqa: F401 (registra el system check)

wagtail_visual_editor/checks.py

@@ -0,0 +1,27 @@
+from django.core.checks import Warning, register
+
+# Rango de Wagtail probado: [mínima, siguiente minor sin probar). Va en sincronía con pyproject.toml.
+WAGTAIL_TESTED = ((7, 4), (7, 5))
+
+
+def version_warnings(version):
+    """Avisos si la versión de Wagtail (tupla) está fuera del rango probado. pip se puede saltear el límite."""
+    low, high = WAGTAIL_TESTED
+    if low <= tuple(version[:2]) < high:
+        return []
+    return [
+        Warning(
+            f"wagtail-visual-editor no está probado con Wagtail {version[0]}.{version[1]} "
+            f"(probado: >={low[0]}.{low[1]},<{high[0]}.{high[1]}).",
+            hint="El editor usa la API JS interna del StreamField: probalo antes de usarlo o instalá una "
+            "versión de wagtail-visual-editor compatible (ver la tabla del README).",
+            id="wagtail_visual_editor.W001",
+        )
+    ]
+
+
+@register()
+def check_wagtail_version(app_configs, **kwargs):
+    from wagtail import VERSION
+
+    return version_warnings(VERSION)

wagtail_visual_editor/panels.py

@@ -0,0 +1,62 @@
+from urllib.parse import urlparse
+
+from django.urls import reverse
+from wagtail.admin.panels import FieldPanel, Panel
+
+from . import __version__
+
+
+class VisualStreamPanel(FieldPanel):
+    """StreamField editado sobre el preview del frontend.
+
+    El widget nativo queda oculto pero activo: es la fuente de verdad y lo que se envía al guardar.
+    """
+
+    class BoundPanel(FieldPanel.BoundPanel):
+        template_name = "wagtail_visual_editor/visual_stream_panel.html"
+
+        def get_context_data(self, parent_context=None):
+            context = super().get_context_data(parent_context)
+            page = self.instance
+            if page.pk:
+                preview_url = reverse("wagtailadmin_pages:preview_on_edit", args=[page.pk])
+                site = page.get_site()
+            else:
+                # Página nueva: todavía no está en el árbol, así que el preview y el Site salen del padre
+                parent = self.form.parent_page
+                preview_url = reverse(
+                    "wagtailadmin_pages:preview_on_add",
+                    args=[page._meta.app_label, page._meta.model_name, parent.pk],
+                )
+                site = parent.get_site()
+            context["preview_url"] = preview_url
+            context["field_name"] = self.bound_field.html_name
+            # El preview headless corre en el frontend del Site: solo se aceptan mensajes de ese origen
+            context["frontend_origin"] = site.root_url if site else ""
+            context["asset_version"] = __version__  # cache-busting de JS/CSS al actualizar la app
+            return context
+
+
+class SocialCardPreviewPanel(Panel):
+    """Vista previa de cómo se ve la página al compartirla (WhatsApp, LinkedIn, X), en vivo.
+
+    Lee del formulario seo_title/title, search_description y og_image. La imagen por defecto (cuando no hay
+    og_image) la da la página con get_social_preview_defaults(site) -> {"image_url": ...}.
+    """
+
+    class BoundPanel(Panel.BoundPanel):
+        template_name = "wagtail_visual_editor/social_card_preview_panel.html"
+
+        def get_context_data(self, parent_context=None):
+            context = super().get_context_data(parent_context)
+            page = self.instance
+            site = page.get_site() if page.pk else self.form.parent_page.get_site()
+            defaults = page.get_social_preview_defaults(site) if hasattr(page, "get_social_preview_defaults") else {}
+            context["domain"] = urlparse(site.root_url).netloc if site else ""
+            # URL completa en vivo = URL del padre + slug del formulario. La raíz del Site no tiene padre con URL.
+            parent = page.get_parent() if page.pk else self.form.parent_page
+            context["parent_url"] = (parent.full_url or "") if parent else ""
+            context["page_url"] = (page.full_url or "") if page.pk else ""
+            context["default_image_url"] = defaults.get("image_url") or ""
+            context["asset_version"] = __version__
+            return context

wagtail_visual_editor/sample_values.py

@@ -0,0 +1,84 @@
+"""Valores de ejemplo para cualquier bloque, generados a partir de su estructura.
+
+Sirven de preview por defecto en el selector de bloques (y para poblar páginas demo). Un bloque que
+necesite un preview mejor puede definir su propio Meta.preview_value.
+"""
+
+from itertools import count
+
+from wagtail import blocks as b
+from wagtail.documents import get_document_model
+from wagtail.documents.blocks import DocumentChooserBlock
+from wagtail.images import get_image_model
+from wagtail.images.blocks import ImageChooserBlock
+from wagtail.models import Site
+from wagtail.snippets.blocks import SnippetChooserBlock
+
+TEXT_BY_NAME = {"title": "Título de ejemplo", "eyebrow": "Eyebrow", "tab_title": "Tab", "text": "Texto de ejemplo"}
+BLANK_NAMES = {"component_id"}
+RICH_TEXT = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>"
+
+# Textos únicos: hay componentes que usan el texto como key de React
+_counter = count(1)
+
+
+def _pk(model):
+    obj = model.objects.first()
+    return obj.pk if obj else None
+
+
+def sample_value(block, name=""):
+    """Valor crudo (formato JSON del StreamField) de ejemplo para `block`."""
+    if isinstance(block, b.StaticBlock):
+        return None
+    if isinstance(block, b.StructBlock):
+        return {n: sample_value(c, n) for n, c in block.child_blocks.items()}
+    if isinstance(block, b.ListBlock):
+        size = min(3, block.meta.max_num or 3)
+        return [sample_value(block.child_block, name) for _ in range(max(size, block.meta.min_num or 0))]
+    if isinstance(block, b.StreamBlock):
+        first_name, first = next(iter(block.child_blocks.items()))
+        return [{"type": first_name, "value": sample_value(first, first_name)}]
+    if isinstance(block, ImageChooserBlock):
+        return _pk(get_image_model())
+    if isinstance(block, DocumentChooserBlock):
+        return _pk(get_document_model())
+    if isinstance(block, b.PageChooserBlock):
+        # La raíz del Site por defecto: siempre tiene URL (una página fuera de todo Site no)
+        site = Site.objects.filter(is_default_site=True).first()
+        return site.root_page_id if site else None
+    if isinstance(block, SnippetChooserBlock):
+        return _pk(block.target_model)
+    if type(block).__name__ == "VideoChooserBlock":
+        return None
+    if isinstance(block, b.ChoiceBlock):
+        return next((v for v, _ in block.field.choices if v), None)
+    if isinstance(block, b.EmailBlock):
+        return "demo@example.com"
+    if isinstance(block, b.URLBlock):
+        return "https://example.com"
+    if isinstance(block, (b.IntegerBlock, b.FloatBlock, b.DecimalBlock)):
+        return 42
+    if isinstance(block, b.BooleanBlock):
+        return False
+    if isinstance(block, (b.RichTextBlock, b.RawHTMLBlock)) or any(
+        kind in type(block).__name__ for kind in ("HTML", "RichText")
+    ):
+        return RICH_TEXT
+    if name in BLANK_NAMES:
+        return ""
+    if name == "anchor":
+        return f"seccion-{next(_counter)}"
+    label = TEXT_BY_NAME.get(name, name.replace("_", " ").capitalize() or "Texto")
+    return f"{label} {next(_counter)}"
+
+
+class SamplePreviewMixin:
+    """Mixin para bloques: preview en el selector con valores de ejemplo, sin definir preview_value."""
+
+    is_previewable = True
+
+    def get_preview_value(self):
+        if hasattr(self.meta, "preview_value"):
+            return super().get_preview_value()
+        return self.to_python(sample_value(self))

wagtail_visual_editor/static/wagtail_visual_editor/social_cards.css

@@ -0,0 +1,329 @@
+/* Previews de cada red a partir de sus medidas y colores públicos (referencia: metatags.io).
+   Sirven para ver recortes de texto e imagen; no son pixel-perfect. Fondo claro fijo: así se ven en cada app. */
+/* La columna del formulario tiene max-width 840px: la tab con las previews se abre hasta 1240px (entran
+   3 columnas), pero los demás paneles (SEO, menús) siguen en 840px para que sus campos no queden muy anchos */
+.w-form-width:has([data-social-cards]) {
+    max-width: 1240px;
+}
+
+.w-form-width:has([data-social-cards]) > .w-panel:not(:has([data-social-cards])) {
+    max-width: 840px;
+}
+
+/* Cada campo de un panel tiene su propio wrapper de 840px: solo el de las previews se abre */
+.w-panel__wrapper:has(> [data-social-cards]) {
+    max-width: none;
+}
+
+/* Grilla responsive: tantas columnas de ≥300px como entren (una sola en pantallas angostas) */
+.w-social-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
+    gap: 1.75rem 1.5rem;
+    align-items: start;
+}
+
+.w-social-cards > .help {
+    grid-column: 1 / -1;
+    margin: 0;
+}
+
+.w-social-cards__warnings:empty {
+    display: none;
+}
+
+.w-social-card {
+    min-width: 0;
+}
+
+.w-social-card h3 {
+    margin: 0 0 0.5rem;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    opacity: 0.7;
+}
+
+/* Imagen compartida: proporción 1.91:1 (1200×630) salvo donde la red usa otra */
+.w-sc-image {
+    aspect-ratio: 1.91 / 1;
+    background: #e5e7eb center / cover no-repeat;
+}
+
+.w-sc-image.is-empty {
+    background-image: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #f3f4f6 10px 20px);
+}
+
+/* Google */
+.w-sc-google {
+    max-width: 600px;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    background: #fff;
+    font: 14px/20px Arial, sans-serif;
+}
+
+.w-sc-google__title {
+    display: block;
+    overflow: hidden;
+    color: #1a0dab;
+    font-size: 18px;
+    line-height: 21.6px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.w-sc-google__url {
+    display: flex;
+    gap: 0.375rem;
+    align-items: center;
+    color: #006621;
+    font-size: 14px;
+    line-height: 16px;
+}
+
+.w-sc-google__caret {
+    border: 5px solid transparent;
+    border-top-color: #006621;
+    border-bottom-width: 0;
+}
+
+.w-sc-google__description {
+    display: -webkit-box;
+    overflow: hidden;
+    color: #545454;
+    font-size: 13px;
+    line-height: 18.2px;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+/* WhatsApp: globo de mensaje saliente con el preview arriba y el link abajo */
+.w-sc-whatsapp {
+    max-width: 360px;
+    padding: 0.25rem;
+    border-radius: 0.5rem;
+    background: #d9fdd3;
+    font: 14px/19px system-ui, -apple-system, "Segoe UI", sans-serif;
+    color: #111b21;
+}
+
+.w-sc-whatsapp__preview {
+    overflow: hidden;
+    border-radius: 0.375rem;
+    background: #d1f4cc;
+}
+
+.w-sc-whatsapp__text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 0.375rem 0.625rem 0.5rem;
+    font-size: 13px;
+}
+
+.w-sc-whatsapp__text strong,
+.w-sc-whatsapp__text span:not(.w-sc-whatsapp__domain) {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.w-sc-whatsapp__text span:not(.w-sc-whatsapp__domain) {
+    color: #54656f;
+}
+
+.w-sc-whatsapp__domain {
+    color: #667781;
+    font-size: 12px;
+}
+
+.w-sc-whatsapp__link {
+    display: block;
+    overflow: hidden;
+    padding: 0.25rem 0.375rem 0.125rem;
+    color: #027eb5;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Facebook */
+.w-sc-facebook {
+    max-width: 500px;
+    border: 1px solid #dadde1;
+    background: #fff;
+}
+
+.w-sc-facebook__text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 10px 12px;
+    background: #f2f3f5;
+    color: #1d2129;
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+.w-sc-facebook__domain {
+    color: #606770;
+    font-size: 12px;
+    text-transform: uppercase;
+}
+
+.w-sc-facebook__text strong {
+    overflow: hidden;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.w-sc-facebook__text span:last-child {
+    overflow: hidden;
+    color: #606770;
+    font-size: 14px;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* X: el título va sobre la imagen, abajo a la izquierda; el dominio debajo de la tarjeta */
+.w-sc-x {
+    max-width: 504px;
+    overflow: hidden;
+    border: 1px solid #cfd9de;
+    border-radius: 16px;
+}
+
+.w-sc-x__image {
+    position: relative;
+}
+
+.w-sc-x__title {
+    position: absolute;
+    bottom: 12px;
+    left: 12px;
+    max-width: calc(100% - 24px);
+    overflow: hidden;
+    padding: 0 8px;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.77);
+    color: #fff;
+    font: 13px/20px system-ui, -apple-system, "Segoe UI", sans-serif;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.w-sc-x__from {
+    display: block;
+    margin-top: 0.25rem;
+    color: #71767b;
+    font: 13px/16px system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+
+/* LinkedIn */
+.w-sc-linkedin {
+    max-width: 552px;
+    border: 1px solid #dadde1;
+    background: #fff;
+}
+
+.w-sc-linkedin__text {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 16px;
+    background: #f3f6f8;
+    font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
+}
+
+.w-sc-linkedin__text strong {
+    overflow: hidden;
+    color: rgba(0, 0, 0, 0.9);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.w-sc-linkedin__text span {
+    color: rgba(0, 0, 0, 0.6);
+    font-size: 12px;
+    line-height: 16px;
+}
+
+/* Slack: barra gris a la izquierda, sitio, título en azul, descripción e imagen chica */
+.w-sc-slack {
+    display: flex;
+    max-width: 600px;
+    padding: 0.5rem 0;
+    background: #fff;
+    color: #2c2d30;
+    font: 15px/22px system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+
+.w-sc-slack__bar {
+    flex: none;
+    width: 4px;
+    border-radius: 8px;
+    background: #e8e8e8;
+}
+
+.w-sc-slack__body {
+    display: flex;
+    flex-direction: column;
+    padding: 0 12px;
+}
+
+.w-sc-slack__site {
+    color: #717274;
+}
+
+.w-sc-slack__title {
+    color: #0576b9;
+}
+
+.w-sc-slack__image {
+    width: 281px;
+    max-width: 100%;
+    margin-top: 0.5rem;
+    border-radius: 4px;
+}
+
+/* Pinterest: pin angosto, imagen con bordes redondeados y título en negrita */
+.w-sc-pinterest {
+    width: 236px;
+    padding-bottom: 0.25rem;
+    border-radius: 8px;
+    background: #fff;
+    color: #333;
+    font: 12px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.w-sc-pinterest__image {
+    border-radius: 8px;
+}
+
+.w-sc-pinterest__text {
+    display: flex;
+    gap: 0.5rem;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 4px 8px;
+}
+
+.w-sc-pinterest__text strong {
+    display: -webkit-box;
+    overflow: hidden;
+    color: inherit;
+    font-size: 14px;
+    line-height: 16.8px;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.w-sc-pinterest__dots {
+    color: #8e8e8e;
+    letter-spacing: -1px;
+}

wagtail_visual_editor/static/wagtail_visual_editor/social_cards.js

@@ -0,0 +1,67 @@
+// Previews de buscadores y redes del tab Promocionar: se redibujan con los valores actuales del formulario.
+(() => {
+    const cards = document.querySelector('[data-social-cards]');
+    if (!cards) return;
+
+    const form = cards.closest('form');
+    const { defaultImage, parentUrl, pageUrl } = cards.dataset;
+    const warnings = cards.querySelector('[data-card-warnings]');
+    const field = (name) => form.elements.namedItem(name);
+    const setText = (selector, text) => {
+        for (const el of cards.querySelectorAll(selector)) el.textContent = text;
+    };
+
+    // Imagen elegida en og_image: se pide al admin el recorte que se comparte (1200×630). Mientras
+    // llega se muestra la miniatura del chooser, que ya está en el DOM.
+    const socialImages = new Map(); // id → URL del recorte
+    function chosenImage() {
+        const input = field('og_image');
+        if (!input?.value) return null;
+        const id = input.value;
+        if (!socialImages.has(id)) {
+            socialImages.set(id, null);
+            fetch(cards.dataset.imageUrl.replace('/0/', `/${id}/`))
+                .then((response) => response.json())
+                .then(({ url }) => {
+                    socialImages.set(id, url);
+                    render();
+                })
+                .catch(() => socialImages.delete(id));
+        }
+        return socialImages.get(id) ?? input.closest('.w-field__input')?.querySelector('img')?.src ?? null;
+    }
+
+    function pageAddress() {
+        const slug = field('slug')?.value.trim();
+        // La raíz del Site no tiene padre con URL: se muestra su propia URL
+        if (!parentUrl) return pageUrl;
+        return slug ? `${parentUrl.replace(/\/?$/, '/')}${slug}/` : parentUrl;
+    }
+
+    function render() {
+        // Mismas reglas que build_page_metadata en el backend
+        const title = field('seo_title')?.value.trim() || field('title')?.value.trim() || 'Sin título';
+        const description = field('search_description')?.value.trim() ?? '';
+        const image = chosenImage() || defaultImage;
+
+        setText('[data-card-title]', title);
+        setText('[data-card-description]', description);
+        setText('[data-card-url]', pageAddress());
+        for (const el of cards.querySelectorAll('[data-card-image]')) {
+            el.style.backgroundImage = image ? `url("${image}")` : '';
+            el.classList.toggle('is-empty', !image);
+        }
+
+        const missing = [];
+        if (!description) missing.push('sin descripción (buscadores y redes toman texto de la página)');
+        if (!image) missing.push('sin imagen (ni propia ni por defecto)');
+        warnings.textContent = missing.length ? `Atención: ${missing.join('; ')}.` : '';
+    }
+
+    form.addEventListener('input', render);
+    form.addEventListener('change', render);
+    // El chooser cambia la imagen sin disparar input/change en el formulario
+    const chooser = field('og_image')?.parentElement;
+    if (chooser) new MutationObserver(render).observe(chooser, { subtree: true, attributes: true, childList: true });
+    render();
+})();