From 2bb4edd53323e380777b60eedb10f3814e30f07b Mon Sep 17 00:00:00 2001 From: svenadlung Date: Tue, 16 Nov 2021 16:24:35 +0100 Subject: [PATCH] Add Highlight demo for React --- demos/src/Marks/Highlight/React/index.html | 15 +++ demos/src/Marks/Highlight/React/index.jsx | 78 +++++++++++ demos/src/Marks/Highlight/React/index.spec.js | 123 ++++++++++++++++++ demos/src/Marks/Highlight/React/styles.scss | 6 + 4 files changed, 222 insertions(+) create mode 100644 demos/src/Marks/Highlight/React/index.html create mode 100644 demos/src/Marks/Highlight/React/index.jsx create mode 100644 demos/src/Marks/Highlight/React/index.spec.js create mode 100644 demos/src/Marks/Highlight/React/styles.scss diff --git a/demos/src/Marks/Highlight/React/index.html b/demos/src/Marks/Highlight/React/index.html new file mode 100644 index 00000000..247d36c9 --- /dev/null +++ b/demos/src/Marks/Highlight/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Marks/Highlight/React/index.jsx b/demos/src/Marks/Highlight/React/index.jsx new file mode 100644 index 00000000..8781fc6a --- /dev/null +++ b/demos/src/Marks/Highlight/React/index.jsx @@ -0,0 +1,78 @@ +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 Highlight from '@tiptap/extension-highlight' +import './styles.scss' + +export default () => { + const editor = useEditor({ + extensions: [Document, Paragraph, Text, Highlight.configure({ multicolor: true })], + content: ` +

This isn’t highlighted.

+

But that one is.

+

And this is highlighted too, but in a different color.

+

And this one has a data attribute.

+ `, + }) + + if (!editor) { + return null + } + + return ( + <> + + + + + + + + + + + + ) +} diff --git a/demos/src/Marks/Highlight/React/index.spec.js b/demos/src/Marks/Highlight/React/index.spec.js new file mode 100644 index 00000000..dd816999 --- /dev/null +++ b/demos/src/Marks/Highlight/React/index.spec.js @@ -0,0 +1,123 @@ +context('/src/Marks/Highlight/React/', () => { + before(() => { + cy.visit('/src/Marks/Highlight/React/') + }) + + beforeEach(() => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.chain().setContent('

Example Text

').selectAll().run() + }) + }) + + it('the button should highlight the selected text', () => { + cy.get('button:first').click() + + cy.get('.ProseMirror').find('mark').should('contain', 'Example Text') + }) + + it('should highlight the text in a specific color', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.toggleHighlight({ color: 'red' }) + + cy.get('.ProseMirror') + .find('mark') + .should('contain', 'Example Text') + .should('have.attr', 'data-color', 'red') + }) + }) + + it('should update the attributes of existing marks', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor + .chain() + .setContent('

Example Text

') + .selectAll() + .toggleHighlight({ color: 'rgb(255, 0, 0)' }) + .run() + + cy.get('.ProseMirror').find('mark').should('have.css', 'background-color', 'rgb(255, 0, 0)') + }) + }) + + it('should remove existing marks with the same attributes', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor + .chain() + .setContent('

Example Text

') + .selectAll() + .toggleHighlight({ color: 'rgb(255, 0, 0)' }) + .run() + + cy.get('.ProseMirror').find('mark').should('not.exist') + }) + }) + + it('is active for mark with any attributes', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor + .chain() + .setContent('

Example Text

') + .selectAll() + .run() + + expect(editor.isActive('highlight')).to.eq(true) + }) + }) + + it('is active for mark with same attributes', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor + .chain() + .setContent('

Example Text

') + .selectAll() + .run() + + const isActive = editor.isActive('highlight', { + color: 'rgb(255, 0, 0)', + }) + + expect(isActive).to.eq(true) + }) + }) + + it('isn’t active for mark with other attributes', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor + .chain() + .setContent('

Example Text

') + .selectAll() + .run() + + const isActive = editor.isActive('highlight', { + color: 'rgb(0, 0, 0)', + }) + + expect(isActive).to.eq(false) + }) + }) + + it('the button should toggle the selected text highlighted', () => { + cy.get('button:first').click() + + cy.get('.ProseMirror').type('{selectall}') + + cy.get('button:first').click() + + cy.get('.ProseMirror').find('mark').should('not.exist') + }) + + it('should highlight the selected text when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, shiftKey: true, key: 'h' }) + .find('mark') + .should('contain', 'Example Text') + }) + + it('should toggle the selected text highlighted when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, shiftKey: true, key: 'h' }) + .trigger('keydown', { modKey: true, shiftKey: true, key: 'h' }) + .find('mark') + .should('not.exist') + }) +}) diff --git a/demos/src/Marks/Highlight/React/styles.scss b/demos/src/Marks/Highlight/React/styles.scss new file mode 100644 index 00000000..b5f2f37b --- /dev/null +++ b/demos/src/Marks/Highlight/React/styles.scss @@ -0,0 +1,6 @@ +mark { + background-color: #ffe066; + border-radius: 0.25em; + box-decoration-break: clone; + padding: 0.125em 0; +}