Refactor useToolBar & extract checkAndAddFormat functon to a sepa…

…rate utility file
yorkie-team · Sep 3, 2024 · c2db04e · c2db04e
1 parent 17ca34e
commit c2db04e
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 43 deletions.
diff --git a/frontend/src/hooks/useFormatUtils.ts b/frontend/src/hooks/useFormatUtils.ts
@@ -143,10 +143,26 @@ export const useFormatUtils = () => {
 		[cmView, applyFormat]
 	);
 
+	const checkAndAddFormat = useCallback(
+		(
+			selectedTextStart: string,
+			selectedTextEnd: string,
+			marker: string,
+			format: FormatType,
+			formats: Set<FormatType>
+		) => {
+			if (selectedTextStart.includes(marker) && selectedTextEnd.includes(marker)) {
+				formats.add(format);
+			}
+		},
+		[]
+	);
+
 	return {
 		getFormatMarkerLength,
 		applyFormat,
 		setKeymapConfig,
 		toggleButtonChangeHandler,
+		checkAndAddFormat,
 	};
 };
diff --git a/frontend/src/hooks/useToolBar.ts b/frontend/src/hooks/useToolBar.ts
@@ -8,60 +8,52 @@ export const useToolBar = () => {
 		position: { top: 0, left: 0 },
 		selectedFormats: new Set<FormatType>(),
 	});
-	const { getFormatMarkerLength } = useFormatUtils();
+	const { getFormatMarkerLength, checkAndAddFormat } = useFormatUtils();
 
 	const updateFormatBar = useCallback(
 		(update: ViewUpdate) => {
-			const selection = update.state.selection.main;
-			if (!selection.empty) {
-				const coords = update.view.coordsAtPos(selection.from);
-				if (coords) {
-					const maxLength = getFormatMarkerLength(update.view.state, selection.from);
+			const { state, view } = update;
+			const selection = state.selection.main;
 
-					const selectedTextStart = update.state.sliceDoc(
-						selection.from - maxLength,
-						selection.from
-					);
-					const selectedTextEnd = update.state.sliceDoc(
-						selection.to,
-						selection.to + maxLength
-					);
-					const formats = new Set<FormatType>();
-
-					const checkAndAddFormat = (marker: string, format: FormatType) => {
-						if (
-							selectedTextStart.includes(marker) &&
-							selectedTextEnd.includes(marker)
-						) {
-							formats.add(format);
-						}
-					};
-
-					checkAndAddFormat("**", FormatType.BOLD);
-					checkAndAddFormat("_", FormatType.ITALIC);
-					checkAndAddFormat("`", FormatType.CODE);
-					checkAndAddFormat("~~", FormatType.STRIKETHROUGH);
-
-					// TODO: Modify the rendering method so that it is not affected by the size of the Toolbar
-					setToolBarState((prev) => ({
-						...prev,
-						show: true,
-						position: {
-							top: coords.top - 5,
-							left: coords.left,
-						},
-						selectedFormats: formats,
-					}));
-				}
-			} else {
+			if (selection.empty) {
 				setToolBarState((prev) => ({
 					...prev,
 					show: false,
 					selectedFormats: new Set(),
 				}));
+				return;
 			}
+
+			const coords = view.coordsAtPos(selection.from);
+			if (!coords) return;
+
+			const maxLength = getFormatMarkerLength(view.state, selection.from);
+			const selectedTextStart = state.sliceDoc(selection.from - maxLength, selection.from);
+			const selectedTextEnd = state.sliceDoc(selection.to, selection.to + maxLength);
+			const formats = new Set<FormatType>();
+			const formatChecks = [
+				{ marker: "**", format: FormatType.BOLD },
+				{ marker: "_", format: FormatType.ITALIC },
+				{ marker: "`", format: FormatType.CODE },
+				{ marker: "~~", format: FormatType.STRIKETHROUGH },
+			];
+
+			formatChecks.forEach(({ marker, format }) => {
+				checkAndAddFormat(selectedTextStart, selectedTextEnd, marker, format, formats);
+			});
+
+			// TODO: Modify the rendering method so that it is not affected by the size of the Toolbar
+			setToolBarState((prev) => ({
+				...prev,
+				show: true,
+				position: {
+					top: coords.top - 5,
+					left: coords.left,
+				},
+				selectedFormats: formats,
+			}));
 		},
-		[getFormatMarkerLength]
+		[getFormatMarkerLength, checkAndAddFormat]
 	);
 
 	return { toolBarState, setToolBarState, updateFormatBar };