Plantillas de Url Composer

Componente temático
1

Casi un componente especializado para mi sitio, pero lo compartiré aquí ya que podría ser útil. Agrega una plantilla al compositor basada en una cadena en la URL.

Ha habido muchas discusiones sobre tener plantillas de compositor para etiquetas. Eso no funcionó en mi caso de uso, así que construí esto en su lugar. Se puede usar a la fuerza, o modificar ligeramente para que funcione también para etiquetas.

Github: GitHub - focallocal/url-composer-templates: Reads url strings and adds template text to the composer if a match is found

Plantillas de Compositor de URL

Un componente de tema de Discourse que rellena previamente el compositor con texto de plantilla basado en parámetros de URL. Diseñado para funcionar perfectamente con Docuss para proporcionar plantillas específicas del contexto para diferentes tipos de interacciones.

Características

  • Soporte de Parámetros de URL: Detecta automáticamente ?composer_template=X en las URL y aplica la plantilla correspondiente
  • Múltiples Tipos de Plantilla: Configura hasta 6 plantillas diferentes para diferentes propósitos (informe, asistencia, invitación, plantillas personalizadas)
  • Abrir Compositor Automáticamente: Opcionalmente abre el compositor automáticamente al visitar un enlace de Docuss sin hilos existentes
  • Aplicación Flexible: Las plantillas se pueden aplicar solo a la primera publicación, a todas las respuestas o a ambas
  • Persistencia de Sesión: Utiliza sessionStorage para mantener la selección de plantilla a través de las navegaciones de página
  • Modo de Depuración: Habilita el registro detallado de la consola para solucionar problemas de aplicación de plantillas

Instalación

  1. Instala el componente de tema en Discourse:

    • Ve a Admin → Personalizar → Temas
    • Haz clic en “Instalar” → “Desde un repositorio de Git”
    • Ingresa: https://github.com/focallocal/url-composer-templates
    • Agrega el componente a tu tema activo

  2. ¡No se requiere reconstrucción del plugin! El soporte para el parámetro composer_template ya existe en dcs-discourse-plugin y dcs-client.

  3. Implementa tu aplicación React (fl-maps) con los componentes DCSLink actualizados que pasan la propiedad composerTemplate.

  4. Configura las plantillas en la configuración del componente (Admin → Personalizar → Temas → tu tema → url-composer-templates → Configuración).

Configuración

Configuración de Plantillas

Cada plantilla tiene tres opciones de configuración:

Plantilla 1 (Informe)

  • template_1_id: report - El valor del parámetro de URL para activar esta plantilla
  • template_1_text: El texto para rellenar previamente en el compositor
  • template_1_use_for: first_post - Aplicar solo al crear temas nuevos

Plantilla 2 (Asistencia)

  • template_2_id: going - Para interacciones del tipo “Voy a ir”
  • template_2_text: Texto rellenado previamente para confirmaciones de asistencia
  • template_2_use_for: all_replies - Aplicar a todas las respuestas (no a las primeras publicaciones)

Plantilla 3 (Invitación)

  • template_3_id: invite - Para interacciones de invitación
  • template_3_text: Texto rellenado previamente para invitaciones
  • template_3_use_for: all_replies - Aplicar a todas las respuestas

Plantillas 4-6 (Personalizadas)

  • Deshabilitadas por defecto
  • Se pueden habilitar y personalizar para casos de uso específicos
  • Configura ID, texto y alcance de aplicación según sea necesario

Configuración de Apertura Automática

  • enable_auto_open_composer: true - Cuando está habilitado, abre automáticamente el compositor si:
    • Se hace clic en un enlace de Docuss (la URL contiene ?composer_template=X)
    • Aún no existen hilos para esa combinación de etiquetas
    • Ayuda a los usuarios a comenzar discusiones inmediatamente

Modo de Depuración

  • debug_mode: false - Habilita para ver registros detallados de la consola con prefijos de emoji:
    • :artist_palette: Registros de aplicación de plantillas
    • :rocket: Registros de apertura automática del compositor

Integración con Docuss

Integración Automática

El componente url-composer-templates está diseñado para funcionar automáticamente con Docuss. Cuando tienes ambos:

  • Este componente instalado en tu instancia de Discourse
  • El cliente y plugin de Docuss actualizados (con soporte para composer_template)

Las plantillas se aplicarán automáticamente según:

  1. Modo de Interacción:
    • Modo DISCUSS → Utiliza sugerencias de triggerId (asistencia, invitación) o por defecto a report
    • Modo COMMENT → Utiliza la plantilla report

Plantillas Personalizadas a través de Atributos HTML

Para un control más preciso, puedes especificar plantillas directamente en tu HTML usando el atributo data-dcs-composer-template:

<!-- Ejemplo: Botón de Informe -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="issue-report"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="report">
  Informar un Problema
</div>

<!-- Ejemplo: Botón de Asistencia -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="event-rsvp"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="going">
  ¡Voy a ir!
</div>

<!-- Ejemplo: Botón de Invitación -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="invite-friends"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="invite">
  Invitar Amigos
</div>

<!-- Ejemplo: Plantilla Personalizada -->
<div class="dcs-trigger" 
     data-dcs-trigger-id="feedback"
     data-dcs-interact-mode="DISCUSS"
     data-dcs-composer-template="custom1">
  Dar Opinión
</div>

Coincidencia de ID de Plantilla

El componente coincide con los IDs de plantilla del parámetro de URL con los IDs de plantilla configurados:

