ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

update the text align page

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

78
docs/src/demos/Extensions/TextAlign/index.spec.js
View File

@@ -1,18 +1,84 @@
context('/api/nodes/text', () => {
context('/api/extensions/text-align', () => {
before(() => {
cy.visit('/api/nodes/text')
cy.visit('/api/extensions/text-align')
})
beforeEach(() => {
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')
.type('Example Text')
.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')
})
})

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

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

6
docs/src/docPages/api/extensions/history.md
View File

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

18
docs/src/docPages/api/extensions/text-align.md
View File

@@ -1,4 +1,5 @@
# TextAlign
This extension adds a text align attribute to a specified list of nodes. The attribute is used to align the text.
## Installation
```bash
@@ -10,16 +11,25 @@ yarn add @tiptap/extension-text-align
```
## 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
*None*
| Command | Parameters | Description |
| --------- | ---------- | ------------------------------------------ |
| textAlign | alignment | Set the text align to the specified value. |
## 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
[packages/extension-text-align/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/)
## Usage
<demo name="Extensions/TextAlign" highlight="12,30" />
<demo name="Extensions/TextAlign" highlight="29" />

2
docs/src/docPages/api/nodes/heading.md
View File

@@ -16,7 +16,7 @@ yarn add @tiptap/extension-heading
| Option | Type | Default | Description |
| ------ | ------ | ------------------ | --------------------------------------------- |
| 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
| Command | Parameters | Description |

1
docs/src/links.yaml
View File

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