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

add experiment demos

Browse Source
This commit is contained in:
Philipp Kühn
2021-08-25 17:53:02 +02:00
parent 2498c24186
commit 6ab708b1a2
43 changed files with 3090 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

329
demos/src/Experiments/GenericFigure/Vue/index.vue Normal file
View File

@@ -0,0 +1,329 @@
<template>
<div v-if="editor">
<button @click="addCapturedTable">
add table
</button>
<button @click="addCapturedImage">
add image
</button>
<button @click="removeCapturedTable">
remove table
</button>
<button @click="removeCapturedImage">
remove image
</button>
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Image from '@tiptap/extension-image'
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 { Figure } from './figure'
import { Figcaption } from './figcaption'
const ImageFigure = Figure.extend({
name: 'capturedImage',
content: 'figcaption image',
})
const TableFigure = Figure.extend({
name: 'capturedTable',
content: 'figcaption table',
})
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
methods: {
addCapturedImage() {
this.editor
.chain()
.focus()
.insertContent({
type: 'capturedImage',
content: [
{
type: 'figcaption',
content: [
{
type: 'text',
text: 'image caption',
},
],
},
{
type: 'image',
attrs: {
src: 'https://source.unsplash.com/K9QHL52rE2k/800x400',
},
},
],
})
.run()
},
addCapturedTable() {
this.editor
.chain()
.focus()
.insertContent({
type: 'capturedTable',
content: [
{
type: 'figcaption',
content: [
{
type: 'text',
text: 'table caption',
},
],
},
{
type: 'table',
content: [
{
type: 'tableRow',
content: [
{
type: 'tableCell',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'cell 1',
},
],
},
],
},
{
type: 'tableCell',
content: [
{
type: 'paragraph',
content: [
{
type: 'text',
text: 'cell 2',
},
],
},
],
},
],
},
],
},
],
})
.run()
},
removeCapturedTable() {
this.editor
.chain()
.focus()
.deleteNode('capturedTable')
.run()
},
removeCapturedImage() {
this.editor
.chain()
.focus()
.deleteNode('capturedImage')
.run()
},
},
mounted() {
this.editor = new Editor({
extensions: [
StarterKit,
Table,
TableRow,
TableHeader,
TableCell,
ImageFigure,
TableFigure,
Figcaption,
Image,
],
content: `
<p>Some text</p>
<figure data-type="capturedImage">
<figcaption>
Image caption
</figcaption>
<img src="https://source.unsplash.com/8xznAGy4HcY/800x400" alt="Random photo of something" title="Who’s dat?">
</figure>
<p>Some text</p>
<img src="https://source.unsplash.com/K9QHL52rE2k/800x400">
<p>Some text</p>
<figure data-type="capturedTable">
<figcaption>
Table caption
</figcaption>
<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>
</figure>
<p>Some text</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>
`,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
figure {
max-width: 25rem;
border: 3px solid #0D0D0D;
border-radius: 0.5rem;
margin: 1rem 0;
padding: 0.5rem;
}
figcaption {
margin: 0.25rem 0;
text-align: center;
padding: 0.5rem;
border: 2px dashed #0D0D0D20;
border-radius: 0.5rem;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
img {
display: block;
max-width: min(100%, 25rem);
height: auto;
border-radius: 0.5rem;
}
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;
}
}
}
</style>