@univerjs/docs-ui 0.2.11 → 0.2.12

package/lib/es/index.js

@@ -2,15 +2,16 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, FOCUSING_COMMON_DRAWINGS, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, Tools, LRUMap, BaselineOffset, BooleanNumber, ColorKit, DataStreamTreeTokenType, CustomRangeType, skipParseTagNames, DataStreamTreeNodeType, createIdentifier, Inject, IUniverInstanceService, ILogService, ICommandService, Disposable, SliceBodyType, UniverInstanceType, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, normalizeBody, toDisposable, getBodySlice, RxDisposable, Direction, EDITOR_ACTIVATED, LocaleService, Injector, Optional, useDependency, DocumentFlavor, CommandType, JSONX, useObservable, PresetListType, ThemeService, HorizontalAlign, MemoryCursor, TextX, TextXActionType, UpdateDocsAttributeType, generateRandomId, OnLifecycle, LifecycleStages, connectInjector, IContextService, checkForSubstrings, IConfigService, isInternalEditorID, DisposableCollection, DEFAULT_EMPTY_DOCUMENT_VALUE, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_ZEN_EDITOR_UNIT_ID_KEY, fromEventSubject, QuickListTypeMap, Plugin, mergeOverrideWithDependencies, ObjectRelativeFromH, ObjectRelativeFromV } from "@univerjs/core";
-import { IClipboardInterfaceService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, HTML_CLIPBOARD_MIME_TYPE, IEditorService, KeyCode, MetaKeys, ILayoutService, ComponentManager, ISidebarService, IConfirmService, MenuGroup, MenuItemType, MenuPosition, getMenuHiddenObservable, FONT_FAMILY_LIST, FONT_SIZE_LIST, getHeaderFooterMenuHiddenObservable, CopyCommand, CutCommand, PasteCommand, FontFamily, FontFamilyItem, FontSize, BuiltInUIPart, IMenuService, IUIPartsService, IShortcutService, SetEditorResizeOperation, ICanvasPopupService, IContextMenuService } from "@univerjs/ui";
-import { getEmptyTableCell, getEmptyTableRow, genTableSource, getTableColumn, TextSelectionManagerService, DocCustomRangeService, getCursorWhenDelete, CutContentCommand, InnerPasteCommand, getDeleteSelection, DocSkeletonManagerService, VIEWPORT_KEY, getDocObject, MoveCursorOperation, MoveSelectionOperation, SelectAllOperation, neoGetDocObject, RichTextEditingMutation, SetDocZoomRatioOperation, SetInlineFormatBoldCommand, SetInlineFormatItalicCommand, SetInlineFormatUnderlineCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, AlignLeftCommand, AlignRightCommand, AlignCenterCommand, AlignJustifyCommand, OrderListCommand, BulletListCommand, TabCommand, CreateDocTableCommand, SetTextSelectionsOperation, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatTextColorCommand, AlignOperationCommand, CheckListCommand, ResetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextBackgroundColorCommand, getCommandSkeleton, getParagraphsInRange, getParagraphsInRanges, serializeDocRange, getRichTextEditPath, DeleteLeftCommand, DocTableInsertRowAboveCommand, DocTableInsertRowBellowCommand, DocTableInsertColumnLeftCommand, DocTableInsertColumnRightCommand, DocTableDeleteRowsCommand, DocTableDeleteColumnsCommand, DocTableDeleteTableCommand, EnterCommand, DeleteRightCommand, CoverContentCommand, DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_COMPONENT_HEADER_LAYER_INDEX, DOCS_VIEW_KEY, DOCS_COMPONENT_DEFAULT_Z_INDEX, DOCS_COMPONENT_BACKGROUND_LAYER_INDEX, SetDocZoomRatioCommand, ChangeListNestingLevelCommand, ChangeListNestingLevelType, DocTableTabCommand, AfterSpaceCommand, QuickListCommand, ListOperationCommand, BreakLineCommand, DocAutoFormatService, ToggleCheckListCommand, DocInterceptorService } from "@univerjs/docs";
+import { FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, FOCUSING_COMMON_DRAWINGS, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, Tools, LRUMap, BaselineOffset, BooleanNumber, ColorKit, skipParseTagNames, DataStreamTreeTokenType, generateRandomId, CustomRangeType, DataStreamTreeNodeType, createIdentifier, Inject, IUniverInstanceService, ILogService, ICommandService, Disposable, SliceBodyType, UniverInstanceType, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, normalizeBody, toDisposable, getBodySlice, RxDisposable, Direction, EDITOR_ACTIVATED, LocaleService, Injector, IConfigService, Optional, useDependency, DocumentFlavor, CommandType, JSONX, useObservable, PresetListType, MemoryCursor, TextX, TextXActionType, UpdateDocsAttributeType, SpacingRule, HorizontalAlign, OnLifecycle, LifecycleStages, ThemeService, connectInjector, IContextService, checkForSubstrings, isInternalEditorID, DisposableCollection, DEFAULT_EMPTY_DOCUMENT_VALUE, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_ZEN_EDITOR_UNIT_ID_KEY, fromEventSubject, QuickListTypeMap, Plugin, mergeOverrideWithDependencies, ObjectRelativeFromH, ObjectRelativeFromV } from "@univerjs/core";
+import { IClipboardInterfaceService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, HTML_CLIPBOARD_MIME_TYPE, IEditorService, KeyCode, MetaKeys, ILayoutService, ComponentManager, ISidebarService, IConfirmService, CopyCommand, CutCommand, PasteCommand, MenuItemType, getMenuHiddenObservable, FONT_FAMILY_LIST, FONT_SIZE_LIST, getHeaderFooterMenuHiddenObservable, RibbonStartGroup, ContextMenuPosition, ContextMenuGroup, FontFamily, FontFamilyItem, FontSize, BuiltInUIPart, IMenuManagerService, IUIPartsService, IShortcutService, SetEditorResizeOperation, ICanvasPopupService, IContextMenuService } from "@univerjs/ui";
+import { getEmptyTableCell, getEmptyTableRow, genTableSource, getTableColumn, TextSelectionManagerService, getCursorWhenDelete, CutContentCommand, copyCustomRange, InnerPasteCommand, getDeleteSelection, DocSkeletonManagerService, VIEWPORT_KEY, getDocObject, MoveCursorOperation, MoveSelectionOperation, SelectAllOperation, neoGetDocObject, RichTextEditingMutation, SetDocZoomRatioOperation, SetInlineFormatBoldCommand, SetInlineFormatItalicCommand, SetInlineFormatUnderlineCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, AlignLeftCommand, AlignRightCommand, AlignCenterCommand, AlignJustifyCommand, OrderListCommand, BulletListCommand, TabCommand, CreateDocTableCommand, getParagraphsInRanges, serializeDocRange, getRichTextEditPath, SetTextSelectionsOperation, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatTextColorCommand, AlignOperationCommand, CheckListCommand, ResetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextBackgroundColorCommand, getCommandSkeleton, getParagraphsInRange, DeleteLeftCommand, DocTableInsertRowAboveCommand, DocTableInsertRowBellowCommand, DocTableInsertColumnLeftCommand, DocTableInsertColumnRightCommand, DocTableDeleteRowsCommand, DocTableDeleteColumnsCommand, DocTableDeleteTableCommand, EnterCommand, DeleteRightCommand, CoverContentCommand, DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_COMPONENT_HEADER_LAYER_INDEX, DOCS_VIEW_KEY, DOCS_COMPONENT_DEFAULT_Z_INDEX, DOCS_COMPONENT_BACKGROUND_LAYER_INDEX, SetDocZoomRatioCommand, ChangeListNestingLevelCommand, ChangeListNestingLevelType, DocTableTabCommand, AfterSpaceCommand, QuickListCommand, ListOperationCommand, BreakLineCommand, DocAutoFormatService, ToggleCheckListCommand, DocInterceptorService } from "@univerjs/docs";
 import { pixelToPt, ptToPixel, parseDataStreamToTree, DOC_RANGE_TYPE, NodePositionConvertToCursor, getAnchorBounding, IRenderManagerService, ITextSelectionRenderManager, Shape, DocumentEditArea, PageLayoutType, Vector2, Rect, Path, getNumberUnitValue, ScrollBar, Viewport, Layer, Documents, DocBackground, CURSOR_TYPE, pxToNum, getLineBounding, TRANSFORM_CHANGE_OBSERVABLE_TYPE, isInSameTableCell } from "@univerjs/engine-render";
-import { takeUntil, Observable, combineLatest, map, fromEvent, BehaviorSubject, filter, throttleTime, animationFrameScheduler, Subject, distinctUntilChanged, mergeMap, take } from "rxjs";
+import { takeUntil, BehaviorSubject, Observable, combineLatest, map as map$1, fromEvent, filter as filter$1, throttleTime, animationFrameScheduler, Subject, distinctUntilChanged, mergeMap, take } from "rxjs";
 import * as require$$0 from "react";
 import require$$0__default, { forwardRef, useRef, createElement, useState, useEffect, useMemo, useCallback } from "react";
-import { Checkbox, InputNumber, Button, Slider, Tooltip, ColorPicker } from "@univerjs/design";
+import { Checkbox, InputNumber, Button, Slider, Tooltip, Select, ColorPicker } from "@univerjs/design";
 import clsx from "clsx";
+import { filter, bufferTime, map } from "rxjs/operators";
 function whenDocAndEditorFocused(contextService) {
   return contextService.getContextValue(FOCUSING_DOC) && contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && !contextService.getContextValue(FOCUSING_COMMON_DRAWINGS);
 }
