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/index.js CHANGED Viewed

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