feat: add headerTitle and headerPath APIs

measuredco · Aug 14, 2023 · ae5c7c2 · ae5c7c2
1 parent 2ffb3ce
commit ae5c7c2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/apps/demo/app/[...puckPath]/client.tsx b/apps/demo/app/[...puckPath]/client.tsx
@@ -52,6 +52,7 @@ export function Client({
             localStorage.setItem(key, JSON.stringify(data));
           }}
           plugins={[headingAnalyzer]}
+          headerPath={path}
           renderHeaderActions={() => (
             <>
               <Button href={path} newTab variant="secondary">

diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
@@ -60,6 +60,8 @@ export function Puck({
   plugins = [],
   renderHeader,
   renderHeaderActions,
+  headerTitle,
+  headerPath,
 }: {
   config: Config;
   data: Data;
@@ -75,6 +77,8 @@ export function Puck({
     data: Data;
     setData: (data: Data) => void;
   }) => ReactElement;
+  headerTitle?: string;
+  headerPath?: string;
 }) {
   const [data, setData] = useState(initialData);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
@@ -256,7 +260,12 @@ export function Puck({
                   }}
                 >
                   <Heading rank={2} size="xs">
-                    {data.root.title || "Page"}
+                    {headerTitle || data.root.title || "Page"}
+                    {headerPath && (
+                      <small style={{ fontWeight: 400, marginLeft: 4 }}>
+                        <code>{headerPath}</code>
+                      </small>
+                    )}
                   </Heading>
                 </div>
                 <div