@univerjs/slides-ui 0.2.7 → 0.2.9

package/lib/es/index.js

@@ -2,16 +2,16 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { CommandType, IUniverInstanceService, UniverInstanceType, PageElementType, Tools, useDependency, LocaleService, ICommandService, generateRandomId, BasicShapes, createIdentifier, IContextService, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DEFAULT_EMPTY_DOCUMENT_VALUE, DocumentFlavor, FOCUSING_UNIVER_EDITOR, EDITOR_ACTIVATED, FORMULA_EDITOR_ACTIVATED, Disposable, connectInjector, OnLifecycle, LifecycleStages, Inject, Injector, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, DocumentDataModel, VerticalAlign, HorizontalAlign, RxDisposable, DisposableCollection, toDisposable, FOCUSING_COMMON_DRAWINGS, WrapStrategy, FOCUSING_EDITOR_BUT_HIDDEN, FOCUSING_EDITOR_INPUT_FORMULA, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, Direction, IUndoRedoService, IResourceLoaderService, Plugin, mergeOverrideWithDependencies } from "@univerjs/core";
-import { ObjectType, FIX_ONE_PIXEL_BLUR_OFFSET, IRenderManagerService, DeviceInputEventType, pxToNum, ITextSelectionRenderManager, convertTextRotation, ScrollBar, fixLineWidthByScale, Rect } from "@univerjs/engine-render";
-import { ISidebarService, IEditorService, useObservable, DISABLE_AUTO_FOCUS_KEY, TextEditor, MenuItemType, MenuPosition, MenuGroup, getMenuHiddenObservable, KeyCode, MetaKeys, BuiltInUIPart, ComponentManager, IMenuService, IUIPartsService, IShortcutService, ICanvasPopupService, ILayoutService } from "@univerjs/ui";
-import { CanvasView, SLIDE_KEY } from "@univerjs/slides";
+import { RxDisposable, UniverInstanceType, debounce, getColorStyle, Inject, Injector, IUniverInstanceService, OnLifecycle, LifecycleStages, CommandType, PageElementType, Tools, useDependency, LocaleService, ICommandService, generateRandomId, BasicShapes, createIdentifier, createInternalEditorID, 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 } from "@univerjs/core";
+import { Viewport, ScrollBar, Slide, Rect, Scene, IRenderManagerService, ObjectType, FIX_ONE_PIXEL_BLUR_OFFSET, DeviceInputEventType, pxToNum, convertTextRotation, fixLineWidthByScale, ITextSelectionRenderManager } from "@univerjs/engine-render";
+import { ISidebarService, useObservable, IEditorService, DISABLE_AUTO_FOCUS_KEY, TextEditor, MenuItemType, MenuPosition, MenuGroup, getMenuHiddenObservable, KeyCode, MetaKeys, BuiltInUIPart, ComponentManager, IMenuService, IUIPartsService, IShortcutService, ICanvasPopupService, ILayoutService } from "@univerjs/ui";
+import { ObjectProvider, SLIDE_KEY } from "@univerjs/slides";
 import { IImageIoService, getImageSize, DRAWING_IMAGE_ALLOW_IMAGE_LIST } from "@univerjs/drawing";
 import React, { forwardRef, useRef, createElement, useState, useEffect, useCallback } from "react";
 import clsx from "clsx";
 import { Button, InputNumber, Dropdown, ColorPicker, Scrollbar } from "@univerjs/design";
-import { DeleteLeftCommand, TextSelectionManagerService, DocSkeletonManagerService, VIEWPORT_KEY, DOCS_COMPONENT_MAIN_LAYER_INDEX, RichTextEditingMutation, MoveSelectionOperation, MoveCursorOperation, DOCS_VIEW_KEY } from "@univerjs/docs";
-import { BehaviorSubject, Subject, filter } from "rxjs";
+import { DeleteLeftCommand, DocSkeletonManagerService, VIEWPORT_KEY, DOCS_COMPONENT_MAIN_LAYER_INDEX, RichTextEditingMutation, MoveSelectionOperation, MoveCursorOperation, TextSelectionManagerService, DOCS_VIEW_KEY } from "@univerjs/docs";
+import { BehaviorSubject, Subject, filter, takeUntil } from "rxjs";
 var __assign = function() {
   return __assign = Object.assign || function(t) {
     for (var s, i = 1, n2 = arguments.length; i < n2; i++) {
@@ -41,15 +41,15 @@ function replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend) {
   var attrs = __assign({}, node.attrs);
   extend != null && extend.colorChannel1 && attrs.fill === "colorChannel1" && (attrs.fill = extend.colorChannel1);
   var defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a9) {
-    var key = _a9[0], value = _a9[1];
+  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 _a9, defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a9 = node.children) === null || _a9 === void 0) && _a9.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
+  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;
 }
@@ -139,38 +139,325 @@ var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width:
   }));
 });
 TopmostSingle.displayName = "TopmostSingle";
