@univerjs/docs-ui 1.0.0-alpha.3 → 1.0.0-alpha.4

package/lib/cjs/index.js

@@ -200,34 +200,6 @@ function getCustomDecorationAtPosition(customDecorations, position) {
 	return customDecorations.filter((customDecoration) => position > customDecoration.startIndex && position <= customDecoration.endIndex);
 }
 
-//#endregion
-//#region src/basics/transform-position.ts
-function docDrawingPositionToTransform(position) {
-	return {
-		left: position.positionH.posOffset,
-		top: position.positionV.posOffset,
-		width: position.size.width,
-		height: position.size.height
-	};
-}
-function transformToDocDrawingPosition(transform, marginLeft = 0, marginTop = 0) {
-	return {
-		size: {
-			width: transform.width,
-			height: transform.height
-		},
-		positionH: {
-			relativeFrom: _univerjs_core.ObjectRelativeFromH.MARGIN,
-			posOffset: (transform.left || 0) - marginLeft
-		},
-		positionV: {
-			relativeFrom: _univerjs_core.ObjectRelativeFromV.PAGE,
-			posOffset: (transform.top || 0) - marginTop
-		},
-		angle: transform.angle || 0
-	};
-}
-
 //#endregion
 //#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
 function _typeof(o) {
@@ -1099,19 +1071,6 @@ function getCellOffsets(viewModel, range, position) {
 
 //#endregion
 //#region src/commands/commands/clipboard.inner.command.ts
-function getCustomBlockIdsInSelections(body, selections) {
-	const customBlockIds = [];
-	const { customBlocks = [] } = body;
-	for (const selection of selections) {
-		const { startOffset, endOffset } = selection;
-		if (startOffset == null || endOffset == null) continue;
-		for (const customBlock of customBlocks) {
-			const { startIndex } = customBlock;
-			if (startIndex >= startOffset && startIndex < endOffset) customBlockIds.push(customBlock.blockId);
-		}
-	}
-	return customBlockIds;
-}
 function hasRangeInTable(ranges) {
 	return ranges.some((range) => {
 		const { startNodePosition } = range;
@@ -1332,7 +1291,7 @@ function getCutActionsFromTextRanges(selections, docDataModel, segmentId) {
 	}
 	const path = (0, _univerjs_core.getRichTextEditPath)(docDataModel, segmentId);
 	rawActions.push(jsonX.editOp(textX.serialize(), path));
-	const removedCustomBlockIds = getCustomBlockIdsInSelections(originBody, selections);
+	const removedCustomBlockIds = (0, _univerjs_core.getCustomBlockIdsInSelections)(originBody, selections);
 	const drawings = (_docDataModel$getDraw = docDataModel.getDrawings()) !== null && _docDataModel$getDraw !== void 0 ? _docDataModel$getDraw : {};
 	const drawingOrder = (_docDataModel$getDraw2 = docDataModel.getDrawingsOrder()) !== null && _docDataModel$getDraw2 !== void 0 ? _docDataModel$getDraw2 : [];
 	const sortedRemovedCustomBlockIds = removedCustomBlockIds.sort((a, b) => {
@@ -2284,21 +2243,7 @@ var HtmlToUDMService = class HtmlToUDMService {
 						height,
 						left: 0
 					},
-					docTransform: {
-						size: {
-							width: docTransformWidth,
-							height: docTransformHeight
-						},
-						angle: 0,
-						positionH: {
-							relativeFrom: _univerjs_core.ObjectRelativeFromH.PAGE,
-							posOffset: 0
-						},
-						positionV: {
-							relativeFrom: _univerjs_core.ObjectRelativeFromV.PARAGRAPH,
-							posOffset: 0
-						}
-					},
+					docTransform: (0, _univerjs_docs.buildDocTransform)(docTransformWidth, docTransformHeight),
 					layoutType: _univerjs_core.PositionedObjectLayoutType.INLINE,
 					drawingType: _univerjs_core.DrawingTypeEnum.DRAWING_IMAGE,
 					unitId: doc.id || "",
@@ -4571,9 +4516,9 @@ const DocSelectAllCommand = {
 		if (body == null) return false;
 		const { dataStream } = body;
 		if (dataStream === "\r\n") return true;
-		const wholeDocRanges = getWholeDocumentRanges(body);
-		const scopedRange = getScopedSelectAllRange(body, activeRange);
-		const textRanges = scopedRange && !isSameRanges(docRanges, scopedRange) ? scopedRange : wholeDocRanges;
+		const scopes = getSelectAllScopes(body, activeRange);
+		const currentScopeIndex = scopes.findIndex((scope) => isSameRanges(docRanges, scope));
+		const textRanges = scopes[Math.min(currentScopeIndex + 1, scopes.length - 1)];
 		docSelectionManagerService.replaceDocRanges(textRanges, {
 			unitId,
 			subUnitId: unitId
@@ -4582,17 +4527,39 @@ const DocSelectAllCommand = {
 	}
 };
 function getWholeDocumentRanges(body) {
+	return getRangesForOffsets(body, 0, body.dataStream.length - 2);
+}
+function getRangesForOffsets(body, startOffset, endOffset) {
+	var _body$columnGroups;
+	const columnGroups = [...(_body$columnGroups = body.columnGroups) !== null && _body$columnGroups !== void 0 ? _body$columnGroups : []].sort((left, right) => left.startIndex - right.startIndex);
+	const ranges = [];
+	let offset = startOffset;
+	for (const columnGroup of columnGroups) {
+		if (columnGroup.endIndex < startOffset || columnGroup.startIndex > endOffset) continue;
+		if (offset < columnGroup.startIndex) ranges.push(...getRangesWithTables(body, offset, Math.min(endOffset, columnGroup.startIndex - 1)));
+		for (const column of getColumnRanges(body, columnGroup)) {
+			const start = Math.max(startOffset, column.startOffset);
+			const end = Math.min(endOffset, column.endOffset);
+			if (start <= end) ranges.push(...getRangesWithTables(body, start, end));
+		}
+		offset = columnGroup.endIndex + 1;
+	}
+	if (offset <= endOffset) ranges.push(...getRangesWithTables(body, offset, endOffset));
+	return ranges;
+}
+function getRangesWithTables(body, startOffset, endOffset) {
 	var _body$tables;
-	const textRanges = [];
-	let offset = 0;
-	for (const table of (_body$tables = body.tables) !== null && _body$tables !== void 0 ? _body$tables : []) {
+	const ranges = [];
+	let offset = startOffset;
+	for (const table of [...(_body$tables = body.tables) !== null && _body$tables !== void 0 ? _body$tables : []].sort((left, right) => left.startIndex - right.startIndex)) {
 		const { startIndex, endIndex } = table;
-		if (offset !== startIndex) textRanges.push(...getTextRangesByParagraphs(body, offset, startIndex - 1));
-		textRanges.push(getTableRectRange(table));
+		if (startIndex < startOffset || endIndex > endOffset) continue;
+		if (offset !== startIndex) ranges.push(...getTextRangesByParagraphs(body, offset, startIndex - 1));
+		ranges.push(getTableRectRange(table));
 		offset = endIndex;
 	}
-	if (offset !== body.dataStream.length - 2) textRanges.push(...getTextRangesByParagraphs(body, offset, body.dataStream.length - 2));
-	return textRanges;
+	if (offset <= endOffset) ranges.push(...getTextRangesByParagraphs(body, offset, endOffset));
+	return ranges;
 }
 function getTextRangesByParagraphs(body, startOffset, endOffset) {
 	var _body$paragraphs;
@@ -4617,30 +4584,62 @@ function getTextRangesByParagraphs(body, startOffset, endOffset) {
 	});
 	return ranges;
 }
-function getScopedSelectAllRange(body, activeRange) {
-	var _body$tables2, _body$customBlocks, _body$blockRanges, _body$tables3;
+function getSelectAllScopes(body, activeRange) {
+	var _body$tables2, _body$customBlocks, _body$blockRanges, _body$columnGroups2;
+	const scopes = [];
+	const addScope = (scope) => {
+		if ((scope === null || scope === void 0 ? void 0 : scope.length) && !scopes.some((existing) => isSameRanges(existing, scope))) scopes.push(scope);
+	};
 	const startOffset = activeRange.startOffset;
 	const endOffset = activeRange.endOffset;
-	if (startOffset == null || endOffset == null) return null;
+	if (startOffset == null || endOffset == null) return [getWholeDocumentRanges(body)];
 	const table = ((_body$tables2 = body.tables) !== null && _body$tables2 !== void 0 ? _body$tables2 : []).find((item) => isRangeInside(startOffset, endOffset, item.startIndex, item.endIndex));
-	if (table) return [getTableRectRange(table)];
 	const customBlock = ((_body$customBlocks = body.customBlocks) !== null && _body$customBlocks !== void 0 ? _body$customBlocks : []).find((item) => item.startIndex >= startOffset && item.startIndex <= endOffset);
-	if (customBlock) return [{
+	const blockRange = ((_body$blockRanges = body.blockRanges) !== null && _body$blockRanges !== void 0 ? _body$blockRanges : []).find((item) => isRangeInside(startOffset, endOffset, item.startIndex, item.endIndex));
+	if (table) addScope([getTableRectRange(table)]);
+	else if (customBlock) addScope([{
 		endOffset: customBlock.startIndex,
 		rangeType: _univerjs_core.DOC_RANGE_TYPE.TEXT,
 		startOffset: customBlock.startIndex
-	}];
-	const blockRange = ((_body$blockRanges = body.blockRanges) !== null && _body$blockRanges !== void 0 ? _body$blockRanges : []).find((item) => isRangeInside(startOffset, endOffset, item.startIndex, item.endIndex));
-	if (blockRange) return [{
+	}]);
+	else if (blockRange) addScope([{
 		endOffset: Math.max(blockRange.startIndex + 1, blockRange.endIndex - 1),
 		rangeType: _univerjs_core.DOC_RANGE_TYPE.TEXT,
 		startOffset: blockRange.startIndex + 1
-	}];
-	const paragraphRange = clampParagraphRangeByTables(getParagraphRangeAtOffset(body, startOffset), (_body$tables3 = body.tables) !== null && _body$tables3 !== void 0 ? _body$tables3 : [], startOffset);
-	return paragraphRange ? [{
-		...paragraphRange,
-		rangeType: _univerjs_core.DOC_RANGE_TYPE.TEXT
-	}] : null;
+	}]);
+	else {
+		var _body$tables3;
+		const paragraphRange = clampParagraphRangeByTables(getParagraphRangeAtOffset(body, startOffset), (_body$tables3 = body.tables) !== null && _body$tables3 !== void 0 ? _body$tables3 : [], startOffset);
+		addScope(paragraphRange ? [{
+			...paragraphRange,
+			rangeType: _univerjs_core.DOC_RANGE_TYPE.TEXT
+		}] : null);
+	}
+	const columnGroup = ((_body$columnGroups2 = body.columnGroups) !== null && _body$columnGroups2 !== void 0 ? _body$columnGroups2 : []).find((item) => isRangeInside(startOffset, endOffset, item.startIndex, item.endIndex));
+	if (columnGroup) {
+		const column = getColumnRanges(body, columnGroup).find((item) => isRangeInside(startOffset, endOffset, item.startOffset, item.endOffset));
+		if (column) addScope(getRangesForOffsets(body, column.startOffset, column.endOffset));
+		addScope(getRangesForOffsets(body, columnGroup.startIndex, columnGroup.endIndex));
+	}
+	addScope(getWholeDocumentRanges(body));
+	return scopes;
+}
+function getColumnRanges(body, columnGroup) {
+	const ranges = [];
+	let startOffset;
+	for (let index = columnGroup.startIndex; index <= columnGroup.endIndex; index++) {
+		const token = body.dataStream[index];
+		if (token === _univerjs_core.DataStreamTreeTokenType.COLUMN_START) startOffset = index + 1;
+		else if (token === _univerjs_core.DataStreamTreeTokenType.COLUMN_END && startOffset != null) {
+			ranges.push({
+				startOffset,
+				endOffset: index - 1,
+				rangeType: _univerjs_core.DOC_RANGE_TYPE.TEXT
+			});
+			startOffset = void 0;
+		}
+	}
+	return ranges;
 }
 function clampParagraphRangeByTables(paragraphRange, tables, activeOffset) {
 	if (!paragraphRange) return null;
@@ -4677,7 +4676,9 @@ function isSameRanges(currentRanges, nextRanges) {
 	if (currentRanges.length !== nextRanges.length) return isSameTextRangeCoverage(currentRanges, nextRanges);
 	return currentRanges.every((currentRange, index) => {
 		const nextRange = nextRanges[index];
-		return currentRange.startOffset === nextRange.startOffset && currentRange.endOffset === nextRange.endOffset && getRangeType(currentRange) === getRangeType(nextRange);
+		const sameType = getRangeType(currentRange) === getRangeType(nextRange);
+		const sameTextEnd = sameType && getRangeType(nextRange) === _univerjs_core.DOC_RANGE_TYPE.TEXT && !currentRange.collapsed && currentRange.endOffset + 1 === nextRange.endOffset;
+		return currentRange.startOffset === nextRange.startOffset && (currentRange.endOffset === nextRange.endOffset || sameTextEnd) && sameType;
 	});
 }
 function isSameTextRangeCoverage(currentRanges, nextRanges) {
@@ -7452,7 +7453,14 @@ const RECT_RANGE_KEY_PREFIX = "__DocTableRectRange__";
 const ID_LENGTH = 6;
 function convertPositionsToRectRanges(scene, document, docSkeleton, anchorNodePosition, focusNodePosition, style = _univerjs_engine_render.NORMAL_TEXT_SELECTION_PLUGIN_STYLE, segmentId = "", segmentPage = -1) {
 	const nodePositionGroup = new NodePositionConvertToRectRange(document.getOffsetConfig(), docSkeleton).getNodePositionGroup(anchorNodePosition, focusNodePosition);
-	return (nodePositionGroup !== null && nodePositionGroup !== void 0 ? nodePositionGroup : []).map((position) => new RectRange(scene, document, docSkeleton, position.anchor, position.focus, style, segmentId, segmentPage));
+	const ranges = [];
+	try {
+		for (const position of nodePositionGroup !== null && nodePositionGroup !== void 0 ? nodePositionGroup : []) ranges.push(new RectRange(scene, document, docSkeleton, position.anchor, position.focus, style, segmentId, segmentPage));
+		return ranges;
+	} catch (error) {
+		ranges.forEach((range) => range.dispose());
+		throw error;
+	}
 }
 var RectRange = class {
 	constructor(_scene, _document, _docSkeleton, anchorNodePosition, focusNodePosition, style = _univerjs_engine_render.NORMAL_TEXT_SELECTION_PLUGIN_STYLE, _segmentId = "", _segmentPage = -1) {
@@ -7610,10 +7618,29 @@ var RectRange = class {
 
 //#endregion
 //#region src/services/selection/selection-utils.ts
+function disposeRangeList({ textRanges, rectRanges }) {
+	textRanges.forEach((range) => range.dispose());
+	rectRanges.forEach((range) => range.dispose());
+}
+function isCompatibleTextRange(start, end) {
+	if (start == null || end == null || start.pageType !== end.pageType) return false;
+	if ((start.pageType === _univerjs_engine_render.DocumentSkeletonPageType.HEADER || start.pageType === _univerjs_engine_render.DocumentSkeletonPageType.FOOTER) && start.segmentPage !== end.segmentPage) return false;
+	const startColumn = (0, _univerjs_engine_render.getDocumentSkeletonColumnPagePathInfo)(start);
+	const endColumn = (0, _univerjs_engine_render.getDocumentSkeletonColumnPagePathInfo)(end);
+	if (startColumn == null || endColumn == null) return startColumn == null && endColumn == null;
+	return startColumn.pageIndex === endColumn.pageIndex && startColumn.columnGroupId === endColumn.columnGroupId && startColumn.columnIndex === endColumn.columnIndex;
+}
+function getDescendantTables(node) {
+	if (node.nodeType === _univerjs_core.DataStreamTreeNodeType.TABLE) return [node];
+	return node.children.flatMap(getDescendantTables);
+}
 function isInSameColumnPage(anchorPosition, focusPosition) {
+	var _anchorPosition$path$, _anchorPosition$path, _focusPosition$path$i, _focusPosition$path;
 	const anchorColumnInfo = (0, _univerjs_engine_render.getDocumentSkeletonColumnPagePathInfo)(anchorPosition);
 	const focusColumnInfo = (0, _univerjs_engine_render.getDocumentSkeletonColumnPagePathInfo)(focusPosition);
-	return !!anchorColumnInfo && !!focusColumnInfo && anchorColumnInfo.pageIndex === focusColumnInfo.pageIndex && anchorColumnInfo.columnGroupId === focusColumnInfo.columnGroupId && anchorColumnInfo.columnIndex === focusColumnInfo.columnIndex;
+	const anchorPageIndex = (_anchorPosition$path$ = (_anchorPosition$path = anchorPosition.path) === null || _anchorPosition$path === void 0 ? void 0 : _anchorPosition$path.indexOf("page")) !== null && _anchorPosition$path$ !== void 0 ? _anchorPosition$path$ : -1;
+	const focusPageIndex = (_focusPosition$path$i = (_focusPosition$path = focusPosition.path) === null || _focusPosition$path === void 0 ? void 0 : _focusPosition$path.indexOf("page")) !== null && _focusPosition$path$i !== void 0 ? _focusPosition$path$i : -1;
+	return anchorPageIndex >= 0 && focusPageIndex >= 0 && anchorPageIndex === anchorPosition.path.length - 1 && focusPageIndex === focusPosition.path.length - 1 && !!anchorColumnInfo && !!focusColumnInfo && anchorColumnInfo.pageIndex === focusColumnInfo.pageIndex && anchorColumnInfo.columnGroupId === focusColumnInfo.columnGroupId && anchorColumnInfo.columnIndex === focusColumnInfo.columnIndex;
 }
 function getColumnInputBoundaryCollapsedPosition(anchorPosition, focusPosition, skeleton) {
 	const anchorColumnInfo = (0, _univerjs_engine_render.getDocumentSkeletonColumnPagePathInfo)(anchorPosition);
@@ -7663,13 +7690,6 @@ function getRangeListFromSelection(anchorPosition, focusPosition, scene, documen
 			rectRanges
 		};
 	}
-	if (isInSameColumnPage(anchorPosition, focusPosition)) {
-		textRanges.push(new TextRange(...rangeParams));
-		return {
-			textRanges,
-			rectRanges
-		};
-	}
 	if (isInSameTableCellData(skeleton, anchorPosition, focusPosition)) if (isInSameTableCell(anchorPosition, focusPosition)) {
 		textRanges.push(new TextRange(...rangeParams));
 		return {
@@ -7692,6 +7712,13 @@ function getRangeListFromSelection(anchorPosition, focusPosition, scene, documen
 			rectRanges
 		};
 	}
+	if (isInSameColumnPage(anchorPosition, focusPosition)) {
+		textRanges.push(new TextRange(...rangeParams));
+		return {
+			textRanges,
+			rectRanges
+		};
+	}
 	const viewModel = skeleton.getViewModel().getSelfOrHeaderFooterViewModel(segmentId);
 	const anchorOffset = skeleton.findCharIndexByPosition(anchorPosition);
 	const focusOffset = skeleton.findCharIndexByPosition(focusPosition);
@@ -7708,64 +7735,158 @@ function getRangeListFromSelection(anchorPosition, focusPosition, scene, documen
 		var _skeleton$findNodePos2;
 		return (_skeleton$findNodePos2 = skeleton.findNodePositionByCharIndex(charIndex, isBack, segmentId, segmentPage)) !== null && _skeleton$findNodePos2 !== void 0 ? _skeleton$findNodePos2 : charIndex === endOffset ? originRange.end : void 0;
 	};
+	const appendTextRange = (rangeStart, rangeEnd, endIsBack = true) => {
+		if (rangeStart > rangeEnd) return true;
+		const sp = findStartNodePositionByCharIndex(rangeStart, true);
+		const ep = findEndNodePositionByCharIndex(rangeEnd, endIsBack);
+		const ap = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? sp : ep;
+		const fp = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? ep : sp;
+		if (!isCompatibleTextRange(ap, fp)) return false;
+		textRanges.push(new TextRange(scene, document, skeleton, ap, fp, style, segmentId, segmentPage));
+		return true;
+	};
+	const appendTableRange = (table, rangeStart, rangeEnd) => {
+		const { startIndex: tableStart, endIndex: tableEnd, children: rows } = table;
+		const startRow = rows.find((row) => row.startIndex <= rangeStart && row.endIndex >= rangeStart);
+		const endRow = rows.find((row) => row.startIndex <= rangeEnd && row.endIndex >= rangeEnd);
+		const tableStartOffset = rangeStart > tableStart && rangeStart < tableEnd ? (startRow === null || startRow === void 0 ? void 0 : startRow.startIndex) == null ? void 0 : startRow.startIndex + 2 : tableStart + 3;
+		const tableEndOffset = rangeEnd > tableStart && rangeEnd < tableEnd ? (endRow === null || endRow === void 0 ? void 0 : endRow.endIndex) == null ? void 0 : endRow.endIndex - 3 : tableEnd - 4;
+		if (tableStartOffset == null || tableEndOffset == null) return false;
+		const startPosition = skeleton.findNodePositionByCharIndex(tableStartOffset, true, segmentId, segmentPage);
+		const endPosition = skeleton.findNodePositionByCharIndex(tableEndOffset, true, segmentId, segmentPage);
+		if (startPosition == null || endPosition == null) return false;
+		const ap = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? startPosition : endPosition;
+		const fp = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? endPosition : startPosition;
+		rectRanges.push(...convertPositionsToRectRanges(scene, document, skeleton, ap, fp, style, segmentId, segmentPage));
+		return true;
+	};
+	const appendColumnRanges = (column, rangeStart, rangeEnd) => {
+		let offset = rangeStart;
+		const tables = getDescendantTables(column).sort((left, right) => left.startIndex - right.startIndex);
+		for (const table of tables) {
+			if (table.endIndex < rangeStart || table.startIndex > rangeEnd) continue;
+			if (!appendTextRange(offset, Math.min(rangeEnd, table.startIndex - 1), false) || !appendTableRange(table, Math.max(rangeStart, table.startIndex), Math.min(rangeEnd, table.endIndex))) return false;
+			offset = table.endIndex + 1;
+		}
+		return appendTextRange(offset, rangeEnd);
+	};
 	let start = startOffset;
 	let end = endOffset;
-	for (const section of viewModel.getChildren()) for (const paragraph of section.children) {
-		const { startIndex, endIndex, children } = paragraph;
-		const paragraphIndex = section.children.indexOf(paragraph);
-		const nextParagraph = section.children[paragraphIndex + 1];
-		const table = children[0];
-		let endInTable = false;
-		if (table) {
-			const { startIndex: tableStart, endIndex: tableEnd, children } = table;
-			let tableStartPosition = null;
-			let tableEndPosition = null;
-			const startRow = children.find((row) => row.startIndex <= startOffset && row.endIndex >= startOffset);
-			const endRow = children.find((row) => row.startIndex <= endOffset && row.endIndex >= endOffset);
-			if (startOffset > tableStart && startOffset < tableEnd) {
-				tableStartPosition = skeleton.findNodePositionByCharIndex(startRow.startIndex + 2, true, segmentId, segmentPage);
-				tableEndPosition = skeleton.findNodePositionByCharIndex(tableEnd - 4, true, segmentId, segmentPage);
-				start = tableEnd + 1;
-			} else if (endOffset > tableStart && endOffset < tableEnd) {
-				tableStartPosition = skeleton.findNodePositionByCharIndex(tableStart + 3, true, segmentId, segmentPage);
-				tableEndPosition = skeleton.findNodePositionByCharIndex(endRow.endIndex - 3, true, segmentId, segmentPage);
-				end = tableStart - 1;
-				endInTable = true;
-			} else if (tableStart > startOffset && tableEnd < endOffset) {
-				tableStartPosition = skeleton.findNodePositionByCharIndex(tableStart + 3, true, segmentId, segmentPage);
-				tableEndPosition = skeleton.findNodePositionByCharIndex(tableEnd - 4, true, segmentId, segmentPage);
-				if (start <= tableStart - 1) {
-					const sp = findStartNodePositionByCharIndex(start, true);
-					const ep = findEndNodePositionByCharIndex(tableStart - 1, false);
-					const ap = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? sp : ep;
-					const fp = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? ep : sp;
-					textRanges.push(new TextRange(scene, document, skeleton, ap, fp, style, segmentId, segmentPage));
+	try {
+		for (const section of viewModel.getChildren()) for (const paragraph of section.children) {
+			const { startIndex, endIndex, children } = paragraph;
+			if (paragraph.nodeType === _univerjs_core.DataStreamTreeNodeType.COLUMN_GROUP && start <= endIndex && end >= startIndex) {
+				if (start < startIndex && !appendTextRange(start, Math.min(end, startIndex - 1), false)) {
+					disposeRangeList({
+						textRanges,
+						rectRanges
+					});
+					return;
+				}
+				for (const column of children.filter((child) => child.nodeType === _univerjs_core.DataStreamTreeNodeType.COLUMN)) {
+					const columnStart = Math.max(start, column.startIndex + 1);
+					const columnEnd = Math.min(end, column.endIndex - 1);
+					if (columnStart <= columnEnd && !appendColumnRanges(column, columnStart, columnEnd)) {
+						disposeRangeList({
+							textRanges,
+							rectRanges
+						});
+						return;
+					}
+				}
+				start = endIndex + 1;
+				continue;
+			}
+			const paragraphIndex = section.children.indexOf(paragraph);
+			const nextParagraph = section.children[paragraphIndex + 1];
+			const table = children.find((child) => child.nodeType === _univerjs_core.DataStreamTreeNodeType.TABLE);
+			const nextTable = nextParagraph === null || nextParagraph === void 0 ? void 0 : nextParagraph.children.find((child) => child.nodeType === _univerjs_core.DataStreamTreeNodeType.TABLE);
+			let endInTable = false;
+			if (table) {
+				const { startIndex: tableStart, endIndex: tableEnd, children } = table;
+				let tableStartPosition = null;
+				let tableEndPosition = null;
+				if (startOffset > tableStart && startOffset < tableEnd) {
+					const startRow = children.find((row) => row.startIndex <= startOffset && row.endIndex >= startOffset);
+					if (startRow == null) {
+						disposeRangeList({
+							textRanges,
+							rectRanges
+						});
+						return;
+					}
+					tableStartPosition = skeleton.findNodePositionByCharIndex(startRow.startIndex + 2, true, segmentId, segmentPage);
+					tableEndPosition = skeleton.findNodePositionByCharIndex(tableEnd - 4, true, segmentId, segmentPage);
+					start = tableEnd + 1;
+				} else if (endOffset > tableStart && endOffset < tableEnd) {
+					const endRow = children.find((row) => row.startIndex <= endOffset && row.endIndex >= endOffset);
+					if (endRow == null) {
+						disposeRangeList({
+							textRanges,
+							rectRanges
+						});
+						return;
+					}
+					tableStartPosition = skeleton.findNodePositionByCharIndex(tableStart + 3, true, segmentId, segmentPage);
+					tableEndPosition = skeleton.findNodePositionByCharIndex(endRow.endIndex - 3, true, segmentId, segmentPage);
+					end = tableStart - 1;
+					endInTable = true;
+				} else if (tableStart > startOffset && tableEnd < endOffset) {
+					tableStartPosition = skeleton.findNodePositionByCharIndex(tableStart + 3, true, segmentId, segmentPage);
+					tableEndPosition = skeleton.findNodePositionByCharIndex(tableEnd - 4, true, segmentId, segmentPage);
+					if (start <= tableStart - 1) {
+						const sp = findStartNodePositionByCharIndex(start, true);
+						const ep = findEndNodePositionByCharIndex(tableStart - 1, false);
+						const ap = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? sp : ep;
+						const fp = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? ep : sp;
+						if (!isCompatibleTextRange(ap, fp)) {
+							disposeRangeList({
+								textRanges,
+								rectRanges
+							});
+							return;
+						}
+						textRanges.push(new TextRange(scene, document, skeleton, ap, fp, style, segmentId, segmentPage));
+					}
+					start = tableEnd + 1;
+				}
+				if (tableStartPosition && tableEndPosition) {
+					const ap = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? tableStartPosition : tableEndPosition;
+					const fp = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? tableEndPosition : tableStartPosition;
+					rectRanges.push(...convertPositionsToRectRanges(scene, document, skeleton, ap, fp, style, segmentId, segmentPage));
 				}
-				start = tableEnd + 1;
 			}
-			if (tableStartPosition && tableEndPosition) {
-				const ap = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? tableStartPosition : tableEndPosition;
-				const fp = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? tableEndPosition : tableStartPosition;
-				rectRanges.push(...convertPositionsToRectRanges(scene, document, skeleton, ap, fp, style, segmentId, segmentPage));
+			if (end === endIndex + 1 && !endInTable && nextTable) {
+				end = endIndex;
+				endInTable = true;
+			}
+			if (end >= startIndex && end <= endIndex || endInTable) {
+				const sp = findStartNodePositionByCharIndex(start, true);
+				const ep = findEndNodePositionByCharIndex(end, !endInTable);
+				const ap = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? sp : ep;
+				const fp = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? ep : sp;
+				if (rectRanges.length && _univerjs_core.Tools.diffValue(ap, fp)) continue;
+				if (!isCompatibleTextRange(ap, fp)) {
+					disposeRangeList({
+						textRanges,
+						rectRanges
+					});
+					return;
+				}
+				textRanges.push(new TextRange(scene, document, skeleton, ap, fp, style, segmentId, segmentPage));
 			}
 		}
-		if (end === endIndex + 1 && !endInTable && nextParagraph && nextParagraph.children.length) {
-			end = endIndex;
-			endInTable = true;
-		}
-		if (end >= startIndex && end <= endIndex || endInTable) {
-			const sp = findStartNodePositionByCharIndex(start, true);
-			const ep = findEndNodePositionByCharIndex(end, !endInTable);
-			const ap = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? sp : ep;
-			const fp = direction === _univerjs_core.RANGE_DIRECTION.FORWARD ? ep : sp;
-			if (rectRanges.length && _univerjs_core.Tools.diffValue(ap, fp)) continue;
-			textRanges.push(new TextRange(scene, document, skeleton, ap, fp, style, segmentId, segmentPage));
-		}
+		return {
+			textRanges,
+			rectRanges
+		};
+	} catch (error) {
+		disposeRangeList({
+			textRanges,
+			rectRanges
+		});
+		throw error;
 	}
-	return {
-		textRanges,
-		rectRanges
-	};
 }
 function getCanvasOffsetByEngine(engine) {
 	const canvas = engine === null || engine === void 0 ? void 0 : engine.getCanvasElement();
@@ -8175,9 +8296,9 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 			const { offsetX: moveOffsetX, offsetY: moveOffsetY } = moveEvt;
 			scene.setCursor(_univerjs_engine_render.CURSOR_TYPE.TEXT);
 			if (Math.sqrt((moveOffsetX - preMoveOffsetX) ** 2 + (moveOffsetY - preMoveOffsetY) ** 2) < 3) return;
-			this._moving(moveOffsetX, moveOffsetY);
+			this._tryMoving(moveOffsetX, moveOffsetY);
 			scrollTimer.scrolling(moveOffsetX, moveOffsetY, () => {
-				this._moving(moveOffsetX, moveOffsetY);
+				this._tryMoving(moveOffsetX, moveOffsetY);
 			});
 			preMoveOffsetX = moveOffsetX;
 			preMoveOffsetY = moveOffsetY;
@@ -8472,6 +8593,13 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 		canvasTop += y;
 		this.activate(canvasLeft, canvasTop, forceFocus);
 	}
+	_tryMoving(moveOffsetX, moveOffsetY) {
+		try {
+			this._moving(moveOffsetX, moveOffsetY);
+		} catch (error) {
+			this._logService.error("[DocSelectionRenderService] Failed to update moving selection", error);
+		}
+	}
 	_moving(moveOffsetX, moveOffsetY) {
 		var _this$_context$scene2;
 		const { _currentSegmentId: segmentId, _currentSegmentPage: segmentPage } = this;
@@ -11452,7 +11580,7 @@ function DeleteTableMenuItemFactory(accessor) {
 		id: DocTableDeleteTableCommand.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		title: "docs-ui.table.deleteTable",
-		icon: "GridIcon",
+		icon: "DeleteTableDoubleIcon",
 		disabled$: getDisableWhenSelectionNotInTableObservable(accessor),
 		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
 	};
@@ -13346,6 +13474,10 @@ const menuSchema = {
 			order: 8,
 			menuItemFactory: BulletListMenuItemFactory
 		},
+		[CheckListCommand.id]: {
+			order: 9,
+			menuItemFactory: CheckListMenuItemFactory
+		},
 		[OpenHeaderFooterPanelCommand.id]: {
 			order: 10,
 			menuItemFactory: HeaderFooterMenuItemFactory
@@ -13367,10 +13499,6 @@ const menuSchema = {
 		[HorizontalLineCommand.id]: {
 			order: 3,
 			menuItemFactory: HorizontalLineFactory
-		},
-		[CheckListCommand.id]: {
-			order: 4,
-			menuItemFactory: CheckListMenuItemFactory
 		}
 	},
 	[_univerjs_ui.ContextMenuPosition.MAIN_AREA]: {
@@ -14076,23 +14204,13 @@ const DOC_ZOOM_RANGE = [10, 400];
 function ZoomSlider() {
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
-	const [documentDataModel, setDocumentDataModel] = (0, react.useState)(null);
-	const [zoom, setZoom] = (0, react.useState)(100);
+	const documentDataModel = (0, _univerjs_ui.useObservable)(() => univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC).pipe((0, rxjs.filter)((documentDataModel) => documentDataModel != null)), null, false, [univerInstanceService]);
 	const getCurrentZoom = (0, react.useCallback)((docModel = documentDataModel) => {
 		if (!docModel) return 100;
 		return Math.round(getDocEffectiveZoomRatio(docModel) * 100);
 	}, [documentDataModel]);
-	(0, react.useEffect)(() => {
-		const subscription = univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC).subscribe((doc) => {
-			if (doc) {
-				setDocumentDataModel(doc);
-				setZoom(getCurrentZoom(doc));
-			}
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [univerInstanceService, getCurrentZoom]);
+	const [zoom, setZoom] = (0, react.useState)(100);
+	(0, react.useEffect)(() => setZoom(getCurrentZoom(documentDataModel)), [documentDataModel, getCurrentZoom]);
 	(0, react.useEffect)(() => {
 		return commandService.onCommandExecuted((commandInfo) => {
 			if (commandInfo.id === SetDocZoomRatioOperation.id) setZoom(getCurrentZoom());
@@ -15259,23 +15377,28 @@ function DocSideMenu() {
 	return null;
 }
 function DocSideMenuContent() {
-	var _currentDoc$getBody$d, _currentDoc$getBody, _currentDoc$getUnitId, _renderer$mainCompone, _renderer$mainCompone2, _renderer$engine$heig, _renderer$scene$scale, _currentDoc$getBody$p, _currentDoc$getBody2;
-	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	var _documentData$body$da, _documentData$body, _currentDoc$getUnitId, _documentData$body$pa, _documentData$body2;
 	const instanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
 	const currentDoc = (0, _univerjs_ui.useObservable)((0, react.useMemo)(() => instanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC), []));
 	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
-	const fullDataStream = (_currentDoc$getBody$d = currentDoc === null || currentDoc === void 0 || (_currentDoc$getBody = currentDoc.getBody()) === null || _currentDoc$getBody === void 0 ? void 0 : _currentDoc$getBody.dataStream) !== null && _currentDoc$getBody$d !== void 0 ? _currentDoc$getBody$d : "";
-	const [_updateKey, setUpdateKey] = (0, react.useState)(0);
+	const documentData = (0, _univerjs_ui.useObservable)(currentDoc ? () => currentDoc.change$.pipe((0, rxjs.debounceTime)(100), (0, rxjs.map)(() => currentDoc.getSnapshot())) : null, currentDoc === null || currentDoc === void 0 ? void 0 : currentDoc.getSnapshot(), false, [currentDoc]);
+	const fullDataStream = (_documentData$body$da = documentData === null || documentData === void 0 || (_documentData$body = documentData.body) === null || _documentData$body === void 0 ? void 0 : _documentData$body.dataStream) !== null && _documentData$body$da !== void 0 ? _documentData$body$da : "";
 	const [activeId, setActiveId] = (0, react.useState)(void 0);
 	const unitId = (_currentDoc$getUnitId = currentDoc === null || currentDoc === void 0 ? void 0 : currentDoc.getUnitId()) !== null && _currentDoc$getUnitId !== void 0 ? _currentDoc$getUnitId : "";
 	const renderer = renderManagerService.getRenderById(unitId);
-	const title = currentDoc === null || currentDoc === void 0 ? void 0 : currentDoc.getTitle();
+	const title = documentData === null || documentData === void 0 ? void 0 : documentData.title;
 	const docEventManagerService = renderer === null || renderer === void 0 ? void 0 : renderer.with(DocEventManagerService);
 	const paragraphBounds = docEventManagerService === null || docEventManagerService === void 0 ? void 0 : docEventManagerService.paragraphBounds;
-	const left = (_renderer$mainCompone = renderer === null || renderer === void 0 || (_renderer$mainCompone2 = renderer.mainComponent) === null || _renderer$mainCompone2 === void 0 ? void 0 : _renderer$mainCompone2.left) !== null && _renderer$mainCompone !== void 0 ? _renderer$mainCompone : 0;
-	const canvasHeight = (_renderer$engine$heig = renderer === null || renderer === void 0 ? void 0 : renderer.engine.height) !== null && _renderer$engine$heig !== void 0 ? _renderer$engine$heig : 0;
-	const scaleY = (_renderer$scene$scale = renderer === null || renderer === void 0 ? void 0 : renderer.scene.scaleY) !== null && _renderer$scene$scale !== void 0 ? _renderer$scene$scale : 1;
-	const paragraphs = (_currentDoc$getBody$p = currentDoc === null || currentDoc === void 0 || (_currentDoc$getBody2 = currentDoc.getBody()) === null || _currentDoc$getBody2 === void 0 ? void 0 : _currentDoc$getBody2.paragraphs) !== null && _currentDoc$getBody$p !== void 0 ? _currentDoc$getBody$p : [];
+	const readLayout = () => {
+		var _renderer$mainCompone, _renderer$mainCompone2, _renderer$engine$heig, _renderer$scene$scale;
+		return {
+			left: (_renderer$mainCompone = renderer === null || renderer === void 0 || (_renderer$mainCompone2 = renderer.mainComponent) === null || _renderer$mainCompone2 === void 0 ? void 0 : _renderer$mainCompone2.left) !== null && _renderer$mainCompone !== void 0 ? _renderer$mainCompone : 0,
+			canvasHeight: (_renderer$engine$heig = renderer === null || renderer === void 0 ? void 0 : renderer.engine.height) !== null && _renderer$engine$heig !== void 0 ? _renderer$engine$heig : 0,
+			scaleY: (_renderer$scene$scale = renderer === null || renderer === void 0 ? void 0 : renderer.scene.scaleY) !== null && _renderer$scene$scale !== void 0 ? _renderer$scene$scale : 1
+		};
+	};
+	const { left, canvasHeight, scaleY } = (0, _univerjs_ui.useObservable)((renderer === null || renderer === void 0 ? void 0 : renderer.engine.onTransformChange$) ? () => (0, _univerjs_core.fromEventSubject)(renderer.engine.onTransformChange$).pipe((0, rxjs.throttleTime)(33), (0, rxjs.map)(readLayout), (0, rxjs.startWith)(readLayout())) : null, readLayout(), false, [renderer]);
+	const paragraphs = (_documentData$body$pa = documentData === null || documentData === void 0 || (_documentData$body2 = documentData.body) === null || _documentData$body2 === void 0 ? void 0 : _documentData$body2.paragraphs) !== null && _documentData$body$pa !== void 0 ? _documentData$body$pa : [];
 	const paragraphMap = (0, react.useMemo)(() => {
 		const map = /* @__PURE__ */ new Map();
 		paragraphs.forEach((p) => {
@@ -15283,7 +15406,6 @@ function DocSideMenuContent() {
 		});
 		return map;
 	}, [paragraphs]);
-	(0, _univerjs_ui.useObservable)((0, react.useMemo)(() => (renderer === null || renderer === void 0 ? void 0 : renderer.engine.onTransformChange$) ? (0, _univerjs_core.fromEventSubject)(renderer === null || renderer === void 0 ? void 0 : renderer.engine.onTransformChange$).pipe((0, rxjs.throttleTime)(33)) : (0, rxjs.of)(null), [renderer === null || renderer === void 0 ? void 0 : renderer.engine.onTransformChange$]));
 	const mode = left < 180 ? "float" : "side-bar";
 	let minLevel = Infinity;
 	const paragraphMenus = paragraphs === null || paragraphs === void 0 ? void 0 : paragraphs.filter((p) => {
@@ -15315,17 +15437,6 @@ function DocSideMenuContent() {
 		isTitle: true
 	}] : [], ...paragraphMenus !== null && paragraphMenus !== void 0 ? paragraphMenus : []].filter(Boolean);
 	const [open, setOpen] = (0, react.useState)(true);
-	(0, react.useEffect)(() => {
-		const debounceUpdater = (0, _univerjs_core.debounce)(setUpdateKey, 100);
-		const sub = commandService.onCommandExecuted((commandInfo) => {
-			if (commandInfo.id === _univerjs_docs.RichTextEditingMutation.id) {
-				if (commandInfo.params.unitId === (currentDoc === null || currentDoc === void 0 ? void 0 : currentDoc.getUnitId())) debounceUpdater((prev) => prev + 1);
-			}
-		});
-		return () => {
-			sub.dispose();
-		};
-	}, [commandService, currentDoc]);
 	(0, react.useEffect)(() => {
 		const viewport = renderer === null || renderer === void 0 ? void 0 : renderer.scene.getViewport("viewMain");
 		if (!viewport) return;
@@ -15725,7 +15836,7 @@ function resolveDocsCustomBlockRenderViewport(params) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-ui";
-var version = "1.0.0-alpha.3";
+var version = "1.0.0-alpha.4";
 
 //#endregion
 //#region src/commands/commands/doc-paragraph-setting.command.ts
@@ -15790,6 +15901,67 @@ const DocParagraphSettingCommand = {
 	}
 };
 
+//#endregion
+//#region src/views/float-toolbar/FloatToolbar.tsx
+const FLOAT_MENU_COMPONENT_KEY = "univer.doc.float-menu";
+const DEFAULT_AVALIABLE_MENUS = [
+	FLOAT_TEXT_STYLE_MENU_ID,
+	SetInlineFormatFontSizeCommand.id,
+	SetInlineFormatBoldCommand.id,
+	SetInlineFormatItalicCommand.id,
+	SetInlineFormatUnderlineCommand.id,
+	SetInlineFormatStrikethroughCommand.id,
+	SetInlineFormatSubscriptCommand.id,
+	SetInlineFormatSuperscriptCommand.id,
+	SetInlineFormatTextColorCommand.id,
+	SetInlineFormatTextBackgroundColorCommand.id
+];
+function resolveFloatToolbarMenus(menuManagerService, avaliableMenus) {
+	const floatToolbarMenus = menuManagerService.getMenuByPositionKey(FLOAT_TOOLBAR_MENU_POSITION);
+	const flatMenus = [...menuManagerService.getFlatMenuByPositionKey(FLOAT_TOOLBAR_MENU_POSITION), ...menuManagerService.getFlatMenuByPositionKey(_univerjs_ui.MenuManagerPosition.RIBBON)];
+	const menus = [];
+	for (const key of avaliableMenus) {
+		const item = flatMenus.find((item) => item.key === key);
+		if (item) menus.push(item);
+	}
+	return {
+		menus,
+		extraMenus: floatToolbarMenus.filter((item) => item.item && !avaliableMenus.includes(item.key))
+	};
+}
+function FloatToolbar(props) {
+	const { avaliableMenus = DEFAULT_AVALIABLE_MENUS } = props;
+	const menuManagerService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IMenuManagerService);
+	const [menus, setMenus] = (0, react.useState)([]);
+	const [extraMenus, setExtraMenus] = (0, react.useState)([]);
+	(0, react.useEffect)(() => {
+		function getRibbon() {
+			const { menus, extraMenus } = resolveFloatToolbarMenus(menuManagerService, avaliableMenus);
+			setMenus(menus);
+			setExtraMenus(extraMenus);
+		}
+		getRibbon();
+		const subscription = menuManagerService.menuChanged$.subscribe(getRibbon);
+		return () => {
+			subscription.unsubscribe();
+		};
+	}, [avaliableMenus, menuManagerService]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-rounded univer-bg-white univer-py-1.5 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", _univerjs_design.borderClassName),
+		children: [
+			menus.map((groupItem) => groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex univer-flex-nowrap univer-gap-2 univer-px-2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ToolbarItem, { ...groupItem.item }, groupItem.key)
+			}, groupItem.key)),
+			extraMenus.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-my-1 univer-w-px univer-bg-gray-200 dark:univer-bg-gray-700" }),
+			extraMenus.map((groupItem) => groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex univer-flex-nowrap univer-gap-2 univer-px-2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ToolbarItem, { ...groupItem.item }, groupItem.key)
+			}, groupItem.key))
+		]
+	});
+}
+
 //#endregion
 //#region src/utils/section-header-footer.ts
 function getDocPageSectionContext(snapshot, page) {
@@ -16030,20 +16202,9 @@ const DocHeaderFooterPanel = () => {
 	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
 	const unitId = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService).getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC).getUnitId();
 	const viewModel = ((_renderManagerService = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs.DocSkeletonManagerService)).getViewModel();
-	const [isEditHeaderFooter, setIsEditHeaderFooter] = (0, react.useState)(true);
-	(0, react.useEffect)(() => {
-		setIsEditHeaderFooter(viewModel.getEditArea() !== _univerjs_engine_render.DocumentEditArea.BODY);
-		const subscription = viewModel.editAreaChange$.subscribe((editArea) => {
-			if (editArea == null) return;
-			setIsEditHeaderFooter(editArea !== _univerjs_engine_render.DocumentEditArea.BODY);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-text-sm",
-		children: isEditHeaderFooter ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocHeaderFooterOptions, { unitId }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: (0, _univerjs_ui.useObservable)(() => viewModel.editAreaChange$.pipe((0, rxjs.filter)((editArea) => editArea != null), (0, rxjs.map)((editArea) => editArea !== _univerjs_engine_render.DocumentEditArea.BODY)), viewModel.getEditArea() !== _univerjs_engine_render.DocumentEditArea.BODY, false, [viewModel]) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocHeaderFooterOptions, { unitId }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-text-gray-400",
 			children: localeService.t("docs-ui.headerFooter.disableText")
 		})
@@ -16177,8 +16338,7 @@ function createTextColorSwatchIcon(color) {
 function createBackgroundColorSwatchIcon(index) {
 	return function DocParagraphBackgroundColorSwatchIcon(props) {
 		const themeService = (0, _univerjs_ui.useDependency)(_univerjs_core.ThemeService);
-		(0, _univerjs_ui.useObservable)(themeService.currentTheme$);
-		const color = getHighlightBackgroundColor(themeService, index);
+		const color = (0, _univerjs_ui.useObservable)(() => themeService.currentTheme$.pipe((0, rxjs.map)(() => getHighlightBackgroundColor(themeService, index))), getHighlightBackgroundColor(themeService, index), false, [index, themeService]);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BackgroundColorSwatchIcon, {
 			...props,
 			color
@@ -16732,69 +16892,8 @@ function ParagraphSettingIndex() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParagraphSetting, {}, key);
 }
 
-//#endregion
-//#region src/views/float-toolbar/FloatToolbar.tsx
-const DEFAULT_AVALIABLE_MENUS = [
-	FLOAT_TEXT_STYLE_MENU_ID,
-	SetInlineFormatFontSizeCommand.id,
-	SetInlineFormatBoldCommand.id,
-	SetInlineFormatItalicCommand.id,
-	SetInlineFormatUnderlineCommand.id,
-	SetInlineFormatStrikethroughCommand.id,
-	SetInlineFormatSubscriptCommand.id,
-	SetInlineFormatSuperscriptCommand.id,
-	SetInlineFormatTextColorCommand.id,
-	SetInlineFormatTextBackgroundColorCommand.id
-];
-function resolveFloatToolbarMenus(menuManagerService, avaliableMenus) {
-	const floatToolbarMenus = menuManagerService.getMenuByPositionKey(FLOAT_TOOLBAR_MENU_POSITION);
-	const flatMenus = [...menuManagerService.getFlatMenuByPositionKey(FLOAT_TOOLBAR_MENU_POSITION), ...menuManagerService.getFlatMenuByPositionKey(_univerjs_ui.MenuManagerPosition.RIBBON)];
-	const menus = [];
-	for (const key of avaliableMenus) {
-		const item = flatMenus.find((item) => item.key === key);
-		if (item) menus.push(item);
-	}
-	return {
-		menus,
-		extraMenus: floatToolbarMenus.filter((item) => item.item && !avaliableMenus.includes(item.key))
-	};
-}
-function FloatToolbar(props) {
-	const { avaliableMenus = DEFAULT_AVALIABLE_MENUS } = props;
-	const menuManagerService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IMenuManagerService);
-	const [menus, setMenus] = (0, react.useState)([]);
-	const [extraMenus, setExtraMenus] = (0, react.useState)([]);
-	(0, react.useEffect)(() => {
-		function getRibbon() {
-			const { menus, extraMenus } = resolveFloatToolbarMenus(menuManagerService, avaliableMenus);
-			setMenus(menus);
-			setExtraMenus(extraMenus);
-		}
-		getRibbon();
-		const subscription = menuManagerService.menuChanged$.subscribe(getRibbon);
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [avaliableMenus, menuManagerService]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-rounded univer-bg-white univer-py-1.5 univer-shadow-sm dark:!univer-border-gray-700 dark:!univer-bg-gray-900", _univerjs_design.borderClassName),
-		children: [
-			menus.map((groupItem) => groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-flex univer-flex-nowrap univer-gap-2 univer-px-2",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ToolbarItem, { ...groupItem.item }, groupItem.key)
-			}, groupItem.key)),
-			extraMenus.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-my-1 univer-w-px univer-bg-gray-200 dark:univer-bg-gray-700" }),
-			extraMenus.map((groupItem) => groupItem.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-flex univer-flex-nowrap univer-gap-2 univer-px-2",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ToolbarItem, { ...groupItem.item }, groupItem.key)
-			}, groupItem.key))
-		]
-	});
-}
-
 //#endregion
 //#region src/services/float-menu.service.ts
-const FLOAT_MENU_COMPONENT_KEY = "univer.doc.float-menu";
 function isInSameLine(startNodePosition, endNodePosition) {
 	if (startNodePosition == null || endNodePosition == null) return false;
 	const { glyph: _startGlyph, ...startRest } = startNodePosition;
@@ -16803,17 +16902,15 @@ function isInSameLine(startNodePosition, endNodePosition) {
 }
 const SKIP_SYMBOLS = [_univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK, _univerjs_core.DataStreamTreeTokenType.PARAGRAPH];
 let DocFloatMenuService = class DocFloatMenuService extends _univerjs_core.Disposable {
-	constructor(_context, _docSelectionManagerService, _docCanvasPopManagerService, _componentManager, _univerInstanceService, _docSelectionRenderService) {
+	constructor(_context, _docSelectionManagerService, _docCanvasPopManagerService, _univerInstanceService, _docSelectionRenderService) {
 		super();
 		this._context = _context;
 		this._docSelectionManagerService = _docSelectionManagerService;
 		this._docCanvasPopManagerService = _docCanvasPopManagerService;
-		this._componentManager = _componentManager;
 		this._univerInstanceService = _univerInstanceService;
 		this._docSelectionRenderService = _docSelectionRenderService;
 		_defineProperty(this, "_floatMenu", null);
 		if ((0, _univerjs_core.isInternalEditorID)(this._context.unitId)) return;
-		this._registerFloatMenu();
 		this._initSelectionChange();
 		this.disposeWithMe(() => {
 			this._hideFloatMenu();
@@ -16825,9 +16922,6 @@ let DocFloatMenuService = class DocFloatMenuService extends _univerjs_core.Dispo
 	hideFloatMenu() {
 		this._hideFloatMenu();
 	}
-	_registerFloatMenu() {
-		this.disposeWithMe(this._componentManager.register(FLOAT_MENU_COMPONENT_KEY, FloatToolbar));
-	}
 	_initSelectionChange() {
 		this.disposeWithMe(this._docSelectionRenderService.onSelectionStart$.subscribe(() => {
 			this._hideFloatMenu();
@@ -16875,9 +16969,8 @@ let DocFloatMenuService = class DocFloatMenuService extends _univerjs_core.Dispo
 DocFloatMenuService = __decorate([
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService)),
 	__decorateParam(2, (0, _univerjs_core.Inject)(DocCanvasPopManagerService)),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
-	__decorateParam(5, (0, _univerjs_core.Inject)(DocSelectionRenderService))
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(DocSelectionRenderService))
 ], DocFloatMenuService);
 function isRangeInCodeBlock(documentDataModel, range) {
 	var _documentDataModel$ge3, _documentDataModel$ge4;
@@ -18326,8 +18419,8 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TargetIcon, {}), (currentActiveTarget === null || currentActiveTarget === void 0 ? void 0 : currentActiveTarget.draggable) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: "univer-group univer-flex univer-h-4 univer-w-2.5 univer-cursor-grab univer-items-center univer-justify-center univer-border-none univer-bg-transparent univer-p-0 active:univer-cursor-grabbing",
-				"aria-label": "Drag block",
-				title: "Drag block",
+				"aria-label": localeService.t("docs-ui.doc.blockMenu.dragBlock"),
+				title: localeService.t("docs-ui.doc.blockMenu.dragBlock"),
 				onPointerDown: (event) => {
 					var _docParagraphMenuServ4, _event$currentTarget$, _event$currentTarget;
 					const latestTarget = (_docParagraphMenuServ4 = docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) !== null && _docParagraphMenuServ4 !== void 0 ? _docParagraphMenuServ4 : activeTarget;
@@ -18581,10 +18674,8 @@ function useSectionSetting() {
 	const instanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
 	const selectionManager = (0, _univerjs_ui.useDependency)(_univerjs_docs.DocSelectionManagerService);
 	const documentDataModel = (0, _univerjs_ui.useObservable)((0, react.useMemo)(() => instanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC), [instanceService]));
-	(0, _univerjs_ui.useObservable)(selectionManager.textSelection$);
-	(0, _univerjs_ui.useObservable)(documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.change$);
-	const ranges = selectionManager.getDocRanges();
-	const sections = (documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getDocumentStyle().documentFlavor) === _univerjs_core.DocumentFlavor.TRADITIONAL ? getSelectedSections(documentDataModel, ranges) : [];
+	const resolveSections = () => (documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getDocumentStyle().documentFlavor) === _univerjs_core.DocumentFlavor.TRADITIONAL ? getSelectedSections(documentDataModel, selectionManager.getDocRanges()) : [];
+	const sections = (0, _univerjs_ui.useObservable)(documentDataModel ? () => (0, rxjs.combineLatest)([selectionManager.textSelection$.pipe((0, rxjs.startWith)(void 0)), documentDataModel.change$.pipe((0, rxjs.startWith)(void 0))]).pipe((0, rxjs.map)(resolveSections)) : null, resolveSections(), false, [documentDataModel, selectionManager]);
 	const values = getSectionSettingValues(sections);
 	const update = (updates) => {
 		if (!documentDataModel || updates.length === 0) return Promise.resolve(false);
@@ -18637,6 +18728,24 @@ function SectionSetting() {
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const controller = (0, _univerjs_ui.useDependency)(DocSectionSettingController);
 	const setting = useSectionSetting();
+	const labels = (0, react.useMemo)(() => ({
+		selectedSections: localeService.t("docs-ui.doc.sectionSetting.selectedSections", String(setting.selectedCount)),
+		columnCount: localeService.t("docs-ui.doc.sectionSetting.columnCount"),
+		columnGap: `${localeService.t("docs-ui.doc.sectionSetting.columnGap")}(px)`,
+		columnSeparator: localeService.t("docs-ui.doc.sectionSetting.columnSeparator"),
+		none: localeService.t("docs-ui.doc.sectionSetting.none"),
+		betweenColumns: localeService.t("docs-ui.doc.sectionSetting.betweenColumns"),
+		sectionStart: localeService.t("docs-ui.doc.sectionSetting.sectionStart"),
+		unspecified: localeService.t("docs-ui.doc.sectionSetting.unspecified"),
+		continuous: localeService.t("docs-ui.doc.sectionSetting.continuous"),
+		nextPage: localeService.t("docs-ui.doc.sectionSetting.nextPage"),
+		evenPage: localeService.t("docs-ui.doc.sectionSetting.evenPage"),
+		oddPage: localeService.t("docs-ui.doc.sectionSetting.oddPage")
+	}), [
+		(0, _univerjs_ui.useObservable)(localeService.currentLocale$),
+		localeService,
+		setting.selectedCount
+	]);
 	(0, react.useEffect)(() => {
 		if (!setting.valid) controller.closePanel();
 	}, [controller, setting.valid]);
@@ -18645,12 +18754,12 @@ function SectionSetting() {
 		className: "univer-box-border univer-w-full",
 		children: [setting.selectedCount > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-mb-4 univer-text-xs univer-text-gray-600 dark:!univer-text-gray-300",
-			children: localeService.t("docs-ui.doc.sectionSetting.selectedSections", String(setting.selectedCount))
+			children: labels.selectedSections
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "univer-grid univer-gap-3",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
-					label: localeService.t("docs-ui.doc.sectionSetting.columnCount"),
+					label: labels.columnCount,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 						className: "univer-w-full",
 						min: 1,
@@ -18662,7 +18771,7 @@ function SectionSetting() {
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
-					label: `${localeService.t("docs-ui.doc.sectionSetting.columnGap")}(px)`,
+					label: labels.columnGap,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 						className: "univer-w-full",
 						min: 0,
@@ -18674,44 +18783,44 @@ function SectionSetting() {
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
-					label: localeService.t("docs-ui.doc.sectionSetting.columnSeparator"),
+					label: labels.columnSeparator,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 						className: "univer-w-full",
 						value: setting.separatorType == null ? "" : String(setting.separatorType),
 						options: [{
-							label: localeService.t("docs-ui.doc.sectionSetting.none"),
+							label: labels.none,
 							value: String(_univerjs_core.ColumnSeparatorType.NONE)
 						}, {
-							label: localeService.t("docs-ui.doc.sectionSetting.betweenColumns"),
+							label: labels.betweenColumns,
 							value: String(_univerjs_core.ColumnSeparatorType.BETWEEN_EACH_COLUMN)
 						}],
 						onChange: (value) => setting.setSeparatorType(Number(value))
 					})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
-					label: localeService.t("docs-ui.doc.sectionSetting.sectionStart"),
+					label: labels.sectionStart,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 						className: "univer-w-full",
 						value: setting.sectionType == null ? "" : String(setting.sectionType),
 						options: [
 							{
-								label: localeService.t("docs-ui.doc.sectionSetting.unspecified"),
+								label: labels.unspecified,
 								value: String(_univerjs_core.SectionType.SECTION_TYPE_UNSPECIFIED)
 							},
 							{
-								label: localeService.t("docs-ui.doc.sectionSetting.continuous"),
+								label: labels.continuous,
 								value: String(_univerjs_core.SectionType.CONTINUOUS)
 							},
 							{
-								label: localeService.t("docs-ui.doc.sectionSetting.nextPage"),
+								label: labels.nextPage,
 								value: String(_univerjs_core.SectionType.NEXT_PAGE)
 							},
 							{
-								label: localeService.t("docs-ui.doc.sectionSetting.evenPage"),
+								label: labels.evenPage,
 								value: String(_univerjs_core.SectionType.EVEN_PAGE)
 							},
 							{
-								label: localeService.t("docs-ui.doc.sectionSetting.oddPage"),
+								label: labels.oddPage,
 								value: String(_univerjs_core.SectionType.ODD_PAGE)
 							}
 						],
@@ -18727,7 +18836,6 @@ function SectionSetting() {
 //#region src/views/section-setting/index.tsx
 function SectionSettingIndex() {
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
-	(0, _univerjs_ui.useObservable)((0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService).currentLocale$);
 	const [key, setKey] = (0, react.useState)(() => (0, _univerjs_core.generateRandomId)(4));
 	(0, react.useEffect)(() => {
 		const disposable = commandService.onCommandExecuted((info) => {
@@ -18826,6 +18934,7 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 			DeleteColumnDoubleIcon: _univerjs_icons.DeleteColumnDoubleIcon,
 			DeleteIcon: _univerjs_icons.DeleteIcon,
 			DeleteRowDoubleIcon: _univerjs_icons.DeleteRowDoubleIcon,
+			DeleteTableDoubleIcon: _univerjs_icons.DeleteTableDoubleIcon,
 			DocSettingIcon: _univerjs_icons.DocSettingIcon,
 			FontColorDoubleIcon: _univerjs_icons.FontColorDoubleIcon,
 			GridIcon: _univerjs_icons.GridIcon,
@@ -18902,6 +19011,7 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 			[ORDER_LIST_TYPE_COMPONENT, OrderListTypePicker],
 			[DOC_PARAGRAPH_MENU_COMPONENT_KEY, ParagraphMenu],
 			[DOC_TABLE_BLOCK_MENU_COMPONENT_KEY, TableBlockMenu],
+			[FLOAT_MENU_COMPONENT_KEY, FloatToolbar],
 			[PAGE_SETTING_COMPONENT_ID, PageSettings]
 		].forEach(([key, comp]) => {
 			this.disposeWithMe(this._componentManager.register(key, comp));
@@ -21165,13 +21275,12 @@ const H5HeadingShortcut = headingShortcut(H5HeadingCommand.id, _univerjs_ui.KeyC
 //#endregion
 //#region src/plugin.ts
 let UniverDocsUIPlugin = class UniverDocsUIPlugin extends _univerjs_core.Plugin {
-	constructor(_config = defaultPluginConfig, _injector, _renderManagerSrv, _commandService, _logService, _configService) {
+	constructor(_config = defaultPluginConfig, _injector, _renderManagerSrv, _commandService, _configService) {
 		super();
 		this._config = _config;
 		this._injector = _injector;
 		this._renderManagerSrv = _renderManagerSrv;
 		this._commandService = _commandService;
-		this._logService = _logService;
 		this._configService = _configService;
 		const { menu, ...rest } = (0, _univerjs_core.merge)({}, defaultPluginConfig, this._config);
 		if (menu) this._configService.setConfig("menu", menu, { merge: true });
@@ -21182,7 +21291,7 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends _univerjs_core.Plugin
 	}
 	onReady() {
 		this._initRenderBasics();
-		this._markDocAsFocused();
+		this._initAutoFocus();
 		(0, _univerjs_core.touchDependencies)(this._injector, [[DocsRenderService]]);
 	}
 	onRendered() {
@@ -21362,19 +21471,14 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends _univerjs_core.Plugin
 			[DocMenuStyleService]
 		], this._config.override).forEach((d) => injector.add(d));
 	}
-	_markDocAsFocused() {
+	_initAutoFocus() {
 		const currentService = this._injector.get(_univerjs_core.IUniverInstanceService);
 		const editorService = this._injector.get(IEditorService);
-		try {
-			const doc = currentService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
+		this.disposeWithMe(currentService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC).subscribe((doc) => {
 			if (!doc) return;
 			const id = doc.getUnitId();
-			const createOptions = currentService.getUnitCreateOptions(id);
-			if ((createOptions === null || createOptions === void 0 ? void 0 : createOptions.makeCurrent) === false) return;
-			if (!editorService.isEditor(id)) currentService.focusUnit(doc.getUnitId());
-		} catch (err) {
-			this._logService.warn(err);
-		}
+			if (!editorService.isEditor(id)) currentService.focusUnit(id);
+		}));
 	}
 	_initRenderBasics() {
 		[
@@ -21419,8 +21523,7 @@ UniverDocsUIPlugin = __decorate([
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
 	__decorateParam(3, _univerjs_core.ICommandService),
-	__decorateParam(4, _univerjs_core.ILogService),
-	__decorateParam(5, _univerjs_core.IConfigService)
+	__decorateParam(4, _univerjs_core.IConfigService)
 ], UniverDocsUIPlugin);
 
 //#endregion
@@ -21876,6 +21979,7 @@ const useResize = (editor, isSingle = true, autoScrollbar, autoScroll) => {
 //#endregion
 //#region src/views/RichTextEditor.tsx
 const RichTextEditor = (props) => {
+	var _docSelectionRenderSe3;
 	const { className, autoFocus, onFocusChange: _onFocusChange, initialValue, onClickOutside: _onClickOutside, keyboardEventConfig, moveCursor = true, style, isSingle, editorId: propsEditorId, onHeightChange, onChange: _onChange, defaultHeight = 32, maxHeight = 32, icon, editorRef, placeholder, noStyle } = props;
 	(0, _univerjs_ui.useDependency)(IEditorService);
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
@@ -21893,12 +21997,22 @@ const RichTextEditor = (props) => {
 		isSingle
 	});
 	const renderer = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService).getRenderById(editorId);
-	const isFocusing = useIsFocusing(editorId);
+	const selectionIsFocusing = useIsFocusing(editorId);
+	const docSelectionRenderService = renderer === null || renderer === void 0 ? void 0 : renderer.with(DocSelectionRenderService);
+	const editorFocused = (0, _univerjs_ui.useObservable)(editor ? () => {
+		var _docSelectionRenderSe2;
+		return (0, rxjs.merge)(editor.focus$, editor.blur$).pipe((0, rxjs.map)(() => {
+			var _docSelectionRenderSe;
+			return (_docSelectionRenderSe = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.isFocusing) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : false;
+		}), (0, rxjs.startWith)((_docSelectionRenderSe2 = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.isFocusing) !== null && _docSelectionRenderSe2 !== void 0 ? _docSelectionRenderSe2 : false));
+	} : null, (_docSelectionRenderSe3 = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.isFocusing) !== null && _docSelectionRenderSe3 !== void 0 ? _docSelectionRenderSe3 : false, false, [docSelectionRenderService, editor]);
+	const isFocusing = selectionIsFocusing && editorFocused;
 	const sheetEmbeddingRef = (0, react.useRef)(null);
-	const [showPlaceholder, setShowPlaceholder] = (0, react.useState)(() => {
+	const resolveShowPlaceholder = () => {
 		var _editor$getDocumentDa, _editor$getDocumentDa2;
 		return !_univerjs_core.BuildTextUtils.transform.getPlainText((_editor$getDocumentDa = editor === null || editor === void 0 || (_editor$getDocumentDa2 = editor.getDocumentData().body) === null || _editor$getDocumentDa2 === void 0 ? void 0 : _editor$getDocumentDa2.dataStream) !== null && _editor$getDocumentDa !== void 0 ? _editor$getDocumentDa : "");
-	});
+	};
+	const showPlaceholder = (0, _univerjs_ui.useObservable)(editor ? () => editor.selectionChange$.pipe((0, rxjs.map)(resolveShowPlaceholder), (0, rxjs.startWith)(resolveShowPlaceholder())) : null, resolveShowPlaceholder(), false, [editor]);
 	const { checkScrollBar } = useResize(editor, isSingle, true, true);
 	(0, react.useLayoutEffect)(() => {
 		if (!editorRef || !editor) return;
@@ -21919,17 +22033,6 @@ const RichTextEditor = (props) => {
 		_onChange === null || _onChange === void 0 || _onChange(data, (0, _univerjs_core.getPlainText)((_data$body$dataStream = (_data$body = data.body) === null || _data$body === void 0 ? void 0 : _data$body.dataStream) !== null && _data$body$dataStream !== void 0 ? _data$body$dataStream : ""));
 		checkScrollBar();
 	});
-	(0, react.useEffect)(() => {
-		var _editor$getDocumentDa3, _editor$getDocumentDa4;
-		setShowPlaceholder(!_univerjs_core.BuildTextUtils.transform.getPlainText((_editor$getDocumentDa3 = editor === null || editor === void 0 || (_editor$getDocumentDa4 = editor.getDocumentData().body) === null || _editor$getDocumentDa4 === void 0 ? void 0 : _editor$getDocumentDa4.dataStream) !== null && _editor$getDocumentDa3 !== void 0 ? _editor$getDocumentDa3 : ""));
-		const sub = editor === null || editor === void 0 ? void 0 : editor.selectionChange$.subscribe(() => {
-			var _editor$getDocumentDa5, _editor$getDocumentDa6;
-			setShowPlaceholder(!_univerjs_core.BuildTextUtils.transform.getPlainText((_editor$getDocumentDa5 = editor === null || editor === void 0 || (_editor$getDocumentDa6 = editor.getDocumentData().body) === null || _editor$getDocumentDa6 === void 0 ? void 0 : _editor$getDocumentDa6.dataStream) !== null && _editor$getDocumentDa5 !== void 0 ? _editor$getDocumentDa5 : ""));
-		});
-		return () => sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
-	}, [editor]);
-	(0, _univerjs_ui.useObservable)(editor === null || editor === void 0 ? void 0 : editor.blur$);
-	(0, _univerjs_ui.useObservable)(editor === null || editor === void 0 ? void 0 : editor.focus$);
 	(0, react.useEffect)(() => {
 		var _data$body$dataStream2, _data$body2;
 		const data = editor === null || editor === void 0 ? void 0 : editor.getDocumentData();
@@ -22243,7 +22346,6 @@ Object.defineProperty(exports, 'createRemoveCustomBlockActions', {
 });
 exports.deleteCustomDecorationFactory = deleteCustomDecorationFactory;
 exports.disableMenuWhenHeaderFooterEditing = disableMenuWhenHeaderFooterEditing;
-exports.docDrawingPositionToTransform = docDrawingPositionToTransform;
 exports.executeEditorUndoRedoCommand = executeEditorUndoRedoCommand;
 exports.genTableSource = genTableSource;
 exports.generateParagraphs = _univerjs_docs.generateParagraphs;
@@ -22251,7 +22353,6 @@ exports.getAnchorBounding = getAnchorBounding;
 exports.getCanvasOffsetByEngine = getCanvasOffsetByEngine;
 exports.getCommandSkeleton = getCommandSkeleton;
 exports.getCursorWhenDelete = getCursorWhenDelete;
-exports.getCustomBlockIdsInSelections = getCustomBlockIdsInSelections;
 exports.getCutActionsFromDocRanges = getCutActionsFromDocRanges;
 exports.getDocBlockRangeMenuId = getDocBlockRangeMenuId;
 exports.getDocObject = getDocObject;
@@ -22291,7 +22392,6 @@ exports.resolveDocsTableLikeCustomBlockContentHeight = resolveDocsTableLikeCusto
 exports.resolveDocsTableLikeCustomBlockContentWidth = resolveDocsTableLikeCustomBlockContentWidth;
 exports.scrollDocsTableLikeCustomBlockLive = scrollDocsTableLikeCustomBlockLive;
 exports.shouldRefreshDocsCustomBlockSizeForCommand = shouldRefreshDocsCustomBlockSizeForCommand;
-exports.transformToDocDrawingPosition = transformToDocDrawingPosition;
 exports.useEditor = useEditor;
 exports.useEditorClickOutside = useEditorClickOutside;
 exports.useIsFocusing = useIsFocusing;