From 8cf2b19d3db2b48b840641c05156d1b3a0297b2b Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Sat, 23 Sep 2023 22:14:19 +0800
Subject: [PATCH] feat: typing on ios devices #286

---
 src/editor/assets/css/index.css      | 1 +
 src/editor/core/event/CanvasEvent.ts | 9 +++++++++
 src/editor/utils/ua.ts               | 3 +++
 3 files changed, 13 insertions(+)

diff --git a/src/editor/assets/css/index.css b/src/editor/assets/css/index.css
index 01ff679..f7c7ad6 100644
--- a/src/editor/assets/css/index.css
+++ b/src/editor/assets/css/index.css
@@ -27,6 +27,7 @@
   overflow: hidden;
   color: transparent;
   user-select: none;
+  caret-color: transparent;
   background-color: transparent;
 }
 
diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts
index 95e49d0..deff491 100644
--- a/src/editor/core/event/CanvasEvent.ts
+++ b/src/editor/core/event/CanvasEvent.ts
@@ -18,6 +18,7 @@ import { drop } from './handlers/drop'
 import click from './handlers/click'
 import composition from './handlers/composition'
 import drag from './handlers/drag'
+import { isIOS } from '../../utils/ua'
 
 export interface ICompositionInfo {
   elementList: IElement[]
@@ -67,6 +68,7 @@ export class CanvasEvent {
   }
 
   public register() {
+    this.pageContainer.addEventListener('click', this.click.bind(this))
     this.pageContainer.addEventListener('mousedown', this.mousedown.bind(this))
     this.pageContainer.addEventListener('mouseup', this.mouseup.bind(this))
     this.pageContainer.addEventListener(
@@ -137,6 +139,13 @@ export class CanvasEvent {
     mousedown(evt, this)
   }
 
+  public click() {
+    // IOS系统限制非用户主动触发事件的键盘弹出
+    if (isIOS) {
+      this.draw.getCursor().getAgentDom().focus()
+    }
+  }
+
   public mouseup(evt: MouseEvent) {
     mouseup(evt, this)
   }
diff --git a/src/editor/utils/ua.ts b/src/editor/utils/ua.ts
index ba1fb34..f00193b 100644
--- a/src/editor/utils/ua.ts
+++ b/src/editor/utils/ua.ts
@@ -1,2 +1,5 @@
 export const isApple =
   typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent)
+
+export const isIOS =
+  typeof navigator !== 'undefined' && /iPad|iPhone/.test(navigator.userAgent)