mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-07 17:43:49 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(text-align): add toggle command (#6101)

Browse Source 
* feat(text-align): add toggle command

* docs: changeset

* Update .changeset/spotty-cobras-shake.md

---------

Co-authored-by: bdbch <6538827+bdbch@users.noreply.github.com>
This commit is contained in:
zzxming 2025-04-30 09:09:02 +08:00 committed by GitHub
parent e0640df081
commit 366023f44d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 55 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/spotty-cobras-shake.md Normal file
View File

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

6
demos/src/Extensions/TextAlign/React/index.jsx
View File

@ -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' : ''}

8
demos/src/Extensions/TextAlign/React/index.spec.js
View File

@ -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' })

16
demos/src/Extensions/TextAlign/Vue/index.spec.js
View File

@ -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' })

3
demos/src/Extensions/TextAlign/Vue/index.vue
View File

@ -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" />

17
packages/extension-text-align/src/text-align.ts
View File

@ -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)
},
}
},