fix(editor): optimize editor focus (#1616)

* fix(editor): optimize editor focus * fix(editor): firefox and regex * fix(sheet): old version safari * fix: regexp --------- Co-authored-by: jocs <ransixi@gmail.com>
dream-num · Mar 16, 2024 · e4231eb · e4231eb
1 parent 7ba32af
commit e4231eb
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 15 deletions.
diff --git a/examples/esbuild.config.mjs b/examples/esbuild.config.mjs
@@ -25,6 +25,7 @@ function monacoBuildTask() {
         entryPoints: monacoEditorEntryPoints.map((entry) => `./node_modules/monaco-editor/esm/${entry}`),
         bundle: true,
         color: true,
+        target: 'chrome70',
         format: 'iife',
         outbase: './node_modules/monaco-editor/esm/',
         outdir: './local',
@@ -42,6 +43,7 @@ const ctx = await esbuild[args.watch ? 'context' : 'build']({
     loader: { '.svg': 'file', '.ttf': 'file' },
     sourcemap: args.watch,
     minify: !args.watch,
+    target: 'chrome70',
     plugins: [
         copyPlugin({
             assets: {

diff --git a/packages/core/src/shared/common.ts b/packages/core/src/shared/common.ts
@@ -253,7 +253,7 @@ export function handleStyleToString(style: IStyleData, isCell: boolean = false)
                 if (style.ul?.s) {
                     // If there are existing lines, add new lines
                     if (str.indexOf('text-decoration-line') > -1) {
-                        str = str.replace(/(?<=text-decoration-line:.*)\b(?=;)/g, ' underline');
+                        str = str.replace(/(text-decoration-line:\s*[^;]+)(?=;)/g, (_, p1) => `${p1} underline`);
                     } else {
                         str += 'text-decoration-line: underline; ';
                     }
@@ -271,7 +271,7 @@ export function handleStyleToString(style: IStyleData, isCell: boolean = false)
             () => {
                 if (style.st?.s) {
                     if (str.indexOf('text-decoration-line') > -1) {
-                        str = str.replace(/(?<=text-decoration-line:.*)\b(?=;)/g, ' line-through');
+                        str = str.replace(/(text-decoration-line:\s*[^;]+)(?=;)/g, (_, p1) => `${p1} line-through`);
                     } else {
                         str += 'text-decoration-line: line-through; ';
                     }
@@ -289,7 +289,7 @@ export function handleStyleToString(style: IStyleData, isCell: boolean = false)
             () => {
                 if (style.ol?.s) {
                     if (str.indexOf('text-decoration-line') > -1) {
-                        str = str.replace(/(?<=text-decoration-line:.*)\b(?=;)/g, ' overline');
+                        str = str.replace(/(text-decoration-line:\s*[^;]+)(?=;)/g, (_, p1) => `${p1} overline`);
                     } else {
                         str += 'text-decoration-line: overline; ';
                     }

diff --git a/packages/docs-ui/src/controllers/text-selection.controller.ts b/packages/docs-ui/src/controllers/text-selection.controller.ts
@@ -121,22 +121,23 @@ export class TextSelectionController extends Disposable {
                         this._currentUniverService.setCurrentUniverDocInstance(unitId);
                     }
 
+                    this._textSelectionRenderManager.eventTrigger(evt);
+
+                    const { offsetX, offsetY } = evt;
+
                     if (this._editorService.getEditor(unitId)) {
-                        /**
-                         * To accommodate focus switching between different editors.
-                         * Since the editor for Univer is canvas-based,
-                         * it primarily relies on focus and cannot use the focus event.
-                         * Our editor's focus monitoring is based on PointerDown.
-                         * The order of occurrence is such that PointerDown comes first.
-                         * Translate the above text into English.
-                         */
+                         /**
+                          * To accommodate focus switching between different editors.
+                          * Since the editor for Univer is canvas-based,
+                          * it primarily relies on focus and cannot use the focus event.
+                          * Our editor's focus monitoring is based on PointerDown.
+                          * The order of occurrence is such that PointerDown comes first.
+                          * Translate the above text into English.
+                          */
                         setTimeout(() => {
-                            this._textSelectionRenderManager.eventTrigger(evt);
-
                             this._setEditorFocus(unitId);
+                            this._textSelectionRenderManager.setCursorManually(offsetX, offsetY);
                         }, 0);
-                    } else {
-                        this._textSelectionRenderManager.eventTrigger(evt);
                     }
 
                     if (evt.button !== 2) {

diff --git a/packages/engine-render/src/components/docs/text-selection/text-selection-render-manager.ts b/packages/engine-render/src/components/docs/text-selection/text-selection-render-manager.ts
@@ -165,6 +165,8 @@ export interface ITextSelectionRenderManager {
     handleTripleClick(evt: IPointerEvent | IMouseEvent): void;
 
     eventTrigger(evt: IPointerEvent | IMouseEvent): void;
+
+    setCursorManually(evtOffsetX: number, evtOffsetY: number): void;
 }
 
 export interface IEditorInputConfig {
@@ -442,6 +444,26 @@ export class TextSelectionRenderManager extends RxDisposable implements ITextSel
         this.addTextRanges(textRanges, false);
     }
 
+    setCursorManually(evtOffsetX: number, evtOffsetY: number) {
+        const startNode = this._findNodeByCoord(evtOffsetX, evtOffsetY);
+
+        const position = this._getNodePosition(startNode);
+
+        if (position == null) {
+            this._removeAllTextRanges();
+
+            return;
+        }
+
+        if (startNode?.node.streamType === DataStreamTreeTokenType.PARAGRAPH) {
+            position.isBack = true;
+        }
+
+        this._updateTextRangeAnchorPosition(position);
+
+        this._activeSelectionRefresh();
+    }
+
     // Handle pointer down.
     eventTrigger(evt: IPointerEvent | IMouseEvent) {
         if (!this._scene || !this._isSelectionEnabled) {