diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx index 924e77862..87043c010 100644 --- a/apps/roam/src/components/LeftSidebarView.tsx +++ b/apps/roam/src/components/LeftSidebarView.tsx @@ -48,6 +48,8 @@ import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageU import { migrateLeftSidebarSettings } from "~/utils/migrateLeftSidebarSettings"; import posthog from "posthog-js"; import { commands, cleanCommandName } from "~/components/LeftSidebarCommands"; +import { isSmartBlockUid } from "~/utils/isSmartBlockUid"; +import { RenderRoamBlock } from "~/utils/roamReactComponents"; const parseReference = (text: string) => { const extracted = extractRef(text); @@ -135,6 +137,26 @@ const toggleFoldedState = ({ } }; +const RoamRenderedBlock = ({ uid }: { uid: string }) => { + const [version, setVersion] = useState(0); + + useEffect(() => { + const pattern = "[:block/string]"; + const entityId = `[:block/uid "${uid}"]`; + const callback = () => setVersion((v) => v + 1); + window.roamAlphaAPI.data.addPullWatch(pattern, entityId, callback); + return () => { + window.roamAlphaAPI.data.removePullWatch(pattern, entityId, callback); + }; + }, [uid]); + + return ( +
+ +
+ ); +}; + type ChildNode = { uid: string; text: string; alias?: { value: string } }; const ChildRow = ({ @@ -147,6 +169,17 @@ const ChildRow = ({ onloadArgs: OnloadArgs; }) => { const ref = parseReference(child.text); + + if (ref.type === "block" && isSmartBlockUid(ref.uid)) { + return ( +
+
+ +
+
+ ); + } + const alias = child.alias?.value; const display = ref.type === "command" @@ -701,6 +734,22 @@ export const mountLeftSidebar = async ( ): Promise => { if (!wrapper) return; + const styleId = "dg-sidebar-rendered-block-styles"; + if (!document.getElementById(styleId)) { + const style = document.createElement("style"); + style.id = styleId; + style.textContent = ` + .dg-sidebar-rendered-block .rm-bullet { display: none; } + .dg-sidebar-rendered-block .rm-block-separator { display: none; } + .dg-sidebar-rendered-block .controls { display: none; } + .dg-sidebar-rendered-block .block-expand { display: none; } + .dg-sidebar-rendered-block .block-border-left { display: none; } + .dg-sidebar-rendered-block .block-ref-count-button { display: none; } + .dg-sidebar-rendered-block .rm-block-main { min-height: unset; padding: 0; } + `; + document.head.appendChild(style); + } + const id = "dg-left-sidebar-root"; let root = wrapper.querySelector(`#${id}`) as HTMLDivElement; if (!root) { diff --git a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx index 449d51c59..374641f67 100644 --- a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx +++ b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx @@ -46,6 +46,12 @@ import { commands, SidebarCommandPopover, } from "~/components/LeftSidebarCommands"; +import { isSmartBlockUid } from "~/utils/isSmartBlockUid"; + +const isSmartBlockRef = (text: string): boolean => { + if (!text.startsWith("((") || !text.endsWith("))")) return false; + return isSmartBlockUid(extractRef(text)); +}; /* eslint-disable @typescript-eslint/naming-convention */ export const sectionsToBlockProps = ( @@ -429,6 +435,7 @@ const SectionItem = memo( renderItem={(child, handle) => { const childAlias = child.alias?.value; const isSettingsOpen = childSettingsUid === child.uid; + const childIsSmartBlock = isSmartBlockRef(child.text); const childDisplayTitle = getPageTitleByPageUid(child.text) || getTextByBlockUid(extractRef(child.text)) || @@ -444,7 +451,7 @@ const SectionItem = memo( className="mr-2 min-w-0 flex-1 truncate" title={childDisplayTitle} > - {childAlias ? ( + {childAlias && !childIsSmartBlock ? ( {childAlias} @@ -458,13 +465,15 @@ const SectionItem = memo( )} -