* [RTE]: add scroll into placeholders list menu

epam · Feb 3, 2025 · b852ff2 · b852ff2
1 parent a03bacd
commit b852ff2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 22 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,10 @@
+# 5.xx.x - xx.xx.2025
+**What's New**
+
+
+**What's Fixed**
+* [RTE]: add scroll into placeholders list menu
+
 # 5.13.0 - 30.01.2025
 **What's New**
 * Update UUI packages JS target from `ES6` to `ES2021`

diff --git a/uui-editor/src/plugins/placeholderPlugin/PlaceholderPlugin.module.scss b/uui-editor/src/plugins/placeholderPlugin/PlaceholderPlugin.module.scss
@@ -18,6 +18,7 @@
     border: 1px solid var(--uui-divider-light);
     padding: 6px 0;
     min-width: 180px;
+    max-height: 300px;
 }
 
 .placeholder-block {

diff --git a/uui-editor/src/plugins/placeholderPlugin/placeholderPlugin.tsx b/uui-editor/src/plugins/placeholderPlugin/placeholderPlugin.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { useIsPluginActive, isTextSelected } from '../../helpers';
 import { ToolbarButton } from '../../implementation/ToolbarButton';
 import { PlaceholderBlock } from './PlaceholderBlock';
-
+import { ScrollBars } from '@epam/uui';
 import {
     PlateEditor, createPluginFactory, getPluginOptions, insertElements, PlatePlugin, AnyObject,
 } from '@udecode/plate-common';
@@ -48,27 +48,30 @@ export function PlaceholderButton({ editor }: IPlaceholderButton): any {
 
     const renderDropdownBody = () => {
         return (
-            <div className={ css.dropdownContainer }>
-                { params.items.map((i) => (
-                    <div
-                        className={ css.dropdownItem }
-                        key={ i.name }
-                        onMouseDown={ (event) => {
-                            event.preventDefault();
-                            insertElements(
-                                editor,
-                                {
-                                    data: i,
-                                    type: 'placeholder',
-                                    children: [{ text: '' }],
-                                },
-                            );
-                        } }
-                    >
-                        { i.name }
-                    </div>
-                )) }
-            </div>
+            <ScrollBars>
+                <div className={ css.dropdownContainer }>
+                    { params.items.map((i) => (
+                        <div
+                            className={ css.dropdownItem }
+                            key={ i.name }
+                            onMouseDown={ (event) => {
+                                event.preventDefault();
+                                insertElements(
+                                    editor,
+                                    {
+                                        data: i,
+                                        type: 'placeholder',
+                                        children: [{ text: '' }],
+                                    },
+                                );
+                            } }
+                        >
+                            { i.name }
+                        </div>
+                    )) }
+                </div>
+            </ScrollBars>
+
         );
     };