npm - @univerjs/docs-drawing-ui - Versions diffs - 1.0.0-alpha.2 → 1.0.0-alpha.4 - Mend

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

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

Files changed (18) hide show

package/lib/cjs/index.js CHANGED Viewed

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 let _univerjs_core = require("@univerjs/core");
 let _univerjs_docs_drawing = require("@univerjs/docs-drawing");
-let _univerjs_docs = require("@univerjs/docs");
-let _univerjs_docs_ui = require("@univerjs/docs-ui");
 let _univerjs_engine_render = require("@univerjs/engine-render");
 let _univerjs_design = require("@univerjs/design");
+let _univerjs_docs = require("@univerjs/docs");
+let _univerjs_docs_ui = require("@univerjs/docs-ui");
 let _univerjs_drawing = require("@univerjs/drawing");
 let _univerjs_ui = require("@univerjs/ui");
 let rxjs = require("rxjs");
@@ -12,77 +12,6 @@ let _univerjs_drawing_ui = require("@univerjs/drawing-ui");
 let react = require("react");
 let react_jsx_runtime = require("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: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _docSelectionRenderSe, _documentDataModel$ge, _documentDataModel$ge2;
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
-		const documentDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (params == null || documentDataModel == null) return false;
-		const docSelectionRenderService = renderManagerService.getRenderById(params.unitId).with(_univerjs_docs_ui.DocSelectionRenderService);
-		const { drawings: removeDrawings } = params;
-		const segmentId = (_docSelectionRenderSe = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : "";
-		const textX = new _univerjs_core.TextX();
-		const jsonX = _univerjs_core.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 _univerjs_core.MemoryCursor();
-		memoryCursor.reset();
-		const cursorIndex = removeCustomBlocks[0].startIndex;
-		const textRanges = [{
-			startOffset: cursorIndex,
-			endOffset: cursorIndex
-		}];
-		const doMutation = {
-			id: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges
-			}
-		};
-		const rawActions = [];
-		for (const block of removeCustomBlocks) {
-			const { startIndex } = block;
-			if (startIndex > memoryCursor.cursor) textX.push({
-				t: _univerjs_core.TextXActionType.RETAIN,
-				len: startIndex - memoryCursor.cursor
-			});
-			textX.push({
-				t: _univerjs_core.TextXActionType.DELETE,
-				len: 1
-			});
-			memoryCursor.moveCursorTo(startIndex + 1);
-		}
-		const path = (0, _univerjs_core.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 _univerjs_core.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",
@@ -101,7 +30,7 @@ const DeleteDocDrawingsCommand = {
 				drawingType
 			};
 		});
