fix(whiteboard): allows pasting HTML content with format

tldraw/apps/tldraw-logseq/src/hooks/useDrop.ts

@@ -7,7 +7,7 @@ export function useDrop() {
   const handlePaste = usePaste()
   return React.useCallback<TLReactCallbacks<Shape>['onDrop']>(
     async (app, { dataTransfer, point }) => {
-      handlePaste(app, { point, shiftKey: false, dataTransfer })
+      handlePaste(app, { point, shiftKey: false, dataTransfer, fromDrop: true })
     },
     []
   )

tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts

@@ -8,7 +8,6 @@ import {
   TLShapeModel,
   uniqueId,
   validUUID,
-  createNewLineBinding,
 } from '@tldraw/core'
 import type { TLReactCallbacks } from '@tldraw/react'
 import Vec from '@tldraw/vec'
@@ -102,7 +101,7 @@ export function usePaste() {
   const { handlers } = React.useContext(LogseqContext)
 
   return React.useCallback<TLReactCallbacks<Shape>['onPaste']>(
-    async (app, { point, shiftKey, dataTransfer }) => {
+    async (app, { point, shiftKey, dataTransfer, fromDrop }) => {
       let imageAssetsToCreate: VideoImageAsset[] = []
       let assetsToClone: TLAsset[] = []
       const bindingsToCreate: TLBinding[] = []
@@ -150,8 +149,8 @@ export function usePaste() {
       async function tryCreateShapesFromDataTransfer(dataTransfer: DataTransfer) {
         return tryCreateShapeHelper(
           tryCreateShapeFromFiles,
-          tryCreateShapeFromTextPlain,
           tryCreateShapeFromTextHTML,
+          tryCreateShapeFromTextPlain,
           tryCreateShapeFromBlockUUID
         )(dataTransfer)
       }
@@ -203,7 +202,8 @@ export function usePaste() {
       }
 
       async function tryCreateShapeFromTextHTML(item: DataTransfer | ClipboardItem) {
-        if (shiftKey) {
+        // skips if it's a drop event or using shift key
+        if (item.types.includes('text/plain') && (shiftKey || fromDrop)) {
           return null
         }
         const rawText = await getDataFromType(item, 'text/html')

tldraw/apps/tldraw-logseq/src/lib/shapes/IFrameShape.tsx

@@ -30,7 +30,9 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
   }
 
   @action reload = () => {
-    this.frameRef.current.src = this.frameRef?.current?.src
+    if (this.frameRef.current) {
+      this.frameRef.current.src = this.frameRef?.current?.src
+    }
   }
 
   ReactComponent = observer(({ events, isErasing, isEditing }: TLComponentProps) => {
@@ -46,7 +48,7 @@ export class IFrameShape extends TLBoxShape<IFrameShapeProps> {
         {...events}
       >
         <div
-          className="rounded-lg w-full h-full relative overflow-hidden shadow-xl"
+          className="tl-iframe-container"
           style={{
             pointerEvents: isEditing ? 'all' : 'none',
             userSelect: 'none',

tldraw/apps/tldraw-logseq/src/styles.css

@@ -689,8 +689,14 @@ button.tl-select-input-trigger {
   transform-origin: top left;
 }
 
+.tl-iframe-container {
+  @apply rounded-lg w-full h-full relative overflow-hidden shadow-xl;
+  background-color: var(--ls-secondary-background-color);
+}
+
 .tl-html-anchor {
   width: fit-content;
+  display: flex;
 }
 
 .tl-html-anchor > iframe {

tldraw/packages/core/src/types/types.ts

@@ -172,7 +172,7 @@ export type TLSubscriptionEvent =
     }
   | {
       event: 'paste'
-      info: { point: number[]; shiftKey: boolean; dataTransfer?: DataTransfer }
+      info: { point: number[]; shiftKey: boolean; dataTransfer?: DataTransfer, fromDrop?: boolean }
     }
   | {
       event: 'create-assets'