Merge pull request #1898 from epam/fix-empty-scrollable-area-and-toolbar

[SlateEditor] Fix scrollable editor
epam · Jan 3, 2024 · 20cde46 · 20cde46
2 parents 02b4a96 + d3f7ae3
commit 20cde46
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 12 deletions.
diff --git 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%;
-}
+.scrollbars > div {
+    display: flex;
+    flex-direction: column;
+}
diff --git 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/...or/src/implementation/Toolbar.module.scss → ...lementation/PositionedToolbar.module.scss b/...or/src/implementation/Toolbar.module.scss → ...lementation/PositionedToolbar.module.scss
diff --git 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/...or/src/implementation/Sidebar.module.scss → .../implementation/StickyToolbar.module.scss b/...or/src/implementation/Sidebar.module.scss → .../implementation/StickyToolbar.module.scss
diff --git 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,
         } }
         >