demos: add demo with many extensions
This commit is contained in:
Philipp Kühn
15
demos/src/Experiments/All/Vue/index.html
Normal file
15
demos/src/Experiments/All/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('Experiments/All', source)
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
371
demos/src/Experiments/All/Vue/index.vue
Normal file
371
demos/src/Experiments/All/Vue/index.vue
Normal file
@@ -0,0 +1,371 @@
|
|||||||
|
<template>
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||||||
|
import Blockquote from '@tiptap/extension-blockquote'
|
||||||
|
import Bold from '@tiptap/extension-bold'
|
||||||
|
import BulletList from '@tiptap/extension-bullet-list'
|
||||||
|
import Code from '@tiptap/extension-code'
|
||||||
|
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
|
||||||
|
import Document from '@tiptap/extension-document'
|
||||||
|
import Dropcursor from '@tiptap/extension-dropcursor'
|
||||||
|
import Gapcursor from '@tiptap/extension-gapcursor'
|
||||||
|
import HardBreak from '@tiptap/extension-hard-break'
|
||||||
|
import Heading from '@tiptap/extension-heading'
|
||||||
|
import History from '@tiptap/extension-history'
|
||||||
|
import HorizontalRule from '@tiptap/extension-horizontal-rule'
|
||||||
|
import Italic from '@tiptap/extension-italic'
|
||||||
|
import ListItem from '@tiptap/extension-list-item'
|
||||||
|
import OrderedList from '@tiptap/extension-ordered-list'
|
||||||
|
import Paragraph from '@tiptap/extension-paragraph'
|
||||||
|
import Strike from '@tiptap/extension-strike'
|
||||||
|
import Text from '@tiptap/extension-text'
|
||||||
|
import Underline from '@tiptap/extension-underline'
|
||||||
|
import Superscript from '@tiptap/extension-superscript'
|
||||||
|
import Subscript from '@tiptap/extension-subscript'
|
||||||
|
import Link from '@tiptap/extension-link'
|
||||||
|
import Mention from '@tiptap/extension-mention'
|
||||||
|
import Table from '@tiptap/extension-table'
|
||||||
|
import TableRow from '@tiptap/extension-table-row'
|
||||||
|
import TableCell from '@tiptap/extension-table-cell'
|
||||||
|
import TableHeader from '@tiptap/extension-table-header'
|
||||||
|
import Image from '@tiptap/extension-image'
|
||||||
|
import TaskList from '@tiptap/extension-task-list'
|
||||||
|
import TaskItem from '@tiptap/extension-task-item'
|
||||||
|
|
||||||
|
import lowlight from 'lowlight'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.editor = new Editor({
|
||||||
|
extensions: [
|
||||||
|
Blockquote,
|
||||||
|
Bold,
|
||||||
|
BulletList,
|
||||||
|
Code,
|
||||||
|
CodeBlockLowlight.configure({
|
||||||
|
lowlight,
|
||||||
|
}),
|
||||||
|
Document,
|
||||||
|
Dropcursor,
|
||||||
|
Gapcursor,
|
||||||
|
HardBreak,
|
||||||
|
Heading,
|
||||||
|
History,
|
||||||
|
HorizontalRule,
|
||||||
|
Italic,
|
||||||
|
ListItem,
|
||||||
|
OrderedList,
|
||||||
|
Paragraph,
|
||||||
|
Strike,
|
||||||
|
Text,
|
||||||
|
Underline,
|
||||||
|
Superscript,
|
||||||
|
Subscript,
|
||||||
|
Link,
|
||||||
|
Mention.configure({
|
||||||
|
HTMLAttributes: {
|
||||||
|
class: 'mention',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
Table.configure({
|
||||||
|
resizable: true,
|
||||||
|
}),
|
||||||
|
TableRow,
|
||||||
|
TableHeader,
|
||||||
|
TableCell,
|
||||||
|
Image,
|
||||||
|
TaskList,
|
||||||
|
TaskItem,
|
||||||
|
],
|
||||||
|
content: `
|
||||||
|
<h2>
|
||||||
|
Hi there,
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
That’s a bullet list with one …
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
… or two list items.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
|
||||||
|
</p>
|
||||||
|
<pre><code class="language-javascript">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>
|
||||||
|
I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
|
||||||
|
</p>
|
||||||
|
<blockquote>
|
||||||
|
Wow, that’s amazing. Good work, boy! 👏
|
||||||
|
<br />
|
||||||
|
— Mom
|
||||||
|
</blockquote>
|
||||||
|
<ul data-type="taskList">
|
||||||
|
<li data-type="taskItem" data-checked="true">A list item</li>
|
||||||
|
<li data-type="taskItem" data-checked="false">And another one</li>
|
||||||
|
</ul>
|
||||||
|
<p>Some text with a mention <span data-type="mention" data-id="Mention 1"></span> and another one <span data-type="mention" data-id="Mention 2"></span>. Great.</p>
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th colspan="3">Description</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Cyndi Lauper</td>
|
||||||
|
<td>singer</td>
|
||||||
|
<td>songwriter</td>
|
||||||
|
<td>actress</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Philipp Kühn</td>
|
||||||
|
<td>designer</td>
|
||||||
|
<td>developer</td>
|
||||||
|
<td>maker</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Hans Pagel</td>
|
||||||
|
<td>wrote this</td>
|
||||||
|
<td colspan="2">that’s it</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p>This is a basic example of implementing images. Drag to re-order.</p>
|
||||||
|
<img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
|
||||||
|
<img src="https://source.unsplash.com/K9QHL52rE2k/800x400" />
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeUnmount() {
|
||||||
|
this.editor.destroy()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #616161;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-tag,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-regexp,
|
||||||
|
.hljs-link,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class {
|
||||||
|
color: #F98181;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-meta,
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-builtin-name,
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-params {
|
||||||
|
color: #FBBC88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet {
|
||||||
|
color: #B9F18D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-section {
|
||||||
|
color: #FAF594;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag {
|
||||||
|
color: #70CFF8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
padding-left: 1rem;
|
||||||
|
border-left: 2px solid rgba(#0D0D0D, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 2px solid rgba(#0D0D0D, 0.1);
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
min-width: 1em;
|
||||||
|
border: 2px solid #ced4da;
|
||||||
|
padding: 3px 5px;
|
||||||
|
vertical-align: top;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
background-color: #f1f3f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectedCell:after {
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
left: 0; right: 0; top: 0; bottom: 0;
|
||||||
|
background: rgba(200, 200, 255, 0.4);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-resize-handle {
|
||||||
|
position: absolute;
|
||||||
|
right: -2px;
|
||||||
|
top: 0;
|
||||||
|
bottom: -2px;
|
||||||
|
width: 4px;
|
||||||
|
background-color: #adf;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul[data-type="taskList"] {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
> label {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableWrapper {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resize-cursor {
|
||||||
|
cursor: ew-resize;
|
||||||
|
cursor: col-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mention {
|
||||||
|
border: 1px solid #000;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
padding: 0.1rem 0.3rem;
|
||||||
|
box-decoration-break: clone;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user