astro-tractstack 2.0.17 → 2.0.19

package/templates/src/components/edit/pane/AddPanePanel_reuse.tsx

@@ -310,7 +310,7 @@ const AddPaneReUsePanel = ({
       <style>{comboboxItemStyles}</style>
       <div className="w-full rounded-md bg-white p-1.5">
         <div className="flex flex-wrap items-center gap-2">
-          <div className="flex min-w-[200px] flex-wrap items-center gap-2">
+          <div className="flex min-w-48 flex-wrap items-center gap-2">
             <button
               onClick={() => setMode(PaneAddMode.DEFAULT)}
               className="w-fit flex-none rounded bg-gray-100 px-3 py-1 text-sm text-gray-700 transition-colors hover:bg-gray-200 focus:bg-gray-200"
@@ -323,7 +323,7 @@ const AddPaneReUsePanel = ({
             </div>
           </div>
 
-          <div className="min-w-[300px] flex-1">
+          <div className="min-w-72 flex-1">
             <Combobox.Root
               collection={collection}
               value={[]}

package/templates/src/components/edit/pane/ConfigPanePanel.tsx

@@ -9,11 +9,7 @@ import {
   isContextPaneNode,
   hasBeliefPayload,
 } from '@/utils/compositor/typeGuards';
-import {
-  settingsPanelStore,
-  viewportKeyStore,
-  fullContentMapStore,
-} from '@/stores/storykeep';
+import { settingsPanelStore, fullContentMapStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import PaneTitlePanel from './PanePanel_title';
 import PaneMagicPathPanel from './PanePanel_path';
@@ -34,8 +30,6 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
   const isActiveMode =
     activePaneMode.panel === 'settings' && activePaneMode.paneId === nodeId;
   const $contentMap = useStore(fullContentMapStore);
-  const $viewportKey = useStore(viewportKeyStore);
-  const isMobile = $viewportKey.value === `mobile`;
 
   const allNodes = ctx.allNodes.get();
   const paneNode = allNodes.get(nodeId) as PaneNode;

package/templates/src/components/edit/pane/PanePanel_impression.tsx

@@ -200,7 +200,7 @@ const PaneImpressionPanel = ({ nodeId, setMode }: PaneImpressionPanelProps) => {
               onChange={(e) => handleInputChange('body', e.target.value)}
               onBlur={handleBlur}
               placeholder="Enter impression body text"
-              className={`${commonInputClass} min-h-[100px]`}
+              className={`${commonInputClass} min-h-24`}
             />
           </div>
 

package/templates/src/components/edit/pane/RestylePaneModal.tsx

@@ -130,7 +130,7 @@ const TemplatePreviewItem = ({
         )}
       </div>
       <div className="p-3">
-        <h3 className="truncate font-semibold" title={template.title}>
+        <h3 className="truncate font-bold" title={template.title}>
           {template.title}
         </h3>
         <p className="text-sm text-gray-600">
@@ -404,9 +404,12 @@ export const RestylePaneModal = ({ config }: RestylePaneModalProps) => {
       <Portal>
         <Dialog.Backdrop className="z-103 fixed inset-0 bg-black/70" />
         <Dialog.Positioner className="z-104 fixed inset-0 flex items-center justify-center">
-          <Dialog.Content className="flex h-[90vh] w-[90vw] flex-col rounded-lg bg-white shadow-2xl">
+          <Dialog.Content
+            className="flex flex-col rounded-lg bg-white shadow-2xl"
+            style={{ maxHeight: '90vw', width: '90vw' }}
+          >
             <header className="flex items-center justify-between border-b p-4">
-              <Dialog.Title className="text-xl font-semibold">
+              <Dialog.Title className="text-xl font-bold">
                 Restyle Pane from Design Library
               </Dialog.Title>
               <Dialog.CloseTrigger
@@ -427,7 +430,7 @@ export const RestylePaneModal = ({ config }: RestylePaneModalProps) => {
                 className="w-48"
                 positioning={{ gutter: 4 }}
               >
-                <Select.Label className="mb-1 text-sm font-medium">
+                <Select.Label className="mb-1 text-sm font-bold">
                   Category
                 </Select.Label>
                 <Select.Control>
@@ -461,7 +464,7 @@ export const RestylePaneModal = ({ config }: RestylePaneModalProps) => {
                 className="flex-1"
                 positioning={{ gutter: 4 }}
               >
-                <Combobox.Label className="mb-1 text-sm font-medium">
+                <Combobox.Label className="mb-1 text-sm font-bold">
                   Filter by Title
                 </Combobox.Label>
                 <Combobox.Control>

package/templates/src/components/edit/pane/steps/AiDesignStep.tsx

@@ -37,11 +37,11 @@ export const AiDesignStep = ({
 
   return (
     <div className="space-y-6 rounded-lg bg-gray-50 p-4 shadow-inner">
-      <label className="block text-lg font-semibold text-gray-800">
+      <label className="block text-lg font-bold text-gray-800">
         2. Configure AI Design
       </label>
       <div>
-        <label className="block text-base font-semibold text-gray-800">
+        <label className="block text-base font-bold text-gray-800">
           Color Harmony
         </label>
         <div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
@@ -58,7 +58,7 @@ export const AiDesignStep = ({
               />
               <label
                 htmlFor={`harmony-${option}`}
-                className="text-sm font-medium text-gray-700"
+                className="text-sm font-bold text-gray-700"
               >
                 {option}
               </label>
@@ -89,7 +89,7 @@ export const AiDesignStep = ({
       </div>
 
       <div>
-        <label className="block text-base font-semibold text-gray-800">
+        <label className="block text-base font-bold text-gray-800">
           Theme / Mood
         </label>
         <div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
@@ -106,7 +106,7 @@ export const AiDesignStep = ({
               />
               <label
                 htmlFor={`theme-${option}`}
-                className="text-sm font-medium text-gray-700"
+                className="text-sm font-bold text-gray-700"
               >
                 {option}
               </label>
@@ -118,7 +118,7 @@ export const AiDesignStep = ({
       <div>
         <label
           htmlFor="additional-notes"
-          className="block text-base font-semibold text-gray-800"
+          className="block text-base font-bold text-gray-800"
         >
           Additional Design Notes (Optional)
         </label>

package/templates/src/components/edit/pane/steps/CopyInputStep.tsx

@@ -30,7 +30,7 @@ export const CopyInputStep = ({
 
   return (
     <div className="space-y-4 rounded-lg bg-gray-50 p-4 shadow-inner">
-      <label className="block text-lg font-semibold text-gray-800">
+      <label className="block text-lg font-bold text-gray-800">
         1. Provide Content
       </label>
       <div className="my-2 flex space-x-4">
@@ -46,7 +46,7 @@ export const CopyInputStep = ({
           />
           <label
             htmlFor="copy-prompt-mode"
-            className="text-sm font-medium text-gray-700"
+            className="text-sm font-bold text-gray-700"
           >
             Write a prompt
           </label>
@@ -63,7 +63,7 @@ export const CopyInputStep = ({
           />
           <label
             htmlFor="copy-raw-mode"
-            className="text-sm font-medium text-gray-700"
+            className="text-sm font-bold text-gray-700"
           >
             Provide Copy (Markdown)
           </label>

package/templates/src/components/edit/pane/steps/DesignLibraryStep.tsx

@@ -139,7 +139,7 @@ const TemplatePreviewItem = ({
         </div>
       </div>
       <div className="flex-grow p-3">
-        <h3 className="truncate font-semibold" title={title}>
+        <h3 className="truncate font-bold" title={title}>
           {title}
         </h3>
         <p className="text-sm capitalize text-gray-600">{category}</p>
@@ -226,7 +226,7 @@ export const DesignLibraryStep = ({
 
   return (
     <div className="flex h-full flex-col space-y-4 rounded-lg bg-gray-50 p-4 shadow-inner">
-      <label className="block text-lg font-semibold text-gray-800">
+      <label className="block text-lg font-bold text-gray-800">
         2. Choose a Design
       </label>
 
@@ -241,7 +241,7 @@ export const DesignLibraryStep = ({
           className="w-48"
           positioning={{ gutter: 4 }}
         >
-          <Select.Label className="mb-1 text-sm font-medium text-gray-700">
+          <Select.Label className="mb-1 text-sm font-bold text-gray-700">
             Category
           </Select.Label>
           <Select.Control>
@@ -280,7 +280,7 @@ export const DesignLibraryStep = ({
           className="flex-1"
           positioning={{ gutter: 4 }}
         >
-          <Combobox.Label className="mb-1 text-sm font-medium text-gray-700">
+          <Combobox.Label className="mb-1 text-sm font-bold text-gray-700">
             Filter by Title
           </Combobox.Label>
           <Combobox.Control>

package/templates/src/components/edit/panels/StyleElementPanel.tsx

@@ -5,18 +5,22 @@ import {
   settingsPanelStore,
 } from '@/stores/storykeep';
 import { StylesMemory } from '@/components/edit/state/StylesMemory';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import { tagTitles } from '@/types/compositorTypes';
 import type {
   Tag,
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
-interface StyleElementPanelProps {
+export interface StyleElementPanelProps {
   node: FlatNode;
-  parentNode: MarkdownPaneFragmentNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
   onTitleChange?: (title: string) => void;
 }
 
@@ -25,7 +29,10 @@ const StyleElementPanel = ({
   parentNode,
   onTitleChange,
 }: StyleElementPanelProps) => {
-  if (!node?.tagName || !isMarkdownPaneFragmentNode(parentNode)) {
+  if (
+    !node?.tagName ||
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
+  ) {
     return null;
   }
 

package/templates/src/components/edit/panels/StyleElementPanel_add.tsx

@@ -9,13 +9,13 @@ import {
   settingsPanelStore,
 } from '@/stores/storykeep';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
-import { useDropdownDirection } from '@/utils/helpers';
 import {
-  tagTitles,
-  type Tag,
-  type BasePanelProps,
-} from '@/types/compositorTypes';
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
+import { useDropdownDirection } from '@/utils/helpers';
+import type { StyleElementPanelProps } from './StyleElementPanel';
+import { tagTitles, type Tag } from '@/types/compositorTypes';
 
 const RECOMMENDED_STYLES: {
   [key: string]: Array<{ key: string; title: string }>;
@@ -123,7 +123,7 @@ const StyleElementPanelAdd = ({
   node,
   parentNode,
   onTitleChange,
-}: BasePanelProps) => {
+}: StyleElementPanelProps) => {
   const [query, setQuery] = useState('');
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
@@ -134,7 +134,7 @@ const StyleElementPanelAdd = ({
     !node ||
     !node.tagName ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   ) {
     return null;
   }

package/templates/src/components/edit/panels/StyleElementPanel_remove.tsx

@@ -6,22 +6,32 @@ import {
 } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import { tagTitles } from '@/types/compositorTypes';
 import type {
   Tag,
-  BasePanelProps,
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
+export interface StyleElementRemovePanelProps {
+  node: FlatNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
+  className: string;
+  onTitleChange?: (title: string) => void;
+}
+
 const StyleElementRemovePanel = ({
   node,
   parentNode,
   className,
   onTitleChange,
-}: BasePanelProps) => {
+}: StyleElementRemovePanelProps) => {
   if (!className || !node?.tagName) return null;
 
   const friendlyName = tailwindClasses[className]?.title || className;
@@ -40,7 +50,7 @@ const StyleElementRemovePanel = ({
       !node ||
       !className ||
       !parentNode ||
-      !isMarkdownPaneFragmentNode(parentNode)
+      (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
     ) {
       console.error('Missing required properties for class removal');
       return;

package/templates/src/components/edit/panels/StyleElementPanel_update.tsx

@@ -7,15 +7,27 @@ import {
 import ViewportComboBox from '@/components/fields/ViewportComboBox';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import { getCtx } from '@/stores/nodes';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import { tagTitles } from '@/types/compositorTypes';
 import type {
   Tag,
-  BasePanelProps,
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
+import type { BrandConfig } from '@/types/tractstack';
+
+export interface StyleElementUpdatePanelProps {
+  node: FlatNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
+  className: string;
+  onTitleChange?: (title: string) => void;
+  config?: BrandConfig | null;
+}
 
 const StyleElementUpdatePanel = ({
   node,
@@ -23,12 +35,12 @@ const StyleElementUpdatePanel = ({
   className,
   onTitleChange,
   config,
-}: BasePanelProps) => {
+}: StyleElementUpdatePanelProps) => {
   if (
     !node ||
     !className ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   )
     return null;
 

package/templates/src/components/edit/panels/StyleImagePanel.tsx

@@ -2,20 +2,24 @@ import { useMemo, useState } from 'react';
 import { getCtx } from '@/stores/nodes';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { StylesMemory } from '@/components/edit/state/StylesMemory';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import ImageUpload, { type ImageParams } from '@/components/fields/ImageUpload';
 import type {
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
 interface StyleImagePanelProps {
   node: FlatNode;
   containerNode: FlatNode;
   outerContainerNode: FlatNode;
-  parentNode: MarkdownPaneFragmentNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
 }
 
 const StyleImagePanel = ({
@@ -300,7 +304,7 @@ const StyleImagePanel = ({
     !node?.tagName ||
     !containerNode?.tagName ||
     !outerContainerNode?.tagName ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   ) {
     return null;
   }

package/templates/src/components/edit/panels/StyleImagePanel_add.tsx

@@ -6,7 +6,10 @@ import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { useDropdownDirection } from '@/utils/helpers';
 import type { BasePanelProps } from '@/types/compositorTypes';
 
@@ -77,7 +80,11 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   const comboboxRef = useRef<HTMLDivElement>(null);
   const { openAbove } = useDropdownDirection(comboboxRef);
 
-  if (!node?.tagName || !parentNode || !isMarkdownPaneFragmentNode(parentNode))
+  if (
+    !node?.tagName ||
+    !parentNode ||
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
+  )
     return null;
 
   const isOuterContainer = node.tagName === 'ul' || node.tagName === 'ol';

package/templates/src/components/edit/panels/StyleImagePanel_remove.tsx

@@ -2,7 +2,10 @@ import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import type { FlatNode, BasePanelProps } from '@/types/compositorTypes';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 
 const StyleImageRemovePanel = ({
@@ -15,7 +18,7 @@ const StyleImageRemovePanel = ({
     !className ||
     !node?.tagName ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   ) {
     return null;
   }

package/templates/src/components/edit/panels/StyleImagePanel_update.tsx

@@ -3,7 +3,10 @@ import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import ViewportComboBox from '@/components/fields/ViewportComboBox';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import type {
   BasePanelProps,
@@ -22,7 +25,7 @@ const StyleImageUpdatePanel = ({
     !node ||
     !className ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   )
     return null;
 

package/templates/src/components/edit/panels/StyleLiElementPanel.tsx

@@ -1,6 +1,9 @@
 import { useMemo } from 'react';
 import { settingsPanelStore } from '@/stores/storykeep';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import { StylesMemory } from '@/components/edit/state/StylesMemory';
 import { tagTitles } from '@/types/compositorTypes';
@@ -8,12 +11,13 @@ import type {
   Tag,
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
 interface StyleLiElementPanelProps {
   node: FlatNode;
   outerContainerNode: FlatNode;
-  parentNode: MarkdownPaneFragmentNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
 }
 
 const StyleLiElementPanel = ({
@@ -24,7 +28,7 @@ const StyleLiElementPanel = ({
   if (
     !node?.tagName ||
     !outerContainerNode?.tagName ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   ) {
     return null;
   }

package/templates/src/components/edit/panels/StyleLiElementPanel_add.tsx

@@ -6,7 +6,10 @@ import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { useDropdownDirection } from '@/utils/helpers';
 import type { BasePanelProps, FlatNode } from '@/types/compositorTypes';
 
@@ -70,7 +73,11 @@ const StyleLiElementAddPanel = ({
   const comboboxRef = useRef<HTMLDivElement>(null);
   const { openAbove } = useDropdownDirection(comboboxRef);
 
-  if (!node?.tagName || !parentNode || !isMarkdownPaneFragmentNode(parentNode))
+  if (
+    !node?.tagName ||
+    !parentNode ||
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
+  )
     return null;
 
   const isContainer = node.tagName === 'ul' || node.tagName === 'ol';

package/templates/src/components/edit/panels/StyleLiElementPanel_remove.tsx

@@ -1,7 +1,10 @@
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import type {
   BasePanelProps,
@@ -19,7 +22,7 @@ const StyleLiElementRemovePanel = ({
     !className ||
     !node?.tagName ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   )
     return null;
 

package/templates/src/components/edit/panels/StyleLiElementPanel_update.tsx

@@ -3,7 +3,10 @@ import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import ViewportComboBox from '@/components/fields/ViewportComboBox';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import { cloneDeep } from '@/utils/helpers';
 import type {
   BasePanelProps,
@@ -22,7 +25,7 @@ const StyleLiElementUpdatePanel = ({
     !node ||
     !className ||
     !parentNode ||
-    !isMarkdownPaneFragmentNode(parentNode)
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
   )
     return null;