Text alignment actions (#7604)

Signed-off-by: Victor Ilyushchenko <alt13ri@gmail.com>

packages/text/src/kits/server-kit.ts

@@ -33,6 +33,7 @@ import { DefaultKit, DefaultKitOptions } from './default-kit'
 import { CodeExtension, codeOptions } from '../marks/code'
 import { NoteBaseExtension } from '../marks/noteBase'
 import { CommentNode } from '../nodes/comment'
+import TextAlign from '@tiptap/extension-text-align'
 
 const headingLevels: Level[] = [1, 2, 3, 4, 5, 6]
 
@@ -86,6 +87,11 @@ export const ServerKit = Extension.create<ServerKitOptions>({
       ...taskListExtensions,
       ...fileExtensions,
       ...imageExtensions,
+      TextAlign.configure({
+        types: ['heading', 'paragraph'],
+        alignments: ['left', 'center', 'right'],
+        defaultAlignment: null
+      }),
       TodoItemNode,
       TodoListNode,
       ReferenceNode,

packages/text/src/markup/__tests__/utils.test.ts

@@ -61,17 +61,19 @@ describe('EmptyMarkup', () => {
 describe('getMarkup', () => {
   it('with empty content', async () => {
     const editor = new Editor({ extensions })
-    expect(getMarkup(editor)).toEqual('{"type":"doc","content":[{"type":"paragraph"}]}')
+    expect(getMarkup(editor)).toEqual('{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null}}]}')
   })
   it('with some content', async () => {
     const editor = new Editor({ extensions, content: '<p>hello</p>' })
     expect(getMarkup(editor)).toEqual(
-      '{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"hello"}]}]}'
+      '{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"hello"}]}]}'
     )
   })
   it('with empty paragraphs as content', async () => {
     const editor = new Editor({ extensions, content: '<p></p><p></p>' })
-    expect(getMarkup(editor)).toEqual('{"type":"doc","content":[{"type":"paragraph"},{"type":"paragraph"}]}')
+    expect(getMarkup(editor)).toEqual(
+      '{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null}},{"type":"paragraph","attrs":{"textAlign":null}}]}'
+    )
   })
 })
 
@@ -250,13 +252,15 @@ describe('pmNodeToMarkup', () => {
     const schema = getSchema(extensions)
     const node = schema.node('paragraph', {}, [schema.text('Hello, world!')])
 
-    expect(pmNodeToMarkup(node)).toEqual('{"type":"paragraph","content":[{"type":"text","text":"Hello, world!"}]}')
+    expect(pmNodeToMarkup(node)).toEqual(
+      '{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Hello, world!"}]}'
+    )
   })
 })
 
 describe('markupToPmNode', () => {
   it('converts markup to ProseMirrorNode', () => {
-    const markup = '{"type":"paragraph","content":[{"type":"text","text":"Hello, world!"}]}'
+    const markup = '{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Hello, world!"}]}'
     const node = markupToPmNode(markup)
 
     expect(node.type.name).toEqual('paragraph')
@@ -306,7 +310,11 @@ describe('pmNodeToJSON', () => {
     const schema = getSchema(extensions)
     const node = schema.node('paragraph', {}, [schema.text('Hello, world!')])
 
-    const json = nodeParagraph(nodeText('Hello, world!'))
+    const json: MarkupNode = {
+      type: MarkupNodeType.paragraph,
+      attrs: { textAlign: null as any },
+      content: [nodeText('Hello, world!')]
+    }
     expect(pmNodeToJSON(node)).toEqual(json)
   })
 })