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(
)}
-