-		return commandService.executeCommand(RemoveDocDrawingCommand.id, {
+		return commandService.executeCommand(_univerjs_docs_drawing.RemoveDocDrawingCommand.id, {
 			unitId,
 			drawings: newDrawings
 		});
@@ -121,168 +50,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: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _ref, _contentInsertRange$s, _documentDataModel$ge, _documentDataModel$ge2, _documentDataModel$ge3;
-		if (params == null) return false;
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
-		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-		const activeTextRange = docSelectionManagerService.getActiveTextRange();
-		const documentDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.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 _univerjs_core.TextX();
-		const jsonX = _univerjs_core.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: _univerjs_core.TextXActionType.RETAIN,
-				len: startOffset
-			});
-		} else {
-			var _documentDataModel$ge4, _documentDataModel$ge5;
-			const dos = _univerjs_core.BuildTextUtils.selection.delete([targetTextRange], body, 0, null, false);
-			textX.push(...dos);
-			const removedCustomBlockIds = (0, _univerjs_docs_ui.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: _univerjs_core.TextXActionType.INSERT,
-			body: {
-				dataStream: "\b".repeat(drawings.length),
-				customBlocks: drawings.map((drawing, i) => ({
-					startIndex: i,
-					blockId: drawing.drawingId
-				}))
-			},
-			len: drawings.length
-		});
-		const path = (0, _univerjs_core.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: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: []
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.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(_univerjs_docs.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: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const docDrawingService = accessor.get(_univerjs_docs_drawing.IDocDrawingService);
-		if (params == null) return false;
-		const { unitId, subUnitId, drawingIds, arrangeType } = params;
-		const drawingOrderMapParam = {
-			unitId,
-			subUnitId,
-			drawingIds
-		};
-		let jsonOp;
-		if (arrangeType === _univerjs_core.ArrangeTypeEnum.forward) jsonOp = docDrawingService.getForwardDrawingsOp(drawingOrderMapParam);
-		else if (arrangeType === _univerjs_core.ArrangeTypeEnum.backward) jsonOp = docDrawingService.getBackwardDrawingOp(drawingOrderMapParam);
-		else if (arrangeType === _univerjs_core.ArrangeTypeEnum.front) jsonOp = docDrawingService.getFrontDrawingsOp(drawingOrderMapParam);
-		else if (arrangeType === _univerjs_core.ArrangeTypeEnum.back) jsonOp = docDrawingService.getBackDrawingsOp(drawingOrderMapParam);
-		if (jsonOp == null) return false;
-		const { redo } = jsonOp;
-		if (redo == null) return false;
-		const rawActions = [];
-		let redoCopy = _univerjs_core.Tools.deepClone(redo);
-		redoCopy = redoCopy.slice(3);
-		redoCopy.unshift("drawingsOrder");
-		rawActions.push(redoCopy);
-		const doMutation = {
-			id: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.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
 /**
@@ -430,13 +197,13 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			const type = error.message;
 			let content = "";
 			switch (type) {
-				case _univerjs_drawing.ImageUploadStatusType.ERROR_EXCEED_SIZE:
+				case _univerjs_core.ImageUploadStatusType.ERROR_EXCEED_SIZE:
 					content = this._localeService.t("docs-drawing-ui.update-status.exceedMaxSize", String((0, _univerjs_drawing.getDrawingImageAllowSize)() / (1024 * 1024)));
 					break;
-				case _univerjs_drawing.ImageUploadStatusType.ERROR_IMAGE_TYPE:
+				case _univerjs_core.ImageUploadStatusType.ERROR_IMAGE_TYPE:
 					content = this._localeService.t("docs-drawing-ui.update-status.invalidImageType");
 					break;
-				case _univerjs_drawing.ImageUploadStatusType.ERROR_IMAGE:
+				case _univerjs_core.ImageUploadStatusType.ERROR_IMAGE:
 					content = this._localeService.t("docs-drawing-ui.update-status.invalidImage");
 					break;
 				default: break;
@@ -463,7 +230,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			const imagePosition = insertPosition !== null && insertPosition !== void 0 ? insertPosition : this._getCurrentImageInsertPosition();
 			const docTransform = this._getImagePosition(width * scale, height * scale, imagePosition);
 			if (docTransform == null) return;
-			const transform = (0, _univerjs_docs_ui.docDrawingPositionToTransform)(docTransform);
+			const transform = (0, _univerjs_docs.docDrawingPositionToTransform)(docTransform);
 			if (transform != null && imagePosition != null) transform.top = imagePosition.top;
 			const docDrawingParam = {
 				unitId,
@@ -490,7 +257,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			}
 			docDrawingParams.push(docDrawingParam);
 		}
-		this._commandService.executeCommand(InsertDocDrawingCommand.id, {
+		this._commandService.executeCommand(_univerjs_docs_drawing.InsertDocDrawingCommand.id, {
 			unitId,
 			drawings: docDrawingParams
 		});
@@ -504,25 +271,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 (0, _univerjs_docs.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: _univerjs_core.ObjectRelativeFromH.PAGE,
-				posOffset: position.left
-			},
-			positionV: {
-				relativeFrom: _univerjs_core.ObjectRelativeFromV.PARAGRAPH,
-				posOffset: 0
-			},
-			angle: 0
-		};
+		}).left });
 	}
 	_getCurrentImageInsertPosition() {
 		var _this$_docSelectionRe;
@@ -536,7 +288,7 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 	_updateOrderListener() {
 		this.disposeWithMe(this._drawingManagerService.featurePluginOrderUpdate$.subscribe((params) => {
 			const { unitId, subUnitId, drawingIds, arrangeType } = params;
-			this._commandService.executeCommand(SetDocDrawingArrangeCommand.id, {
+			this._commandService.executeCommand(_univerjs_docs_drawing.SetDocDrawingArrangeCommand.id, {
 				unitId,
 				subUnitId,
 				drawingIds,
@@ -666,7 +418,10 @@ let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController ex
 			});
 		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted(async (command) => {
-			if (command.id === _univerjs_docs.RichTextEditingMutation.id) queueMicrotask(() => {
+			if (command.id !== _univerjs_docs.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();
 			});
 		}));
@@ -691,7 +446,7 @@ DocDrawingUpdateRenderController = __decorate([
 	__decorateParam(1, _univerjs_core.ICommandService),
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService)),
 	__decorateParam(3, _univerjs_engine_render.IRenderManagerService),
-	__decorateParam(4, _univerjs_drawing.IImageIoService),
+	__decorateParam(4, _univerjs_core.IImageIoService),
 	__decorateParam(5, _univerjs_docs_drawing.IDocDrawingService),
 	__decorateParam(6, _univerjs_drawing.IDrawingManagerService),
 	__decorateParam(7, _univerjs_core.IContextService),
@@ -723,23 +478,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: _univerjs_core.ObjectRelativeFromH.PAGE,
-			posOffset: 0
-		},
-		positionV: {
-			relativeFrom: _univerjs_core.ObjectRelativeFromV.PARAGRAPH,
-			posOffset: 0
-		},
-		angle: 0
-	};
-}
 function createShapeInsertCommand(shape, width, height, id) {
 	return {
 		id,
@@ -749,17 +487,17 @@ function createShapeInsertCommand(shape, width, height, id) {
 			const commandService = accessor.get(_univerjs_core.ICommandService);
 			const unitId = (_univerInstanceServic = accessor.get(_univerjs_core.IUniverInstanceService).getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId();
 			if (!unitId) return false;
-			const docTransform = createDefaultDocTransform(width, height);
-			return commandService.executeCommand(InsertDocDrawingCommand.id, {
+			const docTransform = (0, _univerjs_docs.buildDocTransform)(width, height);
+			return commandService.executeCommand(_univerjs_docs_drawing.InsertDocDrawingCommand.id, {
 				unitId,
 				drawings: [{
 					unitId,
 					subUnitId: unitId,
 					drawingId: (0, _univerjs_core.generateRandomId)(6),
 					drawingType: _univerjs_core.DrawingTypeEnum.DRAWING_IMAGE,
-					imageSourceType: _univerjs_drawing.ImageSourceType.BASE64,
+					imageSourceType: _univerjs_core.ImageSourceType.BASE64,
 					source: createShapeSvgSource(shape, width, height),
-					transform: (0, _univerjs_docs_ui.docDrawingPositionToTransform)(docTransform),
+					transform: (0, _univerjs_docs.docDrawingPositionToTransform)(docTransform),
 					docTransform,
 					behindDoc: _univerjs_core.BooleanNumber.FALSE,
 					title: "",
@@ -779,530 +517,9 @@ 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"]: _univerjs_core.PositionedObjectLayoutType.INLINE,
-	["wrapSquare"]: _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE,
-	["wrapTopAndBottom"]: _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM,
-	["inFrontOfText"]: _univerjs_core.PositionedObjectLayoutType.WRAP_NONE,
-	["behindText"]: _univerjs_core.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 _univerjs_core.TextX();
-	const jsonX = _univerjs_core.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: _univerjs_core.TextXActionType.RETAIN,
-				len: offset
-			});
-			textX.push({
-				t: _univerjs_core.TextXActionType.INSERT,
-				body: {
-					dataStream: "\b",
-					customBlocks: [{
-						startIndex: 0,
-						blockId: drawingId
-					}]
-				},
-				len: 1
-			});
-			textX.push({
-				t: _univerjs_core.TextXActionType.RETAIN,
-				len: oldOffset - offset
-			});
-			textX.push({
-				t: _univerjs_core.TextXActionType.DELETE,
-				len: 1
-			});
-		} else {
-			if (oldOffset > 0) textX.push({
-				t: _univerjs_core.TextXActionType.RETAIN,
-				len: oldOffset
-			});
-			textX.push({
-				t: _univerjs_core.TextXActionType.DELETE,
-				len: 1
-			});
-			if (offset - oldOffset - 1 > 0) textX.push({
-				t: _univerjs_core.TextXActionType.RETAIN,
-				len: offset - oldOffset - 1
-			});
-			textX.push({
-				t: _univerjs_core.TextXActionType.INSERT,
-				body: {
-					dataStream: "\b",
-					customBlocks: [{
-						startIndex: 0,
-						blockId: drawingId
-					}]
-				},
-				len: 1
-			});
-		}
-		if (offset !== oldOffset) {
-			const path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, oldSegmentId);
-			const action = jsonX.editOp(textX.serialize(), path);
-			rawActions.push(action);
-		}
-	} else {
-		if (oldOffset > 0) textX.push({
-			t: _univerjs_core.TextXActionType.RETAIN,
-			len: oldOffset
-		});
-		textX.push({
-			t: _univerjs_core.TextXActionType.DELETE,
-			len: 1
-		});
-		let path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, oldSegmentId);
-		let action = jsonX.editOp(textX.serialize(), path);
-		rawActions.push(action);
-		textX.empty();
-		if (offset > 0) textX.push({
-			t: _univerjs_core.TextXActionType.RETAIN,
-			len: offset
-		});
-		textX.push({
-			t: _univerjs_core.TextXActionType.INSERT,
-			body: {
-				dataStream: "\b",
-				customBlocks: [{
-					startIndex: 0,
-					blockId: drawingId
-				}]
-			},
-			len: 1
-		});
-		path = (0, _univerjs_core.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",
-	type: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const { drawings, wrappingStyle, unitId } = params;
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-		const renderObject = accessor.get(_univerjs_engine_render.IRenderManagerService).getRenderById(unitId);
-		const skeletonData = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton().getSkeletonData();
-		const viewModel = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.DocSkeletonManagerService).getViewModel();
-		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
-		const documentDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.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 = _univerjs_core.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" ? _univerjs_core.BooleanNumber.TRUE : _univerjs_core.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 _univerjs_engine_render.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 _univerjs_engine_render.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 _univerjs_engine_render.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 === _univerjs_core.ObjectRelativeFromH.MARGIN) posOffsetH -= pageMarginLeft;
-				else if (oldPositionH.relativeFrom === _univerjs_core.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 === _univerjs_core.ObjectRelativeFromV.PAGE) posOffsetV += pageMarginTop;
-				else if (oldPositionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) posOffsetV -= skeDrawing.lineTop;
-				else if (oldPositionV.relativeFrom === _univerjs_core.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: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.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: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-		const { drawings, dist, unitId } = params;
-		const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const jsonX = _univerjs_core.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: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.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: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-		const { drawings, wrapText, unitId } = params;
-		const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const jsonX = _univerjs_core.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: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.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: _univerjs_core.CommandType.COMMAND,
-	handler: (accessor, params) => {
-		if (params == null) return false;
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-		const renderManagerService = accessor.get(_univerjs_engine_render.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, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (documentDataModel == null) return false;
-		const jsonX = _univerjs_core.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 (!_univerjs_core.Tools.diffValue(oldValue, value)) {
-				const action = jsonX.replaceOp([
-					"drawings",
-					drawingId,
-					"docTransform",
-					key
-				], oldValue, value);
-				rawActions.push(action);
-			}
-		}
-		const doMutation = {
-			id: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null,
-				debounce: true
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.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: _univerjs_core.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(_univerjs_engine_render.IRenderManagerService);
-		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs_ui.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(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		if (scene == null || docSelectionRenderService == null) return false;
-		const transformer = scene.getTransformerByCreate();
-		const commandService = accessor.get(_univerjs_core.ICommandService);
-		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getUnit(unitId, _univerjs_core.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: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.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: _univerjs_core.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(_univerjs_engine_render.IRenderManagerService);
-		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(_univerjs_docs_ui.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(_univerjs_core.ICommandService);
-		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getUnit(unitId, _univerjs_core.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 = _univerjs_core.JSONX.getInstance();
-		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
-		const { positionH: oldPositionH, positionV: oldPositionV, size: oldSize, angle: oldAngle } = oldDrawings[drawingId].docTransform;
-		if (!_univerjs_core.Tools.diffValue(oldPositionH, docTransform.positionH)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"positionH"
-			], oldPositionH, docTransform.positionH);
-			rawActions.push(updateAction);
-		}
-		if (!_univerjs_core.Tools.diffValue(oldPositionV, docTransform.positionV)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"positionV"
-			], oldPositionV, docTransform.positionV);
-			rawActions.push(updateAction);
-		}
-		if (!_univerjs_core.Tools.diffValue(oldSize, docTransform.size)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"size"
-			], oldSize, docTransform.size);
-			rawActions.push(updateAction);
-		}
-		if (!_univerjs_core.Tools.diffValue(oldAngle, docTransform.angle)) {
-			const updateAction = jsonX.replaceOp([
-				"drawings",
-				drawingId,
-				"docTransform",
-				"angle"
-			], oldAngle, docTransform.angle);
-			rawActions.push(updateAction);
-		}
-		const doMutation = {
-			id: _univerjs_docs.RichTextEditingMutation.id,
-			params: {
-				unitId,
-				actions: [],
-				textRanges: null,
-				debounce: true
-			}
-		};
-		doMutation.params.actions = rawActions.reduce((acc, cur) => {
-			return _univerjs_core.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",
+//#region src/commands/commands/move-drawings.command.ts
+const MoveDocDrawingsCommand = {
+	id: "doc.command.move-drawing",
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: (accessor, params) => {
 		const commandService = accessor.get(_univerjs_core.ICommandService);
@@ -1346,7 +563,7 @@ const MoveDocDrawingsCommand = {
 			};
 		}).filter((drawing) => drawing != null);
 		if (newDrawings.length === 0) return false;
-		const result = commandService.syncExecuteCommand(UpdateDrawingDocTransformCommand.id, {
+		const result = commandService.syncExecuteCommand(_univerjs_docs_drawing.UpdateDrawingDocTransformCommand.id, {
 			unitId,
 			subUnitId: unitId,
 			drawings: newDrawings
@@ -1465,6 +682,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 _univerjs_core.Disposable {
 	constructor(_renderManagerService, _drawingManagerService, _drawingRenderService, _canvasFloatDomService, _univerInstanceService, _commandService) {
 		super();
@@ -1482,6 +723,7 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 	}
 	_initialize() {
 		this._drawingAddRemoveListener();
+		this._drawingRuntimePropsListener();
 		this._initScrollAndZoomEvent();
 	}
 	_getSceneAndTransformerByDrawingSearch(unitId) {
@@ -1517,6 +759,12 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 			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 _univerjs_core.DisposableCollection();
 				const position$ = new rxjs.BehaviorSubject(calcDocFloatDomPosition(rect, renderObject.renderUnit));
@@ -1524,7 +772,10 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 				const data = rectParam.data;
 				const info = {
 					dispose: disposableCollection,
+					preserveRuntimeGeometry,
 					rect,
+					runtimeTransform,
+					runtimeViewport,
 					position$,
 					unitId
 				};
@@ -1532,6 +783,8 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 					position$,
 					id: rectParam.drawingId,
 					componentKey: rectParam.componentKey,
+					eventPassThrough: preserveRuntimeGeometry ? false : void 0,
+					preserveOnFocusChange: preserveRuntimeGeometry,
 					onPointerDown: (evt) => {
 						canvas.dispatchEvent(new PointerEvent(evt.type, evt));
 					},
@@ -1545,20 +798,42 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 						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(_univerjs_docs_ui.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((0, _univerjs_core.toDisposable)(o.onPointerEnter$.subscribeEvent(() => {
 			o.cursor = _univerjs_engine_render.CURSOR_TYPE.GRAB;
@@ -1644,10 +919,10 @@ let DocFloatDomController = class DocFloatDomController extends _univerjs_core.D
 				description: "",
 				docTransform,
 				layoutType: _univerjs_core.PositionedObjectLayoutType.INLINE,
-				transform: (0, _univerjs_docs_ui.docDrawingPositionToTransform)(docTransform)
+				transform: (0, _univerjs_docs.docDrawingPositionToTransform)(docTransform)
 			}]
 		};
-		this._commandService.syncExecuteCommand(InsertDocDrawingCommand.id, params);
+		this._commandService.syncExecuteCommand(_univerjs_docs_drawing.InsertDocDrawingCommand.id, params);
 		return drawingId;
 	}
 };
@@ -1659,6 +934,71 @@ DocFloatDomController = __decorate([
 	__decorateParam(4, _univerjs_core.IUniverInstanceService),
 	__decorateParam(5, _univerjs_core.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 (0, _univerjs_core.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
@@ -1785,10 +1125,79 @@ function InsertEllipseShapeBelowMenuFactory(accessor) {
 	};
 }
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = {
+	[_univerjs_ui.RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
+		order: 0,
+		menuItemFactory: ImageMenuFactory,
+		[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 0,
+			menuItemFactory: UploadFloatImageMenuFactory
+		}
+	} },
+	[_univerjs_ui.ContextMenuPosition.PARAGRAPH]: {
+		[_univerjs_ui.ContextMenuGroup.LAYOUT]: { [_univerjs_docs_ui.INSERT_BELLOW_MENU_ID]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[_univerjs_docs_ui.EMPTY_PARAGRAPH_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[_univerjs_docs_ui.DOC_CONTENT_INSERT_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+			order: 5,
+			menuItemFactory: UploadFloatImageMenuFactory
+		} } },
+		[_univerjs_docs_ui.DOC_PARAGRAPH_T_INSERT_MENU_ID]: { insert: {
+			[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+				order: 1,
+				menuItemFactory: UploadFloatImageMenuFactory
+			},
+			[DOCS_SHAPE_MENU_ID]: {
+				order: 2,
+				menuItemFactory: ShapeMenuFactory
+			}
+		} },
+		[_univerjs_docs_ui.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
@@ -1816,21 +1225,23 @@ const defaultPluginConfig = {};
 const MIN_OFFSET = -1e3;
 const MAX_OFFSET = 1e3;
 const DocDrawingPosition = (props) => {
+	var _renderManagerService;
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.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__ */ (0, react_jsx_runtime.jsx)(DocDrawingPositionContent, { ...props }) : null;
+};
+function DocDrawingPositionContent(props) {
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
 	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
 	const { drawings } = props;
-	const drawingParam = drawings[0];
-	if (drawingParam == null) return;
-	const { unitId } = drawingParam;
+	const { unitId } = drawings[0];
 	const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.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"),
@@ -1878,7 +1289,7 @@ const DocDrawingPosition = (props) => {
 	const [followTextMove, setFollowTextMove] = (0, react.useState)(true);
 	const [showPanel, setShowPanel] = (0, react.useState)(true);
 	function handlePositionChange(direction, value) {
-		var _renderManagerService;
+		var _renderManagerService2;
 		if (direction === "positionH") setHPosition(value);
 		else setVPosition(value);
 		const focusDrawings = drawingManagerService.getFocusDrawings();
@@ -1890,7 +1301,7 @@ const DocDrawingPosition = (props) => {
 				drawingId: drawing.drawingId
 			};
 		});
-		commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+		commandService.executeCommand(_univerjs_docs_drawing.UpdateDrawingDocTransformCommand.id, {
 			unitId: focusDrawings[0].unitId,
 			subUnitId: focusDrawings[0].unitId,
 			drawings: drawings.map((drawing) => ({
@@ -1899,12 +1310,12 @@ const DocDrawingPosition = (props) => {
 				value
 			}))
 		});
-		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs_ui.DocSelectionRenderService);
+		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(_univerjs_docs_ui.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);
@@ -1915,7 +1326,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(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const skeleton = (_renderManagerService3 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
 		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
 		if (skeletonData == null) return;
 		const { pages, skeHeaders, skeFooters } = skeletonData;
@@ -1953,7 +1364,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);
@@ -1962,8 +1373,8 @@ const DocDrawingPosition = (props) => {
 		if (focusDrawings.length === 0) return;
 		const { drawingId, unitId } = focusDrawings[0];
 		const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-		const skeleton = (_renderManagerService3 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
-		const docSelectionRenderService = (_renderManagerService4 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.with(_univerjs_docs_ui.DocSelectionRenderService);
+		const skeleton = (_renderManagerService4 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const docSelectionRenderService = (_renderManagerService5 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService5 === void 0 ? void 0 : _renderManagerService5.with(_univerjs_docs_ui.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);
@@ -2095,6 +1506,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 _univerjs_core.TextX();
+	const jsonX = _univerjs_core.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: _univerjs_core.TextXActionType.RETAIN,
+				len: offset
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.INSERT,
+				body: {
+					dataStream: "\b",
+					customBlocks: [{
+						startIndex: 0,
+						blockId: drawingId
+					}]
+				},
+				len: 1
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: oldOffset - offset
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.DELETE,
+				len: 1
+			});
+		} else {
+			if (oldOffset > 0) textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: oldOffset
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.DELETE,
+				len: 1
+			});
+			if (offset - oldOffset - 1 > 0) textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: offset - oldOffset - 1
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.INSERT,
+				body: {
+					dataStream: "\b",
+					customBlocks: [{
+						startIndex: 0,
+						blockId: drawingId
+					}]
+				},
+				len: 1
+			});
+		}
+		if (offset !== oldOffset) {
+			const path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, oldSegmentId);
+			const action = jsonX.editOp(textX.serialize(), path);
+			rawActions.push(action);
+		}
+	} else {
+		if (oldOffset > 0) textX.push({
+			t: _univerjs_core.TextXActionType.RETAIN,
+			len: oldOffset
+		});
+		textX.push({
+			t: _univerjs_core.TextXActionType.DELETE,
+			len: 1
+		});
+		let path = (0, _univerjs_core.getRichTextEditPath)(documentDataModel, oldSegmentId);
+		let action = jsonX.editOp(textX.serialize(), path);
+		rawActions.push(action);
+		textX.empty();
+		if (offset > 0) textX.push({
+			t: _univerjs_core.TextXActionType.RETAIN,
+			len: offset
+		});
+		textX.push({
+			t: _univerjs_core.TextXActionType.INSERT,
+			body: {
+				dataStream: "\b",
+				customBlocks: [{
+					startIndex: 0,
+					blockId: drawingId
+				}]
+			},
+			len: 1
+		});
+		path = (0, _univerjs_core.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: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const { drawings, dist, unitId } = params;
+		const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		const jsonX = _univerjs_core.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: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.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: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const { drawings, wrapText, unitId } = params;
+		const documentDataModel = univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return false;
+		const jsonX = _univerjs_core.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: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.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: _univerjs_core.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(_univerjs_engine_render.IRenderManagerService);
+		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs_ui.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(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		if (scene == null || docSelectionRenderService == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getUnit(unitId, _univerjs_core.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: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.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: _univerjs_core.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(_univerjs_engine_render.IRenderManagerService);
+		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(_univerjs_docs_ui.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(_univerjs_core.ICommandService);
+		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getUnit(unitId, _univerjs_core.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 = _univerjs_core.JSONX.getInstance();
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		const { positionH: oldPositionH, positionV: oldPositionV, size: oldSize, angle: oldAngle } = oldDrawings[drawingId].docTransform;
+		if (!_univerjs_core.Tools.diffValue(oldPositionH, docTransform.positionH)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"positionH"
+			], oldPositionH, docTransform.positionH);
+			rawActions.push(updateAction);
+		}
+		if (!_univerjs_core.Tools.diffValue(oldPositionV, docTransform.positionV)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"positionV"
+			], oldPositionV, docTransform.positionV);
+			rawActions.push(updateAction);
+		}
+		if (!_univerjs_core.Tools.diffValue(oldSize, docTransform.size)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"size"
+			], oldSize, docTransform.size);
+			rawActions.push(updateAction);
+		}
+		if (!_univerjs_core.Tools.diffValue(oldAngle, docTransform.angle)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"angle"
+			], oldAngle, docTransform.angle);
+			rawActions.push(updateAction);
+		}
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null,
+				debounce: true
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		transformer.refreshControls();
+		return Boolean(result);
+	}
 };
 //#endregion
