@univerjs/docs-drawing-ui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/lib/es/index.js

@@ -1,87 +1,16 @@
-import { AlignTypeH, AlignTypeV, ArrangeTypeEnum, BooleanNumber, BuildTextUtils, COLORS, CommandType, DOC_DRAWING_PRINTING_COMPONENT_KEY, DependentOn, Direction, Disposable, DisposableCollection, DocumentFlavor, DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, ICommandService, IConfigService, IContextService, IUniverInstanceService, Inject, Injector, JSONX, LifecycleService, LifecycleStages, LocaleService, MemoryCursor, ObjectRelativeFromH, ObjectRelativeFromV, Plugin, PositionedObjectLayoutType, RedoCommand, RxDisposable, TextX, TextXActionType, Tools, UndoCommand, UniverInstanceType, WrapTextType, fromEventSubject, generateRandomId, getRichTextEditPath, isInternalEditorID, merge, throttle, toDisposable } from "@univerjs/core";
-import { IDocDrawingService, UniverDocsDrawingPlugin, getDocDrawingRenderOrder } from "@univerjs/docs-drawing";
-import { DocContentInsertService, DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation } from "@univerjs/docs";
-import { DOC_CONTENT_INSERT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DocCanvasPopManagerService, DocPrintInterceptorService, DocSelectionRenderService, EMPTY_PARAGRAPH_MENU_ID, IEditorService, INSERT_BELLOW_MENU_ID, NodePositionConvertToCursor, SetDocZoomRatioOperation, TEXT_RANGE_LAYER_INDEX, VIEWPORT_KEY, docDrawingPositionToTransform, getAnchorBounding, getCustomBlockIdsInSelections, getDocObject, getOneTextSelectionRange } from "@univerjs/docs-ui";
+import { AlignTypeH, AlignTypeV, BooleanNumber, COLORS, CommandType, DOC_DRAWING_PRINTING_COMPONENT_KEY, DependentOn, Direction, Disposable, DisposableCollection, DocumentFlavor, DrawingTypeEnum, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, ICommandService, IConfigService, IContextService, IImageIoService, IUniverInstanceService, ImageSourceType, ImageUploadStatusType, Inject, Injector, JSONX, LifecycleService, LifecycleStages, LocaleService, ObjectRelativeFromH, ObjectRelativeFromV, Plugin, PositionedObjectLayoutType, RedoCommand, RxDisposable, TextX, TextXActionType, Tools, UndoCommand, UniverInstanceType, WrapTextType, fromEventSubject, generateRandomId, getRichTextEditPath, isInternalEditorID, merge, throttle, toDisposable } from "@univerjs/core";
+import { IDocDrawingAdapterService, IDocDrawingService, InsertDocDrawingCommand, RemoveDocDrawingCommand, SetDocDrawingArrangeCommand, TextWrappingStyle, UniverDocsDrawingPlugin, UpdateDocDrawingWrappingStyleCommand, UpdateDrawingDocTransformCommand, getDocDrawingRenderOrder } from "@univerjs/docs-drawing";
 import { CURSOR_TYPE, DocumentEditArea, DocumentSkeletonPageType, IRenderManagerService, Liquid, PageLayoutType, Rect, TRANSFORM_CHANGE_OBSERVABLE_TYPE, Vector2, getColor, getCurrentTypeOfRenderer, getDocsTableRenderViewport, getTableIdAndSliceIndex } from "@univerjs/engine-render";
 import { Checkbox, InputNumber, MessageType, Radio, RadioGroup, Select, clsx, render, unmount } from "@univerjs/design";
