Bump prosemirror-tables so that findTable is always available on @tiptap/pm

.changeset/2026-06-01-prosemirror-tables-findtable.md

@@ -0,0 +1,5 @@
+---
+'@tiptap/pm': patch
+---
+
+Bump `prosemirror-tables` to `^1.8.0` so `findTable` is available from `@tiptap/pm`, and align the related ProseMirror dependencies with the versions required by `prosemirror-tables`.

demos/package.json

@@ -31,17 +31,17 @@
     "prosemirror-gapcursor": "^1.3.2",
     "prosemirror-history": "^1.4.1",
     "prosemirror-inputrules": "^1.4.0",
-    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-keymap": "^1.2.3",
     "prosemirror-markdown": "^1.13.1",
     "prosemirror-menu": "^1.2.4",
-    "prosemirror-model": "^1.24.1",
+    "prosemirror-model": "^1.25.7",
     "prosemirror-schema-basic": "^1.2.3",
     "prosemirror-schema-list": "^1.5.0",
-    "prosemirror-state": "^1.4.3",
-    "prosemirror-tables": "^1.6.2",
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-tables": "^1.8.0",
     "prosemirror-trailing-node": "^3.0.0",
-    "prosemirror-transform": "^1.10.2",
-    "prosemirror-view": "^1.38.1",
+    "prosemirror-transform": "^1.12.0",
+    "prosemirror-view": "^1.41.8",
     "remixicon": "^2.5.0",
     "shiki": "^1.25.1",
     "y-webrtc": "10.3.0",

demos/src/Examples/CustomDocument/index.spec.ts

