@univerjs/docs-ui 1.0.0-alpha.5 → 1.0.0-alpha.7

package/lib/cjs/index.js

@@ -151,6 +151,11 @@ function deleteCustomDecorationFactory(accessor, params) {
 
 //#endregion
 //#region src/basics/paragraph.ts
+function isTopLevelStructuralGap(dataStream, offset) {
+	const previousToken = dataStream[offset - 1];
+	const nextToken = dataStream[offset];
+	return previousToken === _univerjs_core.DataStreamTreeTokenType.BLOCK_END || previousToken === _univerjs_core.DataStreamTreeTokenType.TABLE_END || previousToken === _univerjs_core.DataStreamTreeTokenType.COLUMN_GROUP_END || nextToken === _univerjs_core.DataStreamTreeTokenType.BLOCK_START || nextToken === _univerjs_core.DataStreamTreeTokenType.TABLE_START || nextToken === _univerjs_core.DataStreamTreeTokenType.COLUMN_GROUP_START;
+}
 function hasParagraphInTable(paragraph, tables) {
 	return tables.some((table) => paragraph.startIndex > table.startIndex && paragraph.startIndex < table.endIndex);
 }
@@ -524,11 +529,6 @@ const BreakLineCommand = {
 		return Boolean(result);
 	}
 };
-function isTopLevelStructuralGap(dataStream, offset) {
-	const previousToken = dataStream[offset - 1];
-	const nextToken = dataStream[offset];
-	return previousToken === _univerjs_core.DataStreamTreeTokenType.BLOCK_END || previousToken === _univerjs_core.DataStreamTreeTokenType.TABLE_END || previousToken === _univerjs_core.DataStreamTreeTokenType.COLUMN_GROUP_END || nextToken === _univerjs_core.DataStreamTreeTokenType.BLOCK_START || nextToken === _univerjs_core.DataStreamTreeTokenType.TABLE_START || nextToken === _univerjs_core.DataStreamTreeTokenType.COLUMN_GROUP_START;
-}
 
 //#endregion
 //#region src/services/clipboard/doc-paste-mutation-adapter.service.ts
