feat(docs): support background color in doc

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

@@ -35,12 +35,14 @@ import {
     AlignJustifyMenuItemFactory,
     AlignLeftMenuItemFactory,
     AlignRightMenuItemFactory,
+    BackgroundColorSelectorMenuItemFactory,
     BoldMenuItemFactory,
     BulletListMenuItemFactory,
     FontFamilySelectorMenuItemFactory,
     FontSizeSelectorMenuItemFactory,
     ItalicMenuItemFactory,
     OrderListMenuItemFactory,
+    ResetBackgroundColorMenuItemFactory,
     StrikeThroughMenuItemFactory,
     SubscriptMenuItemFactory,
     SuperscriptMenuItemFactory,
@@ -92,6 +94,8 @@ export class DocUIController extends Disposable {
                 AlignJustifyMenuItemFactory,
                 OrderListMenuItemFactory,
                 BulletListMenuItemFactory,
+                ResetBackgroundColorMenuItemFactory,
+                BackgroundColorSelectorMenuItemFactory,
             ] as IMenuItemFactory[]
         ).forEach((factory) => {
             this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(factory)));

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

@@ -31,6 +31,7 @@ import {
     AlignRightCommand,
     BulletListCommand,
     OrderListCommand,
+    ResetInlineFormatTextBackgroundColorCommand,
     SetInlineFormatBoldCommand,
     SetInlineFormatCommand,
     SetInlineFormatFontFamilyCommand,
@@ -39,6 +40,7 @@ import {
     SetInlineFormatStrikethroughCommand,
     SetInlineFormatSubscriptCommand,
     SetInlineFormatSuperscriptCommand,
+    SetInlineFormatTextBackgroundColorCommand,
     SetInlineFormatTextColorCommand,
     SetInlineFormatUnderlineCommand,
     SetTextSelectionsOperation,
@@ -564,6 +566,51 @@ export function BulletListMenuItemFactory(accessor: IAccessor): IMenuButtonItem
     };
 }
 
+export function ResetBackgroundColorMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
+    return {
+        id: ResetInlineFormatTextBackgroundColorCommand.id,
+        type: MenuItemType.BUTTON,
+        title: 'toolbar.resetColor',
+        icon: 'NoColor',
+        positions: SetInlineFormatTextBackgroundColorCommand.id,
+    };
+}
+
+export function BackgroundColorSelectorMenuItemFactory(accessor: IAccessor): IMenuSelectorItem<string> {
+    const commandService = accessor.get(ICommandService);
+    const themeService = accessor.get(ThemeService);
+
+    return {
+        id: SetInlineFormatTextBackgroundColorCommand.id,
+        tooltip: 'toolbar.fillColor.main',
+        group: MenuGroup.TOOLBAR_FORMAT,
+        type: MenuItemType.BUTTON_SELECTOR,
+        positions: [MenuPosition.TOOLBAR_START],
+        icon: 'PaintBucket',
+        selections: [
+            {
+                label: {
+                    name: COLOR_PICKER_COMPONENT,
+                    hoverable: false,
+                },
+            },
+        ],
+        value$: new Observable<string>((subscriber) => {
+            const defaultColor = themeService.getCurrentTheme().primaryColor;
+            const disposable = commandService.onCommandExecuted((c) => {
+                if (c.id === SetInlineFormatTextBackgroundColorCommand.id) {
+                    const color = (c.params as { value: string }).value;
+                    subscriber.next(color ?? defaultColor);
+                }
+            });
+
+            subscriber.next(defaultColor);
+            return disposable.dispose;
+        }),
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.DOC),
+    };
+}
+
 function getFontStyleAtCursor(accessor: IAccessor) {
     const currentUniverService = accessor.get(IUniverInstanceService);
     const textSelectionService = accessor.get(TextSelectionManagerService);

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

@@ -32,6 +32,10 @@ const locale: typeof zhCN = {
             main: 'Text color',
             right: 'Choose color',
         },
+        fillColor: {
+            main: 'Text Background color',
+            right: 'Choose color',
+        },
         resetColor: 'Reset',
         order: 'Ordered list',
         unorder: 'Unordered list',

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

@@ -30,6 +30,10 @@ const locale = {
             main: '文本颜色',
             right: '颜色选择',
         },
+        fillColor: {
+            main: '文本背景色',
+            right: '背景色选择',
+        },
         resetColor: '重置颜色',
         order: '有序列表',
         unorder: '无序列表',

packages/docs/src/commands/commands/inline-format.command.ts

@@ -212,6 +212,40 @@ export const SetInlineFormatTextColorCommand: ICommand = {
     },
 };
 