-import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, IDrawingManagerService, IImageIoService, ImageSourceType, ImageUploadStatusType, UniverDrawingPlugin, getDrawingImageAllowSize, getDrawingShapeKeyByDrawingSearch, getImageSize } from "@univerjs/drawing";
-import { CanvasFloatDomService, ComponentManager, ContextMenuGroup, ContextMenuPosition, ILocalFileService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, KeyCode, MenuItemType, PrintFloatDomSingle, RibbonInsertGroup, UniverUIPlugin, connectInjector, getMenuHiddenObservable, useDependency } from "@univerjs/ui";
+import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation, buildDocTransform, docDrawingPositionToTransform } from "@univerjs/docs";
+import { DOC_CONTENT_INSERT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DocCanvasPopManagerService, DocPrintInterceptorService, DocSelectionRenderService, EMPTY_PARAGRAPH_MENU_ID, IEditorService, INSERT_BELLOW_MENU_ID, NodePositionConvertToCursor, SetDocZoomRatioOperation, TEXT_RANGE_LAYER_INDEX, VIEWPORT_KEY, getAnchorBounding, getDocObject, getOneTextSelectionRange } from "@univerjs/docs-ui";
+import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, DRAWING_IMAGE_COUNT_LIMIT, DRAWING_IMAGE_HEIGHT_LIMIT, DRAWING_IMAGE_WIDTH_LIMIT, IDrawingManagerService, UniverDrawingPlugin, getDrawingImageAllowSize, getDrawingShapeKeyByDrawingSearch, getImageSize } from "@univerjs/drawing";
+import { CanvasFloatDomService, ComponentManager, ContextMenuGroup, ContextMenuPosition, ILocalFileService, IMenuManagerService, IMessageService, IShortcutService, ISidebarService, KeyCode, MenuItemType, PrintFloatDomSingle, RibbonInsertGroup, UniverUIPlugin, connectInjector, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
 import { BehaviorSubject, Observable, debounceTime, filter, map, of, switchMap, takeUntil } from "rxjs";
 import { COMPONENT_IMAGE_POPUP_MENU, DrawingCommonPanel, DrawingRenderService, ImageCropperObject, ImageResetSizeOperation, OpenImageCropOperation, UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/commands/commands/remove-doc-drawing.command.ts
-/**
-* The command to remove new sheet image
-*/
-const RemoveDocDrawingCommand = {
-	id: "doc.command.remove-doc-image",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _docSelectionRenderSe, _documentDataModel$ge, _documentDataModel$ge2;
-		const commandService = accessor.get(ICommandService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const renderManagerService = accessor.get(IRenderManagerService);
-		const documentDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
-		if (params == null || documentDataModel == null) return false;
-		const docSelectionRenderService = renderManagerService.getRenderById(params.unitId).with(DocSelectionRenderService);
-		const { drawings: removeDrawings } = params;
-		const segmentId = (_docSelectionRenderSe = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : "";
-		const textX = new TextX();
-		const jsonX = JSONX.getInstance();
-		const customBlocks = (_documentDataModel$ge = (_documentDataModel$ge2 = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge2 === void 0 || (_documentDataModel$ge2 = _documentDataModel$ge2.getBody()) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.customBlocks) !== null && _documentDataModel$ge !== void 0 ? _documentDataModel$ge : [];
-		const removeCustomBlocks = removeDrawings.map((drawing) => customBlocks.find((customBlock) => customBlock.blockId === drawing.drawingId)).filter((block) => !!block).sort((a, b) => a.startIndex > b.startIndex ? 1 : -1);
-		const unitId = removeDrawings[0].unitId;
-		const memoryCursor = new MemoryCursor();
-		memoryCursor.reset();
-		const cursorIndex = removeCustomBlocks[0].startIndex;
-		const textRanges = [{
-			startOffset: cursorIndex,
-			endOffset: cursorIndex
-		}];
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges
-			}
-		};
-		const rawActions = [];
-		for (const block of removeCustomBlocks) {
-			const { startIndex } = block;
-			if (startIndex > memoryCursor.cursor) textX.push({
-				t: TextXActionType.RETAIN,
-				len: startIndex - memoryCursor.cursor
-			});
-			textX.push({
-				t: TextXActionType.DELETE,
-				len: 1
-			});
-			memoryCursor.moveCursorTo(startIndex + 1);
-		}
-		const path = getRichTextEditPath(documentDataModel, segmentId);
-		rawActions.push(jsonX.editOp(textX.serialize(), path));
-		for (const block of removeCustomBlocks) {
-			var _documentDataModel$ge3;
-			const { blockId } = block;
-			const drawing = ((_documentDataModel$ge3 = documentDataModel.getDrawings()) !== null && _documentDataModel$ge3 !== void 0 ? _documentDataModel$ge3 : {})[blockId];
-			const drawingIndex = documentDataModel.getDrawingsOrder().indexOf(blockId);
-			const removeDrawingAction = jsonX.removeOp(["drawings", blockId], drawing);
-			const removeDrawingOrderAction = jsonX.removeOp(["drawingsOrder", drawingIndex], blockId);
-			rawActions.push(removeDrawingAction);
-			rawActions.push(removeDrawingOrderAction);
-		}
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		return Boolean(result);
-	}
-};
-
-//#endregion
 //#region src/commands/commands/delete-doc-drawing.command.ts
 const DeleteDocDrawingsCommand = {
 	id: "doc.command.delete-drawing",
@@ -120,168 +49,6 @@ const GroupDocDrawingCommand = {
 	}
 };
 
-//#endregion
-//#region src/commands/commands/insert-doc-drawing.command.ts
-/**
-* The command to insert new drawings
-*/
-const InsertDocDrawingCommand = {
-	id: "doc.command.insert-doc-image",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _ref, _contentInsertRange$s, _documentDataModel$ge, _documentDataModel$ge2, _documentDataModel$ge3;
-		if (params == null) return false;
-		const commandService = accessor.get(ICommandService);
-		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const activeTextRange = docSelectionManagerService.getActiveTextRange();
-		const documentDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const unitId = documentDataModel.getUnitId();
-		const contentInsertRange = getContentInsertRange(accessor, unitId);
-		const targetTextRange = contentInsertRange ? {
-			...activeTextRange,
-			startOffset: contentInsertRange.startOffset,
-			endOffset: contentInsertRange.endOffset,
-			collapsed: contentInsertRange.startOffset === contentInsertRange.endOffset,
-			segmentId: (_ref = (_contentInsertRange$s = contentInsertRange.segmentId) !== null && _contentInsertRange$s !== void 0 ? _contentInsertRange$s : activeTextRange === null || activeTextRange === void 0 ? void 0 : activeTextRange.segmentId) !== null && _ref !== void 0 ? _ref : ""
-		} : activeTextRange;
-		if (targetTextRange == null) return false;
-		const { drawings } = params;
-		const { collapsed, startOffset, segmentId = "" } = targetTextRange;
-		const body = (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.getBody();
-		if (body == null) return false;
-		const textX = new TextX();
-		const jsonX = JSONX.getInstance();
-		const rawActions = [];
-		const drawingOrderLength = (_documentDataModel$ge2 = (_documentDataModel$ge3 = documentDataModel.getSnapshot().drawingsOrder) === null || _documentDataModel$ge3 === void 0 ? void 0 : _documentDataModel$ge3.length) !== null && _documentDataModel$ge2 !== void 0 ? _documentDataModel$ge2 : 0;
-		let removeDrawingLen = 0;
-		if (collapsed) {
-			if (startOffset > 0) textX.push({
-				t: TextXActionType.RETAIN,
-				len: startOffset
-			});
-		} else {
-			var _documentDataModel$ge4, _documentDataModel$ge5;
-			const dos = BuildTextUtils.selection.delete([targetTextRange], body, 0, null, false);
-			textX.push(...dos);
-			const removedCustomBlockIds = getCustomBlockIdsInSelections(body, [targetTextRange]);
-			const drawings = (_documentDataModel$ge4 = documentDataModel.getDrawings()) !== null && _documentDataModel$ge4 !== void 0 ? _documentDataModel$ge4 : {};
-			const drawingOrder = (_documentDataModel$ge5 = documentDataModel.getDrawingsOrder()) !== null && _documentDataModel$ge5 !== void 0 ? _documentDataModel$ge5 : [];
-			const sortedRemovedCustomBlockIds = removedCustomBlockIds.sort((a, b) => {
-				if (drawingOrder.indexOf(a) > drawingOrder.indexOf(b)) return -1;
-				else if (drawingOrder.indexOf(a) < drawingOrder.indexOf(b)) return 1;
-				return 0;
-			});
-			if (sortedRemovedCustomBlockIds.length > 0) for (const blockId of sortedRemovedCustomBlockIds) {
-				const drawing = drawings[blockId];
-				const drawingIndex = drawingOrder.indexOf(blockId);
-				if (drawing == null || drawingIndex < 0) continue;
-				const removeDrawingAction = jsonX.removeOp(["drawings", blockId], drawing);
-				const 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
-		});
-		const path = getRichTextEditPath(documentDataModel, segmentId);
-		const placeHolderAction = jsonX.editOp(textX.serialize(), path);
-		rawActions.push(placeHolderAction);
-		for (const drawing of drawings) {
-			const { drawingId } = drawing;
-			const addDrawingAction = jsonX.insertOp(["drawings", drawingId], drawing);
-			const addDrawingOrderAction = jsonX.insertOp(["drawingsOrder", drawingOrderLength - removeDrawingLen], drawingId);
-			rawActions.push(addDrawingAction);
-			rawActions.push(addDrawingOrderAction);
-		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: []
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		return Boolean(result);
-	}
-};
-function getContentInsertRange(accessor, unitId) {
-	try {
-		const range = accessor.get(DocContentInsertService).consumeInsertRange(unitId);
-		if (range == null) return null;
-		return {
-			startOffset: range.startOffset,
-			endOffset: range.endOffset,
-			collapsed: range.startOffset === range.endOffset,
-			segmentId: range.segmentId
-		};
-	} catch {
-		return null;
-	}
-}
-
-//#endregion
-//#region src/commands/commands/set-drawing-arrange.command.ts
-/**
-* The command to arrange drawings.
-*/
-const SetDocDrawingArrangeCommand = {
-	id: "doc.command.set-drawing-arrange",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		const commandService = accessor.get(ICommandService);
-		const docDrawingService = accessor.get(IDocDrawingService);
-		if (params == null) return false;
-		const { unitId, subUnitId, drawingIds, arrangeType } = params;
-		const drawingOrderMapParam = {
-			unitId,
-			subUnitId,
-			drawingIds
-		};
-		let jsonOp;
-		if (arrangeType === ArrangeTypeEnum.forward) jsonOp = docDrawingService.getForwardDrawingsOp(drawingOrderMapParam);
-		else if (arrangeType === ArrangeTypeEnum.backward) jsonOp = docDrawingService.getBackwardDrawingOp(drawingOrderMapParam);
-		else if (arrangeType === ArrangeTypeEnum.front) jsonOp = docDrawingService.getFrontDrawingsOp(drawingOrderMapParam);
-		else if (arrangeType === ArrangeTypeEnum.back) jsonOp = docDrawingService.getBackDrawingsOp(drawingOrderMapParam);
-		if (jsonOp == null) return false;
-		const { redo } = jsonOp;
-		if (redo == null) return false;
-		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
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		return Boolean(result);
-	}
-};
-
 //#endregion
 //#region src/commands/commands/ungroup-doc-drawing.command.ts
 /**
@@ -503,25 +270,10 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 	}
 	_getImagePosition(imageWidth, imageHeight, insertPosition) {
 		var _ref;
-		const position = (_ref = insertPosition !== null && insertPosition !== void 0 ? insertPosition : this._getCurrentImageInsertPosition()) !== null && _ref !== void 0 ? _ref : {
+		return buildDocTransform(imageWidth, imageHeight, { left: ((_ref = insertPosition !== null && insertPosition !== void 0 ? insertPosition : this._getCurrentImageInsertPosition()) !== null && _ref !== void 0 ? _ref : {
 			left: 0,
 			top: 0
-		};
-		return {
-			size: {
-				width: imageWidth,
-				height: imageHeight
-			},
-			positionH: {
-				relativeFrom: ObjectRelativeFromH.PAGE,
-				posOffset: position.left
-			},
-			positionV: {
-				relativeFrom: ObjectRelativeFromV.PARAGRAPH,
-				posOffset: 0
-			},
-			angle: 0
-		};
+		}).left });
 	}
 	_getCurrentImageInsertPosition() {
 		var _this$_docSelectionRe;
@@ -665,7 +417,10 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			});
 		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted(async (command) => {
-			if (command.id === RichTextEditingMutation.id) queueMicrotask(() => {
+			if (command.id !== RichTextEditingMutation.id) return;
+			const params = command.params;
+			if ((params === null || params === void 0 ? void 0 : params.unitId) && params.unitId !== this._context.unitId) return;
+			queueMicrotask(() => {
 				this._updateDrawingsEditStatus();
 			});
 		}));
@@ -722,23 +477,6 @@ function createShapeSvgSource(shape, width, height) {
 	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none">${shape === "ellipse" ? `<ellipse cx="${width / 2}" cy="${height / 2}" rx="${(width - 8) / 2}" ry="${(height - 8) / 2}" fill="${DOC_SHAPE_FILL}" stroke="${DOC_SHAPE_STROKE}" stroke-width="4" />` : `<rect x="4" y="4" width="${width - 8}" height="${height - 8}" rx="14" fill="${DOC_SHAPE_FILL}" stroke="${DOC_SHAPE_STROKE}" stroke-width="4" />`}</svg>`;
 	return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
 }
-function createDefaultDocTransform(width, height) {
-	return {
-		size: {
-			width,
-			height
-		},
-		positionH: {
-			relativeFrom: ObjectRelativeFromH.PAGE,
-			posOffset: 0
-		},
-		positionV: {
-			relativeFrom: ObjectRelativeFromV.PARAGRAPH,
-			posOffset: 0
-		},
-		angle: 0
-	};
-}
 function createShapeInsertCommand(shape, width, height, id) {
 	return {
 		id,
@@ -748,7 +486,7 @@ function createShapeInsertCommand(shape, width, height, id) {
 			const commandService = accessor.get(ICommandService);
 			const unitId = (_univerInstanceServic = accessor.get(IUniverInstanceService).getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId();
 			if (!unitId) return false;
-			const docTransform = createDefaultDocTransform(width, height);
+			const docTransform = buildDocTransform(width, height);
 			return commandService.executeCommand(InsertDocDrawingCommand.id, {
 				unitId,
 				drawings: [{
@@ -778,534 +516,13 @@ const InsertDocRectangleShapeCommand = createShapeInsertCommand("rectangle", 144
 const InsertDocEllipseShapeCommand = createShapeInsertCommand("ellipse", 112, 112, "doc.command.insert-float-shape.ellipse");
 
 //#endregion
-//#region src/commands/commands/update-doc-drawing.command.ts
-const WRAPPING_STYLE_TO_LAYOUT_TYPE = {
-	["inline"]: PositionedObjectLayoutType.INLINE,
-	["wrapSquare"]: PositionedObjectLayoutType.WRAP_SQUARE,
-	["wrapTopAndBottom"]: PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM,
-	["inFrontOfText"]: PositionedObjectLayoutType.WRAP_NONE,
-	["behindText"]: PositionedObjectLayoutType.WRAP_NONE
-};
-function findDrawingAnchorInPage(page, drawingId, pageMarginTop, pageMarginLeft) {
-	const skeDrawing = page.skeDrawings.get(drawingId);
-	if (skeDrawing) return {
-		skeDrawing,
-		pageMarginTop,
-		pageMarginLeft
-	};
-	for (const table of page.skeTables.values()) for (const row of table.rows) for (const cell of row.cells) {
-		const cellAnchor = findDrawingAnchorInPage(cell, drawingId, cell.marginTop, cell.marginLeft);
-		if (cellAnchor) return cellAnchor;
-	}
-	return null;
-}
-function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPage, offset, drawingId, documentDataModel, docSelectionRenderManager) {
-	var _documentDataModel$ge, _documentDataModel$ge2, _oldBody$customBlocks;
-	const textX = new TextX();
-	const jsonX = JSONX.getInstance();
-	const rawActions = [];
-	const oldBody = (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(oldSegmentId)) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.getBody();
-	const body = (_documentDataModel$ge2 = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.getBody();
-	if (oldBody == null || body == null) return;
-	const oldOffset = (_oldBody$customBlocks = oldBody.customBlocks) === null || _oldBody$customBlocks === void 0 || (_oldBody$customBlocks = _oldBody$customBlocks.find((block) => block.blockId === drawingId)) === null || _oldBody$customBlocks === void 0 ? void 0 : _oldBody$customBlocks.startIndex;
-	if (oldOffset == null) return;
-	offset = Math.min(body.dataStream.length - 2, offset);
-	if (segmentId === oldSegmentId) {
-		if (offset < oldOffset) {
-			if (offset > 0) textX.push({
-				t: TextXActionType.RETAIN,
-				len: offset
-			});
-			textX.push({
-				t: TextXActionType.INSERT,
-				body: {
-					dataStream: "\b",
-					customBlocks: [{
-						startIndex: 0,
-						blockId: drawingId
-					}]
-				},
-				len: 1
-			});
-			textX.push({
-				t: TextXActionType.RETAIN,
-				len: oldOffset - offset
-			});
-			textX.push({
-				t: TextXActionType.DELETE,
-				len: 1
-			});
-		} else {
-			if (oldOffset > 0) textX.push({
-				t: TextXActionType.RETAIN,
-				len: oldOffset
-			});
-			textX.push({
-				t: TextXActionType.DELETE,
-				len: 1
-			});
-			if (offset - oldOffset - 1 > 0) textX.push({
-				t: TextXActionType.RETAIN,
-				len: offset - oldOffset - 1
-			});
-			textX.push({
-				t: TextXActionType.INSERT,
-				body: {
-					dataStream: "\b",
-					customBlocks: [{
-						startIndex: 0,
-						blockId: drawingId
-					}]
-				},
-				len: 1
-			});
-		}
-		if (offset !== oldOffset) {
-			const path = getRichTextEditPath(documentDataModel, oldSegmentId);
-			const action = jsonX.editOp(textX.serialize(), path);
-			rawActions.push(action);
-		}
-	} else {
-		if (oldOffset > 0) textX.push({
-			t: TextXActionType.RETAIN,
-			len: oldOffset
-		});
-		textX.push({
-			t: TextXActionType.DELETE,
-			len: 1
-		});
-		let path = getRichTextEditPath(documentDataModel, oldSegmentId);
-		let action = jsonX.editOp(textX.serialize(), path);
-		rawActions.push(action);
-		textX.empty();
-		if (offset > 0) textX.push({
-			t: TextXActionType.RETAIN,
-			len: offset
-		});
-		textX.push({
-			t: TextXActionType.INSERT,
-			body: {
-				dataStream: "\b",
-				customBlocks: [{
-					startIndex: 0,
-					blockId: drawingId
-				}]
-			},
-			len: 1
-		});
-		path = getRichTextEditPath(documentDataModel, segmentId);
-		action = jsonX.editOp(textX.serialize(), path);
-		rawActions.push(action);
-		docSelectionRenderManager.setSegment(segmentId);
-		docSelectionRenderManager.setSegmentPage(segmentPage);
-	}
-	return rawActions;
-}
-/**
-* The command to update drawing wrapping style.
-*/
-const UpdateDocDrawingWrappingStyleCommand = {
-	id: "doc.command.update-doc-drawing-wrapping-style",
+//#region src/commands/commands/move-drawings.command.ts
+const MoveDocDrawingsCommand = {
+	id: "doc.command.move-drawing",
 	type: CommandType.COMMAND,
 	handler: (accessor, params) => {
-		if (params == null) return false;
-		const { drawings, wrappingStyle, unitId } = params;
 		const commandService = accessor.get(ICommandService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const renderObject = accessor.get(IRenderManagerService).getRenderById(unitId);
-		const skeletonData = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService).getSkeleton().getSkeletonData();
-		const viewModel = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService).getViewModel();
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		const documentDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null || skeletonData == null || scene == null || viewModel == null) return false;
-		const editArea = viewModel.getEditArea();
-		const transformer = scene.getTransformerByCreate();
-		const { pages, skeHeaders, skeFooters } = skeletonData;
-		const jsonX = JSONX.getInstance();
-		const rawActions = [];
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		for (const drawing of drawings) {
-			const { drawingId } = drawing;
-			const oldLayoutType = oldDrawings[drawingId].layoutType;
-			const newLayoutType = WRAPPING_STYLE_TO_LAYOUT_TYPE[wrappingStyle];
-			if (oldLayoutType !== newLayoutType) {
-				const updateLayoutTypeAction = jsonX.replaceOp([
-					"drawings",
-					drawingId,
-					"layoutType"
-				], oldLayoutType, newLayoutType);
-				rawActions.push(updateLayoutTypeAction);
-			}
-			if (wrappingStyle === "behindText" || wrappingStyle === "inFrontOfText") {
-				const oldBehindDoc = oldDrawings[drawingId].behindDoc;
-				const newBehindDoc = wrappingStyle === "behindText" ? BooleanNumber.TRUE : BooleanNumber.FALSE;
-				if (oldBehindDoc !== newBehindDoc) {
-					const updateBehindDocAction = jsonX.replaceOp([
-						"drawings",
-						drawingId,
-						"behindDoc"
-					], oldBehindDoc, newBehindDoc);
-					rawActions.push(updateBehindDocAction);
-				}
-			}
-			if (wrappingStyle === "inline") continue;
-			let drawingAnchor = null;
-			for (const page of pages) {
-				const { headerId, footerId, marginTop, marginLeft, marginBottom, pageWidth, pageHeight } = page;
-				switch (editArea) {
-					case DocumentEditArea.HEADER: {
-						var _skeHeaders$get;
-						const headerSke = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
-						if (headerSke != null) drawingAnchor = findDrawingAnchorInPage(headerSke, drawingId, headerSke.marginTop, marginLeft);
-						break;
-					}
-					case DocumentEditArea.FOOTER: {
-						var _skeFooters$get;
-						const footerSke = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
-						if (footerSke != null) drawingAnchor = findDrawingAnchorInPage(footerSke, drawingId, pageHeight - marginBottom + footerSke.marginTop, marginLeft);
-						break;
-					}
-					case DocumentEditArea.BODY:
-						drawingAnchor = findDrawingAnchorInPage(page, drawingId, marginTop, marginLeft);
-						break;
-				}
-				if (drawingAnchor != null) break;
-			}
-			if (drawingAnchor != null) {
-				const { skeDrawing, pageMarginTop, pageMarginLeft } = drawingAnchor;
-				const { aTop, aLeft } = skeDrawing;
-				const oldPositionH = oldDrawings[drawingId].docTransform.positionH;
-				let posOffsetH = aLeft;
-				if (oldPositionH.relativeFrom === ObjectRelativeFromH.MARGIN) posOffsetH -= pageMarginLeft;
-				else if (oldPositionH.relativeFrom === ObjectRelativeFromH.COLUMN) posOffsetH -= skeDrawing.columnLeft;
-				const newPositionH = {
-					relativeFrom: oldPositionH.relativeFrom,
-					posOffset: posOffsetH
-				};
-				if (oldPositionH.posOffset !== newPositionH.posOffset) {
-					const action = jsonX.replaceOp([
-						"drawings",
-						drawingId,
-						"docTransform",
-						"positionH"
-					], oldPositionH, newPositionH);
-					rawActions.push(action);
-				}
-				const oldPositionV = oldDrawings[drawingId].docTransform.positionV;
-				let posOffsetV = aTop;
-				if (oldPositionV.relativeFrom === ObjectRelativeFromV.PAGE) posOffsetV += pageMarginTop;
-				else if (oldPositionV.relativeFrom === ObjectRelativeFromV.LINE) posOffsetV -= skeDrawing.lineTop;
-				else if (oldPositionV.relativeFrom === ObjectRelativeFromV.PARAGRAPH) posOffsetV -= skeDrawing.blockAnchorTop;
-				const newPositionV = {
-					relativeFrom: oldPositionV.relativeFrom,
-					posOffset: posOffsetV
-				};
-				if (oldPositionV.posOffset !== newPositionV.posOffset) {
-					const action = jsonX.replaceOp([
-						"drawings",
-						drawingId,
-						"docTransform",
-						"positionV"
-					], oldPositionV, newPositionV);
-					rawActions.push(action);
-				}
-			}
-		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		transformer.refreshControls();
-		return Boolean(result);
-	}
-};
-/**
-* The command to update drawing wrap text.
-*/
-const UpdateDocDrawingDistanceCommand = {
-	id: "doc.command.update-doc-drawing-distance",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const commandService = accessor.get(ICommandService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const { drawings, dist, unitId } = params;
-		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const jsonX = JSONX.getInstance();
-		const rawActions = [];
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		for (const drawing of drawings) {
-			const { drawingId } = drawing;
-			for (const [key, value] of Object.entries(dist)) {
-				const oldValue = oldDrawings[drawingId][key];
-				if (oldValue !== value) {
-					const action = jsonX.replaceOp([
-						"drawings",
-						drawingId,
-						key
-					], oldValue, value);
-					rawActions.push(action);
-				}
-			}
-		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		return Boolean(result);
-	}
-};
-/**
-* The command to update drawing wrap text.
-*/
-const UpdateDocDrawingWrapTextCommand = {
-	id: "doc.command.update-doc-drawing-wrap-text",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const commandService = accessor.get(ICommandService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const { drawings, wrapText, unitId } = params;
-		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const jsonX = JSONX.getInstance();
-		const rawActions = [];
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		for (const drawing of drawings) {
-			const { drawingId } = drawing;
-			const oldWrapText = oldDrawings[drawingId].wrapText;
-			if (oldWrapText !== wrapText) {
-				const action = jsonX.replaceOp([
-					"drawings",
-					drawingId,
-					"wrapText"
-				], oldWrapText, wrapText);
-				rawActions.push(action);
-			}
-		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		return Boolean(result);
-	}
-};
-/**
-* The command to update drawing position.
-*/
-const UpdateDrawingDocTransformCommand = {
-	id: "doc.command.update-drawing-doc-transform",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const commandService = accessor.get(ICommandService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const renderManagerService = accessor.get(IRenderManagerService);
-		const { drawings, unitId } = params;
-		const renderObject = renderManagerService.getRenderUnitById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		if (scene == null) return false;
-		const transformer = scene.getTransformerByCreate();
-		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const jsonX = JSONX.getInstance();
-		const rawActions = [];
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		for (const drawing of drawings) {
-			const { drawingId, key, value } = drawing;
-			const oldValue = oldDrawings[drawingId].docTransform[key];
-			if (!Tools.diffValue(oldValue, value)) {
-				const action = jsonX.replaceOp([
-					"drawings",
-					drawingId,
-					"docTransform",
-					key
-				], oldValue, value);
-				rawActions.push(action);
-			}
-		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null,
-				debounce: true
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		transformer.refreshControls();
-		return Boolean(result);
-	}
-};
-/**
-* The command to move inline drawing.
-*/
-const IMoveInlineDrawingCommand = {
-	id: "doc.command.move-inline-drawing",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _renderManagerService, _docSelectionRenderSe;
-		if (params == null) return false;
-		const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage, needRefreshDrawings } = params;
-		const renderManagerService = accessor.get(IRenderManagerService);
-		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocSelectionRenderService);
-		const docRefreshDrawingsService = accessor.get(DocRefreshDrawingsService);
-		const renderObject = renderManagerService.getRenderUnitById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		const skeleton = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService).getSkeleton();
-		if (scene == null || docSelectionRenderService == null) return false;
-		const transformer = scene.getTransformerByCreate();
-		const commandService = accessor.get(ICommandService);
-		const documentDataModel = accessor.get(IUniverInstanceService).getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		if (needRefreshDrawings) {
-			docRefreshDrawingsService.refreshDrawings(skeleton);
-			transformer.refreshControls();
-			return true;
-		}
-		const rawActions = [];
-		const { drawingId } = drawing;
-		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
-		if (actions == null || actions.length === 0) {
-			docRefreshDrawingsService.refreshDrawings(skeleton);
-			transformer.refreshControls();
-			return false;
-		}
-		rawActions.push(...actions);
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		transformer.refreshControls();
-		return Boolean(result);
-	}
-};
-/**
-* The command to transform non-inline drawing.
-*/
-const ITransformNonInlineDrawingCommand = {
-	id: "doc.command.transform-non-inline-drawing",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _renderManagerService2, _docSelectionRenderSe2;
-		if (params == null) return false;
-		const { drawing, unitId, offset, docTransform, segmentId: newSegmentId, segmentPage } = params;
-		const renderManagerService = accessor.get(IRenderManagerService);
-		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSelectionRenderService);
-		const renderObject = renderManagerService.getRenderUnitById(unitId);
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		if (scene == null || docSelectionRenderService == null) return false;
-		const transformer = scene.getTransformerByCreate();
-		const commandService = accessor.get(ICommandService);
-		const documentDataModel = accessor.get(IUniverInstanceService).getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const rawActions = [];
-		const { drawingId } = drawing;
-		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe2 = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe2 !== void 0 ? _docSelectionRenderSe2 : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
-		if (actions == null) return false;
-		if (actions.length > 0) rawActions.push(...actions);
-		const jsonX = JSONX.getInstance();
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		const { positionH: oldPositionH, positionV: oldPositionV, size: oldSize, angle: oldAngle } = oldDrawings[drawingId].docTransform;
-		if (!Tools.diffValue(oldPositionH, docTransform.positionH)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"positionH"
-			], oldPositionH, docTransform.positionH);
-			rawActions.push(updateAction);
-		}
-		if (!Tools.diffValue(oldPositionV, docTransform.positionV)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"positionV"
-			], oldPositionV, docTransform.positionV);
-			rawActions.push(updateAction);
-		}
-		if (!Tools.diffValue(oldSize, docTransform.size)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"size"
-			], oldSize, docTransform.size);
-			rawActions.push(updateAction);
-		}
-		if (!Tools.diffValue(oldAngle, docTransform.angle)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"angle"
-			], oldAngle, docTransform.angle);
-			rawActions.push(updateAction);
-		}
-		const doMutation = {
-			id: RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null,
-				debounce: true
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return JSONX.compose(acc, cur);
-		}, null);
-		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-		transformer.refreshControls();
-		return Boolean(result);
-	}
-};
-
-//#endregion
-//#region src/commands/commands/move-drawings.command.ts
-const MoveDocDrawingsCommand = {
-	id: "doc.command.move-drawing",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		const commandService = accessor.get(ICommandService);
-		const docDrawingService = accessor.get(IDocDrawingService);
+		const docDrawingService = accessor.get(IDocDrawingService);
 		const univerInstanceService = accessor.get(IUniverInstanceService);
 		const renderManagerService = accessor.get(IRenderManagerService);
 		const { direction } = params;
@@ -1464,6 +681,30 @@ function calcDocFloatDomPosition(object, renderUnit) {
 		right: left + width
 	}, renderUnit.scene, opacity, angle);
 }
