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

add example demos

Browse Source
This commit is contained in:
Philipp Kühn
2021-08-25 12:13:46 +02:00
parent 15c7e1955a
commit 4607a2dbd5
82 changed files with 4993 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
demos/src/Examples/MarkdownShortcuts/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.tsx'
import source from '@source'
setup('Examples/MarkdownShortcuts', source)
</script>
</body>
</html>

37
demos/src/Examples/MarkdownShortcuts/React/index.jsx Normal file
View File

@@ -0,0 +1,37 @@
import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Highlight from '@tiptap/extension-highlight'
import Typography from '@tiptap/extension-typography'
import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [
StarterKit,
Highlight,
Typography,
],
content: `
<p>
Markdown shortcuts make it easy to format the text while typing.
</p>
<p>
To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
</p>
<p>
Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
</p>
<p>
You can overwrite existing input rules or add your own to nodes, marks and extensions.
</p>
<p>
For example, we added the <code>Typography</code> extension here. Try typing <code>(c)</code> to see how it’s converted to a proper © character. You can also try <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, or <code>--</code>.
</p>
`,
})
return (
<EditorContent editor={editor} />
)
}

53
demos/src/Examples/MarkdownShortcuts/React/styles.scss Normal file
View File

@@ -0,0 +1,53 @@
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
ul,
ol {
padding: 0 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
}
code {
background-color: rgba(#616161, 0.1);
color: #616161;
}
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;
}
}
img {
max-width: 100%;
height: auto;
}
hr {
margin: 1rem 0;
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
}

15
demos/src/Examples/MarkdownShortcuts/Vue/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/vue.ts'
import source from '@source'
setup('Examples/MarkdownShortcuts', source)
</script>
</body>
</html>

102
demos/src/Examples/MarkdownShortcuts/Vue/index.spec.js Normal file
View File

@@ -0,0 +1,102 @@
context('/demos/Examples/MarkdownShortcuts/Vue', () => {
before(() => {
cy.visit('/demos/Examples/MarkdownShortcuts/Vue')
})
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.commands.clearContent()
})
})
it('should make a h1', () => {
cy.get('.ProseMirror')
.type('# Headline')
.find('h1')
.should('contain', 'Headline')
})
it('should make a h2', () => {
cy.get('.ProseMirror')
.type('## Headline')
.find('h2')
.should('contain', 'Headline')
})
it('should make a h3', () => {
cy.get('.ProseMirror')
.type('### Headline')
.find('h3')
.should('contain', 'Headline')
})
it('should make a h4', () => {
cy.get('.ProseMirror')
.type('#### Headline')
.find('h4')
.should('contain', 'Headline')
})
it('should make a h5', () => {
cy.get('.ProseMirror')
.type('##### Headline')
.find('h5')
.should('contain', 'Headline')
})
it('should make a h6', () => {
cy.get('.ProseMirror')
.type('###### Headline')
.find('h6')
.should('contain', 'Headline')
})
it('should create inline code', () => {
cy.get('.ProseMirror')
.type('`$foobar`')
.find('code')
.should('contain', '$foobar')
})
it('should create a code block without language', () => {
cy.get('.ProseMirror')
.type('``` {enter}const foo = bar{enter}```')
.find('pre')
.should('contain', 'const foo = bar')
})
it('should create a bullet list from asteriks', () => {
cy.get('.ProseMirror')
.type('* foobar')
.find('ul')
.should('contain', 'foobar')
})
it('should create a bullet list from dashes', () => {
cy.get('.ProseMirror')
.type('- foobar')
.find('ul')
.should('contain', 'foobar')
})
it('should create a bullet list from pluses', () => {
cy.get('.ProseMirror')
.type('+ foobar')
.find('ul')
.should('contain', 'foobar')
})
it('should create a ordered list', () => {
cy.get('.ProseMirror')
.type('1. foobar')
.find('ol')
.should('contain', 'foobar')
})
it('should create a blockquote', () => {
cy.get('.ProseMirror')
.type('> foobar')
.find('blockquote')
.should('contain', 'foobar')
})
})

110
demos/src/Examples/MarkdownShortcuts/Vue/index.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Highlight from '@tiptap/extension-highlight'
import Typography from '@tiptap/extension-typography'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
StarterKit,
Highlight,
Typography,
],
content: `
<p>
Markdown shortcuts make it easy to format the text while typing.
</p>
<p>
To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
</p>
<p>
Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code, <code>~~tildes~~</code> to strike text, or <code>==equal signs==</code> to highlight text.
</p>
<p>
You can overwrite existing input rules or add your own to nodes, marks and extensions.
</p>
<p>
For example, we added the <code>Typography</code> extension here. Try typing <code>(c)</code> to see how it’s converted to a proper © character. You can also try <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, or <code>--</code>.
</p>
`,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
ul,
ol {
padding: 0 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
}
code {
background-color: rgba(#616161, 0.1);
color: #616161;
}
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;
}
}
img {
max-width: 100%;
height: auto;
}
hr {
margin: 1rem 0;
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}
}
</style>