mirror of https://github.com/logseq/logseq
feat: showing single block for blocks
Peng Xiao
parent
2d64b55b64
commit
0a2688de83
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)]
|
||||
|
|
|
|||
|
|
@ -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})])))
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ export const LogseqContext = React.createContext<
|
|||
Page: React.FC<{
|
||||
pageName: string
|
||||
}>
|
||||
Block: React.FC<{
|
||||
blockId: string
|
||||
}>
|
||||
Breadcrumb: React.FC<{
|
||||
blockId: string
|
||||
}>
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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 : [])}
|
||||
|
|
|
|||
Loading…
Reference in New Issue