fix: avoid adding a new declaration when finish editing existing style (

#21)

* chore: emit input-start event when style value starting editing

* fix: avoid adding a new declaration when finish editing existing style

src/view/components/StyleDeclaration.vue

@@ -4,11 +4,13 @@
       class="style-declaration-prop-text"
       :auto-focus="autoFocusProp"
       :value="prop"
+      @input-start="$emit('input-start')"
       @input="inputProp"
       @input-end="finishInputProp"
     /></span>
     <span class="style-declaration-value"><StyleValue
       :value="value"
+      @input-start="$emit('input-start')"
       @input="inputValue"
       @input-end="finishInputValue"
     /></span>
@@ -48,6 +50,8 @@ export default Vue.extend({
     },
 
     finishInputProp(rawProp: string): void {
+      this.$emit('input-end')
+
       const prop = rawProp.trim()
       if (!prop) {
         this.$emit('remove')
@@ -57,6 +61,8 @@ export default Vue.extend({
     },
 
     finishInputValue(rawValue: string): void {
+      this.$emit('input-end')
+
       const value = rawValue.trim()
       if (!value) {
         this.$emit('remove')

src/view/components/StyleInformation.vue

@@ -19,6 +19,8 @@
             @update:prop="updateDeclarationProp(d.path, arguments[0])"
             @update:value="updateDeclarationValue(d.path, arguments[0])"
             @remove="removeDeclaration(d.path)"
+            @input-start="onStartStyleInput"
+            @input-end="onEndStyleInput"
           />
         </li>
       </ul>
@@ -49,7 +51,8 @@ export default Vue.extend({
 
   data() {
     return {
-      autoFocusOnNextRender: false
+      autoFocusOnNextRender: false,
+      endingInput: false
     }
   },
 
@@ -73,10 +76,36 @@ export default Vue.extend({
     },
 
     onClickRule(rule: RuleForPrint): void {
+      if (this.endingInput) return
+
       this.$emit('add-declaration', {
         path: rule.path.concat(rule.declarations.length)
       })
       this.autoFocusOnNextRender = true
+    },
+
+    /*
+     * While it will add a new rule when clicking empty space,
+     * we don't want to do that if it is intended to cancel style editing.
+     * To resolve that situation, we limit to add a new declaration
+     * when the user is starting editing style value. Then release
+     * the limitation after several time passes from finished editing.
+     */
+    onStartStyleInput(): void {
+      const vm: any = this
+      clearTimeout(vm.endingInputTimer)
+
+      this.endingInput = true
+    },
+
+    onEndStyleInput(): void {
+      const delayToEndEdit = 200
+      const vm: any = this
+
+      clearTimeout(vm.endingInputTimer)
+      vm.endingInputTimer = setTimeout(() => {
+        this.endingInput = false
+      }, delayToEndEdit)
     }
   },
 
@@ -86,6 +115,11 @@ export default Vue.extend({
         this.autoFocusOnNextRender = false
       })
     }
+  },
+
+  created() {
+    const vm: any = this
+    vm.endingInputTimer = null
   }
 })
 </script>

src/view/components/StyleValue.vue

@@ -55,6 +55,7 @@ export default Vue.extend({
         if (input) {
           input.textContent = this.value
           selectNodeContents(input)
+          this.$emit('input-start')
         }
       })
     },

test/view/StyleValue/basic.spec.ts

@@ -48,6 +48,17 @@ describe('StyleValue basic', () => {
     expect(wrapper.emitted('input')[0]).toEqual(['22px'])
   })
 
+  it('should notify starting input', async () => {
+    const wrapper = mount(StyleValue, {
+      propsData: {
+        value: '20px'
+      }
+    })
+    wrapper.trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('input-start').length).toBe(1)
+  })
+
   it('should end editing when blured', () => {
     const wrapper = mount(StyleValue, {
       propsData: {