satof3 6 months ago
parent
commit
9ad8efa2bb

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

@@ -1,66 +1,66 @@
-import type { AcceptedUploadFileType } from "@growi/core";
-import { type JSX, memo, useCallback, useRef } from "react";
-import SimpleBar from "simplebar-react";
+import { type JSX, memo, useCallback, useRef } from 'react';
+import type { AcceptedUploadFileType } from '@growi/core';
+import SimpleBar from 'simplebar-react';
 
-import type { GlobalCodeMirrorEditorKey } from "../../../../consts";
-import { AttachmentsDropup } from "./AttachmentsDropup";
-import { DiagramButton } from "./DiagramButton";
+import type { GlobalCodeMirrorEditorKey } from '../../../../consts';
+import { AttachmentsDropup } from './AttachmentsDropup';
+import { DiagramButton } from './DiagramButton';
 import { EditorGuideButton } from "./EditorGuideButton";
-import { EmojiButton } from "./EmojiButton";
-import { TableButton } from "./TableButton";
-import { TemplateButton } from "./TemplateButton";
-import { TextFormatTools } from "./TextFormatTools";
+import { EmojiButton } from './EmojiButton';
+import { TableButton } from './TableButton';
+import { TemplateButton } from './TemplateButton';
+import { TextFormatTools } from './TextFormatTools';
 
-import styles from "./Toolbar.module.scss";
+import styles from './Toolbar.module.scss';
 
 type Props = {
-	editorKey: string | GlobalCodeMirrorEditorKey;
-	acceptedUploadFileType: AcceptedUploadFileType;
-	onUpload?: (files: File[]) => void;
+  editorKey: string | GlobalCodeMirrorEditorKey;
+  acceptedUploadFileType: AcceptedUploadFileType;
+  onUpload?: (files: File[]) => void;
 };
 
 export const Toolbar = memo((props: Props): JSX.Element => {
-	const { editorKey, acceptedUploadFileType, onUpload } = props;
-	const simpleBarRef = useRef<SimpleBar>(null);
+  const { editorKey, acceptedUploadFileType, onUpload } = props;
+  const simpleBarRef = useRef<SimpleBar>(null);
 
-	const onTextFormatToolsCollapseChange = useCallback(() => {
-		if (simpleBarRef.current) {
-			simpleBarRef.current.recalculate();
-		}
-	}, []);
+  const onTextFormatToolsCollapseChange = useCallback(() => {
+    if (simpleBarRef.current) {
+      simpleBarRef.current.recalculate();
+    }
+  }, []);
 
-	return (
-		<>
-			<div
-				className={`d-flex gap-2 py-1 px-2 px-md-3 border-top ${styles["codemirror-editor-toolbar"]} align-items-center`}
-			>
-				<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} />
-							<EditorGuideButton editorKey={editorKey} />
-						</div>
-					</SimpleBar>
-				</div>
-			</div>
-		</>
-	);
+  return (
+    <>
+      <div
+        className={`d-flex gap-2 py-1 px-2 px-md-3 border-top ${styles['codemirror-editor-toolbar']} align-items-center`}
+      >
+        <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} />
+              							<EditorGuideButton editorKey={editorKey} />
+            </div>
+          </SimpleBar>
+        </div>
+      </div>
+    </>
+  );
 });