npm - @univerjs/slides-ui - Versions diffs - 0.3.0 → 0.4.0-alpha.0 - Mend

@univerjs/slides-ui 0.3.0 → 0.4.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/lib/cjs/index.js +3 -3
package/lib/es/index.js +1357 -1358
package/lib/index.css +1 -1
package/lib/locale/fa-IR.json +36 -0
package/lib/types/controllers/popup-menu.controller.d.ts +0 -1
package/lib/types/locale/fa-IR.d.ts +3 -0
package/lib/types/slides-ui-plugin.d.ts +2 -1
package/lib/umd/index.js +3 -3
package/package.json +22 -23

package/lib/es/index.js CHANGED Viewed

@@ -2,144 +2,17 @@ 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 { Inject, Injector, RxDisposable, UniverInstanceType, debounce, getColorStyle, IUniverInstanceService, OnLifecycle, LifecycleStages, CommandType, PageElementType, Tools, useDependency, LocaleService, ICommandService, generateRandomId, BasicShapes, createInternalEditorID, createIdentifier, IContextService, DEFAULT_EMPTY_DOCUMENT_VALUE, DocumentFlavor, FOCUSING_UNIVER_EDITOR, EDITOR_ACTIVATED, FORMULA_EDITOR_ACTIVATED, Disposable, connectInjector, DisposableCollection, toDisposable, FOCUSING_COMMON_DRAWINGS, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, DocumentDataModel, VerticalAlign, HorizontalAlign, WrapStrategy, FOCUSING_EDITOR_BUT_HIDDEN, Direction, IUndoRedoService, Plugin, mergeOverrideWithDependencies, IConfigService } from "@univerjs/core";
-import { Viewport, ScrollBar, Slide, Rect, Scene, IRenderManagerService, ObjectType, FIX_ONE_PIXEL_BLUR_OFFSET, DeviceInputEventType, pxToNum, convertTextRotation, fixLineWidthByScale } from "@univerjs/engine-render";
-import { ILocalFileService, ISidebarService, useObservable, DISABLE_AUTO_FOCUS_KEY, MenuItemType, getMenuHiddenObservable, KeyCode, MetaKeys, RibbonStartGroup, ComponentManager, BuiltInUIPart, IMenuManagerService, IUIPartsService, IShortcutService, ICanvasPopupService, ILayoutService } from "@univerjs/ui";
+import { Inject, Injector, RxDisposable, UniverInstanceType, debounce, getColorStyle, IUniverInstanceService, CommandType, Tools, useDependency, LocaleService, ICommandService, generateRandomId, PageElementType, BasicShapes, Disposable, DisposableCollection, toDisposable, FOCUSING_COMMON_DRAWINGS, IContextService, createInternalEditorID, createIdentifier, EDITOR_ACTIVATED, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, DocumentDataModel, VerticalAlign, HorizontalAlign, WrapStrategy, FOCUSING_EDITOR_BUT_HIDDEN, DEFAULT_EMPTY_DOCUMENT_VALUE, Direction, IUndoRedoService, DocumentFlavor, FOCUSING_UNIVER_EDITOR, FORMULA_EDITOR_ACTIVATED, connectInjector, Plugin, mergeOverrideWithDependencies, IConfigService } from "@univerjs/core";
+import { Viewport, ScrollBar, Slide, Rect, Scene, IRenderManagerService, ObjectType, pxToNum, DeviceInputEventType, convertTextRotation, FIX_ONE_PIXEL_BLUR_OFFSET, fixLineWidthByScale } from "@univerjs/engine-render";
 import { ObjectProvider, SLIDE_KEY } from "@univerjs/slides";
-import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, IImageIoService, getImageSize } from "@univerjs/drawing";
+import { ISidebarService, ICanvasPopupService, KeyCode, ILayoutService, ILocalFileService, useObservable, DISABLE_AUTO_FOCUS_KEY, MenuItemType, getMenuHiddenObservable, RibbonStartGroup, MetaKeys, ComponentManager, BuiltInUIPart, IMenuManagerService, IUIPartsService, IShortcutService } from "@univerjs/ui";
 import React, { forwardRef, useRef, createElement, useState, useEffect, useCallback } from "react";
 import clsx from "clsx";
 import { Button, InputNumber, Dropdown, ColorPicker, Scrollbar } from "@univerjs/design";
-import { IEditorService, TextEditor, DeleteLeftCommand, DocSelectionRenderService, VIEWPORT_KEY, DOCS_COMPONENT_MAIN_LAYER_INDEX, MoveSelectionOperation, MoveCursorOperation, DOCS_VIEW_KEY } from "@univerjs/docs-ui";
 import { BehaviorSubject, Subject, filter, takeUntil } from "rxjs";
 import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation } from "@univerjs/docs";
-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(_a11) {
-    var key = _a11[0], value = _a11[1];
-    typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
-  })), attrs;
-}
-__name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
-function replaceRuntimeIdsInDefs(node, runtimeProps) {
-  var _a11, defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a11 = node.children) === null || _a11 === void 0) && _a11.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";
+import { IEditorService, DocSelectionRenderService, VIEWPORT_KEY, DOCS_COMPONENT_MAIN_LAYER_INDEX, MoveSelectionOperation, MoveCursorOperation, DOCS_VIEW_KEY, TextEditor, DeleteLeftCommand } from "@univerjs/docs-ui";
+import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, IImageIoService, getImageSize } from "@univerjs/drawing";
 var __defProp$9 = Object.defineProperty, __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor, __decorateClass$9 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
@@ -420,22 +293,9 @@ let CanvasView = (_a2 = class extends RxDisposable {
   }
 }, __name(_a2, "CanvasView"), _a2);
 CanvasView = __decorateClass$8([
-  OnLifecycle(LifecycleStages.Ready, CanvasView),
   __decorateParam$8(0, IRenderManagerService)
 ], CanvasView);
-const ActivateSlidePageOperation = {
-  id: "slide.operation.activate-slide",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => {
-    var _a11, _b;
-    const unitId = params.unitId, canvasView = accessor.get(CanvasView), model = accessor.get(IUniverInstanceService).getUnit(unitId), pageId = (_a11 = model == null ? void 0 : model.getActivePage()) == null ? void 0 : _a11.id;
-    if (!pageId) return !1;
-    const page = canvasView.getRenderUnitByPageId(pageId, unitId);
-    if (!page) return !1;
-    const transformer = (_b = page.scene) == null ? void 0 : _b.getTransformer();
-    return transformer && transformer.clearControls(), canvasView.activePage(params.id, unitId), !0;
-  }, "handler")
-}, DeleteSlideElementOperation = {
+const PLUGIN_CONFIG_KEY = "slides-ui.config", defaultPluginConfig = {}, DeleteSlideElementOperation = {
   id: "slide.operation.delete-element",
   type: CommandType.OPERATION,
   handler: /* @__PURE__ */ __name((accessor, params) => {
@@ -445,46 +305,6 @@ const ActivateSlidePageOperation = {
     const activePage = slideData.getActivePage();
     return delete activePage.pageElements[params.id], slideData.updatePage(activePage.id, activePage), accessor.get(CanvasView).removeObjectById(params.id, activePage.id, unitId), !0;
   }, "handler")
-}, InsertSlideFloatImageCommand = {
-  id: "slide.command.insert-float-image",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a11;
-    const univerInstanceService = accessor.get(IUniverInstanceService), unitId = (_a11 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE)) == null ? void 0 : _a11.getUnitId();
-    if (!unitId) return !1;
-    const files = await accessor.get(ILocalFileService).openFile({
-      multiple: !0,
-      accept: DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image2) => `.${image2.replace("image/", "")}`).join(",")
-    });
-    if (files.length !== 1) return !1;
-    const imageParam = await accessor.get(IImageIoService).saveImage(files[0]);
-    if (!imageParam) return !1;
-    const { imageId, imageSourceType, source, base64Cache } = imageParam, { width, height, image } = await getImageSize(base64Cache || ""), slideData = univerInstanceService.getUnit(unitId);
-    if (!slideData) return !1;
-    const activePage = slideData.getActivePage(), elements = Object.values(activePage.pageElements), maxIndex = elements != null && elements.length ? Math.max(...elements.map((element2) => element2.zIndex)) : 20, data = {
-      id: imageId,
-      zIndex: maxIndex + 1,
-      left: 0,
-      top: 0,
-      width,
-      height,
-      title: "",
-      description: "",
-      type: PageElementType.IMAGE,
-      image: {
-        imageProperties: {
-          contentUrl: base64Cache,
-          imageSourceType,
-          source,
-          base64Cache,
-          image
-        }
-      }
-    };
-    activePage.pageElements[imageId] = data, slideData.updatePage(activePage.id, activePage);
-    const canvasView = accessor.get(CanvasView), sceneObject = canvasView.createObjectToPage(data, activePage.id, unitId);
-    return sceneObject && canvasView.setObjectActiveByPage(sceneObject, activePage.id, unitId), !0;
-  }, "handler")
 };
 var jsxRuntime = { exports: {} }, reactJsxRuntime_production_min = {};
 /**
@@ -509,83 +329,209 @@ 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, univerInstanceService = accessor.get(IUniverInstanceService), unitId = params == null ? void 0 : params.unitId, slideData = univerInstanceService.getUnit(unitId);
-    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$4 = {
-  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 ArrangePanel$1(props) {
-  const { pageId, unitId } = props, localeService = useDependency(LocaleService), canvasView = useDependency(CanvasView), commandService = useDependency(ICommandService), page = canvasView.getRenderUnitByPageId(pageId, 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, {
-      unitId,
-      oKey: object == null ? void 0 : object.oKey,
-      props: {
-        zIndex
-      }
-    });
-  }, "onArrangeBtnClick");
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelGrid, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelTitle), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: localeService.t("image-panel.arrange.title") }) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelRow, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-        onArrangeBtnClick(
-          0
-          /* forward */
-        );
-      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$4.imageCommonPanelInline, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(MoveUpSingle, {}),
-        localeService.t("image-panel.arrange.forward")
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-        onArrangeBtnClick(
-          1
-          /* backward */
-        );
-      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$4.imageCommonPanelInline, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(MoveDownSingle, {}),
-        localeService.t("image-panel.arrange.backward")
-      ] }) }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelRow, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
-        onArrangeBtnClick(
-          2
-          /* front */
-        );
+var jsxRuntimeExports = jsxRuntime.exports, __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(_a11) {
+    var key = _a11[0], value = _a11[1];
+    typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
+  })), attrs;
+}
+__name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
+function replaceRuntimeIdsInDefs(node, runtimeProps) {
+  var _a11, defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a11 = node.children) === null || _a11 === void 0) && _a11.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 UpdateSlideElementOperation = {
+  id: "slide.operation.update-element",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const { oKey, props } = params, univerInstanceService = accessor.get(IUniverInstanceService), unitId = params == null ? void 0 : params.unitId, slideData = univerInstanceService.getUnit(unitId);
+    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$4 = {
+  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 ArrangePanel$1(props) {
+  const { pageId, unitId } = props, localeService = useDependency(LocaleService), canvasView = useDependency(CanvasView), commandService = useDependency(ICommandService), page = canvasView.getRenderUnitByPageId(pageId, 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, {
+      unitId,
+      oKey: object == null ? void 0 : object.oKey,
+      props: {
+        zIndex
+      }
+    });
+  }, "onArrangeBtnClick");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelGrid, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$4.imageCommonPanelRow, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelTitle), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: localeService.t("image-panel.arrange.title") }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelRow, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+        onArrangeBtnClick(
+          0
+          /* forward */
+        );
+      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$4.imageCommonPanelInline, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MoveUpSingle, {}),
+        localeService.t("image-panel.arrange.forward")
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+        onArrangeBtnClick(
+          1
+          /* backward */
+        );
+      }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$4.imageCommonPanelInline, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MoveDownSingle, {}),
+        localeService.t("image-panel.arrange.backward")
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.imageCommonPanelRow, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.imageCommonPanelColumn, styles$4.imageCommonPanelSpan2), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "small", onClick: /* @__PURE__ */ __name(() => {
+        onArrangeBtnClick(
+          2
+          /* front */
+        );
       }, "onClick"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: styles$4.imageCommonPanelInline, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TopmostSingle, {}),
         localeService.t("image-panel.arrange.front")
