mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-11 03:33:12 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add Highlight demo for React

Browse Source
This commit is contained in:
svenadlung 2021-11-16 16:24:35 +01:00
parent c8e1fcbf6b
commit 2bb4edd533
4 changed files with 222 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
demos/src/Marks/Highlight/React/index.html Normal file
View 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("Marks/Highlight", source);
</script>
</body>
</html>

78
demos/src/Marks/Highlight/React/index.jsx Normal file
View File

@ -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: `
<p>This isn’t highlighted.</s></p>
<p><mark>But that one is.</mark></p>
<p><mark style="background-color: red;">And this is highlighted too, but in a different color.</mark></p>
<p><mark data-color="#ffa8a8">And this one has a data attribute.</mark></p>
`,
})
if (!editor) {
return null
}
return (
<>
<button
onClick={() => editor.chain().focus().toggleHighlight().run()}
className={editor.isActive('highlight') ? 'is-active' : ''}
>
toggleHighlight
</button>
<button
onClick={() => editor.chain().focus().toggleHighlight({ color: '#ffc078' }).run()}
className={editor.isActive('highlight', { color: '#ffc078' }) ? 'is-active' : ''}
>
orange
</button>
<button
onClick={() => editor.chain().focus().toggleHighlight({ color: '#8ce99a' }).run()}
className={editor.isActive('highlight', { color: '#8ce99a' }) ? 'is-active' : ''}
>
green
</button>
<button
onClick={() => editor.chain().focus().toggleHighlight({ color: '#74c0fc' }).run()}
className={editor.isActive('highlight', { color: '#74c0fc' }) ? 'is-active' : ''}
>
blue
</button>
<button
onClick={() => editor.chain().focus().toggleHighlight({ color: '#b197fc' }).run()}
className={editor.isActive('highlight', { color: '#b197fc' }) ? 'is-active' : ''}
>
purple
</button>
<button
onClick={() => editor.chain().focus().toggleHighlight({ color: 'red' }).run()}
className={editor.isActive('highlight', { color: 'red' }) ? 'is-active' : ''}
>
red ('red')
</button>
<button
onClick={() => editor.chain().focus().toggleHighlight({ color: '#ffa8a8' }).run()}
className={editor.isActive('highlight', { color: '#ffa8a8' }) ? 'is-active' : ''}
>
red (#ffa8a8)
</button>
<button
onClick={() => editor.chain().focus().unsetHighlight().run()}
disabled={!editor.isActive('highlight')}
>
unsetHighlight
</button>
<EditorContent editor={editor} />
</>
)
}

123
demos/src/Marks/Highlight/React/index.spec.js Normal file
View File

@ -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('<p>Example Text</p>').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('<p><mark style="background-color: blue;">Example Text</mark></p>')
.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('<p><mark style="background-color: rgb(255, 0, 0);">Example Text</mark></p>')
.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('<p><mark data-color="red">Example Text</mark></p>')
.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('<p><mark style="background-color: rgb(255, 0, 0);">Example Text</mark></p>')
.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('<p><mark style="background-color: rgb(255, 0, 0);">Example Text</mark></p>')
.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')
})
})

6
demos/src/Marks/Highlight/React/styles.scss Normal file
View File

@ -0,0 +1,6 @@
mark {
background-color: #ffe066;
border-radius: 0.25em;
box-decoration-break: clone;
padding: 0.125em 0;
}