+function mergeDocFloatDomRuntimeProps(existingProps, param) {
+	const customBlockRenderViewport = pickValidCustomBlockRenderViewport(param.customBlockRenderViewport);
+	if (!customBlockRenderViewport) return existingProps;
+	return {
+		...existingProps,
+		customBlockRenderViewport
+	};
+}
+function pickValidCustomBlockRenderViewport(viewport) {
+	const result = {};
+	if (isNonNegativeNumber(viewport === null || viewport === void 0 ? void 0 : viewport.bleedLeft)) result.bleedLeft = viewport.bleedLeft;
+	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth)) result.bleedWidth = viewport.bleedWidth;
+	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.contentHeight)) result.contentHeight = viewport.contentHeight;
+	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.contentWidth)) result.contentWidth = viewport.contentWidth;
+	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.height)) result.height = viewport.height;
+	if (isPositiveNumber(viewport === null || viewport === void 0 ? void 0 : viewport.viewportHeight)) result.viewportHeight = viewport.viewportHeight;
+	return Object.keys(result).length ? result : void 0;
+}
+function isPositiveNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+function isNonNegativeNumber(value) {
+	return typeof value === "number" && Number.isFinite(value) && value >= 0;
+}
 let DocFloatDomController = class DocFloatDomController extends Disposable {
 	constructor(_renderManagerService, _drawingManagerService, _drawingRenderService, _canvasFloatDomService, _univerInstanceService, _commandService) {
 		super();
@@ -1481,6 +722,7 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 	}
 	_initialize() {
 		this._drawingAddRemoveListener();
+		this._drawingRuntimePropsListener();
 		this._initScrollAndZoomEvent();
 	}
 	_getSceneAndTransformerByDrawingSearch(unitId) {
@@ -1516,6 +758,12 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 			const rects = await this._drawingRenderService.renderFloatDom(rectParam, renderObject.scene);
 			if (rects == null || rects.length === 0) return;
 			for (const rect of rects) {
+				var _renderObject$scene$g;
+				const runtimeParam = rectParam;
+				const runtimeViewport = pickValidCustomBlockRenderViewport(runtimeParam.customBlockRenderViewport);
+				const preserveRuntimeGeometry = isEmbedFloatDomRuntimeParam(runtimeParam);
+				syncRectWithRuntimeParam(rect, runtimeParam, runtimeViewport, void 0, preserveRuntimeGeometry);
+				const runtimeTransform = runtimeViewport || preserveRuntimeGeometry ? createTransformFromRect(rect) : void 0;
 				this._addHoverForRect(rect);
 				const disposableCollection = new DisposableCollection();
 				const position$ = new BehaviorSubject(calcDocFloatDomPosition(rect, renderObject.renderUnit));
@@ -1523,7 +771,10 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 				const data = rectParam.data;
 				const info = {
 					dispose: disposableCollection,
+					preserveRuntimeGeometry,
 					rect,
+					runtimeTransform,
+					runtimeViewport,
 					position$,
 					unitId
 				};
@@ -1531,6 +782,8 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 					position$,
 					id: rectParam.drawingId,
 					componentKey: rectParam.componentKey,
+					eventPassThrough: preserveRuntimeGeometry ? false : void 0,
+					preserveOnFocusChange: preserveRuntimeGeometry,
 					onPointerDown: (evt) => {
 						canvas.dispatchEvent(new PointerEvent(evt.type, evt));
 					},
@@ -1544,20 +797,42 @@ let DocFloatDomController = class DocFloatDomController extends Disposable {
 						canvas.dispatchEvent(new WheelEvent(evt.type, evt));
 					},
 					data,
+					props: mergeDocFloatDomRuntimeProps(void 0, rectParam),
 					unitId
 				});
 				const listener = rect.onTransformChange$.subscribeEvent(() => {
 					const newPosition = calcDocFloatDomPosition(rect, renderObject.renderUnit);
 					position$.next(newPosition);
 				});
+				const scrollListener = subscribeViewportScrollAfter((_renderObject$scene$g = renderObject.scene.getViewport(VIEWPORT_KEY.VIEW_MAIN)) === null || _renderObject$scene$g === void 0 ? void 0 : _renderObject$scene$g.onScrollAfter$, () => position$.next(calcDocFloatDomPosition(rect, renderObject.renderUnit)));
 				disposableCollection.add(() => {
 					this._canvasFloatDomService.removeFloatDom(rectParam.drawingId);
 				});
 				listener && disposableCollection.add(listener);
+				scrollListener && disposableCollection.add(scrollListener);
 				this._domLayerInfoMap.set(rectParam.drawingId, info);
 			}
 		});
 	}
