@univerjs/slides-ui 0.2.4 → 0.2.7

package/lib/es/index.js

@@ -1,16 +1,201 @@
-var W = Object.defineProperty;
-var q = (t, e, r) => e in t ? W(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
-var h = (t, e, r) => q(t, typeof e != "symbol" ? e + "" : e, r);
-import { CommandType as x, IUniverInstanceService as C, ICommandService as R, UniverInstanceType as P, Disposable as G, OnLifecycle as J, LifecycleStages as Y, Plugin as z } from "@univerjs/core";
-import { Inject as j, Injector as U } from "@wendellhu/redi";
-import { useObservable as H, BuiltInUIPart as K, IUIPartsService as Q } from "@univerjs/ui";
-import { useDependency as u, connectInjector as X } from "@wendellhu/redi/react-bindings";
-import D, { useRef as Z, useState as B, useEffect as S, useCallback as k } from "react";
-import ee from "clsx";
-import { Scrollbar as te } from "@univerjs/design";
-import { IRenderManagerService as re } from "@univerjs/engine-render";
-import { CanvasView as y } from "@univerjs/slides";
-var N = { exports: {} }, f = {};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
+import { CommandType, IUniverInstanceService, UniverInstanceType, PageElementType, Tools, useDependency, LocaleService, ICommandService, generateRandomId, BasicShapes, createIdentifier, IContextService, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DEFAULT_EMPTY_DOCUMENT_VALUE, DocumentFlavor, FOCUSING_UNIVER_EDITOR, EDITOR_ACTIVATED, FORMULA_EDITOR_ACTIVATED, Disposable, connectInjector, OnLifecycle, LifecycleStages, Inject, Injector, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, DocumentDataModel, VerticalAlign, HorizontalAlign, RxDisposable, DisposableCollection, toDisposable, FOCUSING_COMMON_DRAWINGS, WrapStrategy, FOCUSING_EDITOR_BUT_HIDDEN, FOCUSING_EDITOR_INPUT_FORMULA, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, Direction, IUndoRedoService, IResourceLoaderService, Plugin, mergeOverrideWithDependencies } from "@univerjs/core";
+import { ObjectType, FIX_ONE_PIXEL_BLUR_OFFSET, IRenderManagerService, DeviceInputEventType, pxToNum, ITextSelectionRenderManager, convertTextRotation, ScrollBar, fixLineWidthByScale, Rect } from "@univerjs/engine-render";
+import { ISidebarService, IEditorService, useObservable, DISABLE_AUTO_FOCUS_KEY, TextEditor, MenuItemType, MenuPosition, MenuGroup, getMenuHiddenObservable, KeyCode, MetaKeys, BuiltInUIPart, ComponentManager, IMenuService, IUIPartsService, IShortcutService, ICanvasPopupService, ILayoutService } from "@univerjs/ui";
+import { CanvasView, SLIDE_KEY } from "@univerjs/slides";
+import { IImageIoService, getImageSize, DRAWING_IMAGE_ALLOW_IMAGE_LIST } from "@univerjs/drawing";
+import React, { forwardRef, useRef, createElement, useState, useEffect, useCallback } from "react";
+import clsx from "clsx";
+import { Button, InputNumber, Dropdown, ColorPicker, Scrollbar } from "@univerjs/design";
+import { DeleteLeftCommand, TextSelectionManagerService, DocSkeletonManagerService, VIEWPORT_KEY, DOCS_COMPONENT_MAIN_LAYER_INDEX, RichTextEditingMutation, MoveSelectionOperation, MoveCursorOperation, DOCS_VIEW_KEY } from "@univerjs/docs";
+import { BehaviorSubject, Subject, filter } from "rxjs";
+var __assign = function() {
+  return __assign = Object.assign || function(t) {
+    for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
+      s = arguments[i];
+      for (var p2 in s) Object.prototype.hasOwnProperty.call(s, p2) && (t[p2] = s[p2]);
+    }
+    return t;
+  }, __assign.apply(this, arguments);
+}, __rest = function(s, e) {
+  var t = {};
+  for (var p2 in s) Object.prototype.hasOwnProperty.call(s, p2) && e.indexOf(p2) < 0 && (t[p2] = s[p2]);
+  if (s != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var i = 0, p2 = Object.getOwnPropertySymbols(s); i < p2.length; i++)
+      e.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p2[i]) && (t[p2[i]] = s[p2[i]]);
+  return t;
+}, IconBase = forwardRef(function(props, ref) {
+  var icon = props.icon, id = props.id, className = props.className, extend = props.extend, restProps = __rest(props, ["icon", "id", "className", "extend"]), cls = "univerjs-icon univerjs-icon-".concat(id, " ").concat(className || "").trim(), idSuffix = useRef("_".concat(generateShortUuid()));
+  return render(icon, "".concat(id), { defIds: icon.defIds, idSuffix: idSuffix.current }, __assign({ ref, className: cls }, restProps), extend);
+});
+function render(node, id, runtimeProps, rootProps, extend) {
+  return createElement(node.tag, __assign(__assign({ key: id }, replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend)), rootProps), (replaceRuntimeIdsInDefs(node, runtimeProps).children || []).map(function(child, index) {
+    return render(child, "".concat(id, "-").concat(node.tag, "-").concat(index), runtimeProps, void 0, extend);
+  }));
+}
+__name(render, "render");
+function replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend) {
+  var attrs = __assign({}, node.attrs);
+  extend != null && extend.colorChannel1 && attrs.fill === "colorChannel1" && (attrs.fill = extend.colorChannel1);
+  var defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a9) {
+    var key = _a9[0], value = _a9[1];
+    typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
+  })), attrs;
+}
+__name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
+function replaceRuntimeIdsInDefs(node, runtimeProps) {
+  var _a9, defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a9 = node.children) === null || _a9 === void 0) && _a9.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
+    return typeof child.attrs.id == "string" && defIds && defIds.indexOf(child.attrs.id) > -1 ? __assign(__assign({}, child), { attrs: __assign(__assign({}, child.attrs), { id: child.attrs.id + runtimeProps.idSuffix }) }) : child;
+  }) }) : node;
+}
+__name(replaceRuntimeIdsInDefs, "replaceRuntimeIdsInDefs");
+function generateShortUuid() {
+  return Math.random().toString(36).substring(2, 8);
+}
+__name(generateShortUuid, "generateShortUuid");
+IconBase.displayName = "UniverIcon";
+var element$9 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M2.2498 3.65005C2.2498 2.87685 2.87661 2.25005 3.64981 2.25005H7.9998C8.33118 2.25005 8.5998 1.98142 8.5998 1.65005C8.5998 1.31868 8.33118 1.05005 7.9998 1.05005H3.64981C2.21387 1.05005 1.0498 2.21411 1.0498 3.65005V12.35C1.0498 13.786 2.21386 14.95 3.6498 14.95H12.3498C13.7857 14.95 14.9498 13.786 14.9498 12.3501V8.00005C14.9498 7.66868 14.6812 7.40005 14.3498 7.40005C14.0184 7.40005 13.7498 7.66868 13.7498 8.00005V9.23974L12.2385 8.1063C11.7252 7.72129 11.0068 7.7723 10.5531 8.22605L9.00869 9.77041L6.73916 7.8251C6.24387 7.40055 5.5095 7.41278 5.02864 7.85359L2.2498 10.4009V3.65005ZM2.2498 12.0287V12.35C2.2498 13.1232 2.87661 13.75 3.6498 13.75H12.3498C13.123 13.75 13.7498 13.1232 13.7498 12.3501V10.7397L11.5186 9.06631C11.4829 9.03956 11.433 9.04314 11.4016 9.07458L9.92249 10.5537L11.1015 11.5642C11.3531 11.7799 11.3822 12.1587 11.1666 12.4103C10.9509 12.6619 10.5721 12.691 10.3205 12.4753L5.9582 8.7362C5.92384 8.70674 5.87288 8.70758 5.83952 8.73816L2.2498 12.0287Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M11.8097 1.14783C12.1411 1.14783 12.4097 1.41646 12.4097 1.74783V3.297H14.1541C14.4855 3.297 14.7541 3.56563 14.7541 3.897C14.7541 4.22837 14.4855 4.497 14.1541 4.497H12.4097V6.24167C12.4097 6.57304 12.1411 6.84167 11.8097 6.84167C11.4783 6.84167 11.2097 6.57304 11.2097 6.24167V4.497H9.6603C9.32893 4.497 9.0603 4.22837 9.0603 3.897C9.0603 3.56563 9.32893 3.297 9.6603 3.297H11.2097V1.74783C11.2097 1.41646 11.4783 1.14783 11.8097 1.14783Z" } }] }, AddImageSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
+    id: "add-image-single",
+    ref,
+    icon: element$9
+  }));
+});
+AddImageSingle.displayName = "AddImageSingle";
+var element$8 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "colorChannel1", d: "M11.0363 12.2367V14.0367C11.0363 14.3681 11.3049 14.6367 11.6363 14.6367C11.9676 14.6367 12.2363 14.3681 12.2363 14.0367V12.2367H14.0364C14.3677 12.2367 14.6364 11.9681 14.6364 11.6367C14.6364 11.3054 14.3677 11.0367 14.0364 11.0367H12.2363V9.23672C12.2363 8.90535 11.9676 8.63672 11.6363 8.63672C11.3049 8.63672 11.0363 8.90535 11.0363 9.23672V11.0367H9.23635C8.90498 11.0367 8.63635 11.3054 8.63635 11.6367C8.63635 11.9681 8.90498 12.2367 9.23635 12.2367H11.0363Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M2.56365 1.36377C1.90091 1.36377 1.36365 1.90103 1.36365 2.56377V6.16377C1.36365 6.82651 1.90091 7.36377 2.56365 7.36377H6.16365C6.82639 7.36377 7.36365 6.82651 7.36365 6.16377V2.56377C7.36365 1.90103 6.82639 1.36377 6.16365 1.36377H2.56365zM6.16365 2.56377H2.56365L2.56365 6.16377H6.16365V2.56377zM2.56365 8.63647C1.90091 8.63647 1.36365 9.17373 1.36365 9.83647V13.4365C1.36365 14.0992 1.90091 14.6365 2.56365 14.6365H6.16365C6.82639 14.6365 7.36365 14.0992 7.36365 13.4365V9.83647C7.36365 9.17373 6.82639 8.63647 6.16365 8.63647H2.56365zM6.16365 9.83647H2.56365L2.56365 13.4365H6.16365V9.83647zM9.83635 7.36377C9.17361 7.36377 8.63635 6.82651 8.63635 6.16377V2.56377C8.63635 1.90103 9.17361 1.36377 9.83635 1.36377H13.4364C14.0991 1.36377 14.6364 1.90103 14.6364 2.56377V6.16377C14.6364 6.82651 14.0991 7.36377 13.4364 7.36377H9.83635zM9.83635 6.16377V2.56377L13.4364 2.56377V6.16377H9.83635z", fillRule: "evenodd", clipRule: "evenodd" } }] }, Autofill = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
+    id: "autofill",
+    ref,
+    icon: element$8
+  }));
+});
+Autofill.displayName = "Autofill";
+var element$7 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M14.0045 4.4334C14.8881 4.4334 15.6045 3.71705 15.6045 2.8334 15.6045 1.94974 14.8881 1.2334 14.0045 1.2334H3.70449C2.82084 1.2334 2.10449 1.94974 2.10449 2.8334 2.10449 3.71705 2.82084 4.4334 3.70449 4.4334H14.0045zM14.4045 2.8334C14.4045 3.05431 14.2254 3.2334 14.0045 3.2334H3.70449C3.48358 3.2334 3.30449 3.05431 3.30449 2.8334 3.30449 2.61248 3.48358 2.4334 3.70449 2.4334H14.0045C14.2254 2.4334 14.4045 2.61249 14.4045 2.8334zM14.1544 8.5999C15.038 8.5999 15.7544 7.88356 15.7544 6.9999 15.7544 6.11625 15.038 5.3999 14.1544 5.3999H3.85439C2.97074 5.3999 2.25439 6.11625 2.25439 6.9999 2.25439 7.88356 2.97074 8.5999 3.85439 8.5999H14.1544zM14.5544 6.9999C14.5544 7.22082 14.3753 7.3999 14.1544 7.3999H3.85439C3.63348 7.3999 3.45439 7.22082 3.45439 6.9999 3.45439 6.77899 3.63348 6.5999 3.85439 6.5999H14.1544C14.3753 6.5999 14.5544 6.77899 14.5544 6.9999z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M8.57975 14.5902L6.58023 12.5907C6.34591 12.3564 6.34591 11.9765 6.58023 11.7421 6.81454 11.5078 7.19444 11.5078 7.42876 11.7421L8.40449 12.7179V10.1664C8.40449 9.83504 8.67312 9.56641 9.00449 9.56641 9.33586 9.56641 9.60449 9.83504 9.60449 10.1664V12.7179L10.5802 11.7421C10.8145 11.5078 11.1944 11.5078 11.4288 11.7421 11.6631 11.9765 11.6631 12.3564 11.4288 12.5907L9.42923 14.5902M8.57975 14.5902C8.58121 14.5917 8.58268 14.5931 8.58416 14.5946 8.64077 14.6502 8.70566 14.6923 8.77482 14.7209 8.84557 14.7502 8.92314 14.7664 9.00449 14.7664 9.08585 14.7664 9.16342 14.7502 9.23416 14.7209 9.30332 14.6923 9.36821 14.6502 9.42482 14.5946" } }] }, BottomSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
+    id: "bottom-single",
+    ref,
+    icon: element$7
+  }));
+});
+BottomSingle.displayName = "BottomSingle";
+var element$6 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "g", attrs: { clipPath: "url(#graph-single_clip0_1293_28)" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M6.29541 11.1896C3.83208 10.7489 1.9624 8.59552 1.9624 6.00544C1.9624 3.09673 4.32036 0.73877 7.22907 0.73877C9.93483 0.73877 12.164 2.77918 12.4619 5.40527H13.5621C14.998 5.40527 16.1621 6.56933 16.1621 8.00527V12.6719C16.1621 14.1079 14.998 15.2719 13.5621 15.2719H8.89541C7.45947 15.2719 6.29541 14.1079 6.29541 12.6719V11.1896ZM3.1624 6.00544C3.1624 3.75947 4.98311 1.93877 7.22907 1.93877C9.27112 1.93877 10.9616 3.44388 11.2518 5.40527H8.89541C7.45947 5.40527 6.29541 6.56933 6.29541 8.00527V9.96442C4.49946 9.5425 3.1624 7.93012 3.1624 6.00544ZM7.49541 8.00527C7.49541 7.23207 8.12221 6.60527 8.89541 6.60527H13.5621C14.3353 6.60527 14.9621 7.23207 14.9621 8.00527V12.6719C14.9621 13.4451 14.3353 14.0719 13.5621 14.0719H8.89541C8.12221 14.0719 7.49541 13.4451 7.49541 12.6719V8.00527Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, { tag: "defs", attrs: {}, children: [{ tag: "clipPath", attrs: { id: "graph-single_clip0_1293_28" }, children: [{ tag: "path", attrs: { fill: "#fff", d: "M0 0H16V16H0z", transform: "translate(.9)" } }] }] }], defIds: ["graph-single_clip0_1293_28"] }, GraphSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
+    id: "graph-single",
+    ref,
+    icon: element$6
+  }));
+});
+GraphSingle.displayName = "GraphSingle";
+var element$5 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M11.3536 6.14645C11.5488 6.34171 11.5488 6.65829 11.3536 6.85355L8.35355 9.85355C8.15829 10.0488 7.84171 10.0488 7.64645 9.85355L4.64645 6.85355C4.45118 6.65829 4.45118 6.34171 4.64645 6.14645C4.84171 5.95118 5.15829 5.95118 5.35355 6.14645L8 8.79289L10.6464 6.14645C10.8417 5.95118 11.1583 5.95118 11.3536 6.14645Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, MoreDownSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
+    id: "more-down-single",
+    ref,
+    icon: element$5
+  }));
+});
+MoreDownSingle.displayName = "MoreDownSingle";
+var element$4 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M1.25 2.96401C1.25 3.84767 1.96634 4.56401 2.85 4.56401H13.15C14.0337 4.56401 14.75 3.84767 14.75 2.96401C14.75 2.08036 14.0337 1.36401 13.15 1.36401H2.85C1.96635 1.36401 1.25 2.08036 1.25 2.96401ZM2.85 3.36401C2.62909 3.36401 2.45 3.18493 2.45 2.96401C2.45 2.7431 2.62909 2.56401 2.85 2.56401H13.15C13.3709 2.56401 13.55 2.7431 13.55 2.96401C13.55 3.18493 13.3709 3.36401 13.15 3.36401H2.85Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M5.57564 11.6118C5.80995 11.3774 6.18985 11.3774 6.42417 11.6118L7.3999 12.5875V6.36951C7.3999 6.03814 7.66853 5.76951 7.9999 5.76951C8.33127 5.76951 8.5999 6.03814 8.5999 6.36951V12.5875L9.57564 11.6118C9.80995 11.3774 10.1899 11.3774 10.4242 11.6118C10.6585 11.8461 10.6585 12.226 10.4242 12.4603L8.4324 14.452C8.32324 14.5655 8.16982 14.6362 7.9999 14.6362C7.82998 14.6362 7.67655 14.5655 7.56739 14.452L5.57564 12.4603C5.34132 12.226 5.34132 11.8461 5.57564 11.6118Z" } }] }, MoveDownSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
+    id: "move-down-single",
+    ref,
+    icon: element$4
+  }));
+});
+MoveDownSingle.displayName = "MoveDownSingle";
+var element$3 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M1.25 13.036C1.25 12.1523 1.96634 11.436 2.85 11.436H13.15C14.0337 11.436 14.75 12.1523 14.75 13.036C14.75 13.9196 14.0337 14.636 13.15 14.636H2.85C1.96635 14.636 1.25 13.9196 1.25 13.036ZM2.85 12.636C2.62909 12.636 2.45 12.8151 2.45 13.036C2.45 13.2569 2.62909 13.436 2.85 13.436H13.15C13.3709 13.436 13.55 13.2569 13.55 13.036C13.55 12.8151 13.3709 12.636 13.15 12.636H2.85Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M5.57564 4.38825C5.80995 4.62256 6.18985 4.62256 6.42417 4.38825L7.3999 3.41251V9.63049C7.3999 9.96186 7.66853 10.2305 7.9999 10.2305C8.33127 10.2305 8.5999 9.96186 8.5999 9.63049V3.41251L9.57564 4.38825C9.80995 4.62256 10.1899 4.62256 10.4242 4.38825C10.6585 4.15393 10.6585 3.77403 10.4242 3.53972L8.4324 1.54796C8.32324 1.43445 8.16982 1.36382 7.9999 1.36382C7.82998 1.36382 7.67655 1.43446 7.56739 1.54797L5.57564 3.53972C5.34132 3.77403 5.34132 4.15393 5.57564 4.38825Z" } }] }, MoveUpSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
+    id: "move-up-single",
+    ref,
+    icon: element$3
+  }));
+});
+MoveUpSingle.displayName = "MoveUpSingle";
+var element$2 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "mask", attrs: { id: "mask0_102_1204", style: { maskType: "alpha" }, width: 16, height: 16, x: 0, y: 0, maskUnits: "userSpaceOnUse" }, children: [{ tag: "path", attrs: { fill: "#DCDCDC", d: "M0 0H16V16H0z" } }] }, { tag: "g", attrs: { mask: "url(#mask0_102_1204)" }, children: [{ tag: "rect", attrs: { width: 12.62, height: 2.79, x: 1.69, y: 12.25, fill: "colorChannel1", rx: 1.4 } }, { tag: "path", attrs: { fill: "currentColor", d: "M7.74646 2.1642C7.34284 1.65121 6.85947 1.28205 6.38447 1.09593C5.86863 0.893787 5.15166 0.852126 4.70047 1.42917C4.29842 1.94344 4.33082 2.70249 4.57691 3.50395C4.68808 3.8661 4.86846 4.22254 5.12522 4.56617C5.13695 4.58185 5.14927 4.5968 5.16211 4.61102C5.17152 4.6214 5.18122 4.63139 5.19115 4.64096C5.20459 4.65393 5.21855 4.66618 5.23296 4.6777L3.5064 6.40422C3.26756 6.64306 3.26756 7.03033 3.5064 7.26919L7.23756 11.0004C7.47648 11.2392 7.86375 11.2392 8.1026 11.0004L12.8329 6.27001C13.0717 6.03117 13.0717 5.6439 12.8329 5.40505L9.10172 1.67387C8.86288 1.43503 8.47561 1.43503 8.23676 1.67387L7.74646 2.1642ZM7.46162 4.50638C7.47252 4.57574 7.48163 4.64652 7.4888 4.71868C7.52232 5.05481 7.82194 5.30013 8.15807 5.26661C8.4942 5.23311 8.73954 4.93345 8.70601 4.59732C8.65786 4.11463 8.54251 3.6666 8.37892 3.26169L8.66928 2.97135L11.5354 5.83753L10.6106 6.76237H4.87824L7.40802 4.2326C7.42885 4.32128 7.44684 4.41255 7.46162 4.50638ZM6.87284 3.03784C6.57441 2.62008 6.22261 2.34634 5.93815 2.23487C5.80233 2.18165 5.71528 2.17827 5.67638 2.18335C5.6725 2.18387 5.66929 2.18443 5.6666 2.18497L5.6619 2.18607C5.64166 2.21954 5.53594 2.45979 5.74626 3.1449C5.81241 3.36036 5.92262 3.58602 6.09307 3.81761L6.87284 3.03784Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M12.1932 11.5463C12.6454 11.5463 13.012 11.1797 13.012 10.7275C13.012 10.4475 12.6981 9.92821 12.459 9.5733C12.3299 9.38173 12.0564 9.38174 11.9274 9.57331C11.6883 9.92822 11.3744 10.4475 11.3744 10.7275C11.3744 11.1797 11.741 11.5463 12.1932 11.5463Z" } }] }] }, PaintBucket = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
+    id: "paint-bucket",
+    ref,
+    icon: element$2
+  }));
+});
+PaintBucket.displayName = "PaintBucket";
+var element$1 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "g", attrs: { fill: "currentColor", clipPath: "url(#text-single_clip0_1293_26)" }, children: [{ tag: "path", attrs: { d: "M2.22891 2.07227C1.89754 2.07227 1.62891 2.34089 1.62891 2.67227C1.62891 3.00364 1.89754 3.27227 2.22891 3.27227H6.29541V14.0056C6.29541 14.337 6.56404 14.6056 6.89541 14.6056C7.22678 14.6056 7.49541 14.337 7.49541 14.0056V3.27227H11.5622C11.8936 3.27227 12.1622 3.00364 12.1622 2.67227C12.1622 2.34089 11.8936 2.07227 11.5622 2.07227H2.22891Z" } }, { tag: "path", attrs: { d: "M10.2289 6.40552C9.89754 6.40552 9.62891 6.67415 9.62891 7.00552C9.62891 7.33689 9.89754 7.60552 10.2289 7.60552H12.2954V14.0055C12.2954 14.3369 12.564 14.6055 12.8954 14.6055C13.2268 14.6055 13.4954 14.3369 13.4954 14.0055V7.60552H15.5622C15.8936 7.60552 16.1622 7.33689 16.1622 7.00552C16.1622 6.67415 15.8936 6.40552 15.5622 6.40552H10.2289Z" } }] }, { tag: "defs", attrs: {}, children: [{ tag: "clipPath", attrs: { id: "text-single_clip0_1293_26" }, children: [{ tag: "path", attrs: { fill: "#fff", d: "M0 0H16V16H0z", transform: "translate(.9)" } }] }] }], defIds: ["text-single_clip0_1293_26"] }, TextSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
+    id: "text-single",
+    ref,
+    icon: element$1
+  }));
+});
+TextSingle.displayName = "TextSingle";
+var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M7.82994 1.40913C7.88746 1.35161 7.95376 1.30821 8.02453 1.27893C8.09527 1.24959 8.17285 1.2334 8.2542 1.2334C8.33555 1.2334 8.41313 1.24959 8.48387 1.27893C8.55464 1.30821 8.62094 1.35161 8.67846 1.40913L10.6785 3.40913C10.9128 3.64345 10.9128 4.02335 10.6785 4.25766C10.4441 4.49198 10.0642 4.49198 9.82994 4.25766L8.8542 3.28193V5.8334C8.8542 6.16477 8.58557 6.4334 8.2542 6.4334C7.92283 6.4334 7.6542 6.16477 7.6542 5.8334V3.28193L6.67846 4.25766C6.44415 4.49198 6.06425 4.49198 5.82994 4.25766C5.59562 4.02335 5.59562 3.64345 5.82994 3.40913L7.82994 1.40913Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M1.50439 9C1.50439 8.11634 2.22074 7.4 3.10439 7.4H13.4044C14.288 7.4 15.0044 8.11634 15.0044 9 15.0044 9.88366 14.2881 10.6 13.4044 10.6H3.1044C2.22074 10.6 1.50439 9.88366 1.50439 9zM3.10439 8.6C2.88348 8.6 2.70439 8.77909 2.70439 9 2.70439 9.22091 2.88348 9.4 3.1044 9.4H13.4044C13.6253 9.4 13.8044 9.22091 13.8044 9 13.8044 8.77909 13.6253 8.6 13.4044 8.6H3.10439zM1.6543 13.1665C1.6543 12.2828 2.37064 11.5665 3.2543 11.5665H13.5543C14.438 11.5665 15.1543 12.2828 15.1543 13.1665 15.1543 14.0502 14.438 14.7665 13.5543 14.7665H3.2543C2.37064 14.7665 1.6543 14.0502 1.6543 13.1665zM3.2543 12.7665C3.03338 12.7665 2.8543 12.9456 2.8543 13.1665 2.8543 13.3874 3.03338 13.5665 3.2543 13.5665H13.5543C13.7752 13.5665 13.9543 13.3874 13.9543 13.1665 13.9543 12.9456 13.7752 12.7665 13.5543 12.7665H3.2543z", fillRule: "evenodd", clipRule: "evenodd" } }] }, TopmostSingle = forwardRef(function(props, ref) {
+  return createElement(IconBase, Object.assign({}, props, {
+    id: "topmost-single",
+    ref,
+    icon: element
+  }));
+});
+TopmostSingle.displayName = "TopmostSingle";
+const ActivateSlidePageOperation = {
+  id: "slide.operation.activate-slide",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    var _a9, _b;
+    const canvasView = accessor.get(CanvasView), model = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), id = (_a9 = model == null ? void 0 : model.getActivePage()) == null ? void 0 : _a9.id;
+    if (!id) return !1;
+    const transformer = (_b = canvasView.getRenderUnitByPageId(id).scene) == null ? void 0 : _b.getTransformer();
+    return transformer && transformer.clearControls(), canvasView.activePage(params.id), !0;
+  }, "handler")
+}, DeleteSlideElementOperation = {
+  id: "slide.operation.delete-element",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    if (!(params != null && params.id)) return !1;
+    const slideData = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage();
+    return delete activePage.pageElements[params.id], slideData.updatePage(activePage.id, activePage), accessor.get(CanvasView).removeObjectById(params.id, activePage.id), !0;
+  }, "handler")
+}, InsertSlideFloatImageOperation = {
+  id: "slide.operation.insert-float-image",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    var _a9;
+    const imageIoService = accessor.get(IImageIoService);
+    if (!((_a9 = params == null ? void 0 : params.files) != null && _a9.length)) return !1;
+    const imageParam = await imageIoService.saveImage(params.files[0]);
+    if (!imageParam) return !1;
+    const { imageId, imageSourceType, source, base64Cache } = imageParam, { width, height, image } = await getImageSize(base64Cache || ""), data = {
+      id: imageId,
+      zIndex: 20,
+      left: 0,
+      top: 0,
+      width,
+      height,
+      title: "",
+      description: "",
+      type: PageElementType.IMAGE,
+      image: {
+        imageProperties: {
+          contentUrl: base64Cache,
+          imageSourceType,
+          source,
+          base64Cache,
+          image
+        }
+      }
+    }, slideData = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage();
+    activePage.pageElements[imageId] = data, slideData.updatePage(activePage.id, activePage);
+    const canvasview = accessor.get(CanvasView), sceneObject = canvasview.createObjectToPage(data, activePage.id);
+    return sceneObject && canvasview.setObjectActiveByPage(sceneObject, activePage.id), !0;
+  }, "handler")
+};
+var jsxRuntime = { exports: {} }, reactJsxRuntime_production_min = {};
 /**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -20,137 +205,1793 @@ var N = { exports: {} }, f = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var ie = D, se = Symbol.for("react.element"), ne = Symbol.for("react.fragment"), oe = Object.prototype.hasOwnProperty, ae = ie.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, ce = { key: !0, ref: !0, __self: !0, __source: !0 };
-function w(t, e, r) {
-  var i, s = {}, n = null, o = null;
-  r !== void 0 && (n = "" + r), e.key !== void 0 && (n = "" + e.key), e.ref !== void 0 && (o = e.ref);
-  for (i in e) oe.call(e, i) && !ce.hasOwnProperty(i) && (s[i] = e[i]);
-  if (t && t.defaultProps) for (i in e = t.defaultProps, e) s[i] === void 0 && (s[i] = e[i]);
-  return { $$typeof: se, type: t, key: n, ref: o, props: s, _owner: ae.current };
-}
-f.Fragment = ne;
-f.jsx = w;
-f.jsxs = w;
-N.exports = f;
-var c = N.exports;
-const A = {
-  id: "slide.operation.activate-slide",
-  type: x.OPERATION,
-  handler: (t, e) => (t.get(y).activePage(e.id), !0)
-}, L = {
-  id: "slide.operation.set-slide-page-thumb",
-  type: x.OPERATION,
-  handler: (t) => (t.get(y).createThumbs(), !0)
-}, de = "univer-slide-bar", le = "univer-slide-bar-content", ve = "univer-slide-bar-item", me = "univer-slide-bar-box", ue = "univer-slide-bar-item-active", pe = "univer-slide-add-button", d = {
-  slideBar: de,
-  slideBarContent: le,
-  slideBarItem: ve,
-  slideBarBox: me,
-  slideBarItemActive: ue,
-  slideAddButton: pe
+var f = React, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
+function q(c, a, g) {
+  var b, d = {}, e = null, h = null;
+  g !== void 0 && (e = "" + g), a.key !== void 0 && (e = "" + a.key), a.ref !== void 0 && (h = a.ref);
+  for (b in a) m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+  if (c && c.defaultProps) for (b in a = c.defaultProps, a) d[b] === void 0 && (d[b] = a[b]);
+  return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
+}
+__name(q, "q");
+reactJsxRuntime_production_min.Fragment = l;
+reactJsxRuntime_production_min.jsx = q;
+reactJsxRuntime_production_min.jsxs = q;
+jsxRuntime.exports = reactJsxRuntime_production_min;
+var jsxRuntimeExports = jsxRuntime.exports;
+const UpdateSlideElementOperation = {
+  id: "slide.operation.update-element",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const { oKey, props } = params, slideData = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage();
+    return activePage.pageElements[oKey] = Tools.deepMerge(activePage.pageElements[oKey], props), slideData.updatePage(activePage.id, activePage), !0;
+  }, "handler")
+}, imageCommonPanel$1 = "univer-image-common-panel", imageCommonPanelGrid$1 = "univer-image-common-panel-grid", imageCommonPanelBorder$1 = "univer-image-common-panel-border", imageCommonPanelTitle$1 = "univer-image-common-panel-title", imageCommonPanelSubtitle$1 = "univer-image-common-panel-subtitle", imageCommonPanelRow$1 = "univer-image-common-panel-row", imageCommonPanelRowVertical$1 = "univer-image-common-panel-row-vertical", imageCommonPanelColumn$1 = "univer-image-common-panel-column", imageCommonPanelColumnCenter$1 = "univer-image-common-panel-column-center", imageCommonPanelInline$1 = "univer-image-common-panel-inline", imageCommonPanelSpan2$1 = "univer-image-common-panel-span2", imageCommonPanelSpan3$1 = "univer-image-common-panel-span3", imageCommonPanelInput$1 = "univer-image-common-panel-input", slidePanelColorPicker = "univer-slide-panel-color-picker", styles$5 = {
+  imageCommonPanel: imageCommonPanel$1,
+  imageCommonPanelGrid: imageCommonPanelGrid$1,
+  imageCommonPanelBorder: imageCommonPanelBorder$1,
+  imageCommonPanelTitle: imageCommonPanelTitle$1,
+  imageCommonPanelSubtitle: imageCommonPanelSubtitle$1,
+  imageCommonPanelRow: imageCommonPanelRow$1,
+  imageCommonPanelRowVertical: imageCommonPanelRowVertical$1,
+  imageCommonPanelColumn: imageCommonPanelColumn$1,
+  imageCommonPanelColumnCenter: imageCommonPanelColumnCenter$1,
+  imageCommonPanelInline: imageCommonPanelInline$1,
+  imageCommonPanelSpan2: imageCommonPanelSpan2$1,
+  imageCommonPanelSpan3: imageCommonPanelSpan3$1,
+  imageCommonPanelInput: imageCommonPanelInput$1,
+  slidePanelColorPicker
 };
-function _e() {
-  const t = u(C), e = u(R), r = u(re), i = u(y), s = Z(null), n = H(
-    () => t.getCurrentTypeOfUnit$(P.UNIVER_SLIDE),
-    void 0,
-    void 0,
-    []
-  ), o = n == null ? void 0 : n.getPages(), I = n == null ? void 0 : n.getPageOrder();
-  if (!o || !I)
-    return null;
-  const l = I.map((a) => o[a]), [v, T] = B([]), [$, V] = B(I[0]);
-  S(() => {
-    T(l.map((a) => D.createRef()));
-  }, [l]), S(() => {
-    i.activePageId$.subscribe((a) => {
-      V(a);
+function ArrangePanel$1(props) {
+  const { unitId } = props, localeService = useDependency(LocaleService), canvasView = useDependency(CanvasView), commandService = useDependency(ICommandService), page = canvasView.getRenderUnitByPageId(unitId), scene = page == null ? void 0 : page.scene;
+  if (!scene) return null;
+  const transformer = scene.getTransformer();
+  if (!transformer) return null;
+  const object = transformer.getSelectedObjectMap().values().next().value;
+  if (!object) return null;
+  const onArrangeBtnClick = /* @__PURE__ */ __name((arrangeType) => {
+    const allObjects = scene.getAllObjects(), [minZIndex, maxZIndex] = allObjects.reduce(([min, max], obj) => {
+      const zIndex2 = obj.zIndex, minZIndex2 = zIndex2 < min ? zIndex2 : min, maxZIndex2 = zIndex2 > max ? zIndex2 : max;
+      return [minZIndex2, maxZIndex2];
+    }, [0, 0]);
+    let zIndex = object.zIndex;
+    arrangeType === 3 ? zIndex = minZIndex - 1 : arrangeType === 2 ? zIndex = maxZIndex + 1 : arrangeType === 0 ? zIndex = object.zIndex + 1 : arrangeType === 1 && (zIndex = object.zIndex - 1), object.setProps({
+      zIndex
+    }), commandService.executeCommand(UpdateSlideElementOperation.id, {
+      oKey: object == null ? void 0 : object.oKey,
+      props: {
+        zIndex
+      }
+    });
+  }, "onArrangeBtnClick");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.imageCommonPanelGrid, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelTitle), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: localeService.t("image-panel.arrange.title") }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.imageCommonPanelRow, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+        onArrangeBtnClick(
+          0
+          /* forward */
+        );
+      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$5.imageCommonPanelInline, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MoveUpSingle, {}),
+        localeService.t("image-panel.arrange.forward")
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+        onArrangeBtnClick(
+          1
+          /* backward */
+        );
+      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$5.imageCommonPanelInline, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MoveDownSingle, {}),
+        localeService.t("image-panel.arrange.backward")
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.imageCommonPanelRow, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+        onArrangeBtnClick(
+          2
+          /* front */
+        );
+      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$5.imageCommonPanelInline, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TopmostSingle, {}),
+        localeService.t("image-panel.arrange.front")
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+        onArrangeBtnClick(
+          3
+          /* back */
+        );
+      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$5.imageCommonPanelInline, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(BottomSingle, {}),
+        localeService.t("image-panel.arrange.back")
+      ] }) }) })
+    ] })
+  ] });
+}
+__name(ArrangePanel$1, "ArrangePanel$1");
+function TransformPanel(props) {
+  const { unitId } = props, localeService = useDependency(LocaleService), canvasView = useDependency(CanvasView), commandService = useDependency(ICommandService), page = canvasView.getRenderUnitByPageId(unitId), scene = page == null ? void 0 : page.scene;
+  if (!scene) return null;
+  const transformer = scene.getTransformer();
+  if (!transformer) return null;
+  const object = transformer.getSelectedObjectMap().values().next().value;
+  if (!object) return null;
+  const {
+    width: originWidth = 0,
+    height: originHeight = 0,
+    left: originX = 0,
+    top: originY = 0,
+    angle: originRotation = 0
+  } = object, [width, setWidth] = useState(originWidth), [height, setHeight] = useState(originHeight), [xPosition, setXPosition] = useState(originX), [yPosition, setYPosition] = useState(originY), [rotation, setRotation] = useState(originRotation), changeObs = /* @__PURE__ */ __name((state) => {
+    const { objects } = state, object2 = objects.values().next().value, {
+      width: originWidth2 = 0,
+      height: originHeight2 = 0,
+      left: originX2 = 0,
+      top: originY2 = 0,
+      angle: originRotation2 = 0
+    } = object2;
+    setWidth(originWidth2), setHeight(originHeight2), setXPosition(originX2), setYPosition(originY2), setRotation(originRotation2);
+  }, "changeObs");
+  useEffect(() => {
+    const changeStartSub = transformer.changeStart$.subscribe((state) => {
+      changeObs(state);
+    }), changingSub = transformer.changing$.subscribe((state) => {
+      changeObs(state);
     });
-  }, []), S(() => {
-    v.forEach((a, m) => {
-      var O;
-      if (a.current) {
-        const M = l[m];
-        (O = r.getRenderById(M.id)) == null || O.engine.setContainer(a.current);
-      }
-    }), v.length > 0 && e.syncExecuteCommand(L.id);
-  }, [v]);
-  const F = k((a) => {
-    e.syncExecuteCommand(A.id, { id: a });
-  }, [e]);
-  return /* @__PURE__ */ c.jsx("div", { className: d.slideBar, ref: s, children: /* @__PURE__ */ c.jsx(te, { children: /* @__PURE__ */ c.jsx("div", { className: d.slideBarContent, children: l.map((a, m) => /* @__PURE__ */ c.jsxs(
+    return () => {
+      changingSub.unsubscribe(), changeStartSub.unsubscribe();
+    };
+  }, []);
+  function handleWidthChange(val) {
+    !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      oKey: object.oKey,
+      props: {
+        width: val
+      }
+    }), object == null || object.resize(val, object.height), setWidth(val), transformer == null || transformer.refreshControls());
+  }
+  __name(handleWidthChange, "handleWidthChange");
+  function handleHeightChange(val) {
+    !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      oKey: object.oKey,
+      props: {
+        height: val
+      }
+    }), object == null || object.resize(object.width, val), setHeight(val), transformer == null || transformer.refreshControls());
+  }
+  __name(handleHeightChange, "handleHeightChange");
+  function handleXChange(val) {
+    !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      oKey: object.oKey,
+      props: {
+        left: val
+      }
+    }), object == null || object.translate(val, object.top), setXPosition(val), transformer == null || transformer.refreshControls());
+  }
+  __name(handleXChange, "handleXChange");
+  function handleYChange(val) {
+    !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      oKey: object.oKey,
+      props: {
+        right: val
+      }
+    }), object == null || object.translate(object.left, val), setYPosition(val), transformer == null || transformer.refreshControls());
+  }
+  __name(handleYChange, "handleYChange");
+  function handleChangeRotation(val) {
+    !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      oKey: object.oKey,
+      props: {
+        angle: val
+      }
+    }), object == null || object.transformByState({
+      angle: val
+    }), setRotation(val), transformer == null || transformer.refreshControls());
+  }
+  return __name(handleChangeRotation, "handleChangeRotation"), /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: ee(d.slideBarItem, {
-        [d.slideBarItemActive]: a.id === $
-      }),
-      onClick: () => F(a.id),
+      className: clsx(styles$5.imageCommonPanelGrid, styles$5.imageCommonPanelBorder),
       children: [
-        /* @__PURE__ */ c.jsx("span", { children: m + 1 }),
-        /* @__PURE__ */ c.jsx("div", { ref: v[m], className: d.slideBarBox })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelTitle), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: localeService.t("image-panel.transform.title") }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.imageCommonPanelRow, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelSpan3), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelColumn, children: localeService.t("image-panel.transform.width") }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelColumn, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputNumber,
+              {
+                className: styles$5.imageCommonPanelInput,
+                min: 1,
+                value: width,
+                onChange: /* @__PURE__ */ __name((val) => {
+                  handleWidthChange(val);
+                }, "onChange")
+              }
+            ) }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelSpan3), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelColumn, children: localeService.t("image-panel.transform.height") }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelColumn, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputNumber,
+              {
+                className: styles$5.imageCommonPanelInput,
+                min: 1,
+                value: height,
+                onChange: /* @__PURE__ */ __name((val) => {
+                  handleHeightChange(val);
+                }, "onChange")
+              }
+            ) }) })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.imageCommonPanelRow, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelSpan3), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelColumn, children: localeService.t("image-panel.transform.x") }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelColumn, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputNumber,
+              {
+                className: styles$5.imageCommonPanelInput,
+                precision: 1,
+                min: 0,
+                value: xPosition,
+                onChange: /* @__PURE__ */ __name((val) => {
+                  handleXChange(val);
+                }, "onChange")
+              }
+            ) }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelSpan3), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelColumn, children: localeService.t("image-panel.transform.y") }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelColumn, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputNumber,
+              {
+                className: styles$5.imageCommonPanelInput,
+                precision: 1,
+                min: 0,
+                value: yPosition,
+                onChange: /* @__PURE__ */ __name((val) => {
+                  handleYChange(val);
+                }, "onChange")
+              }
+            ) }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelSpan3), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelColumn, children: localeService.t("image-panel.transform.rotate") }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelColumn, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputNumber,
+              {
+                className: styles$5.imageCommonPanelInput,
+                precision: 1,
+                value: rotation,
+                onChange: handleChangeRotation
+              }
+            ) }) })
+          ] }) })
+        ] })
       ]