+const SetInlineFormatTextBackgroundColorCommandId = 'doc.command.set-inline-format-text-background-color';
+export const SetInlineFormatTextBackgroundColorCommand: ICommand = {
+    id: SetInlineFormatTextBackgroundColorCommandId,
+    type: CommandType.COMMAND,
+    handler: async (accessor, params) => {
+        const commandService = accessor.get(ICommandService);
+        const textSelectionManagerService = accessor.get(TextSelectionManagerService);
+
+        return handleInlineFormat(
+            SetInlineFormatTextBackgroundColorCommandId,
+            params,
+            textSelectionManagerService,
+            commandService
+        );
+    },
+};
+
+const ResetInlineFormatTextBackgroundColorCommandId = 'doc.command.reset-inline-format-text-background-color';
+export const ResetInlineFormatTextBackgroundColorCommand: ICommand = {
+    id: ResetInlineFormatTextBackgroundColorCommandId,
+    type: CommandType.COMMAND,
+    handler: async (accessor, params) => {
+        const commandService = accessor.get(ICommandService);
+        const textSelectionManagerService = accessor.get(TextSelectionManagerService);
+
+        return handleInlineFormat(
+            ResetInlineFormatTextBackgroundColorCommandId,
+            params,
+            textSelectionManagerService,
+            commandService
+        );
+    },
+};
+
 const COMMAND_ID_TO_FORMAT_KEY_MAP: Record<string, keyof IStyleBase> = {
     [SetInlineFormatBoldCommand.id]: 'bl',
     [SetInlineFormatItalicCommand.id]: 'it',
@@ -220,6 +254,8 @@ const COMMAND_ID_TO_FORMAT_KEY_MAP: Record<string, keyof IStyleBase> = {
     [SetInlineFormatFontSizeCommand.id]: 'fs',
     [SetInlineFormatFontFamilyCommand.id]: 'ff',
     [SetInlineFormatTextColorCommand.id]: 'cl',
+    [SetInlineFormatTextBackgroundColorCommand.id]: 'bg',
+    [ResetInlineFormatTextBackgroundColorCommand.id]: 'bg',
     [SetInlineFormatSubscriptCommand.id]: 'va',
     [SetInlineFormatSuperscriptCommand.id]: 'va',
 };
@@ -273,13 +309,21 @@ export const SetInlineFormatCommand: ICommand<ISetInlineFormatCommandParams> = {
                 break;
             }
 
-            case SetInlineFormatTextColorCommand.id: {
+            case SetInlineFormatTextColorCommand.id:
+            case SetInlineFormatTextBackgroundColorCommand.id: {
                 formatValue = {
                     rgb: value,
                 };
                 break;
             }
 
+            case ResetInlineFormatTextBackgroundColorCommand.id: {
+                formatValue = {
+                    rgb: null,
+                };
+                break;
+            }
+
             default: {
                 throw new Error(`Unknown command: ${preCommandId} in handleInlineFormat`);
             }

packages/docs/src/doc-plugin.ts

@@ -28,6 +28,7 @@ import { DeleteCommand, InsertCommand, UpdateCommand } from './commands/commands
 import { DeleteLeftCommand, DeleteRightCommand, MergeTwoParagraphCommand } from './commands/commands/delete.command';
 import { IMEInputCommand } from './commands/commands/ime-input.command';
 import {
+    ResetInlineFormatTextBackgroundColorCommand,
     SetInlineFormatBoldCommand,
     SetInlineFormatCommand,
     SetInlineFormatFontFamilyCommand,
@@ -36,6 +37,7 @@ import {
     SetInlineFormatStrikethroughCommand,
     SetInlineFormatSubscriptCommand,
     SetInlineFormatSuperscriptCommand,
+    SetInlineFormatTextBackgroundColorCommand,
     SetInlineFormatTextColorCommand,
     SetInlineFormatUnderlineCommand,
 } from './commands/commands/inline-format.command';
@@ -103,6 +105,8 @@ export class UniverDocsPlugin extends Plugin {
                 SetInlineFormatFontSizeCommand,
                 SetInlineFormatFontFamilyCommand,
                 SetInlineFormatTextColorCommand,
+                ResetInlineFormatTextBackgroundColorCommand,
+                SetInlineFormatTextBackgroundColorCommand,
                 SetInlineFormatCommand,
                 BreakLineCommand,
                 InsertCommand,

packages/docs/src/index.ts

@@ -40,6 +40,8 @@ export {
     SetInlineFormatSuperscriptCommand,
     SetInlineFormatTextColorCommand,
     SetInlineFormatUnderlineCommand,
+    ResetInlineFormatTextBackgroundColorCommand,
+    SetInlineFormatTextBackgroundColorCommand,
 } from './commands/commands/inline-format.command';
 export { AlignOperationCommand, AlignLeftCommand, AlignCenterCommand, AlignRightCommand, AlignJustifyCommand } from './commands/commands/paragraph-align.command';
 export { BulletListCommand, OrderListCommand } from './commands/commands/list.command';