enhance: iframe component

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>

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=""
               />

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 &&