add react demo for tables

2021-06-25 11:39:27 +02:00
parent 68d64baf99
commit 2ff148d040
6 changed files with 339 additions and 62 deletions
--- a/docs/src/demos/Examples/Tables/React/index.jsx
+++ b/docs/src/demos/Examples/Tables/React/index.jsx
@@ -0,0 +1,160 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+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 './styles.scss'
+
+const CustomTableCell = TableCell.extend({
+  addAttributes() {
+    return {
+      // extend the existing attributes …
+      ...this.parent?.(),
+
+      // and add a new one …
+      backgroundColor: {
+        default: null,
+        parseHTML: element => {
+          return {
+            backgroundColor: element.getAttribute('data-background-color'),
+          }
+        },
+        renderHTML: attributes => {
+          return {
+            'data-background-color': attributes.backgroundColor,
+            style: `background-color: ${attributes.backgroundColor}`,
+          }
+        },
+      },
+    }
+  },
+})
+
+const MenuBar = ({ editor }) => {
+  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()} disabled={!editor.can().addColumnBefore()}>
+        addColumnBefore
+      </button>
+      <button onClick={() => editor.chain().focus().addColumnAfter().run()} disabled={!editor.can().addColumnAfter()}>
+        addColumnAfter
+      </button>
+      <button onClick={() => editor.chain().focus().deleteColumn().run()} disabled={!editor.can().deleteColumn()}>
+        deleteColumn
+      </button>
+      <button onClick={() => editor.chain().focus().addRowBefore().run()} disabled={!editor.can().addRowBefore()}>
+        addRowBefore
+      </button>
+      <button onClick={() => editor.chain().focus().addRowAfter().run()} disabled={!editor.can().addRowAfter()}>
+        addRowAfter
+      </button>
+      <button onClick={() => editor.chain().focus().deleteRow().run()} disabled={!editor.can().deleteRow()}>
+        deleteRow
+      </button>
+      <button onClick={() => editor.chain().focus().deleteTable().run()} disabled={!editor.can().deleteTable()}>
+        deleteTable
+      </button>
+      <button onClick={() => editor.chain().focus().mergeCells().run()} disabled={!editor.can().mergeCells()}>
+        mergeCells
+      </button>
+      <button onClick={() => editor.chain().focus().splitCell().run()} disabled={!editor.can().splitCell()}>
+        splitCell
+      </button>
+      <button onClick={() => editor.chain().focus().toggleHeaderColumn().run()} disabled={!editor.can().toggleHeaderColumn()}>
+        toggleHeaderColumn
+      </button>
+      <button onClick={() => editor.chain().focus().toggleHeaderRow().run()} disabled={!editor.can().toggleHeaderRow()}>
+        toggleHeaderRow
+      </button>
+      <button onClick={() => editor.chain().focus().toggleHeaderCell().run()} disabled={!editor.can().toggleHeaderCell()}>
+        toggleHeaderCell
+      </button>
+      <button onClick={() => editor.chain().focus().mergeOrSplit().run()} disabled={!editor.can().mergeOrSplit()}>
+        mergeOrSplit
+      </button>
+      <button onClick={() => editor.chain().focus().setCellAttribute('backgroundColor', '#FAF594').run()} disabled={!editor.can().setCellAttribute('backgroundColor', '#FAF594')}>
+        setCellAttribute
+      </button>
+      <button onClick={() => editor.chain().focus().fixTables().run()} disabled={!editor.can().fixTables()}>
+        fixTables
+      </button>
+      <button onClick={() => editor.chain().focus().goToNextCell().run()} disabled={!editor.can().goToNextCell()}>
+        goToNextCell
+      </button>
+      <button onClick={() => editor.chain().focus().goToPreviousCell().run()} disabled={!editor.can().goToPreviousCell()}>
+        goToPreviousCell
+      </button>
+    </>
+  )
+}
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Table.configure({
+        resizable: true,
+      }),
+      TableRow,
+      TableHeader,
+      // Default TableCell
+      // TableCell,
+      // Custom TableCell with backgroundColor attribute
+      CustomTableCell,
+    ],
+    content: `
+      <h3>
+        Have you seen our tables? They are amazing!
+      </h3>
+      <ul>
+        <li>tables with rows, cells and headers (optional)</li>
+        <li>support for <code>colgroup</code> and <code>rowspan</code></li>
+        <li>and even resizable columns (optional)</li>
+      </ul>
+      <p>
+        Here is an example:
+      </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>
+    `,
+  })
+
+  return (
+    <div>
+      <MenuBar editor={editor} />
+      <EditorContent editor={editor} />
+    </div>
+  )
+}