@@ -2102,22 +1837,24 @@ const DocDrawingPosition = (props) => {
 const MIN_MARGIN = 0;
 const MAX_MARGIN = 100;
 const DocDrawingTextWrap = (props) => {
+	var _renderManagerService;
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.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__ */ (0, react_jsx_runtime.jsx)(DocDrawingTextWrapContent, { ...props }) : null;
+};
+function DocDrawingTextWrapContent(props) {
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
-	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.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, _univerjs_core.UniverInstanceType.UNIVER_DOC);
-	const renderObject = renderManagerService.getRenderUnitById(unitId);
-	if ((renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene) == null) return null;
 	const [disableWrapText, setDisableWrapText] = (0, react.useState)(true);
 	const [disableDistTB, setDisableDistTB] = (0, react.useState)(true);
 	const [disableDistLR, setDisableDistLR] = (0, react.useState)(true);
-	const [wrappingStyle, setWrappingStyle] = (0, react.useState)("inline");
+	const [wrappingStyle, setWrappingStyle] = (0, react.useState)(_univerjs_docs_drawing.TextWrappingStyle.INLINE);
 	const [wrapText, setWrapText] = (0, react.useState)("");
 	const [distToText, setDistToText] = (0, react.useState)({
 		distT: 0,
@@ -2136,7 +1873,7 @@ const DocDrawingTextWrap = (props) => {
 			subUnitId,
 			drawingId
 		}));
-		commandService.executeCommand(UpdateDocDrawingWrappingStyleCommand.id, {
+		commandService.executeCommand(_univerjs_docs_drawing.UpdateDocDrawingWrappingStyleCommand.id, {
 			unitId,
 			subUnitId,
 			drawings,
@@ -2205,17 +1942,17 @@ const DocDrawingTextWrap = (props) => {
 		else setDisableDistTB(false);
 		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE || layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE || layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) setDisableDistLR(true);
 		else setDisableDistLR(false);
-		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE) if (behindDoc === _univerjs_core.BooleanNumber.TRUE) setWrappingStyle("behindText");
-		else setWrappingStyle("inFrontOfText");
+		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE) if (behindDoc === _univerjs_core.BooleanNumber.TRUE) setWrappingStyle(_univerjs_docs_drawing.TextWrappingStyle.BEHIND_TEXT);
+		else setWrappingStyle(_univerjs_docs_drawing.TextWrappingStyle.IN_FRONT_OF_TEXT);
 		else switch (layoutType) {
 			case _univerjs_core.PositionedObjectLayoutType.INLINE:
-				setWrappingStyle("inline");
+				setWrappingStyle(_univerjs_docs_drawing.TextWrappingStyle.INLINE);
 				break;
 			case _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE:
-				setWrappingStyle("wrapSquare");
+				setWrappingStyle(_univerjs_docs_drawing.TextWrappingStyle.WRAP_SQUARE);
 				break;
 			case _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM:
-				setWrappingStyle("wrapTopAndBottom");
+				setWrappingStyle(_univerjs_docs_drawing.TextWrappingStyle.WRAP_TOP_AND_BOTTOM);
 				break;
 			default: throw new Error(`Unsupported layout type: ${layoutType}`);
 		}
@@ -2255,23 +1992,23 @@ const DocDrawingTextWrap = (props) => {
 				direction: "vertical",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: "inline",
+						value: _univerjs_docs_drawing.TextWrappingStyle.INLINE,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.inline")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: "wrapSquare",
+						value: _univerjs_docs_drawing.TextWrappingStyle.WRAP_SQUARE,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.square")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: "wrapTopAndBottom",
+						value: _univerjs_docs_drawing.TextWrappingStyle.WRAP_TOP_AND_BOTTOM,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.topAndBottom")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: "behindText",
+						value: _univerjs_docs_drawing.TextWrappingStyle.BEHIND_TEXT,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.behindText")
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-						value: "inFrontOfText",
+						value: _univerjs_docs_drawing.TextWrappingStyle.IN_FRONT_OF_TEXT,
 						children: localeService.t("docs-drawing-ui.image-text-wrap.inFrontText")
 					})
 				]
@@ -2350,21 +2087,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 = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
-	const [drawings, setDrawings] = (0, react.useState)(drawingManagerService.getFocusDrawings());
-	(0, react.useEffect)(() => {
-		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
-			setDrawings(drawings);
-		});
-		return () => {
-			focusDispose.unsubscribe();
-		};
-	}, []);
+	const drawings = (0, _univerjs_ui.useObservable)(() => drawingManagerService.focus$, drawingManagerService.getFocusDrawings(), false, [drawingManagerService]);
 	return !!(drawings === null || drawings === void 0 ? void 0 : drawings.length) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "univer-text-sm",
 		children: [
@@ -2412,6 +2156,19 @@ ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)
 //#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 (_univerjs_core.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");
