Merge branch 'develop' into fix/fix-incorrect-styles-merge

.changeset/lucky-bears-exercise.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/core": patch
+---
+
+Fixes a bug where you could not unregister multiple plugins.

.changeset/spotty-cobras-shake.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/extension-text-align": patch
+---
+
+Added new `toggleTextAlign` command to TextAlign extension to make toggling text alignments easier to handle

demos/package.json

@@ -43,7 +43,7 @@
     "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
     "uuid": "^8.3.2",
-    "vite": "^5.4.15",
+    "vite": "^5.4.17",
     "vite-plugin-checker": "^0.6.4",
     "vue": "^3.5.13",
     "vue-router": "^4.4.5"

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

@@ -61,6 +61,12 @@ export default () => {
           <button onClick={() => editor.chain().focus().unsetTextAlign().run()}>
             Unset text align
           </button>
+          <button
+            onClick={() => editor.chain().focus().toggleTextAlign('right').run()}
+            className={editor.isActive({ textAlign: 'right' }) ? 'is-active' : ''}
+          >
+            Toggle Right
+          </button>
           <button
             onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
             className={editor.isActive({ level: 1 }) ? 'is-active' : ''}

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

@@ -89,6 +89,14 @@ context('/src/Extensions/TextAlign/React/', () => {
     cy.get('.tiptap').find('p').should('not.have.css', 'text-align', 'left')
   })
 
+  it('toggle the text to right on the 6rd button', () => {
+    cy.get('button:nth-child(6)').click()
+    cy.get('.tiptap').find('p').should('not.have.css', 'text-align', 'right')
+
+    cy.get('button:nth-child(6)').click()
+    cy.get('.tiptap').find('p').should('not.have.css', 'text-align', 'left')
+  })
+
   it('aligns the text left when pressing the keyboard shortcut', () => {
     cy.get('.tiptap')
       .trigger('keydown', { modKey: true, shiftKey: true, key: 'l' })

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

@@ -104,6 +104,22 @@ context('/src/Extensions/TextAlign/Vue/', () => {
       .should('not.have.css', 'text-align', 'left')
   })
 
+  it('toggle the text to right on the 6rd button', () => {
+    cy.get('button:nth-child(6)')
+      .click()
+
+    cy.get('.tiptap')
+      .find('p')
+      .should('have.css', 'text-align', 'right')
+
+    cy.get('button:nth-child(6)')
+      .click()
+
+    cy.get('.tiptap')
+      .find('p')
+      .should('have.css', 'text-align', 'left')
+  })
+
   it('aligns the text left when pressing the keyboard shortcut', () => {
     cy.get('.tiptap')
       .trigger('keydown', { modKey: true, shiftKey: true, key: 'l' })

demos/src/Extensions/TextAlign/Vue/index.vue

@@ -17,6 +17,9 @@
         <button @click="editor.chain().focus().unsetTextAlign().run()">
           Unset text align
         </button>
+        <button @click="editor.chain().focus().toggleTextAlign('right').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }">
+          Toggle Right
+        </button>
       </div>
     </div>
     <editor-content :editor="editor" />

package-lock.json

@@ -90,7 +90,7 @@
         "tailwindcss": "^3.4.15",
         "typescript": "^5.6.3",
         "uuid": "^8.3.2",
-        "vite": "^5.4.15",
+        "vite": "^5.4.17",
         "vite-plugin-checker": "^0.6.4",
         "vue": "^3.5.13",
         "vue-router": "^4.4.5"
@@ -19219,9 +19219,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.15",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.15.tgz",
-      "integrity": "sha512-6ANcZRivqL/4WtwPGTKNaosuNJr5tWiftOC7liM7G9+rMb8+oeJeyzymDu4rTN93seySBmbjSfsS3Vzr19KNtA==",
+      "version": "5.4.17",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.17.tgz",
+      "integrity": "sha512-5+VqZryDj4wgCs55o9Lp+p8GE78TLVg0lasCH5xFZ4jacZjtqZa6JUw9/p0WeAojaOfncSM6v77InkFPGnvPvg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

packages/core/src/Editor.ts

@@ -254,7 +254,7 @@ export class Editor extends EventEmitter<EditorEvents> {
       const name = typeof nameOrPluginKey === 'string' ? `${nameOrPluginKey}$` : nameOrPluginKey.key
 
       // @ts-ignore
-      plugins = prevPlugins.filter(plugin => !plugin.key.startsWith(name))
+      plugins = plugins.filter(plugin => !plugin.key.startsWith(name))
     })
 
     if (prevPlugins.length === plugins.length) {

packages/extension-text-align/src/text-align.ts

@@ -37,6 +37,12 @@ declare module '@tiptap/core' {
        * @example editor.commands.unsetTextAlign()
        */
       unsetTextAlign: () => ReturnType,
+      /**
+       * Toggle the text align attribute
+       * @param alignment The alignment
+       * @example editor.commands.toggleTextAlign('right')
+       */
+      toggleTextAlign: (alignment: string) => ReturnType,
     }
   }
 }
@@ -98,6 +104,17 @@ export const TextAlign = Extension.create<TextAlignOptions>({
           .map(type => commands.resetAttributes(type, 'textAlign'))
           .every(response => response)
       },
+
+      toggleTextAlign: alignment => ({ editor, commands }) => {
+        if (!this.options.alignments.includes(alignment)) {
+          return false
+        }
+
+        if (editor.isActive({ textAlign: alignment })) {
+          return commands.unsetTextAlign()
+        }
+        return commands.setTextAlign(alignment)
+      },
     }
   },