From 780f35c4e0d6cca385d52eb18f1e00383fdf1e35 Mon Sep 17 00:00:00 2001 From: Sven Adlung Date: Mon, 15 Nov 2021 17:55:30 +0100 Subject: [PATCH] Add Color demo for React --- demos/src/Extensions/Color/React/index.html | 15 ++++ demos/src/Extensions/Color/React/index.jsx | 75 +++++++++++++++++++ .../src/Extensions/Color/React/index.spec.js | 43 +++++++++++ 3 files changed, 133 insertions(+) create mode 100644 demos/src/Extensions/Color/React/index.html create mode 100644 demos/src/Extensions/Color/React/index.jsx create mode 100644 demos/src/Extensions/Color/React/index.spec.js diff --git a/demos/src/Extensions/Color/React/index.html b/demos/src/Extensions/Color/React/index.html new file mode 100644 index 00000000..63431906 --- /dev/null +++ b/demos/src/Extensions/Color/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Extensions/Color/React/index.jsx b/demos/src/Extensions/Color/React/index.jsx new file mode 100644 index 00000000..bc7e7196 --- /dev/null +++ b/demos/src/Extensions/Color/React/index.jsx @@ -0,0 +1,75 @@ +import React from 'react' +import { useEditor, EditorContent } from '@tiptap/react' +import Document from '@tiptap/extension-document' +import Paragraph from '@tiptap/extension-paragraph' +import Text from '@tiptap/extension-text' +import TextStyle from '@tiptap/extension-text-style' +import { Color } from '@tiptap/extension-color' + +export default () => { + const editor = useEditor({ + extensions: [Document, Paragraph, Text, TextStyle, Color], + content: ` +

Oh, for some reason that’s purple.

+ `, + }) + + if (!editor) { + return null + } + + return ( +
+ editor.chain().focus().setColor(event.target.value).run()} + value={editor.getAttributes('textStyle').color} + /> + + + + + + + + + + +
+ ) +} diff --git a/demos/src/Extensions/Color/React/index.spec.js b/demos/src/Extensions/Color/React/index.spec.js new file mode 100644 index 00000000..0b0290a6 --- /dev/null +++ b/demos/src/Extensions/Color/React/index.spec.js @@ -0,0 +1,43 @@ +context('/src/Extensions/Color/React/', () => { + before(() => { + cy.visit('/src/Extensions/Color/React/') + }) + + beforeEach(() => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

Example Text

') + }) + 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') + }) +})