Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[QUESTION] How to update styles in Style Manager

See original GitHub issue

Hello. I created custom component where I set backgraound-image via custom asset manager Custom block code:

  domc.addType('image-block', {
    extend: 'default',
    model: {
      defaults() {
        return {
          name: 'Background image',
          type: 'image-block',
          tagName: 'div',
          void: false,
          droppable: true,
        };
      },
    },
    view: {
      init() {
        this.listenTo(this.model, 'change:src', this.updateImage);
      },
      events: {
        dblclick: 'onActive',
      },
      onActive() {
        editor.runCommand('open-assets');
      },
      updateImage(model, url) {
        if (url) {
          const style = model.getStyle();

          model.setStyle({
            'background-image': style['background-color'] || `url("${url}")`,
            'background-size': style['background-size'] || 'cover',
            'background-position':
              style['background-position'] || 'center center',
            'background-repeat': style['background-repeat'] || 'no-repeat',
            'min-height': style['min-height'] || '200px',
          });
        }
      },
    },
    isComponent(el) {
      if (el.dataset && el.dataset.type === 'image-block') {
        return { type: 'image-block' };
      }
    },
  });

Command which I run to set new image:

  cmd.add('set-image-url', {
    run(editor, sender, { url }) {
      const target = editor.getSelected();
      target.set('src', url);
    },
  });

It is working fine, image sets. But background property in Styles Manager doesn’t update after image set.

How can I update background property in style manager?

Issue Analytics

State:
Created 3 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

Ju99ernautcommented, May 18, 2020

Noticed that in general when you update styles for a component through code they do not reflect in the Styles Manager until you deselect and reselect the component and I can’t find anything in the docs about refreshing the Styles Manager.

As a workaround you can use:

editor.selectToggle(model);
editor.select(model);

In your case

domc.addType('image-block', {
   //...
   view: {
       //...
       updateImage(model, url) {
        if (url) {
          const style = model.getStyle();

          model.setStyle({
            'background-image': style['background-color'] || `url("${url}")`,
            'background-size': style['background-size'] || 'cover',
            'background-position':
              style['background-position'] || 'center center',
            'background-repeat': style['background-repeat'] || 'no-repeat',
            'min-height': style['min-height'] || '200px',
          });
          editor.selectToggle(model);
          editor.select(model);
        }
      },
    },
    //...
  });