@@ -165,28 +166,14 @@ const DEFAULT_TABLE_WIDTH = 600, _HtmlToUDMService = class _HtmlToUDMService {
     return pastePlugin && (this._styleRules = [...pastePlugin.stylesRules], this._afterProcessRules = [...pastePlugin.afterProcessRules]), this._tableCache = [], this._styleCache.clear(), this._process(null, dom.childNodes, docData), this._styleCache.clear(), this._styleRules = [], this._afterProcessRules = [], docData;
   }
   _process(parent, nodes, doc) {
-    var _a22, _b, _c;
+    var _a22, _b;
     const body = doc.body;
     for (const node of nodes)
       if (node.nodeType === Node.TEXT_NODE) {
         if (((_a22 = node.nodeValue) == null ? void 0 : _a22.trim()) === "")
           continue;
-        let text = (_b = node.nodeValue) == null ? void 0 : _b.replace(/[\r\n]/g, ""), style;
-        if (parent && parent.nodeType === Node.ELEMENT_NODE && parent.tagName.toUpperCase() === "A") {
-          const id = Tools.generateRandomId();
-          text = `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${text}${DataStreamTreeTokenType.CUSTOM_RANGE_END}`, body.customRanges = [
-            ...(_c = body.customRanges) != null ? _c : [],
-            {
-              startIndex: body.dataStream.length,
-              endIndex: body.dataStream.length + text.length - 1,
-              rangeId: id,
-              rangeType: CustomRangeType.HYPERLINK
-            }
-          ], body.payloads = {
-            ...body.payloads,
-            [id]: parent.href
-          };
-        }
+        const text = (_b = node.nodeValue) == null ? void 0 : _b.replace(/[\r\n]/g, "");
+        let style;
         parent && this._styleCache.has(parent) && (style = this._styleCache.get(parent)), body.dataStream += text, style && Object.getOwnPropertyNames(style).length && body.textRuns.push({
           st: body.dataStream.length - text.length,
           ed: body.dataStream.length,
@@ -196,14 +183,14 @@ const DEFAULT_TABLE_WIDTH = 600, _HtmlToUDMService = class _HtmlToUDMService {
         if (skipParseTagNames.includes(node.nodeName.toLowerCase()))
           continue;
         if (node.nodeType === Node.ELEMENT_NODE) {
-          const parentStyles = parent ? this._styleCache.get(parent) : {}, styleRule = this._styleRules.find(({ filter: filter2 }) => matchFilter(node, filter2)), nodeStyles = styleRule ? styleRule.getStyle(node) : extractNodeStyle(node);
+          const element2 = node, linkStart = this._processBeforeLink(element2, doc), parentStyles = parent ? this._styleCache.get(parent) : {}, styleRule = this._styleRules.find(({ filter: filter2 }) => matchFilter(node, filter2)), nodeStyles = styleRule ? styleRule.getStyle(node) : extractNodeStyle(node);
           this._styleCache.set(node, { ...parentStyles, ...nodeStyles });
           const { childNodes } = node;
           this._processBeforeTable(node, doc), this._process(node, childNodes, doc), this._processAfterTable(node, doc);
           const afterProcessRule = this._afterProcessRules.find(
             ({ filter: filter2 }) => matchFilter(node, filter2)
           );
-          afterProcessRule && afterProcessRule.handler(doc, node);
+          afterProcessRule && afterProcessRule.handler(doc, node), this._processAfterLink(element2, doc, linkStart);
         }
       }
   }
@@ -264,6 +251,21 @@ ${DataStreamTreeTokenType.TABLE_CELL_END}`;
       }
     }
   }
+  _processBeforeLink(node, doc) {
+    const body = doc.body, element2 = node, start = body.dataStream.length;
+    return element2.tagName.toUpperCase() === "A" && (body.dataStream += DataStreamTreeTokenType.CUSTOM_RANGE_START), start;
+  }
+  _processAfterLink(node, doc, start) {
+    var _a22, _b;
+    const body = doc.body, element2 = node;
+    element2.tagName.toUpperCase() === "A" && (body.dataStream += DataStreamTreeTokenType.CUSTOM_RANGE_END, body.customRanges = (_a22 = body.customRanges) != null ? _a22 : [], body.customRanges.push({
+      startIndex: start,
+      endIndex: body.dataStream.length - 1,
+      rangeId: (_b = element2.dataset.rangeid) != null ? _b : generateRandomId(),
+      rangeType: CustomRangeType.HYPERLINK,
+      properties: { url: element2.href }
+    }));
+  }
 };
 __name(_HtmlToUDMService, "HtmlToUDMService"), __publicField(_HtmlToUDMService, "_pluginList", []);
 let HtmlToUDMService = _HtmlToUDMService;
@@ -384,7 +386,7 @@ function covertTextRunToHtml(dataStream, textRun) {
   return it === BooleanNumber.TRUE && (html = `<i>${html}</i>`), va === BaselineOffset.SUPERSCRIPT ? html = `<sup>${html}</sup>` : va === BaselineOffset.SUBSCRIPT && (html = `<sub>${html}</sub>`), (ul == null ? void 0 : ul.s) === BooleanNumber.TRUE && (html = `<u>${html}</u>`), (st == null ? void 0 : st.s) === BooleanNumber.TRUE && (html = `<s>${html}</s>`), bl === BooleanNumber.TRUE && (html = `<strong>${html}</strong>`), ff && style.push(`font-family: ${ff}`), cl && style.push(`color: ${cl.rgb}`), fs && style.push(`font-size: ${fs}pt`), ol && style.push("text-decoration: overline"), bg && style.push(`background: ${bg.rgb}`), style.length ? `<span style="${style.join("; ")};">${html}</span>` : html;
 }
 __name(covertTextRunToHtml, "covertTextRunToHtml");
-function getBodySliceHtml(body, startIndex, endIndex) {
+function getBodyInlineSlice(body, startIndex, endIndex) {
   const { dataStream, textRuns = [] } = body;
   let cursorIndex = startIndex;
   const spanList = [];
@@ -401,6 +403,30 @@ function getBodySliceHtml(body, startIndex, endIndex) {
   }
   return cursorIndex !== endIndex && spanList.push(dataStream.slice(cursorIndex, endIndex)), spanList.join("");
 }
+__name(getBodyInlineSlice, "getBodyInlineSlice");
+function getBodySliceHtml(body, startIndex, endIndex) {
+  const { customRanges = [] } = body, customRangesInRange = customRanges.filter((range) => range.startIndex >= startIndex && range.endIndex <= endIndex);
+  let cursorIndex = startIndex, html = "";
+  customRangesInRange.forEach((range) => {
+    var _a22, _b;
+    const { startIndex: startIndex2, endIndex: endIndex2, rangeType, rangeId } = range, preHtml = getBodyInlineSlice(body, cursorIndex, startIndex2);
+    html += preHtml;
+    const sliceHtml = getBodyInlineSlice(body, startIndex2 + 1, endIndex2);
+    switch (rangeType) {
+      case CustomRangeType.HYPERLINK: {
+        html += `<a data-rangeid="${rangeId}" href="${(_b = (_a22 = range.properties) == null ? void 0 : _a22.url) != null ? _b : ""}">${sliceHtml}</a>`;
+        break;
+      }
+      default: {
+        html += sliceHtml;
+        break;
+      }
+    }
+    cursorIndex = endIndex2 + 1;
+  });
+  const endHtml = getBodyInlineSlice(body, cursorIndex, endIndex);
+  return html += endHtml, html;
+}
 __name(getBodySliceHtml, "getBodySliceHtml");
 function convertBodyToHtml(body) {
   const { paragraphs = [], sectionBreaks = [] } = body;
@@ -501,12 +527,12 @@ __name(getTableSlice, "getTableSlice");
 const IDocClipboardService = createIdentifier("doc.clipboard-service");
 var _a;
 let DocClipboardService = (_a = class extends Disposable {
-  constructor(_univerInstanceService, _logService, _commandService, _clipboardInterfaceService, _textSelectionManagerService, _docCustomRangeService) {
+  constructor(_univerInstanceService, _logService, _commandService, _clipboardInterfaceService, _textSelectionManagerService) {
     super();
     __publicField(this, "_clipboardHooks", []);
     __publicField(this, "_htmlToUDM", new HtmlToUDMService());
     __publicField(this, "_umdToHtml", new UDMToHtmlService());
-    this._univerInstanceService = _univerInstanceService, this._logService = _logService, this._commandService = _commandService, this._clipboardInterfaceService = _clipboardInterfaceService, this._textSelectionManagerService = _textSelectionManagerService, this._docCustomRangeService = _docCustomRangeService;
+    this._univerInstanceService = _univerInstanceService, this._logService = _logService, this._commandService = _commandService, this._clipboardInterfaceService = _clipboardInterfaceService, this._textSelectionManagerService = _textSelectionManagerService;
   }
   async copy(sliceType = SliceBodyType.copy) {
     var _a22;
@@ -578,12 +604,11 @@ let DocClipboardService = (_a = class extends Disposable {
     if (_body == null)
       return !1;
     let body = normalizeBody(_body);
-    const unitId = (_a22 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a22.getUnitId();
-    if (!unitId)
+    if (!((_a22 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a22.getUnitId()))
       return !1;
     this._clipboardHooks.forEach((hook) => {
       hook.onBeforePaste && (body = hook.onBeforePaste(body));
-    }), body.customRanges = (_b = body.customRanges) == null ? void 0 : _b.map((range) => this._docCustomRangeService.copyCustomRange(unitId, range));
+    }), body.customRanges = (_b = body.customRanges) == null ? void 0 : _b.map(copyCustomRange);
     const activeRange = this._textSelectionManagerService.getActiveTextRangeWithStyle(), { segmentId, endOffset: activeEndOffset, style } = activeRange || {}, ranges = this._textSelectionManagerService.getCurrentTextRanges();
     if (segmentId == null && this._logService.error("[DocClipboardController] segmentId does not exist!"), activeEndOffset == null || ranges == null)
       return !1;
@@ -643,7 +668,6 @@ let DocClipboardService = (_a = class extends Disposable {
       index > -1 && this._clipboardHooks.splice(index, 1);
     });
   }
-  // eslint-disable-next-line max-lines-per-function
   _getDocumentBodyInRanges(sliceType) {
     var _a22;
     const docDataModel = this._univerInstanceService.getCurrentUniverDocInstance(), allRanges = this._textSelectionManagerService.getDocRanges(), results = [];
@@ -664,19 +688,7 @@ let DocClipboardService = (_a = class extends Disposable {
           continue;
         }
         const deleteRange = getDeleteSelection({ startOffset, endOffset, collapsed }, body), docBody = docDataModel.getSelfOrHeaderFooterModel(segmentId).sliceBody(deleteRange.startOffset, deleteRange.endOffset, sliceType);
-        if (docBody != null) {
-          if (docBody.customRanges) {
-            const deleteRange2 = [];
-            docBody.customRanges.forEach((range2) => {
-              range2.startIndex === range2.endIndex && deleteRange2.push(range2);
-            }), docBody.customRanges = docBody.customRanges.filter((range2) => deleteRange2.indexOf(range2) === -1);
-            let text = "", cursor = 0;
-            deleteRange2.forEach((range2) => {
-              text += docBody.dataStream.slice(cursor, range2.endIndex), cursor = range2.endIndex + 1;
-            }), text += docBody.dataStream.slice(cursor, docBody.dataStream.length), docBody.dataStream = text;
-          }
-          results.push(docBody);
-        }
+        docBody != null && results.push(docBody);
       }
       return {
         bodyList: results,
@@ -699,16 +711,15 @@ let DocClipboardService = (_a = class extends Disposable {
   _generateBody(text) {
     const dataStream = text.replace(/\n/g, "\r");
     if (!text.includes("\r") && Tools.isLegalUrl(text)) {
-      const id = Tools.generateRandomId(), docDataModel = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), urlText = `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${dataStream}${DataStreamTreeTokenType.CUSTOM_RANGE_END}`, range = this._docCustomRangeService.copyCustomRange(
-        docDataModel.getUnitId(),
-        {
-          startIndex: 0,
-          endIndex: urlText.length - 1,
-          rangeId: id,
-          rangeType: CustomRangeType.HYPERLINK,
-          data: text
+      const id = generateRandomId(), urlText = `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${dataStream}${DataStreamTreeTokenType.CUSTOM_RANGE_END}`, range = {
+        startIndex: 0,
+        endIndex: urlText.length - 1,
+        rangeId: id,
+        rangeType: CustomRangeType.HYPERLINK,
+        properties: {
+          url: text
         }
-      );
+      };
       return {
         dataStream: urlText,
         customRanges: [range]
@@ -742,8 +753,7 @@ DocClipboardService = __decorateClass$k([
   __decorateParam$k(1, ILogService),
   __decorateParam$k(2, ICommandService),
   __decorateParam$k(3, IClipboardInterfaceService),
-  __decorateParam$k(4, Inject(TextSelectionManagerService)),
-  __decorateParam$k(5, Inject(DocCustomRangeService))
+  __decorateParam$k(4, Inject(TextSelectionManagerService))
 ], DocClipboardService);
 var __defProp$j = Object.defineProperty, __getOwnPropDesc$j = Object.getOwnPropertyDescriptor, __decorateClass$j = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
@@ -851,11 +861,6 @@ const DefaultToolbarConfig = {
   frozenContent: !1,
   infoBar: !0,
   toolbar: !0
-}, DefaultDocUiConfig = {
-  layout: {
-    docContainerConfig: DefaultDocContainerConfig,
-    toolbarConfig: DefaultToolbarConfig
-  }
 }, DOC_UI_PLUGIN_NAME = "DocUI", MoveCursorUpShortcut = {
   id: MoveCursorOperation.id,
   binding: KeyCode.ARROW_UP,
@@ -916,6 +921,11 @@ const DefaultToolbarConfig = {
   id: SelectAllOperation.id,
   binding: KeyCode.A | MetaKeys.CTRL_COMMAND,
   preconditions: /* @__PURE__ */ __name((contextService) => contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && (contextService.getContextValue(FOCUSING_DOC) || contextService.getContextValue(EDITOR_ACTIVATED)), "preconditions")
+}, PLUGIN_CONFIG_KEY = "docs-ui.config", defaultPluginConfig = {
+  layout: {
+    docContainerConfig: DefaultDocContainerConfig,
+    toolbarConfig: DefaultToolbarConfig
+  }
 };
 var __defProp$i = Object.defineProperty, __getOwnPropDesc$i = Object.getOwnPropertyDescriptor, __decorateClass$i = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
@@ -923,7 +933,7 @@ var __defProp$i = Object.defineProperty, __getOwnPropDesc$i = Object.getOwnPrope
   return kind && result && __defProp$i(target, key, result), result;
 }, "__decorateClass$i"), __decorateParam$i = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$i"), _a3;
 let DocContainerUIController = (_a3 = class {
-  constructor(_config, _localeService, _injector) {
+  constructor(_localeService, _injector, _configService) {
     __publicField(this, "_docContainer");
     // 获取SheetContainer组件
     __publicField(this, "getComponent", /* @__PURE__ */ __name((ref) => {
@@ -940,12 +950,12 @@ let DocContainerUIController = (_a3 = class {
     __publicField(this, "changeLocale", /* @__PURE__ */ __name((locale) => {
       this._localeService.setLocale(locale);
     }, "changeLocale"));
-    this._config = _config, this._localeService = _localeService, this._injector = _injector;
+    this._localeService = _localeService, this._injector = _injector, this._configService = _configService;
   }
   getUIConfig() {
     return {
       injector: this._injector,
-      config: this._config,
+      config: this._configService.getConfig(PLUGIN_CONFIG_KEY),
       changeLocale: this.changeLocale,
       getComponent: this.getComponent
     };
@@ -962,8 +972,9 @@ let DocContainerUIController = (_a3 = class {
   }
 }, __name(_a3, "DocContainerUIController"), _a3);
 DocContainerUIController = __decorateClass$i([
-  __decorateParam$i(1, Inject(LocaleService)),
-  __decorateParam$i(2, Inject(Injector))
+  __decorateParam$i(0, Inject(LocaleService)),
+  __decorateParam$i(1, Inject(Injector)),
+  __decorateParam$i(2, IConfigService)
 ], DocContainerUIController);
 var __defProp$h = Object.defineProperty, __getOwnPropDesc$h = Object.getOwnPropertyDescriptor, __decorateClass$h = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
@@ -971,20 +982,10 @@ var __defProp$h = Object.defineProperty, __getOwnPropDesc$h = Object.getOwnPrope
   return kind && result && __defProp$h(target, key, result), result;
 }, "__decorateClass$h"), __decorateParam$h = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$h"), _a4;
 let AppUIController = (_a4 = class extends RxDisposable {
-  constructor(_config, _localeService, _injector, _textSelectionRenderManager, _layoutService) {
+  constructor(_injector, _textSelectionRenderManager, _layoutService) {
     super();
     __publicField(this, "_docContainerController");
-    /**
-     * Change language
-     * @param {string} locale new language
-     *
-     * e: {target: HTMLSelectElement } reference from  https://stackoverflow.com/a/48443771
-     *
-     */
-    __publicField(this, "changeLocale", /* @__PURE__ */ __name((locale) => {
-      this._localeService.setLocale(locale);
-    }, "changeLocale"));
-    this._localeService = _localeService, this._injector = _injector, this._textSelectionRenderManager = _textSelectionRenderManager, this._layoutService = _layoutService, this._docContainerController = this._injector.createInstance(DocContainerUIController, _config), this._registerContainer();
+    this._injector = _injector, this._textSelectionRenderManager = _textSelectionRenderManager, this._layoutService = _layoutService, this._docContainerController = this._injector.createInstance(DocContainerUIController), this._registerContainer();
   }
   _registerContainer() {
     this._layoutService && this.disposeWithMe(
@@ -992,15 +993,11 @@ let AppUIController = (_a4 = class extends RxDisposable {
       this._layoutService.registerContainerElement(this._textSelectionRenderManager.__getEditorContainer())
     );
   }
-  getDocContainerController() {
-    return this._docContainerController;
-  }
 }, __name(_a4, "AppUIController"), _a4);
 AppUIController = __decorateClass$h([
-  __decorateParam$h(1, Inject(LocaleService)),
-  __decorateParam$h(2, Inject(Injector)),
-  __decorateParam$h(3, ITextSelectionRenderManager),
-  __decorateParam$h(4, Optional(ILayoutService))
+  __decorateParam$h(0, Inject(Injector)),
+  __decorateParam$h(1, ITextSelectionRenderManager),
+  __decorateParam$h(2, Optional(ILayoutService))
 ], AppUIController);
 var __assign = function() {
   return __assign = Object.assign || function(t) {
@@ -1870,253 +1867,495 @@ const docFooterContainer = "univer-doc-footer-container", styles$3 = {
     }), !0;
   }, "handler")
 };
-function getInsertTableHiddenObservable(accessor) {
-  const univerInstanceService = accessor.get(IUniverInstanceService), renderManagerService = accessor.get(IRenderManagerService);
-  return new Observable((subscriber) => {
-    const subscription = univerInstanceService.focused$.subscribe((unitId) => {
-      if (unitId == null || univerInstanceService.getUnitType(unitId) !== UniverInstanceType.UNIVER_DOC)
-        return subscriber.next(!0);
-      const currentRender2 = renderManagerService.getRenderById(unitId);
-      if (currentRender2 == null)
-        return subscriber.next(!0);
-      currentRender2.with(DocSkeletonManagerService).getViewModel().editAreaChange$.subscribe((editArea) => {
-        subscriber.next(editArea === DocumentEditArea.HEADER || editArea === DocumentEditArea.FOOTER);
-      });
-    }), currentRender = renderManagerService.getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC);
-    if (currentRender == null)
-      return subscriber.next(!0);
-    const viewModel = currentRender.with(DocSkeletonManagerService).getViewModel();
-    return subscriber.next(viewModel.getEditArea() !== DocumentEditArea.BODY), () => subscription.unsubscribe();
-  });
+function whenDocOrEditor(contextService) {
+  return contextService.getContextValue(FOCUSING_DOC) || contextService.getContextValue(EDITOR_ACTIVATED);
 }
-__name(getInsertTableHiddenObservable, "getInsertTableHiddenObservable");
-function getTableDisabledObservable(accessor) {
-  const textSelectionManagerService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService);
-  return new Observable((subscriber) => {
-    const subscription = textSelectionManagerService.textSelection$.subscribe((selection) => {
-      if (selection == null) {
-        subscriber.next(!0);
-        return;
-      }
-      const { textRanges } = selection;
-      if (textRanges.length !== 1) {
-        subscriber.next(!0);
-        return;
-      }
-      const textRange = textRanges[0], { collapsed, anchorNodePosition, startOffset } = textRange;
-      if (!collapsed || startOffset == null) {
-        subscriber.next(!0);
-        return;
-      }
-      const docDataModel = univerInstanceService.getCurrentUniverDocInstance();
-      if (docDataModel == null) {
-        subscriber.next(!0);
-        return;
-      }
-      const docSkeletonManagerService = getCommandSkeleton(accessor, docDataModel.getUnitId());
-      if (docSkeletonManagerService == null) {
-        subscriber.next(!0);
-        return;
-      }
-      if (docSkeletonManagerService.getViewModel().getCustomRangeRaw(startOffset)) {
-        subscriber.next(!0);
-        return;
-      }
-      if (anchorNodePosition != null) {
-        const { path } = anchorNodePosition;
-        if (path.indexOf("cells") !== -1) {
-          subscriber.next(!0);
-          return;
-        }
-      }
-      subscriber.next(!1);
-    });
-    return () => subscription.unsubscribe();
-  });
+__name(whenDocOrEditor, "whenDocOrEditor");
+function whenFocusEditor(contextService) {
+  return contextService.getContextValue(EDITOR_ACTIVATED);
 }
-__name(getTableDisabledObservable, "getTableDisabledObservable");
-function disableMenuWhenNoDocRange(accessor) {
-  const textSelectionManagerService = accessor.get(TextSelectionManagerService);
-  return new Observable((subscriber) => {
-    const subscription = textSelectionManagerService.textSelection$.subscribe((selection) => {
-      if (selection == null) {
-        subscriber.next(!0);
-        return;
-      }
-      const { textRanges, rectRanges } = selection;
-      if (textRanges.length === 0 && rectRanges.length === 0) {
-        subscriber.next(!0);
-        return;
+__name(whenFocusEditor, "whenFocusEditor");
+const DOC_CLIPBOARD_PRIORITY = 999, DocCopyCommand = {
+  id: CopyCommand.id,
+  name: "doc.command.copy",
+  type: CommandType.COMMAND,
+  multi: !0,
+  priority: DOC_CLIPBOARD_PRIORITY,
+  preconditions: whenDocOrEditor,
+  handler: /* @__PURE__ */ __name(async (accessor) => accessor.get(IDocClipboardService).copy(), "handler")
+}, DocCutCommand = {
+  id: CutCommand.id,
+  name: "doc.command.cut",
+  type: CommandType.COMMAND,
+  multi: !0,
+  priority: DOC_CLIPBOARD_PRIORITY,
+  preconditions: whenDocOrEditor,
+  handler: /* @__PURE__ */ __name(async (accessor) => accessor.get(IDocClipboardService).cut(), "handler")
+}, DocPasteCommand = {
+  id: PasteCommand.id,
+  name: "doc.command.paste",
+  type: CommandType.COMMAND,
+  multi: !0,
+  priority: DOC_CLIPBOARD_PRIORITY,
+  preconditions: whenDocOrEditor,
+  handler: /* @__PURE__ */ __name(async (accessor) => {
+    const docClipboardService = accessor.get(IDocClipboardService), clipboardItems = await accessor.get(IClipboardInterfaceService).read();
+    return clipboardItems.length === 0 ? !1 : docClipboardService.paste(clipboardItems);
+  }, "handler")
+}, DocParagraphSettingCommand = {
+  id: "doc-paragraph-setting.command",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, config) => {
+    var _a22, _b, _c;
+    const textSelectionManagerService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), docRanges = textSelectionManagerService.getDocRanges();
+    if (!docDataModel || docRanges.length === 0 || !config)
+      return !1;
+    const segmentId = docRanges[0].segmentId, unitId = docDataModel.getUnitId(), allParagraphs = (_b = (_a22 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a22.paragraphs) != null ? _b : [], paragraphs = (_c = getParagraphsInRanges(docRanges, allParagraphs)) != null ? _c : [], serializedSelections = docRanges.map(serializeDocRange), doMutation = {
+      id: RichTextEditingMutation.id,
+      params: {
+        unitId,
+        actions: [],
+        textRanges: serializedSelections
       }
-      subscriber.next(!1);
-    });
-    return () => subscription.unsubscribe();
-  });
-}
-__name(disableMenuWhenNoDocRange, "disableMenuWhenNoDocRange");
-function BoldMenuItemFactory(accessor) {
-  const commandService = accessor.get(ICommandService);
-  return {
-    id: SetInlineFormatBoldCommand.id,
-    group: MenuGroup.TOOLBAR_FORMAT,
-    type: MenuItemType.BUTTON,
-    icon: "BoldSingle",
-    title: "Set bold",
-    tooltip: "toolbar.bold",
-    positions: [MenuPosition.TOOLBAR_START],
-    activated$: new Observable((subscriber) => {
-      const disposable = commandService.onCommandExecuted((c) => {
-        var _a22;
-        const id = c.id;
-        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
-          const textRun = getFontStyleAtCursor(accessor);
-          if (textRun == null) {
-            subscriber.next(!1);
-            return;
-          }
-          const bl = (_a22 = textRun.ts) == null ? void 0 : _a22.bl;
-          subscriber.next(bl === BooleanNumber.TRUE);
-        }
-      });
-      return subscriber.next(!1), disposable.dispose;
-    }),
-    disabled$: disableMenuWhenNoDocRange(accessor),
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
-  };
-}
-__name(BoldMenuItemFactory, "BoldMenuItemFactory");
-function ItalicMenuItemFactory(accessor) {
-  const commandService = accessor.get(ICommandService);
-  return {
-    id: SetInlineFormatItalicCommand.id,
-    group: MenuGroup.TOOLBAR_FORMAT,
-    type: MenuItemType.BUTTON,
-    icon: "ItalicSingle",
-    title: "Set italic",
-    tooltip: "toolbar.italic",
-    positions: [MenuPosition.TOOLBAR_START],
-    activated$: new Observable((subscriber) => {
-      const disposable = commandService.onCommandExecuted((c) => {
-        var _a22;
-        const id = c.id;
-        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
-          const textRun = getFontStyleAtCursor(accessor);
-          if (textRun == null) {
-            subscriber.next(!1);
-            return;
-          }
-          const it = (_a22 = textRun.ts) == null ? void 0 : _a22.it;
-          subscriber.next(it === BooleanNumber.TRUE);
-        }
+    }, memoryCursor = new MemoryCursor();
+    memoryCursor.reset();
+    const textX = new TextX(), jsonX = JSONX.getInstance();
+    for (const paragraph of paragraphs) {
+      const { startIndex } = paragraph;
+      textX.push({
+        t: TextXActionType.RETAIN,
+        len: startIndex - memoryCursor.cursor,
+        segmentId
       });
-      return subscriber.next(!1), disposable.dispose;
-    }),
-    disabled$: disableMenuWhenNoDocRange(accessor),
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
-  };
-}
-__name(ItalicMenuItemFactory, "ItalicMenuItemFactory");
-function UnderlineMenuItemFactory(accessor) {
-  const commandService = accessor.get(ICommandService);
-  return {
-    id: SetInlineFormatUnderlineCommand.id,
-    group: MenuGroup.TOOLBAR_FORMAT,
-    type: MenuItemType.BUTTON,
-    icon: "UnderlineSingle",
-    title: "Set underline",
-    tooltip: "toolbar.underline",
-    positions: [MenuPosition.TOOLBAR_START],
-    activated$: new Observable((subscriber) => {
-      const disposable = commandService.onCommandExecuted((c) => {
-        var _a22;
-        const id = c.id;
-        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
-          const textRun = getFontStyleAtCursor(accessor);
-          if (textRun == null) {
-            subscriber.next(!1);
-            return;
-          }
-          const ul = (_a22 = textRun.ts) == null ? void 0 : _a22.ul;
-          subscriber.next((ul == null ? void 0 : ul.s) === BooleanNumber.TRUE);
-        }
+      const paragraphStyle = {
+        ...paragraph.paragraphStyle,
+        ...config.paragraph
+      };
+      textX.push({
+        t: TextXActionType.RETAIN,
+        len: 1,
+        body: {
+          dataStream: "",
+          paragraphs: [
+            {
+              ...paragraph,
+              paragraphStyle,
+              startIndex: 0
+            }
+          ]
+        },
+        segmentId,
+        coverType: UpdateDocsAttributeType.REPLACE
+      }), memoryCursor.moveCursorTo(startIndex + 1);
+    }
+    const path = getRichTextEditPath(docDataModel, segmentId);
+    return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
+}, useDocRanges = /* @__PURE__ */ __name(() => {
+  const textSelectionManagerService = useDependency(TextSelectionManagerService), docParagraphSettingController = useDependency(DocParagraphSettingController), docRanges = useMemo(() => textSelectionManagerService.getDocRanges(), []);
+  return useEffect(() => {
+    docRanges.length || docParagraphSettingController.closePanel();
+  }, [docRanges]), docRanges;
+}, "useDocRanges"), useCurrentParagraph = /* @__PURE__ */ __name(() => {
+  var _a22, _b, _c;
+  const docDataModel = useDependency(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), docRanges = useDocRanges();
+  if (!docDataModel || docRanges.length === 0)
+    return [];
+  const segmentId = docRanges[0].segmentId, paragraphs = (_b = (_a22 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a22.paragraphs) != null ? _b : [];
+  return (_c = getParagraphsInRanges(docRanges, paragraphs)) != null ? _c : [];
+}, "useCurrentParagraph"), useFirstParagraphHorizontalAlign = /* @__PURE__ */ __name((paragraph, defaultValue) => {
+  const commandService = useDependency(ICommandService), [horizontalAlign, _horizontalAlignSet] = useState(() => {
+    var _a22, _b;
+    const firstParagraph = paragraph[0];
+    return firstParagraph ? String((_b = (_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.horizontalAlign) != null ? _b : defaultValue) : defaultValue;
+  });
+  return [horizontalAlign, /* @__PURE__ */ __name((v) => (_horizontalAlignSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
+    paragraph: { horizontalAlign: Number(v) }
+  })), "horizontalAlignSet")];
+}, "useFirstParagraphHorizontalAlign"), useFirstParagraphIndentStart = /* @__PURE__ */ __name((paragraph) => {
+  const commandService = useDependency(ICommandService), [indentStart, _indentStartSet] = useState(() => {
+    var _a22;
+    const firstParagraph = paragraph[0];
+    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.indentStart, 0) : 0;
+  });
+  return [indentStart, /* @__PURE__ */ __name((v) => (_indentStartSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
+    paragraph: { indentStart: { v } }
+  })), "indentStartSet")];
+}, "useFirstParagraphIndentStart"), useFirstParagraphIndentEnd = /* @__PURE__ */ __name((paragraph) => {
+  const commandService = useDependency(ICommandService), [indentEnd, _indentEndSet] = useState(() => {
+    var _a22;
+    const firstParagraph = paragraph[0];
+    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.indentEnd, 0) : 0;
+  });
+  return [indentEnd, /* @__PURE__ */ __name((v) => (_indentEndSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
+    paragraph: { indentEnd: { v } }
+  })), "indentEndSet")];
+}, "useFirstParagraphIndentEnd"), useFirstParagraphIndentFirstLine = /* @__PURE__ */ __name((paragraph) => {
+  const commandService = useDependency(ICommandService), [indentFirstLine, _indentFirstLineSet] = useState(() => {
+    var _a22;
+    const firstParagraph = paragraph[0];
+    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.indentFirstLine, 0) : 0;
+  });
+  return [indentFirstLine, /* @__PURE__ */ __name((v) => (_indentFirstLineSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
+    paragraph: { indentFirstLine: { v } }
+  })), "indentFirstLineSet")];
+}, "useFirstParagraphIndentFirstLine"), useFirstParagraphIndentHanging = /* @__PURE__ */ __name((paragraph) => {
+  const commandService = useDependency(ICommandService), [hanging, _hangingSet] = useState(() => {
+    var _a22;
+    const firstParagraph = paragraph[0];
+    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.hanging, 0) : 0;
+  });
+  return [hanging, /* @__PURE__ */ __name((v) => (_hangingSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
+    paragraph: { hanging: { v } }
+  })), "hangingSet")];
+}, "useFirstParagraphIndentHanging"), useFirstParagraphIndentSpaceAbove = /* @__PURE__ */ __name((paragraph) => {
+  const commandService = useDependency(ICommandService), [spaceAbove, _spaceAboveSet] = useState(() => {
+    var _a22;
+    const firstParagraph = paragraph[0];
+    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.spaceAbove, 0) : 0;
+  });
+  return [spaceAbove, /* @__PURE__ */ __name((v) => (_spaceAboveSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
+    paragraph: { spaceAbove: { v } }
+  })), "spaceAboveSet")];
+}, "useFirstParagraphIndentSpaceAbove"), useFirstParagraphSpaceBelow = /* @__PURE__ */ __name((paragraph) => {
+  const commandService = useDependency(ICommandService), [spaceBelow, _spaceBelowSet] = useState(() => {
+    var _a22;
+    const firstParagraph = paragraph[0];
+    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.spaceBelow, 0) : 0;
+  });
+  return [spaceBelow, /* @__PURE__ */ __name((v) => (_spaceBelowSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
+    paragraph: { spaceBelow: { v } }
+  })), "spaceBelowSet")];
+}, "useFirstParagraphSpaceBelow"), useFirstParagraphLineSpacing = /* @__PURE__ */ __name((paragraph) => {
+  const commandService = useDependency(ICommandService), renderManagerService = useDependency(IRenderManagerService), univerInstanceService = useDependency(IUniverInstanceService), skeleton = useMemo(() => {
+    var _a22;
+    const docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
+    if (docDataModel)
+      return (_a22 = renderManagerService.getRenderById(docDataModel == null ? void 0 : docDataModel.getUnitId())) == null ? void 0 : _a22.with(DocSkeletonManagerService).getSkeleton();
+  }, []), stateChange$ = useMemo(() => new BehaviorSubject({}), []), [lineSpacing, _lineSpacingSet] = useState(() => {
+    var _a22, _b;
+    const firstParagraph = paragraph[0];
+    return firstParagraph && (_b = (_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.lineSpacing) != null ? _b : 1;
+  }), lineSpacingCache = useRef(lineSpacing), [spacingRule, _spacingRuleSet] = useState(() => {
+    var _a22, _b;
+    const firstParagraph = paragraph[0];
+    return firstParagraph ? (_b = (_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.spacingRule) != null ? _b : SpacingRule.AUTO : SpacingRule.AUTO;
+  }), lineSpacingSet = /* @__PURE__ */ __name(async (v) => {
+    _lineSpacingSet(v), stateChange$.next({ lineSpacing: v, spacingRule });
+  }, "lineSpacingSet"), spacingRuleSet = /* @__PURE__ */ __name(async (v) => {
+    if (v !== spacingRule) {
+      let cache = lineSpacingCache.current;
+      if (v === SpacingRule.AT_LEAST) {
+        const glyphNode = skeleton == null ? void 0 : skeleton.findNodeByCharIndex(paragraph[0].startIndex), divideNode = glyphNode == null ? void 0 : glyphNode.parent, lineNode = divideNode == null ? void 0 : divideNode.parent;
+        (lineNode == null ? void 0 : lineNode.contentHeight) !== void 0 && (cache = Math.max(lineNode.contentHeight, cache));
+      } else
+        cache > 5 && (cache = 2);
+      lineSpacingCache.current = lineSpacing, lineSpacingSet(cache), _spacingRuleSet(v), stateChange$.next({ spacingRule: v });
+    }
+  }, "spacingRuleSet");
+  return useEffect(() => {
+    const dispose = stateChange$.pipe(
+      filter((obj) => !!Object.keys(obj).length),
+      bufferTime(16),
+      filter((list) => !!list.length),
+      map((list) => list.reduce((a, b) => (Object.keys(b).forEach((key) => {
+        a[key] = b[key];
+      }), a), {}))
+    ).subscribe((v) => commandService.executeCommand(DocParagraphSettingCommand.id, {
+      paragraph: { ...v }
+    }));
+    return () => dispose.unsubscribe();
+  }, []), {
+    lineSpacing: [lineSpacing, lineSpacingSet],
+    spacingRule: [spacingRule, spacingRuleSet]
+  };
+}, "useFirstParagraphLineSpacing"), paragraphSettingIconList = "univer-paragraph-setting-icon-list", paragraphSettingIconListItem = "univer-paragraph-setting-icon-list-item", paragraphSettingIconListActive = "univer-paragraph-setting-icon-list-active", paragraphSettingTitle = "univer-paragraph-setting-title", paragraphSettingLabel = "univer-paragraph-setting-label", paragraphSettingMtBase = "univer-paragraph-setting-mt-base", paragraphSettingFlexCol = "univer-paragraph-setting-flex-col", paragraphSettingSpaceLine = "univer-paragraph-setting-space-line", styles$1 = {
+  paragraphSettingIconList,
+  paragraphSettingIconListItem,
+  paragraphSettingIconListActive,
+  paragraphSettingTitle,
+  paragraphSettingLabel,
+  paragraphSettingMtBase,
+  paragraphSettingFlexCol,
+  paragraphSettingSpaceLine
+}, AutoFocusInputNumber = /* @__PURE__ */ __name((props) => {
+  const { value, onChange, className = "", min = 0, max = 100, step = 1 } = props, ref = require$$0.useRef(null);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    InputNumber,
+    {
+      step,
+      ref,
+      min,
+      max,
+      value,
+      onChange: /* @__PURE__ */ __name((v) => {
+        onChange(v != null ? v : 0).finally(() => {
+          setTimeout(() => {
+            var _a22;
+            (_a22 = ref.current) == null || _a22.focus();
+          }, 30);
+        });
+      }, "onChange"),
+      className
+    }
+  );
+}, "AutoFocusInputNumber");
+function ParagraphSetting() {
+  const localeService = useDependency(LocaleService), alignmentOptions = useMemo(
+    () => [
+      { label: localeService.t("toolbar.alignLeft"), value: String(HorizontalAlign.LEFT), icon: /* @__PURE__ */ jsxRuntimeExports.jsx(LeftJustifyingSingle, {}) },
+      { label: localeService.t("toolbar.alignCenter"), value: String(HorizontalAlign.CENTER), icon: /* @__PURE__ */ jsxRuntimeExports.jsx(HorizontallySingle, {}) },
+      { label: localeService.t("toolbar.alignRight"), value: String(HorizontalAlign.RIGHT), icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RightJustifyingSingle, {}) },
+      { label: localeService.t("toolbar.alignJustify"), value: String(HorizontalAlign.JUSTIFIED), icon: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignTextBothSingle, {}) }
+    ],
+    []
+  ), currentParagraph = useCurrentParagraph(), [horizontalAlignValue, horizontalAlignSet] = useFirstParagraphHorizontalAlign(currentParagraph, alignmentOptions[0].value), [indentStart, indentStartSet] = useFirstParagraphIndentStart(currentParagraph), [indentEnd, indentEndSet] = useFirstParagraphIndentEnd(currentParagraph), [indentFirstLine, indentFirstLineSet] = useFirstParagraphIndentFirstLine(currentParagraph), [hanging, hangingSet] = useFirstParagraphIndentHanging(currentParagraph), [spaceAbove, spaceAboveSet] = useFirstParagraphIndentSpaceAbove(currentParagraph), [spaceBelow, spaceBelowSet] = useFirstParagraphSpaceBelow(currentParagraph), { lineSpacing: [lineSpacing, lineSpacingSet], spacingRule: [spacingRule, spacingRuleSet] } = useFirstParagraphLineSpacing(currentParagraph), lineSpaceConfig = useMemo(() => spacingRule === SpacingRule.AUTO ? { min: 1, max: 5, step: lineSpacing < 2 ? 0.5 : 1 } : { min: 1, max: 100 }, [spacingRule, lineSpacing]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSetting, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.paragraphSettingTitle, children: localeService.t("doc.paragraphSetting.alignment") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$1.paragraphSettingIconList} ${styles$1.paragraphSettingMtBase}`, children: alignmentOptions.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: item.label, placement: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
+      {
+        className: clsx(
+          styles$1.paragraphSettingIconListItem,
+          { [styles$1.paragraphSettingIconListActive]: horizontalAlignValue === item.value }
+        ),
+        onClick: /* @__PURE__ */ __name(() => horizontalAlignSet(item.value), "onClick"),
+        children: item.icon
+      }
+    ) }, item.value)) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.paragraphSettingTitle, children: localeService.t("doc.paragraphSetting.indentation") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
+          localeService.t("doc.paragraphSetting.left"),
+          "(px)"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: indentStart, onChange: /* @__PURE__ */ __name((v) => indentStartSet(v != null ? v : 0), "onChange") })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
+          localeService.t("doc.paragraphSetting.right"),
+          "(px)"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: indentEnd, onChange: /* @__PURE__ */ __name((v) => indentEndSet(v != null ? v : 0), "onChange") })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
+          localeService.t("doc.paragraphSetting.firstLine"),
+          "(px)"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: indentFirstLine, onChange: /* @__PURE__ */ __name((v) => indentFirstLineSet(v != null ? v : 0), "onChange") })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
+          localeService.t("doc.paragraphSetting.hanging"),
+          "(px)"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: hanging, onChange: /* @__PURE__ */ __name((v) => hangingSet(v != null ? v : 0), "onChange") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.paragraphSettingTitle, children: localeService.t("doc.paragraphSetting.spacing") }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
+          localeService.t("doc.paragraphSetting.before"),
+          "(px)"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: spaceAbove, onChange: /* @__PURE__ */ __name((v) => spaceAboveSet(v != null ? v : 0), "onChange") })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
+          localeService.t("doc.paragraphSetting.after"),
+          "(px)"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: spaceBelow, onChange: /* @__PURE__ */ __name((v) => spaceBelowSet(v != null ? v : 0), "onChange") })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.paragraphSettingLabel, children: localeService.t("doc.paragraphSetting.lineSpace") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$1.paragraphSettingMtBase} ${styles$1.paragraphSettingSpaceLine}`, style: { width: 162 }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Select,
+            {
+              value: `${spacingRule}`,
+              options: [
+                { label: localeService.t("doc.paragraphSetting.multiSpace"), value: `${SpacingRule.AUTO}` },
+                { label: localeService.t("doc.paragraphSetting.fixedValue"), value: `${SpacingRule.AT_LEAST}` }
+              ],
+              onChange: /* @__PURE__ */ __name((v) => spacingRuleSet(Number(v)), "onChange")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            AutoFocusInputNumber,
+            {
+              ...lineSpaceConfig,
+              value: lineSpacing,
+              onChange: /* @__PURE__ */ __name((v) => lineSpacingSet(v != null ? v : 0), "onChange")
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+__name(ParagraphSetting, "ParagraphSetting");
+const isRangesEqual = /* @__PURE__ */ __name((oldRanges, ranges) => ranges.length === oldRanges.length && oldRanges.some((oldRange) => ranges.some((range) => range.startOffset === oldRange.startOffset && range.endOffset === oldRange.endOffset)), "isRangesEqual"), isRangesIntersection = /* @__PURE__ */ __name((oldRanges, ranges) => oldRanges.some((oldRange) => ranges.some((range) => {
+  const { startOffset: activeStart, endOffset: activeEnd } = oldRange, { startOffset: compareStart, endOffset: compareEnd } = range;
+  return activeStart == null || activeEnd == null || compareStart == null || compareEnd == null ? !1 : activeStart <= compareEnd && activeEnd >= compareStart;
+})), "isRangesIntersection");
+function ParagraphSettingIndex() {
+  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), currentLocale = useObservable(localeService.currentLocale$), [key, keySet] = useState(""), rangeRef = useRef([]);
+  return useEffect(() => {
+    const dispose = commandService.onCommandExecuted((info) => {
+      var _a22;
+      if (SetTextSelectionsOperation.id === info.id) {
+        const ranges = info.params.ranges;
+        isRangesEqual(ranges, rangeRef.current) || keySet(generateRandomId(4)), rangeRef.current = ranges;
+      }
+      if (RichTextEditingMutation.id === info.id) {
+        const params = info.params, ranges = (_a22 = params.textRanges) != null ? _a22 : [];
+        params.trigger !== DocParagraphSettingCommand.id && isRangesIntersection(ranges, rangeRef.current) && keySet(generateRandomId(4));
+      }
+    });
+    return () => dispose.dispose();
+  }, []), useEffect(() => {
+    keySet(generateRandomId(4));
+  }, [currentLocale]), /* @__PURE__ */ jsxRuntimeExports.jsx(ParagraphSetting, {}, key);
+}
+__name(ParagraphSettingIndex, "ParagraphSettingIndex");
+var __defProp$f = Object.defineProperty, __getOwnPropDesc$f = Object.getOwnPropertyDescriptor, __decorateClass$f = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$f(target, key, result), result;
+}, "__decorateClass$f"), __decorateParam$f = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$f");
+const paragraphSettingIndexKey = "doc_ui_paragraph-setting-panel";
+var _a6;
+let DocParagraphSettingController = (_a6 = class extends Disposable {
+  constructor(_commandService, _componentManager, _sidebarService) {
+    super();
+    __publicField(this, "_id");
+    this._commandService = _commandService, this._componentManager = _componentManager, this._sidebarService = _sidebarService, this._init();
+  }
+  _init() {
+    this.disposeWithMe(this._componentManager.register(paragraphSettingIndexKey, ParagraphSettingIndex));
+  }
+  openPanel() {
+    const props = {
+      header: { title: "doc.slider.paragraphSetting" },
+      id: this._id,
+      children: {
+        label: paragraphSettingIndexKey
+      },
+      width: 300
+    };
+    this._sidebarService.open(props);
+  }
+  closePanel() {
+    this._sidebarService.close(this._id);
+  }
+}, __name(_a6, "DocParagraphSettingController"), _a6);
+DocParagraphSettingController = __decorateClass$f([
+  OnLifecycle(LifecycleStages.Rendered, DocParagraphSettingController),
+  __decorateParam$f(0, ICommandService),
+  __decorateParam$f(1, Inject(ComponentManager)),
+  __decorateParam$f(2, Inject(ISidebarService))
+], DocParagraphSettingController);
+const DocParagraphSettingPanelOperation = {
+  id: "sidebar.operation.doc-paragraph-setting-panel",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor) => (accessor.get(DocParagraphSettingController).openPanel(), !0), "handler")
+};
+function getInsertTableHiddenObservable(accessor) {
+  const univerInstanceService = accessor.get(IUniverInstanceService), renderManagerService = accessor.get(IRenderManagerService);
+  return new Observable((subscriber) => {
+    const subscription = univerInstanceService.focused$.subscribe((unitId) => {
+      if (unitId == null || univerInstanceService.getUnitType(unitId) !== UniverInstanceType.UNIVER_DOC)
+        return subscriber.next(!0);
+      const currentRender2 = renderManagerService.getRenderById(unitId);
+      if (currentRender2 == null)
+        return subscriber.next(!0);
+      currentRender2.with(DocSkeletonManagerService).getViewModel().editAreaChange$.subscribe((editArea) => {
+        subscriber.next(editArea === DocumentEditArea.HEADER || editArea === DocumentEditArea.FOOTER);
       });
-      return subscriber.next(!1), disposable.dispose;
-    }),
-    disabled$: disableMenuWhenNoDocRange(accessor),
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
-  };
+    }), currentRender = renderManagerService.getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC);
+    if (currentRender == null)
+      return subscriber.next(!0);
+    const viewModel = currentRender.with(DocSkeletonManagerService).getViewModel();
+    return subscriber.next(viewModel.getEditArea() !== DocumentEditArea.BODY), () => subscription.unsubscribe();
+  });
 }
-__name(UnderlineMenuItemFactory, "UnderlineMenuItemFactory");
-function StrikeThroughMenuItemFactory(accessor) {
-  const commandService = accessor.get(ICommandService);
-  return {
-    id: SetInlineFormatStrikethroughCommand.id,
-    group: MenuGroup.TOOLBAR_FORMAT,
-    type: MenuItemType.BUTTON,
-    icon: "StrikethroughSingle",
-    title: "Set strike through",
-    tooltip: "toolbar.strikethrough",
-    positions: [MenuPosition.TOOLBAR_START],
-    activated$: new Observable((subscriber) => {
-      const disposable = commandService.onCommandExecuted((c) => {
-        var _a22;
-        const id = c.id;
-        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
-          const textRun = getFontStyleAtCursor(accessor);
-          if (textRun == null) {
-            subscriber.next(!1);
-            return;
-          }
-          const st = (_a22 = textRun.ts) == null ? void 0 : _a22.st;
-          subscriber.next((st == null ? void 0 : st.s) === BooleanNumber.TRUE);
+__name(getInsertTableHiddenObservable, "getInsertTableHiddenObservable");
+function getTableDisabledObservable(accessor) {
+  const textSelectionManagerService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService);
+  return new Observable((subscriber) => {
+    const subscription = textSelectionManagerService.textSelection$.subscribe((selection) => {
+      if (selection == null) {
+        subscriber.next(!0);
+        return;
+      }
+      const { textRanges } = selection;
+      if (textRanges.length !== 1) {
+        subscriber.next(!0);
+        return;
+      }
+      const textRange = textRanges[0], { collapsed, anchorNodePosition, startOffset } = textRange;
+      if (!collapsed || startOffset == null) {
+        subscriber.next(!0);
+        return;
+      }
+      const docDataModel = univerInstanceService.getCurrentUniverDocInstance();
+      if (docDataModel == null) {
+        subscriber.next(!0);
+        return;
+      }
+      const docSkeletonManagerService = getCommandSkeleton(accessor, docDataModel.getUnitId());
+      if (docSkeletonManagerService == null) {
+        subscriber.next(!0);
+        return;
+      }
+      if (docSkeletonManagerService.getViewModel().getCustomRangeRaw(startOffset)) {
+        subscriber.next(!0);
+        return;
+      }
+      if (anchorNodePosition != null) {
+        const { path } = anchorNodePosition;
+        if (path.indexOf("cells") !== -1) {
+          subscriber.next(!0);
+          return;
         }
-      });
-      return subscriber.next(!1), disposable.dispose;
-    }),
-    disabled$: disableMenuWhenNoDocRange(accessor),
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
-  };
+      }
+      subscriber.next(!1);
+    });
+    return () => subscription.unsubscribe();
+  });
 }
-__name(StrikeThroughMenuItemFactory, "StrikeThroughMenuItemFactory");
-function SubscriptMenuItemFactory(accessor) {
-  const commandService = accessor.get(ICommandService);
-  return {
-    id: SetInlineFormatSubscriptCommand.id,
-    group: MenuGroup.TOOLBAR_FORMAT,
-    type: MenuItemType.BUTTON,
-    icon: "SubscriptSingle",
-    tooltip: "toolbar.subscript",
-    positions: [MenuPosition.TOOLBAR_START],
-    activated$: new Observable((subscriber) => {
-      const disposable = commandService.onCommandExecuted((c) => {
-        var _a22;
-        const id = c.id;
-        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
-          const textRun = getFontStyleAtCursor(accessor);
-          if (textRun == null) {
-            subscriber.next(!1);
-            return;
-          }
-          const va = (_a22 = textRun.ts) == null ? void 0 : _a22.va;
-          subscriber.next(va === BaselineOffset.SUBSCRIPT);
-        }
-      });
-      return subscriber.next(!1), disposable.dispose;
-    }),
-    disabled$: disableMenuWhenNoDocRange(accessor),
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
-  };
+__name(getTableDisabledObservable, "getTableDisabledObservable");
+function disableMenuWhenNoDocRange(accessor) {
+  const textSelectionManagerService = accessor.get(TextSelectionManagerService);
+  return new Observable((subscriber) => {
+    const subscription = textSelectionManagerService.textSelection$.subscribe((selection) => {
+      if (selection == null) {
+        subscriber.next(!0);
+        return;
+      }
+      const { textRanges, rectRanges } = selection;
+      if (textRanges.length === 0 && rectRanges.length === 0) {
+        subscriber.next(!0);
+        return;
+      }
+      subscriber.next(!1);
+    });
+    return () => subscription.unsubscribe();
+  });
 }
-__name(SubscriptMenuItemFactory, "SubscriptMenuItemFactory");
-function SuperscriptMenuItemFactory(accessor) {
+__name(disableMenuWhenNoDocRange, "disableMenuWhenNoDocRange");
+function BoldMenuItemFactory(accessor) {
   const commandService = accessor.get(ICommandService);
   return {
-    id: SetInlineFormatSuperscriptCommand.id,
-    group: MenuGroup.TOOLBAR_FORMAT,
+    id: SetInlineFormatBoldCommand.id,
     type: MenuItemType.BUTTON,
-    icon: "SuperscriptSingle",
-    tooltip: "toolbar.superscript",
-    positions: [MenuPosition.TOOLBAR_START],
+    icon: "BoldSingle",
+    title: "Set bold",
+    tooltip: "toolbar.bold",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
         var _a22;
@@ -2124,213 +2363,69 @@ function SuperscriptMenuItemFactory(accessor) {
         if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
           const textRun = getFontStyleAtCursor(accessor);
           if (textRun == null) {
-            subscriber.next(!1);
-            return;
-          }
-          const va = (_a22 = textRun.ts) == null ? void 0 : _a22.va;
-          subscriber.next(va === BaselineOffset.SUPERSCRIPT);
-        }
-      });
-      return subscriber.next(!1), disposable.dispose;
-    }),
-    disabled$: disableMenuWhenNoDocRange(accessor),
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
-  };
-}
-__name(SuperscriptMenuItemFactory, "SuperscriptMenuItemFactory");
-function FontFamilySelectorMenuItemFactory(accessor) {
-  const commandService = accessor.get(ICommandService);
-  return {
-    id: SetInlineFormatFontFamilyCommand.id,
-    tooltip: "toolbar.font",
-    group: MenuGroup.TOOLBAR_FORMAT,
-    type: MenuItemType.SELECTOR,
-    label: FONT_FAMILY_COMPONENT,
-    positions: [MenuPosition.TOOLBAR_START],
-    selections: FONT_FAMILY_LIST.map((item) => ({
-      label: {
-        name: FONT_FAMILY_ITEM_COMPONENT,
-        hoverable: !0
-      },
-      value: item.value
-    })),
-    // disabled$: getCurrentSheetDisabled$(accessor),
-    value$: new Observable((subscriber) => {
-      const defaultValue = FONT_FAMILY_LIST[0].value, disposable = commandService.onCommandExecuted((c) => {
-        var _a22;
-        const id = c.id;
-        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatFontFamilyCommand.id) {
-          const textRun = getFontStyleAtCursor(accessor);
-          if (textRun == null) {
-            subscriber.next(defaultValue);
-            return;
-          }
-          const ff = (_a22 = textRun.ts) == null ? void 0 : _a22.ff;
-          subscriber.next(ff != null ? ff : defaultValue);
-        }
-      });
-      return subscriber.next(defaultValue), disposable.dispose;
-    }),
-    disabled$: disableMenuWhenNoDocRange(accessor),
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
-  };
-}
-__name(FontFamilySelectorMenuItemFactory, "FontFamilySelectorMenuItemFactory");
-function FontSizeSelectorMenuItemFactory(accessor) {
-  const commandService = accessor.get(ICommandService);
-  return {
-    id: SetInlineFormatFontSizeCommand.id,
-    group: MenuGroup.TOOLBAR_FORMAT,
-    type: MenuItemType.SELECTOR,
-    tooltip: "toolbar.fontSize",
-    label: {
-      name: FONT_SIZE_COMPONENT,
-      props: {
-        min: 1,
-        max: 400
-        // disabled$,
-      }
-    },
-    positions: [MenuPosition.TOOLBAR_START],
-    selections: FONT_SIZE_LIST,
-    // disabled$,
-    value$: new Observable((subscriber) => {
-      const disposable = commandService.onCommandExecuted((c) => {
-        var _a22;
-        const id = c.id;
-        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatFontSizeCommand.id) {
-          const textRun = getFontStyleAtCursor(accessor);
-          if (textRun == null) {
-            subscriber.next(14);
-            return;
-          }
-          const fs = (_a22 = textRun.ts) == null ? void 0 : _a22.fs;
-          subscriber.next(fs != null ? fs : 14);
-        }
-      });
-      return subscriber.next(14), disposable.dispose;
-    }),
-    disabled$: disableMenuWhenNoDocRange(accessor),
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
-  };
-}
-__name(FontSizeSelectorMenuItemFactory, "FontSizeSelectorMenuItemFactory");
-function TextColorSelectorMenuItemFactory(accessor) {
-  const commandService = accessor.get(ICommandService), themeService = accessor.get(ThemeService);
-  return {
-    id: SetInlineFormatTextColorCommand.id,
-    icon: "FontColor",
-    tooltip: "toolbar.textColor.main",
-    group: MenuGroup.TOOLBAR_FORMAT,
-    type: MenuItemType.BUTTON_SELECTOR,
-    positions: [MenuPosition.TOOLBAR_START],
-    selections: [
-      {
-        label: {
-          name: COLOR_PICKER_COMPONENT,
-          hoverable: !1
-        }
-      }
-    ],
-    value$: new Observable((subscriber) => {
-      const defaultColor = themeService.getCurrentTheme().textColor, disposable = commandService.onCommandExecuted((c) => {
-        if (c.id === SetInlineFormatTextColorCommand.id) {
-          const color = c.params.value;
-          subscriber.next(color != null ? color : defaultColor);
+            subscriber.next(!1);
+            return;
+          }
+          const bl = (_a22 = textRun.ts) == null ? void 0 : _a22.bl;
+          subscriber.next(bl === BooleanNumber.TRUE);
         }
       });
-      return subscriber.next(defaultColor), disposable.dispose;
+      return subscriber.next(!1), disposable.dispose;
     }),
     disabled$: disableMenuWhenNoDocRange(accessor),
     hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
-    // disabled$: getCurrentSheetDisabled$(accessor),
-  };
-}
-__name(TextColorSelectorMenuItemFactory, "TextColorSelectorMenuItemFactory");
-function HeaderFooterMenuItemFactory(accessor) {
-  return {
-    id: OpenHeaderFooterPanelCommand.id,
-    group: MenuGroup.TOOLBAR_OTHERS,
-    type: MenuItemType.BUTTON,
-    icon: "FreezeRowSingle",
-    tooltip: "toolbar.headerFooter",
-    positions: [MenuPosition.TOOLBAR_START],
-    hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getHeaderFooterMenuHiddenObservable(accessor), (one, two) => one || two)
-  };
-}
-__name(HeaderFooterMenuItemFactory, "HeaderFooterMenuItemFactory");
-const TableIcon = "GridSingle", TABLE_MENU_ID = "doc.menu.table";
-function TableMenuFactory(accessor) {
-  return {
-    id: TABLE_MENU_ID,
-    type: MenuItemType.SUBITEMS,
-    positions: [MenuPosition.TOOLBAR_START],
-    group: MenuGroup.TOOLBAR_LAYOUT,
-    icon: TableIcon,
-    tooltip: "toolbar.table.main",
-    disabled$: getTableDisabledObservable(accessor),
-    // Do not show header footer menu and insert table at zen mode.
-    hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getInsertTableHiddenObservable(accessor), getHeaderFooterMenuHiddenObservable(accessor), (one, two, three) => one || two || three)
-  };
-}
-__name(TableMenuFactory, "TableMenuFactory");
-function InsertTableMenuFactory(_accessor) {
-  return {
-    id: DocCreateTableOperation.id,
-    title: "toolbar.table.insert",
-    type: MenuItemType.BUTTON,
-    positions: [TABLE_MENU_ID],
-    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-__name(InsertTableMenuFactory, "InsertTableMenuFactory");
-function AlignLeftMenuItemFactory(accessor) {
+__name(BoldMenuItemFactory, "BoldMenuItemFactory");
+function ItalicMenuItemFactory(accessor) {
   const commandService = accessor.get(ICommandService);
   return {
-    id: AlignLeftCommand.id,
-    group: MenuGroup.TOOLBAR_LAYOUT,
+    id: SetInlineFormatItalicCommand.id,
     type: MenuItemType.BUTTON,
-    icon: "LeftJustifyingSingle",
-    tooltip: "toolbar.alignLeft",
-    positions: [MenuPosition.TOOLBAR_START],
-    disabled$: disableMenuWhenNoDocRange(accessor),
+    icon: "ItalicSingle",
+    title: "Set italic",
+    tooltip: "toolbar.italic",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
         var _a22;
         const id = c.id;
-        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
-          const paragraph = getParagraphStyleAtCursor(accessor);
-          if (paragraph == null)
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null) {
+            subscriber.next(!1);
             return;
-          const alignType = (_a22 = paragraph.paragraphStyle) == null ? void 0 : _a22.horizontalAlign;
-          subscriber.next(alignType === HorizontalAlign.LEFT);
+          }
+          const it = (_a22 = textRun.ts) == null ? void 0 : _a22.it;
+          subscriber.next(it === BooleanNumber.TRUE);
         }
       });
       return subscriber.next(!1), disposable.dispose;
     }),
+    disabled$: disableMenuWhenNoDocRange(accessor),
     hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-__name(AlignLeftMenuItemFactory, "AlignLeftMenuItemFactory");
-function AlignCenterMenuItemFactory(accessor) {
+__name(ItalicMenuItemFactory, "ItalicMenuItemFactory");
+function UnderlineMenuItemFactory(accessor) {
   const commandService = accessor.get(ICommandService);
   return {
-    id: AlignCenterCommand.id,
-    group: MenuGroup.TOOLBAR_LAYOUT,
+    id: SetInlineFormatUnderlineCommand.id,
     type: MenuItemType.BUTTON,
-    icon: "HorizontallySingle",
-    tooltip: "toolbar.alignCenter",
-    positions: [MenuPosition.TOOLBAR_START],
+    icon: "UnderlineSingle",
+    title: "Set underline",
+    tooltip: "toolbar.underline",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
         var _a22;
         const id = c.id;
-        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
-          const paragraph = getParagraphStyleAtCursor(accessor);
-          if (paragraph == null)
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null) {
+            subscriber.next(!1);
             return;
-          const alignType = (_a22 = paragraph.paragraphStyle) == null ? void 0 : _a22.horizontalAlign;
-          subscriber.next(alignType === HorizontalAlign.CENTER);
+          }
+          const ul = (_a22 = textRun.ts) == null ? void 0 : _a22.ul;
+          subscriber.next((ul == null ? void 0 : ul.s) === BooleanNumber.TRUE);
         }
       });
       return subscriber.next(!1), disposable.dispose;
@@ -2339,26 +2434,27 @@ function AlignCenterMenuItemFactory(accessor) {
     hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-__name(AlignCenterMenuItemFactory, "AlignCenterMenuItemFactory");
-function AlignRightMenuItemFactory(accessor) {
+__name(UnderlineMenuItemFactory, "UnderlineMenuItemFactory");
+function StrikeThroughMenuItemFactory(accessor) {
   const commandService = accessor.get(ICommandService);
   return {
-    id: AlignRightCommand.id,
-    group: MenuGroup.TOOLBAR_LAYOUT,
+    id: SetInlineFormatStrikethroughCommand.id,
     type: MenuItemType.BUTTON,
-    icon: "RightJustifyingSingle",
-    tooltip: "toolbar.alignRight",
-    positions: [MenuPosition.TOOLBAR_START],
+    icon: "StrikethroughSingle",
+    title: "Set strike through",
+    tooltip: "toolbar.strikethrough",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
         var _a22;
         const id = c.id;
-        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
-          const paragraph = getParagraphStyleAtCursor(accessor);
-          if (paragraph == null)
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null) {
+            subscriber.next(!1);
             return;
-          const alignType = (_a22 = paragraph.paragraphStyle) == null ? void 0 : _a22.horizontalAlign;
-          subscriber.next(alignType === HorizontalAlign.RIGHT);
+          }
+          const st = (_a22 = textRun.ts) == null ? void 0 : _a22.st;
+          subscriber.next((st == null ? void 0 : st.s) === BooleanNumber.TRUE);
         }
       });
       return subscriber.next(!1), disposable.dispose;
@@ -2367,26 +2463,26 @@ function AlignRightMenuItemFactory(accessor) {
     hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-__name(AlignRightMenuItemFactory, "AlignRightMenuItemFactory");
-function AlignJustifyMenuItemFactory(accessor) {
+__name(StrikeThroughMenuItemFactory, "StrikeThroughMenuItemFactory");
+function SubscriptMenuItemFactory(accessor) {
   const commandService = accessor.get(ICommandService);
   return {
-    id: AlignJustifyCommand.id,
-    group: MenuGroup.TOOLBAR_LAYOUT,
+    id: SetInlineFormatSubscriptCommand.id,
     type: MenuItemType.BUTTON,
-    icon: "AlignTextBothSingle",
-    tooltip: "toolbar.alignJustify",
-    positions: [MenuPosition.TOOLBAR_START],
+    icon: "SubscriptSingle",
+    tooltip: "toolbar.subscript",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
         var _a22;
         const id = c.id;
-        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
-          const paragraph = getParagraphStyleAtCursor(accessor);
-          if (paragraph == null)
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null) {
+            subscriber.next(!1);
             return;
-          const alignType = (_a22 = paragraph.paragraphStyle) == null ? void 0 : _a22.horizontalAlign;
-          subscriber.next(alignType === HorizontalAlign.JUSTIFIED);
+          }
+          const va = (_a22 = textRun.ts) == null ? void 0 : _a22.va;
+          subscriber.next(va === BaselineOffset.SUBSCRIPT);
         }
       });
       return subscriber.next(!1), disposable.dispose;
@@ -2395,503 +2491,432 @@ function AlignJustifyMenuItemFactory(accessor) {
     hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-__name(AlignJustifyMenuItemFactory, "AlignJustifyMenuItemFactory");
-const listValueFactory$ = /* @__PURE__ */ __name((accessor) => new Observable((subscriber) => {
-  const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionManagerService = accessor.get(TextSelectionManagerService);
-  let textSubscription;
-  const subscription = univerInstanceService.focused$.subscribe((unitId) => {
-    if (textSubscription == null || textSubscription.unsubscribe(), unitId == null)
-      return;
-    const docDataModel = univerInstanceService.getUniverDocInstance(unitId);
-    docDataModel != null && (textSubscription = textSelectionManagerService.textSelection$.subscribe(() => {
-      var _a22, _b;
-      const range = textSelectionManagerService.getActiveTextRangeWithStyle();
-      if (range) {
-        const doc = docDataModel.getSelfOrHeaderFooterModel(range == null ? void 0 : range.segmentId), paragraphs = getParagraphsInRange(range, (_b = (_a22 = doc.getBody()) == null ? void 0 : _a22.paragraphs) != null ? _b : []);
-        let listType;
-        if (paragraphs.every((p2) => {
-          var _a23;
-          return listType || (listType = (_a23 = p2.bullet) == null ? void 0 : _a23.listType), p2.bullet && p2.bullet.listType === listType;
-        })) {
-          subscriber.next(listType);
-          return;
-        }
-      }
-      subscriber.next(void 0);
-    }));
-  });
-  return () => {
-    subscription.unsubscribe(), textSubscription == null || textSubscription.unsubscribe();
-  };
-}), "listValueFactory$");
-function OrderListMenuItemFactory(accessor) {
-  return {
-    id: OrderListCommand.id,
-    group: MenuGroup.TOOLBAR_LAYOUT,
-    type: MenuItemType.BUTTON_SELECTOR,
-    selections: [
-      {
-        label: {
-          name: ORDER_LIST_TYPE_COMPONENT,
-          hoverable: !1
-        },
-        value$: listValueFactory$(accessor)
-      }
-    ],
-    icon: "OrderSingle",
-    tooltip: "toolbar.order",
-    positions: [MenuPosition.TOOLBAR_START],
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
-    disabled$: disableMenuWhenNoDocRange(accessor),
-    activated$: listValueFactory$(accessor).pipe(map((v) => v && v.indexOf("ORDER_LIST") === 0))
-  };
-}
-__name(OrderListMenuItemFactory, "OrderListMenuItemFactory");
-function BulletListMenuItemFactory(accessor) {
-  return {
-    id: BulletListCommand.id,
-    group: MenuGroup.TOOLBAR_LAYOUT,
-    type: MenuItemType.BUTTON_SELECTOR,
-    selections: [
-      {
-        label: {
-          name: BULLET_LIST_TYPE_COMPONENT,
-          hoverable: !1
-        },
-        value$: listValueFactory$(accessor)
-      }
-    ],
-    icon: "UnorderSingle",
-    tooltip: "toolbar.unorder",
-    positions: [MenuPosition.TOOLBAR_START],
-    disabled$: disableMenuWhenNoDocRange(accessor),
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
-    activated$: listValueFactory$(accessor).pipe(map((v) => v && v.indexOf("BULLET_LIST") === 0))
-  };
-}
-__name(BulletListMenuItemFactory, "BulletListMenuItemFactory");
-function CheckListMenuItemFactory(accessor) {
+__name(SubscriptMenuItemFactory, "SubscriptMenuItemFactory");
+function SuperscriptMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: CheckListCommand.id,
-    group: MenuGroup.TOOLBAR_LAYOUT,
+    id: SetInlineFormatSuperscriptCommand.id,
     type: MenuItemType.BUTTON,
-    icon: "TodoList",
-    tooltip: "toolbar.checklist",
-    positions: [MenuPosition.TOOLBAR_START],
+    icon: "SuperscriptSingle",
+    tooltip: "toolbar.superscript",
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a22;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null) {
+            subscriber.next(!1);
+            return;
+          }
+          const va = (_a22 = textRun.ts) == null ? void 0 : _a22.va;
+          subscriber.next(va === BaselineOffset.SUPERSCRIPT);
+        }
+      });
+      return subscriber.next(!1), disposable.dispose;
+    }),
     disabled$: disableMenuWhenNoDocRange(accessor),
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
-    activated$: listValueFactory$(accessor).pipe(map((v) => v && v.indexOf("CHECK_LIST") === 0))
-  };
-}
-__name(CheckListMenuItemFactory, "CheckListMenuItemFactory");
-function ResetBackgroundColorMenuItemFactory(accessor) {
-  return {
-    id: ResetInlineFormatTextBackgroundColorCommand.id,
-    type: MenuItemType.BUTTON,
-    title: "toolbar.resetColor",
-    icon: "NoColor",
-    positions: SetInlineFormatTextBackgroundColorCommand.id
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-__name(ResetBackgroundColorMenuItemFactory, "ResetBackgroundColorMenuItemFactory");
-function BackgroundColorSelectorMenuItemFactory(accessor) {
-  const commandService = accessor.get(ICommandService), themeService = accessor.get(ThemeService);
+__name(SuperscriptMenuItemFactory, "SuperscriptMenuItemFactory");
+function FontFamilySelectorMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   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: !1
-        }
-      }
-    ],
+    id: SetInlineFormatFontFamilyCommand.id,
+    tooltip: "toolbar.font",
+    type: MenuItemType.SELECTOR,
+    label: FONT_FAMILY_COMPONENT,
+    selections: FONT_FAMILY_LIST.map((item) => ({
+      label: {
+        name: FONT_FAMILY_ITEM_COMPONENT,
+        hoverable: !0
+      },
+      value: item.value
+    })),
+    // disabled$: getCurrentSheetDisabled$(accessor),
     value$: new Observable((subscriber) => {
-      const defaultColor = themeService.getCurrentTheme().primaryColor, disposable = commandService.onCommandExecuted((c) => {
-        if (c.id === SetInlineFormatTextBackgroundColorCommand.id) {
-          const color = c.params.value;
-          subscriber.next(color != null ? color : defaultColor);
+      const defaultValue = FONT_FAMILY_LIST[0].value, disposable = commandService.onCommandExecuted((c) => {
+        var _a22;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatFontFamilyCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null) {
+            subscriber.next(defaultValue);
+            return;
+          }
+          const ff = (_a22 = textRun.ts) == null ? void 0 : _a22.ff;
+          subscriber.next(ff != null ? ff : defaultValue);
         }
       });
-      return subscriber.next(defaultColor), disposable.dispose;
+      return subscriber.next(defaultValue), disposable.dispose;
     }),
     disabled$: disableMenuWhenNoDocRange(accessor),
     hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-__name(BackgroundColorSelectorMenuItemFactory, "BackgroundColorSelectorMenuItemFactory");
-function getFontStyleAtCursor(accessor) {
-  var _a22;
-  const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionService = accessor.get(TextSelectionManagerService), docDataModel = univerInstanceService.getCurrentUniverDocInstance(), activeTextRange = textSelectionService.getActiveTextRangeWithStyle();
-  if (docDataModel == null || activeTextRange == null)
-    return;
-  const { startOffset, segmentId } = activeTextRange, textRuns = (_a22 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a22.textRuns;
-  if (textRuns == null)
-    return;
-  let textRun;
-  for (let i = textRuns.length - 1; i >= 0; i--) {
-    const curTextRun = textRuns[i];
-    if (curTextRun.st <= startOffset && startOffset <= curTextRun.ed) {
-      textRun = curTextRun;
-      break;
-    }
-  }
-  return textRun;
-}
-__name(getFontStyleAtCursor, "getFontStyleAtCursor");
-function getParagraphStyleAtCursor(accessor) {
-  var _a22;
-  const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionService = accessor.get(TextSelectionManagerService), docDataModel = univerInstanceService.getCurrentUniverDocInstance(), activeTextRange = textSelectionService.getActiveTextRangeWithStyle();
-  if (docDataModel == null || activeTextRange == null)
-    return;
-  const { startOffset, segmentId } = activeTextRange, paragraphs = (_a22 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a22.paragraphs;
-  if (paragraphs == null)
-    return;
-  let prevIndex = -1;
-  for (const paragraph of paragraphs) {
-    const { startIndex } = paragraph;
-    if (startOffset > prevIndex && startOffset <= startIndex)
-      return paragraph;
-    prevIndex = startIndex;
-  }
-  return null;
-}
-__name(getParagraphStyleAtCursor, "getParagraphStyleAtCursor");
-function whenDocOrEditor(contextService) {
-  return contextService.getContextValue(FOCUSING_DOC) || contextService.getContextValue(EDITOR_ACTIVATED);
-}
-__name(whenDocOrEditor, "whenDocOrEditor");
-function whenFocusEditor(contextService) {
-  return contextService.getContextValue(EDITOR_ACTIVATED);
-}
-__name(whenFocusEditor, "whenFocusEditor");
-const DOC_CLIPBOARD_PRIORITY = 999, DocCopyCommand = {
-  id: CopyCommand.id,
-  name: "doc.command.copy",
-  type: CommandType.COMMAND,
-  multi: !0,
-  priority: DOC_CLIPBOARD_PRIORITY,
-  preconditions: whenDocOrEditor,
-  handler: /* @__PURE__ */ __name(async (accessor) => accessor.get(IDocClipboardService).copy(), "handler")
-}, DocCutCommand = {
-  id: CutCommand.id,
-  name: "doc.command.cut",
-  type: CommandType.COMMAND,
-  multi: !0,
-  priority: DOC_CLIPBOARD_PRIORITY,
-  preconditions: whenDocOrEditor,
-  handler: /* @__PURE__ */ __name(async (accessor) => accessor.get(IDocClipboardService).cut(), "handler")
-}, DocPasteCommand = {
-  id: PasteCommand.id,
-  name: "doc.command.paste",
-  type: CommandType.COMMAND,
-  multi: !0,
-  priority: DOC_CLIPBOARD_PRIORITY,
-  preconditions: whenDocOrEditor,
-  handler: /* @__PURE__ */ __name(async (accessor) => {
-    const docClipboardService = accessor.get(IDocClipboardService), clipboardItems = await accessor.get(IClipboardInterfaceService).read();
-    return clipboardItems.length === 0 ? !1 : docClipboardService.paste(clipboardItems);
-  }, "handler")
-}, DocParagraphSettingCommand = {
-  id: "doc-paragraph-setting.command",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name(async (accessor, config) => {
-    var _a22, _b, _c;
-    const textSelectionManagerService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), docRanges = textSelectionManagerService.getDocRanges();
-    if (!docDataModel || docRanges.length === 0 || !config)
-      return !1;
-    const segmentId = docRanges[0].segmentId, unitId = docDataModel.getUnitId(), allParagraphs = (_b = (_a22 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a22.paragraphs) != null ? _b : [], paragraphs = (_c = getParagraphsInRanges(docRanges, allParagraphs)) != null ? _c : [], serializedSelections = docRanges.map(serializeDocRange), doMutation = {
-      id: RichTextEditingMutation.id,
-      params: {
-        unitId,
-        actions: [],
-        textRanges: serializedSelections
-      }
-    }, memoryCursor = new MemoryCursor();
-    memoryCursor.reset();
-    const textX = new TextX(), jsonX = JSONX.getInstance();
-    for (const paragraph of paragraphs) {
-      const { startIndex } = paragraph;
-      textX.push({
-        t: TextXActionType.RETAIN,
-        len: startIndex - memoryCursor.cursor,
-        segmentId
-      });
-      const paragraphStyle = {
-        ...paragraph.paragraphStyle,
-        ...config
-      };
-      textX.push({
-        t: TextXActionType.RETAIN,
-        len: 1,
-        body: {
-          dataStream: "",
-          paragraphs: [
-            {
-              ...paragraph,
-              paragraphStyle,
-              startIndex: 0
-            }
-          ]
-        },
-        segmentId,
-        coverType: UpdateDocsAttributeType.REPLACE
-      }), memoryCursor.moveCursorTo(startIndex + 1);
-    }
-    const path = getRichTextEditPath(docDataModel, segmentId);
-    return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-  }, "handler")
-}, useCurrentParagraph = /* @__PURE__ */ __name(() => {
-  var _a22, _b, _c;
-  const textSelectionManagerService = useDependency(TextSelectionManagerService), docDataModel = useDependency(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), docRanges = useMemo(() => textSelectionManagerService.getDocRanges(), []);
-  if (!docDataModel || docRanges.length === 0)
-    return [];
-  const segmentId = docRanges[0].segmentId, paragraphs = (_b = (_a22 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a22.paragraphs) != null ? _b : [];
-  return (_c = getParagraphsInRanges(docRanges, paragraphs)) != null ? _c : [];
-}, "useCurrentParagraph"), useFirstParagraphHorizontalAlign = /* @__PURE__ */ __name((paragraph, defaultValue) => {
-  const commandService = useDependency(ICommandService), [horizontalAlign, _horizontalAlignSet] = useState(() => {
-    var _a22, _b;
-    const firstParagraph = paragraph[0];
-    return firstParagraph ? String((_b = (_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.horizontalAlign) != null ? _b : defaultValue) : defaultValue;
-  });
-  return [horizontalAlign, /* @__PURE__ */ __name((v) => (_horizontalAlignSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
-    horizontalAlign: Number(v)
-  })), "horizontalAlignSet")];
-}, "useFirstParagraphHorizontalAlign"), useFirstParagraphIndentStart = /* @__PURE__ */ __name((paragraph) => {
-  const commandService = useDependency(ICommandService), [indentStart, _indentStartSet] = useState(() => {
-    var _a22;
-    const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.indentStart, 0) : 0;
-  });
-  return [indentStart, /* @__PURE__ */ __name((v) => (_indentStartSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
-    indentStart: { v }
-  })), "indentStartSet")];
-}, "useFirstParagraphIndentStart"), useFirstParagraphIndentEnd = /* @__PURE__ */ __name((paragraph) => {
-  const commandService = useDependency(ICommandService), [indentEnd, _indentEndSet] = useState(() => {
-    var _a22;
-    const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.indentEnd, 0) : 0;
-  });
-  return [indentEnd, /* @__PURE__ */ __name((v) => (_indentEndSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
-    indentEnd: { v }
-  })), "indentEndSet")];
-}, "useFirstParagraphIndentEnd"), useFirstParagraphIndentFirstLine = /* @__PURE__ */ __name((paragraph) => {
-  const commandService = useDependency(ICommandService), [indentFirstLine, _indentFirstLineSet] = useState(() => {
-    var _a22;
-    const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.indentFirstLine, 0) : 0;
-  });
-  return [indentFirstLine, /* @__PURE__ */ __name((v) => (_indentFirstLineSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
-    indentFirstLine: { v }
-  })), "indentFirstLineSet")];
-}, "useFirstParagraphIndentFirstLine"), useFirstParagraphIndentHanging = /* @__PURE__ */ __name((paragraph) => {
-  const commandService = useDependency(ICommandService), [hanging, _hangingSet] = useState(() => {
-    var _a22;
-    const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.hanging, 0) : 0;
-  });
-  return [hanging, /* @__PURE__ */ __name((v) => (_hangingSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
-    hanging: { v }
-  })), "hangingSet")];
-}, "useFirstParagraphIndentHanging"), useFirstParagraphIndentSpaceAbove = /* @__PURE__ */ __name((paragraph) => {
-  const commandService = useDependency(ICommandService), [spaceAbove, _spaceAboveSet] = useState(() => {
-    var _a22;
-    const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.spaceAbove, 0) : 0;
-  });
-  return [spaceAbove, /* @__PURE__ */ __name((v) => (_spaceAboveSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
-    spaceAbove: { v }
-  })), "spaceAboveSet")];
-}, "useFirstParagraphIndentSpaceAbove"), useFirstParagraphSpaceBelow = /* @__PURE__ */ __name((paragraph) => {
-  const commandService = useDependency(ICommandService), [spaceBelow, _spaceBelowSet] = useState(() => {
-    var _a22;
-    const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.spaceBelow, 0) : 0;
-  });
-  return [spaceBelow, /* @__PURE__ */ __name((v) => (_spaceBelowSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
-    spaceBelow: { v }
-  })), "spaceBelowSet")];
-}, "useFirstParagraphSpaceBelow"), useFirstParagraphLineSpacing = /* @__PURE__ */ __name((paragraph) => {
-  const commandService = useDependency(ICommandService), [lineSpacing, _lineSpacingSet] = useState(() => {
-    var _a22, _b;
-    const firstParagraph = paragraph[0];
-    return firstParagraph && (_b = (_a22 = firstParagraph.paragraphStyle) == null ? void 0 : _a22.lineSpacing) != null ? _b : 1;
-  });
-  return [lineSpacing, /* @__PURE__ */ __name((v) => (_lineSpacingSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
-    lineSpacing: v
-  })), "lineSpacingSet")];
-}, "useFirstParagraphLineSpacing"), paragraphSettingIconList = "univer-paragraph-setting-icon-list", paragraphSettingIconListItem = "univer-paragraph-setting-icon-list-item", paragraphSettingIconListActive = "univer-paragraph-setting-icon-list-active", paragraphSettingTitle = "univer-paragraph-setting-title", paragraphSettingLabel = "univer-paragraph-setting-label", paragraphSettingMtBase = "univer-paragraph-setting-mt-base", paragraphSettingFlexCol = "univer-paragraph-setting-flex-col", styles$1 = {
-  paragraphSettingIconList,
-  paragraphSettingIconListItem,
-  paragraphSettingIconListActive,
-  paragraphSettingTitle,
-  paragraphSettingLabel,
-  paragraphSettingMtBase,
-  paragraphSettingFlexCol
-}, AutoFocusInputNumber = /* @__PURE__ */ __name((props) => {
-  const { value, onChange, className = "", min = 0, max = 100 } = props, ref = require$$0.useRef(null);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    InputNumber,
-    {
-      ref,
-      min,
-      max,
-      value,
-      onChange: /* @__PURE__ */ __name((v) => {
-        onChange(v != null ? v : 0).finally(() => {
-          setTimeout(() => {
-            var _a22;
-            (_a22 = ref.current) == null || _a22.focus();
-          }, 2);
-        });
-      }, "onChange"),
-      className
-    }
-  );
-}, "AutoFocusInputNumber");
-function ParagraphSetting() {
-  const localeService = useDependency(LocaleService), alignmentOptions = useMemo(
-    () => [
-      { label: localeService.t("toolbar.alignLeft"), value: String(HorizontalAlign.LEFT), icon: /* @__PURE__ */ jsxRuntimeExports.jsx(LeftJustifyingSingle, {}) },
-      { label: localeService.t("toolbar.alignCenter"), value: String(HorizontalAlign.CENTER), icon: /* @__PURE__ */ jsxRuntimeExports.jsx(HorizontallySingle, {}) },
-      { label: localeService.t("toolbar.alignRight"), value: String(HorizontalAlign.RIGHT), icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RightJustifyingSingle, {}) },
-      { label: localeService.t("toolbar.alignJustify"), value: String(HorizontalAlign.JUSTIFIED), icon: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignTextBothSingle, {}) }
-    ],
-    []
-  ), currentParagraph = useCurrentParagraph(), [horizontalAlignValue, horizontalAlignSet] = useFirstParagraphHorizontalAlign(currentParagraph, alignmentOptions[0].value), [indentStart, indentStartSet] = useFirstParagraphIndentStart(currentParagraph), [indentEnd, indentEndSet] = useFirstParagraphIndentEnd(currentParagraph), [indentFirstLine, indentFirstLineSet] = useFirstParagraphIndentFirstLine(currentParagraph), [hanging, hangingSet] = useFirstParagraphIndentHanging(currentParagraph), [spaceAbove, spaceAboveSet] = useFirstParagraphIndentSpaceAbove(currentParagraph), [spaceBelow, spaceBelowSet] = useFirstParagraphSpaceBelow(currentParagraph), [lineSpacing, lineSpacingSet] = useFirstParagraphLineSpacing(currentParagraph);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSetting, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.paragraphSettingTitle, children: localeService.t("doc.paragraphSetting.alignment") }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$1.paragraphSettingIconList} ${styles$1.paragraphSettingMtBase}`, children: alignmentOptions.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: item.label, placement: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "span",
+__name(FontFamilySelectorMenuItemFactory, "FontFamilySelectorMenuItemFactory");
+function FontSizeSelectorMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
+  return {
+    id: SetInlineFormatFontSizeCommand.id,
+    type: MenuItemType.SELECTOR,
+    tooltip: "toolbar.fontSize",
+    label: {
+      name: FONT_SIZE_COMPONENT,
+      props: {
+        min: 1,
+        max: 400
+        // disabled$,
+      }
+    },
+    selections: FONT_SIZE_LIST,
+    // disabled$,
+    value$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a22;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatFontSizeCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null) {
+            subscriber.next(14);
+            return;
+          }
+          const fs = (_a22 = textRun.ts) == null ? void 0 : _a22.fs;
+          subscriber.next(fs != null ? fs : 14);
+        }
+      });
+      return subscriber.next(14), disposable.dispose;
+    }),
+    disabled$: disableMenuWhenNoDocRange(accessor),
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
+  };
+}
+__name(FontSizeSelectorMenuItemFactory, "FontSizeSelectorMenuItemFactory");
+function TextColorSelectorMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService), themeService = accessor.get(ThemeService);
+  return {
+    id: SetInlineFormatTextColorCommand.id,
+    icon: "FontColor",
+    tooltip: "toolbar.textColor.main",
+    type: MenuItemType.BUTTON_SELECTOR,
+    selections: [
       {
-        className: clsx(
-          styles$1.paragraphSettingIconListItem,
-          { [styles$1.paragraphSettingIconListActive]: horizontalAlignValue === item.value }
-        ),
-        onClick: /* @__PURE__ */ __name(() => horizontalAlignSet(item.value), "onClick"),
-        children: item.icon
+        label: {
+          name: COLOR_PICKER_COMPONENT,
+          hoverable: !1
+        }
       }
-    ) }, item.value)) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.paragraphSettingTitle, children: localeService.t("doc.paragraphSetting.indentation") }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
-          localeService.t("doc.paragraphSetting.left"),
-          "(px)"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: indentStart, onChange: /* @__PURE__ */ __name((v) => indentStartSet(v != null ? v : 0), "onChange") })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
-          localeService.t("doc.paragraphSetting.right"),
-          "(px)"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: indentEnd, onChange: /* @__PURE__ */ __name((v) => indentEndSet(v != null ? v : 0), "onChange") })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
-          localeService.t("doc.paragraphSetting.firstLine"),
-          "(px)"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: indentFirstLine, onChange: /* @__PURE__ */ __name((v) => indentFirstLineSet(v != null ? v : 0), "onChange") })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
-          localeService.t("doc.paragraphSetting.hanging"),
-          "(px)"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: hanging, onChange: /* @__PURE__ */ __name((v) => hangingSet(v != null ? v : 0), "onChange") })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.paragraphSettingTitle, children: localeService.t("doc.paragraphSetting.spacing") }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
-          localeService.t("doc.paragraphSetting.before"),
-          "(px)"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: spaceAbove, onChange: /* @__PURE__ */ __name((v) => spaceAboveSet(v != null ? v : 0), "onChange") })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingLabel, children: [
-          localeService.t("doc.paragraphSetting.after"),
-          "(px)"
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { className: styles$1.paragraphSettingMtBase, value: spaceBelow, onChange: /* @__PURE__ */ __name((v) => spaceBelowSet(v != null ? v : 0), "onChange") })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.paragraphSettingFlexCol, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.paragraphSettingLabel, children: localeService.t("doc.paragraphSetting.lineSpace") }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AutoFocusInputNumber, { min: 1, max: 5, className: styles$1.paragraphSettingMtBase, value: lineSpacing, onChange: /* @__PURE__ */ __name((v) => lineSpacingSet(v != null ? v : 0), "onChange") })
-      ] })
-    ] })
-  ] });
+    ],
+    value$: new Observable((subscriber) => {
+      const defaultColor = themeService.getCurrentTheme().textColor, disposable = commandService.onCommandExecuted((c) => {
+        if (c.id === SetInlineFormatTextColorCommand.id) {
+          const color = c.params.value;
+          subscriber.next(color != null ? color : defaultColor);
+        }
+      });
+      return subscriber.next(defaultColor), disposable.dispose;
+    }),
+    disabled$: disableMenuWhenNoDocRange(accessor),
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
+    // disabled$: getCurrentSheetDisabled$(accessor),
+  };
+}
+__name(TextColorSelectorMenuItemFactory, "TextColorSelectorMenuItemFactory");
+function HeaderFooterMenuItemFactory(accessor) {
+  return {
+    id: OpenHeaderFooterPanelCommand.id,
+    type: MenuItemType.BUTTON,
+    icon: "FreezeRowSingle",
+    tooltip: "toolbar.headerFooter",
+    hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getHeaderFooterMenuHiddenObservable(accessor), (one, two) => one || two)
+  };
+}
+__name(HeaderFooterMenuItemFactory, "HeaderFooterMenuItemFactory");
+const TableIcon = "GridSingle", TABLE_MENU_ID = "doc.menu.table";
+function TableMenuFactory(accessor) {
+  return {
+    id: TABLE_MENU_ID,
+    type: MenuItemType.SUBITEMS,
+    icon: TableIcon,
+    tooltip: "toolbar.table.main",
+    disabled$: getTableDisabledObservable(accessor),
+    // Do not show header footer menu and insert table at zen mode.
+    hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getInsertTableHiddenObservable(accessor), getHeaderFooterMenuHiddenObservable(accessor), (one, two, three) => one || two || three)
+  };
+}
+__name(TableMenuFactory, "TableMenuFactory");
+function InsertTableMenuFactory(_accessor) {
+  return {
+    id: DocCreateTableOperation.id,
+    title: "toolbar.table.insert",
+    type: MenuItemType.BUTTON,
+    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_DOC)
+  };
+}
+__name(InsertTableMenuFactory, "InsertTableMenuFactory");
+function AlignLeftMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
+  return {
+    id: AlignLeftCommand.id,
+    type: MenuItemType.BUTTON,
+    icon: "LeftJustifyingSingle",
+    tooltip: "toolbar.alignLeft",
+    disabled$: disableMenuWhenNoDocRange(accessor),
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a22;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+          const paragraph = getParagraphStyleAtCursor(accessor);
+          if (paragraph == null)
+            return;
+          const alignType = (_a22 = paragraph.paragraphStyle) == null ? void 0 : _a22.horizontalAlign;
+          subscriber.next(alignType === HorizontalAlign.LEFT);
+        }
+      });
+      return subscriber.next(!1), disposable.dispose;
+    }),
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
+  };
+}
+__name(AlignLeftMenuItemFactory, "AlignLeftMenuItemFactory");
+function AlignCenterMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
+  return {
+    id: AlignCenterCommand.id,
+    type: MenuItemType.BUTTON,
+    icon: "HorizontallySingle",
+    tooltip: "toolbar.alignCenter",
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a22;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+          const paragraph = getParagraphStyleAtCursor(accessor);
+          if (paragraph == null)
+            return;
+          const alignType = (_a22 = paragraph.paragraphStyle) == null ? void 0 : _a22.horizontalAlign;
+          subscriber.next(alignType === HorizontalAlign.CENTER);
+        }
+      });
+      return subscriber.next(!1), disposable.dispose;
+    }),
+    disabled$: disableMenuWhenNoDocRange(accessor),
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
+  };
+}
+__name(AlignCenterMenuItemFactory, "AlignCenterMenuItemFactory");
+function AlignRightMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
+  return {
+    id: AlignRightCommand.id,
+    type: MenuItemType.BUTTON,
+    icon: "RightJustifyingSingle",
+    tooltip: "toolbar.alignRight",
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a22;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+          const paragraph = getParagraphStyleAtCursor(accessor);
+          if (paragraph == null)
+            return;
+          const alignType = (_a22 = paragraph.paragraphStyle) == null ? void 0 : _a22.horizontalAlign;
+          subscriber.next(alignType === HorizontalAlign.RIGHT);
+        }
+      });
+      return subscriber.next(!1), disposable.dispose;
+    }),
+    disabled$: disableMenuWhenNoDocRange(accessor),
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
+  };
+}
+__name(AlignRightMenuItemFactory, "AlignRightMenuItemFactory");
+function AlignJustifyMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
+  return {
+    id: AlignJustifyCommand.id,
+    type: MenuItemType.BUTTON,
+    icon: "AlignTextBothSingle",
+    tooltip: "toolbar.alignJustify",
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a22;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+          const paragraph = getParagraphStyleAtCursor(accessor);
+          if (paragraph == null)
+            return;
+          const alignType = (_a22 = paragraph.paragraphStyle) == null ? void 0 : _a22.horizontalAlign;
+          subscriber.next(alignType === HorizontalAlign.JUSTIFIED);
+        }
+      });
+      return subscriber.next(!1), disposable.dispose;
+    }),
+    disabled$: disableMenuWhenNoDocRange(accessor),
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
+  };
 }