+var __defProp$9 = Object.defineProperty, __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor, __decorateClass$9 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$9(target, key, result), result;
+}, "__decorateClass$9"), __decorateParam$9 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$9"), _a;
+let SlideRenderController = (_a = class extends RxDisposable {
+  constructor(_renderContext, _injector, _univerInstanceService, _renderManagerService) {
+    super();
+    __publicField(this, "_objectProvider", null);
+    __publicField(this, "_refreshThumb", debounce(() => {
+      this.createThumbs();
+    }, 300));
+    this._renderContext = _renderContext, this._injector = _injector, this._univerInstanceService = _univerInstanceService, this._renderManagerService = _renderManagerService, this._objectProvider = this._injector.createInstance(ObjectProvider), this._addNewRender();
+  }
+  _addNewRender() {
+    const { unitId, engine, scene } = this._renderContext, slideDataModel = this._getCurrUnitModel();
+    if (!slideDataModel) return;
+    const observer = engine.onTransformChange$.subscribeEvent(() => {
+      this._scrollToCenter(), observer == null || observer.unsubscribe();
+    });
+    engine.onTransformChange$.subscribeEvent(() => {
+      setTimeout(() => {
+        this.createThumbs();
+      }, 300);
+    });
+    const viewMain = new Viewport(SLIDE_KEY.VIEW, scene, {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      isRelativeX: !0,
+      isRelativeY: !0,
+      isWheelPreventDefaultX: !0
+    });
+    scene.attachControl(), scene.onMouseWheel$.subscribeEvent((evt, state) => {
+      const e = evt;
+      if (e.ctrlKey) {
+        const deltaFactor = Math.abs(e.deltaX);
+        let scrollNum = deltaFactor < 40 ? 0.2 : deltaFactor < 80 ? 0.4 : 0.2;
+        scrollNum *= e.deltaY > 0 ? -1 : 1, scene.scaleX < 1 && (scrollNum /= 2), scene.scaleX + scrollNum > 4 ? scene.scale(4, 4) : scene.scaleX + scrollNum < 0.1 ? scene.scale(0.1, 0.1) : (e.deltaY > 0, e.preventDefault());
+      } else
+        viewMain.onMouseWheel(e, state);
+    }), scene.onFileLoaded$.subscribeEvent(() => {
+      this._refreshThumb();
+    }), ScrollBar.attachTo(viewMain), this._renderManagerService.setCurrent(unitId);
+    const slide = this._createSlide(scene);
+    this._renderContext.mainComponent = slide, this._createSlidePages(slideDataModel, slide), this.createThumbs(), engine.runRenderLoop(() => {
+      scene.render();
+    });
+  }
+  _scrollToCenter() {
+    var _a11;
+    const mainScene = (_a11 = this._currentRender()) == null ? void 0 : _a11.scene, viewMain = mainScene == null ? void 0 : mainScene.getViewport(SLIDE_KEY.VIEW), getCenterPositionViewPort = this._getCenterPositionViewPort(mainScene);
+    if (!viewMain || !getCenterPositionViewPort) return;
+    const { left: viewPortLeft, top: viewPortTop } = getCenterPositionViewPort, { x, y } = viewMain.transViewportScroll2ScrollValue(viewPortLeft, viewPortTop);
+    viewMain.scrollToBarPos({
+      x,
+      y
+    });
+  }
+  _currentRender() {
+    return this._renderManagerService.getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_SLIDE);
+  }
+  /**
+   * @param mainScene
+   */
+  _createSlide(mainScene) {
+    const model = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), { width: sceneWidth, height: sceneHeight } = mainScene, pageSize = model.getPageSize(), { width = 100, height = 100 } = pageSize, slideComponent = new Slide(SLIDE_KEY.COMPONENT, {
+      left: (sceneWidth - width) / 2,
+      top: (sceneHeight - height) / 2,
+      width,
+      height,
+      zIndex: 10
+    });
+    return slideComponent.enableSelectedClipElement(), mainScene.addObject(slideComponent), slideComponent;
+  }
+  _addBackgroundRect(scene, fill) {
+    const pageSize = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE).getPageSize(), { width: pageWidth = 0, height: pageHeight = 0 } = pageSize, page = new Rect("canvas", {
+      left: 0,
+      top: 0,
+      width: pageWidth,
+      height: pageHeight,
+      strokeWidth: 1,
+      stroke: "rgba(198,198,198,1)",
+      fill: getColorStyle(fill) || "rgba(255,255,255,1)",
+      zIndex: 0,
+      evented: !1
+    });
+    scene.addObject(page, 0);
+  }
+  _getCenterPositionViewPort(mainScene) {
+    if (!mainScene) return { left: 0, top: 0 };
+    const { width, height } = mainScene, engine = mainScene.getEngine(), canvasWidth = (engine == null ? void 0 : engine.width) || 0, canvasHeight = (engine == null ? void 0 : engine.height) || 0;
+    return {
+      left: (width - canvasWidth) / 2,
+      top: (height - canvasHeight) / 2
+    };
+  }
+  _thumbSceneRender(pageId, slide) {
+    const render2 = this._renderManagerService.getRenderById(pageId);
+    if (render2 == null)
+      return;
+    const { engine: thumbEngine } = render2;
+    if (thumbEngine == null)
+      return;
+    const { width, height } = slide, { width: pageWidth = width, height: pageHeight = height } = thumbEngine, thumbContext = thumbEngine.getCanvas().getContext();
+    slide.renderToThumb(thumbContext, pageId, pageWidth / width, pageHeight / height);
+  }
+  /**
+   * CreateScene by pages, and activate first one.
+   * @param slideDataModel
+   * @param slide
+   */
+  _createSlidePages(slideDataModel, slide) {
+    const pages = slideDataModel.getPages(), pageOrder = slideDataModel.getPageOrder();
+    if (!(!pages || !pageOrder) && pageOrder.length !== 0) {
+      for (let i = 0, len = pageOrder.length; i < len; i++) {
+        const pageId = pageOrder[i];
+        this.createPageScene(pageId, pages[pageId]), this._createThumb(pageId);
+      }
+      slide.activeFirstPage();
+    }
+  }
+  _createThumb(pageId) {
+    this._renderManagerService.createRender(pageId);
+  }
+  /**
+   * SlideDataModel is UnitModel
+   */
+  _getCurrUnitModel() {
+    return this._renderContext.unit;
+  }
+  activePage(_pageId) {
+    let pageId = _pageId;
+    const model = this._getCurrUnitModel();
+    let page;
+    if (pageId)
+      page = model.getPage(pageId);
+    else {
+      const pageElements = model.getPages(), pageOrder = model.getPageOrder();
+      if (pageOrder == null || pageElements == null)
+        return;
+      page = pageElements[pageOrder[0]], pageId = page.id;
+    }
+    const render2 = this._currentRender();
+    if (page == null || render2 == null || render2.mainComponent == null)
+      return;
+    const { id } = page, slide = render2.mainComponent;
+    if (model.setActivePage(page), slide != null && slide.hasPage(id)) {
+      slide.changePage(id);
+      return;
+    }
+    this.createPageScene(id, page);
+  }
+  createThumbs() {
+    const pageOrder = this._getCurrUnitModel().getPageOrder(), render2 = this._currentRender();
+    if (!(!pageOrder || !render2) && pageOrder.length !== 0)
+      for (let i = 0, len = pageOrder.length; i < len; i++) {
+        const pageId = pageOrder[i];
+        this._thumbSceneRender(pageId, render2.mainComponent);
+      }
+  }
+  /**
+   * Create scene by page and set to _sceneMap.
+   * @param pageId
+   * @param page
+   */
+  createPageScene(pageId, page) {
+    const render2 = this._renderContext;
+    if (!render2 || !this._objectProvider)
+      return;
+    const { scene: mainScene, mainComponent } = render2, slide = mainComponent, { width, height } = slide, pageScene = new Scene(pageId, slide, {
+      width,
+      height
+    });
+    new Viewport(`PageViewer_${pageId}`, pageScene, {
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      isRelativeX: !0,
+      isRelativeY: !0
+    }).closeClip();
+    const { pageElements, pageBackgroundFill } = page, objects = this._objectProvider.convertToRenderObjects(pageElements, mainScene);
+    if (!objects || !slide) return;
+    this._addBackgroundRect(pageScene, pageBackgroundFill), pageScene.addObjects(objects), pageScene.initTransformer(), objects.forEach((object) => {
+      pageScene.attachTransformerTo(object);
+    });
+    const transformer = pageScene.getTransformer();
+    return transformer == null || transformer.changeEnd$.subscribe(() => {
+      this._thumbSceneRender(pageId, slide);
+    }), transformer == null || transformer.clearControl$.subscribe(() => {
+      this._thumbSceneRender(pageId, slide);
+    }), slide.addPageScene(pageScene), pageScene;
+  }
+  /**
+   * Get pageScene from Slide.
+   * @param pageId
+   * @returns {Scene, Engine, UnitModel} scene & engine & unit from renderContext
+   */
+  getPageRenderUnit(pageId) {
+    const pageScene = this._renderContext.mainComponent.getSubScenes().get(pageId), { engine, unit } = this._renderContext;
+    return {
+      scene: pageScene,
+      engine,
+      unit
+    };
+  }
+  createObjectToPage(element2, pageID) {
+    const { scene } = this.getPageRenderUnit(pageID);
+    if (!scene || !this._objectProvider)
+      return;
+    const object = this._objectProvider.convertToRenderObject(element2, scene);
+    if (object)
+      return scene.addObject(object), scene.attachTransformerTo(object), scene.getLayer().makeDirty(), object;
+  }
+  setObjectActiveByPage(obj, pageID) {
+    const { scene } = this.getPageRenderUnit(pageID);
+    if (!scene) return;
+    const transformer = scene.getTransformer();
+    transformer == null || transformer.activeAnObject(obj);
+  }
+  removeObjectById(id, pageID) {
+    const { scene } = this.getPageRenderUnit(pageID);
+    if (!scene) return;
+    scene.removeObject(id);
+    const transformer = scene.getTransformer();
+    transformer == null || transformer.clearControls();
+  }
+  appendPage() {
+    const model = this._getCurrUnitModel(), page = model.getBlankPage(), render2 = this._currentRender();
+    if (page == null || render2 == null || render2.mainComponent == null)
+      return;
+    const { id: pageId } = page, slide = render2.mainComponent, scene = this.createPageScene(pageId, page);
+    slide && scene && slide.addPageScene(scene), model.appendPage(page), model.setActivePage(page);
+  }
+}, __name(_a, "SlideRenderController"), _a);
+SlideRenderController = __decorateClass$9([
+  __decorateParam$9(1, Inject(Injector)),
+  __decorateParam$9(2, IUniverInstanceService),
+  __decorateParam$9(3, IRenderManagerService)
+], SlideRenderController);
+var __defProp$8 = Object.defineProperty, __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor, __decorateClass$8 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$8(target, key, result), result;
+}, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$8"), _a2;
+let CanvasView = (_a2 = class extends RxDisposable {
+  constructor(_renderManagerService) {
+    super(), this._renderManagerService = _renderManagerService;
+  }
+  _getSlideRenderControllerFromRenderUnit(unitId) {
+    return this._renderManagerService.getRenderById(unitId).with(SlideRenderController);
+  }
+  createThumbs(unitId) {
+    this._getSlideRenderControllerFromRenderUnit(unitId).createThumbs();
+  }
+  activePage(pageId, unitId) {
+    this._getSlideRenderControllerFromRenderUnit(unitId).activePage(pageId);
+  }
+  getRenderUnitByPageId(pageId, unitId) {
+    return this._getSlideRenderControllerFromRenderUnit(unitId).getPageRenderUnit(pageId);
+  }
+  createObjectToPage(element2, pageID, unitId) {
+    return this._getSlideRenderControllerFromRenderUnit(unitId).createObjectToPage(element2, pageID);
+  }
+  setObjectActiveByPage(obj, pageID, unitId) {
+    return this._getSlideRenderControllerFromRenderUnit(unitId).setObjectActiveByPage(obj, pageID);
+  }
+  removeObjectById(id, pageID, unitId) {
+    this._getSlideRenderControllerFromRenderUnit(unitId).removeObjectById(id, pageID);
+  }
+  /**
+   * append blank page
+   */
+  appendPage(unitId) {
+    this._getSlideRenderControllerFromRenderUnit(unitId).appendPage();
+  }
+}, __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 _a9, _b;
-    const canvasView = accessor.get(CanvasView), model = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), id = (_a9 = model == null ? void 0 : model.getActivePage()) == null ? void 0 : _a9.id;
-    if (!id) return !1;
-    const transformer = (_b = canvasView.getRenderUnitByPageId(id).scene) == null ? void 0 : _b.getTransformer();
-    return transformer && transformer.clearControls(), canvasView.activePage(params.id), !0;
+    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 = {
   id: "slide.operation.delete-element",
   type: CommandType.OPERATION,
   handler: /* @__PURE__ */ __name((accessor, params) => {
     if (!(params != null && params.id)) return !1;
-    const slideData = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+    const unitId = params.unitId, slideData = accessor.get(IUniverInstanceService).getUnit(unitId);
     if (!slideData) return !1;
     const activePage = slideData.getActivePage();
-    return delete activePage.pageElements[params.id], slideData.updatePage(activePage.id, activePage), accessor.get(CanvasView).removeObjectById(params.id, activePage.id), !0;
+    return delete activePage.pageElements[params.id], slideData.updatePage(activePage.id, activePage), accessor.get(CanvasView).removeObjectById(params.id, activePage.id, unitId), !0;
   }, "handler")
 }, InsertSlideFloatImageOperation = {
   id: "slide.operation.insert-float-image",
   type: CommandType.OPERATION,
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a9;
+    var _a11;
     const imageIoService = accessor.get(IImageIoService);
-    if (!((_a9 = params == null ? void 0 : params.files) != null && _a9.length)) return !1;
+    if (!((_a11 = params == null ? void 0 : params.files) != null && _a11.length)) return !1;
     const imageParam = await imageIoService.saveImage(params.files[0]);
     if (!imageParam) return !1;
-    const { imageId, imageSourceType, source, base64Cache } = imageParam, { width, height, image } = await getImageSize(base64Cache || ""), data = {
+    const { imageId, imageSourceType, source, base64Cache } = imageParam, { width, height, image } = await getImageSize(base64Cache || ""), univerInstanceService = accessor.get(IUniverInstanceService), unitId = params.unitId, 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: 20,
+      zIndex: maxIndex + 1,
       left: 0,
       top: 0,
       width,
@@ -187,12 +474,10 @@ const ActivateSlidePageOperation = {
           image
         }
       }
-    }, slideData = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
-    if (!slideData) return !1;
-    const activePage = slideData.getActivePage();
+    };
     activePage.pageElements[imageId] = data, slideData.updatePage(activePage.id, activePage);