+	_drawingRuntimePropsListener() {
+		this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe((params) => {
+			params.forEach((param) => {
+				var _this$_canvasFloatDom;
+				const floatDomInfo = this._domLayerInfoMap.get(param.drawingId);
+				if (!floatDomInfo) return;
+				const runtimeParam = param;
+				const runtimeViewport = pickValidCustomBlockRenderViewport(runtimeParam.customBlockRenderViewport);
+				if (runtimeViewport) floatDomInfo.runtimeViewport = runtimeViewport;
+				if (syncRectWithRuntimeParam(floatDomInfo.rect, runtimeParam, floatDomInfo.runtimeViewport, floatDomInfo.runtimeTransform, floatDomInfo.preserveRuntimeGeometry)) {
+					if (runtimeViewport || floatDomInfo.preserveRuntimeGeometry) floatDomInfo.runtimeTransform = createTransformFromRect(floatDomInfo.rect);
+					const renderObject = this._getSceneAndTransformerByDrawingSearch(floatDomInfo.unitId);
+					if (renderObject) floatDomInfo.position$.next(calcDocFloatDomPosition(floatDomInfo.rect, renderObject.renderUnit));
+				}
+				const currentProps = (_this$_canvasFloatDom = this._canvasFloatDomService.domLayers.find(([id]) => id === param.drawingId)) === null || _this$_canvasFloatDom === void 0 ? void 0 : _this$_canvasFloatDom[1].props;
+				this._canvasFloatDomService.updateFloatDom(param.drawingId, { props: mergeDocFloatDomRuntimeProps(currentProps, param) });
+			});
+		}));
+	}
 	_addHoverForRect(o) {
 		this.disposeWithMe(toDisposable(o.onPointerEnter$.subscribeEvent(() => {
 			o.cursor = CURSOR_TYPE.GRAB;
@@ -1658,6 +933,71 @@ DocFloatDomController = __decorate([
 	__decorateParam(4, IUniverInstanceService),
 	__decorateParam(5, ICommandService)
 ], DocFloatDomController);
+function syncRectWithRuntimeParam(rect, param, fallbackViewport, fallbackTransform, preserveRuntimeGeometry) {
+	const transform = getRuntimeTransform(param, rect, fallbackViewport, fallbackTransform, preserveRuntimeGeometry);
+	if (!transform) return false;
+	rect.transformByState(transform);
+	return true;
+}
+function getRuntimeTransform(param, rect, fallbackViewport, fallbackTransform, preserveRuntimeGeometry) {
+	var _param$transform, _param$transforms, _param$customBlockRen, _runtimeViewport$heig2;
+	const transform = (_param$transform = param.transform) !== null && _param$transform !== void 0 ? _param$transform : (_param$transforms = param.transforms) === null || _param$transforms === void 0 ? void 0 : _param$transforms[0];
+	const runtimeViewport = (_param$customBlockRen = param.customBlockRenderViewport) !== null && _param$customBlockRen !== void 0 ? _param$customBlockRen : fallbackViewport;
+	if (!param.customBlockRenderViewport && preserveRuntimeGeometry && fallbackTransform && transform) {
+		var _fallbackTransform$wi, _fallbackTransform$he;
+		return {
+			...transform,
+			width: (_fallbackTransform$wi = fallbackTransform.width) !== null && _fallbackTransform$wi !== void 0 ? _fallbackTransform$wi : transform.width,
+			height: (_fallbackTransform$he = fallbackTransform.height) !== null && _fallbackTransform$he !== void 0 ? _fallbackTransform$he : transform.height
+		};
+	}
+	if (!transform) {
+		var _runtimeViewport$heig;
+		const height = (_runtimeViewport$heig = runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.height) !== null && _runtimeViewport$heig !== void 0 ? _runtimeViewport$heig : runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.contentHeight;
+		if (!isPositiveNumber(height)) return;
+		return {
+			left: rect.left,
+			top: rect.top,
+			width: rect.width,
+			height,
+			angle: rect.angle
+		};
+	}
+	const height = (_runtimeViewport$heig2 = runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.height) !== null && _runtimeViewport$heig2 !== void 0 ? _runtimeViewport$heig2 : runtimeViewport === null || runtimeViewport === void 0 ? void 0 : runtimeViewport.contentHeight;
+	if (!isPositiveNumber(height)) return transform;
+	return {
+		...transform,
+		height
+	};
+}
+function isEmbedFloatDomRuntimeParam(param) {
+	const data = param.data;
+	if (!data || typeof data !== "object") return false;
+	const candidate = data;
+	return candidate.version === 1 && typeof candidate.embedId === "string" && typeof candidate.hostAnchorId === "string";
+}
+function createTransformFromRect(rect) {
+	return {
+		angle: rect.angle,
+		height: rect.height,
+		left: rect.left,
+		top: rect.top,
+		width: rect.width
+	};
+}
+function subscribeViewportScrollAfter(scrollEvent, callback) {
+	if (!scrollEvent || typeof scrollEvent !== "object") return;
+	const eventSubject = scrollEvent;
+	if (typeof eventSubject.subscribeEvent === "function") return eventSubject.subscribeEvent(callback);
+	const observable = scrollEvent;
+	if (typeof observable.subscribe === "function") {
+		const subscription = observable.subscribe(callback);
+		return toDisposable(() => {
+			var _subscription$unsubsc;
+			return (_subscription$unsubsc = subscription.unsubscribe) === null || _subscription$unsubsc === void 0 ? void 0 : _subscription$unsubsc.call(subscription);
+		});
+	}
+}
 
 //#endregion
 //#region src/menu/image.menu.ts
@@ -1784,10 +1124,79 @@ function InsertEllipseShapeBelowMenuFactory(accessor) {
 	};
 }
 
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = {
+	[RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
+		order: 0,
+		menuItemFactory: ImageMenuFactory,
+		[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 0,
+			menuItemFactory: UploadFloatImageMenuFactory
+		}
+	} },
+	[ContextMenuPosition.PARAGRAPH]: {
+		[ContextMenuGroup.LAYOUT]: { [INSERT_BELLOW_MENU_ID]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[EMPTY_PARAGRAPH_MENU_ID]: { [ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[DOC_CONTENT_INSERT_MENU_ID]: { [ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[DOC_PARAGRAPH_T_INSERT_MENU_ID]: { insert: {
+			[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+				order: 1,
+				menuItemFactory: UploadFloatImageMenuFactory
+			},
+			[DOCS_SHAPE_MENU_ID]: {
+				order: 2,
+				menuItemFactory: ShapeMenuFactory
+			}
+		} },
+		[DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID]: { insert: {
+			[`${IMAGE_MENU_UPLOAD_FLOAT_ID}.below`]: {
+				order: 1,
+				menuItemFactory: UploadFloatImageBelowMenuFactory
+			},
+			[DOCS_SHAPE_BELOW_MENU_ID]: {
+				order: 2,
+				menuItemFactory: ShapeBelowMenuFactory
+			}
+		} },
+		[DOCS_SHAPE_MENU_ID]: { shapes: {
+			order: 0,
+			[InsertDocRectangleShapeCommand.id]: {
+				order: 0,
+				menuItemFactory: InsertRectangleShapeMenuFactory
+			},
+			[InsertDocEllipseShapeCommand.id]: {
+				order: 1,
+				menuItemFactory: InsertEllipseShapeMenuFactory
+			}
+		} },
+		[DOCS_SHAPE_BELOW_MENU_ID]: { shapes: {
+			order: 0,
+			[`${InsertDocRectangleShapeCommand.id}.below`]: {
+				order: 0,
+				menuItemFactory: InsertRectangleShapeBelowMenuFactory
+			},
+			[`${InsertDocEllipseShapeCommand.id}.below`]: {
+				order: 1,
+				menuItemFactory: InsertEllipseShapeBelowMenuFactory
+			}
+		} }
+	}
+};
+
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-drawing-ui";
-var version = "1.0.0-alpha.2";
+var version = "1.0.0-alpha.4";
 
 //#endregion
 //#region src/config/config.ts
@@ -1815,21 +1224,23 @@ const defaultPluginConfig = {};
 const MIN_OFFSET = -1e3;
 const MAX_OFFSET = 1e3;
 const DocDrawingPosition = (props) => {
+	var _renderManagerService;
+	const renderManagerService = useDependency(IRenderManagerService);
+	const drawingParam = props.drawings[0];
+	const scene = drawingParam ? (_renderManagerService = renderManagerService.getRenderById(drawingParam.unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.scene : void 0;
+	return drawingParam && scene ? /* @__PURE__ */ jsx(DocDrawingPositionContent, { ...props }) : null;
+};
+function DocDrawingPositionContent(props) {
 	const commandService = useDependency(ICommandService);
 	const localeService = useDependency(LocaleService);
 	const drawingManagerService = useDependency(IDrawingManagerService);
 	const renderManagerService = useDependency(IRenderManagerService);
 	const univerInstanceService = useDependency(IUniverInstanceService);
 	const { drawings } = props;
-	const drawingParam = drawings[0];
-	if (drawingParam == null) return;
-	const { unitId } = drawingParam;
+	const { unitId } = drawings[0];
 	const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
 	const documentFlavor = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getSnapshot().documentStyle.documentFlavor;
-	const renderObject = renderManagerService.getRenderById(unitId);
-	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-	if (scene == null) return;
-	const transformer = scene.getTransformerByCreate();
+	const transformer = renderManagerService.getRenderById(unitId).scene.getTransformerByCreate();
 	const HORIZONTAL_RELATIVE_FROM = [
 		{
 			label: localeService.t("docs-drawing-ui.image-position.column"),
@@ -1877,7 +1288,7 @@ const DocDrawingPosition = (props) => {
 	const [followTextMove, setFollowTextMove] = useState(true);
 	const [showPanel, setShowPanel] = useState(true);
 	function handlePositionChange(direction, value) {
-		var _renderManagerService;
+		var _renderManagerService2;
 		if (direction === "positionH") setHPosition(value);
 		else setVPosition(value);
 		const focusDrawings = drawingManagerService.getFocusDrawings();
@@ -1898,12 +1309,12 @@ const DocDrawingPosition = (props) => {
 				value
 			}))
 		});
-		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocSelectionRenderService);
+		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSelectionRenderService);
 		if (docSelectionRenderService) docSelectionRenderService.blur();
 		transformer.refreshControls();
 	}
 	function handleHorizontalRelativeFromChange(value) {
-		var _renderManagerService2;
+		var _renderManagerService3;
 		const prevRelativeFrom = hPosition.relativeFrom;
 		const prevPosOffset = hPosition.posOffset;
 		const relativeFrom = Number(value);
@@ -1914,7 +1325,7 @@ const DocDrawingPosition = (props) => {
 		const unitId = focusDrawings[0].unitId;
 		let drawing = null;
 		let pageMarginLeft = 0;
-		const skeleton = (_renderManagerService2 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSkeletonManagerService).getSkeleton();
+		const skeleton = (_renderManagerService3 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(DocSkeletonManagerService).getSkeleton();
 		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
 		if (skeletonData == null) return;
 		const { pages, skeHeaders, skeFooters } = skeletonData;
@@ -1952,7 +1363,7 @@ const DocDrawingPosition = (props) => {
 		});
 	}
 	function handleVerticalRelativeFromChange(value) {
-		var _renderManagerService3, _renderManagerService4, _documentDataModel$ge, _glyph$parent, _column$parent;
+		var _renderManagerService4, _renderManagerService5, _documentDataModel$ge, _glyph$parent, _column$parent;
 		const prevRelativeFrom = vPosition.relativeFrom;
 		const prevPosOffset = vPosition.posOffset;
 		const relativeFrom = Number(value);
@@ -1961,8 +1372,8 @@ const DocDrawingPosition = (props) => {
 		if (focusDrawings.length === 0) return;
 		const { drawingId, unitId } = focusDrawings[0];
 		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		const skeleton = (_renderManagerService3 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(DocSkeletonManagerService).getSkeleton();
-		const docSelectionRenderService = (_renderManagerService4 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.with(DocSelectionRenderService);
+		const skeleton = (_renderManagerService4 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.with(DocSkeletonManagerService).getSkeleton();
+		const docSelectionRenderService = (_renderManagerService5 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService5 === void 0 ? void 0 : _renderManagerService5.with(DocSelectionRenderService);
 		const segmentId = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.getSegment();
 		const segmentPage = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.getSegmentPage();
 		const drawing = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.getBody()) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.customBlocks) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.find((c) => c.blockId === drawingId);
@@ -2094,6 +1505,330 @@ const DocDrawingPosition = (props) => {
 			}) })
 		]
 	});
+}
+
+//#endregion
+//#region src/commands/commands/update-doc-drawing.command.ts
+function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPage, offset, drawingId, documentDataModel, docSelectionRenderManager) {
+	var _documentDataModel$ge, _documentDataModel$ge2, _oldBody$customBlocks;
+	const textX = new TextX();
+	const jsonX = JSONX.getInstance();
+	const rawActions = [];
+	const oldBody = (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(oldSegmentId)) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.getBody();
+	const body = (_documentDataModel$ge2 = documentDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.getBody();
+	if (oldBody == null || body == null) return;
+	const oldOffset = (_oldBody$customBlocks = oldBody.customBlocks) === null || _oldBody$customBlocks === void 0 || (_oldBody$customBlocks = _oldBody$customBlocks.find((block) => block.blockId === drawingId)) === null || _oldBody$customBlocks === void 0 ? void 0 : _oldBody$customBlocks.startIndex;
+	if (oldOffset == null) return;
+	offset = Math.min(body.dataStream.length - 2, offset);
+	if (segmentId === oldSegmentId) {
+		if (offset < oldOffset) {
+			if (offset > 0) textX.push({
+				t: TextXActionType.RETAIN,
+				len: offset
+			});
+			textX.push({
+				t: TextXActionType.INSERT,
+				body: {
+					dataStream: "\b",
+					customBlocks: [{
+						startIndex: 0,
+						blockId: drawingId
+					}]
+				},
+				len: 1
+			});
+			textX.push({
+				t: TextXActionType.RETAIN,
+				len: oldOffset - offset
+			});
+			textX.push({
+				t: TextXActionType.DELETE,
+				len: 1
+			});
+		} else {
+			if (oldOffset > 0) textX.push({
+				t: TextXActionType.RETAIN,
+				len: oldOffset
+			});
+			textX.push({
+				t: TextXActionType.DELETE,
+				len: 1
+			});
+			if (offset - oldOffset - 1 > 0) textX.push({
+				t: TextXActionType.RETAIN,
+				len: offset - oldOffset - 1
+			});
+			textX.push({
+				t: TextXActionType.INSERT,
+				body: {
+					dataStream: "\b",
+					customBlocks: [{
+						startIndex: 0,
+						blockId: drawingId
+					}]
+				},
+				len: 1
+			});
+		}
+		if (offset !== oldOffset) {
+			const path = getRichTextEditPath(documentDataModel, oldSegmentId);
+			const action = jsonX.editOp(textX.serialize(), path);
+			rawActions.push(action);
+		}
+	} else {
+		if (oldOffset > 0) textX.push({
+			t: TextXActionType.RETAIN,
+			len: oldOffset
+		});
+		textX.push({
+			t: TextXActionType.DELETE,
+			len: 1
+		});
+		let path = getRichTextEditPath(documentDataModel, oldSegmentId);
+		let action = jsonX.editOp(textX.serialize(), path);
+		rawActions.push(action);
+		textX.empty();
+		if (offset > 0) textX.push({
+			t: TextXActionType.RETAIN,
+			len: offset
+		});
+		textX.push({
+			t: TextXActionType.INSERT,
+			body: {
+				dataStream: "\b",
+				customBlocks: [{
+					startIndex: 0,
+					blockId: drawingId
+				}]
+			},
+			len: 1
+		});
+		path = getRichTextEditPath(documentDataModel, segmentId);
+		action = jsonX.editOp(textX.serialize(), path);
+		rawActions.push(action);
+		docSelectionRenderManager.setSegment(segmentId);
+		docSelectionRenderManager.setSegmentPage(segmentPage);
+	}
+	return rawActions;
+}
+/**
+* The command to update drawing wrap text.
+*/
+const UpdateDocDrawingDistanceCommand = {
+	id: "doc.command.update-doc-drawing-distance",
+	type: CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const commandService = accessor.get(ICommandService);
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const { drawings, dist, unitId } = params;
+		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		const jsonX = JSONX.getInstance();
+		const rawActions = [];
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		for (const drawing of drawings) {
+			const { drawingId } = drawing;
+			for (const [key, value] of Object.entries(dist)) {
+				const oldValue = oldDrawings[drawingId][key];
+				if (oldValue !== value) {
+					const action = jsonX.replaceOp([
+						"drawings",
+						drawingId,
+						key
+					], oldValue, value);
+					rawActions.push(action);
+				}
+			}
+		}
+		const doMutation = {
+			id: RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return Boolean(result);
+	}
+};
+/**
+* The command to update drawing wrap text.
+*/
+const UpdateDocDrawingWrapTextCommand = {
+	id: "doc.command.update-doc-drawing-wrap-text",
+	type: CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const commandService = accessor.get(ICommandService);
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const { drawings, wrapText, unitId } = params;
+		const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		const jsonX = JSONX.getInstance();
+		const rawActions = [];
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		for (const drawing of drawings) {
+			const { drawingId } = drawing;
+			const oldWrapText = oldDrawings[drawingId].wrapText;
+			if (oldWrapText !== wrapText) {
+				const action = jsonX.replaceOp([
+					"drawings",
+					drawingId,
+					"wrapText"
+				], oldWrapText, wrapText);
+				rawActions.push(action);
+			}
+		}
+		const doMutation = {
+			id: RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return Boolean(result);
+	}
+};
+/**
+* The command to move inline drawing.
+*/
+const IMoveInlineDrawingCommand = {
+	id: "doc.command.move-inline-drawing",
+	type: CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _renderManagerService, _docSelectionRenderSe;
+		if (params == null) return false;
+		const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage, needRefreshDrawings } = params;
+		const renderManagerService = accessor.get(IRenderManagerService);
+		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(DocSelectionRenderService);
+		const docRefreshDrawingsService = accessor.get(DocRefreshDrawingsService);
+		const renderObject = renderManagerService.getRenderUnitById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		const skeleton = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService).getSkeleton();
+		if (scene == null || docSelectionRenderService == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const commandService = accessor.get(ICommandService);
+		const documentDataModel = accessor.get(IUniverInstanceService).getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		if (needRefreshDrawings) {
+			docRefreshDrawingsService.refreshDrawings(skeleton);
+			transformer.refreshControls();
+			return true;
+		}
+		const rawActions = [];
+		const { drawingId } = drawing;
+		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
+		if (actions == null || actions.length === 0) {
+			docRefreshDrawingsService.refreshDrawings(skeleton);
+			transformer.refreshControls();
+			return false;
+		}
+		rawActions.push(...actions);
+		const doMutation = {
+			id: RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		transformer.refreshControls();
+		return Boolean(result);
+	}
+};
+/**
+* The command to transform non-inline drawing.
+*/
+const ITransformNonInlineDrawingCommand = {
+	id: "doc.command.transform-non-inline-drawing",
+	type: CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _renderManagerService2, _docSelectionRenderSe2;
+		if (params == null) return false;
+		const { drawing, unitId, offset, docTransform, segmentId: newSegmentId, segmentPage } = params;
+		const renderManagerService = accessor.get(IRenderManagerService);
+		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(DocSelectionRenderService);
+		const renderObject = renderManagerService.getRenderUnitById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null || docSelectionRenderService == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const commandService = accessor.get(ICommandService);
+		const documentDataModel = accessor.get(IUniverInstanceService).getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		const rawActions = [];
+		const { drawingId } = drawing;
+		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe2 = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe2 !== void 0 ? _docSelectionRenderSe2 : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
+		if (actions == null) return false;
+		if (actions.length > 0) rawActions.push(...actions);
+		const jsonX = JSONX.getInstance();
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		const { positionH: oldPositionH, positionV: oldPositionV, size: oldSize, angle: oldAngle } = oldDrawings[drawingId].docTransform;
+		if (!Tools.diffValue(oldPositionH, docTransform.positionH)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"positionH"
+			], oldPositionH, docTransform.positionH);
+			rawActions.push(updateAction);
+		}
+		if (!Tools.diffValue(oldPositionV, docTransform.positionV)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"positionV"
+			], oldPositionV, docTransform.positionV);
+			rawActions.push(updateAction);
+		}
+		if (!Tools.diffValue(oldSize, docTransform.size)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"size"
+			], oldSize, docTransform.size);
+			rawActions.push(updateAction);
+		}
+		if (!Tools.diffValue(oldAngle, docTransform.angle)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"angle"
+			], oldAngle, docTransform.angle);
+			rawActions.push(updateAction);
+		}
+		const doMutation = {
+			id: RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null,
+				debounce: true
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		transformer.refreshControls();
+		return Boolean(result);
+	}
 };
 
 //#endregion
