Add SimpleBar ref to recalculate on TextFormatTools toggle

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/TextFormatTools.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
 
 import { Collapse } from 'reactstrap';
+import type SimpleBar from 'simplebar-react';
 
 import type { GlobalCodeMirrorEditorKey } from '../../../../consts';
 import { useCodeMirrorEditorIsolated } from '../../../stores/codemirror-editor';
@@ -9,7 +10,6 @@ import styles from './TextFormatTools.module.scss';
 
 const btnTextFormatToolsTogglerClass = styles['btn-text-format-tools-toggler'];
 
-
 type TogglarProps = {
   isOpen: boolean,
   onClick?: () => void,
@@ -34,10 +34,11 @@ const TextFormatToolsToggler = (props: TogglarProps): JSX.Element => {
 
 type TextFormatToolsType = {
   editorKey: string | GlobalCodeMirrorEditorKey,
+  simpleBarRef: React.RefObject<SimpleBar>,
 }
 
 export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
-  const { editorKey } = props;
+  const { editorKey, simpleBarRef } = props;
   const [isOpen, setOpen] = useState(false);
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
 
@@ -45,6 +46,12 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
     setOpen(bool => !bool);
   }, []);
 
+  const recalculateSimpleBar = useCallback(() => {
+    if (simpleBarRef.current) {
+      simpleBarRef.current.recalculate();
+    }
+  }, [simpleBarRef]);
+
   const onClickInsertMarkdownElements = (prefix: string, suffix: string) => {
     codeMirrorEditor?.insertMarkdownElements(prefix, suffix);
   };
@@ -57,7 +64,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
     <div className="d-flex">
       <TextFormatToolsToggler isOpen={isOpen} onClick={toggle} />
 
-      <Collapse isOpen={isOpen} horizontal>
+      <Collapse isOpen={isOpen} horizontal onEntered={recalculateSimpleBar} onExited={recalculateSimpleBar}>
         <div className="d-flex px-1 gap-1" style={{ width: '220px' }}>
           <button type="button" className="btn btn-toolbar-button" onClick={() => onClickInsertMarkdownElements('**', '**')}>
             <span className="material-symbols-outlined fs-5">format_bold</span>

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/Toolbar.tsx

@@ -1,6 +1,7 @@
-import { memo } from 'react';
+import { memo, useRef } from 'react';
 
 import type { AcceptedUploadFileType } from '@growi/core';
+import SimpleBar from 'simplebar-react';
 
 import type { GlobalCodeMirrorEditorKey } from '../../../../consts';
 
@@ -20,18 +21,25 @@ type Props = {
 }
 
 export const Toolbar = memo((props: Props): JSX.Element => {
-
   const { editorKey, acceptedUploadFileType, onUpload } = props;
+  const simpleBarRef = useRef<SimpleBar>(null);
+
   return (
-    <div className={`d-flex gap-2 py-1 px-2 px-md-3 border-top ${styles['codemirror-editor-toolbar']}`}>
-      <AttachmentsDropup editorKey={editorKey} onUpload={onUpload} acceptedUploadFileType={acceptedUploadFileType} />
-      <TextFormatTools editorKey={editorKey} />
-      <EmojiButton
-        editorKey={editorKey}
-      />
-      <TableButton editorKey={editorKey} />
-      <DiagramButton editorKey={editorKey} />
-      <TemplateButton editorKey={editorKey} />
-    </div>
+    <>
+      <div className={`d-flex gap-2 py-1 px-2 px-md-3 border-top ${styles['codemirror-editor-toolbar']}`}>
+        <AttachmentsDropup editorKey={editorKey} onUpload={onUpload} acceptedUploadFileType={acceptedUploadFileType} />
+        <div className="flex-grow-1">
+          <SimpleBar ref={simpleBarRef} autoHide style={{ overflowY: 'hidden' }}>
+            <div className="d-flex gap-2">
+              <TextFormatTools editorKey={editorKey} simpleBarRef={simpleBarRef} />
+              <EmojiButton editorKey={editorKey} />
+              <TableButton editorKey={editorKey} />
+              <DiagramButton editorKey={editorKey} />
+              <TemplateButton editorKey={editorKey} />
+            </div>
+          </SimpleBar>
+        </div>
+      </div>
+    </>
   );
 });