@@ -2451,14 +2208,33 @@ function getReOrderedDrawings(actions) {
 	}
 	return drawingIndexes;
 }
+function collectUpdatedDrawingIds(actions, drawingIds = /* @__PURE__ */ new Set()) {
+	if (_univerjs_core.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 _univerjs_core.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() {
@@ -2475,10 +2251,25 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 				else this._removeDrawings(unitId, [drawingId]);
 			}
 		}));
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			if (command.id !== _univerjs_docs_drawing.UpdateDocDrawingWrappingStyleCommand.id) return;
+			this._preserveWrappingStylePosition(command.params);
+		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			if (command.id !== _univerjs_docs.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 !== _univerjs_docs_drawing.UpdateDrawingDocTransformCommand.id && command.id !== _univerjs_docs_drawing.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(_univerjs_docs.DocSkeletonManagerService).getSkeleton());
+			scene.getTransformerByCreate().refreshControls();
 		}));
 		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
 			var _this$_univerInstance;
@@ -2492,6 +2283,65 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 			scene.getTransformerByCreate().refreshControls();
 		}));
 	}
+	_preserveWrappingStylePosition(params) {
+		var _documentDataModel$ge;
+		if (params.wrappingStyle === _univerjs_docs_drawing.TextWrappingStyle.INLINE) return;
+		const { unitId } = params;
+		const documentDataModel = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const skeletonManager = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.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 === _univerjs_engine_render.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 === _univerjs_engine_render.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 === _univerjs_core.ObjectRelativeFromH.MARGIN) posOffsetH -= pageMarginLeft;
+			else if (oldPositionH.relativeFrom === _univerjs_core.ObjectRelativeFromH.COLUMN) posOffsetH -= skeDrawing.columnLeft;
+			if (oldPositionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.PAGE) posOffsetV += pageMarginTop;
+			else if (oldPositionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) posOffsetV -= skeDrawing.lineTop;
+			else if (oldPositionV.relativeFrom === _univerjs_core.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;
@@ -2538,13 +2388,33 @@ let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends
 			drawingIds: drawingsOrder
 		});
 	}