Parámetro de URL Configuración de Plantilla Propósito Predeterminado
?composer_template=report template_1_id Informes de errores, problemas
?composer_template=going template_2_id Confirmaciones de asistencia a eventos
?composer_template=invite template_3_id Invitaciones
?composer_template=custom1 template_4_id Uso personalizado
?composer_template=custom2 template_5_id Uso personalizado
?composer_template=custom3 template_6_id Uso personalizado

Cómo Funciona

Flujo de Aplicación de Plantilla

  1. Detección de URL: Cuando un usuario navega a una URL con ?composer_template=X, el componente almacena el ID de la plantilla en sessionStorage
  2. Intercepción del Compositor: Cuando se abre el compositor, el componente busca un ID de plantilla almacenado
  3. Coincidencia de Plantilla: Encuentra la plantilla coincidente basada en el ID
  4. Validación de Alcance: Verifica si la plantilla debe aplicarse (primera publicación, respuesta o ambas)
  5. Inserción de Texto: Rellena previamente el compositor con el texto de la plantilla
  6. Limpieza: Marca la plantilla como aplicada para evitar que se vuelva a aplicar

Flujo de Apertura Automática

  1. Detección de Parámetros: Verifica si la URL contiene ?composer_template=X y si la apertura automática está habilitada
  2. Búsqueda de Tema: Busca temas existentes con la combinación de etiquetas actual
  3. Apertura del Compositor: Si no se encuentran temas, abre automáticamente el compositor
  4. Aplicación de Plantilla: La plantilla se aplica luego a través del flujo normal anterior

Casos de Uso de Ejemplo

Sitio Web de Eventos

# settings.yml
template_2_id: "going"
template_2_text: "¡Planeo asistir! 🎉\n\nEspero verlos a todos allí."
template_2_use_for: "all_replies"

template_3_id: "invite"
template_3_text: "Me gustaría invitar amigos a este evento.\n\nA quién estoy invitando:\n- \n\nPor qué deberían venir:\n"
template_3_use_for: "first_post"

Seguimiento de Problemas

template_1_id: "bug"
template_1_text: "**Descripción del Error:**\n\n**Pasos para Reproducir:**\n1. \n2. \n3. \n\n**Comportamiento Esperado:**\n\n**Comportamiento Actual:**\n"
template_1_use_for: "first_post"

template_4_enabled: true
template_4_id: "feature"
template_4_text: "**Solicitud de Característica:**\n\n**Caso de Uso:**\n\n**Solución Propuesta:**\n"
template_4_use_for: "first_post"

Participación Comunitaria

template_1_id: "question"
template_1_text: "**Mi Pregunta:**\n\n**Lo que He Intentado:**\n\n**Contexto Adicional:**\n"
template_1_use_for: "first_post"

template_2_id: "answer"
template_2_text: "Esto es lo que me funcionó:\n\n**Solución:**\n\n**Por qué funciona:**\n"
template_2_use_for: "all_replies"

Solución de Problemas

Las Plantillas No Se Aplican

  1. Verifica el Parámetro de URL: Asegúrate de que la URL contenga ?composer_template=X donde X coincida con un ID de plantilla
  2. Habilita el Modo de Depuración: Activa debug_mode en la configuración para ver los registros de la consola
  3. Verifica el Alcance de la Plantilla: Comprueba si la configuración use_for coincide con tu acción (crear tema vs responder)
  4. Borra SessionStorage: Abre la consola del navegador y ejecuta: sessionStorage.clear()

La Apertura Automática No Funciona

  1. Verifica la Configuración: Asegúrate de que enable_auto_open_composer esté configurado en true
  2. Verifica la URL: La apertura automática solo funciona cuando la URL contiene ?composer_template=X
  3. Verifica Temas Existentes: La apertura automática solo se activa cuando NO existen temas con la combinación de etiquetas
  4. Habilita el Modo de Depuración: Busca registros de consola con el emoji :rocket:

Se Aplica la Plantilla Incorrecta

  1. Verifica los IDs de Plantilla: Asegúrate de que tu parámetro de URL coincida exactamente con el ID de la plantilla (distingue mayúsculas de minúsculas)
  2. Verifica la Prioridad: Si varias plantillas podrían coincidir, se utiliza la primera que coincida
  3. Borra Sesión: sessionStorage podría contener valores antiguos: sessionStorage.clear()

Problemas de Integración con Docuss

  1. Actualiza Docuss: Asegúrate de tener las últimas versiones de:
    • dcs-client (con soporte para composerTemplate en HtmlBased.js)
    • dcs-discourse-plugin (con generación de parámetros de URL en DcsIFrame.js.es6)
  2. Verifica los Atributos HTML: Confirma que data-dcs-composer-template esté configurado correctamente en los disparadores
  3. Inspecciona la Red: Revisa la pestaña Red de las Herramientas de Desarrollador del navegador para ver si se están añadiendo parámetros de URL

Historial de Versiones

v1.0.0 (Actual)

  • Lanzamiento inicial
  • Soporte para 6 plantillas configurables
  • Selección de plantilla basada en parámetros de URL
  • Apertura automática del compositor para enlaces de Docuss
  • Persistencia de SessionStorage
  • Modo de depuración para solución de problemas

Contribución

¿Encontraste un error o tienes una solicitud de característica? Por favor, abre un problema en el repositorio de GitHub.

Licencia

Este componente es de código abierto y está disponible bajo la Licencia MIT.

Créditos

Desarrollado por Andy@Focallocal para su uso con Docuss - un sistema para incrustar discusiones de Discourse en cualquier sitio web.