Refactor: Modify fewer components.

src/components/ButtonSelect.tsx

@@ -23,17 +23,7 @@ export const ButtonSelect = <T extends Object>({
           onChange={() => onChange(option.value)}
           checked={value === option.value}
         />
-        <span
+        {option.text}
-          style={{
-            textAlign: "center",
-            fontSize: "0.6rem",
-            color: "var(--icon-fill-color)",
-            fontWeight: "bold",
-            opacity: value === option.value ? 1.0 : 0.6,
-          }}
-        >
-          {option.text}
-        </span>
       </label>
     ))}
   </div>

src/components/Subtypes.tsx

@@ -1,7 +1,6 @@
 import { getShortcutKey, updateActiveTool } from "../utils";
 import { t } from "../i18n";
 import { Action } from "../actions/types";
-import { ToolButton } from "./ToolButton";
 import clsx from "clsx";
 import {
   Subtype,
@@ -74,17 +73,13 @@ export const SubtypeButton = (
     },
     keyTest,
     PanelComponent: ({ elements, appState, updateData, data }) => (
-      <ToolButton
+      <button
-        type="icon"
+        className={clsx("ToolIcon_type_button", "ToolIcon_type_button--show", {
-        icon={icon.call(this, { theme: appState.theme })}
+          ToolIcon: true,
-        selected={
+          "ToolIcon--selected":
-          appState.activeSubtypes !== undefined &&
+            appState.activeSubtypes !== undefined &&
-          appState.activeSubtypes.includes(subtype)
-        }
-        className={clsx({
-          selected:
-            appState.activeSubtypes &&
             appState.activeSubtypes.includes(subtype),
+          "ToolIcon--plain": true,
         })}
         title={`${t(`toolBar.${subtype}`)}${title}`}
         aria-label={t(`toolBar.${subtype}`)}
@@ -105,8 +100,13 @@ export const SubtypeButton = (
               }
             : undefined
         }
-        size={data?.size || "medium"}
+      >
-      ></ToolButton>
+        {
+          <div className="ToolIcon__icon" aria-hidden="true">
+            {icon.call(this, { theme: appState.theme })}
+          </div>
+        }
+      </button>
     ),
   };
   if (key === "") {

src/components/ToolButton.tsx

@@ -43,7 +43,6 @@ type ToolButtonProps =
       type: "icon";
       children?: React.ReactNode;
       onClick?(): void;
-      onContextMenu?: React.MouseEventHandler;
     })
   | (ToolButtonBaseProps & {
       type: "radio";
@@ -121,7 +120,6 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
         aria-label={props["aria-label"]}
         type={type}
         onClick={onClick}
-        onContextMenu={props.type === "icon" ? props.onContextMenu : undefined}
         ref={innerRef}
         disabled={isLoading || props.isLoading}
       >

src/packages/extensions/ts/mathjax/implementation.tsx

@@ -35,7 +35,7 @@ import {
   getNonDeletedElements,
   redrawTextBoundingBox,
 } from "../../../../element";
-import { ButtonSelect } from "../../../../components/ButtonSelect";
+import { ButtonIconSelect } from "../../../../components/ButtonIconSelect";
 
 // Subtype imports
 import {
@@ -1433,38 +1433,55 @@ const createMathActions = () => {
         commitToHistory: true,
       };
     },
-    PanelComponent: ({ elements, appState, updateData }) => (
+    PanelComponent: ({ elements, appState, updateData }) => {
-      <fieldset>
+      const textIcon = (text: string, selected: boolean) => {
-        <legend>{t("labels.changeMathOnly")}</legend>
+        const color = selected
-        <ButtonSelect
+          ? "var(--button-color, var(--color-primary-darker))"
-          group="mathOnly"
+          : "var(--button-color, var(--text-primary-color))";
-          options={[
+        return (
-            {
+          <div className="buttonList">
-              value: false,
+            <span style={{ textAlign: "center", fontSize: "0.6rem", color }}>
-              text: t("labels.mathOnlyFalse"),
+              {text.replace(" ", "\n")}
-            },
+            </span>
-            {
+          </div>
-              value: true,
+        );
-              text: t("labels.mathOnlyTrue"),
+      };
-            },
+      const value = getFormValue(
-          ]}
+        elements,
-          value={getFormValue(
+        appState,
-            elements,
+        (element) => {
-            appState,
+          const el = hasBoundTextElement(element)
-            (element) => {
+            ? getBoundTextElement(element)
-              const el = hasBoundTextElement(element)
+            : element;
-                ? getBoundTextElement(element)
+          return isMathElement(el)
-                : element;
+            ? getMathProps.ensureMathProps(el.customData).mathOnly
-              return isMathElement(el)
+            : null;
-                ? getMathProps.ensureMathProps(el.customData).mathOnly
+        },
-                : null;
+        getMathProps.getMathOnly(appState),
-            },
+      );
-            getMathProps.getMathOnly(appState),
+      return (
-          )}
+        <fieldset>
-          onChange={(value) => updateData(value)}
+          <legend>{t("labels.changeMathOnly")}</legend>
-        />
+          <ButtonIconSelect
-      </fieldset>
+            group="mathOnly"
-    ),
+            options={[
+              {
+                value: false,
+                text: t("labels.mathOnlyFalse"),
+                icon: textIcon(t("labels.mathOnlyFalse"), value === false),
+              },
+              {
+                value: true,
+                text: t("labels.mathOnlyTrue"),
+                icon: textIcon(t("labels.mathOnlyTrue"), value === true),
+              },
+            ]}
+            value={value}
+            onChange={(value) => updateData(value)}
+          />
+        </fieldset>
+      );
+    },
     predicate: (...rest) =>
       rest[4] === undefined && enableActionChangeMathProps(rest[0], rest[1]),
     trackEvent: false,