fix(browser): compatible qq browser

worktile · May 25, 2021 · 208cc1d · 208cc1d
1 parent 600e931
commit 208cc1d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/demo/polyfills.ts b/demo/polyfills.ts
@@ -56,6 +56,7 @@
  * Zone JS is required by default for Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'core-js/features/global-this';
 
 window['global'] = window as any;
 /***************************************************************************************************

diff --git a/docs/compatible.md b/docs/compatible.md
@@ -0,0 +1,16 @@
+## Safari
+IME input handle by beforeinput
+
+## Chrome
+IME input handle by compositionend
+
+## Edge
+IME input handle by compositionend
+
+## Firefox
+IME input handle by compositionend
+
+
+## QQ
+IME input handle by compositionend
+
diff --git a/packages/src/components/editable/editable.component.ts b/packages/src/components/editable/editable.component.ts
@@ -238,7 +238,7 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
         try {
             const { selection } = this.editor;
             const domSelection = window.getSelection();
-
+            
             if (this.isComposing || !domSelection || !AngularEditor.isFocused(this.editor)) {
                 return;
             }
@@ -366,7 +366,7 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
             this.renderer2.listen(target, eventName, (event: Event) => {
                 const beforeInputEvent = extractBeforeInputEvent(event.type, null, event, event.target);
                 if (beforeInputEvent) {
-                    this.onSyntheticBeforeInput(beforeInputEvent);
+                    this.onFallbackBeforeInput(beforeInputEvent);
                 }
                 listener(event);
             })
@@ -415,6 +415,7 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
             getTargetRanges(): DOMStaticRange[];
         }
     ) {
+        console.log('befinpuinput');
         const editor = this.editor;
         if (!this.readonly && hasEditableTarget(editor, event.target) && !this.isDOMEventHandled(event, this.beforeInput)) {
             timeDebug('with intent start beforeinput');
@@ -611,7 +612,7 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
             // aren't correct and never fire the "insertFromComposition"
             // type that we need. So instead, insert whenever a composition
             // ends since it will already have been committed to the DOM.
-            if (this.isComposing === true && !IS_SAFARI && !IS_CHROME_LEGACY && event.data) {
+            if (this.isComposing === true && !IS_SAFARI && event.data) {
                 preventInsertFromComposition(event);
                 Editor.insertText(this.editor, event.data);
             }
@@ -961,7 +962,7 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
-    private onSyntheticBeforeInput(event: BeforeInputEvent) {
+    private onFallbackBeforeInput(event: BeforeInputEvent) {
         // COMPAT: Certain browsers don't support the `beforeinput` event, so we
         // fall back to React's leaky polyfill instead just for it. It
         // only works for the `insertText` input type.
@@ -977,16 +978,17 @@ export class SlateEditableComponent implements OnInit, OnChanges, OnDestroy {
                 if (!Range.isCollapsed(this.editor.selection)) {
                     Editor.deleteFragment(this.editor);
                 }
-                preventInsertFromComposition(event.nativeEvent);
-
                 // block card
                 const domSelection = window.getSelection();
                 const isBlockCard = AngularEditor.hasCardTarget(domSelection.anchorNode) ||
                     AngularEditor.hasCardTarget(domSelection.focusNode);
                 if (isBlockCard) {
                     return;
                 }
-                Editor.insertText(this.editor, text);
+                // just handle non-composition input  
+                if (!this.isComposing) {
+                    Editor.insertText(this.editor, text);
+                }
             } catch (error) {
                 this.editor.onError({ code: SlateErrorCode.ToNativeSelectionError, nativeError: error });
             }