From 6b31c9c3784943cfa3f6ad8f59353826169b7ed2 Mon Sep 17 00:00:00 2001 From: svenadlung Date: Tue, 16 Nov 2021 17:46:23 +0100 Subject: [PATCH] Add Subscript demo for React --- demos/src/Marks/Subscript/React/index.html | 15 ++++++ demos/src/Marks/Subscript/React/index.jsx | 46 +++++++++++++++++++ demos/src/Marks/Subscript/React/index.spec.js | 39 ++++++++++++++++ 3 files changed, 100 insertions(+) create mode 100644 demos/src/Marks/Subscript/React/index.html create mode 100644 demos/src/Marks/Subscript/React/index.jsx create mode 100644 demos/src/Marks/Subscript/React/index.spec.js diff --git a/demos/src/Marks/Subscript/React/index.html b/demos/src/Marks/Subscript/React/index.html new file mode 100644 index 00000000..1f43df8a --- /dev/null +++ b/demos/src/Marks/Subscript/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Marks/Subscript/React/index.jsx b/demos/src/Marks/Subscript/React/index.jsx new file mode 100644 index 00000000..557ff753 --- /dev/null +++ b/demos/src/Marks/Subscript/React/index.jsx @@ -0,0 +1,46 @@ +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 Subscript from '@tiptap/extension-subscript' + +export default () => { + const editor = useEditor({ + extensions: [Document, Paragraph, Text, Subscript], + content: ` +

This is regular text.

+

This is subscript.

+

And this.

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

Example Text

') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('should transform inline style to sub tags', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

Example Text

') + expect(editor.getHTML()).to.eq('

Example Text

') + }) + }) + + it('sould omit inline style with a different vertical align', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

Example Text

') + expect(editor.getHTML()).to.eq('

Example Text

') + }) + }) + + it('the button should make the selected text bold', () => { + cy.get('button:first').click() + + cy.get('.ProseMirror').find('sub').should('contain', 'Example Text') + }) + + it('the button should toggle the selected text bold', () => { + cy.get('button:first').click() + cy.get('.ProseMirror').type('{selectall}') + cy.get('button:first').click() + cy.get('.ProseMirror sub').should('not.exist') + }) +})