feat(doc): continuous punctuation extrusion and paragraph align

.vscode/settings.json

@@ -46,6 +46,7 @@
         "Jamo",
         "jikkai",
         "Jocs",
+        "justifiables",
         "Kaiti",
         "KANBAN",
         "kcode",

examples/src/data/docs/default-document-data-cn.ts

@@ -15,7 +15,7 @@
  */
 
 import type { IDocumentData } from '@univerjs/core';
-import { BooleanNumber } from '@univerjs/core';
+import { BooleanNumber, HorizontalAlign } from '@univerjs/core';
 import { ptToPixel } from '@univerjs/engine-render';
 
 export const DEFAULT_DOCUMENT_DATA_CN: IDocumentData = {
@@ -115,6 +115,7 @@ export const DEFAULT_DOCUMENT_DATA_CN: IDocumentData = {
                     spaceAbove: 10,
                     lineSpacing: 2,
                     spaceBelow: 0,
+                    horizontalAlign: HorizontalAlign.JUSTIFIED,
                 },
             },
             {

packages/docs-ui/src/controllers/doc-ui.controller.ts

@@ -31,6 +31,10 @@ import {
 import { FONT_SIZE_COMPONENT, FontSize } from '../components/font-size';
 import { DocBackground } from '../views/doc-background/DocBackground';
 import {
+    AlignCenterMenuItemFactory,
+    AlignJustifyMenuItemFactory,
+    AlignLeftMenuItemFactory,
+    AlignRightMenuItemFactory,
     BoldMenuItemFactory,
     BulletListMenuItemFactory,
     FontFamilySelectorMenuItemFactory,
@@ -82,6 +86,10 @@ export class DocUIController extends Disposable {
                 FontSizeSelectorMenuItemFactory,
                 FontFamilySelectorMenuItemFactory,
                 TextColorSelectorMenuItemFactory,
+                AlignLeftMenuItemFactory,
+                AlignCenterMenuItemFactory,
+                AlignRightMenuItemFactory,
+                AlignJustifyMenuItemFactory,
                 OrderListMenuItemFactory,
                 BulletListMenuItemFactory,
             ] as IMenuItemFactory[]

packages/docs-ui/src/controllers/menu/menu.ts

@@ -17,12 +17,18 @@
 import {
     BaselineOffset,
     BooleanNumber,
+    HorizontalAlign,
     ICommandService,
     IUniverInstanceService,
     ThemeService,
     UniverInstanceType,
 } from '@univerjs/core';
 import {
+    AlignCenterCommand,
+    AlignJustifyCommand,
+    AlignLeftCommand,
+    AlignOperationCommand,
+    AlignRightCommand,
     BulletListCommand,
     OrderListCommand,
     SetInlineFormatBoldCommand,
@@ -54,7 +60,6 @@ import { COLOR_PICKER_COMPONENT } from '../../components/color-picker';
 import { FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT } from '../../components/font-family';
 import { FONT_SIZE_COMPONENT } from '../../components/font-size';
 
-// TODO @Dushusir: use for test, change id later
 export function BoldMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
     const commandService = accessor.get(ICommandService);
 
@@ -395,6 +400,146 @@ export function TextColorSelectorMenuItemFactory(accessor: IAccessor): IMenuSele
     };
 }
 
+export function AlignLeftMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
+    const commandService = accessor.get(ICommandService);
+
+    return {
+        id: AlignLeftCommand.id,
+        group: MenuGroup.TOOLBAR_LAYOUT,
+        type: MenuItemType.BUTTON,
+        icon: 'LeftJustifyingSingle',
+        tooltip: 'toolbar.alignLeft',
+        positions: [MenuPosition.TOOLBAR_START],
+        activated$: new Observable<boolean>((subscriber) => {
+            const disposable = commandService.onCommandExecuted((c) => {
+                const id = c.id;
+
+                if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+                    const paragraph = getParagraphStyleAtCursor(accessor);
+
+                    if (paragraph == null) {
+                        return;
+                    }
+
+                    const alignType = paragraph.paragraphStyle?.horizontalAlign;
+
+                    subscriber.next(alignType === HorizontalAlign.LEFT);
+                }
+            });
+
+            subscriber.next(false);
+
+            return disposable.dispose;
+        }),
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.DOC),
+    };
+}
+
+export function AlignCenterMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
+    const commandService = accessor.get(ICommandService);
+
+    return {
+        id: AlignCenterCommand.id,
+        group: MenuGroup.TOOLBAR_LAYOUT,
+        type: MenuItemType.BUTTON,
+        icon: 'HorizontallySingle',
+        tooltip: 'toolbar.alignCenter',
+        positions: [MenuPosition.TOOLBAR_START],
+        activated$: new Observable<boolean>((subscriber) => {
+            const disposable = commandService.onCommandExecuted((c) => {
+                const id = c.id;
+
+                if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+                    const paragraph = getParagraphStyleAtCursor(accessor);
+
+                    if (paragraph == null) {
+                        return;
+                    }
+
+                    const alignType = paragraph.paragraphStyle?.horizontalAlign;
+
+                    subscriber.next(alignType === HorizontalAlign.CENTER);
+                }
+            });
+
+            subscriber.next(false);
+
+            return disposable.dispose;
+        }),
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.DOC),
+    };
+}
+
+export function AlignRightMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
+    const commandService = accessor.get(ICommandService);
+
+    return {
+        id: AlignRightCommand.id,
+        group: MenuGroup.TOOLBAR_LAYOUT,
+        type: MenuItemType.BUTTON,
+        icon: 'RightJustifyingSingle',
+        tooltip: 'toolbar.alignRight',
+        positions: [MenuPosition.TOOLBAR_START],
+        activated$: new Observable<boolean>((subscriber) => {
+            const disposable = commandService.onCommandExecuted((c) => {
+                const id = c.id;
+
+                if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+                    const paragraph = getParagraphStyleAtCursor(accessor);
+
+                    if (paragraph == null) {
+                        return;
+                    }
+
+                    const alignType = paragraph.paragraphStyle?.horizontalAlign;
+
+                    subscriber.next(alignType === HorizontalAlign.RIGHT);
+                }
+            });
+
+            subscriber.next(false);
+
+            return disposable.dispose;
+        }),
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.DOC),
+    };
+}
+
+export function AlignJustifyMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
+    const commandService = accessor.get(ICommandService);
+
+    return {
+        id: AlignJustifyCommand.id,
+        group: MenuGroup.TOOLBAR_LAYOUT,
+        type: MenuItemType.BUTTON,
+        icon: 'AlignTextBothSingle',
+        tooltip: 'toolbar.alignJustify',
+        positions: [MenuPosition.TOOLBAR_START],
+        activated$: new Observable<boolean>((subscriber) => {
+            const disposable = commandService.onCommandExecuted((c) => {
+                const id = c.id;
+
+                if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+                    const paragraph = getParagraphStyleAtCursor(accessor);
+
+                    if (paragraph == null) {
+                        return;
+                    }
+
+                    const alignType = paragraph.paragraphStyle?.horizontalAlign;
+
+                    subscriber.next(alignType === HorizontalAlign.JUSTIFIED);
+                }
+            });
+
+            subscriber.next(false);
+
+            return disposable.dispose;
+        }),
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.DOC),
+    };
+}
+
 export function OrderListMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
     return {
         id: OrderListCommand.id,
@@ -441,3 +586,35 @@ function getFontStyleAtCursor(accessor: IAccessor) {
 
     return textRun;
 }
+
+function getParagraphStyleAtCursor(accessor: IAccessor) {
+    const currentUniverService = accessor.get(IUniverInstanceService);
+    const textSelectionService = accessor.get(TextSelectionManagerService);
+    const editorDataModel = currentUniverService.getCurrentUniverDocInstance();
+    const activeTextRange = textSelectionService.getActiveRange();
+
+    if (editorDataModel == null || activeTextRange == null) {
+        return;
+    }
+
+    const paragraphs = editorDataModel.getBody()?.paragraphs;
+
+    if (paragraphs == null) {
+        return;
+    }
+
+    const { startOffset } = activeTextRange;
+
+    let prevIndex = -1;
+
+    for (const paragraph of paragraphs) {
+        const { startIndex } = paragraph;
+        if (startOffset > prevIndex && startOffset <= startIndex) {
+            return paragraph;
+        }
+
+        prevIndex = startIndex;
+    }
+
+    return null;
+}

packages/docs-ui/src/locale/en-US.ts

@@ -35,6 +35,10 @@ const locale: typeof zhCN = {
         resetColor: 'Reset',
         order: 'Ordered list',
         unorder: 'Unordered list',
+        alignLeft: 'Align Left',
+        alignCenter: 'Align Center',
+        alignRight: 'Align Right',
+        alignJustify: 'Justify',
     },
 };
 

packages/docs-ui/src/locale/zh-CN.ts

@@ -33,6 +33,10 @@ const locale = {
         resetColor: '重置颜色',
         order: '有序列表',
         unorder: '无序列表',
+        alignLeft: '左对齐',
+        alignCenter: '居中对齐',
+        alignRight: '右对齐',
+        alignJustify: '两端对齐',
     },
 };