@@ -2101,22 +1836,24 @@ const DocDrawingPosition = (props) => {
 const MIN_MARGIN = 0;
 const MAX_MARGIN = 100;
 const DocDrawingTextWrap = (props) => {
+	var _renderManagerService;
+	const renderManagerService = useDependency(IRenderManagerService);
+	const drawingParam = props.drawings[0];
+	const scene = drawingParam ? (_renderManagerService = renderManagerService.getRenderUnitById(drawingParam.unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.scene : void 0;
+	return drawingParam && scene ? /* @__PURE__ */ jsx(DocDrawingTextWrapContent, { ...props }) : null;
+};
+function DocDrawingTextWrapContent(props) {
 	const commandService = useDependency(ICommandService);
 	const localeService = useDependency(LocaleService);
 	const drawingManagerService = useDependency(IDrawingManagerService);
-	const renderManagerService = useDependency(IRenderManagerService);
 	const univerInstanceService = useDependency(IUniverInstanceService);
 	const { drawings } = props;
-	const drawingParam = drawings[0];
-	if (drawingParam == null) return null;
-	const { unitId } = drawingParam;
+	const { unitId } = drawings[0];
 	const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-	const renderObject = renderManagerService.getRenderUnitById(unitId);
-	if ((renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene) == null) return null;
 	const [disableWrapText, setDisableWrapText] = useState(true);
 	const [disableDistTB, setDisableDistTB] = useState(true);
 	const [disableDistLR, setDisableDistLR] = useState(true);
-	const [wrappingStyle, setWrappingStyle] = useState("inline");
+	const [wrappingStyle, setWrappingStyle] = useState(TextWrappingStyle.INLINE);
 	const [wrapText, setWrapText] = useState("");
 	const [distToText, setDistToText] = useState({
 		distT: 0,
@@ -2204,17 +1941,17 @@ const DocDrawingTextWrap = (props) => {
 		else setDisableDistTB(false);
 		if (layoutType === PositionedObjectLayoutType.WRAP_NONE || layoutType === PositionedObjectLayoutType.INLINE || layoutType === PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) setDisableDistLR(true);
 		else setDisableDistLR(false);
-		if (layoutType === PositionedObjectLayoutType.WRAP_NONE) if (behindDoc === BooleanNumber.TRUE) setWrappingStyle("behindText");
-		else setWrappingStyle("inFrontOfText");
+		if (layoutType === PositionedObjectLayoutType.WRAP_NONE) if (behindDoc === BooleanNumber.TRUE) setWrappingStyle(TextWrappingStyle.BEHIND_TEXT);
+		else setWrappingStyle(TextWrappingStyle.IN_FRONT_OF_TEXT);
 		else switch (layoutType) {
 			case PositionedObjectLayoutType.INLINE:
-				setWrappingStyle("inline");
+				setWrappingStyle(TextWrappingStyle.INLINE);
 				break;
 			case PositionedObjectLayoutType.WRAP_SQUARE:
-				setWrappingStyle("wrapSquare");
+				setWrappingStyle(TextWrappingStyle.WRAP_SQUARE);
 				break;
 			case PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM:
-				setWrappingStyle("wrapTopAndBottom");
+				setWrappingStyle(TextWrappingStyle.WRAP_TOP_AND_BOTTOM);
 				break;
 			default: throw new Error(`Unsupported layout type: ${layoutType}`);
 		}
@@ -2254,23 +1991,23 @@ const DocDrawingTextWrap = (props) => {
 				direction: "vertical",
 				children: [
 					/* @__PURE__ */ jsx(Radio, {
-						value: "inline",
+						value: TextWrappingStyle.INLINE,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.inline")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
-						value: "wrapSquare",
+						value: TextWrappingStyle.WRAP_SQUARE,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.square")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
-						value: "wrapTopAndBottom",
+						value: TextWrappingStyle.WRAP_TOP_AND_BOTTOM,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.topAndBottom")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
-						value: "behindText",
+						value: TextWrappingStyle.BEHIND_TEXT,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.behindText")
 					}),
 					/* @__PURE__ */ jsx(Radio, {
-						value: "inFrontOfText",
+						value: TextWrappingStyle.IN_FRONT_OF_TEXT,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.inFrontText")
 					})
 				]
@@ -2349,21 +2086,28 @@ const DocDrawingTextWrap = (props) => {
 			})
 		]
 	});
-};
+}
 
 //#endregion
 //#region src/views/doc-image-panel/DocDrawingPanel.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
 const DocDrawingPanel = () => {
 	const drawingManagerService = useDependency(IDrawingManagerService);
-	const [drawings, setDrawings] = useState(drawingManagerService.getFocusDrawings());
-	useEffect(() => {
-		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
-			setDrawings(drawings);
-		});
-		return () => {
-			focusDispose.unsubscribe();
-		};
-	}, []);
+	const drawings = useObservable(() => drawingManagerService.focus$, drawingManagerService.getFocusDrawings(), false, [drawingManagerService]);
 	return !!(drawings === null || drawings === void 0 ? void 0 : drawings.length) && /* @__PURE__ */ jsxs("div", {
 		className: "univer-text-sm",
 		children: [
@@ -2411,6 +2155,19 @@ ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager))]
 
 //#endregion
 //#region src/controllers/doc-drawing-notification.controller.ts
+function findDrawingAnchorInPage(page, drawingId, pageMarginTop, pageMarginLeft) {
+	const skeDrawing = page.skeDrawings.get(drawingId);
+	if (skeDrawing) return {
+		skeDrawing,
+		pageMarginTop,
+		pageMarginLeft
+	};
+	for (const table of page.skeTables.values()) for (const row of table.rows) for (const cell of row.cells) {
+		const cellAnchor = findDrawingAnchorInPage(cell, drawingId, cell.marginTop, cell.marginLeft);
+		if (cellAnchor) return cellAnchor;
+	}
+	return null;
+}
 function getAddOrRemoveDrawings(actions) {
 	if (JSONX.isNoop(actions) || !Array.isArray(actions)) return null;
 	const drawingsOp = actions.find((action) => Array.isArray(action) && (action === null || action === void 0 ? void 0 : action[0]) === "drawings");
@@ -2450,14 +2207,33 @@ function getReOrderedDrawings(actions) {
 	}
 	return drawingIndexes;
 }
+function collectUpdatedDrawingIds(actions, drawingIds = /* @__PURE__ */ new Set()) {
+	if (JSONX.isNoop(actions) || !Array.isArray(actions)) return drawingIds;
+	if (actions[0] === "drawings") {
+		const drawingKeyOrOps = actions[1];
+		if (typeof drawingKeyOrOps === "string") {
+			drawingIds.add(drawingKeyOrOps);
+			return drawingIds;
+		}
+		actions.slice(1).forEach((action) => {
+			if (Array.isArray(action) && typeof action[0] === "string") drawingIds.add(action[0]);
+		});
+		return drawingIds;
+	}
+	actions.forEach((action) => {
+		if (Array.isArray(action)) collectUpdatedDrawingIds(action, drawingIds);
+	});
+	return drawingIds;
+}
 let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends Disposable {
-	constructor(_univerInstanceService, _commandService, _drawingManagerService, _docDrawingService, _renderManagerService) {
+	constructor(_univerInstanceService, _commandService, _drawingManagerService, _docDrawingService, _renderManagerService, _docRefreshDrawingsService) {
 		super();
 		this._univerInstanceService = _univerInstanceService;
 		this._commandService = _commandService;
 		this._drawingManagerService = _drawingManagerService;
 		this._docDrawingService = _docDrawingService;
 		this._renderManagerService = _renderManagerService;
+		this._docRefreshDrawingsService = _docRefreshDrawingsService;
 		this._initialize();
 	}
 	_initialize() {
@@ -2474,10 +2250,25 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 				else this._removeDrawings(unitId, [drawingId]);
 			}
 		}));
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			if (command.id !== UpdateDocDrawingWrappingStyleCommand.id) return;
+			this._preserveWrappingStylePosition(command.params);
+		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			if (command.id !== RichTextEditingMutation.id) return;
 			const { unitId, actions } = command.params;
 			if (getReOrderedDrawings(actions).length > 0) this._updateDrawingsOrder(unitId);
