添加字体样式设置菜单

src/components/index.ts

@@ -14,6 +14,13 @@ import { MenuButton } from "./menus/MenuButton.ts";
 import { FontSizeIncrease } from "./menus/common/FontSizeIncrease.ts";
 import { FontSizeDecrease } from "./menus/common/FontSizeDecrease.ts";
 
+import { Bold } from "./menus/common/Bold.ts";
+import { Italic } from "./menus/common/Italic.ts";
+import { Underline } from "./menus/common/Underline.ts";
+import { Strike } from "./menus/common/Strike.ts";
+import { Subscript } from "./menus/common/Subscript.ts";
+import { Superscript } from "./menus/common/Superscript.ts";
+
 import { Undo } from "./menus/toolbar/base/Undo.ts";
 import { Redo } from "./menus/toolbar/base/Redo.ts";
 import { FormatPainter } from "./menus/toolbar/base/FormatPainter.ts";
@@ -36,6 +43,13 @@ defineCustomElement('uai-editor-menu-button', MenuButton);
 defineCustomElement('uai-editor-common-menu-font-size-increase', FontSizeIncrease);
 defineCustomElement('uai-editor-common-menu-font-size-decrease', FontSizeDecrease);
 
+defineCustomElement('uai-editor-common-menu-bold', Bold);
+defineCustomElement('uai-editor-common-menu-italic', Italic);
+defineCustomElement('uai-editor-common-menu-underline', Underline);
+defineCustomElement('uai-editor-common-menu-strike', Strike);
+defineCustomElement('uai-editor-common-menu-subscript', Subscript);
+defineCustomElement('uai-editor-common-menu-superscript', Superscript);
+
 defineCustomElement('uai-editor-base-menu-undo', Undo);
 defineCustomElement('uai-editor-base-menu-redo', Redo);
 defineCustomElement('uai-editor-base-menu-format-painter', FormatPainter);

src/components/menus/common/Bold.ts

