Modify Behavior of Existing Style Manager Property

[masrurm]

Hi everyone,

I'm trying to modify the behavior of how the background image property under Decorations works. Specifically, I want to make it so that the user can only add one background image rather than multiple layers. As I can't modify the preset behavior directly, I've been trying to get the add button (#gjs-sm-add) by it's ID and then use an event listener to set the display to 'none' when it is clicked. However, this doesn't seem to be working - would anyone be able to help me?

Here is my code snippet:

  const element = document.getElementById('gjs-sm-add');

  element.addEventListener('click',()=>{
    document.getElementById('gjs-sm-add').style.display = 'none';
  })

[artf]

I guess you could do something similar by relying on styleable:change event

  editor.on('styleable:change', (model, property) => {
      if (property === 'background') {
        const bgProperty = editor.StyleManager.getProperty('decorations', 'background');
        const layersLen = bgProperty?.getLayers().length;
        const addEl = document.querySelector('.gjs-sm-property__background [data-add-layer]');
        if (addEl) {
          addEl.style.display = layersLen > 0 ? 'none' : '';
        }
      }
    });