-    const canvasview = accessor.get(CanvasView), sceneObject = canvasview.createObjectToPage(data, activePage.id);
-    return sceneObject && canvasview.setObjectActiveByPage(sceneObject, activePage.id), !0;
+    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 = {};
@@ -223,7 +508,7 @@ const UpdateSlideElementOperation = {
   id: "slide.operation.update-element",
   type: CommandType.OPERATION,
   handler: /* @__PURE__ */ __name((accessor, params) => {
-    const { oKey, props } = params, slideData = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+    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;
@@ -245,7 +530,7 @@ const UpdateSlideElementOperation = {
   slidePanelColorPicker
 };
 function ArrangePanel$1(props) {
-  const { unitId } = props, localeService = useDependency(LocaleService), canvasView = useDependency(CanvasView), commandService = useDependency(ICommandService), page = canvasView.getRenderUnitByPageId(unitId), scene = page == null ? void 0 : page.scene;
+  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;
@@ -260,6 +545,7 @@ function ArrangePanel$1(props) {
     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
@@ -312,7 +598,7 @@ function ArrangePanel$1(props) {
 }
 __name(ArrangePanel$1, "ArrangePanel$1");
 function TransformPanel(props) {
-  const { unitId } = props, localeService = useDependency(LocaleService), canvasView = useDependency(CanvasView), commandService = useDependency(ICommandService), page = canvasView.getRenderUnitByPageId(unitId), scene = page == null ? void 0 : page.scene;
+  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;
@@ -346,6 +632,7 @@ function TransformPanel(props) {
   }, []);
   function handleWidthChange(val) {
     !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      pageId,
       oKey: object.oKey,
       props: {
         width: val
@@ -355,6 +642,7 @@ function TransformPanel(props) {
   __name(handleWidthChange, "handleWidthChange");
   function handleHeightChange(val) {
     !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      pageId,
       oKey: object.oKey,
       props: {
         height: val
@@ -364,6 +652,7 @@ function TransformPanel(props) {
   __name(handleHeightChange, "handleHeightChange");
   function handleXChange(val) {
     !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      pageId,
       oKey: object.oKey,
       props: {
         left: val
@@ -373,6 +662,7 @@ function TransformPanel(props) {
   __name(handleXChange, "handleXChange");
   function handleYChange(val) {
     !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      pageId,
       oKey: object.oKey,
       props: {
         right: val
@@ -382,6 +672,7 @@ function TransformPanel(props) {
   __name(handleYChange, "handleYChange");
   function handleChangeRotation(val) {
     !val || !object || (commandService.executeCommand(UpdateSlideElementOperation.id, {
+      pageId,
       oKey: object.oKey,
       props: {
         angle: val
@@ -476,18 +767,19 @@ function TransformPanel(props) {
 }
 __name(TransformPanel, "TransformPanel");
 function ArrangePanel(props) {
-  var _a9, _b;
-  const { unitId } = props, localeService = useDependency(LocaleService), canvasView = useDependency(CanvasView), commandService = useDependency(ICommandService), page = canvasView.getRenderUnitByPageId(unitId), scene = page == null ? void 0 : page.scene;
+  var _a11, _b;
+  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 [color, setColor] = React.useState((_b = (_a9 = object.fill) == null ? void 0 : _a9.toString()) != null ? _b : "");
+  const [color, setColor] = React.useState((_b = (_a11 = object.fill) == null ? void 0 : _a11.toString()) != null ? _b : "");
   function handleChangeColor(color2) {
     object == null || object.setProps({
       fill: color2
     }), commandService.executeCommand(UpdateSlideElementOperation.id, {
+      unitId,
       oKey: object == null ? void 0 : object.oKey,
       props: {
         shape: {
@@ -546,26 +838,39 @@ const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "un
   imageCommonPanelInput
 }, COMPONENT_SLIDE_SIDEBAR = "COMPONENT_SLIDE_SIDEBAR";
 function RectSidebar() {
-  var _a9, _b;
-  const univerInstanceService = useDependency(IUniverInstanceService), canvasView = useDependency(CanvasView), currentSlide = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pageId = (_a9 = currentSlide == null ? void 0 : currentSlide.getActivePage()) == null ? void 0 : _a9.id;
+  var _a11, _b, _c;
+  const univerInstanceService = useDependency(IUniverInstanceService), canvasView = useDependency(CanvasView), currentSlide = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pageId = (_a11 = currentSlide == null ? void 0 : currentSlide.getActivePage()) == null ? void 0 : _a11.id;
   if (!pageId) return null;
-  const transformer = (_b = canvasView.getRenderUnitByPageId(pageId).scene) == null ? void 0 : _b.getTransformer();
+  const transformer = (_b = canvasView.getRenderUnitByPageId(pageId, pageId).scene) == null ? void 0 : _b.getTransformer();
   if (!transformer) return null;
   const object = transformer.getSelectedObjectMap().values().next().value;
-  return object ? /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: styles$4.imageCommonPanel, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ArrangePanel$1, { unitId: pageId }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TransformPanel, { unitId: pageId }),
-    object.objectType === ObjectType.RECT && /* @__PURE__ */ jsxRuntimeExports.jsx(ArrangePanel, { unitId: pageId })
-  ] }) : null;
+  if (!object)
+    return null;
+  const unitId = ((_c = univerInstanceService.getFocusedUnit()) == null ? void 0 : _c.getUnitId()) || "";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: styles$4.imageCommonPanel, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ArrangePanel$1, { pageId, unitId }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TransformPanel, { pageId, unitId }),
+    object.objectType === ObjectType.RECT && /* @__PURE__ */ jsxRuntimeExports.jsx(ArrangePanel, { pageId, unitId })
+  ] });
 }
 __name(RectSidebar, "RectSidebar");
-const InsertSlideShapeRectangleOperation = {
+const InsertSlideShapeRectangleCommand = {
+  id: "slide.command.insert-float-shape",
+  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 commandService.executeCommand(InsertSlideShapeRectangleOperation.id, { unitId });
+  }, "handler")
+}, InsertSlideShapeRectangleOperation = {
   id: "slide.operation.insert-float-shape",
   type: CommandType.OPERATION,
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    const id = generateRandomId(6), data = {
+    const id = generateRandomId(6), univerInstanceService = accessor.get(IUniverInstanceService), unitId = params.unitId, 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,
-      zIndex: 20,
+      zIndex: maxIndex + 1,
       left: 378,
       top: 142,
       width: 250,
@@ -582,12 +887,10 @@ const InsertSlideShapeRectangleOperation = {
           }
         }
       }
-    }, slideData = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
-    if (!slideData) return !1;
-    const activePage = slideData.getActivePage();
+    };
     activePage.pageElements[id] = data, slideData.updatePage(activePage.id, activePage);
-    const canvasview = accessor.get(CanvasView), sceneObject = canvasview.createObjectToPage(data, activePage.id);
-    return sceneObject && canvasview.setObjectActiveByPage(sceneObject, activePage.id), !0;
+    const canvasview = accessor.get(CanvasView), sceneObject = canvasview.createObjectToPage(data, activePage.id, unitId);
+    return sceneObject && canvasview.setObjectActiveByPage(sceneObject, activePage.id, unitId), !0;
   }, "handler")
 }, ToggleSlideEditSidebarOperation = {
   id: "sidebar.operation.slide-shape",
@@ -603,13 +906,23 @@ const InsertSlideShapeRectangleOperation = {
       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 elementId = Tools.generateRandomId(6), defaultWidth = 220, defaultheight = 40, left = 230, top = 142, textContent = (params == null ? void 0 : params.text) || "A New Text", elementData = {
+    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: 2,
+      zIndex: maxIndex + 1,
       left,
       top,
       width: defaultWidth,
@@ -625,17 +938,15 @@ const InsertSlideShapeRectangleOperation = {
         },
         bl: 1
       }
-    }, slideData = accessor.get(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
-    if (!slideData) return !1;
-    const activePage = slideData.getActivePage();
+    };
     activePage.pageElements[elementId] = elementData, slideData.updatePage(activePage.id, activePage);
-    const canvasview = accessor.get(CanvasView), sceneObject = canvasview.createObjectToPage(elementData, activePage.id);
-    return sceneObject && canvasview.setObjectActiveByPage(sceneObject, activePage.id), !0;
+    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) => (accessor.get(CanvasView).createThumbs(), !0), "handler")
+  handler: /* @__PURE__ */ __name((accessor, params) => (accessor.get(CanvasView).createThumbs(params.unitId), !0), "handler")
 }, SetTextEditArrowOperation = {
   id: "slide.operation.edit-arrow",
   type: CommandType.OPERATION,
@@ -649,8 +960,8 @@ const InsertSlideShapeRectangleOperation = {
   btnContainer,
   btnContainerExpand
 }, SlideImagePopupMenu = /* @__PURE__ */ __name((props) => {
-  var _a9, _b;
-  const menuItems = (_b = (_a9 = props.popup) == null ? void 0 : _a9.extraProps) == null ? void 0 : _b.menuItems;
+  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(() => {
@@ -708,18 +1019,18 @@ const InsertSlideShapeRectangleOperation = {
 }, "SlideImagePopupMenu"), COMPONENT_SLIDE_IMAGE_POPUP_MENU = "COMPONENT_SLIDE_IMAGE_POPUP_MENU", uploadFileMenu = "univer-upload-file-menu", uploadFileMenuInput = "univer-upload-file-menu-input", styles$2 = {
   uploadFileMenu,
   uploadFileMenuInput
-}, COMPONENT_UPLOAD_FILE_MENU = "COMPONENT_UPLOAD_FILE_MENU";
+}, COMPONENT_UPLOAD_FILE_MENU = "SLIDE_COMPONENT_UPLOAD_FILE_MENU";
 var UploadFileType = /* @__PURE__ */ ((UploadFileType2) => (UploadFileType2[UploadFileType2.cellImage = 0] = "cellImage", UploadFileType2[UploadFileType2.floatImage = 1] = "floatImage", UploadFileType2))(UploadFileType || {});
 const UploadFileMenu = /* @__PURE__ */ __name((props) => {
-  const { type } = props, commandService = useDependency(ICommandService), fileInputRef = useRef(null), handleButtonClick = /* @__PURE__ */ __name(() => {
-    var _a9;
-    (_a9 = fileInputRef.current) == null || _a9.click();
+  const { type } = props, commandService = useDependency(ICommandService), univerInstanceService = useDependency(IUniverInstanceService), focused = useObservable(univerInstanceService.focused$), fileInputRef = useRef(null), handleButtonClick = /* @__PURE__ */ __name(() => {
+    var _a11;
+    (_a11 = fileInputRef.current) == null || _a11.click();
   }, "handleButtonClick"), imageAccept = DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace("image/", "")}`).join(","), handleFileChange = /* @__PURE__ */ __name((event) => {
     const fileList = event.target.files;
     if (fileList == null)
       return;
     const files = Array.from(fileList);
-    type === UploadFileType.floatImage && commandService.executeCommand(InsertSlideFloatImageOperation.id, { files }), fileInputRef.current && (fileInputRef.current.value = "");
+    type === UploadFileType.floatImage && commandService.executeCommand(InsertSlideFloatImageOperation.id, { files, unitId: focused }), fileInputRef.current && (fileInputRef.current.value = "");
   }, "handleFileChange");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: handleButtonClick, className: styles$2.uploadFileMenu, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "input",
@@ -770,7 +1081,7 @@ __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 = {
+), SLIDE_EDITOR_ID = createInternalEditorID("SLIDE_EDITOR"), slideEditorContainer = "univer-slide-editor-container", editorInput = "univer-editor-input", styles$1 = {
   slideEditorContainer,
   editorInput
 }, HIDDEN_EDITOR_POSITION$1 = -1e3, EDITOR_DEFAULT_POSITION = {
@@ -778,7 +1089,7 @@ const ISlideEditorManagerService = createIdentifier(
   height: 0,
   top: HIDDEN_EDITOR_POSITION$1,
   left: HIDDEN_EDITOR_POSITION$1
-}, EditorContainer = /* @__PURE__ */ __name(() => {
+}, SlideEditorContainer = /* @__PURE__ */ __name(() => {
   const [state, setState] = useState({
     ...EDITOR_DEFAULT_POSITION
   }), slideEditorManagerService = useDependency(ISlideEditorManagerService), editorService = useDependency(IEditorService), contextService = useDependency(IContextService), disableAutoFocus = useObservable(
@@ -787,7 +1098,7 @@ const ISlideEditorManagerService = createIdentifier(
     void 0,
     [contextService, DISABLE_AUTO_FOCUS_KEY]
   ), snapshot = {
-    id: DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
+    id: SLIDE_EDITOR_ID,
     body: {
       dataStream: `${DEFAULT_EMPTY_DOCUMENT_VALUE}`,
       textRuns: [],
@@ -823,7 +1134,7 @@ const ISlideEditorManagerService = createIdentifier(
           left: startX + FIX_ONE_PIXEL_BLUR_OFFSET,
           top: startY + FIX_ONE_PIXEL_BLUR_OFFSET
         });
-        const editor = editorService.getEditor(DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
+        const editor = editorService.getEditor(SLIDE_EDITOR_ID);
         if (editor == null)
           return;
         const { left, top, width, height } = editor.getBoundingClientRect();
@@ -845,7 +1156,7 @@ const ISlideEditorManagerService = createIdentifier(
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         TextEditor,
         {
-          id: DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
+          id: SLIDE_EDITOR_ID,
           className: styles$1.editorInput,
           snapshot,
           cancelDefaultResizeListener: !1,
@@ -855,12 +1166,12 @@ const ISlideEditorManagerService = createIdentifier(
       )
     }
   );
-}, "EditorContainer"), AppendSlideOperation = {
+}, "SlideEditorContainer"), AppendSlideOperation = {
   id: "slide.operation.append-slide",
   type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name((accessor) => {
-    const univerInstanceService = accessor.get(IUniverInstanceService), canvasView = accessor.get(CanvasView);
-    return univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE) ? (canvasView.appendPage(), !0) : !1;
+  handler: /* @__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,
@@ -872,17 +1183,17 @@ const ISlideEditorManagerService = createIdentifier(
   slideAddButton
 };
 function SlideSideBar() {
-  var _a9, _b;
+  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 = (_a9 = currentSlide == null ? void 0 : currentSlide.getActivePage()) == null ? void 0 : _a9.id) != null ? _b : 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 _a10;
-      const id = (_a10 = page == null ? void 0 : page.id) != null ? _a10 : null;
+      var _a12;
+      const id = (_a12 = page == null ? void 0 : page.id) != null ? _a12 : null;
       id && setActivatePageId(id);
     });
     return () => {
@@ -890,18 +1201,18 @@ function SlideSideBar() {
     };
   }, []), useEffect(() => {
     divRefs.forEach((ref, index) => {
-      var _a10;
+      var _a12;
       if (ref.current) {
         const slide = slideList[index];
-        (_a10 = renderManagerService.getRenderById(slide.id)) == null || _a10.engine.setContainer(ref.current);
+        (_a12 = renderManagerService.getRenderById(slide.id)) == null || _a12.engine.setContainer(ref.current);
       }
-    }), divRefs.length > 0 && commandService.syncExecuteCommand(SetSlidePageThumbOperation.id);
-  }, [divRefs]);
+    }), 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 });
-  }, [commandService]), handleAppendSlide = useCallback(() => {
-    commandService.syncExecuteCommand(AppendSlideOperation.id);
-  }, [commandService]);
+    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(
@@ -967,7 +1278,7 @@ function SlideShapeMenuFactory(accessor) {
 __name(SlideShapeMenuFactory, "SlideShapeMenuFactory");
 function UploadSlideFloatShapeMenuFactory(_accessor) {
   return {
-    id: InsertSlideShapeRectangleOperation.id,
+    id: InsertSlideShapeRectangleCommand.id,
     title: "slide.shape.insert.rectangle",
     type: MenuItemType.BUTTON,
     positions: [SHAPE_MENU_ID],
@@ -1024,7 +1335,7 @@ const EditorDeleteLeftShortcut = {
 }, TEXT_ICON_ID = "text-single";
 function SlideAddTextMenuItemFactory(_accessor) {
   return {
-    id: SlideAddTextOperation.id,
+    id: SlideAddTextCommand.id,
     group: MenuGroup.TOOLBAR_FORMULAS_INSERT,
     type: MenuItemType.BUTTON,
     icon: TEXT_ICON_ID,
@@ -1038,8 +1349,8 @@ var __defProp$7 = Object.defineProperty, __getOwnPropDesc$7 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$7(target, key, result), result;
-}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a;
-let SlidesUIController = (_a = class extends Disposable {
+}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a3;
+let SlidesUIController = (_a3 = class extends Disposable {
   constructor(_config, _injector, _menuService, _componentManager, _uiPartsService, _commandService, _shortcutService) {
     super(), this._config = _config, this._injector = _injector, this._menuService = _menuService, this._componentManager = _componentManager, this._uiPartsService = _uiPartsService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._initCommands(), this._initCustomComponents(), this._initUIComponents(), this._initMenus(), this._initShortcuts();
   }
@@ -1066,7 +1377,9 @@ let SlidesUIController = (_a = class extends Disposable {
       SetSlidePageThumbOperation,
       InsertSlideFloatImageOperation,
       SlideAddTextOperation,
+      SlideAddTextCommand,
       InsertSlideShapeRectangleOperation,
+      InsertSlideShapeRectangleCommand,
       ToggleSlideEditSidebarOperation,
       DeleteSlideElementOperation,
       UpdateSlideElementOperation,
@@ -1078,7 +1391,7 @@ let SlidesUIController = (_a = class extends Disposable {
     this.disposeWithMe(
       this._uiPartsService.registerComponent(BuiltInUIPart.LEFT_SIDEBAR, () => connectInjector(SlideSideBar, this._injector))
     ), this.disposeWithMe(
-      this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(EditorContainer, this._injector))
+      this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(SlideEditorContainer, this._injector))
     );
   }
   _initShortcuts() {
@@ -1089,7 +1402,7 @@ let SlidesUIController = (_a = class extends Disposable {
       this.disposeWithMe(this._shortcutService.registerShortcut(item));
     });
   }
-}, __name(_a, "SlidesUIController"), _a);
+}, __name(_a3, "SlidesUIController"), _a3);
 SlidesUIController = __decorateClass$7([
   OnLifecycle(LifecycleStages.Ready, SlidesUIController),
   __decorateParam$7(1, Inject(Injector)),
@@ -1104,170 +1417,6 @@ var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPrope
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$6(target, key, result), result;
 }, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6");
-const ISlideEditorBridgeService = createIdentifier("univer.slide-editor-bridge.service");
-var _a2;
-let SlideEditorBridgeService = (_a2 = class extends Disposable {
-  constructor(_editorService, _contextService, _renderManagerService) {
-    super();
-    __publicField(this, "_editorUnitId", DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
-    __publicField(this, "_isForceKeepVisible", !1);
-    __publicField(this, "_editorIsDirty", !1);
-    __publicField(this, "_currentEditRectState", null);
-    __publicField(this, "_currentEditRectState$", new BehaviorSubject(null));
-    __publicField(this, "currentEditRectState$", this._currentEditRectState$.asObservable());
-    __publicField(this, "_visible", {
-      visible: !1,
-      eventType: DeviceInputEventType.Dblclick,
-      unitId: ""
-    });
-    __publicField(this, "_visible$", new BehaviorSubject(this._visible));
-    __publicField(this, "visible$", this._visible$.asObservable());
-    __publicField(this, "_afterVisible$", new BehaviorSubject(this._visible));
-    __publicField(this, "afterVisible$", this._afterVisible$.asObservable());
-    __publicField(this, "_currentEditRectInfo");
-    this._editorService = _editorService, this._contextService = _contextService, this._renderManagerService = _renderManagerService;
-  }
-  dispose() {
-    super.dispose();
-  }
-  getEditorRect() {
-    return this._currentEditRectInfo;
-  }
-  /**
-   * 1st part of startEditing.
-   * editorBridgeRenderController@startEditing ---> editorBridgeRenderController@_updateEditor
-   * @editorInfo editorInfo
-   */
-  setEditorRect(editorInfo) {
-    this._currentEditRectInfo = editorInfo, this._editorService.getFocusEditor() || (this._editorService.focus(DOCS_NORMAL_EDITOR_UNIT_ID_KEY), this._contextService.setContextValue(EDITOR_ACTIVATED, !1), this._contextService.setContextValue(FOCUSING_EDITOR_STANDALONE, !1), this._contextService.setContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, !1));
-    const editRectState = this.getEditRectState();
-    this._currentEditRectState = editRectState, this._currentEditRectState$.next(editRectState);
-  }
-  changeVisible(param) {
-    this._visible = param, param.visible && (this._editorIsDirty = !1), this._visible$.next(this._visible), this._afterVisible$.next(this._visible);
-  }
-  /**
-   * get info from _currentEditRectInfo
-   *
-   * invoked by slide-editing.render-controller.ts@_handleEditorVisible
-   * && this@setEditorRect
-   */
-  getEditRectState() {
-    const editorUnitId = DOCS_NORMAL_EDITOR_UNIT_ID_KEY, editorRectInfo = this._currentEditRectInfo, unitId = editorRectInfo.unitId, docData = editorRectInfo.richTextObj.documentData;
-    docData.id = editorUnitId, docData.documentStyle = {
-      ...docData.documentStyle,
-      pageSize: { width: editorRectInfo.richTextObj.width, height: 1 / 0 }
-    };
-    const documentLayoutObject = {
-      documentModel: new DocumentDataModel(docData),
-      fontString: "document",
-      textRotation: { a: 0, v: 0 },
-      wrapStrategy: 0,
-      verticalAlign: VerticalAlign.TOP,
-      horizontalAlign: HorizontalAlign.LEFT,
-      paddingData: { t: 0, b: 1, l: 2, r: 2 }
-    }, editorWidth = editorRectInfo.richTextObj.width, editorHeight = editorRectInfo.richTextObj.height, left = editorRectInfo.richTextObj.left, top = editorRectInfo.richTextObj.top, canvasOffset = {
-      left: 0,
-      top: 0
-    }, renderUnit = this._renderManagerService.getRenderById(unitId), mainScene = renderUnit == null ? void 0 : renderUnit.scene, mainViewport = mainScene == null ? void 0 : mainScene.getViewport(SLIDE_KEY.VIEW), slideMainRect = mainScene == null ? void 0 : mainScene.getObject(SLIDE_KEY.COMPONENT), slidePos = {
-      x: (slideMainRect == null ? void 0 : slideMainRect.left) || 0,
-      y: (slideMainRect == null ? void 0 : slideMainRect.top) || 0
-    }, scrollX = (mainViewport == null ? void 0 : mainViewport.viewportScrollX) || 0, scrollY = (mainViewport == null ? void 0 : mainViewport.viewportScrollY) || 0;
-    return canvasOffset.left = slidePos.x - scrollX, canvasOffset.top = slidePos.y - scrollY, {
-      position: {
-        startX: left,
-        startY: top,
-        endX: left + editorWidth,
-        endY: top + editorHeight
-      },
-      scaleX: 1,
-      scaleY: 1,
-      slideCardOffset: canvasOffset,
-      unitId,
-      editorUnitId,
-      documentLayoutObject
-    };
-  }
-  changeEditorDirty(dirtyStatus) {
-    this._editorIsDirty = dirtyStatus;
-  }
-  isVisible() {
-    return this._visible;
-  }
-  getEditorDirty() {
-    return this._editorIsDirty;
-  }
-  getCurrentEditorId() {
-    return this._editorUnitId;
-  }
-  /**
-   * @deprecated
-   */
-  genDocData(target) {
-    const editorUnitId = this.getCurrentEditorId(), content = target.text, fontSize = target.fs;
-    return {
-      id: editorUnitId,
-      body: {
-        dataStream: `${content}\r
-`,
-        textRuns: [{ st: 0, ed: content.length }],
-        paragraphs: [{
-          paragraphStyle: {
-            // no use
-            // textStyle: { fs: 30 },
-            // horizontalAlign: HorizontalAlign.CENTER,
-            // verticalAlign: VerticalAlign.MIDDLE,
-          },
-          startIndex: content.length + 1
-        }],
-        sectionBreaks: [{ startIndex: content.length + 2 }]
-      },
-      documentStyle: {
-        marginBottom: 0,
-        marginLeft: 0,
-        marginRight: 0,
-        marginTop: 0,
-        pageSize: { width: 1 / 0, height: 1 / 0 },
-        textStyle: { fs: fontSize },
-        renderConfig: {
-          // horizontalAlign: HorizontalAlign.CENTER,
-          verticalAlign: VerticalAlign.MIDDLE,
-          centerAngle: 0,
-          vertexAngle: 0,
-          wrapStrategy: 0
-        }
-      },
-      drawings: {},
-      drawingsOrder: [],
-      settings: { zoomRatio: 1 }
-    };
-  }
-}, __name(_a2, "SlideEditorBridgeService"), _a2);
-SlideEditorBridgeService = __decorateClass$6([
-  __decorateParam$6(0, IEditorService),
-  __decorateParam$6(1, IContextService),
-  __decorateParam$6(2, IRenderManagerService)
-], SlideEditorBridgeService);
-var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor, __decorateClass$5 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$5(target, key, result), result;
-}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5"), _a3;
-let SlideRenderController = (_a3 = class extends RxDisposable {
-  constructor(_context, _editorBridgeService) {
-    super(), this._context = _context, this._editorBridgeService = _editorBridgeService;
-  }
-  dispose() {
-  }
-}, __name(_a3, "SlideRenderController"), _a3);
-SlideRenderController = __decorateClass$5([
-  __decorateParam$5(1, Inject(ISlideEditorBridgeService))
-], SlideRenderController);
-var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$4(target, key, result), result;
-}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4");
 function transformBound2OffsetBound(originBound, scene) {
   const topLeft = transformPosition2Offset(originBound.left, originBound.top, scene), bottomRight = transformPosition2Offset(originBound.right, originBound.bottom, scene);
   return {
@@ -1299,8 +1448,8 @@ let SlideCanvasPopMangerService = (_a4 = class extends Disposable {
   }
   _createObjectPositionObserver(targetObject, currentRender) {
     const position = (/* @__PURE__ */ __name(() => {
-      var _a9, _b, _c, _d;
-      const { scene, engine } = currentRender, { left, top, width, height } = targetObject, horizontalOffset = (scene.width - ((_b = (_a9 = currentRender.mainComponent) == null ? void 0 : _a9.width) != null ? _b : 0)) / 2, verticalOffset = (scene.height - ((_d = (_c = currentRender.mainComponent) == null ? void 0 : _c.height) != null ? _d : 0)) / 2, bound = {
+      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,
@@ -1331,7 +1480,8 @@ let SlideCanvasPopMangerService = (_a4 = class extends Disposable {
       unitId,
       subUnitId: "default",
       anchorRect: position,
-      anchorRect$: position$
+      anchorRect$: position$,
+      canvasElement: currentRender.engine.getCanvasElement()
     });
     return {
       dispose: /* @__PURE__ */ __name(() => {
@@ -1340,17 +1490,17 @@ let SlideCanvasPopMangerService = (_a4 = class extends Disposable {
     };
   }
 }, __name(_a4, "SlideCanvasPopMangerService"), _a4);
-SlideCanvasPopMangerService = __decorateClass$4([
-  __decorateParam$4(0, Inject(ICanvasPopupService)),
-  __decorateParam$4(1, IRenderManagerService),
-  __decorateParam$4(2, IUniverInstanceService),
-  __decorateParam$4(3, ICommandService)
+SlideCanvasPopMangerService = __decorateClass$6([
+  __decorateParam$6(0, Inject(ICanvasPopupService)),
+  __decorateParam$6(1, IRenderManagerService),
+  __decorateParam$6(2, IUniverInstanceService),
+  __decorateParam$6(3, ICommandService)
 ], SlideCanvasPopMangerService);
-var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+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$3(target, key, result), result;
-}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a5;
+  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();
@@ -1370,12 +1520,13 @@ let SlidePopupMenuController = (_a5 = class extends RxDisposable {
   }
   _hasCropObject(scene) {
   }
+  // eslint-disable-next-line max-lines-per-function
   _popupMenuListener(unitId) {
-    var _a9;
-    const model = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pages = (_a9 = model == null ? void 0 : model.getPages()) != null ? _a9 : {};
+    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 _a10;
-      const transformer = (_a10 = this._canvasView.getRenderUnitByPageId(pageId).scene) == null ? void 0 : _a10.getTransformer();
+      var _a12;
+      const transformer = (_a12 = this._canvasView.getRenderUnitByPageId(pageId, unitId).scene) == null ? void 0 : _a12.getTransformer();
       if (!transformer) return;
       let singletonPopupDisposer;
       this.disposeWithMe(
@@ -1410,6 +1561,22 @@ let SlidePopupMenuController = (_a5 = class extends RxDisposable {
       ), 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
+            }
+          });
         })
       );
     });
@@ -1429,81 +1596,238 @@ let SlidePopupMenuController = (_a5 = class extends RxDisposable {
       index: 5,
       commandId: DeleteSlideElementOperation.id,
       commandParams: {
-        id: oKey
+        id: oKey,
+        unitId
       },
       disable: !1
     }];
   }
 }, __name(_a5, "SlidePopupMenuController"), _a5);
-SlidePopupMenuController = __decorateClass$3([
+SlidePopupMenuController = __decorateClass$5([
   OnLifecycle(LifecycleStages.Steady, SlidePopupMenuController),
-  __decorateParam$3(0, Inject(SlideCanvasPopMangerService)),
-  __decorateParam$3(1, IRenderManagerService),
-  __decorateParam$3(2, IUniverInstanceService),
-  __decorateParam$3(3, IContextService),
-  __decorateParam$3(4, Inject(CanvasView)),
-  __decorateParam$3(5, ISidebarService),
-  __decorateParam$3(6, ICommandService)
+  __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$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--)
+var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$2(target, key, result), result;
-}, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$2"), _a6;
-let SlideEditorBridgeRenderController = (_a6 = class extends RxDisposable {
-  constructor(_renderContext, _contextService, _instanceSrv, _commandService, _editorBridgeService, _textSelectionManagerService, _textSelectionRenderManager, _canvasView) {
+  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");
+var _a6;
+let SlideEditorBridgeService = (_a6 = 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: ""
+    });
+    __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 }
+    };
+    const documentLayoutObject = {
+      documentModel: new DocumentDataModel(docData),
+      fontString: "document",
+      textRotation: { a: 0, v: 0 },
+      wrapStrategy: 0,
+      verticalAlign: VerticalAlign.TOP,
+      horizontalAlign: HorizontalAlign.LEFT,
+      paddingData: { t: 0, b: 1, l: 2, r: 2 }
+    }, editorWidth = editorRectInfo.richTextObj.width, editorHeight = editorRectInfo.richTextObj.height, left = editorRectInfo.richTextObj.left, top = editorRectInfo.richTextObj.top, canvasOffset = {
+      left: 0,
+      top: 0
+    }, renderUnit = this._renderManagerService.getRenderById(unitId), mainScene = renderUnit == null ? void 0 : renderUnit.scene, mainViewport = mainScene == null ? void 0 : mainScene.getViewport(SLIDE_KEY.VIEW), slideMainRect = mainScene == null ? void 0 : mainScene.getObject(SLIDE_KEY.COMPONENT), slidePos = {
+      x: (slideMainRect == null ? void 0 : slideMainRect.left) || 0,
+      y: (slideMainRect == null ? void 0 : slideMainRect.top) || 0
+    }, scrollX = (mainViewport == null ? void 0 : mainViewport.viewportScrollX) || 0, scrollY = (mainViewport == null ? void 0 : mainViewport.viewportScrollY) || 0;
+    return canvasOffset.left = slidePos.x - scrollX, canvasOffset.top = slidePos.y - scrollY, {
+      position: {
+        startX: left,
+        startY: top,
+        endX: left + editorWidth,
+        endY: top + editorHeight
+      },
+      scaleX: 1,
+      scaleY: 1,
+      slideCardOffset: canvasOffset,
+      unitId,
+      editorUnitId,
+      documentLayoutObject
+    };
+  }
+  changeEditorDirty(dirtyStatus) {
+    this._editorIsDirty = dirtyStatus;
+  }
+  isVisible() {
+    return this._visibleParam.visible;
+  }
+  getEditorDirty() {
+    return this._editorIsDirty;
+  }
+  getCurrentEditorId() {
+    return this._editorUnitId;
+  }
+  /**
+   * @deprecated
+   */
+  genDocData(target) {
+    const editorUnitId = this.getCurrentEditorId(), content = target.text, fontSize = target.fs;
+    return {
+      id: editorUnitId,
+      body: {
+        dataStream: `${content}\r
+`,
+        textRuns: [{ st: 0, ed: content.length }],
+        paragraphs: [{
+          paragraphStyle: {
+            // no use
+            // textStyle: { fs: 30 },
+            // horizontalAlign: HorizontalAlign.CENTER,
+            // verticalAlign: VerticalAlign.MIDDLE,
+          },
+          startIndex: content.length + 1
+        }],
+        sectionBreaks: [{ startIndex: content.length + 2 }]
+      },
+      documentStyle: {
+        marginBottom: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        marginTop: 0,
+        pageSize: { width: 1 / 0, height: 1 / 0 },
+        textStyle: { fs: fontSize },
+        renderConfig: {
+          // horizontalAlign: HorizontalAlign.CENTER,
+          verticalAlign: VerticalAlign.MIDDLE,
+          centerAngle: 0,
+          vertexAngle: 0,
+          wrapStrategy: 0
+        }
+      },
+      drawings: {},
+      drawingsOrder: [],
+      settings: { zoomRatio: 1 }
+    };
+  }
+}, __name(_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.
      */
-    __publicField(this, "_cursorChange", 0);
+    // private _cursorChange: CursorChange = CursorChange.InitialState;
     /** If the corresponding unit is active and prepared for editing. */
-    __publicField(this, "_isUnitEditing", !1);
+    // private _isUnitEditing = false;
     __publicField(this, "setSlideTextEditor$", new Subject());
     __publicField(this, "_curRichText", null);
-    this._renderContext = _renderContext, this._contextService = _contextService, this._instanceSrv = _instanceSrv, this._commandService = _commandService, this._editorBridgeService = _editorBridgeService, this._textSelectionManagerService = _textSelectionManagerService, this._textSelectionRenderManager = _textSelectionRenderManager, this._canvasView = _canvasView, Promise.resolve().then(() => this._init());
+    __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._initSubjectListener(d), this._initEventListener(d), d;
+    return this._initEventListener(d), d;
   }
-  _initSubjectListener(d) {
+  _disposeCurrent() {
+    var _a11;
+    (_a11 = this._d) == null || _a11.dispose(), this._d = null;
   }
-  _setEditorRect(targetObject) {
+  _setEditorRect(pageId, targetObject) {
     this._curRichText = targetObject;
     const { scene, engine } = this._renderContext, unitId = this._renderContext.unitId, setEditorRect = {
       scene,
       engine,
       unitId,
-      pageId: "",
+      pageId,
       richTextObj: targetObject
     };
     this._editorBridgeService.setEditorRect(setEditorRect);
   }
   _initEventListener(d) {
-    var _a9;
-    const model = this._instanceSrv.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE), pagesMap = (_a9 = model == null ? void 0 : model.getPages()) != null ? _a9 : {}, pages = Object.values(pagesMap);
-    for (let i = 0; i < pages.length; i++) {
-      const page = pages[i], { scene } = this._canvasView.getRenderUnitByPageId(page.id);
-      if (!scene) break;
+    const listenersForPageScene = /* @__PURE__ */ __name((scene) => {
       const transformer = scene.getTransformer();
-      if (!transformer) break;
-      d.add(transformer.clearControl$.subscribe(() => {
-        this.setEditorVisible(!1);
+      transformer && (d.add(transformer.clearControl$.subscribe(() => {
+        this.setEditorVisible(!1), this.pickOtherObjects();
       })), d.add(transformer.createControl$.subscribe(() => {
         this.setEditorVisible(!1);
-      })), d.add(transformer.changeStart$.subscribe((param) => {
-        const target = param.target;
-        target && (target === this._curRichText || this.pickOtherObjects());
       })), d.add(scene.onDblclick$.subscribeEvent(() => {
         transformer.clearControls();
         const object = transformer.getSelectedObjectMap().values().next().value;
-        object && (object.objectType !== ObjectType.RICH_TEXT ? this.pickOtherObjects() : this.startEditing(object));
-      }));
+        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.setEditorVisible(!1), this.endEditing();
+    this.endEditing();
   }
   /**
    * invoked when picking other object.
@@ -1511,10 +1835,28 @@ let SlideEditorBridgeRenderController = (_a6 = class extends RxDisposable {
    * 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._curRichText = null;
+    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 ？？？？
@@ -1523,55 +1865,59 @@ let SlideEditorBridgeRenderController = (_a6 = class extends RxDisposable {
    * TODO @lumixraku need scale param
    * @param target
    */
-  startEditing(target) {
-    this._setEditorRect(target), this.setEditorVisible(!0);
+  startEditing(pageId, target) {
+    this._setEditorRect(pageId, target), this.setEditorVisible(!0);
   }
   setEditorVisible(visible) {
-    var _a9, _b;
-    visible ? (_a9 = this._curRichText) == null || _a9.hide() : (_b = this._curRichText) == null || _b.show();
+    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: 3, unitId });
-  }
-}, __name(_a6, "SlideEditorBridgeRenderController"), _a6);
-SlideEditorBridgeRenderController = __decorateClass$2([
-  __decorateParam$2(1, IContextService),
-  __decorateParam$2(2, IUniverInstanceService),
-  __decorateParam$2(3, ICommandService),
-  __decorateParam$2(4, Inject(ISlideEditorBridgeService)),
-  __decorateParam$2(5, Inject(TextSelectionManagerService)),
-  __decorateParam$2(6, ITextSelectionRenderManager),
-  __decorateParam$2(7, Inject(CanvasView))
+    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 __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--)
+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$1(target, key, result), result;
-}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1");
+  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 _a7;
-let SlideEditingRenderController = (_a7 = class extends Disposable {
-  constructor(_renderContext, _layoutService, _undoRedoService, _contextService, _instanceSrv, _renderManagerService, _editorBridgeService, _cellEditorManagerService, _textSelectionRenderManager, _textSelectionManagerService, _commandService, _localService, _editorService, _resourceLoaderService) {
+var _a8;
+let SlideEditingRenderController = (_a8 = class extends Disposable {
+  constructor(_renderContext, _layoutService, _undoRedoService, _contextService, _instanceSrv, _renderManagerService, _editorBridgeService, _cellEditorManagerService, _textSelectionRenderManager, _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", 0);
+    __publicField(this, "_cursorChange", CursorChange.InitialState);
     /** If the corresponding unit is active and prepared for editing. */
     __publicField(this, "_isUnitEditing", !1);
-    // private _workbookSelections: WorkbookSelections;
     __publicField(this, "_d");
-    this._renderContext = _renderContext, this._layoutService = _layoutService, this._undoRedoService = _undoRedoService, this._contextService = _contextService, this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, this._editorBridgeService = _editorBridgeService, this._cellEditorManagerService = _cellEditorManagerService, this._textSelectionRenderManager = _textSelectionRenderManager, this._textSelectionManagerService = _textSelectionManagerService, this._commandService = _commandService, this._localService = _localService, this._editorService = _editorService, this._resourceLoaderService = _resourceLoaderService, this._d = this._init(), this._initEditorVisibilityListener();
+    this._renderContext = _renderContext, this._layoutService = _layoutService, this._undoRedoService = _undoRedoService, this._contextService = _contextService, this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, this._editorBridgeService = _editorBridgeService, this._cellEditorManagerService = _cellEditorManagerService, this._textSelectionRenderManager = _textSelectionRenderManager, this._textSelectionManagerService = _textSelectionManagerService, this._commandService = _commandService, this._localService = _localService, this._editorService = _editorService, this.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 _a9;
-    (_a9 = this._d) == null || _a9.dispose(), this._d = null;
+    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), this._cursorStateListener(d), d;
+    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) => {
@@ -1584,12 +1930,12 @@ let SlideEditingRenderController = (_a7 = class extends Disposable {
     }));
   }
   _getEditorSkeleton(editorId) {
-    var _a9;
-    return (_a9 = this._renderManagerService.getRenderById(editorId)) == null ? void 0 : _a9.with(DocSkeletonManagerService).getSkeleton();
+    var _a11;
+    return (_a11 = this._renderManagerService.getRenderById(editorId)) == null ? void 0 : _a11.with(DocSkeletonManagerService).getSkeleton();
   }
   _getEditorViewModel(editorId) {
-    var _a9;
-    return (_a9 = this._renderManagerService.getRenderById(editorId)) == null ? void 0 : _a9.with(DocSkeletonManagerService).getViewModel();
+    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(() => {
@@ -1617,16 +1963,7 @@ let SlideEditingRenderController = (_a7 = class extends Disposable {
     }));
   }
   /**
-   * set size and pos of editing area
-   * invoked by _handleEditorVisible
-   *
-   * size & pos derives from slide-editor-bridge.service.ts@getEditRectState.position
-   *
-   * set pos of editing area
-   * EditorContainer.tsx cellEditorManagerService.setFocus(true) -->
-   * _focus$.next --> editingRenderController -->
-   * _textSelectionRenderManager.sync() --> _updateInputPosition --> activate(left, top)
-   *
+   * Set size and pos of editing area.
    * @param positionFromEditRectState
    * @param canvasOffset
    * @param documentSkeleton
@@ -1686,7 +2023,7 @@ let SlideEditingRenderController = (_a7 = class extends Disposable {
    */
   // eslint-disable-next-line max-lines-per-function
   _editAreaProcessing(editorWidth, editorHeight, positionFromEditRectState, canvasOffset, fill, scaleX = 1, scaleY = 1) {
-    var _a9;
+    var _a11;
     const editorObject = this._getEditorObject();
     if (editorObject == null)
       return;
@@ -1699,7 +2036,7 @@ let SlideEditingRenderController = (_a7 = class extends Disposable {
     startX += canvasOffset.left, startY += canvasOffset.top;
     const { document: documentComponent, scene: editorScene, engine: docEngine } = editorObject, viewportMain = editorScene.getViewport(VIEWPORT_KEY.VIEW_MAIN), clientHeight = document.body.clientHeight - startY - canvasOffset.top - EDITOR_BORDER_SIZE * 2, clientWidth = document.body.clientWidth - startX - canvasOffset.left;
     let physicHeight = editorHeight, scrollBar = viewportMain == null ? void 0 : viewportMain.getScrollBar();
-    physicHeight > clientHeight ? (physicHeight = clientHeight, scrollBar == null ? viewportMain && new ScrollBar(viewportMain, { enableHorizontal: !1, barSize: 8 }) : viewportMain == null || viewportMain.resetCanvasSizeAndUpdateScroll()) : (scrollBar = null, (_a9 = viewportMain == null ? void 0 : viewportMain.getScrollBar()) == null || _a9.dispose()), editorWidth += (scrollBar == null ? void 0 : scrollBar.barSize) || 0, editorWidth = Math.min(editorWidth, clientWidth), startX -= FIX_ONE_PIXEL_BLUR_OFFSET, startY -= FIX_ONE_PIXEL_BLUR_OFFSET, this._addBackground(editorScene, editorWidth / scaleX, editorHeight / scaleY, fill);
+    physicHeight > clientHeight ? (physicHeight = clientHeight, scrollBar == null ? viewportMain && new ScrollBar(viewportMain, { enableHorizontal: !1, barSize: 8 }) : viewportMain == null || viewportMain.resetCanvasSizeAndUpdateScroll()) : (scrollBar = null, (_a11 = viewportMain == null ? void 0 : viewportMain.getScrollBar()) == null || _a11.dispose()), editorWidth += (scrollBar == null ? void 0 : scrollBar.barSize) || 0, editorWidth = Math.min(editorWidth, clientWidth), startX -= FIX_ONE_PIXEL_BLUR_OFFSET, startY -= FIX_ONE_PIXEL_BLUR_OFFSET, this._addBackground(editorScene, editorWidth / scaleX, editorHeight / scaleY, fill);
     const { scaleX: precisionScaleX, scaleY: precisionScaleY } = editorScene.getPrecisionScale();
     editorScene.transformByState({
       width: editorWidth * scaleAdjust / scaleX,
@@ -1744,18 +2081,17 @@ let SlideEditingRenderController = (_a7 = class extends Disposable {
     })));
   }
   /**
-   * show input area, resize input area and then place input to right place.
-   * invoked when this._editorBridgeService.visible$ param.visible = true
-   *
-   * handleVisible is the 2nd part of editing.
-   * startEditing --> _updateEditor
-   * startEditing --> changeVisible --> slide-editor-bridge.render-controller.ts@changeVisible --> _editorBridgeService.changeVisible
+   * Show input area, resize input area and then place input to right place.
+   * @TODO why do resize in show input area?
    * @param param
    */
+  // handleVisible is the 2nd part of editing.
+  // first part: startEditing --> _updateEditor
+  // 2nd part: startEditing --> changeVisible --> slide-editor-bridge.render-controller.ts@changeVisible --> _editorBridgeService.changeVisible
   _handleEditorVisible(param) {
-    var _a9, _b;
-    const { eventType, keycode } = param;
-    this._cursorChange = [DeviceInputEventType.PointerDown, DeviceInputEventType.Dblclick].includes(eventType) ? 2 : 1;
+    var _a11, _b;
+    const { eventType } = param;
+    this._cursorChange = [DeviceInputEventType.PointerDown, DeviceInputEventType.Dblclick].includes(eventType) ? CursorChange.CursorChange : CursorChange.StartEditor;
     const editCellState = this._editorBridgeService.getEditRectState();
     if (editCellState == null)
       return;
@@ -1777,7 +2113,7 @@ let SlideEditingRenderController = (_a7 = class extends Disposable {
       return;
     this._fitTextSize(position, canvasOffset, skeleton, documentLayoutObject, scaleX, scaleY);
     const cursor = documentDataModel.getBody().dataStream.length - 2 || 0;
-    (_a9 = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN)) == null || _a9.scrollToViewportPos({
+    (_a11 = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN)) == null || _a11.scrollToViewportPos({
       viewportScrollX: Number.POSITIVE_INFINITY
     }), this._textSelectionManagerService.replaceTextRanges([
       {
@@ -1806,12 +2142,12 @@ let SlideEditingRenderController = (_a7 = class extends Disposable {
   _commandExecutedListener(d) {
     const moveCursorOP = [SetTextEditArrowOperation.id], editedMutations = [RichTextEditingMutation.id];
     d.add(this._commandService.onCommandExecuted((command) => {
-      moveCursorOP.includes(command.id) && this._moveCursorCmdHandler(command), editedMutations.includes(command.id) && this._editingChangedHandler();
+      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 === 2 ? this._moveInEditor(keycode, isShift) : this._editorBridgeService.changeVisible(params);
+    keycode != null && this._cursorChange === CursorChange.CursorChange ? this._moveInEditor(keycode, isShift) : this._editorBridgeService.changeVisible(params);
   }
   _editingChangedHandler() {
     const editRect = this._editorBridgeService.getEditorRect();
@@ -1832,7 +2168,7 @@ let SlideEditingRenderController = (_a7 = class extends Disposable {
   }
   async _handleEditorInvisible(param) {
     const { keycode } = param;
-    if (this._setOpenForCurrent(null, null), this._cursorChange = 0, this._exitInput(param), this._editorBridgeService.getEditRectState() == null)
+    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);
@@ -1841,11 +2177,11 @@ let SlideEditingRenderController = (_a7 = class extends Disposable {
     this._moveCursor(keycode);
   }
   _exitInput(param) {
-    this._contextService.setContextValue(FOCUSING_EDITOR_INPUT_FORMULA, !1), this._contextService.setContextValue(EDITOR_ACTIVATED, !1), this._contextService.setContextValue(FOCUSING_EDITOR_BUT_HIDDEN, !1), this._contextService.setContextValue(FORMULA_EDITOR_ACTIVATED, !1), this._cellEditorManagerService.setState({
+    this._contextService.setContextValue(EDITOR_ACTIVATED, !1), this._cellEditorManagerService.setState({
       show: param.visible
     });
     const editorUnitId = this._editorBridgeService.getCurrentEditorId();
-    editorUnitId != null && (this._undoRedoService.clearUndoRedo(editorUnitId), this._undoRedoService.clearUndoRedo(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY));
+    editorUnitId != null && this._undoRedoService.clearUndoRedo(editorUnitId);
   }
   _moveCursor(keycode) {
     if (keycode != null)
@@ -1877,7 +2213,7 @@ let SlideEditingRenderController = (_a7 = class extends Disposable {
   _cursorStateListener(d) {
     const editorObject = this._getEditorObject(), { document: documentComponent } = editorObject;
     d.add(toDisposable(documentComponent.onPointerDown$.subscribeEvent(() => {
-      this._cursorChange === 1 && (this._cursorChange = 2);
+      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?
@@ -1889,21 +2225,20 @@ let SlideEditingRenderController = (_a7 = class extends Disposable {
       direction
     });
   }
-}, __name(_a7, "SlideEditingRenderController"), _a7);
-SlideEditingRenderController = __decorateClass$1([
-  __decorateParam$1(1, ILayoutService),
-  __decorateParam$1(2, IUndoRedoService),
-  __decorateParam$1(3, IContextService),
-  __decorateParam$1(4, IUniverInstanceService),
-  __decorateParam$1(5, IRenderManagerService),
-  __decorateParam$1(6, ISlideEditorBridgeService),
-  __decorateParam$1(7, ISlideEditorManagerService),
-  __decorateParam$1(8, ITextSelectionRenderManager),
-  __decorateParam$1(9, Inject(TextSelectionManagerService)),
-  __decorateParam$1(10, ICommandService),
-  __decorateParam$1(11, Inject(LocaleService)),
-  __decorateParam$1(12, IEditorService),
-  __decorateParam$1(13, IResourceLoaderService)
+}, __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, ITextSelectionRenderManager),
+  __decorateParam$2(9, Inject(TextSelectionManagerService)),
+  __decorateParam$2(10, ICommandService),
+  __decorateParam$2(11, Inject(LocaleService)),
+  __decorateParam$2(12, IEditorService)
 ], SlideEditingRenderController);
 function getEditorObject(unitId, renderManagerService) {
   if (unitId == null)
@@ -1920,19 +2255,56 @@ function getEditorObject(unitId, renderManagerService) {
   };
 }
 __name(getEditorObject, "getEditorObject");
+var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$1(target, key, result), result;
+}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1"), _a9;
+let SlideRenderService = (_a9 = class extends RxDisposable {
+  // private _skeletonChangeMutations = new Set<string>();
+  constructor(_contextService, _instanceSrv, _renderManagerService) {
+    super(), this._contextService = _contextService, this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, Promise.resolve().then(() => this._init());
+  }
+  _init() {
+    this._initSlideDataListener(), this._initContextListener();
+  }
+  _initSlideDataListener() {
+    this._instanceSrv.getTypeOfUnitAdded$(UniverInstanceType.UNIVER_SLIDE).pipe(takeUntil(this.dispose$)).subscribe((slideModel) => {
+      this._createRenderer(slideModel == null ? void 0 : slideModel.getUnitId());
+    }), this._instanceSrv.getAllUnitsForType(UniverInstanceType.UNIVER_SLIDE).forEach((slideModel) => {
+      this._createRenderer(slideModel.getUnitId());
+    }), this._instanceSrv.getTypeOfUnitDisposed$(UniverInstanceType.UNIVER_SLIDE).pipe(takeUntil(this.dispose$)).subscribe((workbook) => this._disposeRenderer(workbook));
+  }
+  _createRenderer(unitId) {
+    unitId == null || this._instanceSrv.getUnit(unitId, UniverInstanceType.UNIVER_SLIDE) == null || (this._renderManagerService.createRender(unitId), this._renderManagerService.setCurrent(unitId));
+  }
+  _disposeRenderer(workbook) {
+    const unitId = workbook.getUnitId();
+    this._renderManagerService.removeRender(unitId);
+  }
+  _initContextListener() {
+  }
+}, __name(_a9, "SlideRenderService"), _a9);
+SlideRenderService = __decorateClass$1([
+  OnLifecycle(LifecycleStages.Ready, SlideRenderService),
+  __decorateParam$1(0, IContextService),
+  __decorateParam$1(1, IUniverInstanceService),
+  __decorateParam$1(2, IRenderManagerService)
+], SlideRenderService);
 var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp2(target, key, result), result;
 }, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam");
 const SLIDE_UI_PLUGIN_NAME = "SLIDE_UI";
-var _a8;
-let UniverSlidesUIPlugin = (_a8 = class extends Plugin {
+var _a10;
+let UniverSlidesUIPlugin = (_a10 = class extends Plugin {
   constructor(_config = {}, _injector, _renderManagerService, _univerInstanceService) {
     super(), this._config = _config, this._injector = _injector, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService;
   }
   onStarting() {
     mergeOverrideWithDependencies([
+      [SlideRenderService],
       [ISlideEditorBridgeService, { useClass: SlideEditorBridgeService }],
       // used by SlideUIController --> EditorContainer
       [ISlideEditorManagerService, { useClass: SlideEditorManagerService }],
@@ -1940,23 +2312,28 @@ let UniverSlidesUIPlugin = (_a8 = class extends Plugin {
     ], this._config.override).forEach((d) => this._injector.add(d));
   }
   onReady() {
-    mergeOverrideWithDependencies([
+    [
+      // SlideRenderService will be init in ready stage, and then calling RenderManagerService@createRender --> init all deps in this rendering register block.
+      [SlideRenderController]
+    ].forEach((m2) => {
+      this.disposeWithMe(this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SLIDE, m2));
+    }), mergeOverrideWithDependencies([
+      [CanvasView],
       // cannot register in _renderManagerService now.
       // [ISlideEditorBridgeService, { useClass: SlideEditorBridgeService }],
       // // used by SlideUIController --> EditorContainer
       // [ISlideEditorManagerService, { useClass: SlideEditorManagerService }],
-      // This controller should be registered in Ready stage.
-      // this controller would add a new RenderUnit (__INTERNAL_EDITOR__DOCS_NORMAL)
-      // so this new RenderUnit does not have ISlideEditorBridgeService & ISlideEditorManagerService if
+      // SlidesUIController controller should be registered in Ready stage.
+      // SlidesUIController controller would add a new RenderUnit (__INTERNAL_EDITOR__DOCS_NORMAL)
       [SlidesUIController, {
         useFactory: /* @__PURE__ */ __name(() => this._injector.createInstance(SlidesUIController, this._config), "useFactory")
       }],
-      // editor service were create in renderManagerService
+      // editor service was create in renderManagerService
       [SlideRenderController],
       [SlidePopupMenuController]
     ], this._config.override).forEach((m2) => {
       this._injector.add(m2);
-    });
+    }), this._injector.get(CanvasView);
   }
   onRendered() {
     [
@@ -1971,12 +2348,12 @@ let UniverSlidesUIPlugin = (_a8 = class extends Plugin {
   _markSlideAsFocused() {
     const currentService = this._univerInstanceService;
     try {
-      const slide = currentService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
-      currentService.focusUnit(slide.getUnitId());
+      const slideDataModel = currentService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+      currentService.focusUnit(slideDataModel.getUnitId());
     } catch {
     }
   }
-}, __name(_a8, "UniverSlidesUIPlugin"), __publicField(_a8, "pluginName", SLIDE_UI_PLUGIN_NAME), __publicField(_a8, "type", UniverInstanceType.UNIVER_SLIDE), _a8);
+}, __name(_a10, "UniverSlidesUIPlugin"), __publicField(_a10, "pluginName", SLIDE_UI_PLUGIN_NAME), __publicField(_a10, "type", UniverInstanceType.UNIVER_SLIDE), _a10);
 UniverSlidesUIPlugin = __decorateClass([
   __decorateParam(1, Inject(Injector)),
   __decorateParam(2, IRenderManagerService),
@@ -1985,13 +2362,22 @@ UniverSlidesUIPlugin = __decorateClass([
 export {
   ActivateSlidePageOperation,
   AppendSlideOperation,
-  EditorContainer,
+  CanvasView,
+  DeleteSlideElementOperation,
   IMAGE_MENU_ID,
+  ISlideEditorBridgeService,
+  InsertSlideFloatImageOperation,
+  InsertSlideShapeRectangleCommand,
+  InsertSlideShapeRectangleOperation,
   SHAPE_MENU_ID,
+  SLIDE_EDITOR_ID,
   SetSlidePageThumbOperation,
+  SlideAddTextCommand,
   SlideAddTextOperation,
   SlideCanvasPopMangerService,
+  SlideEditorContainer,
   SlideSideBar,
   SlidesUIController,
-  UniverSlidesUIPlugin
+  UniverSlidesUIPlugin,
+  UpdateSlideElementOperation
 };