diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx index 4647d3238..c60760d55 100644 --- a/apps/roam/src/components/LeftSidebarView.tsx +++ b/apps/roam/src/components/LeftSidebarView.tsx @@ -43,6 +43,7 @@ import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage"; import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid"; import { migrateLeftSidebarSettings } from "~/utils/migrateLeftSidebarSettings"; import posthog from "posthog-js"; +import { isSmartBlockUid } from "~/utils/createDiscourseNode"; const parseReference = (text: string) => { const extracted = extractRef(text); @@ -120,6 +121,39 @@ const toggleFoldedState = ({ } }; +const RoamRenderedBlock = ({ uid }: { uid: string }) => { + const containerRef = useRef(null); + + useEffect(() => { + const el = containerRef.current; + if (!el) return; + el.innerHTML = ""; + void window.roamAlphaAPI.ui.components.renderBlock({ + uid, + el, + // eslint-disable-next-line @typescript-eslint/naming-convention + "open?": false, + }); + + const handleClick = (e: Event) => { + const target = e.target as HTMLElement; + if (target.closest("[data-roamjs-smartblock-button]")) { + void window.roamAlphaAPI.ui.mainWindow.openBlock({ + block: { uid }, + }); + } + }; + el.addEventListener("click", handleClick); + + return () => { + el.innerHTML = ""; + el.removeEventListener("click", handleClick); + }; + }, [uid]); + + return
; +}; + const SectionChildren = ({ childrenNodes, truncateAt, @@ -133,6 +167,18 @@ const SectionChildren = ({ {childrenNodes.map((child) => { const ref = parseReference(child.text); const alias = child.alias?.value; + const isSmartBlock = ref.type === "block" && isSmartBlockUid(ref.uid); + + if (isSmartBlock) { + return ( +
+
+ +
+
+ ); + } + const display = ref.type === "page" ? getPageTitleByPageUid(ref.display) @@ -519,6 +565,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 74487b780..33d3934db 100644 --- a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx +++ b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx @@ -39,6 +39,12 @@ import { refreshAndNotify } from "~/components/LeftSidebarView"; import { memo, Dispatch, SetStateAction } from "react"; import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid"; import posthog from "posthog-js"; +import { isSmartBlockUid } from "~/utils/createDiscourseNode"; + +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 = ( @@ -439,6 +445,7 @@ const SectionItem = memo( {(section.children || []).map((child, index) => { const childAlias = child.alias?.value; const isSettingsOpen = childSettingsUid === child.uid; + const childIsSmartBlock = isSmartBlockRef(child.text); const childDisplayTitle = getPageTitleByPageUid(child.text) || getTextByBlockUid(extractRef(child.text)) || @@ -450,7 +457,7 @@ const SectionItem = memo( className="mr-2 min-w-0 flex-1 truncate" title={childDisplayTitle} > - {childAlias ? ( + {childAlias && !childIsSmartBlock ? ( {childAlias} @@ -464,13 +471,15 @@ const SectionItem = memo( )}
-