Refactor handleTitleAdditions to remove layout parameter and adjust container classes for title additions. Update PublishNodeTitleButton and renderLinkedReferenceAdditions to reflect these changes. (#1228)

Author: mdroidian

apps/roam/src/components/PublishNodeTitleButton.tsx

@@ -48,6 +48,5 @@ export const renderPublishNodeTitleButton = ({
   handleTitleAdditions(
     h1,
     <PublishNodeTitleButton uid={uid} title={title} nodeType={nodeType} />,
-    { layout: "inline" },
   );
 };

apps/roam/src/utils/handleTitleAdditions.ts

@@ -3,16 +3,10 @@ import ReactDOM from "react-dom";
 
 const ROAM_TITLE_CONTAINER_CLASS = "rm-title-display-container";
 const ADDITIONS_CONTAINER_CLASS = "discourse-graph-title-additions";
-const ADDITIONS_CONTAINER_CLASSES = `${ADDITIONS_CONTAINER_CLASS} flex flex-wrap items-start gap-x-2 gap-y-2`;
-const INLINE_ADDITION_CLASSES = "min-w-0 flex-none";
-const BLOCK_ADDITION_CLASSES = "min-w-0 basis-full grow shrink-0";
-
-type TitleAdditionLayout = "inline" | "block";
 
 export const handleTitleAdditions = (
   h1: HTMLHeadingElement,
   element: React.ReactNode,
-  { layout = "block" }: { layout?: TitleAdditionLayout } = {},
 ): void => {
   const titleDisplayContainer =
     h1.closest(`.${ROAM_TITLE_CONTAINER_CLASS}`) ||
@@ -31,7 +25,7 @@ export const handleTitleAdditions = (
     if (!parent) return;
 
     container = document.createElement("div");
-    container.className = ADDITIONS_CONTAINER_CLASSES;
+    container.className = `${ADDITIONS_CONTAINER_CLASS} flex flex-col`;
 
     const oldMarginBottom = getComputedStyle(h1).marginBottom;
     const oldMarginBottomNum = Number.isFinite(parseFloat(oldMarginBottom))
@@ -51,8 +45,6 @@ export const handleTitleAdditions = (
 
   if (React.isValidElement(element)) {
     const renderContainer = document.createElement("div");
-    renderContainer.className =
-      layout === "inline" ? INLINE_ADDITION_CLASSES : BLOCK_ADDITION_CLASSES;
     container.appendChild(renderContainer);
     // eslint-disable-next-line react/no-deprecated
     ReactDOM.render(element, renderContainer);

apps/roam/src/utils/renderLinkedReferenceAdditions.ts

@@ -20,7 +20,6 @@ export const renderDiscourseContext = ({
       uid,
       id: nanoid(),
     }),
-    { layout: "inline" },
   );
   h1.setAttribute("data-roamjs-top-discourse-context", "true");
 };