+	_syncDrawingDataFromSnapshot(unitId, drawingIds) {
+		const documentDataModel = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (documentDataModel == null) return;
+		const { drawings = {}, drawingsOrder = [] } = documentDataModel.getSnapshot();
+		const drawingData = drawings;
+		const renderOrder = (0, _univerjs_docs_drawing.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, _univerjs_core.IUniverInstanceService),
 	__decorateParam(1, _univerjs_core.ICommandService),
 	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
 	__decorateParam(3, _univerjs_docs_drawing.IDocDrawingService),
-	__decorateParam(4, _univerjs_engine_render.IRenderManagerService)
+	__decorateParam(4, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(5, (0, _univerjs_core.Inject)(DocRefreshDrawingsService))
 ], DocDrawingAddRemoveController);
 //#endregion
@@ -2919,6 +2789,8 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 				width,
 				height,
 				angle,
+				flipX: drawingOrigin.docTransform.flipX,
+				flipY: drawingOrigin.docTransform.flipY,
 				clipBounds: pageClipBounds
 			};
 			if (updateDrawingMap[drawingId] == null) updateDrawingMap[drawingId] = {
@@ -2928,6 +2800,7 @@ let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateControl
 				behindText,
 				transform,
 				transforms: [transform],
+				customBlockRenderViewport: drawing.customBlockRenderViewport,
 				isMultiTransform
 			};
 			else if (isMultiTransform === _univerjs_core.BooleanNumber.TRUE) updateDrawingMap[drawingId].transforms.push(transform);
