update the text align page

This commit is contained in:
Hans Pagel
2020-11-06 15:44:23 +01:00
parent be44c6c6c7
commit 6beb9d2d69
6 changed files with 93 additions and 15 deletions

View File

@@ -1,18 +1,84 @@
context('/api/nodes/text', () => { context('/api/extensions/text-align', () => {
before(() => { before(() => {
cy.visit('/api/nodes/text') cy.visit('/api/extensions/text-align')
}) })
beforeEach(() => { beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => { cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent() editor.setContent('<p>Example Text</p>')
}) })
}) })
it('text should be wrapped in a paragraph by default', () => { it('should parse left align text correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p style="text-align: left">Example Text</p>')
expect(editor.getHTML()).to.eq('<p style="text-align: left">Example Text</p>')
})
})
it('should parse center align text correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p style="text-align: center">Example Text</p>')
expect(editor.getHTML()).to.eq('<p style="text-align: center">Example Text</p>')
})
})
it('should parse right align text correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p style="text-align: right">Example Text</p>')
expect(editor.getHTML()).to.eq('<p style="text-align: right">Example Text</p>')
})
})
it('should parse left justify text correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p style="text-align: justify">Example Text</p>')
expect(editor.getHTML()).to.eq('<p style="text-align: justify">Example Text</p>')
})
})
it('aligns the text left on the 1st button', () => {
cy.get('.demo__preview button:nth-child(1)')
.click()
cy.get('.ProseMirror') cy.get('.ProseMirror')
.type('Example Text')
.find('p') .find('p')
.should('contain', 'Example Text') .should('have.css', 'text-align', 'left')
})
it('aligns the text center on the 2nd button', () => {
cy.get('.demo__preview button:nth-child(2)')
.click()
cy.get('.ProseMirror')
.find('p')
.should('have.css', 'text-align', 'center')
})
it('aligns the text right on the 3rd button', () => {
cy.get('.demo__preview button:nth-child(3)')
.click()
cy.get('.ProseMirror')
.find('p')
.should('have.css', 'text-align', 'right')
})
it('aligns the text justified on the 4th button', () => {
cy.get('.demo__preview button:nth-child(4)')
.click()
cy.get('.ProseMirror')
.find('p')
.should('have.css', 'text-align', 'justify')
})
it('aligns the text default on the 5th button', () => {
cy.get('.demo__preview button:nth-child(5)')
.click()
cy.get('.ProseMirror')
.find('p')
.should('have.css', 'text-align', 'left')
}) })
}) })

View File

@@ -9,6 +9,9 @@
<button @click="editor.chain().focus().textAlign('right').run()"> <button @click="editor.chain().focus().textAlign('right').run()">
right right
</button> </button>
<button @click="editor.chain().focus().textAlign('justify').run()">
justify
</button>
<button @click="editor.chain().focus().resetNodeAttributes(['textAlign']).run()"> <button @click="editor.chain().focus().resetNodeAttributes(['textAlign']).run()">
set default set default
</button> </button>

View File

@@ -18,9 +18,9 @@ yarn add @tiptap/extension-history
## Commands ## Commands
| Command | Parameters | Description | | Command | Parameters | Description |
| ------- | ------- | --------------------- | | ------- | ---------- | --------------------- |
| undo | — | Undo the last change. | | undo | — | Undo the last change. |
| redo | — | Redo the last change. | | redo | — | Redo the last change. |
## Keyboard shortcuts ## Keyboard shortcuts
### Undo ### Undo

View File

@@ -1,4 +1,5 @@
# TextAlign # TextAlign
This extension adds a text align attribute to a specified list of nodes. The attribute is used to align the text.
## Installation ## Installation
```bash ```bash
@@ -10,16 +11,25 @@ yarn add @tiptap/extension-text-align
``` ```
## Settings ## Settings
*None* | Option | Type | Default | Description |
| ---------------- | ------ | -------------------------------------- | -------------------------------------------------------------------- |
| types | array | ['heading', 'paragraph'] | A list of nodes where the text align attribute should be applied to. |
| alignments | array | ['left', 'center', 'right', 'justify'] | A list of available options for the text align attribute. |
| defaultAlignment | string | left | The default text align. |
## Commands ## Commands
*None* | Command | Parameters | Description |
| --------- | ---------- | ------------------------------------------ |
| textAlign | alignment | Set the text align to the specified value. |
## Keyboard shortcuts ## Keyboard shortcuts
*None* * `Ctrl`&nbsp;`Shift`&nbsp;`L` Left
* `Ctrl`&nbsp;`Shift`&nbsp;`E` Center
* `Ctrl`&nbsp;`Shift`&nbsp;`R` Right
* `Ctrl`&nbsp;`Shift`&nbsp;`J` Justify
## Source code ## Source code
[packages/extension-text-align/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/) [packages/extension-text-align/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/)
## Usage ## Usage
<demo name="Extensions/TextAlign" highlight="12,30" /> <demo name="Extensions/TextAlign" highlight="29" />

View File

@@ -16,7 +16,7 @@ yarn add @tiptap/extension-heading
| Option | Type | Default | Description | | Option | Type | Default | Description |
| ------ | ------ | ------------------ | --------------------------------------------- | | ------ | ------ | ------------------ | --------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. | | class | string | | Add a custom class to the rendered HTML tag. |
| levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which heading levels are supported. | | levels | array | [1, 2, 3, 4, 5, 6] | Specifies which heading levels are supported. |
## Commands ## Commands
| Command | Parameters | Description | | Command | Parameters | Description |

View File

@@ -133,7 +133,6 @@
link: /api/extensions/history link: /api/extensions/history
- title: TextAlign - title: TextAlign
link: /api/extensions/text-align link: /api/extensions/text-align
draft: true
- title: Typography - title: Typography
link: /api/extensions/typography link: /api/extensions/typography
- title: Commands - title: Commands