diff --git a/docs/src/demos/Extensions/TextAlign/index.spec.js b/docs/src/demos/Extensions/TextAlign/index.spec.js index 125c4571..3ebbd435 100644 --- a/docs/src/demos/Extensions/TextAlign/index.spec.js +++ b/docs/src/demos/Extensions/TextAlign/index.spec.js @@ -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('

Example Text

') }) }) - it('text should be wrapped in a paragraph by default', () => { + it('should parse left align text correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('

Example Text

') + expect(editor.getHTML()).to.eq('

Example Text

') + }) + }) + + it('should parse center align text correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('

Example Text

') + expect(editor.getHTML()).to.eq('

Example Text

') + }) + }) + + it('should parse right align text correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('

Example Text

') + expect(editor.getHTML()).to.eq('

Example Text

') + }) + }) + + it('should parse left justify text correctly', () => { + cy.get('.ProseMirror').then(([{ editor }]) => { + editor.setContent('

Example Text

') + expect(editor.getHTML()).to.eq('

Example Text

') + }) + }) + + 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') }) }) diff --git a/docs/src/demos/Extensions/TextAlign/index.vue b/docs/src/demos/Extensions/TextAlign/index.vue index 08ec6d50..8b5e963a 100644 --- a/docs/src/demos/Extensions/TextAlign/index.vue +++ b/docs/src/demos/Extensions/TextAlign/index.vue @@ -9,6 +9,9 @@ + diff --git a/docs/src/docPages/api/extensions/history.md b/docs/src/docPages/api/extensions/history.md index b4fa23a6..6423e938 100644 --- a/docs/src/docPages/api/extensions/history.md +++ b/docs/src/docPages/api/extensions/history.md @@ -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 diff --git a/docs/src/docPages/api/extensions/text-align.md b/docs/src/docPages/api/extensions/text-align.md index 3c6fcf8f..e8cd2ab2 100644 --- a/docs/src/docPages/api/extensions/text-align.md +++ b/docs/src/docPages/api/extensions/text-align.md @@ -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` `Shift` `L` Left +* `Ctrl` `Shift` `E` Center +* `Ctrl` `Shift` `R` Right +* `Ctrl` `Shift` `J` Justify ## Source code [packages/extension-text-align/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/heading.md b/docs/src/docPages/api/nodes/heading.md index 652d0630..15e4ac96 100644 --- a/docs/src/docPages/api/nodes/heading.md +++ b/docs/src/docPages/api/nodes/heading.md @@ -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 | diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 61a8a3f4..1211a4a4 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -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