Refactor TextFormatTools to use callback for collapse change instead of SimpleBar ref

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

@@ -1,7 +1,6 @@
 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';
@@ -34,11 +33,11 @@ const TextFormatToolsToggler = (props: TogglarProps): JSX.Element => {
 
 type TextFormatToolsType = {
   editorKey: string | GlobalCodeMirrorEditorKey,
-  simpleBarRef: React.RefObject<SimpleBar>,
+  onTextFormatToolsCollapseChange: () => void,
 }
 
 export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
-  const { editorKey, simpleBarRef } = props;
+  const { editorKey, onTextFormatToolsCollapseChange } = props;
   const [isOpen, setOpen] = useState(false);
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
 
@@ -46,12 +45,6 @@ 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);
   };
@@ -64,7 +57,7 @@ export const TextFormatTools = (props: TextFormatToolsType): JSX.Element => {
     <div className="d-flex">
       <TextFormatToolsToggler isOpen={isOpen} onClick={toggle} />
 
-      <Collapse isOpen={isOpen} horizontal onEntered={recalculateSimpleBar} onExited={recalculateSimpleBar}>
+      <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,4 +1,4 @@
-import { memo, useRef } from 'react';
+import { memo, useCallback, useRef } from 'react';
 
 import type { AcceptedUploadFileType } from '@growi/core';
 import SimpleBar from 'simplebar-react';
@@ -24,6 +24,12 @@ 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']}`}>
@@ -31,7 +37,7 @@ export const Toolbar = memo((props: Props): JSX.Element => {
         <div className="flex-grow-1">
           <SimpleBar ref={simpleBarRef} autoHide style={{ overflowY: 'hidden' }}>
             <div className="d-flex gap-2">
-              <TextFormatTools editorKey={editorKey} simpleBarRef={simpleBarRef} />
+              <TextFormatTools editorKey={editorKey} onTextFormatToolsCollapseChange={onTextFormatToolsCollapseChange} />
               <EmojiButton editorKey={editorKey} />
               <TableButton editorKey={editorKey} />
               <DiagramButton editorKey={editorKey} />