fix: convert content to a string before passing it to applyPasteRules meta value in insertContentAt.ts

[gabemagee-ev]

Changes Overview

In insertContentAt.ts cast content as a string in insertContentAt, since createNodeFromContent can return an Object when the content is complex, which prevents paste and input rules from being applied.

Implementation Approach

converting the object to a string prevents text.length from being NaN in PasteRule.ts:appendTransaction, which is necessary in order to process any paste or input events.

Testing Done

npm run test and testing the initial case that led me to the bug in the browser using developer tools

Verification Steps

Additional Notes

Checklist

• I have renamed my PR according to the naming conventions. (e.g. feat: Implement new feature or chore(deps): Update dependencies)
• My changes do not break the library.
• I have added tests where applicable.
• I have followed the project guidelines.
• I have fixed any lint issues.

Related Issues

#5150

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	12a46e4
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/665fe6383df4150008282d11
😎 Deploy Preview	https://deploy-preview-5152--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nperez0111]

Hm, I see why you are doing this. But I think it is probably better to do it in the else branches on line :119 and :114 instead since those are the branches that does not attempt to convert it to a string (really 119 is the one that matters 114 should be a string)

[nperez0111]

Also tests would be greatly appreciated

[gabemagee-ev]

that what I originally had, but I opted for this since I think we want newContent to retain it's original assignment for the tr.replaceWith(from, to, newContent) in line :121.

[gabemagee-ev]

since this is my first contribution to this repo, I don't know where everything is. can you point me to where tests for a command or pasteRule would go, since I don't see any preexisting ones, or perhaps I am missing them. @nperez0111 thank you!

[nperez0111]

@gabemagee-ev , the tests would be in this file:

tiptap/demos/src/Commands/InsertContent/React/index.spec.js

Lines 1 to 44 in 21aa96d

	context('/src/Commands/InsertContent/React/', () => {
	before(() => {
	cy.visit('/src/Commands/InsertContent/React/')
	})
	beforeEach(() => {
	cy.get('.tiptap').type('{selectall}{backspace}')
	})
	it('should insert html content correctly', () => {
	cy.get('button[data-test-id="html-content"]').click()
	// check if the content html is correct
	cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello World</strong></p><p>This is a paragraph<br>with a break.</p><p>And this is some additional string content.</p>')
	})
	it('should keep spaces inbetween tags in html content', () => {
	cy.get('.tiptap').then(([{ editor }]) => {
	editor.commands.insertContent('<p><b>Hello</b> <i>World</i></p>')
	cy.get('.tiptap').should('contain.html', '<p><strong>Hello</strong> <em>World</em></p>')
	})
	})
	it('should keep empty spaces', () => {
	cy.get('.tiptap').then(([{ editor }]) => {
	editor.commands.insertContent(' ')
	cy.get('.tiptap').should('contain.html', '<p> </p>')
	})
	})
	it('should insert text content correctly', () => {
	cy.get('button[data-test-id="text-content"]').click()
	// check if the content html is correct
	cy.get('.tiptap').should('contain.html', 'Hello World\nThis is content with a new line. Is this working?\n\nLets see if multiple new lines are inserted correctly')
	})
	it('should keep newlines in pre tag', () => {
	cy.get('.tiptap').then(([{ editor }]) => {
	editor.commands.insertContent('<pre><code>foo\nbar</code></pre>')
	cy.get('.tiptap').should('contain.html', '<pre><code>foo\nbar</code></pre>')
	})
	})
	})

You can follow this guide to get your environment set up:

tiptap/docs/overview/contributing.md

Lines 22 to 29 in e597809

	## Set up the development environment
	It’s not too hard to tinker around with the official repository. You’ll need [Git](https://github.com/git-guides/install-git), [Node and NPM](https://nodejs.org/en/download/) installed. Here is what you need to do then:
	1. Copy the code to your local machine: `$ git clone git@github.com:ueberdosis/tiptap.git`
	2. Install dependencies: `$ npm install`
	3. Start the development environment: `$ npm run start`
	4. Open http://localhost:3000 in your favorite browser.
	5. Start playing around!

You are right about maintaining the call, I missed that.

I appreciate your contribution very much. If you need any help, I'm happy to 😄 !

[gabemagee-ev]

after adding testing, I realized this wasn't a solution to the linked bug. Will work on a fix when I have time, likely next week. Sorry for the ping!

[nperez0111]

after adding testing, I realized this wasn't a solution to the linked bug. Will work on a fix when I have time, likely next week. Sorry for the ping!

Hey @gabemagee-ev, I actually ran into this myself sometime last week and I started working on something to fix it but did not get the time to finish it. Would be great if you could take it over the finish-line, here is my branch for it (pointed at the only additional commit I made branch name is fix/simulated-paste-rules): fddfe31

The core of my idea here was to make the InputRules & PasteRules plugins do the work of accepting different content types and convert those to a format that can actually be used properly.

I think that my code works but I never got around to writing tests for it.