@univerjs/docs-drawing-ui 0.2.11 → 0.2.13

package/lib/es/index.js

@@ -2,28 +2,28 @@ 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, ICommandService, IUniverInstanceService, TextX, JSONX, MemoryCursor, TextXActionType, LocaleService, RxDisposable, UniverInstanceType, toDisposable, FOCUSING_COMMON_DRAWINGS, OnLifecycle, LifecycleStages, Inject, IContextService, useDependency, PositionedObjectLayoutType, BooleanNumber, ObjectRelativeFromH, ObjectRelativeFromV, Tools, WrapTextType, Direction, IUndoRedoService, FOCUSING_UNIVER_EDITOR, Disposable, Injector, fromEventSubject, LifecycleService, UndoCommand, RedoCommand, throttle, COLORS, Plugin, DependentOn } from "@univerjs/core";
+import { CommandType, ICommandService, IUniverInstanceService, TextX, JSONX, MemoryCursor, TextXActionType, LocaleService, RxDisposable, UniverInstanceType, toDisposable, FOCUSING_COMMON_DRAWINGS, OnLifecycle, LifecycleStages, Inject, IContextService, IUndoRedoService, BuildTextUtils, Tools, Disposable, BooleanNumber, PositionedObjectLayoutType, WrapTextType, ObjectRelativeFromH, ObjectRelativeFromV, useDependency, Direction, FOCUSING_UNIVER_EDITOR, fromEventSubject, LifecycleService, UndoCommand, RedoCommand, throttle, COLORS, Plugin, DependentOn, Injector, IConfigService } from "@univerjs/core";
 import { ImageCropperObject, COMPONENT_IMAGE_POPUP_MENU, OpenImageCropOperation, ImageResetSizeOperation, DrawingCommonPanel, UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
-import { IDrawingManagerService, DRAWING_IMAGE_ALLOW_IMAGE_LIST, ArrangeTypeEnum, DRAWING_IMAGE_COUNT_LIMIT, ImageUploadStatusType, DRAWING_IMAGE_ALLOW_SIZE, getImageSize, DrawingTypeEnum, getDrawingShapeKeyByDrawingSearch, DRAWING_IMAGE_WIDTH_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, IImageIoService, UniverDrawingPlugin } from "@univerjs/drawing";
+import { IDrawingManagerService, ArrangeTypeEnum, DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, ImageUploadStatusType, DRAWING_IMAGE_ALLOW_SIZE, getImageSize, DrawingTypeEnum, getDrawingShapeKeyByDrawingSearch, DRAWING_IMAGE_WIDTH_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, IImageIoService, UniverDrawingPlugin } from "@univerjs/drawing";
 import { IDocDrawingService, UniverDocsDrawingPlugin } from "@univerjs/docs-drawing";
-import { ITextSelectionRenderManager, IRenderManagerService, DocumentEditArea, Liquid, TRANSFORM_CHANGE_OBSERVABLE_TYPE, PageLayoutType, NodePositionConvertToCursor, getOneTextSelectionRange, DocumentSkeletonPageType, Vector2, getAnchorBounding, Rect, getColor, TEXT_RANGE_LAYER_INDEX } from "@univerjs/engine-render";
-import { takeUntil, Observable, BehaviorSubject, filter, debounceTime } from "rxjs";
-import { DocCanvasPopManagerService, docDrawingPositionToTransform } from "@univerjs/docs-ui";
-import { RichTextEditingMutation, getRichTextEditPath, TextSelectionManagerService, DocSkeletonManagerService, getRetainAndDeleteFromReplace, getCustomBlockIdsInSelections, SetDocZoomRatioOperation, getDocObject } from "@univerjs/docs";
-import { ISidebarService, MenuItemType, MenuPosition, MenuGroup, getMenuHiddenObservable, KeyCode, ComponentManager, IMenuService, IShortcutService, IMessageService, IEditorService } from "@univerjs/ui";
+import { IRenderManagerService, DocumentEditArea, Liquid, TRANSFORM_CHANGE_OBSERVABLE_TYPE, PageLayoutType, DocumentSkeletonPageType, Vector2, Rect, getColor } from "@univerjs/engine-render";
+import { takeUntil, BehaviorSubject, Observable, filter, debounceTime } from "rxjs";
+import { DocSelectionRenderService, getRichTextEditPath, DocCanvasPopManagerService, getCustomBlockIdsInSelections, docDrawingPositionToTransform, SetDocZoomRatioOperation, NodePositionConvertToCursor, getOneTextSelectionRange, getAnchorBounding, TEXT_RANGE_LAYER_INDEX, getDocObject } from "@univerjs/docs-ui";
+import { RichTextEditingMutation, DocSelectionManagerService, DocSkeletonManagerService } from "@univerjs/docs";
+import { ISidebarService, IMessageService, ILocalFileService, MenuItemType, getMenuHiddenObservable, KeyCode, RibbonStartGroup, ComponentManager, IMenuManagerService, IShortcutService, IEditorService } from "@univerjs/ui";
+import { MessageType, RadioGroup, Radio, InputNumber, Select, Checkbox } from "@univerjs/design";
 import React, { forwardRef, useRef, createElement, useState, useEffect } from "react";
 import clsx from "clsx";
-import { RadioGroup, Radio, InputNumber, Select, Checkbox, MessageType } from "@univerjs/design";
 const RemoveDocDrawingCommand = {
   id: "doc.command.remove-doc-image",
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: /* @__PURE__ */ __name((accessor, params) => {
     var _a8, _b, _c, _d;
-    const commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService), textSelectionRenderManager = accessor.get(ITextSelectionRenderManager), documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
+    const commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService), renderManagerService = accessor.get(IRenderManagerService), documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
     if (params == null || documentDataModel == null)
       return !1;
-    const { drawings: removeDrawings } = params, segmentId = (_a8 = textSelectionRenderManager.getSegment()) != null ? _a8 : "", textX = new TextX(), jsonX = JSONX.getInstance(), customBlocks = (_c = (_b = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _b.customBlocks) != null ? _c : [], removeCustomBlocks = removeDrawings.map((drawing) => customBlocks.find((customBlock) => customBlock.blockId === drawing.drawingId)).filter((block) => !!block).sort((a, b) => a.startIndex > b.startIndex ? 1 : -1), unitId = removeDrawings[0].unitId, memoryCursor = new MemoryCursor();
+    const docSelectionRenderService = renderManagerService.getRenderById(params.unitId).with(DocSelectionRenderService), { drawings: removeDrawings } = params, segmentId = (_a8 = docSelectionRenderService.getSegment()) != null ? _a8 : "", textX = new TextX(), jsonX = JSONX.getInstance(), customBlocks = (_c = (_b = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _b.customBlocks) != null ? _c : [], removeCustomBlocks = removeDrawings.map((drawing) => customBlocks.find((customBlock) => customBlock.blockId === drawing.drawingId)).filter((block) => !!block).sort((a, b) => a.startIndex > b.startIndex ? 1 : -1), unitId = removeDrawings[0].unitId, memoryCursor = new MemoryCursor();
     memoryCursor.reset();
     const cursorIndex = removeCustomBlocks[0].startIndex, textRanges = [
       {
@@ -145,15 +145,19 @@ let DocDrawingPopupMenuController = (_a = class extends RxDisposable {
           const oKey = object.oKey, drawingParam = this._drawingManagerService.getDrawingOKey(oKey);
           if (!drawingParam)
             return;
-          const { unitId: unitId2, subUnitId, drawingId } = drawingParam;
-          disposePopups.push(this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
-            componentKey: COMPONENT_IMAGE_POPUP_MENU,
-            direction: "horizontal",
-            offset: [2, 0],
-            extraProps: {
-              menuItems: this._getImageMenuItems(unitId2, subUnitId, drawingId)
-            }
-          }))), !this._drawingManagerService.getFocusDrawings().find((drawing) => drawing.unitId === unitId2 && drawing.subUnitId === subUnitId && drawing.drawingId === drawingId) && this._drawingManagerService.focusDrawing([{
+          const { unitId: unitId2, subUnitId, drawingId } = drawingParam, popup = this._canvasPopManagerService.attachPopupToObject(
+            object,
+            {
+              componentKey: COMPONENT_IMAGE_POPUP_MENU,
+              direction: "horizontal",
+              offset: [2, 0],
+              extraProps: {
+                menuItems: this._getImageMenuItems(unitId2, subUnitId, drawingId)
+              }
+            },
+            unitId2
+          );
+          disposePopups.push(this.disposeWithMe(popup)), !this._drawingManagerService.getFocusDrawings().find((drawing) => drawing.unitId === unitId2 && drawing.subUnitId === subUnitId && drawing.drawingId === drawingId) && this._drawingManagerService.focusDrawing([{
             unitId: unitId2,
             subUnitId,
             drawingId
@@ -278,41 +282,368 @@ var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width:
   }));
 });
 AddImageSingle.displayName = "AddImageSingle";
-const InsertDocImageOperation = {
-  id: "doc.operation.insert-float-image",
-  type: CommandType.OPERATION,
-  handler: /* @__PURE__ */ __name(() => !0, "handler")
-}, uploadFileMenu = "univer-upload-file-menu", uploadFileMenuInput = "univer-upload-file-menu-input", styles$1 = {
-  uploadFileMenu,
-  uploadFileMenuInput
-}, UploadFileMenu = /* @__PURE__ */ __name(() => {
-  const commandService = useDependency(ICommandService), fileInputRef = useRef(null), handleButtonClick = /* @__PURE__ */ __name(() => {
+const GroupDocDrawingCommand = {
+  id: "doc.command.group-doc-image",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    accessor.get(ICommandService), accessor.get(IUndoRedoService);
+    const docDrawingService = accessor.get(IDocDrawingService);
+    if (!params) return !1;
+    const unitIds = [];
+    return params.forEach(({ parent, children }) => {
+      unitIds.push(parent.unitId), children.forEach((child) => {
+        unitIds.push(child.unitId);
+      });
+    }), docDrawingService.getGroupDrawingOp(params), !1;
+  }, "handler")
+}, InsertDocDrawingCommand = {
+  id: "doc.command.insert-doc-image",
+  type: CommandType.COMMAND,
+  // eslint-disable-next-line max-lines-per-function
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    var _a8, _b, _c, _d;
+    if (params == null)
+      return !1;
+    const commandService = accessor.get(ICommandService), docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), activeTextRange = docSelectionManagerService.getActiveTextRange(), documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
+    if (activeTextRange == null || documentDataModel == null)
+      return !1;
+    const unitId = documentDataModel.getUnitId(), { drawings } = params, { collapsed, startOffset, segmentId } = activeTextRange, body = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
+    if (body == null)
+      return !1;
+    const textX = new TextX(), jsonX = JSONX.getInstance(), rawActions = [], drawingOrderLength = (_b = (_a8 = documentDataModel.getSnapshot().drawingsOrder) == null ? void 0 : _a8.length) != null ? _b : 0;
+    let removeDrawingLen = 0;
+    if (collapsed)
+      startOffset > 0 && textX.push({
+        t: TextXActionType.RETAIN,
+        len: startOffset,
+        segmentId
+      });
+    else {
+      const { dos } = BuildTextUtils.selection.getDeleteActions(activeTextRange, segmentId, 0, body);
+      textX.push(...dos);
+      const removedCustomBlockIds = getCustomBlockIdsInSelections(body, [activeTextRange]), drawings2 = (_c = documentDataModel.getDrawings()) != null ? _c : {}, drawingOrder = (_d = documentDataModel.getDrawingsOrder()) != null ? _d : [], sortedRemovedCustomBlockIds = removedCustomBlockIds.sort((a, b) => drawingOrder.indexOf(a) > drawingOrder.indexOf(b) ? -1 : drawingOrder.indexOf(a) < drawingOrder.indexOf(b) ? 1 : 0);
+      if (sortedRemovedCustomBlockIds.length > 0)
+        for (const blockId of sortedRemovedCustomBlockIds) {
+          const drawing = drawings2[blockId], drawingIndex = drawingOrder.indexOf(blockId);
+          if (drawing == null || drawingIndex < 0)
+            continue;
+          const removeDrawingAction = jsonX.removeOp(["drawings", blockId], drawing), removeDrawingOrderAction = jsonX.removeOp(["drawingsOrder", drawingIndex], blockId);
+          rawActions.push(removeDrawingAction), rawActions.push(removeDrawingOrderAction), removeDrawingLen++;
+        }
+    }
+    textX.push({
+      t: TextXActionType.INSERT,
+      body: {
+        dataStream: "\b".repeat(drawings.length),
+        customBlocks: drawings.map((drawing, i) => ({
+          startIndex: i,
+          blockId: drawing.drawingId
+        }))
+      },
+      len: drawings.length,
+      line: 0,
+      segmentId
+    });
+    const path = getRichTextEditPath(documentDataModel, segmentId), placeHolderAction = jsonX.editOp(textX.serialize(), path);
+    rawActions.push(placeHolderAction);
+    for (const drawing of drawings) {
+      const { drawingId } = drawing, addDrawingAction = jsonX.insertOp(["drawings", drawingId], drawing), addDrawingOrderAction = jsonX.insertOp(["drawingsOrder", drawingOrderLength - removeDrawingLen], drawingId);
+      rawActions.push(addDrawingAction), rawActions.push(addDrawingOrderAction);
+    }
+    const doMutation = {
+      id: RichTextEditingMutation.id,
+      params: {
+        unitId,
+        actions: [],
+        textRanges: []
+      }
+    };
+    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
+}, SetDocDrawingArrangeCommand = {
+  id: "doc.command.set-drawing-arrange",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    const commandService = accessor.get(ICommandService), docDrawingService = accessor.get(IDocDrawingService);
+    if (params == null)
+      return !1;
+    const { unitId, subUnitId, drawingIds, arrangeType } = params, drawingOrderMapParam = { unitId, subUnitId, drawingIds };
+    let jsonOp;
+    if (arrangeType === ArrangeTypeEnum.forward ? jsonOp = docDrawingService.getForwardDrawingsOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.backward ? jsonOp = docDrawingService.getBackwardDrawingOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.front ? jsonOp = docDrawingService.getFrontDrawingsOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.back && (jsonOp = docDrawingService.getBackDrawingsOp(drawingOrderMapParam)), jsonOp == null)
+      return !1;
+    const { redo } = jsonOp;
+    if (redo == null)
+      return !1;
+    const rawActions = [];
+    let redoCopy = Tools.deepClone(redo);
+    redoCopy = redoCopy.slice(3), redoCopy.unshift("drawingsOrder"), rawActions.push(redoCopy);
+    const doMutation = {
+      id: RichTextEditingMutation.id,
+      params: {
+        unitId,
+        actions: [],
+        textRanges: null
+      }
+    };
+    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
+}, UngroupDocDrawingCommand = {
+  id: "doc.command.ungroup-doc-image",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    accessor.get(ICommandService), accessor.get(IUndoRedoService);
+    const docDrawingService = accessor.get(IDocDrawingService);
+    if (!params) return !1;
+    const unitIds = [];
+    return params.forEach(({ parent, children }) => {
+      unitIds.push(parent.unitId), children.forEach((child) => {
+        unitIds.push(child.unitId);
+      });
+    }), docDrawingService.getUngroupDrawingOp(params), !1;
+  }, "handler")
+}, _DocRefreshDrawingsService = class _DocRefreshDrawingsService {
+  constructor() {
+    __publicField(this, "_refreshDrawings$", new BehaviorSubject(null));
+    __publicField(this, "refreshDrawings$", this._refreshDrawings$.asObservable());
+  }
+  refreshDrawings(skeleton) {
+    this._refreshDrawings$.next(skeleton);
+  }
+};
+__name(_DocRefreshDrawingsService, "DocRefreshDrawingsService");
+let DocRefreshDrawingsService = _DocRefreshDrawingsService;
+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"), _a2;
+let DocDrawingUpdateRenderController = (_a2 = class extends Disposable {
+  constructor(_context, _commandService, _docSelectionManagerService, _renderManagerSrv, _imageIoService, _docDrawingService, _drawingManagerService, _contextService, _messageService, _localeService, _docSelectionRenderService, _docRefreshDrawingsService, _fileOpenerService) {
+    super(), this._context = _context, this._commandService = _commandService, this._docSelectionManagerService = _docSelectionManagerService, this._renderManagerSrv = _renderManagerSrv, this._imageIoService = _imageIoService, this._docDrawingService = _docDrawingService, this._drawingManagerService = _drawingManagerService, this._contextService = _contextService, this._messageService = _messageService, this._localeService = _localeService, this._docSelectionRenderService = _docSelectionRenderService, this._docRefreshDrawingsService = _docRefreshDrawingsService, this._fileOpenerService = _fileOpenerService, this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener(), this._editAreaChangeListener();
+  }
+  async insertDocImage() {
+    const files = await this._fileOpenerService.openFile({
+      multiple: !0,
+      accept: DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace("image/", "")}`).join(",")
+    }), fileLength = files.length;
+    return fileLength > DRAWING_IMAGE_COUNT_LIMIT ? (this._messageService.show({
+      type: MessageType.Error,
+      content: this._localeService.t("update-status.exceedMaxCount", String(DRAWING_IMAGE_COUNT_LIMIT))
+    }), !1) : fileLength === 0 ? !1 : (await this._insertFloatImages(files), !0);
+  }
+  // eslint-disable-next-line max-lines-per-function
+  async _insertFloatImages(files) {
+    let imageParams = [];
+    try {
+      imageParams = await Promise.all(files.map((file) => this._imageIoService.saveImage(file)));
+    } catch (error) {
+      const type = error.message;
+      let content = "";
+      switch (type) {
+        case ImageUploadStatusType.ERROR_EXCEED_SIZE:
+          content = this._localeService.t("update-status.exceedMaxSize", String(DRAWING_IMAGE_ALLOW_SIZE / (1024 * 1024)));
+          break;
+        case ImageUploadStatusType.ERROR_IMAGE_TYPE:
+          content = this._localeService.t("update-status.invalidImageType");
+          break;
+        case ImageUploadStatusType.ERROR_IMAGE:
+          content = this._localeService.t("update-status.invalidImage");
+          break;
+      }
+      this._messageService.show({
+        type: MessageType.Error,
+        content
+      });
+    }
+    if (imageParams.length === 0)
+      return;
+    const { unitId } = this._context, docDrawingParams = [];
+    for (const imageParam of imageParams) {
+      if (imageParam == null)
+        continue;
+      const { imageId, imageSourceType, source, base64Cache } = imageParam, { width, height, image } = await getImageSize(base64Cache || "");
+      this._imageIoService.addImageSourceCache(imageId, imageSourceType, image);
+      let scale = 1;
+      if (width > DRAWING_IMAGE_WIDTH_LIMIT || height > DRAWING_IMAGE_HEIGHT_LIMIT) {
+        const scaleWidth = DRAWING_IMAGE_WIDTH_LIMIT / width, scaleHeight = DRAWING_IMAGE_HEIGHT_LIMIT / height;
+        scale = Math.min(scaleWidth, scaleHeight);
+      }
+      const docTransform = this._getImagePosition(width * scale, height * scale);
+      if (docTransform == null)
+        return;
+      const docDrawingParam = {
+        unitId,
+        subUnitId: unitId,
+        drawingId: imageId,
+        drawingType: DrawingTypeEnum.DRAWING_IMAGE,
+        imageSourceType,
+        source,
+        transform: docDrawingPositionToTransform(docTransform),
+        docTransform,
+        behindDoc: BooleanNumber.FALSE,
+        title: "",
+        description: "",
+        layoutType: PositionedObjectLayoutType.INLINE,
+        // Insert inline drawing by default.
+        wrapText: WrapTextType.BOTH_SIDES,
+        distB: 0,
+        distL: 0,
+        distR: 0,
+        distT: 0
+      };
+      this._isInsertInHeaderFooter() && (docDrawingParam.isMultiTransform = BooleanNumber.TRUE, docDrawingParam.transforms = docDrawingParam.transform ? [docDrawingParam.transform] : null), docDrawingParams.push(docDrawingParam);
+    }
+    this._commandService.executeCommand(InsertDocDrawingCommand.id, {
+      unitId,
+      drawings: docDrawingParams
+    });
+  }
+  _isInsertInHeaderFooter() {
     var _a8;
-    (_a8 = fileInputRef.current) == null || _a8.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)
+    const { unitId } = this._context, viewModel = (_a8 = this._renderManagerSrv.getRenderById(unitId)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getViewModel(), editArea = viewModel == null ? void 0 : viewModel.getEditArea();
+    return editArea === DocumentEditArea.HEADER || editArea === DocumentEditArea.FOOTER;
+  }
+  _getImagePosition(imageWidth, imageHeight) {
+    const activeTextRange = this._docSelectionRenderService.getActiveTextRange(), position = (activeTextRange == null ? void 0 : activeTextRange.getAbsolutePosition()) || {
+      left: 0,
+      top: 0
+    };
+    return {
+      size: {
+        width: imageWidth,
+        height: imageHeight
+      },
+      positionH: {
+        relativeFrom: ObjectRelativeFromH.PAGE,
+        posOffset: position.left
+      },
+      positionV: {
+        relativeFrom: ObjectRelativeFromV.MARGIN,
+        posOffset: position.top
+      },
+      angle: 0
+    };
+  }
+  _updateOrderListener() {
+    this._drawingManagerService.featurePluginOrderUpdate$.subscribe((params) => {
+      const { unitId, subUnitId, drawingIds, arrangeType } = params;
+      this._commandService.executeCommand(SetDocDrawingArrangeCommand.id, {
+        unitId,
+        subUnitId,
+        drawingIds,
+        arrangeType
+      });
+    });
+  }
+  _groupDrawingListener() {
+    this._drawingManagerService.featurePluginGroupUpdate$.subscribe((params) => {
+      this._commandService.executeCommand(GroupDocDrawingCommand.id, params);
+    }), this._drawingManagerService.featurePluginUngroupUpdate$.subscribe((params) => {
+      this._commandService.executeCommand(UngroupDocDrawingCommand.id, params);
+    });
+  }
+  _getCurrentSceneAndTransformer() {
+    const { scene, mainComponent } = this._context;
+    if (scene == null || mainComponent == null)
       return;
-    const files = Array.from(fileList);
-    commandService.executeCommand(InsertDocImageOperation.id, { files }), fileInputRef.current && (fileInputRef.current.value = "");
-  }, "handleFileChange");
-  return /* @__PURE__ */ React.createElement("div", { onClick: handleButtonClick, className: styles$1.uploadFileMenu }, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      type: "file",
-      className: styles$1.uploadFileMenuInput,
-      ref: fileInputRef,
-      onChange: handleFileChange,
-      accept: imageAccept,
-      multiple: !0
+    const transformer = scene.getTransformerByCreate(), { docsLeft, docsTop } = mainComponent.getOffsetConfig();
+    return { scene, transformer, docsLeft, docsTop };
+  }
+  _focusDrawingListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.focus$.subscribe((params) => {
+        var _a8;
+        const { transformer, docsLeft, docsTop } = (_a8 = this._getCurrentSceneAndTransformer()) != null ? _a8 : {};
+        if (params == null || params.length === 0)
+          this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, !1), this._docDrawingService.focusDrawing([]), transformer && transformer.resetProps({
+            zeroTop: 0,
+            zeroLeft: 0
+          });
+        else {
+          this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, !0), this._docDrawingService.focusDrawing(params), this._docSelectionManagerService.getActiveTextRange() && this._docSelectionManagerService.replaceTextRanges([]);
+          const prevSegmentId = this._docSelectionRenderService.getSegment(), segmentId = this._findSegmentIdByDrawingId(params[0].drawingId);
+          prevSegmentId !== segmentId && this._docSelectionRenderService.setSegment(segmentId), transformer && transformer.resetProps({
+            zeroTop: docsTop,
+            zeroLeft: docsLeft
+          });
+        }
+      })
+    );
+  }
+  _findSegmentIdByDrawingId(drawingId) {
+    var _a8, _b, _c;
+    const { unit: DocDataModel } = this._context, { body, headers = {}, footers = {} } = DocDataModel.getSnapshot();
+    if (((_a8 = body == null ? void 0 : body.customBlocks) != null ? _a8 : []).some((b) => b.blockId === drawingId))
+      return "";
+    for (const headerId of Object.keys(headers))
+      if ((_b = headers[headerId].body.customBlocks) != null && _b.some((b) => b.blockId === drawingId))
+        return headerId;
+    for (const footerId of Object.keys(footers))
+      if ((_c = footers[footerId].body.customBlocks) != null && _c.some((b) => b.blockId === drawingId))
+        return footerId;
+    return "";
+  }
+  // Update drawings edit status and opacity. You can not edit header footer images when you are editing body. and vice verse.
+  _updateDrawingsEditStatus() {
+    var _a8;
+    const { unit: docDataModel, scene, unitId } = this._context, viewModel = (_a8 = this._renderManagerSrv.getRenderById(unitId)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getViewModel();
+    if (viewModel == null || docDataModel == null)
+      return;
+    const snapshot = docDataModel.getSnapshot(), { drawings = {} } = snapshot, isEditBody = viewModel.getEditArea() === DocumentEditArea.BODY;
+    for (const key of Object.keys(drawings)) {
+      const drawing = drawings[key], objectKey = getDrawingShapeKeyByDrawingSearch({ unitId, drawingId: drawing.drawingId, subUnitId: unitId }), drawingShapes = scene.fuzzyMathObjects(objectKey, !0);
+      if (drawingShapes.length)
+        for (const shape of drawingShapes)
+          scene.detachTransformerFrom(shape), shape.setOpacity(0.5), (isEditBody && drawing.isMultiTransform !== BooleanNumber.TRUE || !isEditBody && drawing.isMultiTransform === BooleanNumber.TRUE) && (scene.attachTransformerTo(shape), shape.setOpacity(1));
     }
-  ));
-}, "UploadFileMenu"), COMPONENT_DOC_UPLOAD_FILE_MENU = "COMPONENT_DOC_UPLOAD_FILE_MENU", ImageUploadIcon = "addition-and-subtraction-single", IMAGE_MENU_ID = "doc.menu.image", IMAGE_MENU_UPLOAD_FLOAT_ID = "doc.menu.image.upload.float", getDisableWhenSelectionInTableObservable = /* @__PURE__ */ __name((accessor) => {
-  const textSelectionManagerService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService);
+  }
+  _editAreaChangeListener() {
+    var _a8;
+    const { unitId } = this._context, viewModel = (_a8 = this._renderManagerSrv.getRenderById(unitId)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getViewModel();
+    viewModel != null && (this._updateDrawingsEditStatus(), this.disposeWithMe(
+      viewModel.editAreaChange$.subscribe(() => {
+        this._updateDrawingsEditStatus();
+      })
+    ), this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
+      skeleton != null && queueMicrotask(() => {
+        this._updateDrawingsEditStatus();
+      });
+    }), this.disposeWithMe(
+      this._commandService.onCommandExecuted(async (command) => {
+        command.id === RichTextEditingMutation.id && queueMicrotask(() => {
+          this._updateDrawingsEditStatus();
+        });
+      })
+    ));
+  }
+}, __name(_a2, "DocDrawingUpdateRenderController"), _a2);
+DocDrawingUpdateRenderController = __decorateClass$5([
+  __decorateParam$5(1, ICommandService),
+  __decorateParam$5(2, Inject(DocSelectionManagerService)),
+  __decorateParam$5(3, IRenderManagerService),
+  __decorateParam$5(4, IImageIoService),
+  __decorateParam$5(5, IDocDrawingService),
+  __decorateParam$5(6, IDrawingManagerService),
+  __decorateParam$5(7, IContextService),
+  __decorateParam$5(8, IMessageService),
+  __decorateParam$5(9, Inject(LocaleService)),
+  __decorateParam$5(10, Inject(DocSelectionRenderService)),
+  __decorateParam$5(11, Inject(DocRefreshDrawingsService)),
+  __decorateParam$5(12, ILocalFileService)
+], DocDrawingUpdateRenderController);
+const InsertDocImageCommand = {
+  id: "doc.command.insert-float-image",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor) => {
+    var _a8, _b;
+    return (_b = (_a8 = accessor.get(IRenderManagerService).getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a8.with(DocDrawingUpdateRenderController).insertDocImage()) != null ? _b : !1;
+  }, "handler")
+}, ImageUploadIcon = "addition-and-subtraction-single", IMAGE_MENU_ID = "doc.menu.image", IMAGE_MENU_UPLOAD_FLOAT_ID = InsertDocImageCommand.id, getDisableWhenSelectionInTableObservable = /* @__PURE__ */ __name((accessor) => {
+  const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService);
   return new Observable((subscriber) => {
-    const observable = textSelectionManagerService.textSelection$.subscribe(() => {
+    const observable = docSelectionManagerService.textSelection$.subscribe(() => {
       var _a8;
-      const activeRange = textSelectionManagerService.getActiveTextRangeWithStyle();
+      const activeRange = docSelectionManagerService.getActiveTextRange();
       if (activeRange) {
         const { segmentId, startOffset, endOffset } = activeRange, docDataModel = univerInstanceService.getCurrentUniverDocInstance(), tables = (_a8 = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a8.tables;
         if (tables && tables.length && tables.some((table) => {
@@ -335,8 +666,6 @@ function ImageMenuFactory(accessor) {
   return {
     id: IMAGE_MENU_ID,
     type: MenuItemType.SUBITEMS,
-    positions: [MenuPosition.TOOLBAR_START],
-    group: MenuGroup.TOOLBAR_LAYOUT,
     icon: ImageUploadIcon,
     tooltip: "docImage.title",
     disabled$: getDisableWhenSelectionInTableObservable(accessor),
@@ -348,11 +677,7 @@ function UploadFloatImageMenuFactory(_accessor) {
   return {
     id: IMAGE_MENU_UPLOAD_FLOAT_ID,
     title: "docImage.upload.float",
-    type: MenuItemType.SELECTOR,
-    label: {
-      name: COMPONENT_DOC_UPLOAD_FILE_MENU
-    },
-    positions: [IMAGE_MENU_ID],
+    type: MenuItemType.BUTTON,
     hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_DOC)
   };
 }
@@ -373,17 +698,7 @@ const imageCommonPanel = "univer-image-common-panel", imageCommonPanelGrid = "un
   imageCommonPanelInput,
   sheetImageMenu,
   sheetImageMenuInput
-}, _DocRefreshDrawingsService = class _DocRefreshDrawingsService {
-  constructor() {
-    __publicField(this, "_refreshDrawings$", new BehaviorSubject(null));
-    __publicField(this, "refreshDrawings$", this._refreshDrawings$.asObservable());
-  }
-  refreshDrawings(skeleton) {
-    this._refreshDrawings$.next(skeleton);
-  }
 };
-__name(_DocRefreshDrawingsService, "DocRefreshDrawingsService");
-let DocRefreshDrawingsService = _DocRefreshDrawingsService;
 var TextWrappingStyle = /* @__PURE__ */ ((TextWrappingStyle2) => (TextWrappingStyle2.INLINE = "inline", TextWrappingStyle2.BEHIND_TEXT = "behindText", TextWrappingStyle2.IN_FRONT_OF_TEXT = "inFrontOfText", TextWrappingStyle2.WRAP_SQUARE = "wrapSquare", TextWrappingStyle2.WRAP_TOP_AND_BOTTOM = "wrapTopAndBottom", TextWrappingStyle2))(TextWrappingStyle || {});
 const WRAPPING_STYLE_TO_LAYOUT_TYPE = {
   inline: PositionedObjectLayoutType.INLINE,
@@ -392,7 +707,7 @@ const WRAPPING_STYLE_TO_LAYOUT_TYPE = {
   inFrontOfText: PositionedObjectLayoutType.WRAP_NONE,
   behindText: PositionedObjectLayoutType.WRAP_NONE
 };
-function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPage, offset, drawingId, documentDataModel, textSelectionRenderManager) {
+function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPage, offset, drawingId, documentDataModel, docSelectionRenderManager) {
   var _a8, _b;
   const textX = new TextX(), jsonX = JSONX.getInstance(), rawActions = [], oldBody = documentDataModel.getSelfOrHeaderFooterModel(oldSegmentId).getBody(), body = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
   if (oldBody == null || body == null)
@@ -482,7 +797,7 @@ function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPa
         len: 1,
         line: 0,
         segmentId
-      }), path = getRichTextEditPath(documentDataModel, segmentId), action = jsonX.editOp(textX.serialize(), path), rawActions.push(action), textSelectionRenderManager.setSegment(segmentId), textSelectionRenderManager.setSegmentPage(segmentPage);
+      }), path = getRichTextEditPath(documentDataModel, segmentId), action = jsonX.editOp(textX.serialize(), path), rawActions.push(action), docSelectionRenderManager.setSegment(segmentId), docSelectionRenderManager.setSegmentPage(segmentPage);
     }
     return rawActions;
   }
@@ -668,11 +983,11 @@ const UpdateDocDrawingWrappingStyleCommand = {
   id: "doc.command.move-inline-drawing",
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name((accessor, params) => {
-    var _a8;
+    var _a8, _b;
     if (params == null)
       return !1;
-    const renderManagerService = accessor.get(IRenderManagerService), textSelectionRenderManager = accessor.get(ITextSelectionRenderManager), docRefreshDrawingsService = accessor.get(DocRefreshDrawingsService), renderObject = renderManagerService.getRenderById(params.unitId), scene = renderObject == null ? void 0 : renderObject.scene, skeleton = renderObject == null ? void 0 : renderObject.with(DocSkeletonManagerService).getSkeleton();
-    if (scene == null)
+    const renderManagerService = accessor.get(IRenderManagerService), docSelectionRenderService = (_a8 = renderManagerService.getRenderById(params.unitId)) == null ? void 0 : _a8.with(DocSelectionRenderService), docRefreshDrawingsService = accessor.get(DocRefreshDrawingsService), renderObject = renderManagerService.getRenderById(params.unitId), scene = renderObject == null ? void 0 : renderObject.scene, skeleton = renderObject == null ? void 0 : renderObject.with(DocSkeletonManagerService).getSkeleton();
+    if (scene == null || docSelectionRenderService == null)
       return !1;
     const transformer = scene.getTransformerByCreate(), commandService = accessor.get(ICommandService), documentDataModel = accessor.get(IUniverInstanceService).getCurrentUniverDocInstance();
     if (documentDataModel == null)
@@ -680,14 +995,14 @@ const UpdateDocDrawingWrappingStyleCommand = {
     const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage, needRefreshDrawings } = params;
     if (needRefreshDrawings)
       return docRefreshDrawingsService.refreshDrawings(skeleton), transformer.refreshControls(), !0;
-    const rawActions = [], { drawingId } = drawing, segmentId = (_a8 = textSelectionRenderManager.getSegment()) != null ? _a8 : "", actions = getDeleteAndInsertCustomBlockActions(
+    const rawActions = [], { drawingId } = drawing, segmentId = (_b = docSelectionRenderService.getSegment()) != null ? _b : "", actions = getDeleteAndInsertCustomBlockActions(
       newSegmentId,
       segmentId,
       segmentPage,
       offset,
       drawingId,
       documentDataModel,
-      textSelectionRenderManager
+      docSelectionRenderService
     );
     if (actions == null || actions.length === 0)
       return docRefreshDrawingsService.refreshDrawings(skeleton), transformer.refreshControls(), !1;
@@ -709,23 +1024,23 @@ const UpdateDocDrawingWrappingStyleCommand = {
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: /* @__PURE__ */ __name((accessor, params) => {
-    var _a8;
+    var _a8, _b;
     if (params == null)
       return !1;
-    const textSelectionRenderManager = accessor.get(ITextSelectionRenderManager), renderObject = accessor.get(IRenderManagerService).getRenderById(params.unitId), scene = renderObject == null ? void 0 : renderObject.scene;
-    if (scene == null)
+    const renderManagerService = accessor.get(IRenderManagerService), docSelectionRenderService = (_a8 = renderManagerService.getRenderById(params.unitId)) == null ? void 0 : _a8.with(DocSelectionRenderService), renderObject = renderManagerService.getRenderById(params.unitId), scene = renderObject == null ? void 0 : renderObject.scene;
+    if (scene == null || docSelectionRenderService == null)
       return !1;
     const transformer = scene.getTransformerByCreate(), commandService = accessor.get(ICommandService), documentDataModel = accessor.get(IUniverInstanceService).getCurrentUniverDocInstance();
     if (documentDataModel == null)
       return !1;
-    const { drawing, unitId, offset, docTransform, segmentId: newSegmentId, segmentPage } = params, rawActions = [], { drawingId } = drawing, segmentId = (_a8 = textSelectionRenderManager.getSegment()) != null ? _a8 : "", actions = getDeleteAndInsertCustomBlockActions(
+    const { drawing, unitId, offset, docTransform, segmentId: newSegmentId, segmentPage } = params, rawActions = [], { drawingId } = drawing, segmentId = (_b = docSelectionRenderService.getSegment()) != null ? _b : "", actions = getDeleteAndInsertCustomBlockActions(
       newSegmentId,
       segmentId,
       segmentPage,
       offset,
       drawingId,
       documentDataModel,
-      textSelectionRenderManager
+      docSelectionRenderService
     );
     if (actions == null)
       return !1;
@@ -941,7 +1256,7 @@ const UpdateDocDrawingWrappingStyleCommand = {
     }
   )))))));
 }, "DocDrawingTextWrap"), MIN_OFFSET = -1e3, MAX_OFFSET = 1e3, DocDrawingPosition = /* @__PURE__ */ __name((props) => {
-  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), univerInstanceService = useDependency(IUniverInstanceService), textSelectionRenderService = useDependency(ITextSelectionRenderManager), { drawings } = props, drawingParam = drawings[0];
+  const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), drawingManagerService = useDependency(IDrawingManagerService), renderManagerService = useDependency(IRenderManagerService), univerInstanceService = useDependency(IUniverInstanceService), { drawings } = props, drawingParam = drawings[0];
   if (drawingParam == null)
     return;
   const { unitId } = drawingParam, documentDataModel = univerInstanceService.getUniverDocInstance(unitId), renderObject = renderManagerService.getRenderById(unitId), scene = renderObject == null ? void 0 : renderObject.scene;
@@ -976,6 +1291,7 @@ const UpdateDocDrawingWrappingStyleCommand = {
     posOffset: 0
   }), [followTextMove, setFollowTextMove] = useState(!0), [showPanel, setShowPanel] = useState(!0);
   function handlePositionChange(direction, value) {
+    var _a8;
     direction === "positionH" ? setHPosition(value) : setVPosition(value);
     const focusDrawings = drawingManagerService.getFocusDrawings();
     if (focusDrawings.length === 0)
@@ -993,7 +1309,9 @@ const UpdateDocDrawingWrappingStyleCommand = {
         key: direction,
         value
       }))
-    }), textSelectionRenderService.blur(), transformer.refreshControls();
+    });
+    const docSelectionRenderService = (_a8 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a8.with(DocSelectionRenderService);
+    docSelectionRenderService && docSelectionRenderService.blur(), transformer.refreshControls();
   }
   __name(handlePositionChange, "handlePositionChange");
   function handleHorizontalRelativeFromChange(value) {
@@ -1039,17 +1357,17 @@ const UpdateDocDrawingWrappingStyleCommand = {
   }
   __name(handleHorizontalRelativeFromChange, "handleHorizontalRelativeFromChange");
   function handleVerticalRelativeFromChange(value) {
-    var _a8, _b, _c, _d, _e;
+    var _a8, _b, _c, _d, _e, _f;
     const prevRelativeFrom = vPosition.relativeFrom, prevPosOffset = vPosition.posOffset, relativeFrom = Number(value);
     if (prevRelativeFrom === relativeFrom)
       return;
     const focusDrawings = drawingManagerService.getFocusDrawings();
     if (focusDrawings.length === 0)
       return;
-    const { drawingId, unitId: unitId2 } = focusDrawings[0], documentDataModel2 = univerInstanceService.getUniverDocInstance(unitId2), skeleton = (_a8 = renderManagerService.getRenderById(unitId2)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getSkeleton(), segmentId = textSelectionRenderService.getSegment(), segmentPage = textSelectionRenderService.getSegmentPage(), drawing = (_c = (_b = documentDataModel2 == null ? void 0 : documentDataModel2.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _b.customBlocks) == null ? void 0 : _c.find((c) => c.blockId === drawingId);
-    if (drawing == null || skeleton == null)
+    const { drawingId, unitId: unitId2 } = focusDrawings[0], documentDataModel2 = univerInstanceService.getUniverDocInstance(unitId2), skeleton = (_a8 = renderManagerService.getRenderById(unitId2)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getSkeleton(), docSelectionRenderService = (_b = renderManagerService.getRenderById(unitId2)) == null ? void 0 : _b.with(DocSelectionRenderService), segmentId = docSelectionRenderService == null ? void 0 : docSelectionRenderService.getSegment(), segmentPage = docSelectionRenderService == null ? void 0 : docSelectionRenderService.getSegmentPage(), drawing = (_d = (_c = documentDataModel2 == null ? void 0 : documentDataModel2.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _c.customBlocks) == null ? void 0 : _d.find((c) => c.blockId === drawingId);
+    if (drawing == null || skeleton == null || docSelectionRenderService == null)
       return;
-    const { startIndex } = drawing, glyph = skeleton.findNodeByCharIndex(startIndex, segmentId, segmentPage), line = (_d = glyph == null ? void 0 : glyph.parent) == null ? void 0 : _d.parent, column = line == null ? void 0 : line.parent, paragraphStartLine = column == null ? void 0 : column.lines.find((l) => l.paragraphIndex === (line == null ? void 0 : line.paragraphIndex) && l.paragraphStart), page = (_e = column == null ? void 0 : column.parent) == null ? void 0 : _e.parent;
+    const { startIndex } = drawing, glyph = skeleton.findNodeByCharIndex(startIndex, segmentId, segmentPage), line = (_e = glyph == null ? void 0 : glyph.parent) == null ? void 0 : _e.parent, column = line == null ? void 0 : line.parent, paragraphStartLine = column == null ? void 0 : column.lines.find((l) => l.paragraphIndex === (line == null ? void 0 : line.paragraphIndex) && l.paragraphStart), page = (_f = column == null ? void 0 : column.parent) == null ? void 0 : _f.parent;
     if (glyph == null || line == null || paragraphStartLine == null || column == null || page == null)
       return;
     let delta = 0;
@@ -1189,151 +1507,32 @@ const UpdateDocDrawingWrappingStyleCommand = {
     if (newDrawings.length === 0)
       return !1;
     const result = commandService.syncExecuteCommand(UpdateDrawingDocTransformCommand.id, {
-      unitId,
-      subUnitId: unitId,
-      drawings: newDrawings
-    });
-    return transformer.refreshControls(), !!result;
-  }, "handler")
-}, DeleteDocDrawingsCommand = {
-  id: "doc.command.delete-drawing",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name((accessor) => {
-    const commandService = accessor.get(ICommandService), drawings = accessor.get(IDocDrawingService).getFocusDrawings();
-    if (drawings.length === 0)
-      return !1;
-    const { unitId } = drawings[0], newDrawings = drawings.map((drawing) => {
-      const { unitId: unitId2, subUnitId, drawingId, drawingType } = drawing;
-      return {
-        unitId: unitId2,
-        subUnitId,
-        drawingId,
-        drawingType
-      };
-    });
-    return commandService.executeCommand(RemoveDocDrawingCommand.id, {
-      unitId,
-      drawings: newDrawings
-    });
-  }, "handler")
-}, SetDocDrawingArrangeCommand = {
-  id: "doc.command.set-drawing-arrange",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name((accessor, params) => {
-    const commandService = accessor.get(ICommandService), docDrawingService = accessor.get(IDocDrawingService);
-    if (params == null)
-      return !1;
-    const { unitId, subUnitId, drawingIds, arrangeType } = params, drawingOrderMapParam = { unitId, subUnitId, drawingIds };
-    let jsonOp;
-    if (arrangeType === ArrangeTypeEnum.forward ? jsonOp = docDrawingService.getForwardDrawingsOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.backward ? jsonOp = docDrawingService.getBackwardDrawingOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.front ? jsonOp = docDrawingService.getFrontDrawingsOp(drawingOrderMapParam) : arrangeType === ArrangeTypeEnum.back && (jsonOp = docDrawingService.getBackDrawingsOp(drawingOrderMapParam)), jsonOp == null)
-      return !1;
-    const { redo } = jsonOp;
-    if (redo == null)
-      return !1;
-    const rawActions = [];
-    let redoCopy = Tools.deepClone(redo);
-    redoCopy = redoCopy.slice(3), redoCopy.unshift("drawingsOrder"), rawActions.push(redoCopy);
-    const doMutation = {
-      id: RichTextEditingMutation.id,
-      params: {
-        unitId,
-        actions: [],
-        textRanges: null
-      }
-    };
-    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-  }, "handler")
-}, UngroupDocDrawingCommand = {
-  id: "doc.command.ungroup-doc-image",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name((accessor, params) => {
-    accessor.get(ICommandService), accessor.get(IUndoRedoService);
-    const docDrawingService = accessor.get(IDocDrawingService);
-    if (!params) return !1;
-    const unitIds = [];
-    return params.forEach(({ parent, children }) => {
-      unitIds.push(parent.unitId), children.forEach((child) => {
-        unitIds.push(child.unitId);
-      });
-    }), docDrawingService.getUngroupDrawingOp(params), !1;
-  }, "handler")
-}, GroupDocDrawingCommand = {
-  id: "doc.command.group-doc-image",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name((accessor, params) => {
-    accessor.get(ICommandService), accessor.get(IUndoRedoService);
-    const docDrawingService = accessor.get(IDocDrawingService);
-    if (!params) return !1;
-    const unitIds = [];
-    return params.forEach(({ parent, children }) => {
-      unitIds.push(parent.unitId), children.forEach((child) => {
-        unitIds.push(child.unitId);
-      });
-    }), docDrawingService.getGroupDrawingOp(params), !1;
-  }, "handler")
-}, InsertDocDrawingCommand = {
-  id: "doc.command.insert-doc-image",
-  type: CommandType.COMMAND,
-  // eslint-disable-next-line max-lines-per-function
-  handler: /* @__PURE__ */ __name((accessor, params) => {
-    var _a8, _b, _c, _d;
-    if (params == null)
-      return !1;
-    const commandService = accessor.get(ICommandService), textSelectionManagerService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), activeTextRange = textSelectionManagerService.getActiveTextRangeWithStyle(), documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
-    if (activeTextRange == null || documentDataModel == null)
-      return !1;
-    const unitId = documentDataModel.getUnitId(), { drawings } = params, { collapsed, startOffset, segmentId } = activeTextRange, body = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
-    if (body == null)
-      return !1;
-    const textX = new TextX(), jsonX = JSONX.getInstance(), rawActions = [], drawingOrderLength = (_b = (_a8 = documentDataModel.getSnapshot().drawingsOrder) == null ? void 0 : _a8.length) != null ? _b : 0;
-    let removeDrawingLen = 0;
-    if (collapsed)
-      startOffset > 0 && textX.push({
-        t: TextXActionType.RETAIN,
-        len: startOffset,
-        segmentId
-      });
-    else {
-      const { dos } = getRetainAndDeleteFromReplace(activeTextRange, segmentId, 0, body);
-      textX.push(...dos);
-      const removedCustomBlockIds = getCustomBlockIdsInSelections(body, [activeTextRange]), drawings2 = (_c = documentDataModel.getDrawings()) != null ? _c : {}, drawingOrder = (_d = documentDataModel.getDrawingsOrder()) != null ? _d : [], sortedRemovedCustomBlockIds = removedCustomBlockIds.sort((a, b) => drawingOrder.indexOf(a) > drawingOrder.indexOf(b) ? -1 : drawingOrder.indexOf(a) < drawingOrder.indexOf(b) ? 1 : 0);
-      if (sortedRemovedCustomBlockIds.length > 0)
-        for (const blockId of sortedRemovedCustomBlockIds) {
-          const drawing = drawings2[blockId], drawingIndex = drawingOrder.indexOf(blockId);
-          if (drawing == null || drawingIndex < 0)
-            continue;
-          const removeDrawingAction = jsonX.removeOp(["drawings", blockId], drawing), removeDrawingOrderAction = jsonX.removeOp(["drawingsOrder", drawingIndex], blockId);
-          rawActions.push(removeDrawingAction), rawActions.push(removeDrawingOrderAction), removeDrawingLen++;
-        }
-    }
-    textX.push({
-      t: TextXActionType.INSERT,
-      body: {
-        dataStream: "\b".repeat(drawings.length),
-        customBlocks: drawings.map((drawing, i) => ({
-          startIndex: i,
-          blockId: drawing.drawingId
-        }))
-      },
-      len: drawings.length,
-      line: 0,
-      segmentId
+      unitId,
+      subUnitId: unitId,
+      drawings: newDrawings
+    });
+    return transformer.refreshControls(), !!result;
+  }, "handler")
+}, DeleteDocDrawingsCommand = {
+  id: "doc.command.delete-drawing",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name((accessor) => {
+    const commandService = accessor.get(ICommandService), drawings = accessor.get(IDocDrawingService).getFocusDrawings();
+    if (drawings.length === 0)
+      return !1;
+    const { unitId } = drawings[0], newDrawings = drawings.map((drawing) => {
+      const { unitId: unitId2, subUnitId, drawingId, drawingType } = drawing;
+      return {
+        unitId: unitId2,
+        subUnitId,
+        drawingId,
+        drawingType
+      };
+    });
+    return commandService.executeCommand(RemoveDocDrawingCommand.id, {
+      unitId,
+      drawings: newDrawings
     });
-    const path = getRichTextEditPath(documentDataModel, segmentId), placeHolderAction = jsonX.editOp(textX.serialize(), path);
-    rawActions.push(placeHolderAction);
-    for (const drawing of drawings) {
-      const { drawingId } = drawing, addDrawingAction = jsonX.insertOp(["drawings", drawingId], drawing), addDrawingOrderAction = jsonX.insertOp(["drawingsOrder", drawingOrderLength - removeDrawingLen], drawingId);
-      rawActions.push(addDrawingAction), rawActions.push(addDrawingOrderAction);
-    }
-    const doMutation = {
-      id: RichTextEditingMutation.id,
-      params: {
-        unitId,
-        actions: [],
-        textRanges: []
-      }
-    };
-    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
   }, "handler")
 };
 function whenDocDrawingFocused(contextService) {
@@ -1388,31 +1587,37 @@ const MoveDrawingDownShortcutItem = {
   preconditions: whenDocDrawingFocused,
   binding: KeyCode.DELETE,
   mac: KeyCode.BACKSPACE
+}, menuSchema = {
+  [RibbonStartGroup.LAYOUT]: {
+    [IMAGE_MENU_ID]: {
+      order: 0,
+      menuItemFactory: ImageMenuFactory,
+      [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+        order: 0,
+        menuItemFactory: UploadFloatImageMenuFactory
+      }
+    }
+  }
 };
-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--)
+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$5(target, key, result), result;
-}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5"), _a2;
-let DocDrawingUIController = (_a2 = class extends Disposable {
-  constructor(_injector, _componentManager, _menuService, _commandService, _shortcutService) {
-    super(), this._injector = _injector, this._componentManager = _componentManager, this._menuService = _menuService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._init();
+  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"), _a3;
+let DocDrawingUIController = (_a3 = class extends Disposable {
+  constructor(_componentManager, _menuManagerService, _commandService, _shortcutService) {
+    super(), this._componentManager = _componentManager, this._menuManagerService = _menuManagerService, this._commandService = _commandService, this._shortcutService = _shortcutService, this._init();
   }
   _initCustomComponents() {
     const componentManager = this._componentManager;
-    this.disposeWithMe(componentManager.register(ImageUploadIcon, AddImageSingle)), this.disposeWithMe(componentManager.register(COMPONENT_DOC_UPLOAD_FILE_MENU, UploadFileMenu)), this.disposeWithMe(componentManager.register(COMPONENT_DOC_DRAWING_PANEL, DocDrawingPanel));
+    this.disposeWithMe(componentManager.register(ImageUploadIcon, AddImageSingle)), this.disposeWithMe(componentManager.register(COMPONENT_DOC_DRAWING_PANEL, DocDrawingPanel));
   }
   _initMenus() {
-    [
-      ImageMenuFactory,
-      UploadFloatImageMenuFactory
-    ].forEach((factory) => {
-      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(factory), {}));
-    });
+    this._menuManagerService.mergeMenu(menuSchema);
   }
   _initCommands() {
     [
-      InsertDocImageOperation,
+      InsertDocImageCommand,
       InsertDocDrawingCommand,
       UpdateDocDrawingWrappingStyleCommand,
       UpdateDocDrawingDistanceCommand,
@@ -1446,251 +1651,14 @@ let DocDrawingUIController = (_a2 = class extends Disposable {
   _init() {
     this._initCommands(), this._initCustomComponents(), this._initMenus(), this._initShortcuts();
   }
-}, __name(_a2, "DocDrawingUIController"), _a2);
-DocDrawingUIController = __decorateClass$5([
+}, __name(_a3, "DocDrawingUIController"), _a3);
+DocDrawingUIController = __decorateClass$4([
   OnLifecycle(LifecycleStages.Ready, DocDrawingUIController),
-  __decorateParam$5(0, Inject(Injector)),
-  __decorateParam$5(1, Inject(ComponentManager)),
-  __decorateParam$5(2, IMenuService),
-  __decorateParam$5(3, ICommandService),
-  __decorateParam$5(4, IShortcutService)
+  __decorateParam$4(0, Inject(ComponentManager)),
+  __decorateParam$4(1, IMenuManagerService),
+  __decorateParam$4(2, ICommandService),
+  __decorateParam$4(3, IShortcutService)
 ], DocDrawingUIController);
-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"), _a3;
-let DocDrawingUpdateRenderController = (_a3 = class extends Disposable {
-  constructor(_context, _commandService, _textSelectionManagerService, _renderManagerSrv, _imageIoService, _docDrawingService, _drawingManagerService, _contextService, _messageService, _localeService, _textSelectionManager, _textSelectionRenderManager, _docRefreshDrawingsService) {
-    super(), this._context = _context, this._commandService = _commandService, this._textSelectionManagerService = _textSelectionManagerService, this._renderManagerSrv = _renderManagerSrv, this._imageIoService = _imageIoService, this._docDrawingService = _docDrawingService, this._drawingManagerService = _drawingManagerService, this._contextService = _contextService, this._messageService = _messageService, this._localeService = _localeService, this._textSelectionManager = _textSelectionManager, this._textSelectionRenderManager = _textSelectionRenderManager, this._docRefreshDrawingsService = _docRefreshDrawingsService, this._initCommandListeners(), this._updateDrawingListener(), this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener(), this._editAreaChangeListener();
-  }
-  /**
-   * Upload image to cell or float image
-   */
-  _initCommandListeners() {
-    this.disposeWithMe(
-      this._commandService.onCommandExecuted(async (command) => {
-        if (command.id === InsertDocImageOperation.id) {
-          const params = command.params;
-          if (params.files == null)
-            return;
-          const fileLength = params.files.length;
-          if (fileLength > DRAWING_IMAGE_COUNT_LIMIT) {
-            this._messageService.show({
-              type: MessageType.Error,
-              content: this._localeService.t("update-status.exceedMaxCount", String(DRAWING_IMAGE_COUNT_LIMIT))
-            });
-            return;
-          }
-          this._imageIoService.setWaitCount(fileLength), await this._insertFloatImages(params.files);
-        }
-      })
-    );
-  }
-  // eslint-disable-next-line max-lines-per-function
-  async _insertFloatImages(files) {
-    let imageParams = [];
-    try {
-      imageParams = await Promise.all(files.map((file) => this._imageIoService.saveImage(file)));
-    } catch (error) {
-      const type = error.message;
-      let content = "";
-      switch (type) {
-        case ImageUploadStatusType.ERROR_EXCEED_SIZE:
-          content = this._localeService.t("update-status.exceedMaxSize", String(DRAWING_IMAGE_ALLOW_SIZE / (1024 * 1024)));
-          break;
-        case ImageUploadStatusType.ERROR_IMAGE_TYPE:
-          content = this._localeService.t("update-status.invalidImageType");
-          break;
-        case ImageUploadStatusType.ERROR_IMAGE:
-          content = this._localeService.t("update-status.invalidImage");
-          break;
-      }
-      this._messageService.show({
-        type: MessageType.Error,
-        content
-      });
-    }
-    if (imageParams.length === 0)
-      return;
-    const { unitId } = this._context, docDrawingParams = [];
-    for (const imageParam of imageParams) {
-      if (imageParam == null)
-        continue;
-      const { imageId, imageSourceType, source, base64Cache } = imageParam, { width, height, image } = await getImageSize(base64Cache || "");
-      this._imageIoService.addImageSourceCache(imageId, imageSourceType, image);
-      let scale = 1;
-      if (width > DRAWING_IMAGE_WIDTH_LIMIT || height > DRAWING_IMAGE_HEIGHT_LIMIT) {
-        const scaleWidth = DRAWING_IMAGE_WIDTH_LIMIT / width, scaleHeight = DRAWING_IMAGE_HEIGHT_LIMIT / height;
-        scale = Math.min(scaleWidth, scaleHeight);
-      }
-      const docTransform = this._getImagePosition(width * scale, height * scale);
-      if (docTransform == null)
-        return;
-      const docDrawingParam = {
-        unitId,
-        subUnitId: unitId,
-        drawingId: imageId,
-        drawingType: DrawingTypeEnum.DRAWING_IMAGE,
-        imageSourceType,
-        source,
-        transform: docDrawingPositionToTransform(docTransform),
-        docTransform,
-        behindDoc: BooleanNumber.FALSE,
-        title: "",
-        description: "",
-        layoutType: PositionedObjectLayoutType.INLINE,
-        // Insert inline drawing by default.
-        wrapText: WrapTextType.BOTH_SIDES,
-        distB: 0,
-        distL: 0,
-        distR: 0,
-        distT: 0
-      };
-      this._isInsertInHeaderFooter() && (docDrawingParam.isMultiTransform = BooleanNumber.TRUE, docDrawingParam.transforms = docDrawingParam.transform ? [docDrawingParam.transform] : null), docDrawingParams.push(docDrawingParam);
-    }
-    this._commandService.executeCommand(InsertDocDrawingCommand.id, {
-      unitId,
-      drawings: docDrawingParams
-    });
-  }
-  _isInsertInHeaderFooter() {
-    var _a8;
-    const { unitId } = this._context, viewModel = (_a8 = this._renderManagerSrv.getRenderById(unitId)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getViewModel(), editArea = viewModel == null ? void 0 : viewModel.getEditArea();
-    return editArea === DocumentEditArea.HEADER || editArea === DocumentEditArea.FOOTER;
-  }
-  _getImagePosition(imageWidth, imageHeight) {
-    const activeTextRange = this._textSelectionManagerService.getActiveTextRange(), position = (activeTextRange == null ? void 0 : activeTextRange.getAbsolutePosition()) || {
-      left: 0,
-      top: 0
-    };
-    return {
-      size: {
-        width: imageWidth,
-        height: imageHeight
-      },
-      positionH: {
-        relativeFrom: ObjectRelativeFromH.PAGE,
-        posOffset: position.left
-      },
-      positionV: {
-        relativeFrom: ObjectRelativeFromV.MARGIN,
-        posOffset: position.top
-      },
-      angle: 0
-    };
-  }
-  _updateOrderListener() {
-    this._drawingManagerService.featurePluginOrderUpdate$.subscribe((params) => {
-      const { unitId, subUnitId, drawingIds, arrangeType } = params;
-      this._commandService.executeCommand(SetDocDrawingArrangeCommand.id, {
-        unitId,
-        subUnitId,
-        drawingIds,
-        arrangeType
-      });
-    });
-  }
-  _updateDrawingListener() {
-    this._drawingManagerService.featurePluginUpdate$.subscribe((params) => {
-    });
-  }
-  _groupDrawingListener() {
-    this._drawingManagerService.featurePluginGroupUpdate$.subscribe((params) => {
-      this._commandService.executeCommand(GroupDocDrawingCommand.id, params);
-    }), this._drawingManagerService.featurePluginUngroupUpdate$.subscribe((params) => {
-      this._commandService.executeCommand(UngroupDocDrawingCommand.id, params);
-    });
-  }
-  _getCurrentSceneAndTransformer() {
-    const { scene, mainComponent } = this._context;
-    if (scene == null || mainComponent == null)
-      return;
-    const transformer = scene.getTransformerByCreate(), { docsLeft, docsTop } = mainComponent.getOffsetConfig();
-    return { scene, transformer, docsLeft, docsTop };
-  }
-  _focusDrawingListener() {
-    this.disposeWithMe(
-      this._drawingManagerService.focus$.subscribe((params) => {
-        var _a8;
-        const { transformer, docsLeft, docsTop } = (_a8 = this._getCurrentSceneAndTransformer()) != null ? _a8 : {};
-        if (params == null || params.length === 0)
-          this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, !1), this._docDrawingService.focusDrawing([]), transformer && transformer.resetProps({
-            zeroTop: 0,
-            zeroLeft: 0
-          });
-        else {
-          this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, !0), this._docDrawingService.focusDrawing(params), this._textSelectionManager.getActiveTextRange() && this._textSelectionManager.replaceTextRanges([]);
-          const prevSegmentId = this._textSelectionRenderManager.getSegment(), segmentId = this._findSegmentIdByDrawingId(params[0].drawingId);
-          prevSegmentId !== segmentId && this._textSelectionRenderManager.setSegment(segmentId), transformer && transformer.resetProps({
-            zeroTop: docsTop,
-            zeroLeft: docsLeft
-          });
-        }
-      })
-    );
-  }
-  _findSegmentIdByDrawingId(drawingId) {
-    var _a8, _b, _c;
-    const { unit: DocDataModel } = this._context, { body, headers = {}, footers = {} } = DocDataModel.getSnapshot();
-    if (((_a8 = body == null ? void 0 : body.customBlocks) != null ? _a8 : []).some((b) => b.blockId === drawingId))
-      return "";
-    for (const headerId of Object.keys(headers))
-      if ((_b = headers[headerId].body.customBlocks) != null && _b.some((b) => b.blockId === drawingId))
-        return headerId;
-    for (const footerId of Object.keys(footers))
-      if ((_c = footers[footerId].body.customBlocks) != null && _c.some((b) => b.blockId === drawingId))
-        return footerId;
-    return "";
-  }
-  // Update drawings edit status and opacity. You can not edit header footer images when you are editing body. and vice verse.
-  _updateDrawingsEditStatus() {
-    var _a8;
-    const { unit: docDataModel, scene, unitId } = this._context, viewModel = (_a8 = this._renderManagerSrv.getRenderById(unitId)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getViewModel();
-    if (viewModel == null || docDataModel == null)
-      return;
-    const snapshot = docDataModel.getSnapshot(), { drawings = {} } = snapshot, isEditBody = viewModel.getEditArea() === DocumentEditArea.BODY;
-    for (const key of Object.keys(drawings)) {
-      const drawing = drawings[key], objectKey = getDrawingShapeKeyByDrawingSearch({ unitId, drawingId: drawing.drawingId, subUnitId: unitId }), drawingShapes = scene.fuzzyMathObjects(objectKey, !0);
-      if (drawingShapes.length)
-        for (const shape of drawingShapes)
-          scene.detachTransformerFrom(shape), shape.setOpacity(0.5), (isEditBody && drawing.isMultiTransform !== BooleanNumber.TRUE || !isEditBody && drawing.isMultiTransform === BooleanNumber.TRUE) && (scene.attachTransformerTo(shape), shape.setOpacity(1));
-    }
-  }
-  _editAreaChangeListener() {
-    var _a8;
-    const { unitId } = this._context, viewModel = (_a8 = this._renderManagerSrv.getRenderById(unitId)) == null ? void 0 : _a8.with(DocSkeletonManagerService).getViewModel();
-    viewModel != null && (this._updateDrawingsEditStatus(), this.disposeWithMe(
-      viewModel.editAreaChange$.subscribe(() => {
-        this._updateDrawingsEditStatus();
-      })
-    ), this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
-      skeleton != null && queueMicrotask(() => {
-        this._updateDrawingsEditStatus();
-      });
-    }), this.disposeWithMe(
-      this._commandService.onCommandExecuted(async (command) => {
-        command.id === RichTextEditingMutation.id && queueMicrotask(() => {
-          this._updateDrawingsEditStatus();
-        });
-      })
-    ));
-  }
-}, __name(_a3, "DocDrawingUpdateRenderController"), _a3);
-DocDrawingUpdateRenderController = __decorateClass$4([
-  __decorateParam$4(1, ICommandService),
-  __decorateParam$4(2, Inject(TextSelectionManagerService)),
-  __decorateParam$4(3, IRenderManagerService),
-  __decorateParam$4(4, IImageIoService),
-  __decorateParam$4(5, IDocDrawingService),
-  __decorateParam$4(6, IDrawingManagerService),
-  __decorateParam$4(7, IContextService),
-  __decorateParam$4(8, IMessageService),
-  __decorateParam$4(9, Inject(LocaleService)),
-  __decorateParam$4(10, Inject(TextSelectionManagerService)),
-  __decorateParam$4(11, ITextSelectionRenderManager),
-  __decorateParam$4(12, Inject(DocRefreshDrawingsService))
-], DocDrawingUpdateRenderController);
 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);
@@ -1976,14 +1944,14 @@ function isInTableCell(nodePosition) {
 __name(isInTableCell, "isInTableCell");
 var _a6;
 let DocDrawingTransformerController = (_a6 = class extends Disposable {
-  constructor(_commandService, _univerInstanceService, _drawingManagerService, _renderManagerService, _textSelectionRenderManager) {
+  constructor(_commandService, _univerInstanceService, _drawingManagerService, _renderManagerService) {
     super();
     __publicField(this, "_liquid", new Liquid());
     __publicField(this, "_listenerOnImageMap", /* @__PURE__ */ new Set());
     // Use to cache the drawings is under transforming or scaling.
     __publicField(this, "_transformerCache", /* @__PURE__ */ new Map());
     __publicField(this, "_anchorShape");
-    this._commandService = _commandService, this._univerInstanceService = _univerInstanceService, this._drawingManagerService = _drawingManagerService, this._renderManagerService = _renderManagerService, this._textSelectionRenderManager = _textSelectionRenderManager, this._init();
+    this._commandService = _commandService, this._univerInstanceService = _univerInstanceService, this._drawingManagerService = _drawingManagerService, this._renderManagerService = _renderManagerService, this._init();
   }
   _init() {
     this._listenDrawingFocus();
@@ -2137,7 +2105,7 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
     contentBoxPointGroup != null && this._createOrUpdateInlineAnchor(drawing.unitId, contentBoxPointGroup);
   }
   _getInlineDrawingAnchor(drawing, offsetX, offsetY) {
-    var _a8;
+    var _a8, _b;
     const currentRender = this._renderManagerService.getRenderById(drawing.unitId), skeleton = currentRender == null ? void 0 : currentRender.with(DocSkeletonManagerService).getSkeleton();
     if (currentRender == null)
       return;
@@ -2150,6 +2118,9 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
     const HALF = 0.5, coord = this._getTransformCoordForDocumentOffset(documentComponent, activeViewport, offsetX, offsetY);
     if (coord == null)
       return;
+    const docSelectionRenderService = (_a8 = this._renderManagerService.getRenderById(drawing.unitId)) == null ? void 0 : _a8.with(DocSelectionRenderService);
+    if (docSelectionRenderService == null)
+      return;
     const nodeInfo = skeleton == null ? void 0 : skeleton.findNodeByCoord(
       coord,
       pageLayoutType,
@@ -2157,8 +2128,8 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
       pageMarginTop,
       {
         strict: !1,
-        segmentId: this._textSelectionRenderManager.getSegment(),
-        segmentPage: this._textSelectionRenderManager.getSegmentPage()
+        segmentId: docSelectionRenderService.getSegment(),
+        segmentPage: docSelectionRenderService.getSegmentPage()
       }
     );
     if (nodeInfo) {
@@ -2173,13 +2144,13 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
     const positionWithIsBack = {
       ...nodePosition,
       isBack
-    }, documentOffsetConfig = docObject.document.getOffsetConfig(), convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { cursorList, contentBoxPointGroup } = convertor.getRangePointData(positionWithIsBack, positionWithIsBack), { startOffset } = (_a8 = getOneTextSelectionRange(cursorList)) != null ? _a8 : {};
+    }, documentOffsetConfig = docObject.document.getOffsetConfig(), convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { cursorList, contentBoxPointGroup } = convertor.getRangePointData(positionWithIsBack, positionWithIsBack), { startOffset } = (_b = getOneTextSelectionRange(cursorList)) != null ? _b : {};
     if (startOffset != null)
       return { offset: startOffset, contentBoxPointGroup, segmentId, segmentPage: segmentPageIndex };
   }
   // eslint-disable-next-line max-lines-per-function, complexity
   _getDrawingAnchor(drawing, object) {
-    var _a8, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a8, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const currentRender = this._renderManagerService.getRenderById(drawing.unitId), skeleton = currentRender == null ? void 0 : currentRender.with(DocSkeletonManagerService).getSkeleton(), skeletonData = skeleton == null ? void 0 : skeleton.getSkeletonData();
     if (skeletonData == null || currentRender == null)
       return;
@@ -2198,10 +2169,13 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
     }, { x, y } = scene.getViewportScrollXY(activeViewport), coord = this._getTransformCoordForDocumentOffset(documentComponent, activeViewport, left - x, top - y);
     if (coord == null)
       return;
+    const docSelectionRenderService = (_a8 = this._renderManagerService.getRenderById(drawing.unitId)) == null ? void 0 : _a8.with(DocSelectionRenderService);
+    if (docSelectionRenderService == null)
+      return;
     const nodeInfo = skeleton == null ? void 0 : skeleton.findNodeByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop, {
       strict: !1,
-      segmentId: this._textSelectionRenderManager.getSegment(),
-      segmentPage: this._textSelectionRenderManager.getSegmentPage()
+      segmentId: docSelectionRenderService.getSegment(),
+      segmentPage: docSelectionRenderService.getSegmentPage()
     });
     if (nodeInfo) {
       const { node, segmentPage: segmentPageIndex, segmentId: nodeSegmentId } = nodeInfo;
@@ -2209,7 +2183,7 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
     }
     if (glyphAnchor == null)
       return;
-    const line = (_a8 = glyphAnchor.parent) == null ? void 0 : _a8.parent, column = line == null ? void 0 : line.parent, paragraphStartLine = (_b = column == null ? void 0 : column.lines.find((l) => l.paragraphIndex === (line == null ? void 0 : line.paragraphIndex) && l.paragraphStart)) != null ? _b : column == null ? void 0 : column.lines[0], page = (_c = column == null ? void 0 : column.parent) == null ? void 0 : _c.parent;
+    const line = (_b = glyphAnchor.parent) == null ? void 0 : _b.parent, column = line == null ? void 0 : line.parent, paragraphStartLine = (_c = column == null ? void 0 : column.lines.find((l) => l.paragraphIndex === (line == null ? void 0 : line.paragraphIndex) && l.paragraphStart)) != null ? _c : column == null ? void 0 : column.lines[0], page = (_d = column == null ? void 0 : column.parent) == null ? void 0 : _d.parent;
     if (line == null || column == null || paragraphStartLine == null || page == null)
       return;
     this._liquid.reset();
@@ -2219,7 +2193,7 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
       if (segmentPage > -1 && pIndex === segmentPage) {
         switch (pageType) {
           case DocumentSkeletonPageType.HEADER: {
-            const headerSke = (_d = skeHeaders.get(headerId)) == null ? void 0 : _d.get(pageWidth);
+            const headerSke = (_e = skeHeaders.get(headerId)) == null ? void 0 : _e.get(pageWidth);
             if (headerSke)
               this._liquid.translatePagePadding({
                 marginTop: headerSke.marginTop,
@@ -2230,7 +2204,7 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
             break;
           }
           case DocumentSkeletonPageType.FOOTER: {
-            const footerSke = (_e = skeFooters.get(footerId)) == null ? void 0 : _e.get(pageWidth);
+            const footerSke = (_f = skeFooters.get(footerId)) == null ? void 0 : _f.get(pageWidth);
             if (footerSke)
               this._liquid.translatePagePadding({
                 marginTop: pageHeight - marginBottom + footerSke.marginTop,
@@ -2247,7 +2221,7 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
         break;
       this._liquid.restorePagePadding(p), this._liquid.translatePage(p, pageLayoutType, pageMarginLeft, pageMarginTop);
     }
-    switch (positionV.relativeFrom === ObjectRelativeFromV.LINE ? glyphAnchor = line.divides[0].glyphGroup[0] : glyphAnchor = (_i = (_h = (_g = (_f = paragraphStartLine.divides) == null ? void 0 : _f[0]) == null ? void 0 : _g.glyphGroup) == null ? void 0 : _h[0]) != null ? _i : glyphAnchor, docTransform.positionH = {
+    switch (positionV.relativeFrom === ObjectRelativeFromV.LINE ? glyphAnchor = line.divides[0].glyphGroup[0] : glyphAnchor = (_j = (_i = (_h = (_g = paragraphStartLine.divides) == null ? void 0 : _g[0]) == null ? void 0 : _h.glyphGroup) == null ? void 0 : _i[0]) != null ? _j : glyphAnchor, docTransform.positionH = {
       relativeFrom: positionH.relativeFrom,
       posOffset: left - this._liquid.x - docsLeft
     }, positionH.relativeFrom) {
@@ -2285,7 +2259,7 @@ let DocDrawingTransformerController = (_a6 = class extends Disposable {
     const positionWithIsBack = {
       ...nodePosition,
       isBack
-    }, documentOffsetConfig = docObject.document.getOffsetConfig(), convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { cursorList } = convertor.getRangePointData(positionWithIsBack, positionWithIsBack), { startOffset } = (_j = getOneTextSelectionRange(cursorList)) != null ? _j : {};
+    }, documentOffsetConfig = docObject.document.getOffsetConfig(), convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { cursorList } = convertor.getRangePointData(positionWithIsBack, positionWithIsBack), { startOffset } = (_k = getOneTextSelectionRange(cursorList)) != null ? _k : {};
     if (startOffset != null)
       return { offset: startOffset, docTransform, segmentId, segmentPage };
   }
@@ -2450,19 +2424,21 @@ DocDrawingTransformerController = __decorateClass$1([
   __decorateParam$1(0, ICommandService),
   __decorateParam$1(1, IUniverInstanceService),
   __decorateParam$1(2, IDrawingManagerService),
-  __decorateParam$1(3, IRenderManagerService),
-  __decorateParam$1(4, ITextSelectionRenderManager)
+  __decorateParam$1(3, IRenderManagerService)
 ], DocDrawingTransformerController);
+const PLUGIN_CONFIG_KEY = "docs-drawing-ui.config", defaultPluginConfig = {};
 var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __defNormalProp2 = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, "__defNormalProp"), __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"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, typeof key != "symbol" ? key + "" : key, value), "__publicField");
-const PLUGIN_NAME = "DOCS_DRAWING_UI_PLUGIN";
+const PLUGIN_NAME = "DOC_DRAWING_UI_PLUGIN";
 var _a7;
 let UniverDocsDrawingUIPlugin = (_a7 = class extends Plugin {
-  constructor(_config, _injector, _renderManagerSrv) {
-    super(), this._injector = _injector, this._renderManagerSrv = _renderManagerSrv;
+  constructor(_config = defaultPluginConfig, _injector, _renderManagerSrv, _configService) {
+    super(), this._config = _config, this._injector = _injector, this._renderManagerSrv = _renderManagerSrv, this._configService = _configService;
+    const { ...rest } = this._config;
+    this._configService.setConfig(PLUGIN_CONFIG_KEY, rest);
   }
   onStarting() {
     [
@@ -2485,17 +2461,17 @@ __publicField2(UniverDocsDrawingUIPlugin, "pluginName", PLUGIN_NAME);
 UniverDocsDrawingUIPlugin = __decorateClass([
   DependentOn(UniverDrawingUIPlugin, UniverDrawingPlugin, UniverDocsDrawingPlugin),
   __decorateParam(1, Inject(Injector)),
-  __decorateParam(2, IRenderManagerService)
+  __decorateParam(2, IRenderManagerService),
+  __decorateParam(3, IConfigService)
 ], UniverDocsDrawingUIPlugin);
 export {
-  COMPONENT_DOC_UPLOAD_FILE_MENU,
   ClearDocDrawingTransformerOperation,
   DeleteDocDrawingsCommand,
   EditDocDrawingOperation,
   GroupDocDrawingCommand,
   IMAGE_MENU_ID,
   InsertDocDrawingCommand,
-  InsertDocImageOperation,
+  InsertDocImageCommand,
   MoveDocDrawingsCommand,
   RemoveDocDrawingCommand,
   SetDocDrawingArrangeCommand,