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

package/lib/index.js

@@ -1,13 +1,13 @@
 import { BaselineOffset, BlockType, BooleanNumber, BuildTextUtils, COLORS, ColorKit, ColumnSeparatorType, CommandType, CustomRangeType, DEFAULT_DOCUMENT_PARAGRAPH_LINE_SPACING, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_ABOVE, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_BELOW, DEFAULT_EMPTY_DOCUMENT_VALUE, DEFAULT_STYLES, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOC_RANGE_TYPE, DashStyleType, DataStreamTreeNodeType, DataStreamTreeTokenType, DeleteDirection, DependentOn, Direction, Disposable, DisposableCollection, DocumentBlockRangeType, DocumentBlockType, DocumentFlavor, DrawingTypeEnum, EDITOR_ACTIVATED, FOCUSING_COMMENT_EDITOR, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR, HorizontalAlign, ICommandService, IConfigService, IConfirmService, IContextService, ILogService, IUndoRedoService, IUniverInstanceService, ImageSourceType, Inject, Injector, InterceptorManager, JSONX, LRUMap, LocaleService, MODERN_DOCUMENT_DEFAULT_MARGIN, MODERN_DOCUMENT_WIDTH, MemoryCursor, ModernDocumentWidthMode, NAMED_STYLE_MAP, NamedStyleType, ObjectRelativeFromH, ObjectRelativeFromV, Optional, PAGE_SIZE, PAPER_TYPES, PRESET_LIST_TYPE, PageOrientType, Plugin, PositionedObjectLayoutType, PresetListType, QuickListTypeMap, RANGE_DIRECTION, Rectangle, RedoCommand, RxDisposable, SHEET_EDITOR_UNITS, SectionType, SliceBodyType, SpacingRule, TableAlignmentType, TableRowHeightRule, TableSizeType, TableTextWrapType, TextX, TextXActionType, ThemeService, Tools, UndoCommand, UniverInstanceType, UpdateDocsAttributeType, VerticalAlign, checkForSubstrings, containsInteriorInsertionOffset, createIdentifier, createInterceptorKey, createInternalEditorID, createParagraphId, createSectionId, debounce, deepCompare, fromEventSubject, generateRandomId, getBlockRangeInterval, getBodySlice, getBodySliceForTextXAction, getCustomBlockIdsInSelections, getParagraphContentStartOffset, getParagraphContentStartOffsets, getPlainText, getRichTextEditPath, getSectionHeaderFooterReferenceKey, getTableRangeInterval, isCommentEditorID, isInternalEditorID, isSafeUrl, merge, mergeOverrideWithDependencies, normalizeBody, remove, resolveDocumentParagraphStyle, resolveSectionHeaderFooterReference, resolveSectionHeaderFooterReferences, sequenceExecuteAsync, skipParseTagNames, toDisposable, touchDependencies } from "@univerjs/core";
 import { CreateHeaderFooterCommand, DeleteTextCommand, DocBlockMoveValidatorService, DocContentInsertService, DocInterceptorService, DocSelectionManagerService, DocSkeletonManagerService, DocStateEmitService, EMBED_DOCS_CUSTOM_BLOCK_DEFAULT_COMPONENT_KEY, HeaderFooterType, IDocStateChangeInterceptorService, InsertTextCommand, RichTextEditingMutation, SetSectionHeaderFooterLinkCommand, SetTextSelectionsOperation, UniverDocsPlugin, UpdateDocumentSectionCommand, UpdateTextCommand, buildDocTransform, consumeContentInsertRange, createDocsCustomBlockInsertMutation, createDocsCustomBlockRemoveMutation, createEmbedDocsCustomBlockData, createInsertCustomBlockActions, createRemoveCustomBlockActions, createSectionColumnProperties, generateParagraphs, getTopLevelSectionBreaks, isSheetLikeDocsCustomBlockChildType, isSheetLikeDocsCustomBlockChildType as isSheetLikeDocsCustomBlockChildType$1, resolveDocsCustomBlockSize, resolveDocsCustomBlockSize as resolveDocsCustomBlockSize$1, shouldUseInlineTextSelectionForDocsCustomBlockDrawing } from "@univerjs/docs";
 import { CURSOR_TYPE, DeviceInputEventType, DocBackground, DocumentEditArea, DocumentSkeletonPageType, Documents, GlyphType, IRenderManagerService, Layer, LineType, Liquid, NORMAL_TEXT_SELECTION_PLUGIN_STYLE, PageLayoutType, Path, Rect, RegularPolygon, ScrollBar, ScrollTimer, Shape, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin, Vector2, Viewport, compareDocumentSkeletonNestedPagePathOrder, documentSkeletonLineIterator, documentSkeletonTableIterator, getColor, getDocsTableRenderViewport, getDocumentSkeletonColumnPagePathInfo, getDocumentSkeletonNestedPageOffset, getLastColumn, getNextWheelZoomRatio, getNumberUnitValue, getOffsetRectForDom, getPageFromPath, getParagraphByGlyph, getSystemHighlightColor, getTableIdAndSliceIndex, hasListGlyph, isFirstGlyph, isIndentByGlyph, parseDataStreamToTree, pixelToPt, ptToPixel, pxToNum } from "@univerjs/engine-render";
