Add CodeBlock demo for React
This commit is contained in:
Sven Adlung
15
demos/src/Nodes/CodeBlock/React/index.html
Normal file
15
demos/src/Nodes/CodeBlock/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/CodeBlock", source);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
55
demos/src/Nodes/CodeBlock/React/index.jsx
Normal file
55
demos/src/Nodes/CodeBlock/React/index.jsx
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
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 CodeBlock from '@tiptap/extension-code-block'
|
||||||
|
import './styles.scss'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const editor = useEditor({
|
||||||
|
extensions: [Document, Paragraph, Text, CodeBlock],
|
||||||
|
content: `
|
||||||
|
<p>
|
||||||
|
That’s a boring paragraph followed by a fenced code block:
|
||||||
|
</p>
|
||||||
|
<pre><code>for (var i=1; i <= 20; i++)
|
||||||
|
{
|
||||||
|
if (i % 15 == 0)
|
||||||
|
console.log("FizzBuzz");
|
||||||
|
else if (i % 3 == 0)
|
||||||
|
console.log("Fizz");
|
||||||
|
else if (i % 5 == 0)
|
||||||
|
console.log("Buzz");
|
||||||
|
else
|
||||||
|
console.log(i);
|
||||||
|
}</code></pre>
|
||||||
|
<p>
|
||||||
|
Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
|
||||||
|
</p>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!editor) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
||||||
|
className={editor.isActive('codeBlock') ? 'is-active' : ''}
|
||||||
|
>
|
||||||
|
toggleCodeBlock
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => editor.chain().focus().setCodeBlock().run()}
|
||||||
|
disabled={editor.isActive('codeBlock')}
|
||||||
|
>
|
||||||
|
setCodeBlock
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<EditorContent editor={editor} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
166
demos/src/Nodes/CodeBlock/React/index.spec.js
Normal file
166
demos/src/Nodes/CodeBlock/React/index.spec.js
Normal file
@@ -0,0 +1,166 @@
|
|||||||
|
context('/src/Nodes/CodeBlock/React/', () => {
|
||||||
|
before(() => {
|
||||||
|
cy.visit('/src/Nodes/CodeBlock/React/')
|
||||||
|
})
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.setContent('<p>Example Text</p>')
|
||||||
|
cy.get('.ProseMirror').type('{selectall}')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should parse code blocks correctly', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.setContent('<pre><code>Example Text</code></pre>')
|
||||||
|
expect(editor.getHTML()).to.eq('<pre><code>Example Text</code></pre>')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should parse code blocks with language correctly', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.setContent('<pre><code class="language-css">Example Text</code></pre>')
|
||||||
|
expect(editor.getHTML()).to.eq('<pre><code class="language-css">Example Text</code></pre>')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('the button should make the selected line a code block', () => {
|
||||||
|
cy.get('button:first').click()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').find('pre').should('contain', 'Example Text')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('the button should toggle the code block', () => {
|
||||||
|
cy.get('button:first').click()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').find('pre').should('contain', 'Example Text')
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').type('{selectall}')
|
||||||
|
|
||||||
|
cy.get('button:first').click()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror pre').should('not.exist')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('the keyboard shortcut should make the selected line a code block', () => {
|
||||||
|
cy.get('.ProseMirror')
|
||||||
|
.trigger('keydown', { modKey: true, altKey: true, key: 'c' })
|
||||||
|
.find('pre')
|
||||||
|
.should('contain', 'Example Text')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('the keyboard shortcut should toggle the code block', () => {
|
||||||
|
cy.get('.ProseMirror')
|
||||||
|
.trigger('keydown', { modKey: true, altKey: true, key: 'c' })
|
||||||
|
.find('pre')
|
||||||
|
.should('contain', 'Example Text')
|
||||||
|
|
||||||
|
cy.get('.ProseMirror')
|
||||||
|
.type('{selectall}')
|
||||||
|
.trigger('keydown', { modKey: true, altKey: true, key: 'c' })
|
||||||
|
|
||||||
|
cy.get('.ProseMirror pre').should('not.exist')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should parse the language from a HTML code block', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.setContent(
|
||||||
|
'<pre><code class="language-css">body { display: none; }</code></pre>',
|
||||||
|
)
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').find('pre>code.language-css').should('have.length', 1)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should make a code block from backtick markdown shortcuts', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').type('``` Code').find('pre>code').should('contain', 'Code')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should make a code block from tilde markdown shortcuts', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').type('~~~ Code').find('pre>code').should('contain', 'Code')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should make a code block for js with backticks', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror')
|
||||||
|
.type('```js Code')
|
||||||
|
.find('pre>code.language-js')
|
||||||
|
.should('contain', 'Code')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should make a code block for js with tildes', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror')
|
||||||
|
.type('~~~js Code')
|
||||||
|
.find('pre>code.language-js')
|
||||||
|
.should('contain', 'Code')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should make a code block from backtick markdown shortcuts followed by enter', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').type('```{enter}Code').find('pre>code').should('contain', 'Code')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('reverts the markdown shortcut when pressing backspace', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').type('``` {backspace}')
|
||||||
|
|
||||||
|
cy.get('.ProseMirror pre').should('not.exist')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('removes the code block when pressing backspace', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror pre').should('not.exist')
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').type('Paragraph{enter}``` A{backspace}{backspace}')
|
||||||
|
|
||||||
|
cy.get('.ProseMirror pre').should('not.exist')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('removes the code block when pressing backspace, even with blank lines', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror pre').should('not.exist')
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').type('Paragraph{enter}{enter}``` A{backspace}{backspace}')
|
||||||
|
|
||||||
|
cy.get('.ProseMirror pre').should('not.exist')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('removes the code block when pressing backspace, even at start of document', () => {
|
||||||
|
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||||
|
editor.commands.clearContent()
|
||||||
|
|
||||||
|
cy.get('.ProseMirror pre').should('not.exist')
|
||||||
|
|
||||||
|
cy.get('.ProseMirror').type('``` A{leftArrow}{backspace}')
|
||||||
|
|
||||||
|
cy.get('.ProseMirror pre').should('not.exist')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
21
demos/src/Nodes/CodeBlock/React/styles.scss
Normal file
21
demos/src/Nodes/CodeBlock/React/styles.scss
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
/* Basic editor styles */
|
||||||
|
.ProseMirror {
|
||||||
|
> * + * {
|
||||||
|
margin-top: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: #0d0d0d;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "JetBrainsMono", monospace;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: none;
|
||||||
|
color: inherit;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user