Merge branch 'develop' into dependabot/github_actions/actions/cache-4…

….1.1
ueberdosis · Oct 25, 2024 · b2bbaae · b2bbaae
2 parents ba829d3 + f323e5b
commit b2bbaae
Show file tree

Hide file tree

Showing 143 changed files with 1,106 additions and 561 deletions.
diff --git a/.changeset/five-melons-compete.md b/.changeset/five-melons-compete.md
diff --git a/.changeset/fresh-coats-relate.md b/.changeset/fresh-coats-relate.md
@@ -0,0 +1,5 @@
+---
+"@tiptap/core": minor
+---
+
+Previously, only a json representation of the node could be inserted into the editor. This change allows for the insertion of Prosemirror `Node`s and `Fragment`s directly into the editor through the `insertContentAt`, `setContent` and `insertContent` commands.
diff --git a/.changeset/funny-otters-protect.md b/.changeset/funny-otters-protect.md
@@ -0,0 +1,5 @@
+---
+"@tiptap/core": patch
+---
+
+Addresses a bug with `insertContentAt`'s `simulatedPasteRules` option where it could only accept text and not Prosemirror `Node` and `Content`
diff --git a/.changeset/khaki-timers-jump.md b/.changeset/khaki-timers-jump.md
diff --git a/.changeset/nervous-bats-film.md b/.changeset/nervous-bats-film.md
diff --git a/.changeset/slow-peaches-film.md b/.changeset/slow-peaches-film.md
diff --git a/.changeset/sweet-feet-dream.md b/.changeset/sweet-feet-dream.md
diff --git a/.changeset/sweet-masks-smash.md b/.changeset/sweet-masks-smash.md
diff --git a/.changeset/thirty-apes-boil.md b/.changeset/thirty-apes-boil.md
diff --git a/.changeset/violet-cameras-brush.md b/.changeset/violet-cameras-brush.md
diff --git a/demos/src/Commands/InsertContent/React/index.jsx b/demos/src/Commands/InsertContent/React/index.jsx
@@ -1,6 +1,7 @@
 import './styles.scss'
 
 import { Color } from '@tiptap/extension-color'
+import Link from '@tiptap/extension-link'
 import ListItem from '@tiptap/extension-list-item'
 import TextStyle from '@tiptap/extension-text-style'
 import { EditorProvider, useCurrentEditor } from '@tiptap/react'
@@ -48,6 +49,7 @@ const MenuBar = () => {
 const extensions = [
   Color.configure({ types: [TextStyle.name, ListItem.name] }),
   TextStyle.configure({ types: [ListItem.name] }),
+  Link,
   StarterKit.configure({
     bulletList: {
       keepMarks: true,

diff --git a/demos/src/Commands/InsertContent/React/index.spec.js b/demos/src/Commands/InsertContent/React/index.spec.js
@@ -11,7 +11,7 @@ context('/src/Commands/InsertContent/React/', () => {
     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>')
+    cy.get('.tiptap').should('contain.html', '<h1><a target="_blank" rel="noopener noreferrer nofollow" 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>')
   })
 
   it('should keep spaces inbetween tags in html content', () => {
@@ -91,4 +91,28 @@ context('/src/Commands/InsertContent/React/', () => {
     })
   })
 
+  it('should respect editor.options.parseOptions if defined to be `false`', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.options.parseOptions = { preserveWhitespace: false }
+      editor.commands.insertContent('\n<h1>Tiptap</h1><p><strong>Hello\n World</strong>\n</p>\n')
+      cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello World</strong></p>')
+    })
+  })
+
+  it('should respect editor.options.parseOptions if defined to be `full`', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.options.parseOptions = { preserveWhitespace: 'full' }
+      editor.commands.insertContent('\n<h1>Tiptap</h1><p><strong>Hello\n World</strong>\n</p>\n')
+      cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello\n World</strong></p>')
+    })
+  })
+
+  it('should respect editor.options.parseOptions if defined to be `true`', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.options.parseOptions = { preserveWhitespace: true }
+      editor.commands.insertContent('<h1>Tiptap</h1><p><strong>Hello\n World</strong>\n</p>')
+      cy.get('.tiptap').should('contain.html', '<h1>Tiptap</h1><p><strong>Hello  World</strong></p>')
+    })
+  })
+
 })
diff --git a/demos/src/Commands/SetContent/React/index.spec.js b/demos/src/Commands/SetContent/React/index.spec.js
@@ -14,6 +14,27 @@ context('/src/Commands/SetContent/React/', () => {
     })
   })
 
