Merge branch 'main' into main

.changeset/config.json

@@ -2,12 +2,13 @@
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
-  "fixed": [
-    ["@tiptap/*"]
-  ],
+  "fixed": [["@tiptap/*"]],
   "linked": [],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": [],
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true
+  }
 }

demos/src/Extensions/TextAlign/React/index.jsx

@@ -58,7 +58,21 @@ export default () => {
           >
             Justify
           </button>
-          <button onClick={() => editor.chain().focus().unsetTextAlign().run()}>Unset text align</button>
+          <button onClick={() => editor.chain().focus().unsetTextAlign().run()}>
+            Unset text align
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+            className={editor.isActive({ level: 1 }) ? 'is-active' : ''}
+          >
+            Toggle H1
+          </button>
+          <button
+            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+            className={editor.isActive({ level: 2 }) ? 'is-active' : ''}
+          >
+            Toggle H2
+          </button>
         </div>
       </div>
       <EditorContent editor={editor} />

demos/src/Extensions/TextAlign/React/index.spec.js

@@ -37,6 +37,21 @@ context('/src/Extensions/TextAlign/React/', () => {
     })
   })
 
+  it('should keep the text aligned when toggling headings', () => {
+    const alignments = ['center', 'right', 'justify']
+    const headings = [1, 2]
+
+    cy.get('.tiptap').then(([{ editor }]) => {
+      alignments.forEach(alignment => {
+        headings.forEach(level => {
+          editor.commands.setContent(`<p style="text-align: ${alignment}">Example Text</p>`)
+          editor.commands.toggleHeading({ level })
+          expect(editor.getHTML()).to.eq(`<h${level} style="text-align: ${alignment}">Example Text</h${level}>`)
+        })
+      })
+    })
+  })
+
   it('aligns the text left on the 1st button', () => {
     cy.get('button:nth-child(1)').click()
 

demos/src/Extensions/TextAlign/Vue/index.spec.js

@@ -37,6 +37,21 @@ context('/src/Extensions/TextAlign/Vue/', () => {
     })
   })
 
+  it('should keep the text aligned when toggling headings', () => {
+    const alignments = ['center', 'right', 'justify']
+    const headings = [1, 2]
+
+    cy.get('.tiptap').then(([{ editor }]) => {
+      alignments.forEach(alignment => {
+        headings.forEach(level => {
+          editor.commands.setContent(`<p style="text-align: ${alignment}">Example Text</p>`)
+          editor.commands.toggleHeading({ level })
+          expect(editor.getHTML()).to.eq(`<h${level} style="text-align: ${alignment}">Example Text</h${level}>`)
+        })
+      })
+    })
+  })
+
   it('aligns the text left on the 1st button', () => {
     cy.get('button:nth-child(1)')
       .click()