refactor(sheets-ui): cell-editor & formula-editor

packages-experimental/debugger/src/commands/operations/sidebar.operation.ts

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
+import type { IAccessor, ICommand, Workbook } from '@univerjs/core';
 import { CommandType, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
 import { IEditorService } from '@univerjs/docs-ui';
 import { ISidebarService } from '@univerjs/ui';
-import type { IAccessor, ICommand, Workbook } from '@univerjs/core';
 import { TEST_EDITOR_CONTAINER_COMPONENT } from '../../views/test-editor/component-name';
 
 export interface IUIComponentCommandParams {
@@ -34,25 +34,17 @@ export const SidebarOperation: ICommand = {
         const unit = univerInstanceService.getCurrentUnitForType<Workbook>(UniverInstanceType.UNIVER_SHEET)!;
         switch (params.value) {
             case 'open':
-                editorService.setOperationSheetUnitId(unit.getUnitId());
-                editorService.setOperationSheetSubUnitId(unit.getActiveSheet()?.getSheetId());
                 sidebarService.open({
                     header: { title: 'Sidebar title' },
                     children: { label: TEST_EDITOR_CONTAINER_COMPONENT },
                     footer: { title: 'Sidebar Footer' },
                     onClose: () => {
-                        editorService.setOperationSheetUnitId(null);
-                        editorService.setOperationSheetSubUnitId(null);
-                        editorService.closeRangePrompt();
                     },
                 });
                 break;
 
             case 'close':
             default:
-                editorService.setOperationSheetUnitId(null);
-                editorService.setOperationSheetSubUnitId(null);
-                editorService.closeRangePrompt();
                 sidebarService.close();
                 break;
         }

packages-experimental/debugger/src/controllers/debugger.controller.ts

@@ -35,8 +35,8 @@ import { ImageDemo } from '../components/Image';
 
 // @ts-ignore
 import VueI18nIcon from '../components/VueI18nIcon.vue';
-import { TEST_EDITOR_CONTAINER_COMPONENT } from '../views/test-editor/component-name';
-import { TestEditorContainer } from '../views/test-editor/TestTextEditor';
+// import { TEST_EDITOR_CONTAINER_COMPONENT } from '../views/test-editor/component-name';
+// import { TestEditorContainer } from '../views/test-editor/TestTextEditor';
 import { RecordController } from './local-save/record.controller';
 import { menuSchema } from './menu.schema';
 
@@ -81,7 +81,7 @@ export class DebuggerController extends Disposable {
 
     private _initCustomComponents(): void {
         const componentManager = this._componentManager;
-        this.disposeWithMe(componentManager.register(TEST_EDITOR_CONTAINER_COMPONENT, TestEditorContainer));
+        // this.disposeWithMe(componentManager.register(TEST_EDITOR_CONTAINER_COMPONENT, TestEditorContainer));
         this.disposeWithMe(componentManager.register('VueI18nIcon', VueI18nIcon, {
             framework: 'vue3',
         }));

packages-experimental/uni-formula-ui/src/views/components/DocFormulaPopup.tsx

@@ -17,7 +17,7 @@
 import type { IDocumentData, Nullable } from '@univerjs/core';
 import type { IUniFormulaPopupInfo } from '../../services/formula-popup.service';
 import { BooleanNumber, createInternalEditorID, DEFAULT_EMPTY_DOCUMENT_VALUE, DocumentFlavor, HorizontalAlign, ICommandService, LocaleService, useDependency, VerticalAlign, WrapStrategy } from '@univerjs/core';
-import { TextEditor } from '@univerjs/docs-ui';
+// import { TextEditor } from '@univerjs/docs-ui';
 import { CheckMarkSingle, CloseSingle } from '@univerjs/icons';
 import { useObservable } from '@univerjs/ui';
 import clsx from 'clsx';
@@ -123,7 +123,7 @@ function DocFormula(props: { popupInfo: IUniFormulaPopupInfo }) {
 
     return (
         <div className={styles.docUiFormulaPopup} onMouseEnter={() => onHovered(true)} onMouseLeave={() => onHovered(false)}>
-            <TextEditor
+            {/* <TextEditor
                 id={UNI_FORMULA_EDITOR_ID}
                 className={clsx(styles.docUiFormulaPopupEditor, focused && styles.docUiFormulaPopupEditorActivated)}
                 placeholder={localeService.t('uni-formula.popup.placeholder')}
@@ -138,7 +138,7 @@ function DocFormula(props: { popupInfo: IUniFormulaPopupInfo }) {
                     setFocused(true);
                 }}
                 onBlur={() => setFocused(false)}
-            />
+            /> */}
             <div className={clsx(styles.formulaIcon, { [styles.formulaIconDisable]: !formulaString })}>
                 <span
                     className={clsx(styles.iconContainer, styles.iconContainerError)}

packages-experimental/uniui/src/views/uni-toolbar/UniFormulaBar.tsx

@@ -16,7 +16,7 @@
 
 import type { Nullable, Workbook } from '@univerjs/core';
 import { BooleanNumber, DEFAULT_EMPTY_DOCUMENT_VALUE, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DocumentFlavor, HorizontalAlign, IPermissionService, IUniverInstanceService, Rectangle, ThemeService, UniverInstanceType, useDependency, useObservable, VerticalAlign, WrapStrategy } from '@univerjs/core';
-import { TextEditor } from '@univerjs/docs-ui';
+// import { TextEditor } from '@univerjs/docs-ui';
 import { DeviceInputEventType } from '@univerjs/engine-render';
 import { CheckMarkSingle, CloseSingle, FxSingle } from '@univerjs/icons';
 import { RangeProtectionPermissionEditPoint, RangeProtectionRuleModel, SheetsSelectionsService, WorkbookEditablePermission, WorksheetEditPermission, WorksheetProtectionRuleModel, WorksheetSetCellValuePermission } from '@univerjs/sheets';
@@ -206,7 +206,7 @@ export function FormulaBar() {
 
     return (
         <div className={styles.uniFormulaBox}>
-            <TextEditor
+            {/* <TextEditor
                 id={DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY}
                 isSheetEditor
                 resizeCallBack={resizeCallBack}
@@ -215,7 +215,7 @@ export function FormulaBar() {
                 className={clsx(styles.uniFormulaInput, styles.formulaContent)}
                 snapshot={INITIAL_SNAPSHOT}
                 isSingle
-            />
+            /> */}
             <div className={clsx(styles.formulaIcon, { [styles.formulaIconDisable]: disable })}>
                 <span
                     className={clsx(styles.iconContainer, styles.iconContainerError)}

packages/core/src/docs/data-model/document-data-model.ts

@@ -14,13 +14,6 @@
  * limitations under the License.
  */
 
-import { BehaviorSubject } from 'rxjs';
-import { UnitModel, UniverInstanceType } from '../../common/unit';
-import { Tools } from '../../shared/tools';
-import { getEmptySnapshot } from './empty-snapshot';
-import { JSONX } from './json-x/json-x';
-import { PRESET_LIST_TYPE } from './preset-list-type';
-import { getBodySlice, SliceBodyType } from './text-x/utils';
 import type { Nullable } from '../../shared';
 import type {
     IDocumentBody,
@@ -32,6 +25,13 @@ import type {
 } from '../../types/interfaces/i-document-data';
 import type { IPaddingData } from '../../types/interfaces/i-style-data';
 import type { JSONXActions } from './json-x/json-x';
+import { BehaviorSubject } from 'rxjs';
+import { UnitModel, UniverInstanceType } from '../../common/unit';
+import { Tools } from '../../shared/tools';
+import { getEmptySnapshot } from './empty-snapshot';
+import { JSONX } from './json-x/json-x';
+import { PRESET_LIST_TYPE } from './preset-list-type';
+import { getBodySlice, SliceBodyType } from './text-x/utils';
 
 export const DEFAULT_DOC = {
     id: 'default_doc',
@@ -228,6 +228,7 @@ export class DocumentDataModel extends DocumentDataModelSimple {
     headerModelMap: Map<string, DocumentDataModel> = new Map();
 
     footerModelMap: Map<string, DocumentDataModel> = new Map();
+    change$ = new BehaviorSubject<number>(0);
 
     constructor(snapshot: Partial<IDocumentData>) {
         super(Tools.isEmptyObject(snapshot) ? getEmptySnapshot() : snapshot);
@@ -281,6 +282,7 @@ export class DocumentDataModel extends DocumentDataModelSimple {
 
         this.snapshot = { ...DEFAULT_DOC, ...snapshot };
         this._initializeHeaderFooterModel();
+        this.change$.next(this.change$.value + 1);
     }
 
     getSelfOrHeaderFooterModel(segmentId?: string) {
@@ -315,6 +317,7 @@ export class DocumentDataModel extends DocumentDataModelSimple {
             this._initializeHeaderFooterModel();
         }
 
+        this.change$.next(this.change$.value + 1);
         return this.snapshot;
     }
 

packages/core/src/docs/data-model/text-x/build-utils/index.ts

@@ -20,7 +20,7 @@ import { addDrawing } from './drawings';
 import { changeParagraphBulletNestLevel, setParagraphBullet, switchParagraphBullet, toggleChecklistParagraph } from './paragraph';
 import { fromPlainText, getPlainText, isEmptyDocument } from './parse';
 import { isSegmentIntersects, makeSelection, normalizeSelection } from './selection';
-import { addCustomRangeTextX, deleteCustomRangeTextX, deleteSelectionTextX, replaceSelectionTextX } from './text-x-utils';
+import { addCustomRangeTextX, deleteCustomRangeTextX, deleteSelectionTextX, replaceSelectionTextRuns, replaceSelectionTextX } from './text-x-utils';
 
 export class BuildTextUtils {
     static customRange = {
@@ -41,6 +41,7 @@ export class BuildTextUtils {
         makeSelection,
         normalizeSelection,
         delete: deleteSelectionTextX,
+        replaceTextRuns: replaceSelectionTextRuns,
     };
 
     static range = {

packages/core/src/docs/data-model/text-x/build-utils/text-x-utils.ts

@@ -16,15 +16,15 @@
 
 import type { IAccessor } from '@wendellhu/redi';
 import type { ITextRange, ITextRangeParam } from '../../../../sheets/typedef';
-import type { CustomRangeType, IDocumentBody } from '../../../../types/interfaces';
+import type { CustomRangeType, IDocumentBody, ITextRun } from '../../../../types/interfaces';
 import type { DocumentDataModel } from '../../document-data-model';
 import type { TextXAction } from '../action-types';
 import type { TextXSelection } from '../text-x';
 import { type Nullable, UpdateDocsAttributeType } from '../../../../shared';
 import { textDiff } from '../../../../shared/text-diff';
 import { TextXActionType } from '../action-types';
 import { TextX } from '../text-x';
-import { getBodySlice } from '../utils';
+import { getBodySlice, getTextRunSlice } from '../utils';
 import { excludePointsFromRange, getIntersectingCustomRanges, getSelectionForAddCustomRange } from './custom-range';
 
 export interface IDeleteCustomRangeParam {
@@ -301,3 +301,73 @@ export const replaceSelectionTextX = (params: IReplaceSelectionTextXParams) => {
     textX.push(...actions);
     return textX;
 };
+
+function isTextRunsEqual(textRuns: ITextRun[] | undefined, oldTextRuns: ITextRun[] | undefined) {
+    if (textRuns?.length === oldTextRuns?.length && textRuns?.every((textRun, index) => JSON.stringify(textRun) === JSON.stringify(oldTextRuns?.[index]))) {
+        return true;
+    }
+
+    return false;
+}
+
+export const replaceSelectionTextRuns = (params: IReplaceSelectionTextXParams) => {
+    const { selection, body: insertBody, doc } = params;
+    const segmentId = selection.segmentId;
+    const body = doc.getSelfOrHeaderFooterModel(segmentId)?.getBody();
+    if (!body) return false;
+
+    const oldBody = selection.collapsed ? null : getBodySlice(body, selection.startOffset, selection.endOffset);
+    const diffs = textDiff(oldBody ? oldBody.dataStream : '', insertBody.dataStream);
+    let cursor = 0;
+    const actions = diffs.map(([type, text]) => {
+        switch (type) {
+            // retain
+            case 0: {
+                const textRunsSlice = getTextRunSlice(insertBody, cursor, cursor + text.length, false);
+                const oldTextRunsSlice = getTextRunSlice(oldBody!, cursor, cursor + text.length, false);
+                const action: TextXAction = {
+                    t: TextXActionType.RETAIN,
+                    body: isTextRunsEqual(textRunsSlice, oldTextRunsSlice)
+                        ? undefined
+                        : {
+                            textRuns: textRunsSlice,
+                            dataStream: '',
+                        },
+                    len: text.length,
+                };
+                cursor += text.length;
+                return action;
+            }
+            // insert
+            case 1: {
+                const action: TextXAction = {
+                    t: TextXActionType.INSERT,
+                    body: getBodySlice(insertBody, cursor, cursor + text.length),
+                    len: text.length,
+                };
+                cursor += text.length;
+                return action;
+            }
+            // delete
+            default: {
+                const action: TextXAction = {
+                    t: TextXActionType.DELETE,
+                    len: text.length,
+                };
+                return action;
+            }
+        }
+    });
+
+    if (actions.every((action) => action.t === TextXActionType.RETAIN && !action.body)) {
+        return false;
+    }
+
+    const textX = new TextX();
+    textX.push({
+        t: TextXActionType.RETAIN,
+        len: selection.startOffset,
+    });
+    textX.push(...actions);
+    return textX;
+};