@@ -912,1020 +858,465 @@ const InsertSlideShapeRectangleCommand = {
       width: 360
     }) : sidebarService.close(), !0;
   }, "handler")
-}, SlideAddTextCommand = {
-  id: "slide.command.add-text",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name(async (accessor) => {
-    var _a11;
-    const commandService = accessor.get(ICommandService), unitId = (_a11 = accessor.get(IUniverInstanceService).getFocusedUnit()) == null ? void 0 : _a11.getUnitId();
-    return await commandService.executeCommand(SlideAddTextOperation.id, { unitId });
-  }, "handler")
-}, SlideAddTextOperation = {
-  id: "slide.operation.add-text",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    const unitId = params.unitId, elementId = generateRandomId(6), defaultWidth = 220, defaultheight = 40, left = 230, top = 142, textContent = (params == null ? void 0 : params.text) || "A New Text", slideData = accessor.get(IUniverInstanceService).getUnit(unitId);
-    if (!slideData) return !1;
-    const activePage = slideData.getActivePage(), elements = Object.values(activePage.pageElements), maxIndex = elements != null && elements.length ? Math.max(...elements.map((element2) => element2.zIndex)) : 21, elementData = {
-      id: elementId,
-      zIndex: maxIndex + 1,
-      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
-      }
+}, COMPONENT_SLIDE_IMAGE_POPUP_MENU = "COMPONENT_SLIDE_IMAGE_POPUP_MENU";
+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");
+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
     };