@@ -67,7 +67,7 @@ test.describe(`${demoPath}/${demoName}`, () => {
         await editor.evaluate((el: any) => {
           el.editor.chain().focus().clearContent().insertContent('Hello world').run()
         })
-        await editor.click()
+        await page.locator('.tiptap h1').click()
         await page.keyboard.press('End')
         await page.keyboard.press('Enter')
 
@@ -77,7 +77,7 @@ test.describe(`${demoPath}/${demoName}`, () => {
           'Can you add some further context?',
         )
 
-        await editor.type('This is a paragraph for this test document')
+        await page.keyboard.type('This is a paragraph for this test document')
         await expect(page.locator('.tiptap p').first()).toHaveText(
           'This is a paragraph for this test document',
         )

demos/src/Extensions/TextAlign/index.spec.ts

@@ -30,39 +30,44 @@ test.describe(`${demoPath}/${demoName}`, () => {
       ;['left', 'center', 'right', 'justify'].forEach(alignment => {
         test(`parses ${alignment} align text correctly`, async ({ page }) => {
           const editor = await getEditor(page)
-          const html = await editor.evaluate((el: any, a: string) => {
+          await editor.evaluate((el: any, a: string) => {
             el.editor.commands.setContent(`<p style="text-align: ${a}">Example Text</p>`)
-            return el.editor.getHTML()
           }, alignment)
-          expect(html).toBe(`<p style="text-align: ${alignment}">Example Text</p>`)
+          await expect(page.locator('.tiptap p').filter({ hasText: 'Example Text' })).toHaveCSS(
+            'text-align',
+            alignment,
+          )
         })
       })
 
       test('keeps the text aligned when toggling headings', async ({ page }) => {
         const editor = await getEditor(page)
-        const result = await editor.evaluate((el: any) => {
-          const alignments = ['center', 'right', 'justify']
-          const headings = [1, 2]
-          const out: string[] = []
-          alignments.forEach(alignment => {
-            headings.forEach(level => {
-              el.editor.commands.setContent(`<p style="text-align: ${alignment}">Example Text</p>`)
-              el.editor.commands.toggleHeading({ level })
-              out.push(el.editor.getHTML())
-            })
-          })
-          return out
-        })
-
         const alignments = ['center', 'right', 'justify']
         const headings = [1, 2]
-        const expected: string[] = []
-        alignments.forEach(alignment => {
-          headings.forEach(level => {
-            expected.push(`<h${level} style="text-align: ${alignment}">Example Text</h${level}>`)
-          })
-        })
-        expect(result).toEqual(expected)
+
+        for (const alignment of alignments) {
+          for (const level of headings) {
+            await editor.evaluate(
+              (
+                el: any,
+                {
+                  currentAlignment,
+                  currentLevel,
+                }: { currentAlignment: string; currentLevel: number },
+              ) => {
+                el.editor.commands.setContent(
+                  `<p style="text-align: ${currentAlignment}">Example Text</p>`,
+                )
+                el.editor.commands.toggleHeading({ level: currentLevel })
+              },
+              { currentAlignment: alignment, currentLevel: level },
+            )
+
+            await expect(
+              page.locator(`.tiptap h${level}`).filter({ hasText: 'Example Text' }),
+            ).toHaveCSS('text-align', alignment)
+          }
+        }
       })
 
       test('aligns the text left on the 1st button', async ({ page }) => {

packages/core/__tests__/insertContent.spec.ts

@@ -158,7 +158,7 @@ And more lines`)
   it('respects editor.options.parseOptions if defined to be `true`', () => {
     editor.options.parseOptions = { preserveWhitespace: true }
     editor.commands.insertContent('<h1>Tiptap</h1><p><strong>Hello\n World</strong>\n</p>')
-    expect(editor.getHTML()).toContain('<h1>Tiptap</h1><p><strong>Hello  World</strong></p>')
+    expect(editor.getHTML()).toContain('<h1>Tiptap</h1><p><strong>Hello<br> World</strong></p>')
   })
 })
 

packages/extension-table/__tests__/tableCommands.spec.ts

@@ -158,15 +158,15 @@ describe('Table commands', () => {
     editor.commands.clearContent()
     editor.commands.insertTable({ cols: 1, rows: 1, withHeaderRow: false })
     expect(editor.getHTML()).toBe(
-      '<table style="min-width: 25px"><colgroup><col style="min-width: 25px"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p></p></td></tr></tbody></table>',
+      '<table style="min-width: 25px;"><colgroup><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p></p></td></tr></tbody></table>',
     )
   })
 
   it('generates correct markup for a 1x1 table with header', () => {
     editor.commands.clearContent()
     editor.commands.insertTable({ cols: 1, rows: 1, withHeaderRow: true })
     expect(editor.getHTML()).toBe(
-      '<table style="min-width: 25px"><colgroup><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p></p></th></tr></tbody></table>',
+      '<table style="min-width: 25px;"><colgroup><col style="min-width: 25px;"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p></p></th></tr></tbody></table>',
     )
   })
 

packages/extension-text-style/__tests__/background-color-commands.spec.ts

@@ -27,9 +27,9 @@ describe('BackgroundColor commands', () => {
     expect(editor.isActive('textStyle', { backgroundColor: '#958DF1' })).toBe(false)
     editor.commands.setBackgroundColor('#958DF1')
     expect(editor.isActive('textStyle', { backgroundColor: '#958DF1' })).toBe(true)
-    expect(editor.getHTML()).toContain(
-      '<span style="background-color: #958DF1">Example Text</span>',
-    )
+    const span = editor.view.dom.querySelector('span')
+    expect(span?.textContent).toBe('Example Text')
+    expect(span?.style.backgroundColor).toBe('#958DF1')
   })
 
   it('removes the background color of the selected text', () => {

packages/extension-text-style/__tests__/color-commands.spec.ts

@@ -27,7 +27,9 @@ describe('Color commands', () => {
     expect(editor.isActive('textStyle', { color: '#958DF1' })).toBe(false)
     editor.commands.setColor('#958DF1')
     expect(editor.isActive('textStyle', { color: '#958DF1' })).toBe(true)
-    expect(editor.getHTML()).toContain('<span style="color: #958DF1">Example Text</span>')
+    const span = editor.view.dom.querySelector('span')
+    expect(span?.textContent).toBe('Example Text')
+    expect(span?.style.color).toBe('#958DF1')
   })
 
   it('removes the color of the selected text', () => {

packages/extension-text-style/__tests__/font-family-commands.spec.ts

@@ -27,7 +27,9 @@ describe('FontFamily commands', () => {
     expect(editor.isActive('textStyle', { fontFamily: 'monospace' })).toBe(false)
     editor.commands.setFontFamily('monospace')
     expect(editor.isActive('textStyle', { fontFamily: 'monospace' })).toBe(true)
-    expect(editor.getHTML()).toContain('<span style="font-family: monospace">Example Text</span>')
+    const span = editor.view.dom.querySelector('span')
+    expect(span?.textContent).toBe('Example Text')
+    expect((span as HTMLSpanElement | null)?.style.fontFamily).toBe('monospace')
   })
 
   it('removes the font-family of the selected text', () => {
@@ -40,22 +42,19 @@ describe('FontFamily commands', () => {
 
   it('allows CSS variables as a font-family', () => {
     editor.commands.setFontFamily('var(--title-font-family)')
-    expect(editor.getHTML()).toContain(
-      '<span style="font-family: var(--title-font-family)">Example Text</span>',
-    )
+    const span = editor.view.dom.querySelector('span')
+    expect(span?.style.fontFamily).toBe('var(--title-font-family)')
   })
 
   it('allows fonts containing multiple font families', () => {
     editor.commands.setFontFamily('"Comic Sans MS", "Comic Sans"')
-    expect(editor.getHTML()).toContain(
-      '<span style="font-family: &quot;Comic Sans MS&quot;, &quot;Comic Sans&quot;">Example Text</span>',
-    )
+    const span = editor.view.dom.querySelector('span')
+    expect(span?.style.fontFamily).toBe('"Comic Sans MS", "Comic Sans"')
   })
 
   it('allows fonts containing a space and number as a font-family', () => {
     editor.commands.setFontFamily('"Exo 2"')
-    expect(editor.getHTML()).toContain(
-      '<span style="font-family: &quot;Exo 2&quot;">Example Text</span>',
-    )
+    const span = editor.view.dom.querySelector('span')
+    expect(span?.style.fontFamily).toBe('"Exo 2"')
   })
 })

packages/extension-text-style/__tests__/font-size-commands.spec.ts

@@ -27,12 +27,14 @@ describe('FontSize commands', () => {
     expect(editor.isActive('textStyle', { fontSize: '28px' })).toBe(false)
     editor.commands.setFontSize('28px')
     expect(editor.isActive('textStyle', { fontSize: '28px' })).toBe(true)
-    expect(editor.getHTML()).toContain('<span style="font-size: 28px">Example Text</span>')
+    const span = editor.view.dom.querySelector('span')
+    expect(span?.textContent).toBe('Example Text')
+    expect(span?.style.fontSize).toBe('28px')
   })
 
   it('removes the font-size of the selected text', () => {
     editor.commands.setFontSize('28px')
-    expect(editor.getHTML()).toContain('<span style="font-size: 28px">')
+    expect(editor.view.dom.querySelector('span')?.style.fontSize).toBe('28px')
 
     editor.commands.unsetFontSize()
     expect(editor.getHTML()).not.toContain('<span')

packages/extension-text-style/__tests__/line-height-commands.spec.ts

@@ -24,23 +24,25 @@ describe('LineHeight commands', () => {
   })
 
   const cases = [
-    { value: '1.5', style: 'line-height: 1.5' },
-    { value: '2.0', style: 'line-height: 2.0' },
-    { value: '4.0', style: 'line-height: 4.0' },
+    { value: '1.5', style: '1.5' },
+    { value: '2.0', style: '2' },
+    { value: '4.0', style: '4' },
   ]
 
   cases.forEach(({ value, style }) => {
     it(`sets line-height ${value} for the selected text`, () => {
       expect(editor.isActive('textStyle', { lineHeight: value })).toBe(false)
       editor.commands.toggleTextStyle({ lineHeight: value })
       expect(editor.isActive('textStyle', { lineHeight: value })).toBe(true)
-      expect(editor.getHTML()).toContain(`<span style="${style}">Example Text</span>`)
+      const span = editor.view.dom.querySelector('span')
+      expect(span?.textContent).toBe('Example Text')
+      expect(span?.style.lineHeight).toBe(style)
     })
   })
 
   it('removes the line-height of the selected text', () => {
     editor.commands.toggleTextStyle({ lineHeight: '1.5' })
-    expect(editor.getHTML()).toContain('<span style="line-height: 1.5">')
+    expect(editor.view.dom.querySelector('span')?.style.lineHeight).toBe('1.5')
 
     editor.commands.unsetLineHeight()
     expect(editor.getHTML()).not.toContain('<span')

packages/extension-text-style/__tests__/text-style-merge.spec.ts

@@ -79,46 +79,46 @@ describe('TextStyleKit nested span merge', () => {
     const spans = editor.view.dom.querySelectorAll('p:nth-child(4) > span')
     expect(spans.length).toBe(1)
     expect(spans[0].textContent?.trim()).toBe('red serif')
-    expect(spans[0].getAttribute('style')).toBe('color: #FF0000; font-family: serif')
+    expect(spans[0].getAttribute('style')).toBe('color: #FF0000; font-family: serif;')
   })
 
   it('merges styles of multiple nested spans into the innermost descendant', () => {
     const spans = editor.view.dom.querySelectorAll('p:nth-child(5) > span')
     expect(spans.length).toBe(1)
     expect(spans[0].textContent?.trim()).toBe('blue serif')
-    expect(spans[0].getAttribute('style')).toBe('color: #0000FF; font-family: serif')
+    expect(spans[0].getAttribute('style')).toBe('color: #0000FF; font-family: serif;')
   })
 
   it('merges parent styles into each sibling descendant span', () => {
     const spans = editor.view.dom.querySelectorAll('p:nth-child(6) > span')
     expect(spans.length).toBe(2)
     expect(spans[0].textContent?.trim()).toBe('green serif')
-    expect(spans[0].getAttribute('style')).toBe('color: #00FF00; font-family: serif')
+    expect(spans[0].getAttribute('style')).toBe('color: #00FF00; font-family: serif;')
     expect(spans[1].textContent?.trim()).toBe('red serif')
-    expect(spans[1].getAttribute('style')).toBe('color: #FF0000; font-family: serif')
+    expect(spans[1].getAttribute('style')).toBe('color: #FF0000; font-family: serif;')
   })
 
   it('keeps descendant spans intact when the parent span has no style', () => {
     const spans = editor.view.dom.querySelectorAll('p:nth-child(7) > span')
     expect(spans.length).toBe(4)
     expect(spans[0].textContent?.trim()).toBe('blue')
-    expect(spans[0].getAttribute('style')).toBe('color: #0000FF')
+    expect(spans[0].getAttribute('style')).toBe('color: #0000FF;')
     expect(spans[1].textContent?.trim()).toBe('green')
-    expect(spans[1].getAttribute('style')).toBe('color: #00FF00')
+    expect(spans[1].getAttribute('style')).toBe('color: #00FF00;')
     expect(spans[2].textContent?.trim()).toBe('green serif')
-    expect(spans[2].getAttribute('style')).toBe('color: #00FF00; font-family: serif')
+    expect(spans[2].getAttribute('style')).toBe('color: #00FF00; font-family: serif;')
   })
 
   it('merges parent styles into descendants while preserving root text spans', () => {
     const spans = editor.view.dom.querySelectorAll('p:nth-child(8) > span')
     expect(spans.length).toBe(4)
     expect(spans[0].textContent?.trim()).toBe('blue')
-    expect(spans[0].getAttribute('style')).toBe('color: #0000FF')
+    expect(spans[0].getAttribute('style')).toBe('color: #0000FF;')
     expect(spans[1].textContent?.trim()).toBe('green')
-    expect(spans[1].getAttribute('style')).toBe('color: #00FF00')
+    expect(spans[1].getAttribute('style')).toBe('color: #00FF00;')
     expect(spans[2].textContent?.trim()).toBe('green serif')
-    expect(spans[2].getAttribute('style')).toBe('color: #00FF00; font-family: serif')
+    expect(spans[2].getAttribute('style')).toBe('color: #00FF00; font-family: serif;')
     expect(spans[3].textContent?.trim()).toBe('blue serif')
-    expect(spans[3].getAttribute('style')).toBe('color: #0000FF; font-family: serif')
+    expect(spans[3].getAttribute('style')).toBe('color: #0000FF; font-family: serif;')
   })
 })

packages/pm/package.json

@@ -152,12 +152,12 @@
     "prosemirror-gapcursor": "^1.3.2",
     "prosemirror-history": "^1.4.1",
     "prosemirror-inputrules": "^1.4.0",
-    "prosemirror-keymap": "^1.2.2",
-    "prosemirror-model": "^1.24.1",
+    "prosemirror-keymap": "^1.2.3",
+    "prosemirror-model": "^1.25.7",
     "prosemirror-schema-list": "^1.5.0",
-    "prosemirror-state": "^1.4.3",
-    "prosemirror-tables": "^1.6.4",
-    "prosemirror-transform": "^1.10.2",
-    "prosemirror-view": "^1.38.1"
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-tables": "^1.8.0",
+    "prosemirror-transform": "^1.12.0",
+    "prosemirror-view": "^1.41.8"
   }
 }