From 0d16402dca6c103550c19d0be02af6ad2231c739 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Thu, 8 Sep 2022 11:29:50 +0300
Subject: [PATCH 1/5] feat: introduce iframe component

---
 tldraw/apps/tldraw-logseq/src/app.tsx         |  2 +
 .../ContextBar/contextBarActionFactory.tsx    | 34 +++++++-
 .../apps/tldraw-logseq/src/hooks/usePaste.ts  |  9 ++-
 .../src/lib/shapes/IFrameShape.tsx            | 79 +++++++++++++++++++
 .../tldraw-logseq/src/lib/shapes/index.ts     |  4 +
 .../src/lib/tools/IFrameTool.tsx              | 10 +++
 .../apps/tldraw-logseq/src/lib/tools/index.ts |  1 +
 7 files changed, 137 insertions(+), 2 deletions(-)
 create mode 100644 tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
 create mode 100644 tldraw/apps/tldraw-logseq/src/lib/tools/IFrameTool.tsx

diff --git a/tldraw/apps/tldraw-logseq/src/app.tsx b/tldraw/apps/tldraw-logseq/src/app.tsx
index 2ec727aedf..c492bd7d56 100644
--- a/tldraw/apps/tldraw-logseq/src/app.tsx
+++ b/tldraw/apps/tldraw-logseq/src/app.tsx
@@ -28,6 +28,7 @@ import {
   shapes,
   TextTool,
   YouTubeTool,
+  IFrameTool,
   type Shape,
 } from './lib'
 import { LogseqContext, type LogseqContextValue } from './lib/logseq-context'
@@ -47,6 +48,7 @@ const tools: TLReactToolConstructor<Shape>[] = [
   PencilTool,
   TextTool,
   YouTubeTool,
+  IFrameTool,
   HTMLTool,
   LogseqPortalTool,
 ]
diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
index 4d4cb8b3c3..d8634b7e49 100644
--- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
@@ -7,6 +7,7 @@ import type {
   LogseqPortalShape,
   TextShape,
   HTMLShape,
+  IFrameShape,
   YouTubeShape,
   BoxShape,
   PolygonShape,
@@ -36,13 +37,14 @@ export const contextBarActionTypes = [
   'ScaleLevel',
   'TextStyle',
   'YoutubeLink',
+  'IFrameSource',
   'LogseqPortalViewMode',
   'ArrowMode',
   'OpenPage',
 ] as const
 
 type ContextBarActionType = typeof contextBarActionTypes[number]
-const singleShapeActions: ContextBarActionType[] = ['Edit', 'YoutubeLink', 'OpenPage']
+const singleShapeActions: ContextBarActionType[] = ['Edit', 'YoutubeLink', 'IFrameSource', 'OpenPage']
 
 const contextBarActionMapping = new Map<ContextBarActionType, React.FC>()
 
@@ -51,6 +53,7 @@ type ShapeType = Shape['props']['type']
 export const shapeMapping: Partial<Record<ShapeType, ContextBarActionType[]>> = {
   'logseq-portal': ['Edit', 'LogseqPortalViewMode', 'ScaleLevel', 'OpenPage', 'AutoResizing'],
   youtube: ['YoutubeLink'],
+  iframe: ['IFrameSource'],
   box: ['Swatch', 'NoFill', 'StrokeType'],
   ellipse: ['Swatch', 'NoFill', 'StrokeType'],
   polygon: ['Swatch', 'NoFill', 'StrokeType'],
@@ -239,6 +242,34 @@ const OpenPageAction = observer(() => {
   )
 })
 
+const IFrameSourceAction = observer(() => {
+  const app = useApp<Shape>()
+  const shape = filterShapeByAction<IFrameShape>(app.selectedShapesArray, 'IFrameSource')[0]
+  const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    shape.onIFrameSourceChange(e.target.value)
+    app.persist()
+  }, [])
+
+  return (
+    <span className="flex gap-3">
+      <TextInput
+        title="Website Url"
+        className="tl-iframe-src"
+        value={`${shape.props.url}`}
+        onChange={handleChange}
+      />
+      <button
+        title="Open website url"
+        className="tl-contextbar-button"
+        type="button"
+        onClick={() => window.logseq?.api?.open_external_link?.(shape.props.url)}
+      >
+        <TablerIcon name="external-link" />
+      </button>
+    </span>
+  )
+})
+
 const YoutubeLinkAction = observer(() => {
   const app = useApp<Shape>()
   const shape = filterShapeByAction<YouTubeShape>(app.selectedShapesArray, 'YoutubeLink')[0]
@@ -450,6 +481,7 @@ contextBarActionMapping.set('LogseqPortalViewMode', LogseqPortalViewModeAction)
 contextBarActionMapping.set('ScaleLevel', ScaleLevelAction)
 contextBarActionMapping.set('OpenPage', OpenPageAction)
 contextBarActionMapping.set('YoutubeLink', YoutubeLinkAction)
+contextBarActionMapping.set('IFrameSource', IFrameSourceAction)
 contextBarActionMapping.set('NoFill', NoFillAction)
 contextBarActionMapping.set('Swatch', SwatchAction)
 contextBarActionMapping.set('StrokeType', StrokeTypeAction)
diff --git a/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts b/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts
index 8b4ff85f7e..ec0579c0d5 100644
--- a/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts
+++ b/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts
@@ -19,6 +19,7 @@ import {
   LogseqPortalShape,
   VideoShape,
   ImageShape,
+  IFrameShape,
 } from '../lib'
 import type { LogseqContextValue } from '../lib/logseq-context'
 
@@ -243,7 +244,13 @@ export function usePaste(context: LogseqContextValue) {
           ) {
             return true
           }
-          // ??? deal with normal URLs?
+
+          shapesToCreate.push({
+            ...IFrameShape.defaultProps,
+            url: rawText,
+            point: [point[0], point[1]],
+          })
+          return true
         }
         return false
       }
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
new file mode 100644
index 0000000000..9b7323b6e3
--- /dev/null
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
+import { HTMLContainer, TLComponentProps } from '@tldraw/react'
+import { action, computed } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+export interface IFrameShapeProps extends TLBoxShapeProps {
+  type: 'iframe'
+  url: string
+}
+
+export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
+  static id = 'iframe'
+
+  static defaultProps: IFrameShapeProps = {
+    id: 'iframe',
+    type: 'iframe',
+    parentId: 'page',
+    point: [0, 0],
+    size: [853, 480],
+    url: '',
+  }
+
+  @computed get url() {
+    return this.props.url
+  }
+
+  @action onIFrameSourceChange = (url: string) => {
+    this.update({ url })
+  }
+
+  ReactComponent = observer(({ events, isErasing, isEditing }: TLComponentProps) => {
+    return (
+      <HTMLContainer
+        style={{
+          overflow: 'hidden',
+          pointerEvents: 'all',
+          opacity: isErasing ? 0.2 : 1,
+        }}
+        {...events}
+      >
+        <div
+          className="rounded-lg w-full h-full relative overflow-hidden shadow-xl"
+          style={{
+            pointerEvents: isEditing ? 'all' : 'none',
+            userSelect: 'none',
+          }}
+        >
+          {this.url && (
+            <div
+              style={{
+                overflow: 'hidden',
+                position: 'relative',
+                height: '100%',
+              }}
+            >
+              <iframe
+                className="absolute inset-0 w-full h-full m-0"
+                width="100%"
+                height="100%"
+                src={`${this.url}`}
+                frameBorder="0"
+              />
+            </div>
+          )}
+        </div>
+      </HTMLContainer>
+    )
+  })
+
+  ReactIndicator = observer(() => {
+    const {
+      props: {
+        size: [w, h],
+      },
+    } = this
+    return <rect width={w} height={h} fill="transparent" rx={8} ry={8} />
+  })
+}
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/index.ts b/tldraw/apps/tldraw-logseq/src/lib/shapes/index.ts
index 8093cb1a10..94daa4e781 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/index.ts
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/index.ts
@@ -6,6 +6,7 @@ import { HighlighterShape } from './HighlighterShape'
 import { HTMLShape } from './HTMLShape'
 import { ImageShape } from './ImageShape'
 import { VideoShape } from './VideoShape'
+import { IFrameShape } from './IFrameShape'
 import { LineShape } from './LineShape'
 import { LogseqPortalShape } from './LogseqPortalShape'
 import { PencilShape } from './PencilShape'
@@ -27,6 +28,7 @@ export type Shape =
   | PolygonShape
   | TextShape
   | YouTubeShape