@@ -1082,7 +1082,7 @@ const InnerPasteCommand = {
 	id: "doc.command.inner-paste",
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
-		var _docDataModel$getSelf, _body$tables, _body$customBlocks;
+		var _docDataModel$getSelf, _body$tables, _body$customBlocks, _body$blockRanges;
 		const { segmentId, textRanges, doc } = params;
 		const commandService = accessor.get(_univerjs_core.ICommandService);
 		const undoRedoService = accessor.get(_univerjs_core.IUndoRedoService);
@@ -1116,6 +1116,7 @@ const InnerPasteCommand = {
 		const resourceMutationGroups = [];
 		const hasTable = !!((_body$tables = body.tables) === null || _body$tables === void 0 ? void 0 : _body$tables.length);
 		const hasCustomBlock = !!((_body$customBlocks = body.customBlocks) === null || _body$customBlocks === void 0 ? void 0 : _body$customBlocks.length);
+		const hasBlockRange = !!((_body$blockRanges = body.blockRanges) === null || _body$blockRanges === void 0 ? void 0 : _body$blockRanges.length);
 		if (hasTable && segmentId) return false;
 		if (hasTable && hasRangeInTable(selections)) return false;
 		if (selections.length && (rectRanges === null || rectRanges === void 0 ? void 0 : rectRanges.length)) return false;
@@ -1125,6 +1126,16 @@ const InnerPasteCommand = {
 			const { startOffset, endOffset, collapsed } = selection;
 			const len = startOffset - memoryCursor.cursor;
 			const cloneBody = _univerjs_core.Tools.deepClone(body);
+			const blockRangeMappings = [];
+			const customBlockMappings = [];
+			if (hasBlockRange) cloneBody.blockRanges.forEach((targetBlockRange, index) => {
+				const sourceBlockRange = body.blockRanges[index];
+				targetBlockRange.blockId = (0, _univerjs_core.generateRandomId)(6);
+				blockRangeMappings.push({
+					sourceBlockRange,
+					targetBlockRange
+				});
+			});
 			if (hasTable) for (const t of cloneBody.tables) {
 				const { tableId: oldTableId } = t;
 				const tableId = (0, _univerjs_core.generateRandomId)(6);
@@ -1137,7 +1148,6 @@ const InnerPasteCommand = {
 			if (hasCustomBlock && drawings) {
 				var _docDataModel$getSnap, _docDataModel$getSnap2;
 				const drawingLen = (_docDataModel$getSnap = (_docDataModel$getSnap2 = docDataModel.getSnapshot().drawingsOrder) === null || _docDataModel$getSnap2 === void 0 ? void 0 : _docDataModel$getSnap2.length) !== null && _docDataModel$getSnap !== void 0 ? _docDataModel$getSnap : 0;
-				const customBlockMappings = [];
 				for (const block of cloneBody.customBlocks) {
 					const { blockId } = block;
 					const drawingId = (0, _univerjs_core.generateRandomId)(6);
@@ -1152,21 +1162,6 @@ const InnerPasteCommand = {
 						targetDrawing: drawing
 					});
 				}
-				if (customBlockMappings.length > 0 && pasteAdapterService) {
-					const mutationInfos = pasteAdapterService.getPasteMutationInfos({
-						unitId,
-						segmentId,
-						doc,
-						sourceBody: body,
-						targetBody: cloneBody,
-						customBlockMappings
-					});
-					if (mutationInfos.redoMutations.length > 0 || mutationInfos.undoMutations.length > 0) {
-						resourceRedoMutations.push(...mutationInfos.redoMutations);
-						resourceUndoMutations.push(...mutationInfos.undoMutations);
-						resourceMutationGroups.push(mutationInfos);
-					}
-				}
 				customBlockMappings.forEach(({ targetBlockId, targetDrawing }) => {
 					const action = jsonX.insertOp(["drawings", targetBlockId], targetDrawing);
 					const orderAction = jsonX.insertOp(["drawingsOrder", drawingLen], targetBlockId);
@@ -1174,6 +1169,22 @@ const InnerPasteCommand = {
 					rawActions.push(orderAction);
 				});
 			}
+			if ((blockRangeMappings.length > 0 || customBlockMappings.length > 0) && pasteAdapterService) {
+				const mutationInfos = pasteAdapterService.getPasteMutationInfos({
+					unitId,
+					segmentId,
+					doc,
+					sourceBody: body,
+					targetBody: cloneBody,
+					blockRangeMappings,
+					customBlockMappings
+				});
+				if (mutationInfos.redoMutations.length > 0 || mutationInfos.undoMutations.length > 0) {
+					resourceRedoMutations.push(...mutationInfos.redoMutations);
+					resourceUndoMutations.push(...mutationInfos.undoMutations);
+					resourceMutationGroups.push(mutationInfos);
+				}
+			}
 			const customRange = getCustomRangeAtPosition((_originBody$customRan = originBody.customRanges) !== null && _originBody$customRan !== void 0 ? _originBody$customRan : [], endOffset, UNITS.includes(unitId));
 			const customDecorations = getCustomDecorationAtPosition((_originBody$customDec = originBody.customDecorations) !== null && _originBody$customDec !== void 0 ? _originBody$customDec : [], endOffset);
 			if (customRange) cloneBody.customRanges = [{
@@ -3729,6 +3740,7 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		this._clipboardInterfaceService = _clipboardInterfaceService;
 		this._docSelectionManagerService = _docSelectionManagerService;
 		_defineProperty(this, "_clipboardHooks", []);
+		_defineProperty(this, "_memoryClipboardData", null);
 		_defineProperty(this, "_htmlToUDM", new HtmlToUDMService());
 		_defineProperty(this, "_umdToHtml", void 0);
 		this._umdToHtml = new UDMToHtmlService(docHtmlExportService);
@@ -3740,7 +3752,7 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		try {
 			var _allRanges$;
 			const isCopyInHeaderFooter = !!(allRanges === null || allRanges === void 0 || (_allRanges$ = allRanges[0]) === null || _allRanges$ === void 0 ? void 0 : _allRanges$.segmentId);
-			this._setClipboardData(newSnapshotList, !isCopyInHeaderFooter && needCache);
+			await this._setClipboardData(newSnapshotList, !isCopyInHeaderFooter && needCache);
 		} catch (e) {
 			this._logService.error("[DocClipboardService] copy failed", e);
 			return false;
@@ -3751,6 +3763,7 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		return this._cut(ranges);
 	}
 	async paste(items) {
+		if (!(items === null || items === void 0 ? void 0 : items.length)) return this._memoryClipboardData ? this._paste(_univerjs_core.Tools.deepClone(this._memoryClipboardData)) : false;
 		const partDocData = await this._genDocDataFromClipboardItems(items);
 		return this._paste(partDocData);
 	}
@@ -3808,11 +3821,12 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		}
 	}
 	async _paste(docData) {
-		var _this$_univerInstance, _body$customRanges, _body$paragraphs;
+		var _body$customRanges, _body$paragraphs, _currentDocument$getS;
 		const { body: _body } = docData;
 		if (_body == null) return false;
 		let body = (0, _univerjs_core.normalizeBody)(_body);
-		if (!((_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId())) return false;
+		const currentDocument = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (!currentDocument) return false;
 		this._clipboardHooks.forEach((hook) => {
 			if (hook.onBeforePaste) body = hook.onBeforePaste(body);
 		});
@@ -3825,6 +3839,8 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 		const ranges = this._docSelectionManagerService.getTextRanges();
 		if (segmentId == null) this._logService.error("[DocClipboardController] segmentId does not exist!");
 		if (activeEndOffset == null || ranges == null) return false;
+		const originBody = segmentId == null ? null : (_currentDocument$getS = currentDocument.getSelfOrHeaderFooterModel(segmentId)) === null || _currentDocument$getS === void 0 ? void 0 : _currentDocument$getS.getBody();
+		if (originBody) ensureParagraphAtStructuralGap(body, originBody, ranges);
 		try {
 			let cursor = activeEndOffset;
 			for (const range of ranges) {
@@ -3873,7 +3889,8 @@ let DocClipboardService = class DocClipboardService extends _univerjs_core.Dispo
 			html = embedInternalClipboardFragment(html, internalJson);
 		}
 		html = wrapClipboardHtml(html);
-		return this._clipboardInterfaceService.write(text, html, internalJson ? { [DOC_INTERNAL_FRAGMENT_MIME]: internalJson } : void 0);
+		await this._clipboardInterfaceService.write(text, html, internalJson ? { [DOC_INTERNAL_FRAGMENT_MIME]: internalJson } : void 0);
+		this._memoryClipboardData = _univerjs_core.Tools.deepClone(internalDocData);
 	}
 	addClipboardHook(hook) {
 		this._clipboardHooks.push(hook);
@@ -4098,6 +4115,21 @@ DocClipboardService = __decorate([
 	__decorateParam(4, (0, _univerjs_core.Inject)(DocHtmlExportService)),
 	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService))
 ], DocClipboardService);
+function endsAtDocumentBoundary(dataStream) {
+	const lastToken = dataStream[dataStream.length - 1];
+	return lastToken === _univerjs_core.DataStreamTreeTokenType.PARAGRAPH || lastToken === _univerjs_core.DataStreamTreeTokenType.SECTION_BREAK || lastToken === _univerjs_core.DataStreamTreeTokenType.BLOCK_END || lastToken === _univerjs_core.DataStreamTreeTokenType.TABLE_END || lastToken === _univerjs_core.DataStreamTreeTokenType.COLUMN_GROUP_END;
+}
+function ensureParagraphAtStructuralGap(body, originBody, ranges) {
+	var _body$paragraphs$map, _body$paragraphs2, _body$paragraphs3;
+	if (endsAtDocumentBoundary(body.dataStream) || !ranges.every((range) => range.collapsed && isTopLevelStructuralGap(originBody.dataStream, range.startOffset))) return;
+	const paragraphIndex = body.dataStream.length;
+	const paragraphIds = new Set((_body$paragraphs$map = (_body$paragraphs2 = body.paragraphs) === null || _body$paragraphs2 === void 0 ? void 0 : _body$paragraphs2.map((paragraph) => paragraph.paragraphId)) !== null && _body$paragraphs$map !== void 0 ? _body$paragraphs$map : []);
+	body.dataStream += _univerjs_core.DataStreamTreeTokenType.PARAGRAPH;
+	body.paragraphs = [...(_body$paragraphs3 = body.paragraphs) !== null && _body$paragraphs3 !== void 0 ? _body$paragraphs3 : [], {
+		startIndex: paragraphIndex,
+		paragraphId: (0, _univerjs_core.createParagraphId)(paragraphIds)
+	}];
+}
 function dataUrlToFile(dataUrl, fallbackName) {
 	const match = /^data:([^;,]+)(;base64)?,(.*)$/i.exec(dataUrl);
 	if (!match) throw new Error("[DocClipboardService] invalid image data url.");
@@ -4173,8 +4205,8 @@ const DocPasteCommand = {
 	preconditions: whenDocOrEditor,
 	handler: async (accessor) => {
 		const docClipboardService = accessor.get(IDocClipboardService);
-		const clipboardItems = await accessor.get(_univerjs_ui.IClipboardInterfaceService).read();
-		if (clipboardItems.length === 0) return false;
+		const clipboardInterfaceService = accessor.get(_univerjs_ui.IClipboardInterfaceService);
+		const clipboardItems = clipboardInterfaceService.supportClipboard ? await clipboardInterfaceService.read() : [];
 		return docClipboardService.paste(clipboardItems);
 	}
 };
@@ -6416,7 +6448,7 @@ var NodePositionConvertToCursor = class {
 			const rawAnchorGlyph = isStartBack ? preGlyph !== null && preGlyph !== void 0 ? preGlyph : firstGlyph : firstGlyph;
 			const anchorGlyph = this._getCaretGlyph(rawAnchorGlyph, glyphGroup, start_sp);
 			const selectedGlyphs = glyphGroup.slice(start_sp, end_sp + 1);
-			const isSelectionOnlyNonInlineEmbedBlock = !collapsed && selectedGlyphs.length > 0 && selectedGlyphs.every((glyph) => this._isNonInlineEmbedCustomBlockGlyph(glyph));
+			const isSelectionOnlyNonInlineDrawing = !collapsed && selectedGlyphs.length > 0 && selectedGlyphs.every((glyph) => this._isNonInlineDrawingGlyph(glyph));
 			const borderBoxStartY = startY;
 			const borderBoxEndY = contentHeight == null ? startY + lineHeight - marginTop - marginBottom : startY + paddingTop + contentHeight + paddingBottom;
 			if (start_sp === 0 && end_sp === glyphGroup.length - 1) {
@@ -6449,8 +6481,8 @@ var NodePositionConvertToCursor = class {
 			}
 			const clippedBorderBoxPosition = clipPositionToHorizontalRange(borderBoxPosition, this._horizontalClip);
 			const clippedContentBoxPosition = clipPositionToHorizontalRange(contentBoxPosition, this._horizontalClip);
-			if (clippedBorderBoxPosition && !isSelectionOnlyNonInlineEmbedBlock) borderBoxPointGroup.push(pushToPoints(clippedBorderBoxPosition));
-			if (clippedContentBoxPosition && !isSelectionOnlyNonInlineEmbedBlock) contentBoxPointGroup.push(pushToPoints(clippedContentBoxPosition));
+			if (clippedBorderBoxPosition && !isSelectionOnlyNonInlineDrawing) borderBoxPointGroup.push(pushToPoints(clippedBorderBoxPosition));
+			if (clippedContentBoxPosition && !isSelectionOnlyNonInlineDrawing) contentBoxPointGroup.push(pushToPoints(clippedContentBoxPosition));
 			cursorList.push({
 				startOffset: isStartBack ? startOffset : startOffset + firstGlyph.count,
 				endOffset: isEndBack ? endOffset : endOffset + lastGlyph.count,
@@ -6465,7 +6497,7 @@ var NodePositionConvertToCursor = class {
 	}
 	_getCaretGlyph(glyph, glyphGroup, glyphIndex) {
 		var _this$_findTextLikeGl;
-		if (!glyph || !this._isNonInlineEmbedCustomBlockGlyph(glyph)) return glyph;
+		if (!glyph || !this._isNonInlineDrawingGlyph(glyph)) return glyph;
 		const neighbor = (_this$_findTextLikeGl = this._findTextLikeGlyph(glyphGroup, glyphIndex - 1, -1)) !== null && _this$_findTextLikeGl !== void 0 ? _this$_findTextLikeGl : this._findTextLikeGlyph(glyphGroup, glyphIndex + 1, 1);
 		return neighbor !== null && neighbor !== void 0 ? neighbor : {
 			...glyph,
@@ -6475,13 +6507,14 @@ var NodePositionConvertToCursor = class {
 	_findTextLikeGlyph(glyphGroup, startIndex, step) {
 		for (let index = startIndex; index >= 0 && index < glyphGroup.length; index += step) {
 			const glyph = glyphGroup[index];
-			if (!this._isNonInlineEmbedCustomBlockGlyph(glyph)) return glyph;
+			if (!this._isNonInlineDrawingGlyph(glyph)) return glyph;
 		}
 	}
-	_isNonInlineEmbedCustomBlockGlyph(glyph) {
+	_isNonInlineDrawingGlyph(glyph) {
 		var _this$_docSkeleton$ge, _this$_docSkeleton, _this$_docSkeleton$ge2, _this$_docSkeleton$ge3, _this$_docSkeleton$ge4, _this$_docSkeleton$ge5;
 		if (!(glyph === null || glyph === void 0 ? void 0 : glyph.drawingId) || glyph.streamType !== _univerjs_core.DataStreamTreeTokenType.CUSTOM_BLOCK) return false;
-		return !(0, _univerjs_docs.shouldUseInlineTextSelectionForDocsCustomBlockDrawing)((_this$_docSkeleton$ge = (_this$_docSkeleton = this._docSkeleton).getViewModel) === null || _this$_docSkeleton$ge === void 0 || (_this$_docSkeleton$ge3 = (_this$_docSkeleton$ge2 = _this$_docSkeleton$ge.call(_this$_docSkeleton)).getDataModel) === null || _this$_docSkeleton$ge3 === void 0 || (_this$_docSkeleton$ge5 = (_this$_docSkeleton$ge4 = _this$_docSkeleton$ge3.call(_this$_docSkeleton$ge2)).getSnapshot) === null || _this$_docSkeleton$ge5 === void 0 || (_this$_docSkeleton$ge5 = _this$_docSkeleton$ge5.call(_this$_docSkeleton$ge4).drawings) === null || _this$_docSkeleton$ge5 === void 0 ? void 0 : _this$_docSkeleton$ge5[glyph.drawingId]);
+		const drawing = (_this$_docSkeleton$ge = (_this$_docSkeleton = this._docSkeleton).getViewModel) === null || _this$_docSkeleton$ge === void 0 || (_this$_docSkeleton$ge3 = (_this$_docSkeleton$ge2 = _this$_docSkeleton$ge.call(_this$_docSkeleton)).getDataModel) === null || _this$_docSkeleton$ge3 === void 0 || (_this$_docSkeleton$ge5 = (_this$_docSkeleton$ge4 = _this$_docSkeleton$ge3.call(_this$_docSkeleton$ge2)).getSnapshot) === null || _this$_docSkeleton$ge5 === void 0 || (_this$_docSkeleton$ge5 = _this$_docSkeleton$ge5.call(_this$_docSkeleton$ge4).drawings) === null || _this$_docSkeleton$ge5 === void 0 ? void 0 : _this$_docSkeleton$ge5[glyph.drawingId];
+		return (drawing === null || drawing === void 0 ? void 0 : drawing.layoutType) == null ? !(0, _univerjs_docs.shouldUseInlineTextSelectionForDocsCustomBlockDrawing)(drawing) : drawing.layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE;
 	}
 	_isValidPosition(startOrigin, endOrigin) {
 		const { segmentPage: startPage, pageType: startPageType } = startOrigin;
@@ -8182,8 +8215,16 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 	sync() {
 		this._updateInputPosition();
 	}
+	setInputPosition(x, y) {
+		this._positionInput(x, y);
+	}
 	activate(x, y, force = false) {
+		this._positionInput(x, y);
+		if (force && !this._shouldPreserveExternalFocus() || !force && this.canFocusing) this.focus();
+	}
+	_positionInput(x, y) {
 		this._ensureHostContainer();
+		this._container.style.position = "fixed";
 		let left = x;
 		let top = y;
 		const fixedContainer = this._container.offsetParent;
@@ -8195,7 +8236,6 @@ let DocSelectionRenderService = class DocSelectionRenderService extends _univerj
 		this._container.style.left = `${left}px`;
 		this._container.style.top = `${top}px`;
 		this._container.style.zIndex = "1000";
-		if (force && !this._shouldPreserveExternalFocus() || !force && this.canFocusing) this.focus();
 	}
 	hasFocus() {
 		return this._getOwnerDocument().activeElement === this._input;
@@ -9240,13 +9280,14 @@ const DocTableDeleteColumnsCommand = {
 const DocTableDeleteTableCommand = {
 	id: "doc.table.delete-table",
 	type: _univerjs_core.CommandType.COMMAND,
-	handler: async (accessor) => {
-		var _docDataModel$getSelf3;
+	handler: async (accessor, params) => {
+		var _params$targetRange, _docDataModel$getSelf3;
 		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
 		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 		const commandService = accessor.get(_univerjs_core.ICommandService);
 		const activeRectRanges = docSelectionManagerService.getRectRanges();
-		const rangeInfo = getRangeInfoFromRanges(docSelectionManagerService.getActiveTextRange(), activeRectRanges);
+		const activeTextRange = docSelectionManagerService.getActiveTextRange();
+		const rangeInfo = getRangeInfoFromRanges((_params$targetRange = params === null || params === void 0 ? void 0 : params.targetRange) !== null && _params$targetRange !== void 0 ? _params$targetRange : activeTextRange, (params === null || params === void 0 ? void 0 : params.targetRange) ? [] : activeRectRanges);
 		if (rangeInfo == null) return false;
 		const { segmentId } = rangeInfo;
 		const docDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
@@ -10709,10 +10750,7 @@ function getPageSizeInModernMode(page) {
 	const { marginLeft, marginRight, marginTop, marginBottom, skeDrawings, skeTables } = page;
 	if (pageWidth === Number.POSITIVE_INFINITY) pageWidth = page.width + marginLeft + marginRight;
 	if (pageHeight === Number.POSITIVE_INFINITY) pageHeight = page.height + marginTop + marginBottom;
-	for (const drawing of skeDrawings.values()) {
-		pageWidth = Math.max(pageWidth, drawing.aLeft + drawing.width + marginLeft + marginRight);
-		pageHeight = Math.max(pageHeight, drawing.aTop + drawing.height + marginTop + marginBottom);
-	}
+	for (const drawing of skeDrawings.values()) pageHeight = Math.max(pageHeight, drawing.aTop + drawing.height + marginTop + marginBottom);
 	for (const table of skeTables.values()) pageHeight = Math.max(pageHeight, table.top + table.height + marginTop + marginBottom);
 	return {
 		pageWidth,
@@ -11095,7 +11133,7 @@ function PageSettings(props) {
 				className: "univer-grid univer-grid-cols-3 univer-gap-2",
 				children: MODERN_WIDTH_OPTIONS.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
-					className: (0, _univerjs_design.clsx)("univer-flex univer-h-16 univer-cursor-pointer univer-flex-col univer-items-center univer-justify-center univer-gap-1 univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-text-sm univer-font-medium univer-text-gray-700 univer-transition-colors hover:univer-border-primary-500 hover:univer-text-primary-600 dark:!univer-border-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-100", { "!univer-border-primary-500 !univer-bg-primary-50 !univer-text-primary-600 dark:!univer-bg-primary-900": settings.modernWidth === option }),
+					className: (0, _univerjs_design.clsx)(_univerjs_design.resetButtonClassName, _univerjs_design.borderClassName, "univer-h-16 univer-flex-col univer-gap-1 univer-rounded-lg univer-bg-white univer-text-sm univer-font-medium univer-text-gray-700 univer-transition-colors hover:univer-border-primary-500 hover:univer-text-primary-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-100", { "!univer-border-primary-500 !univer-bg-primary-50 !univer-text-primary-600 dark:!univer-bg-primary-900": settings.modernWidth === option }),
 					onClick: () => handleModernWidthChange(option),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t(`docs-ui.page-settings.modern-width-${option}`) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: "univer-text-xs univer-font-normal univer-text-gray-400",
@@ -11586,6 +11624,54 @@ function DeleteTableMenuItemFactory(accessor) {
 	};
 }
 
+//#endregion
+//#region src/commands/commands/insert-special-character.command.ts
+const InsertSpecialCharacterCommand = {
+	id: "doc.command.insert-special-character",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _docDataModel$getSelf, _originBody$customRan, _originBody$customDec;
+		if (!(params === null || params === void 0 ? void 0 : params.value)) return false;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const docMenuStyleService = accessor.get(DocMenuStyleService);
+		const docDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
+		const activeRange = docSelectionManagerService.getActiveTextRange();
+		if (!docDataModel || !activeRange) return false;
+		const { segmentId } = activeRange;
+		const originBody = (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.getBody();
+		if (!originBody) return false;
+		const { value } = params;
+		const curTextRun = getTextRunAtPosition(originBody, activeRange.endOffset, docMenuStyleService.getDefaultStyle(), docMenuStyleService.getStyleCache());
+		const curCustomRange = getCustomRangeAtPosition((_originBody$customRan = originBody.customRanges) !== null && _originBody$customRan !== void 0 ? _originBody$customRan : [], activeRange.endOffset);
+		const curCustomDecorations = getCustomDecorationAtPosition((_originBody$customDec = originBody.customDecorations) !== null && _originBody$customDec !== void 0 ? _originBody$customDec : [], activeRange.endOffset);
+		return commandService.executeCommand(_univerjs_docs.InsertTextCommand.id, {
+			unitId: docDataModel.getUnitId(),
+			body: {
+				dataStream: value,
+				textRuns: [{
+					...curTextRun,
+					st: 0,
+					ed: value.length
+				}],
+				customRanges: curCustomRange ? [{
+					...curCustomRange,
+					startIndex: 0,
+					endIndex: value.length - 1
+				}] : [],
+				customDecorations: curCustomDecorations.map((customDecoration) => ({
+					...customDecoration,
+					startIndex: 0,
+					endIndex: value.length - 1
+				}))
+			},
+			range: activeRange,
+			segmentId
+		});
+	}
+};
+
 //#endregion
 //#region src/views/const.ts
 /**
@@ -11750,16 +11836,22 @@ function getInsertTableHiddenObservable(accessor) {
 	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 	const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
 	return new rxjs.Observable((subscriber) => {
+		let editAreaSubscription = null;
 		const subscription = univerInstanceService.focused$.subscribe((unitId) => {
+			editAreaSubscription === null || editAreaSubscription === void 0 || editAreaSubscription.unsubscribe();
+			editAreaSubscription = null;
 			if (unitId == null) return subscriber.next(true);
 			if (univerInstanceService.getUnitType(unitId) !== _univerjs_core.UniverInstanceType.UNIVER_DOC) return subscriber.next(true);
 			const currentRender = renderManagerService.getRenderById(unitId);
 			if (currentRender == null) return subscriber.next(true);
-			currentRender.with(_univerjs_docs.DocSkeletonManagerService).getViewModel().editAreaChange$.subscribe((editArea) => {
+			editAreaSubscription = currentRender.with(_univerjs_docs.DocSkeletonManagerService).getViewModel().editAreaChange$.subscribe((editArea) => {
 				subscriber.next(editArea === _univerjs_engine_render.DocumentEditArea.HEADER || editArea === _univerjs_engine_render.DocumentEditArea.FOOTER);
 			});
 		});
-		return () => subscription.unsubscribe();
+		return () => {
+			editAreaSubscription === null || editAreaSubscription === void 0 || editAreaSubscription.unsubscribe();
+			subscription.unsubscribe();
+		};
 	});
 }
 function disableMenuWhenHeaderFooterEditing(accessor) {
@@ -11825,9 +11917,8 @@ function getHeaderFooterMenuHiddenObservable(accessor) {
 			subscriber.next(documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL);
 		});
 		const docDataModel = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
-		if (docDataModel == null) return subscriber.next(true);
 		const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
-		subscriber.next(documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL);
+		subscriber.next(docDataModel == null || documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL);
 		return () => {
 			subscription0.dispose();
 			subscription.unsubscribe();
@@ -11904,6 +11995,42 @@ function disableMenuWhenNoDocRange(accessor) {
 		return () => subscription.unsubscribe();
 	});
 }
+const DOC_INSERT_EMOJI_MENU_ID = "doc.menu.insert-emoji";
+const DOC_INSERT_SYMBOL_MENU_ID = "doc.menu.insert-symbol";
+function EmojiPickerMenuItemFactory(accessor) {
+	return {
+		id: DOC_INSERT_EMOJI_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SELECTOR,
+		icon: "SmileIcon",
+		tooltip: "ui.emojiPicker.emojis",
+		selectionsCommandId: InsertSpecialCharacterCommand.id,
+		selections: [{ label: {
+			name: _univerjs_ui.EMOJI_PICKER_COMPONENT,
+			hoverable: false,
+			selectable: false,
+			props: { embedded: true }
+		} }],
+		disabled$: disableMenuWhenNoDocRange(accessor),
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
+function SymbolPickerMenuItemFactory(accessor) {
+	return {
+		id: DOC_INSERT_SYMBOL_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SELECTOR,
+		icon: "SymbolsIcon",
+		tooltip: "ui.emojiPicker.symbols",
+		selectionsCommandId: InsertSpecialCharacterCommand.id,
+		selections: [{ label: {
+			name: _univerjs_ui.SYMBOL_PICKER_COMPONENT,
+			hoverable: false,
+			selectable: false,
+			props: { embedded: true }
+		} }],
+		disabled$: disableMenuWhenNoDocRange(accessor),
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC)
+	};
+}
 function isTextRangeInAnyBlockRange(document, range) {
 	var _document$getBody$blo2, _document$getBody2;
 	const blockRanges = (_document$getBody$blo2 = document === null || document === void 0 || (_document$getBody2 = document.getBody()) === null || _document$getBody2 === void 0 ? void 0 : _document$getBody2.blockRanges) !== null && _document$getBody$blo2 !== void 0 ? _document$getBody$blo2 : [];
@@ -12564,7 +12691,10 @@ function AlignMenuItemFactory(accessor) {
 		});
 		calc();
 		return disposable.dispose;
-	});
+	}).pipe((0, rxjs.distinctUntilChanged)(), (0, rxjs.shareReplay)({
+		bufferSize: 1,
+		refCount: true
+	}));
 	return {
 		id: AlignOperationCommand.id,
 		type: _univerjs_ui.MenuItemType.SELECTOR,
@@ -13410,42 +13540,87 @@ const menuSchema = {
 	[_univerjs_ui.RibbonStartGroup.FORMAT]: {
 		[SetInlineFormatBoldCommand.id]: {
 			order: 0,
+			gridLayout: {
+				row: 2,
+				column: 1
+			},
 			menuItemFactory: BoldMenuItemFactory
 		},
 		[SetInlineFormatItalicCommand.id]: {
 			order: 1,
+			gridLayout: {
+				row: 2,
+				column: 2
+			},
 			menuItemFactory: ItalicMenuItemFactory
 		},
 		[SetInlineFormatUnderlineCommand.id]: {
 			order: 2,
+			gridLayout: {
+				row: 2,
+				column: 3
+			},
 			menuItemFactory: UnderlineMenuItemFactory
 		},
 		[SetInlineFormatStrikethroughCommand.id]: {
 			order: 3,
+			gridLayout: {
+				row: 2,
+				column: 4
+			},
 			menuItemFactory: StrikeThroughMenuItemFactory
 		},
 		[SetInlineFormatSubscriptCommand.id]: {
 			order: 4,
+			gridLayout: {
+				row: 2,
+				column: 5
+			},
 			menuItemFactory: SubscriptMenuItemFactory
 		},
 		[SetInlineFormatSuperscriptCommand.id]: {
 			order: 5,
+			gridLayout: {
+				row: 2,
+				column: 6
+			},
 			menuItemFactory: SuperscriptMenuItemFactory
 		},
 		[SetParagraphNamedStyleCommand.id]: {
 			order: 5.5,
+			gridLayout: {
+				row: 1,
+				column: 1,
+				columnSpan: 2,
+				width: 100
+			},
 			menuItemFactory: HeadingSelectorMenuItemFactory
 		},
 		[SetInlineFormatFontSizeCommand.id]: {
 			order: 6,
+			gridLayout: {
+				row: 1,
+				column: 7,
+				width: 64
+			},
 			menuItemFactory: FontSizeSelectorMenuItemFactory
 		},
 		[SetInlineFormatFontFamilyCommand.id]: {
 			order: 7,
+			gridLayout: {
+				row: 1,
+				column: 3,
+				columnSpan: 4,
+				width: 160
+			},
 			menuItemFactory: FontFamilySelectorMenuItemFactory
 		},
 		[SetInlineFormatTextColorCommand.id]: {
 			order: 8,
+			gridLayout: {
+				row: 2,
+				column: 7
+			},
 			menuItemFactory: TextColorSelectorMenuItemFactory,
 			[ResetInlineFormatTextColorCommand.id]: {
 				order: 0,
@@ -13454,6 +13629,10 @@ const menuSchema = {
 		},
 		[SetInlineFormatTextBackgroundColorCommand.id]: {
 			order: 9,
+			gridLayout: {
+				row: 2,
+				column: 8
+			},
 			menuItemFactory: BackgroundColorSelectorMenuItemFactory,
 			[ResetInlineFormatTextBackgroundColorCommand.id]: {
 				order: 0,
@@ -13464,32 +13643,66 @@ const menuSchema = {
 	[_univerjs_ui.RibbonStartGroup.LAYOUT]: {
 		[AlignOperationCommand.id]: {
 			order: 2,
+			gridLayout: {
+				row: 1,
+				column: 1
+			},
 			menuItemFactory: AlignMenuItemFactory
 		},
 		[OrderListCommand.id]: {
 			order: 7,
+			gridLayout: {
+				row: 2,
+				column: 1
+			},
 			menuItemFactory: OrderListMenuItemFactory
 		},
 		[BulletListCommand.id]: {
 			order: 8,
+			gridLayout: {
+				row: 1,
+				column: 2
+			},
 			menuItemFactory: BulletListMenuItemFactory
 		},
 		[CheckListCommand.id]: {
 			order: 9,
+			gridLayout: {
+				row: 2,
+				column: 2
+			},
 			menuItemFactory: CheckListMenuItemFactory
 		},
 		[OpenHeaderFooterPanelCommand.id]: {
 			order: 10,
+			gridLayout: {
+				row: 1,
+				column: 3,
+				rowSpan: 2,
+				showLabel: true
+			},
 			menuItemFactory: HeaderFooterMenuItemFactory
 		},
 		[DocOpenPageSettingCommand.id]: {
 			order: 12,
+			gridLayout: {
+				row: 1,
+				column: 4,
+				rowSpan: 2,
+				showLabel: true
+			},
 			menuItemFactory: PageSettingMenuItemFactory
 		}
 	},
 	[_univerjs_ui.RibbonInsertGroup.MEDIA]: {
 		[TABLE_MENU_ID]: {
 			order: 2,
+			gridLayout: {
+				row: 1,
+				column: 1,
+				rowSpan: 2,
+				showLabel: true
+			},
 			menuItemFactory: TableMenuFactory,
 			[DocCreateTableOperation.id]: {
 				order: 0,
@@ -13498,7 +13711,29 @@ const menuSchema = {
 		},
 		[HorizontalLineCommand.id]: {
 			order: 3,
+			gridLayout: {
+				row: 1,
+				column: 2,
+				rowSpan: 2,
+				showLabel: true
+			},
 			menuItemFactory: HorizontalLineFactory
+		},
+		[DOC_INSERT_EMOJI_MENU_ID]: {
+			order: 4,
+			gridLayout: {
+				row: 1,
+				column: 3
+			},
+			menuItemFactory: EmojiPickerMenuItemFactory
+		},
+		[DOC_INSERT_SYMBOL_MENU_ID]: {
+			order: 5,
+			gridLayout: {
+				row: 2,
+				column: 3
+			},
+			menuItemFactory: SymbolPickerMenuItemFactory
 		}
 	},
 	[_univerjs_ui.ContextMenuPosition.MAIN_AREA]: {
@@ -13856,6 +14091,13 @@ const menuSchema = {
 					order: 0,
 					menuItemFactory: InsertDefaultTableMenuFactory
 				}
+			},
+			format: {
+				order: 3,
+				[DocPasteCommand.id]: {
+					order: 0,
+					menuItemFactory: PasteMenuFactory
+				}
 			}
 		},
 		[DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID]: {
@@ -13985,8 +14227,12 @@ const menuSchema = {
 					order: 1,
 					menuItemFactory: CopyCurrentParagraphMenuItemFactory
 				},
-				[DeleteCurrentParagraphCommand.id]: {
+				[DocPasteCommand.id]: {
 					order: 2,
+					menuItemFactory: PasteMenuFactory
+				},
+				[DeleteCurrentParagraphCommand.id]: {
+					order: 3,
 					menuItemFactory: DeleteCurrentParagraphMenuItemFactory
 				}
 			},
@@ -15836,7 +16082,7 @@ function resolveDocsCustomBlockRenderViewport(params) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-ui";
-var version = "1.0.0-alpha.5";
+var version = "1.0.0-alpha.7";
 
 //#endregion
 //#region src/commands/commands/doc-paragraph-setting.command.ts
@@ -15914,19 +16160,27 @@ const DEFAULT_AVALIABLE_MENUS = [
 	SetInlineFormatSubscriptCommand.id,
 	SetInlineFormatSuperscriptCommand.id,
 	SetInlineFormatTextColorCommand.id,
-	SetInlineFormatTextBackgroundColorCommand.id
+	{
+		id: SetInlineFormatTextBackgroundColorCommand.id,
+		iconColor: "var(--univer-primary-600)"
+	}
 ];
 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);
+	const menuIds = avaliableMenus.map((config) => typeof config === "string" ? config : config.id);
+	for (const config of avaliableMenus) {
+		const menuId = typeof config === "string" ? config : config.id;
+		const item = flatMenus.find((item) => item.key === menuId);
+		if (item) menus.push(typeof config === "string" ? item : {
+			...item,
+			iconColor: config.iconColor
+		});
 	}
 	return {
 		menus,
-		extraMenus: floatToolbarMenus.filter((item) => item.item && !avaliableMenus.includes(item.key))
+		extraMenus: floatToolbarMenus.filter((item) => item.item && !menuIds.includes(item.key))
 	};
 }
 function FloatToolbar(props) {
@@ -15951,7 +16205,10 @@ function FloatToolbar(props) {
 		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)
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ToolbarItem, {
+					...groupItem.item,
+					iconColor: groupItem.iconColor
+				}, 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", {
@@ -16902,14 +17159,16 @@ 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, _univerInstanceService, _docSelectionRenderService) {
+	constructor(_context, _docSelectionManagerService, _docCanvasPopManagerService, _univerInstanceService, _docSelectionRenderService, _contextService) {
 		super();
 		this._context = _context;
 		this._docSelectionManagerService = _docSelectionManagerService;
 		this._docCanvasPopManagerService = _docCanvasPopManagerService;
 		this._univerInstanceService = _univerInstanceService;
 		this._docSelectionRenderService = _docSelectionRenderService;
+		this._contextService = _contextService;
 		_defineProperty(this, "_floatMenu", null);
+		_defineProperty(this, "_suppressed", false);
 		if ((0, _univerjs_core.isInternalEditorID)(this._context.unitId)) return;
 		this._initSelectionChange();
 		this.disposeWithMe(() => {
@@ -16922,6 +17181,11 @@ let DocFloatMenuService = class DocFloatMenuService extends _univerjs_core.Dispo
 	hideFloatMenu() {
 		this._hideFloatMenu();
 	}
+	setSuppressed(suppressed) {
+		if (this._suppressed === suppressed) return;
+		this._suppressed = suppressed;
+		if (suppressed) this._hideFloatMenu();
+	}
 	_initSelectionChange() {
 		this.disposeWithMe(this._docSelectionRenderService.onSelectionStart$.subscribe(() => {
 			this._hideFloatMenu();
@@ -16929,6 +17193,10 @@ let DocFloatMenuService = class DocFloatMenuService extends _univerjs_core.Dispo
 		this.disposeWithMe(this._docSelectionManagerService.textSelection$.subscribe((selection) => {
 			const { unitId, textRanges } = selection;
 			if (unitId !== this._context.unitId) return;
+			if (this._suppressed || this._contextService.getContextValue(_univerjs_core.FOCUSING_COMMON_DRAWINGS)) {
+				this._hideFloatMenu();
+				return;
+			}
 			const range = textRanges.length > 0 && textRanges.find((range) => !range.collapsed);
 			if (range) {
 				var _this$_floatMenu, _this$_floatMenu2;
@@ -16970,7 +17238,8 @@ 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_core.IUniverInstanceService)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(DocSelectionRenderService))
+	__decorateParam(4, (0, _univerjs_core.Inject)(DocSelectionRenderService)),
+	__decorateParam(5, _univerjs_core.IContextService)
 ], DocFloatMenuService);
 function isRangeInCodeBlock(documentDataModel, range) {
 	var _documentDataModel$ge3, _documentDataModel$ge4;
@@ -17797,6 +18066,7 @@ function getParagraphMenuBlockRangeCommandId(blockType) {
 }
 const PARAGRAPH_MENU_BLOCK_RANGE_COMMAND_IDS = new Set(PARAGRAPH_MENU_BLOCK_RANGE_TYPES.map((blockType) => getParagraphMenuBlockRangeCommandId(blockType)));
 const PARAGRAPH_MENU_SELECTION_COMMAND_IDS = /* @__PURE__ */ new Set([
+	DocPasteCommand.id,
 	BulletListCommand.id,
 	OrderListCommand.id,
 	CheckListCommand.id,
@@ -17890,6 +18160,7 @@ function getParagraphMenuHiddenItemIds(menuType, target, namedStyleType) {
 	if (menuType === "doc.menu.paragraph-t.insert") return [];
 	const hiddenIds = [...getParagraphMenuHiddenHeadingCommandIds(namedStyleType)];
 	const blockType = (target === null || target === void 0 ? void 0 : target.kind) === "blockRange" ? (_target$blockRange2 = target.blockRange) === null || _target$blockRange2 === void 0 ? void 0 : _target$blockRange2.blockType : void 0;
+	if ((target === null || target === void 0 ? void 0 : target.kind) !== "blockRange") hiddenIds.push(DocPasteCommand.id);
 	if (blockType === _univerjs_core.DocumentBlockRangeType.CALLOUT) hiddenIds.push(getParagraphMenuBlockRangeCommandId(_univerjs_core.DocumentBlockRangeType.CODE), getParagraphMenuBlockRangeCommandId(_univerjs_core.DocumentBlockRangeType.QUOTE));
 	else if (blockType === _univerjs_core.DocumentBlockRangeType.QUOTE || blockType === _univerjs_core.DocumentBlockRangeType.CODE) hiddenIds.push(getParagraphMenuBlockRangeCommandId(_univerjs_core.DocumentBlockRangeType.CALLOUT));
 	return hiddenIds;
@@ -18086,6 +18357,7 @@ function getParagraphFormattingRange(target, paragraph) {
 	return getTargetSelectionRange(target, paragraph);
 }
 function getParagraphMenuCommandTargetRange(commandId, targetRange, formattingRange) {
+	if (commandId === DocPasteCommand.id) return targetRange;
 	if (commandId && PARAGRAPH_MENU_SELECTION_COMMAND_IDS.has(commandId)) return formattingRange !== null && formattingRange !== void 0 ? formattingRange : targetRange;
 	return targetRange !== null && targetRange !== void 0 ? targetRange : formattingRange;
 }
@@ -18105,6 +18377,17 @@ function getBlockSelectionRange(target, paragraph) {
 		segmentId: paragraph === null || paragraph === void 0 ? void 0 : paragraph.segmentId
 	};
 }
+function getBlockRangeClipboardTargetRange(commandId, target, paragraph) {
+	if ((target === null || target === void 0 ? void 0 : target.kind) !== "blockRange") return null;
+	if (commandId === DocPasteCommand.id) return {
+		startOffset: target.moveRange.endOffset,
+		endOffset: target.moveRange.endOffset,
+		collapsed: true,
+		segmentId: paragraph === null || paragraph === void 0 ? void 0 : paragraph.segmentId
+	};
+	if (commandId === DocCopyCurrentParagraphCommand.id || commandId === DocCutCurrentParagraphCommand.id) return getBlockSelectionRange(target, paragraph !== null && paragraph !== void 0 ? paragraph : void 0);
+	return null;
+}
 function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	var _ref3, _ref4, _currentActiveTarget$, _doc$getBody$dataStre, _doc$getBody, _currentActiveTarget$2, _paragraphObj$paragra, _currentActiveTarget$3;
 	const [visible, setVisible] = (0, react.useState)(false);
@@ -18125,7 +18408,6 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const docClipboardService = (0, _univerjs_ui.useDependency)(IDocClipboardService);
 	const docContentInsertService = (0, _univerjs_ui.useDependency)(_univerjs_docs.DocContentInsertService);
 	const docBlockMoveValidatorService = (0, _univerjs_ui.useDependency)(_univerjs_docs.DocBlockMoveValidatorService);
-	const clipboardInterfaceService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IClipboardInterfaceService);
 	const layoutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ILayoutService);
 	const iconManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.IconManager);
 	const anchorRef = (0, react.useRef)(null);
@@ -18320,7 +18602,19 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		}
 		if ((latestTarget === null || latestTarget === void 0 ? void 0 : latestTarget.kind) === "blockRange") {
 			var _latestTarget$blockRa;
-			if (commandId === getParagraphMenuBlockRangeCommandId((_latestTarget$blockRa = latestTarget.blockRange) === null || _latestTarget$blockRa === void 0 ? void 0 : _latestTarget$blockRa.blockType)) {
+			const currentBlockCommandId = getParagraphMenuBlockRangeCommandId((_latestTarget$blockRa = latestTarget.blockRange) === null || _latestTarget$blockRa === void 0 ? void 0 : _latestTarget$blockRa.blockType);
+			const clipboardRange = getBlockRangeClipboardTargetRange(commandId, latestTarget, activeParagraphBound);
+			if (clipboardRange) {
+				if (commandId === DocCopyCurrentParagraphCommand.id) await docClipboardService.copy(_univerjs_core.SliceBodyType.copy, [clipboardRange]);
+				else if (commandId === DocCutCurrentParagraphCommand.id) await docClipboardService.cut([clipboardRange]);
+				else {
+					replaceSelection(clipboardRange);
+					await executeResolvedCommand(option, clipboardRange);
+				}
+				finishParagraphMenuCommand(docParagraphMenuService, layoutService, handleHideMenu);
+				return;
+			}
+			if (commandId === currentBlockCommandId) {
 				await unwrapActiveBlockRange();
 				finishParagraphMenuCommand(docParagraphMenuService, layoutService, handleHideMenu);
 				return;
@@ -18569,14 +18863,16 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 							}
 							if (commandId === DocPasteCommand.id) {
 								docSelectionManagerService.replaceTextRanges([afterTableRange], false);
-								const clipboardItems = await clipboardInterfaceService.read();
-								await docClipboardService.paste(clipboardItems);
+								await commandService.executeCommand(DocPasteCommand.id);
 								finishParagraphMenuCommand(docParagraphMenuService, layoutService, handleHideMenu);
 								return;
 							}
 							if (commandId === DocTableDeleteTableCommand.id) docSelectionManagerService.replaceTextRanges([tableRange], false);
 							else if (params.id === "doc.menu.insert-bellow" || commandId !== "doc.menu.insert-bellow") docSelectionManagerService.replaceTextRanges([afterTableRange], false);
-							if (commandService && commandId) commandService.executeCommand(commandId, commandParams);
+							if (commandService && commandId) commandService.executeCommand(commandId, commandId === DocTableDeleteTableCommand.id ? {
+								...commandParams,
+								targetRange: tableRange
+							} : commandParams);
 							finishParagraphMenuCommand(docParagraphMenuService, layoutService, handleHideMenu);
 							return;
 						}
@@ -18965,9 +19261,11 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 			RightInsertColumnDoubleIcon: _univerjs_icons.RightInsertColumnDoubleIcon,
 			RightJustifyingIcon: _univerjs_icons.RightJustifyingIcon,
 			ShapeIcon: _univerjs_icons.ShapeIcon,
+			SmileIcon: _univerjs_icons.SmileIcon,
 			StrikethroughIcon: _univerjs_icons.StrikethroughIcon,
 			SubscriptIcon: _univerjs_icons.SubscriptIcon,
 			SuperscriptIcon: _univerjs_icons.SuperscriptIcon,
+			SymbolsIcon: _univerjs_icons.SymbolsIcon,
 			TitleTypeIcon,
 			SubtitleTypeIcon,
 			TodoListDoubleIcon: _univerjs_icons.TodoListDoubleIcon,
@@ -21376,6 +21674,7 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends _univerjs_core.Plugin
 			ReplaceTextRunsCommand,
 			ReplaceSelectionCommand,
 			InsertCustomRangeCommand,
+			InsertSpecialCharacterCommand,
 			SetParagraphNamedStyleCommand,
 			QuickHeadingCommand,
 			DocCopyCurrentParagraphCommand,