add node demos
This commit is contained in:
Philipp Kühn
15
demos/src/Nodes/CodeBlock/Vue/index.html
Normal file
15
demos/src/Nodes/CodeBlock/Vue/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/vue.ts'
|
||||
import source from '@source'
|
||||
setup('Nodes/CodeBlock', source)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
185
demos/src/Nodes/CodeBlock/Vue/index.spec.js
Normal file
185
demos/src/Nodes/CodeBlock/Vue/index.spec.js
Normal file
@@ -0,0 +1,185 @@
|
||||
context('/demos/Nodes/CodeBlock', () => {
|
||||
before(() => {
|
||||
cy.visit('/demos/Nodes/CodeBlock')
|
||||
})
|
||||
|
||||
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('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')
|
||||
})
|
||||
})
|
||||
})
|
||||
87
demos/src/Nodes/CodeBlock/Vue/index.vue
Normal file
87
demos/src/Nodes/CodeBlock/Vue/index.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
|
||||
code block
|
||||
</button>
|
||||
|
||||
<editor-content :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||
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'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
editor: null,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.editor = new Editor({
|
||||
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>
|
||||
`,
|
||||
})
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* Basic editor styles */
|
||||
.ProseMirror {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #0D0D0D;
|
||||
color: #FFF;
|
||||
font-family: 'JetBrainsMono', monospace;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user