+  | IFrameShape
   | HTMLShape
   | LogseqPortalShape
 
@@ -37,6 +39,7 @@ export * from './HighlighterShape'
 export * from './HTMLShape'
 export * from './ImageShape'
 export * from './VideoShape'
+export * from './IFrameShape'
 export * from './LineShape'
 export * from './LogseqPortalShape'
 export * from './PencilShape'
@@ -56,6 +59,7 @@ export const shapes: TLReactShapeConstructor<Shape>[] = [
   PolygonShape,
   TextShape,
   YouTubeShape,
+  IFrameShape,
   HTMLShape,
   LogseqPortalShape,
 ]
diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/IFrameTool.tsx b/tldraw/apps/tldraw-logseq/src/lib/tools/IFrameTool.tsx
new file mode 100644
index 0000000000..a394db5e2c
--- /dev/null
+++ b/tldraw/apps/tldraw-logseq/src/lib/tools/IFrameTool.tsx
@@ -0,0 +1,10 @@
+import { TLBoxTool } from '@tldraw/core'
+import type { TLReactEventMap } from '@tldraw/react'
+import { IFrameShape, type Shape } from '../shapes'
+
+export class IFrameTool extends TLBoxTool<IFrameShape, Shape, TLReactEventMap> {
+  static id = 'iframe'
+  Shape = IFrameShape
+}
+
+export {}
diff --git a/tldraw/apps/tldraw-logseq/src/lib/tools/index.ts b/tldraw/apps/tldraw-logseq/src/lib/tools/index.ts
index 16194b4c8f..2ec1aa902f 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/tools/index.ts
+++ b/tldraw/apps/tldraw-logseq/src/lib/tools/index.ts
@@ -10,3 +10,4 @@ export * from './TextTool'
 export * from './YouTubeTool'
 export * from './LogseqPortalTool'
 export * from './HTMLTool'
+export * from './IFrameTool'

From 313179389191c3bf525596d9b63e641bc3317f84 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Thu, 8 Sep 2022 17:16:02 +0300
Subject: [PATCH 2/5] enhance: iframe component

---
 .../apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx  | 10 +++++++++-
 tldraw/apps/tldraw-logseq/src/styles.css               |  6 +++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
index 9b7323b6e3..80669d95ab 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react'
 import { TLBoxShape, TLBoxShapeProps } from '@tldraw/core'
 import { HTMLContainer, TLComponentProps } from '@tldraw/react'
 import { action, computed } from 'mobx'
@@ -21,15 +22,19 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
     url: '',
   }
 
+  canEdit = true
+
   @computed get url() {
     return this.props.url
   }
 
