feat: remove clipboard input experimental feature - fix #403

tulipjs · Dec 12, 2024 · e1ed0fb · e1ed0fb
1 parent c992c90
commit e1ed0fb
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 17 deletions.
diff --git a/examples/example/src/app.component.ts b/examples/example/src/app.component.ts
@@ -2,7 +2,7 @@ import { container, ContainerComponent } from "@tu/tulip";
 import { dataComponent } from "data.component";
 // import { testComponent } from "test.component";
 // import { textsComponent } from "texts.component";
-// import { inputsComponent } from "inputs.component";
+import { inputsComponent } from "inputs.component";
 // import { playerComponent } from "player.component";
 // import { dragComponent } from "drag.component";
 
@@ -14,7 +14,7 @@ export const appComponent: ContainerComponent<Props, Mutable> = () => {
 
   // $container.add(textsComponent());
   // $container.add(playerComponent());
-  // $container.add(inputsComponent());
+  $container.add(inputsComponent());
   // $container.add(dragComponent());
 
   const a = dataComponent({ test: "Abc12312311333" });

diff --git a/src/components/prefabs/input-text-sprite.component.ts b/src/components/prefabs/input-text-sprite.component.ts
@@ -19,6 +19,7 @@ import {
   closeKeyboard,
   combineAccentAndChar,
   getAccentCode,
+  getInputElement,
   isNotNullish,
   openKeyboard,
 } from "../../utils";
@@ -285,13 +286,7 @@ export const inputTextSprite: ContainerComponent<
     shiftKey,
   }: KeyboardEvent) => {
     if (key === "Tab") return;
-    if ((metaKey || ctrlKey) && key.toLowerCase() === "v") {
-      // @ts-ignore
-      await navigator.permissions.query({ name: "clipboard-read" });
-      const text = await navigator.clipboard.readText();
-      setText(`${$text}${text}`);
-      return;
-    }
+    if ((metaKey || ctrlKey) && key.toLowerCase() === "v") return;
 
     const accentCode = getAccentCode(code, shiftKey);
     if (accentCode) {
@@ -368,13 +363,22 @@ export const inputTextSprite: ContainerComponent<
     $startCursorBlink();
   };
 
+  const onPaste = (event: ClipboardEvent) => {
+    const clipboardData = event.clipboardData;
+    const pastedText = clipboardData.getData("text");
+
+    setText(`${$text}${pastedText}`);
+  };
+
   let removeOnKeyDown: () => void;
   let removeOnKeyUp: () => void;
 
   $container.on(DisplayObjectEvent.CONTEXT_ENTER, () => {
     removeOnKeyDown = global.events.on(Event.KEY_DOWN, onKeyDown, $textSprite);
     removeOnKeyUp = global.events.on(Event.KEY_UP, onKeyUp, $textSprite);
 
+    getInputElement().addEventListener("paste", onPaste);
+
     //Move cursor to end
     $cursorIndex = $text.length;
     $cursor.setPositionX($textSprite.$getTextBounds().width + 1);
@@ -394,6 +398,8 @@ export const inputTextSprite: ContainerComponent<
     removeOnKeyDown();
     removeOnKeyUp();
 
+    getInputElement().removeEventListener("paste", onPaste);
+
     $placeHolderTextSprite.setVisible($text.length === 0);
 
     $selectionComponent.setVisible(false);

diff --git a/src/consts/events.consts.ts b/src/consts/events.consts.ts
@@ -2,7 +2,7 @@ import { Event } from "../enums";
 
 //eventName, Event, preventDefault
 export const EVENT_MAP: [string, Event, boolean][] = [
-  ["keydown", Event.KEY_DOWN, true],
+  ["keydown", Event.KEY_DOWN, false],
   ["keyup", Event.KEY_UP, true],
   ["contextmenu", Event.RIGHT_CLICK, true],
   ["mousemove", Event.POINTER_MOVE, true],

diff --git a/src/utils/keyboard.utils.ts b/src/utils/keyboard.utils.ts
@@ -1,11 +1,7 @@
-import { isMobile } from "./os.utils";
-
-const getInputElement = (): HTMLInputElement =>
+export const getInputElement = (): HTMLInputElement =>
   document.getElementsByTagName("input")[0] || document.createElement("input");
 
 export const openKeyboard = () => {
-  if (!isMobile()) return;
-
   const target = getInputElement();
   target.style.position = "absolute";
   target.style.left = "-20px";
@@ -18,8 +14,6 @@ export const openKeyboard = () => {
 };
 
 export const closeKeyboard = () => {
-  if (!isMobile()) return;
-
   const target = getInputElement();
   target.blur();
   target.value = "";