apply ids for each button

packages/app/src/components/Me/EditorSettings.tsx

@@ -26,8 +26,6 @@ export const EditorSettings: FC<Props> = () => {
   return (
     <>
       <h4 className="mt-4">Japanese Settings</h4>
-      {/* <div className="offset-lg-2  col-lg-9">
-        <div className="row"> */}
 
       <div className="form-group row">
         <div className="offset-md-3 col-md-6 text-left">
@@ -36,12 +34,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="ja-hiragana-keishikimeishi"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="ja-hiragana-keishikimeishi">
+              <strong>ja-hiragana-keishikimeishi</strong>
             </label>
           </div>
 
@@ -49,12 +47,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="ja-no-abusage"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="ja-no-abusage">
+              <strong>ja-no-abusage</strong>
             </label>
           </div>
 
@@ -62,12 +60,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="ja-no-inappropriate-words"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="ja-no-inappropriate-words">
+              <strong>ja-no-inappropriate-words</strong>
             </label>
           </div>
 
@@ -75,12 +73,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="ja-no-mixed-period"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="ja-no-mixed-period">
+              <strong>ja-no-mixed-period</strong>
             </label>
           </div>
 
@@ -88,12 +86,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="ja-no-redundant-expression"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="ja-no-redundant-expression">
+              <strong>ja-no-redundant-expression</strong>
             </label>
           </div>
 
@@ -101,12 +99,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="max-kanji-continuous-len"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="max-kanji-continuous-len">
+              <strong>max-kanji-continuous-len</strong>
             </label>
           </div>
 
@@ -114,12 +112,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="max-ten"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="max-ten">
+              <strong>max-ten</strong>
             </label>
           </div>
 
@@ -127,12 +125,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="no-double-negative-ja"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="no-double-negative-ja">
+              <strong>no-double-negative-ja</strong>
             </label>
           </div>
 
@@ -140,12 +138,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="no-doubled-conjunction"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="no-doubled-conjunction">
+              <strong>no-doubled-conjunction</strong>
             </label>
           </div>
 
@@ -153,12 +151,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="no-doubled-joshi"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="no-doubled-joshi">
+              <strong>no-doubled-joshi</strong>
             </label>
           </div>
 
@@ -166,12 +164,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="no-dropping-the-ra"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="no-dropping-the-ra">
+              <strong>no-dropping-the-ra</strong>
             </label>
           </div>
 
@@ -179,12 +177,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="no-hankaku-kana"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="no-hankaku-kana">
+              <strong>no-hankaku-kana</strong>
             </label>
           </div>
 
@@ -192,12 +190,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="prefer-tari-tari"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="prefer-tari-tari">
+              <strong>prefer-tari-tari</strong>
             </label>
           </div>
 
@@ -222,12 +220,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="common-misspellings"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="common-misspellings">
+              <strong>common-misspellings</strong>
             </label>
           </div>
 
@@ -235,12 +233,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="max-comma"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="max-comma">
+              <strong>max-comma</strong>
             </label>
           </div>
 
@@ -248,12 +246,12 @@ export const EditorSettings: FC<Props> = () => {
             <input
               type="checkbox"
               className="custom-control-input"
-              id="highlightBorder"
+              id="sentence-length"
               // checked={adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled}
               // onChange={() => { adminCustomizeContainer.switchHighlightJsStyleBorder() }}
             />
-            <label className="custom-control-label" htmlFor="highlightBorder">
-              <strong>Border</strong>
+            <label className="custom-control-label" htmlFor="sentence-length">
+              <strong>sentence-length</strong>
             </label>
           </div>