feat(uni-formula): support slide

examples/src/main.tsx

@@ -53,7 +53,7 @@ function Examples() {
         title: '📚 Docs Uniscript',
         href: './docs-uniscript/',
     }, {
-        title: '🌌 Universe',
+        title: '🌌 Uni Mode',
         href: './uni/',
     }, {
         title: '📱 Mobile',

packages-experimental/uni-formula-ui/package.json

@@ -62,8 +62,11 @@
         "@univerjs/core": "workspace:*",
         "@univerjs/docs": "workspace:*",
         "@univerjs/docs-ui": "workspace:*",
+        "@univerjs/engine-render": "workspace:*",
         "@univerjs/rpc": "workspace:*",
         "@univerjs/sheets-formula": "workspace:*",
+        "@univerjs/slides": "workspace:*",
+        "@univerjs/slides-ui": "workspace:*",
         "@univerjs/ui": "workspace:*",
         "@univerjs/uni-formula": "workspace:*",
         "clsx": ">=2.0.0",
@@ -75,10 +78,13 @@
         "@univerjs/design": "workspace:*",
         "@univerjs/docs": "workspace:*",
         "@univerjs/docs-ui": "workspace:*",
+        "@univerjs/engine-render": "workspace:*",
         "@univerjs/icons": "^0.1.72",
         "@univerjs/rpc": "workspace:*",
         "@univerjs/shared": "workspace:*",
         "@univerjs/sheets-formula": "workspace:*",
+        "@univerjs/slides": "workspace:*",
+        "@univerjs/slides-ui": "workspace:*",
         "@univerjs/ui": "workspace:*",
         "@univerjs/uni-formula": "workspace:*",
         "clsx": "^2.1.1",

packages-experimental/uni-formula-ui/src/commands/command.ts → packages-experimental/uni-formula-ui/src/commands/commands/doc.command.ts

@@ -22,8 +22,9 @@ import { AddDocUniFormulaMutation, RemoveDocUniFormulaMutation, UpdateDocUniForm
 
 export interface IAddDocUniFormulaCommandParams {
     unitId: string;
-    f: string;
     startIndex: number;
+
+    f: string;
 }
 
 export const AddDocUniFormulaCommand: ICommand<IAddDocUniFormulaCommandParams> = {

packages-experimental/uni-formula-ui/src/commands/commands/slide.command.ts

@@ -0,0 +1,75 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * 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.
+ */
+
+import type { ICommand, IDocumentBody } from '@univerjs/core';
+import { CommandType, CustomRangeType, generateRandomId, ICommandService, LocaleService, makeCustomRangeStream } from '@univerjs/core';
+import { SLIDE_EDITOR_ID } from '@univerjs/slides-ui';
+import { makeSelection, replaceSelectionFactory } from '@univerjs/docs';
+import { SlideUIFormulaCacheService } from '../../services/slide-ui-formula-cache.service';
+
+export interface IAddSlideUniFormulaCommandParams {
+    unitId: string;
+    pageId: string;
+    elementId: string;
+    startIndex: number;
+
+    f: string;
+}
+
+export const AddSlideUniFormulaCommand: ICommand<IAddSlideUniFormulaCommandParams> = {
+    type: CommandType.COMMAND,
+    id: 'slide.command.add-slide-uni-formula',
+    async handler(accessor, params: IAddSlideUniFormulaCommandParams) {
+        const { startIndex } = params;
+
+        const commandService = accessor.get(ICommandService);
+        const slideUiFormulaCacheService = accessor.get(SlideUIFormulaCacheService);
+        const localeService = accessor.get(LocaleService);
+        const placeholder = localeService.t('uni-formula.command.stream-placeholder');
+
+        // TODO: use placeholder here?
+        const rangeId = generateRandomId();
+        const dataStream = makeCustomRangeStream(placeholder);
+        const body: IDocumentBody = {
+            dataStream,
+            customRanges: [{
+                startIndex: 0,
+                endIndex: dataStream.length - 1,
+                rangeId,
+                rangeType: CustomRangeType.UNI_FORMULA,
+                wholeEntity: true,
+            }],
+        };
+
+        const insertCustomRangeMutation = replaceSelectionFactory(accessor, {
+            unitId: SLIDE_EDITOR_ID,
+            body,
+            selection: makeSelection(startIndex, startIndex + 1),
+        });
+
+        // NOTE: For slides, the process to update a element's content is pretty different from docs.
+        // Since the text editor in slides is temporary, we don't need to update the content of the element when user
+        // has not confirmed the change. So we don't need to add a mutation to update resources here.
+        // We will do that when user confirms the change.
+
+        if (insertCustomRangeMutation) {
+            slideUiFormulaCacheService.writeCache(rangeId, params);
+            return commandService.executeCommand(insertCustomRangeMutation.id, insertCustomRangeMutation.params, { onlyLocal: true });
+        }
+
+        return false;
+    },
+};

packages-experimental/uni-formula-ui/src/commands/operations/operation.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * 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.
+ */
+
+import type { ICommand, IOperation } from '@univerjs/core';
+import { CommandType } from '@univerjs/core';
+import { UniFormulaPopupService } from '../../services/formula-popup.service';
+
+export interface IDocPopupPosition {
+    rangeId?: string;
+}
+
+export interface ISlidePopupPosition extends IDocPopupPosition {
+    pageId: string;
+    elementId: string;
+}
+
+export type IPopupPosition = IDocPopupPosition | ISlidePopupPosition;
+
+export function isSlidePosition(position?: IPopupPosition): position is ISlidePopupPosition {
+    return !!position && 'pageId' in position;
+}
+
+export interface IShowDocFormulaPopupOperationParams {
+    unitId: string;
+    startIndex: number;
+    type?: 'new' | 'existing';
+    position: IDocPopupPosition;
+}
+
+export interface IShowSlideFormulaPopupOPerationParams extends IShowDocFormulaPopupOperationParams {
+    position: ISlidePopupPosition;
+}
+
+export type IShowFormulaPopupOperationParams = IShowDocFormulaPopupOperationParams | IShowSlideFormulaPopupOPerationParams;
+
+export const ShowFormulaPopupOperation: IOperation<IShowFormulaPopupOperationParams> = {
+    id: 'uni-formula.operation.show-formula-popup',
+    type: CommandType.OPERATION,
+    handler(accessor, params: IShowFormulaPopupOperationParams) {
+        const { type = 'new', startIndex, unitId, position } = params;
+        const { rangeId } = position;
+        const formulaPopupService = accessor.get(UniFormulaPopupService);
+
+        if (type === 'existing' && !rangeId) return false;
+        return formulaPopupService.showDocPopup(unitId, startIndex, type, position);
+    },
+};
+
+export const CloseFormulaPopupOperation: IOperation = {
+    id: 'uni-formula.operation.close-formula-popup',
+    type: CommandType.OPERATION,
+    handler(accessor) {
+        const docFormulaPopupService = accessor.get(UniFormulaPopupService);
+        return docFormulaPopupService.closePopup(true);
+    },
+};
+
+export const ConfirmFormulaPopupCommand: ICommand = {
+    id: 'uni-formula.operation.confirm-formula-popup',
+    type: CommandType.COMMAND,
+    handler(accessor) {
+        const docFormulaPopupService = accessor.get(UniFormulaPopupService);
+        return docFormulaPopupService.confirmPopup();
+    },
+};

packages-experimental/uni-formula-ui/src/controllers/formula-input.controller.ts → packages-experimental/uni-formula-ui/src/controllers/doc-formula-input.controller.ts

@@ -17,53 +17,45 @@
 import { CustomRangeType, Disposable, ICommandService, ILogService, Inject, IUniverInstanceService, LifecycleStages, OnLifecycle, UniverInstanceType } from '@univerjs/core';
 import type { IInsertCommandParams } from '@univerjs/docs';
 import { DeleteLeftCommand, InsertCommand, MoveCursorOperation, TextSelectionManagerService } from '@univerjs/docs';
-import { ComponentManager, IEditorService } from '@univerjs/ui';
+import { IEditorService } from '@univerjs/ui';
 import { DocHoverManagerService } from '@univerjs/docs-ui';
 
-import { AddDocUniFormulaCommand, RemoveDocUniFormulaCommand, UpdateDocUniFormulaCommand } from '../commands/command';
-import type { IShowFormulaPopupOperationParams } from '../commands/operation';
-import { CloseFormulaPopupOperation, ConfirmFormulaPopupCommand, ShowFormulaPopupOperation } from '../commands/operation';
-import { DocFormulaPopup, DOCS_UNI_FORMULA_EDITOR_UNIT_ID_KEY } from '../views/components/DocFormulaPopup';
-import { DocFormulaPopupService } from '../services/formula-popup.service';
+import { AddDocUniFormulaCommand, RemoveDocUniFormulaCommand, UpdateDocUniFormulaCommand } from '../commands/commands/doc.command';
+import type { IShowFormulaPopupOperationParams } from '../commands/operations/operation';
+import { CloseFormulaPopupOperation, ShowFormulaPopupOperation } from '../commands/operations/operation';
+import { UNI_FORMULA_EDITOR_ID } from '../views/components/DocFormulaPopup';
+import { UniFormulaPopupService } from '../services/formula-popup.service';
 
 const FORMULA_INPUT_TRIGGER_CHAR = '=';
 
-@OnLifecycle(LifecycleStages.Steady, DocUniFormulaController)
-export class DocUniFormulaController extends Disposable {
+@OnLifecycle(LifecycleStages.Steady, DocUniFormulaInputController)
+export class DocUniFormulaInputController extends Disposable {
     constructor(
         @ICommandService private readonly _commandService: ICommandService,
         @IUniverInstanceService private readonly _instanceSrv: IUniverInstanceService,
         @IEditorService private readonly _editorService: IEditorService,
         @ILogService private readonly _logService: ILogService,
-        @Inject(DocHoverManagerService) private readonly _docHoverManagerService: DocHoverManagerService,
-        @Inject(DocFormulaPopupService) private readonly _docFormulaPopupService: DocFormulaPopupService,
-        @Inject(TextSelectionManagerService) private readonly _textSelectionManagerService: TextSelectionManagerService,
-        @Inject(ComponentManager) private readonly _componentManager: ComponentManager
+        @Inject(DocHoverManagerService) private readonly _docHoverManagerSrv: DocHoverManagerService,
+        @Inject(UniFormulaPopupService) private readonly _formulaPopupSrv: UniFormulaPopupService,
+        @Inject(TextSelectionManagerService) private readonly _textSelectionManagerService: TextSelectionManagerService
     ) {
         super();
 
         this._initKeyboardListeners();
-        this._initComponents();
         this._initCommands();
         this._initHoverListener();
     }
 
     private _initCommands(): void {
         [
-            ShowFormulaPopupOperation,
-            CloseFormulaPopupOperation,
-            ConfirmFormulaPopupCommand,
             AddDocUniFormulaCommand,
             RemoveDocUniFormulaCommand,
             UpdateDocUniFormulaCommand,
         ].forEach((command) => this._commandService.registerCommand(command));
     }
 
-    private _initComponents(): void {
-        this.disposeWithMe(this._componentManager.register(DocFormulaPopup.componentKey, DocFormulaPopup));
-    }
-
     private _initKeyboardListeners(): void {
+        // TODO@wzhudev: only need to listen when a doc unit is focused.
         // The formula input trigger works not exactly the same as Mention.
         this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
             const currentEditor = this._editorService.getFocusEditor();
@@ -72,7 +64,7 @@ export class DocUniFormulaController extends Disposable {
             const { id } = commandInfo;
 
             if (
-                currentEditor?.editorUnitId === DOCS_UNI_FORMULA_EDITOR_UNIT_ID_KEY ||
+                currentEditor?.editorUnitId === UNI_FORMULA_EDITOR_ID ||
                 focusedUnit?.type !== UniverInstanceType.UNIVER_DOC
             ) {
                 return;
@@ -85,8 +77,9 @@ export class DocUniFormulaController extends Disposable {
                     this._showPopup({
                         startIndex: activeRange.startOffset! - 1,
                         unitId: focusedUnit.getUnitId(),
+                        position: {},
                     });
-                } else if (this._docFormulaPopupService.popupInfo) {
+                } else if (this._formulaPopupSrv.popupInfo) {
                     this._closePopup();
                 }
             }
@@ -98,13 +91,13 @@ export class DocUniFormulaController extends Disposable {
     }
 
     private _initHoverListener(): void {
-        this.disposeWithMe(this._docHoverManagerService.activeCustomRanges$.subscribe((customRanges) => {
+        this.disposeWithMe(this._docHoverManagerSrv.activeCustomRanges$.subscribe((customRanges) => {
             const focusedUnit = this._instanceSrv.getFocusedUnit();
 
             if (
                 !focusedUnit ||
-                this._docFormulaPopupService.popupInfo?.type === 'new' ||
-                this._docFormulaPopupService.popupLocked
+                this._formulaPopupSrv.popupInfo?.type === 'new' ||
+                this._formulaPopupSrv.popupLocked
             ) {
                 return;
             }
@@ -116,7 +109,7 @@ export class DocUniFormulaController extends Disposable {
                 this._showPopup({
                     startIndex,
                     unitId: focusedUnit.getUnitId(),
-                    rangeId,
+                    position: { rangeId },
                     type: 'existing',
                 });
             } else {
@@ -126,7 +119,7 @@ export class DocUniFormulaController extends Disposable {
             }
         }));
 
-        this.disposeWithMe(this._docFormulaPopupService.popupHovered$.subscribe((hovered) => {
+        this.disposeWithMe(this._formulaPopupSrv.popupHovered$.subscribe((hovered) => {
             if (hovered) {
                 this._removeTimer();
             }
@@ -151,7 +144,7 @@ export class DocUniFormulaController extends Disposable {
 
     private _closePopupTimer: number | null = null;
     private _closePopup(timeout: number = 0): void {
-        if (!this._docFormulaPopupService.popupInfo) {
+        if (!this._formulaPopupSrv.popupInfo) {
             return;
         }