CollaborativeInputを作り直し

apps/web-server/package.json

@@ -63,7 +63,6 @@
         "localforage": "^1.10.0",
         "moment": "^2.29.1",
         "pino": "^9.4.0",
-        "quill": "^1.3.7",
         "re-resizable": "^6.9.1",
         "react": "^18.3.1",
         "react-dnd": "^16.0.0",
@@ -72,7 +71,6 @@
         "react-draggable": "^4.4.4",
         "react-konva": "^18.1.1",
         "react-markdown": "^8.0.0",
-        "react-quilljs": "^1.2.17",
         "react-rnd": "^10.3.7",
         "react-use": "^17.3.1",
         "react-virtuoso": "^4.0.0",
@@ -105,7 +103,6 @@
         "@types/color-name": "1.1.5",
         "@types/howler": "2.2.12",
         "@types/html-escaper": "3.0.2",
-        "@types/quill": "2.0.14",
         "@types/react": "18.3.12",
         "@types/react-color": "3.0.12",
         "@types/react-dom": "18.3.1",

apps/web-server/src/components/models/room/Room/subcomponents/components/BoardEditorModal/BoardEditorModal.tsx

@@ -33,7 +33,7 @@
           stateId: string;
       };
 
 export const boardEditorModalAtom = atom<BoardEditorModalType | null>(null);
 
 const drawerBaseProps: Partial<ModalProps> = {
     width: 600,
@@ -193,15 +193,12 @@
                             bufferDuration="default"
                             size="small"
                             value={board.name}
-                            onChange={e => {
-                                if (e.previousValue === e.currentValue) {
-                                    return;
-                                }
+                            onChange={currentValue => {
                                 updateBoard(board => {
                                     if (board == null) {
                                         return;
                                     }
-                                    board.name = e.currentValue;
+                                    board.name = currentValue;
                                 });
                             }}
                         />

apps/web-server/src/components/models/room/Room/subcomponents/components/CharacterEditorModal/CharacterEditorModal.tsx

@@ -90,7 +90,7 @@
     | null;
 
 const characterEditorModalPrimitiveAtom = atom<CharacterEditorModalState | null>(null);
 export const characterEditorModalAtom = atom(
     get => get(characterEditorModalPrimitiveAtom),
     (get, set, newValue: CharacterEditorModalAction) => {
         switch (newValue?.type) {
@@ -466,15 +466,12 @@
                                     bufferDuration="default"
                                     size="small"
                                     value={character.name}
-                                    onChange={e => {
-                                        if (e.previousValue === e.currentValue) {
-                                            return;
-                                        }
+                                    onChange={currentValue => {
                                         updateCharacter(character => {
                                             if (character == null) {
                                                 return;
                                             }
-                                            character.name = e.currentValue;
+                                            character.name = currentValue;
                                         });
                                     }}
                                 />
@@ -719,12 +716,12 @@
                                 size="small"
                                 bufferDuration="default"
                                 value={character.memo}
-                                onChange={e => {
+                                onChange={currentValue => {
                                     updateCharacter(character => {
                                         if (character == null) {
                                             return;
                                         }
-                                        character.memo = e.currentValue;
+                                        character.memo = currentValue;
                                     });
                                 }}
                             />

apps/web-server/src/components/models/room/Room/subcomponents/components/CharacterListPanelContent/CharacterListPanelContent.tsx

@@ -454,17 +454,14 @@
                                         bufferDuration="default"
                                         size="small"
                                         value={character.state.name}
-                                        onChange={e => {
-                                            if (e.previousValue === e.currentValue) {
-                                                return;
-                                            }
+                                        onChange={currentValue => {
                                             setRoomState(state => {
                                                 const targetCharacter =
                                                     state.characters?.[character.stateId];
                                                 if (targetCharacter == null) {
                                                     return;
                                                 }
-                                                targetCharacter.name = e.currentValue;
+                                                targetCharacter.name = currentValue;
                                             });
                                         }}
                                     />

apps/web-server/src/components/models/room/Room/subcomponents/components/CharacterParameterNamesEditorModal/CharacterParameterNamesEditorModal.tsx

@@ -21,7 +21,7 @@
 
 type UpOperation = U<typeof roomTemplate>;
 
 export const characterParameterNamesEditorVisibilityAtom = atom(false);
 
 type VisibleParameterForm = {
     type: 'Bool' | 'Str' | 'Num';
@@ -97,16 +97,13 @@
                         size="small"
                         value={state.name}
                         bufferDuration={200}
-                        onChange={e => {
-                            if (e.previousValue === e.currentValue) {
-                                return;
-                            }
+                        onChange={currentValue => {
                             setRoomState(state => {
                                 const targetNumParamName = state.numParamNames?.[key];
                                 if (targetNumParamName == null) {
                                     return;
                                 }
-                                targetNumParamName.name = e.currentValue;
+                                targetNumParamName.name = currentValue;
                             });
                         }}
                     />
@@ -152,16 +149,13 @@
                         size="small"
                         value={state.name}
                         bufferDuration={200}
-                        onChange={e => {
-                            if (e.previousValue === e.currentValue) {
-                                return;
-                            }
+                        onChange={currentValue => {
                             setRoomState(state => {
                                 const targetBoolParamName = state.boolParamNames?.[key];
                                 if (targetBoolParamName == null) {
                                     return;
                                 }
-                                targetBoolParamName.name = e.currentValue;
+                                targetBoolParamName.name = currentValue;
                             });
                         }}
                     />
@@ -207,16 +201,13 @@
                         size="small"
                         value={state.name}
                         bufferDuration={200}
-                        onChange={e => {
-                            if (e.previousValue === e.currentValue) {
-                                return;
-                            }
+                        onChange={currentValue => {
                             setRoomState(state => {
                                 const targetStrParamName = state.strParamNames?.[key];
                                 if (targetStrParamName == null) {
                                     return;
                                 }
-                                targetStrParamName.name = e.currentValue;
+                                targetStrParamName.name = currentValue;
                             });
                         }}
                     />

apps/web-server/src/components/models/room/Room/subcomponents/components/CharacterTagNamesEditorModal/CharacterTagNamesEditorModal.tsx

@@ -10,7 +10,7 @@
 import { DialogFooter } from '@/components/ui/DialogFooter/DialogFooter';
 import { flex, flexColumn, flexRow } from '@/styles/className';
 
 export const characterTagNamesEditorVisibilityAtom = atom(false);
 
 export const CharacterTagNamesEditorModal: React.FC = () => {
     const [editorVisibility, setEditorVisibility] = useAtom(characterTagNamesEditorVisibilityAtom);
@@ -30,7 +30,7 @@
                         disabled={characterTagName == null}
                         value={characterTagName ?? ''}
                         bufferDuration="default"
-                        onChange={({ currentValue }) => {
+                        onChange={currentValue => {
                             setRoomState(roomState => {
                                 roomState[`characterTag${index}Name`] = currentValue;
                             });

apps/web-server/src/components/models/room/Room/subcomponents/components/CharacterVarInput/CharacterVarInput.tsx

@@ -25,11 +25,11 @@
             bufferDuration="default"
             disabled={character == null}
             value={character?.privateVarToml ?? ''}
-            onChange={e => {
+            onChange={currentValue => {
                 if (character == null) {
                     return;
                 }
-                onChange(e.currentValue);
+                onChange(currentValue);
             }}
         />
     );

apps/web-server/src/components/models/room/Room/subcomponents/components/ChatPalettePanelContent/ChatPalettePanelContent.tsx

@@ -73,7 +73,7 @@
                 size="small"
                 bufferDuration="default"
                 value={chatPaletteText ?? ''}
-                onChange={e => onChange(e.currentValue)}
+                onChange={currentValue => onChange(currentValue)}
             />
         );
     }

apps/web-server/src/components/models/room/Room/subcomponents/components/ImportBoardModal/ImportBoardModal.tsx

@@ -13,7 +13,7 @@
 const boardState = state(boardTemplate);
 type BoardState = State<typeof boardTemplate>;
 
 export const importBoardModalVisibilityAtom = atom(false);
 
 export const ImportBoardModal: React.FC = () => {
     const [visibility, setVisibility] = useAtom(importBoardModalVisibilityAtom);
@@ -90,10 +90,10 @@
                 <CollaborativeInput
                     multiline
                     value={value}
-                    onChange={e => {
-                        setValue(e.currentValue);
+                    onChange={currentValue => {
+                        setValue(currentValue);
                     }}
                     bufferDuration="short"
                     placeholder="ここにJSONをペーストしてください。"
                 />
                 <div>

apps/web-server/src/components/models/room/Room/subcomponents/components/ImportCharacterModal/ImportCharacterModal.tsx

@@ -13,7 +13,7 @@
 const characterState = state(characterTemplate);
 type CharacterState = State<typeof characterTemplate>;
 
 export const importCharacterModalVisibilityAtom = atom(false);
 
 export const ImportCharacterModal: React.FC = () => {
     const [visibility, setVisibility] = useAtom(importCharacterModalVisibilityAtom);
@@ -92,8 +92,8 @@
                 <CollaborativeInput
                     multiline
                     value={value}
-                    onChange={e => {
-                        setValue(e.currentValue);
+                    onChange={currentValue => {
+                        setValue(currentValue);
                     }}
                     bufferDuration="short"
                     placeholder="ここにJSONをペーストしてください。"

apps/web-server/src/components/models/room/Room/subcomponents/components/MemosPanelContent/MemosPanelContent.tsx

@@ -160,11 +160,11 @@
                     value={memo.name}
                     style={{ width: '100%' }}
                     placeholder="名前"
-                    onChange={e =>
+                    onChange={currentValue =>
                         setRoomState(prevState => {
                             const memo = prevState.memos?.[memoId];
                             if (memo != null) {
-                                memo.name = e.currentValue;
+                                memo.name = currentValue;
                             }
                         })
                     }
@@ -177,7 +177,7 @@
                 bufferDuration="default"
                 value={memo.text}
                 placeholder="本文"
-                onChange={e => {
+                onChange={currentValue => {
                     setRoomState(roomState => {
                         if (roomState.memos == null) {
                             roomState.memos = {};
@@ -186,7 +186,7 @@
                         if (memo == null) {
                             return;
                         }
-                        memo.text = e.currentValue;
+                        memo.text = currentValue;
                     });
                 }}
             />

apps/web-server/src/components/models/room/Room/subcomponents/components/OverriddenParameterNameEditor/OverriddenParameterNameEditor.tsx

@@ -53,7 +53,7 @@
                         size="small"
                         value={overriddenParameterName ?? ''}
                         bufferDuration="default"
-                        onChange={({ currentValue }) => {
+                        onChange={currentValue => {
                             onOverriddenParameterNameChange(currentValue);
                         }}
                     />

apps/web-server/src/components/models/room/Room/subcomponents/components/PieceEditorMemoRow/PieceEditorMemoRow.tsx

@@ -14,11 +14,8 @@
                 size="small"
                 bufferDuration="default"
                 value={state ?? ''}
-                onChange={e => {
-                    if (e.previousValue === e.currentValue) {
-                        return;
-                    }
-                    onChange(e.currentValue);
+                onChange={currentValue => {
+                    onChange(currentValue);
                 }}
             />
         </TableRow>

apps/web-server/src/components/models/room/Room/subcomponents/components/PieceEditorNameRow/PieceEditorNameRow.tsx

@@ -12,11 +12,8 @@
                 bufferDuration="default"
                 size="small"
                 value={state ?? ''}
-                onChange={e => {
-                    if (e.previousValue === e.currentValue) {
-                        return;
-                    }
-                    onChange(e.currentValue);
+                onChange={currentValue => {
+                    onChange(currentValue);
                 }}
             />
         </TableRow>

apps/web-server/src/components/models/room/Room/subcomponents/components/RectEditor/RectEditor.tsx

@@ -28,7 +28,7 @@
                 onChange={e => {
                     const newValue = produce(value, state => {
                         // nameがない状態をあらわす値として '' と undefined の2種類が混在するのは後々仕様変更があった際に困るかもしれないため、undefinedで統一させるようにしている
-                        state.name = e.currentValue === '' ? undefined : e.currentValue;
+                        state.name = e === '' ? undefined : e;
                     });
                     onChange(newValue);
                 }}

apps/web-server/src/components/models/room/Room/subcomponents/components/RoomMessagesPanelContent/RoomMessagesPanelContent.tsx

@@ -380,12 +380,9 @@
                             <CollaborativeInput
                                 bufferDuration="default"
                                 value={publicChannelNames == null ? '' : publicChannelNames[key]}
-                                onChange={e => {
-                                    if (e.previousValue === e.currentValue) {
-                                        return;
-                                    }
+                                onChange={currentValue => {
                                     operateAsStateWithImmer(state => {
-                                        state[key] = e.currentValue;
+                                        state[key] = currentValue;
                                     });
                                 }}
                             />

apps/web-server/src/components/models/room/Room/subcomponents/components/StringParameterInput/StringParameterInput.tsx

@@ -67,14 +67,14 @@
             bufferDuration="default"
             disabled={disabled}
             value={parameter?.value ?? ''}
-            onChange={e => {
+            onChange={currentValue => {
                 // valueで??演算子を使用しているため、e.previousValueは使えない。そのため代わりにparameter?.valueを使用している
                 const previousValue = parameter?.value;
 
-                if (previousValue === e.currentValue) {
+                if (previousValue === currentValue) {
                     return;
                 }
-                const diff2 = nullableTextDiff({ prev: previousValue, next: e.currentValue });
+                const diff2 = nullableTextDiff({ prev: previousValue, next: currentValue });
                 const operation: CharacterUpOperation = {
                     $v: 2,
                     $r: 1,

apps/web-server/src/components/models/room/Room/subcomponents/components/StringPieceEditor/StringPieceEditor.tsx

@@ -154,7 +154,7 @@
                         bufferDuration="default"
                         size="small"
                         value={state.value}
-                        onChange={({ currentValue }) => {
+                        onChange={currentValue => {
                             updateState(state => {
                                 if (state == null) {
                                     return;

apps/web-server/src/components/ui/CollaborativeInput/CollaborativeInput.css

@@ -0,0 +1,34 @@
+
+        .collaborative-input {
+            /* Ant Design の Input の色と等しい */
+            background-color: #141414;
+            /* Ant Design の Input の色と等しい */
+            color: rgba(255, 255, 255, 0.85);
+            border: 1px solid #333;
+            border-radius: 6px;
+        }
+
+        .collaborative-input:focus {
+outline: none;
+            border: 1px solid #0078d4;
+        }
+
+        .collaborative-input.very-small {
+            font-size: 0.7rem;
+            padding: 2px 4px;
+        }
+
+        .collaborative-input.small {
+            font-size: 0.75rem;
+            padding: 2px 4px;
+        }
+
+        .collaborative-input.medium {
+            font-size: 0.8rem;
+            padding: 4px 8px;
+        }
+
+        .collaborative-input.disabled {
+            color: gray;
+            cursor: not-allowed;
+        }