ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add Color demo for React

Browse Source
This commit is contained in:
Sven Adlung
2021-11-15 17:55:30 +01:00
parent 0333ca3928
commit 780f35c4e0
3 changed files with 133 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
demos/src/Extensions/Color/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("Extensions/Color", source);
</script>
</body>
</html>

75
demos/src/Extensions/Color/React/index.jsx Normal file
View File

@@ -0,0 +1,75 @@
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 TextStyle from '@tiptap/extension-text-style'
import { Color } from '@tiptap/extension-color'
export default () => {
const editor = useEditor({
extensions: [Document, Paragraph, Text, TextStyle, Color],
content: `
<p><span style="color: #958DF1">Oh, for some reason that’s purple.</span></p>
`,
})
if (!editor) {
return null
}
return (
<div>
<input
type="color"
onInput={event => editor.chain().focus().setColor(event.target.value).run()}
value={editor.getAttributes('textStyle').color}
/>
<button
onClick={() => editor.chain().focus().setColor('#958DF1').run()}
className={editor.isActive('textStyle', { color: '#958DF1' }) ? 'is-active' : ''}
>
purple
</button>
<button
onClick={() => editor.chain().focus().setColor('#F98181').run()}
className={editor.isActive('textStyle', { color: '#F98181' }) ? 'is-active' : ''}
>
red
</button>
<button
onClick={() => editor.chain().focus().setColor('#FBBC88').run()}
className={editor.isActive('textStyle', { color: '#FBBC88' }) ? 'is-active' : ''}
>
orange
</button>
<button
onClick={() => editor.chain().focus().setColor('#FAF594').run()}
className={editor.isActive('textStyle', { color: '#FAF594' }) ? 'is-active' : ''}
>
yellow
</button>
<button
onClick={() => editor.chain().focus().setColor('#70CFF8').run()}
className={editor.isActive('textStyle', { color: '#70CFF8' }) ? 'is-active' : ''}
>
blue
</button>
<button
onClick={() => editor.chain().focus().setColor('#94FADB').run()}
className={editor.isActive('textStyle', { color: '#94FADB' }) ? 'is-active' : ''}
>
teal
</button>
<button
onClick={() => editor.chain().focus().setColor('#B9F18D').run()}
className={editor.isActive('textStyle', { color: '#B9F18D' }) ? 'is-active' : ''}
>
green
</button>
<button onClick={() => editor.chain().focus().unsetColor().run()}>unsetColor</button>
<EditorContent editor={editor} />
</div>
)
}

43
demos/src/Extensions/Color/React/index.spec.js Normal file
View File

@@ -0,0 +1,43 @@
context('/src/Extensions/Color/React/', () => {
before(() => {
cy.visit('/src/Extensions/Color/React/')
})
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.commands.setContent('<p>Example Text</p>')
})
cy.get('.ProseMirror').type('{selectall}')
})
it('should set the color of the selected text', () => {
cy.get('button:first')
.should('not.have.class', 'is-active')
.click()
.should('have.class', 'is-active')
cy.get('.ProseMirror').find('span').should('have.attr', 'style', 'color: #958DF1')
})
it('should remove the color of the selected text', () => {
cy.get('button:first').click()
cy.get('.ProseMirror span').should('exist')
cy.get('button:last').click()
cy.get('.ProseMirror span').should('not.exist')
})
it('should change text color with color picker', () => {
cy.get('input[type=color]').invoke('val', '#ff0000').trigger('input')
cy.get('.ProseMirror').find('span').should('have.attr', 'style', 'color: #ff0000')
})
it('should match text and color picker color values', () => {
cy.get('button:first').click()
cy.get('input[type=color]').should('have.value', '#958df1')
})
})