+			const updatedDrawingIds = [...collectUpdatedDrawingIds(actions)];
+			if (updatedDrawingIds.length > 0) this._syncDrawingDataFromSnapshot(unitId, updatedDrawingIds);
+		}));
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== UpdateDrawingDocTransformCommand.id && command.id !== UpdateDocDrawingWrappingStyleCommand.id) return;
+			const { unitId } = command.params;
+			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (renderObject == null || scene == null) return;
+			this._docRefreshDrawingsService.refreshDrawings(renderObject.with(DocSkeletonManagerService).getSkeleton());
+			scene.getTransformerByCreate().refreshControls();
 		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			var _this$_univerInstance;
@@ -2491,6 +2282,65 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 			scene.getTransformerByCreate().refreshControls();
 		}));
 	}
+	_preserveWrappingStylePosition(params) {
+		var _documentDataModel$ge;
+		if (params.wrappingStyle === TextWrappingStyle.INLINE) return;
+		const { unitId } = params;
+		const documentDataModel = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const skeletonManager = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(DocSkeletonManagerService);
+		const skeletonData = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getSkeleton().getSkeletonData();
+		const viewModel = skeletonManager === null || skeletonManager === void 0 ? void 0 : skeletonManager.getViewModel();
+		if (!documentDataModel || !skeletonData || !viewModel) return;
+		const editArea = viewModel.getEditArea();
+		const { pages, skeHeaders, skeFooters } = skeletonData;
+		const oldDrawings = (_documentDataModel$ge = documentDataModel.getDrawings()) !== null && _documentDataModel$ge !== void 0 ? _documentDataModel$ge : {};
+		params.drawings = params.drawings.map((drawing) => {
+			const oldDrawing = oldDrawings[drawing.drawingId];
+			if (!oldDrawing) return drawing;
+			let drawingAnchor = null;
+			for (const page of pages) {
+				const { headerId, footerId, marginTop, marginLeft, marginBottom, pageWidth, pageHeight } = page;
+				if (editArea === DocumentEditArea.HEADER) {
+					var _skeHeaders$get;
+					const header = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+					if (header) drawingAnchor = findDrawingAnchorInPage(header, drawing.drawingId, header.marginTop, marginLeft);
+				} else if (editArea === DocumentEditArea.FOOTER) {
+					var _skeFooters$get;
+					const footer = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+					if (footer) drawingAnchor = findDrawingAnchorInPage(footer, drawing.drawingId, pageHeight - marginBottom + footer.marginTop, marginLeft);
+				} else drawingAnchor = findDrawingAnchorInPage(page, drawing.drawingId, marginTop, marginLeft);
+				if (drawingAnchor) break;
+			}
+			if (!drawingAnchor) return drawing;
+			const { skeDrawing, pageMarginTop, pageMarginLeft } = drawingAnchor;
+			const oldPositionH = oldDrawing.docTransform.positionH;
+			const oldPositionV = oldDrawing.docTransform.positionV;
+			let posOffsetH = skeDrawing.aLeft;
+			let posOffsetV = skeDrawing.aTop;
+			if (oldPositionH.relativeFrom === ObjectRelativeFromH.MARGIN) posOffsetH -= pageMarginLeft;
+			else if (oldPositionH.relativeFrom === ObjectRelativeFromH.COLUMN) posOffsetH -= skeDrawing.columnLeft;
+			if (oldPositionV.relativeFrom === ObjectRelativeFromV.PAGE) posOffsetV += pageMarginTop;
+			else if (oldPositionV.relativeFrom === ObjectRelativeFromV.LINE) posOffsetV -= skeDrawing.lineTop;
+			else if (oldPositionV.relativeFrom === ObjectRelativeFromV.PARAGRAPH) posOffsetV -= skeDrawing.blockAnchorTop;
+			return {
+				...oldDrawing,
+				...drawing,
+				docTransform: {
+					...oldDrawing.docTransform,
+					...drawing.docTransform,
+					positionH: {
+						relativeFrom: oldPositionH.relativeFrom,
+						posOffset: posOffsetH
+					},
+					positionV: {
+						relativeFrom: oldPositionV.relativeFrom,
+						posOffset: posOffsetV
+					}
+				}
+			};
+		});
+	}
 	_addDrawings(unitId, drawings) {
 		const drawingManagerService = this._drawingManagerService;
 		const docDrawingService = this._docDrawingService;
@@ -2537,13 +2387,33 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 			drawingIds: drawingsOrder
 		});
 	}
