Merge pull request #8976 from weseek/fix/145179-149933-add-simplebar-to-toolbar

fix: Use the scrollbar to prevent the toolbar from being hidden

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

@@ -9,7 +9,6 @@ import styles from './TextFormatTools.module.scss';
 
 const btnTextFormatToolsTogglerClass = styles['btn-text-format-tools-toggler'];
 
-
 type TogglarProps = {
   isOpen: boolean,
   onClick?: () => void,
@@ -34,10 +33,11 @@ const TextFormatToolsToggler = (props: TogglarProps): JSX.Element => {
 
 type TextFormatToolsType = {
   editorKey: string | GlobalCodeMirrorEditorKey,
+  onTextFormatToolsCollapseChange: () => void,
 }
 
 export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
-  const { editorKey } = props;
+  const { editorKey, onTextFormatToolsCollapseChange } = props;
   const [isOpen, setOpen] = useState(false);
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
 
@@ -57,7 +57,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={onTextFormatToolsCollapseChange} onExited={onTextFormatToolsCollapseChange}>
         <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, useCallback, useRef } from 'react';
 
 import type { AcceptedUploadFileType } from '@growi/core';
+import SimpleBar from 'simplebar-react';
 
 import type { GlobalCodeMirrorEditorKey } from '../../../../consts';
 
@@ -20,18 +21,31 @@ type Props = {
 }
 
 export const Toolbar = memo((props: Props): JSX.Element => {
-
   const { editorKey, acceptedUploadFileType, onUpload } = props;
+  const simpleBarRef = useRef<SimpleBar>(null);
+
+  const onTextFormatToolsCollapseChange = useCallback(() => {
+    if (simpleBarRef.current) {
+      simpleBarRef.current.recalculate();
+    }
+  }, [simpleBarRef]);
+
   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} onTextFormatToolsCollapseChange={onTextFormatToolsCollapseChange} />
+              <EmojiButton editorKey={editorKey} />
+              <TableButton editorKey={editorKey} />
+              <DiagramButton editorKey={editorKey} />
+              <TemplateButton editorKey={editorKey} />
+            </div>
+          </SimpleBar>
+        </div>
+      </div>
+    </>
   );
 });