+  it('should insert raw JSON content', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent({ type: 'paragraph', content: [{ type: 'text', text: 'Hello World.' }] })
+      cy.get('.tiptap').should('contain.html', '<p>Hello World.</p>')
+    })
+  })
+
+  it('should insert a Prosemirror Node as content', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent(editor.schema.node('paragraph', null, editor.schema.text('Hello World.')))
+      cy.get('.tiptap').should('contain.html', '<p>Hello World.</p>')
+    })
+  })
+
+  it('should insert a Prosemirror Fragment as content', () => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.setContent(editor.schema.node('doc', null, editor.schema.node('paragraph', null, editor.schema.text('Hello World.'))).content)
+      cy.get('.tiptap').should('contain.html', '<p>Hello World.</p>')
+    })
+  })
+
   it('should emit updates', () => {
     cy.get('.tiptap').then(([{ editor }]) => {
       let updateCount = 0

diff --git a/demos/src/Demos/CollaborationSplitPane/React/Editor.jsx b/demos/src/Demos/CollaborationSplitPane/React/Editor.jsx
@@ -72,19 +72,23 @@ const getRandomColor = () => getRandomElement(colors)
 const getRandomName = () => getRandomElement(names)
 
 const getInitialUser = () => {
-  return (
-    {
-      name: getRandomName(),
-      color: getRandomColor(),
-    }
-  )
+  return {
+    name: getRandomName(),
+    color: getRandomColor(),
+  }
 }
 
-const Editor = ({ ydoc, provider, room }) => {
+const Editor = ({
+  ydoc, provider, room,
+}) => {
   const [status, setStatus] = useState('connecting')
   const [currentUser, setCurrentUser] = useState(getInitialUser)
 
   const editor = useEditor({
+    enableContentCheck: true,
+    onContentError: ({ disableCollaboration }) => {
+      disableCollaboration()
+    },
     onCreate: ({ editor: currentEditor }) => {
       provider.on('synced', () => {
         if (currentEditor.isEmpty) {
@@ -99,13 +103,13 @@ const Editor = ({ ydoc, provider, room }) => {
       Highlight,
       TaskList,
       TaskItem,
-      CharacterCount.configure({
+      CharacterCount.extend().configure({
         limit: 10000,
       }),
-      Collaboration.configure({
+      Collaboration.extend().configure({
         document: ydoc,
       }),
-      CollaborationCursor.configure({
+      CollaborationCursor.extend().configure({
         provider,
       }),
     ],
@@ -183,15 +187,20 @@ const Editor = ({ ydoc, provider, room }) => {
 
       <EditorContent editor={editor} className="main-group" />
 
-      <div className="collab-status-group" data-state={status === 'connected' ? 'online' : 'offline'}>
+      <div
+        className="collab-status-group"
+        data-state={status === 'connected' ? 'online' : 'offline'}
+      >
         <label>
           {status === 'connected'
             ? `${editor.storage.collaborationCursor.users.length} user${
               editor.storage.collaborationCursor.users.length === 1 ? '' : 's'
             } online in ${room}`
             : 'offline'}
         </label>
-        <button style={{ '--color': currentUser.color }} onClick={setName}>✎ {currentUser.name}</button>
+        <button style={{ '--color': currentUser.color }} onClick={setName}>
+          ✎ {currentUser.name}
+        </button>
       </div>
     </div>
   )

diff --git a/demos/src/Demos/CollaborationSplitPane/React/index.jsx b/demos/src/Demos/CollaborationSplitPane/React/index.jsx
@@ -9,7 +9,7 @@ const appId = '7j9y6m10'
 const room = `room.${new Date()
   .getFullYear()
   .toString()
-  .slice(-2)}${new Date().getMonth() + 1}${new Date().getDate()}`
+  .slice(-2)}${new Date().getMonth() + 1}${new Date().getDate()}-ok`
 
 // ydoc and provider for Editor A
 const ydocA = new Y.Doc()

diff --git a/demos/src/Examples/Transition/Vue/index.spec.js b/demos/src/Examples/Transition/Vue/index.spec.js
@@ -6,23 +6,23 @@ context('/src/Examples/Transition/Vue/', () => {
   it('should not have an active tiptap instance but a button', () => {
     cy.get('.tiptap').should('not.exist')
 
-    cy.get('button').should('exist')
+    cy.get('#toggle-editor').should('exist')
   })
 
   it('clicking the button should show the editor', () => {
-    cy.get('button').click()
+    cy.get('#toggle-editor').click()
 
     cy.get('.tiptap').should('exist')
     cy.get('.tiptap').should('be.visible')
   })
 
   it('clicking the button again should hide the editor', () => {
-    cy.get('button').click()
+    cy.get('#toggle-editor').click()
 
     cy.get('.tiptap').should('exist')
     cy.get('.tiptap').should('be.visible')
 
-    cy.get('button').click()
+    cy.get('#toggle-editor').click()
 
     cy.get('.tiptap').should('not.exist')
   })

diff --git a/demos/src/Examples/Transition/Vue/index.vue b/demos/src/Examples/Transition/Vue/index.vue
@@ -34,7 +34,12 @@ const showEditor = ref(false)
 
 <template>
   <div>
-    <button type="button" @click="showEditor = !showEditor" style="margin-bottom: 1rem;">
+    <button
+      type="button"
+      @click="showEditor = !showEditor"
+      style="margin-bottom: 1rem;"
+      id="toggle-editor"
+    >
       {{ showEditor ? 'Hide editor' : 'Show editor' }}
     </button>
 

diff --git a/demos/src/Nodes/CodeBlockLowlight/React/styles.scss b/demos/src/Nodes/CodeBlockLowlight/React/styles.scss
@@ -29,7 +29,6 @@
     .hljs-template-variable,
     .hljs-attribute,
     .hljs-tag,
-    .hljs-name,
     .hljs-regexp,
     .hljs-link,
     .hljs-name,