-    activePage.pageElements[elementId] = elementData, slideData.updatePage(activePage.id, activePage);
-    const canvasview = accessor.get(CanvasView), sceneObject = canvasview.createObjectToPage(elementData, activePage.id, unitId);
-    return sceneObject && canvasview.setObjectActiveByPage(sceneObject, activePage.id, unitId), !0;
-  }, "handler")
-}, SetSlidePageThumbOperation = {
-  id: "slide.operation.set-slide-page-thumb",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => (accessor.get(CanvasView).createThumbs(params.unitId), !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$2 = {
-  imagePopupMenu,
-  imagePopupMenuItem,
-  imagePopupMenuItemIcon,
-  imagePopupMenuItemTitle,
-  imagePopupMenuItemHide,
-  btnContainer,
-  btnContainerExpand
-}, SlideImagePopupMenu = /* @__PURE__ */ __name((props) => {
-  var _a11, _b;
-  const menuItems = (_b = (_a11 = props.popup) == null ? void 0 : _a11.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$2.imagePopupMenu, children: availableMenu.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "li",
-            {
-              onClick: /* @__PURE__ */ __name(() => handleClick(item), "onClick"),
-              className: styles$2.imagePopupMenuItem,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.imagePopupMenuItemTitle, children: localeService.t(item.label) })
-            },
-            item.index
-          )) }),
-          visible,
-          onVisibleChange,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              className: clsx(styles$2.btnContainer, {
-                [styles$2.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", SLIDE_EDITOR_ID = createInternalEditorID("SLIDE_EDITOR"), _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());
+  const { viewportScrollX: actualScrollX, viewportScrollY: actualScrollY } = viewMain, offsetX = (x - actualScrollX) * scaleX, offsetY = (y - actualScrollY) * scaleY;
+  return {
+    x: offsetX,
+    y: offsetY
+  };
+}
+__name(transformPosition2Offset, "transformPosition2Offset");
+var _a3;
+let SlideCanvasPopMangerService = (_a3 = class extends Disposable {
+  constructor(_globalPopupManagerService, _renderManagerService, _univerInstanceService, _commandService) {
+    super(), this._globalPopupManagerService = _globalPopupManagerService, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._commandService = _commandService;
   }
-  dispose() {
-    this._state$.complete(), this._state = null, this._rect$.complete(), this._rect = null;
+  _createObjectPositionObserver(targetObject, currentRender) {
+    const position = (/* @__PURE__ */ __name(() => {
+      var _a11, _b, _c, _d;
+      const { scene, engine } = currentRender, { left, top, width, height } = targetObject, horizontalOffset = (scene.width - ((_b = (_a11 = currentRender.mainComponent) == null ? void 0 : _a11.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
+    };
   }
-  setState(param) {
-    this._state = param, this._refresh(param);
+  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$,
+      canvasElement: currentRender.engine.getCanvasElement()
+    });
+    return {
+      dispose: /* @__PURE__ */ __name(() => {
+        this._globalPopupManagerService.removePopup(id), position$.complete(), disposable.dispose();
+      }, "dispose")
+    };
   }
-  getRect() {
-    return this._rect;
+}, __name(_a3, "SlideCanvasPopMangerService"), _a3);
+SlideCanvasPopMangerService = __decorateClass$7([
+  __decorateParam$7(0, Inject(ICanvasPopupService)),
+  __decorateParam$7(1, IRenderManagerService),
+  __decorateParam$7(2, IUniverInstanceService),
+  __decorateParam$7(3, ICommandService)
+], SlideCanvasPopMangerService);
+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"), _a4;
+let SlidePopupMenuController = (_a4 = 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();
   }
-  setRect(param) {
-    this._rect = param, this._rect$.next(param);
+  _init() {
+    this._univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_SLIDE).forEach((slide) => this._create(slide));
   }
-  getState() {
-    return this._state;
+  _create(slide) {
+    if (!slide)
+      return;
+    const unitId = slide.getUnitId();
+    this._renderManagerService.has(unitId) && !this._initImagePopupMenu.has(unitId) && (this._popupMenuListener(unitId), this._initImagePopupMenu.add(unitId));
   }
-  setFocus(param = !1) {
-    this._focus = param, this._focus$.next(param);
+  _hasCropObject(scene) {
   }
-  _refresh(param) {
-    this._state$.next(param);
+  // eslint-disable-next-line max-lines-per-function
+  _popupMenuListener(unitId) {
+    var _a11;
+    const model = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pages = (_a11 = model == null ? void 0 : model.getPages()) != null ? _a11 : {};
+    Object.keys(pages).forEach((pageId) => {
+      var _a12;
+      const transformer = (_a12 = this._canvasView.getRenderUnitByPageId(pageId, unitId).scene) == null ? void 0 : _a12.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();
+          const selectedObjects = transformer.getSelectedObjectMap();
+          if (selectedObjects.size > 1) {
+            singletonPopupDisposer == null || singletonPopupDisposer.dispose();
+            return;
+          }
+          const object = selectedObjects.values().next().value;
+          object && this._commandService.executeCommand(UpdateSlideElementOperation.id, {
+            unitId,
+            oKey: object.oKey,
+            props: {
+              width: object.width,
+              height: object.height,
+              left: object.left,
+              top: object.top
+            }
+          });
+        })
+      );
+    });
   }
-};
-__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
-}, SlideEditorContainer = /* @__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: SLIDE_EDITOR_ID,
-    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(SLIDE_EDITOR_ID);
-        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
+  _getMenuItemsByObjectType(objectType, oKey, unitId) {
+    return [{
+      label: "slide.popup.edit",
+      index: 0,
+      commandId: ToggleSlideEditSidebarOperation.id,
+      commandParams: {
+        visible: !0,
+        objectType
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        TextEditor,
-        {
-          id: SLIDE_EDITOR_ID,
-          className: styles$1.editorInput,
-          snapshot,
-          cancelDefaultResizeListener: !1,
-          isSheetEditor: !1,
-          isSingle: !1
-        }
-      )
-    }
-  );
-}, "SlideEditorContainer"), AppendSlideOperation = {
-  id: "slide.operation.append-slide",
+      disable: !1
+    }, {
+      label: "slide.popup.delete",
+      index: 5,
+      commandId: DeleteSlideElementOperation.id,
+      commandParams: {
+        id: oKey,
+        unitId
+      },
+      disable: !1
+    }];
+  }
+}, __name(_a4, "SlidePopupMenuController"), _a4);
+SlidePopupMenuController = __decorateClass$6([
+  __decorateParam$6(0, Inject(SlideCanvasPopMangerService)),
+  __decorateParam$6(1, IRenderManagerService),
+  __decorateParam$6(2, IUniverInstanceService),
+  __decorateParam$6(3, IContextService),
+  __decorateParam$6(4, Inject(CanvasView)),
+  __decorateParam$6(5, ISidebarService),
+  __decorateParam$6(6, ICommandService)
+], SlidePopupMenuController);
+const SetTextEditArrowOperation = {
+  id: "slide.operation.edit-arrow",
   type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor, params) => {
-    const unitId = params.unitId;
-    return accessor.get(IUniverInstanceService).getUnit(unitId) ? (accessor.get(CanvasView).appendPage(unitId), !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 _a11, _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 = (_a11 = currentSlide == null ? void 0 : currentSlide.getActivePage()) == null ? void 0 : _a11.id) != null ? _b : null);
-  useEffect(() => {
-    setDivRefs(slideList.map((_) => React.createRef()));
-  }, [slideList.length]), useEffect(() => {
-    const subscriber = currentSlide == null ? void 0 : currentSlide.activePage$.subscribe((page) => {
-      var _a12;
-      const id = (_a12 = page == null ? void 0 : page.id) != null ? _a12 : null;
-      id && setActivatePageId(id);
+  handler: /* @__PURE__ */ __name(() => !0, "handler")
+}, SLIDE_EDITOR_ID = createInternalEditorID("SLIDE_EDITOR");
+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");
+const ISlideEditorBridgeService = createIdentifier("univer.slide-editor-bridge.service");
+var _a5;
+let SlideEditorBridgeService = (_a5 = class extends Disposable {
+  constructor(_editorService, _contextService, _renderManagerService) {
+    super();
+    __publicField(this, "_editorUnitId", SLIDE_EDITOR_ID);
+    __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, "_visibleParam", {
+      visible: !1,
+      eventType: DeviceInputEventType.Dblclick,
+      unitId: ""
     });
-    return () => {
-      subscriber == null || subscriber.unsubscribe();
+    __publicField(this, "_visible$", new BehaviorSubject(this._visibleParam));
+    __publicField(this, "visible$", this._visible$.asObservable());
+    __publicField(this, "_afterVisible$", new BehaviorSubject(this._visibleParam));
+    __publicField(this, "afterVisible$", this._afterVisible$.asObservable());
+    __publicField(this, "endEditing$", new Subject());
+    __publicField(this, "_currentEditRectInfo");
+    this._editorService = _editorService, this._contextService = _contextService, this._renderManagerService = _renderManagerService;
+  }
+  dispose() {
+    super.dispose();
+  }
+  getEditorRect() {
+    return this._currentEditRectInfo;
+  }
+  /**
+   * 1st part of startEditing.
+   * @editorInfo editorInfo
+   */
+  setEditorRect(editorInfo) {
+    this._currentEditRectInfo = editorInfo, this._editorService.getFocusEditor() || (this._editorService.focus(SLIDE_EDITOR_ID), 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._visibleParam = param, param.visible && (this._editorIsDirty = !1), this._visible$.next(this._visibleParam), this._afterVisible$.next(this._visibleParam);
+  }
+  /**
+   * get info from _currentEditRectInfo
+   *
+   * invoked by slide-editing.render-controller.ts@_handleEditorVisible
+   * && this@setEditorRect
+   */
+  getEditRectState() {
+    const editorUnitId = SLIDE_EDITOR_ID, 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 }
     };
-  }, []), useEffect(() => {
-    divRefs.forEach((ref, index) => {
-      var _a12;
-      if (ref.current) {
-        const slide = slideList[index];
-        (_a12 = renderManagerService.getRenderById(slide.id)) == null || _a12.engine.setContainer(ref.current);
-      }
-    }), divRefs.length > 0 && commandService.syncExecuteCommand(SetSlidePageThumbOperation.id, { unitId: currentSlide == null ? void 0 : currentSlide.getUnitId() });
-  }, [divRefs, slideList, renderManagerService, commandService, currentSlide]);
-  const activatePage = useCallback((page) => {
-    commandService.syncExecuteCommand(ActivateSlidePageOperation.id, { id: page, unitId: currentSlide == null ? void 0 : currentSlide.getUnitId() });
-  }, [commandService, currentSlide]), handleAppendSlide = useCallback(() => {
-    commandService.syncExecuteCommand(AppendSlideOperation.id, { unitId: currentSlide == null ? void 0 : currentSlide.getUnitId() });
-  }, [commandService, currentSlide]);
-  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 })
-        ]
+    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
       },
-      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,
-    icon: IMAGE_UPLOAD_ICON,
-    tooltip: "slide.image.insert.title",
-    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SLIDE)
-  };
-}
-__name(SlideImageMenuFactory, "SlideImageMenuFactory");
-function UploadSlideFloatImageMenuFactory(_accessor) {
-  return {
-    id: InsertSlideFloatImageCommand.id,
-    title: "slide.image.insert.float",
-    type: MenuItemType.BUTTON,
-    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,
-    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: InsertSlideShapeRectangleCommand.id,
-    title: "slide.shape.insert.rectangle",
-    type: MenuItemType.BUTTON,
-    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: SlideAddTextCommand.id,
-    type: MenuItemType.BUTTON,
-    icon: TEXT_ICON_ID,
-    tooltip: "slide.text.insert.title",
-    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
-  };
-}
-__name(SlideAddTextMenuItemFactory, "SlideAddTextMenuItemFactory");
-const menuSchema = {
-  [RibbonStartGroup.FORMAT]: {
-    [SlideAddTextCommand.id]: {
-      order: 0,
-      menuItemFactory: SlideAddTextMenuItemFactory
-    },
-    [IMAGE_MENU_ID]: {
-      order: 0,
-      menuItemFactory: SlideImageMenuFactory,
-      [InsertSlideFloatImageCommand.id]: {
-        order: 0,
-        menuItemFactory: UploadSlideFloatImageMenuFactory
-      }
-    },
-    [SHAPE_MENU_ID]: {
-      order: 0,
-      menuItemFactory: SlideShapeMenuFactory,
-      [InsertSlideShapeRectangleCommand.id]: {
-        order: 0,
-        menuItemFactory: UploadSlideFloatShapeMenuFactory
-      }
-    }
-  }
-};
-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"), _a3;
-let SlidesUIController = (_a3 = class extends Disposable {
-  constructor(_injector, _menuManagerService, _componentManager, _uiPartsService, _commandService, _shortcutService) {
-    super(), this._injector = _injector, this._menuManagerService = _menuManagerService, this._componentManager = _componentManager, this._uiPartsService = _uiPartsService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._initCommands(), this._initCustomComponents(), this._initUIComponents(), this._initMenus(), this._initShortcuts();
-  }
-  _initMenus() {
-    this._menuManagerService.mergeMenu(menuSchema);
+      scaleX: 1,
+      scaleY: 1,
+      slideCardOffset: canvasOffset,
+      unitId,
+      editorUnitId,
+      documentLayoutObject
+    };
   }
-  _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_SLIDE_IMAGE_POPUP_MENU, SlideImagePopupMenu)), this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_SIDEBAR, RectSidebar));
+  changeEditorDirty(dirtyStatus) {
+    this._editorIsDirty = dirtyStatus;
   }
