From c8e1fcbf6b98dee627e1d5db7993971fc469c27e Mon Sep 17 00:00:00 2001 From: svenadlung Date: Tue, 16 Nov 2021 16:14:37 +0100 Subject: [PATCH] Add Code demo for React --- demos/src/Marks/Code/React/index.html | 15 ++++++ demos/src/Marks/Code/React/index.jsx | 46 ++++++++++++++++++ demos/src/Marks/Code/React/index.spec.js | 60 ++++++++++++++++++++++++ demos/src/Marks/Code/React/styles.scss | 15 ++++++ 4 files changed, 136 insertions(+) create mode 100644 demos/src/Marks/Code/React/index.html create mode 100644 demos/src/Marks/Code/React/index.jsx create mode 100644 demos/src/Marks/Code/React/index.spec.js create mode 100644 demos/src/Marks/Code/React/styles.scss diff --git a/demos/src/Marks/Code/React/index.html b/demos/src/Marks/Code/React/index.html new file mode 100644 index 00000000..f0bd0c14 --- /dev/null +++ b/demos/src/Marks/Code/React/index.html @@ -0,0 +1,15 @@ + + + + + + + +
+ + + diff --git a/demos/src/Marks/Code/React/index.jsx b/demos/src/Marks/Code/React/index.jsx new file mode 100644 index 00000000..6eb7c019 --- /dev/null +++ b/demos/src/Marks/Code/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 Code from '@tiptap/extension-code' +import './styles.scss' + +export default () => { + const editor = useEditor({ + extensions: [Document, Paragraph, Text, Code], + content: ` +

This isn’t code.

+

This is code.

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

Example Text

') + cy.get('.ProseMirror').type('{selectall}') + }) + }) + + it('should parse code tags correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.commands.setContent('

Example Text

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

Example Text

') + + editor.commands.setContent('Example Text') + expect(editor.getHTML()).to.eq('

Example Text

') + }) + }) + + it('should mark the selected text as inline code', () => { + cy.get('button:first').click() + + cy.get('.ProseMirror').find('code').should('contain', 'Example Text') + }) + + it('should toggle the selected text as inline code', () => { + cy.get('button:first').click() + + cy.get('.ProseMirror').type('{selectall}') + + cy.get('button:first').click() + + cy.get('.ProseMirror code').should('not.exist') + }) + + it('should make the selected text bold when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, key: 'e' }) + .find('code') + .should('contain', 'Example Text') + }) + + it('should toggle the selected text bold when the keyboard shortcut is pressed', () => { + cy.get('.ProseMirror') + .trigger('keydown', { modKey: true, key: 'e' }) + .find('code') + .should('contain', 'Example Text') + + cy.get('.ProseMirror').trigger('keydown', { modKey: true, key: 'e' }) + + cy.get('.ProseMirror code').should('not.exist') + }) + + it('should make inline code from the markdown shortcut', () => { + cy.get('.ProseMirror').type('`Example`').find('code').should('contain', 'Example') + }) +}) diff --git a/demos/src/Marks/Code/React/styles.scss b/demos/src/Marks/Code/React/styles.scss new file mode 100644 index 00000000..d5981d6e --- /dev/null +++ b/demos/src/Marks/Code/React/styles.scss @@ -0,0 +1,15 @@ +/* Basic editor styles */ +.ProseMirror { + > * + * { + margin-top: 0.75em; + } + + code { + background-color: rgba(#616161, 0.1); + border-radius: 0.25em; + box-decoration-break: clone; + color: #616161; + font-size: 0.9rem; + padding: 0.25em; + } +}