fix: paste multiple line to table issue

Signed-off-by: Luka Trovic <[email protected]>

cypress/e2e/nodes/Table.spec.js

@@ -119,6 +119,24 @@ describe('table plugin', () => {
 			.should('have.length', 3)
 			.each(td => cy.wrap(td).should('have.css', 'text-align', 'center'))
 	})
+
+	it('Creates table and add multilines', function() {
+		const multilinesContent = 'Line 1\nLine 2\nLine 3'
+
+		cy.getActionEntry('table').click()
+		cy.getContent()
+			.find('table:nth-of-type(1) tr:nth-child(2) td:nth-child(1)')
+			.click()
+
+		cy.getContent()
+			.type(multilinesContent)
+
+		cy.getContent()
+			.find('table:nth-of-type(1) tr:nth-child(2) td:nth-child(1) .content')
+			.then(($el) => {
+				expect($el.get(0).innerHTML).to.equal(multilinesContent.replace(/\n/g, '<br>'))
+			})
+	})
 })
 
 describe('Table extension integrated in the editor', () => {

cypress/e2e/workspace.spec.js

@@ -298,6 +298,7 @@ describe('Workspace', function() {
 			checkContent()
 		})
 	})
+
 })
 
 const openSidebar = filename => {

src/nodes/Table/TableCell.js

@@ -1,4 +1,6 @@
 import { TableCell } from '@tiptap/extension-table-cell'
+import { Plugin } from '@tiptap/pm/state'
+import { Fragment } from '@tiptap/pm/model'
 
 export default TableCell.extend({
 	content: 'inline*',
@@ -30,4 +32,35 @@ export default TableCell.extend({
 			},
 		}
 	},
+
+	addProseMirrorPlugins() {
+		return [
+			new Plugin({
+				props: {
+					// Special-treat empty lines in pasted content to prevent jumping out of cell
+					handlePaste: (view, event, slice) => {
+						if (slice.content.childCount > 1) {
+							const state = view.state
+							const childCount = slice.content.childCount
+							const childNodes = []
+							for (let i = 0; i < childCount; i++) {
+								if (i === 0) {
+									childNodes.push(state.schema.text('\n'))
+								}
+
+								// Ignore empty children (i.e. empty lines)
+								if (!slice.content.child(i).firstChild) {
+									continue
+								}
+
+								childNodes.push(state.schema.text(slice.content.child(i).textContent, slice.content.child(i).firstChild.marks))
+							}
+							const newNode = view.state.schema.node('paragraph', [], childNodes)
+							slice.content = Fragment.empty.addToStart(newNode)
+						}
+					},
+				},
+			}),
+		]
+	},
 })