+	_syncDrawingDataFromSnapshot(unitId, drawingIds) {
+		const documentDataModel = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return;
+		const { drawings = {}, drawingsOrder = [] } = documentDataModel.getSnapshot();
+		const drawingData = drawings;
+		const renderOrder = getDocDrawingRenderOrder(drawingsOrder, drawings);
+		this._docDrawingService.setDrawingData(unitId, unitId, drawingData);
+		this._drawingManagerService.setDrawingData(unitId, unitId, drawingData);
+		this._docDrawingService.setDrawingOrder(unitId, unitId, drawingsOrder);
+		this._drawingManagerService.setDrawingOrder(unitId, unitId, renderOrder);
+		const objects = drawingIds.filter((drawingId) => drawingData[drawingId] != null).map((drawingId) => ({
+			unitId,
+			subUnitId: unitId,
+			drawingId
+		}));
+		if (objects.length === 0) return;
+		this._docDrawingService.updateNotification(objects);
+		this._drawingManagerService.updateNotification(objects);
+	}
 };
 DocDrawingAddRemoveController = __decorate([
 	__decorateParam(0, IUniverInstanceService),
 	__decorateParam(1, ICommandService),
 	__decorateParam(2, IDrawingManagerService),
 	__decorateParam(3, IDocDrawingService),
-	__decorateParam(4, IRenderManagerService)
+	__decorateParam(4, IRenderManagerService),
+	__decorateParam(5, Inject(DocRefreshDrawingsService))
 ], DocDrawingAddRemoveController);
 
 //#endregion
@@ -2918,6 +2788,8 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 				width,
 				height,
 				angle,
+				flipX: drawingOrigin.docTransform.flipX,
+				flipY: drawingOrigin.docTransform.flipY,
 				clipBounds: pageClipBounds
 			};
 			if (updateDrawingMap[drawingId] == null) updateDrawingMap[drawingId] = {
@@ -2927,6 +2799,7 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 				behindText,
 				transform,
 				transforms: [transform],
+				customBlockRenderViewport: drawing.customBlockRenderViewport,
 				isMultiTransform
 			};
 			else if (isMultiTransform === BooleanNumber.TRUE) updateDrawingMap[drawingId].transforms.push(transform);
@@ -3520,75 +3393,6 @@ DocDrawingTransformerController = __decorate([
 	__decorateParam(3, IRenderManagerService)
 ], DocDrawingTransformerController);
 
