update the text align page

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

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

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

docs/src/docPages/api/extensions/history.md

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

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
-<demo name="Extensions/TextAlign" highlight="12,30" />
+<demo name="Extensions/TextAlign" highlight="29" />

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                                      |

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