feat: limit max character length on select/multiselect options (#1246)

* Add maxLength of 30 characters and truncation to text fields

* Add dynamic height

* Add maxLength param

* Add maxLength in Rounded Field

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/select_option_editor.dart

@@ -142,11 +142,12 @@ class _TextField extends StatelessWidget {
             value: (option) => option);
 
         return SizedBox(
-          height: 42,
+          height: 62,
           child: SelectOptionTextField(
             options: state.options,
             selectedOptionMap: optionMap,
             distanceToText: _editorPanelWidth * 0.7,
+            maxLength: 30,
             tagController: _tagController,
             onClick: () => popoverMutex.close(),
             newText: (text) {

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart

@@ -6,6 +6,7 @@ import 'package:flowy_sdk/protobuf/flowy-grid/select_option.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:textfield_tags/textfield_tags.dart';
 
@@ -20,6 +21,7 @@ class SelectOptionTextField extends StatefulWidget {
   final Function(String) onSubmitted;
   final Function(String) newText;
   final VoidCallback? onClick;
+  final int? maxLength;
 
   const SelectOptionTextField({
     required this.options,
@@ -29,6 +31,7 @@ class SelectOptionTextField extends StatefulWidget {
     required this.onSubmitted,
     required this.newText,
     this.onClick,
+    this.maxLength,
     TextEditingController? textController,
     FocusNode? focusNode,
     Key? key,
@@ -93,6 +96,9 @@ class _SelectOptionTextFieldState extends State<SelectOptionTextField> {
               }
             },
             maxLines: 1,
+            maxLength: widget.maxLength,
+            maxLengthEnforcement:
+                MaxLengthEnforcement.truncateAfterCompositionEnds,
             style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
             decoration: InputDecoration(
               enabledBorder: OutlineInputBorder(

frontend/app_flowy/lib/plugins/grid/presentation/widgets/common/text_field.dart

@@ -9,6 +9,7 @@ class InputTextField extends StatefulWidget {
   final void Function() onCanceled;
   final bool autoClearWhenDone;
   final String text;
+  final int? maxLength;
 
   const InputTextField({
     required this.text,
@@ -16,6 +17,7 @@ class InputTextField extends StatefulWidget {
     required this.onCanceled,
     this.onChanged,
     this.autoClearWhenDone = false,
+    this.maxLength,
     Key? key,
   }) : super(key: key);
 
@@ -41,11 +43,14 @@ class _InputTextFieldState extends State<InputTextField> {
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
 
+    final height = widget.maxLength == null ? 36.0 : 56.0;
+
     return RoundedInputField(
       controller: _controller,
       focusNode: _focusNode,
       autoFocus: true,
-      height: 36,
+      height: height,
+      maxLength: widget.maxLength,
       style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
       normalBorderColor: theme.shader4,
       focusBorderColor: theme.main1,

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option.dart

@@ -256,6 +256,7 @@ class _CreateOptionTextField extends StatelessWidget {
         final text = state.newOptionName.foldRight("", (a, previous) => a);
         return InputTextField(
           autoClearWhenDone: true,
+          maxLength: 30,
           text: text,
           onCanceled: () {
             context

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option_editor.dart

@@ -106,6 +106,7 @@ class _OptionNameTextField extends StatelessWidget {
   Widget build(BuildContext context) {
     return InputTextField(
       text: name,
+      maxLength: 30,
       onCanceled: () {},
       onDone: (optionName) {
         if (name != optionName) {

frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart

@@ -2,6 +2,7 @@ import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_infra/time/duration.dart';
+import 'package:flutter/services.dart';
 
 class RoundedInputField extends StatefulWidget {
   final String? hintText;
@@ -24,6 +25,7 @@ class RoundedInputField extends StatefulWidget {
   final FocusNode? focusNode;
   final TextEditingController? controller;
   final bool autoFocus;
+  final int? maxLength;
 
   const RoundedInputField({
     Key? key,
@@ -47,6 +49,7 @@ class RoundedInputField extends StatefulWidget {
     this.focusNode,
     this.controller,
     this.autoFocus = false,
+    this.maxLength,
   }) : super(key: key);
 
   @override
@@ -89,6 +92,9 @@ class _RoundedInputFieldState extends State<RoundedInputField> {
           initialValue: widget.initialValue,
           focusNode: widget.focusNode,
           autofocus: widget.autoFocus,
+          maxLength: widget.maxLength,
+          maxLengthEnforcement:
+              MaxLengthEnforcement.truncateAfterCompositionEnds,
           onChanged: (value) {
             inputText = value;
             if (widget.onChanged != null) {