-import { BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, ComponentManager, ContextMenuGroup, ContextMenuPanel, ContextMenuPosition, CopyCommand, CutCommand, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, ICanvasPopupService, IClipboardInterfaceService, IContextMenuService, ILayoutService, IMenuManagerService, IShortcutService, ISidebarService, IUIPartsService, IconManager, KeyCode, MenuItemType, MenuManagerPosition, MetaKeys, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, RectPopup, RibbonInsertGroup, RibbonStartGroup, Slider, ToolbarItem, connectInjector, getMenuHiddenObservable, imageMimeTypeSet, useConfigValue, useDependency, useEvent, useObservable } from "@univerjs/ui";
-import { BehaviorSubject, Observable, Subject, animationFrameScheduler, combineLatest, debounceTime, distinctUntilChanged, filter, first, fromEvent, map, merge as merge$1, startWith, switchMap, take, takeUntil, throttleTime } from "rxjs";
+import { BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, ComponentManager, ContextMenuGroup, ContextMenuPanel, ContextMenuPosition, CopyCommand, CutCommand, EMOJI_PICKER_COMPONENT, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, ICanvasPopupService, IClipboardInterfaceService, IContextMenuService, ILayoutService, IMenuManagerService, IShortcutService, ISidebarService, IUIPartsService, IconManager, KeyCode, MenuItemType, MenuManagerPosition, MetaKeys, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, RectPopup, RibbonInsertGroup, RibbonStartGroup, SYMBOL_PICKER_COMPONENT, Slider, ToolbarItem, connectInjector, getMenuHiddenObservable, imageMimeTypeSet, useConfigValue, useDependency, useEvent, useObservable } from "@univerjs/ui";
+import { BehaviorSubject, Observable, Subject, animationFrameScheduler, combineLatest, debounceTime, distinctUntilChanged, filter, first, fromEvent, map, merge as merge$1, shareReplay, startWith, switchMap, take, takeUntil, throttleTime } from "rxjs";
 import { bufferTime, filter as filter$1, map as map$1 } from "rxjs/operators";
