feat: showing single block for blocks

src/main/frontend/components/block.cljs

@@ -571,7 +571,7 @@
             (:block/name page))
 
         (and (not (util/mobile?))
-             (not preview?)) ;; TODO: support preview for whiteboard
+             (not preview?))
         (page-preview-trigger (assoc config :children inner) page-name)
 
         :else
@@ -2224,6 +2224,40 @@
            (let [refs-cp (state/get-component :block/linked-references)]
              (refs-cp uuid)))]))))
 
+;; FIXME: not updating when block content is updated outbound
+(rum/defcs single-block-cp-inner < rum/reactive db-mixins/query
+  ;; todo: mixin for init-blocks-container-id?
+  {:init (fn [state]
+           (assoc state
+                  ::init-blocks-container-id (atom nil)))}
+  [state block-uuid]
+  (let [uuid (if (string? block-uuid) (uuid block-uuid) block-uuid)
+        *init-blocks-container-id (::init-blocks-container-id state)
+        block-entity (db/entity [:block/uuid uuid])
+        {:block/keys [pre-block? level format content]} block-entity
+        blocks-container-id (if @*init-blocks-container-id
+                              @*init-blocks-container-id
+                              (let [id' (swap! *blocks-container-id inc)]
+                                (reset! *init-blocks-container-id id')
+                                id'))
+        config {:id (str uuid)
+                :db/id (:db/id block-entity)
+                :block? true
+                :editor-box (state/get-component :editor/box)}
+        edit-input-id (str "edit-block-" blocks-container-id "-" uuid)
+        edit? (state/sub [:editor/editing? edit-input-id])
+        block {:block/uuid uuid
+               :block/pre-block? pre-block?
+               :block/level level
+               :block/format format
+               :block/content content}
+        block (block/parse-title-and-body block)]
+    (block-content-or-editor config block edit-input-id uuid level edit?)))
+
+(rum/defc single-block-cp
+  [block-uuid]
+  (single-block-cp-inner block-uuid))
+
 (defn non-dragging?
   [e]
   (and (= (gobj/get e "buttons") 1)

src/main/frontend/components/whiteboard.cljs

@@ -55,7 +55,7 @@
   (let [[rect set-rect] (rum/use-state nil)]
     (rum/use-effect!
      (fn []
-       (let [update-rect #(set-rect (.. ref -current getBoundingClientRect))
+       (let [update-rect #(set-rect (when (.-current ref) (.. ref -current getBoundingClientRect)))
              updator (fn [entries]
                        (when (.-contentRect (first (js->clj entries))) (update-rect)))
              observer (js/ResizeObserver. updator)]

src/main/frontend/extensions/tldraw.cljs

@@ -2,8 +2,7 @@
   (:require ["/tldraw-logseq" :as TldrawLogseq]
             [frontend.components.block :as block]
             [frontend.components.page :as page]
-            [frontend.handler.whiteboard :refer [add-new-block-shape!
-                                                 page-name->tldr! transact-tldr!]]
+            [frontend.handler.whiteboard :as whiteboard-handler]
             [frontend.rum :as r]
             [frontend.search :as search]
             [frontend.state :as state]
@@ -15,10 +14,14 @@
 
 (def generate-preview (gobj/get TldrawLogseq "generateJSXFromApp"))
 
-(rum/defc page
+(rum/defc page-cp
   [props]
   (page/page {:page-name (gobj/get props "pageName") :whiteboard? true}))
 
+(rum/defc block-cp
+  [props]
+  ((state/get-component :block/single-block) (uuid (gobj/get props "blockId"))))
+
 (rum/defc breadcrumb
   [props]
   (block/breadcrumb {} (state/get-current-repo) (uuid (gobj/get props "blockId")) nil))
@@ -32,11 +35,11 @@
     (let [uuid (:block/uuid block)
           client-x (gobj/get e "clientX")
           client-y (gobj/get e "clientY")]
-      (add-new-block-shape! uuid client-x client-y))))
+      (whiteboard-handler/add-new-block-shape! uuid client-x client-y))))
 
 (rum/defc tldraw-app
   [name block-id]
-  (let [data (page-name->tldr! name block-id)
+  (let [data (whiteboard-handler/page-name->tldr! name block-id)
         [tln set-tln] (rum/use-state nil)]
     (rum/use-effect!
      (fn []
@@ -55,12 +58,13 @@
         ;; wheel -> overscroll may cause browser navigation
         :on-wheel util/stop-propagation}
 
-       (tldraw {:renderers {:Page page
+       (tldraw {:renderers {:Page page-cp
+                            :Block block-cp
                             :Breadcrumb breadcrumb
                             :PageNameLink page-name-link}
                 :searchHandler (comp clj->js vec search/page-search)
                 :onMount (fn [app] (set-tln ^js app))
                 :onPersist (fn [app]
                              (let [document (gobj/get app "serialized")]
-                               (transact-tldr! name document)))
+                               (whiteboard-handler/transact-tldr! name document)))
                 :model data})])))

src/main/frontend/format/block.cljs

@@ -83,7 +83,7 @@ and handles unexpected failure."
                body (vec (if title (rest ast) ast))
                body (drop-while gp-property/properties-ast? body)
                result (cond->
-                        (if (seq body) {:block/body body} {})
+                       (if (seq body) {:block/body body} {})
                         title
                         (assoc :block/title title))]
            (state/add-block-ast-cache! block-uuid content result)

src/main/frontend/handler.cljs

@@ -2,6 +2,8 @@
   (:require [cljs.reader :refer [read-string]]
             [electron.ipc :as ipc]
             [electron.listener :as el]
+            [frontend.components.block :as block]
+            [frontend.components.editor :as editor]
             [frontend.components.page :as page]
             [frontend.components.reference :as reference]
             [frontend.components.whiteboard :as whiteboard]
@@ -174,6 +176,8 @@
   (state/set-page-blocks-cp! page/page-blocks-cp)
   (state/set-component! :block/linked-references reference/block-linked-references)
   (state/set-component! :whiteboard/tldraw-preview whiteboard/tldraw-preview)
+  (state/set-component! :block/single-block block/single-block-cp)
+  (state/set-component! :editor/box editor/box)
   (command-palette/register-global-shortcut-commands))
 
 (reset! db/*db-listener outliner-db/after-transact-pipelines)

tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts

@@ -5,6 +5,9 @@ export const LogseqContext = React.createContext<
       Page: React.FC<{
         pageName: string
       }>
+      Block: React.FC<{
+        blockId: string
+      }>
       Breadcrumb: React.FC<{
         blockId: string
       }>

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

@@ -73,7 +73,7 @@ export class HTMLShape extends TLBoxShape<HTMLShapeProps> {
             userSelect: 'none',
             position: 'relative',
             margin: 0,
-            overflow: 'auto',
+            overflow: isEditing ? 'auto' : 'hidden',
           }}
           dangerouslySetInnerHTML={{ __html: html }}
         />

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

@@ -228,7 +228,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
       return null // not being correctly configured
     }
 
-    const { Page, Breadcrumb, PageNameLink } = renderers
+    const { Page, Block, Breadcrumb, PageNameLink } = renderers
 
     return (
       <HTMLContainer
@@ -290,7 +290,11 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
                       cursor: 'default',
                     }}
                   >
-                    <Page pageName={pageId} />
+                    {this.props.blockType === 'P' ? (
+                      <Page pageName={pageId} />
+                    ) : (
+                      <Block blockId={pageId} />
+                    )}
                   </div>
                 </div>
               )}

tldraw/demo/src/App.jsx

@@ -80,6 +80,18 @@ const Page = props => {
   )
 }
 
+const Block = props => {
+  const [value, setValue] = React.useState(JSON.stringify(props, null, 2))
+  return (
+    <textarea
+      className="whitespace-pre w-full h-full font-mono"
+      style={{ minHeight: '64px' }}
+      value={value}
+      onChange={e => setValue(e.target.value)}
+    />
+  )
+}
+
 const Breadcrumb = props => {
   const [value, setValue] = React.useState(JSON.stringify(props))
   return (
@@ -141,6 +153,7 @@ export default function App() {
       <TldrawApp
         renderers={{
           Page,
+          Block,
           Breadcrumb,
         }}
         searchHandler={q => (q ? list : [])}