Fix color input update

index.html

@@ -31,12 +31,13 @@
       </div>
       <style>
         .panel {
-          background-color:rgb(217, 131, 166);
-          max-width:700px;
-          margin:150px auto 0px auto;
+          width: 90%;
+          max-width: 700px;
+          border-radius: 3px;
           padding: 30px 20px;
+          margin: 150px auto 0px;
+          background-color: #d983a6;
           box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
-          border-radius:3px;
           color:rgba(255,255,255,0.75);
           font: caption;
           font-weight: 100;
@@ -110,6 +111,12 @@
           ],
         },
       });
+
+      editor.BlockManager.add('testBlock', {
+        label: 'Block',
+        attributes: { class:'gjs-fonts gjs-f-b1' },
+        content: `<div style="padding:100px; text-align:center">Test block</div>`
+      })
     </script>
   </body>
 </html>

src/domain_abstract/ui/InputColor.js

@@ -39,7 +39,8 @@ module.exports = Input.extend({
     inputEl.value = value;
     colorEl.get(0).style.backgroundColor = valueClr;
 
-    if (opts.targetUpdate) {
+    // This prevents from adding multiple thumbs in spectrum
+    if (opts.fromTarget) {
       colorEl.spectrum('set', valueClr);
       this.noneColor = value == 'none';
     }
@@ -77,14 +78,13 @@ module.exports = Input.extend({
         move(color) {
           const cl = getColor(color);
           cpStyle.backgroundColor = cl;
-          model.set('value', cl, {avoidStore: 1});
+          model.setValueFromInput(cl, 0);
         },
         change(color) {
           changed = 1;
           const cl = getColor(color);
           cpStyle.backgroundColor = cl;
-          model.set('value', '', {avoidStore: 1});
-          model.set('value', cl);
+          model.setValueFromInput(cl);
           self.noneColor = 0;
         },
         show(color) {
@@ -98,7 +98,7 @@ module.exports = Input.extend({
              }
              cpStyle.backgroundColor = previousСolor;
              colorEl.spectrum('set', previousСolor);
-             model.set('value', previousСolor, {avoidStore: 1});
+             model.setValueFromInput(previousСolor, 0);
            }
         }
       });

src/style_manager/config/config.js

@@ -23,15 +23,6 @@ module.exports = {
   // Adds the possibility to clear property value from the target style
   clearProperties: false,
 
-  // Properties which are valid to be shown as computed
-  // (Identified as inherited properties: https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance)
-  // not used anymore
-  validComputed: ['border-collapse', 'border-spacing', 'caption-side', 'color', 'cursor', 'direction', 'empty-cells',
-  'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'font-size-adjust', 'font-stretch', 'font',
-  'letter-spacing', 'line-height', 'list-style-image', 'list-style-position', 'list-style-type', 'list-style', 'orphans',
-  'quotes', 'tab-size', 'text-align', 'text-align-last', 'text-decoration-color', 'text-indent', 'text-justify',
-  'text-shadow', 'text-transform', 'visibility', 'white-space', 'widows', 'word-break', 'word-spacing', 'word-wrap'],
-
   // Properties not to take in account for computed styles
   avoidComputed: ['width', 'height'],
 };

src/style_manager/model/Property.js

@@ -48,6 +48,19 @@ module.exports = require('backbone').Model.extend({
   },
 
 
+  /**
+   * Like `setValue` but, in addition, prevents the update of the input element
+   * as the changes should come from the input itself.
+   * This method is useful with the definition of custom properties
+   * @param {any} value
+   * @param {Boolen} [complete=true] Indicates if it's a final state
+   * @param {Object} [opts={}] Options
+   */
+  setValueFromInput(value, complete, opts = {}) {
+    this.setValue(value, complete, {...opts, fromInput: 1});
+  },
+
+
   /**
    * Parse a raw value, generally fetched from the target, for this property
    * @param  {string} value Raw value string