From d3f7ae33ba81fa729ddf4933b186b80fe4b8cd97 Mon Sep 17 00:00:00 2001
From: Dzmitry Tamashevich <diaamnj@mail.ru>
Date: Fri, 29 Dec 2023 17:16:00 +0300
Subject: [PATCH] fix scrollable editor

---
 uui-editor/src/SlateEditor.module.scss          | 17 +++++++++++------
 uui-editor/src/SlateEditor.tsx                  |  5 ++---
 ...odule.scss => PositionedToolbar.module.scss} |  0
 .../src/implementation/PositionedToolbar.tsx    |  2 +-
 ...ar.module.scss => StickyToolbar.module.scss} |  0
 uui-editor/src/implementation/StickyToolbar.tsx |  4 ++--
 6 files changed, 16 insertions(+), 12 deletions(-)
 rename uui-editor/src/implementation/{Toolbar.module.scss => PositionedToolbar.module.scss} (100%)
 rename uui-editor/src/implementation/{Sidebar.module.scss => StickyToolbar.module.scss} (100%)

diff --git a/uui-editor/src/SlateEditor.module.scss b/uui-editor/src/SlateEditor.module.scss
index d3c630fc88..e7fa233cf5 100644
--- a/uui-editor/src/SlateEditor.module.scss
+++ b/uui-editor/src/SlateEditor.module.scss
@@ -11,10 +11,16 @@
     }
 }
 
+.editor {
+    padding: 0 24px;
+    flex: 1;
+}
+
 .container {
     position: relative;
     border-width: 1px;
     width: 100%;
+    height: 100%;
     box-sizing: border-box;
 
     :global(.ordered-list),
@@ -83,9 +89,7 @@
 
 .placeholder {
     position: absolute;
-    top: 0;
     left: 12px;
-    width: 100%;
     max-width: 100%;
     display: block;
     user-select: none;
@@ -108,10 +112,11 @@
     font-size: 16px;
 }
 
-.with-scrollbars {
+.scrollbars {
     height: 100%;
 }
 
-.scrollbars {
-    width: 100%;
-}
\ No newline at end of file
+.scrollbars > div {
+    display: flex;
+    flex-direction: column;
+}
diff --git a/uui-editor/src/SlateEditor.tsx b/uui-editor/src/SlateEditor.tsx
index 7dde565b62..046230dddf 100644
--- a/uui-editor/src/SlateEditor.tsx
+++ b/uui-editor/src/SlateEditor.tsx
@@ -53,7 +53,7 @@ function Editor(props: PlateEditorProps) {
                 className={ css.editor }
                 onKeyDown={ props.onKeyDown }
                 onBlur={ props.onBlur }
-                renderPlaceholder={ ({ attributes }: RenderPlaceholderProps) => {
+                renderPlaceholder={ ({ attributes }) => {
                     return isEditorValueEmpty(editor.children) && (
                         <div
                             { ...attributes }
@@ -64,7 +64,7 @@ function Editor(props: PlateEditorProps) {
                         </div>
                     );
                 } }
-                style={ { height: '100%', padding: '0 24px', minHeight: props.minHeight } }
+                style={ { minHeight: props.minHeight } }
             />
             <MainToolbar />
             <MarksToolbar />
@@ -83,7 +83,6 @@ function Editor(props: PlateEditorProps) {
                 props.scrollbars && css.withScrollbars,
                 props.fontSize === '16' ? 'uui-typography-size-16' : 'uui-typography-size-14',
             ) }
-            style={ { minHeight: props.minHeight || 350 } }
             { ...props.rawProps }
         >
             { props.scrollbars
diff --git a/uui-editor/src/implementation/Toolbar.module.scss b/uui-editor/src/implementation/PositionedToolbar.module.scss
similarity index 100%
rename from uui-editor/src/implementation/Toolbar.module.scss
rename to uui-editor/src/implementation/PositionedToolbar.module.scss
diff --git a/uui-editor/src/implementation/PositionedToolbar.tsx b/uui-editor/src/implementation/PositionedToolbar.tsx
index 140a1bdb0f..6cf0105642 100644
--- a/uui-editor/src/implementation/PositionedToolbar.tsx
+++ b/uui-editor/src/implementation/PositionedToolbar.tsx
@@ -7,7 +7,7 @@ import { Popper } from 'react-popper';
 import { Range } from 'slate';
 
 import { isImageSelected, isTextSelected } from '../helpers';
-import css from './Toolbar.module.scss';
+import css from './PositionedToolbar.module.scss';
 import { useLayer } from '@epam/uui-core';
 
 interface ToolbarProps {
diff --git a/uui-editor/src/implementation/Sidebar.module.scss b/uui-editor/src/implementation/StickyToolbar.module.scss
similarity index 100%
rename from uui-editor/src/implementation/Sidebar.module.scss
rename to uui-editor/src/implementation/StickyToolbar.module.scss
diff --git a/uui-editor/src/implementation/StickyToolbar.tsx b/uui-editor/src/implementation/StickyToolbar.tsx
index e388dacd95..ac64f25ef0 100644
--- a/uui-editor/src/implementation/StickyToolbar.tsx
+++ b/uui-editor/src/implementation/StickyToolbar.tsx
@@ -3,7 +3,7 @@ import { isBlock, useEditorState } from '@udecode/plate-common';
 import cx from 'classnames';
 import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
 
-import css from './Sidebar.module.scss';
+import css from './StickyToolbar.module.scss';
 import { useLayer } from '@epam/uui-core';
 
 interface SidebarProps {
@@ -49,7 +49,7 @@ export const StickyToolbar: React.FC<SidebarProps> = ({ isReadonly, children })
             position: 'sticky',
             bottom: 12,
             display: 'flex',
-            minHeight: 0,
+            minHeight: 52,
             zIndex,
         } }
         >