-  _initCommands() {
-    [
-      AppendSlideOperation,
-      ActivateSlidePageOperation,
-      SetSlidePageThumbOperation,
-      InsertSlideFloatImageCommand,
-      SlideAddTextOperation,
-      SlideAddTextCommand,
-      InsertSlideShapeRectangleOperation,
-      InsertSlideShapeRectangleCommand,
-      ToggleSlideEditSidebarOperation,
-      DeleteSlideElementOperation,
-      UpdateSlideElementOperation,
-      // commands for editor
-      SetTextEditArrowOperation
-    ].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
+  isVisible() {
+    return this._visibleParam.visible;
   }
-  _initUIComponents() {
-    this.disposeWithMe(
-      this._uiPartsService.registerComponent(BuiltInUIPart.LEFT_SIDEBAR, () => connectInjector(SlideSideBar, this._injector))
-    ), this.disposeWithMe(
-      this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(SlideEditorContainer, this._injector))
-    );
+  getEditorDirty() {
+    return this._editorIsDirty;
   }
-  _initShortcuts() {
-    [
-      EditorDeleteLeftShortcut,
-      ...generateArrowSelectionShortCutItem()
-    ].forEach((item) => {
-      this.disposeWithMe(this._shortcutService.registerShortcut(item));
-    });
+  getCurrentEditorId() {
+    return this._editorUnitId;
   }
-}, __name(_a3, "SlidesUIController"), _a3);
-SlidesUIController = __decorateClass$7([
-  OnLifecycle(LifecycleStages.Ready, SlidesUIController),
-  __decorateParam$7(0, Inject(Injector)),
-  __decorateParam$7(1, IMenuManagerService),
-  __decorateParam$7(2, Inject(ComponentManager)),
-  __decorateParam$7(3, IUIPartsService),
-  __decorateParam$7(4, ICommandService),
-  __decorateParam$7(5, 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");
-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)
+  /**
+   * @deprecated
+   */
+  genDocData(target) {
+    const editorUnitId = this.getCurrentEditorId(), content = target.text, fontSize = target.fs;
     return {
-      x,
-      y
+      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 }
     };
-  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 _a11, _b, _c, _d;
-      const { scene, engine } = currentRender, { left, top, width, height } = targetObject, horizontalOffset = (scene.width - ((_b = (_a11 = currentRender.mainComponent) == null ? void 0 : _a11.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
-    };
+}, __name(_a5, "SlideEditorBridgeService"), _a5);
+SlideEditorBridgeService = __decorateClass$5([
+  __decorateParam$5(0, IEditorService),
+  __decorateParam$5(1, IContextService),
+  __decorateParam$5(2, IRenderManagerService)
+], SlideEditorBridgeService);
+const _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());
   }
-  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$,
-      canvasElement: currentRender.engine.getCanvasElement()
-    });
-    return {
-      dispose: /* @__PURE__ */ __name(() => {
-        this._globalPopupManagerService.removePopup(id), position$.complete(), disposable.dispose();
-      }, "dispose")
-    };
+  dispose() {
+    this._state$.complete(), this._state = null, this._rect$.complete(), this._rect = null;
   }
-}, __name(_a4, "SlideCanvasPopMangerService"), _a4);
-SlideCanvasPopMangerService = __decorateClass$6([
-  __decorateParam$6(0, Inject(ICanvasPopupService)),
-  __decorateParam$6(1, IRenderManagerService),
-  __decorateParam$6(2, IUniverInstanceService),
-  __decorateParam$6(3, ICommandService)
-], SlideCanvasPopMangerService);
-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"), _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));
+  setState(param) {
+    this._state = param, this._refresh(param);
   }
-  _dispose(workbook) {
+  getRect() {
+    return this._rect;
   }
-  _create(slide) {
-    if (!slide)
-      return;
-    const unitId = slide.getUnitId();
-    this._renderManagerService.has(unitId) && !this._initImagePopupMenu.has(unitId) && (this._popupMenuListener(unitId), this._initImagePopupMenu.add(unitId));
+  setRect(param) {
+    this._rect = param, this._rect$.next(param);
   }
-  _hasCropObject(scene) {
+  getState() {
+    return this._state;
   }
-  // eslint-disable-next-line max-lines-per-function
-  _popupMenuListener(unitId) {
-    var _a11;
-    const model = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pages = (_a11 = model == null ? void 0 : model.getPages()) != null ? _a11 : {};
-    Object.keys(pages).forEach((pageId) => {
-      var _a12;
-      const transformer = (_a12 = this._canvasView.getRenderUnitByPageId(pageId, unitId).scene) == null ? void 0 : _a12.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();
-          const selectedObjects = transformer.getSelectedObjectMap();
-          if (selectedObjects.size > 1) {
-            singletonPopupDisposer == null || singletonPopupDisposer.dispose();
-            return;
-          }
-          const object = selectedObjects.values().next().value;
-          object && this._commandService.executeCommand(UpdateSlideElementOperation.id, {
-            unitId,
-            oKey: object.oKey,
-            props: {
-              width: object.width,
-              height: object.height,
-              left: object.left,
-              top: object.top
-            }
-          });
-        })
-      );
-    });
+  setFocus(param = !1) {
+    this._focus = param, this._focus$.next(param);
   }
-  _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,
-        unitId
-      },
-      disable: !1
-    }];
+  _refresh(param) {
+    this._state$.next(param);
   }
-}, __name(_a5, "SlidePopupMenuController"), _a5);
-SlidePopupMenuController = __decorateClass$5([
-  OnLifecycle(LifecycleStages.Steady, SlidePopupMenuController),
-  __decorateParam$5(0, Inject(SlideCanvasPopMangerService)),
-  __decorateParam$5(1, IRenderManagerService),
-  __decorateParam$5(2, IUniverInstanceService),
-  __decorateParam$5(3, IContextService),
-  __decorateParam$5(4, Inject(CanvasView)),
-  __decorateParam$5(5, ISidebarService),
-  __decorateParam$5(6, ICommandService)
-], SlidePopupMenuController);
-var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+};
+__name(_SlideEditorManagerService, "SlideEditorManagerService");
+let SlideEditorManagerService = _SlideEditorManagerService;
+const ISlideEditorManagerService = createIdentifier(
+  "univer.slide-editor-manager.service"
+);
+var CursorChange = /* @__PURE__ */ ((_CursorChange) => (_CursorChange[_CursorChange.InitialState = 0] = "InitialState", _CursorChange[_CursorChange.StartEditor = 1] = "StartEditor", _CursorChange[_CursorChange.CursorChange = 2] = "CursorChange", _CursorChange))(CursorChange || {}), __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$4(target, key, result), result;
 }, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4");
-const ISlideEditorBridgeService = createIdentifier("univer.slide-editor-bridge.service");
+const HIDDEN_EDITOR_POSITION$1 = -1e3, EDITOR_INPUT_SELF_EXTEND_GAP = 5, EDITOR_BORDER_SIZE = 2;
 var _a6;
