From 1d83f000175d628f15b4c3e97cbf3ce5b643ba34 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@freewheel.tv>
Date: Wed, 9 Nov 2022 23:07:25 +0800
Subject: [PATCH] fix(whiteboard): iOS callout issues

---
 .../tldraw-logseq/src/components/Devtools/Devtools.tsx |  2 +-
 .../tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx |  1 +
 tldraw/apps/tldraw-logseq/src/styles.css               | 10 ++++++++++
 tldraw/packages/react/src/hooks/useStylesheet.ts       |  3 +++
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/tldraw/apps/tldraw-logseq/src/components/Devtools/Devtools.tsx b/tldraw/apps/tldraw-logseq/src/components/Devtools/Devtools.tsx
index 93139edb96..a1baf9e2bf 100644
--- a/tldraw/apps/tldraw-logseq/src/components/Devtools/Devtools.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/Devtools/Devtools.tsx
@@ -25,7 +25,7 @@ const HistoryStack = observer(function HistoryStack() {
   }, [])
 
   React.useEffect(() => {
-    requestIdleCallback(() => {
+    requestAnimationFrame(() => {
       anchorRef.current
         ?.querySelector(`[data-item-index="${app.history.pointer}"]`)
         ?.scrollIntoView()
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
index a5df9dfa2b..71d71e07fd 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx
@@ -878,6 +878,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
       >
         {isBinding && <BindingIndicator mode="html" strokeWidth={strokeWidth} size={size} />}
         <div
+          data-inner-events={!tlEventsEnabled}
           onWheelCapture={stop}
           onPointerDown={stop}
           onPointerUp={stop}
diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css
index ba1fec7ec4..e248a1c909 100644
--- a/tldraw/apps/tldraw-logseq/src/styles.css
+++ b/tldraw/apps/tldraw-logseq/src/styles.css
@@ -25,6 +25,11 @@
   --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 
   backface-visibility: hidden;
+
+  * {
+    -webkit-touch-callout: none;
+    -webkit-user-drag: none;
+  }
 }
 
 .dark-theme,
@@ -651,6 +656,7 @@ button.tl-select-input-trigger {
   padding: 8px 16px;
   cursor: pointer;
   gap: 0.5em;
+  user-select: none;
 
   &[data-focused='true'] {
     background-color: var(--ls-menu-hover-color, #f4f5f7);
@@ -676,6 +682,10 @@ button.tl-select-input-trigger {
   opacity: 0.5;
 }
 
+[data-inner-events=false] * {
+  user-select: none;
+}
+
 .tl-logseq-portal-container {
   @apply flex flex-col rounded-lg absolute;
 
diff --git a/tldraw/packages/react/src/hooks/useStylesheet.ts b/tldraw/packages/react/src/hooks/useStylesheet.ts
index 6bcd8eebc0..06b8b292e9 100644
--- a/tldraw/packages/react/src/hooks/useStylesheet.ts
+++ b/tldraw/packages/react/src/hooks/useStylesheet.ts
@@ -119,6 +119,9 @@ const tlcss = css`
     cursor: var(--tl-cursor) !important;
     box-sizing: border-box;
     color: var(--tl-foreground);
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-drag: none;
   }
 
   .tl-overlay {