@@ -0,0 +1,85 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/bold.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 公共菜单：粗体
+ */
+export class Bold extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.bold'),
+        tooltip: t('base.bold'),
+        shortcut: "Ctrl+B",
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.menuButton.onCreate(event, options);
+        this.appendChild(this.menuButton);
+
+        // 定义按钮点击事件，内容加粗、或者取消加粗
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().toggleBold().run();
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        if (this.menuButton.menuButton) {
+            // 先判断当前内容是否可以加粗，只有选中内容是文字，才可以执行加粗
+            var disable = event.editor.can().chain().toggleBold().run();
+            // 如果选定内容不可以加粗，则禁用当前按钮
+            this.onEditableChange(disable);
+
+            if (this.menuButtonOptions.enable) {
+                // 如果所选内容是加粗的，功能按钮成激活状态，否则是非激活状态
+                var active = event.editor.isActive('bold');
+                if (active) {
+                    this.menuButton.menuButton.classList.add("active");
+                } else {
+                    this.menuButton.menuButton.classList.remove("active");
+                }
+            }
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/common/Italic.ts

@@ -0,0 +1,85 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/italic.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 公共菜单：斜体
+ */
+export class Italic extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.italic'),
+        tooltip: t('base.italic'),
+        shortcut: "Ctrl+I",
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.menuButton.onCreate(event, options);
+        this.appendChild(this.menuButton);
+
+        // 定义按钮点击事件，内容加斜、或者取消加斜
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().toggleItalic().run();
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        if (this.menuButton.menuButton) {
+            // 先判断当前内容是否可以加斜，只有选中内容是文字，才可以执行加斜
+            var disable = event.editor.can().chain().toggleItalic().run();
+            // 如果选定内容不可以加斜，则禁用当前按钮
+            this.onEditableChange(disable);
+
+            if (this.menuButtonOptions.enable) {
+                // 如果所选内容是加斜的，功能按钮成激活状态，否则是非激活状态
+                var active = event.editor.isActive('italic');
+                if (active) {
+                    this.menuButton.menuButton.classList.add("active");
+                } else {
+                    this.menuButton.menuButton.classList.remove("active");
+                }
+            }
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/common/Strike.ts

@@ -0,0 +1,85 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/strike.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 公共菜单：删除线
+ */
+export class Strike extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.strike'),
+        tooltip: t('base.strike'),
+        shortcut: "Ctrl+Shift+S",
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.menuButton.onCreate(event, options);
+        this.appendChild(this.menuButton);
+
+        // 定义按钮点击事件，内容添加删除线、或者取消删除线
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().toggleStrike().run();
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        if (this.menuButton.menuButton) {
+            // 先判断当前内容是否可以加删除线，只有选中内容是文字，才可以执行加删除线
+            var disable = event.editor.can().chain().toggleStrike().run();
+            // 如果选定内容不可以加删除线，则禁用当前按钮
+            this.onEditableChange(disable);
+
+            if (this.menuButtonOptions.enable) {
+                // 如果所选内容是加删除线的，功能按钮成激活状态，否则是非激活状态
+                var active = event.editor.isActive('strike');
+                if (active) {
+                    this.menuButton.menuButton.classList.add("active");
+                } else {
+                    this.menuButton.menuButton.classList.remove("active");
+                }
+            }
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/common/Subscript.ts

@@ -0,0 +1,85 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/subscript.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 公共菜单：设置下标
+ */
+export class Subscript extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.subscript'),
+        tooltip: t('base.subscript'),
+        shortcut: "Ctrl+,",
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.menuButton.onCreate(event, options);
+        this.appendChild(this.menuButton);
+
+        // 定义按钮点击事件，设置内容为下标、或者取消下标
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().toggleSubscript().run();
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        if (this.menuButton.menuButton) {
+            // 先判断当前内容是否可以设置下标格式，只有选中内容是文字，才可以执行设置下标格式
+            var disable = event.editor.can().chain().toggleSubscript().run();
+            // 如果选定内容不可以设置下标格式，则禁用当前按钮
+            this.onEditableChange(disable);
+
+            if (this.menuButtonOptions.enable) {
+                // 如果所选内容是下标格式，功能按钮成激活状态，否则是非激活状态
+                var active = event.editor.isActive('subscript');
+                if (active) {
+                    this.menuButton.menuButton.classList.add("active");
+                } else {
+                    this.menuButton.menuButton.classList.remove("active");
+                }
+            }
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/common/Superscript.ts

@@ -0,0 +1,85 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/superscript.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 公共菜单：设置上标
+ */
+export class Superscript extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.superscript'),
+        tooltip: t('base.superscript'),
+        shortcut: "Ctrl+.",
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.menuButton.onCreate(event, options);
+        this.appendChild(this.menuButton);
+
+        // 定义按钮点击事件，设置内容为上标、或者取消上标
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().toggleSuperscript().run();
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        if (this.menuButton.menuButton) {
+            // 先判断当前内容是否可以设置上标格式，只有选中内容是文字，才可以执行设置上标格式
+            var disable = event.editor.can().chain().toggleSuperscript().run();
+            // 如果选定内容不可以设置上标格式，则禁用当前按钮
+            this.onEditableChange(disable);
+
+            if (this.menuButtonOptions.enable) {
+                // 如果所选内容是上标格式，功能按钮成激活状态，否则是非激活状态
+                var active = event.editor.isActive('superscript');
+                if (active) {
+                    this.menuButton.menuButton.classList.add("active");
+                } else {
+                    this.menuButton.menuButton.classList.remove("active");
+                }
+            }
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/common/Underline.ts

@@ -0,0 +1,85 @@
+// Copyright (c) 2024-present AI-Labs
+
+// @ ts-nocheck
+import { MenuButton, MenuButtonOptions } from "../MenuButton.ts";
+import icon from "../../../assets/icons/underline.svg";
+import { t } from "i18next";
+import { UAIEditorEventListener, UAIEditorOptions } from "../../../core/UAIEditor.ts";
+import { EditorEvents } from "@tiptap/core";
+
+/**
+ * 公共菜单：添加下划线
+ */
+export class Underline extends HTMLElement implements UAIEditorEventListener {
+    // 按钮选项
+    menuButtonOptions: MenuButtonOptions = {
+        menuType: "button",
+        enable: true,
+        icon: icon,
+        hideText: true,
+        text: t('base.underline'),
+        tooltip: t('base.underline'),
+        shortcut: "Ctrl+U",
+    }
+
+    // 功能按钮
+    menuButton: MenuButton;
+
+    constructor(options: MenuButtonOptions) {
+        super();
+
+        // 初始化功能按钮选项
+        this.menuButtonOptions = { ...this.menuButtonOptions, ...options };
+
+        // 创建功能按钮
+        this.menuButton = new MenuButton(this.menuButtonOptions);
+    }
+
+    /**
+     * 定义创建方法
+     * @param event 
+     * @param options 
+     */
+    onCreate(event: EditorEvents["create"], options: UAIEditorOptions) {
+        this.menuButton.onCreate(event, options);
+        this.appendChild(this.menuButton);
+
+        // 定义按钮点击事件，设置内容添加下划线、或者取消下划线
+        this.addEventListener("click", () => {
+            if (this.menuButtonOptions.enable) {
+                event.editor.chain().focus().toggleUnderline().run();
+            }
+        })
+    }
+
+    /**
+     * 定义Transaction监听方法
+     * @param event 
+     * @param options 
+     */
+    onTransaction(event: EditorEvents["transaction"], options: UAIEditorOptions) {
+        this.menuButton.onTransaction(event, options);
+        if (this.menuButton.menuButton) {
+            // 先判断当前内容是否可以设置下划线，只有选中内容是文字，才可以执行设置下划线
+            var disable = event.editor.can().chain().toggleUnderline().run();
+            // 如果选定内容不可以设置下划线，则禁用当前按钮
+            this.onEditableChange(disable);
+
+            if (this.menuButtonOptions.enable) {
+                // 如果所选内容有下划线，功能按钮成激活状态，否则是非激活状态
+                var active = event.editor.isActive('underline');
+                if (active) {
+                    this.menuButton.menuButton.classList.add("active");
+                } else {
+                    this.menuButton.menuButton.classList.remove("active");
+                }
+            }
+        }
+    }
+
+    onEditableChange(editable: boolean) {
+        this.menuButtonOptions.enable = editable;
+        this.menuButton.onEditableChange(editable);
+    }
+}
+

src/components/menus/toolbar/Classic.ts

@@ -10,6 +10,13 @@ import { ScrollableDiv } from "./ScrollableDiv";
 import { FontSizeIncrease } from "../common/FontSizeIncrease.ts";
 import { FontSizeDecrease } from "../common/FontSizeDecrease.ts";
 
+import { Bold } from "../common/Bold.ts";
+import { Italic } from "../common/Italic.ts";
+import { Underline } from "../common/Underline.ts";
+import { Strike } from "../common/Strike.ts";
+import { Subscript } from "../common/Subscript.ts";
+import { Superscript } from "../common/Superscript.ts";
+
 import { Redo } from "./base/Redo";
 import { Undo } from "./base/Undo";
 import { FormatPainter } from "./base/FormatPainter";
@@ -44,6 +51,13 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
     baseMenuFontSizeIncrease!: FontSizeIncrease;
     baseMenuFontSizeDecrease!: FontSizeDecrease;
 
+    baseMenuBold!: Bold;
+    baseMenuItalic!: Italic;
+    baseMenuUnderline!: Underline;
+    baseMenuStrike!: Strike;
+    baseMenuSubscript!: Subscript;
+    baseMenuSuperscript!: Superscript;
+
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
         this.defaultToolbarMenus = defaultToolbarMenus;
@@ -141,6 +155,24 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
 
         this.baseMenuFontSizeDecrease = new FontSizeDecrease({ menuType: "button", enable: true });
         this.eventComponents.push(this.baseMenuFontSizeDecrease);
+
+        this.baseMenuBold = new Bold({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuBold);
+
+        this.baseMenuItalic = new Italic({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuItalic);
+
+        this.baseMenuUnderline = new Underline({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuUnderline);
+
+        this.baseMenuStrike = new Strike({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuStrike);
+
+        this.baseMenuSubscript = new Subscript({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuSubscript);
+
+        this.baseMenuSuperscript = new Superscript({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuSuperscript);
     }
     /**
      * 创建基础菜单
@@ -170,5 +202,11 @@ export class Classic extends HTMLElement implements UAIEditorEventListener {
         group2.appendChild(this.baseMenuFontSize);
         group2.appendChild(this.baseMenuFontSizeIncrease);
         group2.appendChild(this.baseMenuFontSizeDecrease);
+        group2.appendChild(this.baseMenuBold);
+        group2.appendChild(this.baseMenuItalic);
+        group2.appendChild(this.baseMenuUnderline);
+        group2.appendChild(this.baseMenuStrike);
+        group2.appendChild(this.baseMenuSubscript);
+        group2.appendChild(this.baseMenuSuperscript);
     }
 }

src/components/menus/toolbar/Ribbon.ts

@@ -10,6 +10,13 @@ import { ScrollableDiv } from "./ScrollableDiv";
 import { FontSizeIncrease } from "../common/FontSizeIncrease.ts";
 import { FontSizeDecrease } from "../common/FontSizeDecrease.ts";
 
+import { Bold } from "../common/Bold.ts";
+import { Italic } from "../common/Italic.ts";
+import { Underline } from "../common/Underline.ts";
+import { Strike } from "../common/Strike.ts";
+import { Subscript } from "../common/Subscript.ts";
+import { Superscript } from "../common/Superscript.ts";
+
 import { Redo } from "./base/Redo";
 import { Undo } from "./base/Undo";
 
@@ -46,6 +53,13 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
     baseMenuFontSizeIncrease!: FontSizeIncrease;
     baseMenuFontSizeDecrease!: FontSizeDecrease;
 
+    baseMenuBold!: Bold;
+    baseMenuItalic!: Italic;
+    baseMenuUnderline!: Underline;
+    baseMenuStrike!: Strike;
+    baseMenuSubscript!: Subscript;
+    baseMenuSuperscript!: Superscript;
+
     constructor(defaultToolbarMenus: Record<string, any>[]) {
         super();
         this.defaultToolbarMenus = defaultToolbarMenus;
@@ -163,6 +177,24 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
 
         this.baseMenuFontSizeDecrease = new FontSizeDecrease({ menuType: "button", enable: true });
         this.eventComponents.push(this.baseMenuFontSizeDecrease);
+
+        this.baseMenuBold = new Bold({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuBold);
+
+        this.baseMenuItalic = new Italic({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuItalic);
+
+        this.baseMenuUnderline = new Underline({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuUnderline);
+
+        this.baseMenuStrike = new Strike({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuStrike);
+
+        this.baseMenuSubscript = new Subscript({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuSubscript);
+
+        this.baseMenuSuperscript = new Superscript({ menuType: "button", enable: true });
+        this.eventComponents.push(this.baseMenuSuperscript);
     }
 
     /**
@@ -206,5 +238,14 @@ export class Ribbon extends HTMLElement implements UAIEditorEventListener {
         group2row1.appendChild(this.baseMenuFontSizeIncrease);
         group2row1.appendChild(this.baseMenuFontSizeDecrease);
 
+        const group2row2 = document.createElement("div");
+        group2row2.classList.add("uai-ribbon-virtual-group-row");
+        group2.appendChild(group2row2);
+        group2row2.appendChild(this.baseMenuBold);
+        group2row2.appendChild(this.baseMenuItalic);
+        group2row2.appendChild(this.baseMenuUnderline);
+        group2row2.appendChild(this.baseMenuStrike);
+        group2row2.appendChild(this.baseMenuSubscript);
+        group2row2.appendChild(this.baseMenuSuperscript);
     }
 }