ラジオボタンとチェックボックスの値のマルチバイト対応を選択できるように修正

src/components/html/Checkbox.jsx

@@ -9,7 +9,7 @@ import { generateSafeId } from '../../utils';
 export function Checkbox(props) {
   const { item, isChecked = true } = props;
   const {
-    preview: { mode, acmscss },
+    preview: { mode, acmscss, escapeSequence },
   } = useMakerContext();
 
   return (
@@ -20,7 +20,7 @@ export function Checkbox(props) {
             if (!option.label) {
               return null;
             }
-            const id = `${item.name}-${generateSafeId(option.value)}`;
+            const id = `${item.name}-${escapeSequence ? generateSafeId(option.value) : option.value}`;
             return (
               <div key={index} className={classnames({ 'acms-admin-form-checkbox': acmscss })}>
                 <input
@@ -49,7 +49,7 @@ export function Checkbox(props) {
             if (!option.label) {
               return null;
             }
-            const id = `${item.name}-${generateSafeId(option.value)}[]`;
+            const id = `${item.name}-${escapeSequence ? generateSafeId(option.value) : option.value}[]`;
             return (
               <div key={index} className={classnames({ 'acms-admin-form-checkbox': acmscss })}>
                 <input
@@ -78,7 +78,7 @@ export function Checkbox(props) {
             if (!option.label) {
               return null;
             }
-            const id = `${item.name}-${generateSafeId(option.value)}-{id}`;
+            const id = `${item.name}-${escapeSequence ? generateSafeId(option.value) : option.value}-{id}`;
             return (
               <div key={index} className={classnames({ 'acms-admin-form-checkbox': acmscss })}>
                 <input
@@ -106,7 +106,7 @@ export function Checkbox(props) {
             if (!option.label) {
               return null;
             }
-            const id = `${item.name}-${generateSafeId(option.value)}-{id}[]`;
+            const id = `${item.name}-${escapeSequence ? generateSafeId(option.value) : option.value}-{id}[]`;
             return (
               <div key={index} className={classnames({ 'acms-admin-form-checkbox': acmscss })}>
                 <input

src/components/html/RadioButton.jsx

@@ -9,7 +9,7 @@ import { generateSafeId } from '../../utils';
 export function RadioButton(props) {
   const { item, isChecked = true } = props;
   const {
-    preview: { mode, acmscss },
+    preview: { mode, acmscss, escapeSequence },
   } = useMakerContext();
 
   return (
@@ -20,7 +20,7 @@ export function RadioButton(props) {
             if (!option.label) {
               return null;
             }
-            const id = `${item.name}-${generateSafeId(option.value)}`;
+            const id = `${item.name}-${escapeSequence ? generateSafeId(option.value) : option.value}`;
             return (
               <div key={index} className={classnames({ 'acms-admin-form-radio': acmscss })}>
                 <input
@@ -49,7 +49,7 @@ export function RadioButton(props) {
             if (!option.label) {
               return null;
             }
-            const id = `${item.name}-${generateSafeId(option.value)}[]`;
+            const id = `${item.name}-${escapeSequence ? generateSafeId(option.value) : option.value}[]`;
             return (
               <div key={index} className={classnames({ 'acms-admin-form-radio': acmscss })}>
                 <input
@@ -78,7 +78,7 @@ export function RadioButton(props) {
             if (!option.label) {
               return null;
             }
-            const id = `${item.name}-${generateSafeId(option.value)}-{id}`;
+            const id = `${item.name}-${escapeSequence ? generateSafeId(option.value) : option.value}-{id}`;
             return (
               <div key={index} className={classnames({ 'acms-admin-form-radio': acmscss })}>
                 <input
@@ -106,7 +106,7 @@ export function RadioButton(props) {
             if (!option.label) {
               return null;
             }
-            const id = `${item.name}-${generateSafeId(option.value)}-{id}[]`;
+            const id = `${item.name}-${escapeSequence ? generateSafeId(option.value) : option.value}-{id}[]`;
             return (
               <div key={index} className={classnames({ 'acms-admin-form-radio': acmscss })}>
                 <input

src/components/navigator/PreviewNavigator.jsx

@@ -16,9 +16,10 @@ export function PreviewNavigator() {
     setTag,
     setAcmscss,
     setJsValidator,
+    setEscapeSequence,
     setDirection,
     setCopied,
-    preview: { jsValidator, acmscss, mode, editMode, tag, direction },
+    preview: { jsValidator, acmscss, escapeSequence, mode, editMode, tag, direction },
     clipboard: { source },
     undo,
   } = useMakerContext();
@@ -35,8 +36,12 @@ export function PreviewNavigator() {
     setJsValidator(!jsValidator);
   };
 
+  const onEscapeSequence = () => {
+    setEscapeSequence(!escapeSequence);
+  };
+
   const onUndoHandler = () => {
-    undo(mode), [mode, undo];
+    (undo(mode), [mode, undo]);
   };
 
   return (
@@ -75,6 +80,14 @@ export function PreviewNavigator() {
               </label>
             </div>
           )}
+
+          <div className="acms-admin-form-checkbox" style={{ margin: 0 }}>
+            <input type="checkbox" onChange={onEscapeSequence} checked={escapeSequence} id="escapesequence-checkbox" />
+            <label htmlFor="escapesequence-checkbox">
+              <i className="acms-admin-ico-checkbox" />
+              マルチバイト文字をエスケープしてID属性を生成する
+            </label>
+          </div>
         </div>
 
         {tag === 'table' && (mode === 'fieldgroup' || mode === 'unitgroup') && (

src/reducers/makerReducer.js → src/reducers/makerReducer.ts

@@ -1,4 +1,37 @@
-const initialState = {
+export interface MakerState {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  customfield: any[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fieldgroup: { items: any[]; title: string | null; name: string | null };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  customunit: any[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  unitgroup: { items: any[]; title: string | null; name: string | null };
+  history: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    customfield: any[][];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fieldgroup: any[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    customunit: any[][];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    unitgroup: any[];
+  };
+  currentIndex: {
+    customfield: number;
+    fieldgroup: number;
+    customunit: number;
+    unitgroup: number;
+  };
+}
+
+export interface MakerAction {
+  type: 'UPDATE_STATE' | 'UNDO' | 'REDO';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  payload?: any;
+}
+
+const initialState: MakerState = {
   customfield: [],
   fieldgroup: { items: [], title: null, name: null },
   customunit: [],
@@ -17,22 +50,22 @@ const initialState = {
   },
 };
 
-function makerReducer(state = initialState, action) {
+function makerReducer(state: MakerState = initialState, action: MakerAction): MakerState {
   switch (action.type) {
     case 'UPDATE_STATE': {
       const newState = { ...state };
       Object.keys(action.payload).forEach((key) => {
         if (typeof action.payload[key] === 'function') {
-          newState[key] = action.payload[key](state[key]);
+          newState[key as keyof MakerState] = action.payload[key](state[key as keyof MakerState]);
         } else {
-          newState[key] = action.payload[key];
+          newState[key as keyof MakerState] = action.payload[key];
         }
       });
 
-      const updatedHistory = {};
-      const updatedCurrentIndex = {};
+      const updatedHistory: Partial<MakerState['history']> = {};
+      const updatedCurrentIndex: Partial<MakerState['currentIndex']> = {};
 
-      ['customfield', 'fieldgroup', 'customunit', 'unitgroup'].forEach((key) => {
+      (['customfield', 'fieldgroup', 'customunit', 'unitgroup'] as const).forEach((key) => {
         if (JSON.stringify(state[key]) !== JSON.stringify(newState[key])) {
           updatedHistory[key] = [...state.history[key].slice(0, state.currentIndex[key] + 1), newState[key]];
           updatedCurrentIndex[key] = state.currentIndex[key] + 1;

src/stores/MakerContext.jsx → src/stores/MakerContext.tsx

@@ -1,24 +1,27 @@
 import React, { useState, useContext, createContext, useReducer, useCallback, useMemo } from 'react';
-import { makerReducer } from '../reducers/makerReducer';
+import { makerReducer, MakerState } from '../reducers/makerReducer';
+import { PreviewType } from '../types/preview';
+import { ClipboardType } from '../types/clipboard';
 
 const defaultCustomfield = [];
 const defaultFieldgroup = { items: [], title: null, name: null };
 const defaultCustomunit = [];
 const defaultUnitgroup = { items: [], title: null, name: null };
-const defaultPreview = {
+const defaultPreview: PreviewType = {
   mode: 'customfield',
   editMode: 'source',
   tag: 'section',
   acmscss: true,
   jsValidator: true,
   direction: 'horizontal',
+  escapeSequence: false,
 };
-const defaultClipboard = {
+const defaultClipboard: ClipboardType = {
   source: '',
   copied: false,
 };
 
-const initialState = {
+const initialState: MakerState = {
   customfield: defaultCustomfield,
   fieldgroup: defaultFieldgroup,
   customunit: defaultCustomunit,
@@ -41,7 +44,7 @@ export const MakerContext = createContext({
   state: initialState,
   preview: defaultPreview,
   clipboard: defaultClipboard,
-  addCustomfield: (_newCustomfield) => {}, // eslint-disable-line no-unused-vars
+  addCustomfield: () => {},
   addCustomunit: () => {},
   setGroupTitleName: () => {},
   addGroupItem: () => {},
@@ -60,6 +63,10 @@ export const MakerContext = createContext({
   setAcmscss: () => {},
   setJsValidator: () => {},
   setDirection: () => {},
+  setEscapeSequence: () => {},
+  setCopied: () => {},
+  undo: () => {},
+  redo: () => {},
 });
 
 export function MakerContextProvider({
@@ -73,16 +80,17 @@ export function MakerContextProvider({
   const [clipboard, setClipboard] = useState(clipboardProp);
 
   const addCustomfield = useCallback(
-    (newCustomfield) =>
+    (newCustomfield: unknown) =>
       dispatch({
         type: 'UPDATE_STATE',
-        payload: { customfield: (prevCustomfield) => [...prevCustomfield, newCustomfield] },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        payload: { customfield: (prevCustomfield: any) => [...prevCustomfield, newCustomfield] },
       }),
     [dispatch]
   );
 
   const addCustomunit = useCallback(
-    (newCustomunit) =>
+    (newCustomunit: unknown) =>
       dispatch({
         type: 'UPDATE_STATE',
         payload: { customunit: [...state.customunit, newCustomunit] },
@@ -91,15 +99,16 @@ export function MakerContextProvider({
   );
 
   const setGroupTitleName = useCallback(
-    (title, name) =>
+    (title: string, name: string) =>
       dispatch({
         type: 'UPDATE_STATE',
-        payload: { fieldgroup: (prevFieldgroup) => ({ ...prevFieldgroup, title, name }) },
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        payload: { fieldgroup: (prevFieldgroup: any) => ({ ...prevFieldgroup, title, name }) },
       }),
     [dispatch]
   );
   const addGroupItem = useCallback(
-    (newGroupItem) =>
+    (newGroupItem: unknown) =>
       dispatch({
         type: 'UPDATE_STATE',
         payload: {
@@ -110,15 +119,15 @@ export function MakerContextProvider({
   );
 
   const setUnitGroupTitleName = useCallback(
-    (title, name) =>
+    (title: string, name: string) =>
       dispatch({
         type: 'UPDATE_STATE',
         payload: { unitgroup: { ...state.unitgroup, title, name } },
       }),
     [dispatch, state.unitgroup]
   );
   const addUnitGroupItem = useCallback(
-    (newGroupItem) =>
+    (newGroupItem: unknown) =>
       dispatch({
         type: 'UPDATE_STATE',
         payload: { unitgroup: { ...state.unitgroup, items: [...state.unitgroup.items, newGroupItem] } },
@@ -177,6 +186,11 @@ export function MakerContextProvider({
     (jsValidator) => setPreview((prevState) => ({ ...prevState, jsValidator })),
     [setPreview]
   );
+  const setEscapeSequence = useCallback(
+    (escapeSequence) => setPreview((prevState) => ({ ...prevState, escapeSequence })),
+    [setPreview]
+  );
+
   const setMode = useCallback((mode) => setPreview((prevState) => ({ ...prevState, mode })), [setPreview]);
   const setEditMode = useCallback((editMode) => setPreview((prevState) => ({ ...prevState, editMode })), [setPreview]);
   const setDirection = useCallback(
@@ -207,6 +221,7 @@ export function MakerContextProvider({
       setTag,
       setAcmscss,
       setJsValidator,
+      setEscapeSequence,
       setMode,
       setEditMode,
       setDirection,
@@ -234,6 +249,7 @@ export function MakerContextProvider({
       setTag,
       setAcmscss,
       setJsValidator,
+      setEscapeSequence,
       setMode,
       setEditMode,
       setDirection,

src/test/field/blockEditor.test.tsx

@@ -32,6 +32,7 @@ describe('BlockEditor: customfield mode', () => {
     acmscss: true,
     jsValidator: true,
     direction: 'horizontal',
+    escapeSequence: false,
   };
 
   it('should render main input element with correct attributes', () => {

src/test/field/text.test.tsx

@@ -29,6 +29,7 @@ describe('TextInput: customfield mode', () => {
     acmscss: true,
     jsValidator: true,
     direction: 'horizontal',
+    escapeSequence: false,
   };
 
   it('should render main input element with correct attributes', () => {

src/test/fieldGroup/text.test.tsx

@@ -23,6 +23,7 @@ describe('TextInput: customfield mode', () => {
     acmscss: true,
     jsValidator: true,
     direction: 'horizontal',
+    escapeSequence: false,
   };
 
   it('should render main input element with correct attributes', () => {

src/types/clipboard.d.ts

@@ -0,0 +1,4 @@
+export interface ClipboardType {
+  source: string;
+  copied: boolean;
+}

src/types/preview.d.ts

@@ -0,0 +1,9 @@
+export interface PreviewType {
+  mode: string;
+  editMode: string;
+  direction: string;
+  tag: string;
+  acmscss: boolean;
+  jsValidator: boolean;
+  escapeSequence: boolean;
+}