Los componentes han perdido sus estilos

Versión: 0.16.41

¿Puedes reproducir el error de la demo?

[X] Sí [ ] No

¿Cuál es el comportamiento esperado?

1. Copiar el componente padre seleccionado (contenedor) al portapapeles.
2. Pegar el componente padre seleccionado (contenedor) del portapapeles (en la misma página u otra página).
3. Todos los componentes mantienen estilos de ID y estilos en línea.

¿Cuál es el comportamiento actual?

1. Copiar el componente padre seleccionado (contenedor) al portapapeles.
2. Pegar el componente padre seleccionado (contenedor) del portapapeles (en la misma página u otra página).
3. Los componentes han perdido sus estilos de identificación, pero no sus estilos en línea.

Los componentes no tienen un ID de estilo regenerado, sino el mismo ID anterior con un "-2" añadido.

¿Puedes adjuntar capturas de pantalla, screencasts o una demo en directo?

[X] Sí (adjuntar) [ ] No

https://jsfiddle.net/bgrand_ch/71yuz26p/33/

Desde el jsfiddle anterior, sigue los siguientes pasos:

1. Seleccionar un componente.
2. Copia este componente con 'Ctrl/Cmd + C'.
3. Pega el componente copiado con 'Ctrl/Cmd + V'.
4. Todo el 'estilo' definido ha perdido, el estilo en línea se ha conservado.

Plugin de copiar-pegar (con sistema de notificaciones Quasar):

'''js importar { Notify } de 'quasar'

/**

• Copiar y pegar en la misma página y entre páginas
• @see https://grapesjs.com/docs/modules/Plugins.html
• @param {object} editor
• @param {objeto} opciones
• @returns {vacío} / Función por defecto de exportación (editor, opciones) { /*
  • Copiar un componente a la carpeta
  • @see https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
  • @returns {vacío} */ editor. Commands.add('core:copy', async () => { sea timeoutId = null

try { timeoutId = showNotification({ mensaje: 'Élément en cours de copie...', Tipo: 'info', Tiempo muerto: 600 })

await navigator.clipboard.writeText( JSON.stringify( getSelectedParent() ) )

showNotification({ mensaje: '¡Elemento copié avec succès!', Tipo: 'Éxito' }) } catch (error) { showNotification({ mensaje: 'Impossible de copier l'élément.', Error }) } finalmente { clearTimeout(timeoutId) } })

/**

• Pegar un componente de la tabla
• @see https://grapesjs.com/docs/api/editor.html
• @see https://grapesjs.com/docs/api/component.html
• @see https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/readText
• @returns {vacío} */ editor. Commands.add('core:paste', async () => { sea timeoutId = null

try { timeoutId = showNotification({ mensaje: 'Élément en cours de collage...', Tipo: 'info', Tiempo muerto: 600 })

const selectedParent = JSON.parse( await navigator.clipboard.readText() )

editor.getWrapper().append(selectedParent, { en: getSelectedParent().index() + 1 })

showNotification({ mensaje: '¡Elemento collé avec succès!', Tipo: 'Éxito' }) } catch (error) { showNotification({ mensaje: 'Impossible de coller l'élément.', Error }) } finalmente { clearTimeout(timeoutId) } })

/**

• Recupera el componente padre
• @see https://grapesjs.com/docs/api/editor.html
• @see https://grapesjs.com/docs/api/component.html
• @returns {objeto} */ función getSelectedParent () { Editor de regreso .getSelected() .más cercano(¿opciones?). ParentSelector || '#wrapper > div') }

/**

• Muestra una notificación al usuario
• @see https://quasar.dev/quasar-plugins/notify
• @param mensaje {string}
• @param {cuerda} [tipo]
• @param {objeto} [error]
• @param {número} [tiempo muerto]
• @returns {número|vacío} */ función showNotification ({ mensaje, tipo = 'error', error = {}, Tiempo muerto = 0 } = {}) { const notifType = { info: { icon: 'info', color: 'blue' }, Éxito: { icono: 'check_circle', color: 'verde' }, Error: { icon: 'error', color: 'red' } } const options = { mensaje, color: notifType[type].color, icon: notifType[type].icon }

if (error instance of Error) { options.caption = 'Pour l'IT : ${error?. mensaje}' }

const notify = () => Notify.create(options)

if (tiempo muerto > 0) { return setTimeout(() => notify(), timeout) }

notificar() } }