1031 lines
49 KiB
TypeScript
1031 lines
49 KiB
TypeScript
import { CommandMessage } from "../../../core/types/commands";
|
||
// @ts-ignore
|
||
import { ComponentType, ButtonStyle, ModalBuilder, TextInputBuilder, TextInputStyle, ActionRowBuilder, Message, MessageFlags } from "discord.js";
|
||
import { replaceVars } from "../../../core/lib/vars";
|
||
|
||
/**
|
||
* Botones de edición - VERSIÓN MEJORADA
|
||
*/
|
||
const btns = (disabled = false) => ([
|
||
{
|
||
type: 1,
|
||
components: [
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "📝 Título", disabled, custom_id: "edit_title" },
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "📄 Descripción", disabled, custom_id: "edit_description" },
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "🎨 Color", disabled, custom_id: "edit_color" },
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "➕ Contenido", disabled, custom_id: "add_content" },
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "➖ Separador", disabled, custom_id: "add_separator" }
|
||
]
|
||
},
|
||
{
|
||
type: 1,
|
||
components: [
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "🖼️ Imagen", disabled, custom_id: "add_image" },
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "🖼️ Portada", disabled, custom_id: "cover_image" },
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "📎 Thumbnail", disabled, custom_id: "edit_thumbnail" },
|
||
{ style: ButtonStyle.Primary, type: 2, label: "🔄 Mover", disabled, custom_id: "move_block" },
|
||
{ style: ButtonStyle.Danger, type: 2, label: "🗑️ Eliminar", disabled, custom_id: "delete_block" }
|
||
]
|
||
},
|
||
{
|
||
type: 1,
|
||
components: [
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "🎯 Variables", disabled, custom_id: "show_variables" },
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "📋 Duplicar", disabled, custom_id: "duplicate_block" },
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "📊 Vista Raw", disabled, custom_id: "show_raw" },
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "📥 Importar", disabled, custom_id: "import_json" },
|
||
{ style: ButtonStyle.Secondary, type: 2, label: "📤 Exportar", disabled, custom_id: "export_json" }
|
||
]
|
||
},
|
||
{
|
||
type: 1,
|
||
components: [
|
||
{ style: ButtonStyle.Success, type: 2, label: "💾 Guardar", disabled, custom_id: "save_block" },
|
||
{ style: ButtonStyle.Danger, type: 2, label: "❌ Cancelar", disabled, custom_id: "cancel_block" }
|
||
]
|
||
}
|
||
]);
|
||
|
||
/**
|
||
* Validar si una URL es válida
|
||
*/
|
||
const isValidUrl = (url: string): boolean => {
|
||
if (!url) return false;
|
||
try {
|
||
new URL(url);
|
||
return url.startsWith('http://') || url.startsWith('https://');
|
||
} catch {
|
||
return false;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Validar y limpiar contenido para Discord
|
||
*/
|
||
const validateContent = (content: string): string => {
|
||
if (!content || typeof content !== 'string') {
|
||
return "Sin contenido"; // Contenido por defecto
|
||
}
|
||
|
||
// Limpiar contenido y asegurar que tenga al menos 1 carácter
|
||
const cleaned = content.trim();
|
||
if (cleaned.length === 0) {
|
||
return "Sin contenido";
|
||
}
|
||
|
||
// Truncar si excede el límite de Discord (4000 caracteres)
|
||
if (cleaned.length > 4000) {
|
||
return cleaned.substring(0, 3997) + "...";
|
||
}
|
||
|
||
return cleaned;
|
||
};
|
||
|
||
/**
|
||
* Generar vista previa
|
||
*/
|
||
const renderPreview = async (blockState: any, member: any, guild: any) => {
|
||
const previewComponents = [];
|
||
|
||
// Añadir imagen de portada primero si existe
|
||
if (blockState.coverImage && isValidUrl(blockState.coverImage)) {
|
||
//@ts-ignore
|
||
const processedCoverUrl = await replaceVars(blockState.coverImage, member, guild);
|
||
if (isValidUrl(processedCoverUrl)) {
|
||
previewComponents.push({
|
||
type: 12,
|
||
items: [{ media: { url: processedCoverUrl } }]
|
||
});
|
||
}
|
||
}
|
||
|
||
// Añadir título después de la portada - VALIDAR CONTENIDO
|
||
//@ts-ignore
|
||
const processedTitle = await replaceVars(blockState.title ?? "Sin título", member, guild);
|
||
previewComponents.push({
|
||
type: 10,
|
||
content: validateContent(processedTitle)
|
||
});
|
||
|
||
// Procesar componentes en orden
|
||
for (const c of blockState.components) {
|
||
if (c.type === 10) {
|
||
// Componente de texto con thumbnail opcional
|
||
//@ts-ignore
|
||
const processedThumbnail = c.thumbnail ? await replaceVars(c.thumbnail, member, guild) : null;
|
||
//@ts-ignore
|
||
const processedContent = await replaceVars(c.content || "Sin contenido", member, guild);
|
||
const validatedContent = validateContent(processedContent);
|
||
|
||
if (processedThumbnail && isValidUrl(processedThumbnail)) {
|
||
// Si tiene thumbnail válido, usar contenedor tipo 9 con accessory
|
||
previewComponents.push({
|
||
type: 9,
|
||
components: [
|
||
{
|
||
type: 10,
|
||
content: validatedContent
|
||
}
|
||
],
|
||
accessory: {
|
||
type: 11,
|
||
media: { url: processedThumbnail }
|
||
}
|
||
});
|
||
} else {
|
||
// Sin thumbnail o thumbnail inválido, componente normal
|
||
previewComponents.push({
|
||
type: 10,
|
||
content: validatedContent
|
||
});
|
||
}
|
||
} else if (c.type === 14) {
|
||
// Separador
|
||
previewComponents.push({
|
||
type: 14,
|
||
divider: c.divider ?? true,
|
||
spacing: c.spacing ?? 1
|
||
});
|
||
} else if (c.type === 12) {
|
||
// Imagen - validar URL también
|
||
//@ts-ignore
|
||
const processedImageUrl = await replaceVars(c.url, member, guild);
|
||
|
||
if (isValidUrl(processedImageUrl)) {
|
||
previewComponents.push({
|
||
type: 12,
|
||
items: [{ media: { url: processedImageUrl } }]
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
type: 17,
|
||
accent_color: blockState.color ?? null,
|
||
components: previewComponents
|
||
};
|
||
};
|
||
|
||
export const command: CommandMessage = {
|
||
name: "editar-embed",
|
||
type: "message",
|
||
aliases: ["embed-editar", "modificar-embed", "blockeditv2"],
|
||
cooldown: 20,
|
||
run: async (message, args, client) => {
|
||
if (!message.member?.permissions.has("Administrator")) {
|
||
await message.reply("❌ No tienes permisos de Administrador.");
|
||
return;
|
||
}
|
||
|
||
const blockName: string | null = args[0] ?? null;
|
||
if (!blockName) {
|
||
await message.reply("Debes proporcionar un nombre. Uso: `!blockeditv2 <nombre>`");
|
||
return;
|
||
}
|
||
|
||
// Buscar el bloque existente
|
||
const existingBlock = await client.prisma.blockV2Config.findFirst({
|
||
where: { guildId: message.guild!.id, name: blockName }
|
||
});
|
||
|
||
if (!existingBlock) {
|
||
await message.reply("❌ Block no encontrado. Usa `!blockcreatev2 <nombre>` para crear uno nuevo.");
|
||
return;
|
||
}
|
||
|
||
// Estado inicial basado en el bloque existente
|
||
let blockState: any = {
|
||
title: existingBlock.config.title || `Block: ${blockName}`,
|
||
color: existingBlock.config.color || null,
|
||
coverImage: existingBlock.config.coverImage || null,
|
||
components: existingBlock.config.components || []
|
||
};
|
||
|
||
//@ts-ignore
|
||
const editorMessage = await message.channel.send({
|
||
content: "⚠️ **EDITANDO BLOCK EXISTENTE**\n\n" +
|
||
"Este editor usa **modales interactivos** y no podrás ver el chat mientras los usas.\n\n" +
|
||
"📝 **Recomendaciones:**\n" +
|
||
"• Ten preparados tus títulos y descripciones\n" +
|
||
"• Ten las URLs de imágenes listas para copiar\n" +
|
||
"• Los colores en formato HEX (#FF5733)\n" +
|
||
"• Las variables de usuario/servidor que necesites\n\n" +
|
||
"*Iniciando editor en 3 segundos...*"
|
||
});
|
||
|
||
// Esperar 3 segundos para que lean el mensaje
|
||
await new Promise(resolve => setTimeout(resolve, 3000));
|
||
|
||
//@ts-ignore
|
||
await editorMessage.edit({
|
||
content: null,
|
||
flags: 32768,
|
||
components: [
|
||
await renderPreview(blockState, message.member, message.guild),
|
||
...btns(false)
|
||
]
|
||
});
|
||
|
||
const collector = editorMessage.createMessageComponentCollector({
|
||
time: 3600000 // 1 hora
|
||
});
|
||
|
||
collector.on("collect", async (i: any) => {
|
||
if (i.user.id !== message.author.id) {
|
||
await i.reply({ content: "No puedes usar este menú.", flags: MessageFlags.Ephemeral });
|
||
return;
|
||
}
|
||
|
||
// --- BOTONES ---
|
||
if (i.isButton()) {
|
||
switch (i.customId) {
|
||
case "save_block": {
|
||
await i.deferUpdate();
|
||
await client.prisma.blockV2Config.update({
|
||
where: { guildId_name: { guildId: message.guildId!, name: blockName } },
|
||
data: { config: blockState }
|
||
});
|
||
await editorMessage.edit({
|
||
components: [
|
||
{
|
||
type: 17,
|
||
accent_color: blockState.color ?? null,
|
||
components: [
|
||
{ type: 10, content: `✅ Actualizado: ${blockName}` },
|
||
{ type: 10, content: "Cambios guardados en la base de datos." }
|
||
]
|
||
}
|
||
]
|
||
});
|
||
collector.stop();
|
||
return;
|
||
}
|
||
case "cancel_block": {
|
||
await i.deferUpdate();
|
||
await editorMessage.delete();
|
||
collector.stop();
|
||
return;
|
||
}
|
||
case "edit_title": {
|
||
// Crear modal para editar título
|
||
const modal = new ModalBuilder()
|
||
.setCustomId('edit_title_modal')
|
||
.setTitle('📝 Editar Título del Block');
|
||
|
||
const titleInput = new TextInputBuilder()
|
||
.setCustomId('title_input')
|
||
.setLabel('Nuevo Título')
|
||
.setStyle(TextInputStyle.Short)
|
||
.setPlaceholder('Escribe el nuevo título aquí...')
|
||
.setValue(blockState.title || '')
|
||
.setMaxLength(256)
|
||
.setRequired(true);
|
||
|
||
const firstActionRow = new ActionRowBuilder().addComponents(titleInput);
|
||
modal.addComponents(firstActionRow);
|
||
|
||
//@ts-ignore
|
||
await i.showModal(modal);
|
||
break;
|
||
}
|
||
case "edit_description": {
|
||
const modal = new ModalBuilder()
|
||
.setCustomId('edit_description_modal')
|
||
.setTitle('📄 Editar Descripción');
|
||
|
||
const descComp = blockState.components.find((c: any) => c.type === 10);
|
||
const currentDesc = descComp ? descComp.content : '';
|
||
|
||
const descInput = new TextInputBuilder()
|
||
.setCustomId('description_input')
|
||
.setLabel('Nueva Descripción')
|
||
.setStyle(TextInputStyle.Paragraph)
|
||
.setPlaceholder('Escribe la nueva descripción aquí...')
|
||
.setValue(currentDesc || '')
|
||
.setMaxLength(2000)
|
||
.setRequired(true);
|
||
|
||
const firstActionRow = new ActionRowBuilder().addComponents(descInput);
|
||
modal.addComponents(firstActionRow);
|
||
|
||
//@ts-ignore
|
||
await i.showModal(modal);
|
||
break;
|
||
}
|
||
case "edit_color": {
|
||
const modal = new ModalBuilder()
|
||
.setCustomId('edit_color_modal')
|
||
.setTitle('🎨 Editar Color del Block');
|
||
|
||
const currentColor = blockState.color ? `#${blockState.color.toString(16).padStart(6, '0')}` : '';
|
||
|
||
const colorInput = new TextInputBuilder()
|
||
.setCustomId('color_input')
|
||
.setLabel('Color en formato HEX')
|
||
.setStyle(TextInputStyle.Short)
|
||
.setPlaceholder('#FF5733 o FF5733')
|
||
.setValue(currentColor)
|
||
.setMaxLength(7)
|
||
.setRequired(false);
|
||
|
||
const firstActionRow = new ActionRowBuilder().addComponents(colorInput);
|
||
modal.addComponents(firstActionRow);
|
||
|
||
//@ts-ignore
|
||
await i.showModal(modal);
|
||
break;
|
||
}
|
||
case "add_content": {
|
||
const modal = new ModalBuilder()
|
||
.setCustomId('add_content_modal')
|
||
.setTitle('➕ Agregar Nuevo Contenido');
|
||
|
||
const contentInput = new TextInputBuilder()
|
||
.setCustomId('content_input')
|
||
.setLabel('Contenido del Texto')
|
||
.setStyle(TextInputStyle.Paragraph)
|
||
.setPlaceholder('Escribe el contenido aquí...')
|
||
.setMaxLength(2000)
|
||
.setRequired(true);
|
||
|
||
const firstActionRow = new ActionRowBuilder().addComponents(contentInput);
|
||
modal.addComponents(firstActionRow);
|
||
|
||
//@ts-ignore
|
||
await i.showModal(modal);
|
||
break;
|
||
}
|
||
case "add_image": {
|
||
const modal = new ModalBuilder()
|
||
.setCustomId('add_image_modal')
|
||
.setTitle('🖼️ Agregar Nueva Imagen');
|
||
|
||
const imageUrlInput = new TextInputBuilder()
|
||
.setCustomId('image_url_input')
|
||
.setLabel('URL de la Imagen')
|
||
.setStyle(TextInputStyle.Short)
|
||
.setPlaceholder('https://ejemplo.com/imagen.png')
|
||
.setMaxLength(2000)
|
||
.setRequired(true);
|
||
|
||
const firstActionRow = new ActionRowBuilder().addComponents(imageUrlInput);
|
||
modal.addComponents(firstActionRow);
|
||
|
||
//@ts-ignore
|
||
await i.showModal(modal);
|
||
break;
|
||
}
|
||
case "cover_image": {
|
||
if (blockState.coverImage) {
|
||
// Si ya tiene portada, preguntar si editar o eliminar
|
||
//@ts-ignore
|
||
const reply = await i.reply({
|
||
flags: MessageFlags.Ephemeral,
|
||
content: "Ya tienes una imagen de portada. ¿Qué quieres hacer?",
|
||
components: [
|
||
{
|
||
type: 1,
|
||
components: [
|
||
{ type: 2, style: ButtonStyle.Primary, label: "✏️ Editar", custom_id: "edit_cover_modal" },
|
||
{ type: 2, style: ButtonStyle.Danger, label: "🗑️ Eliminar", custom_id: "delete_cover" }
|
||
]
|
||
}
|
||
],
|
||
fetchReply: true
|
||
});
|
||
|
||
//@ts-ignore
|
||
const coverCollector = reply.createMessageComponentCollector({
|
||
componentType: ComponentType.Button,
|
||
max: 1,
|
||
time: 60000,
|
||
filter: (b: any) => b.user.id === message.author.id
|
||
});
|
||
|
||
coverCollector.on("collect", async (b: any) => {
|
||
if (b.customId === "edit_cover_modal") {
|
||
// Crear modal para editar portada
|
||
const modal = new ModalBuilder()
|
||
.setCustomId('edit_cover_modal')
|
||
.setTitle('🖼️ Editar Imagen de Portada');
|
||
|
||
const coverInput = new TextInputBuilder()
|
||
.setCustomId('cover_input')
|
||
.setLabel('URL de la Imagen de Portada')
|
||
.setStyle(TextInputStyle.Short)
|
||
.setPlaceholder('https://ejemplo.com/portada.png')
|
||
.setValue(blockState.coverImage || '')
|
||
.setMaxLength(2000)
|
||
.setRequired(true);
|
||
|
||
const firstActionRow = new ActionRowBuilder().addComponents(coverInput);
|
||
modal.addComponents(firstActionRow);
|
||
|
||
//@ts-ignore
|
||
await b.showModal(modal);
|
||
} else if (b.customId === "delete_cover") {
|
||
blockState.coverImage = null;
|
||
await b.update({ content: "✅ Imagen de portada eliminada.", components: [] });
|
||
await editorMessage.edit({
|
||
components: [await renderPreview(blockState, message.member, message.guild), ...btns(false)]
|
||
});
|
||
}
|
||
coverCollector.stop();
|
||
});
|
||
} else {
|
||
// No tiene portada, crear modal para añadir nueva
|
||
const modal = new ModalBuilder()
|
||
.setCustomId('add_cover_modal')
|
||
.setTitle('🖼️ Agregar Imagen de Portada');
|
||
|
||
const coverInput = new TextInputBuilder()
|
||
.setCustomId('cover_input')
|
||
.setLabel('URL de la Imagen de Portada')
|
||
.setStyle(TextInputStyle.Short)
|
||
.setPlaceholder('https://ejemplo.com/portada.png')
|
||
.setMaxLength(2000)
|
||
.setRequired(true);
|
||
|
||
const firstActionRow = new ActionRowBuilder().addComponents(coverInput);
|
||
modal.addComponents(firstActionRow);
|
||
|
||
//@ts-ignore
|
||
await i.showModal(modal);
|
||
}
|
||
break;
|
||
}
|
||
case "add_separator": {
|
||
const modal = new ModalBuilder()
|
||
.setCustomId('add_separator_modal')
|
||
.setTitle('➖ Agregar Separador');
|
||
|
||
const visibleInput = new TextInputBuilder()
|
||
.setCustomId('separator_visible')
|
||
.setLabel('¿Separador visible? (true/false)')
|
||
.setStyle(TextInputStyle.Short)
|
||
.setPlaceholder('true o false')
|
||
.setValue('true')
|
||
.setMaxLength(5)
|
||
.setRequired(true);
|
||
|
||
const spacingInput = new TextInputBuilder()
|
||
.setCustomId('separator_spacing')
|
||
.setLabel('Espaciado (1-3)')
|
||
.setStyle(TextInputStyle.Short)
|
||
.setPlaceholder('1, 2 o 3')
|
||
.setValue('1')
|
||
.setMaxLength(1)
|
||
.setRequired(false);
|
||
|
||
const firstRow = new ActionRowBuilder().addComponents(visibleInput);
|
||
const secondRow = new ActionRowBuilder().addComponents(spacingInput);
|
||
modal.addComponents(firstRow, secondRow);
|
||
|
||
//@ts-ignore
|
||
await i.showModal(modal);
|
||
break;
|
||
}
|
||
case "edit_thumbnail": {
|
||
// Buscar el primer componente de texto para añadir/editar thumbnail
|
||
const textComp = blockState.components.find((c: any) => c.type === 10);
|
||
|
||
if (!textComp) {
|
||
await i.deferReply({ flags: MessageFlags.Ephemeral });
|
||
//@ts-ignore
|
||
await i.editReply({
|
||
content: "❌ Necesitas al menos un componente de texto para añadir thumbnail."
|
||
});
|
||
break;
|
||
}
|
||
|
||
const modal = new ModalBuilder()
|
||
.setCustomId('edit_thumbnail_modal')
|
||
.setTitle('📎 Editar Thumbnail');
|
||
|
||
const thumbnailInput = new TextInputBuilder()
|
||
.setCustomId('thumbnail_input')
|
||
.setLabel('URL del Thumbnail')
|
||
.setStyle(TextInputStyle.Short)
|
||
.setPlaceholder('https://ejemplo.com/thumbnail.png o dejar vacío para eliminar')
|
||
.setValue(textComp.thumbnail || '')
|
||
.setMaxLength(2000)
|
||
.setRequired(false);
|
||
|
||
const firstRow = new ActionRowBuilder().addComponents(thumbnailInput);
|
||
modal.addComponents(firstRow);
|
||
|
||
//@ts-ignore
|
||
await i.showModal(modal);
|
||
break;
|
||
}
|
||
case "move_block": {
|
||
const options = blockState.components.map((c: any, idx: number) => ({
|
||
label:
|
||
c.type === 10
|
||
? `Texto: ${c.content?.slice(0, 30) || "..."}`
|
||
: c.type === 14
|
||
? "Separador"
|
||
: c.type === 12
|
||
? `Imagen: ${c.url?.slice(-30) || "..."}`
|
||
: `Componente ${c.type}`,
|
||
value: idx.toString(),
|
||
description:
|
||
c.type === 10 && c.thumbnail
|
||
? "Con thumbnail"
|
||
: undefined
|
||
}));
|
||
|
||
//@ts-ignore
|
||
const reply = await i.reply({
|
||
flags: MessageFlags.Ephemeral,
|
||
content: "Selecciona el bloque que quieres mover:",
|
||
components: [
|
||
{
|
||
type: 1,
|
||
components: [
|
||
{ type: 3, custom_id: "move_block_select", placeholder: "Elige un bloque", options }
|
||
]
|
||
}
|
||
],
|
||
fetchReply: true
|
||
});
|
||
|
||
//@ts-ignore
|
||
const selCollector = reply.createMessageComponentCollector({
|
||
componentType: ComponentType.StringSelect,
|
||
max: 1,
|
||
time: 60000,
|
||
filter: (it: any) => it.user.id === message.author.id
|
||
});
|
||
|
||
selCollector.on("collect", async (sel: any) => {
|
||
const idx = parseInt(sel.values[0]);
|
||
|
||
await sel.update({
|
||
content: "¿Quieres mover este bloque?",
|
||
components: [
|
||
{
|
||
type: 1,
|
||
components: [
|
||
{ type: 2, style: ButtonStyle.Secondary, label: "⬆️ Subir", custom_id: `move_up_${idx}`, disabled: idx === 0 },
|
||
{ type: 2, style: ButtonStyle.Secondary, label: "⬇️ Bajar", custom_id: `move_down_${idx}`, disabled: idx === blockState.components.length - 1 }
|
||
]
|
||
}
|
||
]
|
||
});
|
||
|
||
//@ts-ignore
|
||
const btnCollector = reply.createMessageComponentCollector({
|
||
componentType: ComponentType.Button,
|
||
max: 1,
|
||
time: 60000,
|
||
filter: (b: any) => b.user.id === message.author.id
|
||
});
|
||
|
||
btnCollector.on("collect", async (b: any) => {
|
||
if (b.customId.startsWith("move_up_")) {
|
||
const i2 = parseInt(b.customId.replace("move_up_", ""));
|
||
if (i2 > 0) {
|
||
const item = blockState.components[i2];
|
||
blockState.components.splice(i2, 1);
|
||
blockState.components.splice(i2 - 1, 0, item);
|
||
}
|
||
await b.update({ content: "✅ Bloque movido arriba.", components: [] });
|
||
} else if (b.customId.startsWith("move_down_")) {
|
||
const i2 = parseInt(b.customId.replace("move_down_", ""));
|
||
if (i2 < blockState.components.length - 1) {
|
||
const item = blockState.components[i2];
|
||
blockState.components.splice(i2, 1);
|
||
blockState.components.splice(i2 + 1, 0, item);
|
||
}
|
||
await b.update({ content: "✅ Bloque movido abajo.", components: [] });
|
||
}
|
||
|
||
await editorMessage.edit({
|
||
components: [await renderPreview(blockState, message.member, message.guild), ...btns(false)]
|
||
});
|
||
|
||
btnCollector.stop();
|
||
selCollector.stop();
|
||
});
|
||
});
|
||
|
||
break;
|
||
}
|
||
case "delete_block": {
|
||
// Incluir portada en las opciones si existe
|
||
const options = [];
|
||
|
||
// Añadir portada como opción si existe
|
||
if (blockState.coverImage) {
|
||
options.push({
|
||
label: "🖼️ Imagen de Portada",
|
||
value: "cover_image",
|
||
description: "Imagen principal del bloque"
|
||
});
|
||
}
|
||
|
||
// Añadir componentes regulares
|
||
blockState.components.forEach((c: any, idx: number) => {
|
||
options.push({
|
||
label:
|
||
c.type === 10
|
||
? `Texto: ${c.content?.slice(0, 30) || "..."}`
|
||
: c.type === 14
|
||
? `Separador ${c.divider ? '(Visible)' : '(Invisible)'}`
|
||
: c.type === 12
|
||
? `Imagen: ${c.url?.slice(-30) || "..."}`
|
||
: `Componente ${c.type}`,
|
||
value: idx.toString(),
|
||
description:
|
||
c.type === 10 && c.thumbnail
|
||
? "Con thumbnail"
|
||
: undefined
|
||
});
|
||
});
|
||
|
||
if (options.length === 0) {
|
||
await i.deferReply({ flags: MessageFlags.Ephemeral });
|
||
//@ts-ignore
|
||
await i.editReply({
|
||
content: "❌ No hay elementos para eliminar."
|
||
});
|
||
break;
|
||
}
|
||
|
||
//@ts-ignore
|
||
const reply = await i.reply({
|
||
flags: MessageFlags.Ephemeral,
|
||
content: "Selecciona el elemento que quieres eliminar:",
|
||
components: [
|
||
{
|
||
type: 1,
|
||
components: [
|
||
{ type: 3, custom_id: "delete_block_select", placeholder: "Elige un elemento", options }
|
||
]
|
||
}
|
||
],
|
||
fetchReply: true
|
||
});
|
||
|
||
//@ts-ignore
|
||
const selCollector = reply.createMessageComponentCollector({
|
||
componentType: ComponentType.StringSelect,
|
||
max: 1,
|
||
time: 60000,
|
||
filter: (it: any) => it.user.id === message.author.id
|
||
});
|
||
|
||
selCollector.on("collect", async (sel: any) => {
|
||
const selectedValue = sel.values[0];
|
||
|
||
if (selectedValue === "cover_image") {
|
||
blockState.coverImage = null;
|
||
await sel.update({ content: "✅ Imagen de portada eliminada.", components: [] });
|
||
} else {
|
||
const idx = parseInt(selectedValue);
|
||
blockState.components.splice(idx, 1);
|
||
await sel.update({ content: "✅ Elemento eliminado.", components: [] });
|
||
}
|
||
|
||
await editorMessage.edit({
|
||
components: [await renderPreview(blockState, message.member, message.guild), ...btns(false)]
|
||
});
|
||
|
||
selCollector.stop();
|
||
});
|
||
|
||
break;
|
||
}
|
||
case "show_variables": {
|
||
await i.deferReply({ flags: MessageFlags.Ephemeral });
|
||
//@ts-ignore
|
||
await i.editReply({
|
||
content: "📋 **Variables Disponibles:**\n\n" +
|
||
"**👤 Usuario:**\n" +
|
||
"`{user.name}` - Nombre del usuario\n" +
|
||
"`{user.id}` - ID del usuario\n" +
|
||
"`{user.mention}` - Mención del usuario\n" +
|
||
"`{user.avatar}` - Avatar del usuario\n\n" +
|
||
"**📊 Estadísticas:**\n" +
|
||
"`{user.pointsAll}` - Puntos totales\n" +
|
||
"`{user.pointsWeekly}` - Puntos semanales\n" +
|
||
"`{user.pointsMonthly}` - Puntos mensuales\n\n" +
|
||
"**🏠 Servidor:**\n" +
|
||
"`{guild.name}` - Nombre del servidor\n" +
|
||
"`{guild.icon}` - Ícono del servidor\n\n" +
|
||
"**🔗 Invitación:**\n" +
|
||
"`{invite.name}` - Nombre del servidor invitado\n" +
|
||
"`{invite.icon}` - Ícono del servidor invitado"
|
||
});
|
||
break;
|
||
}
|
||
case "duplicate_block": {
|
||
const options = blockState.components.map((c: any, idx: number) => ({
|
||
label: c.type === 10 ? `Texto: ${c.content?.slice(0, 30) || "..."}`
|
||
: c.type === 14 ? "Separador"
|
||
: c.type === 12 ? `Imagen: ${c.url?.slice(-30) || "..."}`
|
||
: `Componente ${c.type}`,
|
||
value: idx.toString(),
|
||
description: c.type === 10 && c.thumbnail ? "Con thumbnail" : undefined
|
||
}));
|
||
|
||
if (options.length === 0) {
|
||
await i.deferReply({ flags: MessageFlags.Ephemeral });
|
||
//@ts-ignore
|
||
await i.editReply({ content: "❌ No hay elementos para duplicar." });
|
||
break;
|
||
}
|
||
|
||
//@ts-ignore
|
||
const reply = await i.reply({
|
||
flags: MessageFlags.Ephemeral,
|
||
content: "Selecciona el elemento que quieres duplicar:",
|
||
components: [{
|
||
type: 1,
|
||
components: [{
|
||
type: 3,
|
||
custom_id: "duplicate_select",
|
||
placeholder: "Elige un elemento",
|
||
options
|
||
}]
|
||
}],
|
||
fetchReply: true
|
||
});
|
||
|
||
//@ts-ignore
|
||
const selCollector = reply.createMessageComponentCollector({
|
||
componentType: ComponentType.StringSelect,
|
||
max: 1,
|
||
time: 60000,
|
||
filter: (sel: any) => sel.user.id === message.author.id
|
||
});
|
||
|
||
selCollector.on("collect", async (sel: any) => {
|
||
const idx = parseInt(sel.values[0]);
|
||
const originalComponent = blockState.components[idx];
|
||
const duplicatedComponent = JSON.parse(JSON.stringify(originalComponent));
|
||
|
||
blockState.components.splice(idx + 1, 0, duplicatedComponent);
|
||
|
||
await sel.update({ content: "✅ Elemento duplicado.", components: [] });
|
||
await editorMessage.edit({
|
||
components: [await renderPreview(blockState, message.member, message.guild), ...btns(false)]
|
||
});
|
||
});
|
||
break;
|
||
}
|
||
case "show_raw": {
|
||
const rawJson = JSON.stringify(blockState, null, 2);
|
||
const truncated = rawJson.length > 1900 ? rawJson.slice(0, 1900) + "..." : rawJson;
|
||
|
||
//@ts-ignore
|
||
await i.reply({
|
||
flags: MessageFlags.Ephemeral,
|
||
content: `\`\`\`json\n${truncated}\`\`\``
|
||
});
|
||
break;
|
||
}
|
||
case "import_json": {
|
||
const modal = new ModalBuilder()
|
||
.setCustomId('import_json_modal')
|
||
.setTitle('📥 Importar JSON');
|
||
|
||
const jsonInput = new TextInputBuilder()
|
||
.setCustomId('json_input')
|
||
.setLabel('Pega tu configuración JSON aquí')
|
||
.setStyle(TextInputStyle.Paragraph)
|
||
.setPlaceholder('{"title": "...", "components": [...]}')
|
||
.setMaxLength(4000)
|
||
.setRequired(true);
|
||
|
||
const firstRow = new ActionRowBuilder().addComponents(jsonInput);
|
||
modal.addComponents(firstRow);
|
||
|
||
//@ts-ignore
|
||
await i.showModal(modal);
|
||
break;
|
||
}
|
||
case "export_json": {
|
||
const exportJson = JSON.stringify(blockState, null, 2);
|
||
|
||
// Truncar si es muy largo para evitar problemas con Discord
|
||
const truncatedJson = exportJson.length > 1800 ? exportJson.slice(0, 1800) + "\n..." : exportJson;
|
||
|
||
//@ts-ignore
|
||
await i.reply({
|
||
flags: MessageFlags.Ephemeral,
|
||
content: `📤 **JSON Exportado:**\n\`\`\`json\n${truncatedJson}\`\`\`\n\n💡 **Tip:** Copia el JSON de arriba manualmente y pégalo donde necesites.`
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
|
||
// Actualizar vista previa después de cada acción
|
||
try {
|
||
await editorMessage.edit({
|
||
components: [await renderPreview(blockState, message.member, message.guild), ...btns(false)]
|
||
});
|
||
} catch (updateError: any) {
|
||
if (updateError.code === 10008) {
|
||
console.log('Mensaje del editor eliminado');
|
||
} else {
|
||
console.error('Error actualizando vista previa:', updateError);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// Manejo de modales mejorado con mejor gestión de errores
|
||
let modalHandlerActive = true;
|
||
|
||
const modalHandler = async (interaction: any) => {
|
||
if (!interaction.isModalSubmit()) return;
|
||
if (interaction.user.id !== message.author.id) return;
|
||
if (!interaction.customId.endsWith('_modal')) return;
|
||
if (!modalHandlerActive) return;
|
||
|
||
try {
|
||
switch (interaction.customId) {
|
||
case 'edit_title_modal': {
|
||
blockState.title = interaction.fields.getTextInputValue('title_input');
|
||
await interaction.reply({ content: '✅ Título actualizado.', flags: MessageFlags.Ephemeral });
|
||
break;
|
||
}
|
||
case 'edit_description_modal': {
|
||
const newDescription = interaction.fields.getTextInputValue('description_input');
|
||
const descComp = blockState.components.find((c: any) => c.type === 10);
|
||
if (descComp) {
|
||
descComp.content = newDescription;
|
||
} else {
|
||
blockState.components.push({ type: 10, content: newDescription, thumbnail: null });
|
||
}
|
||
await interaction.reply({ content: '✅ Descripción actualizada.', flags: MessageFlags.Ephemeral });
|
||
break;
|
||
}
|
||
case 'edit_color_modal': {
|
||
const colorInput = interaction.fields.getTextInputValue('color_input');
|
||
if (colorInput.trim() === '') {
|
||
blockState.color = null;
|
||
} else {
|
||
let hexColor = colorInput.replace('#', '');
|
||
if (/^[0-9A-F]{6}$/i.test(hexColor)) {
|
||
blockState.color = parseInt(hexColor, 16);
|
||
} else {
|
||
await interaction.reply({ content: '❌ Color inválido. Usa formato HEX (#FF5733)', flags: MessageFlags.Ephemeral });
|
||
return;
|
||
}
|
||
}
|
||
await interaction.reply({ content: '✅ Color actualizado.', flags: MessageFlags.Ephemeral });
|
||
break;
|
||
}
|
||
case 'add_content_modal': {
|
||
const newContent = interaction.fields.getTextInputValue('content_input');
|
||
blockState.components.push({ type: 10, content: newContent, thumbnail: null });
|
||
await interaction.reply({ content: '✅ Contenido añadido.', flags: MessageFlags.Ephemeral });
|
||
break;
|
||
}
|
||
case 'add_image_modal': {
|
||
const imageUrl = interaction.fields.getTextInputValue('image_url_input');
|
||
if (isValidUrl(imageUrl)) {
|
||
blockState.components.push({ type: 12, url: imageUrl });
|
||
await interaction.reply({ content: '✅ Imagen añadida.', flags: MessageFlags.Ephemeral });
|
||
} else {
|
||
await interaction.reply({ content: '❌ URL de imagen inválida.', flags: MessageFlags.Ephemeral });
|
||
return;
|
||
}
|
||
break;
|
||
}
|
||
case 'add_cover_modal':
|
||
case 'edit_cover_modal': {
|
||
const coverUrl = interaction.fields.getTextInputValue('cover_input');
|
||
if (isValidUrl(coverUrl)) {
|
||
blockState.coverImage = coverUrl;
|
||
await interaction.reply({ content: '✅ Imagen de portada actualizada.', flags: MessageFlags.Ephemeral });
|
||
} else {
|
||
await interaction.reply({ content: '❌ URL de portada inválida.', flags: MessageFlags.Ephemeral });
|
||
return;
|
||
}
|
||
break;
|
||
}
|
||
case 'add_separator_modal': {
|
||
const visibleStr = interaction.fields.getTextInputValue('separator_visible').toLowerCase();
|
||
const spacingStr = interaction.fields.getTextInputValue('separator_spacing') || '1';
|
||
|
||
const divider = visibleStr === 'true' || visibleStr === '1' || visibleStr === 'si' || visibleStr === 'sí';
|
||
const spacing = Math.min(3, Math.max(1, parseInt(spacingStr) || 1));
|
||
|
||
blockState.components.push({ type: 14, divider, spacing });
|
||
await interaction.reply({ content: '✅ Separador añadido.', flags: MessageFlags.Ephemeral });
|
||
break;
|
||
}
|
||
case 'edit_thumbnail_modal': {
|
||
const thumbnailUrl = interaction.fields.getTextInputValue('thumbnail_input');
|
||
const textComp = blockState.components.find((c: any) => c.type === 10);
|
||
|
||
if (textComp) {
|
||
if (thumbnailUrl.trim() === '') {
|
||
// Si está vacío, eliminar thumbnail
|
||
textComp.thumbnail = null;
|
||
await interaction.reply({ content: '✅ Thumbnail eliminado.', flags: MessageFlags.Ephemeral });
|
||
} else if (!isValidUrl(thumbnailUrl)) {
|
||
// Si no es una URL válida, mostrar error
|
||
await interaction.reply({ content: '❌ URL de thumbnail inválida.', flags: MessageFlags.Ephemeral });
|
||
return;
|
||
} else {
|
||
// Si es una URL válida, añadir thumbnail
|
||
textComp.thumbnail = thumbnailUrl;
|
||
await interaction.reply({ content: '✅ Thumbnail actualizado.', flags: MessageFlags.Ephemeral });
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
case 'import_json_modal': {
|
||
try {
|
||
const jsonString = interaction.fields.getTextInputValue('json_input');
|
||
const importedData = JSON.parse(jsonString);
|
||
|
||
if (importedData && typeof importedData === 'object') {
|
||
blockState = {
|
||
title: importedData.title || blockState.title,
|
||
color: importedData.color || blockState.color,
|
||
coverImage: importedData.coverImage || blockState.coverImage,
|
||
components: Array.isArray(importedData.components) ? importedData.components : blockState.components
|
||
};
|
||
|
||
await interaction.reply({ content: '✅ JSON importado correctamente.', flags: MessageFlags.Ephemeral });
|
||
} else {
|
||
await interaction.reply({ content: '❌ Estructura JSON inválida.', flags: MessageFlags.Ephemeral });
|
||
return;
|
||
}
|
||
} catch (error) {
|
||
await interaction.reply({ content: '❌ JSON inválido. Verifica el formato.', flags: MessageFlags.Ephemeral });
|
||
return;
|
||
}
|
||
break;
|
||
}
|
||
default:
|
||
return;
|
||
}
|
||
|
||
// Actualizar la vista previa después de cada cambio en el modal
|
||
setTimeout(async () => {
|
||
if (!modalHandlerActive) return;
|
||
|
||
try {
|
||
const messageExists = await editorMessage.fetch().catch(() => null);
|
||
if (!messageExists) return;
|
||
|
||
await editorMessage.edit({
|
||
components: [await renderPreview(blockState, message.member, message.guild), ...btns(false)]
|
||
});
|
||
} catch (error: any) {
|
||
if (error.code === 10008) {
|
||
console.log('Mensaje del editor eliminado');
|
||
} else if (error.code === 10062) {
|
||
console.log('Interacción expirada');
|
||
} else {
|
||
console.error('Error actualizando preview:', error.message || error);
|
||
}
|
||
}
|
||
}, 1000);
|
||
|
||
} catch (error: any) {
|
||
console.error('Error en modal:', error);
|
||
try {
|
||
if (error.code !== 10062 && !interaction.replied && !interaction.deferred) {
|
||
await interaction.reply({ content: '❌ Error procesando el modal.', flags: MessageFlags.Ephemeral });
|
||
}
|
||
} catch (replyError) {
|
||
console.log('No se pudo responder a la interacción (probablemente expirada)');
|
||
}
|
||
}
|
||
};
|
||
|
||
// Registrar el manejador de modales
|
||
client.on('interactionCreate', modalHandler);
|
||
|
||
//@ts-ignore
|
||
collector.on("end", async (_, reason) => {
|
||
modalHandlerActive = false;
|
||
client.off('interactionCreate', modalHandler);
|
||
|
||
if (reason === "time") {
|
||
try {
|
||
const messageExists = await editorMessage.fetch().catch(() => null);
|
||
if (messageExists) {
|
||
await editorMessage.edit({
|
||
components: [
|
||
{ type: 17, components: [{ type: 10, content: "⏰ Editor finalizado por inactividad." }] }
|
||
]
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.log('No se pudo actualizar el mensaje final');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
};
|