Add duplicateSelected

src/css_composer/index.ts

@@ -167,7 +167,12 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    *   color: '#000',
    * });
    * */
-  get(selectors: any, state?: string, width?: string, ruleProps?: Omit<CssRuleProperties, 'selectors'>) {
+  get(
+    selectors: any,
+    state?: string,
+    width?: string,
+    ruleProps?: Omit<CssRuleProperties, 'selectors'>
+  ): CssRule | undefined {
     let slc = selectors;
     if (isString(selectors)) {
       const sm = this.em.Selectors;

src/domain_abstract/model/StyleableModel.ts

@@ -1,7 +1,7 @@
 import { isString, isArray, keys } from 'underscore';
 import { shallowDiff } from '../../utils/mixins';
 import ParserHtml from '../../parser/model/ParserHtml';
-import { Model, ObjectAny, ObjectHash } from '../../common';
+import { Model, ObjectAny, ObjectHash, ObjectStrings } from '../../common';
 import Selectors from '../../selector_manager/model/Selectors';
 
 const parserHtml = ParserHtml();
@@ -30,7 +30,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
    * Get style object
    * @return {Object}
    */
-  getStyle(prop?: string | ObjectAny) {
+  getStyle(prop?: string | ObjectAny): ObjectStrings {
     const style = this.get('style') || {};
     const result: ObjectAny = { ...style };
     return prop && isString(prop) ? result[prop] : result;

src/selector_manager/index.ts

@@ -86,6 +86,7 @@ import Component from '../dom_components/model/Component';
 import { ItemManagerModule } from '../abstract/Module';
 import { StyleModuleParam } from '../style_manager';
 import StyleableModel from '../domain_abstract/model/StyleableModel';
+import CssRule from '../css_composer/model/CssRule';
 
 export type SelectorEvent = 'selector:add' | 'selector:remove' | 'selector:update' | 'selector:state' | 'selector';
 
@@ -422,7 +423,6 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
    */
   addSelected(props: SelectorStringObject) {
     const added = this.add(props);
-    // TODO: target should be the one from StyleManager
     this.em.getSelectedAll().forEach(target => {
       target.getSelectors().add(added);
     });
@@ -441,6 +441,34 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
     });
   }
 
+  duplicateSelected(selector: Selector, opts: { suffix?: string } = {}) {
+    const { em } = this;
+    const commonSelectors = this.getSelected();
+    if (commonSelectors.indexOf(selector) < 0) return;
+
+    const state = this.getState();
+    const media = em.getCurrentMedia();
+    const rule = em.Css.get(commonSelectors, state, media);
+    const styleToApply = rule?.getStyle();
+
+    em.getSelectedAll().forEach(component => {
+      const selectors = component.getSelectors();
+      if (selectors.includes(selector)) {
+        const suffix = opts.suffix || ' copy';
+        const label = selector.getLabel();
+        const newSelector = this.addSelector(`${label}${suffix}`);
+        const at = selectors.indexOf(selector);
+        selectors.remove(selector);
+        selectors.add(newSelector, { at });
+      }
+    });
+
+    if (styleToApply) {
+      const newRule = em.Css.add(this.getSelected(), state, media);
+      newRule.setStyle(styleToApply);
+    }
+  }
+
   /**
    * Get the array of currently selected targets.
    * @returns {Array<[Component]|[CssRule]>}