Skip to content

Commit fb62e81

Browse files
makhnatkinclaude
makhnatkin
and
claude
committed
feat(GridBlockTemplates): make the templates list scrollable
Wrap the menu in both the container-templates and block-insert popups in a scrollable container (max-height) so a long list of templates no longer overflows the viewport; the search field stays pinned above it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 92c1dca commit fb62e81

3 files changed

Lines changed: 65 additions & 55 deletions

File tree

‎packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -94,33 +94,35 @@ export const BlockInsertPopup: React.FC<BlockInsertPopupProps> = ({
9494
autoFocus
9595
/>
9696
</div>
97-
<Menu className={stop}>
98-
<Menu.Item
99-
className={stop}
100-
iconStart={<Icon data={Code} />}
101-
onClick={() => setAddingCustomHtml(true)}
102-
>
103-
{i18n('custom_html')}
104-
</Menu.Item>
105-
{filtered.map((template) => (
97+
<div className={b('templates-list', [stop])}>
98+
<Menu className={stop}>
10699
<Menu.Item
107-
key={template.id}
108100
className={stop}
109-
iconStart={<Icon data={Plus} />}
110-
onClick={() => {
111-
onApplyTemplate(template);
112-
close();
113-
}}
101+
iconStart={<Icon data={Code} />}
102+
onClick={() => setAddingCustomHtml(true)}
114103
>
115-
{template.title}
104+
{i18n('custom_html')}
116105
</Menu.Item>
117-
))}
118-
{filtered.length === 0 && (
119-
<Menu.Item disabled className={stop}>
120-
{i18n('block_templates_empty')}
121-
</Menu.Item>
122-
)}
123-
</Menu>
106+
{filtered.map((template) => (
107+
<Menu.Item
108+
key={template.id}
109+
className={stop}
110+
iconStart={<Icon data={Plus} />}
111+
onClick={() => {
112+
onApplyTemplate(template);
113+
close();
114+
}}
115+
>
116+
{template.title}
117+
</Menu.Item>
118+
))}
119+
{filtered.length === 0 && (
120+
<Menu.Item disabled className={stop}>
121+
{i18n('block_templates_empty')}
122+
</Menu.Item>
123+
)}
124+
</Menu>
125+
</div>
124126
</>
125127
)}
126128
</div>

‎packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,10 @@
2424
&__templates-search {
2525
margin-bottom: 6px;
2626
}
27+
28+
&__templates-list {
29+
overflow-y: auto;
30+
31+
max-height: 280px;
32+
}
2733
}

‎packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -110,43 +110,45 @@ export const TemplatesPopup: React.FC<TemplatesPopupProps> = ({
110110
/>
111111
</div>
112112
)}
113-
<Menu className={stop}>
114-
{allowAdd && (
115-
<>
113+
<div className={b('templates-list', [stop])}>
114+
<Menu className={stop}>
115+
{allowAdd && (
116+
<>
117+
<Menu.Item
118+
className={stop}
119+
iconStart={<Icon data={Plus} />}
120+
onClick={() => setAdding(true)}
121+
>
122+
{i18n('add_template')}
123+
</Menu.Item>
124+
<Menu.Item
125+
className={stop}
126+
iconStart={<Icon data={TrashBin} />}
127+
onClick={handleClear}
128+
>
129+
{i18n('clear_templates')}
130+
</Menu.Item>
131+
</>
132+
)}
133+
{filtered.map((template) => (
116134
<Menu.Item
135+
key={template.id}
117136
className={stop}
118-
iconStart={<Icon data={Plus} />}
119-
onClick={() => setAdding(true)}
137+
onClick={() => {
138+
onApply(template);
139+
close();
140+
}}
120141
>
121-
{i18n('add_template')}
142+
{template.title}
122143
</Menu.Item>
123-
<Menu.Item
124-
className={stop}
125-
iconStart={<Icon data={TrashBin} />}
126-
onClick={handleClear}
127-
>
128-
{i18n('clear_templates')}
144+
))}
145+
{filtered.length === 0 && (
146+
<Menu.Item disabled className={stop}>
147+
{emptyText}
129148
</Menu.Item>
130-
</>
131-
)}
132-
{filtered.map((template) => (
133-
<Menu.Item
134-
key={template.id}
135-
className={stop}
136-
onClick={() => {
137-
onApply(template);
138-
close();
139-
}}
140-
>
141-
{template.title}
142-
</Menu.Item>
143-
))}
144-
{filtered.length === 0 && (
145-
<Menu.Item disabled className={stop}>
146-
{emptyText}
147-
</Menu.Item>
148-
)}
149-
</Menu>
149+
)}
150+
</Menu>
151+
</div>
150152
</>
151153
)}
152154
</div>

0 commit comments

Comments
 (0)