@@ -3138,7 +3011,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 				});
 			}
 		}
-		if (drawings.length > 0 && unitId && subUnitId) this._commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+		if (drawings.length > 0 && unitId && subUnitId) this._commandService.executeCommand(_univerjs_docs_drawing.UpdateDrawingDocTransformCommand.id, {
 			unitId,
 			subUnitId,
 			drawings
@@ -3368,7 +3241,7 @@ let DocDrawingTransformerController = class DocDrawingTransformerController exte
 			key: "angle",
 			value: angle
 		});
-		if (drawings.length > 0 && unitId && subUnitId) this._commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+		if (drawings.length > 0 && unitId && subUnitId) this._commandService.executeCommand(_univerjs_docs_drawing.UpdateDrawingDocTransformCommand.id, {
 			unitId,
 			subUnitId,
 			drawings
@@ -3521,75 +3394,6 @@ DocDrawingTransformerController = __decorate([
 	__decorateParam(3, _univerjs_engine_render.IRenderManagerService)
 ], DocDrawingTransformerController);
-//#endregion
-//#region src/menu/schema.ts
-const menuSchema = {
-	[_univerjs_ui.RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
-		order: 0,
-		menuItemFactory: ImageMenuFactory,
-		[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 0,
-			menuItemFactory: UploadFloatImageMenuFactory
-		}
-	} },
-	[_univerjs_ui.ContextMenuPosition.PARAGRAPH]: {
-		[_univerjs_ui.ContextMenuGroup.LAYOUT]: { [_univerjs_docs_ui.INSERT_BELLOW_MENU_ID]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } },
-		[_univerjs_docs_ui.EMPTY_PARAGRAPH_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } },
-		[_univerjs_docs_ui.DOC_CONTENT_INSERT_MENU_ID]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: { [IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-			order: 5,
-			menuItemFactory: UploadFloatImageMenuFactory
-		} } },
-		[_univerjs_docs_ui.DOC_PARAGRAPH_T_INSERT_MENU_ID]: { insert: {
-			[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
-				order: 1,
-				menuItemFactory: UploadFloatImageMenuFactory
-			},
-			[DOCS_SHAPE_MENU_ID]: {
-				order: 2,
-				menuItemFactory: ShapeMenuFactory
-			}
-		} },
-		[_univerjs_docs_ui.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) {
@@ -3679,22 +3483,17 @@ let DocDrawingUIController = class DocDrawingUIController extends _univerjs_core
 			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() {
@@ -3721,16 +3520,40 @@ DocDrawingUIController = __decorate([
 	__decorateParam(2, _univerjs_ui.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 (0, _univerjs_core.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 _univerjs_core.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", []);
@@ -3800,13 +3623,14 @@ let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends
 			if (!drawingParam || drawingParam.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM || drawingParam.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_SHAPE) return;
 			const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
 			const isImage = drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_IMAGE;
+			const isChart = drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_CHART;
 			const popup = this._canvasPopManagerService.attachPopupToObject(object, {
 				componentKey: _univerjs_drawing_ui.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
@@ -3835,43 +3659,64 @@ 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,
-				commandParams: {
+				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: drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM
+				disable: (_editCommandInfo$disa = editCommandInfo === null || editCommandInfo === void 0 ? void 0 : editCommandInfo.disable) !== null && _editCommandInfo$disa !== void 0 ? _editCommandInfo$disa : drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM,
+				hideOnClick: true,
+				icon: "DrawingEditIcon"
 			},
 			{
-				label: "docs-drawing-ui.image-popup.delete",
+				label: "docs-drawing-ui.image-popup.crop",
 				index: 1,
-				commandId: RemoveDocDrawingCommand.id,
+				commandId: _univerjs_drawing_ui.OpenImageCropOperation.id,
 				commandParams: {
 					unitId,
-					drawings: [{
-						unitId,
-						subUnitId,
-						drawingId
-					}]
+					subUnitId,
+					drawingId
 				},
-				disable: false
+				disable: drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM,
+				icon: "DrawingCropIcon"
 			},
 			{
-				label: "docs-drawing-ui.image-popup.crop",
+				label: "docs-drawing-ui.image-popup.delete",
 				index: 2,
-				commandId: _univerjs_drawing_ui.OpenImageCropOperation.id,
+				commandId: _univerjs_docs_drawing.RemoveDocDrawingCommand.id,
 				commandParams: {
 					unitId,
-					subUnitId,
-					drawingId
+					drawings: [{
+						unitId,
+						subUnitId,
+						drawingId
+					}]
 				},
-				disable: drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM
+				disable: false,
+				icon: "DrawingDeleteIcon"
 			},
 			{
 				label: "docs-drawing-ui.image-popup.reset",
@@ -3893,7 +3738,9 @@ DocDrawingPopupMenuController = __decorate([
 	__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
 	__decorateParam(3, _univerjs_core.IUniverInstanceService),
 	__decorateParam(4, _univerjs_core.IContextService),
-	__decorateParam(5, _univerjs_core.ICommandService)
+	__decorateParam(5, _univerjs_docs_drawing.IDocDrawingAdapterService),
+	__decorateParam(6, (0, _univerjs_core.Inject)(DocDrawingFloatingToolbarAdapterService)),
+	__decorateParam(7, _univerjs_core.ICommandService)
 ], DocDrawingPopupMenuController);
 //#endregion
@@ -3916,6 +3763,7 @@ let UniverDocsDrawingUIPlugin = class UniverDocsDrawingUIPlugin extends _univerj
 			[DocDrawingTransformerController],
 			[DocDrawingAddRemoveController],
 			[DocRefreshDrawingsService],
+			[DocDrawingFloatingToolbarAdapterService],
 			[DocFloatDomController],
 			[DocDrawingPrintingController]
 		].forEach((dependency) => this._injector.add(dependency));
@@ -3950,6 +3798,7 @@ exports.DOCS_IMAGE_MENU_ID = DOCS_IMAGE_MENU_ID;
 exports.DOCS_SHAPE_BELOW_MENU_ID = DOCS_SHAPE_BELOW_MENU_ID;
 exports.DOCS_SHAPE_MENU_ID = DOCS_SHAPE_MENU_ID;
 exports.DeleteDocDrawingsCommand = DeleteDocDrawingsCommand;
+exports.DocDrawingFloatingToolbarAdapterService = DocDrawingFloatingToolbarAdapterService;
 exports.DocDrawingPosition = DocDrawingPosition;
 exports.DocDrawingTextWrap = DocDrawingTextWrap;
 Object.defineProperty(exports, 'DocFloatDomController', {
@@ -3958,15 +3807,13 @@ Object.defineProperty(exports, 'DocFloatDomController', {
     return DocFloatDomController;
   }
 });
+exports.DocsDrawingUIMenuSchema = menuSchema;
 exports.EditDocDrawingOperation = EditDocDrawingOperation;
 exports.GroupDocDrawingCommand = GroupDocDrawingCommand;
-exports.InsertDocDrawingCommand = InsertDocDrawingCommand;
 exports.InsertDocEllipseShapeCommand = InsertDocEllipseShapeCommand;
 exports.InsertDocImageCommand = InsertDocImageCommand;
 exports.InsertDocRectangleShapeCommand = InsertDocRectangleShapeCommand;
 exports.MoveDocDrawingsCommand = MoveDocDrawingsCommand;
-exports.RemoveDocDrawingCommand = RemoveDocDrawingCommand;
-exports.SetDocDrawingArrangeCommand = SetDocDrawingArrangeCommand;
 exports.SidebarDocDrawingOperation = SidebarDocDrawingOperation;
 exports.UngroupDocDrawingCommand = UngroupDocDrawingCommand;
 Object.defineProperty(exports, 'UniverDocsDrawingUIPlugin', {