astro-tractstack 2.0.17 → 2.0.19

package/dist/index.js

@@ -104,6 +104,18 @@ async function w(t, e, c) {
       ),
       dest: "src/components/compositor/nodes/RenderChildren.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/compositor/nodes/GridLayout.tsx"
+      ),
+      dest: "src/components/compositor/nodes/GridLayout.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/compositor/nodes/GridLayout_eraser.tsx"
+      ),
+      dest: "src/components/compositor/nodes/GridLayout_eraser.tsx"
+    },
     {
       src: t(
         "../templates/src/components/compositor/nodes/GhostInsertBlock.tsx"
@@ -154,6 +166,12 @@ async function w(t, e, c) {
       src: t("../templates/src/components/compositor/nodes/Markdown.tsx"),
       dest: "src/components/compositor/nodes/Markdown.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/compositor/nodes/Markdown_eraser.tsx"
+      ),
+      dest: "src/components/compositor/nodes/Markdown_eraser.tsx"
+    },
     {
       src: t(
         "../templates/src/components/compositor/nodes/BgPaneWrapper.tsx"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.17",
+  "version": "2.0.19",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/codehooks/FeaturedArticleSetup.tsx

@@ -204,7 +204,7 @@ const FeaturedArticleSetup = ({
 
   if (!isPanelOpen) {
     return (
-      <div className="flex min-h-[200px] w-full flex-col items-center justify-center space-y-6 rounded-lg bg-slate-50 p-6">
+      <div className="flex min-h-48 w-full flex-col items-center justify-center space-y-6 rounded-lg bg-slate-50 p-6">
         <button
           onClick={() => setIsPanelOpen(true)}
           className="rounded-lg bg-cyan-600 px-6 py-3 font-bold text-white shadow-md transition-colors hover:bg-cyan-700"

package/templates/src/components/codehooks/ListContentSetup.tsx

@@ -236,7 +236,7 @@ const ListContentSetup = ({
   // If panel is not open, show only the configuration button
   if (!isPanelOpen) {
     return (
-      <div className="flex min-h-[200px] w-full flex-col items-center justify-center space-y-6 rounded-lg bg-slate-50 p-6">
+      <div className="flex min-h-48 w-full flex-col items-center justify-center space-y-6 rounded-lg bg-slate-50 p-6">
         <button
           onClick={() => setIsPanelOpen(true)}
           className="rounded-lg bg-cyan-600 px-6 py-3 font-bold text-white shadow-md transition-colors hover:bg-cyan-700"

package/templates/src/components/compositor/Compositor.tsx

@@ -57,6 +57,7 @@ const VERBOSE = false;
 const LOG_PREFIX = '[Compositor] ';
 
 export const Compositor = (props: CompositorProps) => {
+  //console.log(props.nodes)
   const [initialized, setInitialized] = useState(false);
   const [updateCounter, setUpdateCounter] = useState(0);
   const [isLoading, setIsLoading] = useState(true);

package/templates/src/components/compositor/Node.tsx

@@ -8,8 +8,12 @@ import {
 } from 'react';
 import { useStore } from '@nanostores/react';
 import { getCtx } from '@/stores/nodes';
-import { styleElementInfoStore, viewportKeyStore } from '@/stores/storykeep';
-import { getType } from '@/utils/compositor/typeGuards';
+import {
+  settingsPanelStore,
+  styleElementInfoStore,
+  viewportKeyStore,
+} from '@/stores/storykeep';
+import { isGridLayoutNode, getType } from '@/utils/compositor/typeGuards';
 import { NodeWithGuid } from './NodeWithGuid';
 import PanelVisibilityWrapper from './PanelVisibilityWrapper';
 import { Pane } from './nodes/Pane';
@@ -31,6 +35,9 @@ import { NodeBasicTagInsert } from './nodes/tagElements/NodeBasicTag_insert';
 import { NodeBasicTagEraser } from './nodes/tagElements/NodeBasicTag_eraser';
 import { NodeBasicTagSettings } from './nodes/tagElements/NodeBasicTag_settings';
 import { Pane_DesignLibrary } from './nodes/Pane_DesignLibrary';
+import { GridLayout } from './nodes/GridLayout';
+import { GridLayoutEraser } from './nodes/GridLayout_eraser';
+import { MarkdownEraser } from './nodes/Markdown_eraser';
 import AddPanePanel from '@/components/edit/pane/AddPanePanel';
 import ConfigPanePanel from '@/components/edit/pane/ConfigPanePanel';
 import StoryFragmentConfigPanel from '@/components/edit/storyfragment/StoryFragmentConfigPanel';
@@ -124,8 +131,18 @@ const getElement = (
   const type = getType(node);
 
   switch (type) {
-    case 'Markdown':
+    case 'Markdown': {
+      const toolModeVal = getCtx(props).toolModeValStore.get().value;
+      if (toolModeVal === 'eraser') {
+        const parentNode = node.parentId
+          ? getCtx(props).allNodes.get().get(node.parentId)
+          : null;
+        if (parentNode && isGridLayoutNode(parentNode)) {
+          return <MarkdownEraser {...sharedProps} />;
+        }
+      }
       return <Markdown {...sharedProps} />;
+    }
 
     case 'StoryFragment': {
       const sf = node as StoryFragmentNode;
@@ -308,6 +325,13 @@ const getElement = (
 
     case 'BgPane':
       return <BgPaneWrapper {...sharedProps} />;
+    case 'GridLayoutNode': {
+      const toolModeVal = getCtx(props).toolModeValStore.get().value;
+      if (toolModeVal === 'eraser') {
+        return <GridLayoutEraser {...sharedProps} />;
+      }
+      return <GridLayout {...sharedProps} />;
+    }
     case 'TagElement':
       return <TagElement {...sharedProps} />;
     // tag elements
@@ -328,27 +352,14 @@ const getElement = (
         );
 
         const handleElementClick = (e: MouseEvent<HTMLElement>) => {
-          // 1. ALWAYS stop the event from bubbling up to the Pane.
           e.stopPropagation();
-
-          // 2. Check the selection store. The handleMouseUp in Compositor.tsx
-          // has already run by the time this 'click' event fires.
-          //
-          // - If it was a drag, Compositor.tsx set 'isActive: true' (line 267).
-          // - If it was a click, Compositor.tsx called 'resetSelectionStore'
-          //   (line 242), so 'isActive: false'.
-          //
           const { isActive } = selectionStore.get();
-
           if (isActive) {
             // A drag just finished. The user's intent was to select text.
             // Do NOT open the panel.
             return;
           }
-
-          // 3. 'isActive' was false. This was a genuine click.
-          // We can safely open the settings panel.
-          // 'node' is already in scope from the getElement function.
+          // else
           handleClickEventDefault(node as FlatNode, true);
         };
 
@@ -459,6 +470,7 @@ const getElement = (
 const Node = memo((props: NodeProps) => {
   const node = getCtx(props).allNodes.get().get(props.nodeId) as FlatNode;
   const isPreview = getCtx(props).rootNodeId.get() === `tmp`;
+  const settingsPanel = useStore(settingsPanelStore);
 
   const {
     markdownParentId,
@@ -535,6 +547,18 @@ const Node = memo((props: NodeProps) => {
     : '';
 
   const element = getElement(node, props);
+  const isPanelActive =
+    settingsPanel?.action === 'style-parent' &&
+    settingsPanel?.nodeId === props.nodeId;
+  const isStyleableContainer =
+    node?.nodeType === 'Markdown' || isGridLayoutNode(node);
+
+  if (isPanelActive && isStyleableContainer) {
+    const highlightStyle = {
+      outline: '3.5px dotted rgba(255, 165, 0, 0.85)',
+    };
+    return <div style={highlightStyle}>{element}</div>;
+  }
 
   if (!isPreview && getCtx(props).showGuids.get()) {
     return <NodeWithGuid {...props} element={element} />;

package/templates/src/components/compositor/nodes/GhostInsertBlock.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo, useState } from 'react';
+import { memo, useMemo, useState, type MouseEvent } from 'react';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import {
@@ -29,6 +29,7 @@ export const GhostInsertBlock = memo((props: GhostInsertBlockProps) => {
   const lastChildNode = lastChildId
     ? (getCtx(props).allNodes.get().get(lastChildId) as FlatNode)
     : null;
+  const toolModeVal = getCtx(props).toolModeValStore.get().value;
 
   const allowedModes = useMemo(() => {
     if (isEmpty) {
@@ -50,7 +51,7 @@ export const GhostInsertBlock = memo((props: GhostInsertBlockProps) => {
     ) as ToolAddMode[];
   }, [isEmpty, lastChildId, parentNode, lastChildNode, $toolAddModes]);
 
-  const handleInsert = (mode: ToolAddMode, e: React.MouseEvent) => {
+  const handleInsert = (mode: ToolAddMode, e: MouseEvent) => {
     e.stopPropagation();
     const templateNode = getTemplateNode(mode);
     let newNodeId: string | null = null;
@@ -144,7 +145,7 @@ export const GhostInsertBlock = memo((props: GhostInsertBlockProps) => {
   }
 
   return (
-    <div className="my-4">
+    <div className="my-4 p-3.5 md:p-6">
       {showInsertOptions ? (
         <div className="rounded-lg border-2 border-cyan-600 bg-white p-3 text-gray-800 shadow-lg">
           <div className="mb-3 flex items-center justify-between border-b pb-2">
@@ -168,9 +169,11 @@ export const GhostInsertBlock = memo((props: GhostInsertBlockProps) => {
       ) : (
         <button
           onClick={(e) => {
-            e.stopPropagation();
-            settingsPanelStore.set(null);
-            setShowInsertOptions(true);
+            if (toolModeVal !== `eraser`) {
+              e.stopPropagation();
+              settingsPanelStore.set(null);
+              setShowInsertOptions(true);
+            }
           }}
           className="group w-full rounded-lg border-2 border-dashed border-cyan-500 bg-cyan-50 p-6 transition-colors hover:bg-cyan-100 dark:border-cyan-600 dark:bg-cyan-900 dark:hover:bg-cyan-800"
         >

package/templates/src/components/compositor/nodes/GridLayout.tsx

@@ -0,0 +1,124 @@
+import { useState, useEffect } from 'react';
+import { getCtx } from '@/stores/nodes';
+import { RenderChildren } from './RenderChildren';
+import { isGridLayoutNode } from '@/utils/compositor/typeGuards';
+import type { NodeProps } from '@/types/nodeProps';
+import type { ParentClassesPayload } from '@/types/compositorTypes';
+import { viewportKeyStore } from '@/stores/storykeep';
+
+export const GridLayout = (props: NodeProps) => {
+  const ctx = getCtx(props);
+  const node = ctx.allNodes.get().get(props.nodeId);
+
+  const [currentViewport, setCurrentViewport] = useState(
+    viewportKeyStore.get().value
+  );
+
+  useEffect(() => {
+    const unsubscribeViewport = viewportKeyStore.subscribe((newViewport) => {
+      setCurrentViewport(newViewport.value);
+    });
+    return () => unsubscribeViewport();
+  }, []);
+
+  if (!node || !isGridLayoutNode(node)) {
+    return <></>;
+  }
+
+  let isHidden = false;
+  switch (currentViewport) {
+    case 'mobile':
+      isHidden = !!node.hiddenViewportMobile;
+      break;
+    case 'tablet':
+      isHidden = !!node.hiddenViewportTablet;
+      break;
+    case 'desktop':
+      isHidden = !!node.hiddenViewportDesktop;
+      break;
+  }
+
+  if (isHidden) {
+    return (
+      <div
+        onClick={(e) => {
+          ctx.setClickedNodeId(props.nodeId, true);
+          e.stopPropagation();
+        }}
+        className="group my-4 w-full cursor-pointer rounded-lg border-2 border-dashed border-gray-400 bg-gray-100 p-6 transition-colors hover:bg-gray-200"
+        style={{ position: 'relative', zIndex: 10 }}
+      >
+        <div className="text-center font-bold text-gray-800">
+          Hidden on this Viewport
+        </div>
+      </div>
+    );
+  }
+
+  let gridCols = node.gridColumns.mobile;
+  switch (currentViewport) {
+    case 'tablet':
+      gridCols = node.gridColumns.tablet;
+      break;
+    case 'desktop':
+      gridCols = node.gridColumns.desktop;
+      break;
+  }
+  const gridClassName = `grid grid-cols-${gridCols}`;
+
+  const children = ctx.getChildNodeIDs(props.nodeId);
+
+  let nodesToRender: JSX.Element = (
+    <div className={gridClassName} style={{ position: 'relative', zIndex: 10 }}>
+      <RenderChildren children={children} nodeProps={props} />
+    </div>
+  );
+
+  if (
+    'parentClasses' in node &&
+    (node.parentClasses as ParentClassesPayload)?.length > 0
+  ) {
+    const parentClassesLength = (node.parentClasses as ParentClassesPayload)
+      .length;
+    for (let i = parentClassesLength; i > 0; --i) {
+      nodesToRender = (
+        <div
+          onClick={(e) => {
+            if (e.target !== e.currentTarget) {
+              return;
+            }
+            getCtx(props).setClickedParentLayer(i);
+            getCtx(props).setClickedNodeId(props.nodeId);
+            e.stopPropagation();
+          }}
+          onDoubleClick={(e) => {
+            if (e.target !== e.currentTarget) {
+              return;
+            }
+            getCtx(props).setClickedParentLayer(i);
+            getCtx(props).setClickedNodeId(props.nodeId, true);
+            e.stopPropagation();
+          }}
+          className={getCtx(props).getNodeClasses(
+            props.nodeId,
+            currentViewport,
+            i - 1
+          )}
+          style={
+            i === parentClassesLength
+              ? { position: 'relative', zIndex: 10 }
+              : undefined
+          }
+        >
+          {nodesToRender}
+        </div>
+      );
+    }
+  } else {
+    nodesToRender = (
+      <div style={{ position: 'relative', zIndex: 10 }}>{nodesToRender}</div>
+    );
+  }
+
+  return nodesToRender;
+};

package/templates/src/components/compositor/nodes/GridLayout_eraser.tsx

@@ -0,0 +1,33 @@
+import { getCtx } from '@/stores/nodes';
+import type { NodeProps } from '@/types/nodeProps';
+import { GridLayout } from './GridLayout';
+import type { MouseEvent } from 'react';
+
+export function GridLayoutEraser(props: NodeProps) {
+  const ctx = getCtx(props);
+
+  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const node = ctx.allNodes.get().get(props.nodeId);
+    if (!node) return;
+
+    if (
+      window.confirm(
+        'Are you sure you want to delete this grid layout and all its columns?'
+      )
+    ) {
+      ctx.deleteNode(props.nodeId);
+    }
+  };
+
+  return (
+    <div
+      className="outline-dashed outline-2 outline-red-500 hover:bg-red-500/10"
+      onClick={handleClick}
+    >
+      <GridLayout {...props} />
+    </div>
+  );
+}

package/templates/src/components/compositor/nodes/Markdown.tsx

@@ -3,6 +3,7 @@ import { getCtx } from '@/stores/nodes';
 import { viewportKeyStore } from '@/stores/storykeep';
 import { RenderChildren } from './RenderChildren';
 import { GhostInsertBlock } from './GhostInsertBlock';
+import { processGridClassesToString } from '@/utils/compositor/reduceNodesClassNames';
 import type { NodeProps } from '@/types/nodeProps';
 import type {
   MarkdownPaneFragmentNode,
@@ -13,40 +14,64 @@ import type {
 
 export const Markdown = (props: NodeProps) => {
   const id = props.nodeId;
-  const toolModeVal = getCtx(props).toolModeValStore.get().value;
-  const node = getCtx(props)
-    .allNodes.get()
-    .get(props.nodeId) as MarkdownPaneFragmentNode;
-  const isPreview = getCtx(props).rootNodeId.get() === `tmp`;
-  const children = getCtx(props).getChildNodeIDs(props.nodeId);
+  const ctx = getCtx(props);
+  const node = ctx.allNodes.get().get(id) as MarkdownPaneFragmentNode;
+  const isPreview = ctx.rootNodeId.get() === `tmp`;
+  const children = ctx.getChildNodeIDs(id);
   const isEmpty = children.length === 0;
   const lastChildId =
     children.length > 0 ? children[children.length - 1] : null;
 
-  // Track the viewport value in state so we can react to changes
   const [currentViewport, setCurrentViewport] = useState(
     viewportKeyStore.get().value
   );
 
-  // Subscribe to viewportKeyStore changes
   useEffect(() => {
     const unsubscribeViewport = viewportKeyStore.subscribe((newViewport) => {
       setCurrentViewport(newViewport.value);
     });
-
-    return () => {
-      unsubscribeViewport();
-    };
+    return () => unsubscribeViewport();
   }, []);
 
-  // Check for positioned background image
-  const allNodes = getCtx(props).allNodes.get();
-  const parentPaneId = node.parentId;
+  if (!node) return null;
+
+  let isHidden = false;
+  switch (currentViewport) {
+    case 'mobile':
+      isHidden = !!node.hiddenViewportMobile;
+      break;
+    case 'tablet':
+      isHidden = !!node.hiddenViewportTablet;
+      break;
+    case 'desktop':
+      isHidden = !!node.hiddenViewportDesktop;
+      break;
+  }
+
+  if (isHidden) {
+    return (
+      <div
+        onClick={(e) => {
+          ctx.setClickedNodeId(props.nodeId, true);
+          e.stopPropagation();
+        }}
+        className="group my-4 w-full cursor-pointer rounded-lg border-2 border-dashed border-gray-400 bg-gray-100 p-6 transition-colors hover:bg-gray-200"
+        style={{ position: 'relative', zIndex: 10 }}
+      >
+        <div className="text-center font-bold text-gray-800">
+          Hidden on this Viewport
+        </div>
+      </div>
+    );
+  }
+
+  const allNodes = ctx.allNodes.get();
+  const parentPaneId = ctx.getClosestNodeTypeFromId(id, 'Pane');
   const bgNode = parentPaneId
     ? (() => {
-        const childNodeIds = getCtx(props).getChildNodeIDs(parentPaneId);
+        const childNodeIds = ctx.getChildNodeIDs(parentPaneId);
         return childNodeIds
-          .map((id) => allNodes.get(id))
+          .map((childId) => allNodes.get(childId))
           .find(
             (n) =>
               n?.nodeType === 'BgPane' &&
@@ -58,18 +83,14 @@ export const Markdown = (props: NodeProps) => {
       })()
     : undefined;
 
-  // Helper function for size styles - NO MODIFIERS needed since React rerenders on viewport change
   function getSizeClasses(
     size: string,
     side: 'image' | 'content',
     viewport: string
   ): string {
-    // Mobile always gets full width (stacked layout)
     if (viewport === 'mobile') {
       return 'w-full';
     }
-
-    // Desktop/tablet get fractional widths
     switch (size) {
       case 'narrow':
         return side === 'image' ? 'w-1/3' : 'w-2/3';
@@ -83,7 +104,6 @@ export const Markdown = (props: NodeProps) => {
   const useFlexLayout =
     bgNode && (bgNode.position === 'left' || bgNode.position === 'right');
 
-  // Set flex direction based on currentViewport
   const flexDirection =
     currentViewport === 'mobile'
       ? 'flex-col'
@@ -91,20 +111,24 @@ export const Markdown = (props: NodeProps) => {
         ? 'flex-row-reverse'
         : 'flex-row';
 
+  const gridClassName = processGridClassesToString(node.gridClasses);
+
   let nodesToRender = (
     <>
       {useFlexLayout ? (
         <div
           className={`flex flex-nowrap items-center justify-center gap-6 md:gap-10 xl:gap-12 ${flexDirection}`}
         >
-          {/* Image Side - NO MODIFIERS because React rerenders on viewport change */}
           <div
-            className={`relative overflow-hidden ${getSizeClasses(bgNode.size || 'equal', 'image', currentViewport)}`}
+            className={`relative overflow-hidden ${getSizeClasses(
+              bgNode.size || 'equal',
+              'image',
+              currentViewport
+            )}`}
           >
             <RenderChildren children={[bgNode.id]} nodeProps={props} />
           </div>
 
-          {/* Content Side - NO MODIFIERS because React rerenders on viewport change */}
           <div
             className={getSizeClasses(
               bgNode.size || 'equal',
@@ -113,7 +137,7 @@ export const Markdown = (props: NodeProps) => {
             )}
           >
             <RenderChildren children={children} nodeProps={props} />
-            {!isPreview && [`text`, `insert`].includes(toolModeVal) && (
+            {!isPreview && (
               <GhostInsertBlock
                 nodeId={props.nodeId}
                 ctx={props.ctx}
@@ -126,7 +150,7 @@ export const Markdown = (props: NodeProps) => {
       ) : (
         <>
           <RenderChildren children={children} nodeProps={props} />
-          {!isPreview && [`text`, `insert`].includes(toolModeVal) && (
+          {!isPreview && (
             <GhostInsertBlock
               nodeId={props.nodeId}
               ctx={props.ctx}
@@ -149,16 +173,22 @@ export const Markdown = (props: NodeProps) => {
       nodesToRender = (
         <div
           onClick={(e) => {
-            getCtx(props).setClickedParentLayer(i);
-            getCtx(props).setClickedNodeId(props.nodeId);
+            if (e.target !== e.currentTarget) {
+              return;
+            }
+            ctx.setClickedParentLayer(i);
+            ctx.setClickedNodeId(props.nodeId);
             e.stopPropagation();
           }}
           onDoubleClick={(e) => {
-            getCtx(props).setClickedParentLayer(i);
-            getCtx(props).setClickedNodeId(props.nodeId, true);
+            if (e.target !== e.currentTarget) {
+              return;
+            }
+            ctx.setClickedParentLayer(i);
+            ctx.setClickedNodeId(props.nodeId, true);
             e.stopPropagation();
           }}
-          className={getCtx(props).getNodeClasses(id, currentViewport, i - 1)}
+          className={ctx.getNodeClasses(id, currentViewport, i - 1)}
           style={
             i === parentClassesLength
               ? { position: 'relative', zIndex: 10 }
@@ -169,11 +199,11 @@ export const Markdown = (props: NodeProps) => {
         </div>
       );
     }
-  } else {
-    nodesToRender = (
-      <div style={{ position: 'relative', zIndex: 10 }}>{nodesToRender}</div>
-    );
   }
 
-  return <>{nodesToRender}</>;
+  return (
+    <div className={gridClassName} style={{ position: 'relative', zIndex: 10 }}>
+      {nodesToRender}
+    </div>
+  );
 };

package/templates/src/components/compositor/nodes/Markdown_eraser.tsx

@@ -0,0 +1,56 @@
+import { getCtx } from '@/stores/nodes';
+import { Markdown } from './Markdown';
+import { isGridLayoutNode } from '@/utils/compositor/typeGuards';
+import { revertFromGrid } from '@/utils/compositor/nodesHelper';
+import type { NodeProps } from '@/types/nodeProps';
+import type { MouseEvent } from 'react';
+
+export function MarkdownEraser(props: NodeProps) {
+  const ctx = getCtx(props);
+
+  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const node = ctx.allNodes.get().get(props.nodeId);
+    if (!node || !node.parentId) return;
+
+    const parentNode = ctx.allNodes.get().get(node.parentId);
+    if (!parentNode || !isGridLayoutNode(parentNode)) {
+      ctx.deleteNode(props.nodeId);
+      return;
+    }
+
+    const children = ctx.getChildNodeIDs(parentNode.id);
+    const columnCount = children.length;
+
+    if (columnCount === 1) {
+      if (
+        window.confirm(
+          'This is the last column. Do you want to delete it and revert to a standard pane layout?'
+        )
+      ) {
+        revertFromGrid(parentNode.id);
+      }
+    } else {
+      if (
+        window.confirm(
+          `Are you sure you want to delete this column? ${
+            columnCount - 1
+          } columns will remain.`
+        )
+      ) {
+        ctx.deleteNode(props.nodeId);
+      }
+    }
+  };
+
+  return (
+    <div
+      className="outline-dashed outline-2 outline-red-500 hover:bg-red-500/10"
+      onClick={handleClick}
+    >
+      <Markdown {...props} />
+    </div>
+  );
+}

package/templates/src/components/compositor/preview/FeaturedArticlePreview.tsx

@@ -120,7 +120,10 @@ const FeaturedArticlePreview = ({ story }: FeaturedArticlePreviewProps) => {
 
       {/* This is the visible UI that reacts to state changes. */}
       {isLoading && (
-        <div className="flex aspect-[4/3] w-full items-center justify-center rounded-lg bg-gray-200">
+        <div
+          style={{ aspectRatio: '4 / 3' }}
+          className="flex w-full items-center justify-center rounded-lg bg-gray-200"
+        >
           <div className="h-12 w-12 animate-spin rounded-full border-4 border-solid border-cyan-600 border-t-transparent"></div>
         </div>
       )}
@@ -142,7 +145,10 @@ const FeaturedArticlePreview = ({ story }: FeaturedArticlePreviewProps) => {
               className="h-auto w-full rounded-lg object-cover shadow-lg"
             />
           ) : (
-            <div className="flex aspect-[4/3] w-full items-center justify-center rounded-lg bg-red-50 p-4 text-center text-sm text-red-700">
+            <div
+              style={{ aspectRatio: '4 / 3' }}
+              className="flex w-full items-center justify-center rounded-lg bg-red-50 p-4 text-center text-sm text-red-700"
+            >
               Could not display preview.
             </div>
           )}