@bagelink/vue 1.2.13 → 1.2.15

package/src/components/form/inputs/RichText/utils/table.ts

@@ -5,17 +5,52 @@ export function insertTable(rows: number, cols: number, state: EditorState) {
 	const table = state.doc.createElement('table')
 	table.style.width = '100%'
 	table.style.borderCollapse = 'collapse'
+	table.style.marginBottom = '1rem'
+
+	// Add a header row
+	const thead = state.doc.createElement('thead')
+	const headerRow = thead.insertRow()
+	for (let j = 0; j < cols; j++) {
+		const th = state.doc.createElement('th')
+		th.innerHTML = `Header ${j + 1}`
+		th.style.padding = '8px'
+		th.style.border = '1px solid var(--border-color, #ddd)'
+		th.style.backgroundColor = 'var(--bgl-gray-light, #f4f4f4)'
+		headerRow.appendChild(th)
+	}
+	table.appendChild(thead)
 
+	// Add body rows
+	const tbody = state.doc.createElement('tbody')
 	for (let i = 0; i < rows; i++) {
-		const row = table.insertRow()
+		const row = tbody.insertRow()
 		for (let j = 0; j < cols; j++) {
 			const cell = row.insertCell()
 			cell.innerHTML = '&nbsp;'
+			cell.style.padding = '8px'
+			cell.style.border = '1px solid var(--border-color, #ddd)'
 		}
 	}
+	table.appendChild(tbody)
+
+	// Insert the table at the current selection
 	const { range } = state
 	if (range) {
 		range.insertNode(table)
+
+		// Move cursor inside first cell for convenience
+		if (state.doc.getSelection()) {
+			const firstCell = table.querySelector('td')
+			if (firstCell) {
+				range.selectNodeContents(firstCell)
+				range.collapse(true)
+				const selection = state.doc.getSelection()
+				if (selection) {
+					selection.removeAllRanges()
+					selection.addRange(range)
+				}
+			}
+		}
 	} else {
 		state.doc.body.appendChild(table)
 	}