@univerjs/docs-quick-insert-ui 0.25.0 → 1.0.0-alpha.0

package/lib/es/index.js

@@ -1,17 +1,17 @@
 import { CommandType, DeleteDirection, DependentOn, Direction, Disposable, DisposableCollection, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, LocaleService, Plugin, RANGE_DIRECTION, UniverInstanceType, generateRandomId, merge, toDisposable } from "@univerjs/core";
-import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation } from "@univerjs/docs";
-import { BulletListCommand, CutContentCommand, DeleteCommand, DeleteLeftCommand, DocCanvasPopManagerService, DocCreateTableOperation, DocEventManagerService, HorizontalLineCommand, IMEInputCommand, InsertCommand, MoveCursorOperation, NodePositionConvertToCursor, OrderListCommand, getAnchorBounding } from "@univerjs/docs-ui";
-import { ComponentManager, ILayoutService, IShortcutService, KeyCode, UniverUIPlugin, useDependency, useEvent, useObservable } from "@univerjs/ui";
+import { DeleteTextCommand, DocSelectionManagerService, DocSkeletonManagerService, InsertTextCommand, RichTextEditingMutation } from "@univerjs/docs";
+import { BulletListCommand, CutContentCommand, DeleteLeftCommand, DocCanvasPopManagerService, DocCreateTableOperation, DocEventManagerService, HorizontalLineCommand, IMEInputCommand, MoveCursorOperation, NodePositionConvertToCursor, OrderListCommand, getAnchorBounding } from "@univerjs/docs-ui";
+import { ComponentManager, ILayoutService, IShortcutService, IconManager, KeyCode, UniverUIPlugin, useDependency, useEvent, useObservable } from "@univerjs/ui";
 import { IRenderManagerService, ptToPixel } from "@univerjs/engine-render";
 import { BehaviorSubject, combineLatest, distinctUntilChanged, map, of, tap } from "rxjs";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip, borderBottomClassName, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
 import { InsertDocImageCommand, UniverDocsDrawingUIPlugin } from "@univerjs/docs-drawing-ui";
-import { DividerIcon, IncreaseIcon, TextIcon } from "@univerjs/icons";
 import { UniverDocsDrawingPlugin } from "@univerjs/docs-drawing";
 import { UniverDrawingPlugin } from "@univerjs/drawing";
 import { UniverDrawingUIPlugin } from "@univerjs/drawing-ui";
