@univerjs/slides-ui 0.25.0 → 1.0.0-alpha.0

package/lib/es/locale/zh-HK.js

@@ -1,20 +1,5 @@
-//#region src/locale/en-US.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const locale$1 = { "slides-ui": {
+//#region src/locale/zh-HK.ts
+const locale = { "slides-ui": {
 	append: "Append Slide",
 	text: { insert: { title: "Insert Text" } },
 	shape: { insert: {
@@ -55,9 +40,5 @@ const locale$1 = { "slides-ui": {
 	panel: { fill: { title: "Fill Color" } }
 } };
 
-//#endregion
-//#region src/locale/zh-HK.ts
-const locale = locale$1;
-
 //#endregion
 export { locale as default };

package/lib/es/locale/zh-TW.js

@@ -1,20 +1,5 @@
-//#region src/locale/en-US.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const locale$1 = { "slides-ui": {
+//#region src/locale/zh-TW.ts
+const locale = { "slides-ui": {
 	append: "Append Slide",
 	text: { insert: { title: "Insert Text" } },
 	shape: { insert: {
@@ -55,9 +40,5 @@ const locale$1 = { "slides-ui": {
 	panel: { fill: { title: "Fill Color" } }
 } };
 
-//#endregion
-//#region src/locale/zh-TW.ts
-const locale = locale$1;
-
 //#endregion
 export { locale as default };

package/lib/index.css

@@ -204,10 +204,6 @@
   line-height: 1.25rem;
 }
 
-.univer-leading-8 {
-  line-height: 2rem;
-}
-
 .univer-text-gray-400 {
   color: var(--univer-gray-400);
 }

package/lib/index.js

@@ -1,17 +1,17 @@
-import { CommandType, DEFAULT_EMPTY_DOCUMENT_VALUE, Direction, Disposable, DisposableCollection, DocumentDataModel, DocumentFlavor, EDITOR_ACTIVATED, FOCUSING_COMMON_DRAWINGS, FOCUSING_EDITOR_BUT_HIDDEN, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, FORMULA_EDITOR_ACTIVATED, HorizontalAlign, ICommandService, IConfigService, IContextService, IUndoRedoService, IUniverInstanceService, Inject, Injector, LocaleService, Plugin, RxDisposable, UniverInstanceType, VerticalAlign, WrapStrategy, createIdentifier, createInternalEditorID, debounce, generateRandomId, getColorStyle, merge, mergeOverrideWithDependencies, toDisposable } from "@univerjs/core";
+import { CommandType, DEFAULT_EMPTY_DOCUMENT_VALUE, Direction, Disposable, DisposableCollection, DocumentDataModel, DocumentFlavor, EDITOR_ACTIVATED, FOCUSING_COMMON_DRAWINGS, FOCUSING_EDITOR_BUT_HIDDEN, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, FORMULA_EDITOR_ACTIVATED, HorizontalAlign, ICommandService, IConfigService, IContextService, IUndoRedoService, IUniverInstanceService, Inject, Injector, LocaleService, Plugin, RxDisposable, UniverInstanceType, VerticalAlign, WrapStrategy, createIdentifier, createInternalEditorID, createParagraphId, debounce, generateRandomId, getColorStyle, merge, mergeOverrideWithDependencies, toDisposable } from "@univerjs/core";
 import { DeviceInputEventType, FIX_ONE_PIXEL_BLUR_OFFSET, IRenderManagerService, ObjectType, Rect, Scene, ScrollBar, Slide, Viewport, convertTextRotation, fixLineWidthByScale, getCurrentTypeOfRenderer, pxToNum } from "@univerjs/engine-render";
 import { BasicShapes, ObjectProvider, PageElementType, SLIDE_KEY } from "@univerjs/slides";
 import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, IImageIoService, getImageSize } from "@univerjs/drawing";
-import { BuiltInUIPart, ComponentManager, DISABLE_AUTO_FOCUS_KEY, ICanvasPopupService, ILayoutService, ILocalFileService, IMenuManagerService, IShortcutService, ISidebarService, IUIPartsService, KeyCode, MenuItemType, MetaKeys, RibbonStartGroup, connectInjector, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { BuiltInUIPart, ComponentManager, DISABLE_AUTO_FOCUS_KEY, ICanvasPopupService, ILayoutService, ILocalFileService, IMenuManagerService, IShortcutService, ISidebarService, IUIPartsService, IconManager, KeyCode, MenuItemType, MetaKeys, RibbonStartGroup, connectInjector, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
 import { Button, ColorPicker, Dropdown, InputNumber, borderClassName, borderTopClassName, clsx, scrollbarClassName } from "@univerjs/design";
-import { AutofillDoubleIcon, BottomIcon, GraphIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, PaintBucketDoubleIcon, TextIcon, TopmostIcon } from "@univerjs/icons";
+import { AddImageIcon, AutofillDoubleIcon, BottomIcon, GraphIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, PaintBucketDoubleIcon, TextIcon, TopmostIcon } from "@univerjs/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_VIEW_KEY, DeleteLeftCommand, DocSelectionRenderService, IEditorService, MoveCursorOperation, MoveSelectionOperation, VIEWPORT_KEY } from "@univerjs/docs-ui";
 import { BehaviorSubject, Subject, filter, takeUntil } from "rxjs";
 import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation } from "@univerjs/docs";
 
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -22,7 +22,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -35,14 +35,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -53,7 +53,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -61,7 +61,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -524,7 +524,7 @@ const UpdateSlideElementOperation = {
 };
 
 //#endregion
-//#region src/components/panels/ArrangePanel.tsx
+//#region src/views/panels/ArrangePanel.tsx
 function ArrangePanel$1(props) {
 	const { pageId, unitId } = props;
 	const localeService = useDependency(LocaleService);
@@ -621,7 +621,7 @@ function ArrangePanel$1(props) {
 }
 
 //#endregion
-//#region src/components/panels/FillPanel.tsx
+//#region src/views/panels/FillPanel.tsx
 /**
 *
 * @param props
@@ -687,7 +687,7 @@ function ArrangePanel(props) {
 }
 
 //#endregion
-//#region src/components/panels/TransformPanel.tsx
+//#region src/views/panels/TransformPanel.tsx
 function TransformPanel(props) {
 	const { pageId, unitId } = props;
 	const localeService = useDependency(LocaleService);
@@ -836,7 +836,7 @@ function TransformPanel(props) {
 }
 
 //#endregion
-//#region src/components/sidebar/Sidebar.tsx
+//#region src/views/sidebar/Sidebar.tsx
 const COMPONENT_SLIDE_SIDEBAR = "COMPONENT_SLIDE_SIDEBAR";
 function RectSidebar() {
 	var _currentSlide$getActi, _univerInstanceServic, _page$scene;
@@ -1058,84 +1058,6 @@ const SetSlidePageThumbOperation = {
 	}
 };
 
-//#endregion
-//#region src/components/slide-bar/SlideBar.tsx
-/**
-* This components works as the root component of the left Sidebar of Slide.
-*/
-function SlideSideBar() {
-	var _currentSlide$getActi, _currentSlide$getActi2;
-	const univerInstanceService = useDependency(IUniverInstanceService);
-	const commandService = useDependency(ICommandService);
-	const renderManagerService = useDependency(IRenderManagerService);
-	const localeService = useDependency(LocaleService);
-	const slideBarRef = useRef(null);
-	const currentSlide = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SLIDE);
-	const pages = currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getPages();
-	const pageOrder = currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getPageOrder();
-	if (!pages || !pageOrder) return null;
-	const slideList = pageOrder.map((id) => pages[id]);
-	const [activatePageId, setActivatePageId] = useState((_currentSlide$getActi = currentSlide === null || currentSlide === void 0 || (_currentSlide$getActi2 = currentSlide.getActivePage()) === null || _currentSlide$getActi2 === void 0 ? void 0 : _currentSlide$getActi2.id) !== null && _currentSlide$getActi !== void 0 ? _currentSlide$getActi : null);
-	const divRefs = useMemo(() => slideList.map(() => createRef()), [slideList]);
-	useEffect(() => {
-		const subscriber = currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.activePage$.subscribe((page) => {
-			var _page$id;
-			const id = (_page$id = page === null || page === void 0 ? void 0 : page.id) !== null && _page$id !== void 0 ? _page$id : null;
-			id && setActivatePageId(id);
-		});
-		return () => {
-			subscriber === null || subscriber === void 0 || subscriber.unsubscribe();
-		};
-	}, []);
-	useEffect(() => {
-		divRefs.forEach((ref, index) => {
-			if (ref.current) {
-				var _renderManagerService;
-				const slide = slideList[index];
-				(_renderManagerService = renderManagerService.getRenderById(slide.id)) === null || _renderManagerService === void 0 || _renderManagerService.engine.setContainer(ref.current);
-			}
-		});
-		if (divRefs.length > 0) commandService.syncExecuteCommand(SetSlidePageThumbOperation.id, { unitId: currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getUnitId() });
-	}, [
-		divRefs,
-		slideList,
-		renderManagerService,
-		commandService,
-		currentSlide
-	]);
-	const activatePage = useCallback((page) => {
-		commandService.syncExecuteCommand(ActivateSlidePageOperation.id, {
-			id: page,
-			unitId: currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getUnitId()
-		});
-	}, [commandService, currentSlide]);
-	const handleAppendSlide = useCallback(() => {
-		commandService.syncExecuteCommand(AppendSlideOperation.id, { unitId: currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getUnitId() });
-	}, [commandService, currentSlide]);
-	return /* @__PURE__ */ jsx("aside", {
-		ref: slideBarRef,
-		className: clsx("univer-flex univer-h-full univer-w-64 univer-flex-col univer-overflow-y-auto univer-overflow-x-hidden", scrollbarClassName),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "univer-px-4",
-			children: [/* @__PURE__ */ jsx("header", {
-				className: "univer-flex univer-justify-center univer-pt-4",
-				children: /* @__PURE__ */ jsx("a", {
-					className: clsx("univer-box-border univer-block univer-h-8 univer-w-full univer-cursor-pointer univer-rounded-md univer-bg-white univer-text-center univer-text-sm univer-leading-8 univer-transition-colors", borderClassName),
-					onClick: handleAppendSlide,
-					children: localeService.t("slides-ui.append")
-				})
-			}), slideList.map((item, index) => /* @__PURE__ */ jsxs("div", {
-				className: clsx("univer-my-4 univer-flex univer-gap-2", { "[&>div]:univer-border-primary-600 [&>span]:univer-text-primary-600": item.id === activatePageId }),
-				onClick: () => activatePage(item.id),
-				children: [/* @__PURE__ */ jsx("span", { children: index + 1 }), /* @__PURE__ */ jsx("div", {
-					ref: divRefs[index],
-					className: clsx("univer-relative univer-box-border univer-h-32 univer-w-52 univer-bg-white hover:univer-border-primary-600", borderClassName)
-				})]
-			}, item.id))]
-		})
-	});
-}
-
 //#endregion
 //#region src/const.ts
 /**
@@ -1163,79 +1085,6 @@ const SetTextEditArrowOperation = {
 	handler: () => true
 };
 
-//#endregion
-//#region src/components/image-popup-menu/component-name.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const COMPONENT_SLIDE_IMAGE_POPUP_MENU = "COMPONENT_SLIDE_IMAGE_POPUP_MENU";
-
-//#endregion
-//#region src/components/image-popup-menu/ImagePopupMenu.tsx
-function SlideImagePopupMenu(props) {
-	var _props$popup;
-	const menuItems = (_props$popup = props.popup) === null || _props$popup === void 0 || (_props$popup = _props$popup.extraProps) === null || _props$popup === void 0 ? void 0 : _props$popup.menuItems;
-	if (!menuItems) return null;
-	const commandService = useDependency(ICommandService);
-	const localeService = useDependency(LocaleService);
-	const [visible, setVisible] = useState(false);
-	const [isHovered, setHovered] = useState(false);
-	const handleMouseEnter = () => {
-		setHovered(true);
-	};
-	const handleMouseLeave = () => {
-		setHovered(false);
-	};
-	const onVisibleChange = (visible) => {
-		setVisible(visible);
-	};
-	const handleClick = (item) => {
-		commandService.executeCommand(item.commandId, item.commandParams);
-		setVisible(false);
-	};
-	const showMore = visible || isHovered;
-	const availableMenu = menuItems.filter((item) => !item.disable);
-	return /* @__PURE__ */ jsx("div", {
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		children: /* @__PURE__ */ jsx(Dropdown, {
-			align: "start",
-			overlay: /* @__PURE__ */ jsx("ul", {
-				className: clsx("univer-m-0 univer-box-border univer-grid univer-list-none univer-items-center univer-gap-1 univer-rounded-lg univer-bg-white univer-p-1.5 univer-text-sm univer-shadow-lg", borderClassName),
-				children: availableMenu.map((item) => /* @__PURE__ */ jsx("li", {
-					className: "univer-relative univer-box-border univer-flex univer-h-8 univer-cursor-pointer univer-items-center univer-rounded univer-text-sm univer-transition-colors hover:univer-bg-gray-100",
-					onClick: () => handleClick(item),
-					children: /* @__PURE__ */ jsx("span", {
-						className: "univer-px-2 univer-py-1.5 univer-align-middle",
-						children: localeService.t(item.label)
-					})
-				}, item.index))
-			}),
-			open: visible,
-			onOpenChange: onVisibleChange,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: clsx("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", borderClassName, {
-					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
-					"univer-bg-white dark:!univer-bg-gray-900": !visible
-				}),
-				children: [/* @__PURE__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
-			})
-		})
-	});
-}
-
 //#endregion
 //#region src/menu/image.menu.ts
 const SLIDES_IMAGE_MENU_ID = "slide.menu.image";
@@ -1389,7 +1238,7 @@ function SlideEditorContainer() {
 	const editorService = useDependency(IEditorService);
 	const contextService = useDependency(IContextService);
 	const disableAutoFocus = useObservable(() => contextService.subscribeContextValue$(DISABLE_AUTO_FOCUS_KEY), false, void 0, [contextService, DISABLE_AUTO_FOCUS_KEY]);
-	`${DEFAULT_EMPTY_DOCUMENT_VALUE}`, DocumentFlavor.UNSPECIFIED;
+	`${DEFAULT_EMPTY_DOCUMENT_VALUE}`, createParagraphId(/* @__PURE__ */ new Set()), DocumentFlavor.UNSPECIFIED;
 	useEffect(() => {
 		slideEditorManagerService.state$.subscribe((param) => {
 			if (param == null) return;
@@ -1428,6 +1277,84 @@ function SlideEditorContainer() {
 	});
 }
 
+//#endregion
+//#region src/views/slide-bar/SlideBar.tsx
+/**
+* This components works as the root component of the left Sidebar of Slide.
+*/
+function SlideSideBar() {
+	var _currentSlide$getActi, _currentSlide$getActi2;
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	const commandService = useDependency(ICommandService);
+	const renderManagerService = useDependency(IRenderManagerService);
+	const localeService = useDependency(LocaleService);
+	const slideBarRef = useRef(null);
+	const currentSlide = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SLIDE);
+	const pages = currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getPages();
+	const pageOrder = currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getPageOrder();
+	if (!pages || !pageOrder) return null;
+	const slideList = pageOrder.map((id) => pages[id]);
+	const [activatePageId, setActivatePageId] = useState((_currentSlide$getActi = currentSlide === null || currentSlide === void 0 || (_currentSlide$getActi2 = currentSlide.getActivePage()) === null || _currentSlide$getActi2 === void 0 ? void 0 : _currentSlide$getActi2.id) !== null && _currentSlide$getActi !== void 0 ? _currentSlide$getActi : null);
+	const divRefs = useMemo(() => slideList.map(() => createRef()), [slideList]);
+	useEffect(() => {
+		const subscriber = currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.activePage$.subscribe((page) => {
+			var _page$id;
+			const id = (_page$id = page === null || page === void 0 ? void 0 : page.id) !== null && _page$id !== void 0 ? _page$id : null;
+			id && setActivatePageId(id);
+		});
+		return () => {
+			subscriber === null || subscriber === void 0 || subscriber.unsubscribe();
+		};
+	}, []);
+	useEffect(() => {
+		divRefs.forEach((ref, index) => {
+			if (ref.current) {
+				var _renderManagerService;
+				const slide = slideList[index];
+				(_renderManagerService = renderManagerService.getRenderById(slide.id)) === null || _renderManagerService === void 0 || _renderManagerService.engine.setContainer(ref.current);
+			}
+		});
+		if (divRefs.length > 0) commandService.syncExecuteCommand(SetSlidePageThumbOperation.id, { unitId: currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getUnitId() });
+	}, [
+		divRefs,
+		slideList,
+		renderManagerService,
+		commandService,
+		currentSlide
+	]);
+	const activatePage = useCallback((page) => {
+		commandService.syncExecuteCommand(ActivateSlidePageOperation.id, {
+			id: page,
+			unitId: currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getUnitId()
+		});
+	}, [commandService, currentSlide]);
+	const handleAppendSlide = useCallback(() => {
+		commandService.syncExecuteCommand(AppendSlideOperation.id, { unitId: currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getUnitId() });
+	}, [commandService, currentSlide]);
+	return /* @__PURE__ */ jsx("aside", {
+		ref: slideBarRef,
+		className: clsx("univer-flex univer-h-full univer-w-64 univer-flex-col univer-overflow-y-auto univer-overflow-x-hidden", scrollbarClassName),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "univer-px-4",
+			children: [/* @__PURE__ */ jsx("header", {
+				className: "univer-flex univer-justify-center univer-pt-4",
+				children: /* @__PURE__ */ jsx("a", {
+					className: clsx("univer-box-border univer-block univer-h-8 univer-w-full univer-cursor-pointer univer-rounded-md univer-bg-white univer-text-center univer-text-sm univer-transition-colors", borderClassName),
+					onClick: handleAppendSlide,
+					children: localeService.t("slides-ui.append")
+				})
+			}), slideList.map((item, index) => /* @__PURE__ */ jsxs("div", {
+				className: clsx("univer-my-4 univer-flex univer-gap-2", { "[&>div]:univer-border-primary-600 [&>span]:univer-text-primary-600": item.id === activatePageId }),
+				onClick: () => activatePage(item.id),
+				children: [/* @__PURE__ */ jsx("span", { children: index + 1 }), /* @__PURE__ */ jsx("div", {
+					ref: divRefs[index],
+					className: clsx("univer-relative univer-box-border univer-h-32 univer-w-52 univer-bg-white hover:univer-border-primary-600", borderClassName)
+				})]
+			}, item.id))]
+		})
+	});
+}
+
 //#endregion
 //#region src/controllers/shortcuts/utils.ts
 function whenEditorActivated(contextService) {
@@ -1492,7 +1419,7 @@ const EditorDeleteLeftShortcut = {
 };
 
 //#endregion
-//#region src/controllers/slide-ui.controller.ts
+//#region src/controllers/ui.controller.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.
 *
@@ -1509,16 +1436,14 @@ const EditorDeleteLeftShortcut = {
 * limitations under the License.
 */
 let SlidesUIController = class SlidesUIController extends Disposable {
-	constructor(_injector, _menuManagerService, _componentManager, _uiPartsService, _commandService, _shortcutService) {
+	constructor(_injector, _menuManagerService, _uiPartsService, _commandService, _shortcutService) {
 		super();
 		this._injector = _injector;
 		this._menuManagerService = _menuManagerService;
-		this._componentManager = _componentManager;
 		this._uiPartsService = _uiPartsService;
 		this._commandService = _commandService;
 		this._shortcutService = _shortcutService;
 		this._initCommands();
-		this._initCustomComponents();
 		this._initUIComponents();
 		this._initMenus();
 		this._initShortcuts();
@@ -1526,13 +1451,6 @@ let SlidesUIController = class SlidesUIController extends Disposable {
 	_initMenus() {
 		this._menuManagerService.mergeMenu(menuSchema);
 	}
-	_initCustomComponents() {
-		const componentManager = this._componentManager;
-		this.disposeWithMe(componentManager.register("TextIcon", TextIcon));
-		this.disposeWithMe(componentManager.register("GraphIcon", GraphIcon));
-		this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_IMAGE_POPUP_MENU, SlideImagePopupMenu));
-		this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_SIDEBAR, RectSidebar));
-	}
 	_initCommands() {
 		[
 			AppendSlideOperation,
@@ -1564,16 +1482,15 @@ let SlidesUIController = class SlidesUIController extends Disposable {
 SlidesUIController = __decorate([
 	__decorateParam(0, Inject(Injector)),
 	__decorateParam(1, IMenuManagerService),
-	__decorateParam(2, Inject(ComponentManager)),
-	__decorateParam(3, IUIPartsService),
-	__decorateParam(4, ICommandService),
-	__decorateParam(5, IShortcutService)
+	__decorateParam(2, IUIPartsService),
+	__decorateParam(3, ICommandService),
+	__decorateParam(4, IShortcutService)
 ], SlidesUIController);
 
 //#endregion
 //#region package.json
 var name = "@univerjs/slides-ui";
-var version = "0.25.0";
+var version = "1.0.0-alpha.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1581,6 +1498,119 @@ const SLIDES_UI_PLUGIN_CONFIG_KEY = "slides-ui.config";
 const configSymbol = Symbol(SLIDES_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
+//#endregion
+//#region src/views/image-popup-menu/component-name.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const COMPONENT_SLIDE_IMAGE_POPUP_MENU = "COMPONENT_SLIDE_IMAGE_POPUP_MENU";
+
+//#endregion
+//#region src/views/image-popup-menu/ImagePopupMenu.tsx
+function SlideImagePopupMenu(props) {
+	var _props$popup;
+	const menuItems = (_props$popup = props.popup) === null || _props$popup === void 0 || (_props$popup = _props$popup.extraProps) === null || _props$popup === void 0 ? void 0 : _props$popup.menuItems;
+	if (!menuItems) return null;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const [visible, setVisible] = useState(false);
+	const [isHovered, setHovered] = useState(false);
+	const handleMouseEnter = () => {
+		setHovered(true);
+	};
+	const handleMouseLeave = () => {
+		setHovered(false);
+	};
+	const onVisibleChange = (visible) => {
+		setVisible(visible);
+	};
+	const handleClick = (item) => {
+		commandService.executeCommand(item.commandId, item.commandParams);
+		setVisible(false);
+	};
+	const showMore = visible || isHovered;
+	const availableMenu = menuItems.filter((item) => !item.disable);
+	return /* @__PURE__ */ jsx("div", {
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: /* @__PURE__ */ jsx(Dropdown, {
+			align: "start",
+			overlay: /* @__PURE__ */ jsx("ul", {
+				className: clsx("univer-m-0 univer-box-border univer-grid univer-list-none univer-items-center univer-gap-1 univer-rounded-lg univer-bg-white univer-p-1.5 univer-text-sm univer-shadow-lg", borderClassName),
+				children: availableMenu.map((item) => /* @__PURE__ */ jsx("li", {
+					className: "univer-relative univer-box-border univer-flex univer-h-8 univer-cursor-pointer univer-items-center univer-rounded univer-text-sm univer-transition-colors hover:univer-bg-gray-100",
+					onClick: () => handleClick(item),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "univer-px-2 univer-py-1.5 univer-align-middle",
+						children: localeService.t(item.label)
+					})
+				}, item.index))
+			}),
+			open: visible,
+			onOpenChange: onVisibleChange,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", borderClassName, {
+					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
+					"univer-bg-white dark:!univer-bg-gray-900": !visible
+				}),
+				children: [/* @__PURE__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/controllers/components.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let ComponentsController = class ComponentsController extends Disposable {
+	constructor(_componentManager, _iconManager) {
+		super();
+		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
+		this._registerParts();
+		this._registerIcons();
+	}
+	_registerParts() {
+		const componentManager = this._componentManager;
+		this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_IMAGE_POPUP_MENU, SlideImagePopupMenu));
+		this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_SIDEBAR, RectSidebar));
+	}
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({
+			AddImageIcon,
+			TextIcon,
+			GraphIcon
+		}));
+	}
+};
+ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
+
 //#endregion
 //#region src/services/slide-editor-bridge.service.ts
 const ISlideEditorBridgeService = createIdentifier("univer.slide-editor-bridge.service");
@@ -2079,7 +2109,10 @@ let SlideEditingRenderController = class SlideEditingRenderController extends Di
 			body.textRuns[0].ed = 1;
 		} else body.textRuns = void 0;
 		if (body.paragraphs != null) if (body.paragraphs.length === 1) body.paragraphs[0].startIndex = 0;
-		else body.paragraphs = [{ startIndex: 0 }];
+		else body.paragraphs = [{
+			startIndex: 0,
+			paragraphId: createParagraphId(/* @__PURE__ */ new Set())
+		}];
 		if (body.sectionBreaks != null) body.sectionBreaks = void 0;
 		if (body.tables != null) body.tables = void 0;
 		if (body.customRanges != null) body.customRanges = void 0;
@@ -2630,6 +2663,8 @@ let UniverSlidesUIPlugin = class UniverSlidesUIPlugin extends Plugin {
 		this._configService.setConfig(SLIDES_UI_PLUGIN_CONFIG_KEY, rest);
 	}
 	onStarting() {
+		this._injector.add([ComponentsController]);
+		this._injector.get(ComponentsController);
 		mergeOverrideWithDependencies([
 			[SlideRenderService],
 			[ISlideEditorBridgeService, { useClass: SlideEditorBridgeService }],
@@ -2682,4 +2717,4 @@ UniverSlidesUIPlugin = __decorate([
 ], UniverSlidesUIPlugin);
 
 //#endregion
-export { ActivateSlidePageOperation, AppendSlideOperation, CanvasView, DeleteSlideElementOperation, ISlideEditorBridgeService, InsertSlideFloatImageCommand, InsertSlideShapeEllipseCommand, InsertSlideShapeEllipseOperation, InsertSlideShapeRectangleCommand, InsertSlideShapeRectangleOperation, SHAPE_MENU_ID, SLIDES_IMAGE_MENU_ID, SLIDE_EDITOR_ID, SetSlidePageThumbOperation, SlideAddTextCommand, SlideAddTextOperation, SlideCanvasPopMangerService, SlideEditorContainer, SlideSideBar, SlidesUIController, menuSchema as SlidesUIMenuSchema, UniverSlidesUIPlugin, UpdateSlideElementOperation };
+export { ActivateSlidePageOperation, AppendSlideOperation, CanvasView, DeleteSlideElementOperation, ISlideEditorBridgeService, InsertSlideFloatImageCommand, InsertSlideShapeEllipseCommand, InsertSlideShapeEllipseOperation, InsertSlideShapeRectangleCommand, InsertSlideShapeRectangleOperation, SHAPE_MENU_ID, SLIDES_IMAGE_MENU_ID, SLIDE_EDITOR_ID, SetSlidePageThumbOperation, SlideAddTextCommand, SlideAddTextOperation, SlideCanvasPopMangerService, SlidesUIController, menuSchema as SlidesUIMenuSchema, UniverSlidesUIPlugin, UpdateSlideElementOperation };

package/lib/locale/ru-RU.js

@@ -1,20 +1,5 @@
-//#region src/locale/en-US.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const locale$1 = { "slides-ui": {
+//#region src/locale/ru-RU.ts
+const locale = { "slides-ui": {
 	append: "Append Slide",
 	text: { insert: { title: "Insert Text" } },
 	shape: { insert: {
@@ -55,9 +40,5 @@ const locale$1 = { "slides-ui": {
 	panel: { fill: { title: "Fill Color" } }
 } };
 
-//#endregion
-//#region src/locale/ru-RU.ts
-const locale = locale$1;
-
 //#endregion
 export { locale as default };