-__name(ParagraphSetting, "ParagraphSetting");
-const isRangesEqual = /* @__PURE__ */ __name((oldRanges, ranges) => ranges.length === oldRanges.length && oldRanges.some((oldRange) => ranges.some((range) => range.startOffset === oldRange.startOffset && range.endOffset === oldRange.endOffset)), "isRangesEqual"), isRangesIntersection = /* @__PURE__ */ __name((oldRanges, ranges) => oldRanges.some((oldRange) => ranges.some((range) => {
-  const { startOffset: activeStart, endOffset: activeEnd } = oldRange, { startOffset: compareStart, endOffset: compareEnd } = range;
-  return activeStart == null || activeEnd == null || compareStart == null || compareEnd == null ? !1 : activeStart <= compareEnd && activeEnd >= compareStart;
-})), "isRangesIntersection");
-function ParagraphSettingIndex() {
-  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), currentLocale = useObservable(localeService.currentLocale$), [key, keySet] = useState(""), rangeRef = useRef([]);
-  return useEffect(() => {
-    const dispose = commandService.onCommandExecuted((info) => {
-      var _a22;
-      if (SetTextSelectionsOperation.id === info.id) {
-        const ranges = info.params.ranges;
-        isRangesEqual(ranges, rangeRef.current) || keySet(generateRandomId(4)), rangeRef.current = ranges;
+__name(AlignJustifyMenuItemFactory, "AlignJustifyMenuItemFactory");
+const listValueFactory$ = /* @__PURE__ */ __name((accessor) => new Observable((subscriber) => {
+  const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionManagerService = accessor.get(TextSelectionManagerService);
+  let textSubscription;
+  const subscription = univerInstanceService.focused$.subscribe((unitId) => {
+    if (textSubscription == null || textSubscription.unsubscribe(), unitId == null)
+      return;
+    const docDataModel = univerInstanceService.getUniverDocInstance(unitId);
+    docDataModel != null && (textSubscription = textSelectionManagerService.textSelection$.subscribe(() => {
+      var _a22, _b;
+      const range = textSelectionManagerService.getActiveTextRangeWithStyle();
+      if (range) {
+        const doc = docDataModel.getSelfOrHeaderFooterModel(range == null ? void 0 : range.segmentId), paragraphs = getParagraphsInRange(range, (_b = (_a22 = doc.getBody()) == null ? void 0 : _a22.paragraphs) != null ? _b : []);
+        let listType;
+        if (paragraphs.every((p2) => {
+          var _a23;
+          return listType || (listType = (_a23 = p2.bullet) == null ? void 0 : _a23.listType), p2.bullet && p2.bullet.listType === listType;
+        })) {
+          subscriber.next(listType);
+          return;
+        }
       }
-      if (RichTextEditingMutation.id === info.id) {
-        const params = info.params, ranges = (_a22 = params.textRanges) != null ? _a22 : [];
-        params.trigger !== DocParagraphSettingCommand.id && isRangesIntersection(ranges, rangeRef.current) && keySet(generateRandomId(4));
+      subscriber.next(void 0);
+    }));
+  });
+  return () => {
+    subscription.unsubscribe(), textSubscription == null || textSubscription.unsubscribe();
+  };
+}), "listValueFactory$");
+function OrderListMenuItemFactory(accessor) {
+  return {
+    id: OrderListCommand.id,
+    type: MenuItemType.BUTTON_SELECTOR,
+    selections: [
+      {
+        label: {
+          name: ORDER_LIST_TYPE_COMPONENT,
+          hoverable: !1
+        },
+        value$: listValueFactory$(accessor)
       }
-    });
-    return () => dispose.dispose();
-  }, []), useEffect(() => {
-    keySet(generateRandomId(4));
-  }, [currentLocale]), /* @__PURE__ */ jsxRuntimeExports.jsx(ParagraphSetting, {}, key);
+    ],
+    icon: "OrderSingle",
+    tooltip: "toolbar.order",
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
+    disabled$: disableMenuWhenNoDocRange(accessor),
+    activated$: listValueFactory$(accessor).pipe(map$1((v) => v && v.indexOf("ORDER_LIST") === 0))
+  };
 }
-__name(ParagraphSettingIndex, "ParagraphSettingIndex");
-var __defProp$f = Object.defineProperty, __getOwnPropDesc$f = Object.getOwnPropertyDescriptor, __decorateClass$f = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$f(target, key, result), result;
-}, "__decorateClass$f"), __decorateParam$f = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$f");
-const paragraphSettingIndexKey = "doc_ui_paragraph-setting-panel";
-var _a6;
-let DocParagraphSettingController = (_a6 = class extends Disposable {
-  constructor(_commandService, _componentManager, _sidebarService) {
-    super(), this._commandService = _commandService, this._componentManager = _componentManager, this._sidebarService = _sidebarService, this._init();
-  }
-  _init() {
-    this.disposeWithMe(this._componentManager.register(paragraphSettingIndexKey, ParagraphSettingIndex));
+__name(OrderListMenuItemFactory, "OrderListMenuItemFactory");
+function BulletListMenuItemFactory(accessor) {
+  return {
+    id: BulletListCommand.id,
+    type: MenuItemType.BUTTON_SELECTOR,
+    selections: [
+      {
+        label: {
+          name: BULLET_LIST_TYPE_COMPONENT,
+          hoverable: !1
+        },
+        value$: listValueFactory$(accessor)
+      }
+    ],
+    icon: "UnorderSingle",
+    tooltip: "toolbar.unorder",
+    disabled$: disableMenuWhenNoDocRange(accessor),
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
+    activated$: listValueFactory$(accessor).pipe(map$1((v) => v && v.indexOf("BULLET_LIST") === 0))
+  };
+}
+__name(BulletListMenuItemFactory, "BulletListMenuItemFactory");
+function CheckListMenuItemFactory(accessor) {
+  return {
+    id: CheckListCommand.id,
+    type: MenuItemType.BUTTON,
+    icon: "TodoList",
+    tooltip: "toolbar.checklist",
+    disabled$: disableMenuWhenNoDocRange(accessor),
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
+    activated$: listValueFactory$(accessor).pipe(map$1((v) => v && v.indexOf("CHECK_LIST") === 0))
+  };
+}
+__name(CheckListMenuItemFactory, "CheckListMenuItemFactory");
+function ResetBackgroundColorMenuItemFactory(accessor) {
+  return {
+    id: ResetInlineFormatTextBackgroundColorCommand.id,
+    type: MenuItemType.BUTTON,
+    title: "toolbar.resetColor",
+    icon: "NoColor"
+  };
+}
+__name(ResetBackgroundColorMenuItemFactory, "ResetBackgroundColorMenuItemFactory");
+function BackgroundColorSelectorMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService), themeService = accessor.get(ThemeService);
+  return {
+    id: SetInlineFormatTextBackgroundColorCommand.id,
+    tooltip: "toolbar.fillColor.main",
+    type: MenuItemType.BUTTON_SELECTOR,
+    icon: "PaintBucket",
+    selections: [
+      {
+        label: {
+          name: COLOR_PICKER_COMPONENT,
+          hoverable: !1
+        }
+      }
+    ],
+    value$: new Observable((subscriber) => {
+      const defaultColor = themeService.getCurrentTheme().primaryColor, disposable = commandService.onCommandExecuted((c) => {
+        if (c.id === SetInlineFormatTextBackgroundColorCommand.id) {
+          const color = c.params.value;
+          subscriber.next(color != null ? color : defaultColor);
+        }
+      });
+      return subscriber.next(defaultColor), disposable.dispose;
+    }),
+    disabled$: disableMenuWhenNoDocRange(accessor),
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
+  };
+}
+__name(BackgroundColorSelectorMenuItemFactory, "BackgroundColorSelectorMenuItemFactory");
+function getFontStyleAtCursor(accessor) {
+  var _a22;
+  const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionService = accessor.get(TextSelectionManagerService), docDataModel = univerInstanceService.getCurrentUniverDocInstance(), activeTextRange = textSelectionService.getActiveTextRangeWithStyle();
+  if (docDataModel == null || activeTextRange == null)
+    return;
+  const { startOffset, segmentId } = activeTextRange, textRuns = (_a22 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a22.textRuns;
+  if (textRuns == null)
+    return;
+  let textRun;
+  for (let i = textRuns.length - 1; i >= 0; i--) {
+    const curTextRun = textRuns[i];
+    if (curTextRun.st <= startOffset && startOffset <= curTextRun.ed) {
+      textRun = curTextRun;
+      break;
+    }
   }
-  openPanel() {
-    const props = {
-      header: { title: "doc.slider.paragraphSetting" },
-      children: {
-        label: paragraphSettingIndexKey
-      },
-      width: 300
-    };
-    this._sidebarService.open(props);
+  return textRun;
+}
+__name(getFontStyleAtCursor, "getFontStyleAtCursor");
+function getParagraphStyleAtCursor(accessor) {
+  var _a22;
+  const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionService = accessor.get(TextSelectionManagerService), docDataModel = univerInstanceService.getCurrentUniverDocInstance(), activeTextRange = textSelectionService.getActiveTextRangeWithStyle();
+  if (docDataModel == null || activeTextRange == null)
+    return;
+  const { startOffset, segmentId } = activeTextRange, paragraphs = (_a22 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a22.paragraphs;
+  if (paragraphs == null)
+    return;
+  let prevIndex = -1;
+  for (const paragraph of paragraphs) {
+    const { startIndex } = paragraph;
+    if (startOffset > prevIndex && startOffset <= startIndex)
+      return paragraph;
+    prevIndex = startIndex;
   }
-}, __name(_a6, "DocParagraphSettingController"), _a6);
-DocParagraphSettingController = __decorateClass$f([
-  OnLifecycle(LifecycleStages.Rendered, DocParagraphSettingController),
-  __decorateParam$f(0, ICommandService),
-  __decorateParam$f(1, Inject(ComponentManager)),
-  __decorateParam$f(2, Inject(ISidebarService))
-], DocParagraphSettingController);
-const DocParagraphSettingPanelOperation = {
-  id: "sidebar.operation.doc-paragraph-setting-panel",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor) => (accessor.get(DocParagraphSettingController).openPanel(), !0), "handler")
-}, getDisableOnCollapsedObservable = /* @__PURE__ */ __name((accessor) => {
+  return null;
+}
+__name(getParagraphStyleAtCursor, "getParagraphStyleAtCursor");
+const getDisableOnCollapsedObservable = /* @__PURE__ */ __name((accessor) => {
   const textSelectionManagerService = accessor.get(TextSelectionManagerService);
   return new Observable((subscriber) => {
     const observable = textSelectionManagerService.textSelection$.subscribe(() => {
@@ -2935,11 +2960,9 @@ const getDisableWhenSelectionNotInTableObservable = /* @__PURE__ */ __name((acce
 }, "getDisableWhenSelectionNotInTableObservable"), CopyMenuFactory = /* @__PURE__ */ __name((accessor) => ({
   id: DocCopyCommand.name,
   commandId: DocCopyCommand.id,
-  group: MenuGroup.CONTEXT_MENU_FORMAT,
   type: MenuItemType.BUTTON,
   icon: "Copy",
   title: "rightClick.copy",
-  positions: [MenuPosition.CONTEXT_MENU],
   disabled$: getDisableOnCollapsedObservable(accessor),
   hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
 }), "CopyMenuFactory"), ParagraphSettingMenuFactory = /* @__PURE__ */ __name((accessor) => ({
@@ -2947,43 +2970,34 @@ const getDisableWhenSelectionNotInTableObservable = /* @__PURE__ */ __name((acce
   type: MenuItemType.BUTTON,
   icon: "MenuSingle24",
   title: "doc.menu.paragraphSetting",
-  positions: [MenuPosition.CONTEXT_MENU],
   hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
 }), "ParagraphSettingMenuFactory"), CutMenuFactory = /* @__PURE__ */ __name((accessor) => ({
   id: DocCutCommand.id,
-  group: MenuGroup.CONTEXT_MENU_FORMAT,
   type: MenuItemType.BUTTON,
   icon: "Copy",
   title: "rightClick.cut",
-  positions: [MenuPosition.CONTEXT_MENU],
   disabled$: getDisableOnCollapsedObservable(accessor),
   hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
 }), "CutMenuFactory"), PasteMenuFactory = /* @__PURE__ */ __name((accessor) => ({
   id: DocPasteCommand.id,
-  group: MenuGroup.CONTEXT_MENU_FORMAT,
   type: MenuItemType.BUTTON,
   icon: "PasteSpecial",
   title: "rightClick.paste",
-  positions: [MenuPosition.CONTEXT_MENU],
   hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
 }), "PasteMenuFactory"), DeleteMenuFactory = /* @__PURE__ */ __name((accessor) => ({
   id: DeleteLeftCommand.id,
-  group: MenuGroup.CONTEXT_MENU_FORMAT,
   type: MenuItemType.BUTTON,
   icon: "PasteSpecial",
   title: "rightClick.delete",
-  positions: [MenuPosition.CONTEXT_MENU],
   disabled$: getDisableOnCollapsedObservable(accessor),
   hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
 }), "DeleteMenuFactory"), TABLE_INSERT_MENU_ID = "doc.menu.table-insert";
 function TableInsertMenuItemFactory(accessor) {
   return {
     id: TABLE_INSERT_MENU_ID,
-    group: MenuGroup.CONTEXT_MENU_LAYOUT,
     type: MenuItemType.SUBITEMS,
     title: "table.insert",
     icon: "Insert",
-    positions: [MenuPosition.CONTEXT_MENU],
     hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getDisableWhenSelectionNotInTableObservable(accessor), (one, two) => one || two)
   };
 }
@@ -2994,7 +3008,6 @@ function InsertRowBeforeMenuItemFactory(accessor) {
     type: MenuItemType.BUTTON,
     title: "table.insertRowAbove",
     icon: "InsertRowAbove",
-    positions: [TABLE_INSERT_MENU_ID],
     disabled$: getDisableWhenSelectionNotInTableObservable(accessor),
     hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
@@ -3004,7 +3017,6 @@ function InsertRowAfterMenuItemFactory(accessor) {
   return {
     id: DocTableInsertRowBellowCommand.id,
     type: MenuItemType.BUTTON,
-    positions: [TABLE_INSERT_MENU_ID],
     title: "table.insertRowBelow",
     icon: "InsertRowBelow",
     disabled$: getDisableWhenSelectionNotInTableObservable(accessor),
@@ -3018,7 +3030,6 @@ function InsertColumnLeftMenuItemFactory(accessor) {
     type: MenuItemType.BUTTON,
     title: "table.insertColumnLeft",
     icon: "LeftInsertColumn",
-    positions: [TABLE_INSERT_MENU_ID],
     disabled$: getDisableWhenSelectionNotInTableObservable(accessor),
     hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
@@ -3028,7 +3039,6 @@ function InsertColumnRightMenuItemFactory(accessor) {
   return {
     id: DocTableInsertColumnRightCommand.id,
     type: MenuItemType.BUTTON,
-    positions: [TABLE_INSERT_MENU_ID],
     title: "table.insertColumnRight",
     icon: "RightInsertColumn",
     disabled$: getDisableWhenSelectionNotInTableObservable(accessor),
@@ -3040,11 +3050,9 @@ const TABLE_DELETE_MENU_ID = "doc.menu.table-delete";
 function TableDeleteMenuItemFactory(accessor) {
   return {
     id: TABLE_DELETE_MENU_ID,
-    group: MenuGroup.CONTEXT_MENU_LAYOUT,
     type: MenuItemType.SUBITEMS,
     title: "table.delete",
     icon: "Reduce",
-    positions: [MenuPosition.CONTEXT_MENU],
     hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getDisableWhenSelectionNotInTableObservable(accessor), (one, two) => one || two)
   };
 }
@@ -3055,7 +3063,6 @@ function DeleteRowsMenuItemFactory(accessor) {
     type: MenuItemType.BUTTON,
     title: "table.deleteRows",
     icon: "DeleteRow",
-    positions: [TABLE_DELETE_MENU_ID],
     disabled$: getDisableWhenSelectionNotInTableObservable(accessor),
     hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
@@ -3065,7 +3072,6 @@ function DeleteColumnsMenuItemFactory(accessor) {
   return {
     id: DocTableDeleteColumnsCommand.id,
     type: MenuItemType.BUTTON,
-    positions: [TABLE_DELETE_MENU_ID],
     title: "table.deleteColumns",
     icon: "DeleteColumn",
     disabled$: getDisableWhenSelectionNotInTableObservable(accessor),
@@ -3077,7 +3083,6 @@ function DeleteTableMenuItemFactory(accessor) {
   return {
     id: DocTableDeleteTableCommand.id,
     type: MenuItemType.BUTTON,
-    positions: [TABLE_DELETE_MENU_ID],
     title: "table.deleteTable",
     icon: "GridSingle",
     disabled$: getDisableWhenSelectionNotInTableObservable(accessor),
@@ -3085,14 +3090,166 @@ function DeleteTableMenuItemFactory(accessor) {
   };
 }
 __name(DeleteTableMenuItemFactory, "DeleteTableMenuItemFactory");
+const menuSchema = {
+  [RibbonStartGroup.FORMAT]: {
+    [SetInlineFormatBoldCommand.id]: {
+      order: 0,
+      menuItemFactory: BoldMenuItemFactory
+    },
+    [SetInlineFormatItalicCommand.id]: {
+      order: 1,
+      menuItemFactory: ItalicMenuItemFactory
+    },
+    [SetInlineFormatUnderlineCommand.id]: {
+      order: 2,
+      menuItemFactory: UnderlineMenuItemFactory
+    },
+    [SetInlineFormatStrikethroughCommand.id]: {
+      order: 3,
+      menuItemFactory: StrikeThroughMenuItemFactory
+    },
+    [SetInlineFormatSubscriptCommand.id]: {
+      order: 4,
+      menuItemFactory: SubscriptMenuItemFactory
+    },
+    [SetInlineFormatSuperscriptCommand.id]: {
+      order: 5,
+      menuItemFactory: SuperscriptMenuItemFactory
+    },
+    [SetInlineFormatFontSizeCommand.id]: {
+      order: 6,
+      menuItemFactory: FontSizeSelectorMenuItemFactory
+    },
+    [SetInlineFormatFontFamilyCommand.id]: {
+      order: 7,
+      menuItemFactory: FontFamilySelectorMenuItemFactory
+    },
+    [SetInlineFormatTextColorCommand.id]: {
+      order: 8,
+      menuItemFactory: TextColorSelectorMenuItemFactory
+    },
+    [SetInlineFormatTextBackgroundColorCommand.id]: {
+      order: 9,
+      menuItemFactory: BackgroundColorSelectorMenuItemFactory,
+      [ResetInlineFormatTextBackgroundColorCommand.id]: {
+        order: 0,
+        menuItemFactory: ResetBackgroundColorMenuItemFactory
+      }
+    }
+  },
+  [RibbonStartGroup.LAYOUT]: {
+    [TABLE_MENU_ID]: {
+      order: 1,
+      menuItemFactory: TableMenuFactory,
+      [DocCreateTableOperation.id]: {
+        order: 0,
+        menuItemFactory: InsertTableMenuFactory
+      }
+    },
+    [AlignLeftCommand.id]: {
+      order: 2,
+      menuItemFactory: AlignLeftMenuItemFactory
+    },
+    [AlignCenterCommand.id]: {
+      order: 3,
+      menuItemFactory: AlignCenterMenuItemFactory
+    },
+    [AlignRightCommand.id]: {
+      order: 4,
+      menuItemFactory: AlignRightMenuItemFactory
+    },
+    [AlignJustifyCommand.id]: {
+      order: 5,
+      menuItemFactory: AlignJustifyMenuItemFactory
+    },
+    [OrderListCommand.id]: {
+      order: 6,
+      menuItemFactory: OrderListMenuItemFactory
+    },
+    [BulletListCommand.id]: {
+      order: 7,
+      menuItemFactory: BulletListMenuItemFactory
+    },
+    [CheckListCommand.id]: {
+      order: 8,
+      menuItemFactory: CheckListMenuItemFactory
+    },
+    [OpenHeaderFooterPanelCommand.id]: {
+      order: 9,
+      menuItemFactory: HeaderFooterMenuItemFactory
+    }
+  },
+  [ContextMenuPosition.MAIN_AREA]: {
+    [ContextMenuGroup.FORMAT]: {
+      [DocCopyCommand.name]: {
+        order: 0,
+        menuItemFactory: CopyMenuFactory
+      },
+      [DocCutCommand.id]: {
+        order: 1,
+        menuItemFactory: CutMenuFactory
+      },
+      [DocPasteCommand.id]: {
+        order: 2,
+        menuItemFactory: PasteMenuFactory
+      },
+      [DeleteLeftCommand.id]: {
+        order: 3,
+        menuItemFactory: DeleteMenuFactory
+      }
+    },
+    [ContextMenuGroup.LAYOUT]: {
+      [DocParagraphSettingPanelOperation.id]: {
+        order: 0,
+        menuItemFactory: ParagraphSettingMenuFactory
+      },
+      [TABLE_INSERT_MENU_ID]: {
+        order: 1,
+        menuItemFactory: TableInsertMenuItemFactory,
+        [DocTableInsertRowAboveCommand.id]: {
+          order: 1,
+          menuItemFactory: InsertRowBeforeMenuItemFactory
+        },
+        [DocTableInsertRowBellowCommand.id]: {
+          order: 2,
+          menuItemFactory: InsertRowAfterMenuItemFactory
+        },
+        [DocTableInsertColumnLeftCommand.id]: {
+          order: 3,
+          menuItemFactory: InsertColumnLeftMenuItemFactory
+        },
+        [DocTableInsertColumnRightCommand.id]: {
+          order: 4,
+          menuItemFactory: InsertColumnRightMenuItemFactory
+        }
+      },
+      [TABLE_DELETE_MENU_ID]: {
+        order: 2,
+        menuItemFactory: TableDeleteMenuItemFactory,
+        [DocTableDeleteRowsCommand.id]: {
+          order: 1,
+          menuItemFactory: DeleteRowsMenuItemFactory
+        },
+        [DocTableDeleteColumnsCommand.id]: {
+          order: 2,
+          menuItemFactory: DeleteColumnsMenuItemFactory
+        },
+        [DocTableDeleteTableCommand.id]: {
+          order: 3,
+          menuItemFactory: DeleteTableMenuItemFactory
+        }
+      }
+    }
+  }
+};
 var __defProp$e = Object.defineProperty, __getOwnPropDesc$e = Object.getOwnPropertyDescriptor, __decorateClass$e = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$e(target, key, result), result;
 }, "__decorateClass$e"), __decorateParam$e = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$e"), _a7;
 let DocUIController = (_a7 = class extends Disposable {
-  constructor(_config, _injector, _componentManager, _commandService, _layoutService, _menuService, _uiPartsService, _univerInstanceService, _shortcutService) {
-    super(), this._config = _config, this._injector = _injector, this._componentManager = _componentManager, this._commandService = _commandService, this._layoutService = _layoutService, this._menuService = _menuService, this._uiPartsService = _uiPartsService, this._univerInstanceService = _univerInstanceService, this._shortcutService = _shortcutService, this._init();
+  constructor(_injector, _componentManager, _commandService, _layoutService, _menuManagerService, _uiPartsService, _univerInstanceService, _shortcutService, _configService) {
+    super(), this._injector = _injector, this._componentManager = _componentManager, this._commandService = _commandService, this._layoutService = _layoutService, this._menuManagerService = _menuManagerService, this._uiPartsService = _uiPartsService, this._univerInstanceService = _univerInstanceService, this._shortcutService = _shortcutService, this._configService = _configService, this._init();
   }
   _initCustomComponents() {
     const componentManager = this._componentManager;
@@ -3100,56 +3257,11 @@ let DocUIController = (_a7 = class extends Disposable {
   }
   _initUiParts() {
     var _a22, _b;
-    const workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
-    (_b = (_a22 = this._config.layout) == null ? void 0 : _a22.docContainerConfig) != null && _b.footer && !workbook && this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.FOOTER, () => connectInjector(DocFooter, this._injector)));
+    const workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET), config = this._configService.getConfig(PLUGIN_CONFIG_KEY);
+    (_b = (_a22 = config == null ? void 0 : config.layout) == null ? void 0 : _a22.docContainerConfig) != null && _b.footer && !workbook && this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.FOOTER, () => connectInjector(DocFooter, this._injector)));
   }
   _initMenus() {
-    const { menu = {} } = this._config;
-    [
-      BoldMenuItemFactory,
-      ItalicMenuItemFactory,
-      UnderlineMenuItemFactory,
-      StrikeThroughMenuItemFactory,
-      SubscriptMenuItemFactory,
-      SuperscriptMenuItemFactory,
-      FontSizeSelectorMenuItemFactory,
-      FontFamilySelectorMenuItemFactory,
-      TextColorSelectorMenuItemFactory,
-      HeaderFooterMenuItemFactory,
-      TableMenuFactory,
-      InsertTableMenuFactory,
-      AlignLeftMenuItemFactory,
-      AlignCenterMenuItemFactory,
-      AlignRightMenuItemFactory,
-      AlignJustifyMenuItemFactory,
-      OrderListMenuItemFactory,
-      BulletListMenuItemFactory,
-      CheckListMenuItemFactory,
-      ResetBackgroundColorMenuItemFactory,
-      BackgroundColorSelectorMenuItemFactory
-    ].forEach((factory) => {
-      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(factory), menu));
-    }), [
-      CopyMenuFactory,
-      CutMenuFactory,
-      PasteMenuFactory,
-      DeleteMenuFactory,
-      ParagraphSettingMenuFactory,
-      TableInsertMenuItemFactory,
-      InsertRowBeforeMenuItemFactory,
-      InsertRowAfterMenuItemFactory,
-      InsertColumnLeftMenuItemFactory,
-      InsertColumnRightMenuItemFactory,
-      TableDeleteMenuItemFactory,
-      DeleteRowsMenuItemFactory,
-      DeleteColumnsMenuItemFactory,
-      DeleteTableMenuItemFactory
-    ].forEach((factory) => {
-      try {
-        this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(factory), menu));
-      } catch {
-      }
-    });
+    this._menuManagerService.mergeMenu(menuSchema);
   }
   _initShortCut() {
     [
@@ -3190,14 +3302,15 @@ let DocUIController = (_a7 = class extends Disposable {
 }, __name(_a7, "DocUIController"), _a7);
 DocUIController = __decorateClass$e([
   OnLifecycle(LifecycleStages.Rendered, DocUIController),
-  __decorateParam$e(1, Inject(Injector)),
-  __decorateParam$e(2, Inject(ComponentManager)),
-  __decorateParam$e(3, ICommandService),
-  __decorateParam$e(4, ILayoutService),
-  __decorateParam$e(5, IMenuService),
-  __decorateParam$e(6, IUIPartsService),
-  __decorateParam$e(7, IUniverInstanceService),
-  __decorateParam$e(8, IShortcutService)
+  __decorateParam$e(0, Inject(Injector)),
+  __decorateParam$e(1, Inject(ComponentManager)),
+  __decorateParam$e(2, ICommandService),
+  __decorateParam$e(3, ILayoutService),
+  __decorateParam$e(4, IMenuManagerService),
+  __decorateParam$e(5, IUIPartsService),
+  __decorateParam$e(6, IUniverInstanceService),
+  __decorateParam$e(7, IShortcutService),
+  __decorateParam$e(8, IConfigService)
 ], DocUIController);
 const BreakLineShortcut = {
   id: EnterCommand.id,
@@ -3431,7 +3544,7 @@ let DocRenderController = (_a10 = class extends RxDisposable {
         scrollNum *= e.deltaY > 0 ? -1 : 1, scene.scaleX < 1 && (scrollNum /= 2), scene.scaleX + scrollNum > 4 ? scene.scale(4, 4) : scene.scaleX + scrollNum < 0.1 ? scene.scale(0.1, 0.1) : e.preventDefault();
       } else
         viewMain.onMouseWheel(e, state);
-    }), this._configService.getConfig("hasScroll") !== !1 && new ScrollBar(viewMain), scene.addLayer(
+    }), new ScrollBar(viewMain), scene.addLayer(
       new Layer(scene, [], DOCS_COMPONENT_MAIN_LAYER_INDEX),
       new Layer(scene, [], DOCS_COMPONENT_HEADER_LAYER_INDEX)
     ), this._addComponent(), engine.runRenderLoop(() => {
@@ -3798,13 +3911,10 @@ let DocCanvasPopManagerService = (_a13 = class extends Disposable {
    * @param popup popup item
    * @returns disposable
    */
-  attachPopupToObject(targetObject, popup) {
-    const unitId = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC).getUnitId(), currentRender = this._renderManagerService.getRenderById(unitId);
+  attachPopupToObject(targetObject, popup, unitId) {
+    const currentRender = this._renderManagerService.getRenderById(unitId);
     if (!currentRender)
-      return {
-        dispose: /* @__PURE__ */ __name(() => {
-        }, "dispose")
-      };
+      throw new Error(`Current render not found, unitId: ${unitId}`);
     const { position, position$, disposable } = this._createObjectPositionObserver(targetObject, currentRender), id = this._globalPopupManagerService.addPopup({
       ...popup,
       unitId,
@@ -3819,22 +3929,28 @@ let DocCanvasPopManagerService = (_a13 = class extends Disposable {
       }, "dispose")
     };
   }
-  attachPopupToRange(range, popup) {
-    const unitId = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC).getUnitId(), { direction = "top" } = popup, currentRender = this._renderManagerService.getRenderById(unitId);
+  /**
+   * attach a popup to doc range
+   * @param range doc range
+   * @param popup popup item
+   * @param unitId unit id
+   * @returns disposable
+   */
+  attachPopupToRange(range, popup, unitId) {
+    if (!this._univerInstanceService.getUnit(unitId))
+      throw new Error(`Document not found, unitId: ${unitId}`);
+    const { direction = "top", multipleDirection } = popup, currentRender = this._renderManagerService.getRenderById(unitId);
     if (!currentRender)
-      return {
-        dispose: /* @__PURE__ */ __name(() => {
-        }, "dispose")
-      };
-    const { positions: bounds, positions$: bounds$, disposable } = this._createRangePositionObserver(range, currentRender), position$ = bounds$.pipe(map((bounds2) => direction === "top" ? bounds2[0] : bounds2[bounds2.length - 1])), id = this._globalPopupManagerService.addPopup({
+      throw new Error(`Current render not found, unitId: ${unitId}`);
+    const { positions: bounds, positions$: bounds$, disposable } = this._createRangePositionObserver(range, currentRender), position$ = bounds$.pipe(map$1((bounds2) => direction.includes("top") ? bounds2[0] : bounds2[bounds2.length - 1])), id = this._globalPopupManagerService.addPopup({
       ...popup,
       unitId,
       subUnitId: "default",
-      anchorRect: direction === "top" ? bounds[0] : bounds[bounds.length - 1],
+      anchorRect: direction.includes("top") ? bounds[0] : bounds[bounds.length - 1],
       anchorRect$: position$,
       excludeRects: bounds,
       excludeRects$: bounds$,
-      direction: direction === "top" ? "top" : "bottom",
+      direction: direction.includes("top") || direction.includes("bottom") ? bounds.length > 1 ? multipleDirection : direction : "bottom",
       canvasElement: currentRender.engine.getCanvasElement()
     });
     return {
@@ -3898,7 +4014,7 @@ let DocContextMenuRenderController = (_a15 = class extends Disposable {
   _initPointerDown() {
     var _a22, _b;
     const documentsSubscription = ((_b = (_a22 = this._context) == null ? void 0 : _a22.mainComponent) == null ? void 0 : _b.onPointerDown$).subscribeEvent((event) => {
-      event.button === 2 && this._contextMenuService.triggerContextMenu(event, MenuPosition.CONTEXT_MENU);
+      event.button === 2 && this._contextMenuService.triggerContextMenu(event, ContextMenuPosition.MAIN_AREA);
     });
     this.disposeWithMe(documentsSubscription);
   }
@@ -3930,7 +4046,7 @@ let DocResizeRenderController = (_a16 = class extends Disposable {
   _initResize() {
     this.disposeWithMe(
       fromEventSubject(this._context.engine.onTransformChange$).pipe(
-        filter((evt) => evt.type === TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize),
+        filter$1((evt) => evt.type === TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize),
         throttleTime(0, animationFrameScheduler)
       ).subscribe(() => {
         this._docPageLayoutService.calculatePagePosition(), this._textSelectionManagerService.refreshSelection();
@@ -4023,14 +4139,14 @@ let DocEventManagerService = (_a17 = class extends Disposable {
       this._customRangeDirty = !0, this._bulletDirty = !0;
     })), this.disposeWithMe(
       fromEventSubject(this._context.engine.onTransformChange$).pipe(
-        filter((evt) => evt.type === TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize)
+        filter$1((evt) => evt.type === TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize)
       ).subscribe(() => {
         this._customRangeDirty = !0, this._bulletDirty = !0;
       })
     );
   }
   _initEvents() {
-    this.disposeWithMe(fromEventSubject(this._context.scene.onPointerMove$).pipe(throttleTime(0, animationFrameScheduler)).subscribe((evt) => {
+    this.disposeWithMe(fromEventSubject(this._context.scene.onPointerMove$).pipe(throttleTime(30)).subscribe((evt) => {
       this._hoverCustomRanges$.next(
         this._calcActiveRanges(evt)
       ), this._hoverBullet$.next(
@@ -4039,8 +4155,8 @@ let DocEventManagerService = (_a17 = class extends Disposable {
     }));
     const onPointerDown$ = fromEventSubject(this._context.mainComponent.onPointerDown$), onPointerUp$ = fromEventSubject(this._context.scene.onPointerUp$);
     this.disposeWithMe(onPointerDown$.pipe(
-      mergeMap((down) => onPointerUp$.pipe(take(1), map((up) => ({ down, up })))),
-      filter(({ down, up }) => down.target === up.target && up.timeStamp - down.timeStamp < 300)
+      mergeMap((down) => onPointerUp$.pipe(take(1), map$1((up) => ({ down, up })))),
+      filter$1(({ down, up }) => down.target === up.target && up.timeStamp - down.timeStamp < 300)
       // filter(({ down, up }) => down.offsetX === up.offsetX && down.offsetY === up.offsetY)
     ).subscribe(({ down }) => {
       if (down.button === 2)
@@ -4385,8 +4501,10 @@ var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnProperty
   return kind && result && __defProp2(target, key, result), result;
 }, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam"), _a21;
 let UniverDocsUIPlugin = (_a21 = class extends Plugin {
-  constructor(_config, _injector, _renderManagerSrv, _commandService, _logService) {
-    super(), this._config = _config, this._injector = _injector, this._renderManagerSrv = _renderManagerSrv, this._commandService = _commandService, this._logService = _logService, this._config = Tools.deepMerge({}, DefaultDocUiConfig, this._config), this._initDependencies(_injector), this._initializeShortcut(), this._initCommand();
+  constructor(_config = defaultPluginConfig, _injector, _renderManagerSrv, _commandService, _logService, _configService) {
+    super(), this._config = _config, this._injector = _injector, this._renderManagerSrv = _renderManagerSrv, this._commandService = _commandService, this._logService = _logService, this._configService = _configService;
+    const { menu, ...rest } = this._config;
+    menu && this._configService.setConfig("menu", menu, { merge: !0 }), this._configService.setConfig(PLUGIN_CONFIG_KEY, rest), this._initDependencies(_injector), this._initializeShortcut(), this._initCommand();
   }
   onReady() {
     this._initRenderBasics(), this._markDocAsFocused();
@@ -4422,13 +4540,13 @@ let UniverDocsUIPlugin = (_a21 = class extends Plugin {
   }
   _initDependencies(injector) {
     mergeOverrideWithDependencies([
-      [DocUIController, { useFactory: /* @__PURE__ */ __name(() => this._injector.createInstance(DocUIController, this._config), "useFactory") }],
+      [DocUIController],
       [DocClipboardController],
       [DocEditorBridgeController],
       [DocAutoFormatController],
       [DocTableController],
       [DocsRenderService],
-      [AppUIController, { useFactory: /* @__PURE__ */ __name(() => this._injector.createInstance(AppUIController, this._config), "useFactory") }],
+      [AppUIController],
       [IDocClipboardService, { useClass: DocClipboardService }],
       [DocCanvasPopManagerService],
       [DocParagraphSettingController]
@@ -4477,7 +4595,8 @@ UniverDocsUIPlugin = __decorateClass([
   __decorateParam(1, Inject(Injector)),
   __decorateParam(2, IRenderManagerService),
   __decorateParam(3, ICommandService),
-  __decorateParam(4, ILogService)
+  __decorateParam(4, ILogService),
+  __decorateParam(5, IConfigService)
 ], UniverDocsUIPlugin);
 function docDrawingPositionToTransform(position) {
   return {
@@ -4509,7 +4628,6 @@ __name(transformToDocDrawingPosition, "transformToDocDrawingPosition");
 export {
   DOC_UI_PLUGIN_NAME,
   DefaultDocContainerConfig,
-  DefaultDocUiConfig,
   DefaultToolbarConfig,
   DocBackScrollRenderController,
   DocCanvasPopManagerService,
@@ -4527,6 +4645,7 @@ export {
   PastePluginWord,
   UniverDocsUIPlugin,
   docDrawingPositionToTransform,
+  menuSchema,
   transformToDocDrawingPosition,
   whenDocAndEditorFocused
 };