@univerjs/docs-ui 0.2.4 → 0.2.6

package/lib/es/index.js

@@ -1,610 +1,626 @@
-var Sn = Object.defineProperty;
-var vn = (t, e, n) => e in t ? Sn(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var T = (t, e, n) => vn(t, typeof e != "symbol" ? e + "" : e, n);
-import { FOCUSING_DOC as Ue, FOCUSING_UNIVER_EDITOR as dt, FOCUSING_COMMON_DRAWINGS as Xt, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE as Rn, Tools as j, LRUMap as On, BaselineOffset as ae, BooleanNumber as S, ColorKit as _t, DataStreamTreeTokenType as Pe, CustomRangeType as Kt, skipParseTagNames as Cn, IUniverInstanceService as w, ILogService as Zt, ICommandService as O, Disposable as Q, SliceBodyType as mt, normalizeBody as En, UniverInstanceType as v, toDisposable as Jt, RxDisposable as Se, Direction as K, EDITOR_ACTIVATED as qt, LocaleService as le, CommandType as de, DocumentFlavor as Tn, JSONX as Qe, ThemeService as Qt, HorizontalAlign as Le, OnLifecycle as we, LifecycleStages as Be, IContextService as In, checkForSubstrings as bn, IConfigService as Mn, isInternalEditorID as yn, DisposableCollection as St, Plugin as xn, ObjectRelativeFromH as Pn, ObjectRelativeFromV as Dn } from "@univerjs/core";
-import { IClipboardInterfaceService as ut, PLAIN_TEXT_CLIPBOARD_MIME_TYPE as An, HTML_CLIPBOARD_MIME_TYPE as Nn, IEditorService as ee, KeyCode as H, MetaKeys as ve, ILayoutService as en, ISidebarService as Fn, ComponentManager as tn, MenuGroup as x, MenuItemType as y, MenuPosition as P, getMenuHiddenObservable as D, FONT_FAMILY_LIST as vt, FONT_SIZE_LIST as Un, getHeaderFooterMenuHiddenObservable as Ln, FontFamily as wn, FontFamilyItem as Bn, FontSize as $n, IMenuService as Hn, CopyCommand as Vn, CutCommand as jn, PasteCommand as Wn, SetEditorResizeOperation as kn, ICanvasPopupService as Gn, IShortcutService as zn } from "@univerjs/ui";
-import { createIdentifier as Yn, Inject as I, Injector as $e, Optional as Xn } from "@wendellhu/redi";
-import { TextSelectionManagerService as te, DocCustomRangeService as Kn, CutContentCommand as nn, InnerPasteCommand as on, getDeleteSelection as Zn, DocSkeletonManagerService as L, VIEWPORT_KEY as q, getDocObject as Jn, MoveCursorOperation as He, MoveSelectionOperation as Ve, SelectAllOperation as qn, neoGetDocObject as J, RichTextEditingMutation as ht, SetInlineFormatBoldCommand as Qn, SetTextSelectionsOperation as V, SetInlineFormatCommand as ue, SetInlineFormatItalicCommand as eo, SetInlineFormatUnderlineCommand as to, SetInlineFormatStrikethroughCommand as no, SetInlineFormatSubscriptCommand as oo, SetInlineFormatSuperscriptCommand as ro, SetInlineFormatFontFamilyCommand as Rt, SetInlineFormatFontSizeCommand as Ot, SetInlineFormatTextColorCommand as Ct, AlignLeftCommand as io, AlignOperationCommand as je, AlignCenterCommand as so, AlignRightCommand as ao, AlignJustifyCommand as co, OrderListCommand as lo, BulletListCommand as uo, ResetInlineFormatTextBackgroundColorCommand as ho, SetInlineFormatTextBackgroundColorCommand as et, BreakLineCommand as go, DeleteLeftCommand as po, DeleteRightCommand as fo, CoverContentCommand as _o, DOCS_COMPONENT_MAIN_LAYER_INDEX as Ye, DOCS_COMPONENT_HEADER_LAYER_INDEX as mo, DOCS_VIEW_KEY as oe, DOCS_COMPONENT_DEFAULT_Z_INDEX as Et, DOCS_COMPONENT_BACKGROUND_LAYER_INDEX as So, SetDocZoomRatioCommand as vo, SetDocZoomRatioOperation as De, DocInterceptorService as Ro } from "@univerjs/docs";
-import { pixelToPt as Oo, ptToPixel as Tt, NodePositionConvertToCursor as rn, getAnchorBounding as Co, IRenderManagerService as W, ITextSelectionRenderManager as ne, Shape as Eo, DocumentEditArea as F, PageLayoutType as Ae, Vector2 as sn, Rect as Xe, Path as It, ScrollBar as tt, Viewport as To, Layer as bt, Documents as Io, DocBackground as bo, CURSOR_TYPE as Mt, getLineBounding as Mo } from "@univerjs/engine-render";
-import { takeUntil as se, Observable as B, combineLatest as yo, fromEvent as yt, BehaviorSubject as xt, map as xo } from "rxjs";
-import Po, { useState as an, useEffect as cn } from "react";
-import { useDependency as z } from "@wendellhu/redi/react-bindings";
-import { Checkbox as Pt, InputNumber as Dt, Button as Do, ColorPicker as Ao } from "@univerjs/design";
-import No from "clsx";
-function k(t) {
-  return t.getContextValue(Ue) && t.getContextValue(dt) && !t.getContextValue(Xt);
+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, createIdentifier, Inject, IUniverInstanceService, ILogService, ICommandService, Disposable, SliceBodyType, normalizeBody, UniverInstanceType, toDisposable, RxDisposable, Direction, EDITOR_ACTIVATED, LocaleService, Injector, Optional, useDependency, useObservable, CommandType, DocumentFlavor, JSONX, ThemeService, HorizontalAlign, connectInjector, OnLifecycle, LifecycleStages, IContextService, checkForSubstrings, IConfigService, isInternalEditorID, DisposableCollection, DEFAULT_EMPTY_DOCUMENT_VALUE, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOCS_ZEN_EDITOR_UNIT_ID_KEY, fromEventSubject, Plugin, ObjectRelativeFromH, ObjectRelativeFromV } from "@univerjs/core";
+import { IClipboardInterfaceService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, HTML_CLIPBOARD_MIME_TYPE, IEditorService, KeyCode, MetaKeys, ILayoutService, ISidebarService, ComponentManager, 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 { TextSelectionManagerService, DocCustomRangeService, CutContentCommand, InnerPasteCommand, getDeleteSelection, DocSkeletonManagerService, VIEWPORT_KEY, getDocObject, MoveCursorOperation, MoveSelectionOperation, SelectAllOperation, SetDocZoomRatioOperation, neoGetDocObject, RichTextEditingMutation, SetInlineFormatBoldCommand, SetTextSelectionsOperation, SetInlineFormatCommand, SetInlineFormatItalicCommand, SetInlineFormatUnderlineCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatTextColorCommand, AlignLeftCommand, AlignOperationCommand, AlignCenterCommand, AlignRightCommand, AlignJustifyCommand, OrderListCommand, BulletListCommand, ResetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextBackgroundColorCommand, DeleteLeftCommand, BreakLineCommand, 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, DocInterceptorService } from "@univerjs/docs";
+import { pixelToPt, ptToPixel, NodePositionConvertToCursor, getAnchorBounding, IRenderManagerService, ITextSelectionRenderManager, Shape, DocumentEditArea, PageLayoutType, Vector2, Rect, Path, ScrollBar, Viewport, Layer, Documents, DocBackground, CURSOR_TYPE, pxToNum, getLineBounding, TRANSFORM_CHANGE_OBSERVABLE_TYPE } from "@univerjs/engine-render";
+import { takeUntil, Observable, combineLatest, fromEvent, BehaviorSubject, map, filter, throttleTime, debounceTime } from "rxjs";
+import require$$0, { useMemo, useCallback, useState, useEffect } from "react";
+import { Slider, Checkbox, InputNumber, Button, ColorPicker } from "@univerjs/design";
+import clsx from "clsx";
+function whenDocAndEditorFocused(contextService) {
+  return contextService.getContextValue(FOCUSING_DOC) && contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && !contextService.getContextValue(FOCUSING_COMMON_DRAWINGS);
 }
-function Fo(t) {
-  return t.getContextValue(Ue) && t.getContextValue(dt) && !t.getContextValue(Rn) && !t.getContextValue(Xt);
+__name(whenDocAndEditorFocused, "whenDocAndEditorFocused");
+function whenDocAndEditorFocusedWithBreakLine(contextService) {
+  return contextService.getContextValue(FOCUSING_DOC) && contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && !contextService.getContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE) && !contextService.getContextValue(FOCUSING_COMMON_DRAWINGS);
 }
-const Uo = 10, Lo = 6;
-function wo() {
-  return j.generateRandomId(Lo);
+__name(whenDocAndEditorFocusedWithBreakLine, "whenDocAndEditorFocusedWithBreakLine");
+const COPY_CONTENT_CACHE_LIMIT = 10, ID_LENGTH = 6;
+function genId() {
+  return Tools.generateRandomId(ID_LENGTH);
 }
-function Bo(t) {
-  const e = t.match(/data-copy-id="([^\s]+)"/);
-  return e && e[1] ? e[1] : null;
+__name(genId, "genId");
+function extractId(html) {
+  const match = html.match(/data-copy-id="([^\s]+)"/);
+  return match && match[1] ? match[1] : null;
 }
-class $o {
+__name(extractId, "extractId");
+const _CopyContentCache = class _CopyContentCache {
   constructor() {
-    T(this, "_cache", new On(Uo));
+    __publicField(this, "_cache", new LRUMap(COPY_CONTENT_CACHE_LIMIT));
   }
-  set(e, n) {
-    this._cache.set(e, n);
+  set(id, clipboardData) {
+    this._cache.set(id, clipboardData);
   }
-  get(e) {
-    return this._cache.get(e);
+  get(id) {
+    return this._cache.get(id);
   }
   clear() {
     this._cache.clear();
   }
-}
-const At = new $o();
-function gt(t) {
-  const e = t.style, n = {}, o = t.tagName.toLowerCase();
-  switch (o) {
+};
+__name(_CopyContentCache, "CopyContentCache");
+let CopyContentCache = _CopyContentCache;
+const copyContentCache = new CopyContentCache();
+function extractNodeStyle(node) {
+  const styles2 = node.style, docStyles = {}, tagName = node.tagName.toLowerCase();
+  switch (tagName) {
     case "b":
     case "em":
     case "strong": {
-      n.bl = S.TRUE;
+      docStyles.bl = BooleanNumber.TRUE;
       break;
     }
     case "s": {
-      n.st = {
-        s: S.TRUE
+      docStyles.st = {
+        s: BooleanNumber.TRUE
       };
       break;
     }
     case "u": {
-      n.ul = {
-        s: S.TRUE
+      docStyles.ul = {
+        s: BooleanNumber.TRUE
       };
       break;
     }
     case "i": {
-      n.it = S.TRUE;
+      docStyles.it = BooleanNumber.TRUE;
       break;
     }
     case "sub":
     case "sup": {
-      n.va = o === "sup" ? ae.SUPERSCRIPT : ae.SUBSCRIPT;
+      docStyles.va = tagName === "sup" ? BaselineOffset.SUPERSCRIPT : BaselineOffset.SUBSCRIPT;
       break;
     }
   }
-  for (let r = 0; r < e.length; r++) {
-    const i = e[r], s = e.getPropertyValue(i);
-    switch (i) {
+  for (let i = 0; i < styles2.length; i++) {
+    const cssRule = styles2[i], cssValue = styles2.getPropertyValue(cssRule);
+    switch (cssRule) {
       case "font-family": {
-        n.ff = s;
+        docStyles.ff = cssValue;
         break;
       }
       case "font-size": {
-        const a = Number.parseInt(s);
-        Number.isNaN(a) || (s.endsWith("pt") ? n.fs = a : s.endsWith("px") && (n.fs = Oo(a)));
+        const fontSize = Number.parseInt(cssValue);
+        Number.isNaN(fontSize) || (cssValue.endsWith("pt") ? docStyles.fs = fontSize : cssValue.endsWith("px") && (docStyles.fs = pixelToPt(fontSize)));
         break;
       }
       case "font-style": {
-        s === "italic" && (n.it = S.TRUE);
+        cssValue === "italic" && (docStyles.it = BooleanNumber.TRUE);
         break;
       }
       case "font-weight": {
-        (Number(s) > 400 || String(s) === "bold") && (n.bl = S.TRUE);
+        (Number(cssValue) > 400 || String(cssValue) === "bold") && (docStyles.bl = BooleanNumber.TRUE);
         break;
       }
       case "text-decoration": {
-        /underline/.test(s) ? n.ul = {
-          s: S.TRUE
-        } : /overline/.test(s) ? n.ol = {
-          s: S.TRUE
-        } : /line-through/.test(s) && (n.st = {
-          s: S.TRUE
+        /underline/.test(cssValue) ? docStyles.ul = {
+          s: BooleanNumber.TRUE
+        } : /overline/.test(cssValue) ? docStyles.ol = {
+          s: BooleanNumber.TRUE
+        } : /line-through/.test(cssValue) && (docStyles.st = {
+          s: BooleanNumber.TRUE
         });
         break;
       }
       case "color": {
-        const a = new _t(s);
-        a.isValid && (n.cl = {
-          rgb: a.toRgbString()
+        const color = new ColorKit(cssValue);
+        color.isValid && (docStyles.cl = {
+          rgb: color.toRgbString()
         });
         break;
       }
       case "background-color": {
-        const a = new _t(s);
-        a.isValid && (n.bg = {
-          rgb: a.toRgbString()
+        const color = new ColorKit(cssValue);
+        color.isValid && (docStyles.bg = {
+          rgb: color.toRgbString()
         });
         break;
       }
     }
   }
-  return n;
+  return docStyles;
 }
-function Ho(t) {
-  const e = new DOMParser(), n = `<x-univer id="univer-root">${t}</x-univer>`;
-  return e.parseFromString(n, "text/html").querySelector("#univer-root");
+__name(extractNodeStyle, "extractNodeStyle");
+function parseToDom(rawHtml) {
+  const parser = new DOMParser(), html = `<x-univer id="univer-root">${rawHtml}</x-univer>`;
+  return parser.parseFromString(html, "text/html").querySelector("#univer-root");
 }
-function Nt(t, e) {
-  const n = t.tagName.toLowerCase();
-  return typeof e == "string" ? n === e : Array.isArray(e) ? e.some((o) => o === n) : e(t);
+__name(parseToDom, "parseToDom");
+function matchFilter(node, filter2) {
+  const tagName = node.tagName.toLowerCase();
+  return typeof filter2 == "string" ? tagName === filter2 : Array.isArray(filter2) ? filter2.some((name) => name === tagName) : filter2(node);
 }
-const Fe = class Fe {
+__name(matchFilter, "matchFilter");
+const _HtmlToUDMService = class _HtmlToUDMService {
   constructor() {
-    T(this, "_styleCache", /* @__PURE__ */ new Map());
-    T(this, "_styleRules", []);
-    T(this, "_afterProcessRules", []);
+    __publicField(this, "_styleCache", /* @__PURE__ */ new Map());
+    __publicField(this, "_styleRules", []);
+    __publicField(this, "_afterProcessRules", []);
   }
-  static use(e) {
-    if (this._pluginList.includes(e))
-      throw new Error(`Univer paste plugin ${e.name} already added`);
-    this._pluginList.push(e);
+  static use(plugin) {
+    if (this._pluginList.includes(plugin))
+      throw new Error(`Univer paste plugin ${plugin.name} already added`);
+    this._pluginList.push(plugin);
   }
-  convert(e) {
-    const n = Fe._pluginList.find((i) => i.checkPasteType(e)), o = Ho(e), r = {
+  convert(html) {
+    const pastePlugin = _HtmlToUDMService._pluginList.find((plugin) => plugin.checkPasteType(html)), dom = parseToDom(html), newDocBody = {
       dataStream: "",
       textRuns: []
     };
-    return n && (this._styleRules = [...n.stylesRules], this._afterProcessRules = [...n.afterProcessRules]), this._styleCache.clear(), this._process(null, o == null ? void 0 : o.childNodes, r), this._styleCache.clear(), this._styleRules = [], this._afterProcessRules = [], r;
+    return pastePlugin && (this._styleRules = [...pastePlugin.stylesRules], this._afterProcessRules = [...pastePlugin.afterProcessRules]), this._styleCache.clear(), this._process(null, dom == null ? void 0 : dom.childNodes, newDocBody), this._styleCache.clear(), this._styleRules = [], this._afterProcessRules = [], newDocBody;
   }
-  _process(e, n, o) {
-    var r, i, s;
-    for (const a of n)
-      if (a.nodeType === Node.TEXT_NODE) {
-        if (((r = a.nodeValue) == null ? void 0 : r.trim()) === "")
+  _process(parent, nodes, doc) {
+    var _a19, _b, _c;
+    for (const node of nodes)
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (((_a19 = node.nodeValue) == null ? void 0 : _a19.trim()) === "")
           continue;
-        let c = (i = a.nodeValue) == null ? void 0 : i.replace(/[\r\n]/g, ""), d;
-        if (e && e.nodeType === Node.ELEMENT_NODE && e.tagName.toUpperCase() === "A") {
-          const g = j.generateRandomId();
-          c = `${Pe.CUSTOM_RANGE_START}${c}${Pe.CUSTOM_RANGE_END}`, o.customRanges = [
-            ...(s = o.customRanges) != null ? s : [],
+        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}`, doc.customRanges = [
+            ...(_c = doc.customRanges) != null ? _c : [],
             {
-              startIndex: o.dataStream.length,
-              endIndex: o.dataStream.length + c.length - 1,
-              rangeId: g,
-              rangeType: Kt.HYPERLINK
+              startIndex: doc.dataStream.length,
+              endIndex: doc.dataStream.length + text.length - 1,
+              rangeId: id,
+              rangeType: CustomRangeType.HYPERLINK
             }
-          ], o.payloads = {
-            ...o.payloads,
-            [g]: e.href
+          ], doc.payloads = {
+            ...doc.payloads,
+            [id]: parent.href
           };
         }
-        e && this._styleCache.has(e) && (d = this._styleCache.get(e)), o.dataStream += c, d && Object.getOwnPropertyNames(d).length && o.textRuns.push({
-          st: o.dataStream.length - c.length,
-          ed: o.dataStream.length,
-          ts: d
+        parent && this._styleCache.has(parent) && (style = this._styleCache.get(parent)), doc.dataStream += text, style && Object.getOwnPropertyNames(style).length && doc.textRuns.push({
+          st: doc.dataStream.length - text.length,
+          ed: doc.dataStream.length,
+          ts: style
         });
       } else {
-        if (Cn.includes(a.nodeName.toLowerCase()))
+        if (skipParseTagNames.includes(node.nodeName.toLowerCase()))
           continue;
-        if (a.nodeType === Node.ELEMENT_NODE) {
-          const c = e ? this._styleCache.get(e) : {}, d = this._styleRules.find(({ filter: l }) => Nt(a, l)), g = d ? d.getStyle(a) : gt(a);
-          this._styleCache.set(a, { ...c, ...g });
-          const { childNodes: h } = a;
-          this._process(a, h, o);
-          const p = this._afterProcessRules.find(
-            ({ filter: l }) => Nt(a, l)
+        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);
+          this._styleCache.set(node, { ...parentStyles, ...nodeStyles });
+          const { childNodes } = node;
+          this._process(node, childNodes, doc);
+          const afterProcessRule = this._afterProcessRules.find(
+            ({ filter: filter2 }) => matchFilter(node, filter2)
           );
-          p && p.handler(o, a);
+          afterProcessRule && afterProcessRule.handler(doc, node);
         }
       }
   }
 };
-T(Fe, "_pluginList", []);
-let ce = Fe;
-const Vo = {
+__name(_HtmlToUDMService, "HtmlToUDMService"), __publicField(_HtmlToUDMService, "_pluginList", []);
+let HtmlToUDMService = _HtmlToUDMService;
+const wordPastePlugin$1 = {
   name: "univer-doc-paste-plugin-lark",
-  checkPasteType(t) {
-    return /lark-record-clipboard/i.test(t);
+  checkPasteType(html) {
+    return /lark-record-clipboard/i.test(html);
   },
   // TODO: @JOCS, support inline code copy from lark.
   stylesRules: [
     {
       filter: ["s"],
-      getStyle(t) {
-        const e = gt(t);
+      getStyle(node) {
+        const inlineStyle = extractNodeStyle(node);
         return {
           st: {
-            s: S.TRUE
+            s: BooleanNumber.TRUE
           },
-          ...e
+          ...inlineStyle
         };
       }
     }
   ],
   afterProcessRules: [
     {
-      filter(t) {
-        return t.tagName === "DIV" && /ace-line/i.test(t.className);
+      filter(el) {
+        return el.tagName === "DIV" && /ace-line/i.test(el.className);
       },
-      handler(t) {
-        t.paragraphs == null && (t.paragraphs = []), t.paragraphs.push({
-          startIndex: t.dataStream.length
-        }), t.dataStream += "\r";
+      handler(doc) {
+        doc.paragraphs == null && (doc.paragraphs = []), doc.paragraphs.push({
+          startIndex: doc.dataStream.length
+        }), doc.dataStream += "\r";
       }
     }
   ]
-}, jo = Vo;
-function ln(t) {
-  const e = t.style, n = {};
-  for (let o = 0; o < e.length; o++) {
-    const r = e[o], i = e.getPropertyValue(r);
-    switch (r) {
+}, PastePluginLark = wordPastePlugin$1;
+function getParagraphStyle(el) {
+  const styles2 = el.style, paragraphStyle = {};
+  for (let i = 0; i < styles2.length; i++) {
+    const cssRule = styles2[i], cssValue = styles2.getPropertyValue(cssRule);
+    switch (cssRule) {
       case "margin-top": {
-        const s = Number.parseInt(i);
-        n.spaceAbove = { v: /pt/.test(i) ? Tt(s) : s };
+        const marginTopValue = Number.parseInt(cssValue);
+        paragraphStyle.spaceAbove = { v: /pt/.test(cssValue) ? ptToPixel(marginTopValue) : marginTopValue };
         break;
       }
       case "margin-bottom": {
-        const s = Number.parseInt(i);
-        n.spaceBelow = { v: /pt/.test(i) ? Tt(s) : s };
+        const marginBottomValue = Number.parseInt(cssValue);
+        paragraphStyle.spaceBelow = { v: /pt/.test(cssValue) ? ptToPixel(marginBottomValue) : marginBottomValue };
         break;
       }
       case "line-height": {
-        const s = Number.parseFloat(i);
-        n.lineSpacing = s;
+        const lineHeightValue = Number.parseFloat(cssValue);
+        paragraphStyle.lineSpacing = lineHeightValue;
         break;
       }
     }
   }
-  return Object.getOwnPropertyNames(n).length ? n : null;
+  return Object.getOwnPropertyNames(paragraphStyle).length ? paragraphStyle : null;
 }
-const Wo = {
+__name(getParagraphStyle, "getParagraphStyle");
+const wordPastePlugin = {
   name: "univer-doc-paste-plugin-word",
-  checkPasteType(t) {
-    return /word|mso/i.test(t);
+  checkPasteType(html) {
+    return /word|mso/i.test(html);
   },
   stylesRules: [
     {
       filter: ["b"],
-      getStyle(t) {
-        const e = gt(t);
-        return { bl: S.TRUE, ...e };
+      getStyle(node) {
+        const inlineStyle = extractNodeStyle(node);
+        return { bl: BooleanNumber.TRUE, ...inlineStyle };
       }
     }
   ],
   afterProcessRules: [
     {
-      filter(t) {
-        return t.tagName === "P";
+      filter(el) {
+        return el.tagName === "P";
       },
-      handler(t, e) {
-        t.paragraphs == null && (t.paragraphs = []);
-        const n = {
-          startIndex: t.dataStream.length
-        }, o = ln(e);
-        o && (n.paragraphStyle = o), t.paragraphs.push(n), t.dataStream += "\r";
+      handler(doc, el) {
+        doc.paragraphs == null && (doc.paragraphs = []);
+        const paragraph = {
+          startIndex: doc.dataStream.length
+        }, paragraphStyle = getParagraphStyle(el);
+        paragraphStyle && (paragraph.paragraphStyle = paragraphStyle), doc.paragraphs.push(paragraph), doc.dataStream += "\r";
       }
     }
   ]
-}, ko = Wo, Go = {
+}, PastePluginWord = wordPastePlugin, univerPastePlugin = {
   name: "univer-doc-paste-plugin-univer",
-  checkPasteType(t) {
-    return /UniverNormal/i.test(t);
+  checkPasteType(html) {
+    return /UniverNormal/i.test(html);
   },
   stylesRules: [],
   afterProcessRules: [
     {
-      filter(t) {
-        return t.tagName === "P" && /UniverNormal/i.test(t.className);
+      filter(el) {
+        return el.tagName === "P" && /UniverNormal/i.test(el.className);
       },
-      handler(t, e) {
-        t.paragraphs == null && (t.paragraphs = []);
-        const n = {
-          startIndex: t.dataStream.length
-        }, o = ln(e);
-        o && (n.paragraphStyle = o), t.paragraphs.push(n), t.dataStream += "\r";
+      handler(doc, el) {
+        doc.paragraphs == null && (doc.paragraphs = []);
+        const paragraph = {
+          startIndex: doc.dataStream.length
+        }, paragraphStyle = getParagraphStyle(el);
+        paragraphStyle && (paragraph.paragraphStyle = paragraphStyle), doc.paragraphs.push(paragraph), doc.dataStream += "\r";
       }
     }
   ]
-}, zo = Go;
-function Ft(t, e) {
-  const { st: n, ed: o, ts: r = {} } = e, { ff: i, fs: s, it: a, bl: c, ul: d, st: g, ol: h, bg: p, cl: l, va: f } = r;
-  let u = t.slice(n, o);
-  const _ = [];
-  return a === S.TRUE && (u = `<i>${u}</i>`), f === ae.SUPERSCRIPT ? u = `<sup>${u}</sup>` : f === ae.SUBSCRIPT && (u = `<sub>${u}</sub>`), (d == null ? void 0 : d.s) === S.TRUE && (u = `<u>${u}</u>`), (g == null ? void 0 : g.s) === S.TRUE && (u = `<s>${u}</s>`), c === S.TRUE && (u = `<strong>${u}</strong>`), i && _.push(`font-family: ${i}`), l && _.push(`color: ${l.rgb}`), s && _.push(`font-size: ${s}pt`), h && _.push("text-decoration: overline"), p && _.push(`background: ${p.rgb}`), _.length ? `<span style="${_.join("; ")};">${u}</span>` : u;
+}, PastePluginUniver = univerPastePlugin;
+function covertTextRunToHtml(dataStream, textRun) {
+  const { st: start, ed, ts = {} } = textRun, { ff, fs, it, bl, ul, st, ol, bg, cl, va } = ts;
+  let html = dataStream.slice(start, ed);
+  const style = [];
+  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;
 }
-function Ke(t, e, n) {
-  const { dataStream: o, textRuns: r = [] } = t;
-  let i = e;
-  const s = [];
-  for (const a of r) {
-    const { st: c, ed: d } = a;
-    j.hasIntersectionBetweenTwoRanges(e, n, c, d) && (c > i ? (s.push(o.slice(i, c)), s.push(Ft(o, {
-      ...a,
-      ed: Math.min(d, n)
-    }))) : s.push(Ft(o, {
-      ...a,
-      st: i,
-      ed: Math.min(d, n)
-    }))), i = Math.max(e, Math.min(d, n));
-  }
-  return i !== n && s.push(o.slice(i, n)), s.join("");
+__name(covertTextRunToHtml, "covertTextRunToHtml");
+function getBodySliceHtml(body, startIndex, endIndex) {
+  const { dataStream, textRuns = [] } = body;
+  let cursorIndex = startIndex;
+  const spanList = [];
+  for (const textRun of textRuns) {
+    const { st, ed } = textRun;
+    Tools.hasIntersectionBetweenTwoRanges(startIndex, endIndex, st, ed) && (st > cursorIndex ? (spanList.push(dataStream.slice(cursorIndex, st)), spanList.push(covertTextRunToHtml(dataStream, {
+      ...textRun,
+      ed: Math.min(ed, endIndex)
+    }))) : spanList.push(covertTextRunToHtml(dataStream, {
+      ...textRun,
+      st: cursorIndex,
+      ed: Math.min(ed, endIndex)
+    }))), cursorIndex = Math.max(startIndex, Math.min(ed, endIndex));
+  }
+  return cursorIndex !== endIndex && spanList.push(dataStream.slice(cursorIndex, endIndex)), spanList.join("");
 }
-function Ut(t, e = !0) {
-  var n;
-  if (e && ((n = t.paragraphs) != null && n.length)) {
-    const { dataStream: o, paragraphs: r = [] } = t;
-    let i = "", s = -1;
-    for (const a of r) {
-      const { startIndex: c, paragraphStyle: d = {} } = a, { spaceAbove: g, spaceBelow: h, lineSpacing: p } = d, l = [];
-      g != null && (typeof g == "number" ? l.push(`margin-top: ${g}px`) : l.push(`margin-top: ${g.v}px`)), h != null && (typeof h == "number" ? l.push(`margin-bottom: ${h}px`) : l.push(`margin-bottom: ${h.v}px`)), p != null && l.push(`line-height: ${p}`), c > s + 1 ? i += `<p class="UniverNormal" ${l.length ? `style="${l.join("; ")};"` : ""}>${Ke(t, s + 1, c)}</p>` : i += `<p class="UniverNormal" ${l.length ? `style="${l.join("; ")};"` : ""}></p>`, s = c;
+__name(getBodySliceHtml, "getBodySliceHtml");
+function convertBodyToHtml(body, withParagraphInfo = !0) {
+  var _a19;
+  if (withParagraphInfo && ((_a19 = body.paragraphs) != null && _a19.length)) {
+    const { dataStream, paragraphs = [] } = body;
+    let result = "", cursorIndex = -1;
+    for (const paragraph of paragraphs) {
+      const { startIndex, paragraphStyle = {} } = paragraph, { spaceAbove, spaceBelow, lineSpacing } = paragraphStyle, style = [];
+      spaceAbove != null && (typeof spaceAbove == "number" ? style.push(`margin-top: ${spaceAbove}px`) : style.push(`margin-top: ${spaceAbove.v}px`)), spaceBelow != null && (typeof spaceBelow == "number" ? style.push(`margin-bottom: ${spaceBelow}px`) : style.push(`margin-bottom: ${spaceBelow.v}px`)), lineSpacing != null && style.push(`line-height: ${lineSpacing}`), startIndex > cursorIndex + 1 ? result += `<p class="UniverNormal" ${style.length ? `style="${style.join("; ")};"` : ""}>${getBodySliceHtml(body, cursorIndex + 1, startIndex)}</p>` : result += `<p class="UniverNormal" ${style.length ? `style="${style.join("; ")};"` : ""}></p>`, cursorIndex = startIndex;
     }
-    return s !== o.length && (i += Ke(t, s, o.length)), i;
+    return cursorIndex !== dataStream.length && (result += getBodySliceHtml(body, cursorIndex, dataStream.length)), result;
   } else
-    return Ke(t, 0, t.dataStream.length);
+    return getBodySliceHtml(body, 0, body.dataStream.length);
 }
-class Yo {
-  convert(e) {
-    if (e.length === 0)
+__name(convertBodyToHtml, "convertBodyToHtml");
+const _UDMToHtmlService = class _UDMToHtmlService {
+  convert(bodyList) {
+    if (bodyList.length === 0)
       throw new Error("The bodyList length at least to be 1");
-    if (e.length === 1)
-      return Ut(e[0]);
-    let n = "";
-    for (const o of e)
-      n += '<p className="UniverNormal">', n += Ut(o, !1), n += "</p>";
-    return n;
+    if (bodyList.length === 1)
+      return convertBodyToHtml(bodyList[0]);
+    let html = "";
+    for (const body of bodyList)
+      html += '<p className="UniverNormal">', html += convertBodyToHtml(body, !1), html += "</p>";
+    return html;
   }
-}
-var Xo = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, Zo = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? Ko(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && Xo(e, n, r), r;
-}, re = (t, e) => (n, o) => e(n, o, t);
-ce.use(ko);
-ce.use(jo);
-ce.use(zo);
-const Re = Yn("doc.clipboard-service");
-let nt = class extends Q {
-  constructor(e, n, o, r, i, s) {
+};
+__name(_UDMToHtmlService, "UDMToHtmlService");
+let UDMToHtmlService = _UDMToHtmlService;
+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--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  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");
+HtmlToUDMService.use(PastePluginWord);
+HtmlToUDMService.use(PastePluginLark);
+HtmlToUDMService.use(PastePluginUniver);
+const IDocClipboardService = createIdentifier("doc.clipboard-service");
+var _a;
+let DocClipboardService = (_a = class extends Disposable {
+  constructor(_univerInstanceService, _logService, _commandService, _clipboardInterfaceService, _textSelectionManagerService, _docCustomRangeService) {
     super();
-    T(this, "_clipboardHooks", []);
-    T(this, "_htmlToUDM", new ce());
-    T(this, "_umdToHtml", new Yo());
-    this._univerInstanceService = e, this._logService = n, this._commandService = o, this._clipboardInterfaceService = r, this._textSelectionManagerService = i, this._docCustomRangeService = s;
-  }
-  async copy(e = mt.copy) {
-    const n = this._getDocumentBodyInRanges(e);
-    if (n.length === 0)
+    __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;
+  }
+  async copy(sliceType = SliceBodyType.copy) {
+    const documentBodyList = this._getDocumentBodyInRanges(sliceType);
+    if (documentBodyList.length === 0)
       return !1;
     try {
-      const o = this._textSelectionManagerService.getActiveRange(), r = !!(o != null && o.segmentId);
-      this._setClipboardData(n, !r);
-    } catch (o) {
-      return this._logService.error("[DocClipboardService] copy failed", o), !1;
+      const activeRange = this._textSelectionManagerService.getActiveRange(), isCopyInHeaderFooter = !!(activeRange != null && activeRange.segmentId);
+      this._setClipboardData(documentBodyList, !isCopyInHeaderFooter);
+    } catch (e) {
+      return this._logService.error("[DocClipboardService] copy failed", e), !1;
     }
     return !0;
   }
   async cut() {
     return this._cut();
   }
-  async paste(e) {
-    const n = await this._generateBodyFromClipboardItems(e);
-    return this._paste(n);
+  async paste(items) {
+    const body = await this._generateBodyFromClipboardItems(items);
+    return this._paste(body);
   }
-  async legacyPaste(e, n) {
-    const o = this._generateBodyFromHtmlAndText(e, n);
-    return this._paste(o);
+  async legacyPaste(html, text) {
+    const body = this._generateBodyFromHtmlAndText(html, text);
+    return this._paste(body);
   }
   async _cut() {
-    var i;
+    var _a19;
     const {
-      segmentId: e,
-      endOffset: n,
-      style: o
-    } = (i = this._textSelectionManagerService.getActiveRange()) != null ? i : {}, r = this._textSelectionManagerService.getCurrentSelections();
-    if (e == null && this._logService.error("[DocClipboardController] segmentId is not existed"), n == null || r == null)
+      segmentId,
+      endOffset: activeEndOffset,
+      style
+    } = (_a19 = this._textSelectionManagerService.getActiveRange()) != null ? _a19 : {}, ranges = this._textSelectionManagerService.getCurrentSelections();
+    if (segmentId == null && this._logService.error("[DocClipboardController] segmentId is not existed"), activeEndOffset == null || ranges == null)
       return !1;
-    this.copy(mt.cut);
+    this.copy(SliceBodyType.cut);
     try {
-      let s = n;
-      for (const c of r) {
-        const { startOffset: d, endOffset: g } = c;
-        d == null || g == null || g <= n && (s -= g - d);
+      let cursor = activeEndOffset;
+      for (const range of ranges) {
+        const { startOffset, endOffset } = range;
+        startOffset == null || endOffset == null || endOffset <= activeEndOffset && (cursor -= endOffset - startOffset);
       }
-      const a = [
+      const textRanges = [
         {
-          startOffset: s,
-          endOffset: s,
-          style: o
+          startOffset: cursor,
+          endOffset: cursor,
+          style
         }
       ];
-      return this._commandService.executeCommand(nn.id, { segmentId: e, textRanges: a });
+      return this._commandService.executeCommand(CutContentCommand.id, { segmentId, textRanges });
     } catch {
       return this._logService.error("[DocClipboardController] cut content failed"), !1;
     }
   }
-  async _paste(e) {
-    var d, g;
-    let n = En(e);
-    const o = (d = this._univerInstanceService.getCurrentUnitForType(v.UNIVER_DOC)) == null ? void 0 : d.getUnitId();
-    if (!o)
+  async _paste(_body) {
+    var _a19, _b;
+    let body = normalizeBody(_body);
+    const unitId = (_a19 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a19.getUnitId();
+    if (!unitId)
       return !1;
-    this._clipboardHooks.forEach((h) => {
-      h.onBeforePaste && (n = h.onBeforePaste(n));
-    }), n.customRanges = (g = n.customRanges) == null ? void 0 : g.map((h) => this._docCustomRangeService.copyCustomRange(o, h));
-    const r = this._textSelectionManagerService.getActiveRange(), { segmentId: i, endOffset: s, style: a } = r || {}, c = this._textSelectionManagerService.getCurrentSelections();
-    if (i == null && this._logService.error("[DocClipboardController] segmentId does not exist!"), s == null || c == null)
+    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));
+    const activeRange = this._textSelectionManagerService.getActiveRange(), { segmentId, endOffset: activeEndOffset, style } = activeRange || {}, ranges = this._textSelectionManagerService.getCurrentSelections();
+    if (segmentId == null && this._logService.error("[DocClipboardController] segmentId does not exist!"), activeEndOffset == null || ranges == null)
       return !1;
     try {
-      let h = s;
-      for (const l of c) {
-        const { startOffset: f, endOffset: u } = l;
-        f == null || u == null || u <= s && (h += n.dataStream.length - (u - f));
+      let cursor = activeEndOffset;
+      for (const range of ranges) {
+        const { startOffset, endOffset } = range;
+        startOffset == null || endOffset == null || endOffset <= activeEndOffset && (cursor += body.dataStream.length - (endOffset - startOffset));
       }
-      const p = [
+      const textRanges = [
         {
-          startOffset: h,
-          endOffset: h,
-          style: a
+          startOffset: cursor,
+          endOffset: cursor,
+          style
         }
       ];
-      return this._commandService.executeCommand(on.id, { body: n, segmentId: i, textRanges: p });
+      return this._commandService.executeCommand(InnerPasteCommand.id, { body, segmentId, textRanges });
     } catch {
       return this._logService.error("[DocClipboardController]", "clipboard is empty."), !1;
     }
   }
-  async _setClipboardData(e, n = !0) {
-    const o = wo(), r = e.length > 1 ? e.map((s) => s.dataStream).join(`
-`) : e[0].dataStream;
-    let i = this._umdToHtml.convert(e);
-    return e.length === 1 && n && (i = i.replace(/(<[a-z]+)/, (s, a) => `${a} data-copy-id="${o}"`), At.set(o, e[0])), this._clipboardInterfaceService.write(r, i);
+  async _setClipboardData(documentBodyList, needCache = !0) {
+    const copyId = genId(), text = documentBodyList.length > 1 ? documentBodyList.map((body) => body.dataStream).join(`
+`) : documentBodyList[0].dataStream;
+    let html = this._umdToHtml.convert(documentBodyList);
+    return documentBodyList.length === 1 && needCache && (html = html.replace(/(<[a-z]+)/, (_p0, p1) => `${p1} data-copy-id="${copyId}"`), copyContentCache.set(copyId, documentBodyList[0])), this._clipboardInterfaceService.write(text, html);
   }
-  addClipboardHook(e) {
-    return this._clipboardHooks.push(e), Jt(() => {
-      const n = this._clipboardHooks.indexOf(e);
-      n > -1 && this._clipboardHooks.splice(n, 1);
+  addClipboardHook(hook) {
+    return this._clipboardHooks.push(hook), toDisposable(() => {
+      const index = this._clipboardHooks.indexOf(hook);
+      index > -1 && this._clipboardHooks.splice(index, 1);
     });
   }
-  _getDocumentBodyInRanges(e) {
-    const n = this._textSelectionManagerService.getCurrentSelections(), o = this._textSelectionManagerService.getActiveRange(), r = this._univerInstanceService.getCurrentUniverDocInstance(), i = [], s = r == null ? void 0 : r.getBody();
-    if (n == null || r == null || s == null || o == null)
-      return i;
-    const { segmentId: a } = o;
-    for (const c of n) {
-      const { startOffset: d, endOffset: g, collapsed: h } = c;
-      if (h || d == null || g == null)
+  _getDocumentBodyInRanges(sliceType) {
+    const ranges = this._textSelectionManagerService.getCurrentSelections(), activeRange = this._textSelectionManagerService.getActiveRange(), docDataModel = this._univerInstanceService.getCurrentUniverDocInstance(), results = [], body = docDataModel == null ? void 0 : docDataModel.getBody();
+    if (ranges == null || docDataModel == null || body == null || activeRange == null)
+      return results;
+    const { segmentId } = activeRange;
+    for (const range of ranges) {
+      const { startOffset, endOffset, collapsed } = range;
+      if (collapsed || startOffset == null || endOffset == null)
         continue;
-      const p = Zn({ startOffset: d, endOffset: g, collapsed: h }, s), l = r.getSelfOrHeaderFooterModel(a).sliceBody(p.startOffset, p.endOffset, e);
-      if (l != null) {
-        if (l.customRanges) {
-          const f = [];
-          l.customRanges.forEach((m) => {
-            m.startIndex === m.endIndex && f.push(m);
-          }), l.customRanges = l.customRanges.filter((m) => f.indexOf(m) === -1);
-          let u = "", _ = 0;
-          f.forEach((m) => {
-            u += l.dataStream.slice(_, m.endIndex), _ = m.endIndex + 1;
-          }), u += l.dataStream.slice(_, l.dataStream.length), l.dataStream = u;
+      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;
         }
-        i.push(l);
+        results.push(docBody);
       }
     }
-    return i;
+    return results;
   }
-  async _generateBodyFromClipboardItems(e) {
+  async _generateBodyFromClipboardItems(items) {
     try {
-      let n = "", o = "";
-      for (const r of e)
-        for (const i of r.types)
-          i === An ? o = await r.getType(i).then((s) => s && s.text()) : i === Nn && (n = await r.getType(i).then((s) => s && s.text()));
-      return this._generateBodyFromHtmlAndText(n, o);
-    } catch (n) {
-      return Promise.reject(n);
+      let html = "", text = "";
+      for (const clipboardItem of items)
+        for (const type of clipboardItem.types)
+          type === PLAIN_TEXT_CLIPBOARD_MIME_TYPE ? text = await clipboardItem.getType(type).then((blob) => blob && blob.text()) : type === HTML_CLIPBOARD_MIME_TYPE && (html = await clipboardItem.getType(type).then((blob) => blob && blob.text()));
+      return this._generateBodyFromHtmlAndText(html, text);
+    } catch (e) {
+      return Promise.reject(e);
     }
   }
-  _generateBody(e) {
-    const n = e.replace(/\n/g, "\r");
-    if (!e.includes("\r") && j.isLegalUrl(e)) {
-      const r = j.generateRandomId(), i = this._univerInstanceService.getCurrentUnitForType(v.UNIVER_DOC), s = this._docCustomRangeService.copyCustomRange(
-        i.getUnitId(),
+  _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: n.length - 1,
-          rangeId: r,
-          rangeType: Kt.HYPERLINK,
-          data: e
+          endIndex: urlText.length - 1,
+          rangeId: id,
+          rangeType: CustomRangeType.HYPERLINK,
+          data: text
         }
       );
       return {
-        dataStream: `${Pe.CUSTOM_RANGE_START}${n}${Pe.CUSTOM_RANGE_END}`,
-        customRanges: [s]
+        dataStream: urlText,
+        customRanges: [range]
       };
     }
-    const o = [];
-    for (let r = 0; r < n.length; r++)
-      n[r] === "\r" && o.push({ startIndex: r });
+    const paragraphs = [];
+    for (let i = 0; i < dataStream.length; i++)
+      dataStream[i] === "\r" && paragraphs.push({ startIndex: i });
     return {
-      dataStream: n,
-      paragraphs: o
+      dataStream,
+      paragraphs
     };
   }
-  _generateBodyFromHtmlAndText(e, n) {
-    if (!e) {
-      if (n)
-        return this._generateBody(n);
+  _generateBodyFromHtmlAndText(html, text) {
+    if (!html) {
+      if (text)
+        return this._generateBody(text);
       throw new Error("[DocClipboardService] html and text cannot be both empty!");
     }
-    const o = Bo(e);
-    if (o) {
-      const r = At.get(o);
-      if (r)
-        return r;
+    const copyId = extractId(html);
+    if (copyId) {
+      const copyCache = copyContentCache.get(copyId);
+      if (copyCache)
+        return copyCache;
     }
-    return this._htmlToUDM.convert(e);
-  }
-};
-nt = Zo([
-  re(0, w),
-  re(1, Zt),
-  re(2, O),
-  re(3, ut),
-  re(4, I(te)),
-  re(5, I(Kn))
-], nt);
-var Jo = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, Qo = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? qo(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && Jo(e, n, r), r;
-}, Oe = (t, e) => (n, o) => e(n, o, t);
-const Lt = 1.5;
-let ot = class extends Se {
-  constructor(t, e, n, o, r) {
-    super(), this._context = t, this._textSelectionManagerService = e, this._editorService = n, this._univerInstanceService = o, this._renderManagerService = r, this._init();
+    return this._htmlToUDM.convert(html);
+  }
+}, __name(_a, "DocClipboardService"), _a);
+DocClipboardService = __decorateClass$h([
+  __decorateParam$h(0, IUniverInstanceService),
+  __decorateParam$h(1, ILogService),
+  __decorateParam$h(2, ICommandService),
+  __decorateParam$h(3, IClipboardInterfaceService),
+  __decorateParam$h(4, Inject(TextSelectionManagerService)),
+  __decorateParam$h(5, Inject(DocCustomRangeService))
+], DocClipboardService);
+var __defProp$g = Object.defineProperty, __getOwnPropDesc$g = Object.getOwnPropertyDescriptor, __decorateClass$g = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(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$g(target, key, result), result;
+}, "__decorateClass$g"), __decorateParam$g = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$g");
+const ANCHOR_WIDTH = 1.5;
+var _a2;
+let DocBackScrollRenderController = (_a2 = class extends RxDisposable {
+  constructor(_context, _textSelectionManagerService, _editorService, _univerInstanceService, _renderManagerService) {
+    super(), this._context = _context, this._textSelectionManagerService = _textSelectionManagerService, this._editorService = _editorService, this._univerInstanceService = _univerInstanceService, this._renderManagerService = _renderManagerService, this._init();
   }
   _init() {
-    this._textSelectionManagerService.textSelection$.pipe(se(this.dispose$)).subscribe((t) => {
-      if (t == null)
+    this._textSelectionManagerService.textSelection$.pipe(takeUntil(this.dispose$)).subscribe((params) => {
+      if (params == null)
         return;
-      const { isEditing: e, unitId: n } = t;
-      e && this._scrollToSelection(n);
+      const { isEditing, unitId } = params;
+      isEditing && this._scrollToSelection(unitId);
     });
   }
-  scrollToRange(t, e) {
-    var s;
-    const n = (s = this._renderManagerService.getRenderById(t)) == null ? void 0 : s.with(L), o = n == null ? void 0 : n.getSkeleton();
-    if (!o)
+  scrollToRange(unitId, range) {
+    var _a19;
+    const docSkeletonManagerService = (_a19 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a19.with(DocSkeletonManagerService), skeleton = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getSkeleton();
+    if (!skeleton)
       return;
-    const { startOffset: r } = e, i = o.findNodePositionByCharIndex(r);
-    this.scrollToNode(t, i);
+    const { startOffset } = range, anchorNodePosition = skeleton.findNodePositionByCharIndex(startOffset);
+    this.scrollToNode(unitId, anchorNodePosition);
   }
-  scrollToNode(t, e) {
-    var G;
-    const n = this._getDocObject(), o = (G = this._renderManagerService.getRenderById(t)) == null ? void 0 : G.with(L), r = o == null ? void 0 : o.getSkeleton();
-    if (n == null || r == null)
+  scrollToNode(unitId, startNodePosition) {
+    var _a19;
+    const docObject = this._getDocObject(), docSkeletonManagerService = (_a19 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a19.with(DocSkeletonManagerService), skeleton = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getSkeleton();
+    if (docObject == null || skeleton == null)
       return;
-    const i = n.document.getOffsetConfig(), { docsLeft: s, docsTop: a } = i, c = new rn(i, r), { contentBoxPointGroup: d } = c.getRangePointData(e, e), { left: g, top: h, height: p } = Co(d), l = g + s, f = h + a, u = n.scene.getViewport(q.VIEW_MAIN), _ = !!this._editorService.getEditor(t);
-    if (u == null)
+    const documentOffsetConfig = docObject.document.getOffsetConfig(), { docsLeft, docsTop } = documentOffsetConfig, convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { contentBoxPointGroup } = convertor.getRangePointData(startNodePosition, startNodePosition), { left: aLeft, top: aTop, height } = getAnchorBounding(contentBoxPointGroup), left = aLeft + docsLeft, top = aTop + docsTop, viewportMain = docObject.scene.getViewport(VIEWPORT_KEY.VIEW_MAIN), isEditor = !!this._editorService.getEditor(unitId);
+    if (viewportMain == null)
       return;
     const {
-      left: m,
-      top: R,
-      right: C,
-      bottom: E
-    } = u.getBounding().viewBound;
-    let b = 0, A = 0;
-    const N = _ ? 0 : 100;
-    f < R ? b = f - R - N : f > E - p && (b = f - E + p + N), l < m ? A = l - m : l > C - Lt && (A = l - C + Lt);
-    const Y = u.transViewportScroll2ScrollValue(A, b);
-    u.scrollBy(Y);
+      left: boundLeft,
+      top: boundTop,
+      right: boundRight,
+      bottom: boundBottom
+    } = viewportMain.getBounding().viewBound;
+    let offsetY = 0, offsetX = 0;
+    const delta = isEditor ? 0 : 100;
+    top < boundTop ? offsetY = top - boundTop - delta : top > boundBottom - height && (offsetY = top - boundBottom + height + delta), left < boundLeft ? offsetX = left - boundLeft : left > boundRight - ANCHOR_WIDTH && (offsetX = left - boundRight + ANCHOR_WIDTH);
+    const config = viewportMain.transViewportScroll2ScrollValue(offsetX, offsetY);
+    viewportMain.scrollByBarDeltaValue(config);
   }
   // Let the selection show on the current screen.
-  _scrollToSelection(t) {
-    const e = this._textSelectionManagerService.getActiveRange();
-    if (e == null)
+  _scrollToSelection(unitId) {
+    const activeTextRange = this._textSelectionManagerService.getActiveRange();
+    if (activeTextRange == null)
       return;
-    const { collapsed: n, startNodePosition: o } = e;
-    n && this.scrollToNode(t, o);
+    const { collapsed, startNodePosition } = activeTextRange;
+    collapsed && this.scrollToNode(unitId, startNodePosition);
   }
   _getDocObject() {
-    return Jn(this._univerInstanceService, this._renderManagerService);
-  }
-};
-ot = Qo([
-  Oe(1, I(te)),
-  Oe(2, ee),
-  Oe(3, I(w)),
-  Oe(4, W)
-], ot);
-const er = {
+    return getDocObject(this._univerInstanceService, this._renderManagerService);
+  }
+}, __name(_a2, "DocBackScrollRenderController"), _a2);
+DocBackScrollRenderController = __decorateClass$g([
+  __decorateParam$g(1, Inject(TextSelectionManagerService)),
+  __decorateParam$g(2, IEditorService),
+  __decorateParam$g(3, Inject(IUniverInstanceService)),
+  __decorateParam$g(4, IRenderManagerService)
+], DocBackScrollRenderController);
+const DefaultToolbarConfig = {
   undo: !0,
   redo: !0,
   // Undo redo
@@ -632,7 +648,7 @@ const er = {
   // 'Wrap mode'
   textRotateMode: !0
   // 'Text Rotation Mode'
-}, tr = {
+}, DefaultDocContainerConfig = {
   outerLeft: !1,
   outerRight: !1,
   header: !0,
@@ -645,85 +661,85 @@ const er = {
   frozenContent: !1,
   infoBar: !0,
   toolbar: !0
-}, nr = {
+}, DefaultDocUiConfig = {
   layout: {
-    docContainerConfig: tr,
-    toolbarConfig: er
+    docContainerConfig: DefaultDocContainerConfig,
+    toolbarConfig: DefaultToolbarConfig
   }
-}, or = "DocUI", rr = {
-  id: He.id,
-  binding: H.ARROW_UP,
-  preconditions: k,
+}, DOC_UI_PLUGIN_NAME = "DocUI", MoveCursorUpShortcut = {
+  id: MoveCursorOperation.id,
+  binding: KeyCode.ARROW_UP,
+  preconditions: whenDocAndEditorFocused,
   staticParameters: {
-    direction: K.UP
+    direction: Direction.UP
   }
-}, ir = {
-  id: He.id,
-  binding: H.ARROW_DOWN,
-  preconditions: k,
+}, MoveCursorDownShortcut = {
+  id: MoveCursorOperation.id,
+  binding: KeyCode.ARROW_DOWN,
+  preconditions: whenDocAndEditorFocused,
   staticParameters: {
-    direction: K.DOWN
+    direction: Direction.DOWN
   }
-}, sr = {
-  id: He.id,
-  binding: H.ARROW_LEFT,
-  preconditions: k,
+}, MoveCursorLeftShortcut = {
+  id: MoveCursorOperation.id,
+  binding: KeyCode.ARROW_LEFT,
+  preconditions: whenDocAndEditorFocused,
   staticParameters: {
-    direction: K.LEFT
+    direction: Direction.LEFT
   }
-}, ar = {
-  id: He.id,
-  binding: H.ARROW_RIGHT,
-  preconditions: k,
+}, MoveCursorRightShortcut = {
+  id: MoveCursorOperation.id,
+  binding: KeyCode.ARROW_RIGHT,
+  preconditions: whenDocAndEditorFocused,
   staticParameters: {
-    direction: K.RIGHT
+    direction: Direction.RIGHT
   }
-}, cr = {
-  id: Ve.id,
-  binding: H.ARROW_UP | ve.SHIFT,
-  preconditions: k,
+}, MoveSelectionUpShortcut = {
+  id: MoveSelectionOperation.id,
+  binding: KeyCode.ARROW_UP | MetaKeys.SHIFT,
+  preconditions: whenDocAndEditorFocused,
   staticParameters: {
-    direction: K.UP
+    direction: Direction.UP
   }
-}, lr = {
-  id: Ve.id,
-  binding: H.ARROW_DOWN | ve.SHIFT,
-  preconditions: k,
+}, MoveSelectionDownShortcut = {
+  id: MoveSelectionOperation.id,
+  binding: KeyCode.ARROW_DOWN | MetaKeys.SHIFT,
+  preconditions: whenDocAndEditorFocused,
   staticParameters: {
-    direction: K.DOWN
+    direction: Direction.DOWN
   }
-}, dr = {
-  id: Ve.id,
-  binding: H.ARROW_LEFT | ve.SHIFT,
-  preconditions: k,
+}, MoveSelectionLeftShortcut = {
+  id: MoveSelectionOperation.id,
+  binding: KeyCode.ARROW_LEFT | MetaKeys.SHIFT,
+  preconditions: whenDocAndEditorFocused,
   staticParameters: {
-    direction: K.LEFT
+    direction: Direction.LEFT
   }
-}, ur = {
-  id: Ve.id,
-  binding: H.ARROW_RIGHT | ve.SHIFT,
-  preconditions: k,
+}, MoveSelectionRightShortcut = {
+  id: MoveSelectionOperation.id,
+  binding: KeyCode.ARROW_RIGHT | MetaKeys.SHIFT,
+  preconditions: whenDocAndEditorFocused,
   staticParameters: {
-    direction: K.RIGHT
+    direction: Direction.RIGHT
   }
-}, hr = {
-  id: qn.id,
-  binding: H.A | ve.CTRL_COMMAND,
-  preconditions: (t) => t.getContextValue(dt) && (t.getContextValue(Ue) || t.getContextValue(qt))
+}, SelectAllShortcut = {
+  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")
 };
-var gr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, fr = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? pr(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && gr(e, n, r), r;
-}, wt = (t, e) => (n, o) => e(n, o, t);
-let rt = class {
-  constructor(t, e, n) {
-    T(this, "_docContainer");
+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"), _a3;
+let DocContainerUIController = (_a3 = class {
+  constructor(_config, _localeService, _injector) {
+    __publicField(this, "_docContainer");
     // 获取SheetContainer组件
-    T(this, "getComponent", (t) => {
-      if (this._docContainer = t, !t.getContentRef().current)
+    __publicField(this, "getComponent", /* @__PURE__ */ __name((ref) => {
+      if (this._docContainer = ref, !ref.getContentRef().current)
         throw new Error("container is not ready");
-    });
+    }, "getComponent"));
     /**
      * Change language
      * @param {string} lang new language
@@ -731,10 +747,10 @@ let rt = class {
      * e: {target: HTMLSelectElement } reference from  https://stackoverflow.com/a/48443771
      *
      */
-    T(this, "changeLocale", (t) => {
-      this._localeService.setLocale(t);
-    });
-    this._config = t, this._localeService = e, this._injector = n;
+    __publicField(this, "changeLocale", /* @__PURE__ */ __name((locale) => {
+      this._localeService.setLocale(locale);
+    }, "changeLocale"));
+    this._config = _config, this._localeService = _localeService, this._injector = _injector;
   }
   getUIConfig() {
     return {
@@ -747,27 +763,27 @@ let rt = class {
   getContentRef() {
     return this._docContainer.getContentRef();
   }
-  UIDidMount(t) {
+  UIDidMount(cb) {
     if (this._docContainer)
-      return t(this._docContainer);
+      return cb(this._docContainer);
   }
   getDocContainer() {
     return this._docContainer;
   }
-};
-rt = fr([
-  wt(1, I(le)),
-  wt(2, I($e))
-], rt);
-var _r = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, Sr = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? mr(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && _r(e, n, r), r;
-}, Ce = (t, e) => (n, o) => e(n, o, t);
-let _e = class extends Se {
-  constructor(e, n, o, r, i) {
+}, __name(_a3, "DocContainerUIController"), _a3);
+DocContainerUIController = __decorateClass$f([
+  __decorateParam$f(1, Inject(LocaleService)),
+  __decorateParam$f(2, Inject(Injector))
+], DocContainerUIController);
+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"), _a4;
+let AppUIController = (_a4 = class extends RxDisposable {
+  constructor(_config, _localeService, _injector, _textSelectionRenderManager, _layoutService) {
     super();
-    T(this, "_docContainerController");
+    __publicField(this, "_docContainerController");
     /**
      * Change language
      * @param {string} locale new language
@@ -775,10 +791,10 @@ let _e = class extends Se {
      * e: {target: HTMLSelectElement } reference from  https://stackoverflow.com/a/48443771
      *
      */
-    T(this, "changeLocale", (e) => {
-      this._localeService.setLocale(e);
-    });
-    this._localeService = n, this._injector = o, this._textSelectionRenderManager = r, this._layoutService = i, this._docContainerController = this._injector.createInstance(rt, e), this._registerContainer();
+    __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();
   }
   _registerContainer() {
     this._layoutService && this.disposeWithMe(
@@ -789,457 +805,508 @@ let _e = class extends Se {
   getDocContainerController() {
     return this._docContainerController;
   }
-};
-_e = Sr([
-  Ce(1, I(le)),
-  Ce(2, I($e)),
-  Ce(3, ne),
-  Ce(4, Xn(en))
-], _e);
-const We = "UI_PLUGIN_DOCS", pt = `${We}_COLOR_PICKER_COMPONENT`, dn = `${We}_FONT_FAMILY_COMPONENT`, un = `${We}_FONT_FAMILY_ITEM_COMPONENT`, hn = `${We}_FONT_SIZE_COMPONENT`, Bt = 18, $t = 200, Ze = 6, vr = 4;
-function Rr(t, e) {
-  let { radius: n, width: o, height: r } = e;
-  n = n != null ? n : 0, o = o != null ? o : 30, r = r != null ? r : 30;
-  let i = 0;
-  i = Math.min(n, o / 2, r / 2), t.beginPath(), t.moveTo(0, 0), t.lineTo(o, 0), t.lineTo(o, r - i), t.arc(o - i, r - i, i, 0, Math.PI / 2, !1), t.lineTo(0, r), t.lineTo(0, 0), t.closePath(), e.fill && (t.save(), t.fillStyle = e.fill, e.fillRule === "evenodd" ? t.fill("evenodd") : t.fill(), t.restore());
+}, __name(_a4, "AppUIController"), _a4);
+AppUIController = __decorateClass$e([
+  __decorateParam$e(1, Inject(LocaleService)),
+  __decorateParam$e(2, Inject(Injector)),
+  __decorateParam$e(3, ITextSelectionRenderManager),
+  __decorateParam$e(4, Optional(ILayoutService))
+], AppUIController);
+const COMPONENT_PREFIX = "UI_PLUGIN_DOCS", COLOR_PICKER_COMPONENT = `${COMPONENT_PREFIX}_COLOR_PICKER_COMPONENT`, FONT_FAMILY_COMPONENT = `${COMPONENT_PREFIX}_FONT_FAMILY_COMPONENT`, FONT_FAMILY_ITEM_COMPONENT = `${COMPONENT_PREFIX}_FONT_FAMILY_ITEM_COMPONENT`, FONT_SIZE_COMPONENT = `${COMPONENT_PREFIX}_FONT_SIZE_COMPONENT`;
+var jsxRuntime = { exports: {} }, reactJsxRuntime_production_min = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var f = require$$0, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
+function q(c, a, g) {
+  var b, d = {}, e = null, h = null;
+  g !== void 0 && (e = "" + g), a.key !== void 0 && (e = "" + a.key), a.ref !== void 0 && (h = a.ref);
+  for (b in a) m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+  if (c && c.defaultProps) for (b in a = c.defaultProps, a) d[b] === void 0 && (d[b] = a[b]);
+  return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
+}
+__name(q, "q");
+reactJsxRuntime_production_min.Fragment = l;
+reactJsxRuntime_production_min.jsx = q;
+reactJsxRuntime_production_min.jsxs = q;
+jsxRuntime.exports = reactJsxRuntime_production_min;
+var jsxRuntimeExports = jsxRuntime.exports;
+const docCountBar = "univer-doc-count-bar", styles$2 = {
+  docCountBar
+}, ZOOM_MAP = [50, 80, 100, 130, 150, 170, 200, 400], DOC_ZOOM_RANGE = [10, 400];
+function ZoomSlider() {
+  const commandService = useDependency(ICommandService), univerInstanceService = useDependency(IUniverInstanceService), currentDoc$ = useMemo(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC), []), documentDataModel = useObservable(currentDoc$), getCurrentZoom = useCallback(() => {
+    var _a19, _b;
+    if (!documentDataModel) return 100;
+    const currentZoom = ((_b = (_a19 = documentDataModel.getSettings()) == null ? void 0 : _a19.zoomRatio) != null ? _b : 1) * 100;
+    return Math.round(currentZoom);
+  }, [documentDataModel]), [zoom, setZoom] = useState(() => getCurrentZoom());
+  useEffect(() => (setZoom(getCurrentZoom()), commandService.onCommandExecuted((commandInfo) => {
+    if (commandInfo.id === SetDocZoomRatioOperation.id) {
+      const currentZoom = getCurrentZoom();
+      setZoom(currentZoom);
+    }
+  }).dispose), [commandService, getCurrentZoom]);
+  function handleChange(value) {
+    if (setZoom(value), documentDataModel == null)
+      return;
+    const zoomRatio = value / 100;
+    commandService.executeCommand(SetDocZoomRatioOperation.id, {
+      unitId: documentDataModel.getUnitId(),
+      zoomRatio
+    });
+  }
+  return __name(handleChange, "handleChange"), /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Slider,
+    {
+      min: DOC_ZOOM_RANGE[0],
+      value: zoom,
+      shortcuts: ZOOM_MAP,
+      onChange: handleChange
+    }
+  );
 }
-class Ne extends Eo {
-  constructor(n, o) {
-    super(n, o);
-    T(this, "color");
-    T(this, "text");
-    this.color = o == null ? void 0 : o.color, this.text = o == null ? void 0 : o.text;
-  }
-  static drawWith(n, o) {
-    const { text: r, color: i } = o;
-    n.save(), n.font = "13px Source Han Sans CN";
-    const s = n.measureText(r).width, a = Math.min(
-      s + 2 * Ze,
-      $t
+__name(ZoomSlider, "ZoomSlider");
+function CountBar(props) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: styles$2.docCountBar, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ZoomSlider, {}) });
+}
+__name(CountBar, "CountBar");
+const docFooterContainer = "univer-doc-footer-container", styles$1 = {
+  docFooterContainer
+}, DocFooter = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.docFooterContainer, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(CountBar, {})
+] }), "DocFooter"), COLLAB_CURSOR_LABEL_HEIGHT = 18, COLLAB_CURSOR_LABEL_MAX_WIDTH = 200, COLLAB_CURSOR_LABEL_TEXT_PADDING_LR = 6, COLLAB_CURSOR_LABEL_TEXT_PADDING_TB = 4;
+function drawBubble(ctx, props) {
+  let { radius, width, height } = props;
+  radius = radius != null ? radius : 0, width = width != null ? width : 30, height = height != null ? height : 30;
+  let bottomRight = 0;
+  bottomRight = Math.min(radius, width / 2, height / 2), ctx.beginPath(), ctx.moveTo(0, 0), ctx.lineTo(width, 0), ctx.lineTo(width, height - bottomRight), ctx.arc(width - bottomRight, height - bottomRight, bottomRight, 0, Math.PI / 2, !1), ctx.lineTo(0, height), ctx.lineTo(0, 0), ctx.closePath(), props.fill && (ctx.save(), ctx.fillStyle = props.fill, props.fillRule === "evenodd" ? ctx.fill("evenodd") : ctx.fill(), ctx.restore());
+}
+__name(drawBubble, "drawBubble");
+const _TextBubbleShape = class _TextBubbleShape extends Shape {
+  constructor(key, props) {
+    super(key, props);
+    __publicField(this, "color");
+    __publicField(this, "text");
+    this.color = props == null ? void 0 : props.color, this.text = props == null ? void 0 : props.text;
+  }
+  static drawWith(ctx, props) {
+    const { text, color } = props;
+    ctx.save(), ctx.font = "13px Source Han Sans CN";
+    const textWidth = ctx.measureText(text).width, realInfoWidth = Math.min(
+      textWidth + 2 * COLLAB_CURSOR_LABEL_TEXT_PADDING_LR,
+      COLLAB_CURSOR_LABEL_MAX_WIDTH
     );
-    Rr(n, {
-      height: Bt,
-      width: a,
+    drawBubble(ctx, {
+      height: COLLAB_CURSOR_LABEL_HEIGHT,
+      width: realInfoWidth,
       radius: 4,
-      fill: i,
+      fill: color,
       evented: !1
-    }), n.fillStyle = "rgba(58, 96, 247, 1)";
-    const c = Ze, d = Bt - vr, g = $t - 2 * Ze;
-    if (s > g) {
-      let h = "", p = 0;
-      for (const l of r) {
-        const f = n.measureText(l).width;
-        if (p + f <= g - n.measureText("...").width)
-          h += l, p += f;
+    }), ctx.fillStyle = "rgba(58, 96, 247, 1)";
+    const offsetX = COLLAB_CURSOR_LABEL_TEXT_PADDING_LR, offsetY = COLLAB_CURSOR_LABEL_HEIGHT - COLLAB_CURSOR_LABEL_TEXT_PADDING_TB, maxTextWidth = COLLAB_CURSOR_LABEL_MAX_WIDTH - 2 * COLLAB_CURSOR_LABEL_TEXT_PADDING_LR;
+    if (textWidth > maxTextWidth) {
+      let truncatedText = "", currentWidth = 0;
+      for (const element of text) {
+        const charWidth = ctx.measureText(element).width;
+        if (currentWidth + charWidth <= maxTextWidth - ctx.measureText("...").width)
+          truncatedText += element, currentWidth += charWidth;
         else {
-          h += "...";
+          truncatedText += "...";
           break;
         }
       }
-      n.fillText(h, c, d);
+      ctx.fillText(truncatedText, offsetX, offsetY);
     } else
-      n.fillText(r, c, d);
-    n.restore();
+      ctx.fillText(text, offsetX, offsetY);
+    ctx.restore();
   }
-  _draw(n) {
-    Ne.drawWith(n, this);
+  _draw(ctx) {
+    _TextBubbleShape.drawWith(ctx, this);
   }
-}
-const gn = "COMPONENT_DOC_HEADER_FOOTER_PANEL";
-var pn = { exports: {} }, ke = {};
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var Or = Po, Cr = Symbol.for("react.element"), Er = Symbol.for("react.fragment"), Tr = Object.prototype.hasOwnProperty, Ir = Or.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, br = { key: !0, ref: !0, __self: !0, __source: !0 };
-function fn(t, e, n) {
-  var o, r = {}, i = null, s = null;
-  n !== void 0 && (i = "" + n), e.key !== void 0 && (i = "" + e.key), e.ref !== void 0 && (s = e.ref);
-  for (o in e) Tr.call(e, o) && !br.hasOwnProperty(o) && (r[o] = e[o]);
-  if (t && t.defaultProps) for (o in e = t.defaultProps, e) r[o] === void 0 && (r[o] = e[o]);
-  return { $$typeof: Cr, type: t, key: i, ref: s, props: r, _owner: Ir.current };
-}
-ke.Fragment = Er;
-ke.jsx = fn;
-ke.jsxs = fn;
-pn.exports = ke;
-var M = pn.exports;
-const Mr = "univer-panel", yr = "univer-options-section", xr = "univer-options-form-item", Pr = "univer-options-input", Dr = "univer-options-margin-setting", $ = {
-  panel: Mr,
-  optionsSection: yr,
-  optionsFormItem: xr,
-  optionsInput: Pr,
-  optionsMarginSetting: Dr
-}, Ar = (t) => {
-  const e = z(le), n = z(w), o = z(W), r = z(O), i = z(ne), s = z(te), { unitId: a } = t, [c, d] = an({}), g = (l, f) => {
-    var N;
-    d((Y) => ({
-      ...Y,
-      [f]: l ? S.TRUE : S.FALSE
+};
+__name(_TextBubbleShape, "TextBubbleShape");
+let TextBubbleShape = _TextBubbleShape;
+const COMPONENT_DOC_HEADER_FOOTER_PANEL = "COMPONENT_DOC_HEADER_FOOTER_PANEL", panel = "univer-panel", optionsSection = "univer-options-section", optionsFormItem = "univer-options-form-item", optionsInput = "univer-options-input", optionsMarginSetting = "univer-options-margin-setting", styles = {
+  panel,
+  optionsSection,
+  optionsFormItem,
+  optionsInput,
+  optionsMarginSetting
+}, DocHeaderFooterOptions = /* @__PURE__ */ __name((props) => {
+  const localeService = useDependency(LocaleService), univerInstanceService = useDependency(IUniverInstanceService), renderManagerService = useDependency(IRenderManagerService), commandService = useDependency(ICommandService), textSelectionRenderService = useDependency(ITextSelectionRenderManager), textSelectionManagerService = useDependency(TextSelectionManagerService), { unitId } = props, [options, setOptions] = useState({}), handleCheckboxChange = /* @__PURE__ */ __name((val, type) => {
+    var _a19;
+    setOptions((prev) => ({
+      ...prev,
+      [type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE
     }));
-    const u = n.getUniverDocInstance(a), _ = u == null ? void 0 : u.getSnapshot().documentStyle, m = (N = o.getRenderById(a)) == null ? void 0 : N.with(L), R = m == null ? void 0 : m.getViewModel();
-    if (_ == null || R == null)
+    const docDataModel = univerInstanceService.getUniverDocInstance(unitId), documentStyle = docDataModel == null ? void 0 : docDataModel.getSnapshot().documentStyle, docSkeletonManagerService = (_a19 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a19.with(DocSkeletonManagerService), viewModel = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getViewModel();
+    if (documentStyle == null || viewModel == null)
       return;
-    const C = R.getEditArea();
-    let E = !1;
-    const b = i.getSegmentPage();
-    let A = !1;
-    if (f === "useFirstPageHeaderFooter" && l === !0 && ((C === F.HEADER && !_.firstPageHeaderId || C === F.FOOTER && !_.firstPageFooterId) && (E = !0), E && b === 0 && (A = !0)), f === "evenAndOddHeaders" && l === !0 && ((C === F.HEADER && !_.evenPageHeaderId || C === F.FOOTER && !_.evenPageFooterId) && (E = !0), E && b % 2 === 1 && (A = !0)), E) {
-      const G = j.generateRandomId(6);
-      A && i.setSegment(G), r.executeCommand(be, {
-        unitId: a,
-        segmentId: G,
+    const editArea = viewModel.getEditArea();
+    let needCreateHeaderFooter = !1;
+    const segmentPage = textSelectionRenderService.getSegmentPage();
+    let needChangeSegmentId = !1;
+    if (type === "useFirstPageHeaderFooter" && val === !0 && ((editArea === DocumentEditArea.HEADER && !documentStyle.firstPageHeaderId || editArea === DocumentEditArea.FOOTER && !documentStyle.firstPageFooterId) && (needCreateHeaderFooter = !0), needCreateHeaderFooter && segmentPage === 0 && (needChangeSegmentId = !0)), type === "evenAndOddHeaders" && val === !0 && ((editArea === DocumentEditArea.HEADER && !documentStyle.evenPageHeaderId || editArea === DocumentEditArea.FOOTER && !documentStyle.evenPageFooterId) && (needCreateHeaderFooter = !0), needCreateHeaderFooter && segmentPage % 2 === 1 && (needChangeSegmentId = !0)), needCreateHeaderFooter) {
+      const segmentId = Tools.generateRandomId(6);
+      needChangeSegmentId && textSelectionRenderService.setSegment(segmentId), commandService.executeCommand(CoreHeaderFooterCommandId, {
+        unitId,
+        segmentId,
         headerFooterProps: {
-          [f]: l ? S.TRUE : S.FALSE
+          [type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE
         }
       });
     } else
-      r.executeCommand(be, {
-        unitId: a,
+      commandService.executeCommand(CoreHeaderFooterCommandId, {
+        unitId,
         headerFooterProps: {
-          [f]: l ? S.TRUE : S.FALSE
+          [type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE
         }
       });
-  }, h = async (l, f) => {
-    d((u) => ({
-      ...u,
-      [f]: l
-    })), await r.executeCommand(be, {
-      unitId: a,
+  }, "handleCheckboxChange"), handleMarginChange = /* @__PURE__ */ __name(async (val, type) => {
+    setOptions((prev) => ({
+      ...prev,
+      [type]: val
+    })), await commandService.executeCommand(CoreHeaderFooterCommandId, {
+      unitId,
       headerFooterProps: {
-        [f]: l
+        [type]: val
       }
-    }), i.removeAllTextRanges(), i.blur();
-  }, p = () => {
-    var E;
-    const l = o.getRenderById(a);
-    if (l == null)
+    }), textSelectionRenderService.removeAllTextRanges(), textSelectionRenderService.blur();
+  }, "handleMarginChange"), closeHeaderFooter = /* @__PURE__ */ __name(() => {
+    var _a19;
+    const renderObject = renderManagerService.getRenderById(unitId);
+    if (renderObject == null)
       return;
-    const { scene: f } = l, u = f.getTransformerByCreate(), _ = l.with(L), m = _ == null ? void 0 : _.getSkeleton(), R = _ == null ? void 0 : _.getViewModel(), C = o.getRenderById(a);
-    C == null || R == null || m == null || (s.replaceTextRanges([]), u.clearSelectedObjects(), i.setSegment(""), i.setSegmentPage(-1), R.setEditArea(F.BODY), m.calculate(), (E = C.mainComponent) == null || E.makeDirty(!0));
-  };
-  return cn(() => {
-    const l = n.getUniverDocInstance(a), f = l == null ? void 0 : l.getSnapshot().documentStyle;
-    if (f) {
-      const { marginHeader: u, marginFooter: _, useFirstPageHeaderFooter: m, evenAndOddHeaders: R } = f;
-      d({
-        marginHeader: u,
-        marginFooter: _,
-        useFirstPageHeaderFooter: m,
-        evenAndOddHeaders: R
+    const { scene } = renderObject, transformer = scene.getTransformerByCreate(), docSkeletonManagerService = renderObject.with(DocSkeletonManagerService), skeleton = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getSkeleton(), viewModel = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getViewModel(), render = renderManagerService.getRenderById(unitId);
+    render == null || viewModel == null || skeleton == null || (textSelectionManagerService.replaceTextRanges([]), transformer.clearSelectedObjects(), textSelectionRenderService.setSegment(""), textSelectionRenderService.setSegmentPage(-1), viewModel.setEditArea(DocumentEditArea.BODY), skeleton.calculate(), (_a19 = render.mainComponent) == null || _a19.makeDirty(!0));
+  }, "closeHeaderFooter");
+  return useEffect(() => {
+    const docDataModel = univerInstanceService.getUniverDocInstance(unitId), documentStyle = docDataModel == null ? void 0 : docDataModel.getSnapshot().documentStyle;
+    if (documentStyle) {
+      const { marginHeader, marginFooter, useFirstPageHeaderFooter, evenAndOddHeaders } = documentStyle;
+      setOptions({
+        marginHeader,
+        marginFooter,
+        useFirstPageHeaderFooter,
+        evenAndOddHeaders
       });
     }
-  }, [a]), /* @__PURE__ */ M.jsxs("div", { className: $.options, children: [
-    /* @__PURE__ */ M.jsxs("div", { className: $.optionsSection, children: [
-      /* @__PURE__ */ M.jsx("div", { className: $.optionsFormItem, children: /* @__PURE__ */ M.jsx(
-        Pt,
+  }, [unitId]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.options, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.optionsSection, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.optionsFormItem, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Checkbox,
         {
-          checked: c.useFirstPageHeaderFooter === S.TRUE,
-          onChange: (l) => {
-            g(l, "useFirstPageHeaderFooter");
-          },
-          children: e.t("headerFooter.firstPageCheckBox")
+          checked: options.useFirstPageHeaderFooter === BooleanNumber.TRUE,
+          onChange: /* @__PURE__ */ __name((val) => {
+            handleCheckboxChange(val, "useFirstPageHeaderFooter");
+          }, "onChange"),
+          children: localeService.t("headerFooter.firstPageCheckBox")
         }
       ) }),
-      /* @__PURE__ */ M.jsx("div", { className: $.optionsFormItem, children: /* @__PURE__ */ M.jsx(
-        Pt,
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.optionsFormItem, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Checkbox,
         {
-          checked: c.evenAndOddHeaders === S.TRUE,
-          onChange: (l) => {
-            g(l, "evenAndOddHeaders");
-          },
-          children: e.t("headerFooter.oddEvenCheckBox")
+          checked: options.evenAndOddHeaders === BooleanNumber.TRUE,
+          onChange: /* @__PURE__ */ __name((val) => {
+            handleCheckboxChange(val, "evenAndOddHeaders");
+          }, "onChange"),
+          children: localeService.t("headerFooter.oddEvenCheckBox")
         }
       ) })
     ] }),
-    /* @__PURE__ */ M.jsxs("div", { className: No($.optionsSection, $.optionsMarginSetting), children: [
-      /* @__PURE__ */ M.jsxs("div", { className: $.optionsMarginItem, children: [
-        /* @__PURE__ */ M.jsx("span", { children: e.t("headerFooter.headerTopMargin") }),
-        /* @__PURE__ */ M.jsx(
-          Dt,
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles.optionsSection, styles.optionsMarginSetting), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.optionsMarginItem, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: localeService.t("headerFooter.headerTopMargin") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          InputNumber,
           {
             min: 0,
             max: 200,
             precision: 1,
-            value: c.marginHeader,
-            onChange: (l) => {
-              h(l, "marginHeader");
-            },
-            className: $.optionsInput
+            value: options.marginHeader,
+            onChange: /* @__PURE__ */ __name((val) => {
+              handleMarginChange(val, "marginHeader");
+            }, "onChange"),
+            className: styles.optionsInput
           }
         )
       ] }),
-      /* @__PURE__ */ M.jsxs("div", { className: $.optionsMarginItem, children: [
-        /* @__PURE__ */ M.jsx("span", { children: e.t("headerFooter.footerBottomMargin") }),
-        /* @__PURE__ */ M.jsx(
-          Dt,
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.optionsMarginItem, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: localeService.t("headerFooter.footerBottomMargin") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          InputNumber,
           {
             min: 0,
             max: 200,
             precision: 1,
-            value: c.marginFooter,
-            onChange: (l) => {
-              h(l, "marginFooter");
-            },
-            className: $.optionsInput
+            value: options.marginFooter,
+            onChange: /* @__PURE__ */ __name((val) => {
+              handleMarginChange(val, "marginFooter");
+            }, "onChange"),
+            className: styles.optionsInput
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ M.jsx("div", { className: $.optionsSection, children: /* @__PURE__ */ M.jsx(Do, { onClick: p, children: e.t("headerFooter.closeHeaderFooter") }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.optionsSection, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: closeHeaderFooter, children: localeService.t("headerFooter.closeHeaderFooter") }) })
   ] });
-}, Nr = () => {
-  var d;
-  const t = z(le), e = z(W), r = z(w).getCurrentUniverDocInstance().getUnitId(), s = ((d = e.getRenderById(r)) == null ? void 0 : d.with(L)).getViewModel(), [a, c] = an(!0);
-  return cn(() => {
-    const g = s.getEditArea();
-    c(g !== F.BODY);
-    const h = s.editAreaChange$.subscribe((p) => {
-      p != null && c(p !== F.BODY);
+}, "DocHeaderFooterOptions"), DocHeaderFooterPanel = /* @__PURE__ */ __name(() => {
+  var _a19;
+  const localeService = useDependency(LocaleService), renderManagerService = useDependency(IRenderManagerService), unitId = useDependency(IUniverInstanceService).getCurrentUniverDocInstance().getUnitId(), viewModel = ((_a19 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a19.with(DocSkeletonManagerService)).getViewModel(), [isEditHeaderFooter, setIsEditHeaderFooter] = useState(!0);
+  return useEffect(() => {
+    const editArea = viewModel.getEditArea();
+    setIsEditHeaderFooter(editArea !== DocumentEditArea.BODY);
+    const subscription = viewModel.editAreaChange$.subscribe((editArea2) => {
+      editArea2 != null && setIsEditHeaderFooter(editArea2 !== DocumentEditArea.BODY);
     });
     return () => {
-      h.unsubscribe();
+      subscription.unsubscribe();
     };
-  }, []), /* @__PURE__ */ M.jsx("div", { className: $.panel, children: a ? /* @__PURE__ */ M.jsx(Ar, { unitId: r }) : /* @__PURE__ */ M.jsx("div", { className: $.panelDisableText, children: t.t("headerFooter.disableText") }) });
-}, _n = {
+  }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.panel, children: isEditHeaderFooter ? /* @__PURE__ */ jsxRuntimeExports.jsx(DocHeaderFooterOptions, { unitId }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.panelDisableText, children: localeService.t("headerFooter.disableText") }) });
+}, "DocHeaderFooterPanel"), SidebarDocHeaderFooterPanelOperation = {
   id: "sidebar.operation.doc-header-footer-panel",
-  type: de.COMMAND,
-  handler: async (t, e) => {
-    const n = t.get(Fn), o = t.get(le);
-    switch (e.value) {
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const sidebarService = accessor.get(ISidebarService), localeService = accessor.get(LocaleService);
+    switch (params.value) {
       case "open":
-        n.open({
-          header: { title: o.t("headerFooter.panel") },
-          children: { label: gn },
-          onClose: () => {
-          },
+        sidebarService.open({
+          header: { title: localeService.t("headerFooter.panel") },
+          children: { label: COMPONENT_DOC_HEADER_FOOTER_PANEL },
+          onClose: /* @__PURE__ */ __name(() => {
+          }, "onClose"),
           width: 400
         });
         break;
       case "close":
       default:
-        n.close();
+        sidebarService.close();
         break;
     }
     return !0;
-  }
+  }, "handler")
 };
-var Fr = Object.defineProperty, Ur = Object.getOwnPropertyDescriptor, Lr = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? Ur(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && Fr(e, n, r), r;
-}, X = (t, e) => (n, o) => e(n, o, t);
-const Ht = "rgba(58, 96, 247, 1)", Vt = "rgba(58, 96, 247, 0.08)";
-var U = /* @__PURE__ */ ((t) => (t[t.FIRST_PAGE_HEADER = 0] = "FIRST_PAGE_HEADER", t[t.FIRST_PAGE_FOOTER = 1] = "FIRST_PAGE_FOOTER", t[t.DEFAULT_HEADER = 2] = "DEFAULT_HEADER", t[t.DEFAULT_FOOTER = 3] = "DEFAULT_FOOTER", t[t.EVEN_PAGE_HEADER = 4] = "EVEN_PAGE_HEADER", t[t.EVEN_PAGE_FOOTER = 5] = "EVEN_PAGE_FOOTER", t))(U || {});
-function wr(t, e, n) {
-  const { documentStyle: o } = t.getDataModel().getSnapshot(), {
-    defaultHeaderId: r,
-    defaultFooterId: i,
-    evenPageHeaderId: s,
-    evenPageFooterId: a,
-    firstPageHeaderId: c,
-    firstPageFooterId: d,
-    evenAndOddHeaders: g,
-    useFirstPageHeaderFooter: h
-  } = o;
-  switch (e) {
-    case F.BODY:
+var __defProp$d = Object.defineProperty, __getOwnPropDesc$d = Object.getOwnPropertyDescriptor, __decorateClass$d = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(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$d(target, key, result), result;
+}, "__decorateClass$d"), __decorateParam$d = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$d");
+const HEADER_FOOTER_STROKE_COLOR = "rgba(58, 96, 247, 1)", HEADER_FOOTER_FILL_COLOR = "rgba(58, 96, 247, 0.08)";
+var HeaderFooterType = /* @__PURE__ */ ((HeaderFooterType2) => (HeaderFooterType2[HeaderFooterType2.FIRST_PAGE_HEADER = 0] = "FIRST_PAGE_HEADER", HeaderFooterType2[HeaderFooterType2.FIRST_PAGE_FOOTER = 1] = "FIRST_PAGE_FOOTER", HeaderFooterType2[HeaderFooterType2.DEFAULT_HEADER = 2] = "DEFAULT_HEADER", HeaderFooterType2[HeaderFooterType2.DEFAULT_FOOTER = 3] = "DEFAULT_FOOTER", HeaderFooterType2[HeaderFooterType2.EVEN_PAGE_HEADER = 4] = "EVEN_PAGE_HEADER", HeaderFooterType2[HeaderFooterType2.EVEN_PAGE_FOOTER = 5] = "EVEN_PAGE_FOOTER", HeaderFooterType2))(HeaderFooterType || {});
+function checkCreateHeaderFooterType(viewModel, editArea, segmentPage) {
+  const { documentStyle } = viewModel.getDataModel().getSnapshot(), {
+    defaultHeaderId,
+    defaultFooterId,
+    evenPageHeaderId,
+    evenPageFooterId,
+    firstPageHeaderId,
+    firstPageFooterId,
+    evenAndOddHeaders,
+    useFirstPageHeaderFooter
+  } = documentStyle;
+  switch (editArea) {
+    case DocumentEditArea.BODY:
       return {
         createType: null,
         headerFooterId: null
       };
-    case F.HEADER:
-      return h === S.TRUE && !c ? {
+    case DocumentEditArea.HEADER:
+      return useFirstPageHeaderFooter === BooleanNumber.TRUE && !firstPageHeaderId ? {
         createType: 0,
         headerFooterId: null
-      } : g === S.TRUE && n % 2 === 0 && !s ? {
+      } : evenAndOddHeaders === BooleanNumber.TRUE && segmentPage % 2 === 0 && !evenPageHeaderId ? {
         createType: 4,
         headerFooterId: null
-      } : r ? {
+      } : defaultHeaderId ? {
         createType: null,
-        headerFooterId: r
+        headerFooterId: defaultHeaderId
       } : {
         createType: 2,
         headerFooterId: null
       };
-    case F.FOOTER:
-      return h === S.TRUE && !d ? {
+    case DocumentEditArea.FOOTER:
+      return useFirstPageHeaderFooter === BooleanNumber.TRUE && !firstPageFooterId ? {
         createType: 1,
         headerFooterId: null
-      } : g === S.TRUE && n % 2 === 0 && !a ? {
+      } : evenAndOddHeaders === BooleanNumber.TRUE && segmentPage % 2 === 0 && !evenPageFooterId ? {
         createType: 5,
         headerFooterId: null
-      } : i ? {
+      } : defaultFooterId ? {
         createType: null,
-        headerFooterId: i
+        headerFooterId: defaultFooterId
       } : {
         createType: 3,
         headerFooterId: null
       };
     default:
-      throw new Error(`Invalid editArea: ${e}`);
+      throw new Error(`Invalid editArea: ${editArea}`);
   }
 }
-let it = class extends Q {
-  constructor(e, n, o, r, i, s, a, c, d) {
+__name(checkCreateHeaderFooterType, "checkCreateHeaderFooterType");
+var _a5;
+let DocHeaderFooterController = (_a5 = class extends Disposable {
+  constructor(_context, _commandService, _editorService, _instanceSrv, _renderManagerService, _docSkeletonManagerService, _textSelectionRenderManager, _localeService, _componentManager) {
     super();
-    T(this, "_loadedMap", /* @__PURE__ */ new WeakSet());
-    this._context = e, this._commandService = n, this._editorService = o, this._instanceSrv = r, this._renderManagerService = i, this._docSkeletonManagerService = s, this._textSelectionRenderManager = a, this._localeService = c, this._componentManager = d, this._initialize();
+    __publicField(this, "_loadedMap", /* @__PURE__ */ new WeakSet());
+    this._context = _context, this._commandService = _commandService, this._editorService = _editorService, this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, this._docSkeletonManagerService = _docSkeletonManagerService, this._textSelectionRenderManager = _textSelectionRenderManager, this._localeService = _localeService, this._componentManager = _componentManager, this._initialize();
   }
   _initialize() {
-    this._context.unit.getSnapshot().documentStyle.documentFlavor === Tn.TRADITIONAL && (this._init(), this._drawHeaderFooterLabel(), this._registerCommands(), this._initCustomComponents());
+    this._context.unit.getSnapshot().documentStyle.documentFlavor === DocumentFlavor.TRADITIONAL && (this._init(), this._drawHeaderFooterLabel(), this._registerCommands(), this._initCustomComponents());
   }
   _registerCommands() {
     [
-      Wt,
-      mn,
-      _n
-    ].forEach((e) => this.disposeWithMe(this._commandService.registerCommand(e)));
+      CoreHeaderFooterCommand,
+      OpenHeaderFooterPanelCommand,
+      SidebarDocHeaderFooterPanelOperation
+    ].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
   }
   _initCustomComponents() {
-    const e = this._componentManager;
-    this.disposeWithMe(e.register(gn, Nr));
+    const componentManager = this._componentManager;
+    this.disposeWithMe(componentManager.register(COMPONENT_DOC_HEADER_FOOTER_PANEL, DocHeaderFooterPanel));
   }
   _init() {
-    const { unitId: e } = this._context, n = J(this._context);
-    n == null || n.document == null || this._loadedMap.has(n.document) || (this._initialMain(e), this._loadedMap.add(n.document));
+    const { unitId } = this._context, docObject = neoGetDocObject(this._context);
+    docObject == null || docObject.document == null || this._loadedMap.has(docObject.document) || (this._initialMain(unitId), this._loadedMap.add(docObject.document));
   }
-  _initialMain(e) {
-    const n = J(this._context), { document: o } = n;
-    this.disposeWithMe(o.onDblclick$.subscribeEvent(async (r) => {
-      if (this._isEditorReadOnly(e))
+  _initialMain(unitId) {
+    const docObject = neoGetDocObject(this._context), { document } = docObject;
+    this.disposeWithMe(document.onDblclick$.subscribeEvent(async (evt) => {
+      if (this._isEditorReadOnly(unitId))
         return;
-      const { offsetX: i, offsetY: s } = r, {
-        pageLayoutType: a = Ae.VERTICAL,
-        pageMarginLeft: c,
-        pageMarginTop: d
-      } = o.getOffsetConfig(), g = this._getTransformCoordForDocumentOffset(i, s);
-      if (g == null)
+      const { offsetX, offsetY } = evt, {
+        pageLayoutType = PageLayoutType.VERTICAL,
+        pageMarginLeft,
+        pageMarginTop
+      } = document.getOffsetConfig(), coord = this._getTransformCoordForDocumentOffset(offsetX, offsetY);
+      if (coord == null)
         return;
-      const h = this._docSkeletonManagerService.getViewModel(), p = this._docSkeletonManagerService.getSkeleton(), l = h.getEditArea(), { editArea: f, pageNumber: u } = p.findEditAreaByCoord(
-        g,
-        a,
-        c,
-        d
+      const viewModel = this._docSkeletonManagerService.getViewModel(), skeleton = this._docSkeletonManagerService.getSkeleton(), preEditArea = viewModel.getEditArea(), { editArea, pageNumber } = skeleton.findEditAreaByCoord(
+        coord,
+        pageLayoutType,
+        pageMarginLeft,
+        pageMarginTop
       );
-      if (l === f)
+      if (preEditArea === editArea)
         return;
-      h.setEditArea(f);
-      const { createType: _, headerFooterId: m } = wr(h, f, u);
-      if (f === F.BODY)
-        this._textSelectionRenderManager.setSegment(""), this._textSelectionRenderManager.setSegmentPage(-1), this._textSelectionRenderManager.setCursorManually(i, s);
-      else if (_ != null) {
-        const C = j.generateRandomId(6);
-        this._textSelectionRenderManager.setSegment(C), this._textSelectionRenderManager.setSegmentPage(u), await this._commandService.executeCommand(Wt.id, {
-          unitId: e,
-          createType: _,
-          segmentId: C
+      viewModel.setEditArea(editArea);
+      const { createType, headerFooterId } = checkCreateHeaderFooterType(viewModel, editArea, pageNumber);
+      if (editArea === DocumentEditArea.BODY)
+        this._textSelectionRenderManager.setSegment(""), this._textSelectionRenderManager.setSegmentPage(-1), this._textSelectionRenderManager.setCursorManually(offsetX, offsetY);
+      else if (createType != null) {
+        const segmentId = Tools.generateRandomId(6);
+        this._textSelectionRenderManager.setSegment(segmentId), this._textSelectionRenderManager.setSegmentPage(pageNumber), await this._commandService.executeCommand(CoreHeaderFooterCommand.id, {
+          unitId,
+          createType,
+          segmentId
         });
-      } else m != null && (this._textSelectionRenderManager.setSegment(m), this._textSelectionRenderManager.setSegmentPage(u), this._textSelectionRenderManager.setCursorManually(i, s));
+      } else headerFooterId != null && (this._textSelectionRenderManager.setSegment(headerFooterId), this._textSelectionRenderManager.setSegmentPage(pageNumber), this._textSelectionRenderManager.setCursorManually(offsetX, offsetY));
     }));
   }
-  _getTransformCoordForDocumentOffset(e, n) {
-    const o = J(this._context), { document: r, scene: i } = o, { documentTransform: s } = r.getOffsetConfig(), a = i.getViewports()[0];
-    if (a == null)
+  _getTransformCoordForDocumentOffset(evtOffsetX, evtOffsetY) {
+    const docObject = neoGetDocObject(this._context), { document, scene } = docObject, { documentTransform } = document.getOffsetConfig(), activeViewport = scene.getViewports()[0];
+    if (activeViewport == null)
       return;
-    const c = a.transformVector2SceneCoord(sn.FromArray([e, n]));
-    return s.clone().invert().applyPoint(c);
+    const originCoord = activeViewport.transformVector2SceneCoord(Vector2.FromArray([evtOffsetX, evtOffsetY]));
+    return documentTransform.clone().invert().applyPoint(originCoord);
   }
   // eslint-disable-next-line max-lines-per-function
   _drawHeaderFooterLabel() {
-    const e = this._localeService;
-    this._renderManagerService.currentRender$.subscribe((n) => {
-      if (n == null)
+    const localeService = this._localeService;
+    this._renderManagerService.currentRender$.subscribe((unitId) => {
+      if (unitId == null)
         return;
-      const o = this._renderManagerService.getRenderById(n);
-      if (this._editorService.isEditor(n) || this._instanceSrv.getUniverDocInstance(n) == null || o == null)
+      const currentRender = this._renderManagerService.getRenderById(unitId);
+      if (this._editorService.isEditor(unitId) || this._instanceSrv.getUniverDocInstance(unitId) == null || currentRender == null)
         return;
-      const { mainComponent: r } = o, i = r;
+      const { mainComponent } = currentRender, docsComponent = mainComponent;
       this.disposeWithMe(
-        Jt(
+        toDisposable(
           // eslint-disable-next-line max-lines-per-function
-          i.pageRender$.subscribe((s) => {
-            if (this._editorService.isEditor(n))
+          docsComponent.pageRender$.subscribe((config) => {
+            if (this._editorService.isEditor(unitId))
               return;
-            const d = this._docSkeletonManagerService.getViewModel().getEditArea() === F.BODY, { page: g, pageLeft: h, pageTop: p, ctx: l } = s, { pageWidth: f, pageHeight: u, marginTop: _, marginBottom: m } = g;
-            if (l.save(), l.translate(h - 0.5, p - 0.5), d ? (Xe.drawWith(l, {
+            const isEditBody = this._docSkeletonManagerService.getViewModel().getEditArea() === DocumentEditArea.BODY, { page, pageLeft, pageTop, ctx } = config, { pageWidth, pageHeight, marginTop, marginBottom } = page;
+            if (ctx.save(), ctx.translate(pageLeft - 0.5, pageTop - 0.5), isEditBody ? (Rect.drawWith(ctx, {
               left: 0,
               top: 0,
-              width: f,
-              height: _,
+              width: pageWidth,
+              height: marginTop,
               fill: "rgba(255, 255, 255, 0.5)"
-            }), l.save(), l.translate(0, u - m), Xe.drawWith(l, {
+            }), ctx.save(), ctx.translate(0, pageHeight - marginBottom), Rect.drawWith(ctx, {
               left: 0,
               top: 0,
-              width: f,
-              height: m,
+              width: pageWidth,
+              height: marginBottom,
               fill: "rgba(255, 255, 255, 0.5)"
-            }), l.restore()) : (l.save(), l.translate(0, _), Xe.drawWith(l, {
+            }), ctx.restore()) : (ctx.save(), ctx.translate(0, marginTop), Rect.drawWith(ctx, {
               left: 0,
-              top: _,
-              width: f,
-              height: u - _ - m,
+              top: marginTop,
+              width: pageWidth,
+              height: pageHeight - marginTop - marginBottom,
               fill: "rgba(255, 255, 255, 0.5)"
-            }), l.restore()), !d) {
-              const R = {
+            }), ctx.restore()), !isEditBody) {
+              const headerPathConfigIPathProps = {
                 dataArray: [{
                   command: "M",
-                  points: [0, _]
+                  points: [0, marginTop]
                 }, {
                   command: "L",
-                  points: [f, _]
+                  points: [pageWidth, marginTop]
                 }],
                 strokeWidth: 1,
-                stroke: Ht
-              }, C = {
+                stroke: HEADER_FOOTER_STROKE_COLOR
+              }, footerPathConfigIPathProps = {
                 dataArray: [{
                   command: "M",
-                  points: [0, u - m]
+                  points: [0, pageHeight - marginBottom]
                 }, {
                   command: "L",
-                  points: [f, u - m]
+                  points: [pageWidth, pageHeight - marginBottom]
                 }],
                 strokeWidth: 1,
-                stroke: Ht
+                stroke: HEADER_FOOTER_STROKE_COLOR
               };
-              It.drawWith(l, R), It.drawWith(l, C), l.translate(0, _ + 1), Ne.drawWith(l, {
-                text: e.t("headerFooter.header"),
-                color: Vt
-              }), l.translate(0, u - _ - m), Ne.drawWith(l, {
-                text: e.t("headerFooter.footer"),
-                color: Vt
+              Path.drawWith(ctx, headerPathConfigIPathProps), Path.drawWith(ctx, footerPathConfigIPathProps), ctx.translate(0, marginTop + 1), TextBubbleShape.drawWith(ctx, {
+                text: localeService.t("headerFooter.header"),
+                color: HEADER_FOOTER_FILL_COLOR
+              }), ctx.translate(0, pageHeight - marginTop - marginBottom), TextBubbleShape.drawWith(ctx, {
+                text: localeService.t("headerFooter.footer"),
+                color: HEADER_FOOTER_FILL_COLOR
               });
             }
-            l.restore();
+            ctx.restore();
           })
         )
       );
     });
   }
-  _isEditorReadOnly(e) {
-    const n = this._editorService.getEditor(e);
-    return n ? n.isReadOnly() : !1;
+  _isEditorReadOnly(unitId) {
+    const editor = this._editorService.getEditor(unitId);
+    return editor ? editor.isReadOnly() : !1;
   }
   _getDocDataModel() {
     return this._context.unit;
   }
-};
-it = Lr([
-  X(1, O),
-  X(2, ee),
-  X(3, w),
-  X(4, W),
-  X(5, I(L)),
-  X(6, ne),
-  X(7, I(le)),
-  X(8, I(tn))
-], it);
-function jt() {
+}, __name(_a5, "DocHeaderFooterController"), _a5);
+DocHeaderFooterController = __decorateClass$d([
+  __decorateParam$d(1, ICommandService),
+  __decorateParam$d(2, IEditorService),
+  __decorateParam$d(3, IUniverInstanceService),
+  __decorateParam$d(4, IRenderManagerService),
+  __decorateParam$d(5, Inject(DocSkeletonManagerService)),
+  __decorateParam$d(6, ITextSelectionRenderManager),
+  __decorateParam$d(7, Inject(LocaleService)),
+  __decorateParam$d(8, Inject(ComponentManager))
+], DocHeaderFooterController);
+function getEmptyHeaderFooterBody() {
   return {
     dataStream: `\r
 `,
@@ -1269,750 +1336,901 @@ function jt() {
     ]
   };
 }
-function Je(t, e, n, o) {
-  const r = Qe.getInstance(), i = 6, s = t != null ? t : j.generateRandomId(i), a = e === U.DEFAULT_HEADER || e === U.FIRST_PAGE_HEADER || e === U.EVEN_PAGE_HEADER, c = r.insertOp([a ? "headers" : "footers", s], {
-    [a ? "headerId" : "footerId"]: s,
-    body: jt()
+__name(getEmptyHeaderFooterBody, "getEmptyHeaderFooterBody");
+function createHeaderFooterAction(segmentId, createType, documentStyle, actions) {
+  const jsonX = JSONX.getInstance(), ID_LEN = 6, firstSegmentId = segmentId != null ? segmentId : Tools.generateRandomId(ID_LEN), isHeader = createType === HeaderFooterType.DEFAULT_HEADER || createType === HeaderFooterType.FIRST_PAGE_HEADER || createType === HeaderFooterType.EVEN_PAGE_HEADER, insertAction = jsonX.insertOp([isHeader ? "headers" : "footers", firstSegmentId], {
+    [isHeader ? "headerId" : "footerId"]: firstSegmentId,
+    body: getEmptyHeaderFooterBody()
   });
-  o.push(c);
-  const d = j.generateRandomId(i), g = r.insertOp([a ? "footers" : "headers", d], {
-    [a ? "footers" : "headers"]: d,
-    body: jt()
+  actions.push(insertAction);
+  const secondSegmentId = Tools.generateRandomId(ID_LEN), insertPairAction = jsonX.insertOp([isHeader ? "footers" : "headers", secondSegmentId], {
+    [isHeader ? "footers" : "headers"]: secondSegmentId,
+    body: getEmptyHeaderFooterBody()
   });
-  o.push(g);
-  let h = "defaultHeaderId", p = "defaultFooterId";
-  switch (e) {
-    case U.DEFAULT_HEADER:
-      h = "defaultHeaderId", p = "defaultFooterId";
+  actions.push(insertPairAction);
+  let key = "defaultHeaderId", pairKey = "defaultFooterId";
+  switch (createType) {
+    case HeaderFooterType.DEFAULT_HEADER:
+      key = "defaultHeaderId", pairKey = "defaultFooterId";
       break;
-    case U.DEFAULT_FOOTER:
-      h = "defaultFooterId", p = "defaultHeaderId";
+    case HeaderFooterType.DEFAULT_FOOTER:
+      key = "defaultFooterId", pairKey = "defaultHeaderId";
       break;
-    case U.FIRST_PAGE_HEADER:
-      h = "firstPageHeaderId", p = "firstPageFooterId";
+    case HeaderFooterType.FIRST_PAGE_HEADER:
+      key = "firstPageHeaderId", pairKey = "firstPageFooterId";
       break;
-    case U.FIRST_PAGE_FOOTER:
-      h = "firstPageFooterId", p = "firstPageHeaderId";
+    case HeaderFooterType.FIRST_PAGE_FOOTER:
+      key = "firstPageFooterId", pairKey = "firstPageHeaderId";
       break;
-    case U.EVEN_PAGE_HEADER:
-      h = "evenPageHeaderId", p = "evenPageFooterId";
+    case HeaderFooterType.EVEN_PAGE_HEADER:
+      key = "evenPageHeaderId", pairKey = "evenPageFooterId";
       break;
-    case U.EVEN_PAGE_FOOTER:
-      h = "evenPageFooterId", p = "evenPageHeaderId";
+    case HeaderFooterType.EVEN_PAGE_FOOTER:
+      key = "evenPageFooterId", pairKey = "evenPageHeaderId";
       break;
     default:
-      throw new Error(`Unknown header footer type: ${e}`);
+      throw new Error(`Unknown header footer type: ${createType}`);
   }
-  for (const [l, f] of [[h, s], [p, d]])
-    if (n[l] != null) {
-      const u = r.replaceOp(["documentStyle", l], n[l], f);
-      o.push(u);
+  for (const [k2, id] of [[key, firstSegmentId], [pairKey, secondSegmentId]])
+    if (documentStyle[k2] != null) {
+      const replaceAction = jsonX.replaceOp(["documentStyle", k2], documentStyle[k2], id);
+      actions.push(replaceAction);
     } else {
-      const u = r.insertOp(["documentStyle", l], f);
-      o.push(u);
+      const insertAction2 = jsonX.insertOp(["documentStyle", k2], id);
+      actions.push(insertAction2);
     }
-  return o;
+  return actions;
 }
-const be = "doc.command.core-header-footer", Wt = {
-  id: be,
-  type: de.COMMAND,
+__name(createHeaderFooterAction, "createHeaderFooterAction");
+const CoreHeaderFooterCommandId = "doc.command.core-header-footer", CoreHeaderFooterCommand = {
+  id: CoreHeaderFooterCommandId,
+  type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
-  handler: async (t, e) => {
-    var E;
-    const n = t.get(O), o = t.get(w), r = t.get(W), { unitId: i, segmentId: s, createType: a, headerFooterProps: c } = e, d = (E = r.getRenderById(i)) == null ? void 0 : E.with(L), g = o.getUniverDocInstance(i), h = d == null ? void 0 : d.getViewModel();
-    if (g == null || h == null)
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    var _a19;
+    const commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService), renderManagerService = accessor.get(IRenderManagerService), { unitId, segmentId, createType, headerFooterProps } = params, docSkeletonManagerService = (_a19 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a19.with(DocSkeletonManagerService), docDataModel = univerInstanceService.getUniverDocInstance(unitId), docViewModel = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getViewModel();
+    if (docDataModel == null || docViewModel == null)
       return !1;
-    const p = h.getEditArea(), { documentStyle: l } = g.getSnapshot(), f = (c == null ? void 0 : c.marginFooter) != null || (c == null ? void 0 : c.marginHeader) != null, u = [{
+    const editArea = docViewModel.getEditArea(), { documentStyle } = docDataModel.getSnapshot(), isUpdateMargin = (headerFooterProps == null ? void 0 : headerFooterProps.marginFooter) != null || (headerFooterProps == null ? void 0 : headerFooterProps.marginHeader) != null, textRanges = [{
       startOffset: 0,
       endOffset: 0,
       collapsed: !0
-    }], _ = {
-      id: ht.id,
+    }], doMutation = {
+      id: RichTextEditingMutation.id,
       params: {
-        unitId: i,
+        unitId,
         actions: [],
-        textRanges: u,
+        textRanges,
         debounce: !0
       }
     };
-    f && (_.params.noNeedSetTextRange = !0);
-    const m = Qe.getInstance(), R = [];
-    return a != null && Je(s, a, l, R), c != null && Object.keys(c).forEach((b) => {
-      const A = c[b], N = l[b];
-      if (A === N)
+    isUpdateMargin && (doMutation.params.noNeedSetTextRange = !0);
+    const jsonX = JSONX.getInstance(), rawActions = [];
+    return createType != null && createHeaderFooterAction(segmentId, createType, documentStyle, rawActions), headerFooterProps != null && Object.keys(headerFooterProps).forEach((key) => {
+      const value = headerFooterProps[key], oldValue = documentStyle[key];
+      if (value === oldValue)
         return;
-      let Y;
-      if (N === void 0 ? Y = m.insertOp(["documentStyle", b], A) : Y = m.replaceOp(["documentStyle", b], N, A), R.push(Y), b === "useFirstPageHeaderFooter" && A === S.TRUE && !l.firstPageHeaderId) {
-        const G = p === F.HEADER ? U.FIRST_PAGE_HEADER : U.FIRST_PAGE_FOOTER;
-        Je(s, G, l, R);
-      } else if (b === "evenAndOddHeaders" && A === S.TRUE && !l.evenPageHeaderId) {
-        const G = p === F.HEADER ? U.EVEN_PAGE_HEADER : U.EVEN_PAGE_FOOTER;
-        Je(s, G, l, R);
+      let action;
+      if (oldValue === void 0 ? action = jsonX.insertOp(["documentStyle", key], value) : action = jsonX.replaceOp(["documentStyle", key], oldValue, value), rawActions.push(action), key === "useFirstPageHeaderFooter" && value === BooleanNumber.TRUE && !documentStyle.firstPageHeaderId) {
+        const headerFooterType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.FIRST_PAGE_HEADER : HeaderFooterType.FIRST_PAGE_FOOTER;
+        createHeaderFooterAction(segmentId, headerFooterType, documentStyle, rawActions);
+      } else if (key === "evenAndOddHeaders" && value === BooleanNumber.TRUE && !documentStyle.evenPageHeaderId) {
+        const headerFooterType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.EVEN_PAGE_HEADER : HeaderFooterType.EVEN_PAGE_FOOTER;
+        createHeaderFooterAction(segmentId, headerFooterType, documentStyle, rawActions);
       }
-    }), R.length === 0 ? !1 : (_.params.actions = R.reduce((b, A) => Qe.compose(b, A), null), !!n.syncExecuteCommand(_.id, _.params));
-  }
-}, mn = {
+    }), rawActions.length === 0 ? !1 : (doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params));
+  }, "handler")
+}, OpenHeaderFooterPanelCommand = {
   id: "doc.command.open-header-footer-panel",
-  type: de.COMMAND,
-  handler: async (t, e) => t.get(O).executeCommand(_n.id, { value: "open" })
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, _params) => accessor.get(ICommandService).executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: "open" }), "handler")
 };
-function Br(t) {
-  const e = t.get(O);
+function BoldMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: Qn.id,
-    group: x.TOOLBAR_FORMAT,
-    type: y.BUTTON,
+    id: SetInlineFormatBoldCommand.id,
+    group: MenuGroup.TOOLBAR_FORMAT,
+    type: MenuItemType.BUTTON,
     icon: "BoldSingle",
     title: "Set bold",
     tooltip: "toolbar.bold",
-    positions: [P.TOOLBAR_START],
-    activated$: new B((n) => {
-      const o = e.onCommandExecuted((r) => {
-        var s;
-        const i = r.id;
-        if (i === V.id || i === ue.id) {
-          const a = Z(t);
-          if (a == null)
+    positions: [MenuPosition.TOOLBAR_START],
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null)
             return;
-          const c = (s = a.ts) == null ? void 0 : s.bl;
-          n.next(c === S.TRUE);
+          const bl = (_a19 = textRun.ts) == null ? void 0 : _a19.bl;
+          subscriber.next(bl === BooleanNumber.TRUE);
         }
       });
-      return n.next(!1), o.dispose;
+      return subscriber.next(!1), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function $r(t) {
-  const e = t.get(O);
+__name(BoldMenuItemFactory, "BoldMenuItemFactory");
+function ItalicMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: eo.id,
-    group: x.TOOLBAR_FORMAT,
-    type: y.BUTTON,
+    id: SetInlineFormatItalicCommand.id,
+    group: MenuGroup.TOOLBAR_FORMAT,
+    type: MenuItemType.BUTTON,
     icon: "ItalicSingle",
     title: "Set italic",
     tooltip: "toolbar.italic",
-    positions: [P.TOOLBAR_START],
-    activated$: new B((n) => {
-      const o = e.onCommandExecuted((r) => {
-        var s;
-        const i = r.id;
-        if (i === V.id || i === ue.id) {
-          const a = Z(t);
-          if (a == null)
+    positions: [MenuPosition.TOOLBAR_START],
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null)
             return;
-          const c = (s = a.ts) == null ? void 0 : s.it;
-          n.next(c === S.TRUE);
+          const it = (_a19 = textRun.ts) == null ? void 0 : _a19.it;
+          subscriber.next(it === BooleanNumber.TRUE);
         }
       });
-      return n.next(!1), o.dispose;
+      return subscriber.next(!1), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function Hr(t) {
-  const e = t.get(O);
+__name(ItalicMenuItemFactory, "ItalicMenuItemFactory");
+function UnderlineMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: to.id,
-    group: x.TOOLBAR_FORMAT,
-    type: y.BUTTON,
+    id: SetInlineFormatUnderlineCommand.id,
+    group: MenuGroup.TOOLBAR_FORMAT,
+    type: MenuItemType.BUTTON,
     icon: "UnderlineSingle",
     title: "Set underline",
     tooltip: "toolbar.underline",
-    positions: [P.TOOLBAR_START],
-    activated$: new B((n) => {
-      const o = e.onCommandExecuted((r) => {
-        var s;
-        const i = r.id;
-        if (i === V.id || i === ue.id) {
-          const a = Z(t);
-          if (a == null)
+    positions: [MenuPosition.TOOLBAR_START],
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null)
             return;
-          const c = (s = a.ts) == null ? void 0 : s.ul;
-          n.next((c == null ? void 0 : c.s) === S.TRUE);
+          const ul = (_a19 = textRun.ts) == null ? void 0 : _a19.ul;
+          subscriber.next((ul == null ? void 0 : ul.s) === BooleanNumber.TRUE);
         }
       });
-      return n.next(!1), o.dispose;
+      return subscriber.next(!1), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function Vr(t) {
-  const e = t.get(O);
+__name(UnderlineMenuItemFactory, "UnderlineMenuItemFactory");
+function StrikeThroughMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: no.id,
-    group: x.TOOLBAR_FORMAT,
-    type: y.BUTTON,
+    id: SetInlineFormatStrikethroughCommand.id,
+    group: MenuGroup.TOOLBAR_FORMAT,
+    type: MenuItemType.BUTTON,
     icon: "StrikethroughSingle",
     title: "Set strike through",
     tooltip: "toolbar.strikethrough",
-    positions: [P.TOOLBAR_START],
-    activated$: new B((n) => {
-      const o = e.onCommandExecuted((r) => {
-        var s;
-        const i = r.id;
-        if (i === V.id || i === ue.id) {
-          const a = Z(t);
-          if (a == null)
+    positions: [MenuPosition.TOOLBAR_START],
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null)
             return;
-          const c = (s = a.ts) == null ? void 0 : s.st;
-          n.next((c == null ? void 0 : c.s) === S.TRUE);
+          const st = (_a19 = textRun.ts) == null ? void 0 : _a19.st;
+          subscriber.next((st == null ? void 0 : st.s) === BooleanNumber.TRUE);
         }
       });
-      return n.next(!1), o.dispose;
+      return subscriber.next(!1), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function jr(t) {
-  const e = t.get(O);
+__name(StrikeThroughMenuItemFactory, "StrikeThroughMenuItemFactory");
+function SubscriptMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: oo.id,
-    group: x.TOOLBAR_FORMAT,
-    type: y.BUTTON,
+    id: SetInlineFormatSubscriptCommand.id,
+    group: MenuGroup.TOOLBAR_FORMAT,
+    type: MenuItemType.BUTTON,
     icon: "SubscriptSingle",
     tooltip: "toolbar.subscript",
-    positions: [P.TOOLBAR_START],
-    activated$: new B((n) => {
-      const o = e.onCommandExecuted((r) => {
-        var s;
-        const i = r.id;
-        if (i === V.id || i === ue.id) {
-          const a = Z(t);
-          if (a == null)
+    positions: [MenuPosition.TOOLBAR_START],
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null)
             return;
-          const c = (s = a.ts) == null ? void 0 : s.va;
-          n.next(c === ae.SUBSCRIPT);
+          const va = (_a19 = textRun.ts) == null ? void 0 : _a19.va;
+          subscriber.next(va === BaselineOffset.SUBSCRIPT);
         }
       });
-      return n.next(!1), o.dispose;
+      return subscriber.next(!1), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function Wr(t) {
-  const e = t.get(O);
+__name(SubscriptMenuItemFactory, "SubscriptMenuItemFactory");
+function SuperscriptMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: ro.id,
-    group: x.TOOLBAR_FORMAT,
-    type: y.BUTTON,
+    id: SetInlineFormatSuperscriptCommand.id,
+    group: MenuGroup.TOOLBAR_FORMAT,
+    type: MenuItemType.BUTTON,
     icon: "SuperscriptSingle",
     tooltip: "toolbar.superscript",
-    positions: [P.TOOLBAR_START],
-    activated$: new B((n) => {
-      const o = e.onCommandExecuted((r) => {
-        var s;
-        const i = r.id;
-        if (i === V.id || i === ue.id) {
-          const a = Z(t);
-          if (a == null)
+    positions: [MenuPosition.TOOLBAR_START],
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null)
             return;
-          const c = (s = a.ts) == null ? void 0 : s.va;
-          n.next(c === ae.SUPERSCRIPT);
+          const va = (_a19 = textRun.ts) == null ? void 0 : _a19.va;
+          subscriber.next(va === BaselineOffset.SUPERSCRIPT);
         }
       });
-      return n.next(!1), o.dispose;
+      return subscriber.next(!1), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function kr(t) {
-  const e = t.get(O);
+__name(SuperscriptMenuItemFactory, "SuperscriptMenuItemFactory");
+function FontFamilySelectorMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: Rt.id,
+    id: SetInlineFormatFontFamilyCommand.id,
     tooltip: "toolbar.font",
-    group: x.TOOLBAR_FORMAT,
-    type: y.SELECTOR,
-    label: dn,
-    positions: [P.TOOLBAR_START],
-    selections: vt.map((n) => ({
+    group: MenuGroup.TOOLBAR_FORMAT,
+    type: MenuItemType.SELECTOR,
+    label: FONT_FAMILY_COMPONENT,
+    positions: [MenuPosition.TOOLBAR_START],
+    selections: FONT_FAMILY_LIST.map((item) => ({
       label: {
-        name: un,
+        name: FONT_FAMILY_ITEM_COMPONENT,
         hoverable: !0
       },
-      value: n.value
+      value: item.value
     })),
     // disabled$: getCurrentSheetDisabled$(accessor),
-    value$: new B((n) => {
-      const o = vt[0].value, r = e.onCommandExecuted((i) => {
-        var a;
-        const s = i.id;
-        if (s === V.id || s === Rt.id) {
-          const c = Z(t);
-          if (c == null)
+    value$: new Observable((subscriber) => {
+      const defaultValue = FONT_FAMILY_LIST[0].value, disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatFontFamilyCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null)
             return;
-          const d = (a = c.ts) == null ? void 0 : a.ff;
-          n.next(d != null ? d : o);
+          const ff = (_a19 = textRun.ts) == null ? void 0 : _a19.ff;
+          subscriber.next(ff != null ? ff : defaultValue);
         }
       });
-      return n.next(o), r.dispose;
+      return subscriber.next(defaultValue), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function Gr(t) {
-  const e = t.get(O);
+__name(FontFamilySelectorMenuItemFactory, "FontFamilySelectorMenuItemFactory");
+function FontSizeSelectorMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: Ot.id,
-    group: x.TOOLBAR_FORMAT,
-    type: y.SELECTOR,
+    id: SetInlineFormatFontSizeCommand.id,
+    group: MenuGroup.TOOLBAR_FORMAT,
+    type: MenuItemType.SELECTOR,
     tooltip: "toolbar.fontSize",
     label: {
-      name: hn,
+      name: FONT_SIZE_COMPONENT,
       props: {
         min: 1,
         max: 400
         // disabled$,
       }
     },
-    positions: [P.TOOLBAR_START],
-    selections: Un,
+    positions: [MenuPosition.TOOLBAR_START],
+    selections: FONT_SIZE_LIST,
     // disabled$,
-    value$: new B((n) => {
-      const r = e.onCommandExecuted((i) => {
-        var a;
-        const s = i.id;
-        if (s === V.id || s === Ot.id) {
-          const c = Z(t);
-          if (c == null)
+    value$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === SetInlineFormatFontSizeCommand.id) {
+          const textRun = getFontStyleAtCursor(accessor);
+          if (textRun == null)
             return;
-          const d = (a = c.ts) == null ? void 0 : a.fs;
-          n.next(d != null ? d : 14);
+          const fs = (_a19 = textRun.ts) == null ? void 0 : _a19.fs;
+          subscriber.next(fs != null ? fs : 14);
         }
       });
-      return n.next(14), r.dispose;
+      return subscriber.next(14), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function zr(t) {
-  const e = t.get(O), n = t.get(Qt);
+__name(FontSizeSelectorMenuItemFactory, "FontSizeSelectorMenuItemFactory");
+function TextColorSelectorMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService), themeService = accessor.get(ThemeService);
   return {
-    id: Ct.id,
+    id: SetInlineFormatTextColorCommand.id,
     icon: "FontColor",
     tooltip: "toolbar.textColor.main",
-    group: x.TOOLBAR_FORMAT,
-    type: y.BUTTON_SELECTOR,
-    positions: [P.TOOLBAR_START],
+    group: MenuGroup.TOOLBAR_FORMAT,
+    type: MenuItemType.BUTTON_SELECTOR,
+    positions: [MenuPosition.TOOLBAR_START],
     selections: [
       {
         label: {
-          name: pt,
+          name: COLOR_PICKER_COMPONENT,
           hoverable: !1
         }
       }
     ],
-    value$: new B((o) => {
-      const r = n.getCurrentTheme().textColor, i = e.onCommandExecuted((s) => {
-        if (s.id === Ct.id) {
-          const a = s.params.value;
-          o.next(a != null ? a : r);
+    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 o.next(r), i.dispose;
+      return subscriber.next(defaultColor), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
     // disabled$: getCurrentSheetDisabled$(accessor),
   };
 }
-function Yr(t) {
+__name(TextColorSelectorMenuItemFactory, "TextColorSelectorMenuItemFactory");
+function HeaderFooterMenuItemFactory(accessor) {
   return {
-    id: mn.id,
-    group: x.TOOLBAR_OTHERS,
-    type: y.BUTTON,
+    id: OpenHeaderFooterPanelCommand.id,
+    group: MenuGroup.TOOLBAR_OTHERS,
+    type: MenuItemType.BUTTON,
     icon: "FreezeRowSingle",
     tooltip: "toolbar.headerFooter",
-    positions: [P.TOOLBAR_START],
-    hidden$: yo(D(t, v.UNIVER_DOC), Ln(t), (e, n) => e || n)
+    positions: [MenuPosition.TOOLBAR_START],
+    hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getHeaderFooterMenuHiddenObservable(accessor), (one, two) => one || two)
   };
 }
-function Xr(t) {
-  const e = t.get(O);
+__name(HeaderFooterMenuItemFactory, "HeaderFooterMenuItemFactory");
+function AlignLeftMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: io.id,
-    group: x.TOOLBAR_LAYOUT,
-    type: y.BUTTON,
+    id: AlignLeftCommand.id,
+    group: MenuGroup.TOOLBAR_LAYOUT,
+    type: MenuItemType.BUTTON,
     icon: "LeftJustifyingSingle",
     tooltip: "toolbar.alignLeft",
-    positions: [P.TOOLBAR_START],
-    activated$: new B((n) => {
-      const o = e.onCommandExecuted((r) => {
-        var s;
-        const i = r.id;
-        if (i === V.id || i === je.id) {
-          const a = Ge(t);
-          if (a == null)
+    positions: [MenuPosition.TOOLBAR_START],
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+          const paragraph = getParagraphStyleAtCursor(accessor);
+          if (paragraph == null)
             return;
-          const c = (s = a.paragraphStyle) == null ? void 0 : s.horizontalAlign;
-          n.next(c === Le.LEFT);
+          const alignType = (_a19 = paragraph.paragraphStyle) == null ? void 0 : _a19.horizontalAlign;
+          subscriber.next(alignType === HorizontalAlign.LEFT);
         }
       });
-      return n.next(!1), o.dispose;
+      return subscriber.next(!1), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function Kr(t) {
-  const e = t.get(O);
+__name(AlignLeftMenuItemFactory, "AlignLeftMenuItemFactory");
+function AlignCenterMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: so.id,
-    group: x.TOOLBAR_LAYOUT,
-    type: y.BUTTON,
+    id: AlignCenterCommand.id,
+    group: MenuGroup.TOOLBAR_LAYOUT,
+    type: MenuItemType.BUTTON,
     icon: "HorizontallySingle",
     tooltip: "toolbar.alignCenter",
-    positions: [P.TOOLBAR_START],
-    activated$: new B((n) => {
-      const o = e.onCommandExecuted((r) => {
-        var s;
-        const i = r.id;
-        if (i === V.id || i === je.id) {
-          const a = Ge(t);
-          if (a == null)
+    positions: [MenuPosition.TOOLBAR_START],
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+          const paragraph = getParagraphStyleAtCursor(accessor);
+          if (paragraph == null)
             return;
-          const c = (s = a.paragraphStyle) == null ? void 0 : s.horizontalAlign;
-          n.next(c === Le.CENTER);
+          const alignType = (_a19 = paragraph.paragraphStyle) == null ? void 0 : _a19.horizontalAlign;
+          subscriber.next(alignType === HorizontalAlign.CENTER);
         }
       });
-      return n.next(!1), o.dispose;
+      return subscriber.next(!1), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function Zr(t) {
-  const e = t.get(O);
+__name(AlignCenterMenuItemFactory, "AlignCenterMenuItemFactory");
+function AlignRightMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: ao.id,
-    group: x.TOOLBAR_LAYOUT,
-    type: y.BUTTON,
+    id: AlignRightCommand.id,
+    group: MenuGroup.TOOLBAR_LAYOUT,
+    type: MenuItemType.BUTTON,
     icon: "RightJustifyingSingle",
     tooltip: "toolbar.alignRight",
-    positions: [P.TOOLBAR_START],
-    activated$: new B((n) => {
-      const o = e.onCommandExecuted((r) => {
-        var s;
-        const i = r.id;
-        if (i === V.id || i === je.id) {
-          const a = Ge(t);
-          if (a == null)
+    positions: [MenuPosition.TOOLBAR_START],
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+          const paragraph = getParagraphStyleAtCursor(accessor);
+          if (paragraph == null)
             return;
-          const c = (s = a.paragraphStyle) == null ? void 0 : s.horizontalAlign;
-          n.next(c === Le.RIGHT);
+          const alignType = (_a19 = paragraph.paragraphStyle) == null ? void 0 : _a19.horizontalAlign;
+          subscriber.next(alignType === HorizontalAlign.RIGHT);
         }
       });
-      return n.next(!1), o.dispose;
+      return subscriber.next(!1), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function Jr(t) {
-  const e = t.get(O);
+__name(AlignRightMenuItemFactory, "AlignRightMenuItemFactory");
+function AlignJustifyMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService);
   return {
-    id: co.id,
-    group: x.TOOLBAR_LAYOUT,
-    type: y.BUTTON,
+    id: AlignJustifyCommand.id,
+    group: MenuGroup.TOOLBAR_LAYOUT,
+    type: MenuItemType.BUTTON,
     icon: "AlignTextBothSingle",
     tooltip: "toolbar.alignJustify",
-    positions: [P.TOOLBAR_START],
-    activated$: new B((n) => {
-      const o = e.onCommandExecuted((r) => {
-        var s;
-        const i = r.id;
-        if (i === V.id || i === je.id) {
-          const a = Ge(t);
-          if (a == null)
+    positions: [MenuPosition.TOOLBAR_START],
+    activated$: new Observable((subscriber) => {
+      const disposable = commandService.onCommandExecuted((c) => {
+        var _a19;
+        const id = c.id;
+        if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
+          const paragraph = getParagraphStyleAtCursor(accessor);
+          if (paragraph == null)
             return;
-          const c = (s = a.paragraphStyle) == null ? void 0 : s.horizontalAlign;
-          n.next(c === Le.JUSTIFIED);
+          const alignType = (_a19 = paragraph.paragraphStyle) == null ? void 0 : _a19.horizontalAlign;
+          subscriber.next(alignType === HorizontalAlign.JUSTIFIED);
         }
       });
-      return n.next(!1), o.dispose;
+      return subscriber.next(!1), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function qr(t) {
+__name(AlignJustifyMenuItemFactory, "AlignJustifyMenuItemFactory");
+function OrderListMenuItemFactory(accessor) {
   return {
-    id: lo.id,
-    group: x.TOOLBAR_LAYOUT,
-    type: y.BUTTON,
+    id: OrderListCommand.id,
+    group: MenuGroup.TOOLBAR_LAYOUT,
+    type: MenuItemType.BUTTON,
     icon: "OrderSingle",
     tooltip: "toolbar.order",
-    positions: [P.TOOLBAR_START],
-    hidden$: D(t, v.UNIVER_DOC)
+    positions: [MenuPosition.TOOLBAR_START],
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function Qr(t) {
+__name(OrderListMenuItemFactory, "OrderListMenuItemFactory");
+function BulletListMenuItemFactory(accessor) {
   return {
-    id: uo.id,
-    group: x.TOOLBAR_LAYOUT,
-    type: y.BUTTON,
+    id: BulletListCommand.id,
+    group: MenuGroup.TOOLBAR_LAYOUT,
+    type: MenuItemType.BUTTON,
     icon: "UnorderSingle",
     tooltip: "toolbar.unorder",
-    positions: [P.TOOLBAR_START],
-    hidden$: D(t, v.UNIVER_DOC)
+    positions: [MenuPosition.TOOLBAR_START],
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function ei(t) {
+__name(BulletListMenuItemFactory, "BulletListMenuItemFactory");
+function ResetBackgroundColorMenuItemFactory(accessor) {
   return {
-    id: ho.id,
-    type: y.BUTTON,
+    id: ResetInlineFormatTextBackgroundColorCommand.id,
+    type: MenuItemType.BUTTON,
     title: "toolbar.resetColor",
     icon: "NoColor",
-    positions: et.id
+    positions: SetInlineFormatTextBackgroundColorCommand.id
   };
 }
-function ti(t) {
-  const e = t.get(O), n = t.get(Qt);
+__name(ResetBackgroundColorMenuItemFactory, "ResetBackgroundColorMenuItemFactory");
+function BackgroundColorSelectorMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService), themeService = accessor.get(ThemeService);
   return {
-    id: et.id,
+    id: SetInlineFormatTextBackgroundColorCommand.id,
     tooltip: "toolbar.fillColor.main",
-    group: x.TOOLBAR_FORMAT,
-    type: y.BUTTON_SELECTOR,
-    positions: [P.TOOLBAR_START],
+    group: MenuGroup.TOOLBAR_FORMAT,
+    type: MenuItemType.BUTTON_SELECTOR,
+    positions: [MenuPosition.TOOLBAR_START],
     icon: "PaintBucket",
     selections: [
       {
         label: {
-          name: pt,
+          name: COLOR_PICKER_COMPONENT,
           hoverable: !1
         }
       }
     ],
-    value$: new B((o) => {
-      const r = n.getCurrentTheme().primaryColor, i = e.onCommandExecuted((s) => {
-        if (s.id === et.id) {
-          const a = s.params.value;
-          o.next(a != null ? a : r);
+    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 o.next(r), i.dispose;
+      return subscriber.next(defaultColor), disposable.dispose;
     }),
-    hidden$: D(t, v.UNIVER_DOC)
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
-function Z(t) {
-  var d;
-  const e = t.get(w), n = t.get(te), o = e.getCurrentUniverDocInstance(), r = n.getActiveRange();
-  if (o == null || r == null)
+__name(BackgroundColorSelectorMenuItemFactory, "BackgroundColorSelectorMenuItemFactory");
+function getFontStyleAtCursor(accessor) {
+  var _a19;
+  const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionService = accessor.get(TextSelectionManagerService), docDataModel = univerInstanceService.getCurrentUniverDocInstance(), activeTextRange = textSelectionService.getActiveRange();
+  if (docDataModel == null || activeTextRange == null)
     return;
-  const { startOffset: i, segmentId: s } = r, a = (d = o.getSelfOrHeaderFooterModel(s).getBody()) == null ? void 0 : d.textRuns;
-  if (a == null)
+  const { startOffset, segmentId } = activeTextRange, textRuns = (_a19 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a19.textRuns;
+  if (textRuns == null)
     return;
-  let c;
-  for (let g = 0; g < a.length; g++) {
-    const h = a[g], p = a[g + 1];
-    if (p && p.st === p.ed && i === p.st) {
-      c = p;
+  let textRun;
+  for (let i = 0; i < textRuns.length; i++) {
+    const curTextRun = textRuns[i], nextTextRun = textRuns[i + 1];
+    if (nextTextRun && nextTextRun.st === nextTextRun.ed && startOffset === nextTextRun.st) {
+      textRun = nextTextRun;
       break;
     }
-    if (h.st <= i && i <= h.ed) {
-      c = h;
+    if (curTextRun.st <= startOffset && startOffset <= curTextRun.ed) {
+      textRun = curTextRun;
       break;
     }
   }
-  return c;
+  return textRun;
 }
-function Ge(t) {
-  var d;
-  const e = t.get(w), n = t.get(te), o = e.getCurrentUniverDocInstance(), r = n.getActiveRange();
-  if (o == null || r == null)
+__name(getFontStyleAtCursor, "getFontStyleAtCursor");
+function getParagraphStyleAtCursor(accessor) {
+  var _a19;
+  const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionService = accessor.get(TextSelectionManagerService), docDataModel = univerInstanceService.getCurrentUniverDocInstance(), activeTextRange = textSelectionService.getActiveRange();
+  if (docDataModel == null || activeTextRange == null)
     return;
-  const { startOffset: i, segmentId: s } = r, a = (d = o.getSelfOrHeaderFooterModel(s).getBody()) == null ? void 0 : d.paragraphs;
-  if (a == null)
+  const { startOffset, segmentId } = activeTextRange, paragraphs = (_a19 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a19.paragraphs;
+  if (paragraphs == null)
     return;
-  let c = -1;
-  for (const g of a) {
-    const { startIndex: h } = g;
-    if (i > c && i <= h)
-      return g;
-    c = h;
+  let prevIndex = -1;
+  for (const paragraph of paragraphs) {
+    const { startIndex } = paragraph;
+    if (startOffset > prevIndex && startOffset <= startIndex)
+      return paragraph;
+    prevIndex = startIndex;
   }
   return null;
 }
-var ni = Object.defineProperty, oi = Object.getOwnPropertyDescriptor, ri = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? oi(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && ni(e, n, r), r;
-}, Ee = (t, e) => (n, o) => e(n, o, t);
-let me = class extends Q {
-  constructor(t, e, n, o, r) {
-    super(), this._config = t, this._injector = e, this._componentManager = n, this._layoutService = o, this._menuService = r, this._init();
+__name(getParagraphStyleAtCursor, "getParagraphStyleAtCursor");
+function whenDocOrEditor(contextService) {
+  return contextService.getContextValue(FOCUSING_DOC) || contextService.getContextValue(EDITOR_ACTIVATED);
+}
+__name(whenDocOrEditor, "whenDocOrEditor");
+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")
+}, getDisableOnCollapsedObservable = /* @__PURE__ */ __name((accessor) => {
+  const textSelectionManagerService = accessor.get(TextSelectionManagerService);
+  return new Observable((subscriber) => {
+    const observable = textSelectionManagerService.textSelection$.subscribe((selections) => {
+      const range = textSelectionManagerService.getActiveRange();
+      range && !range.collapsed ? subscriber.next(!1) : subscriber.next(!0);
+    });
+    return () => observable.unsubscribe();
+  });
+}, "getDisableOnCollapsedObservable"), CopyMenuFactory = /* @__PURE__ */ __name((accessor) => ({
+  id: 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"), 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"), BoldShortCut = {
+  id: SetInlineFormatBoldCommand.id,
+  binding: KeyCode.B | MetaKeys.CTRL_COMMAND,
+  preconditions: whenDocAndEditorFocused
+}, ItalicShortCut = {
+  id: SetInlineFormatItalicCommand.id,
+  binding: KeyCode.I | MetaKeys.CTRL_COMMAND,
+  preconditions: whenDocAndEditorFocused
+}, UnderlineShortCut = {
+  id: SetInlineFormatUnderlineCommand.id,
+  binding: KeyCode.U | MetaKeys.CTRL_COMMAND,
+  preconditions: whenDocAndEditorFocused
+}, StrikeThroughShortCut = {
+  id: SetInlineFormatStrikethroughCommand.id,
+  binding: KeyCode.X | MetaKeys.SHIFT | MetaKeys.CTRL_COMMAND,
+  preconditions: whenDocAndEditorFocused
+}, SubscriptShortCut = {
+  id: SetInlineFormatSubscriptCommand.id,
+  binding: KeyCode.COMMA | MetaKeys.CTRL_COMMAND,
+  preconditions: whenDocAndEditorFocused
+}, SuperscriptShortCut = {
+  id: SetInlineFormatSuperscriptCommand.id,
+  binding: KeyCode.PERIOD | MetaKeys.CTRL_COMMAND,
+  preconditions: whenDocAndEditorFocused
+}, AlignLeftShortCut = {
+  id: AlignLeftCommand.id,
+  binding: KeyCode.L | MetaKeys.CTRL_COMMAND | MetaKeys.SHIFT,
+  preconditions: whenDocAndEditorFocused
+}, AlignRightShortCut = {
+  id: AlignRightCommand.id,
+  binding: KeyCode.R | MetaKeys.CTRL_COMMAND | MetaKeys.SHIFT,
+  preconditions: whenDocAndEditorFocused
+}, AlignCenterShortCut = {
+  id: AlignCenterCommand.id,
+  binding: KeyCode.E | MetaKeys.CTRL_COMMAND | MetaKeys.SHIFT,
+  preconditions: whenDocAndEditorFocused
+}, AlignJustifyShortCut = {
+  id: AlignJustifyCommand.id,
+  binding: KeyCode.J | MetaKeys.CTRL_COMMAND | MetaKeys.SHIFT,
+  preconditions: whenDocAndEditorFocused
+}, OrderListShortCut = {
+  id: OrderListCommand.id,
+  binding: KeyCode.Digit7 | MetaKeys.CTRL_COMMAND | MetaKeys.SHIFT,
+  preconditions: whenDocAndEditorFocused
+}, BulletListShortCut = {
+  id: BulletListCommand.id,
+  binding: KeyCode.Digit8 | MetaKeys.CTRL_COMMAND | MetaKeys.SHIFT,
+  preconditions: whenDocAndEditorFocused
+};
+var __defProp$c = Object.defineProperty, __getOwnPropDesc$c = Object.getOwnPropertyDescriptor, __decorateClass$c = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(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$c(target, key, result), result;
+}, "__decorateClass$c"), __decorateParam$c = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$c"), _a6;
+let DocUIController = (_a6 = class extends Disposable {
+  constructor(_config, _injector, _componentManager, _layoutService, _menuService, _uiPartsService, _univerInstanceService, _shortcutService) {
+    super(), this._config = _config, this._injector = _injector, this._componentManager = _componentManager, this._layoutService = _layoutService, this._menuService = _menuService, this._uiPartsService = _uiPartsService, this._univerInstanceService = _univerInstanceService, this._shortcutService = _shortcutService, this._init();
   }
   _initCustomComponents() {
-    const t = this._componentManager;
-    this.disposeWithMe(t.register(pt, Ao)), this.disposeWithMe(t.register(dn, wn)), this.disposeWithMe(t.register(un, Bn)), this.disposeWithMe(t.register(hn, $n));
+    const componentManager = this._componentManager;
+    this.disposeWithMe(componentManager.register(COLOR_PICKER_COMPONENT, ColorPicker)), this.disposeWithMe(componentManager.register(FONT_FAMILY_COMPONENT, FontFamily)), this.disposeWithMe(componentManager.register(FONT_FAMILY_ITEM_COMPONENT, FontFamilyItem)), this.disposeWithMe(componentManager.register(FONT_SIZE_COMPONENT, FontSize));
+  }
+  _initUiParts() {
+    var _a19, _b;
+    const workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
+    (_b = (_a19 = this._config.layout) == null ? void 0 : _a19.docContainerConfig) != null && _b.footer && !workbook && this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.FOOTER, () => connectInjector(DocFooter, this._injector)));
   }
   _initMenus() {
-    const { menu: t = {} } = this._config;
+    const { menu = {} } = this._config;
+    [
+      BoldMenuItemFactory,
+      ItalicMenuItemFactory,
+      UnderlineMenuItemFactory,
+      StrikeThroughMenuItemFactory,
+      SubscriptMenuItemFactory,
+      SuperscriptMenuItemFactory,
+      FontSizeSelectorMenuItemFactory,
+      FontFamilySelectorMenuItemFactory,
+      TextColorSelectorMenuItemFactory,
+      HeaderFooterMenuItemFactory,
+      AlignLeftMenuItemFactory,
+      AlignCenterMenuItemFactory,
+      AlignRightMenuItemFactory,
+      AlignJustifyMenuItemFactory,
+      OrderListMenuItemFactory,
+      BulletListMenuItemFactory,
+      ResetBackgroundColorMenuItemFactory,
+      BackgroundColorSelectorMenuItemFactory
+    ].forEach((factory) => {
+      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(factory), menu));
+    }), [
+      CopyMenuFactory,
+      CutMenuFactory,
+      PasteMenuFactory,
+      DeleteMenuFactory
+    ].forEach((factory) => {
+      try {
+        this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(factory), menu));
+      } catch {
+      }
+    });
+  }
+  _initShortCut() {
     [
-      Br,
-      $r,
-      Hr,
-      Vr,
-      jr,
-      Wr,
-      Gr,
-      kr,
-      zr,
-      Yr,
-      Xr,
-      Kr,
-      Zr,
-      Jr,
-      qr,
-      Qr,
-      ei,
-      ti
-    ].forEach((e) => {
-      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(e), t));
+      BoldShortCut,
+      ItalicShortCut,
+      UnderlineShortCut,
+      StrikeThroughShortCut,
+      SubscriptShortCut,
+      SuperscriptShortCut,
+      AlignCenterShortCut,
+      AlignJustifyShortCut,
+      AlignRightShortCut,
+      AlignLeftShortCut,
+      OrderListShortCut,
+      BulletListShortCut
+    ].forEach((shortcut) => {
+      this.disposeWithMe(this._shortcutService.registerShortcut(shortcut));
     });
   }
   _init() {
-    this._initCustomComponents(), this._initMenus(), this._initFocusHandler();
+    this._initCustomComponents(), this._initMenus(), this._initFocusHandler(), this._initUiParts(), this._initShortCut();
   }
   _initFocusHandler() {
     this.disposeWithMe(
-      this._layoutService.registerFocusHandler(v.UNIVER_DOC, () => {
-        this._injector.get(ne).focus();
+      this._layoutService.registerFocusHandler(UniverInstanceType.UNIVER_DOC, () => {
+        this._injector.get(ITextSelectionRenderManager).focus();
       })
     );
   }
+}, __name(_a6, "DocUIController"), _a6);
+DocUIController = __decorateClass$c([
+  OnLifecycle(LifecycleStages.Rendered, DocUIController),
+  __decorateParam$c(1, Inject(Injector)),
+  __decorateParam$c(2, Inject(ComponentManager)),
+  __decorateParam$c(3, ILayoutService),
+  __decorateParam$c(4, IMenuService),
+  __decorateParam$c(5, IUIPartsService),
+  __decorateParam$c(6, IUniverInstanceService),
+  __decorateParam$c(7, IShortcutService)
+], DocUIController);
+const BreakLineShortcut = {
+  id: BreakLineCommand.id,
+  preconditions: whenDocAndEditorFocusedWithBreakLine,
+  binding: KeyCode.ENTER
+}, DeleteLeftShortcut = {
+  id: DeleteLeftCommand.id,
+  preconditions: whenDocAndEditorFocused,
+  binding: KeyCode.BACKSPACE
+}, DeleteRightShortcut = {
+  id: DeleteRightCommand.id,
+  preconditions: whenDocAndEditorFocused,
+  binding: KeyCode.DELETE
 };
-me = ri([
-  we(Be.Rendered, me),
-  Ee(1, I($e)),
-  Ee(2, I(tn)),
-  Ee(3, en),
-  Ee(4, Hn)
-], me);
-const ii = {
-  id: go.id,
-  preconditions: Fo,
-  binding: H.ENTER
-}, si = {
-  id: po.id,
-  preconditions: k,
-  binding: H.BACKSPACE
-}, ai = {
-  id: fo.id,
-  preconditions: k,
-  binding: H.DELETE
-};
-function ze(t) {
-  return t.getContextValue(Ue) || t.getContextValue(qt);
-}
-const ft = 999, ci = {
-  id: Vn.id,
-  name: "doc.command.copy",
-  type: de.COMMAND,
-  multi: !0,
-  priority: ft,
-  preconditions: ze,
-  handler: async (t) => t.get(Re).copy()
-}, li = {
-  id: jn.id,
-  name: "doc.command.cut",
-  type: de.COMMAND,
-  multi: !0,
-  priority: ft,
-  preconditions: ze,
-  handler: async (t) => t.get(Re).cut()
-}, di = {
-  id: Wn.id,
-  name: "doc.command.paste",
-  type: de.COMMAND,
-  multi: !0,
-  priority: ft,
-  preconditions: ze,
-  handler: async (t) => {
-    const e = t.get(Re), o = await t.get(ut).read();
-    return o.length === 0 ? !1 : e.paste(o);
-  }
-};
-var ui = Object.defineProperty, hi = Object.getOwnPropertyDescriptor, gi = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? hi(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && ui(e, n, r), r;
-}, he = (t, e) => (n, o) => e(n, o, t);
-let Me = class extends Se {
-  constructor(t, e, n, o, r) {
-    super(), this._commandService = t, this._clipboardInterfaceService = e, this._docClipboardService = n, this._textSelectionRenderManager = o, this._contextService = r, this._init();
+var __defProp$b = Object.defineProperty, __getOwnPropDesc$b = Object.getOwnPropertyDescriptor, __decorateClass$b = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(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$b(target, key, result), result;
+}, "__decorateClass$b"), __decorateParam$b = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$b"), _a7;
+let DocClipboardController = (_a7 = class extends RxDisposable {
+  constructor(_commandService, _clipboardInterfaceService, _docClipboardService, _textSelectionRenderManager, _contextService) {
+    super(), this._commandService = _commandService, this._clipboardInterfaceService = _clipboardInterfaceService, this._docClipboardService = _docClipboardService, this._textSelectionRenderManager = _textSelectionRenderManager, this._contextService = _contextService, this._init();
   }
   _init() {
-    [ci, li, di].forEach((t) => this.disposeWithMe(this._commandService.registerMultipleCommand(t))), [on, nn].forEach((t) => this.disposeWithMe(this._commandService.registerCommand(t))), this._initLegacyPasteCommand();
+    [DocCopyCommand, DocCutCommand, DocPasteCommand].forEach((command) => this.disposeWithMe(this._commandService.registerMultipleCommand(command))), [InnerPasteCommand, CutContentCommand].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command))), this._initLegacyPasteCommand();
   }
   _initLegacyPasteCommand() {
-    var t;
-    (t = this._textSelectionRenderManager) == null || t.onPaste$.pipe(se(this.dispose$)).subscribe((e) => {
-      var i, s;
-      if (!ze(this._contextService))
+    var _a19;
+    (_a19 = this._textSelectionRenderManager) == null || _a19.onPaste$.pipe(takeUntil(this.dispose$)).subscribe((config) => {
+      var _a20, _b;
+      if (!whenDocOrEditor(this._contextService))
         return;
-      e.event.preventDefault();
-      const n = e.event, o = (i = n.clipboardData) == null ? void 0 : i.getData("text/html"), r = (s = n.clipboardData) == null ? void 0 : s.getData("text/plain");
-      this._docClipboardService.legacyPaste(o, r);
+      config.event.preventDefault();
+      const clipboardEvent = config.event, htmlContent = (_a20 = clipboardEvent.clipboardData) == null ? void 0 : _a20.getData("text/html"), textContent = (_b = clipboardEvent.clipboardData) == null ? void 0 : _b.getData("text/plain");
+      this._docClipboardService.legacyPaste(htmlContent, textContent);
     });
   }
-};
-Me = gi([
-  we(Be.Rendered, Me),
-  he(0, O),
-  he(1, ut),
-  he(2, Re),
-  he(3, ne),
-  he(4, In)
-], Me);
-var pi = Object.defineProperty, fi = Object.getOwnPropertyDescriptor, _i = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? fi(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && pi(e, n, r), r;
-}, ge = (t, e) => (n, o) => e(n, o, t);
-let ye = class extends Q {
-  constructor(e, n, o, r, i) {
+}, __name(_a7, "DocClipboardController"), _a7);
+DocClipboardController = __decorateClass$b([
+  OnLifecycle(LifecycleStages.Rendered, DocClipboardController),
+  __decorateParam$b(0, ICommandService),
+  __decorateParam$b(1, IClipboardInterfaceService),
+  __decorateParam$b(2, IDocClipboardService),
+  __decorateParam$b(3, ITextSelectionRenderManager),
+  __decorateParam$b(4, IContextService)
+], DocClipboardController);
+var __defProp$a = Object.defineProperty, __getOwnPropDesc$a = Object.getOwnPropertyDescriptor, __decorateClass$a = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(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$a(target, key, result), result;
+}, "__decorateClass$a"), __decorateParam$a = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$a"), _a8;
+let DocEditorBridgeController = (_a8 = class extends Disposable {
+  constructor(_univerInstanceService, _editorService, _commandService, _textSelectionRenderManager, _renderManagerService) {
     super();
-    T(this, "_initialEditors", /* @__PURE__ */ new Set());
-    this._univerInstanceService = e, this._editorService = n, this._commandService = o, this._textSelectionRenderManager = r, this._renderManagerService = i, this._initialize();
+    __publicField(this, "_initialEditors", /* @__PURE__ */ new Set());
+    this._univerInstanceService = _univerInstanceService, this._editorService = _editorService, this._commandService = _commandService, this._textSelectionRenderManager = _textSelectionRenderManager, this._renderManagerService = _renderManagerService, this._initialize();
   }
   _initialize() {
     this.disposeWithMe(
-      this._editorService.resize$.subscribe((e) => {
-        this._resize(e);
+      this._editorService.resize$.subscribe((unitId) => {
+        this._resize(unitId);
       })
-    ), this._editorService.getAllEditor().forEach((e) => {
-      const n = e.editorUnitId;
-      this._initialEditors.has(n) || (this._initialEditors.add(n), this._resize(n));
+    ), this._editorService.getAllEditor().forEach((editor) => {
+      const unitId = editor.editorUnitId;
+      this._initialEditors.has(unitId) || (this._initialEditors.add(unitId), this._resize(unitId));
     }), this._commandExecutedListener(), this._initialSetValue(), this._initialBlur(), this._initialFocus(), this._initialValueChange();
   }
-  _resize(e) {
-    var C, E, b;
-    if (e == null)
+  _resize(unitId) {
+    var _a19, _b, _c;
+    if (unitId == null)
       return;
-    const n = this._editorService.getEditor(e);
-    if ((n == null ? void 0 : n.cancelDefaultResizeListener) === !0)
+    const editor = this._editorService.getEditor(unitId);
+    if ((editor == null ? void 0 : editor.cancelDefaultResizeListener) === !0)
       return;
-    const o = this._univerInstanceService.getUniverDocInstance(e);
-    if (!o)
+    const editorDataModel = this._univerInstanceService.getUniverDocInstance(unitId);
+    if (!editorDataModel)
       return;
-    const r = (C = this._renderManagerService.getRenderById(o.getUnitId())) == null ? void 0 : C.with(L).getSkeleton();
-    if (n == null || n.render == null || r == null || o == null)
+    const skeleton = (_a19 = this._renderManagerService.getRenderById(editorDataModel.getUnitId())) == null ? void 0 : _a19.with(DocSkeletonManagerService).getSkeleton();
+    if (editor == null || editor.render == null || skeleton == null || editorDataModel == null)
       return;
-    r.calculate();
-    const { marginTop: i = 0, marginBottom: s = 0, marginLeft: a = 0, marginRight: c = 0 } = o.getSnapshot().documentStyle, { scene: d, mainComponent: g } = n.render;
-    let { actualHeight: h, actualWidth: p } = r.getActualSize();
-    h += i + s, p += a + c;
-    const { width: l, height: f } = n.getBoundingClientRect(), u = d.getViewport(q.VIEW_MAIN);
-    let _ = u == null ? void 0 : u.getScrollBar();
-    const m = Math.max(p, l), R = Math.max(h, f);
-    d.transformByState({
-      width: m,
-      height: R
-    }), g == null || g.resize(m, R), n.isSingle() ? p > l ? _ == null ? u && new tt(u, { barSize: 8, enableVertical: !1 }) : u == null || u.resetCanvasSizeAndUpdateScrollBar() : (_ = null, u == null || u.scrollTo({ x: 0, y: 0 }), (b = u == null ? void 0 : u.getScrollBar()) == null || b.dispose()) : h > f ? _ == null ? u && new tt(u, { enableHorizontal: !1, barSize: 8 }) : u == null || u.resetCanvasSizeAndUpdateScrollBar() : (_ = null, u == null || u.scrollTo({ x: 0, y: 0 }), (E = u == null ? void 0 : u.getScrollBar()) == null || E.dispose());
+    skeleton.calculate();
+    const { marginTop = 0, marginBottom = 0, marginLeft = 0, marginRight = 0 } = editorDataModel.getSnapshot().documentStyle, { scene, mainComponent } = editor.render;
+    let { actualHeight, actualWidth } = skeleton.getActualSize();
+    actualHeight += marginTop + marginBottom, actualWidth += marginLeft + marginRight;
+    const { width, height } = editor.getBoundingClientRect(), viewportMain = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
+    let scrollBar = viewportMain == null ? void 0 : viewportMain.getScrollBar();
+    const contentWidth = Math.max(actualWidth, width), contentHeight = Math.max(actualHeight, height);
+    scene.transformByState({
+      width: contentWidth,
+      height: contentHeight
+    }), mainComponent == null || mainComponent.resize(contentWidth, contentHeight), editor.isSingle() ? actualWidth > width ? scrollBar == null ? viewportMain && new ScrollBar(viewportMain, { barSize: 8, enableVertical: !1 }) : viewportMain == null || viewportMain.resetCanvasSizeAndUpdateScroll() : (scrollBar = null, viewportMain == null || viewportMain.scrollToBarPos({ x: 0, y: 0 }), (_c = viewportMain == null ? void 0 : viewportMain.getScrollBar()) == null || _c.dispose()) : actualHeight > height ? scrollBar == null ? viewportMain && new ScrollBar(viewportMain, { enableHorizontal: !1, barSize: 8 }) : viewportMain == null || viewportMain.resetCanvasSizeAndUpdateScroll() : (scrollBar = null, viewportMain == null || viewportMain.scrollToBarPos({ x: 0, y: 0 }), (_b = viewportMain == null ? void 0 : viewportMain.getScrollBar()) == null || _b.dispose());
   }
   _initialSetValue() {
     this.disposeWithMe(
-      this._editorService.setValue$.subscribe((e) => {
-        this._commandService.executeCommand(_o.id, {
-          unitId: e.editorUnitId,
-          body: e.body,
+      this._editorService.setValue$.subscribe((param) => {
+        this._commandService.executeCommand(CoverContentCommand.id, {
+          unitId: param.editorUnitId,
+          body: param.body,
           segmentId: null
         });
       })
@@ -2025,40 +2243,40 @@ let ye = class extends Q {
       })
     ), this.disposeWithMe(
       this._textSelectionRenderManager.onBlur$.subscribe(() => {
-        var r;
-        const e = (r = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : r.getUnitId();
-        if (e == null)
+        var _a19;
+        const unitId = (_a19 = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : _a19.getUnitId();
+        if (unitId == null)
           return;
-        const n = this._editorService.getEditor(e), o = this._editorService.getFocusEditor();
-        n == null || n.isSheetEditor() || o && o.editorUnitId === e || this._editorService.blur();
+        const editor = this._editorService.getEditor(unitId), focusEditor = this._editorService.getFocusEditor();
+        editor == null || editor.isSheetEditor() || focusEditor && focusEditor.editorUnitId === unitId || this._editorService.blur();
       })
     );
   }
   _initialFocus() {
     this.disposeWithMe(
-      this._editorService.focus$.subscribe((o) => {
-        this._textSelectionRenderManager.removeAllTextRanges(), this._textSelectionRenderManager.addTextRanges([o]);
+      this._editorService.focus$.subscribe((textRange) => {
+        this._textSelectionRenderManager.removeAllTextRanges(), this._textSelectionRenderManager.addTextRanges([textRange]);
       })
     );
-    const e = [
+    const focusExcepts = [
       "univer-formula-search",
       "univer-formula-help",
       "formula-help-decorator",
       "univer-formula-help-param"
     ];
     this.disposeWithMe(
-      yt(window, "mousedown").subscribe((o) => {
-        const i = o.target.classList[0] || "";
-        if (bn(i, e)) {
-          this._editorService.changeSpreadsheetFocusState(!0), o.stopPropagation();
+      fromEvent(window, "mousedown").subscribe((event) => {
+        const hasSearch = event.target.classList[0] || "";
+        if (checkForSubstrings(hasSearch, focusExcepts)) {
+          this._editorService.changeSpreadsheetFocusState(!0), event.stopPropagation();
           return;
         }
         this._editorService.changeSpreadsheetFocusState(!1);
       })
-    ), this._univerInstanceService.getAllUnitsForType(v.UNIVER_SHEET).forEach((o) => {
-      const r = o.getUnitId(), i = this._renderManagerService.getRenderById(r), s = i == null ? void 0 : i.engine.getCanvas().getCanvasEle();
-      s != null && yt(s, "mousedown").subscribe((a) => {
-        this._editorService.changeSpreadsheetFocusState(!0), a.stopPropagation();
+    ), this._univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_SHEET).forEach((unit) => {
+      const unitId = unit.getUnitId(), render = this._renderManagerService.getRenderById(unitId), canvasEle = render == null ? void 0 : render.engine.getCanvas().getCanvasEle();
+      canvasEle != null && fromEvent(canvasEle, "mousedown").subscribe((evt) => {
+        this._editorService.changeSpreadsheetFocusState(!0), evt.stopPropagation();
       });
     });
   }
@@ -2074,60 +2292,60 @@ let ye = class extends Q {
     );
   }
   _valueChange() {
-    var o;
-    const e = (o = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : o.getUnitId();
-    if (e == null)
+    var _a19;
+    const unitId = (_a19 = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : _a19.getUnitId();
+    if (unitId == null)
       return;
-    const n = this._editorService.getEditor(e);
-    n == null || n.isSheetEditor() || this._editorService.refreshValueChange(e);
+    const editor = this._editorService.getEditor(unitId);
+    editor == null || editor.isSheetEditor() || this._editorService.refreshValueChange(unitId);
   }
   /**
    * Listen to document edits to refresh the size of the formula editor.
    */
   _commandExecutedListener() {
-    const e = [ht.id, kn.id];
+    const updateCommandList = [RichTextEditingMutation.id, SetEditorResizeOperation.id];
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((n) => {
-        if (e.includes(n.id)) {
-          const o = n.params, { unitId: r } = o;
-          if (this._editorService.isSheetEditor(r))
+      this._commandService.onCommandExecuted((command) => {
+        if (updateCommandList.includes(command.id)) {
+          const params = command.params, { unitId } = params;
+          if (this._editorService.isSheetEditor(unitId))
             return;
-          this._resize(r), this._valueChange();
+          this._resize(unitId), this._valueChange();
         }
       })
     );
   }
-};
-ye = _i([
-  we(Be.Rendered, ye),
-  ge(0, w),
-  ge(1, ee),
-  ge(2, O),
-  ge(3, ne),
-  ge(4, W)
-], ye);
-var mi = Object.defineProperty, Si = Object.getOwnPropertyDescriptor, vi = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? Si(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && mi(e, n, r), r;
-}, pe = (t, e) => (n, o) => e(n, o, t);
-let st = class extends Se {
-  constructor(t, e, n, o, r, i) {
-    super(), this._context = t, this._commandService = e, this._docSkeletonManagerService = n, this._configService = o, this._editorService = r, this._renderManagerService = i, this._addNewRender(), this._initRenderRefresh(), this._initCommandListener();
-  }
-  reRender(t) {
-    var r, i;
-    const e = (r = this._renderManagerService.getRenderById(t)) == null ? void 0 : r.with(L), n = e == null ? void 0 : e.getSkeleton();
-    if (!(!n || n.getViewModel().getDataModel().getSnapshot().disabled)) {
-      if (n.calculate(), this._editorService.isEditor(t)) {
-        (i = this._context.mainComponent) == null || i.makeDirty();
+}, __name(_a8, "DocEditorBridgeController"), _a8);
+DocEditorBridgeController = __decorateClass$a([
+  OnLifecycle(LifecycleStages.Rendered, DocEditorBridgeController),
+  __decorateParam$a(0, IUniverInstanceService),
+  __decorateParam$a(1, IEditorService),
+  __decorateParam$a(2, ICommandService),
+  __decorateParam$a(3, ITextSelectionRenderManager),
+  __decorateParam$a(4, IRenderManagerService)
+], DocEditorBridgeController);
+var __defProp$9 = Object.defineProperty, __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor, __decorateClass$9 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(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$9(target, key, result), result;
+}, "__decorateClass$9"), __decorateParam$9 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$9"), _a9;
+let DocRenderController = (_a9 = class extends RxDisposable {
+  constructor(_context, _commandService, _docSkeletonManagerService, _configService, _editorService, _renderManagerService) {
+    super(), this._context = _context, this._commandService = _commandService, this._docSkeletonManagerService = _docSkeletonManagerService, this._configService = _configService, this._editorService = _editorService, this._renderManagerService = _renderManagerService, this._addNewRender(), this._initRenderRefresh(), this._initCommandListener();
+  }
+  reRender(unitId) {
+    var _a19, _b;
+    const docSkeletonManagerService = (_a19 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a19.with(DocSkeletonManagerService), skeleton = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getSkeleton();
+    if (!(!skeleton || skeleton.getViewModel().getDataModel().getSnapshot().disabled)) {
+      if (skeleton.calculate(), this._editorService.isEditor(unitId)) {
+        (_b = this._context.mainComponent) == null || _b.makeDirty();
         return;
       }
-      this._recalculateSizeBySkeleton(n);
+      this._recalculateSizeBySkeleton(skeleton);
     }
   }
   _addNewRender() {
-    const { scene: t, engine: e, unit: n } = this._context, o = new To(q.VIEW_MAIN, t, {
+    const { scene, engine, unit } = this._context, viewMain = new Viewport(VIEWPORT_KEY.VIEW_MAIN, scene, {
       left: 0,
       top: 0,
       bottom: 0,
@@ -2136,238 +2354,243 @@ let st = class extends Se {
       isRelativeY: !0,
       isWheelPreventDefaultX: !0
     });
-    t.attachControl(), t.onMouseWheel$.subscribeEvent((s, a) => {
-      const c = s;
-      if (c.ctrlKey) {
-        const d = Math.abs(c.deltaX);
-        let g = d < 40 ? 0.2 : d < 80 ? 0.4 : 0.2;
-        g *= c.deltaY > 0 ? -1 : 1, t.scaleX < 1 && (g /= 2), t.scaleX + g > 4 ? t.scale(4, 4) : t.scaleX + g < 0.1 ? t.scale(0.1, 0.1) : c.preventDefault();
+    scene.attachControl(), scene.onMouseWheel$.subscribeEvent((evt, state) => {
+      const e = evt;
+      if (e.ctrlKey) {
+        const deltaFactor = Math.abs(e.deltaX);
+        let scrollNum = deltaFactor < 40 ? 0.2 : deltaFactor < 80 ? 0.4 : 0.2;
+        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
-        o.onMouseWheel(c, a);
-    }), this._configService.getConfig("hasScroll") !== !1 && new tt(o), t.addLayer(
-      new bt(t, [], Ye),
-      new bt(t, [], mo)
-    ), this._addComponent(), n.getShouldRenderLoopImmediately() && e.runRenderLoop(() => {
-      t.render();
+        viewMain.onMouseWheel(e, state);
+    }), this._configService.getConfig("hasScroll") !== !1 && new ScrollBar(viewMain), scene.addLayer(
+      new Layer(scene, [], DOCS_COMPONENT_MAIN_LAYER_INDEX),
+      new Layer(scene, [], DOCS_COMPONENT_HEADER_LAYER_INDEX)
+    ), this._addComponent(), unit.getShouldRenderLoopImmediately() && engine.runRenderLoop(() => {
+      scene.render();
     });
   }
   _addComponent() {
-    const { scene: t, unit: e, components: n } = this._context, o = {
-      pageMarginLeft: e.documentStyle.marginLeft || 0,
-      pageMarginTop: e.documentStyle.marginTop || 0
-    }, r = new Io(oe.MAIN, void 0, o);
-    r.zIndex = Et;
-    const i = new bo(oe.BACKGROUND, void 0, o);
-    i.zIndex = Et, this._context.mainComponent = r, n.set(oe.MAIN, r), n.set(oe.BACKGROUND, i), t.addObjects([r], Ye), t.addObjects([i], So), this._editorService.getEditor(e.getUnitId()) == null && t.enableLayerCache(Ye);
+    const { scene, unit: documentModel, components } = this._context, config = {
+      pageMarginLeft: documentModel.documentStyle.marginLeft || 0,
+      pageMarginTop: documentModel.documentStyle.marginTop || 0
+    }, documents = new Documents(DOCS_VIEW_KEY.MAIN, void 0, config);
+    documents.zIndex = DOCS_COMPONENT_DEFAULT_Z_INDEX;
+    const docBackground = new DocBackground(DOCS_VIEW_KEY.BACKGROUND, void 0, config);
+    docBackground.zIndex = DOCS_COMPONENT_DEFAULT_Z_INDEX, this._context.mainComponent = documents, components.set(DOCS_VIEW_KEY.MAIN, documents), components.set(DOCS_VIEW_KEY.BACKGROUND, docBackground), scene.addObjects([documents], DOCS_COMPONENT_MAIN_LAYER_INDEX), scene.addObjects([docBackground], DOCS_COMPONENT_BACKGROUND_LAYER_INDEX), this._editorService.getEditor(documentModel.getUnitId()) == null && scene.enableLayerCache(DOCS_COMPONENT_MAIN_LAYER_INDEX);
   }
   _initRenderRefresh() {
-    this._docSkeletonManagerService.currentSkeletonBefore$.pipe(se(this.dispose$)).subscribe((t) => {
-      this._create(t);
+    this._docSkeletonManagerService.currentSkeletonBefore$.pipe(takeUntil(this.dispose$)).subscribe((param) => {
+      this._create(param);
     });
   }
-  _create(t) {
-    if (!t)
+  _create(skeleton) {
+    if (!skeleton)
       return;
-    const { mainComponent: e, components: n } = this._context, o = e, r = n.get(oe.BACKGROUND);
-    o.changeSkeleton(t), r.changeSkeleton(t), this._recalculateSizeBySkeleton(t);
+    const { mainComponent, components } = this._context, docsComponent = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND);
+    docsComponent.changeSkeleton(skeleton), docBackground.changeSkeleton(skeleton), this._recalculateSizeBySkeleton(skeleton);
   }
   _initCommandListener() {
-    const t = [ht.id];
-    this.disposeWithMe(this._commandService.onCommandExecuted((e) => {
-      if (t.includes(e.id)) {
-        const n = e.params, { unitId: o } = n;
-        this.reRender(o);
+    const updateCommandList = [RichTextEditingMutation.id];
+    this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+      if (updateCommandList.includes(command.id)) {
+        const params = command.params, { unitId } = params;
+        this.reRender(unitId);
       }
     }));
   }
-  _recalculateSizeBySkeleton(t) {
-    var g;
-    const { mainComponent: e, scene: n, unitId: o, components: r } = this._context, i = e, s = r.get(oe.BACKGROUND), a = (g = t.getSkeletonData()) == null ? void 0 : g.pages;
-    if (a == null)
+  _recalculateSizeBySkeleton(skeleton) {
+    var _a19;
+    const { mainComponent, scene, unitId, components } = this._context, docsComponent = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND), pages = (_a19 = skeleton.getSkeletonData()) == null ? void 0 : _a19.pages;
+    if (pages == null)
       return;
-    let c = 0, d = 0;
-    for (let h = 0, p = a.length; h < p; h++) {
-      const l = a[h], { pageWidth: f, pageHeight: u } = l;
-      i.pageLayoutType === Ae.VERTICAL ? (d += u, d += i.pageMarginTop, h === p - 1 && (d += i.pageMarginTop), c = Math.max(c, f)) : i.pageLayoutType === Ae.HORIZONTAL && (c += f, h !== p - 1 && (c += i.pageMarginLeft), d = Math.max(d, u));
+    let width = 0, height = 0;
+    for (let i = 0, len = pages.length; i < len; i++) {
+      const page = pages[i], { pageWidth, pageHeight } = page;
+      docsComponent.pageLayoutType === PageLayoutType.VERTICAL ? (height += pageHeight, height += docsComponent.pageMarginTop, i === len - 1 && (height += docsComponent.pageMarginTop), width = Math.max(width, pageWidth)) : docsComponent.pageLayoutType === PageLayoutType.HORIZONTAL && (width += pageWidth, i !== len - 1 && (width += docsComponent.pageMarginLeft), height = Math.max(height, pageHeight));
     }
-    i.resize(c, d), s.resize(c, d), this._editorService.isEditor(o) || n.resize(c, d);
+    docsComponent.resize(width, height), docBackground.resize(width, height), this._editorService.isEditor(unitId) || scene.resize(width, height);
+  }
+}, __name(_a9, "DocRenderController"), _a9);
+DocRenderController = __decorateClass$9([
+  __decorateParam$9(1, ICommandService),
+  __decorateParam$9(2, Inject(DocSkeletonManagerService)),
+  __decorateParam$9(3, IConfigService),
+  __decorateParam$9(4, IEditorService),
+  __decorateParam$9(5, IRenderManagerService)
+], DocRenderController);
+const _DocPageLayoutService = class _DocPageLayoutService extends Disposable {
+  constructor(_context) {
+    super(), this._context = _context;
+  }
+  calculatePagePosition() {
+    var _a19, _b;
+    const docObject = neoGetDocObject(this._context), zoomRatio = (_b = (_a19 = this._context.unit.getSettings()) == null ? void 0 : _a19.zoomRatio) != null ? _b : 1, { document: docsComponent, scene, docBackground } = docObject, parent = scene == null ? void 0 : scene.getParent(), { width: docsWidth, height: docsHeight, pageMarginLeft, pageMarginTop } = docsComponent;
+    if (parent == null || docsWidth === Number.POSITIVE_INFINITY || docsHeight === Number.POSITIVE_INFINITY)
+      return;
+    const { width: engineWidth, height: engineHeight } = parent;
+    let docsLeft = 0, docsTop = 0, sceneWidth = 0, sceneHeight = 0, scrollToX = Number.POSITIVE_INFINITY;
+    engineWidth > (docsWidth + pageMarginLeft * 2) * zoomRatio ? (docsLeft = engineWidth / 2 - docsWidth * zoomRatio / 2, docsLeft /= zoomRatio, sceneWidth = (engineWidth - pageMarginLeft * 2) / zoomRatio, scrollToX = 0) : (docsLeft = pageMarginLeft, sceneWidth = docsWidth + pageMarginLeft * 2, scrollToX = (sceneWidth - engineWidth / zoomRatio) / 2), engineHeight > docsHeight ? (docsTop = engineHeight / 2 - docsHeight / 2, sceneHeight = (engineHeight - pageMarginTop * 2) / zoomRatio) : (docsTop = pageMarginTop, sceneHeight = docsHeight + pageMarginTop * 2), scene.resize(sceneWidth, sceneHeight + 200), docsComponent.translate(docsLeft, docsTop), docBackground.translate(docsLeft, docsTop);
+    const viewport = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
+    return scrollToX !== Number.POSITIVE_INFINITY && viewport != null && viewport.scrollToViewportPos({
+      viewportScrollX: scrollToX
+    }), this;
   }
 };
-st = vi([
-  pe(1, O),
-  pe(2, I(L)),
-  pe(3, Mn),
-  pe(4, ee),
-  pe(5, W)
-], st);
-var Ri = Object.defineProperty, Oi = Object.getOwnPropertyDescriptor, Ci = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? Oi(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && Ri(e, n, r), r;
-}, fe = (t, e) => (n, o) => e(n, o, t);
-let at = class extends Q {
-  constructor(t, e, n, o, r, i) {
-    super(), this._context = t, this._docSkeletonManagerService = e, this._univerInstanceService = n, this._commandService = o, this._textSelectionManagerService = r, this._editorService = i, this._init();
+__name(_DocPageLayoutService, "DocPageLayoutService");
+let DocPageLayoutService = _DocPageLayoutService;
+var __defProp$8 = Object.defineProperty, __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor, __decorateClass$8 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(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$8(target, key, result), result;
+}, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$8"), _a10;
+let DocZoomRenderController = (_a10 = class extends Disposable {
+  constructor(_context, _docSkeletonManagerService, _univerInstanceService, _commandService, _textSelectionManagerService, _editorService, _docPageLayoutService) {
+    super(), this._context = _context, this._docSkeletonManagerService = _docSkeletonManagerService, this._univerInstanceService = _univerInstanceService, this._commandService = _commandService, this._textSelectionManagerService = _textSelectionManagerService, this._editorService = _editorService, this._docPageLayoutService = _docPageLayoutService, this._init();
   }
   _init() {
-    this._initSkeletonListener(), this._initCommandExecutedListener(), this._initRenderRefresher(), setTimeout(() => this._updateViewZoom(1, !0), 20);
+    this._initSkeletonListener(), this._initCommandExecutedListener(), this._initRenderRefresher(), setTimeout(() => this.updateViewZoom(1, !0), 20);
   }
   _initRenderRefresher() {
-    this._docSkeletonManagerService.currentSkeleton$.subscribe((t) => {
-      if (t == null)
+    this._docSkeletonManagerService.currentSkeleton$.subscribe((param) => {
+      if (param == null)
         return;
-      const { unitId: e, scene: n } = this._context;
-      this._editorService.isEditor(e) || this.disposeWithMe(n.onMouseWheel$.subscribeEvent((o) => {
-        if (!o.ctrlKey)
+      const { unitId, scene } = this._context;
+      this._editorService.isEditor(unitId) || this.disposeWithMe(scene.onMouseWheel$.subscribeEvent((e) => {
+        if (!e.ctrlKey)
           return;
-        const r = this._univerInstanceService.getCurrentUniverDocInstance();
-        if (!r)
+        const documentModel = this._univerInstanceService.getCurrentUniverDocInstance();
+        if (!documentModel)
           return;
-        const i = Math.abs(o.deltaX);
-        let s = i < 40 ? 0.2 : i < 80 ? 0.4 : 0.2;
-        s *= o.deltaY > 0 ? -1 : 1, n.scaleX < 1 && (s /= 2);
-        const a = r.zoomRatio;
-        let c = +Number.parseFloat(`${a + s}`).toFixed(1);
-        c = c >= 4 ? 4 : c <= 0.1 ? 0.1 : c, this._commandService.executeCommand(vo.id, {
-          zoomRatio: c,
-          unitId: r.getUnitId()
-        }), o.preventDefault();
+        const deltaFactor = Math.abs(e.deltaX);
+        let ratioDelta = deltaFactor < 40 ? 0.2 : deltaFactor < 80 ? 0.4 : 0.2;
+        ratioDelta *= e.deltaY > 0 ? -1 : 1, scene.scaleX < 1 && (ratioDelta /= 2);
+        const currentRatio = documentModel.zoomRatio;
+        let nextRatio = +Number.parseFloat(`${currentRatio + ratioDelta}`).toFixed(1);
+        nextRatio = nextRatio >= 4 ? 4 : nextRatio <= 0.1 ? 0.1 : nextRatio, this._commandService.executeCommand(SetDocZoomRatioCommand.id, {
+          zoomRatio: nextRatio,
+          unitId: documentModel.getUnitId()
+        }), e.preventDefault();
       }));
     });
   }
   _initSkeletonListener() {
-    this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.subscribe((t) => {
-      if (t == null)
+    this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.subscribe((param) => {
+      if (param == null)
         return;
-      const e = this._univerInstanceService.getCurrentUniverDocInstance();
-      if (!e) return;
-      const n = e.zoomRatio || 1;
-      this._updateViewZoom(n, !1);
+      const documentModel = this._univerInstanceService.getCurrentUniverDocInstance();
+      if (!documentModel) return;
+      const zoomRatio = documentModel.zoomRatio || 1;
+      this.updateViewZoom(zoomRatio, !1);
     }));
   }
   _initCommandExecutedListener() {
-    const t = [De.id];
-    this.disposeWithMe(this._commandService.onCommandExecuted((e) => {
-      if (t.includes(e.id)) {
-        const n = this._univerInstanceService.getCurrentUniverDocInstance();
-        if (!n) return;
-        const o = e.params, { unitId: r } = o;
-        if (r !== n.getUnitId())
+    const updateCommandList = [SetDocZoomRatioOperation.id];
+    this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+      if (updateCommandList.includes(command.id)) {
+        const documentModel = this._univerInstanceService.getCurrentUniverDocInstance();
+        if (!documentModel) return;
+        const params = command.params, { unitId } = params;
+        if (unitId !== documentModel.getUnitId())
           return;
-        const i = n.zoomRatio || 1;
-        this._updateViewZoom(i);
+        const zoomRatio = documentModel.zoomRatio || 1;
+        this.updateViewZoom(zoomRatio);
       }
     }));
   }
-  _updateViewZoom(t, e = !0) {
-    var o;
-    const n = J(this._context);
-    n.scene.scale(t, t), this._calculatePagePosition(n, t), e && this._textSelectionManagerService.refreshSelection(), (o = n.scene.getTransformer()) == null || o.clearSelectedObjects();
-  }
-  _calculatePagePosition(t, e) {
-    const { document: n, scene: o, docBackground: r } = t, i = o == null ? void 0 : o.getParent(), { width: s, height: a, pageMarginLeft: c, pageMarginTop: d } = n;
-    if (i == null || s === Number.POSITIVE_INFINITY || a === Number.POSITIVE_INFINITY)
-      return;
-    const { width: g, height: h } = i;
-    let p = 0, l = 0, f = 0, u = 0, _ = Number.POSITIVE_INFINITY;
-    g > (s + c * 2) * e ? (p = g / 2 - s * e / 2, p /= e, f = (g - c * 2) / e, _ = 0) : (p = c, f = s + c * 2, _ = (f - g / e) / 2), h > a ? (l = h / 2 - a / 2, u = (h - d * 2) / e) : (l = d, u = a + d * 2), o.resize(f, u + 200), n.translate(p, l), r.translate(p, l);
-    const m = o.getViewport(q.VIEW_MAIN);
-    if (_ !== Number.POSITIVE_INFINITY && m != null) {
-      const R = m.transViewportScroll2ScrollValue(_, 0).x;
-      m.scrollTo({
-        x: R
-      });
-    }
-    return this;
-  }
-};
-at = Ci([
-  fe(1, I(L)),
-  fe(2, w),
-  fe(3, O),
-  fe(4, I(te)),
-  fe(5, ee)
-], at);
-var Ei = Object.defineProperty, Ti = Object.getOwnPropertyDescriptor, Ii = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? Ti(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && Ei(e, n, r), r;
-}, ie = (t, e) => (n, o) => e(n, o, t);
-let ct = class extends Q {
-  constructor(e, n, o, r, i, s, a) {
+  updateViewZoom(zoomRatio, needRefreshSelection = !0) {
+    var _a19;
+    const docObject = neoGetDocObject(this._context);
+    docObject.scene.scale(zoomRatio, zoomRatio), this._docPageLayoutService.calculatePagePosition(), needRefreshSelection && !this._editorService.isEditor(this._context.unitId) && this._textSelectionManagerService.refreshSelection(), (_a19 = docObject.scene.getTransformer()) == null || _a19.clearSelectedObjects();
+  }
+}, __name(_a10, "DocZoomRenderController"), _a10);
+DocZoomRenderController = __decorateClass$8([
+  __decorateParam$8(1, Inject(DocSkeletonManagerService)),
+  __decorateParam$8(2, IUniverInstanceService),
+  __decorateParam$8(3, ICommandService),
+  __decorateParam$8(4, Inject(TextSelectionManagerService)),
+  __decorateParam$8(5, IEditorService),
+  __decorateParam$8(6, Inject(DocPageLayoutService))
+], DocZoomRenderController);
+var __defProp$7 = Object.defineProperty, __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor, __decorateClass$7 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(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$7(target, key, result), result;
+}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a11;
+let DocTextSelectionRenderController = (_a11 = class extends Disposable {
+  constructor(_context, _commandService, _editorService, _instanceSrv, _textSelectionRenderManager, _docSkeletonManagerService, _textSelectionManagerService) {
     super();
-    T(this, "_loadedMap", /* @__PURE__ */ new WeakSet());
-    this._context = e, this._commandService = n, this._editorService = o, this._instanceSrv = r, this._textSelectionRenderManager = i, this._docSkeletonManagerService = s, this._textSelectionManagerService = a, this._initialize();
+    __publicField(this, "_loadedMap", /* @__PURE__ */ new WeakSet());
+    this._context = _context, this._commandService = _commandService, this._editorService = _editorService, this._instanceSrv = _instanceSrv, this._textSelectionRenderManager = _textSelectionRenderManager, this._docSkeletonManagerService = _docSkeletonManagerService, this._textSelectionManagerService = _textSelectionManagerService, this._initialize();
   }
   _initialize() {
     this._init(), this._skeletonListener(), this._commandExecutedListener();
   }
   _init() {
-    const { unitId: e } = this._context, n = J(this._context);
-    n == null || n.document == null || this._loadedMap.has(n.document) || (this._initialMain(e), this._loadedMap.add(n.document));
+    const { unitId } = this._context, docObject = neoGetDocObject(this._context);
+    docObject == null || docObject.document == null || this._loadedMap.has(docObject.document) || (this._initialMain(unitId), this._loadedMap.add(docObject.document));
   }
   // eslint-disable-next-line max-lines-per-function
-  _initialMain(e) {
-    const n = J(this._context), { document: o, scene: r } = n;
-    this.disposeWithMe(o.onPointerEnter$.subscribeEvent(() => {
-      this._isEditorReadOnly(e) || (o.cursor = Mt.TEXT);
-    })), this.disposeWithMe(o.onPointerLeave$.subscribeEvent(() => {
-      o.cursor = Mt.DEFAULT, r.resetCursor();
-    })), this.disposeWithMe(o.onPointerDown$.subscribeEvent((i, s) => {
-      if (this._isEditorReadOnly(e))
+  _initialMain(unitId) {
+    const docObject = neoGetDocObject(this._context), { document, scene } = docObject;
+    this.disposeWithMe(document.onPointerEnter$.subscribeEvent(() => {
+      this._isEditorReadOnly(unitId) || (document.cursor = CURSOR_TYPE.TEXT);
+    })), this.disposeWithMe(document.onPointerLeave$.subscribeEvent(() => {
+      document.cursor = CURSOR_TYPE.DEFAULT, scene.resetCursor();
+    })), this.disposeWithMe(document.onPointerDown$.subscribeEvent((evt, state) => {
+      if (this._isEditorReadOnly(unitId))
         return;
-      const a = this._instanceSrv.getCurrentUnitForType(v.UNIVER_DOC);
-      (a == null ? void 0 : a.getUnitId()) !== e && this._instanceSrv.setCurrentUnitForType(e);
-      const c = this._docSkeletonManagerService.getSkeleton(), { offsetX: d, offsetY: g } = i, h = this._getTransformCoordForDocumentOffset(d, g);
-      if (h != null) {
+      const docDataModel = this._instanceSrv.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
+      (docDataModel == null ? void 0 : docDataModel.getUnitId()) !== unitId && this._instanceSrv.setCurrentUnitForType(unitId);
+      const skeleton = this._docSkeletonManagerService.getSkeleton(), { offsetX, offsetY } = evt, coord = this._getTransformCoordForDocumentOffset(offsetX, offsetY);
+      if (coord != null) {
         const {
-          pageLayoutType: p = Ae.VERTICAL,
-          pageMarginLeft: l,
-          pageMarginTop: f
-        } = o.getOffsetConfig(), { editArea: u } = c.findEditAreaByCoord(
-          h,
-          p,
-          l,
-          f
-        ), _ = this._docSkeletonManagerService.getViewModel(), m = _.getEditArea();
-        m !== F.BODY && u !== F.BODY && u !== m && _.setEditArea(u);
+          pageLayoutType = PageLayoutType.VERTICAL,
+          pageMarginLeft,
+          pageMarginTop
+        } = document.getOffsetConfig(), { editArea } = skeleton.findEditAreaByCoord(
+          coord,
+          pageLayoutType,
+          pageMarginLeft,
+          pageMarginTop
+        ), viewModel = this._docSkeletonManagerService.getViewModel(), preEditArea = viewModel.getEditArea();
+        preEditArea !== DocumentEditArea.BODY && editArea !== DocumentEditArea.BODY && editArea !== preEditArea && viewModel.setEditArea(editArea);
       }
-      if (this._textSelectionRenderManager.eventTrigger(i), this._editorService.getEditor(e)) {
-        this._setEditorFocus(e);
-        const { offsetX: p, offsetY: l } = i;
+      if (this._textSelectionRenderManager.eventTrigger(evt), this._editorService.getEditor(unitId)) {
+        this._setEditorFocus(unitId);
+        const { offsetX: offsetX2, offsetY: offsetY2 } = evt;
         setTimeout(() => {
-          this._setEditorFocus(e), this._textSelectionRenderManager.setCursorManually(p, l);
+          this._setEditorFocus(unitId), this._textSelectionRenderManager.setCursorManually(offsetX2, offsetY2);
         }, 0);
       }
-      i.button !== 2 && s.stopPropagation();
-    })), this.disposeWithMe(o.onDblclick$.subscribeEvent((i) => {
-      this._isEditorReadOnly(e) || this._textSelectionRenderManager.handleDblClick(i);
-    })), this.disposeWithMe(o.onTripleClick$.subscribeEvent((i) => {
-      this._isEditorReadOnly(e) || this._textSelectionRenderManager.handleTripleClick(i);
+      evt.button !== 2 && state.stopPropagation();
+    })), this.disposeWithMe(document.onDblclick$.subscribeEvent((evt) => {
+      this._isEditorReadOnly(unitId) || this._textSelectionRenderManager.handleDblClick(evt);
+    })), this.disposeWithMe(document.onTripleClick$.subscribeEvent((evt) => {
+      this._isEditorReadOnly(unitId) || this._textSelectionRenderManager.handleTripleClick(evt);
     }));
   }
-  _getTransformCoordForDocumentOffset(e, n) {
-    const o = J(this._context), { document: r, scene: i } = o, { documentTransform: s } = r.getOffsetConfig(), a = i.getViewports()[0];
-    if (a == null)
+  _getTransformCoordForDocumentOffset(evtOffsetX, evtOffsetY) {
+    const docObject = neoGetDocObject(this._context), { document, scene } = docObject, { documentTransform } = document.getOffsetConfig(), activeViewport = scene.getViewports()[0];
+    if (activeViewport == null)
       return;
-    const c = a.transformVector2SceneCoord(sn.FromArray([e, n]));
-    return s.clone().invert().applyPoint(c);
+    const originCoord = activeViewport.transformVector2SceneCoord(Vector2.FromArray([evtOffsetX, evtOffsetY]));
+    return documentTransform.clone().invert().applyPoint(originCoord);
   }
-  _isEditorReadOnly(e) {
-    const n = this._editorService.getEditor(e);
-    return n ? n.isReadOnly() : !1;
+  _isEditorReadOnly(unitId) {
+    const editor = this._editorService.getEditor(unitId);
+    return editor ? editor.isReadOnly() : !1;
   }
-  _setEditorFocus(e) {
-    this._editorService.focusStyle(e);
+  _setEditorFocus(unitId) {
+    this._editorService.focusStyle(unitId);
   }
   _commandExecutedListener() {
-    const e = [De.id];
+    const updateCommandList = [SetDocZoomRatioOperation.id];
     this.disposeWithMe(
-      this._commandService.onCommandExecuted((n) => {
-        var o;
-        if (e.includes(n.id)) {
-          const r = n.params, { unitId: i } = r, s = (o = this._textSelectionManagerService.getCurrentSelection()) == null ? void 0 : o.unitId;
-          if (i !== s)
+      this._commandService.onCommandExecuted((command) => {
+        var _a19;
+        if (updateCommandList.includes(command.id)) {
+          const params = command.params, { unitId: documentId } = params, unitId = (_a19 = this._textSelectionManagerService.getCurrentSelection()) == null ? void 0 : _a19.unitId;
+          if (documentId !== unitId)
             return;
           this._textSelectionManagerService.refreshSelection();
         }
@@ -2376,14 +2599,14 @@ let ct = class extends Q {
   }
   _skeletonListener() {
     this.disposeWithMe(
-      this._docSkeletonManagerService.currentSkeleton$.subscribe((e) => {
-        if (e == null)
+      this._docSkeletonManagerService.currentSkeleton$.subscribe((skeleton) => {
+        if (skeleton == null)
           return;
-        const { scene: n, mainComponent: o, unitId: r } = this._context;
-        this._textSelectionRenderManager.changeRuntime(e, n, o), this._textSelectionManagerService.setCurrentSelectionNotRefresh({
-          unitId: r,
+        const { scene, mainComponent, unitId } = this._context;
+        this._textSelectionRenderManager.changeRuntime(skeleton, scene, mainComponent), this._textSelectionManagerService.setCurrentSelectionNotRefresh({
+          unitId,
           subUnitId: ""
-        }), yn(r) || this._textSelectionManagerService.replaceTextRanges([
+        }), isInternalEditorID(unitId) || this._textSelectionManagerService.replaceTextRanges([
           {
             startOffset: 0,
             endOffset: 0
@@ -2392,102 +2615,105 @@ let ct = class extends Q {
       })
     );
   }
-};
-ct = Ii([
-  ie(1, O),
-  ie(2, ee),
-  ie(3, w),
-  ie(4, ne),
-  ie(5, I(L)),
-  ie(6, I(te))
-], ct);
-var bi = Object.defineProperty, Mi = Object.getOwnPropertyDescriptor, yi = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? Mi(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && bi(e, n, r), r;
-}, Te = (t, e) => (n, o) => e(n, o, t);
-function kt(t, e) {
-  const n = Gt(t.left, t.top, e), o = Gt(t.right, t.bottom, e);
+}, __name(_a11, "DocTextSelectionRenderController"), _a11);
+DocTextSelectionRenderController = __decorateClass$7([
+  __decorateParam$7(1, ICommandService),
+  __decorateParam$7(2, IEditorService),
+  __decorateParam$7(3, IUniverInstanceService),
+  __decorateParam$7(4, ITextSelectionRenderManager),
+  __decorateParam$7(5, Inject(DocSkeletonManagerService)),
+  __decorateParam$7(6, Inject(TextSelectionManagerService))
+], DocTextSelectionRenderController);
+var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor, __decorateClass$6 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(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$6(target, key, result), result;
+}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6");
+function transformBound2OffsetBound(originBound, scene) {
+  const topLeft = transformPosition2Offset(originBound.left, originBound.top, scene), bottomRight = transformPosition2Offset(originBound.right, originBound.bottom, scene);
   return {
-    left: n.x,
-    top: n.y,
-    right: o.x,
-    bottom: o.y
+    left: topLeft.x,
+    top: topLeft.y,
+    right: bottomRight.x,
+    bottom: bottomRight.y
   };
 }
-function Gt(t, e, n) {
-  const { scaleX: o, scaleY: r } = n.getAncestorScale(), i = n.getViewport(q.VIEW_MAIN);
-  if (!i)
+__name(transformBound2OffsetBound, "transformBound2OffsetBound");
+function transformPosition2Offset(x, y, scene) {
+  const { scaleX, scaleY } = scene.getAncestorScale(), viewMain = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
+  if (!viewMain)
     return {
-      x: t,
-      y: e
+      x,
+      y
     };
-  const { viewportScrollX: s, viewportScrollY: a } = i, c = (t - s) * o, d = (e - a) * r;
+  const { viewportScrollX: actualScrollX, viewportScrollY: actualScrollY } = viewMain, offsetX = (x - actualScrollX) * scaleX, offsetY = (y - actualScrollY) * scaleY;
   return {
-    x: c,
-    y: d
+    x: offsetX,
+    y: offsetY
   };
 }
-let lt = class extends Q {
-  constructor(t, e, n, o) {
-    super(), this._globalPopupManagerService = t, this._renderManagerService = e, this._univerInstanceService = n, this._commandService = o;
+__name(transformPosition2Offset, "transformPosition2Offset");
+var _a12;
+let DocCanvasPopManagerService = (_a12 = class extends Disposable {
+  constructor(_globalPopupManagerService, _renderManagerService, _univerInstanceService, _commandService) {
+    super(), this._globalPopupManagerService = _globalPopupManagerService, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._commandService = _commandService;
   }
   // #region attach to object
-  _createObjectPositionObserver(t, e) {
-    const n = () => {
-      const { scene: a, engine: c } = e, { left: d, top: g, width: h, height: p } = t, l = {
-        left: d,
-        right: d + h,
-        top: g,
-        bottom: g + p
-      }, f = kt(l, a), u = c.getCanvasElement().getBoundingClientRect().top;
+  _createObjectPositionObserver(targetObject, currentRender) {
+    const calc = /* @__PURE__ */ __name(() => {
+      const { scene, engine } = currentRender, { left, top, width, height } = targetObject, bound = {
+        left,
+        right: left + width,
+        top,
+        bottom: top + height
+      }, canvasElement = engine.getCanvasElement(), canvasClientRect = canvasElement.getBoundingClientRect(), widthOfCanvas = pxToNum(canvasElement.style.width), offsetBound = transformBound2OffsetBound(bound, scene), { top: topOffset, left: leftOffset, width: domWidth } = canvasClientRect, scaleAdjust = domWidth / widthOfCanvas;
       return {
-        left: f.left,
-        right: f.right,
-        top: f.top + u,
-        bottom: f.bottom + u
+        left: offsetBound.left * scaleAdjust + leftOffset,
+        right: offsetBound.right * scaleAdjust + leftOffset,
+        top: offsetBound.top * scaleAdjust + topOffset,
+        bottom: offsetBound.bottom * scaleAdjust + topOffset
       };
-    }, o = n(), r = new xt(o), i = new St();
-    i.add(this._commandService.onCommandExecuted((a) => {
-      a.id === De.id && r.next(n());
+    }, "calc"), position = calc(), position$ = new BehaviorSubject(position), disposable = new DisposableCollection();
+    disposable.add(this._commandService.onCommandExecuted((commandInfo) => {
+      commandInfo.id === SetDocZoomRatioOperation.id && position$.next(calc());
     }));
-    const s = e.scene.getViewport(q.VIEW_MAIN);
-    return s && i.add(s.onScrollAfter$.subscribeEvent(() => {
-      r.next(n());
+    const viewMain = currentRender.scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
+    return viewMain && disposable.add(viewMain.onScrollAfter$.subscribeEvent(() => {
+      position$.next(calc());
     })), {
-      position: o,
-      position$: r,
-      disposable: i
+      position,
+      position$,
+      disposable
     };
   }
-  _createRangePositionObserver(t, e) {
-    var a;
-    const n = () => {
-      const { scene: c, mainComponent: d, engine: g } = e, h = e.with(L).getSkeleton(), p = h.findNodePositionByCharIndex(t.startOffset), l = h.findNodePositionByCharIndex(t.endOffset), f = d;
-      if (!l || !p)
+  _createRangePositionObserver(range, currentRender) {
+    var _a19;
+    const calc = /* @__PURE__ */ __name(() => {
+      const { scene, mainComponent, engine } = currentRender, skeleton = currentRender.with(DocSkeletonManagerService).getSkeleton(), startPosition = skeleton.findNodePositionByCharIndex(range.startOffset), endPosition = skeleton.findNodePositionByCharIndex(range.endOffset), document = mainComponent;
+      if (!endPosition || !startPosition)
         return;
-      const u = f.getOffsetConfig(), { docsLeft: _, docsTop: m } = u, R = g.getCanvasElement().getBoundingClientRect().top, C = new rn(u, h), { borderBoxPointGroup: E } = C.getRangePointData(p, l);
-      return Mo(E).map((N) => kt(N, c)).map((N) => ({
-        left: N.left + _,
-        right: N.right + _,
-        top: N.top + m + R,
-        bottom: N.bottom + m + R
+      const documentOffsetConfig = document.getOffsetConfig(), { docsLeft, docsTop } = documentOffsetConfig, canvasElement = engine.getCanvasElement(), canvasClientRect = canvasElement.getBoundingClientRect(), widthOfCanvas = pxToNum(canvasElement.style.width), { top, left, width } = canvasClientRect, scaleAdjust = width / widthOfCanvas, { scaleX, scaleY } = scene.getAncestorScale(), convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { borderBoxPointGroup } = convertor.getRangePointData(startPosition, endPosition);
+      return getLineBounding(borderBoxPointGroup).map((bound) => transformBound2OffsetBound(bound, scene)).map((i) => ({
+        left: (i.left + docsLeft * scaleX) * scaleAdjust + left,
+        right: (i.right + docsLeft * scaleX) * scaleAdjust + left,
+        top: (i.top + docsTop * scaleY) * scaleAdjust + top,
+        bottom: (i.bottom + docsTop * scaleY) * scaleAdjust + top
       }));
-    }, o = (a = n()) != null ? a : [], r = new xt(o), i = new St();
-    i.add(this._commandService.onCommandExecuted((c) => {
-      if (c.id === De.id) {
-        const d = n();
-        d && r.next(d);
+    }, "calc"), positions = (_a19 = calc()) != null ? _a19 : [], positions$ = new BehaviorSubject(positions), disposable = new DisposableCollection();
+    disposable.add(this._commandService.onCommandExecuted((commandInfo) => {
+      if (commandInfo.id === SetDocZoomRatioOperation.id) {
+        const position = calc();
+        position && positions$.next(position);
       }
     }));
-    const s = e.scene.getViewport(q.VIEW_MAIN);
-    return s && i.add(s.onScrollAfter$.subscribeEvent(() => {
-      const c = n();
-      c && r.next(c);
+    const viewMain = currentRender.scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
+    return viewMain && disposable.add(viewMain.onScrollAfter$.subscribeEvent(() => {
+      const position = calc();
+      position && positions$.next(position);
     })), {
-      positions: o,
-      positions$: r,
-      disposable: i
+      positions,
+      positions$,
+      disposable
     };
   }
   /**
@@ -2496,211 +2722,390 @@ let lt = class extends Q {
    * @param popup popup item
    * @returns disposable
    */
-  attachPopupToObject(t, e) {
-    const o = this._univerInstanceService.getCurrentUnitForType(v.UNIVER_DOC).getUnitId(), r = this._renderManagerService.getRenderById(o);
-    if (!r)
+  attachPopupToObject(targetObject, popup) {
+    const unitId = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC).getUnitId(), currentRender = this._renderManagerService.getRenderById(unitId);
+    if (!currentRender)
       return {
-        dispose: () => {
-        }
+        dispose: /* @__PURE__ */ __name(() => {
+        }, "dispose")
       };
-    const { position: i, position$: s, disposable: a } = this._createObjectPositionObserver(t, r), c = this._globalPopupManagerService.addPopup({
-      ...e,
-      unitId: o,
+    const { position, position$, disposable } = this._createObjectPositionObserver(targetObject, currentRender), id = this._globalPopupManagerService.addPopup({
+      ...popup,
+      unitId,
       subUnitId: "default",
-      anchorRect: i,
-      anchorRect$: s
+      anchorRect: position,
+      anchorRect$: position$
     });
     return {
-      dispose: () => {
-        this._globalPopupManagerService.removePopup(c), s.complete(), a.dispose();
-      }
+      dispose: /* @__PURE__ */ __name(() => {
+        this._globalPopupManagerService.removePopup(id), position$.complete(), disposable.dispose();
+      }, "dispose")
     };
   }
-  attachPopupToRange(t, e) {
-    const o = this._univerInstanceService.getCurrentUnitForType(v.UNIVER_DOC).getUnitId(), { direction: r = "top" } = e, i = this._renderManagerService.getRenderById(o);
-    if (!i)
+  attachPopupToRange(range, popup) {
+    const unitId = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC).getUnitId(), { direction = "top" } = popup, currentRender = this._renderManagerService.getRenderById(unitId);
+    if (!currentRender)
       return {
-        dispose: () => {
-        }
+        dispose: /* @__PURE__ */ __name(() => {
+        }, "dispose")
       };
-    const { positions: s, positions$: a, disposable: c } = this._createRangePositionObserver(t, i), d = a.pipe(xo((h) => r === "top" ? h[0] : h[h.length - 1])), g = this._globalPopupManagerService.addPopup({
-      ...e,
-      unitId: o,
+    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({
+      ...popup,
+      unitId,
       subUnitId: "default",
-      anchorRect: r === "top" ? s[0] : s[s.length - 1],
-      anchorRect$: d,
-      excludeRects: s,
-      excludeRects$: a,
-      direction: r === "top" ? "top" : "bottom"
+      anchorRect: direction === "top" ? bounds[0] : bounds[bounds.length - 1],
+      anchorRect$: position$,
+      excludeRects: bounds,
+      excludeRects$: bounds$,
+      direction: direction === "top" ? "top" : "bottom"
     });
     return {
-      dispose: () => {
-        this._globalPopupManagerService.removePopup(g), a.complete(), c.dispose();
-      }
+      dispose: /* @__PURE__ */ __name(() => {
+        this._globalPopupManagerService.removePopup(id), bounds$.complete(), disposable.dispose();
+      }, "dispose")
     };
   }
-};
-lt = yi([
-  Te(0, I(Gn)),
-  Te(1, W),
-  Te(2, w),
-  Te(3, O)
-], lt);
-var xi = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, Di = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? Pi(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && xi(e, n, r), r;
-}, zt = (t, e) => (n, o) => e(n, o, t);
-let xe = class extends Se {
-  constructor(t, e) {
-    super(), this._instanceSrv = t, this._renderManagerService = e, this._init();
+}, __name(_a12, "DocCanvasPopManagerService"), _a12);
+DocCanvasPopManagerService = __decorateClass$6([
+  __decorateParam$6(0, Inject(ICanvasPopupService)),
+  __decorateParam$6(1, IRenderManagerService),
+  __decorateParam$6(2, IUniverInstanceService),
+  __decorateParam$6(3, ICommandService)
+], DocCanvasPopManagerService);
+var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor, __decorateClass$5 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$5(target, key, result), result;
+}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5"), _a13;
+let DocsRenderService = (_a13 = class extends RxDisposable {
+  constructor(_instanceSrv, _renderManagerService) {
+    super(), this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, this._init();
   }
   _init() {
-    this._renderManagerService.createRender$.pipe(se(this.dispose$)).subscribe((t) => this._createRenderWithId(t)), this._instanceSrv.getTypeOfUnitAdded$(v.UNIVER_DOC).pipe(se(this.dispose$)).subscribe((t) => this._createRenderer(t)), this._instanceSrv.getAllUnitsForType(v.UNIVER_DOC).forEach((t) => this._createRenderer(t)), this._instanceSrv.getTypeOfUnitDisposed$(v.UNIVER_DOC).pipe(se(this.dispose$)).subscribe((t) => this._disposeRenderer(t));
+    this._renderManagerService.createRender$.pipe(takeUntil(this.dispose$)).subscribe((unitId) => this._createRenderWithId(unitId)), this._instanceSrv.getTypeOfUnitAdded$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((doc) => this._createRenderer(doc)), this._instanceSrv.getAllUnitsForType(UniverInstanceType.UNIVER_DOC).forEach((documentModel) => this._createRenderer(documentModel)), this._instanceSrv.getTypeOfUnitDisposed$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((doc) => this._disposeRenderer(doc));
+  }
+  _createRenderer(doc) {
+    const unitId = doc.getUnitId();
+    this._renderManagerService.has(unitId) || (this._createRenderWithId(unitId), this._renderManagerService.setCurrent(unitId));
+  }
+  _createRenderWithId(unitId) {
+    this._renderManagerService.createRender(unitId);
+  }
+  _disposeRenderer(doc) {
+    const unitId = doc.getUnitId();
+    this._renderManagerService.removeRender(unitId);
+  }
+}, __name(_a13, "DocsRenderService"), _a13);
+DocsRenderService = __decorateClass$5([
+  OnLifecycle(LifecycleStages.Ready, DocsRenderService),
+  __decorateParam$5(0, IUniverInstanceService),
+  __decorateParam$5(1, IRenderManagerService)
+], DocsRenderService);
+var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(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$4(target, key, result), result;
+}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4");
+const SKIP_UNIT_IDS$1 = [
+  DEFAULT_EMPTY_DOCUMENT_VALUE,
+  DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY,
+  DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
+  DOCS_ZEN_EDITOR_UNIT_ID_KEY
+];
+var _a14;
+let DocContextMenuRenderController = (_a14 = class extends Disposable {
+  constructor(_context, _contextMenuService, _textSelectionManagerService, _commandService) {
+    super(), this._context = _context, this._contextMenuService = _contextMenuService, this._textSelectionManagerService = _textSelectionManagerService, this._commandService = _commandService, SKIP_UNIT_IDS$1.includes(this._context.unitId) || (this._initPointerDown(), this._initEditChange());
+  }
+  _initPointerDown() {
+    var _a19, _b;
+    const documentsSubscription = ((_b = (_a19 = this._context) == null ? void 0 : _a19.mainComponent) == null ? void 0 : _b.onPointerDown$).subscribeEvent((event) => {
+      event.button === 2 && this._contextMenuService.triggerContextMenu(event, MenuPosition.CONTEXT_MENU);
+    });
+    this.disposeWithMe(documentsSubscription);
   }
-  _createRenderer(t) {
-    const e = t.getUnitId();
-    this._renderManagerService.has(e) || (this._createRenderWithId(e), this._renderManagerService.setCurrent(e));
+  _initEditChange() {
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted((command) => {
+        command.id === RichTextEditingMutation.id && this._contextMenuService.visible && this._contextMenuService.hideContextMenu();
+      })
+    );
   }
-  _createRenderWithId(t) {
-    this._renderManagerService.createRender(t);
+}, __name(_a14, "DocContextMenuRenderController"), _a14);
+DocContextMenuRenderController = __decorateClass$4([
+  __decorateParam$4(1, IContextMenuService),
+  __decorateParam$4(2, Inject(TextSelectionManagerService)),
+  __decorateParam$4(3, ICommandService)
+], DocContextMenuRenderController);
+var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(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$3(target, key, result), result;
+}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3");
+const SKIP_UNIT_IDS = [
+  DEFAULT_EMPTY_DOCUMENT_VALUE,
+  DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY,
+  DOCS_NORMAL_EDITOR_UNIT_ID_KEY
+];
+var _a15;
+let DocResizeRenderController = (_a15 = class extends Disposable {
+  constructor(_context, _docPageLayoutService, _textSelectionManagerService) {
+    super(), this._context = _context, this._docPageLayoutService = _docPageLayoutService, this._textSelectionManagerService = _textSelectionManagerService, SKIP_UNIT_IDS.includes(this._context.unitId) || this._initResize();
+  }
+  _initResize() {
+    this.disposeWithMe(
+      fromEventSubject(this._context.engine.onTransformChange$).pipe(
+        filter((evt) => evt.type === TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize),
+        throttleTime(16)
+      ).subscribe(() => {
+        this._docPageLayoutService.calculatePagePosition(), this._textSelectionManagerService.refreshSelection();
+      })
+    );
   }
-  _disposeRenderer(t) {
-    const e = t.getUnitId();
-    this._renderManagerService.removeRender(e);
+}, __name(_a15, "DocResizeRenderController"), _a15);
+DocResizeRenderController = __decorateClass$3([
+  __decorateParam$3(1, Inject(DocPageLayoutService)),
+  __decorateParam$3(2, Inject(TextSelectionManagerService))
+], DocResizeRenderController);
+var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor, __decorateClass$2 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(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$2(target, key, result), result;
+}, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$2"), _a16;
+let DocHoverManagerService = (_a16 = class extends Disposable {
+  constructor(_univerInstanceService, _renderManagerService) {
+    super();
+    __publicField(this, "_activeCustomRanges$", new BehaviorSubject([]));
+    __publicField(this, "activeCustomRanges$", this._activeCustomRanges$.asObservable());
+    __publicField(this, "_activeIndex$", new BehaviorSubject(null));
+    __publicField(this, "activeIndex$", this._activeIndex$.asObservable());
+    __publicField(this, "_scrolling", !1);
+    this._univerInstanceService = _univerInstanceService, this._renderManagerService = _renderManagerService, this.disposeWithMe(() => {
+      this._activeCustomRanges$.complete(), this._activeIndex$.complete();
+    });
   }
-};
-xe = Di([
-  we(Be.Ready, xe),
-  zt(0, w),
-  zt(1, W)
-], xe);
-var Ai = Object.defineProperty, Ni = Object.getOwnPropertyDescriptor, Fi = (t, e, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? Ni(e, n) : e, i = t.length - 1, s; i >= 0; i--)
-    (s = t[i]) && (r = (o ? s(e, n, r) : s(r)) || r);
-  return o && r && Ai(e, n, r), r;
-}, qe = (t, e) => (n, o) => e(n, o, t), Ie;
-let Yt = (Ie = class extends xn {
-  constructor(t, e, n, o) {
-    super(), this._config = t, this._injector = e, this._renderManagerSrv = n, this._logService = o, this._config = j.deepMerge({}, nr, this._config), this._initDependencies(e), this._initializeCommands();
+  _getTransformCoordForDocumentOffset(document, viewport, evtOffsetX, evtOffsetY) {
+    const { documentTransform } = document.getOffsetConfig(), originCoord = viewport.transformVector2SceneCoord(Vector2.FromArray([evtOffsetX, evtOffsetY]));
+    if (originCoord)
+      return documentTransform.clone().invert().applyPoint(originCoord);
+  }
+  _calcActiveCustomRanges(offsetX, offsetY) {
+    var _a19, _b;
+    const document = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
+    if (!document) {
+      this._activeCustomRanges$.next([]);
+      return;
+    }
+    const currentRender = this._renderManagerService.getRenderById(document.getUnitId());
+    if (!currentRender)
+      return null;
+    const documentComponent = currentRender.mainComponent, skeleton = currentRender.with(DocSkeletonManagerService).getSkeleton(), { pageLayoutType = PageLayoutType.VERTICAL, pageMarginLeft, pageMarginTop, docsLeft, docsTop } = documentComponent.getOffsetConfig(), coord = this._getTransformCoordForDocumentOffset(
+      documentComponent,
+      currentRender.scene.getViewport(VIEWPORT_KEY.VIEW_MAIN),
+      offsetX,
+      offsetY
+    );
+    if (!coord)
+      return;
+    const node = skeleton.findNodeByCoord(
+      coord,
+      pageLayoutType,
+      pageMarginLeft,
+      pageMarginTop
+    );
+    if (node && node.node) {
+      const left = node.node.left + pageMarginLeft, right = node.node.left + node.node.width + pageMarginLeft;
+      if (coord.x < left || coord.x > right) {
+        this._activeIndex$.next(null), this._activeCustomRanges$.next([]);
+        return;
+      }
+      const index = node.node.parent.st + node.node.parent.glyphGroup.indexOf(node.node);
+      index !== this._activeIndex$.value && this._activeIndex$.next(index);
+      const ranges = (_b = (_a19 = document.getCustomRanges()) == null ? void 0 : _a19.filter((range) => range.startIndex <= index && range.endIndex >= index)) != null ? _b : [], currentRanges = this._activeCustomRanges$.value;
+      if (currentRanges.length === ranges.length && currentRanges.every((range, i) => range.rangeId === ranges[i].rangeId))
+        return;
+      this._activeCustomRanges$.next(ranges);
+    }
+  }
+  onMouseMove(evt) {
+    if (this._scrolling)
+      return;
+    const { offsetX, offsetY } = evt;
+    this._calcActiveCustomRanges(offsetX, offsetY);
+  }
+  startScroll() {
+    this._scrolling || (this._scrolling = !0);
+  }
+  endScroll() {
+    this._scrolling = !1;
+  }
+}, __name(_a16, "DocHoverManagerService"), _a16);
+DocHoverManagerService = __decorateClass$2([
+  __decorateParam$2(0, IUniverInstanceService),
+  __decorateParam$2(1, IRenderManagerService)
+], DocHoverManagerService);
+var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(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$1(target, key, result), result;
+}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1"), _a17;
+let DocHoverRenderController = (_a17 = class extends Disposable {
+  constructor(_context, _docHoverManagerService) {
+    super(), this._context = _context, this._docHoverManagerService = _docHoverManagerService, this._initPointerDown(), this._initScroll();
+  }
+  _initPointerDown() {
+    this.disposeWithMe(
+      fromEventSubject(this._context.scene.onPointerMove$).pipe(debounceTime(200)).subscribe((evt) => {
+        this._docHoverManagerService.onMouseMove(evt);
+      })
+    );
+  }
+  _initScroll() {
+    const viewMain = this._context.scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
+    viewMain && (this.disposeWithMe(fromEventSubject(viewMain.onScrollAfter$).pipe(debounceTime(60)).subscribe(() => {
+      this._docHoverManagerService.endScroll();
+    })), this.disposeWithMe(viewMain.onScrollBefore$.subscribeEvent(() => {
+      this._docHoverManagerService.startScroll();
+    })));
+  }
+}, __name(_a17, "DocHoverRenderController"), _a17);
+DocHoverRenderController = __decorateClass$1([
+  __decorateParam$1(1, Inject(DocHoverManagerService))
+], DocHoverRenderController);
+var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(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 && __defProp2(target, key, result), result;
+}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam"), _a18;
+let UniverDocsUIPlugin = (_a18 = class extends Plugin {
+  constructor(_config, _injector, _renderManagerSrv, _logService) {
+    super(), this._config = _config, this._injector = _injector, this._renderManagerSrv = _renderManagerSrv, this._logService = _logService, this._config = Tools.deepMerge({}, DefaultDocUiConfig, this._config), this._initDependencies(_injector), this._initializeCommands();
   }
   onReady() {
-    this._initRenderBasics();
+    this._initRenderBasics(), this._markDocAsFocused();
   }
   onRendered() {
-    this._initUI(), this._initRenderModules(), this._markDocAsFocused();
+    this._initUI(), this._initRenderModules();
   }
   _initializeCommands() {
     [
-      rr,
-      ir,
-      ar,
-      sr,
-      cr,
-      lr,
-      dr,
-      ur,
-      hr,
-      si,
-      ai,
-      ii
-    ].forEach((t) => {
-      this._injector.get(zn).registerShortcut(t);
+      MoveCursorUpShortcut,
+      MoveCursorDownShortcut,
+      MoveCursorRightShortcut,
+      MoveCursorLeftShortcut,
+      MoveSelectionUpShortcut,
+      MoveSelectionDownShortcut,
+      MoveSelectionLeftShortcut,
+      MoveSelectionRightShortcut,
+      SelectAllShortcut,
+      DeleteLeftShortcut,
+      DeleteRightShortcut,
+      BreakLineShortcut
+    ].forEach((shortcut) => {
+      this._injector.get(IShortcutService).registerShortcut(shortcut);
     });
   }
-  _initDependencies(t) {
+  _initDependencies(injector) {
     [
-      [me, { useFactory: () => this._injector.createInstance(me, this._config) }],
-      [Me],
-      [ye],
-      [xe],
-      [_e, { useFactory: () => this._injector.createInstance(_e, this._config) }],
-      [Re, { useClass: nt }],
-      [lt]
-    ].forEach((n) => t.add(n));
+      [DocUIController, { useFactory: /* @__PURE__ */ __name(() => this._injector.createInstance(DocUIController, this._config), "useFactory") }],
+      [DocClipboardController],
+      [DocEditorBridgeController],
+      [DocsRenderService],
+      [AppUIController, { useFactory: /* @__PURE__ */ __name(() => this._injector.createInstance(AppUIController, this._config), "useFactory") }],
+      [IDocClipboardService, { useClass: DocClipboardService }],
+      [DocCanvasPopManagerService],
+      [DocHoverManagerService]
+    ].forEach((d) => injector.add(d));
   }
   _markDocAsFocused() {
-    const t = this._injector.get(w), e = this._injector.get(ee);
+    const currentService = this._injector.get(IUniverInstanceService), editorService = this._injector.get(IEditorService);
     try {
-      const n = t.getCurrentUnitForType(v.UNIVER_DOC);
-      if (!n) return;
-      const o = n.getUnitId();
-      e.isEditor(o) || t.focusUnit(n.getUnitId());
-    } catch (n) {
-      this._logService.warn(n);
+      const doc = currentService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
+      if (!doc) return;
+      const id = doc.getUnitId();
+      editorService.isEditor(id) || currentService.focusUnit(doc.getUnitId());
+    } catch (err) {
+      this._logService.warn(err);
     }
   }
   _initUI() {
-    this._injector.get(_e);
+    this._injector.get(AppUIController);
   }
   _initRenderBasics() {
     [
-      [L],
-      [Ro],
-      [st],
-      [at]
-    ].forEach((t) => {
-      this._renderManagerSrv.registerRenderModule(v.UNIVER_DOC, t);
+      [DocSkeletonManagerService],
+      [DocInterceptorService],
+      [DocPageLayoutService],
+      [DocRenderController],
+      [DocZoomRenderController]
+    ].forEach((m2) => {
+      this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, m2);
     });
   }
   _initRenderModules() {
     [
-      [ot],
-      [ct],
-      [it]
-    ].forEach((t) => {
-      this._renderManagerSrv.registerRenderModule(v.UNIVER_DOC, t);
+      [DocBackScrollRenderController],
+      [DocTextSelectionRenderController],
+      [DocHeaderFooterController],
+      [DocResizeRenderController],
+      [DocHoverRenderController],
+      [DocContextMenuRenderController]
+    ].forEach((m2) => {
+      this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, m2);
     });
   }
-}, T(Ie, "pluginName", or), T(Ie, "type", v.UNIVER_DOC), Ie);
-Yt = Fi([
-  qe(1, I($e)),
-  qe(2, W),
-  qe(3, Zt)
-], Yt);
-function zi(t) {
+}, __name(_a18, "UniverDocsUIPlugin"), __publicField(_a18, "pluginName", DOC_UI_PLUGIN_NAME), __publicField(_a18, "type", UniverInstanceType.UNIVER_DOC), _a18);
+UniverDocsUIPlugin = __decorateClass([
+  __decorateParam(1, Inject(Injector)),
+  __decorateParam(2, IRenderManagerService),
+  __decorateParam(3, ILogService)
+], UniverDocsUIPlugin);
+function docDrawingPositionToTransform(position) {
   return {
-    left: t.positionH.posOffset,
-    top: t.positionV.posOffset,
-    width: t.size.width,
-    height: t.size.height
+    left: position.positionH.posOffset,
+    top: position.positionV.posOffset,
+    width: position.size.width,
+    height: position.size.height
   };
 }
-function Yi(t, e = 0, n = 0) {
+__name(docDrawingPositionToTransform, "docDrawingPositionToTransform");
+function transformToDocDrawingPosition(transform, marginLeft = 0, marginTop = 0) {
   return {
     size: {
-      width: t.width,
-      height: t.height
+      width: transform.width,
+      height: transform.height
     },
     positionH: {
-      relativeFrom: Pn.MARGIN,
-      posOffset: (t.left || 0) - e
+      relativeFrom: ObjectRelativeFromH.MARGIN,
+      posOffset: (transform.left || 0) - marginLeft
     },
     positionV: {
-      relativeFrom: Dn.PAGE,
-      posOffset: (t.top || 0) - n
+      relativeFrom: ObjectRelativeFromV.PAGE,
+      posOffset: (transform.top || 0) - marginTop
     },
-    angle: t.angle || 0
+    angle: transform.angle || 0
   };
 }
+__name(transformToDocDrawingPosition, "transformToDocDrawingPosition");
 export {
-  or as DOC_UI_PLUGIN_NAME,
-  tr as DefaultDocContainerConfig,
-  nr as DefaultDocUiConfig,
-  er as DefaultToolbarConfig,
-  ot as DocBackScrollRenderController,
-  lt as DocCanvasPopManagerService,
-  ci as DocCopyCommand,
-  li as DocCutCommand,
-  di as DocPasteCommand,
-  st as DocRenderController,
-  xe as DocsRenderService,
-  Re as IDocClipboardService,
-  jo as PastePluginLark,
-  zo as PastePluginUniver,
-  ko as PastePluginWord,
-  Yt as UniverDocsUIPlugin,
-  zi as docDrawingPositionToTransform,
-  Yi as transformToDocDrawingPosition,
-  k as whenDocAndEditorFocused
+  DOC_UI_PLUGIN_NAME,
+  DefaultDocContainerConfig,
+  DefaultDocUiConfig,
+  DefaultToolbarConfig,
+  DocBackScrollRenderController,
+  DocCanvasPopManagerService,
+  DocCopyCommand,
+  DocCutCommand,
+  DocHoverManagerService,
+  DocPasteCommand,
+  DocRenderController,
+  DocsRenderService,
+  IDocClipboardService,
+  PastePluginLark,
+  PastePluginUniver,
+  PastePluginWord,
+  UniverDocsUIPlugin,
+  docDrawingPositionToTransform,
+  transformToDocDrawingPosition,
+  whenDocAndEditorFocused
 };