Javascript errors integrating TipTap Pro extensions for Bard

[david-windsock]

Bug description

When integrating some TipTap Pro extensions on Bard, a Javascript error appears when pressing enter to add a new paragraph (we tried with Mathematics and Invisible Characters).

After de error, the editor doesn't work propertly: try selecting a word, press backspace to delete it and see the cursor go away without making changes to the text.

Support team suggested that this problem can be a TipTap issue, but if you install and add it to the frontent with the same extensions, there's no error.

How to reproduce

1. Install Statamic:

composer create-project --prefer-dist statamic/statamic statamic
cd statamic

2. Create .npmrc file with credentials from TipTap Pro (it's free!)

3. Install TipTap extensions:

npm install @tiptap-pro/extension-invisible-characters @tiptap-pro/extension-mathematics katex

4. Load TipTap on cp.js:

import Mathematics from '@tiptap-pro/extension-mathematics';

Statamic.$bard.addExtension(() => {
    return [
        Mathematics.configure({
            katexOptions: {
                //
            }
        }),
    ]
});

5. Build assets

npm run build

6. Edit a page, write $$ to see the extension working
7. Press enter to see the error appears

Logs

app-2cd76362.js:28  Uncaught TypeError: Cannot read properties of undefined (reading 'localsInner')
    at DecorationGroup.locals (app-2cd76362.js:28:26510)
    at iterDeco (app-2cd76362.js:25:16923)
    at NodeViewDesc.updateChildren (app-2cd76362.js:25:5509)
    at NodeViewDesc.updateInner (app-2cd76362.js:25:7301)
    at NodeViewDesc.update (app-2cd76362.js:25:7180)
    at EditorView.updateStateInner (app-2cd76362.js:28:46514)
    at EditorView.updateState (app-2cd76362.js:28:45414)
    at Editor.dispatchTransaction (app-2cd76362.js:108:4038)
    at EditorView.dispatch (app-2cd76362.js:28:49954)
    at Object.first (app-2cd76362.js:29:8072)
locals @ app-2cd76362.js:28
iterDeco @ app-2cd76362.js:25
updateChildren @ app-2cd76362.js:25
updateInner @ app-2cd76362.js:25
update @ app-2cd76362.js:25
updateStateInner @ app-2cd76362.js:28
updateState @ app-2cd76362.js:28
dispatchTransaction @ app-2cd76362.js:108
dispatch @ app-2cd76362.js:28
(anonymous) @ app-2cd76362.js:29
Enter @ app-2cd76362.js:34
(anonymous) @ app-2cd76362.js:30
(anonymous) @ app-2cd76362.js:28
(anonymous) @ app-2cd76362.js:28
someProp @ app-2cd76362.js:28
editHandlers.keydown @ app-2cd76362.js:28
M.dom.addEventListener.M.input.eventHandlers.<computed> @ app-2cd76362.js:28

app-2cd76362.js:28  Uncaught TypeError: Cannot read properties of undefined (reading 'eq')
    at DecorationGroup.eq (app-2cd76362.js:28:26393)
    at NodeViewDesc.matchesNode (app-2cd76362.js:25:5234)
    at EditorView.updateStateInner (app-2cd76362.js:28:46107)
    at EditorView.updateState (app-2cd76362.js:28:45414)
    at Editor.dispatchTransaction (app-2cd76362.js:108:4038)
    at EditorView.dispatch (app-2cd76362.js:28:49954)
    at Plugin.blur (app-2cd76362.js:34:14735)
    at app-2cd76362.js:28:5912
    at EditorView.someProp (app-2cd76362.js:28:48312)
    at runCustomHandler (app-2cd76362.js:28:5856)

Environment

Environment
Application Name: Statamic
Laravel Version: 10.37.3
PHP Version: 8.1.26
Composer Version: -
Environment: local
Debug Mode: ENABLED
URL: localhost
Maintenance Mode: OFF

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Cache: array
Database: mysql
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Livewire
Livewire: v3.3.0

Statamic
Addons: 0
Antlers: runtime
Stache Watcher: Enabled
Static Caching: Disabled
Version: 4.42.0 PRO

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

Runtime (default)

Additional details

No response

[duncanmcclean]

I've managed to track down this issue to TipTap's Placeholder extension, which is registered here. Commenting out the exception fixes the error for me.

There's an outstanding issue on the TipTap respository for this error: ueberdosis/tiptap#3869

[duncanmcclean]

In the next release, you shouldn't see this error anymore as long as you're not using the "Placeholder" config option on your Bard field (in which case, you'd need to wait for TipTap to fix the issue on their end).

[david-windsock]

Thanks @duncanmcclean!

[david-windsock]

Hi again @jasonvarga and @duncanmcclean. I rescue this because we have encountered the same error when using tables in certain circumstances: the problem appears when selecting a content within a table or pressing the 'merge cells' button.

Can you take a look and try to reproduce it?

[duncanmcclean]

I can reproduce the issue with the Table feature.

The TipTap developers have responded to the related issue (ueberdosis/tiptap#3869 (comment)). However, even after trying their suggestions (ensuring packages are on the correct versions, etc), the errors are still happening 🤔

[david-windsock]

Thanks @duncanmcclean. What TipTap version is using Statamic?. Out Mathematics extension is set to 2.6.5...

[duncanmcclean]

It's currently using ^2.0.2 but I experienced the same issues after updating to 2.2.2 (as suggested here).