Add Heading demo for React
This commit is contained in:
Sven Adlung
15
demos/src/Nodes/Heading/React/index.html
Normal file
15
demos/src/Nodes/Heading/React/index.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module">
|
||||||
|
import setup from "../../../../setup/react.ts";
|
||||||
|
import source from "@source";
|
||||||
|
setup("Nodes/Heading", source);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
54
demos/src/Nodes/Heading/React/index.jsx
Normal file
54
demos/src/Nodes/Heading/React/index.jsx
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
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 Heading from '@tiptap/extension-heading'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const editor = useEditor({
|
||||||
|
extensions: [
|
||||||
|
Document,
|
||||||
|
Paragraph,
|
||||||
|
Text,
|
||||||
|
Heading.configure({
|
||||||
|
levels: [1, 2, 3],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<h1>This is a 1st level heading</h1>
|
||||||
|
<h2>This is a 2nd level heading</h2>
|
||||||
|
<h3>This is a 3rd level heading</h3>
|
||||||
|
<h4>This 4th level heading will be converted to a paragraph, because levels are configured to be only 1, 2 or 3.</h4>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!editor) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
||||||
|
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
|
||||||
|
>
|
||||||
|
H1
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||||
|
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
|
||||||
|
>
|
||||||
|
H2
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
||||||
|
className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
|
||||||
|
>
|
||||||
|
H3
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<EditorContent editor={editor} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
111
demos/src/Nodes/Heading/React/index.spec.js
Normal file
111
demos/src/Nodes/Heading/React/index.spec.js
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
context('/src/Nodes/Heading/React/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Nodes/Heading/React/')
|
||||||
|
})
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.setContent('<p>Example Text</p>')
|
||||||
|
cy.get('.ProseMirror').type('{selectall}')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const headings = ['<h1>Example Text</h1>', '<h2>Example Text</h2>', '<h3>Example Text</h3>']
|
||||||
|
|
||||||
|
headings.forEach(html => {
|
||||||
|
it(`should parse headings correctly (${html})`, () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.setContent(html)
|
||||||
|
expect(editor.getHTML()).to.eq(html)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should omit disabled heading levels', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.setContent('<h4>Example Text</h4>')
|
||||||
|
expect(editor.getHTML()).to.eq('<p>Example Text</p>')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('the button should make the selected line a h1', () => {
|
||||||
|
cy.get('.ProseMirror h1').should('not.exist')
|
||||||
|
|
||||||
|
cy.get('button:nth-child(1)').click()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').find('h1').should('contain', 'Example Text')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('the button should make the selected line a h2', () => {
|
||||||
|
cy.get('.ProseMirror h2').should('not.exist')
|
||||||
|
|
||||||
|
cy.get('button:nth-child(2)').click()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').find('h2').should('contain', 'Example Text')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('the button should make the selected line a h3', () => {
|
||||||
|
cy.get('.ProseMirror h3').should('not.exist')
|
||||||
|
|
||||||
|
cy.get('button:nth-child(3)').click()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').find('h3').should('contain', 'Example Text')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('the button should toggle the heading', () => {
|
||||||
|
cy.get('.ProseMirror h1').should('not.exist')
|
||||||
|
|
||||||
|
cy.get('button:nth-child(1)').click()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').find('h1').should('contain', 'Example Text')
|
||||||
|
|
||||||
|
cy.get('button:nth-child(1)').click()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror h1').should('not.exist')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should make the paragraph a h1 keyboard shortcut is pressed', () => {
|
||||||
|
cy.get('.ProseMirror')
|
||||||
|
.trigger('keydown', { modKey: true, altKey: true, key: '1' })
|
||||||
|
.find('h1')
|
||||||
|
.should('contain', 'Example Text')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should make the paragraph a h2 keyboard shortcut is pressed', () => {
|
||||||
|
cy.get('.ProseMirror')
|
||||||
|
.trigger('keydown', { modKey: true, altKey: true, key: '2' })
|
||||||
|
.find('h2')
|
||||||
|
.should('contain', 'Example Text')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should make the paragraph a h3 keyboard shortcut is pressed', () => {
|
||||||
|
cy.get('.ProseMirror')
|
||||||
|
.trigger('keydown', { modKey: true, altKey: true, key: '3' })
|
||||||
|
.find('h3')
|
||||||
|
.should('contain', 'Example Text')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should make a h1 from the default markdown shortcut', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
})
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').type('# Headline').find('h1').should('contain', 'Headline')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should make a h2 from the default markdown shortcut', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
})
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').type('## Headline').find('h2').should('contain', 'Headline')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should make a h3 from the default markdown shortcut', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
})
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').type('### Headline').find('h3').should('contain', 'Headline')
|
||||||
|
})
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user