-import { Button, Checkbox, InputNumber, Select, Tooltip, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
+import { Button, Checkbox, InputNumber, Select, Tooltip, borderClassName, clsx, resetButtonClassName, scrollbarClassName } from "@univerjs/design";
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AddImageIcon, AlignTextBothIcon, BoldIcon, CatalogueIcon, CopyDoubleIcon, CutIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DeleteTableDoubleIcon, DocSettingIcon, FontColorDoubleIcon, GridIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, HeaderFooterIcon, HorizontallyIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, KeyboardIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LineIndentDecreaseIcon, LineIndentIncreaseIcon, MenuIcon, MoreLeftIcon, MoreRightIcon, NoColorDoubleIcon, OrderIcon, PaintBucketDoubleIcon, PasteSpecialDoubleIcon, ReduceDoubleIcon, ReduceIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, ShapeIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, TextTypeIcon, TodoListDoubleIcon, UnderlineIcon, UnorderIcon } from "@univerjs/icons";
+import { AddImageIcon, AlignTextBothIcon, BoldIcon, CatalogueIcon, CopyDoubleIcon, CutIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DeleteTableDoubleIcon, DocSettingIcon, FontColorDoubleIcon, GridIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, HeaderFooterIcon, HorizontallyIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, KeyboardIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LineIndentDecreaseIcon, LineIndentIncreaseIcon, MenuIcon, MoreLeftIcon, MoreRightIcon, NoColorDoubleIcon, OrderIcon, PaintBucketDoubleIcon, PasteSpecialDoubleIcon, ReduceDoubleIcon, ReduceIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, ShapeIcon, SmileIcon, StrikethroughIcon, SubscriptIcon, SuperscriptIcon, SymbolsIcon, TextTypeIcon, TodoListDoubleIcon, UnderlineIcon, UnorderIcon } from "@univerjs/icons";
 
 //#region src/basics/docs-view-key.ts
 /**
@@ -150,6 +150,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 === DataStreamTreeTokenType.BLOCK_END || previousToken === DataStreamTreeTokenType.TABLE_END || previousToken === DataStreamTreeTokenType.COLUMN_GROUP_END || nextToken === DataStreamTreeTokenType.BLOCK_START || nextToken === DataStreamTreeTokenType.TABLE_START || nextToken === DataStreamTreeTokenType.COLUMN_GROUP_START;
+}
 function hasParagraphInTable(paragraph, tables) {
 	return tables.some((table) => paragraph.startIndex > table.startIndex && paragraph.startIndex < table.endIndex);
 }
@@ -523,11 +528,6 @@ const BreakLineCommand = {
 		return Boolean(result);
 	}
 };
-function isTopLevelStructuralGap(dataStream, offset) {
-	const previousToken = dataStream[offset - 1];
-	const nextToken = dataStream[offset];
-	return previousToken === DataStreamTreeTokenType.BLOCK_END || previousToken === DataStreamTreeTokenType.TABLE_END || previousToken === DataStreamTreeTokenType.COLUMN_GROUP_END || nextToken === DataStreamTreeTokenType.BLOCK_START || nextToken === DataStreamTreeTokenType.TABLE_START || nextToken === DataStreamTreeTokenType.COLUMN_GROUP_START;
-}
 
 //#endregion
 //#region src/services/clipboard/doc-paste-mutation-adapter.service.ts
@@ -1081,7 +1081,7 @@ const InnerPasteCommand = {
 	id: "doc.command.inner-paste",
 	type: 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(ICommandService);
 		const undoRedoService = accessor.get(IUndoRedoService);
@@ -1115,6 +1115,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;
@@ -1124,6 +1125,16 @@ const InnerPasteCommand = {
 			const { startOffset, endOffset, collapsed } = selection;
 			const len = startOffset - memoryCursor.cursor;
 			const cloneBody = Tools.deepClone(body);
+			const blockRangeMappings = [];
+			const customBlockMappings = [];
+			if (hasBlockRange) cloneBody.blockRanges.forEach((targetBlockRange, index) => {
+				const sourceBlockRange = body.blockRanges[index];
+				targetBlockRange.blockId = generateRandomId(6);
+				blockRangeMappings.push({
+					sourceBlockRange,
+					targetBlockRange
+				});
+			});
 			if (hasTable) for (const t of cloneBody.tables) {
 				const { tableId: oldTableId } = t;
 				const tableId = generateRandomId(6);
@@ -1136,7 +1147,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 = generateRandomId(6);
@@ -1151,21 +1161,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);
@@ -1173,6 +1168,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 = [{
@@ -3728,6 +3739,7 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		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);
@@ -3739,7 +3751,7 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		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;
@@ -3750,6 +3762,7 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		return this._cut(ranges);
 	}
 	async paste(items) {
+		if (!(items === null || items === void 0 ? void 0 : items.length)) return this._memoryClipboardData ? this._paste(Tools.deepClone(this._memoryClipboardData)) : false;
 		const partDocData = await this._genDocDataFromClipboardItems(items);
 		return this._paste(partDocData);
 	}
@@ -3807,11 +3820,12 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		}
 	}
 	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 = normalizeBody(_body);
-		if (!((_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId())) return false;
+		const currentDocument = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
+		if (!currentDocument) return false;
 		this._clipboardHooks.forEach((hook) => {
 			if (hook.onBeforePaste) body = hook.onBeforePaste(body);
 		});
@@ -3824,6 +3838,8 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		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) {
@@ -3872,7 +3888,8 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 			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 = Tools.deepClone(internalDocData);
 	}
 	addClipboardHook(hook) {
 		this._clipboardHooks.push(hook);
@@ -4097,6 +4114,21 @@ DocClipboardService = __decorate([
 	__decorateParam(4, Inject(DocHtmlExportService)),
 	__decorateParam(5, Inject(DocSelectionManagerService))
 ], DocClipboardService);
+function endsAtDocumentBoundary(dataStream) {
+	const lastToken = dataStream[dataStream.length - 1];
+	return lastToken === DataStreamTreeTokenType.PARAGRAPH || lastToken === DataStreamTreeTokenType.SECTION_BREAK || lastToken === DataStreamTreeTokenType.BLOCK_END || lastToken === DataStreamTreeTokenType.TABLE_END || lastToken === 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 += DataStreamTreeTokenType.PARAGRAPH;
+	body.paragraphs = [...(_body$paragraphs3 = body.paragraphs) !== null && _body$paragraphs3 !== void 0 ? _body$paragraphs3 : [], {
+		startIndex: paragraphIndex,
+		paragraphId: createParagraphId(paragraphIds)
+	}];
+}
 function dataUrlToFile(dataUrl, fallbackName) {
 	const match = /^data:([^;,]+)(;base64)?,(.*)$/i.exec(dataUrl);
 	if (!match) throw new Error("[DocClipboardService] invalid image data url.");
@@ -4172,8 +4204,8 @@ const DocPasteCommand = {
 	preconditions: whenDocOrEditor,
 	handler: async (accessor) => {
 		const docClipboardService = accessor.get(IDocClipboardService);
-		const clipboardItems = await accessor.get(IClipboardInterfaceService).read();
-		if (clipboardItems.length === 0) return false;
+		const clipboardInterfaceService = accessor.get(IClipboardInterfaceService);
+		const clipboardItems = clipboardInterfaceService.supportClipboard ? await clipboardInterfaceService.read() : [];
 		return docClipboardService.paste(clipboardItems);
 	}
 };
@@ -6415,7 +6447,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) {
@@ -6448,8 +6480,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,
@@ -6464,7 +6496,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,
@@ -6474,13 +6506,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 !== DataStreamTreeTokenType.CUSTOM_BLOCK) return false;
-		return !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 ? !shouldUseInlineTextSelectionForDocsCustomBlockDrawing(drawing) : drawing.layoutType !== PositionedObjectLayoutType.INLINE;
 	}
 	_isValidPosition(startOrigin, endOrigin) {
 		const { segmentPage: startPage, pageType: startPageType } = startOrigin;
@@ -8181,8 +8214,16 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 	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;
@@ -8194,7 +8235,6 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		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;
@@ -9239,13 +9279,14 @@ const DocTableDeleteColumnsCommand = {
 const DocTableDeleteTableCommand = {
 	id: "doc.table.delete-table",
 	type: CommandType.COMMAND,
-	handler: async (accessor) => {
-		var _docDataModel$getSelf3;
+	handler: async (accessor, params) => {
+		var _params$targetRange, _docDataModel$getSelf3;
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
 		const univerInstanceService = accessor.get(IUniverInstanceService);
 		const commandService = accessor.get(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(UniverInstanceType.UNIVER_DOC);
@@ -10708,10 +10749,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,
@@ -11094,7 +11132,7 @@ function PageSettings(props) {
 				className: "univer-grid univer-grid-cols-3 univer-gap-2",
 				children: MODERN_WIDTH_OPTIONS.map((option) => /* @__PURE__ */ jsxs("button", {
 					type: "button",
-					className: 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: clsx(resetButtonClassName, 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__ */ jsx("span", { children: localeService.t(`docs-ui.page-settings.modern-width-${option}`) }), /* @__PURE__ */ jsxs("span", {
 						className: "univer-text-xs univer-font-normal univer-text-gray-400",
@@ -11585,6 +11623,54 @@ function DeleteTableMenuItemFactory(accessor) {
 	};
 }
 
+//#endregion
+//#region src/commands/commands/insert-special-character.command.ts
+const InsertSpecialCharacterCommand = {
+	id: "doc.command.insert-special-character",
+	type: 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(ICommandService);
+		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const docMenuStyleService = accessor.get(DocMenuStyleService);
+		const docDataModel = univerInstanceService.getCurrentUnitOfType(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(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
 /**
@@ -11749,16 +11835,22 @@ function getInsertTableHiddenObservable(accessor) {
 	const univerInstanceService = accessor.get(IUniverInstanceService);
 	const renderManagerService = accessor.get(IRenderManagerService);
 	return new 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) !== UniverInstanceType.UNIVER_DOC) return subscriber.next(true);
 			const currentRender = renderManagerService.getRenderById(unitId);
 			if (currentRender == null) return subscriber.next(true);
-			currentRender.with(DocSkeletonManagerService).getViewModel().editAreaChange$.subscribe((editArea) => {
+			editAreaSubscription = currentRender.with(DocSkeletonManagerService).getViewModel().editAreaChange$.subscribe((editArea) => {
 				subscriber.next(editArea === DocumentEditArea.HEADER || editArea === DocumentEditArea.FOOTER);
 			});
 		});
-		return () => subscription.unsubscribe();
+		return () => {
+			editAreaSubscription === null || editAreaSubscription === void 0 || editAreaSubscription.unsubscribe();
+			subscription.unsubscribe();
+		};
 	});
 }
 function disableMenuWhenHeaderFooterEditing(accessor) {
@@ -11824,9 +11916,8 @@ function getHeaderFooterMenuHiddenObservable(accessor) {
 			subscriber.next(documentFlavor !== DocumentFlavor.TRADITIONAL);
 		});
 		const docDataModel = univerInstanceService.getCurrentUnitOfType(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 !== DocumentFlavor.TRADITIONAL);
+		subscriber.next(docDataModel == null || documentFlavor !== DocumentFlavor.TRADITIONAL);
 		return () => {
 			subscription0.dispose();
 			subscription.unsubscribe();
@@ -11903,6 +11994,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: MenuItemType.SELECTOR,
+		icon: "SmileIcon",
+		tooltip: "ui.emojiPicker.emojis",
+		selectionsCommandId: InsertSpecialCharacterCommand.id,
+		selections: [{ label: {
+			name: EMOJI_PICKER_COMPONENT,
+			hoverable: false,
+			selectable: false,
+			props: { embedded: true }
+		} }],
+		disabled$: disableMenuWhenNoDocRange(accessor),
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
+	};
+}
+function SymbolPickerMenuItemFactory(accessor) {
+	return {
+		id: DOC_INSERT_SYMBOL_MENU_ID,
+		type: MenuItemType.SELECTOR,
+		icon: "SymbolsIcon",
+		tooltip: "ui.emojiPicker.symbols",
+		selectionsCommandId: InsertSpecialCharacterCommand.id,
+		selections: [{ label: {
+			name: SYMBOL_PICKER_COMPONENT,
+			hoverable: false,
+			selectable: false,
+			props: { embedded: true }
+		} }],
+		disabled$: disableMenuWhenNoDocRange(accessor),
+		hidden$: getMenuHiddenObservable(accessor, 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 : [];
@@ -12563,7 +12690,10 @@ function AlignMenuItemFactory(accessor) {
 		});
 		calc();
 		return disposable.dispose;
-	});
+	}).pipe(distinctUntilChanged(), shareReplay({
+		bufferSize: 1,
+		refCount: true
+	}));
 	return {
 		id: AlignOperationCommand.id,
 		type: MenuItemType.SELECTOR,
@@ -13409,42 +13539,87 @@ const menuSchema = {
 	[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,
@@ -13453,6 +13628,10 @@ const menuSchema = {
 		},
 		[SetInlineFormatTextBackgroundColorCommand.id]: {
 			order: 9,
+			gridLayout: {
+				row: 2,
+				column: 8
+			},
 			menuItemFactory: BackgroundColorSelectorMenuItemFactory,
 			[ResetInlineFormatTextBackgroundColorCommand.id]: {
 				order: 0,
@@ -13463,32 +13642,66 @@ const menuSchema = {
 	[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
 		}
 	},
 	[RibbonInsertGroup.MEDIA]: {
 		[TABLE_MENU_ID]: {
 			order: 2,
+			gridLayout: {
+				row: 1,
+				column: 1,
+				rowSpan: 2,
+				showLabel: true
+			},
 			menuItemFactory: TableMenuFactory,
 			[DocCreateTableOperation.id]: {
 				order: 0,
@@ -13497,7 +13710,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
 		}
 	},
 	[ContextMenuPosition.MAIN_AREA]: {
@@ -13855,6 +14090,13 @@ const menuSchema = {
 					order: 0,
 					menuItemFactory: InsertDefaultTableMenuFactory
 				}
+			},
+			format: {
+				order: 3,
+				[DocPasteCommand.id]: {
+					order: 0,
+					menuItemFactory: PasteMenuFactory
+				}
 			}
 		},
 		[DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID]: {
@@ -13984,8 +14226,12 @@ const menuSchema = {
 					order: 1,
 					menuItemFactory: CopyCurrentParagraphMenuItemFactory
 				},
-				[DeleteCurrentParagraphCommand.id]: {
+				[DocPasteCommand.id]: {
 					order: 2,
+					menuItemFactory: PasteMenuFactory
+				},
+				[DeleteCurrentParagraphCommand.id]: {
+					order: 3,
 					menuItemFactory: DeleteCurrentParagraphMenuItemFactory
 				}
 			},
@@ -15835,7 +16081,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
@@ -15913,19 +16159,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(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) {
@@ -15950,7 +16204,10 @@ function FloatToolbar(props) {
 		children: [
 			menus.map((groupItem) => groupItem.item && /* @__PURE__ */ jsx("div", {
 				className: "univer-flex univer-flex-nowrap univer-gap-2 univer-px-2",
-				children: /* @__PURE__ */ jsx(ToolbarItem, { ...groupItem.item }, groupItem.key)
+				children: /* @__PURE__ */ jsx(ToolbarItem, {
+					...groupItem.item,
+					iconColor: groupItem.iconColor
+				}, groupItem.key)
 			}, groupItem.key)),
 			extraMenus.length > 0 && /* @__PURE__ */ jsx("div", { className: "univer-my-1 univer-w-px univer-bg-gray-200 dark:univer-bg-gray-700" }),
 			extraMenus.map((groupItem) => groupItem.item && /* @__PURE__ */ jsx("div", {
@@ -16901,14 +17158,16 @@ function isInSameLine(startNodePosition, endNodePosition) {
 }
 const SKIP_SYMBOLS = [DataStreamTreeTokenType.CUSTOM_BLOCK, DataStreamTreeTokenType.PARAGRAPH];
 let DocFloatMenuService = class DocFloatMenuService extends 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 (isInternalEditorID(this._context.unitId)) return;
 		this._initSelectionChange();
 		this.disposeWithMe(() => {
@@ -16921,6 +17180,11 @@ let DocFloatMenuService = class DocFloatMenuService extends Disposable {
 	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();
@@ -16928,6 +17192,10 @@ let DocFloatMenuService = class DocFloatMenuService extends Disposable {
 		this.disposeWithMe(this._docSelectionManagerService.textSelection$.subscribe((selection) => {
 			const { unitId, textRanges } = selection;
 			if (unitId !== this._context.unitId) return;
+			if (this._suppressed || this._contextService.getContextValue(FOCUSING_COMMON_DRAWINGS)) {
+				this._hideFloatMenu();
+				return;
+			}
 			const range = textRanges.length > 0 && textRanges.find((range) => !range.collapsed);
 			if (range) {
 				var _this$_floatMenu, _this$_floatMenu2;
@@ -16969,7 +17237,8 @@ DocFloatMenuService = __decorate([
 	__decorateParam(1, Inject(DocSelectionManagerService)),
 	__decorateParam(2, Inject(DocCanvasPopManagerService)),
 	__decorateParam(3, Inject(IUniverInstanceService)),
-	__decorateParam(4, Inject(DocSelectionRenderService))
+	__decorateParam(4, Inject(DocSelectionRenderService)),
+	__decorateParam(5, IContextService)
 ], DocFloatMenuService);
 function isRangeInCodeBlock(documentDataModel, range) {
 	var _documentDataModel$ge3, _documentDataModel$ge4;
@@ -17796,6 +18065,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,
@@ -17889,6 +18159,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 === DocumentBlockRangeType.CALLOUT) hiddenIds.push(getParagraphMenuBlockRangeCommandId(DocumentBlockRangeType.CODE), getParagraphMenuBlockRangeCommandId(DocumentBlockRangeType.QUOTE));
 	else if (blockType === DocumentBlockRangeType.QUOTE || blockType === DocumentBlockRangeType.CODE) hiddenIds.push(getParagraphMenuBlockRangeCommandId(DocumentBlockRangeType.CALLOUT));
 	return hiddenIds;
@@ -18085,6 +18356,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;
 }
@@ -18104,6 +18376,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] = useState(false);
@@ -18124,7 +18407,6 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const docClipboardService = useDependency(IDocClipboardService);
 	const docContentInsertService = useDependency(DocContentInsertService);
 	const docBlockMoveValidatorService = useDependency(DocBlockMoveValidatorService);
-	const clipboardInterfaceService = useDependency(IClipboardInterfaceService);
 	const layoutService = useDependency(ILayoutService);
 	const iconManager = useDependency(IconManager);
 	const anchorRef = useRef(null);
@@ -18319,7 +18601,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(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;
@@ -18568,14 +18862,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;
 						}
@@ -18964,9 +19260,11 @@ let ComponentsController = class ComponentsController extends Disposable {
 			RightInsertColumnDoubleIcon,
 			RightJustifyingIcon,
 			ShapeIcon,
+			SmileIcon,
 			StrikethroughIcon,
 			SubscriptIcon,
 			SuperscriptIcon,
+			SymbolsIcon,
 			TitleTypeIcon,
 			SubtitleTypeIcon,
 			TodoListDoubleIcon,
@@ -21375,6 +21673,7 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends Plugin {
 			ReplaceTextRunsCommand,
 			ReplaceSelectionCommand,
 			InsertCustomRangeCommand,
+			InsertSpecialCharacterCommand,
 			SetParagraphNamedStyleCommand,
 			QuickHeadingCommand,
 			DocCopyCurrentParagraphCommand,