Add Table demo for React
This commit is contained in:
svenadlung
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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user