mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-24 03:39:01 +08:00
Add Table demo for React
This commit is contained in:
svenadlung
parent
dee562f5ef
commit
709aa8c0ab
15
demos/src/Nodes/Table/React/index.html
Normal file
15
demos/src/Nodes/Table/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/Table", source);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
90
demos/src/Nodes/Table/React/index.jsx
Normal file
90
demos/src/Nodes/Table/React/index.jsx
Normal file
@ -0,0 +1,90 @@
|
||||
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 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 Gapcursor from '@tiptap/extension-gapcursor'
|
||||
import './styles.scss'
|
||||
|
||||
export default () => {
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
Document,
|
||||
Paragraph,
|
||||
Text,
|
||||
Gapcursor,
|
||||
Table.configure({
|
||||
resizable: true,
|
||||
}),
|
||||
TableRow,
|
||||
TableHeader,
|
||||
TableCell,
|
||||
],
|
||||
content: `
|
||||
<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>
|
||||
</tbody>
|
||||
</table>
|
||||
`,
|
||||
})
|
||||
|
||||
if (!editor) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
|
||||
}
|
||||
>
|
||||
insertTable
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().addColumnBefore().run()}>
|
||||
addColumnBefore
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().addColumnAfter().run()}>addColumnAfter</button>
|
||||
<button onClick={() => editor.chain().focus().deleteColumn().run()}>deleteColumn</button>
|
||||
<button onClick={() => editor.chain().focus().addRowBefore().run()}>addRowBefore</button>
|
||||
<button onClick={() => editor.chain().focus().addRowAfter().run()}>addRowAfter</button>
|
||||
<button onClick={() => editor.chain().focus().deleteRow().run()}>deleteRow</button>
|
||||
<button onClick={() => editor.chain().focus().deleteTable().run()}>deleteTable</button>
|
||||
<button onClick={() => editor.chain().focus().mergeCells().run()}>mergeCells</button>
|
||||
<button onClick={() => editor.chain().focus().splitCell().run()}>splitCell</button>
|
||||
<button onClick={() => editor.chain().focus().toggleHeaderColumn().run()}>
|
||||
toggleHeaderColumn
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().toggleHeaderRow().run()}>
|
||||
toggleHeaderRow
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().toggleHeaderCell().run()}>
|
||||
toggleHeaderCell
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().mergeOrSplit().run()}>mergeOrSplit</button>
|
||||
<button onClick={() => editor.chain().focus().setCellAttribute('colspan', 2).run()}>
|
||||
setCellAttribute
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().fixTables().run()}>fixTables</button>
|
||||
<button onClick={() => editor.chain().focus().goToNextCell().run()}>goToNextCell</button>
|
||||
<button onClick={() => editor.chain().focus().goToPreviousCell().run()}>
|
||||
goToPreviousCell
|
||||
</button>
|
||||
|
||||
<EditorContent editor={editor} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
80
demos/src/Nodes/Table/React/index.spec.js
Normal file
80
demos/src/Nodes/Table/React/index.spec.js
Normal file
@ -0,0 +1,80 @@
|
||||
context('/src/Nodes/Table/React/', () => {
|
||||
before(() => {
|
||||
cy.visit('/src/Nodes/Table/React/')
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.clearContent()
|
||||
})
|
||||
})
|
||||
|
||||
it('creates a table (1x1)', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.insertTable({ cols: 1, rows: 1, withHeaderRow: false })
|
||||
|
||||
cy.get('.ProseMirror').find('td').its('length').should('eq', 1)
|
||||
cy.get('.ProseMirror').find('tr').its('length').should('eq', 1)
|
||||
})
|
||||
})
|
||||
|
||||
it('creates a table (3x1)', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.insertTable({ cols: 3, rows: 1, withHeaderRow: false })
|
||||
|
||||
cy.get('.ProseMirror').find('td').its('length').should('eq', 3)
|
||||
cy.get('.ProseMirror').find('tr').its('length').should('eq', 1)
|
||||
})
|
||||
})
|
||||
|
||||
it('creates a table (1x3)', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.insertTable({ cols: 1, rows: 3, withHeaderRow: false })
|
||||
|
||||
cy.get('.ProseMirror').find('td').its('length').should('eq', 3)
|
||||
cy.get('.ProseMirror').find('tr').its('length').should('eq', 3)
|
||||
})
|
||||
})
|
||||
|
||||
it('creates a table with header row (1x3)', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.insertTable({ cols: 1, rows: 3, withHeaderRow: true })
|
||||
|
||||
cy.get('.ProseMirror').find('th').its('length').should('eq', 1)
|
||||
cy.get('.ProseMirror').find('td').its('length').should('eq', 2)
|
||||
cy.get('.ProseMirror').find('tr').its('length').should('eq', 3)
|
||||
})
|
||||
})
|
||||
|
||||
it('creates a table with correct defaults (3x3, th)', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.insertTable()
|
||||
|
||||
cy.get('.ProseMirror').find('th').its('length').should('eq', 3)
|
||||
cy.get('.ProseMirror').find('td').its('length').should('eq', 6)
|
||||
cy.get('.ProseMirror').find('tr').its('length').should('eq', 3)
|
||||
})
|
||||
})
|
||||
|
||||
it('generates correct markup for a table (1x1)', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.insertTable({ cols: 1, rows: 1, withHeaderRow: false })
|
||||
|
||||
const html = editor.getHTML()
|
||||
expect(html).to.equal(
|
||||
'<table><tbody><tr><td colspan="1" rowspan="1"><p></p></td></tr></tbody></table>',
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
it('generates correct markup for a table (1x1, th)', () => {
|
||||
cy.get('.ProseMirror').then(([{ editor }]) => {
|
||||
editor.commands.insertTable({ cols: 1, rows: 1, withHeaderRow: true })
|
||||
|
||||
const html = editor.getHTML()
|
||||
expect(html).to.equal(
|
||||
'<table><tbody><tr><th colspan="1" rowspan="1"><p></p></th></tr></tbody></table>',
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
65
demos/src/Nodes/Table/React/styles.scss
Normal file
65
demos/src/Nodes/Table/React/styles.scss
Normal file
@ -0,0 +1,65 @@
|
||||
.ProseMirror {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
td,
|
||||
th {
|
||||
border: 2px solid #ced4da;
|
||||
box-sizing: border-box;
|
||||
min-width: 1em;
|
||||
padding: 3px 5px;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f1f3f5;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.selectedCell:after {
|
||||
background: rgba(200, 200, 255, 0.4);
|
||||
content: "";
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.column-resize-handle {
|
||||
background-color: #adf;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableWrapper {
|
||||
padding: 1rem 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.resize-cursor {
|
||||
cursor: ew-resize;
|
||||
cursor: col-resize;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user