Add MaxHeight props to SimplifiedEditor (#209)

Add MaxHeight props to SimplifiedEditor

src/components/Editor/SimplifiedEditor.tsx

@@ -44,6 +44,7 @@ type Props = {
   onChange?: (text: string) => void
   variant?: 'minimal' | 'bordered'
   maxLength?: number
+  maxHeight?: number
   submitButtonText?: string
   quoteEnabled?: boolean
   imageEnabled?: boolean
@@ -237,6 +238,11 @@ const SimplifiedEditor = (props: Props) => {
     }
   })
 
+  const maxHeightStyle = {
+    overflow: 'auto',
+    'max-height': `${props.maxHeight}px`
+  }
+
   return (
     <div
       ref={(el) => (wrapperEditorElRef.current = el)}
@@ -254,7 +260,7 @@ const SimplifiedEditor = (props: Props) => {
       <Show when={props.label && counter() > 0}>
         <div class={styles.label}>{props.label}</div>
       </Show>
-      <div ref={(el) => (editorElRef.current = el)} />
+      <div style={props.maxHeight && maxHeightStyle} ref={(el) => (editorElRef.current = el)} />
       <Show when={!props.onlyBubbleControls}>
         <div class={clsx(styles.controls, { [styles.alwaysVisible]: props.controlsAlwaysVisible })}>
           <div class={styles.actions}>

src/components/Editor/TextBubbleMenu/TextBubbleMenu.module.scss

@@ -1,8 +1,6 @@
 .TextBubbleMenu {
   background: var(--editor-bubble-menu-background);
   box-shadow: 0 4px 10px rgba(#000, 0.25);
-  max-height: 300px;
-  overflow: auto;
 
   &.growWidth {
     min-width: 460px;

src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx

@@ -113,6 +113,7 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
         </Match>
         <Match when={footnoteEditorOpen()}>
           <SimplifiedEditor
+            maxHeight={180}
             controlsAlwaysVisible={true}
             imageEnabled={true}
             placeholder={t('Enter footnote text')}