+import { DividerIcon, IncreaseIcon, TextIcon } from "@univerjs/icons";
 
 //#region src/commands/commands/doc-quick-insert.command.ts
 const DeleteSearchKeyCommand = {
@@ -98,26 +98,33 @@ function getQuickInsertMenuLeafCount(menus) {
 	return flattenMenuItems(menus).length;
 }
 function QuickInsertMenu(props) {
-	const { menus, focusedMenuIndex, focusedMenuRef, menuNodeMapRef, componentManager, onFocusedMenuIndexChange, onSelect } = props;
+	const { menus, focusedMenuIndex, onFocusedMenuIndexChange, onFocusedMenuChange, onSelect } = props;
+	const iconManager = useDependency(IconManager);
 	const flatMenus = useMemo(() => flattenMenuItems(menus), [menus]);
+	const menuNodeMapRef = useRef(/* @__PURE__ */ new Map());
 	useEffect(() => {
 		var _flatMenus$focusedMen, _menuNodeMapRef$curre;
 		const focusedMenu = Number.isNaN(focusedMenuIndex) ? null : (_flatMenus$focusedMen = flatMenus[focusedMenuIndex]) !== null && _flatMenus$focusedMen !== void 0 ? _flatMenus$focusedMen : null;
-		focusedMenuRef.current = focusedMenu;
+		onFocusedMenuChange(focusedMenu);
 		if (!focusedMenu) return;
 		(_menuNodeMapRef$curre = menuNodeMapRef.current.get(focusedMenu.id)) === null || _menuNodeMapRef$curre === void 0 || _menuNodeMapRef$curre.scrollIntoView({ block: "nearest" });
 	}, [
 		flatMenus,
 		focusedMenuIndex,
-		focusedMenuRef,
-		menuNodeMapRef
+		onFocusedMenuChange
 	]);
+	useEffect(() => {
+		const menuNodeMap = menuNodeMapRef.current;
+		return () => {
+			menuNodeMap.clear();
+		};
+	}, []);
 	const itemIndexRef = useRef(0);
 	itemIndexRef.current = 0;
 	function renderMenus(currentMenus) {
 		return currentMenus.map((menu, index) => {
 			const iconKey = menu.icon;
-			const Icon = iconKey ? componentManager.get(iconKey) : null;
+			const Icon = iconKey ? iconManager.get(iconKey) : null;
 			if (isMenuGroup(menu)) return /* @__PURE__ */ jsxs("div", {
 				className: clsx("univer-grid univer-gap-1 univer-py-1", index !== currentMenus.length - 1 && borderBottomClassName),
 				children: [/* @__PURE__ */ jsxs("div", {
@@ -178,21 +185,6 @@ function QuickInsertMenu(props) {
 
 //#endregion
 //#region src/views/QuickInsertPlaceholder.tsx
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
 const QuickInsertPlaceholderComponentKey = "docs.quick.insert.placeholder";
 const QuickInsertPlaceholder = () => {
 	return /* @__PURE__ */ jsx("div", {
@@ -264,6 +256,9 @@ const QuickInsertPopup = () => {
 		docQuickInsertPopupService.emitMenuSelected(menu);
 		commandService.executeCommand(CloseQuickInsertPopupOperation.id);
 	};
+	const handleFocusedMenuChange = useCallback((menu) => {
+		focusedMenuRef.current = menu;
+	}, []);
 	useEffect(() => {
 		/** Use up or down to navigate the focused menu instead of moving the cursor in documents. */
 		const disposableCollection = new DisposableCollection();
@@ -338,12 +333,6 @@ const QuickInsertPopup = () => {
 	useEffect(() => {
 		setFocusedMenuIndex(0);
 	}, [filteredMenus]);
-	const menuNodeMapRef = useRef(/* @__PURE__ */ new Map());
-	useEffect(() => {
-		return () => {
-			menuNodeMapRef.current.clear();
-		};
-	}, []);
 	const hasMenus = filteredMenus.length > 0;
 	const Placeholder = (currentPopup === null || currentPopup === void 0 ? void 0 : currentPopup.popup.Placeholder) || componentManager.get(QuickInsertPlaceholder.componentKey);
 	return /* @__PURE__ */ jsx("div", {
@@ -351,10 +340,8 @@ const QuickInsertPopup = () => {
 		children: hasMenus ? /* @__PURE__ */ jsx(QuickInsertMenu, {
 			menus: filteredMenus,
 			focusedMenuIndex,
-			focusedMenuRef,
-			menuNodeMapRef,
-			componentManager,
 			onFocusedMenuIndexChange: setFocusedMenuIndex,
+			onFocusedMenuChange: handleFocusedMenuChange,
 			onSelect: handleMenuSelect
 		}) : Placeholder && /* @__PURE__ */ jsx(Placeholder, {})
 	});
@@ -362,7 +349,7 @@ const QuickInsertPopup = () => {
 QuickInsertPopup.componentKey = "docs.quick.insert.popup";
 
 //#endregion
-//#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) {
@@ -373,7 +360,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];
@@ -386,14 +373,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,
@@ -404,7 +391,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);
@@ -412,7 +399,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);
@@ -730,7 +717,7 @@ const builtInMenus = [{
 		imageMenu
 	]
 }];
-const builtInMenuCommandIds = new Set([
+const builtInMenuCommandIds = /* @__PURE__ */ new Set([
 	numberedListMenu.id,
 	bulletedListMenu.id,
 	dividerMenu.id,
@@ -762,7 +749,7 @@ let DocQuickInsertTriggerController = class DocQuickInsertTriggerController exte
 			const { _docQuickInsertPopupService, _textSelectionManagerService, _commandService } = this;
 			const documentDataModel = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 			if (documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getDisabled()) return;
-			if (commandInfo.id === InsertCommand.id) {
+			if (commandInfo.id === InsertTextCommand.id) {
 				const params = commandInfo.params;
 				if (_docQuickInsertPopupService.editPopup) {
 					_docQuickInsertPopupService.setInputOffset({
@@ -804,7 +791,7 @@ let DocQuickInsertTriggerController = class DocQuickInsertTriggerController exte
 					});
 				}
 			}
-			if (commandInfo.id === DeleteCommand.id) {
+			if (commandInfo.id === DeleteTextCommand.id) {
 				const params = commandInfo.params;
 				if (_docQuickInsertPopupService.editPopup && params.direction === DeleteDirection.LEFT) {
 					var _params$len;
@@ -841,6 +828,53 @@ DocQuickInsertTriggerController = __decorate([
 	__decorateParam(4, Inject(IUniverInstanceService))
 ], DocQuickInsertTriggerController);
 
+//#endregion
+//#region src/controllers/ui.controller.ts
+let DocQuickInsertUIController = class DocQuickInsertUIController extends Disposable {
+	constructor(_commandService, _docQuickInsertPopupService) {
+		super();
+		this._commandService = _commandService;
+		this._docQuickInsertPopupService = _docQuickInsertPopupService;
+		this._initCommands();
+		this._initComponents();
+		this._initMenus();
+	}
+	_initCommands() {
+		[
+			DeleteSearchKeyCommand,
+			ShowQuickInsertPopupOperation,
+			CloseQuickInsertPopupOperation
+		].forEach((operation) => {
+			this.disposeWithMe(this._commandService.registerCommand(operation));
+		});
+	}
+	_initComponents() {
+		[{
+			keyword: "/",
+			menus$: of(builtInMenus),
+			preconditions: (params) => {
+				var _startNodePosition;
+				return ((_startNodePosition = params.range.startNodePosition) === null || _startNodePosition === void 0 ? void 0 : _startNodePosition.glyph) === 0;
+			}
+		}].forEach((popup) => {
+			this.disposeWithMe(this._docQuickInsertPopupService.registerPopup(popup));
+		});
+	}
+	_initMenus() {}
+};
+DocQuickInsertUIController = __decorate([__decorateParam(0, ICommandService), __decorateParam(1, Inject(DocQuickInsertPopupService))], DocQuickInsertUIController);
+
+//#endregion
+//#region package.json
+var name = "@univerjs/docs-quick-insert-ui";
+var version = "1.0.0-alpha.0";
+
+//#endregion
+//#region src/config/config.ts
+const DOCS_QUICK_INSERT_UI_PLUGIN_CONFIG_KEY = "docs-quick-insert-ui.config";
+const configSymbol = Symbol(DOCS_QUICK_INSERT_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {};
+
 //#endregion
 //#region src/menu/doc-quick-insert-menu.controller.ts
 let DocQuickInsertMenuController = class DocQuickInsertMenuController extends Disposable {
@@ -947,66 +981,48 @@ const QuickInsertButton = ({ className = "" }) => {
 QuickInsertButton.componentKey = QuickInsertButtonComponentKey;
 
 //#endregion
-//#region src/controllers/doc-quick-insert-ui.controller.ts
-let DocQuickInsertUIController = class DocQuickInsertUIController extends Disposable {
-	constructor(_commandService, _docQuickInsertPopupService, _componentManager) {
+//#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._commandService = _commandService;
-		this._docQuickInsertPopupService = _docQuickInsertPopupService;
 		this._componentManager = _componentManager;
-		this._initCommands();
-		this._initComponents();
-		this._initMenus();
+		this._iconManager = _iconManager;
+		this._registerIcons();
+		this._registerComponents();
 	}
-	_initCommands() {
-		[
-			DeleteSearchKeyCommand,
-			ShowQuickInsertPopupOperation,
-			CloseQuickInsertPopupOperation
-		].forEach((operation) => {
-			this.disposeWithMe(this._commandService.registerCommand(operation));
-		});
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({
+			DividerIcon,
+			TextIcon
+		}));
 	}
-	_initComponents() {
+	_registerComponents() {
 		[
 			[QuickInsertPopup.componentKey, QuickInsertPopup],
 			[KeywordInputPlaceholder.componentKey, KeywordInputPlaceholder],
 			[QuickInsertPlaceholder.componentKey, QuickInsertPlaceholder],
-			[DividerIcon.displayName, DividerIcon],
-			[TextIcon.displayName, TextIcon],
 			[QuickInsertButton.componentKey, QuickInsertButton]
 		].forEach(([key, comp]) => {
 			if (key) this.disposeWithMe(this._componentManager.register(key, comp));
 		});
-		[{
-			keyword: "/",
-			menus$: of(builtInMenus),
-			preconditions: (params) => {
-				var _startNodePosition;
-				return ((_startNodePosition = params.range.startNodePosition) === null || _startNodePosition === void 0 ? void 0 : _startNodePosition.glyph) === 0;
-			}
-		}].forEach((popup) => {
-			this.disposeWithMe(this._docQuickInsertPopupService.registerPopup(popup));
-		});
 	}
-	_initMenus() {}
 };
-DocQuickInsertUIController = __decorate([
-	__decorateParam(0, ICommandService),
-	__decorateParam(1, Inject(DocQuickInsertPopupService)),
-	__decorateParam(2, Inject(ComponentManager))
-], DocQuickInsertUIController);
-
-//#endregion
-//#region package.json
-var name = "@univerjs/docs-quick-insert-ui";
-var version = "0.25.0";
-
-//#endregion
-//#region src/config/config.ts
-const DOCS_QUICK_INSERT_UI_PLUGIN_CONFIG_KEY = "docs-quick-insert-ui.config";
-const configSymbol = Symbol(DOCS_QUICK_INSERT_UI_PLUGIN_CONFIG_KEY);
-const defaultPluginConfig = {};
+ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
 
 //#endregion
 //#region src/plugin.ts
@@ -1022,6 +1038,8 @@ let UniverDocsQuickInsertUIPlugin = class UniverDocsQuickInsertUIPlugin extends
 		this._configService.setConfig(DOCS_QUICK_INSERT_UI_PLUGIN_CONFIG_KEY, rest);
 	}
 	onStarting() {
+		this._injector.add([ComponentsController]);
+		this._injector.get(ComponentsController);
 		[
 			[DocQuickInsertUIController],
 			[DocQuickInsertTriggerController],