fix: some ux fix

src/main/frontend/components/page.cljs

@@ -368,7 +368,7 @@
                :class (util/classnames [{:is-journals (or journal? fmt-journal?)}])})
 
        (if whiteboard-page?
-         [:div (get-tldraw-preview page-name)]
+         [:div ((state/get-component :whiteboard/tldraw-preview) page-name)] ;; FIXME: this is not reactive
          [:div.relative
           (when (and (not sidebar?) (not block?))
             [:div.flex.flex-row.space-between

src/main/frontend/modules/outliner/file.cljs

@@ -39,12 +39,13 @@
                 {:pull-keys (if whiteboard? whiteboard-blocks-pull-keys-with-persisted-ids '[*])})
         blocks (map #(if (get-in % [:block/properties :ls-type] false)
                        (dissoc %
+                               :block/uuid ;; shape block uuid is read from properties
                                :block/content
                                :block/format
                                :block/left
                                :block/page
                                :block/parent) ;; these are auto-generated for whiteboard shapes
-                       %) blocks)]
+                       (dissoc % :block/page)) blocks)]
     (when-not (and (= 1 (count blocks))
                    (string/blank? (:block/content (first blocks)))
                    (nil? (:block/file page-block)))

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

@@ -20,7 +20,7 @@ export class HTMLShape extends TLBoxShape<HTMLShapeProps> {
     type: 'html',
     parentId: 'page',
     point: [0, 0],
-    size: [600, 320],
+    size: [600, 0],
     stroke: '#000000',
     fill: '#ffffff',
     strokeWidth: 2,
@@ -31,6 +31,7 @@ export class HTMLShape extends TLBoxShape<HTMLShapeProps> {
   canChangeAspectRatio = true
   canFlip = false
   canEdit = true
+  hideContextBar = true
 
   ReactComponent = observer(({ events, isErasing, isEditing }: TLComponentProps) => {
     const {
@@ -52,6 +53,17 @@ export class HTMLShape extends TLBoxShape<HTMLShapeProps> {
       [tlEventsEnabled]
     )
 
+    const anchorRef = React.useRef<HTMLDivElement>(null)
+
+    React.useEffect(() => {
+      if (this.props.size[1] === 0 && anchorRef.current) {
+        this.update({
+          size: [this.props.size[0], anchorRef.current.offsetHeight],
+        })
+        app.persist(true)
+      }
+    }, [])
+
     return (
       <HTMLContainer
         style={{
@@ -70,13 +82,18 @@ export class HTMLShape extends TLBoxShape<HTMLShapeProps> {
             width: '100%',
             height: '100%',
             pointerEvents: isEditing ? 'all' : 'none',
-            userSelect: 'none',
+            userSelect: 'all',
             position: 'relative',
             margin: 0,
             overflow: isEditing ? 'auto' : 'hidden',
           }}
-          dangerouslySetInnerHTML={{ __html: html }}
-        />
+        >
+          <div
+            ref={anchorRef}
+            className="tl-html-anchor"
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        </div>
       </HTMLContainer>
     )
   })

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

@@ -16,7 +16,7 @@ interface LineShapeProps extends CustomStyleProps, TLLineShapeProps {
   label: string
 }
 
-const font = '28px / 1 var(--ls-font-family)'
+const font = '18px / 1 var(--ls-font-family)'
 
 export class LineShape extends TLLineShape<LineShapeProps> {
   static id = 'line'

tldraw/demo/src/App.jsx

@@ -1,3 +1,4 @@
+import { uniqueId } from '@tldraw/core'
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { App as TldrawApp } from 'tldraw-logseq'
@@ -148,7 +149,7 @@ export default function App() {
         }}
         handlers={{
           search: q => (q ? list : []),
-          addNewBlock: q => q,
+          addNewBlock: () => uniqueId(),
         }}
         model={documentModel}
         onPersist={onPersist}

tldraw/packages/core/src/lib/TLBaseLineBindingState.ts

@@ -1,5 +1,5 @@
 import Vec from '@tldraw/vec'
-import { transaction } from 'mobx'
+import { toJS, transaction } from 'mobx'
 import { TLApp, TLLineShape, TLLineShapeProps, TLShape, TLTool, TLToolState } from '~lib'
 import type { TLBinding, TLEventMap, TLHandle, TLStateEvents } from '~types'
 import { deepMerge, GeomUtils } from '~utils'
@@ -196,11 +196,12 @@ export class TLBaseLineBindingState<
       if (updated) {
         this.currentShape.update(updated)
         this.app.currentPage.updateBindings(next.bindings)
-        this.app.setBindingShapes(
-          Object.values(updated.handles ?? {})
-            .map(h => next.bindings[h.bindingId!]?.toId)
-            .filter(Boolean)
-        )
+        const bindingShapes = Object.values(updated.handles ?? {})
+          .map(handle => handle.bindingId!)
+          .map(id => this.app.currentPage.bindings[id])
+          .filter(Boolean)
+          .flatMap(binding => [binding.toId, binding.fromId].filter(Boolean))
+        this.app.setBindingShapes(bindingShapes)
       }
     })
   }

tldraw/packages/core/src/lib/tools/TLSelectTool/states/PointingCanvasState.ts

@@ -15,6 +15,7 @@ export class PointingCanvasState<
     if (!shiftKey) {
       this.app.setSelectedShapes([])
       this.app.clearEditingShape()
+      window.getSelection()?.removeAllRanges()
     }
   }