docs: add color picker to color extension demo

docs/src/demos/Extensions/Color/index.spec.js

@@ -3,5 +3,51 @@ context('/demos/Extensions/Color', () => {
     cy.visit('/demos/Extensions/Color')
   })
 
-  // TODO: Write tests
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.commands.setContent('<p>Example Text</p>')
+    })
+    cy.get('.ProseMirror').type('{selectall}')
+  })
+
+  it('should set the color of the selected text', () => {
+    cy.get('button:first')
+      .should('not.have.class', 'is-active')
+      .click()
+      .should('have.class', 'is-active')
+
+    cy.get('.ProseMirror')
+      .find('span')
+      .should('have.attr', 'style', 'color: #958DF1')
+  })
+
+  it('should remove the color of the selected text', () => {
+    cy.get('button:first')
+      .click()
+
+    cy.get('.ProseMirror span').should('exist')
+
+    cy.get('button:last')
+      .click()
+
+    cy.get('.ProseMirror span').should('not.exist')
+  })
+
+  it('should change text color with color picker', () => {
+    cy.get('input[type=color]')
+      .invoke('val', '#ff0000')
+      .trigger('input')
+
+    cy.get('.ProseMirror')
+      .find('span')
+      .should('have.attr', 'style', 'color: #ff0000')
+  })
+
+  it('should match text and color picker color values', () => {
+    cy.get('button:first')
+      .click()
+
+    cy.get('input[type=color]')
+      .should('have.value', '#958df1')
+  })
 })

docs/src/demos/Extensions/Color/index.vue

@@ -1,5 +1,10 @@
 <template>
   <div v-if="editor">
+    <input
+      type="color"
+      @input="editor.chain().focus().setColor($event.target.value).run()"
+      :value="editor.getAttributes('textStyle').color"
+    >
     <button @click="editor.chain().focus().setColor('#958DF1').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#958DF1' })}">
       purple
     </button>