-  @action onIFrameSourceChange = (url: string) => {
+  @action onIFrameSourceChange = (url: string  | null;) => {
     this.update({ url })
   }
 
   ReactComponent = observer(({ events, isErasing, isEditing }: TLComponentProps) => {
+    const ref = React.useRef<HTMLIFrameElement>(null)
+
     return (
       <HTMLContainer
         style={{
@@ -55,11 +60,14 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
               }}
             >
               <iframe
+                ref={ref}
                 className="absolute inset-0 w-full h-full m-0"
                 width="100%"
                 height="100%"
+                onLoad={() => this.onIFrameSourceChange(ref.current.contentWindow.location.href)}
                 src={`${this.url}`}
                 frameBorder="0"
+                sandbox=""
               />
             </div>
           )}
diff --git a/tldraw/apps/tldraw-logseq/src/styles.css b/tldraw/apps/tldraw-logseq/src/styles.css
index ae5a0e2e42..0495ad22ac 100644
--- a/tldraw/apps/tldraw-logseq/src/styles.css
+++ b/tldraw/apps/tldraw-logseq/src/styles.css
@@ -818,11 +818,11 @@ html[data-theme='dark'] {
   width: 1px;
 }
 
-.tl-youtube-link {
-  border-radius: 8px;
+.tl-youtube-link,
+.tl-iframe-src {
+  @apply rounded-lg px-2 py-1;
   color: var(--ls-primary-text-color);
   box-shadow: 0 0 0 1px var(--ls-secondary-border-color);
-  padding: 4px 14px;
 }
 
 .tl-hitarea-stroke {

From a006f2c0e15bdc34248260d14c0a675703c1bbd1 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Fri, 9 Sep 2022 16:47:35 +0300
Subject: [PATCH 3/5] enhance: iframe component

---
 .../ContextBar/contextBarActionFactory.tsx      | 17 +++++++++++++++--
 .../src/lib/shapes/IFrameShape.tsx              | 17 +++++++++--------
 tldraw/packages/core/src/lib/TLApp/TLApp.ts     |  1 -
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
index d8634b7e49..ef0b564a27 100644
--- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
@@ -245,13 +245,26 @@ const OpenPageAction = observer(() => {
 const IFrameSourceAction = observer(() => {
   const app = useApp<Shape>()
   const shape = filterShapeByAction<IFrameShape>(app.selectedShapesArray, 'IFrameSource')[0]
+
   const handleChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    shape.onIFrameSourceChange(e.target.value)
+    shape.onIFrameSourceChange(e.target.value.trim().toLowerCase())
     app.persist()
   }, [])
 
+  const handleReload = React.useCallback(() => {
+    shape.reload()
+  }, [])
+
   return (
     <span className="flex gap-3">
+      <button
+        title="Reload"
+        className="tl-contextbar-button"
+        type="button"
+        onClick={handleReload}
+      >
+        <TablerIcon name="refresh" />
+      </button>
       <TextInput
         title="Website Url"
         className="tl-iframe-src"
@@ -262,7 +275,7 @@ const IFrameSourceAction = observer(() => {
         title="Open website url"
         className="tl-contextbar-button"
         type="button"
-        onClick={() => window.logseq?.api?.open_external_link?.(shape.props.url)}
+        onClick={() => window.open(shape.props.url)}
       >
         <TablerIcon name="external-link" />
       </button>
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
index 80669d95ab..4caed387b4 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
@@ -12,6 +12,8 @@ export interface IFrameShapeProps extends TLBoxShapeProps {
 
 export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
   static id = 'iframe'
+  frameRef = React.createRef<HTMLIFrameElement>()
+
 
   static defaultProps: IFrameShapeProps = {
     id: 'iframe',
@@ -24,12 +26,12 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
 
   canEdit = true
 
-  @computed get url() {
-    return this.props.url
+  @action onIFrameSourceChange = (url: string) => {
+    this.update({ url })
   }
 
-  @action onIFrameSourceChange = (url: string  | null;) => {
-    this.update({ url })
+  @action reload = () => {
+    this.frameRef.current.src = this.frameRef?.current?.src
   }
 
   ReactComponent = observer(({ events, isErasing, isEditing }: TLComponentProps) => {
@@ -51,7 +53,7 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
             userSelect: 'none',
           }}
         >
-          {this.url && (
+          {this.props.url && (
             <div
               style={{
                 overflow: 'hidden',
@@ -60,12 +62,11 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
               }}
             >
               <iframe
-                ref={ref}
+                ref={this.frameRef}
                 className="absolute inset-0 w-full h-full m-0"
                 width="100%"
                 height="100%"
-                onLoad={() => this.onIFrameSourceChange(ref.current.contentWindow.location.href)}
-                src={`${this.url}`}
+                src={`${this.props.url}`}
                 frameBorder="0"
                 sandbox=""
               />
diff --git a/tldraw/packages/core/src/lib/TLApp/TLApp.ts b/tldraw/packages/core/src/lib/TLApp/TLApp.ts
index 151606014f..d66fbbebe9 100644
--- a/tldraw/packages/core/src/lib/TLApp/TLApp.ts
+++ b/tldraw/packages/core/src/lib/TLApp/TLApp.ts
@@ -719,7 +719,6 @@ export class TLApp<
       inputs: { ctrlKey },
     } = this
     return (
-      !ctrlKey &&
       this.isInAny('select.idle', 'select.hoveringSelectionHandle') &&
       !this.isIn('select.contextMenu') &&
       selectedShapesArray.length > 0 &&

From e96f98b06d225f01094d7c0813c9cd45b6e5459a Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Fri, 9 Sep 2022 17:03:07 +0300
Subject: [PATCH 4/5] style: prettier

---
 .../ContextBar/contextBarActionFactory.tsx         | 14 +++++++-------
 .../tldraw-logseq/src/lib/shapes/IFrameShape.tsx   |  1 -
 tldraw/packages/core/src/lib/TLViewport.ts         |  3 +--
 .../lib/tools/TLSelectTool/states/PinchingState.ts |  4 ++--
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
index ef0b564a27..0f361f9056 100644
--- a/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
+++ b/tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx
@@ -44,7 +44,12 @@ export const contextBarActionTypes = [
 ] as const
 
 type ContextBarActionType = typeof contextBarActionTypes[number]
-const singleShapeActions: ContextBarActionType[] = ['Edit', 'YoutubeLink', 'IFrameSource', 'OpenPage']
+const singleShapeActions: ContextBarActionType[] = [
+  'Edit',
+  'YoutubeLink',
+  'IFrameSource',
+  'OpenPage',
+]
 
 const contextBarActionMapping = new Map<ContextBarActionType, React.FC>()
 
@@ -257,12 +262,7 @@ const IFrameSourceAction = observer(() => {
 
   return (
     <span className="flex gap-3">
-      <button
-        title="Reload"
-        className="tl-contextbar-button"
-        type="button"
-        onClick={handleReload}
-      >
+      <button title="Reload" className="tl-contextbar-button" type="button" onClick={handleReload}>
         <TablerIcon name="refresh" />
       </button>
       <TextInput
diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
index 4caed387b4..a3f6a69c35 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
@@ -14,7 +14,6 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
   static id = 'iframe'
   frameRef = React.createRef<HTMLIFrameElement>()
 
-
   static defaultProps: IFrameShapeProps = {
     id: 'iframe',
     type: 'iframe',
diff --git a/tldraw/packages/core/src/lib/TLViewport.ts b/tldraw/packages/core/src/lib/TLViewport.ts
index 693ef2967f..1ee13c50c3 100644
--- a/tldraw/packages/core/src/lib/TLViewport.ts
+++ b/tldraw/packages/core/src/lib/TLViewport.ts
@@ -84,7 +84,7 @@ export class TLViewport {
 
   pinchCamera = (point: number[], delta: number[], zoom: number): this => {
     const { camera } = this
-    zoom = Math.max(TLViewport.minZoom, Math.min(TLViewport.maxZoom, zoom));
+    zoom = Math.max(TLViewport.minZoom, Math.min(TLViewport.maxZoom, zoom))
     const nextPoint = Vec.sub(camera.point, Vec.div(delta, camera.zoom))
     const p0 = Vec.sub(Vec.div(point, camera.zoom), nextPoint)
     const p1 = Vec.sub(Vec.div(point, zoom), nextPoint)
@@ -105,7 +105,6 @@ export class TLViewport {
   zoomOut = () => {
     const { camera, bounds } = this
     this.setZoom(camera.zoom * ZOOM_UPDATE_FACTOR)
-
   }
 
   resetZoom = (): this => {
diff --git a/tldraw/packages/core/src/lib/tools/TLSelectTool/states/PinchingState.ts b/tldraw/packages/core/src/lib/tools/TLSelectTool/states/PinchingState.ts
index 75fe027aad..bb48a0d114 100644
--- a/tldraw/packages/core/src/lib/tools/TLSelectTool/states/PinchingState.ts
+++ b/tldraw/packages/core/src/lib/tools/TLSelectTool/states/PinchingState.ts
@@ -26,8 +26,8 @@ export class PinchingState<
 
     // Normalize the value of deltaZ from raw WheelEvent
     const deltaZ = normalizeWheel(event)[2] * 0.01
-    if (deltaZ === 0) return;
-    const zoom = camera.zoom - deltaZ * camera.zoom;
+    if (deltaZ === 0) return
+    const zoom = camera.zoom - deltaZ * camera.zoom
     this.app.viewport.pinchCamera(info.point, [0, 0], zoom)
   }
 

From 9e5df347c66837f3259db9c3c9a4363d2b14a810 Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <konstantinos@logseq.com>
Date: Fri, 9 Sep 2022 18:35:37 +0300
Subject: [PATCH 5/5] fix: allow scripts on iframes

---
 tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
index a3f6a69c35..f2fcad6db1 100644
--- a/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
+++ b/tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx
@@ -67,7 +67,7 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
                 height="100%"
                 src={`${this.props.url}`}
                 frameBorder="0"
-                sandbox=""
+                sandbox="allow-scripts"
               />
             </div>
           )}