+    }
+  );
+}
+__name(TransformPanel, "TransformPanel");
+function ArrangePanel(props) {
+  var _a9, _b;
+  const { unitId } = props, localeService = useDependency(LocaleService), canvasView = useDependency(CanvasView), commandService = useDependency(ICommandService), page = canvasView.getRenderUnitByPageId(unitId), scene = page == null ? void 0 : page.scene;
+  if (!scene) return null;
+  const transformer = scene.getTransformer();
+  if (!transformer) return null;
+  const object = transformer.getSelectedObjectMap().values().next().value;
+  if (!object) return null;
+  const [color, setColor] = React.useState((_b = (_a9 = object.fill) == null ? void 0 : _a9.toString()) != null ? _b : "");
+  function handleChangeColor(color2) {
+    object == null || object.setProps({
+      fill: color2
+    }), commandService.executeCommand(UpdateSlideElementOperation.id, {
+      oKey: object == null ? void 0 : object.oKey,
+      props: {
+        shape: {
+          shapeProperties: {
+            shapeBackgroundFill: {
+              rgb: color2
+            }
+          }
+        }
+      }
+    }), setColor(color2);
+  }
+  return __name(handleChangeColor, "handleChangeColor"), /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: clsx(styles$5.imageCommonPanelGrid, styles$5.imageCommonPanelBorder),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$5.imageCommonPanelGrid, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelTitle), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: localeService.t("slide.panel.fill.title") }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$5.imageCommonPanelColumn, styles$5.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Dropdown,
+          {
+            align: {
+              offset: [0, 18]
+            },
+            overlay: /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: styles$5.slidePanelColorPicker, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ColorPicker,
+              {
+                color: "#fff",
+                onChange: handleChangeColor
+              }
+            ) }),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("a", { className: styles$5.uiPluginSheetsBorderPanelButton, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(PaintBucket, { extend: { colorChannel1: color != null ? color : "rgb(var(--primary-color))" } }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$5.uiPluginSheetsBorderPanelMoreIcon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreDownSingle, {}) })
+            ] })
+          }
+        ) }) })
+      ] })
+    }
+  );
+}
+__name(ArrangePanel, "ArrangePanel");
+const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "univer-image-common-panel-grid", imageCommonPanelBorder = "univer-image-common-panel-border", imageCommonPanelTitle = "univer-image-common-panel-title", imageCommonPanelSubtitle = "univer-image-common-panel-subtitle", imageCommonPanelRow = "univer-image-common-panel-row", imageCommonPanelRowVertical = "univer-image-common-panel-row-vertical", imageCommonPanelColumn = "univer-image-common-panel-column", imageCommonPanelColumnCenter = "univer-image-common-panel-column-center", imageCommonPanelInline = "univer-image-common-panel-inline", imageCommonPanelSpan2 = "univer-image-common-panel-span2", imageCommonPanelSpan3 = "univer-image-common-panel-span3", imageCommonPanelInput = "univer-image-common-panel-input", styles$4 = {
+  imageCommonPanel,
+  imageCommonPanelGrid,
+  imageCommonPanelBorder,
+  imageCommonPanelTitle,
+  imageCommonPanelSubtitle,
+  imageCommonPanelRow,
+  imageCommonPanelRowVertical,
+  imageCommonPanelColumn,
+  imageCommonPanelColumnCenter,
+  imageCommonPanelInline,
+  imageCommonPanelSpan2,
+  imageCommonPanelSpan3,
+  imageCommonPanelInput
+}, COMPONENT_SLIDE_SIDEBAR = "COMPONENT_SLIDE_SIDEBAR";
+function RectSidebar() {
+  var _a9, _b;
+  const univerInstanceService = useDependency(IUniverInstanceService), canvasView = useDependency(CanvasView), currentSlide = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pageId = (_a9 = currentSlide == null ? void 0 : currentSlide.getActivePage()) == null ? void 0 : _a9.id;
+  if (!pageId) return null;
+  const transformer = (_b = canvasView.getRenderUnitByPageId(pageId).scene) == null ? void 0 : _b.getTransformer();
+  if (!transformer) return null;
+  const object = transformer.getSelectedObjectMap().values().next().value;
+  return object ? /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: styles$4.imageCommonPanel, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ArrangePanel$1, { unitId: pageId }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TransformPanel, { unitId: pageId }),
+    object.objectType === ObjectType.RECT && /* @__PURE__ */ jsxRuntimeExports.jsx(ArrangePanel, { unitId: pageId })
+  ] }) : null;
+}
+__name(RectSidebar, "RectSidebar");
+const InsertSlideShapeRectangleOperation = {
+  id: "slide.operation.insert-float-shape",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const id = generateRandomId(6), data = {
+      id,
+      zIndex: 20,
+      left: 378,
+      top: 142,
+      width: 250,
+      height: 250,
+      title: id,
+      description: "",
+      type: PageElementType.SHAPE,
+      shape: {
+        shapeType: BasicShapes.Rect,
+        text: "",
+        shapeProperties: {
+          shapeBackgroundFill: {
+            rgb: "rgb(0,0,255)"
+          }
+        }
+      }
+    }, slideData = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage();
+    activePage.pageElements[id] = data, slideData.updatePage(activePage.id, activePage);
+    const canvasview = accessor.get(CanvasView), sceneObject = canvasview.createObjectToPage(data, activePage.id);
+    return sceneObject && canvasview.setObjectActiveByPage(sceneObject, activePage.id), !0;
+  }, "handler")
+}, ToggleSlideEditSidebarOperation = {
+  id: "sidebar.operation.slide-shape",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const { visible, objectType } = params, sidebarService = accessor.get(ISidebarService), localeService = accessor.get(LocaleService);
+    let title = "", children = "";
+    return objectType === ObjectType.RECT ? (title = "slide.sidebar.shape", children = COMPONENT_SLIDE_SIDEBAR) : objectType === ObjectType.IMAGE ? (title = "slide.sidebar.image", children = COMPONENT_SLIDE_SIDEBAR) : objectType === ObjectType.RICH_TEXT && (title = "slide.sidebar.text", children = COMPONENT_SLIDE_SIDEBAR), visible ? sidebarService.open({
+      header: { title: localeService.t(title) },
+      children: { label: children },
+      onClose: /* @__PURE__ */ __name(() => {
+      }, "onClose"),
+      width: 360
+    }) : sidebarService.close(), !0;
+  }, "handler")
+}, SlideAddTextOperation = {
+  id: "slide.operation.add-text",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const elementId = Tools.generateRandomId(6), defaultWidth = 220, defaultheight = 40, left = 230, top = 142, textContent = (params == null ? void 0 : params.text) || "A New Text", elementData = {
+      id: elementId,
+      zIndex: 2,
+      left,
+      top,
+      width: defaultWidth,
+      height: defaultheight,
+      title: "text",
+      description: "",
+      type: PageElementType.TEXT,
+      richText: {
+        text: textContent,
+        fs: 30,
+        cl: {
+          rgb: "rgb(51, 51, 51)"
+        },
+        bl: 1
+      }
+    }, slideData = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage();
+    activePage.pageElements[elementId] = elementData, slideData.updatePage(activePage.id, activePage);
+    const canvasview = accessor.get(CanvasView), sceneObject = canvasview.createObjectToPage(elementData, activePage.id);
+    return sceneObject && canvasview.setObjectActiveByPage(sceneObject, activePage.id), !0;
+  }, "handler")
+}, SetSlidePageThumbOperation = {
+  id: "slide.operation.set-slide-page-thumb",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor) => (accessor.get(CanvasView).createThumbs(), !0), "handler")
+}, SetTextEditArrowOperation = {
+  id: "slide.operation.edit-arrow",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name(() => !0, "handler")
+}, imagePopupMenu = "univer-image-popup-menu", imagePopupMenuItem = "univer-image-popup-menu-item", imagePopupMenuItemIcon = "univer-image-popup-menu-item-icon", imagePopupMenuItemTitle = "univer-image-popup-menu-item-title", imagePopupMenuItemHide = "univer-image-popup-menu-item-hide", btnContainer = "univer-btn-container", btnContainerExpand = "univer-btn-container-expand", styles$3 = {
+  imagePopupMenu,
+  imagePopupMenuItem,
+  imagePopupMenuItemIcon,
+  imagePopupMenuItemTitle,
+  imagePopupMenuItemHide,
+  btnContainer,
+  btnContainerExpand
+}, SlideImagePopupMenu = /* @__PURE__ */ __name((props) => {
+  var _a9, _b;
+  const menuItems = (_b = (_a9 = props.popup) == null ? void 0 : _a9.extraProps) == null ? void 0 : _b.menuItems;
+  if (!menuItems)
+    return null;
+  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), [visible, setVisible] = useState(!1), [isHovered, setHovered] = useState(!1), handleMouseEnter = /* @__PURE__ */ __name(() => {
+    setHovered(!0);
+  }, "handleMouseEnter"), handleMouseLeave = /* @__PURE__ */ __name(() => {
+    setHovered(!1);
+  }, "handleMouseLeave"), onVisibleChange = /* @__PURE__ */ __name((visible2) => {
+    setVisible(visible2);
+  }, "onVisibleChange"), handleClick = /* @__PURE__ */ __name((item) => {
+    commandService.executeCommand(item.commandId, item.commandParams), setVisible(!1);
+  }, "handleClick"), showMore = visible || isHovered, availableMenu = menuItems.filter((item) => !item.disable);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Dropdown,
+        {
+          placement: "bottomLeft",
+          trigger: ["click"],
+          overlay: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: styles$3.imagePopupMenu, children: availableMenu.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "li",
+            {
+              onClick: /* @__PURE__ */ __name(() => handleClick(item), "onClick"),
+              className: styles$3.imagePopupMenuItem,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.imagePopupMenuItemTitle, children: localeService.t(item.label) })
+            },
+            item.index
+          )) }),
+          visible,
+          onVisibleChange,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: clsx(styles$3.btnContainer, {
+                [styles$3.btnContainerExpand]: visible
+              }),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Autofill,
+                  {
+                    style: { color: "#35322B" },
+                    extend: { colorChannel1: "rgb(var(--green-700, #409f11))" }
+                  }
+                ),
+                showMore && /* @__PURE__ */ jsxRuntimeExports.jsx(MoreDownSingle, { style: { color: "#CCCCCC", fontSize: "8px", marginLeft: "8px" } })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}, "SlideImagePopupMenu"), COMPONENT_SLIDE_IMAGE_POPUP_MENU = "COMPONENT_SLIDE_IMAGE_POPUP_MENU", uploadFileMenu = "univer-upload-file-menu", uploadFileMenuInput = "univer-upload-file-menu-input", styles$2 = {
+  uploadFileMenu,
+  uploadFileMenuInput
+}, COMPONENT_UPLOAD_FILE_MENU = "COMPONENT_UPLOAD_FILE_MENU";
+var UploadFileType = /* @__PURE__ */ ((UploadFileType2) => (UploadFileType2[UploadFileType2.cellImage = 0] = "cellImage", UploadFileType2[UploadFileType2.floatImage = 1] = "floatImage", UploadFileType2))(UploadFileType || {});
+const UploadFileMenu = /* @__PURE__ */ __name((props) => {
+  const { type } = props, commandService = useDependency(ICommandService), fileInputRef = useRef(null), handleButtonClick = /* @__PURE__ */ __name(() => {
+    var _a9;
+    (_a9 = fileInputRef.current) == null || _a9.click();
+  }, "handleButtonClick"), imageAccept = DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace("image/", "")}`).join(","), handleFileChange = /* @__PURE__ */ __name((event) => {
+    const fileList = event.target.files;
+    if (fileList == null)
+      return;
+    const files = Array.from(fileList);
+    type === UploadFileType.floatImage && commandService.executeCommand(InsertSlideFloatImageOperation.id, { files }), fileInputRef.current && (fileInputRef.current.value = "");
+  }, "handleFileChange");
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: handleButtonClick, className: styles$2.uploadFileMenu, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "input",
+    {
+      type: "file",
+      className: styles$2.uploadFileMenuInput,
+      ref: fileInputRef,
+      onChange: handleFileChange,
+      accept: imageAccept,
+      multiple: !0
+    }
+  ) });
+}, "UploadFileMenu"), _SlideEditorManagerService = class _SlideEditorManagerService {
+  constructor() {
+    __publicField(this, "_state", null);
+    __publicField(this, "_rect", null);
+    __publicField(this, "_state$", new BehaviorSubject(null));
+    __publicField(this, "state$", this._state$.asObservable());
+    __publicField(this, "_rect$", new BehaviorSubject(null));
+    __publicField(this, "rect$", this._rect$.asObservable());
+    __publicField(this, "_focus", !1);
+    __publicField(this, "_focus$", new BehaviorSubject(this._focus));
+    __publicField(this, "focus$", this._focus$.asObservable());
+  }
+  dispose() {
+    this._state$.complete(), this._state = null, this._rect$.complete(), this._rect = null;
+  }
+  setState(param) {
+    this._state = param, this._refresh(param);
+  }
+  getRect() {
+    return this._rect;
+  }
+  setRect(param) {
+    this._rect = param, this._rect$.next(param);
+  }
+  getState() {
+    return this._state;
+  }
+  setFocus(param = !1) {
+    this._focus = param, this._focus$.next(param);
+  }
+  _refresh(param) {
+    this._state$.next(param);
+  }
+};
+__name(_SlideEditorManagerService, "SlideEditorManagerService");
+let SlideEditorManagerService = _SlideEditorManagerService;
+const ISlideEditorManagerService = createIdentifier(
+  "univer.slide-editor-manager.service"
+), slideEditorContainer = "univer-slide-editor-container", editorInput = "univer-editor-input", styles$1 = {
+  slideEditorContainer,
+  editorInput
+}, HIDDEN_EDITOR_POSITION$1 = -1e3, EDITOR_DEFAULT_POSITION = {
+  width: 0,
+  height: 0,
+  top: HIDDEN_EDITOR_POSITION$1,
+  left: HIDDEN_EDITOR_POSITION$1
+}, EditorContainer = /* @__PURE__ */ __name(() => {
+  const [state, setState] = useState({
+    ...EDITOR_DEFAULT_POSITION
+  }), slideEditorManagerService = useDependency(ISlideEditorManagerService), editorService = useDependency(IEditorService), contextService = useDependency(IContextService), disableAutoFocus = useObservable(
+    () => contextService.subscribeContextValue$(DISABLE_AUTO_FOCUS_KEY),
+    !1,
+    void 0,
+    [contextService, DISABLE_AUTO_FOCUS_KEY]
+  ), snapshot = {
+    id: DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
+    body: {
+      dataStream: `${DEFAULT_EMPTY_DOCUMENT_VALUE}`,
+      textRuns: [],
+      paragraphs: [
+        {
+          startIndex: 0
+        }
+      ]
+    },
+    documentStyle: {
+      documentFlavor: DocumentFlavor.MODERN
+    }
+  };
+  return useEffect(() => {
+    slideEditorManagerService.state$.subscribe((param) => {
+      if (param == null)
+        return;
+      const {
+        startX = HIDDEN_EDITOR_POSITION$1,
+        startY = HIDDEN_EDITOR_POSITION$1,
+        endX = 0,
+        endY = 0,
+        show = !1
+      } = param;
+      if (!show)
+        setState({
+          ...EDITOR_DEFAULT_POSITION
+        });
+      else {
+        setState({
+          width: endX - startX - FIX_ONE_PIXEL_BLUR_OFFSET + 2,
+          height: endY - startY - FIX_ONE_PIXEL_BLUR_OFFSET + 2,
+          left: startX + FIX_ONE_PIXEL_BLUR_OFFSET,
+          top: startY + FIX_ONE_PIXEL_BLUR_OFFSET
+        });
+        const editor = editorService.getEditor(DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
+        if (editor == null)
+          return;
+        const { left, top, width, height } = editor.getBoundingClientRect();
+        slideEditorManagerService.setRect({ left, top, width, height });
+      }
+    });
+  }, []), useEffect(() => {
+    disableAutoFocus || slideEditorManagerService.setFocus(!0);
+  }, [disableAutoFocus, state]), /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: styles$1.slideEditorContainer,
+      style: {
+        left: state.left,
+        top: state.top,
+        width: state.width,
+        height: state.height
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TextEditor,
+        {
+          id: DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
+          className: styles$1.editorInput,
+          snapshot,
+          cancelDefaultResizeListener: !1,
+          isSheetEditor: !1,
+          isSingle: !1
+        }
+      )
+    }
+  );
+}, "EditorContainer"), AppendSlideOperation = {
+  id: "slide.operation.append-slide",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor) => {
+    const univerInstanceService = accessor.get(IUniverInstanceService), canvasView = accessor.get(CanvasView);
+    return univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE) ? (canvasView.appendPage(), !0) : !1;
+  }, "handler")
+}, slideBar = "univer-slide-bar", slideBarContent = "univer-slide-bar-content", slideBarContentHeader = "univer-slide-bar-content-header", slideBarItem = "univer-slide-bar-item", slideBarBox = "univer-slide-bar-box", slideBarItemActive = "univer-slide-bar-item-active", slideAddButton = "univer-slide-add-button", styles = {
+  slideBar,
+  slideBarContent,
+  slideBarContentHeader,
+  slideBarItem,
+  slideBarBox,
+  slideBarItemActive,
+  slideAddButton
+};
+function SlideSideBar() {
+  var _a9, _b;
+  const univerInstanceService = useDependency(IUniverInstanceService), commandService = useDependency(ICommandService), renderManagerService = useDependency(IRenderManagerService), localeService = useDependency(LocaleService), slideBarRef = useRef(null), currentSlide = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pages = currentSlide == null ? void 0 : currentSlide.getPages(), pageOrder = currentSlide == null ? void 0 : currentSlide.getPageOrder();
+  if (!pages || !pageOrder)
+    return null;
+  const slideList = pageOrder.map((id) => pages[id]), [divRefs, setDivRefs] = useState([]), [activatePageId, setActivatePageId] = useState((_b = (_a9 = currentSlide == null ? void 0 : currentSlide.getActivePage()) == null ? void 0 : _a9.id) != null ? _b : null);
+  useEffect(() => {
+    setDivRefs(slideList.map((_) => React.createRef()));
+  }, [slideList.length]), useEffect(() => {
+    const subscriber = currentSlide == null ? void 0 : currentSlide.activePage$.subscribe((page) => {
+      var _a10;
+      const id = (_a10 = page == null ? void 0 : page.id) != null ? _a10 : null;
+      id && setActivatePageId(id);
+    });
+    return () => {
+      subscriber == null || subscriber.unsubscribe();
+    };
+  }, []), useEffect(() => {
+    divRefs.forEach((ref, index) => {
+      var _a10;
+      if (ref.current) {
+        const slide = slideList[index];
+        (_a10 = renderManagerService.getRenderById(slide.id)) == null || _a10.engine.setContainer(ref.current);
+      }
+    }), divRefs.length > 0 && commandService.syncExecuteCommand(SetSlidePageThumbOperation.id);
+  }, [divRefs]);
+  const activatePage = useCallback((page) => {
+    commandService.syncExecuteCommand(ActivateSlidePageOperation.id, { id: page });
+  }, [commandService]), handleAppendSlide = useCallback(() => {
+    commandService.syncExecuteCommand(AppendSlideOperation.id);
+  }, [commandService]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: styles.slideBar, ref: slideBarRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Scrollbar, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.slideBarContent, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("header", { className: styles.slideBarContentHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { onClick: handleAppendSlide, children: localeService.t("slide.append") }) }),
+    slideList.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: clsx(styles.slideBarItem, {
+          [styles.slideBarItemActive]: item.id === activatePageId
+        }),
+        onClick: /* @__PURE__ */ __name(() => activatePage(item.id), "onClick"),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: index + 1 }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: divRefs[index], className: styles.slideBarBox })
+        ]
+      },
+      item.id
+    ))
+  ] }) }) });
+}
+__name(SlideSideBar, "SlideSideBar");
+const IMAGE_UPLOAD_ICON = "addition-and-subtraction-single", IMAGE_MENU_ID = "slide.menu.image";
+function SlideImageMenuFactory(accessor) {
+  return {
+    id: IMAGE_MENU_ID,
+    type: MenuItemType.SUBITEMS,
+    positions: [MenuPosition.TOOLBAR_START],
+    group: MenuGroup.TOOLBAR_FORMULAS_INSERT,
+    icon: IMAGE_UPLOAD_ICON,
+    tooltip: "slide.image.insert.title",
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SLIDE)
+    // disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+  };
+}
+__name(SlideImageMenuFactory, "SlideImageMenuFactory");
+function UploadSlideFloatImageMenuFactory(_accessor) {
+  return {
+    id: InsertSlideFloatImageOperation.id,
+    title: "slide.image.insert.float",
+    type: MenuItemType.SELECTOR,
+    label: {
+      name: COMPONENT_UPLOAD_FILE_MENU,
+      props: {
+        type: UploadFileType.floatImage
+      }
     },
-    a.id
-  )) }) }) });
-}
-var fe = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, he = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? Ie(e, r) : e, n = t.length - 1, o; n >= 0; n--)
-    (o = t[n]) && (s = (i ? o(e, r, s) : o(s)) || s);
-  return i && s && fe(e, r, s), s;
-}, g = (t, e) => (r, i) => e(r, i, t);
-let _ = class extends G {
-  constructor(t, e, r) {
-    super(), this._injector = t, this._uiPartsService = e, this._commandService = r, this._initCommands(), this._initUIComponents();
+    positions: [IMAGE_MENU_ID],
+    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
+  };
+}
+__name(UploadSlideFloatImageMenuFactory, "UploadSlideFloatImageMenuFactory");
+const GRAPH_SINGLE_ICON = "graph-single", SHAPE_MENU_ID = "slide.menu.shape";
+function SlideShapeMenuFactory(accessor) {
+  return {
+    id: SHAPE_MENU_ID,
+    type: MenuItemType.SUBITEMS,
+    positions: [MenuPosition.TOOLBAR_START],
+    group: MenuGroup.TOOLBAR_FORMULAS_INSERT,
+    icon: GRAPH_SINGLE_ICON,
+    tooltip: "slide.shape.insert.title",
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SLIDE)
+    // disabled$: getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }),
+  };
+}
+__name(SlideShapeMenuFactory, "SlideShapeMenuFactory");
+function UploadSlideFloatShapeMenuFactory(_accessor) {
+  return {
+    id: InsertSlideShapeRectangleOperation.id,
+    title: "slide.shape.insert.rectangle",
+    type: MenuItemType.BUTTON,
+    positions: [SHAPE_MENU_ID],
+    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
+  };
+}
+__name(UploadSlideFloatShapeMenuFactory, "UploadSlideFloatShapeMenuFactory");
+function whenEditorActivated(contextService) {
+  return contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && contextService.getContextValue(EDITOR_ACTIVATED);
+}
+__name(whenEditorActivated, "whenEditorActivated");
+function whenFormulaEditorFocused(contextService) {
+  return contextService.getContextValue(FORMULA_EDITOR_ACTIVATED) && contextService.getContextValue(FOCUSING_UNIVER_EDITOR);
+}
+__name(whenFormulaEditorFocused, "whenFormulaEditorFocused");
+const ARROW_SELECTION_KEYCODE_LIST = [
+  KeyCode.ARROW_DOWN,
+  KeyCode.ARROW_UP,
+  KeyCode.ARROW_LEFT,
+  KeyCode.ARROW_RIGHT
+];
+[KeyCode.ENTER, KeyCode.TAB, ...ARROW_SELECTION_KEYCODE_LIST];
+function generateArrowSelectionShortCutItem() {
+  const shortcutList = [];
+  for (const keycode of ARROW_SELECTION_KEYCODE_LIST)
+    shortcutList.push({
+      id: SetTextEditArrowOperation.id,
+      binding: keycode,
+      preconditions: /* @__PURE__ */ __name((contextService) => whenEditorActivated(contextService), "preconditions"),
+      staticParameters: {
+        visible: !1,
+        eventType: DeviceInputEventType.Keyboard,
+        keycode,
+        isShift: !1
+      }
+    }), shortcutList.push({
+      id: SetTextEditArrowOperation.id,
+      binding: keycode | MetaKeys.SHIFT,
+      preconditions: /* @__PURE__ */ __name((contextService) => whenEditorActivated(contextService), "preconditions"),
+      staticParameters: {
+        visible: !1,
+        eventType: DeviceInputEventType.Keyboard,
+        keycode,
+        isShift: !0
+      }
+    });
+  return shortcutList;
+}
+__name(generateArrowSelectionShortCutItem, "generateArrowSelectionShortCutItem");
+const EditorDeleteLeftShortcut = {
+  id: DeleteLeftCommand.id,
+  preconditions: /* @__PURE__ */ __name((contextService) => whenEditorActivated(contextService) || whenFormulaEditorFocused(contextService), "preconditions"),
+  binding: KeyCode.BACKSPACE
+}, TEXT_ICON_ID = "text-single";
+function SlideAddTextMenuItemFactory(_accessor) {
+  return {
+    id: SlideAddTextOperation.id,
+    group: MenuGroup.TOOLBAR_FORMULAS_INSERT,
+    type: MenuItemType.BUTTON,
+    icon: TEXT_ICON_ID,
+    tooltip: "slide.text.insert.title",
+    positions: [MenuPosition.TOOLBAR_START],
+    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
+  };
+}
+__name(SlideAddTextMenuItemFactory, "SlideAddTextMenuItemFactory");
+var __defProp$7 = Object.defineProperty, __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor, __decorateClass$7 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$7(target, key, result), result;
+}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a;
+let SlidesUIController = (_a = class extends Disposable {
+  constructor(_config, _injector, _menuService, _componentManager, _uiPartsService, _commandService, _shortcutService) {
+    super(), this._config = _config, this._injector = _injector, this._menuService = _menuService, this._componentManager = _componentManager, this._uiPartsService = _uiPartsService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._initCommands(), this._initCustomComponents(), this._initUIComponents(), this._initMenus(), this._initShortcuts();
+  }
+  _initMenus() {
+    const { menu = {} } = this._config || {};
+    [
+      SlideAddTextMenuItemFactory,
+      SlideImageMenuFactory,
+      UploadSlideFloatImageMenuFactory,
+      SlideShapeMenuFactory,
+      UploadSlideFloatShapeMenuFactory
+    ].forEach((menuFactory) => {
+      this._menuService.addMenuItem(menuFactory(this._injector), menu);
+    });
+  }
+  _initCustomComponents() {
+    const componentManager = this._componentManager;
+    this.disposeWithMe(componentManager.register(IMAGE_UPLOAD_ICON, AddImageSingle)), this.disposeWithMe(componentManager.register(TEXT_ICON_ID, TextSingle)), this.disposeWithMe(componentManager.register(GRAPH_SINGLE_ICON, GraphSingle)), this.disposeWithMe(componentManager.register(COMPONENT_UPLOAD_FILE_MENU, UploadFileMenu)), this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_IMAGE_POPUP_MENU, SlideImagePopupMenu)), this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_SIDEBAR, RectSidebar));
   }
   _initCommands() {
     [
-      A,
-      L
-    ].forEach((t) => this.disposeWithMe(this._commandService.registerCommand(t)));
+      AppendSlideOperation,
+      ActivateSlidePageOperation,
+      SetSlidePageThumbOperation,
+      InsertSlideFloatImageOperation,
+      SlideAddTextOperation,
+      InsertSlideShapeRectangleOperation,
+      ToggleSlideEditSidebarOperation,
+      DeleteSlideElementOperation,
+      UpdateSlideElementOperation,
+      // commands for editor
+      SetTextEditArrowOperation
+    ].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
   }
   _initUIComponents() {
     this.disposeWithMe(
-      this._uiPartsService.registerComponent(K.LEFT_SIDEBAR, () => X(_e, this._injector))
+      this._uiPartsService.registerComponent(BuiltInUIPart.LEFT_SIDEBAR, () => connectInjector(SlideSideBar, this._injector))
+    ), this.disposeWithMe(
+      this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(EditorContainer, this._injector))
     );
   }
-};
-_ = he([
-  J(Y.Ready, _),
-  g(0, j(U)),
-  g(1, Q),
-  g(2, R)
-], _);
-var Se = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, Pe = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? ge(e, r) : e, n = t.length - 1, o; n >= 0; n--)
-    (o = t[n]) && (s = (i ? o(e, r, s) : o(s)) || s);
-  return i && s && Se(e, r, s), s;
-}, E = (t, e) => (r, i) => e(r, i, t);
-const ye = "SLIDE_UI";
-var p;
-let b = (p = class extends z {
-  constructor(t, e, r) {
-    super(), this._injector = e, this._univerInstanceService = r;
-  }
-  onStarting(t) {
-    [[_]].forEach((e) => t.add(e));
+  _initShortcuts() {
+    [
+      EditorDeleteLeftShortcut,
+      ...generateArrowSelectionShortCutItem()
+    ].forEach((item) => {
+      this.disposeWithMe(this._shortcutService.registerShortcut(item));
+    });
+  }
+}, __name(_a, "SlidesUIController"), _a);
+SlidesUIController = __decorateClass$7([
+  OnLifecycle(LifecycleStages.Ready, SlidesUIController),
+  __decorateParam$7(1, Inject(Injector)),
+  __decorateParam$7(2, IMenuService),
+  __decorateParam$7(3, Inject(ComponentManager)),
+  __decorateParam$7(4, IUIPartsService),
+  __decorateParam$7(5, ICommandService),
+  __decorateParam$7(6, IShortcutService)
+], SlidesUIController);
+var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor, __decorateClass$6 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$6(target, key, result), result;
+}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6");
+const ISlideEditorBridgeService = createIdentifier("univer.slide-editor-bridge.service");
+var _a2;
+let SlideEditorBridgeService = (_a2 = class extends Disposable {
+  constructor(_editorService, _contextService, _renderManagerService) {
+    super();
+    __publicField(this, "_editorUnitId", DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
+    __publicField(this, "_isForceKeepVisible", !1);
+    __publicField(this, "_editorIsDirty", !1);
+    __publicField(this, "_currentEditRectState", null);
+    __publicField(this, "_currentEditRectState$", new BehaviorSubject(null));
+    __publicField(this, "currentEditRectState$", this._currentEditRectState$.asObservable());
+    __publicField(this, "_visible", {
+      visible: !1,
+      eventType: DeviceInputEventType.Dblclick,
+      unitId: ""
+    });
+    __publicField(this, "_visible$", new BehaviorSubject(this._visible));
+    __publicField(this, "visible$", this._visible$.asObservable());
+    __publicField(this, "_afterVisible$", new BehaviorSubject(this._visible));
+    __publicField(this, "afterVisible$", this._afterVisible$.asObservable());
+    __publicField(this, "_currentEditRectInfo");
+    this._editorService = _editorService, this._contextService = _contextService, this._renderManagerService = _renderManagerService;
+  }
+  dispose() {
+    super.dispose();
+  }
+  getEditorRect() {
+    return this._currentEditRectInfo;
+  }
+  /**
+   * 1st part of startEditing.
+   * editorBridgeRenderController@startEditing ---> editorBridgeRenderController@_updateEditor
+   * @editorInfo editorInfo
+   */
+  setEditorRect(editorInfo) {
+    this._currentEditRectInfo = editorInfo, this._editorService.getFocusEditor() || (this._editorService.focus(DOCS_NORMAL_EDITOR_UNIT_ID_KEY), this._contextService.setContextValue(EDITOR_ACTIVATED, !1), this._contextService.setContextValue(FOCUSING_EDITOR_STANDALONE, !1), this._contextService.setContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, !1));
+    const editRectState = this.getEditRectState();
+    this._currentEditRectState = editRectState, this._currentEditRectState$.next(editRectState);
+  }
+  changeVisible(param) {
+    this._visible = param, param.visible && (this._editorIsDirty = !1), this._visible$.next(this._visible), this._afterVisible$.next(this._visible);
+  }
+  /**
+   * get info from _currentEditRectInfo
+   *
+   * invoked by slide-editing.render-controller.ts@_handleEditorVisible
+   * && this@setEditorRect
+   */
+  getEditRectState() {
+    const editorUnitId = DOCS_NORMAL_EDITOR_UNIT_ID_KEY, editorRectInfo = this._currentEditRectInfo, unitId = editorRectInfo.unitId, docData = editorRectInfo.richTextObj.documentData;
+    docData.id = editorUnitId, docData.documentStyle = {
+      ...docData.documentStyle,
+      pageSize: { width: editorRectInfo.richTextObj.width, height: 1 / 0 }
+    };
+    const documentLayoutObject = {
+      documentModel: new DocumentDataModel(docData),
+      fontString: "document",
+      textRotation: { a: 0, v: 0 },
+      wrapStrategy: 0,
+      verticalAlign: VerticalAlign.TOP,
+      horizontalAlign: HorizontalAlign.LEFT,
+      paddingData: { t: 0, b: 1, l: 2, r: 2 }
+    }, editorWidth = editorRectInfo.richTextObj.width, editorHeight = editorRectInfo.richTextObj.height, left = editorRectInfo.richTextObj.left, top = editorRectInfo.richTextObj.top, canvasOffset = {
+      left: 0,
+      top: 0
+    }, renderUnit = this._renderManagerService.getRenderById(unitId), mainScene = renderUnit == null ? void 0 : renderUnit.scene, mainViewport = mainScene == null ? void 0 : mainScene.getViewport(SLIDE_KEY.VIEW), slideMainRect = mainScene == null ? void 0 : mainScene.getObject(SLIDE_KEY.COMPONENT), slidePos = {
+      x: (slideMainRect == null ? void 0 : slideMainRect.left) || 0,
+      y: (slideMainRect == null ? void 0 : slideMainRect.top) || 0
+    }, scrollX = (mainViewport == null ? void 0 : mainViewport.viewportScrollX) || 0, scrollY = (mainViewport == null ? void 0 : mainViewport.viewportScrollY) || 0;
+    return canvasOffset.left = slidePos.x - scrollX, canvasOffset.top = slidePos.y - scrollY, {
+      position: {
+        startX: left,
+        startY: top,
+        endX: left + editorWidth,
+        endY: top + editorHeight
+      },
+      scaleX: 1,
+      scaleY: 1,
+      slideCardOffset: canvasOffset,
+      unitId,
+      editorUnitId,
+      documentLayoutObject
+    };
+  }
+  changeEditorDirty(dirtyStatus) {
+    this._editorIsDirty = dirtyStatus;
+  }
+  isVisible() {
+    return this._visible;
+  }
+  getEditorDirty() {
+    return this._editorIsDirty;
+  }
+  getCurrentEditorId() {
+    return this._editorUnitId;
+  }
+  /**
+   * @deprecated
+   */
+  genDocData(target) {
+    const editorUnitId = this.getCurrentEditorId(), content = target.text, fontSize = target.fs;
+    return {
+      id: editorUnitId,
+      body: {
+        dataStream: `${content}\r
+`,
+        textRuns: [{ st: 0, ed: content.length }],
+        paragraphs: [{
+          paragraphStyle: {
+            // no use
+            // textStyle: { fs: 30 },
+            // horizontalAlign: HorizontalAlign.CENTER,
+            // verticalAlign: VerticalAlign.MIDDLE,
+          },
+          startIndex: content.length + 1
+        }],
+        sectionBreaks: [{ startIndex: content.length + 2 }]
+      },
+      documentStyle: {
+        marginBottom: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        marginTop: 0,
+        pageSize: { width: 1 / 0, height: 1 / 0 },
+        textStyle: { fs: fontSize },
+        renderConfig: {
+          // horizontalAlign: HorizontalAlign.CENTER,
+          verticalAlign: VerticalAlign.MIDDLE,
+          centerAngle: 0,
+          vertexAngle: 0,
+          wrapStrategy: 0
+        }
+      },
+      drawings: {},
+      drawingsOrder: [],
+      settings: { zoomRatio: 1 }
+    };
+  }
+}, __name(_a2, "SlideEditorBridgeService"), _a2);
+SlideEditorBridgeService = __decorateClass$6([
+  __decorateParam$6(0, IEditorService),
+  __decorateParam$6(1, IContextService),
+  __decorateParam$6(2, IRenderManagerService)
+], SlideEditorBridgeService);
+var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor, __decorateClass$5 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$5(target, key, result), result;
+}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5"), _a3;
+let SlideRenderController = (_a3 = class extends RxDisposable {
+  constructor(_context, _editorBridgeService) {
+    super(), this._context = _context, this._editorBridgeService = _editorBridgeService;
+  }
+  dispose() {
+  }
+}, __name(_a3, "SlideRenderController"), _a3);
+SlideRenderController = __decorateClass$5([
+  __decorateParam$5(1, Inject(ISlideEditorBridgeService))
+], SlideRenderController);
+var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$4(target, key, result), result;
+}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4");
+function transformBound2OffsetBound(originBound, scene) {
+  const topLeft = transformPosition2Offset(originBound.left, originBound.top, scene), bottomRight = transformPosition2Offset(originBound.right, originBound.bottom, scene);
+  return {
+    left: topLeft.x,
+    top: topLeft.y,
+    right: bottomRight.x,
+    bottom: bottomRight.y
+  };
+}
+__name(transformBound2OffsetBound, "transformBound2OffsetBound");
+function transformPosition2Offset(x, y, scene) {
+  const { scaleX, scaleY } = scene.getAncestorScale(), viewMain = scene.getViewport(SLIDE_KEY.VIEW);
+  if (!viewMain)
+    return {
+      x,
+      y
+    };
+  const { viewportScrollX: actualScrollX, viewportScrollY: actualScrollY } = viewMain, offsetX = (x - actualScrollX) * scaleX, offsetY = (y - actualScrollY) * scaleY;
+  return {
+    x: offsetX,
+    y: offsetY
+  };
+}
+__name(transformPosition2Offset, "transformPosition2Offset");
+var _a4;
+let SlideCanvasPopMangerService = (_a4 = class extends Disposable {
+  constructor(_globalPopupManagerService, _renderManagerService, _univerInstanceService, _commandService) {
+    super(), this._globalPopupManagerService = _globalPopupManagerService, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._commandService = _commandService;
+  }
+  _createObjectPositionObserver(targetObject, currentRender) {
+    const position = (/* @__PURE__ */ __name(() => {
+      var _a9, _b, _c, _d;
+      const { scene, engine } = currentRender, { left, top, width, height } = targetObject, horizontalOffset = (scene.width - ((_b = (_a9 = currentRender.mainComponent) == null ? void 0 : _a9.width) != null ? _b : 0)) / 2, verticalOffset = (scene.height - ((_d = (_c = currentRender.mainComponent) == null ? void 0 : _c.height) != null ? _d : 0)) / 2, bound = {
+        left,
+        right: left + width,
+        top,
+        bottom: top + height
+      }, canvasElement = engine.getCanvasElement(), canvasClientRect = canvasElement.getBoundingClientRect(), widthOfCanvas = pxToNum(canvasElement.style.width), { scaleX, scaleY } = scene.getAncestorScale(), offsetBound = transformBound2OffsetBound(bound, scene), { top: topOffset, left: leftOffset, width: domWidth } = canvasClientRect, scaleAdjust = domWidth / widthOfCanvas;
+      return {
+        left: offsetBound.left * scaleAdjust * scaleX + leftOffset + horizontalOffset,
+        right: offsetBound.right * scaleAdjust * scaleX + leftOffset + horizontalOffset,
+        top: offsetBound.top * scaleAdjust * scaleY + topOffset + verticalOffset,
+        bottom: offsetBound.bottom * scaleAdjust * scaleY + topOffset + verticalOffset
+      };
+    }, "calc"))(), position$ = new BehaviorSubject(position), disposable = new DisposableCollection();
+    return {
+      position,
+      position$,
+      disposable
+    };
+  }
+  attachPopupToObject(targetObject, popup) {
+    const unitId = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE).getUnitId(), currentRender = this._renderManagerService.getRenderById(unitId);
+    if (!currentRender)
+      return {
+        dispose: /* @__PURE__ */ __name(() => {
+        }, "dispose")
+      };
+    const { position, position$, disposable } = this._createObjectPositionObserver(targetObject, currentRender), id = this._globalPopupManagerService.addPopup({
+      ...popup,
+      unitId,
+      subUnitId: "default",
+      anchorRect: position,
+      anchorRect$: position$
+    });
+    return {
+      dispose: /* @__PURE__ */ __name(() => {
+        this._globalPopupManagerService.removePopup(id), position$.complete(), disposable.dispose();
+      }, "dispose")
+    };
+  }
+}, __name(_a4, "SlideCanvasPopMangerService"), _a4);
+SlideCanvasPopMangerService = __decorateClass$4([
+  __decorateParam$4(0, Inject(ICanvasPopupService)),
+  __decorateParam$4(1, IRenderManagerService),
+  __decorateParam$4(2, IUniverInstanceService),
+  __decorateParam$4(3, ICommandService)
+], SlideCanvasPopMangerService);
+var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$3(target, key, result), result;
+}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a5;
+let SlidePopupMenuController = (_a5 = class extends RxDisposable {
+  constructor(_canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService, _canvasView, _sidebarService, _commandService) {
+    super();
+    __publicField(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
+    this._canvasPopManagerService = _canvasPopManagerService, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._contextService = _contextService, this._canvasView = _canvasView, this._sidebarService = _sidebarService, this._commandService = _commandService, this._init();
+  }
+  _init() {
+    this._univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_SLIDE).forEach((slide) => this._create(slide));
+  }
+  _dispose(workbook) {
+  }
+  _create(slide) {
+    if (!slide)
+      return;
+    const unitId = slide.getUnitId();
+    this._renderManagerService.has(unitId) && !this._initImagePopupMenu.has(unitId) && (this._popupMenuListener(unitId), this._initImagePopupMenu.add(unitId));
+  }
+  _hasCropObject(scene) {
+  }
+  _popupMenuListener(unitId) {
+    var _a9;
+    const model = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pages = (_a9 = model == null ? void 0 : model.getPages()) != null ? _a9 : {};
+    Object.keys(pages).forEach((pageId) => {
+      var _a10;
+      const transformer = (_a10 = this._canvasView.getRenderUnitByPageId(pageId).scene) == null ? void 0 : _a10.getTransformer();
+      if (!transformer) return;
+      let singletonPopupDisposer;
+      this.disposeWithMe(
+        toDisposable(
+          transformer.createControl$.subscribe(() => {
+            const selectedObjects = transformer.getSelectedObjectMap();
+            if (selectedObjects.size > 1) {
+              singletonPopupDisposer == null || singletonPopupDisposer.dispose();
+              return;
+            }
+            const object = selectedObjects.values().next().value;
+            if (!object)
+              return;
+            const oKey = object.oKey;
+            singletonPopupDisposer == null || singletonPopupDisposer.dispose(), singletonPopupDisposer = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
+              componentKey: COMPONENT_SLIDE_IMAGE_POPUP_MENU,
+              direction: "horizontal",
+              offset: [2, 0],
+              extraProps: {
+                menuItems: this._getMenuItemsByObjectType(object.objectType, oKey, unitId)
+              }
+            })), this._sidebarService.visible && this._commandService.executeCommand(ToggleSlideEditSidebarOperation.id, {
+              visible: !0,
+              objectType: object.objectType
+            });
+          })
+        )
+      ), this.disposeWithMe(
+        transformer.clearControl$.subscribe(() => {
+          singletonPopupDisposer == null || singletonPopupDisposer.dispose(), this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, !1);
+        })
+      ), this.disposeWithMe(
+        transformer.changing$.subscribe(() => {
+          singletonPopupDisposer == null || singletonPopupDisposer.dispose();
+        })
+      );
+    });
+  }
+  _getMenuItemsByObjectType(objectType, oKey, unitId) {
+    return [{
+      label: "slide.popup.edit",
+      index: 0,
+      commandId: ToggleSlideEditSidebarOperation.id,
+      commandParams: {
+        visible: !0,
+        objectType
+      },
+      disable: !1
+    }, {
+      label: "slide.popup.delete",
+      index: 5,
+      commandId: DeleteSlideElementOperation.id,
+      commandParams: {
+        id: oKey
+      },
+      disable: !1
+    }];
+  }
+}, __name(_a5, "SlidePopupMenuController"), _a5);
+SlidePopupMenuController = __decorateClass$3([
+  OnLifecycle(LifecycleStages.Steady, SlidePopupMenuController),
+  __decorateParam$3(0, Inject(SlideCanvasPopMangerService)),
+  __decorateParam$3(1, IRenderManagerService),
+  __decorateParam$3(2, IUniverInstanceService),
+  __decorateParam$3(3, IContextService),
+  __decorateParam$3(4, Inject(CanvasView)),
+  __decorateParam$3(5, ISidebarService),
+  __decorateParam$3(6, ICommandService)
+], SlidePopupMenuController);
+var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor, __decorateClass$2 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$2(target, key, result), result;
+}, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$2"), _a6;
+let SlideEditorBridgeRenderController = (_a6 = class extends RxDisposable {
+  constructor(_renderContext, _contextService, _instanceSrv, _commandService, _editorBridgeService, _textSelectionManagerService, _textSelectionRenderManager, _canvasView) {
+    super();
+    /**
+     * It is used to distinguish whether the user has actively moved the cursor in the editor, mainly through mouse clicks.
+     */
+    __publicField(this, "_cursorChange", 0);
+    /** If the corresponding unit is active and prepared for editing. */
+    __publicField(this, "_isUnitEditing", !1);
+    __publicField(this, "setSlideTextEditor$", new Subject());
+    __publicField(this, "_curRichText", null);
+    this._renderContext = _renderContext, this._contextService = _contextService, this._instanceSrv = _instanceSrv, this._commandService = _commandService, this._editorBridgeService = _editorBridgeService, this._textSelectionManagerService = _textSelectionManagerService, this._textSelectionRenderManager = _textSelectionRenderManager, this._canvasView = _canvasView, Promise.resolve().then(() => this._init());
+  }
+  _init() {
+    const d = new DisposableCollection();
+    return this._initSubjectListener(d), this._initEventListener(d), d;
+  }
+  _initSubjectListener(d) {
+  }
+  _setEditorRect(targetObject) {
+    this._curRichText = targetObject;
+    const { scene, engine } = this._renderContext, unitId = this._renderContext.unitId, setEditorRect = {
+      scene,
+      engine,
+      unitId,
+      pageId: "",
+      richTextObj: targetObject
+    };
+    this._editorBridgeService.setEditorRect(setEditorRect);
+  }
+  _initEventListener(d) {
+    var _a9;
+    const model = this._instanceSrv.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pagesMap = (_a9 = model == null ? void 0 : model.getPages()) != null ? _a9 : {}, pages = Object.values(pagesMap);
+    for (let i = 0; i < pages.length; i++) {
+      const page = pages[i], { scene } = this._canvasView.getRenderUnitByPageId(page.id);
+      if (!scene) break;
+      const transformer = scene.getTransformer();
+      if (!transformer) break;
+      d.add(transformer.clearControl$.subscribe(() => {
+        this.setEditorVisible(!1);
+      })), d.add(transformer.createControl$.subscribe(() => {
+        this.setEditorVisible(!1);
+      })), d.add(transformer.changeStart$.subscribe((param) => {
+        const target = param.target;
+        target && (target === this._curRichText || this.pickOtherObjects());
+      })), d.add(scene.onDblclick$.subscribeEvent(() => {
+        transformer.clearControls();
+        const object = transformer.getSelectedObjectMap().values().next().value;
+        object && (object.objectType !== ObjectType.RICH_TEXT ? this.pickOtherObjects() : this.startEditing(object));
+      }));
+    }
+  }
+  pickOtherObjects() {
+    this.setEditorVisible(!1), this.endEditing();
+  }
+  /**
+   * invoked when picking other object.
+   *
+   * save editing state to curr richText.
+   */
+  endEditing() {
+    if (!this._curRichText) return;
+    const curRichText = this._curRichText;
+    if (!this._instanceSrv.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE)) return !1;
+    curRichText.refreshDocumentByDocData(), curRichText.resizeToContentSize(), this._curRichText = null;
+  }
+  /**
+   * TODO calling twice ？？？？
+   * editingParam derives from RichText object.
+   *
+   * TODO @lumixraku need scale param
+   * @param target
+   */
+  startEditing(target) {
+    this._setEditorRect(target), this.setEditorVisible(!0);
+  }
+  setEditorVisible(visible) {
+    var _a9, _b;
+    visible ? (_a9 = this._curRichText) == null || _a9.hide() : (_b = this._curRichText) == null || _b.show();
+    const { unitId } = this._renderContext;
+    this._editorBridgeService.changeVisible({ visible, eventType: 3, unitId });
+  }
+}, __name(_a6, "SlideEditorBridgeRenderController"), _a6);
+SlideEditorBridgeRenderController = __decorateClass$2([
+  __decorateParam$2(1, IContextService),
+  __decorateParam$2(2, IUniverInstanceService),
+  __decorateParam$2(3, ICommandService),
+  __decorateParam$2(4, Inject(ISlideEditorBridgeService)),
+  __decorateParam$2(5, Inject(TextSelectionManagerService)),
+  __decorateParam$2(6, ITextSelectionRenderManager),
+  __decorateParam$2(7, Inject(CanvasView))
+], SlideEditorBridgeRenderController);
+var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$1(target, key, result), result;
+}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1");
+const HIDDEN_EDITOR_POSITION = -1e3, EDITOR_INPUT_SELF_EXTEND_GAP = 5, EDITOR_BORDER_SIZE = 2;
+var _a7;
+let SlideEditingRenderController = (_a7 = class extends Disposable {
+  constructor(_renderContext, _layoutService, _undoRedoService, _contextService, _instanceSrv, _renderManagerService, _editorBridgeService, _cellEditorManagerService, _textSelectionRenderManager, _textSelectionManagerService, _commandService, _localService, _editorService, _resourceLoaderService) {
+    super();
+    /**
+     * It is used to distinguish whether the user has actively moved the cursor in the editor, mainly through mouse clicks.
+     */
+    __publicField(this, "_cursorChange", 0);
+    /** If the corresponding unit is active and prepared for editing. */
+    __publicField(this, "_isUnitEditing", !1);
+    // private _workbookSelections: WorkbookSelections;
+    __publicField(this, "_d");
+    this._renderContext = _renderContext, this._layoutService = _layoutService, this._undoRedoService = _undoRedoService, this._contextService = _contextService, this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, this._editorBridgeService = _editorBridgeService, this._cellEditorManagerService = _cellEditorManagerService, this._textSelectionRenderManager = _textSelectionRenderManager, this._textSelectionManagerService = _textSelectionManagerService, this._commandService = _commandService, this._localService = _localService, this._editorService = _editorService, this._resourceLoaderService = _resourceLoaderService, this._d = this._init(), this._initEditorVisibilityListener();
+  }
+  dispose() {
+    super.dispose(), this._disposeCurrent();
+  }
+  _disposeCurrent() {
+    var _a9;
+    (_a9 = this._d) == null || _a9.dispose(), this._d = null;
+  }
+  _init() {
+    const d = new DisposableCollection();
+    return this._subscribeToCurrentCell(d), this._initialKeyboardListener(d), this._initialCursorSync(d), this._listenEditorFocus(d), this._commandExecutedListener(d), this._cursorStateListener(d), d;
+  }
+  _initEditorVisibilityListener() {
+    this.disposeWithMe(this._editorBridgeService.visible$.subscribe((param) => {
+      param.visible ? (this._isUnitEditing = !0, this._handleEditorVisible(param)) : this._isUnitEditing && (this._handleEditorInvisible(param), this._isUnitEditing = !1);
+    }));
+  }
+  _listenEditorFocus(d) {
+    const renderConfig = this._getEditorObject();
+    renderConfig && d.add(renderConfig.document.onPointerDown$.subscribeEvent(() => {
+    }));
+  }
+  _getEditorSkeleton(editorId) {
+    var _a9;
+    return (_a9 = this._renderManagerService.getRenderById(editorId)) == null ? void 0 : _a9.with(DocSkeletonManagerService).getSkeleton();
+  }
+  _getEditorViewModel(editorId) {
+    var _a9;
+    return (_a9 = this._renderManagerService.getRenderById(editorId)) == null ? void 0 : _a9.with(DocSkeletonManagerService).getViewModel();
+  }
+  _initialCursorSync(d) {
+    d.add(this._cellEditorManagerService.focus$.pipe(filter((f2) => !!f2)).subscribe(() => {
+      this._textSelectionRenderManager.sync();
+    }));
+  }
+  /**
+   * Set editorUnitId to curr doc.
+   * @param d DisposableCollection
+   */
+  _subscribeToCurrentCell(d) {
+    d.add(this._editorBridgeService.currentEditRectState$.subscribe((editCellState) => {
+      if (editCellState == null || this._contextService.getContextValue(FOCUSING_EDITOR_STANDALONE) || this._contextService.getContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE))
+        return;
+      const {
+        position: { startX, endX },
+        documentLayoutObject: { textRotation, wrapStrategy, documentModel },
+        scaleX,
+        editorUnitId
+      } = editCellState, { vertexAngle: angle } = convertTextRotation(textRotation);
+      documentModel.updateDocumentId(editorUnitId), wrapStrategy === WrapStrategy.WRAP && angle === 0 && documentModel.updateDocumentDataPageSize((endX - startX) / scaleX), this._instanceSrv.changeDoc(editorUnitId, documentModel), this._contextService.setContextValue(FOCUSING_EDITOR_BUT_HIDDEN, !0), this._textSelectionManagerService.replaceTextRanges([{
+        startOffset: 0,
+        endOffset: 0
+      }]), this._textSelectionRenderManager.activate(HIDDEN_EDITOR_POSITION, HIDDEN_EDITOR_POSITION);
+    }));
+  }
+  /**
+   * set size and pos of editing area
+   * invoked by _handleEditorVisible
+   *
+   * size & pos derives from slide-editor-bridge.service.ts@getEditRectState.position
+   *
+   * set pos of editing area
+   * EditorContainer.tsx cellEditorManagerService.setFocus(true) -->
+   * _focus$.next --> editingRenderController -->
+   * _textSelectionRenderManager.sync() --> _updateInputPosition --> activate(left, top)
+   *
+   * @param positionFromEditRectState
+   * @param canvasOffset
+   * @param documentSkeleton
+   * @param documentLayoutObject
+   * @param scaleX
+   * @param scaleY
+   */
+  _fitTextSize(positionFromEditRectState, canvasOffset, documentSkeleton, documentLayoutObject, scaleX = 1, scaleY = 1) {
+    const { startX, startY, endX, endY } = positionFromEditRectState, documentDataModel = documentLayoutObject.documentModel;
+    if (documentDataModel == null)
+      return;
+    const { actualWidth, actualHeight } = this._predictingSize(
+      positionFromEditRectState,
+      canvasOffset,
+      documentSkeleton,
+      documentLayoutObject,
+      scaleX,
+      scaleY
+    ), { verticalAlign, paddingData, fill } = documentLayoutObject;
+    let editorWidth = endX - startX, editorHeight = endY - startY;
+    if (editorWidth < actualWidth && (editorWidth = actualWidth), editorHeight < actualHeight)
+      editorHeight = actualHeight, documentDataModel.updateDocumentDataMargin(paddingData);
+    else {
+      let offsetTop = 0;
+      verticalAlign === VerticalAlign.MIDDLE ? offsetTop = (editorHeight - actualHeight) / 2 / scaleY : verticalAlign === VerticalAlign.TOP ? offsetTop = paddingData.t || 0 : offsetTop = (editorHeight - actualHeight) / scaleY - (paddingData.b || 0), offsetTop = offsetTop < (paddingData.t || 0) ? paddingData.t || 0 : offsetTop, documentDataModel.updateDocumentDataMargin({
+        t: offsetTop
+      });
+    }
+    documentSkeleton.calculate(), this._editAreaProcessing(editorWidth, editorHeight, positionFromEditRectState, canvasOffset, fill, scaleX, scaleY);
+  }
+  /**
+   * Mainly used to pre-calculate the width of the editor,
+   * to determine whether it needs to be automatically widened.
+   */
+  _predictingSize(actualRangeWithCoord, canvasOffset, documentSkeleton, documentLayoutObject, scaleX = 1, scaleY = 1) {
+    const { startX, endX } = actualRangeWithCoord, { textRotation, wrapStrategy } = documentLayoutObject, documentDataModel = documentLayoutObject.documentModel, { vertexAngle: angle } = convertTextRotation(textRotation), clientWidth = document.body.clientWidth;
+    if (wrapStrategy === WrapStrategy.WRAP && angle === 0) {
+      const { actualWidth, actualHeight } = documentSkeleton.getActualSize();
+      return {
+        actualWidth: actualWidth * scaleX,
+        actualHeight: actualHeight * scaleY
+      };
+    }
+    documentDataModel == null || documentDataModel.updateDocumentDataPageSize((clientWidth - startX - canvasOffset.left) / scaleX), documentSkeleton.calculate();
+    const size = documentSkeleton.getActualSize();
+    let editorWidth = endX - startX;
+    return editorWidth < size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX && (editorWidth = size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX), documentDataModel == null || documentDataModel.updateDocumentDataPageSize(editorWidth / scaleX), documentDataModel == null || documentDataModel.updateDocumentRenderConfig({
+      horizontalAlign: HorizontalAlign.UNSPECIFIED,
+      cellValueType: void 0
+    }), {
+      actualWidth: editorWidth,
+      actualHeight: size.actualHeight * scaleY
+    };
+  }
+  /**
+   * control the size of editing area
+   */
+  // eslint-disable-next-line max-lines-per-function
+  _editAreaProcessing(editorWidth, editorHeight, positionFromEditRectState, canvasOffset, fill, scaleX = 1, scaleY = 1) {
+    var _a9;
+    const editorObject = this._getEditorObject();
+    if (editorObject == null)
+      return;
+    function pxToNum2(width2) {
+      return Number.parseInt(width2.replace("px", ""));
+    }
+    __name(pxToNum2, "pxToNum");
+    const canvasElement = this._renderContext.engine.getCanvasElement(), canvasClientRect = canvasElement.getBoundingClientRect(), widthOfCanvas = pxToNum2(canvasElement.style.width), { top, left, width } = canvasClientRect, scaleAdjust = width / widthOfCanvas;
+    let { startX, startY } = positionFromEditRectState;
+    startX += canvasOffset.left, startY += canvasOffset.top;
+    const { document: documentComponent, scene: editorScene, engine: docEngine } = editorObject, viewportMain = editorScene.getViewport(VIEWPORT_KEY.VIEW_MAIN), clientHeight = document.body.clientHeight - startY - canvasOffset.top - EDITOR_BORDER_SIZE * 2, clientWidth = document.body.clientWidth - startX - canvasOffset.left;
+    let physicHeight = editorHeight, scrollBar = viewportMain == null ? void 0 : viewportMain.getScrollBar();
+    physicHeight > clientHeight ? (physicHeight = clientHeight, scrollBar == null ? viewportMain && new ScrollBar(viewportMain, { enableHorizontal: !1, barSize: 8 }) : viewportMain == null || viewportMain.resetCanvasSizeAndUpdateScroll()) : (scrollBar = null, (_a9 = viewportMain == null ? void 0 : viewportMain.getScrollBar()) == null || _a9.dispose()), editorWidth += (scrollBar == null ? void 0 : scrollBar.barSize) || 0, editorWidth = Math.min(editorWidth, clientWidth), startX -= FIX_ONE_PIXEL_BLUR_OFFSET, startY -= FIX_ONE_PIXEL_BLUR_OFFSET, this._addBackground(editorScene, editorWidth / scaleX, editorHeight / scaleY, fill);
+    const { scaleX: precisionScaleX, scaleY: precisionScaleY } = editorScene.getPrecisionScale();
+    editorScene.transformByState({
+      width: editorWidth * scaleAdjust / scaleX,
+      height: editorHeight * scaleAdjust / scaleY,
+      scaleX: scaleX * scaleAdjust,
+      scaleY: scaleY * scaleAdjust
+    }), documentComponent.resize(editorWidth / scaleX, editorHeight / scaleY), setTimeout(() => {
+      docEngine.resizeBySize(
+        fixLineWidthByScale(editorWidth, precisionScaleX),
+        fixLineWidthByScale(physicHeight, precisionScaleY)
+      );
+    }, 0);
+    const contentBoundingRect = this._layoutService.getContentElement().getBoundingClientRect(), canvasBoundingRect = canvasElement.getBoundingClientRect();
+    startX = startX * scaleAdjust + (canvasBoundingRect.left - contentBoundingRect.left), startY = startY * scaleAdjust + (canvasBoundingRect.top - contentBoundingRect.top), this._cellEditorManagerService.setState({
+      startX,
+      startY,
+      endX: editorWidth * scaleAdjust + startX,
+      endY: physicHeight * scaleAdjust + startY,
+      show: !0
+    });
+  }
+  /**
+   * Since the document does not support cell background color, an additional rect needs to be added.
+   */
+  _addBackground(scene, editorWidth, editorHeight, fill) {
+    const fillRectKey = "_backgroundRectHelperColor_", rect = scene.getObject(fillRectKey);
+    rect == null && fill == null || (rect == null ? scene.addObjects(
+      [
+        new Rect(fillRectKey, {
+          width: editorWidth,
+          height: editorHeight,
+          fill,
+          evented: !1
+        })
+      ],
+      DOCS_COMPONENT_MAIN_LAYER_INDEX
+    ) : fill == null ? rect.dispose() : (rect.setProps({
+      fill
+    }), rect.transformByState({
+      width: editorWidth,
+      height: editorHeight
+    })));
+  }
+  /**
+   * show input area, resize input area and then place input to right place.
+   * invoked when this._editorBridgeService.visible$ param.visible = true
+   *
+   * handleVisible is the 2nd part of editing.
+   * startEditing --> _updateEditor
+   * startEditing --> changeVisible --> slide-editor-bridge.render-controller.ts@changeVisible --> _editorBridgeService.changeVisible
+   * @param param
+   */
+  _handleEditorVisible(param) {
+    var _a9, _b;
+    const { eventType, keycode } = param;
+    this._cursorChange = [DeviceInputEventType.PointerDown, DeviceInputEventType.Dblclick].includes(eventType) ? 2 : 1;
+    const editCellState = this._editorBridgeService.getEditRectState();
+    if (editCellState == null)
+      return;
+    const {
+      position,
+      documentLayoutObject,
+      slideCardOffset: canvasOffset,
+      scaleX,
+      scaleY,
+      editorUnitId,
+      unitId
+    } = editCellState, editorObject = this._getEditorObject();
+    if (editorObject == null)
+      return;
+    const { scene } = editorObject;
+    this._contextService.setContextValue(EDITOR_ACTIVATED, !0);
+    const { documentModel: documentDataModel } = documentLayoutObject, skeleton = this._getEditorSkeleton(editorUnitId);
+    if (!skeleton || !documentDataModel)
+      return;
+    this._fitTextSize(position, canvasOffset, skeleton, documentLayoutObject, scaleX, scaleY);
+    const cursor = documentDataModel.getBody().dataStream.length - 2 || 0;
+    (_a9 = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN)) == null || _a9.scrollToViewportPos({
+      viewportScrollX: Number.POSITIVE_INFINITY
+    }), this._textSelectionManagerService.replaceTextRanges([
+      {
+        startOffset: cursor,
+        endOffset: cursor
+      }
+    ]), (_b = this._renderManagerService.getRenderById(unitId)) == null || _b.scene.resetCursor();
+  }
+  _resetBodyStyle(body, removeStyle = !1) {
+    body.dataStream = DEFAULT_EMPTY_DOCUMENT_VALUE, body.textRuns != null && (body.textRuns.length === 1 && !removeStyle ? (body.textRuns[0].st = 0, body.textRuns[0].ed = 1) : body.textRuns = void 0), body.paragraphs != null && (body.paragraphs.length === 1 ? body.paragraphs[0].startIndex = 0 : body.paragraphs = [
+      {
+        startIndex: 0
+      }
+    ]), body.sectionBreaks != null && (body.sectionBreaks = void 0), body.tables != null && (body.tables = void 0), body.customRanges != null && (body.customRanges = void 0), body.customBlocks != null && (body.customBlocks = void 0);
+  }
+  /**
+   * Should activate the editor when the user inputs text.
+   * @param d DisposableCollection
+   */
+  _initialKeyboardListener(d) {
+    d.add(this._textSelectionRenderManager.onInputBefore$.subscribe((config) => {
+    }));
+  }
+  _showEditorByKeyboard(config) {
+  }
+  _commandExecutedListener(d) {
+    const moveCursorOP = [SetTextEditArrowOperation.id], editedMutations = [RichTextEditingMutation.id];
+    d.add(this._commandService.onCommandExecuted((command) => {
+      moveCursorOP.includes(command.id) && this._moveCursorCmdHandler(command), editedMutations.includes(command.id) && this._editingChangedHandler();
+    }));
+  }
+  _moveCursorCmdHandler(command) {
+    const params = command.params, { keycode, isShift } = params;
+    keycode != null && this._cursorChange === 2 ? this._moveInEditor(keycode, isShift) : this._editorBridgeService.changeVisible(params);
+  }
+  _editingChangedHandler() {
+    const editRect = this._editorBridgeService.getEditorRect();
+    if (!editRect)
+      return;
+    const editingRichText = editRect.richTextObj;
+    editingRichText.refreshDocumentByDocData(), editingRichText.resizeToContentSize();
+    const { unitId } = this._renderContext;
+    this._handleEditorVisible({ visible: !0, eventType: 3, unitId });
+  }
+  _setOpenForCurrent(unitId, subUnitId) {
+    const editors = this._editorService.getAllEditor();
+    for (const [_, ed] of editors)
+      ed.setOpenForSheetUnitId(unitId), ed.setOpenForSheetSubUnitId(subUnitId);
+  }
+  _getEditorObject() {
+    return getEditorObject(this._editorBridgeService.getCurrentEditorId(), this._renderManagerService);
+  }
+  async _handleEditorInvisible(param) {
+    const { keycode } = param;
+    if (this._setOpenForCurrent(null, null), this._cursorChange = 0, this._exitInput(param), this._editorBridgeService.getEditRectState() == null)
+      return;
+    if (this._editorBridgeService.getEditorDirty() === !1) {
+      this._moveCursor(keycode);
+      return;
+    }
+    this._moveCursor(keycode);
+  }
+  _exitInput(param) {
+    this._contextService.setContextValue(FOCUSING_EDITOR_INPUT_FORMULA, !1), this._contextService.setContextValue(EDITOR_ACTIVATED, !1), this._contextService.setContextValue(FOCUSING_EDITOR_BUT_HIDDEN, !1), this._contextService.setContextValue(FORMULA_EDITOR_ACTIVATED, !1), this._cellEditorManagerService.setState({
+      show: param.visible
+    });
+    const editorUnitId = this._editorBridgeService.getCurrentEditorId();
+    editorUnitId != null && (this._undoRedoService.clearUndoRedo(editorUnitId), this._undoRedoService.clearUndoRedo(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY));
+  }
+  _moveCursor(keycode) {
+    if (keycode != null)
+      switch (Direction.LEFT, keycode) {
+        case KeyCode.ENTER:
+          Direction.DOWN;
+          break;
+        case KeyCode.TAB:
+          Direction.RIGHT;
+          break;
+        case KeyCode.ARROW_DOWN:
+          Direction.DOWN;
+          break;
+        case KeyCode.ARROW_UP:
+          Direction.UP;
+          break;
+        case KeyCode.ARROW_LEFT:
+          Direction.LEFT;
+          break;
+        case KeyCode.ARROW_RIGHT:
+          Direction.RIGHT;
+          break;
+      }
+  }
+  /**
+   * The user's operations follow the sequence of opening the editor and then moving the cursor.
+   * The logic here predicts the user's first cursor movement behavior based on this rule
+   */
+  _cursorStateListener(d) {
+    const editorObject = this._getEditorObject(), { document: documentComponent } = editorObject;
+    d.add(toDisposable(documentComponent.onPointerDown$.subscribeEvent(() => {
+      this._cursorChange === 1 && (this._cursorChange = 2);
+    })));
+  }
+  // TODO: @JOCS, is it necessary to move these commands MoveSelectionOperation\MoveCursorOperation to shortcut? and use multi-commands?
+  _moveInEditor(keycode, isShift) {
+    let direction = Direction.LEFT;
+    keycode === KeyCode.ARROW_DOWN ? direction = Direction.DOWN : keycode === KeyCode.ARROW_UP ? direction = Direction.UP : keycode === KeyCode.ARROW_RIGHT && (direction = Direction.RIGHT), isShift ? this._commandService.executeCommand(MoveSelectionOperation.id, {
+      direction
+    }) : this._commandService.executeCommand(MoveCursorOperation.id, {
+      direction
+    });
+  }
+}, __name(_a7, "SlideEditingRenderController"), _a7);
+SlideEditingRenderController = __decorateClass$1([
+  __decorateParam$1(1, ILayoutService),
+  __decorateParam$1(2, IUndoRedoService),
+  __decorateParam$1(3, IContextService),
+  __decorateParam$1(4, IUniverInstanceService),
+  __decorateParam$1(5, IRenderManagerService),
+  __decorateParam$1(6, ISlideEditorBridgeService),
+  __decorateParam$1(7, ISlideEditorManagerService),
+  __decorateParam$1(8, ITextSelectionRenderManager),
+  __decorateParam$1(9, Inject(TextSelectionManagerService)),
+  __decorateParam$1(10, ICommandService),
+  __decorateParam$1(11, Inject(LocaleService)),
+  __decorateParam$1(12, IEditorService),
+  __decorateParam$1(13, IResourceLoaderService)
+], SlideEditingRenderController);
+function getEditorObject(unitId, renderManagerService) {
+  if (unitId == null)
+    return;
+  const currentRender = renderManagerService.getRenderById(unitId);
+  if (currentRender == null)
+    return;
+  const { mainComponent, scene, engine, components } = currentRender, document2 = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND);
+  return {
+    document: document2,
+    docBackground,
+    scene,
+    engine
+  };
+}
+__name(getEditorObject, "getEditorObject");
+var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp2(target, key, result), result;
+}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam");
+const SLIDE_UI_PLUGIN_NAME = "SLIDE_UI";
+var _a8;
+let UniverSlidesUIPlugin = (_a8 = class extends Plugin {
+  constructor(_config = {}, _injector, _renderManagerService, _univerInstanceService) {
+    super(), this._config = _config, this._injector = _injector, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService;
+  }
+  onStarting() {
+    mergeOverrideWithDependencies([
+      [ISlideEditorBridgeService, { useClass: SlideEditorBridgeService }],
+      // used by SlideUIController --> EditorContainer
+      [ISlideEditorManagerService, { useClass: SlideEditorManagerService }],
+      [SlideCanvasPopMangerService]
+    ], this._config.override).forEach((d) => this._injector.add(d));
+  }
+  onReady() {
+    mergeOverrideWithDependencies([
+      // cannot register in _renderManagerService now.
+      // [ISlideEditorBridgeService, { useClass: SlideEditorBridgeService }],
+      // // used by SlideUIController --> EditorContainer
+      // [ISlideEditorManagerService, { useClass: SlideEditorManagerService }],
+      // This controller should be registered in Ready stage.
+      // this controller would add a new RenderUnit (__INTERNAL_EDITOR__DOCS_NORMAL)
+      // so this new RenderUnit does not have ISlideEditorBridgeService & ISlideEditorManagerService if
+      [SlidesUIController, {
+        useFactory: /* @__PURE__ */ __name(() => this._injector.createInstance(SlidesUIController, this._config), "useFactory")
+      }],
+      // editor service were create in renderManagerService
+      [SlideRenderController],
+      [SlidePopupMenuController]
+    ], this._config.override).forEach((m2) => {
+      this._injector.add(m2);
+    });
   }
   onRendered() {
-    this._markSlideAsFocused();
+    [
+      // need slideEditorBridgeService
+      // need TextSelectionRenderService which init by EditorContainer
+      [SlideEditorBridgeRenderController],
+      [SlideEditingRenderController]
+    ].forEach((m2) => {
+      this.disposeWithMe(this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SLIDE, m2));
+    }), this._markSlideAsFocused();
   }
   _markSlideAsFocused() {
-    const t = this._univerInstanceService;
+    const currentService = this._univerInstanceService;
     try {
-      const e = t.getCurrentUnitForType(P.UNIVER_SLIDE);
-      t.focusUnit(e.getUnitId());
+      const slide = currentService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+      currentService.focusUnit(slide.getUnitId());
     } catch {
     }
   }
-}, h(p, "pluginName", ye), h(p, "type", P.UNIVER_SLIDE), p);
-b = Pe([
-  E(1, j(U)),
-  E(2, C)
-], b);
+}, __name(_a8, "UniverSlidesUIPlugin"), __publicField(_a8, "pluginName", SLIDE_UI_PLUGIN_NAME), __publicField(_a8, "type", UniverInstanceType.UNIVER_SLIDE), _a8);
+UniverSlidesUIPlugin = __decorateClass([
+  __decorateParam(1, Inject(Injector)),
+  __decorateParam(2, IRenderManagerService),
+  __decorateParam(3, IUniverInstanceService)
+], UniverSlidesUIPlugin);
 export {
-  A as ActivateSlidePageOperation,
-  L as SetSlidePageThumbOperation,
-  b as UniverSlidesUIPlugin
+  ActivateSlidePageOperation,
+  AppendSlideOperation,
+  EditorContainer,
+  IMAGE_MENU_ID,
+  SHAPE_MENU_ID,
+  SetSlidePageThumbOperation,
+  SlideAddTextOperation,
+  SlideCanvasPopMangerService,
+  SlideSideBar,
+  SlidesUIController,
+  UniverSlidesUIPlugin
 };