-//#endregion
-//#region src/menu/schema.ts
-const menuSchema = {
-	[RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
-		order: 0,
-		menuItemFactory: ImageMenuFactory,
-		[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 0,
-			menuItemFactory: UploadFloatImageMenuFactory
-		}
-	} },
-	[ContextMenuPosition.PARAGRAPH]: {
-		[ContextMenuGroup.LAYOUT]: { [INSERT_BELLOW_MENU_ID]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } },
-		[EMPTY_PARAGRAPH_MENU_ID]: { [ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } },
-		[DOC_CONTENT_INSERT_MENU_ID]: { [ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } },
-		[DOC_PARAGRAPH_T_INSERT_MENU_ID]: { insert: {
-			[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-				order: 1,
-				menuItemFactory: UploadFloatImageMenuFactory
-			},
-			[DOCS_SHAPE_MENU_ID]: {
-				order: 2,
-				menuItemFactory: ShapeMenuFactory
-			}
-		} },
-		[DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID]: { insert: {
-			[`${IMAGE_MENU_UPLOAD_FLOAT_ID}.below`]: {
-				order: 1,
-				menuItemFactory: UploadFloatImageBelowMenuFactory
-			},
-			[DOCS_SHAPE_BELOW_MENU_ID]: {
-				order: 2,
-				menuItemFactory: ShapeBelowMenuFactory
-			}
-		} },
-		[DOCS_SHAPE_MENU_ID]: { shapes: {
-			order: 0,
-			[InsertDocRectangleShapeCommand.id]: {
-				order: 0,
-				menuItemFactory: InsertRectangleShapeMenuFactory
-			},
-			[InsertDocEllipseShapeCommand.id]: {
-				order: 1,
-				menuItemFactory: InsertEllipseShapeMenuFactory
-			}
-		} },
-		[DOCS_SHAPE_BELOW_MENU_ID]: { shapes: {
-			order: 0,
-			[`${InsertDocRectangleShapeCommand.id}.below`]: {
-				order: 0,
-				menuItemFactory: InsertRectangleShapeBelowMenuFactory
-			},
-			[`${InsertDocEllipseShapeCommand.id}.below`]: {
-				order: 1,
-				menuItemFactory: InsertEllipseShapeBelowMenuFactory
-			}
-		} }
-	}
-};
-
 //#endregion
 //#region src/controllers/shortcuts/drawing.shortcut.ts
 function whenDocDrawingFocused(contextService) {
@@ -3678,22 +3482,17 @@ let DocDrawingUIController = class DocDrawingUIController extends Disposable {
 			InsertDocImageCommand,
 			InsertDocRectangleShapeCommand,
 			InsertDocEllipseShapeCommand,
-			InsertDocDrawingCommand,
-			UpdateDocDrawingWrappingStyleCommand,
 			UpdateDocDrawingDistanceCommand,
 			UpdateDocDrawingWrapTextCommand,
-			UpdateDrawingDocTransformCommand,
 			IMoveInlineDrawingCommand,
 			ITransformNonInlineDrawingCommand,
-			RemoveDocDrawingCommand,
 			SidebarDocDrawingOperation,
 			ClearDocDrawingTransformerOperation,
 			EditDocDrawingOperation,
 			GroupDocDrawingCommand,
 			UngroupDocDrawingCommand,
 			MoveDocDrawingsCommand,
-			DeleteDocDrawingsCommand,
-			SetDocDrawingArrangeCommand
+			DeleteDocDrawingsCommand
 		].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
 	}
 	_initShortcuts() {
@@ -3720,16 +3519,40 @@ DocDrawingUIController = __decorate([
 	__decorateParam(2, IShortcutService)
 ], DocDrawingUIController);
 
+//#endregion
+//#region src/services/doc-drawing-floating-toolbar-adapter.service.ts
+var DocDrawingFloatingToolbarAdapterService = class {
+	constructor() {
+		_defineProperty(this, "_adapters", []);
+	}
+	registerAdapter(adapter) {
+		this._adapters.push(adapter);
+		return toDisposable(() => {
+			const index = this._adapters.indexOf(adapter);
+			if (index >= 0) this._adapters.splice(index, 1);
+		});
+	}
+	getItems(params) {
+		for (const adapter of this._adapters) {
+			const items = adapter.getItems(params);
+			if (items) return [...items].sort((a, b) => a.index - b.index);
+		}
+		return null;
+	}
+};
+
 //#endregion
 //#region src/menu/drawing-popup-menu.controller.ts
 let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends RxDisposable {
-	constructor(_drawingManagerService, _canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService, _commandService) {
+	constructor(_drawingManagerService, _canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService, _drawingAdapterService, _floatingToolbarAdapterService, _commandService) {
 		super();
 		this._drawingManagerService = _drawingManagerService;
 		this._canvasPopManagerService = _canvasPopManagerService;
 		this._renderManagerService = _renderManagerService;
 		this._univerInstanceService = _univerInstanceService;
 		this._contextService = _contextService;
+		this._drawingAdapterService = _drawingAdapterService;
+		this._floatingToolbarAdapterService = _floatingToolbarAdapterService;
 		this._commandService = _commandService;
 		_defineProperty(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
 		_defineProperty(this, "_disposePopups", []);
@@ -3799,13 +3622,14 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 			if (!drawingParam || drawingParam.drawingType === DrawingTypeEnum.DRAWING_DOM || drawingParam.drawingType === DrawingTypeEnum.DRAWING_SHAPE) return;
 			const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
 			const isImage = drawingType === DrawingTypeEnum.DRAWING_IMAGE;
+			const isChart = drawingType === DrawingTypeEnum.DRAWING_CHART;
 			const popup = this._canvasPopManagerService.attachPopupToObject(object, {
 				componentKey: COMPONENT_IMAGE_POPUP_MENU,
-				direction: isImage ? "top-center" : "horizontal",
-				offset: isImage ? [0, 8] : [2, 0],
+				direction: isImage || isChart ? "top-center" : "horizontal",
+				offset: isImage || isChart ? [0, 8] : [2, 0],
 				extraProps: {
-					menuItems: this._getImageMenuItems(unitId, subUnitId, drawingId, drawingType),
-					variant: isImage ? "doc-floating-toolbar" : void 0,
+					menuItems: this._getDrawingPopupMenuItems(unitId, subUnitId, drawingId, drawingType),
+					variant: isImage ? "doc-floating-toolbar" : isChart ? "doc-chart-floating-toolbar" : void 0,
 					unitId,
 					subUnitId,
 					drawingId
@@ -3834,22 +3658,53 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 			disposePopups.length = 0;
 		}));
 	}
-	_getImageMenuItems(unitId, subUnitId, drawingId, drawingType) {
+	_getDrawingPopupMenuItems(unitId, subUnitId, drawingId, drawingType) {
+		var _editCommandInfo$labe, _editCommandInfo$comm, _editCommandInfo$comm2, _editCommandInfo$disa;
+		const drawing = this._drawingManagerService.getDrawingByParam({
+			unitId,
+			subUnitId,
+			drawingId
+		});
+		const floatingToolbarMenuItems = drawing ? this._floatingToolbarAdapterService.getItems({
+			unitId,
+			subUnitId,
+			drawing
+		}) : null;
+		if (floatingToolbarMenuItems) return floatingToolbarMenuItems;
+		const editCommandInfo = drawing ? this._drawingAdapterService.getEditDrawingCommandInfo({
+			unitId,
+			subUnitId,
+			drawing
+		}) : null;
 		return [
 			{
-				label: "docs-drawing-ui.image-popup.edit",
+				label: (_editCommandInfo$labe = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.label) !== null && _editCommandInfo$labe !== void 0 ? _editCommandInfo$labe : "docs-drawing-ui.image-popup.edit",
 				index: 0,
-				commandId: EditDocDrawingOperation.id,
+				commandId: (_editCommandInfo$comm = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.commandId) !== null && _editCommandInfo$comm !== void 0 ? _editCommandInfo$comm : EditDocDrawingOperation.id,
+				commandParams: (_editCommandInfo$comm2 = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.commandParams) !== null && _editCommandInfo$comm2 !== void 0 ? _editCommandInfo$comm2 : {
+					unitId,
+					subUnitId,
+					drawingId
+				},
+				disable: (_editCommandInfo$disa = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.disable) !== null && _editCommandInfo$disa !== void 0 ? _editCommandInfo$disa : drawingType === DrawingTypeEnum.DRAWING_DOM,
+				hideOnClick: true,
+				icon: "DrawingEditIcon"
+			},
+			{
+				label: "docs-drawing-ui.image-popup.crop",
+				index: 1,
+				commandId: OpenImageCropOperation.id,
 				commandParams: {
 					unitId,
 					subUnitId,
 					drawingId
 				},
-				disable: drawingType === DrawingTypeEnum.DRAWING_DOM
+				disable: drawingType === DrawingTypeEnum.DRAWING_DOM,
+				icon: "DrawingCropIcon"
 			},
 			{
 				label: "docs-drawing-ui.image-popup.delete",
-				index: 1,
+				index: 2,
 				commandId: RemoveDocDrawingCommand.id,
 				commandParams: {
 					unitId,
@@ -3859,18 +3714,8 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 						drawingId
 					}]
 				},
-				disable: false
-			},
-			{
-				label: "docs-drawing-ui.image-popup.crop",
-				index: 2,
-				commandId: OpenImageCropOperation.id,
-				commandParams: {
-					unitId,
-					subUnitId,
-					drawingId
-				},
-				disable: drawingType === DrawingTypeEnum.DRAWING_DOM
+				disable: false,
+				icon: "DrawingDeleteIcon"
 			},
 			{
 				label: "docs-drawing-ui.image-popup.reset",
@@ -3892,7 +3737,9 @@ DocDrawingPopupMenuController = __decorate([
 	__decorateParam(2, IRenderManagerService),
 	__decorateParam(3, IUniverInstanceService),
 	__decorateParam(4, IContextService),
-	__decorateParam(5, ICommandService)
+	__decorateParam(5, IDocDrawingAdapterService),
+	__decorateParam(6, Inject(DocDrawingFloatingToolbarAdapterService)),
+	__decorateParam(7, ICommandService)
 ], DocDrawingPopupMenuController);
 
 //#endregion
@@ -3915,6 +3762,7 @@ let UniverDocsDrawingUIPlugin = class UniverDocsDrawingUIPlugin extends Plugin {
 			[DocDrawingTransformerController],
 			[DocDrawingAddRemoveController],
 			[DocRefreshDrawingsService],
+			[DocDrawingFloatingToolbarAdapterService],
 			[DocFloatDomController],
 			[DocDrawingPrintingController]
 		].forEach((dependency) => this._injector.add(dependency));
@@ -3944,4 +3792,4 @@ UniverDocsDrawingUIPlugin = __decorate([
 ], UniverDocsDrawingUIPlugin);
 
 //#endregion
-export { ClearDocDrawingTransformerOperation, DOCS_IMAGE_MENU_ID, DOCS_SHAPE_BELOW_MENU_ID, DOCS_SHAPE_MENU_ID, DeleteDocDrawingsCommand, DocDrawingPosition, DocDrawingTextWrap, DocFloatDomController, EditDocDrawingOperation, GroupDocDrawingCommand, InsertDocDrawingCommand, InsertDocEllipseShapeCommand, InsertDocImageCommand, InsertDocRectangleShapeCommand, MoveDocDrawingsCommand, RemoveDocDrawingCommand, SetDocDrawingArrangeCommand, SidebarDocDrawingOperation, UngroupDocDrawingCommand, UniverDocsDrawingUIPlugin };
+export { ClearDocDrawingTransformerOperation, DOCS_IMAGE_MENU_ID, DOCS_SHAPE_BELOW_MENU_ID, DOCS_SHAPE_MENU_ID, DeleteDocDrawingsCommand, DocDrawingFloatingToolbarAdapterService, DocDrawingPosition, DocDrawingTextWrap, DocFloatDomController, menuSchema as DocsDrawingUIMenuSchema, EditDocDrawingOperation, GroupDocDrawingCommand, InsertDocEllipseShapeCommand, InsertDocImageCommand, InsertDocRectangleShapeCommand, MoveDocDrawingsCommand, SidebarDocDrawingOperation, UngroupDocDrawingCommand, UniverDocsDrawingUIPlugin };