Ignore current `state` and `device` for component related styles. Fixes #5213

src/css_composer/index.ts

@@ -60,6 +60,14 @@ interface SetRuleOptions extends RuleOptions {
   addStyles?: boolean;
 }
 
+/** @private */
+export interface GetSetRuleOptions {
+  state?: string;
+  mediaText?: string;
+  addOpts?: ObjectAny;
+  current?: boolean;
+}
+
 type CssRuleStyle = Required<CssRuleProperties>['style'];
 
 export default class CssComposer extends ItemManagerModule<CssComposerConfig & { pStylePrefix?: string }> {
@@ -385,7 +393,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * // #myid { color: red }
    * // #myid:hover { color: blue }
    */
-  setIdRule(name: string, style: CssRuleStyle = {}, opts: ObjectAny = {}) {
+  setIdRule(name: string, style: CssRuleStyle = {}, opts: GetSetRuleOptions = {}) {
     const { addOpts = {}, mediaText } = opts;
     const state = opts.state || '';
     const media = !isUndefined(mediaText) ? mediaText : this.em.getCurrentMedia();
@@ -406,7 +414,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * const rule = css.getIdRule('myid');
    * const ruleHover = css.setIdRule('myid', { state: 'hover' });
    */
-  getIdRule(name: string, opts: ObjectAny = {}) {
+  getIdRule(name: string, opts: GetSetRuleOptions = {}) {
     const { mediaText } = opts;
     const state = opts.state || '';
     const media = !isUndefined(mediaText) ? mediaText : this.em.getCurrentMedia();
@@ -428,7 +436,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * // .myclass { color: red }
    * // .myclass:hover { color: blue }
    */
-  setClassRule(name: string, style: CssRuleStyle = {}, opts: ObjectAny = {}) {
+  setClassRule(name: string, style: CssRuleStyle = {}, opts: GetSetRuleOptions = {}) {
     const state = opts.state || '';
     const media = opts.mediaText || this.em.getCurrentMedia();
     const sm = this.em.Selectors;
@@ -448,7 +456,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * const rule = css.getClassRule('myclass');
    * const ruleHover = css.getClassRule('myclass', { state: 'hover' });
    */
-  getClassRule(name: string, opts: ObjectAny = {}) {
+  getClassRule(name: string, opts: GetSetRuleOptions = {}) {
     const state = opts.state || '';
     const media = opts.mediaText || this.em.getCurrentMedia();
     const selector = this.em.Selectors.get(name, Selector.TYPE_CLASS);
@@ -481,7 +489,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     return this;
   }
 
-  getComponentRules(cmp: Component, opts: ObjectAny = {}) {
+  getComponentRules(cmp: Component, opts: GetSetRuleOptions = {}) {
     let { state, mediaText, current } = opts;
     if (current) {
       state = this.em.get('state') || '';

src/dom_components/model/Component.ts

@@ -43,7 +43,7 @@ const escapeRegExp = (str: string) => {
   return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
 };
 
-const avoidInline = (em: EditorModel) => !!em?.getConfig().avoidInlineStyle;
+export const avoidInline = (em: EditorModel) => !!em?.getConfig().avoidInlineStyle;
 
 export const eventDrag = 'component:drag';
 export const keySymbols = '__symbols';
@@ -603,7 +603,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
       const state = em.get('state');
       const cc = em.Css;
       const propOrig = this.getStyle(opts);
-      this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });
+      this.rule = cc.setIdRule(this.getId(), prop, { state, ...opts });
       const diff = shallowDiff(propOrig, prop);
       this.set('style', '', { silent: true });
       keys(diff).forEach(pr => this.trigger(`change:style:${pr}`));

src/dom_components/view/ComponentView.ts

@@ -1,5 +1,5 @@
 import { isEmpty, each, keys, result } from 'underscore';
-import Component from '../model/Component';
+import Component, { avoidInline } from '../model/Component';
 import Components from '../model/Components';
 import ComponentsView from './ComponentsView';
 import Selectors from '../../selector_manager/model/Selectors';
@@ -10,6 +10,7 @@ import { ComponentOptions } from '../model/types';
 import EditorModel from '../../editor/model/Editor';
 import { DomComponentsConfig } from '../config/config';
 import Editor from '../../editor';
+import { GetSetRuleOptions } from '../../css_composer';
 
 type ClbObj = ReturnType<ComponentView['_clbObj']>;
 
@@ -89,6 +90,10 @@ Component> {
     !modelOpt.temporary && this.init(this._clbObj());
   }
 
+  get __cmpStyleOpts(): GetSetRuleOptions {
+    return { state: '', mediaText: '' };
+  }
+
   __isDraggable() {
     const { model, config } = this;
     const { draggable } = model.attributes;
@@ -276,9 +281,10 @@ Component> {
   updateStyle(m?: any, v?: any, opts: ObjectAny = {}) {
     const { model, em } = this;
 
-    if (em && em.getConfig().avoidInlineStyle && !opts.inline) {
-      const style = model.getStyle();
-      !isEmpty(style) && model.setStyle(style);
+    if (avoidInline(em) && !opts.inline) {
+      const styleOpts = this.__cmpStyleOpts;
+      const style = model.getStyle(styleOpts);
+      !isEmpty(style) && model.setStyle(style, styleOpts);
     } else {
       this.setAttribute('style', model.styleToString(opts));
     }