Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(core): fix insertContentAt keeping new lines in html content #4465

Merged
merged 5 commits into from
Jan 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file.
62 changes: 62 additions & 0 deletions demos/src/Issues/2720/React/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import './styles.scss'

import { Color } from '@tiptap/extension-color'
import ListItem from '@tiptap/extension-list-item'
import TextStyle from '@tiptap/extension-text-style'
import { EditorProvider, useCurrentEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React from 'react'

const htmlContent = `
<h1><a href="https://tiptap.dev/">Tiptap</a></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>
`

const textContent = `Hello World
This is content with a new line. Is this working?

Lets see if multiple new lines are inserted correctly

And more lines`

const MenuBar = () => {
const { editor } = useCurrentEditor()

if (!editor) {
return null
}

return (
<>
<button data-test-id="html-content" onClick={() => editor.chain().insertContent(htmlContent).focus().run()}>
Insert html content
</button>
<button data-test-id="text-content" onClick={() => editor.chain().insertContent(textContent).focus().run()}>
Insert text content
</button>
</>
)
}

const extensions = [
Color.configure({ types: [TextStyle.name, ListItem.name] }),
TextStyle.configure({ types: [ListItem.name] }),
StarterKit.configure({
bulletList: {
keepMarks: true,
},
orderedList: {
keepMarks: true,
},
}),
]

const content = ''

export default () => {
return (
<EditorProvider slotBefore={<MenuBar />} extensions={extensions} content={content}></EditorProvider>
)
}
23 changes: 23 additions & 0 deletions demos/src/Issues/2720/React/index.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
context('/src/Issues/2720/React/', () => {
before(() => {
cy.visit('/src/Issues/2720/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 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')
})
})
56 changes: 56 additions & 0 deletions demos/src/Issues/2720/React/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/* Basic editor styles */
.tiptap {
> * + * {
margin-top: 0.75em;
}

ul,
ol {
padding: 0 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
}

code {
background-color: rgba(#616161, 0.1);
color: #616161;
}

pre {
background: #0D0D0D;
color: #FFF;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
border-radius: 0.5rem;

code {
color: inherit;
padding: 0;
background: none;
font-size: 0.8rem;
}
}

img {
max-width: 100%;
height: auto;
}

blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0D0D0D, 0.1);
}

hr {
border: none;
border-top: 2px solid rgba(#0D0D0D, 0.1);
margin: 2rem 0;
}
}
1 change: 1 addition & 0 deletions packages/core/src/helpers/createNodeFromContent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export function createNodeFromContent(
}

if (typeof content === 'string') {
content = content.split('\n').map(part => part.trim()).join('') // we need to remove new lines since the parser will add breaks
const parser = DOMParser.fromSchema(schema)

return options.slice
Expand Down