-let SlideEditorBridgeService = (_a6 = class extends Disposable {
-  constructor(_editorService, _contextService, _renderManagerService) {
+let SlideEditingRenderController = (_a6 = class extends Disposable {
+  constructor(_renderContext, _layoutService, _undoRedoService, _contextService, _instanceSrv, _renderManagerService, _editorBridgeService, _cellEditorManagerService, _textSelectionManagerService, _commandService, _localService, _editorService) {
     super();
-    __publicField(this, "_editorUnitId", SLIDE_EDITOR_ID);
-    __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, "_visibleParam", {
-      visible: !1,
-      eventType: DeviceInputEventType.Dblclick,
-      unitId: ""
-    });
-    __publicField(this, "_visible$", new BehaviorSubject(this._visibleParam));
-    __publicField(this, "visible$", this._visible$.asObservable());
-    __publicField(this, "_afterVisible$", new BehaviorSubject(this._visibleParam));
-    __publicField(this, "afterVisible$", this._afterVisible$.asObservable());
-    __publicField(this, "endEditing$", new Subject());
-    __publicField(this, "_currentEditRectInfo");
-    this._editorService = _editorService, this._contextService = _contextService, this._renderManagerService = _renderManagerService;
+    /**
+     * It is used to distinguish whether the user has actively moved the cursor in the editor, mainly through mouse clicks.
+     */
+    __publicField(this, "_cursorChange", CursorChange.InitialState);
+    /** If the corresponding unit is active and prepared for editing. */
+    __publicField(this, "_isUnitEditing", !1);
+    __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._textSelectionManagerService = _textSelectionManagerService, this._commandService = _commandService, this._localService = _localService, this._editorService = _editorService, this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SLIDE).subscribe((slideDataModel) => {
+      slideDataModel && slideDataModel.getUnitId() === this._renderContext.unitId ? this._d = this._init() : (this._disposeCurrent(), this._isUnitEditing && (this._handleEditorInvisible({
+        visible: !1,
+        eventType: DeviceInputEventType.Keyboard,
+        keycode: KeyCode.ESC,
+        unitId: this._renderContext.unitId
+      }), this._isUnitEditing = !1));
+    })), this._initEditorVisibilityListener();
   }
   dispose() {
-    super.dispose();
-  }
-  getEditorRect() {
-    return this._currentEditRectInfo;
+    super.dispose(), this._disposeCurrent();
   }
-  /**
-   * 1st part of startEditing.
-   * @editorInfo editorInfo
-   */
-  setEditorRect(editorInfo) {
-    this._currentEditRectInfo = editorInfo, this._editorService.getFocusEditor() || (this._editorService.focus(SLIDE_EDITOR_ID), 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);
+  _disposeCurrent() {
+    var _a11;
+    (_a11 = this._d) == null || _a11.dispose(), this._d = null;
   }
-  changeVisible(param) {
-    this._visibleParam = param, param.visible && (this._editorIsDirty = !1), this._visible$.next(this._visibleParam), this._afterVisible$.next(this._visibleParam);
+  _init() {
+    const d = new DisposableCollection();
+    return this._subscribeToCurrentCell(d), this._initialKeyboardListener(d), this._initialCursorSync(d), this._listenEditorFocus(d), this._commandExecutedListener(d), setTimeout(() => {
+      this._cursorStateListener(d);
+    }, 1e3), d;
   }
-  /**
-   * get info from _currentEditRectInfo
-   *
-   * invoked by slide-editing.render-controller.ts@_handleEditorVisible
-   * && this@setEditorRect
-   */
-  getEditRectState() {
-    const editorUnitId = SLIDE_EDITOR_ID, 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
-    };
+  _initEditorVisibilityListener() {
+    this.disposeWithMe(this._editorBridgeService.visible$.subscribe((param) => {
+      param.visible ? (this._isUnitEditing = !0, this._handleEditorVisible(param)) : this._isUnitEditing && (this._handleEditorInvisible(param), this._isUnitEditing = !1);
+    }));
   }
-  changeEditorDirty(dirtyStatus) {
-    this._editorIsDirty = dirtyStatus;
+  _listenEditorFocus(d) {
+    const renderConfig = this._getEditorObject();
+    renderConfig && d.add(renderConfig.document.onPointerDown$.subscribeEvent(() => {
+    }));
   }
-  isVisible() {
-    return this._visibleParam.visible;
+  _getEditorSkeleton(editorId) {
+    var _a11;
+    return (_a11 = this._renderManagerService.getRenderById(editorId)) == null ? void 0 : _a11.with(DocSkeletonManagerService).getSkeleton();
   }
-  getEditorDirty() {
-    return this._editorIsDirty;
+  _getEditorViewModel(editorId) {
+    var _a11;
+    return (_a11 = this._renderManagerService.getRenderById(editorId)) == null ? void 0 : _a11.with(DocSkeletonManagerService).getViewModel();
   }
-  getCurrentEditorId() {
-    return this._editorUnitId;
+  _initialCursorSync(d) {
+    d.add(this._cellEditorManagerService.focus$.pipe(filter((f2) => !!f2)).subscribe(() => {
+      var _a11;
+      const docSelectionRenderManager = (_a11 = this._renderManagerService.getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a11.with(DocSelectionRenderService);
+      docSelectionRenderManager && docSelectionRenderManager.sync();
+    }));
   }
   /**
-   * @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(_a6, "SlideEditorBridgeService"), _a6);
-SlideEditorBridgeService = __decorateClass$4([
-  __decorateParam$4(0, IEditorService),
-  __decorateParam$4(1, IContextService),
-  __decorateParam$4(2, IRenderManagerService)
-], SlideEditorBridgeService);
-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"), _a7;
-let SlideEditorBridgeRenderController = (_a7 = class extends RxDisposable {
-  constructor(_renderContext, _instanceSrv, _commandService, _editorBridgeService) {
-    super();
-    /**
-     * It is used to distinguish whether the user has actively moved the cursor in the editor, mainly through mouse clicks.
-     */
-    // private _cursorChange: CursorChange = CursorChange.InitialState;
-    /** If the corresponding unit is active and prepared for editing. */
-    // private _isUnitEditing = false;
-    __publicField(this, "setSlideTextEditor$", new Subject());
-    __publicField(this, "_curRichText", null);
-    __publicField(this, "_d");
-    this._renderContext = _renderContext, this._instanceSrv = _instanceSrv, this._commandService = _commandService, this._editorBridgeService = _editorBridgeService, this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SLIDE).subscribe((slideDataModel) => {
-      slideDataModel && slideDataModel.getUnitId() === this._renderContext.unitId ? this._d = this._init() : this._disposeCurrent();
-    }));
-  }
-  _init() {
-    const d = new DisposableCollection();
-    return this._initEventListener(d), d;
-  }
-  _disposeCurrent() {
-    var _a11;
-    (_a11 = this._d) == null || _a11.dispose(), this._d = null;
-  }
-  _setEditorRect(pageId, 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) {
-    const listenersForPageScene = /* @__PURE__ */ __name((scene) => {
-      const transformer = scene.getTransformer();
-      transformer && (d.add(transformer.clearControl$.subscribe(() => {
-        this.setEditorVisible(!1), this.pickOtherObjects();
-      })), d.add(transformer.createControl$.subscribe(() => {
-        this.setEditorVisible(!1);
-      })), d.add(scene.onDblclick$.subscribeEvent(() => {
-        transformer.clearControls();
-        const object = transformer.getSelectedObjectMap().values().next().value;
-        object && (object.objectType !== ObjectType.RICH_TEXT ? this.pickOtherObjects() : this.startEditing(scene.sceneKey, object));
-      })), d.add(this._instanceSrv.focused$.subscribe((fc) => {
-        this.endEditing();
-      })));
-    }, "listenersForPageScene"), { mainComponent } = this._renderContext;
-    mainComponent.subSceneChanged$.subscribeEvent((pageScene) => {
-      listenersForPageScene(pageScene);
-    });
-    const pageSceneList = Array.from(mainComponent.getSubScenes().values());
-    for (let i = 0; i < pageSceneList.length; i++) {
-      const pageScene = pageSceneList[i];
-      listenersForPageScene(pageScene);
-    }
-  }
-  pickOtherObjects() {
-    this.endEditing();
-  }
-  /**
-   * invoked when picking other object.
-   *
-   * save editing state to curr richText.
-   */
-  endEditing() {
-    var _a11;
-    if (!this._curRichText) return;
-    this.setEditorVisible(!1);
-    const curRichText = this._curRichText;
-    if (!this._instanceSrv.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE)) return !1;
-    curRichText.refreshDocumentByDocData(), curRichText.resizeToContentSize(), this._editorBridgeService.endEditing$.next(curRichText);
-    const richText = {
-      bl: 1,
-      fs: curRichText.fs,
-      text: curRichText.text
-    }, textRuns = (_a11 = curRichText.documentData.body) == null ? void 0 : _a11.textRuns;
-    if (textRuns && textRuns.length) {
-      const ts = textRuns[0].ts;
-      richText.cl = ts == null ? void 0 : ts.cl;
-    }
-    this._commandService.executeCommand(UpdateSlideElementOperation.id, {
-      unitId: this._renderContext.unitId,
-      oKey: curRichText == null ? void 0 : curRichText.oKey,
-      props: {
-        richText
-      }
-    }), this._curRichText = null;
-  }
-  /**
-   * TODO calling twice ？？？？
-   * editingParam derives from RichText object.
-   *
-   * TODO @lumixraku need scale param
-   * @param target
-   */
-  startEditing(pageId, target) {
-    this._setEditorRect(pageId, target), this.setEditorVisible(!0);
-  }
-  setEditorVisible(visible) {
-    var _a11, _b;
-    visible ? (_a11 = this._curRichText) == null || _a11.hide() : (_b = this._curRichText) == null || _b.show();
-    const { unitId } = this._renderContext;
-    this._editorBridgeService.changeVisible({ visible, eventType: DeviceInputEventType.PointerDown, unitId });
-  }
-}, __name(_a7, "SlideEditorBridgeRenderController"), _a7);
-SlideEditorBridgeRenderController = __decorateClass$3([
-  __decorateParam$3(1, IUniverInstanceService),
-  __decorateParam$3(2, ICommandService),
-  __decorateParam$3(3, ISlideEditorBridgeService)
-], SlideEditorBridgeRenderController);
-var CursorChange = /* @__PURE__ */ ((_CursorChange) => (_CursorChange[_CursorChange.InitialState = 0] = "InitialState", _CursorChange[_CursorChange.StartEditor = 1] = "StartEditor", _CursorChange[_CursorChange.CursorChange = 2] = "CursorChange", _CursorChange))(CursorChange || {}), __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");
-const HIDDEN_EDITOR_POSITION = -1e3, EDITOR_INPUT_SELF_EXTEND_GAP = 5, EDITOR_BORDER_SIZE = 2;
-var _a8;
-let SlideEditingRenderController = (_a8 = class extends Disposable {
-  constructor(_renderContext, _layoutService, _undoRedoService, _contextService, _instanceSrv, _renderManagerService, _editorBridgeService, _cellEditorManagerService, _textSelectionManagerService, _commandService, _localService, _editorService) {
-    super();
-    /**
-     * It is used to distinguish whether the user has actively moved the cursor in the editor, mainly through mouse clicks.
-     */
-    __publicField(this, "_cursorChange", CursorChange.InitialState);
-    /** If the corresponding unit is active and prepared for editing. */
-    __publicField(this, "_isUnitEditing", !1);
-    __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._textSelectionManagerService = _textSelectionManagerService, this._commandService = _commandService, this._localService = _localService, this._editorService = _editorService, this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SLIDE).subscribe((slideDataModel) => {
-      slideDataModel && slideDataModel.getUnitId() === this._renderContext.unitId ? this._d = this._init() : (this._disposeCurrent(), this._isUnitEditing && (this._handleEditorInvisible({
-        visible: !1,
-        eventType: DeviceInputEventType.Keyboard,
-        keycode: KeyCode.ESC,
-        unitId: this._renderContext.unitId
-      }), this._isUnitEditing = !1));
-    })), this._initEditorVisibilityListener();
-  }
-  dispose() {
-    super.dispose(), this._disposeCurrent();
-  }
-  _disposeCurrent() {
-    var _a11;
-    (_a11 = this._d) == null || _a11.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), setTimeout(() => {
-      this._cursorStateListener(d);
-    }, 1e3), 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 _a11;
-    return (_a11 = this._renderManagerService.getRenderById(editorId)) == null ? void 0 : _a11.with(DocSkeletonManagerService).getSkeleton();
-  }
-  _getEditorViewModel(editorId) {
-    var _a11;
-    return (_a11 = this._renderManagerService.getRenderById(editorId)) == null ? void 0 : _a11.with(DocSkeletonManagerService).getViewModel();
-  }
-  _initialCursorSync(d) {
-    d.add(this._cellEditorManagerService.focus$.pipe(filter((f2) => !!f2)).subscribe(() => {
-      var _a11;
-      const docSelectionRenderManager = (_a11 = this._renderManagerService.getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a11.with(DocSelectionRenderService);
-      docSelectionRenderManager && docSelectionRenderManager.sync();
-    }));
-  }
-  /**
-   * Set editorUnitId to curr doc.
-   * @param d DisposableCollection
+   * Set editorUnitId to curr doc.
+   * @param d DisposableCollection
    */
   _subscribeToCurrentCell(d) {
     d.add(this._editorBridgeService.currentEditRectState$.subscribe((editCellState) => {
@@ -1943,7 +1334,7 @@ let SlideEditingRenderController = (_a8 = class extends Disposable {
         endOffset: 0
       }]);
       const docSelectionRenderManager = (_a11 = this._renderManagerService.getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a11.with(DocSelectionRenderService);
-      docSelectionRenderManager && docSelectionRenderManager.activate(HIDDEN_EDITOR_POSITION, HIDDEN_EDITOR_POSITION);
+      docSelectionRenderManager && docSelectionRenderManager.activate(HIDDEN_EDITOR_POSITION$1, HIDDEN_EDITOR_POSITION$1);
     }));
   }
   /**
@@ -2104,138 +1495,745 @@ let SlideEditingRenderController = (_a8 = class extends Disposable {
         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
+    ]), (_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) {
+  }
+  _showEditorByKeyboard(config) {
+  }
+  _commandExecutedListener(d) {
+    const moveCursorOP = [SetTextEditArrowOperation.id], editedMutations = [RichTextEditingMutation.id];
+    d.add(this._commandService.onCommandExecuted((command) => {
+      this._editorService.getFocusId() === SLIDE_EDITOR_ID && (moveCursorOP.includes(command.id) && this._moveCursorCmdHandler(command), editedMutations.includes(command.id) && this._editorBridgeService.isVisible() && this._editingChangedHandler());
+    }));
+  }
+  _moveCursorCmdHandler(command) {
+    const params = command.params, { keycode, isShift } = params;
+    keycode != null && this._cursorChange === CursorChange.CursorChange ? 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 = CursorChange.InitialState, 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(EDITOR_ACTIVATED, !1), this._cellEditorManagerService.setState({
+      show: param.visible
+    });
+    const editorUnitId = this._editorBridgeService.getCurrentEditorId();
+    editorUnitId != null && this._undoRedoService.clearUndoRedo(editorUnitId);
+  }
+  _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 === CursorChange.StartEditor && (this._cursorChange = CursorChange.CursorChange);
+    })));
+  }
+  // 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(_a6, "SlideEditingRenderController"), _a6);
+SlideEditingRenderController = __decorateClass$4([
+  __decorateParam$4(1, ILayoutService),
+  __decorateParam$4(2, IUndoRedoService),
+  __decorateParam$4(3, IContextService),
+  __decorateParam$4(4, IUniverInstanceService),
+  __decorateParam$4(5, IRenderManagerService),
+  __decorateParam$4(6, ISlideEditorBridgeService),
+  __decorateParam$4(7, ISlideEditorManagerService),
+  __decorateParam$4(8, Inject(DocSelectionManagerService)),
+  __decorateParam$4(9, ICommandService),
+  __decorateParam$4(10, Inject(LocaleService)),
+  __decorateParam$4(11, IEditorService)
+], 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 __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"), _a7;
+let SlideEditorBridgeRenderController = (_a7 = class extends RxDisposable {
+  constructor(_renderContext, _instanceSrv, _commandService, _editorBridgeService) {
+    super();
+    /**
+     * It is used to distinguish whether the user has actively moved the cursor in the editor, mainly through mouse clicks.
+     */
+    // private _cursorChange: CursorChange = CursorChange.InitialState;
+    /** If the corresponding unit is active and prepared for editing. */
+    // private _isUnitEditing = false;
+    __publicField(this, "setSlideTextEditor$", new Subject());
+    __publicField(this, "_curRichText", null);
+    __publicField(this, "_d");
+    this._renderContext = _renderContext, this._instanceSrv = _instanceSrv, this._commandService = _commandService, this._editorBridgeService = _editorBridgeService, this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SLIDE).subscribe((slideDataModel) => {
+      slideDataModel && slideDataModel.getUnitId() === this._renderContext.unitId ? this._d = this._init() : this._disposeCurrent();
+    }));
+  }
+  _init() {
+    const d = new DisposableCollection();
+    return this._initEventListener(d), d;
+  }
+  _disposeCurrent() {
+    var _a11;
+    (_a11 = this._d) == null || _a11.dispose(), this._d = null;
+  }
+  _setEditorRect(pageId, 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) {
+    const listenersForPageScene = /* @__PURE__ */ __name((scene) => {
+      const transformer = scene.getTransformer();
+      transformer && (d.add(transformer.clearControl$.subscribe(() => {
+        this.setEditorVisible(!1), this.pickOtherObjects();
+      })), d.add(transformer.createControl$.subscribe(() => {
+        this.setEditorVisible(!1);
+      })), d.add(scene.onDblclick$.subscribeEvent(() => {
+        transformer.clearControls();
+        const object = transformer.getSelectedObjectMap().values().next().value;
+        object && (object.objectType !== ObjectType.RICH_TEXT ? this.pickOtherObjects() : this.startEditing(scene.sceneKey, object));
+      })), d.add(this._instanceSrv.focused$.subscribe((fc) => {
+        this.endEditing();
+      })));
+    }, "listenersForPageScene"), { mainComponent } = this._renderContext;
+    mainComponent.subSceneChanged$.subscribeEvent((pageScene) => {
+      listenersForPageScene(pageScene);
+    });
+    const pageSceneList = Array.from(mainComponent.getSubScenes().values());
+    for (let i = 0; i < pageSceneList.length; i++) {
+      const pageScene = pageSceneList[i];
+      listenersForPageScene(pageScene);
+    }
+  }
+  pickOtherObjects() {
+    this.endEditing();
+  }
+  /**
+   * invoked when picking other object.
+   *
+   * save editing state to curr richText.
+   */
+  endEditing() {
+    var _a11;
+    if (!this._curRichText) return;
+    this.setEditorVisible(!1);
+    const curRichText = this._curRichText;
+    if (!this._instanceSrv.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE)) return !1;
+    curRichText.refreshDocumentByDocData(), curRichText.resizeToContentSize(), this._editorBridgeService.endEditing$.next(curRichText);
+    const richText = {
+      bl: 1,
+      fs: curRichText.fs,
+      text: curRichText.text
+    }, textRuns = (_a11 = curRichText.documentData.body) == null ? void 0 : _a11.textRuns;
+    if (textRuns && textRuns.length) {
+      const ts = textRuns[0].ts;
+      richText.cl = ts == null ? void 0 : ts.cl;
+    }
+    this._commandService.executeCommand(UpdateSlideElementOperation.id, {
+      unitId: this._renderContext.unitId,
+      oKey: curRichText == null ? void 0 : curRichText.oKey,
+      props: {
+        richText
+      }
+    }), this._curRichText = null;
+  }
+  /**
+   * TODO calling twice ？？？？
+   * editingParam derives from RichText object.
+   *
+   * TODO @lumixraku need scale param
+   * @param target
+   */
+  startEditing(pageId, target) {
+    this._setEditorRect(pageId, target), this.setEditorVisible(!0);
+  }
+  setEditorVisible(visible) {
+    var _a11, _b;
+    visible ? (_a11 = this._curRichText) == null || _a11.hide() : (_b = this._curRichText) == null || _b.show();
+    const { unitId } = this._renderContext;
+    this._editorBridgeService.changeVisible({ visible, eventType: DeviceInputEventType.PointerDown, unitId });
+  }
+}, __name(_a7, "SlideEditorBridgeRenderController"), _a7);
+SlideEditorBridgeRenderController = __decorateClass$3([
+  __decorateParam$3(1, IUniverInstanceService),
+  __decorateParam$3(2, ICommandService),
+  __decorateParam$3(3, ISlideEditorBridgeService)
+], SlideEditorBridgeRenderController);
+const ActivateSlidePageOperation = {
+  id: "slide.operation.activate-slide",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    var _a11, _b;
+    const unitId = params.unitId, canvasView = accessor.get(CanvasView), model = accessor.get(IUniverInstanceService).getUnit(unitId), pageId = (_a11 = model == null ? void 0 : model.getActivePage()) == null ? void 0 : _a11.id;
+    if (!pageId) return !1;
+    const page = canvasView.getRenderUnitByPageId(pageId, unitId);
+    if (!page) return !1;
+    const transformer = (_b = page.scene) == null ? void 0 : _b.getTransformer();
+    return transformer && transformer.clearControls(), canvasView.activePage(params.id, unitId), !0;
+  }, "handler")
+}, AppendSlideOperation = {
+  id: "slide.operation.append-slide",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const unitId = params.unitId;
+    return accessor.get(IUniverInstanceService).getUnit(unitId) ? (accessor.get(CanvasView).appendPage(unitId), !0) : !1;
+  }, "handler")
+}, InsertSlideFloatImageCommand = {
+  id: "slide.command.insert-float-image",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    var _a11;
+    const univerInstanceService = accessor.get(IUniverInstanceService), unitId = (_a11 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE)) == null ? void 0 : _a11.getUnitId();
+    if (!unitId) return !1;
+    const files = await accessor.get(ILocalFileService).openFile({
+      multiple: !0,
+      accept: DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image2) => `.${image2.replace("image/", "")}`).join(",")
+    });
+    if (files.length !== 1) return !1;
+    const imageParam = await accessor.get(IImageIoService).saveImage(files[0]);
+    if (!imageParam) return !1;
+    const { imageId, imageSourceType, source, base64Cache } = imageParam, { width, height, image } = await getImageSize(base64Cache || ""), slideData = univerInstanceService.getUnit(unitId);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage(), elements = Object.values(activePage.pageElements), maxIndex = elements != null && elements.length ? Math.max(...elements.map((element2) => element2.zIndex)) : 20, data = {
+      id: imageId,
+      zIndex: maxIndex + 1,
+      left: 0,
+      top: 0,
+      width,
+      height,
+      title: "",
+      description: "",
+      type: PageElementType.IMAGE,
+      image: {
+        imageProperties: {
+          contentUrl: base64Cache,
+          imageSourceType,
+          source,
+          base64Cache,
+          image
+        }
+      }
+    };
+    activePage.pageElements[imageId] = data, slideData.updatePage(activePage.id, activePage);
+    const canvasView = accessor.get(CanvasView), sceneObject = canvasView.createObjectToPage(data, activePage.id, unitId);
+    return sceneObject && canvasView.setObjectActiveByPage(sceneObject, activePage.id, unitId), !0;
+  }, "handler")
+}, SlideAddTextCommand = {
+  id: "slide.command.add-text",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor) => {
+    var _a11;
+    const commandService = accessor.get(ICommandService), unitId = (_a11 = accessor.get(IUniverInstanceService).getFocusedUnit()) == null ? void 0 : _a11.getUnitId();
+    return await commandService.executeCommand(SlideAddTextOperation.id, { unitId });
+  }, "handler")
+}, SlideAddTextOperation = {
+  id: "slide.operation.add-text",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const unitId = params.unitId, elementId = generateRandomId(6), defaultWidth = 220, defaultheight = 40, left = 230, top = 142, textContent = (params == null ? void 0 : params.text) || "A New Text", slideData = accessor.get(IUniverInstanceService).getUnit(unitId);
+    if (!slideData) return !1;
+    const activePage = slideData.getActivePage(), elements = Object.values(activePage.pageElements), maxIndex = elements != null && elements.length ? Math.max(...elements.map((element2) => element2.zIndex)) : 21, elementData = {
+      id: elementId,
+      zIndex: maxIndex + 1,
+      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
+      }
+    };
+    activePage.pageElements[elementId] = elementData, slideData.updatePage(activePage.id, activePage);
+    const canvasview = accessor.get(CanvasView), sceneObject = canvasview.createObjectToPage(elementData, activePage.id, unitId);
+    return sceneObject && canvasview.setObjectActiveByPage(sceneObject, activePage.id, unitId), !0;
+  }, "handler")
+}, SetSlidePageThumbOperation = {
+  id: "slide.operation.set-slide-page-thumb",
+  type: CommandType.OPERATION,
+  handler: /* @__PURE__ */ __name((accessor, params) => (accessor.get(CanvasView).createThumbs(params.unitId), !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$2 = {
+  imagePopupMenu,
+  imagePopupMenuItem,
+  imagePopupMenuItemIcon,
+  imagePopupMenuItemTitle,
+  imagePopupMenuItemHide,
+  btnContainer,
+  btnContainerExpand
+}, SlideImagePopupMenu = /* @__PURE__ */ __name((props) => {
+  var _a11, _b;
+  const menuItems = (_b = (_a11 = props.popup) == null ? void 0 : _a11.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$2.imagePopupMenu, children: availableMenu.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "li",
+            {
+              onClick: /* @__PURE__ */ __name(() => handleClick(item), "onClick"),
+              className: styles$2.imagePopupMenuItem,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.imagePopupMenuItemTitle, children: localeService.t(item.label) })
+            },
+            item.index
+          )) }),
+          visible,
+          onVisibleChange,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: clsx(styles$2.btnContainer, {
+                [styles$2.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"), 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$1 = {
+  slideBar,
+  slideBarContent,
+  slideBarContentHeader,
+  slideBarItem,
+  slideBarBox,
+  slideBarItemActive,
+  slideAddButton
+};
+function SlideSideBar() {
+  var _a11, _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 = (_a11 = currentSlide == null ? void 0 : currentSlide.getActivePage()) == null ? void 0 : _a11.id) != null ? _b : null);
+  useEffect(() => {
+    setDivRefs(slideList.map((_) => React.createRef()));
+  }, [slideList.length]), useEffect(() => {
+    const subscriber = currentSlide == null ? void 0 : currentSlide.activePage$.subscribe((page) => {
+      var _a12;
+      const id = (_a12 = page == null ? void 0 : page.id) != null ? _a12 : null;
+      id && setActivatePageId(id);
+    });
+    return () => {
+      subscriber == null || subscriber.unsubscribe();
+    };
+  }, []), useEffect(() => {
+    divRefs.forEach((ref, index) => {
+      var _a12;
+      if (ref.current) {
+        const slide = slideList[index];
+        (_a12 = renderManagerService.getRenderById(slide.id)) == null || _a12.engine.setContainer(ref.current);
+      }
+    }), divRefs.length > 0 && commandService.syncExecuteCommand(SetSlidePageThumbOperation.id, { unitId: currentSlide == null ? void 0 : currentSlide.getUnitId() });
+  }, [divRefs, slideList, renderManagerService, commandService, currentSlide]);
+  const activatePage = useCallback((page) => {
+    commandService.syncExecuteCommand(ActivateSlidePageOperation.id, { id: page, unitId: currentSlide == null ? void 0 : currentSlide.getUnitId() });
+  }, [commandService, currentSlide]), handleAppendSlide = useCallback(() => {
+    commandService.syncExecuteCommand(AppendSlideOperation.id, { unitId: currentSlide == null ? void 0 : currentSlide.getUnitId() });
+  }, [commandService, currentSlide]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: styles$1.slideBar, ref: slideBarRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Scrollbar, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.slideBarContent, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("header", { className: styles$1.slideBarContentHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { onClick: handleAppendSlide, children: localeService.t("slide.append") }) }),
+    slideList.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: clsx(styles$1.slideBarItem, {
+          [styles$1.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$1.slideBarBox })
+        ]
+      },
+      item.id
+    ))
+  ] }) }) });
+}
+__name(SlideSideBar, "SlideSideBar");
+const slideEditorContainer = "univer-slide-editor-container", editorInput = "univer-editor-input", styles = {
+  slideEditorContainer,
+  editorInput
+}, HIDDEN_EDITOR_POSITION = -1e3, EDITOR_DEFAULT_POSITION = {
+  width: 0,
+  height: 0,
+  top: HIDDEN_EDITOR_POSITION,
+  left: HIDDEN_EDITOR_POSITION
+}, SlideEditorContainer = /* @__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: SLIDE_EDITOR_ID,
+    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,
+        startY = HIDDEN_EDITOR_POSITION,
+        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(SLIDE_EDITOR_ID);
+        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.slideEditorContainer,
+      style: {
+        left: state.left,
+        top: state.top,
+        width: state.width,
+        height: state.height
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TextEditor,
+        {
+          id: SLIDE_EDITOR_ID,
+          className: styles.editorInput,
+          snapshot,
+          cancelDefaultResizeListener: !1,
+          isSheetEditor: !1,
+          isSingle: !1
+        }
+      )
+    }
+  );
+}, "SlideEditorContainer"), IMAGE_UPLOAD_ICON = "addition-and-subtraction-single", IMAGE_MENU_ID = "slide.menu.image";
+function SlideImageMenuFactory(accessor) {
+  return {
+    id: IMAGE_MENU_ID,
+    type: MenuItemType.SUBITEMS,
+    icon: IMAGE_UPLOAD_ICON,
+    tooltip: "slide.image.insert.title",
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SLIDE)
+  };
+}
+__name(SlideImageMenuFactory, "SlideImageMenuFactory");
+function UploadSlideFloatImageMenuFactory(_accessor) {
+  return {
+    id: InsertSlideFloatImageCommand.id,
+    title: "slide.image.insert.float",
+    type: MenuItemType.BUTTON,
+    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
+  };
+}
+__name(UploadSlideFloatImageMenuFactory, "UploadSlideFloatImageMenuFactory");
+const TEXT_ICON_ID = "text-single";
+function SlideAddTextMenuItemFactory(_accessor) {
+  return {
+    id: SlideAddTextCommand.id,
+    type: MenuItemType.BUTTON,
+    icon: TEXT_ICON_ID,
+    tooltip: "slide.text.insert.title",
+    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
+  };
+}
+__name(SlideAddTextMenuItemFactory, "SlideAddTextMenuItemFactory");
+const GRAPH_SINGLE_ICON = "graph-single", SHAPE_MENU_ID = "slide.menu.shape";
+function SlideShapeMenuFactory(accessor) {
+  return {
+    id: SHAPE_MENU_ID,
+    type: MenuItemType.SUBITEMS,
+    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: InsertSlideShapeRectangleCommand.id,
+    title: "slide.shape.insert.rectangle",
+    type: MenuItemType.BUTTON,
+    hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
+  };
+}
+__name(UploadSlideFloatShapeMenuFactory, "UploadSlideFloatShapeMenuFactory");
+const menuSchema = {
+  [RibbonStartGroup.FORMAT]: {
+    [SlideAddTextCommand.id]: {
+      order: 0,
+      menuItemFactory: SlideAddTextMenuItemFactory
+    },
+    [IMAGE_MENU_ID]: {
+      order: 0,
+      menuItemFactory: SlideImageMenuFactory,
+      [InsertSlideFloatImageCommand.id]: {
+        order: 0,
+        menuItemFactory: UploadSlideFloatImageMenuFactory
+      }
+    },
+    [SHAPE_MENU_ID]: {
+      order: 0,
+      menuItemFactory: SlideShapeMenuFactory,
+      [InsertSlideShapeRectangleCommand.id]: {
+        order: 0,
+        menuItemFactory: UploadSlideFloatShapeMenuFactory
       }
-    ]), 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) {
-  }
-  _showEditorByKeyboard(config) {
-  }
-  _commandExecutedListener(d) {
-    const moveCursorOP = [SetTextEditArrowOperation.id], editedMutations = [RichTextEditingMutation.id];
-    d.add(this._commandService.onCommandExecuted((command) => {
-      this._editorService.getFocusId() === SLIDE_EDITOR_ID && (moveCursorOP.includes(command.id) && this._moveCursorCmdHandler(command), editedMutations.includes(command.id) && this._editorBridgeService.isVisible() && this._editingChangedHandler());
-    }));
-  }
-  _moveCursorCmdHandler(command) {
-    const params = command.params, { keycode, isShift } = params;
-    keycode != null && this._cursorChange === CursorChange.CursorChange ? 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 = CursorChange.InitialState, 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(EDITOR_ACTIVATED, !1), this._cellEditorManagerService.setState({
-      show: param.visible
+};
+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
+      }
     });
-    const editorUnitId = this._editorBridgeService.getCurrentEditorId();
-    editorUnitId != null && this._undoRedoService.clearUndoRedo(editorUnitId);
+  return shortcutList;
+}
+__name(generateArrowSelectionShortCutItem, "generateArrowSelectionShortCutItem");
+const EditorDeleteLeftShortcut = {
+  id: DeleteLeftCommand.id,
+  preconditions: /* @__PURE__ */ __name((contextService) => whenEditorActivated(contextService) || whenFormulaEditorFocused(contextService), "preconditions"),
+  binding: KeyCode.BACKSPACE
+};
+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"), _a8;
+let SlidesUIController = (_a8 = class extends Disposable {
+  constructor(_injector, _menuManagerService, _componentManager, _uiPartsService, _commandService, _shortcutService) {
+    super(), this._injector = _injector, this._menuManagerService = _menuManagerService, this._componentManager = _componentManager, this._uiPartsService = _uiPartsService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._initCommands(), this._initCustomComponents(), this._initUIComponents(), this._initMenus(), this._initShortcuts();
   }
-  _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;
-      }
+  _initMenus() {
+    this._menuManagerService.mergeMenu(menuSchema);
   }
-  /**
-   * 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 === CursorChange.StartEditor && (this._cursorChange = CursorChange.CursorChange);
-    })));
+  _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_SLIDE_IMAGE_POPUP_MENU, SlideImagePopupMenu)), this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_SIDEBAR, RectSidebar));
   }
-  // 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
+  _initCommands() {
+    [
+      AppendSlideOperation,
+      ActivateSlidePageOperation,
+      SetSlidePageThumbOperation,
+      InsertSlideFloatImageCommand,
+      SlideAddTextOperation,
+      SlideAddTextCommand,
+      InsertSlideShapeRectangleOperation,
+      InsertSlideShapeRectangleCommand,
+      ToggleSlideEditSidebarOperation,
+      DeleteSlideElementOperation,
+      UpdateSlideElementOperation,
+      // commands for editor
+      SetTextEditArrowOperation
+    ].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
+  }
+  _initUIComponents() {
+    this.disposeWithMe(
+      this._uiPartsService.registerComponent(BuiltInUIPart.LEFT_SIDEBAR, () => connectInjector(SlideSideBar, this._injector))
+    ), this.disposeWithMe(
+      this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(SlideEditorContainer, this._injector))
+    );
+  }
+  _initShortcuts() {
+    [
+      EditorDeleteLeftShortcut,
+      ...generateArrowSelectionShortCutItem()
+    ].forEach((item) => {
+      this.disposeWithMe(this._shortcutService.registerShortcut(item));
     });
   }
-}, __name(_a8, "SlideEditingRenderController"), _a8);
-SlideEditingRenderController = __decorateClass$2([
-  __decorateParam$2(1, ILayoutService),
-  __decorateParam$2(2, IUndoRedoService),
-  __decorateParam$2(3, IContextService),
-  __decorateParam$2(4, IUniverInstanceService),
-  __decorateParam$2(5, IRenderManagerService),
-  __decorateParam$2(6, ISlideEditorBridgeService),
-  __decorateParam$2(7, ISlideEditorManagerService),
-  __decorateParam$2(8, Inject(DocSelectionManagerService)),
-  __decorateParam$2(9, ICommandService),
-  __decorateParam$2(10, Inject(LocaleService)),
-  __decorateParam$2(11, IEditorService)
-], 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");
+}, __name(_a8, "SlidesUIController"), _a8);
+SlidesUIController = __decorateClass$2([
+  __decorateParam$2(0, Inject(Injector)),
+  __decorateParam$2(1, IMenuManagerService),
+  __decorateParam$2(2, Inject(ComponentManager)),
+  __decorateParam$2(3, IUIPartsService),
+  __decorateParam$2(4, ICommandService),
+  __decorateParam$2(5, IShortcutService)
+], SlidesUIController);
 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);
@@ -2267,12 +2265,10 @@ let SlideRenderService = (_a9 = class extends RxDisposable {
   }
 }, __name(_a9, "SlideRenderService"), _a9);
 SlideRenderService = __decorateClass$1([
-  OnLifecycle(LifecycleStages.Ready, SlideRenderService),
   __decorateParam$1(0, IContextService),
   __decorateParam$1(1, IUniverInstanceService),
   __decorateParam$1(2, IRenderManagerService)
 ], SlideRenderService);
-const PLUGIN_CONFIG_KEY = "slides-ui.config", defaultPluginConfig = {};
 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);
@@ -2315,7 +2311,7 @@ let UniverSlidesUIPlugin = (_a10 = class extends Plugin {
       [SlidePopupMenuController]
     ], this._config.override).forEach((m2) => {
       this._injector.add(m2);
-    }), this._injector.get(CanvasView);
+    }), this._injector.get(CanvasView), this._injector.get(SlideRenderService);
   }
   onRendered() {
     [
@@ -2325,7 +2321,10 @@ let UniverSlidesUIPlugin = (_a10 = class extends Plugin {
       [SlideEditingRenderController]
     ].forEach((m2) => {
       this.disposeWithMe(this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SLIDE, m2));
-    }), this._markSlideAsFocused();
+    }), this._markSlideAsFocused(), this._injector.get(SlidesUIController);
+  }
+  onSteady() {
+    this._injector.get(SlidePopupMenuController);
   }
   _markSlideAsFocused() {
     const currentService = this._univerInstanceService;