@univerjs/docs-ui 0.1.16 → 0.2.0

package/lib/es/index.js

@@ -1,216 +1,767 @@
-var jt = Object.defineProperty;
-var Wt = (i, e, t) => e in i ? jt(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
-var g = (i, e, t) => Wt(i, typeof e != "symbol" ? e + "" : e, t);
-import { FOCUSING_DOC as xe, FOCUSING_UNIVER_EDITOR as Ze, FOCUSING_COMMON_DRAWINGS as bt, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE as zt, Direction as w, EDITOR_ACTIVATED as Mt, LocaleService as qe, RxDisposable as de, ICommandService as v, BooleanNumber as C, UniverInstanceType as f, BaselineOffset as K, ThemeService as yt, HorizontalAlign as De, IUniverInstanceService as P, Disposable as k, OnLifecycle as U, LifecycleStages as A, Tools as Je, LRUMap as kt, ColorKit as st, toDisposable as B, ILogService as Et, CommandType as Qe, IContextService as Ht, checkForSubstrings as Yt, IConfigService as Gt, PositionedObjectLayoutType as Xt, DEFAULT_DOCUMENT_SUB_COMPONENT_ID as Kt, DisposableCollection as Zt, Plugin as qt, ObjectRelativeFromH as Jt, ObjectRelativeFromV as Qt } from "@univerjs/core";
-import { Inject as O, Injector as Pe, Optional as en, createIdentifier as tn } from "@wendellhu/redi";
-import { KeyCode as E, MetaKeys as ue, ILayoutService as xt, MenuGroup as I, MenuItemType as T, MenuPosition as b, getMenuHiddenObservable as M, FONT_FAMILY_LIST as at, FONT_SIZE_LIST as nn, FontFamily as rn, FontFamilyItem as on, FontSize as sn, BuiltInUIPart as an, ComponentManager as cn, IEditorService as L, IMenuService as ln, IUIPartsService as dn, PLAIN_TEXT_CLIPBOARD_MIME_TYPE as un, HTML_CLIPBOARD_MIME_TYPE as hn, IClipboardInterfaceService as et, CopyCommand as pn, CutCommand as _n, PasteCommand as gn, SetEditorResizeOperation as fn, ICanvasPopupService as mn, IShortcutService as Sn } from "@univerjs/ui";
-import { MoveCursorOperation as Ne, MoveSelectionOperation as Ue, SelectAllOperation as vn, SetInlineFormatBoldCommand as Cn, SetTextSelectionsOperation as x, SetInlineFormatCommand as q, SetInlineFormatItalicCommand as On, SetInlineFormatUnderlineCommand as Rn, SetInlineFormatStrikethroughCommand as Tn, SetInlineFormatSubscriptCommand as In, SetInlineFormatSuperscriptCommand as bn, SetInlineFormatFontFamilyCommand as ct, SetInlineFormatFontSizeCommand as lt, SetInlineFormatTextColorCommand as dt, AlignLeftCommand as Mn, AlignOperationCommand as Ae, AlignCenterCommand as yn, AlignRightCommand as En, AlignJustifyCommand as xn, OrderListCommand as Dn, BulletListCommand as Pn, ResetInlineFormatTextBackgroundColorCommand as Nn, SetInlineFormatTextBackgroundColorCommand as He, TextSelectionManagerService as J, BreakLineCommand as Un, DeleteLeftCommand as An, DeleteRightCommand as Ln, CutContentCommand as Dt, InnerPasteCommand as Pt, VIEWPORT_KEY as Q, CoverContentCommand as $n, RichTextEditingMutation as tt, DocSkeletonManagerService as ee, DOCS_VIEW_KEY as X, DOCS_COMPONENT_MAIN_LAYER_INDEX as We, DOCS_COMPONENT_HEADER_LAYER_INDEX as Bn, DOCS_COMPONENT_DEFAULT_Z_INDEX as ut, DOCS_COMPONENT_BACKGROUND_LAYER_INDEX as wn, SetDocZoomRatioOperation as Le, SetDocZoomRatioCommand as Fn, getDocObject as Nt, getDocObjectById as Vn } from "@univerjs/docs";
-import { connectInjector as jn } from "@wendellhu/redi/react-bindings";
-import { ITextSelectionRenderManager as he, pixelToPt as Wn, ptToPixel as ht, ScrollBar as Ye, IRenderManagerService as F, PageLayoutType as pt, Viewport as zn, EVENT_TYPE as kn, Layer as _t, Documents as Hn, DocBackground as Yn, Liquid as Gn, CURSOR_TYPE as gt, NodePositionConvertToCursor as Xn, getAnchorBounding as Kn } from "@univerjs/engine-render";
-import Zn from "react";
-import { Observable as y, takeUntil as le, fromEvent as ft, BehaviorSubject as Ut } from "rxjs";
-import { ColorPicker as qn } from "@univerjs/design";
-const Jn = {
-  undo: !0,
-  redo: !0,
-  // Undo redo
-  font: !0,
-  // 'font'
-  fontSize: !0,
-  // 'Font size'
-  bold: !0,
-  // 'Bold (Ctrl+B)'
-  italic: !0,
-  // 'Italic (Ctrl+I)'
-  strikethrough: !0,
-  // 'Strikethrough (Alt+Shift+5)'
-  underline: !0,
-  // 'Underline (Alt+Shift+6)'
-  textColor: !0,
-  // 'Text color'
-  fillColor: !0,
-  // 'Cell color'
-  horizontalAlignMode: !0,
-  // 'Horizontal alignment'
-  verticalAlignMode: !0,
-  // 'Vertical alignment'
-  textWrapMode: !0,
-  // 'Wrap mode'
-  textRotateMode: !0
-  // 'Text Rotation Mode'
-}, Qn = {
-  outerLeft: !1,
-  outerRight: !1,
-  header: !0,
-  footer: !0,
-  innerLeft: !1,
-  innerRight: !1,
-  frozenHeaderLT: !1,
-  frozenHeaderRT: !1,
-  frozenHeaderLM: !1,
-  frozenContent: !1,
-  infoBar: !0,
-  toolbar: !0
-}, ei = {
-  layout: {
-    docContainerConfig: Qn,
-    toolbarConfig: Jn
-  }
-}, ti = "DocUI";
-function N(i) {
-  return i.getContextValue(xe) && i.getContextValue(Ze) && !i.getContextValue(bt);
+var vn = Object.defineProperty;
+var On = (n, e, t) => e in n ? vn(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var E = (n, e, t) => On(n, typeof e != "symbol" ? e + "" : e, t);
+import { FOCUSING_DOC as Ne, FOCUSING_UNIVER_EDITOR as ht, FOCUSING_COMMON_DRAWINGS as Kt, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE as Rn, Tools as ee, LRUMap as Cn, BaselineOffset as ae, BooleanNumber as S, ColorKit as St, skipParseTagNames as En, IUniverInstanceService as L, ILogService as Zt, ICommandService as C, Disposable as K, normalizeBody as Tn, toDisposable as qt, RxDisposable as Oe, Direction as Z, EDITOR_ACTIVATED as Jt, LocaleService as le, CommandType as de, DocumentFlavor as In, JSONX as et, UniverInstanceType as v, ThemeService as Qt, HorizontalAlign as Le, OnLifecycle as Ue, LifecycleStages as we, IContextService as bn, checkForSubstrings as Mn, IConfigService as xn, PositionedObjectLayoutType as yn, DEFAULT_DOCUMENT_SUB_COMPONENT_ID as Pn, DisposableCollection as vt, Plugin as Dn, ObjectRelativeFromH as An, ObjectRelativeFromV as Fn } from "@univerjs/core";
+import { IClipboardInterfaceService as gt, PLAIN_TEXT_CLIPBOARD_MIME_TYPE as Nn, HTML_CLIPBOARD_MIME_TYPE as Ln, IEditorService as Y, KeyCode as H, MetaKeys as Re, ILayoutService as en, ISidebarService as Un, ComponentManager as tn, MenuGroup as P, MenuItemType as x, MenuPosition as D, getMenuHiddenObservable as A, FONT_FAMILY_LIST as Ot, FONT_SIZE_LIST as wn, getHeaderFooterMenuHiddenObservable as Bn, FontFamily as $n, FontFamilyItem as Hn, FontSize as Vn, BuiltInUIPart as jn, IMenuService as Wn, IUIPartsService as kn, CopyCommand as zn, CutCommand as Gn, PasteCommand as Yn, SetEditorResizeOperation as Xn, ICanvasPopupService as Kn, IShortcutService as Zn } from "@univerjs/ui";
+import { createIdentifier as qn, Inject as T, Injector as Be, Optional as Jn } from "@wendellhu/redi";
+import { TextSelectionManagerService as ne, CutContentCommand as nn, InnerPasteCommand as on, getDeleteSelection as Qn, DocSkeletonManagerService as N, VIEWPORT_KEY as te, getDocObject as eo, MoveCursorOperation as $e, MoveSelectionOperation as He, SelectAllOperation as to, neoGetDocObject as Q, RichTextEditingMutation as Ve, SetInlineFormatBoldCommand as no, SetTextSelectionsOperation as V, SetInlineFormatCommand as ue, SetInlineFormatItalicCommand as oo, SetInlineFormatUnderlineCommand as io, SetInlineFormatStrikethroughCommand as ro, SetInlineFormatSubscriptCommand as so, SetInlineFormatSuperscriptCommand as ao, SetInlineFormatFontFamilyCommand as Rt, SetInlineFormatFontSizeCommand as Ct, SetInlineFormatTextColorCommand as Et, AlignLeftCommand as co, AlignOperationCommand as je, AlignCenterCommand as lo, AlignRightCommand as uo, AlignJustifyCommand as ho, OrderListCommand as go, BulletListCommand as po, ResetInlineFormatTextBackgroundColorCommand as _o, SetInlineFormatTextBackgroundColorCommand as tt, BreakLineCommand as fo, DeleteLeftCommand as mo, DeleteRightCommand as So, CoverContentCommand as vo, DOCS_COMPONENT_MAIN_LAYER_INDEX as Ye, DOCS_COMPONENT_HEADER_LAYER_INDEX as Oo, DOCS_VIEW_KEY as ie, DOCS_COMPONENT_DEFAULT_Z_INDEX as Tt, DOCS_COMPONENT_BACKGROUND_LAYER_INDEX as Ro, SetDocZoomRatioOperation as ve, SetDocZoomRatioCommand as Co, DocInterceptorService as Eo } from "@univerjs/docs";
+import { pixelToPt as To, ptToPixel as It, NodePositionConvertToCursor as rn, getAnchorBounding as Io, IRenderManagerService as k, ITextSelectionRenderManager as oe, Shape as bo, DocumentEditArea as F, PageLayoutType as De, Vector2 as sn, Rect as Xe, Path as bt, ScrollBar as nt, Viewport as Mo, Layer as Mt, Documents as xo, DocBackground as yo, Liquid as Po, CURSOR_TYPE as xt, getLineBounding as Do } from "@univerjs/engine-render";
+import { takeUntil as se, Observable as w, combineLatest as Ao, fromEvent as yt, BehaviorSubject as Pt, map as Fo } from "rxjs";
+import { useDependency as G, connectInjector as No } from "@wendellhu/redi/react-bindings";
+import Lo, { useState as an, useEffect as cn } from "react";
+import { Checkbox as Dt, InputNumber as At, Button as Uo, ColorPicker as wo } from "@univerjs/design";
+import Bo from "clsx";
+function z(n) {
+  return n.getContextValue(Ne) && n.getContextValue(ht) && !n.getContextValue(Kt);
 }
-function ni(i) {
-  return i.getContextValue(xe) && i.getContextValue(Ze) && !i.getContextValue(zt) && !i.getContextValue(bt);
+function $o(n) {
+  return n.getContextValue(Ne) && n.getContextValue(ht) && !n.getContextValue(Rn) && !n.getContextValue(Kt);
 }
-const ii = {
-  id: Ne.id,
-  binding: E.ARROW_UP,
-  preconditions: N,
-  staticParameters: {
-    direction: w.UP
-  }
-}, ri = {
-  id: Ne.id,
-  binding: E.ARROW_DOWN,
-  preconditions: N,
-  staticParameters: {
-    direction: w.DOWN
+const Ho = 10, Vo = 6;
+function jo() {
+  return ee.generateRandomId(Vo);
+}
+function Wo(n) {
+  const e = n.match(/data-copy-id="([^\s]+)"/);
+  return e && e[1] ? e[1] : null;
+}
+class ko {
+  constructor() {
+    E(this, "_cache", new Cn(Ho));
   }
-}, oi = {
-  id: Ne.id,
-  binding: E.ARROW_LEFT,
-  preconditions: N,
-  staticParameters: {
-    direction: w.LEFT
+  set(e, t) {
+    this._cache.set(e, t);
   }
-}, si = {
-  id: Ne.id,
-  binding: E.ARROW_RIGHT,
-  preconditions: N,
-  staticParameters: {
-    direction: w.RIGHT
+  get(e) {
+    return this._cache.get(e);
   }
-}, ai = {
-  id: Ue.id,
-  binding: E.ARROW_UP | ue.SHIFT,
-  preconditions: N,
-  staticParameters: {
-    direction: w.UP
+  clear() {
+    this._cache.clear();
   }
-}, ci = {
-  id: Ue.id,
-  binding: E.ARROW_DOWN | ue.SHIFT,
-  preconditions: N,
-  staticParameters: {
-    direction: w.DOWN
+}
+const Ft = new ko();
+function pt(n) {
+  const e = n.style, t = {}, o = n.tagName.toLowerCase();
+  switch (o) {
+    case "b":
+    case "em":
+    case "strong": {
+      t.bl = S.TRUE;
+      break;
+    }
+    case "s": {
+      t.st = {
+        s: S.TRUE
+      };
+      break;
+    }
+    case "u": {
+      t.ul = {
+        s: S.TRUE
+      };
+      break;
+    }
+    case "i": {
+      t.it = S.TRUE;
+      break;
+    }
+    case "sub":
+    case "sup": {
+      t.va = o === "sup" ? ae.SUPERSCRIPT : ae.SUBSCRIPT;
+      break;
+    }
   }
-}, li = {
-  id: Ue.id,
-  binding: E.ARROW_LEFT | ue.SHIFT,
-  preconditions: N,
-  staticParameters: {
-    direction: w.LEFT
+  for (let i = 0; i < e.length; i++) {
+    const r = e[i], s = e.getPropertyValue(r);
+    switch (r) {
+      case "font-family": {
+        t.ff = s;
+        break;
+      }
+      case "font-size": {
+        const a = Number.parseInt(s);
+        Number.isNaN(a) || (s.endsWith("pt") ? t.fs = a : s.endsWith("px") && (t.fs = To(a)));
+        break;
+      }
+      case "font-style": {
+        s === "italic" && (t.it = S.TRUE);
+        break;
+      }
+      case "font-weight": {
+        (Number(s) > 400 || String(s) === "bold") && (t.bl = S.TRUE);
+        break;
+      }
+      case "text-decoration": {
+        /underline/.test(s) ? t.ul = {
+          s: S.TRUE
+        } : /overline/.test(s) ? t.ol = {
+          s: S.TRUE
+        } : /line-through/.test(s) && (t.st = {
+          s: S.TRUE
+        });
+        break;
+      }
+      case "color": {
+        const a = new St(s);
+        a.isValid && (t.cl = {
+          rgb: a.toRgbString()
+        });
+        break;
+      }
+      case "background-color": {
+        const a = new St(s);
+        a.isValid && (t.bg = {
+          rgb: a.toRgbString()
+        });
+        break;
+      }
+    }
   }
-}, di = {
-  id: Ue.id,
-  binding: E.ARROW_RIGHT | ue.SHIFT,
-  preconditions: N,
-  staticParameters: {
-    direction: w.RIGHT
+  return t;
+}
+function zo(n) {
+  const e = new DOMParser(), t = `<x-univer id="univer-root">${n}</x-univer>`;
+  return e.parseFromString(t, "text/html").querySelector("#univer-root");
+}
+function Nt(n, e) {
+  const t = n.tagName.toLowerCase();
+  return typeof e == "string" ? t === e : Array.isArray(e) ? e.some((o) => o === t) : e(n);
+}
+const Fe = class Fe {
+  constructor() {
+    E(this, "_styleCache", /* @__PURE__ */ new Map());
+    E(this, "_styleRules", []);
+    E(this, "_afterProcessRules", []);
   }
-}, ui = {
-  id: vn.id,
-  binding: E.A | ue.CTRL_COMMAND,
-  preconditions: (i) => i.getContextValue(Ze) && (i.getContextValue(xe) || i.getContextValue(Mt))
-};
-var hi = Object.defineProperty, pi = Object.getOwnPropertyDescriptor, _i = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? pi(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && hi(e, t, r), r;
-}, mt = (i, e) => (t, n) => e(t, n, i);
-let Ge = class {
-  constructor(i, e, t) {
-    g(this, "_docContainer");
-    // 获取SheetContainer组件
-    g(this, "getComponent", (i) => {
-      if (this._docContainer = i, !i.getContentRef().current)
-        throw new Error("container is not ready");
-    });
-    /**
-     * Change language
-     * @param {string} lang new language
-     *
-     * e: {target: HTMLSelectElement } reference from  https://stackoverflow.com/a/48443771
-     *
-     */
-    g(this, "changeLocale", (i) => {
-      this._localeService.setLocale(i);
-    });
-    this._config = i, this._localeService = e, this._injector = t;
+  static use(e) {
+    if (this._pluginList.includes(e))
+      throw new Error(`Univer paste plugin ${e.name} already added`);
+    this._pluginList.push(e);
   }
-  getUIConfig() {
-    return {
-      injector: this._injector,
-      config: this._config,
-      changeLocale: this.changeLocale,
-      getComponent: this.getComponent
+  convert(e) {
+    const t = Fe._pluginList.find((r) => r.checkPasteType(e)), o = zo(e), i = {
+      dataStream: "",
+      textRuns: []
     };
+    return t && (this._styleRules = [...t.stylesRules], this._afterProcessRules = [...t.afterProcessRules]), this._styleCache.clear(), this._process(null, o == null ? void 0 : o.childNodes, i), this._styleCache.clear(), this._styleRules = [], this._afterProcessRules = [], i;
+  }
+  _process(e, t, o) {
+    var i, r;
+    for (const s of t)
+      if (s.nodeType === Node.TEXT_NODE) {
+        if (((i = s.nodeValue) == null ? void 0 : i.trim()) === "")
+          continue;
+        const a = (r = s.nodeValue) == null ? void 0 : r.replace(/[\r\n]/g, "");
+        let c;
+        e && this._styleCache.has(e) && (c = this._styleCache.get(e)), o.dataStream += a, c && Object.getOwnPropertyNames(c).length && o.textRuns.push({
+          st: o.dataStream.length - a.length,
+          ed: o.dataStream.length,
+          ts: c
+        });
+      } else {
+        if (En.includes(s.nodeName.toLowerCase()))
+          continue;
+        if (s.nodeType === Node.ELEMENT_NODE) {
+          const a = e ? this._styleCache.get(e) : {}, c = this._styleRules.find(({ filter: h }) => Nt(s, h)), d = c ? c.getStyle(s) : pt(s);
+          this._styleCache.set(s, { ...a, ...d });
+          const { childNodes: p } = s;
+          this._process(s, p, o);
+          const g = this._afterProcessRules.find(
+            ({ filter: h }) => Nt(s, h)
+          );
+          g && g.handler(o, s);
+        }
+      }
   }
-  getContentRef() {
-    return this._docContainer.getContentRef();
+};
+E(Fe, "_pluginList", []);
+let ce = Fe;
+const Go = {
+  name: "univer-doc-paste-plugin-lark",
+  checkPasteType(n) {
+    return /lark-record-clipboard/i.test(n);
+  },
+  // TODO: @JOCS, support inline code copy from lark.
+  stylesRules: [
+    {
+      filter: ["s"],
+      getStyle(n) {
+        const e = pt(n);
+        return {
+          st: {
+            s: S.TRUE
+          },
+          ...e
+        };
+      }
+    }
+  ],
+  afterProcessRules: [
+    {
+      filter(n) {
+        return n.tagName === "DIV" && /ace-line/i.test(n.className);
+      },
+      handler(n) {
+        n.paragraphs == null && (n.paragraphs = []), n.paragraphs.push({
+          startIndex: n.dataStream.length
+        }), n.dataStream += "\r";
+      }
+    }
+  ]
+}, Yo = Go;
+function ln(n) {
+  const e = n.style, t = {};
+  for (let o = 0; o < e.length; o++) {
+    const i = e[o], r = e.getPropertyValue(i);
+    switch (i) {
+      case "margin-top": {
+        const s = Number.parseInt(r);
+        t.spaceAbove = /pt/.test(r) ? It(s) : s;
+        break;
+      }
+      case "margin-bottom": {
+        const s = Number.parseInt(r);
+        t.spaceBelow = /pt/.test(r) ? It(s) : s;
+        break;
+      }
+      case "line-height": {
+        const s = Number.parseFloat(r);
+        t.lineSpacing = s;
+        break;
+      }
+    }
   }
-  UIDidMount(i) {
-    if (this._docContainer)
-      return i(this._docContainer);
+  return Object.getOwnPropertyNames(t).length ? t : null;
+}
+const Xo = {
+  name: "univer-doc-paste-plugin-word",
+  checkPasteType(n) {
+    return /word|mso/i.test(n);
+  },
+  stylesRules: [
+    {
+      filter: ["b"],
+      getStyle(n) {
+        const e = pt(n);
+        return { bl: S.TRUE, ...e };
+      }
+    }
+  ],
+  afterProcessRules: [
+    {
+      filter(n) {
+        return n.tagName === "P";
+      },
+      handler(n, e) {
+        n.paragraphs == null && (n.paragraphs = []);
+        const t = {
+          startIndex: n.dataStream.length
+        }, o = ln(e);
+        o && (t.paragraphStyle = o), n.paragraphs.push(t), n.dataStream += "\r";
+      }
+    }
+  ]
+}, Ko = Xo, Zo = {
+  name: "univer-doc-paste-plugin-univer",
+  checkPasteType(n) {
+    return /UniverNormal/i.test(n);
+  },
+  stylesRules: [],
+  afterProcessRules: [
+    {
+      filter(n) {
+        return n.tagName === "P" && /UniverNormal/i.test(n.className);
+      },
+      handler(n, e) {
+        n.paragraphs == null && (n.paragraphs = []);
+        const t = {
+          startIndex: n.dataStream.length
+        }, o = ln(e);
+        o && (t.paragraphStyle = o), n.paragraphs.push(t), n.dataStream += "\r";
+      }
+    }
+  ]
+}, qo = Zo;
+function Lt(n, e) {
+  const { st: t, ed: o, ts: i = {} } = e, { ff: r, fs: s, it: a, bl: c, ul: d, st: p, ol: g, bg: h, cl: l, va: f } = i;
+  let u = n.slice(t, 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>`), (p == null ? void 0 : p.s) === S.TRUE && (u = `<s>${u}</s>`), c === S.TRUE && (u = `<strong>${u}</strong>`), r && _.push(`font-family: ${r}`), l && _.push(`color: ${l.rgb}`), s && _.push(`font-size: ${s}pt`), g && _.push("text-decoration: overline"), h && _.push(`background: ${h.rgb}`), _.length ? `<span style="${_.join("; ")};">${u}</span>` : u;
+}
+function Ke(n, e, t) {
+  const { dataStream: o, textRuns: i = [] } = n;
+  let r = e;
+  const s = [];
+  for (const a of i) {
+    const { st: c, ed: d } = a;
+    ee.hasIntersectionBetweenTwoRanges(e, t, c, d) && (c > r ? (s.push(o.slice(r, c)), s.push(Lt(o, {
+      ...a,
+      ed: Math.min(d, t)
+    }))) : s.push(Lt(o, {
+      ...a,
+      st: r,
+      ed: Math.min(d, t)
+    }))), r = Math.max(e, Math.min(d, t));
   }
-  getDocContainer() {
-    return this._docContainer;
+  return r !== t && s.push(o.slice(r, t)), s.join("");
+}
+function Ut(n, e = !0) {
+  var t;
+  if (e && ((t = n.paragraphs) != null && t.length)) {
+    const { dataStream: o, paragraphs: i = [] } = n;
+    let r = "", s = -1;
+    for (const a of i) {
+      const { startIndex: c, paragraphStyle: d = {} } = a, { spaceAbove: p, spaceBelow: g, lineSpacing: h } = d, l = [];
+      p != null && (typeof p == "number" ? l.push(`margin-top: ${p}px`) : l.push(`margin-top: ${p.v}px`)), g != null && (typeof g == "number" ? l.push(`margin-bottom: ${g}px`) : l.push(`margin-bottom: ${g.v}px`)), h != null && l.push(`line-height: ${h}`), c > s + 1 ? r += `<p class="UniverNormal" ${l.length ? `style="${l.join("; ")};"` : ""}>${Ke(n, s + 1, c)}</p>` : r += `<p class="UniverNormal" ${l.length ? `style="${l.join("; ")};"` : ""}></p>`, s = c;
+    }
+    return s !== o.length && (r += Ke(n, s, o.length)), r;
+  } else
+    return Ke(n, 0, n.dataStream.length);
+}
+class Jo {
+  convert(e) {
+    if (e.length === 0)
+      throw new Error("The bodyList length at least to be 1");
+    if (e.length === 1)
+      return Ut(e[0]);
+    let t = "";
+    for (const o of e)
+      t += '<p className="UniverNormal">', t += Ut(o, !1), t += "</p>";
+    return t;
   }
-};
-Ge = _i([
-  mt(1, O(qe)),
-  mt(2, O(Pe))
-], Ge);
-var gi = Object.defineProperty, fi = Object.getOwnPropertyDescriptor, mi = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? fi(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && gi(e, t, r), r;
-}, _e = (i, e) => (t, n) => e(t, n, i);
-let ae = class extends de {
-  constructor(e, t, n, r, o) {
+}
+var Qo = Object.defineProperty, ei = Object.getOwnPropertyDescriptor, ti = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? ei(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && Qo(e, t, i), i;
+}, he = (n, e) => (t, o) => e(t, o, n);
+ce.use(Ko);
+ce.use(Yo);
+ce.use(qo);
+function ni(n) {
+  const e = n.replace(/\n/g, "\r"), t = [];
+  for (let o = 0; o < e.length; o++)
+    e[o] === "\r" && t.push({ startIndex: o });
+  return {
+    dataStream: e,
+    paragraphs: t
+  };
+}
+const Ce = qn("doc.clipboard-service");
+let ot = class extends K {
+  constructor(e, t, o, i, r) {
     super();
-    g(this, "_docContainerController");
-    /**
-     * Change language
-     * @param {string} locale new language
-     *
-     * e: {target: HTMLSelectElement } reference from  https://stackoverflow.com/a/48443771
-     *
-     */
-    g(this, "changeLocale", (e) => {
-      this._localeService.setLocale(e);
-    });
-    this._localeService = t, this._injector = n, this._textSelectionRenderManager = r, this._layoutService = o, this._docContainerController = this._injector.createInstance(Ge, e), this._registerContainer();
+    E(this, "_clipboardHooks", []);
+    E(this, "_htmlToUDM", new ce());
+    E(this, "_umdToHtml", new Jo());
+    this._univerInstanceService = e, this._logService = t, this._commandService = o, this._clipboardInterfaceService = i, this._textSelectionManagerService = r;
   }
-  _registerContainer() {
-    this._layoutService && this.disposeWithMe(
-      // the content editable div should be regarded as part of the applications container
-      this._layoutService.registerContainerElement(this._textSelectionRenderManager.__getEditorContainer())
-    );
+  async copy() {
+    const e = this._getDocumentBodyInRanges();
+    if (e.length === 0)
+      return !1;
+    try {
+      const t = this._textSelectionManagerService.getActiveRange(), o = !!(t != null && t.segmentId);
+      this._setClipboardData(e, !o);
+    } catch (t) {
+      return this._logService.error("[DocClipboardService] copy failed", t), !1;
+    }
+    return !0;
+  }
+  async cut() {
+    return this._cut();
+  }
+  async paste(e) {
+    const t = await this._generateBodyFromClipboardItems(e);
+    return this._paste(t);
+  }
+  async legacyPaste(e, t) {
+    const o = this._generateBodyFromHtmlAndText(e, t);
+    return this._paste(o);
+  }
+  async _cut() {
+    var r;
+    const {
+      segmentId: e,
+      endOffset: t,
+      style: o
+    } = (r = this._textSelectionManagerService.getActiveRange()) != null ? r : {}, i = this._textSelectionManagerService.getSelections();
+    if (e == null && this._logService.error("[DocClipboardController] segmentId is not existed"), t == null || i == null)
+      return !1;
+    this.copy();
+    try {
+      let s = t;
+      for (const c of i) {
+        const { startOffset: d, endOffset: p } = c;
+        d == null || p == null || p <= t && (s -= p - d);
+      }
+      const a = [
+        {
+          startOffset: s,
+          endOffset: s,
+          style: o
+        }
+      ];
+      return this._commandService.executeCommand(nn.id, { segmentId: e, textRanges: a });
+    } catch {
+      return this._logService.error("[DocClipboardController] cut content failed"), !1;
+    }
+  }
+  async _paste(e) {
+    let t = Tn(e);
+    this._clipboardHooks.forEach((c) => {
+      c.onBeforePaste && (t = c.onBeforePaste(t));
+    });
+    const o = this._textSelectionManagerService.getActiveRange(), { segmentId: i, endOffset: r, style: s } = o || {}, a = this._textSelectionManagerService.getSelections();
+    if (i == null && this._logService.error("[DocClipboardController] segmentId does not exist!"), r == null || a == null)
+      return !1;
+    try {
+      let c = r;
+      for (const p of a) {
+        const { startOffset: g, endOffset: h } = p;
+        g == null || h == null || h <= r && (c += t.dataStream.length - (h - g));
+      }
+      const d = [
+        {
+          startOffset: c,
+          endOffset: c,
+          style: s
+        }
+      ];
+      return this._commandService.executeCommand(on.id, { body: t, segmentId: i, textRanges: d });
+    } catch {
+      return this._logService.error("[DocClipboardController]", "clipboard is empty."), !1;
+    }
+  }
+  async _setClipboardData(e, t = !0) {
+    const o = jo(), i = e.length > 1 ? e.map((s) => s.dataStream).join(`
+`) : e[0].dataStream;
+    let r = this._umdToHtml.convert(e);
+    return e.length === 1 && t && (r = r.replace(/(<[a-z]+)/, (s, a) => `${a} data-copy-id="${o}"`), Ft.set(o, e[0])), this._clipboardInterfaceService.write(i, r);
+  }
+  addClipboardHook(e) {
+    return this._clipboardHooks.push(e), qt(() => {
+      const t = this._clipboardHooks.indexOf(e);
+      t > -1 && this._clipboardHooks.splice(t, 1);
+    });
+  }
+  _getDocumentBodyInRanges() {
+    const e = this._textSelectionManagerService.getSelections(), t = this._textSelectionManagerService.getActiveRange(), o = this._univerInstanceService.getCurrentUniverDocInstance(), i = [], r = o == null ? void 0 : o.getBody();
+    if (e == null || o == null || r == null || t == null)
+      return i;
+    const { segmentId: s } = t;
+    for (const a of e) {
+      const { startOffset: c, endOffset: d, collapsed: p } = a;
+      if (p || c == null || d == null)
+        continue;
+      const g = Qn({ startOffset: c, endOffset: d, collapsed: p }, r), h = o.getSelfOrHeaderFooterModel(s).sliceBody(g.startOffset, g.endOffset);
+      if (h != null) {
+        if (h.customRanges) {
+          const l = [];
+          h.customRanges.forEach((_) => {
+            _.startIndex === _.endIndex && l.push(_);
+          }), h.customRanges = h.customRanges.filter((_) => l.indexOf(_) === -1);
+          let f = "", u = 0;
+          l.forEach((_) => {
+            f += h.dataStream.slice(u, _.endIndex), u = _.endIndex + 1;
+          }), f += h.dataStream.slice(u, h.dataStream.length), h.dataStream = f;
+        }
+        i.push(h);
+      }
+    }
+    return i;
+  }
+  async _generateBodyFromClipboardItems(e) {
+    try {
+      let t = "", o = "";
+      for (const i of e)
+        for (const r of i.types)
+          r === Nn ? o = await i.getType(r).then((s) => s && s.text()) : r === Ln && (t = await i.getType(r).then((s) => s && s.text()));
+      return this._generateBodyFromHtmlAndText(t, o);
+    } catch (t) {
+      return Promise.reject(t);
+    }
+  }
+  _generateBodyFromHtmlAndText(e, t) {
+    if (!e) {
+      if (t)
+        return ni(t);
+      throw new Error("[DocClipboardService] html and text cannot be both empty!");
+    }
+    const o = Wo(e);
+    if (o) {
+      const i = Ft.get(o);
+      if (i)
+        return i;
+    }
+    return this._htmlToUDM.convert(e);
+  }
+};
+ot = ti([
+  he(0, L),
+  he(1, Zt),
+  he(2, C),
+  he(3, gt),
+  he(4, T(ne))
+], ot);
+var oi = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, ri = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? ii(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && oi(e, t, i), i;
+}, Ee = (n, e) => (t, o) => e(t, o, n);
+const wt = 1.5;
+let it = class extends Oe {
+  constructor(n, e, t, o, i) {
+    super(), this._context = n, this._textSelectionManagerService = e, this._editorService = t, this._univerInstanceService = o, this._renderManagerService = i, this._init();
+  }
+  _init() {
+    this._textSelectionManagerService.textSelection$.pipe(se(this.dispose$)).subscribe((n) => {
+      if (n == null)
+        return;
+      const { isEditing: e, unitId: t } = n;
+      e && this._scrollToSelection(t);
+    });
+  }
+  scrollToRange(n, e) {
+    var s;
+    const t = (s = this._renderManagerService.getRenderById(n)) == null ? void 0 : s.with(N), o = t == null ? void 0 : t.getSkeleton();
+    if (!o)
+      return;
+    const { startOffset: i } = e, r = o.findNodePositionByCharIndex(i);
+    this.scrollToNode(n, r);
+  }
+  scrollToNode(n, e) {
+    var $;
+    const t = this._getDocObject(), o = ($ = this._renderManagerService.getRenderById(n)) == null ? void 0 : $.with(N), i = o == null ? void 0 : o.getSkeleton();
+    if (t == null || i == null)
+      return;
+    const r = t.document.getOffsetConfig(), { docsLeft: s, docsTop: a } = r, c = new rn(r, i), { contentBoxPointGroup: d } = c.getRangePointData(e, e), { left: p, top: g, height: h } = Io(d), l = p + s, f = g + a, u = t.scene.getViewport(te.VIEW_MAIN), _ = !!this._editorService.getEditor(n);
+    if (u == null)
+      return;
+    const {
+      left: m,
+      top: O,
+      right: M,
+      bottom: I
+    } = u.getBounding().viewBound;
+    let R = 0, y = 0;
+    const j = _ ? 0 : 100;
+    f < O ? R = f - O - j : f > I - h && (R = f - I + h + j), l < m ? y = l - m : l > M - wt && (y = l - M + wt);
+    const W = u.transViewportScroll2ScrollValue(y, R);
+    u.scrollBy(W);
+  }
+  // Let the selection show on the current screen.
+  _scrollToSelection(n) {
+    const e = this._textSelectionManagerService.getActiveRange();
+    if (e == null)
+      return;
+    const { collapsed: t, startNodePosition: o } = e;
+    t && this.scrollToNode(n, o);
+  }
+  _getDocObject() {
+    return eo(this._univerInstanceService, this._renderManagerService);
+  }
+};
+it = ri([
+  Ee(1, T(ne)),
+  Ee(2, Y),
+  Ee(3, T(L)),
+  Ee(4, k)
+], it);
+const si = {
+  undo: !0,
+  redo: !0,
+  // Undo redo
+  font: !0,
+  // 'font'
+  fontSize: !0,
+  // 'Font size'
+  bold: !0,
+  // 'Bold (Ctrl+B)'
+  italic: !0,
+  // 'Italic (Ctrl+I)'
+  strikethrough: !0,
+  // 'Strikethrough (Alt+Shift+5)'
+  underline: !0,
+  // 'Underline (Alt+Shift+6)'
+  textColor: !0,
+  // 'Text color'
+  fillColor: !0,
+  // 'Cell color'
+  horizontalAlignMode: !0,
+  // 'Horizontal alignment'
+  verticalAlignMode: !0,
+  // 'Vertical alignment'
+  textWrapMode: !0,
+  // 'Wrap mode'
+  textRotateMode: !0
+  // 'Text Rotation Mode'
+}, ai = {
+  outerLeft: !1,
+  outerRight: !1,
+  header: !0,
+  footer: !0,
+  innerLeft: !1,
+  innerRight: !1,
+  frozenHeaderLT: !1,
+  frozenHeaderRT: !1,
+  frozenHeaderLM: !1,
+  frozenContent: !1,
+  infoBar: !0,
+  toolbar: !0
+}, ci = {
+  layout: {
+    docContainerConfig: ai,
+    toolbarConfig: si
+  }
+}, li = "DocUI", di = {
+  id: $e.id,
+  binding: H.ARROW_UP,
+  preconditions: z,
+  staticParameters: {
+    direction: Z.UP
+  }
+}, ui = {
+  id: $e.id,
+  binding: H.ARROW_DOWN,
+  preconditions: z,
+  staticParameters: {
+    direction: Z.DOWN
+  }
+}, hi = {
+  id: $e.id,
+  binding: H.ARROW_LEFT,
+  preconditions: z,
+  staticParameters: {
+    direction: Z.LEFT
+  }
+}, gi = {
+  id: $e.id,
+  binding: H.ARROW_RIGHT,
+  preconditions: z,
+  staticParameters: {
+    direction: Z.RIGHT
+  }
+}, pi = {
+  id: He.id,
+  binding: H.ARROW_UP | Re.SHIFT,
+  preconditions: z,
+  staticParameters: {
+    direction: Z.UP
+  }
+}, _i = {
+  id: He.id,
+  binding: H.ARROW_DOWN | Re.SHIFT,
+  preconditions: z,
+  staticParameters: {
+    direction: Z.DOWN
+  }
+}, fi = {
+  id: He.id,
+  binding: H.ARROW_LEFT | Re.SHIFT,
+  preconditions: z,
+  staticParameters: {
+    direction: Z.LEFT
+  }
+}, mi = {
+  id: He.id,
+  binding: H.ARROW_RIGHT | Re.SHIFT,
+  preconditions: z,
+  staticParameters: {
+    direction: Z.RIGHT
+  }
+}, Si = {
+  id: to.id,
+  binding: H.A | Re.CTRL_COMMAND,
+  preconditions: (n) => n.getContextValue(ht) && (n.getContextValue(Ne) || n.getContextValue(Jt))
+};
+var vi = Object.defineProperty, Oi = Object.getOwnPropertyDescriptor, Ri = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? Oi(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && vi(e, t, i), i;
+}, Bt = (n, e) => (t, o) => e(t, o, n);
+let rt = class {
+  constructor(n, e, t) {
+    E(this, "_docContainer");
+    // 获取SheetContainer组件
+    E(this, "getComponent", (n) => {
+      if (this._docContainer = n, !n.getContentRef().current)
+        throw new Error("container is not ready");
+    });
+    /**
+     * Change language
+     * @param {string} lang new language
+     *
+     * e: {target: HTMLSelectElement } reference from  https://stackoverflow.com/a/48443771
+     *
+     */
+    E(this, "changeLocale", (n) => {
+      this._localeService.setLocale(n);
+    });
+    this._config = n, this._localeService = e, this._injector = t;
+  }
+  getUIConfig() {
+    return {
+      injector: this._injector,
+      config: this._config,
+      changeLocale: this.changeLocale,
+      getComponent: this.getComponent
+    };
+  }
+  getContentRef() {
+    return this._docContainer.getContentRef();
+  }
+  UIDidMount(n) {
+    if (this._docContainer)
+      return n(this._docContainer);
+  }
+  getDocContainer() {
+    return this._docContainer;
+  }
+};
+rt = Ri([
+  Bt(1, T(le)),
+  Bt(2, T(Be))
+], rt);
+var Ci = Object.defineProperty, Ei = Object.getOwnPropertyDescriptor, Ti = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? Ei(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && Ci(e, t, i), i;
+}, Te = (n, e) => (t, o) => e(t, o, n);
+let me = class extends Oe {
+  constructor(e, t, o, i, r) {
+    super();
+    E(this, "_docContainerController");
+    /**
+     * Change language
+     * @param {string} locale new language
+     *
+     * e: {target: HTMLSelectElement } reference from  https://stackoverflow.com/a/48443771
+     *
+     */
+    E(this, "changeLocale", (e) => {
+      this._localeService.setLocale(e);
+    });
+    this._localeService = t, this._injector = o, this._textSelectionRenderManager = i, this._layoutService = r, this._docContainerController = this._injector.createInstance(rt, e), this._registerContainer();
+  }
+  _registerContainer() {
+    this._layoutService && this.disposeWithMe(
+      // the content editable div should be regarded as part of the applications container
+      this._layoutService.registerContainerElement(this._textSelectionRenderManager.__getEditorContainer())
+    );
   }
   getDocContainerController() {
     return this._docContainerController;
   }
 };
-ae = mi([
-  _e(1, O(qe)),
-  _e(2, O(Pe)),
-  _e(3, he),
-  _e(4, en(xt))
-], ae);
-const $e = "UI_PLUGIN_DOCS", nt = `${$e}_COLOR_PICKER_COMPONENT`, At = `${$e}_FONT_FAMILY_COMPONENT`, Lt = `${$e}_FONT_FAMILY_ITEM_COMPONENT`, $t = `${$e}_FONT_SIZE_COMPONENT`;
-var Bt = { exports: {} }, Be = {};
+me = Ti([
+  Te(1, T(le)),
+  Te(2, T(Be)),
+  Te(3, oe),
+  Te(4, Jn(en))
+], me);
+const We = "UI_PLUGIN_DOCS", _t = `${We}_COLOR_PICKER_COMPONENT`, dn = `${We}_FONT_FAMILY_COMPONENT`, un = `${We}_FONT_FAMILY_ITEM_COMPONENT`, hn = `${We}_FONT_SIZE_COMPONENT`;
+var gn = { exports: {} }, ke = {};
 /**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -220,1101 +771,1177 @@ var Bt = { exports: {} }, Be = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Si = Zn, vi = Symbol.for("react.element"), Ci = Symbol.for("react.fragment"), Oi = Object.prototype.hasOwnProperty, Ri = Si.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, Ti = { key: !0, ref: !0, __self: !0, __source: !0 };
-function wt(i, e, t) {
-  var n, r = {}, o = null, s = null;
-  t !== void 0 && (o = "" + t), e.key !== void 0 && (o = "" + e.key), e.ref !== void 0 && (s = e.ref);
-  for (n in e) Oi.call(e, n) && !Ti.hasOwnProperty(n) && (r[n] = e[n]);
-  if (i && i.defaultProps) for (n in e = i.defaultProps, e) r[n] === void 0 && (r[n] = e[n]);
-  return { $$typeof: vi, type: i, key: o, ref: s, props: r, _owner: Ri.current };
+var Ii = Lo, bi = Symbol.for("react.element"), Mi = Symbol.for("react.fragment"), xi = Object.prototype.hasOwnProperty, yi = Ii.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, Pi = { key: !0, ref: !0, __self: !0, __source: !0 };
+function pn(n, e, t) {
+  var o, i = {}, r = null, s = null;
+  t !== void 0 && (r = "" + t), e.key !== void 0 && (r = "" + e.key), e.ref !== void 0 && (s = e.ref);
+  for (o in e) xi.call(e, o) && !Pi.hasOwnProperty(o) && (i[o] = e[o]);
+  if (n && n.defaultProps) for (o in e = n.defaultProps, e) i[o] === void 0 && (i[o] = e[o]);
+  return { $$typeof: bi, type: n, key: r, ref: s, props: i, _owner: yi.current };
 }
-Be.Fragment = Ci;
-Be.jsx = wt;
-Be.jsxs = wt;
-Bt.exports = Be;
-var Ii = Bt.exports;
-const bi = "univer-docs-ui-canvas-background", Mi = {
-  docsUiCanvasBackground: bi
-}, yi = () => /* @__PURE__ */ Ii.jsx("div", { className: Mi.docsUiCanvasBackground });
-function Ei(i) {
-  const e = i.get(v);
-  return {
-    id: Cn.id,
-    group: I.TOOLBAR_FORMAT,
-    type: T.BUTTON,
-    icon: "BoldSingle",
-    title: "Set bold",
-    tooltip: "toolbar.bold",
-    positions: [b.TOOLBAR_START],
-    activated$: new y((t) => {
-      const n = e.onCommandExecuted((r) => {
-        var s;
-        const o = r.id;
-        if (o === x.id || o === q.id) {
-          const a = V(i);
-          if (a == null)
-            return;
-          const c = (s = a.ts) == null ? void 0 : s.bl;
-          t.next(c === C.TRUE);
-        }
-      });
-      return t.next(!1), n.dispose;
-    }),
-    hidden$: M(i, f.UNIVER_DOC)
-  };
+ke.Fragment = Mi;
+ke.jsx = pn;
+ke.jsxs = pn;
+gn.exports = ke;
+var b = gn.exports;
+const Di = "univer-docs-ui-canvas-background", Ai = {
+  docsUiCanvasBackground: Di
+}, Fi = () => /* @__PURE__ */ b.jsx("div", { className: Ai.docsUiCanvasBackground }), $t = 18, Ht = 200, Ze = 6, Ni = 4;
+function Li(n, e) {
+  let { radius: t, width: o, height: i } = e;
+  t = t != null ? t : 0, o = o != null ? o : 30, i = i != null ? i : 30;
+  let r = 0;
+  r = Math.min(t, o / 2, i / 2), n.beginPath(), n.moveTo(0, 0), n.lineTo(o, 0), n.lineTo(o, i - r), n.arc(o - r, i - r, r, 0, Math.PI / 2, !1), n.lineTo(0, i), n.lineTo(0, 0), n.closePath(), e.fill && (n.save(), n.fillStyle = e.fill, e.fillRule === "evenodd" ? n.fill("evenodd") : n.fill(), n.restore());
 }
-function xi(i) {
-  const e = i.get(v);
-  return {
-    id: On.id,
-    group: I.TOOLBAR_FORMAT,
-    type: T.BUTTON,
-    icon: "ItalicSingle",
-    title: "Set italic",
-    tooltip: "toolbar.italic",
-    positions: [b.TOOLBAR_START],
-    activated$: new y((t) => {
-      const n = e.onCommandExecuted((r) => {
-        var s;
-        const o = r.id;
-        if (o === x.id || o === q.id) {
-          const a = V(i);
-          if (a == null)
-            return;
-          const c = (s = a.ts) == null ? void 0 : s.it;
-          t.next(c === C.TRUE);
+class Ae extends bo {
+  constructor(t, o) {
+    super(t, o);
+    E(this, "color");
+    E(this, "text");
+    this.color = o == null ? void 0 : o.color, this.text = o == null ? void 0 : o.text;
+  }
+  static drawWith(t, o) {
+    const { text: i, color: r } = o;
+    t.save(), t.font = "13px Source Han Sans CN";
+    const s = t.measureText(i).width, a = Math.min(
+      s + 2 * Ze,
+      Ht
+    );
+    Li(t, {
+      height: $t,
+      width: a,
+      radius: 4,
+      fill: r,
+      evented: !1
+    }), t.fillStyle = "rgba(58, 96, 247, 1)";
+    const c = Ze, d = $t - Ni, p = Ht - 2 * Ze;
+    if (s > p) {
+      let g = "", h = 0;
+      for (const l of i) {
+        const f = t.measureText(l).width;
+        if (h + f <= p - t.measureText("...").width)
+          g += l, h += f;
+        else {
+          g += "...";
+          break;
         }
-      });
-      return t.next(!1), n.dispose;
-    }),
-    hidden$: M(i, f.UNIVER_DOC)
-  };
+      }
+      t.fillText(g, c, d);
+    } else
+      t.fillText(i, c, d);
+    t.restore();
+  }
+  _draw(t) {
+    Ae.drawWith(t, this);
+  }
 }
-function Di(i) {
-  const e = i.get(v);
-  return {
-    id: Rn.id,
-    group: I.TOOLBAR_FORMAT,
-    type: T.BUTTON,
-    icon: "UnderlineSingle",
-    title: "Set underline",
-    tooltip: "toolbar.underline",
-    positions: [b.TOOLBAR_START],
-    activated$: new y((t) => {
-      const n = e.onCommandExecuted((r) => {
-        var s;
-        const o = r.id;
-        if (o === x.id || o === q.id) {
-          const a = V(i);
-          if (a == null)
-            return;
-          const c = (s = a.ts) == null ? void 0 : s.ul;
-          t.next((c == null ? void 0 : c.s) === C.TRUE);
+const _n = "COMPONENT_DOC_HEADER_FOOTER_PANEL", Ui = "univer-panel", wi = "univer-options-section", Bi = "univer-options-form-item", $i = "univer-options-input", Hi = "univer-options-margin-setting", B = {
+  panel: Ui,
+  optionsSection: wi,
+  optionsFormItem: Bi,
+  optionsInput: $i,
+  optionsMarginSetting: Hi
+}, Vi = (n) => {
+  const e = G(le), t = G(L), o = G(k), i = G(C), r = G(oe), s = G(ne), { unitId: a } = n, [c, d] = an({}), p = (l, f) => {
+    var j;
+    d((W) => ({
+      ...W,
+      [f]: l ? S.TRUE : S.FALSE
+    }));
+    const u = t.getUniverDocInstance(a), _ = u == null ? void 0 : u.getSnapshot().documentStyle, m = (j = o.getRenderById(a)) == null ? void 0 : j.with(N), O = m == null ? void 0 : m.getViewModel();
+    if (_ == null || O == null)
+      return;
+    const M = O.getEditArea();
+    let I = !1;
+    const R = r.getSegmentPage();
+    let y = !1;
+    if (f === "useFirstPageHeaderFooter" && l === !0 && ((M === F.HEADER && !_.firstPageHeaderId || M === F.FOOTER && !_.firstPageFooterId) && (I = !0), I && R === 0 && (y = !0)), f === "evenAndOddHeaders" && l === !0 && ((M === F.HEADER && !_.evenPageHeaderId || M === F.FOOTER && !_.evenPageFooterId) && (I = !0), I && R % 2 === 1 && (y = !0)), I) {
+      const $ = ee.generateRandomId(6);
+      y && r.setSegment($), i.executeCommand(Me, {
+        unitId: a,
+        segmentId: $,
+        headerFooterProps: {
+          [f]: l ? S.TRUE : S.FALSE
         }
       });
-      return t.next(!1), n.dispose;
-    }),
-    hidden$: M(i, f.UNIVER_DOC)
-  };
-}
-function Pi(i) {
-  const e = i.get(v);
-  return {
-    id: Tn.id,
-    group: I.TOOLBAR_FORMAT,
-    type: T.BUTTON,
-    icon: "StrikethroughSingle",
-    title: "Set strike through",
-    tooltip: "toolbar.strikethrough",
-    positions: [b.TOOLBAR_START],
-    activated$: new y((t) => {
-      const n = e.onCommandExecuted((r) => {
-        var s;
-        const o = r.id;
-        if (o === x.id || o === q.id) {
-          const a = V(i);
-          if (a == null)
-            return;
-          const c = (s = a.ts) == null ? void 0 : s.st;
-          t.next((c == null ? void 0 : c.s) === C.TRUE);
+    } else
+      i.executeCommand(Me, {
+        unitId: a,
+        headerFooterProps: {
+          [f]: l ? S.TRUE : S.FALSE
         }
       });
-      return t.next(!1), n.dispose;
-    }),
-    hidden$: M(i, f.UNIVER_DOC)
+  }, g = async (l, f) => {
+    d((u) => ({
+      ...u,
+      [f]: l
+    })), await i.executeCommand(Me, {
+      unitId: a,
+      headerFooterProps: {
+        [f]: l
+      }
+    }), r.removeAllTextRanges(), r.blur();
+  }, h = () => {
+    var m, O;
+    const l = (m = o.getRenderById(a)) == null ? void 0 : m.with(N), f = l == null ? void 0 : l.getSkeleton(), u = l == null ? void 0 : l.getViewModel(), _ = o.getRenderById(a);
+    _ == null || u == null || f == null || (s.replaceTextRanges([]), r.setSegment(""), r.setSegmentPage(-1), u.setEditArea(F.BODY), f.calculate(), (O = _.mainComponent) == null || O.makeDirty(!0));
+  };
+  return cn(() => {
+    const l = t.getUniverDocInstance(a), f = l == null ? void 0 : l.getSnapshot().documentStyle;
+    if (f) {
+      const { marginHeader: u, marginFooter: _, useFirstPageHeaderFooter: m, evenAndOddHeaders: O } = f;
+      d({
+        marginHeader: u,
+        marginFooter: _,
+        useFirstPageHeaderFooter: m,
+        evenAndOddHeaders: O
+      });
+    }
+  }, [a]), /* @__PURE__ */ b.jsxs("div", { className: B.options, children: [
+    /* @__PURE__ */ b.jsxs("div", { className: B.optionsSection, children: [
+      /* @__PURE__ */ b.jsx("div", { className: B.optionsFormItem, children: /* @__PURE__ */ b.jsx(
+        Dt,
+        {
+          checked: c.useFirstPageHeaderFooter === S.TRUE,
+          onChange: (l) => {
+            p(l, "useFirstPageHeaderFooter");
+          },
+          children: e.t("headerFooter.firstPageCheckBox")
+        }
+      ) }),
+      /* @__PURE__ */ b.jsx("div", { className: B.optionsFormItem, children: /* @__PURE__ */ b.jsx(
+        Dt,
+        {
+          checked: c.evenAndOddHeaders === S.TRUE,
+          onChange: (l) => {
+            p(l, "evenAndOddHeaders");
+          },
+          children: e.t("headerFooter.oddEvenCheckBox")
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ b.jsxs("div", { className: Bo(B.optionsSection, B.optionsMarginSetting), children: [
+      /* @__PURE__ */ b.jsxs("div", { className: B.optionsMarginItem, children: [
+        /* @__PURE__ */ b.jsx("span", { children: e.t("headerFooter.headerTopMargin") }),
+        /* @__PURE__ */ b.jsx(
+          At,
+          {
+            min: 0,
+            max: 200,
+            precision: 1,
+            value: c.marginHeader,
+            onChange: (l) => {
+              g(l, "marginHeader");
+            },
+            className: B.optionsInput
+          }
+        )
+      ] }),
+      /* @__PURE__ */ b.jsxs("div", { className: B.optionsMarginItem, children: [
+        /* @__PURE__ */ b.jsx("span", { children: e.t("headerFooter.footerBottomMargin") }),
+        /* @__PURE__ */ b.jsx(
+          At,
+          {
+            min: 0,
+            max: 200,
+            precision: 1,
+            value: c.marginFooter,
+            onChange: (l) => {
+              g(l, "marginFooter");
+            },
+            className: B.optionsInput
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ b.jsx("div", { className: B.optionsSection, children: /* @__PURE__ */ b.jsx(Uo, { onClick: h, children: e.t("headerFooter.closeHeaderFooter") }) })
+  ] });
+}, ji = () => {
+  var d;
+  const n = G(le), e = G(k), i = G(L).getCurrentUniverDocInstance().getUnitId(), s = ((d = e.getRenderById(i)) == null ? void 0 : d.with(N)).getViewModel(), [a, c] = an(!0);
+  return cn(() => {
+    const p = s.getEditArea();
+    c(p !== F.BODY);
+    const g = s.editAreaChange$.subscribe((h) => {
+      h != null && c(h !== F.BODY);
+    });
+    return () => {
+      g.unsubscribe();
+    };
+  }, []), /* @__PURE__ */ b.jsx("div", { className: B.panel, children: a ? /* @__PURE__ */ b.jsx(Vi, { unitId: i }) : /* @__PURE__ */ b.jsx("div", { className: B.panelDisableText, children: n.t("headerFooter.disableText") }) });
+}, fn = {
+  id: "sidebar.operation.doc-header-footer-panel",
+  type: de.COMMAND,
+  handler: async (n, e) => {
+    const t = n.get(Un), o = n.get(le);
+    switch (e.value) {
+      case "open":
+        t.open({
+          header: { title: o.t("headerFooter.panel") },
+          children: { label: _n },
+          onClose: () => {
+          },
+          width: 400
+        });
+        break;
+      case "close":
+      default:
+        t.close();
+        break;
+    }
+    return !0;
+  }
+};
+var Wi = Object.defineProperty, ki = Object.getOwnPropertyDescriptor, zi = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? ki(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && Wi(e, t, i), i;
+}, X = (n, e) => (t, o) => e(t, o, n);
+const Vt = "rgba(58, 96, 247, 1)", jt = "rgba(58, 96, 247, 0.08)";
+var U = /* @__PURE__ */ ((n) => (n[n.FIRST_PAGE_HEADER = 0] = "FIRST_PAGE_HEADER", n[n.FIRST_PAGE_FOOTER = 1] = "FIRST_PAGE_FOOTER", n[n.DEFAULT_HEADER = 2] = "DEFAULT_HEADER", n[n.DEFAULT_FOOTER = 3] = "DEFAULT_FOOTER", n[n.EVEN_PAGE_HEADER = 4] = "EVEN_PAGE_HEADER", n[n.EVEN_PAGE_FOOTER = 5] = "EVEN_PAGE_FOOTER", n))(U || {});
+function Gi(n, e, t) {
+  const { documentStyle: o } = n.getDataModel().getSnapshot(), {
+    defaultHeaderId: i,
+    defaultFooterId: r,
+    evenPageHeaderId: s,
+    evenPageFooterId: a,
+    firstPageHeaderId: c,
+    firstPageFooterId: d,
+    evenAndOddHeaders: p,
+    useFirstPageHeaderFooter: g
+  } = o;
+  switch (e) {
+    case F.BODY:
+      return {
+        createType: null,
+        headerFooterId: null
+      };
+    case F.HEADER:
+      return g === S.TRUE && !c ? {
+        createType: 0,
+        headerFooterId: null
+      } : p === S.TRUE && t % 2 === 0 && !s ? {
+        createType: 4,
+        headerFooterId: null
+      } : i ? {
+        createType: null,
+        headerFooterId: i
+      } : {
+        createType: 2,
+        headerFooterId: null
+      };
+    case F.FOOTER:
+      return g === S.TRUE && !d ? {
+        createType: 1,
+        headerFooterId: null
+      } : p === S.TRUE && t % 2 === 0 && !a ? {
+        createType: 5,
+        headerFooterId: null
+      } : r ? {
+        createType: null,
+        headerFooterId: r
+      } : {
+        createType: 3,
+        headerFooterId: null
+      };
+    default:
+      throw new Error(`Invalid editArea: ${e}`);
+  }
+}
+let st = class extends K {
+  constructor(e, t, o, i, r, s, a, c, d) {
+    super();
+    E(this, "_loadedMap", /* @__PURE__ */ new WeakSet());
+    this._context = e, this._commandService = t, this._editorService = o, this._instanceSrv = i, this._renderManagerService = r, this._docSkeletonManagerService = s, this._textSelectionRenderManager = a, this._localeService = c, this._componentManager = d, this._initialize();
+  }
+  _initialize() {
+    this._context.unit.getSnapshot().documentStyle.documentFlavor === In.TRADITIONAL && (this._init(), this._drawHeaderFooterLabel(), this._registerCommands(), this._initCustomComponents());
+  }
+  _registerCommands() {
+    [
+      kt,
+      mn,
+      fn
+    ].forEach((e) => this.disposeWithMe(this._commandService.registerCommand(e)));
+  }
+  _initCustomComponents() {
+    const e = this._componentManager;
+    this.disposeWithMe(e.register(_n, ji));
+  }
+  _init() {
+    const { unitId: e } = this._context, t = Q(this._context);
+    t == null || t.document == null || this._loadedMap.has(t.document) || (this._initialMain(e), this._loadedMap.add(t.document));
+  }
+  _initialMain(e) {
+    const t = Q(this._context), { document: o } = t;
+    this.disposeWithMe(o.onDblclick$.subscribeEvent(async (i) => {
+      if (this._isEditorReadOnly(e))
+        return;
+      const { offsetX: r, offsetY: s } = i, {
+        pageLayoutType: a = De.VERTICAL,
+        pageMarginLeft: c,
+        pageMarginTop: d
+      } = o.getOffsetConfig(), p = this._getTransformCoordForDocumentOffset(r, s);
+      if (p == null)
+        return;
+      const g = this._docSkeletonManagerService.getViewModel(), h = this._docSkeletonManagerService.getSkeleton(), l = g.getEditArea(), { editArea: f, pageNumber: u } = h.findEditAreaByCoord(
+        p,
+        a,
+        c,
+        d
+      );
+      if (l === f)
+        return;
+      g.setEditArea(f);
+      const { createType: _, headerFooterId: m } = Gi(g, f, u);
+      if (f === F.BODY)
+        this._textSelectionRenderManager.setSegment(""), this._textSelectionRenderManager.setSegmentPage(-1), this._textSelectionRenderManager.setCursorManually(r, s);
+      else if (_ != null) {
+        const M = ee.generateRandomId(6);
+        this._textSelectionRenderManager.setSegment(M), this._textSelectionRenderManager.setSegmentPage(u), await this._commandService.executeCommand(kt.id, {
+          unitId: e,
+          createType: _,
+          segmentId: M
+        });
+      } else m != null && (this._textSelectionRenderManager.setSegment(m), this._textSelectionRenderManager.setSegmentPage(u), this._textSelectionRenderManager.setCursorManually(r, s));
+    }));
+  }
+  _getTransformCoordForDocumentOffset(e, t) {
+    const o = Q(this._context), { document: i, scene: r } = o, { documentTransform: s } = i.getOffsetConfig(), a = r.getViewports()[0];
+    if (a == null)
+      return;
+    const c = a.transformVector2SceneCoord(sn.FromArray([e, t]));
+    return s.clone().invert().applyPoint(c);
+  }
+  // eslint-disable-next-line max-lines-per-function
+  _drawHeaderFooterLabel() {
+    const e = this._localeService;
+    this._renderManagerService.currentRender$.subscribe((t) => {
+      if (t == null)
+        return;
+      const o = this._renderManagerService.getRenderById(t);
+      if (this._editorService.isEditor(t) || this._instanceSrv.getUniverDocInstance(t) == null || o == null)
+        return;
+      const { mainComponent: i } = o, r = i;
+      this.disposeWithMe(
+        qt(
+          // eslint-disable-next-line max-lines-per-function
+          r.pageRender$.subscribe((s) => {
+            if (this._editorService.isEditor(t))
+              return;
+            const d = this._docSkeletonManagerService.getViewModel().getEditArea() === F.BODY, { page: p, pageLeft: g, pageTop: h, ctx: l } = s, { pageWidth: f, pageHeight: u, marginTop: _, marginBottom: m } = p;
+            if (l.save(), l.translate(g - 0.5, h - 0.5), d ? (Xe.drawWith(l, {
+              left: 0,
+              top: 0,
+              width: f,
+              height: _,
+              fill: "rgba(255, 255, 255, 0.5)"
+            }), l.save(), l.translate(0, u - m), Xe.drawWith(l, {
+              left: 0,
+              top: 0,
+              width: f,
+              height: m,
+              fill: "rgba(255, 255, 255, 0.5)"
+            }), l.restore()) : (l.save(), l.translate(0, _), Xe.drawWith(l, {
+              left: 0,
+              top: _,
+              width: f,
+              height: u - _ - m,
+              fill: "rgba(255, 255, 255, 0.5)"
+            }), l.restore()), !d) {
+              const O = {
+                dataArray: [{
+                  command: "M",
+                  points: [0, _]
+                }, {
+                  command: "L",
+                  points: [f, _]
+                }],
+                strokeWidth: 1,
+                stroke: Vt
+              }, M = {
+                dataArray: [{
+                  command: "M",
+                  points: [0, u - m]
+                }, {
+                  command: "L",
+                  points: [f, u - m]
+                }],
+                strokeWidth: 1,
+                stroke: Vt
+              };
+              bt.drawWith(l, O), bt.drawWith(l, M), l.translate(0, _ + 1), Ae.drawWith(l, {
+                text: e.t("headerFooter.header"),
+                color: jt
+              }), l.translate(0, u - _ - m), Ae.drawWith(l, {
+                text: e.t("headerFooter.footer"),
+                color: jt
+              });
+            }
+            l.restore();
+          })
+        )
+      );
+    });
+  }
+  _isEditorReadOnly(e) {
+    const t = this._editorService.getEditor(e);
+    return t ? t.isReadOnly() : !1;
+  }
+  _getDocDataModel() {
+    return this._context.unit;
+  }
+};
+st = zi([
+  X(1, C),
+  X(2, Y),
+  X(3, L),
+  X(4, k),
+  X(5, T(N)),
+  X(6, oe),
+  X(7, T(le)),
+  X(8, T(tn))
+], st);
+function Wt() {
+  return {
+    dataStream: `\r
+`,
+    textRuns: [{
+      st: 0,
+      ed: 0,
+      ts: {
+        fs: 9
+        // The default header footer text size.
+      }
+    }],
+    paragraphs: [
+      {
+        startIndex: 0,
+        spaceAbove: 0,
+        lineSpacing: 1.5,
+        spaceBelow: 0
+      }
+    ],
+    sectionBreaks: [
+      {
+        startIndex: 1
+      }
+    ]
+  };
+}
+function qe(n, e, t, o) {
+  const i = et.getInstance(), r = 6, s = n != null ? n : ee.generateRandomId(r), a = e === U.DEFAULT_HEADER || e === U.FIRST_PAGE_HEADER || e === U.EVEN_PAGE_HEADER, c = i.insertOp([a ? "headers" : "footers", s], {
+    [a ? "headerId" : "footerId"]: s,
+    body: Wt()
+  });
+  o.push(c);
+  const d = ee.generateRandomId(r), p = i.insertOp([a ? "footers" : "headers", d], {
+    [a ? "footers" : "headers"]: d,
+    body: Wt()
+  });
+  o.push(p);
+  let g = "defaultHeaderId", h = "defaultFooterId";
+  switch (e) {
+    case U.DEFAULT_HEADER:
+      g = "defaultHeaderId", h = "defaultFooterId";
+      break;
+    case U.DEFAULT_FOOTER:
+      g = "defaultFooterId", h = "defaultHeaderId";
+      break;
+    case U.FIRST_PAGE_HEADER:
+      g = "firstPageHeaderId", h = "firstPageFooterId";
+      break;
+    case U.FIRST_PAGE_FOOTER:
+      g = "firstPageFooterId", h = "firstPageHeaderId";
+      break;
+    case U.EVEN_PAGE_HEADER:
+      g = "evenPageHeaderId", h = "evenPageFooterId";
+      break;
+    case U.EVEN_PAGE_FOOTER:
+      g = "evenPageFooterId", h = "evenPageHeaderId";
+      break;
+    default:
+      throw new Error(`Unknown header footer type: ${e}`);
+  }
+  for (const [l, f] of [[g, s], [h, d]])
+    if (t[l] != null) {
+      const u = i.replaceOp(["documentStyle", l], t[l], f);
+      o.push(u);
+    } else {
+      const u = i.insertOp(["documentStyle", l], f);
+      o.push(u);
+    }
+  return o;
+}
+const Me = "doc.command.core-header-footer", kt = {
+  id: Me,
+  type: de.COMMAND,
+  // eslint-disable-next-line max-lines-per-function
+  handler: async (n, e) => {
+    var I;
+    const t = n.get(C), o = n.get(L), i = n.get(k), { unitId: r, segmentId: s, createType: a, headerFooterProps: c } = e, d = (I = i.getRenderById(r)) == null ? void 0 : I.with(N), p = o.getUniverDocInstance(r), g = d == null ? void 0 : d.getViewModel();
+    if (p == null || g == null)
+      return !1;
+    const h = g.getEditArea(), { documentStyle: l } = p.getSnapshot(), f = (c == null ? void 0 : c.marginFooter) != null || (c == null ? void 0 : c.marginHeader) != null, u = [{
+      startOffset: 0,
+      endOffset: 0,
+      collapsed: !0
+    }], _ = {
+      id: Ve.id,
+      params: {
+        unitId: r,
+        actions: [],
+        textRanges: u,
+        debounce: !0
+      }
+    };
+    f && (_.params.noNeedSetTextRange = !0);
+    const m = et.getInstance(), O = [];
+    return a != null && qe(s, a, l, O), c != null && Object.keys(c).forEach((R) => {
+      const y = c[R], j = l[R];
+      if (y === j)
+        return;
+      let W;
+      if (j === void 0 ? W = m.insertOp(["documentStyle", R], y) : W = m.replaceOp(["documentStyle", R], j, y), O.push(W), R === "useFirstPageHeaderFooter" && y === S.TRUE && !l.firstPageHeaderId) {
+        const $ = h === F.HEADER ? U.FIRST_PAGE_HEADER : U.FIRST_PAGE_FOOTER;
+        qe(s, $, l, O);
+      } else if (R === "evenAndOddHeaders" && y === S.TRUE && !l.evenPageHeaderId) {
+        const $ = h === F.HEADER ? U.EVEN_PAGE_HEADER : U.EVEN_PAGE_FOOTER;
+        qe(s, $, l, O);
+      }
+    }), O.length === 0 ? !1 : (_.params.actions = O.reduce((R, y) => et.compose(R, y), null), !!t.syncExecuteCommand(_.id, _.params));
+  }
+}, mn = {
+  id: "doc.command.open-header-footer-panel",
+  type: de.COMMAND,
+  handler: async (n, e) => n.get(C).executeCommand(fn.id, { value: "open" })
+};
+function Yi(n) {
+  const e = n.get(C);
+  return {
+    id: no.id,
+    group: P.TOOLBAR_FORMAT,
+    type: x.BUTTON,
+    icon: "BoldSingle",
+    title: "Set bold",
+    tooltip: "toolbar.bold",
+    positions: [D.TOOLBAR_START],
+    activated$: new w((t) => {
+      const o = e.onCommandExecuted((i) => {
+        var s;
+        const r = i.id;
+        if (r === V.id || r === ue.id) {
+          const a = q(n);
+          if (a == null)
+            return;
+          const c = (s = a.ts) == null ? void 0 : s.bl;
+          t.next(c === S.TRUE);
+        }
+      });
+      return t.next(!1), o.dispose;
+    }),
+    hidden$: A(n, v.UNIVER_DOC)
   };
 }
-function Ni(i) {
-  const e = i.get(v);
+function Xi(n) {
+  const e = n.get(C);
   return {
-    id: In.id,
-    group: I.TOOLBAR_FORMAT,
-    type: T.BUTTON,
+    id: oo.id,
+    group: P.TOOLBAR_FORMAT,
+    type: x.BUTTON,
+    icon: "ItalicSingle",
+    title: "Set italic",
+    tooltip: "toolbar.italic",
+    positions: [D.TOOLBAR_START],
+    activated$: new w((t) => {
+      const o = e.onCommandExecuted((i) => {
+        var s;
+        const r = i.id;
+        if (r === V.id || r === ue.id) {
+          const a = q(n);
+          if (a == null)
+            return;
+          const c = (s = a.ts) == null ? void 0 : s.it;
+          t.next(c === S.TRUE);
+        }
+      });
+      return t.next(!1), o.dispose;
+    }),
+    hidden$: A(n, v.UNIVER_DOC)
+  };
+}
+function Ki(n) {
+  const e = n.get(C);
+  return {
+    id: io.id,
+    group: P.TOOLBAR_FORMAT,
+    type: x.BUTTON,
+    icon: "UnderlineSingle",
+    title: "Set underline",
+    tooltip: "toolbar.underline",
+    positions: [D.TOOLBAR_START],
+    activated$: new w((t) => {
+      const o = e.onCommandExecuted((i) => {
+        var s;
+        const r = i.id;
+        if (r === V.id || r === ue.id) {
+          const a = q(n);
+          if (a == null)
+            return;
+          const c = (s = a.ts) == null ? void 0 : s.ul;
+          t.next((c == null ? void 0 : c.s) === S.TRUE);
+        }
+      });
+      return t.next(!1), o.dispose;
+    }),
+    hidden$: A(n, v.UNIVER_DOC)
+  };
+}
+function Zi(n) {
+  const e = n.get(C);
+  return {
+    id: ro.id,
+    group: P.TOOLBAR_FORMAT,
+    type: x.BUTTON,
+    icon: "StrikethroughSingle",
+    title: "Set strike through",
+    tooltip: "toolbar.strikethrough",
+    positions: [D.TOOLBAR_START],
+    activated$: new w((t) => {
+      const o = e.onCommandExecuted((i) => {
+        var s;
+        const r = i.id;
+        if (r === V.id || r === ue.id) {
+          const a = q(n);
+          if (a == null)
+            return;
+          const c = (s = a.ts) == null ? void 0 : s.st;
+          t.next((c == null ? void 0 : c.s) === S.TRUE);
+        }
+      });
+      return t.next(!1), o.dispose;
+    }),
+    hidden$: A(n, v.UNIVER_DOC)
+  };
+}
+function qi(n) {
+  const e = n.get(C);
+  return {
+    id: so.id,
+    group: P.TOOLBAR_FORMAT,
+    type: x.BUTTON,
     icon: "SubscriptSingle",
     tooltip: "toolbar.subscript",
-    positions: [b.TOOLBAR_START],
-    activated$: new y((t) => {
-      const n = e.onCommandExecuted((r) => {
+    positions: [D.TOOLBAR_START],
+    activated$: new w((t) => {
+      const o = e.onCommandExecuted((i) => {
         var s;
-        const o = r.id;
-        if (o === x.id || o === q.id) {
-          const a = V(i);
+        const r = i.id;
+        if (r === V.id || r === ue.id) {
+          const a = q(n);
           if (a == null)
             return;
           const c = (s = a.ts) == null ? void 0 : s.va;
-          t.next(c === K.SUBSCRIPT);
+          t.next(c === ae.SUBSCRIPT);
         }
       });
-      return t.next(!1), n.dispose;
+      return t.next(!1), o.dispose;
     }),
-    hidden$: M(i, f.UNIVER_DOC)
+    hidden$: A(n, v.UNIVER_DOC)
   };
 }
-function Ui(i) {
-  const e = i.get(v);
+function Ji(n) {
+  const e = n.get(C);
   return {
-    id: bn.id,
-    group: I.TOOLBAR_FORMAT,
-    type: T.BUTTON,
+    id: ao.id,
+    group: P.TOOLBAR_FORMAT,
+    type: x.BUTTON,
     icon: "SuperscriptSingle",
     tooltip: "toolbar.superscript",
-    positions: [b.TOOLBAR_START],
-    activated$: new y((t) => {
-      const n = e.onCommandExecuted((r) => {
+    positions: [D.TOOLBAR_START],
+    activated$: new w((t) => {
+      const o = e.onCommandExecuted((i) => {
         var s;
-        const o = r.id;
-        if (o === x.id || o === q.id) {
-          const a = V(i);
+        const r = i.id;
+        if (r === V.id || r === ue.id) {
+          const a = q(n);
           if (a == null)
             return;
           const c = (s = a.ts) == null ? void 0 : s.va;
-          t.next(c === K.SUPERSCRIPT);
+          t.next(c === ae.SUPERSCRIPT);
         }
       });
-      return t.next(!1), n.dispose;
+      return t.next(!1), o.dispose;
     }),
-    hidden$: M(i, f.UNIVER_DOC)
+    hidden$: A(n, v.UNIVER_DOC)
   };
 }
-function Ai(i) {
-  const e = i.get(v);
+function Qi(n) {
+  const e = n.get(C);
   return {
-    id: ct.id,
+    id: Rt.id,
     tooltip: "toolbar.font",
-    group: I.TOOLBAR_FORMAT,
-    type: T.SELECTOR,
-    label: At,
-    positions: [b.TOOLBAR_START],
-    selections: at.map((t) => ({
+    group: P.TOOLBAR_FORMAT,
+    type: x.SELECTOR,
+    label: dn,
+    positions: [D.TOOLBAR_START],
+    selections: Ot.map((t) => ({
       label: {
-        name: Lt,
+        name: un,
         hoverable: !0
       },
       value: t.value
     })),
     // disabled$: getCurrentSheetDisabled$(accessor),
-    value$: new y((t) => {
-      const n = at[0].value, r = e.onCommandExecuted((o) => {
+    value$: new w((t) => {
+      const o = Ot[0].value, i = e.onCommandExecuted((r) => {
         var a;
-        const s = o.id;
-        if (s === x.id || s === ct.id) {
-          const c = V(i);
+        const s = r.id;
+        if (s === V.id || s === Rt.id) {
+          const c = q(n);
           if (c == null)
             return;
-          const l = (a = c.ts) == null ? void 0 : a.ff;
-          t.next(l != null ? l : n);
+          const d = (a = c.ts) == null ? void 0 : a.ff;
+          t.next(d != null ? d : o);
         }
       });
-      return t.next(n), r.dispose;
+      return t.next(o), i.dispose;
     }),
-    hidden$: M(i, f.UNIVER_DOC)
+    hidden$: A(n, v.UNIVER_DOC)
   };
 }
-function Li(i) {
-  const e = i.get(v);
+function er(n) {
+  const e = n.get(C);
   return {
-    id: lt.id,
-    group: I.TOOLBAR_FORMAT,
-    type: T.SELECTOR,
+    id: Ct.id,
+    group: P.TOOLBAR_FORMAT,
+    type: x.SELECTOR,
     tooltip: "toolbar.fontSize",
     label: {
-      name: $t,
+      name: hn,
       props: {
         min: 1,
         max: 400
         // disabled$,
       }
     },
-    positions: [b.TOOLBAR_START],
-    selections: nn,
+    positions: [D.TOOLBAR_START],
+    selections: wn,
     // disabled$,
-    value$: new y((t) => {
-      const r = e.onCommandExecuted((o) => {
+    value$: new w((t) => {
+      const i = e.onCommandExecuted((r) => {
         var a;
-        const s = o.id;
-        if (s === x.id || s === lt.id) {
-          const c = V(i);
+        const s = r.id;
+        if (s === V.id || s === Ct.id) {
+          const c = q(n);
           if (c == null)
             return;
-          const l = (a = c.ts) == null ? void 0 : a.fs;
-          t.next(l != null ? l : 14);
+          const d = (a = c.ts) == null ? void 0 : a.fs;
+          t.next(d != null ? d : 14);
         }
       });
-      return t.next(14), r.dispose;
+      return t.next(14), i.dispose;
     }),
-    hidden$: M(i, f.UNIVER_DOC)
+    hidden$: A(n, v.UNIVER_DOC)
   };
 }
-function $i(i) {
-  const e = i.get(v), t = i.get(yt);
+function tr(n) {
+  const e = n.get(C), t = n.get(Qt);
   return {
-    id: dt.id,
+    id: Et.id,
     icon: "FontColor",
     tooltip: "toolbar.textColor.main",
-    group: I.TOOLBAR_FORMAT,
-    type: T.BUTTON_SELECTOR,
-    positions: [b.TOOLBAR_START],
+    group: P.TOOLBAR_FORMAT,
+    type: x.BUTTON_SELECTOR,
+    positions: [D.TOOLBAR_START],
     selections: [
       {
         label: {
-          name: nt,
+          name: _t,
           hoverable: !1
         }
       }
     ],
-    value$: new y((n) => {
-      const r = t.getCurrentTheme().textColor, o = e.onCommandExecuted((s) => {
-        if (s.id === dt.id) {
+    value$: new w((o) => {
+      const i = t.getCurrentTheme().textColor, r = e.onCommandExecuted((s) => {
+        if (s.id === Et.id) {
           const a = s.params.value;
-          n.next(a != null ? a : r);
+          o.next(a != null ? a : i);
         }
       });
-      return n.next(r), o.dispose;
+      return o.next(i), r.dispose;
     }),
-    hidden$: M(i, f.UNIVER_DOC)
+    hidden$: A(n, v.UNIVER_DOC)
     // disabled$: getCurrentSheetDisabled$(accessor),
   };
 }
-function Bi(i) {
-  const e = i.get(v);
+function nr(n) {
+  return {
+    id: mn.id,
+    group: P.TOOLBAR_OTHERS,
+    type: x.BUTTON,
+    icon: "FreezeRowSingle",
+    tooltip: "toolbar.headerFooter",
+    positions: [D.TOOLBAR_START],
+    hidden$: Ao(A(n, v.UNIVER_DOC), Bn(n), (e, t) => e || t)
+  };
+}
+function or(n) {
+  const e = n.get(C);
   return {
-    id: Mn.id,
-    group: I.TOOLBAR_LAYOUT,
-    type: T.BUTTON,
+    id: co.id,
+    group: P.TOOLBAR_LAYOUT,
+    type: x.BUTTON,
     icon: "LeftJustifyingSingle",
     tooltip: "toolbar.alignLeft",
-    positions: [b.TOOLBAR_START],
-    activated$: new y((t) => {
-      const n = e.onCommandExecuted((r) => {
+    positions: [D.TOOLBAR_START],
+    activated$: new w((t) => {
+      const o = e.onCommandExecuted((i) => {
         var s;
-        const o = r.id;
-        if (o === x.id || o === Ae.id) {
-          const a = we(i);
+        const r = i.id;
+        if (r === V.id || r === je.id) {
+          const a = ze(n);
           if (a == null)
             return;
           const c = (s = a.paragraphStyle) == null ? void 0 : s.horizontalAlign;
-          t.next(c === De.LEFT);
+          t.next(c === Le.LEFT);
         }
       });
-      return t.next(!1), n.dispose;
+      return t.next(!1), o.dispose;
     }),
-    hidden$: M(i, f.UNIVER_DOC)
+    hidden$: A(n, v.UNIVER_DOC)
   };
 }
-function wi(i) {
-  const e = i.get(v);
+function ir(n) {
+  const e = n.get(C);
   return {
-    id: yn.id,
-    group: I.TOOLBAR_LAYOUT,
-    type: T.BUTTON,
+    id: lo.id,
+    group: P.TOOLBAR_LAYOUT,
+    type: x.BUTTON,
     icon: "HorizontallySingle",
     tooltip: "toolbar.alignCenter",
-    positions: [b.TOOLBAR_START],
-    activated$: new y((t) => {
-      const n = e.onCommandExecuted((r) => {
+    positions: [D.TOOLBAR_START],
+    activated$: new w((t) => {
+      const o = e.onCommandExecuted((i) => {
         var s;
-        const o = r.id;
-        if (o === x.id || o === Ae.id) {
-          const a = we(i);
+        const r = i.id;
+        if (r === V.id || r === je.id) {
+          const a = ze(n);
           if (a == null)
             return;
           const c = (s = a.paragraphStyle) == null ? void 0 : s.horizontalAlign;
-          t.next(c === De.CENTER);
+          t.next(c === Le.CENTER);
         }
       });
-      return t.next(!1), n.dispose;
+      return t.next(!1), o.dispose;
     }),
-    hidden$: M(i, f.UNIVER_DOC)
+    hidden$: A(n, v.UNIVER_DOC)
   };
 }
-function Fi(i) {
-  const e = i.get(v);
+function rr(n) {
+  const e = n.get(C);
   return {
-    id: En.id,
-    group: I.TOOLBAR_LAYOUT,
-    type: T.BUTTON,
+    id: uo.id,
+    group: P.TOOLBAR_LAYOUT,
+    type: x.BUTTON,
     icon: "RightJustifyingSingle",
     tooltip: "toolbar.alignRight",
-    positions: [b.TOOLBAR_START],
-    activated$: new y((t) => {
-      const n = e.onCommandExecuted((r) => {
+    positions: [D.TOOLBAR_START],
+    activated$: new w((t) => {
+      const o = e.onCommandExecuted((i) => {
         var s;
-        const o = r.id;
-        if (o === x.id || o === Ae.id) {
-          const a = we(i);
+        const r = i.id;
+        if (r === V.id || r === je.id) {
+          const a = ze(n);
           if (a == null)
             return;
           const c = (s = a.paragraphStyle) == null ? void 0 : s.horizontalAlign;
-          t.next(c === De.RIGHT);
+          t.next(c === Le.RIGHT);
         }
       });
-      return t.next(!1), n.dispose;
+      return t.next(!1), o.dispose;
     }),
-    hidden$: M(i, f.UNIVER_DOC)
+    hidden$: A(n, v.UNIVER_DOC)
   };
 }
-function Vi(i) {
-  const e = i.get(v);
+function sr(n) {
+  const e = n.get(C);
   return {
-    id: xn.id,
-    group: I.TOOLBAR_LAYOUT,
-    type: T.BUTTON,
+    id: ho.id,
+    group: P.TOOLBAR_LAYOUT,
+    type: x.BUTTON,
     icon: "AlignTextBothSingle",
     tooltip: "toolbar.alignJustify",
-    positions: [b.TOOLBAR_START],
-    activated$: new y((t) => {
-      const n = e.onCommandExecuted((r) => {
+    positions: [D.TOOLBAR_START],
+    activated$: new w((t) => {
+      const o = e.onCommandExecuted((i) => {
         var s;
-        const o = r.id;
-        if (o === x.id || o === Ae.id) {
-          const a = we(i);
+        const r = i.id;
+        if (r === V.id || r === je.id) {
+          const a = ze(n);
           if (a == null)
             return;
           const c = (s = a.paragraphStyle) == null ? void 0 : s.horizontalAlign;
-          t.next(c === De.JUSTIFIED);
+          t.next(c === Le.JUSTIFIED);
         }
       });
-      return t.next(!1), n.dispose;
+      return t.next(!1), o.dispose;
     }),
-    hidden$: M(i, f.UNIVER_DOC)
+    hidden$: A(n, v.UNIVER_DOC)
   };
 }
-function ji(i) {
+function ar(n) {
   return {
-    id: Dn.id,
-    group: I.TOOLBAR_LAYOUT,
-    type: T.BUTTON,
+    id: go.id,
+    group: P.TOOLBAR_LAYOUT,
+    type: x.BUTTON,
     icon: "OrderSingle",
     tooltip: "toolbar.order",
-    positions: [b.TOOLBAR_START],
-    hidden$: M(i, f.UNIVER_DOC)
+    positions: [D.TOOLBAR_START],
+    hidden$: A(n, v.UNIVER_DOC)
   };
 }
-function Wi(i) {
+function cr(n) {
   return {
-    id: Pn.id,
-    group: I.TOOLBAR_LAYOUT,
-    type: T.BUTTON,
+    id: po.id,
+    group: P.TOOLBAR_LAYOUT,
+    type: x.BUTTON,
     icon: "UnorderSingle",
-    tooltip: "toolbar.unorder",
-    positions: [b.TOOLBAR_START],
-    hidden$: M(i, f.UNIVER_DOC)
-  };
-}
-function zi(i) {
-  return {
-    id: Nn.id,
-    type: T.BUTTON,
-    title: "toolbar.resetColor",
-    icon: "NoColor",
-    positions: He.id
-  };
-}
-function ki(i) {
-  const e = i.get(v), t = i.get(yt);
-  return {
-    id: He.id,
-    tooltip: "toolbar.fillColor.main",
-    group: I.TOOLBAR_FORMAT,
-    type: T.BUTTON_SELECTOR,
-    positions: [b.TOOLBAR_START],
-    icon: "PaintBucket",
-    selections: [
-      {
-        label: {
-          name: nt,
-          hoverable: !1
-        }
-      }
-    ],
-    value$: new y((n) => {
-      const r = t.getCurrentTheme().primaryColor, o = e.onCommandExecuted((s) => {
-        if (s.id === He.id) {
-          const a = s.params.value;
-          n.next(a != null ? a : r);
-        }
-      });
-      return n.next(r), o.dispose;
-    }),
-    hidden$: M(i, f.UNIVER_DOC)
-  };
-}
-function V(i) {
-  var c;
-  const e = i.get(P), t = i.get(J), n = e.getCurrentUniverDocInstance(), r = t.getActiveRange();
-  if (n == null || r == null)
-    return;
-  const o = (c = n.getBody()) == null ? void 0 : c.textRuns;
-  if (o == null)
-    return;
-  const { startOffset: s } = r;
-  let a;
-  for (let l = 0; l < o.length; l++) {
-    const u = o[l], h = o[l + 1];
-    if (h && h.st === h.ed && s === h.st) {
-      a = h;
-      break;
-    }
-    if (u.st <= s && s <= u.ed) {
-      a = u;
-      break;
-    }
-  }
-  return a;
-}
-function we(i) {
-  var c;
-  const e = i.get(P), t = i.get(J), n = e.getCurrentUniverDocInstance(), r = t.getActiveRange();
-  if (n == null || r == null)
-    return;
-  const o = (c = n.getBody()) == null ? void 0 : c.paragraphs;
-  if (o == null)
-    return;
-  const { startOffset: s } = r;
-  let a = -1;
-  for (const l of o) {
-    const { startIndex: u } = l;
-    if (s > a && s <= u)
-      return l;
-    a = u;
-  }
-  return null;
-}
-var Hi = Object.defineProperty, Yi = Object.getOwnPropertyDescriptor, Gi = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Yi(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && Hi(e, t, r), r;
-}, W = (i, e) => (t, n) => e(t, n, i);
-let ce = class extends k {
-  constructor(i, e, t, n, r, o, s, a) {
-    super(), this._config = i, this._injector = e, this._componentManager = t, this._layoutService = n, this._editorService = r, this._menuService = o, this._uiPartsService = s, this._univerInstanceService = a, this._init();
-  }
-  _initCustomComponents() {
-    const i = this._componentManager;
-    this.disposeWithMe(i.register(nt, qn)), this.disposeWithMe(i.register(At, rn)), this.disposeWithMe(i.register(Lt, on)), this.disposeWithMe(i.register($t, sn));
-  }
-  _initMenus() {
-    const { menu: i = {} } = this._config;
-    [
-      Ei,
-      xi,
-      Di,
-      Pi,
-      Ni,
-      Ui,
-      Li,
-      Ai,
-      $i,
-      Bi,
-      wi,
-      Fi,
-      Vi,
-      ji,
-      Wi,
-      zi,
-      ki
-    ].forEach((e) => {
-      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(e), i));
-    });
-  }
-  _init() {
-    this._initCustomComponents(), this._initMenus(), this._initDocBackground(), this._initFocusHandler();
-  }
-  _initDocBackground() {
-    const i = this._univerInstanceService.getAllUnitsForType(f.UNIVER_DOC)[0].getUnitId();
-    if (i == null)
-      return;
-    this._editorService.isEditor(i) || this.disposeWithMe(
-      this._uiPartsService.registerComponent(an.CONTENT, () => jn(yi, this._injector))
-    );
-  }
-  _initFocusHandler() {
-    this.disposeWithMe(
-      this._layoutService.registerFocusHandler(f.UNIVER_DOC, () => {
-        this._injector.get(he).focus();
-      })
-    );
-  }
-};
-ce = Gi([
-  U(A.Rendered, ce),
-  W(1, O(Pe)),
-  W(2, O(cn)),
-  W(3, xt),
-  W(4, L),
-  W(5, ln),
-  W(6, dn),
-  W(7, P)
-], ce);
-const Xi = {
-  id: Un.id,
-  preconditions: ni,
-  binding: E.ENTER
-}, Ki = {
-  id: An.id,
-  preconditions: N,
-  binding: E.BACKSPACE
-}, Zi = {
-  id: Ln.id,
-  preconditions: N,
-  binding: E.DELETE
-}, qi = 10, Ji = 6;
-function Qi() {
-  return Je.generateRandomId(Ji);
-}
-function er(i) {
-  const e = i.match(/data-copy-id="([^\s]+)"/);
-  return e && e[1] ? e[1] : null;
-}
-class tr {
-  constructor() {
-    g(this, "_cache", new kt(qi));
-  }
-  set(e, t) {
-    this._cache.set(e, t);
-  }
-  get(e) {
-    return this._cache.get(e);
-  }
-  clear() {
-    this._cache.clear();
-  }
-}
-const St = new tr();
-function it(i) {
-  const e = i.style, t = {}, n = i.tagName.toLowerCase();
-  switch (n) {
-    case "b":
-    case "em":
-    case "strong": {
-      t.bl = C.TRUE;
-      break;
-    }
-    case "s": {
-      t.st = {
-        s: C.TRUE
-      };
-      break;
-    }
-    case "u": {
-      t.ul = {
-        s: C.TRUE
-      };
-      break;
-    }
-    case "i": {
-      t.it = C.TRUE;
-      break;
-    }
-    case "sub":
-    case "sup": {
-      t.va = n === "sup" ? K.SUPERSCRIPT : K.SUBSCRIPT;
-      break;
-    }
-  }
-  for (let r = 0; r < e.length; r++) {
-    const o = e[r], s = e.getPropertyValue(o);
-    switch (o) {
-      case "font-family": {
-        t.ff = s;
-        break;
-      }
-      case "font-size": {
-        const a = Number.parseInt(s);
-        Number.isNaN(a) || (s.endsWith("pt") ? t.fs = a : s.endsWith("px") && (t.fs = Wn(a)));
-        break;
-      }
-      case "font-style": {
-        s === "italic" && (t.it = C.TRUE);
-        break;
-      }
-      case "font-weight": {
-        Number(s) > 400 && (t.bl = C.TRUE);
-        break;
-      }
-      case "text-decoration": {
-        /underline/.test(s) ? t.ul = {
-          s: C.TRUE
-        } : /overline/.test(s) ? t.ol = {
-          s: C.TRUE
-        } : /line-through/.test(s) && (t.st = {
-          s: C.TRUE
-        });
-        break;
-      }
-      case "color": {
-        const a = new st(s);
-        a.isValid && (t.cl = {
-          rgb: a.toRgbString()
-        });
-        break;
-      }
-      case "background-color": {
-        const a = new st(s);
-        a.isValid && (t.bg = {
-          rgb: a.toRgbString()
-        });
-        break;
-      }
-    }
-  }
-  return t;
-}
-function nr(i) {
-  const e = new DOMParser(), t = `<x-univer id="univer-root">${i}</x-univer>`;
-  return e.parseFromString(t, "text/html").querySelector("#univer-root");
-}
-function vt(i, e) {
-  const t = i.tagName.toLowerCase();
-  return typeof e == "string" ? t === e : Array.isArray(e) ? e.some((n) => n === t) : e(i);
-}
-const Ee = class Ee {
-  constructor() {
-    g(this, "_styleCache", /* @__PURE__ */ new Map());
-    g(this, "_styleRules", []);
-    g(this, "_afterProcessRules", []);
-  }
-  static use(e) {
-    if (this._pluginList.includes(e))
-      throw new Error(`Univer paste plugin ${e.name} already added`);
-    this._pluginList.push(e);
-  }
-  convert(e) {
-    const t = Ee._pluginList.find((o) => o.checkPasteType(e)), n = nr(e), r = {
-      dataStream: "",
-      textRuns: []
-    };
-    return t && (this._styleRules = [...t.stylesRules], this._afterProcessRules = [...t.afterProcessRules]), this._styleCache.clear(), this._process(null, n == null ? void 0 : n.childNodes, r), this._styleCache.clear(), this._styleRules = [], this._afterProcessRules = [], r;
-  }
-  _process(e, t, n) {
-    var r;
-    for (const o of t)
-      if (o.nodeType === Node.TEXT_NODE) {
-        const s = (r = o.nodeValue) == null ? void 0 : r.replace(/[\r\n]/g, "");
-        let a;
-        e && this._styleCache.has(e) && (a = this._styleCache.get(e)), n.dataStream += s, a && Object.getOwnPropertyNames(a).length && n.textRuns.push({
-          st: n.dataStream.length - s.length,
-          ed: n.dataStream.length,
-          ts: a
-        });
-      } else if (o.nodeType === Node.ELEMENT_NODE) {
-        const s = e ? this._styleCache.get(e) : {}, a = this._styleRules.find(({ filter: h }) => vt(o, h)), c = a ? a.getStyle(o) : it(o);
-        this._styleCache.set(o, { ...s, ...c });
-        const { childNodes: l } = o;
-        this._process(o, l, n);
-        const u = this._afterProcessRules.find(
-          ({ filter: h }) => vt(o, h)
-        );
-        u && u.handler(n, o);
-      }
-  }
-};
-g(Ee, "_pluginList", []);
-let Z = Ee;
-const ir = {
-  name: "univer-doc-paste-plugin-lark",
-  checkPasteType(i) {
-    return /lark-record-clipboard/i.test(i);
-  },
-  // TODO: @JOCS, support inline code copy from lark.
-  stylesRules: [
-    {
-      filter: ["s"],
-      getStyle(i) {
-        const e = it(i);
-        return {
-          st: {
-            s: C.TRUE
-          },
-          ...e
-        };
-      }
-    }
-  ],
-  afterProcessRules: [
-    {
-      filter(i) {
-        return i.tagName === "DIV" && /ace-line/i.test(i.className);
-      },
-      handler(i) {
-        i.paragraphs == null && (i.paragraphs = []), i.paragraphs.push({
-          startIndex: i.dataStream.length
-        }), i.dataStream += "\r";
-      }
-    }
-  ]
-}, rr = ir;
-function Ft(i) {
-  const e = i.style, t = {};
-  for (let n = 0; n < e.length; n++) {
-    const r = e[n], o = e.getPropertyValue(r);
-    switch (r) {
-      case "margin-top": {
-        const s = Number.parseInt(o);
-        t.spaceAbove = /pt/.test(o) ? ht(s) : s;
-        break;
-      }
-      case "margin-bottom": {
-        const s = Number.parseInt(o);
-        t.spaceBelow = /pt/.test(o) ? ht(s) : s;
-        break;
-      }
-      case "line-height": {
-        const s = Number.parseFloat(o);
-        t.lineSpacing = s;
-        break;
-      }
-    }
-  }
-  return Object.getOwnPropertyNames(t).length ? t : null;
-}
-const or = {
-  name: "univer-doc-paste-plugin-word",
-  checkPasteType(i) {
-    return /word|mso/i.test(i);
-  },
-  stylesRules: [
-    {
-      filter: ["b"],
-      getStyle(i) {
-        const e = it(i);
-        return { bl: C.TRUE, ...e };
-      }
-    }
-  ],
-  afterProcessRules: [
-    {
-      filter(i) {
-        return i.tagName === "P" && /mso/i.test(i.className);
-      },
-      handler(i, e) {
-        i.paragraphs == null && (i.paragraphs = []);
-        const t = {
-          startIndex: i.dataStream.length
-        }, n = Ft(e);
-        n && (t.paragraphStyle = n), i.paragraphs.push(t), i.dataStream += "\r";
-      }
-    }
-  ]
-}, sr = or, ar = {
-  name: "univer-doc-paste-plugin-univer",
-  checkPasteType(i) {
-    return /UniverNormal/i.test(i);
-  },
-  stylesRules: [],
-  afterProcessRules: [
-    {
-      filter(i) {
-        return i.tagName === "P" && /UniverNormal/i.test(i.className);
-      },
-      handler(i, e) {
-        i.paragraphs == null && (i.paragraphs = []);
-        const t = {
-          startIndex: i.dataStream.length
-        }, n = Ft(e);
-        n && (t.paragraphStyle = n), i.paragraphs.push(t), i.dataStream += "\r";
-      }
-    }
-  ]
-}, cr = ar;
-function Ct(i, e) {
-  const { st: t, ed: n, ts: r = {} } = e, { ff: o, fs: s, it: a, bl: c, ul: l, st: u, ol: h, bg: m, cl: p, va: S } = r;
-  let d = i.slice(t, n);
-  const _ = [];
-  return a === C.TRUE && (d = `<i>${d}</i>`), S === K.SUPERSCRIPT ? d = `<sup>${d}</sup>` : S === K.SUBSCRIPT && (d = `<sub>${d}</sub>`), (l == null ? void 0 : l.s) === C.TRUE && (d = `<u>${d}</u>`), (u == null ? void 0 : u.s) === C.TRUE && (d = `<s>${d}</s>`), c === C.TRUE && (d = `<strong>${d}</strong>`), o && _.push(`font-family: ${o}`), p && _.push(`color: ${p.rgb}`), s && _.push(`font-size: ${s}pt`), h && _.push("text-decoration: overline"), m && _.push(`background: ${m.rgb}`), _.length ? `<span style="${_.join("; ")};">${d}</span>` : d;
-}
-function ze(i, e, t) {
-  const { dataStream: n, textRuns: r = [] } = i;
-  let o = e;
-  const s = [];
-  for (const a of r) {
-    const { st: c, ed: l } = a;
-    Je.hasIntersectionBetweenTwoRanges(e, t, c, l) && (c > o ? (s.push(n.slice(o, c)), s.push(Ct(n, {
-      ...a,
-      ed: Math.min(l, t)
-    }))) : s.push(Ct(n, {
-      ...a,
-      st: o,
-      ed: Math.min(l, t)
-    }))), o = Math.max(e, Math.min(l, t));
-  }
-  return o !== t && s.push(n.slice(o, t)), s.join("");
-}
-function Ot(i, e = !0) {
-  var t;
-  if (e && ((t = i.paragraphs) != null && t.length)) {
-    const { dataStream: n, paragraphs: r = [] } = i;
-    let o = "", s = -1;
-    for (const a of r) {
-      const { startIndex: c, paragraphStyle: l = {} } = a, { spaceAbove: u, spaceBelow: h, lineSpacing: m } = l, p = [];
-      u != null && (typeof u == "number" ? p.push(`margin-top: ${u}px`) : p.push(`margin-top: ${u.v}px`)), h != null && (typeof h == "number" ? p.push(`margin-bottom: ${h}px`) : p.push(`margin-bottom: ${h.v}px`)), m != null && p.push(`line-height: ${m}`), c > s + 1 ? o += `<p class="UniverNormal" ${p.length ? `style="${p.join("; ")};"` : ""}>${ze(i, s + 1, c)}</p>` : o += `<p class="UniverNormal" ${p.length ? `style="${p.join("; ")};"` : ""}></p>`, s = c;
-    }
-    return s !== n.length && (o += ze(i, s, n.length)), o;
-  } else
-    return ze(i, 0, i.dataStream.length);
-}
-class lr {
-  convert(e) {
-    if (e.length === 0)
-      throw new Error("The bodyList length at least to be 1");
-    if (e.length === 1)
-      return Ot(e[0]);
-    let t = "";
-    for (const n of e)
-      t += '<p className="UniverNormal">', t += Ot(n, !1), t += "</p>";
-    return t;
-  }
-}
-var dr = Object.defineProperty, ur = Object.getOwnPropertyDescriptor, hr = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? ur(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && dr(e, t, r), r;
-}, re = (i, e) => (t, n) => e(t, n, i);
-Z.use(sr);
-Z.use(rr);
-Z.use(cr);
-function pr(i) {
-  const e = i.replace(/\n/g, "\r"), t = [];
-  for (let n = 0; n < e.length; n++)
-    e[n] === "\r" && t.push({ startIndex: n });
-  return {
-    dataStream: e,
-    paragraphs: t
-  };
-}
-const pe = tn("doc.clipboard-service");
-let Xe = class extends k {
-  constructor(e, t, n, r, o) {
-    super();
-    g(this, "_clipboardHooks", []);
-    g(this, "_htmlToUDM", new Z());
-    g(this, "_umdToHtml", new lr());
-    this._univerInstanceService = e, this._logService = t, this._commandService = n, this._clipboardInterfaceService = r, this._textSelectionManagerService = o;
-  }
-  async copy() {
-    const e = this._getDocumentBodyInRanges();
-    if (e.length === 0)
-      return !1;
-    try {
-      this._setClipboardData(e);
-    } catch (t) {
-      return this._logService.error("[DocClipboardService] copy failed", t), !1;
-    }
-    return !0;
-  }
-  async cut() {
-    return this._cut();
-  }
-  async paste(e) {
-    const t = await this._generateBodyFromClipboardItems(e);
-    return this._paste(t);
-  }
-  async legacyPaste(e, t) {
-    const n = this._generateBodyFromHtmlAndText(e, t);
-    return this._paste(n);
-  }
-  async _cut() {
-    var o;
-    const {
-      segmentId: e,
-      endOffset: t,
-      style: n
-    } = (o = this._textSelectionManagerService.getActiveRange()) != null ? o : {}, r = this._textSelectionManagerService.getSelections();
-    if (e == null && this._logService.error("[DocClipboardController] segmentId is not existed"), t == null || r == null)
-      return !1;
-    this.copy();
-    try {
-      let s = t;
-      for (const c of r) {
-        const { startOffset: l, endOffset: u } = c;
-        l == null || u == null || u <= t && (s -= u - l);
-      }
-      const a = [
-        {
-          startOffset: s,
-          endOffset: s,
-          style: n
+    tooltip: "toolbar.unorder",
+    positions: [D.TOOLBAR_START],
+    hidden$: A(n, v.UNIVER_DOC)
+  };
+}
+function lr(n) {
+  return {
+    id: _o.id,
+    type: x.BUTTON,
+    title: "toolbar.resetColor",
+    icon: "NoColor",
+    positions: tt.id
+  };
+}
+function dr(n) {
+  const e = n.get(C), t = n.get(Qt);
+  return {
+    id: tt.id,
+    tooltip: "toolbar.fillColor.main",
+    group: P.TOOLBAR_FORMAT,
+    type: x.BUTTON_SELECTOR,
+    positions: [D.TOOLBAR_START],
+    icon: "PaintBucket",
+    selections: [
+      {
+        label: {
+          name: _t,
+          hoverable: !1
         }
-      ];
-      return this._commandService.executeCommand(Dt.id, { segmentId: e, textRanges: a });
-    } catch {
-      return this._logService.error("[DocClipboardController] cut content failed"), !1;
-    }
-  }
-  async _paste(e) {
-    var s;
-    const { segmentId: t, endOffset: n, style: r } = (s = this._textSelectionManagerService.getActiveRange()) != null ? s : {}, o = this._textSelectionManagerService.getSelections();
-    if (t == null && this._logService.error("[DocClipboardController] segmentId does not exist!"), n == null || o == null)
-      return !1;
-    try {
-      let a = n;
-      for (const l of o) {
-        const { startOffset: u, endOffset: h } = l;
-        u == null || h == null || h <= n && (a += e.dataStream.length - (h - u));
       }
-      const c = [
-        {
-          startOffset: a,
-          endOffset: a,
-          style: r
+    ],
+    value$: new w((o) => {
+      const i = t.getCurrentTheme().primaryColor, r = e.onCommandExecuted((s) => {
+        if (s.id === tt.id) {
+          const a = s.params.value;
+          o.next(a != null ? a : i);
         }
-      ];
-      return this._commandService.executeCommand(Pt.id, { body: e, segmentId: t, textRanges: c });
-    } catch {
-      return this._logService.error("[DocClipboardController]", "clipboard is empty."), !1;
+      });
+      return o.next(i), r.dispose;
+    }),
+    hidden$: A(n, v.UNIVER_DOC)
+  };
+}
+function q(n) {
+  var d;
+  const e = n.get(L), t = n.get(ne), o = e.getCurrentUniverDocInstance(), i = t.getActiveRange();
+  if (o == null || i == null)
+    return;
+  const { startOffset: r, segmentId: s } = i, a = (d = o.getSelfOrHeaderFooterModel(s).getBody()) == null ? void 0 : d.textRuns;
+  if (a == null)
+    return;
+  let c;
+  for (let p = 0; p < a.length; p++) {
+    const g = a[p], h = a[p + 1];
+    if (h && h.st === h.ed && r === h.st) {
+      c = h;
+      break;
+    }
+    if (g.st <= r && r <= g.ed) {
+      c = g;
+      break;
     }
   }
-  async _setClipboardData(e) {
-    const t = Qi(), n = e.length > 1 ? e.map((o) => o.dataStream).join(`
-`) : e[0].dataStream;
-    let r = this._umdToHtml.convert(e);
-    return e.length === 1 && (r = r.replace(/(<[a-z]+)/, (o, s) => `${s} data-copy-id="${t}"`), St.set(t, e[0])), this._clipboardInterfaceService.write(n, r);
+  return c;
+}
+function ze(n) {
+  var d;
+  const e = n.get(L), t = n.get(ne), o = e.getCurrentUniverDocInstance(), i = t.getActiveRange();
+  if (o == null || i == null)
+    return;
+  const { startOffset: r, segmentId: s } = i, a = (d = o.getSelfOrHeaderFooterModel(s).getBody()) == null ? void 0 : d.paragraphs;
+  if (a == null)
+    return;
+  let c = -1;
+  for (const p of a) {
+    const { startIndex: g } = p;
+    if (r > c && r <= g)
+      return p;
+    c = g;
   }
-  addClipboardHook(e) {
-    return this._clipboardHooks.push(e), B(() => {
-      const t = this._clipboardHooks.indexOf(e);
-      t > -1 && this._clipboardHooks.splice(t, 1);
+  return null;
+}
+var ur = Object.defineProperty, hr = Object.getOwnPropertyDescriptor, gr = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? hr(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && ur(e, t, i), i;
+}, J = (n, e) => (t, o) => e(t, o, n);
+let Se = class extends K {
+  constructor(n, e, t, o, i, r, s, a) {
+    super(), this._config = n, this._injector = e, this._componentManager = t, this._layoutService = o, this._editorService = i, this._menuService = r, this._uiPartsService = s, this._univerInstanceService = a, this._init();
+  }
+  _initCustomComponents() {
+    const n = this._componentManager;
+    this.disposeWithMe(n.register(_t, wo)), this.disposeWithMe(n.register(dn, $n)), this.disposeWithMe(n.register(un, Hn)), this.disposeWithMe(n.register(hn, Vn));
+  }
+  _initMenus() {
+    const { menu: n = {} } = this._config;
+    [
+      Yi,
+      Xi,
+      Ki,
+      Zi,
+      qi,
+      Ji,
+      er,
+      Qi,
+      tr,
+      nr,
+      or,
+      ir,
+      rr,
+      sr,
+      ar,
+      cr,
+      lr,
+      dr
+    ].forEach((e) => {
+      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(e), n));
     });
   }
-  _getDocumentBodyInRanges() {
-    const e = this._textSelectionManagerService.getSelections(), t = this._univerInstanceService.getCurrentUniverDocInstance(), n = [];
-    if (e == null || !t)
-      return n;
-    for (const r of e) {
-      const { startOffset: o, endOffset: s, collapsed: a } = r;
-      if (a || o == null || s == null)
-        continue;
-      const c = t.sliceBody(o, s);
-      c != null && n.push(c);
-    }
-    return n;
+  _init() {
+    this._initCustomComponents(), this._initMenus(), this._initDocBackground(), this._initFocusHandler();
   }
-  async _generateBodyFromClipboardItems(e) {
-    try {
-      let t = "", n = "";
-      for (const r of e)
-        for (const o of r.types)
-          o === un ? n = await r.getType(o).then((s) => s && s.text()) : o === hn && (t = await r.getType(o).then((s) => s && s.text()));
-      return this._generateBodyFromHtmlAndText(t, n);
-    } catch (t) {
-      return Promise.reject(t);
-    }
+  _initDocBackground() {
+    const n = this._univerInstanceService.getAllUnitsForType(v.UNIVER_DOC)[0].getUnitId();
+    if (n == null)
+      return;
+    this._editorService.isEditor(n) || this.disposeWithMe(
+      this._uiPartsService.registerComponent(jn.CONTENT, () => No(Fi, this._injector))
+    );
   }
-  _generateBodyFromHtmlAndText(e, t) {
-    if (!e) {
-      if (t)
-        return pr(t);
-      throw new Error("[DocClipboardService] html and text cannot be both empty!");
-    }
-    const n = er(e);
-    if (n) {
-      const r = St.get(n);
-      if (r)
-        return r;
-    }
-    return this._htmlToUDM.convert(e);
+  _initFocusHandler() {
+    this.disposeWithMe(
+      this._layoutService.registerFocusHandler(v.UNIVER_DOC, () => {
+        this._injector.get(oe).focus();
+      })
+    );
   }
 };
-Xe = hr([
-  re(0, P),
-  re(1, Et),
-  re(2, v),
-  re(3, et),
-  re(4, O(J))
-], Xe);
-function Fe(i) {
-  return i.getContextValue(xe) || i.getContextValue(Mt);
+Se = gr([
+  Ue(we.Rendered, Se),
+  J(1, T(Be)),
+  J(2, T(tn)),
+  J(3, en),
+  J(4, Y),
+  J(5, Wn),
+  J(6, kn),
+  J(7, L)
+], Se);
+const pr = {
+  id: fo.id,
+  preconditions: $o,
+  binding: H.ENTER
+}, _r = {
+  id: mo.id,
+  preconditions: z,
+  binding: H.BACKSPACE
+}, fr = {
+  id: So.id,
+  preconditions: z,
+  binding: H.DELETE
+};
+function Ge(n) {
+  return n.getContextValue(Ne) || n.getContextValue(Jt);
 }
-const rt = 999, _r = {
-  id: pn.id,
+const ft = 999, mr = {
+  id: zn.id,
   name: "doc.command.copy",
-  type: Qe.COMMAND,
+  type: de.COMMAND,
   multi: !0,
-  priority: rt,
-  preconditions: Fe,
-  handler: async (i) => i.get(pe).copy()
-}, gr = {
-  id: _n.id,
+  priority: ft,
+  preconditions: Ge,
+  handler: async (n) => n.get(Ce).copy()
+}, Sr = {
+  id: Gn.id,
   name: "doc.command.cut",
-  type: Qe.COMMAND,
+  type: de.COMMAND,
   multi: !0,
-  priority: rt,
-  preconditions: Fe,
-  handler: async (i) => i.get(pe).cut()
-}, fr = {
-  id: gn.id,
+  priority: ft,
+  preconditions: Ge,
+  handler: async (n) => n.get(Ce).cut()
+}, vr = {
+  id: Yn.id,
   name: "doc.command.paste",
-  type: Qe.COMMAND,
+  type: de.COMMAND,
   multi: !0,
-  priority: rt,
-  preconditions: Fe,
-  handler: async (i) => {
-    const e = i.get(pe), n = await i.get(et).read();
-    return n.length === 0 ? !1 : e.paste(n);
+  priority: ft,
+  preconditions: Ge,
+  handler: async (n) => {
+    const e = n.get(Ce), o = await n.get(gt).read();
+    return o.length === 0 ? !1 : e.paste(o);
   }
 };
-var mr = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, vr = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Sr(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && mr(e, t, r), r;
-}, oe = (i, e) => (t, n) => e(t, n, i);
-let Ce = class extends de {
-  constructor(i, e, t, n, r) {
-    super(), this._commandService = i, this._clipboardInterfaceService = e, this._docClipboardService = t, this._textSelectionRenderManager = n, this._contextService = r, this._init();
+var Or = Object.defineProperty, Rr = Object.getOwnPropertyDescriptor, Cr = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? Rr(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && Or(e, t, i), i;
+}, ge = (n, e) => (t, o) => e(t, o, n);
+let xe = class extends Oe {
+  constructor(n, e, t, o, i) {
+    super(), this._commandService = n, this._clipboardInterfaceService = e, this._docClipboardService = t, this._textSelectionRenderManager = o, this._contextService = i, this._init();
   }
   _init() {
-    [_r, gr, fr].forEach((i) => this.disposeWithMe(this._commandService.registerMultipleCommand(i))), [Pt, Dt].forEach((i) => this.disposeWithMe(this._commandService.registerCommand(i))), this._initLegacyPasteCommand();
+    [mr, Sr, vr].forEach((n) => this.disposeWithMe(this._commandService.registerMultipleCommand(n))), [on, nn].forEach((n) => this.disposeWithMe(this._commandService.registerCommand(n))), this._initLegacyPasteCommand();
   }
   _initLegacyPasteCommand() {
-    var i;
-    (i = this._textSelectionRenderManager) == null || i.onPaste$.pipe(le(this.dispose$)).subscribe((e) => {
-      var o, s;
-      if (!Fe(this._contextService))
+    var n;
+    (n = this._textSelectionRenderManager) == null || n.onPaste$.pipe(se(this.dispose$)).subscribe((e) => {
+      var r, s;
+      if (!Ge(this._contextService))
         return;
       e.event.preventDefault();
-      const t = e.event, n = (o = t.clipboardData) == null ? void 0 : o.getData("text/html"), r = (s = t.clipboardData) == null ? void 0 : s.getData("text/plain");
-      this._docClipboardService.legacyPaste(n, r);
+      const t = e.event, o = (r = t.clipboardData) == null ? void 0 : r.getData("text/html"), i = (s = t.clipboardData) == null ? void 0 : s.getData("text/plain");
+      this._docClipboardService.legacyPaste(o, i);
     });
   }
 };
-Ce = vr([
-  U(A.Rendered, Ce),
-  oe(0, v),
-  oe(1, et),
-  oe(2, pe),
-  oe(3, he),
-  oe(4, Ht)
-], Ce);
-var Cr = Object.defineProperty, Or = Object.getOwnPropertyDescriptor, Rr = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Or(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && Cr(e, t, r), r;
-}, Y = (i, e) => (t, n) => e(t, n, i);
-let Oe = class extends k {
-  constructor(e, t, n, r, o, s) {
+xe = Cr([
+  Ue(we.Rendered, xe),
+  ge(0, C),
+  ge(1, gt),
+  ge(2, Ce),
+  ge(3, oe),
+  ge(4, bn)
+], xe);
+var Er = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, Ir = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? Tr(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && Er(e, t, i), i;
+}, pe = (n, e) => (t, o) => e(t, o, n);
+let ye = class extends K {
+  constructor(e, t, o, i, r) {
     super();
-    g(this, "_initialEditors", /* @__PURE__ */ new Set());
-    this._univerInstanceService = e, this._docSkeletonManagerService = t, this._editorService = n, this._commandService = r, this._textSelectionRenderManager = o, this._renderManagerService = s, this._initialize();
+    E(this, "_initialEditors", /* @__PURE__ */ new Set());
+    this._univerInstanceService = e, this._editorService = t, this._commandService = o, this._textSelectionRenderManager = i, this._renderManagerService = r, this._initialize();
   }
   _initialize() {
     this.disposeWithMe(
@@ -1327,31 +1954,34 @@ let Oe = class extends k {
     }), this._commandExecutedListener(), this._initialSetValue(), this._initialBlur(), this._initialFocus(), this._initialValueChange();
   }
   _resize(e) {
-    var $, H, j;
+    var M, I, R;
     if (e == null)
       return;
     const t = this._editorService.getEditor(e);
     if ((t == null ? void 0 : t.cancelDefaultResizeListener) === !0)
       return;
-    const n = ($ = this._docSkeletonManagerService.getSkeletonByUnitId(e)) == null ? void 0 : $.skeleton, r = this._univerInstanceService.getUniverDocInstance(e);
-    if (t == null || t.render == null || n == null || r == null)
+    const o = this._univerInstanceService.getUniverDocInstance(e);
+    if (!o)
       return;
-    n.calculate();
-    const { marginTop: o = 0, marginBottom: s = 0, marginLeft: a = 0, marginRight: c = 0 } = r.getSnapshot().documentStyle, { scene: l, mainComponent: u } = t.render;
-    let { actualHeight: h, actualWidth: m } = n.getActualSize();
-    h += o + s, m += a + c;
-    const { width: p, height: S } = t.getBoundingClientRect(), d = l.getViewport(Q.VIEW_MAIN);
-    let _ = d == null ? void 0 : d.getScrollBar();
-    const R = Math.max(m, p), D = Math.max(h, S);
-    l.transformByState({
-      width: R,
-      height: D
-    }), u == null || u.resize(R, D), t.isSingle() ? m > p ? _ == null ? d && new Ye(d, { barSize: 8, enableVertical: !1 }) : d == null || d.resetCanvasSizeAndUpdateScrollBar() : (_ = null, d == null || d.scrollTo({ x: 0, y: 0 }), (j = d == null ? void 0 : d.getScrollBar()) == null || j.dispose()) : h > S ? _ == null ? d && new Ye(d, { enableHorizontal: !1, barSize: 8 }) : d == null || d.resetCanvasSizeAndUpdateScrollBar() : (_ = null, d == null || d.scrollTo({ x: 0, y: 0 }), (H = d == null ? void 0 : d.getScrollBar()) == null || H.dispose());
+    const i = (M = this._renderManagerService.getRenderById(o.getUnitId())) == null ? void 0 : M.with(N).getSkeleton();
+    if (t == null || t.render == null || i == null || o == null)
+      return;
+    i.calculate();
+    const { marginTop: r = 0, marginBottom: s = 0, marginLeft: a = 0, marginRight: c = 0 } = o.getSnapshot().documentStyle, { scene: d, mainComponent: p } = t.render;
+    let { actualHeight: g, actualWidth: h } = i.getActualSize();
+    g += r + s, h += a + c;
+    const { width: l, height: f } = t.getBoundingClientRect(), u = d.getViewport(te.VIEW_MAIN);
+    let _ = u == null ? void 0 : u.getScrollBar();
+    const m = Math.max(h, l), O = Math.max(g, f);
+    d.transformByState({
+      width: m,
+      height: O
+    }), p == null || p.resize(m, O), t.isSingle() ? h > l ? _ == null ? u && new nt(u, { barSize: 8, enableVertical: !1 }) : u == null || u.resetCanvasSizeAndUpdateScrollBar() : (_ = null, u == null || u.scrollTo({ x: 0, y: 0 }), (R = u == null ? void 0 : u.getScrollBar()) == null || R.dispose()) : g > f ? _ == null ? u && new nt(u, { enableHorizontal: !1, barSize: 8 }) : u == null || u.resetCanvasSizeAndUpdateScrollBar() : (_ = null, u == null || u.scrollTo({ x: 0, y: 0 }), (I = u == null ? void 0 : u.getScrollBar()) == null || I.dispose());
   }
   _initialSetValue() {
     this.disposeWithMe(
       this._editorService.setValue$.subscribe((e) => {
-        this._commandService.executeCommand($n.id, {
+        this._commandService.executeCommand(vo.id, {
           unitId: e.editorUnitId,
           body: e.body,
           segmentId: null
@@ -1366,19 +1996,19 @@ let Oe = class extends k {
       })
     ), this.disposeWithMe(
       this._textSelectionRenderManager.onBlur$.subscribe(() => {
-        var r;
-        const e = (r = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : r.getUnitId();
+        var i;
+        const e = (i = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : i.getUnitId();
         if (e == null)
           return;
-        const t = this._editorService.getEditor(e), n = this._editorService.getFocusEditor();
-        t == null || t.isSheetEditor() || n && n.editorUnitId === e || this._editorService.blur();
+        const t = this._editorService.getEditor(e), o = this._editorService.getFocusEditor();
+        t == null || t.isSheetEditor() || o && o.editorUnitId === e || this._editorService.blur();
       })
     );
   }
   _initialFocus() {
     this.disposeWithMe(
-      this._editorService.focus$.subscribe((n) => {
-        this._textSelectionRenderManager.removeAllTextRanges(), this._textSelectionRenderManager.addTextRanges([n]);
+      this._editorService.focus$.subscribe((o) => {
+        this._textSelectionRenderManager.removeAllTextRanges(), this._textSelectionRenderManager.addTextRanges([o]);
       })
     );
     const e = [
@@ -1388,17 +2018,17 @@ let Oe = class extends k {
       "univer-formula-help-param"
     ];
     this.disposeWithMe(
-      ft(window, "mousedown").subscribe((n) => {
-        const o = n.target.classList[0] || "";
-        if (Yt(o, e)) {
-          this._editorService.changeSpreadsheetFocusState(!0), n.stopPropagation();
+      yt(window, "mousedown").subscribe((o) => {
+        const r = o.target.classList[0] || "";
+        if (Mn(r, e)) {
+          this._editorService.changeSpreadsheetFocusState(!0), o.stopPropagation();
           return;
         }
         this._editorService.changeSpreadsheetFocusState(!1);
       })
-    ), this._univerInstanceService.getAllUnitsForType(f.UNIVER_SHEET).forEach((n) => {
-      const r = n.getUnitId(), o = this._renderManagerService.getRenderById(r), s = o == null ? void 0 : o.engine.getCanvas().getCanvasEle();
-      s != null && ft(s, "mousedown").subscribe((a) => {
+    ), this._univerInstanceService.getAllUnitsForType(v.UNIVER_SHEET).forEach((o) => {
+      const i = o.getUnitId(), r = this._renderManagerService.getRenderById(i), s = r == null ? void 0 : r.engine.getCanvas().getCanvasEle();
+      s != null && yt(s, "mousedown").subscribe((a) => {
         this._editorService.changeSpreadsheetFocusState(!0), a.stopPropagation();
       });
     });
@@ -1415,8 +2045,8 @@ let Oe = class extends k {
     );
   }
   _valueChange() {
-    var n;
-    const e = (n = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : n.getUnitId();
+    var o;
+    const e = (o = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : o.getUnitId();
     if (e == null)
       return;
     const t = this._editorService.getEditor(e);
@@ -1426,135 +2056,49 @@ let Oe = class extends k {
    * Listen to document edits to refresh the size of the formula editor.
    */
   _commandExecutedListener() {
-    const e = [tt.id, fn.id];
+    const e = [Ve.id, Xn.id];
     this.disposeWithMe(
       this._commandService.onCommandExecuted((t) => {
         if (e.includes(t.id)) {
-          const n = t.params, { unitId: r } = n;
-          if (this._editorService.isSheetEditor(r))
+          const o = t.params, { unitId: i } = o;
+          if (this._editorService.isSheetEditor(i))
             return;
-          this._resize(r), this._valueChange();
+          this._resize(i), this._valueChange();
         }
       })
     );
   }
 };
-Oe = Rr([
-  U(A.Rendered, Oe),
-  Y(0, P),
-  Y(1, O(ee)),
-  Y(2, L),
-  Y(3, v),
-  Y(4, he),
-  Y(5, F)
-], Oe);
-var Tr = Object.defineProperty, Ir = Object.getOwnPropertyDescriptor, br = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Ir(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && Tr(e, t, r), r;
-}, ge = (i, e) => (t, n) => e(t, n, i);
-let Re = class extends de {
-  constructor(e, t, n, r) {
-    super();
-    g(this, "_docRenderMap", /* @__PURE__ */ new Set());
-    this._docSkeletonManagerService = e, this._renderManagerService = t, this._commandService = n, this._editorService = r, this._initialRenderRefresh(), this._commandExecutedListener();
-  }
-  _initialRenderRefresh() {
-    this._docSkeletonManagerService.currentSkeletonBefore$.pipe(le(this.dispose$)).subscribe((e) => {
-      this._create(e);
-    });
-  }
-  _create(e) {
-    if (e == null)
-      return;
-    const { skeleton: t, unitId: n } = e;
-    let r = this._renderManagerService.getRenderById(n);
-    r == null && (this._renderManagerService.create(n), r = this._renderManagerService.getRenderById(n));
-    const { mainComponent: o, components: s } = r, a = o, c = s.get(X.BACKGROUND);
-    a.changeSkeleton(t), c.changeSkeleton(t), this._recalculateSizeBySkeleton(r, t);
-  }
-  _recalculateSizeBySkeleton(e, t) {
-    var m;
-    const { mainComponent: n, scene: r, unitId: o, components: s } = e, a = n, c = s.get(X.BACKGROUND), l = (m = t.getSkeletonData()) == null ? void 0 : m.pages;
-    if (l == null)
-      return;
-    let u = 0, h = 0;
-    for (let p = 0, S = l.length; p < S; p++) {
-      const d = l[p], { pageWidth: _, pageHeight: R } = d;
-      a.pageLayoutType === pt.VERTICAL ? (h += R, h += a.pageMarginTop, p === S - 1 && (h += a.pageMarginTop), u = Math.max(u, _)) : a.pageLayoutType === pt.HORIZONTAL && (u += _, p !== S - 1 && (u += a.pageMarginLeft), h = Math.max(h, R));
+ye = Ir([
+  Ue(we.Rendered, ye),
+  pe(0, L),
+  pe(1, Y),
+  pe(2, C),
+  pe(3, oe),
+  pe(4, k)
+], ye);
+var br = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, xr = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? Mr(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && br(e, t, i), i;
+}, _e = (n, e) => (t, o) => e(t, o, n);
+let at = class extends Oe {
+  constructor(n, e, t, o, i, r) {
+    super(), this._context = n, this._commandService = e, this._docSkeletonManagerService = t, this._configService = o, this._editorService = i, this._renderManagerService = r, this._addNewRender(), this._initRenderRefresh(), this._initCommandListener();
+  }
+  reRender(n) {
+    var i, r;
+    const e = (i = this._renderManagerService.getRenderById(n)) == null ? void 0 : i.with(N), t = e == null ? void 0 : e.getSkeleton();
+    if (!(!t || t.getViewModel().getDataModel().getSnapshot().disabled)) {
+      if (t.calculate(), this._editorService.isEditor(n)) {
+        (r = this._context.mainComponent) == null || r.makeDirty();
+        return;
+      }
+      this._recalculateSizeBySkeleton(t);
     }
-    a.resize(u, h), c.resize(u, h), this._editorService.isEditor(o) || r.resize(u, h);
-  }
-  _commandExecutedListener() {
-    const e = [tt.id];
-    this.disposeWithMe(
-      this._commandService.onCommandExecuted((t) => {
-        var n;
-        if (e.includes(t.id)) {
-          const r = t.params, { unitId: o } = r, s = this._docSkeletonManagerService.getSkeletonByUnitId(o);
-          if (s == null)
-            return;
-          const { skeleton: a } = s, c = this._renderManagerService.getRenderById(o);
-          if (c == null || !!a.getViewModel().getDataModel().getSnapshot().disabled)
-            return;
-          if (a.calculate(), this._editorService.isEditor(o)) {
-            (n = c.mainComponent) == null || n.makeDirty();
-            return;
-          }
-          this._recalculateSizeBySkeleton(c, a);
-        }
-      })
-    );
-  }
-};
-Re = br([
-  U(A.Rendered, Re),
-  ge(0, O(ee)),
-  ge(1, F),
-  ge(2, v),
-  ge(3, L)
-], Re);
-var Mr = Object.defineProperty, yr = Object.getOwnPropertyDescriptor, Er = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? yr(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && Mr(e, t, r), r;
-}, fe = (i, e) => (t, n) => e(t, n, i);
-let Te = class extends de {
-  constructor(e, t, n, r) {
-    super();
-    g(this, "_scene");
-    g(this, "_currentDocumentModel");
-    g(this, "_fps$", new Ut(""));
-    g(this, "fps$", this._fps$.asObservable());
-    this._renderManagerService = e, this._configService = t, this._univerInstanceService = n, this._editorService = r, this._initialize();
-  }
-  _initialize() {
-    this._renderManagerService.createRender$.pipe(le(this.dispose$)).subscribe((e) => {
-      this._create(e);
-    }), this._univerInstanceService.getCurrentTypeOfUnit$(f.UNIVER_DOC).pipe(le(this.dispose$)).subscribe((e) => {
-      this._create(e == null ? void 0 : e.getUnitId());
-    }), this._univerInstanceService.getAllUnitsForType(f.UNIVER_DOC).forEach((e) => {
-      this._create(e.getUnitId());
-    });
-  }
-  dispose() {
-    this._fps$.complete();
-  }
-  _create(e) {
-    if (e == null)
-      return;
-    const t = this._univerInstanceService.getUniverDocInstance(e);
-    t != null && (this._currentDocumentModel = t, this._renderManagerService.has(e) || this._addNewRender());
   }
   _addNewRender() {
-    const t = this._currentDocumentModel.getUnitId();
-    this._renderManagerService.createRender(t);
-    const n = this._renderManagerService.getRenderById(t);
-    if (n == null)
-      return;
-    const { scene: r, engine: o } = n;
-    this._scene = r;
-    const s = new zn(Q.VIEW_MAIN, r, {
+    const { scene: n, engine: e, unit: t } = this._context, o = new Mo(te.VIEW_MAIN, n, {
       left: 0,
       top: 0,
       bottom: 0,
@@ -1563,336 +2107,307 @@ let Te = class extends de {
       isRelativeY: !0,
       isWheelPreventDefaultX: !0
     });
-    r.attachControl(), r.on(kn.wheel, (l, u) => {
-      const h = l;
-      if (h.ctrlKey) {
-        const m = Math.abs(h.deltaX);
-        let p = m < 40 ? 0.2 : m < 80 ? 0.4 : 0.2;
-        p *= h.deltaY > 0 ? -1 : 1, r.scaleX < 1 && (p /= 2), r.scaleX + p > 4 ? r.scale(4, 4) : r.scaleX + p < 0.1 ? r.scale(0.1, 0.1) : h.preventDefault();
+    n.attachControl(), n.onMouseWheel$.subscribeEvent((s, a) => {
+      const c = s;
+      if (c.ctrlKey) {
+        const d = Math.abs(c.deltaX);
+        let p = d < 40 ? 0.2 : d < 80 ? 0.4 : 0.2;
+        p *= c.deltaY > 0 ? -1 : 1, n.scaleX < 1 && (p /= 2), n.scaleX + p > 4 ? n.scale(4, 4) : n.scaleX + p < 0.1 ? n.scale(0.1, 0.1) : c.preventDefault();
       } else
-        s.onMouseWheel(h, u);
-    }), this._configService.getConfig("hasScroll") !== !1 && new Ye(s), r.addLayer(
-      new _t(r, [], We),
-      new _t(r, [], Bn)
-    ), this._addComponent(n), this._currentDocumentModel.getShouldRenderLoopImmediately() && o.runRenderLoop(() => {
-      r.render(), this._fps$.next(Math.round(o.getFps()).toString());
-    }), this._renderManagerService.setCurrent(t);
-  }
-  _addComponent(e) {
-    const t = this._scene, n = this._currentDocumentModel, r = {
-      pageMarginLeft: n.documentStyle.marginLeft || 0,
-      pageMarginTop: n.documentStyle.marginTop || 0
-    }, o = new Hn(X.MAIN, void 0, r), s = new Yn(X.BACKGROUND, void 0, r);
-    o.zIndex = ut, s.zIndex = ut, e.mainComponent = o, e.components.set(X.MAIN, o), e.components.set(X.BACKGROUND, s), t.addObjects([o], We), t.addObjects([s], wn), this._editorService.getEditor(n.getUnitId()) == null && t.enableLayerCache(We);
+        o.onMouseWheel(c, a);
+    }), this._configService.getConfig("hasScroll") !== !1 && new nt(o), n.addLayer(
+      new Mt(n, [], Ye),
+      new Mt(n, [], Oo)
+    ), this._addComponent(), t.getShouldRenderLoopImmediately() && e.runRenderLoop(() => {
+      n.render();
+    });
+  }
+  _addComponent() {
+    const { scene: n, unit: e, components: t } = this._context, o = {
+      pageMarginLeft: e.documentStyle.marginLeft || 0,
+      pageMarginTop: e.documentStyle.marginTop || 0
+    }, i = new xo(ie.MAIN, void 0, o);
+    i.zIndex = Tt;
+    const r = new yo(ie.BACKGROUND, void 0, o);
+    r.zIndex = Tt, this._context.mainComponent = i, t.set(ie.MAIN, i), t.set(ie.BACKGROUND, r), n.addObjects([i], Ye), n.addObjects([r], Ro), this._editorService.getEditor(e.getUnitId()) == null && n.enableLayerCache(Ye);
+  }
+  _initRenderRefresh() {
+    this._docSkeletonManagerService.currentSkeletonBefore$.pipe(se(this.dispose$)).subscribe((n) => {
+      this._create(n);
+    });
+  }
+  _create(n) {
+    if (!n)
+      return;
+    const { mainComponent: e, components: t } = this._context, o = e, i = t.get(ie.BACKGROUND);
+    o.changeSkeleton(n), i.changeSkeleton(n), this._recalculateSizeBySkeleton(n);
+  }
+  _initCommandListener() {
+    const n = [Ve.id];
+    this.disposeWithMe(this._commandService.onCommandExecuted((e) => {
+      if (n.includes(e.id)) {
+        const t = e.params, { unitId: o } = t;
+        this.reRender(o);
+      }
+    }));
+  }
+  _recalculateSizeBySkeleton(n) {
+    var p;
+    const { mainComponent: e, scene: t, unitId: o, components: i } = this._context, r = e, s = i.get(ie.BACKGROUND), a = (p = n.getSkeletonData()) == null ? void 0 : p.pages;
+    if (a == null)
+      return;
+    let c = 0, d = 0;
+    for (let g = 0, h = a.length; g < h; g++) {
+      const l = a[g], { pageWidth: f, pageHeight: u } = l;
+      r.pageLayoutType === De.VERTICAL ? (d += u, d += r.pageMarginTop, g === h - 1 && (d += r.pageMarginTop), c = Math.max(c, f)) : r.pageLayoutType === De.HORIZONTAL && (c += f, g !== h - 1 && (c += r.pageMarginLeft), d = Math.max(d, u));
+    }
+    r.resize(c, d), s.resize(c, d), this._editorService.isEditor(o) || t.resize(c, d);
   }
 };
-Te = Er([
-  U(A.Starting, Te),
-  fe(0, F),
-  fe(1, Gt),
-  fe(2, P),
-  fe(3, L)
-], Te);
-var xr = Object.defineProperty, Dr = Object.getOwnPropertyDescriptor, Pr = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Dr(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && xr(e, t, r), r;
-}, me = (i, e) => (t, n) => e(t, n, i);
-let Ie = class extends k {
-  constructor(e, t, n, r) {
+at = xr([
+  _e(1, C),
+  _e(2, T(N)),
+  _e(3, xn),
+  _e(4, Y),
+  _e(5, k)
+], at);
+var yr = Object.defineProperty, Pr = Object.getOwnPropertyDescriptor, Dr = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? Pr(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && yr(e, t, i), i;
+}, Je = (n, e) => (t, o) => e(t, o, n);
+let ct = class extends K {
+  constructor(e, t, o, i) {
     super();
-    g(this, "_liquid", new Gn());
-    g(this, "_pageMarginCache", /* @__PURE__ */ new Map());
-    this._docSkeletonManagerService = e, this._renderManagerService = t, this._commandService = n, this._editorService = r, this._initialize(), this._commandExecutedListener();
+    E(this, "_liquid", new Po());
+    E(this, "_pageMarginCache", /* @__PURE__ */ new Map());
+    this._context = e, this._docSkeletonManagerService = t, this._commandService = o, this._editorService = i, this._initialize(), this._commandExecutedListener();
   }
   _initialize() {
-    this._initialRenderRefresh(), this._updateOnPluginChange();
-  }
-  _updateOnPluginChange() {
-  }
-  _initialRenderRefresh() {
     this._docSkeletonManagerService.currentSkeleton$.subscribe((e) => {
-      if (e == null)
-        return;
-      const { skeleton: t, unitId: n } = e, r = this._renderManagerService.getRenderById(n);
-      if (r == null)
-        return;
-      const { mainComponent: o } = r;
-      o.changeSkeleton(t), this._refreshDrawing(n, t, r);
+      e != null && this._refreshDrawing(e);
     });
   }
   _commandExecutedListener() {
-    const e = [tt.id, Le.id];
+    const e = [Ve.id, ve.id];
     this.disposeWithMe(
       this._commandService.onCommandExecuted((t) => {
-        var n;
+        var o;
         if (e.includes(t.id)) {
-          const r = t.params, { unitId: o } = r, s = this._docSkeletonManagerService.getCurrent();
-          if (s == null)
-            return;
-          const { unitId: a, skeleton: c } = s;
-          if (o !== a)
+          const i = t.params, { unitId: r } = i, s = this._docSkeletonManagerService.getSkeleton();
+          if (!s)
             return;
-          const l = this._renderManagerService.getRenderById(a);
-          if (l == null)
-            return;
-          if (this._editorService.isEditor(a)) {
-            (n = l.mainComponent) == null || n.makeDirty();
+          if (this._editorService.isEditor(r)) {
+            (o = this._context.mainComponent) == null || o.makeDirty();
             return;
           }
-          this._refreshDrawing(a, c, l);
+          this._refreshDrawing(s);
         }
       })
     );
   }
-  _refreshDrawing(e, t, n) {
-    const r = t == null ? void 0 : t.getSkeletonData(), { mainComponent: o, scene: s } = n, a = o;
-    if (!r)
+  _refreshDrawing(e) {
+    const t = e == null ? void 0 : e.getSkeletonData(), { mainComponent: o, scene: i, unitId: r } = this._context, s = o;
+    if (!t)
       return;
-    const { left: c, top: l, pageLayoutType: u, pageMarginLeft: h, pageMarginTop: m } = a, { pages: p } = r, S = [];
-    s.getAncestorScale(), this._liquid.reset(), this._pageMarginCache.clear();
-    for (let d = 0, _ = p.length; d < _; d++) {
-      const R = p[d], { skeDrawings: D, marginLeft: $, marginTop: H } = R;
-      this._liquid.translatePagePadding(R), D.forEach((j) => {
-        const { aLeft: te, aTop: ne, height: Ve, width: je, drawingId: ie, drawingOrigin: ot } = j, Vt = ot.layoutType === Xt.WRAP_NONE && ot.behindDoc === C.TRUE;
-        S.push({
-          unitId: e,
-          subUnitId: Kt,
-          floatingObjectId: ie,
-          behindText: Vt,
+    const { left: a, top: c, pageLayoutType: d, pageMarginLeft: p, pageMarginTop: g } = s, { pages: h } = t, l = [];
+    i.getAncestorScale(), this._liquid.reset(), this._pageMarginCache.clear();
+    for (let f = 0, u = h.length; f < u; f++) {
+      const _ = h[f], { skeDrawings: m, marginLeft: O, marginTop: M } = _;
+      this._liquid.translatePagePadding(_), m.forEach((I) => {
+        const { aLeft: R, aTop: y, height: j, width: W, drawingId: $, drawingOrigin: mt } = I, Sn = mt.layoutType === yn.WRAP_NONE && mt.behindDoc === S.TRUE;
+        l.push({
+          unitId: r,
+          subUnitId: Pn,
+          floatingObjectId: $,
+          behindText: Sn,
           floatingObject: {
-            left: te + c + this._liquid.x,
-            top: ne + l + this._liquid.y,
-            width: je,
-            height: Ve
+            left: R + a + this._liquid.x,
+            top: y + c + this._liquid.y,
+            width: W,
+            height: j
           }
-        }), this._pageMarginCache.set(ie, {
+        }), this._pageMarginCache.set($, {
           marginLeft: this._liquid.x,
           marginTop: this._liquid.y
         });
-      }), this._liquid.restorePagePadding(R), this._liquid.translatePage(R, u, h, m);
+      }), this._liquid.restorePagePadding(_), this._liquid.translatePage(_, d, p, g);
     }
   }
 };
-Ie = Pr([
-  U(A.Steady, Ie),
-  me(0, O(ee)),
-  me(1, F),
-  me(2, v),
-  me(3, L)
-], Ie);
-var Nr = Object.defineProperty, Ur = Object.getOwnPropertyDescriptor, Ar = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Ur(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && Nr(e, t, r), r;
-}, G = (i, e) => (t, n) => e(t, n, i);
-let be = class extends k {
-  constructor(e, t, n, r, o, s) {
-    super();
-    g(this, "_initializedRender", /* @__PURE__ */ new Set());
-    this._docSkeletonManagerService = e, this._univerInstanceService = t, this._commandService = n, this._renderManagerService = r, this._textSelectionManagerService = o, this._editorService = s, this._initialize();
+ct = Dr([
+  Je(1, T(N)),
+  Je(2, C),
+  Je(3, Y)
+], ct);
+var Ar = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, Nr = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? Fr(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && Ar(e, t, i), i;
+}, fe = (n, e) => (t, o) => e(t, o, n);
+let lt = class extends K {
+  constructor(n, e, t, o, i, r) {
+    super(), this._context = n, this._docSkeletonManagerService = e, this._univerInstanceService = t, this._commandService = o, this._textSelectionManagerService = i, this._editorService = r, this._init();
   }
-  dispose() {
-    super.dispose();
-  }
-  _initialize() {
-    this._skeletonListener(), this._commandExecutedListener(), this._initialRenderRefresh();
+  _init() {
+    this._initSkeletonListener(), this._initCommandExecutedListener(), this._initRenderRefresher(), setTimeout(() => this._updateViewZoom(1, !0), 20);
   }
-  _initialRenderRefresh() {
-    this._docSkeletonManagerService.currentSkeleton$.subscribe((e) => {
-      if (e == null)
+  _initRenderRefresher() {
+    this._docSkeletonManagerService.currentSkeleton$.subscribe((n) => {
+      if (n == null)
         return;
-      const { unitId: t } = e, n = this._renderManagerService.getRenderById(t);
-      if (n == null || this._initializedRender.has(t) || this._editorService.isEditor(t))
-        return;
-      this._initializedRender.add(t);
-      const { scene: r } = n;
-      this.disposeWithMe(
-        B(
-          r.onMouseWheelObserver.add((o) => {
-            if (!o.ctrlKey)
-              return;
-            const s = this._univerInstanceService.getCurrentUniverDocInstance();
-            if (!s)
-              return;
-            const a = Math.abs(o.deltaX);
-            let c = a < 40 ? 0.2 : a < 80 ? 0.4 : 0.2;
-            c *= o.deltaY > 0 ? -1 : 1, r.scaleX < 1 && (c /= 2);
-            const l = s.zoomRatio;
-            let u = +Number.parseFloat(`${l + c}`).toFixed(1);
-            u = u >= 4 ? 4 : u <= 0.1 ? 0.1 : u, this._commandService.executeCommand(Fn.id, {
-              zoomRatio: u,
-              unitId: s.getUnitId()
-            }), o.preventDefault();
-          })
-        )
-      );
+      const { unitId: e, scene: t } = this._context;
+      this._editorService.isEditor(e) || this.disposeWithMe(t.onMouseWheel$.subscribeEvent((o) => {
+        if (!o.ctrlKey)
+          return;
+        const i = this._univerInstanceService.getCurrentUniverDocInstance();
+        if (!i)
+          return;
+        const r = Math.abs(o.deltaX);
+        let s = r < 40 ? 0.2 : r < 80 ? 0.4 : 0.2;
+        s *= o.deltaY > 0 ? -1 : 1, t.scaleX < 1 && (s /= 2);
+        const a = i.zoomRatio;
+        let c = +Number.parseFloat(`${a + s}`).toFixed(1);
+        c = c >= 4 ? 4 : c <= 0.1 ? 0.1 : c, this._commandService.executeCommand(Co.id, {
+          zoomRatio: c,
+          unitId: i.getUnitId()
+        }), o.preventDefault();
+      }));
     });
   }
-  // private _zoomEventBinding() {
-  //     const scene = this._getDocObject()?.scene;
-  //     if (scene == null) {
-  //         return;
-  //     }
-  //     const viewportMain = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
-  // }
-  _skeletonListener() {
-    this.disposeWithMe(
-      B(
-        this._docSkeletonManagerService.currentSkeleton$.subscribe((e) => {
-          if (e == null)
-            return;
-          const t = this._univerInstanceService.getCurrentUniverDocInstance();
-          if (!t) return;
-          const n = t.zoomRatio || 1;
-          this._updateViewZoom(n, !1);
-        })
-      )
-    );
+  _initSkeletonListener() {
+    this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.subscribe((n) => {
+      if (n == null)
+        return;
+      const e = this._univerInstanceService.getCurrentUniverDocInstance();
+      if (!e) return;
+      const t = e.zoomRatio || 1;
+      this._updateViewZoom(t, !1);
+    }));
   }
-  _commandExecutedListener() {
-    const e = [Le.id];
-    this.disposeWithMe(
-      this._commandService.onCommandExecuted((t) => {
-        if (e.includes(t.id)) {
-          const n = this._univerInstanceService.getCurrentUniverDocInstance();
-          if (!n) return;
-          const r = t.params, { unitId: o } = r;
-          if (o !== n.getUnitId())
-            return;
-          const s = n.zoomRatio || 1;
-          this._updateViewZoom(s);
-        }
-      })
-    );
+  _initCommandExecutedListener() {
+    const n = [ve.id];
+    this.disposeWithMe(this._commandService.onCommandExecuted((e) => {
+      if (n.includes(e.id)) {
+        const t = this._univerInstanceService.getCurrentUniverDocInstance();
+        if (!t) return;
+        const o = e.params, { unitId: i } = o;
+        if (i !== t.getUnitId())
+          return;
+        const r = t.zoomRatio || 1;
+        this._updateViewZoom(r);
+      }
+    }));
   }
-  _updateViewZoom(e, t = !0) {
-    var r;
-    const n = this._getDocObject();
-    n != null && (n.scene.scale(e, e), this._calculatePagePosition(n, e), t && this._textSelectionManagerService.refreshSelection(), (r = n.scene.getTransformer()) == null || r.clearSelectedObjects());
+  _updateViewZoom(n, e = !0) {
+    var o;
+    const t = Q(this._context);
+    t.scene.scale(n, n), this._calculatePagePosition(t, n), e && this._textSelectionManagerService.refreshSelection(), (o = t.scene.getTransformer()) == null || o.clearSelectedObjects();
   }
-  _calculatePagePosition(e, t) {
-    const { document: n, scene: r, docBackground: o } = e, s = r == null ? void 0 : r.getParent(), { width: a, height: c, pageMarginLeft: l, pageMarginTop: u } = n;
-    if (s == null || a === Number.POSITIVE_INFINITY || c === Number.POSITIVE_INFINITY)
+  _calculatePagePosition(n, e) {
+    const { document: t, scene: o, docBackground: i } = n, r = o == null ? void 0 : o.getParent(), { width: s, height: a, pageMarginLeft: c, pageMarginTop: d } = t;
+    if (r == null || s === Number.POSITIVE_INFINITY || a === Number.POSITIVE_INFINITY)
       return;
-    const { width: h, height: m } = s;
-    let p = 0, S = 0, d = 0, _ = 0, R = Number.POSITIVE_INFINITY;
-    h > (a + l * 2) * t ? (p = h / 2 - a * t / 2, p /= t, d = (h - l * 2) / t, R = 0) : (p = l, d = a + l * 2, R = (d - h / t) / 2), m > c ? (S = m / 2 - c / 2, _ = (m - u * 2) / t) : (S = u, _ = c + u * 2), r.resize(d, _ + 200), n.translate(p, S), o.translate(p, S);
-    const D = r.getViewport(Q.VIEW_MAIN);
-    if (R !== Number.POSITIVE_INFINITY && D != null) {
-      const $ = D.transViewportScroll2ScrollValue(R, 0).x;
-      D.scrollTo({
-        x: $
+    const { width: p, height: g } = r;
+    let h = 0, l = 0, f = 0, u = 0, _ = Number.POSITIVE_INFINITY;
+    p > (s + c * 2) * e ? (h = p / 2 - s * e / 2, h /= e, f = (p - c * 2) / e, _ = 0) : (h = c, f = s + c * 2, _ = (f - p / e) / 2), g > a ? (l = g / 2 - a / 2, u = (g - d * 2) / e) : (l = d, u = a + d * 2), o.resize(f, u + 200), t.translate(h, l), i.translate(h, l);
+    const m = o.getViewport(te.VIEW_MAIN);
+    if (_ !== Number.POSITIVE_INFINITY && m != null) {
+      const O = m.transViewportScroll2ScrollValue(_, 0).x;
+      m.scrollTo({
+        x: O
       });
     }
     return this;
   }
-  _getDocObject() {
-    return Nt(this._univerInstanceService, this._renderManagerService);
-  }
 };
-be = Ar([
-  U(A.Rendered, be),
-  G(0, O(ee)),
-  G(1, P),
-  G(2, v),
-  G(3, F),
-  G(4, O(J)),
-  G(5, L)
-], be);
-var Lr = Object.defineProperty, $r = Object.getOwnPropertyDescriptor, Br = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? $r(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && Lr(e, t, r), r;
-}, z = (i, e) => (t, n) => e(t, n, i);
-let Me = class extends k {
-  constructor(e, t, n, r, o, s, a) {
+lt = Nr([
+  fe(1, T(N)),
+  fe(2, L),
+  fe(3, C),
+  fe(4, T(ne)),
+  fe(5, Y)
+], lt);
+var Lr = Object.defineProperty, Ur = Object.getOwnPropertyDescriptor, wr = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? Ur(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && Lr(e, t, i), i;
+}, re = (n, e) => (t, o) => e(t, o, n);
+let dt = class extends K {
+  constructor(e, t, o, i, r, s, a) {
     super();
-    g(this, "_loadedMap", /* @__PURE__ */ new WeakSet());
-    this._docSkeletonManagerService = e, this._univerInstanceService = t, this._commandService = n, this._renderManagerService = r, this._textSelectionRenderManager = o, this._textSelectionManagerService = s, this._editorService = a, this._initialize();
+    E(this, "_loadedMap", /* @__PURE__ */ new WeakSet());
+    this._context = e, this._commandService = t, this._editorService = o, this._instanceSrv = i, this._textSelectionRenderManager = r, this._docSkeletonManagerService = s, this._textSelectionManagerService = a, this._initialize();
   }
   _initialize() {
     this._init(), this._skeletonListener(), this._commandExecutedListener();
   }
   _init() {
-    this.disposeWithMe(
-      this._renderManagerService.currentRender$.subscribe((e) => {
-        this._create(e);
-      })
-    ), this._renderManagerService.getRenderAll().forEach((e, t) => {
-      this._create(t);
-    });
-  }
-  _create(e) {
-    if (e == null || this._univerInstanceService.getUniverDocInstance(e) == null)
-      return;
-    const t = this._getDocObjectById(e);
+    const { unitId: e } = this._context, t = Q(this._context);
     t == null || t.document == null || this._loadedMap.has(t.document) || (this._initialMain(e), this._loadedMap.add(t.document));
   }
   // eslint-disable-next-line max-lines-per-function
   _initialMain(e) {
-    const t = this._getDocObjectById(e);
-    if (t == null)
+    const t = Q(this._context), { document: o, scene: i } = t;
+    this.disposeWithMe(o.onPointerEnter$.subscribeEvent(() => {
+      this._isEditorReadOnly(e) || (o.cursor = xt.TEXT);
+    })), this.disposeWithMe(o.onPointerLeave$.subscribeEvent(() => {
+      o.cursor = xt.DEFAULT, i.resetCursor();
+    })), this.disposeWithMe(o.onPointerDown$.subscribeEvent((r, s) => {
+      if (this._isEditorReadOnly(e))
+        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: p } = r, g = this._getTransformCoordForDocumentOffset(d, p);
+      if (g != null) {
+        const {
+          pageLayoutType: h = De.VERTICAL,
+          pageMarginLeft: l,
+          pageMarginTop: f
+        } = o.getOffsetConfig(), { editArea: u } = c.findEditAreaByCoord(
+          g,
+          h,
+          l,
+          f
+        ), _ = this._docSkeletonManagerService.getViewModel(), m = _.getEditArea();
+        m !== F.BODY && u !== F.BODY && u !== m && _.setEditArea(u);
+      }
+      if (this._textSelectionRenderManager.eventTrigger(r), this._editorService.getEditor(e)) {
+        this._setEditorFocus(e);
+        const { offsetX: h, offsetY: l } = r;
+        setTimeout(() => {
+          this._setEditorFocus(e), this._textSelectionRenderManager.setCursorManually(h, l);
+        }, 0);
+      }
+      r.button !== 2 && s.stopPropagation();
+    })), this.disposeWithMe(o.onDblclick$.subscribeEvent((r) => {
+      this._isEditorReadOnly(e) || this._textSelectionRenderManager.handleDblClick(r);
+    })), this.disposeWithMe(o.onTripleClick$.subscribeEvent((r) => {
+      this._isEditorReadOnly(e) || this._textSelectionRenderManager.handleTripleClick(r);
+    }));
+  }
+  _getTransformCoordForDocumentOffset(e, t) {
+    const o = Q(this._context), { document: i, scene: r } = o, { documentTransform: s } = i.getOffsetConfig(), a = r.getViewports()[0];
+    if (a == null)
       return;
-    const { document: n, scene: r } = t;
-    this.disposeWithMe(
-      B(
-        n.onPointerEnterObserver.add(() => {
-          this._isEditorReadOnly(e) || (n.cursor = gt.TEXT);
-        })
-      )
-    ), this.disposeWithMe(
-      B(
-        n.onPointerLeaveObserver.add(() => {
-          n.cursor = gt.DEFAULT, r.resetCursor();
-        })
-      )
-    ), this.disposeWithMe(
-      B(
-        n == null ? void 0 : n.onPointerDownObserver.add((o, s) => {
-          if (this._isEditorReadOnly(e))
-            return;
-          const a = this._univerInstanceService.getCurrentUniverDocInstance();
-          (a == null ? void 0 : a.getUnitId()) !== e && this._univerInstanceService.setCurrentUnitForType(e), this._textSelectionRenderManager.eventTrigger(o);
-          const { offsetX: c, offsetY: l } = o;
-          this._editorService.getEditor(e) && (this._setEditorFocus(e), setTimeout(() => {
-            this._setEditorFocus(e), this._textSelectionRenderManager.setCursorManually(c, l);
-          }, 0)), o.button !== 2 && s.stopPropagation();
-        })
-      )
-    ), this.disposeWithMe(
-      B(
-        n == null ? void 0 : n.onDblclickObserver.add((o) => {
-          this._isEditorReadOnly(e) || this._textSelectionRenderManager.handleDblClick(o);
-        })
-      )
-    ), this.disposeWithMe(
-      B(
-        n == null ? void 0 : n.onTripleClickObserver.add((o) => {
-          this._isEditorReadOnly(e) || this._textSelectionRenderManager.handleTripleClick(o);
-        })
-      )
-    );
+    const c = a.transformVector2SceneCoord(sn.FromArray([e, t]));
+    return s.clone().invert().applyPoint(c);
   }
   _isEditorReadOnly(e) {
     const t = this._editorService.getEditor(e);
     return t ? t.isReadOnly() : !1;
   }
   _setEditorFocus(e) {
-    if (this._univerInstanceService.getAllUnitsForType(f.UNIVER_SHEET).length > 0) {
-      const n = this._univerInstanceService.getCurrentUnitForType(f.UNIVER_SHEET);
-      this._editorService.setOperationSheetUnitId(n.getUnitId());
-    }
     this._editorService.focusStyle(e);
   }
   _commandExecutedListener() {
-    const e = [Le.id];
+    const e = [ve.id];
     this.disposeWithMe(
       this._commandService.onCommandExecuted((t) => {
-        var n;
+        var o;
         if (e.includes(t.id)) {
-          const r = t.params, { unitId: o } = r, s = (n = this._textSelectionManagerService.getCurrentSelection()) == null ? void 0 : n.unitId;
-          if (o !== s)
+          const i = t.params, { unitId: r } = i, s = (o = this._textSelectionManagerService.getCurrentSelection()) == null ? void 0 : o.unitId;
+          if (r !== s)
             return;
           this._textSelectionManagerService.refreshSelection();
         }
@@ -1904,14 +2419,11 @@ let Me = class extends k {
       this._docSkeletonManagerService.currentSkeleton$.subscribe((e) => {
         if (e == null)
           return;
-        const { unitId: t, skeleton: n } = e, r = this._renderManagerService.getRenderById(t);
-        if (r == null)
-          return;
-        const { scene: o, mainComponent: s } = r;
-        this._textSelectionRenderManager.changeRuntime(n, o, s), this._textSelectionManagerService.setCurrentSelectionNotRefresh({
-          unitId: t,
+        const { scene: t, mainComponent: o, unitId: i } = this._context;
+        this._textSelectionRenderManager.changeRuntime(e, t, o), this._textSelectionManagerService.setCurrentSelectionNotRefresh({
+          unitId: i,
           subUnitId: ""
-        }), this._editorService.isEditor(t) || this._textSelectionManagerService.replaceTextRanges([
+        }), this._editorService.isEditor(i) || this._textSelectionManagerService.replaceTextRanges([
           {
             startOffset: 0,
             endOffset: 0
@@ -1920,131 +2432,102 @@ let Me = class extends k {
       })
     );
   }
-  _getDocObjectById(e) {
-    return this._univerInstanceService.getUnitType(e) !== f.UNIVER_DOC ? null : Vn(e, this._renderManagerService);
-  }
-};
-Me = Br([
-  U(A.Rendered, Me),
-  z(0, O(ee)),
-  z(1, P),
-  z(2, v),
-  z(3, F),
-  z(4, he),
-  z(5, O(J)),
-  z(6, L)
-], Me);
-var wr = Object.defineProperty, Fr = Object.getOwnPropertyDescriptor, Vr = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Fr(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && wr(e, t, r), r;
-}, se = (i, e) => (t, n) => e(t, n, i);
-const Rt = 1.5;
-let ye = class extends de {
-  constructor(i, e, t, n, r) {
-    super(), this._docSkeletonManagerService = i, this._textSelectionManagerService = e, this._editorService = t, this._univerInstanceService = n, this._renderManagerService = r, this._init();
-  }
-  _init() {
-    this._textSelectionManagerService.textSelection$.pipe(le(this.dispose$)).subscribe((i) => {
-      if (i == null)
-        return;
-      const { isEditing: e, unitId: t } = i;
-      e && this._scrollToSelection(t);
-    });
-  }
-  // Let the selection show on the current screen.
-  _scrollToSelection(i) {
-    var ie;
-    const e = this._textSelectionManagerService.getActiveRange(), t = this._getDocObject(), n = (ie = this._docSkeletonManagerService.getCurrent()) == null ? void 0 : ie.skeleton;
-    if (e == null || t == null || n == null)
-      return;
-    const { collapsed: r, startNodePosition: o } = e;
-    if (!r)
-      return;
-    const s = t.document.getOffsetConfig(), { docsLeft: a, docsTop: c } = s, l = new Xn(s, n), { contentBoxPointGroup: u } = l.getRangePointData(o, o), { left: h, top: m, height: p } = Kn(u), S = h + a, d = m + c, _ = t.scene.getViewport(Q.VIEW_MAIN), R = !!this._editorService.getEditor(i);
-    if (_ == null)
-      return;
-    const {
-      left: D,
-      top: $,
-      right: H,
-      bottom: j
-    } = _.getBounding().viewBound;
-    let te = 0, ne = 0;
-    const Ve = R ? 0 : 100;
-    d < $ ? te = d - $ : d > j - p && (te = d - j + p + Ve), S < D ? ne = S - D : S > H - Rt && (ne = S - H + Rt);
-    const je = _.transViewportScroll2ScrollValue(ne, te);
-    _.scrollBy(je);
-  }
-  _getDocObject() {
-    return Nt(this._univerInstanceService, this._renderManagerService);
-  }
 };
-ye = Vr([
-  U(A.Rendered, ye),
-  se(0, O(ee)),
-  se(1, O(J)),
-  se(2, L),
-  se(3, P),
-  se(4, F)
-], ye);
-var jr = Object.defineProperty, Wr = Object.getOwnPropertyDescriptor, zr = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Wr(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && jr(e, t, r), r;
-}, Se = (i, e) => (t, n) => e(t, n, i);
-function kr(i, e) {
-  const t = Tt(i.left, i.top, e), n = Tt(i.right, i.bottom, e);
+dt = wr([
+  re(1, C),
+  re(2, Y),
+  re(3, L),
+  re(4, oe),
+  re(5, T(N)),
+  re(6, T(ne))
+], dt);
+var Br = Object.defineProperty, $r = Object.getOwnPropertyDescriptor, Hr = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? $r(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && Br(e, t, i), i;
+}, Ie = (n, e) => (t, o) => e(t, o, n);
+function zt(n, e) {
+  const t = Gt(n.left, n.top, e), o = Gt(n.right, n.bottom, e);
   return {
     left: t.x,
     top: t.y,
-    right: n.x,
-    bottom: n.y
+    right: o.x,
+    bottom: o.y
   };
 }
-function Tt(i, e, t) {
-  const { scaleX: n, scaleY: r } = t.getAncestorScale(), o = t.getViewport(Q.VIEW_MAIN);
-  if (!o)
+function Gt(n, e, t) {
+  const { scaleX: o, scaleY: i } = t.getAncestorScale(), r = t.getViewport(te.VIEW_MAIN);
+  if (!r)
     return {
-      x: i,
+      x: n,
       y: e
     };
-  const { viewportScrollX: s, viewportScrollY: a } = o, c = (i - s) * n, l = (e - a) * r;
+  const { viewportScrollX: s, viewportScrollY: a } = r, c = (n - s) * o, d = (e - a) * i;
   return {
     x: c,
-    y: l
+    y: d
   };
 }
-let Ke = class extends k {
-  constructor(i, e, t, n) {
-    super(), this._globalPopupManagerService = i, this._renderManagerService = e, this._univerInstanceService = t, this._commandService = n;
+let ut = class extends K {
+  constructor(n, e, t, o) {
+    super(), this._globalPopupManagerService = n, this._renderManagerService = e, this._univerInstanceService = t, this._commandService = o;
   }
   // #region attach to object
-  _createObjectPositionObserver(i, e) {
+  _createObjectPositionObserver(n, e) {
     const t = () => {
-      const { scene: a } = e, { left: c, top: l, width: u, height: h } = i, m = {
+      const { scene: a } = e, { left: c, top: d, width: p, height: g } = n, h = {
         left: c,
-        right: c + u,
-        top: l,
-        bottom: l + h
-      }, p = kr(m, a);
+        right: c + p,
+        top: d,
+        bottom: d + g
+      }, l = zt(h, a);
       return {
-        left: p.left,
-        right: p.right,
-        top: p.top,
-        bottom: p.bottom
+        left: l.left,
+        right: l.right,
+        top: l.top,
+        bottom: l.bottom
       };
-    }, n = t(), r = new Ut(n), o = new Zt();
-    o.add(this._commandService.onCommandExecuted((a) => {
-      a.id === Le.id && r.next(t());
+    }, o = t(), i = new Pt(o), r = new vt();
+    r.add(this._commandService.onCommandExecuted((a) => {
+      a.id === ve.id && i.next(t());
+    }));
+    const s = e.scene.getViewport(te.VIEW_MAIN);
+    return s && r.add(s.onScrollAfter$.subscribeEvent(() => {
+      i.next(t());
+    })), {
+      position: o,
+      position$: i,
+      disposable: r
+    };
+  }
+  _createRangePositionObserver(n, e) {
+    var a;
+    const t = () => {
+      const { scene: c, mainComponent: d } = e, p = e.with(N).getSkeleton(), g = p.findNodePositionByCharIndex(n.startOffset), h = p.findNodePositionByCharIndex(n.endOffset), l = d;
+      if (!h || !g)
+        return;
+      const f = l.getOffsetConfig(), { docsLeft: u, docsTop: _ } = f, m = new rn(f, p), { borderBoxPointGroup: O } = m.getRangePointData(g, h);
+      return Do(O).map((R) => zt(R, c)).map((R) => ({
+        left: R.left + u,
+        right: R.right + u,
+        top: R.top + _,
+        bottom: R.bottom + _
+      }));
+    }, o = (a = t()) != null ? a : [], i = new Pt(o), r = new vt();
+    r.add(this._commandService.onCommandExecuted((c) => {
+      if (c.id === ve.id) {
+        const d = t();
+        d && i.next(d);
+      }
     }));
-    const s = e.scene.getViewport(Q.VIEW_MAIN);
-    return o.add(s == null ? void 0 : s.onScrollAfterObserver.add(() => {
-      r.next(t());
+    const s = e.scene.getViewport(te.VIEW_MAIN);
+    return s && r.add(s.onScrollAfter$.subscribeEvent(() => {
+      const c = t();
+      c && i.next(c);
     })), {
-      position: n,
-      position$: r,
-      disposable: o
+      positions: o,
+      positions$: i,
+      disposable: r
     };
   }
   /**
@@ -2053,18 +2536,18 @@ let Ke = class extends k {
    * @param popup popup item
    * @returns disposable
    */
-  attachPopupToObject(i, e) {
-    const n = this._univerInstanceService.getCurrentUnitForType(f.UNIVER_DOC).getUnitId(), r = this._renderManagerService.getRenderById(n);
-    if (!r)
+  attachPopupToObject(n, e) {
+    const o = this._univerInstanceService.getCurrentUnitForType(v.UNIVER_DOC).getUnitId(), i = this._renderManagerService.getRenderById(o);
+    if (!i)
       return {
         dispose: () => {
         }
       };
-    const { position: o, position$: s, disposable: a } = this._createObjectPositionObserver(i, r), c = this._globalPopupManagerService.addPopup({
+    const { position: r, position$: s, disposable: a } = this._createObjectPositionObserver(n, i), c = this._globalPopupManagerService.addPopup({
       ...e,
-      unitId: n,
+      unitId: o,
       subUnitId: "default",
-      anchorRect: o,
+      anchorRect: r,
       anchorRect$: s
     });
     return {
@@ -2073,135 +2556,192 @@ let Ke = class extends k {
       }
     };
   }
+  attachPopupToRange(n, e) {
+    const o = this._univerInstanceService.getCurrentUnitForType(v.UNIVER_DOC).getUnitId(), { direction: i = "top" } = e, r = this._renderManagerService.getRenderById(o);
+    if (!r)
+      return {
+        dispose: () => {
+        }
+      };
+    const { positions: s, positions$: a, disposable: c } = this._createRangePositionObserver(n, r), d = a.pipe(Fo((g) => i === "top" ? g[0] : g[g.length - 1])), p = this._globalPopupManagerService.addPopup({
+      ...e,
+      unitId: o,
+      subUnitId: "default",
+      anchorRect: i === "top" ? s[0] : s[s.length - 1],
+      anchorRect$: d,
+      excludeRects: s,
+      excludeRects$: a,
+      direction: i === "top" ? "top" : "bottom"
+    });
+    return {
+      dispose: () => {
+        this._globalPopupManagerService.removePopup(p), a.complete(), c.dispose();
+      }
+    };
+  }
+};
+ut = Hr([
+  Ie(0, T(Kn)),
+  Ie(1, k),
+  Ie(2, L),
+  Ie(3, C)
+], ut);
+var Vr = Object.defineProperty, jr = Object.getOwnPropertyDescriptor, Wr = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? jr(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && Vr(e, t, i), i;
+}, Yt = (n, e) => (t, o) => e(t, o, n);
+let Pe = class extends Oe {
+  constructor(n, e) {
+    super(), this._instanceSrv = n, this._renderManagerService = e, this._init();
+  }
+  _init() {
+    this._renderManagerService.createRender$.pipe(se(this.dispose$)).subscribe((n) => this._createRenderWithId(n)), this._instanceSrv.getTypeOfUnitAdded$(v.UNIVER_DOC).pipe(se(this.dispose$)).subscribe((n) => this._createRenderer(n)), this._instanceSrv.getAllUnitsForType(v.UNIVER_DOC).forEach((n) => this._createRenderer(n)), this._instanceSrv.getTypeOfUnitDisposed$(v.UNIVER_DOC).pipe(se(this.dispose$)).subscribe((n) => this._disposeRenderer(n));
+  }
+  _createRenderer(n) {
+    const e = n.getUnitId();
+    this._renderManagerService.has(e) || (this._createRenderWithId(e), this._renderManagerService.setCurrent(e));
+  }
+  _createRenderWithId(n) {
+    this._renderManagerService.createRender(n);
+  }
+  _disposeRenderer(n) {
+    const e = n.getUnitId();
+    this._renderManagerService.removeRender(e);
+  }
 };
-Ke = zr([
-  Se(0, O(mn)),
-  Se(1, F),
-  Se(2, P),
-  Se(3, v)
-], Ke);
-var Hr = Object.defineProperty, Yr = Object.getOwnPropertyDescriptor, Gr = (i, e, t, n) => {
-  for (var r = n > 1 ? void 0 : n ? Yr(e, t) : e, o = i.length - 1, s; o >= 0; o--)
-    (s = i[o]) && (r = (n ? s(e, t, r) : s(r)) || r);
-  return n && r && Hr(e, t, r), r;
-}, ke = (i, e) => (t, n) => e(t, n, i), ve;
-let It = (ve = class extends qt {
-  constructor(i, e, t, n) {
-    super(), this._config = i, this._injector = e, this._localeService = t, this._logService = n, this._config = Je.deepMerge({}, ei, this._config), this._initDependencies(e), this._initializeCommands();
+Pe = Wr([
+  Ue(we.Ready, Pe),
+  Yt(0, L),
+  Yt(1, k)
+], Pe);
+var kr = Object.defineProperty, zr = Object.getOwnPropertyDescriptor, Gr = (n, e, t, o) => {
+  for (var i = o > 1 ? void 0 : o ? zr(e, t) : e, r = n.length - 1, s; r >= 0; r--)
+    (s = n[r]) && (i = (o ? s(e, t, i) : s(i)) || i);
+  return o && i && kr(e, t, i), i;
+}, Qe = (n, e) => (t, o) => e(t, o, n), be;
+let Xt = (be = class extends Dn {
+  constructor(n, e, t, o) {
+    super(), this._config = n, this._injector = e, this._renderManagerSrv = t, this._logService = o, this._config = ee.deepMerge({}, ci, this._config), this._initDependencies(e), this._initializeCommands();
+  }
+  onReady() {
+    this._initRenderBasics();
   }
   onRendered() {
-    this._initModules(), this._markDocAsFocused();
+    this._initUI(), this._initRenderModules(), this._markDocAsFocused();
   }
   _initializeCommands() {
     [
-      ii,
-      ri,
-      si,
-      oi,
-      ai,
-      ci,
-      li,
       di,
       ui,
-      Ki,
-      Zi,
-      Xi
-    ].forEach((i) => {
-      this._injector.get(Sn).registerShortcut(i);
+      gi,
+      hi,
+      pi,
+      _i,
+      fi,
+      mi,
+      Si,
+      _r,
+      fr,
+      pr
+    ].forEach((n) => {
+      this._injector.get(Zn).registerShortcut(n);
     });
   }
-  _initDependencies(i) {
+  _initDependencies(n) {
     [
-      // Controller
-      [
-        ce,
-        {
-          useFactory: () => this._injector.createInstance(ce, this._config)
-        }
-      ],
-      [Ce],
-      [Oe],
-      [Re],
-      [Ie],
-      [be],
-      [Me],
+      [Se, { useFactory: () => this._injector.createInstance(Se, this._config) }],
+      [xe],
       [ye],
-      [
-        // controllers
-        ae,
-        {
-          useFactory: () => this._injector.createInstance(ae, this._config)
-        }
-      ],
-      [
-        pe,
-        {
-          useClass: Xe
-        }
-      ],
-      [Ke],
-      // Render views
-      [Te]
-    ].forEach((t) => {
-      i.add(t);
-    });
+      [Pe],
+      [me, { useFactory: () => this._injector.createInstance(me, this._config) }],
+      [Ce, { useClass: ot }],
+      [ut]
+    ].forEach((t) => n.add(t));
   }
   _markDocAsFocused() {
-    const i = this._injector.get(P), e = this._injector.get(L);
+    const n = this._injector.get(L), e = this._injector.get(Y);
     try {
-      const t = i.getCurrentUniverDocInstance();
+      const t = n.getCurrentUnitForType(v.UNIVER_DOC);
       if (!t) return;
-      const n = t.getUnitId();
-      e.isEditor(n) || i.focusUnit(t.getUnitId());
+      const o = t.getUnitId();
+      e.isEditor(o) || n.focusUnit(t.getUnitId());
     } catch (t) {
       this._logService.warn(t);
     }
   }
-  _initModules() {
-    this._injector.get(ae);
+  _initUI() {
+    this._injector.get(me);
+  }
+  _initRenderBasics() {
+    [
+      N,
+      Eo,
+      at,
+      lt
+    ].forEach((n) => {
+      this._renderManagerSrv.registerRenderModule(v.UNIVER_DOC, n);
+    });
+  }
+  _initRenderModules() {
+    [
+      it,
+      ct,
+      dt,
+      st
+    ].forEach((n) => {
+      this._renderManagerSrv.registerRenderModule(v.UNIVER_DOC, n);
+    });
   }
-}, g(ve, "pluginName", ti), g(ve, "type", f.UNIVER_DOC), ve);
-It = Gr([
-  ke(1, O(Pe)),
-  ke(2, O(qe)),
-  ke(3, Et)
-], It);
-function ro(i) {
+}, E(be, "pluginName", li), E(be, "type", v.UNIVER_DOC), be);
+Xt = Gr([
+  Qe(1, T(Be)),
+  Qe(2, k),
+  Qe(3, Zt)
+], Xt);
+function is(n) {
   return {
-    left: i.positionH.posOffset,
-    top: i.positionV.posOffset,
-    width: i.size.width,
-    height: i.size.height
+    left: n.positionH.posOffset,
+    top: n.positionV.posOffset,
+    width: n.size.width,
+    height: n.size.height
   };
 }
-function oo(i, e = 0, t = 0) {
+function rs(n, e = 0, t = 0) {
   return {
     size: {
-      width: i.width,
-      height: i.height
+      width: n.width,
+      height: n.height
     },
     positionH: {
-      relativeFrom: Jt.MARGIN,
-      posOffset: (i.left || 0) - e
+      relativeFrom: An.MARGIN,
+      posOffset: (n.left || 0) - e
     },
     positionV: {
-      relativeFrom: Qt.PAGE,
-      posOffset: (i.top || 0) - t
+      relativeFrom: Fn.PAGE,
+      posOffset: (n.top || 0) - t
     },
-    angle: i.angle || 0
+    angle: n.angle || 0
   };
 }
 export {
-  ti as DOC_UI_PLUGIN_NAME,
-  Qn as DefaultDocContainerConfig,
-  ei as DefaultDocUiConfig,
-  Jn as DefaultToolbarConfig,
-  Ke as DocCanvasPopManagerService,
-  Te as DocCanvasView,
-  rr as PastePluginLark,
-  cr as PastePluginUniver,
-  sr as PastePluginWord,
-  It as UniverDocsUIPlugin,
-  ro as docDrawingPositionToTransform,
-  oo as transformToDocDrawingPosition
+  li as DOC_UI_PLUGIN_NAME,
+  ai as DefaultDocContainerConfig,
+  ci as DefaultDocUiConfig,
+  si as DefaultToolbarConfig,
+  it as DocBackScrollRenderController,
+  ut as DocCanvasPopManagerService,
+  mr as DocCopyCommand,
+  Sr as DocCutCommand,
+  vr as DocPasteCommand,
+  at as DocRenderController,
+  Pe as DocsRenderService,
+  Ce as IDocClipboardService,
+  Yo as PastePluginLark,
+  qo as PastePluginUniver,
+  Ko as PastePluginWord,
+  Xt as UniverDocsUIPlugin,
+  is as docDrawingPositionToTransform,
+  rs as transformToDocDrawingPosition,
+  z as whenDocAndEditorFocused
 };