feat: add new field type

2024-08-30 18:12:39 +00:00 · 2022-05-27 19:03:48 +08:00 · 2022-05-27 19:03:48 +08:00 · 9a93a72c33
commit 9a93a72c33
parent 60b80005ac
38 changed files with 1016 additions and 62 deletions
--- a/frontend/app_flowy/assets/images/grid/field/url.svg
+++ b/frontend/app_flowy/assets/images/grid/field/url.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 7.688L8.27223 12.1469C7.69304 12.6931 6.90749 13 6.0884 13C5.26931 13 4.48376 12.6931 3.90457 12.1469C3.32538 11.6006 3 10.8598 3 10.0873C3 9.31474 3.32538 8.57387 3.90457 8.02763L8.63234 3.56875C9.01847 3.20459 9.54216 3 10.0882 3C10.6343 3 11.158 3.20459 11.5441 3.56875C11.9302 3.93291 12.1472 4.42683 12.1472 4.94183C12.1472 5.45684 11.9302 5.95075 11.5441 6.31491L6.8112 10.7738C6.61814 10.9559 6.35629 11.0582 6.08326 11.0582C5.81022 11.0582 5.54838 10.9559 5.35531 10.7738C5.16225 10.5917 5.05379 10.3448 5.05379 10.0873C5.05379 9.82975 5.16225 9.58279 5.35531 9.40071L9.72297 5.28632" stroke="#333333" stroke-width="0.9989" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/app_flowy/assets/translations/en.json
+++ b/frontend/app_flowy/assets/translations/en.json
@ -160,6 +160,7 @@
      "numberFieldName": "Numbers",
      "singleSelectFieldName": "Select",
      "multiSelectFieldName": "Multiselect",
+      "urlFieldName": "URL",
      "numberFormat": " Number format",
      "dateFormat": " Date format",
      "includeTime": " Include time",
--- a/frontend/app_flowy/lib/workspace/application/grid/cell/cell_service/cell_service.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/cell/cell_service/cell_service.dart
@ -12,7 +12,6 @@ import 'package:flowy_sdk/protobuf/flowy-grid/date_type_option.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/selection_type_option.pb.dart';
 import 'package:flutter/foundation.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
-
 import 'package:app_flowy/workspace/application/grid/cell/cell_listener.dart';
 import 'package:app_flowy/workspace/application/grid/cell/select_option_service.dart';
 import 'package:app_flowy/workspace/application/grid/field/field_service.dart';
--- a/frontend/app_flowy/lib/workspace/application/grid/cell/cell_service/context_builder.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/cell/cell_service/context_builder.dart
@ -3,6 +3,7 @@ part of 'cell_service.dart';
 typedef GridCellContext = _GridCellContext<Cell, String>;
 typedef GridSelectOptionCellContext = _GridCellContext<SelectOptionCellData, String>;
 typedef GridDateCellContext = _GridCellContext<DateCellData, DateCalData>;
+typedef GridURLCellContext = _GridCellContext<Cell, String>;

 class GridCellContextBuilder {
  final GridCellCache _cellCache;
@ -58,12 +59,21 @@ class GridCellContextBuilder {
          cellDataLoader: SelectOptionCellDataLoader(gridCell: _gridCell),
          cellDataPersistence: CellDataPersistence(gridCell: _gridCell),
        );
-      default:
-        throw UnimplementedError;
+
+      case FieldType.URL:
+        return GridURLCellContext(
+          gridCell: _gridCell,
+          cellCache: _cellCache,
+          cellDataLoader: GridCellDataLoader(gridCell: _gridCell),
+          cellDataPersistence: CellDataPersistence(gridCell: _gridCell),
+        );
    }
+    throw UnimplementedError;
  }
 }

+// T: the type of the CellData
+// D: the type of the data that will be save to disk
 // ignore: must_be_immutable
 class _GridCellContext<T, D> extends Equatable {
  final GridCell gridCell;
--- a/frontend/app_flowy/lib/workspace/application/grid/cell/url_cell_bloc.dart
+++ b/frontend/app_flowy/lib/workspace/application/grid/cell/url_cell_bloc.dart
@ -0,0 +1,72 @@
+import 'package:flowy_sdk/protobuf/flowy-grid-data-model/grid.pb.dart' show Cell;
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'dart:async';
+import 'cell_service/cell_service.dart';
+
+part 'url_cell_bloc.freezed.dart';
+
+class URLCellBloc extends Bloc<URLCellEvent, URLCellState> {
+  final GridURLCellContext cellContext;
+  void Function()? _onCellChangedFn;
+  URLCellBloc({
+    required this.cellContext,
+  }) : super(URLCellState.initial(cellContext)) {
+    on<URLCellEvent>(
+      (event, emit) async {
+        event.when(
+          initial: () {
+            _startListening();
+          },
+          updateText: (text) {
+            cellContext.saveCellData(text);
+            emit(state.copyWith(content: text));
+          },
+          didReceiveCellUpdate: (cellData) {
+            emit(state.copyWith(content: cellData.content));
+          },
+        );
+      },
+    );
+  }
+
+  @override
+  Future<void> close() async {
+    if (_onCellChangedFn != null) {
+      cellContext.removeListener(_onCellChangedFn!);
+      _onCellChangedFn = null;
+    }
+    cellContext.dispose();
+    return super.close();
+  }
+
+  void _startListening() {
+    _onCellChangedFn = cellContext.startListening(
+      onCellChanged: ((cellData) {
+        if (!isClosed) {
+          add(URLCellEvent.didReceiveCellUpdate(cellData));
+        }
+      }),
+    );
+  }
+}
+
+@freezed
+class URLCellEvent with _$URLCellEvent {
+  const factory URLCellEvent.initial() = _InitialCell;
+  const factory URLCellEvent.didReceiveCellUpdate(Cell cell) = _DidReceiveCellUpdate;
+  const factory URLCellEvent.updateText(String text) = _UpdateText;
+}
+
+@freezed
+class URLCellState with _$URLCellState {
+  const factory URLCellState({
+    required String content,
+    required String url,
+  }) = _URLCellState;
+
+  factory URLCellState.initial(GridURLCellContext context) {
+    final cellData = context.getCellData();
+    return URLCellState(content: cellData?.content ?? "", url: "");
+  }
+}
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/cell_builder.dart
@ -13,6 +13,7 @@ import 'date_cell/date_cell.dart';
 import 'number_cell.dart';
 import 'select_option_cell/select_option_cell.dart';
 import 'text_cell.dart';
+import 'url_cell.dart';

 GridCellWidget buildGridCellWidget(GridCell gridCell, GridCellCache cellCache, {GridCellStyle? style}) {
  final key = ValueKey(gridCell.cellId());
@ -32,10 +33,11 @@ GridCellWidget buildGridCellWidget(GridCell gridCell, GridCellCache cellCache, {
      return NumberCell(cellContextBuilder: cellContextBuilder, key: key);
    case FieldType.RichText:
      return GridTextCell(cellContextBuilder: cellContextBuilder, style: style, key: key);
-
-    default:
-      throw UnimplementedError;
+    case FieldType.URL:
+      return GridURLCell(cellContextBuilder: cellContextBuilder, style: style, key: key);
+      
  }
+  throw UnimplementedError;
 }

 class BlankCell extends StatelessWidget {
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/url_cell.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/url_cell.dart
@ -0,0 +1,127 @@
+import 'dart:async';
+import 'package:app_flowy/workspace/application/grid/cell/url_cell_bloc.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:app_flowy/workspace/application/grid/prelude.dart';
+import 'cell_builder.dart';
+
+class GridURLCellStyle extends GridCellStyle {
+  String? placeholder;
+
+  GridURLCellStyle({
+    this.placeholder,
+  });
+}
+
+class GridURLCell extends StatefulWidget with GridCellWidget {
+  final GridCellContextBuilder cellContextBuilder;
+  late final GridURLCellStyle? cellStyle;
+  GridURLCell({
+    required this.cellContextBuilder,
+    GridCellStyle? style,
+    Key? key,
+  }) : super(key: key) {
+    if (style != null) {
+      cellStyle = (style as GridURLCellStyle);
+    } else {
+      cellStyle = null;
+    }
+  }
+
+  @override
+  State<GridURLCell> createState() => _GridURLCellState();
+}
+
+class _GridURLCellState extends State<GridURLCell> {
+  late URLCellBloc _cellBloc;
+  late TextEditingController _controller;
+  late CellSingleFocusNode _focusNode;
+  Timer? _delayOperation;
+
+  @override
+  void initState() {
+    final cellContext = widget.cellContextBuilder.build() as GridURLCellContext;
+    _cellBloc = URLCellBloc(cellContext: cellContext);
+    _cellBloc.add(const URLCellEvent.initial());
+    _controller = TextEditingController(text: _cellBloc.state.content);
+    _focusNode = CellSingleFocusNode();
+
+    _listenFocusNode();
+    _listenRequestFocus(context);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider.value(
+      value: _cellBloc,
+      child: BlocListener<URLCellBloc, URLCellState>(
+        listener: (context, state) {
+          if (_controller.text != state.content) {
+            _controller.text = state.content;
+          }
+        },
+        child: TextField(
+          controller: _controller,
+          focusNode: _focusNode,
+          onChanged: (value) => focusChanged(),
+          onEditingComplete: () => _focusNode.unfocus(),
+          maxLines: null,
+          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+          decoration: InputDecoration(
+            contentPadding: EdgeInsets.zero,
+            border: InputBorder.none,
+            hintText: widget.cellStyle?.placeholder,
+            isDense: true,
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Future<void> dispose() async {
+    widget.requestFocus.removeAllListener();
+    _delayOperation?.cancel();
+    _cellBloc.close();
+    _focusNode.removeSingleListener();
+    _focusNode.dispose();
+
+    super.dispose();
+  }
+
+  @override
+  void didUpdateWidget(covariant GridURLCell oldWidget) {
+    if (oldWidget != widget) {
+      _listenFocusNode();
+    }
+    super.didUpdateWidget(oldWidget);
+  }
+
+  void _listenFocusNode() {
+    widget.onFocus.value = _focusNode.hasFocus;
+    _focusNode.setSingleListener(() {
+      widget.onFocus.value = _focusNode.hasFocus;
+      focusChanged();
+    });
+  }
+
+  void _listenRequestFocus(BuildContext context) {
+    widget.requestFocus.addListener(() {
+      if (_focusNode.hasFocus == false && _focusNode.canRequestFocus) {
+        FocusScope.of(context).requestFocus(_focusNode);
+      }
+    });
+  }
+
+  Future<void> focusChanged() async {
+    if (mounted) {
+      _delayOperation?.cancel();
+      _delayOperation = Timer(const Duration(milliseconds: 300), () {
+        if (_cellBloc.isClosed == false && _controller.text != _cellBloc.state.content) {
+          _cellBloc.add(URLCellEvent.updateText(_controller.text));
+        }
+      });
+    }
+  }
+}
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_editor_pannel.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_editor_pannel.dart
@ -22,6 +22,7 @@ import 'type_option/multi_select.dart';
 import 'type_option/number.dart';
 import 'type_option/rich_text.dart';
 import 'type_option/single_select.dart';
+import 'type_option/url.dart';

 typedef UpdateFieldCallback = void Function(Field, Uint8List);
 typedef SwitchToFieldCallback = Future<Either<FieldTypeOptionData, FlowyError>> Function(
@ -168,9 +169,12 @@ TypeOptionBuilder _makeTypeOptionBuild({
        typeOptionContext as RichTextTypeOptionContext,
      );

-    default:
-      throw UnimplementedError;
+    case FieldType.URL:
+      return URLTypeOptionBuilder(
+        typeOptionContext as URLTypeOptionContext,
+      );
  }
+  throw UnimplementedError;
 }

 TypeOptionContext _makeTypeOptionContext(GridFieldContext fieldContext) {
@ -205,9 +209,15 @@ TypeOptionContext _makeTypeOptionContext(GridFieldContext fieldContext) {
        fieldContext: fieldContext,
        dataBuilder: SingleSelectTypeOptionDataBuilder(),
      );
-    default:
-      throw UnimplementedError();
+
+    case FieldType.URL:
+      return URLTypeOptionContext(
+        fieldContext: fieldContext,
+        dataBuilder: URLTypeOptionDataBuilder(),
+      );
  }
+
+  throw UnimplementedError();
 }

 abstract class TypeOptionWidget extends StatelessWidget {
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_type_extension.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/field_type_extension.dart
@ -17,9 +17,10 @@ extension FieldTypeListExtension on FieldType {
        return "grid/field/text";
      case FieldType.SingleSelect:
        return "grid/field/single_select";
-      default:
-        throw UnimplementedError;
+      case FieldType.URL:
+        return "grid/field/url";
    }
+    throw UnimplementedError;
  }

  String title() {
@ -36,8 +37,9 @@ extension FieldTypeListExtension on FieldType {
        return LocaleKeys.grid_field_textFieldName.tr();
      case FieldType.SingleSelect:
        return LocaleKeys.grid_field_singleSelectFieldName.tr();
-      default:
-        throw UnimplementedError;
+      case FieldType.URL:
+        return LocaleKeys.grid_field_urlFieldName.tr();
    }
+    throw UnimplementedError;
  }
 }
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/url.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/header/type_option/url.dart
@ -0,0 +1,20 @@
+import 'package:app_flowy/workspace/application/grid/field/type_option/type_option_service.dart';
+import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/field_editor_pannel.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid/url_type_option.pb.dart';
+import 'package:flutter/material.dart';
+
+typedef URLTypeOptionContext = TypeOptionContext<URLTypeOption>;
+
+class URLTypeOptionDataBuilder extends TypeOptionDataBuilder<URLTypeOption> {
+  @override
+  URLTypeOption fromBuffer(List<int> buffer) {
+    return URLTypeOption.fromBuffer(buffer);
+  }
+}
+
+class URLTypeOptionBuilder extends TypeOptionBuilder {
+  URLTypeOptionBuilder(URLTypeOptionContext typeOptionContext);
+
+  @override
+  Widget? get customWidget => null;
+}
--- a/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/row_detail.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/row/row_detail.dart
@ -4,6 +4,7 @@ import 'package:app_flowy/workspace/application/grid/row/row_detail_bloc.dart';
 import 'package:app_flowy/workspace/application/grid/row/row_service.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/layout/sizes.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/prelude.dart';
+import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/url_cell.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/field_cell.dart';
 import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/header/field_editor.dart';
 import 'package:flowy_infra/image.dart';
@ -212,7 +213,11 @@ GridCellStyle? _buildCellStyle(AppTheme theme, FieldType fieldType) {
      return SelectOptionCellStyle(
        placeholder: LocaleKeys.grid_row_textPlaceholder.tr(),
      );
-    default:
-      return null;
+
+    case FieldType.URL:
+      return GridURLCellStyle(
+        placeholder: LocaleKeys.grid_row_textPlaceholder.tr(),
+      );
  }
+  return null;
 }
--- a/frontend/app_flowy/packages/flowy_sdk/lib/dispatch/dispatch.dart
+++ b/frontend/app_flowy/packages/flowy_sdk/lib/dispatch/dispatch.dart
@ -9,6 +9,7 @@ import 'package:flowy_sdk/protobuf/flowy-grid/date_type_option.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/field_entities.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/row_entities.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/selection_type_option.pb.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid/url_type_option.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-net/event.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-net/network_state.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-user/event_map.pb.dart';
--- a/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid-data-model/grid.pbenum.dart
+++ b/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid-data-model/grid.pbenum.dart
@ -31,6 +31,7 @@ class FieldType extends $pb.ProtobufEnum {
  static const FieldType SingleSelect = FieldType._(3, const $core.bool.fromEnvironment('protobuf.omit_enum_names') ? '' : 'SingleSelect');
  static const FieldType MultiSelect = FieldType._(4, const $core.bool.fromEnvironment('protobuf.omit_enum_names') ? '' : 'MultiSelect');
  static const FieldType Checkbox = FieldType._(5, const $core.bool.fromEnvironment('protobuf.omit_enum_names') ? '' : 'Checkbox');
+  static const FieldType URL = FieldType._(6, const $core.bool.fromEnvironment('protobuf.omit_enum_names') ? '' : 'URL');

  static const $core.List<FieldType> values = <FieldType> [
    RichText,
@ -39,6 +40,7 @@ class FieldType extends $pb.ProtobufEnum {
    SingleSelect,
    MultiSelect,
    Checkbox,
+    URL,
  ];

  static final $core.Map<$core.int, FieldType> _byValue = $pb.ProtobufEnum.initByValue(values);
--- a/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid-data-model/grid.pbjson.dart
+++ b/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid-data-model/grid.pbjson.dart
@ -29,11 +29,12 @@ const FieldType$json = const {
    const {'1': 'SingleSelect', '2': 3},
    const {'1': 'MultiSelect', '2': 4},
    const {'1': 'Checkbox', '2': 5},
+    const {'1': 'URL', '2': 6},
  ],
 };

 /// Descriptor for `FieldType`. Decode as a `google.protobuf.EnumDescriptorProto`.
-final $typed_data.Uint8List fieldTypeDescriptor = $convert.base64Decode('CglGaWVsZFR5cGUSDAoIUmljaFRleHQQABIKCgZOdW1iZXIQARIMCghEYXRlVGltZRACEhAKDFNpbmdsZVNlbGVjdBADEg8KC011bHRpU2VsZWN0EAQSDAoIQ2hlY2tib3gQBQ==');
+final $typed_data.Uint8List fieldTypeDescriptor = $convert.base64Decode('CglGaWVsZFR5cGUSDAoIUmljaFRleHQQABIKCgZOdW1iZXIQARIMCghEYXRlVGltZRACEhAKDFNpbmdsZVNlbGVjdBADEg8KC011bHRpU2VsZWN0EAQSDAoIQ2hlY2tib3gQBRIHCgNVUkwQBg==');
@$core.Deprecated('Use gridDescriptor instead')
 const Grid$json = const {
  '1': 'Grid',
--- a/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/protobuf.dart
+++ b/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/protobuf.dart
@ -5,6 +5,7 @@ export './dart_notification.pb.dart';
 export './selection_type_option.pb.dart';
 export './row_entities.pb.dart';
 export './cell_entities.pb.dart';
+export './url_type_option.pb.dart';
 export './checkbox_type_option.pb.dart';
 export './event_map.pb.dart';
 export './text_type_option.pb.dart';
--- a/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/text_type_option.pb.dart
+++ b/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/text_type_option.pb.dart
@ -11,17 +11,17 @@ import 'package:protobuf/protobuf.dart' as $pb;

 class RichTextTypeOption extends $pb.GeneratedMessage {
  static final $pb.BuilderInfo _i = $pb.BuilderInfo(const $core.bool.fromEnvironment('protobuf.omit_message_names') ? '' : 'RichTextTypeOption', createEmptyInstance: create)
-    ..aOS(1, const $core.bool.fromEnvironment('protobuf.omit_field_names') ? '' : 'format')
+    ..aOS(1, const $core.bool.fromEnvironment('protobuf.omit_field_names') ? '' : 'data')
    ..hasRequiredFields = false
  ;

  RichTextTypeOption._() : super();
  factory RichTextTypeOption({
-    $core.String? format,
+    $core.String? data,
  }) {
    final _result = create();
-    if (format != null) {
-      _result.format = format;
+    if (data != null) {
+      _result.data = data;
    }
    return _result;
  }
@ -47,12 +47,12 @@ class RichTextTypeOption extends $pb.GeneratedMessage {
  static RichTextTypeOption? _defaultInstance;

  @$pb.TagNumber(1)
-  $core.String get format => $_getSZ(0);
+  $core.String get data => $_getSZ(0);
  @$pb.TagNumber(1)
-  set format($core.String v) { $_setString(0, v); }
+  set data($core.String v) { $_setString(0, v); }
  @$pb.TagNumber(1)
-  $core.bool hasFormat() => $_has(0);
+  $core.bool hasData() => $_has(0);
  @$pb.TagNumber(1)
-  void clearFormat() => clearField(1);
+  void clearData() => clearField(1);
 }

--- a/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/text_type_option.pbjson.dart
+++ b/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/text_type_option.pbjson.dart
@ -12,9 +12,9 @@ import 'dart:typed_data' as $typed_data;
 const RichTextTypeOption$json = const {
  '1': 'RichTextTypeOption',
  '2': const [
-    const {'1': 'format', '3': 1, '4': 1, '5': 9, '10': 'format'},
+    const {'1': 'data', '3': 1, '4': 1, '5': 9, '10': 'data'},
  ],
 };

 /// Descriptor for `RichTextTypeOption`. Decode as a `google.protobuf.DescriptorProto`.
-final $typed_data.Uint8List richTextTypeOptionDescriptor = $convert.base64Decode('ChJSaWNoVGV4dFR5cGVPcHRpb24SFgoGZm9ybWF0GAEgASgJUgZmb3JtYXQ=');
+final $typed_data.Uint8List richTextTypeOptionDescriptor = $convert.base64Decode('ChJSaWNoVGV4dFR5cGVPcHRpb24SEgoEZGF0YRgBIAEoCVIEZGF0YQ==');
--- a/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/url_type_option.pb.dart
+++ b/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/url_type_option.pb.dart
@ -0,0 +1,119 @@
+///
+//  Generated code. Do not modify.
+//  source: url_type_option.proto
+//
+// @dart = 2.12
+// ignore_for_file: annotate_overrides,camel_case_types,unnecessary_const,non_constant_identifier_names,library_prefixes,unused_import,unused_shown_name,return_of_invalid_type,unnecessary_this,prefer_final_fields
+
+import 'dart:core' as $core;
+
+import 'package:protobuf/protobuf.dart' as $pb;
+
+class URLTypeOption extends $pb.GeneratedMessage {
+  static final $pb.BuilderInfo _i = $pb.BuilderInfo(const $core.bool.fromEnvironment('protobuf.omit_message_names') ? '' : 'URLTypeOption', createEmptyInstance: create)
+    ..aOS(1, const $core.bool.fromEnvironment('protobuf.omit_field_names') ? '' : 'data')
+    ..hasRequiredFields = false
+  ;
+
+  URLTypeOption._() : super();
+  factory URLTypeOption({
+    $core.String? data,
+  }) {
+    final _result = create();
+    if (data != null) {
+      _result.data = data;
+    }
+    return _result;
+  }
+  factory URLTypeOption.fromBuffer($core.List<$core.int> i, [$pb.ExtensionRegistry r = $pb.ExtensionRegistry.EMPTY]) => create()..mergeFromBuffer(i, r);
+  factory URLTypeOption.fromJson($core.String i, [$pb.ExtensionRegistry r = $pb.ExtensionRegistry.EMPTY]) => create()..mergeFromJson(i, r);
+  @$core.Deprecated(
+  'Using this can add significant overhead to your binary. '
+  'Use [GeneratedMessageGenericExtensions.deepCopy] instead. '
+  'Will be removed in next major version')
+  URLTypeOption clone() => URLTypeOption()..mergeFromMessage(this);
+  @$core.Deprecated(
+  'Using this can add significant overhead to your binary. '
+  'Use [GeneratedMessageGenericExtensions.rebuild] instead. '
+  'Will be removed in next major version')
+  URLTypeOption copyWith(void Function(URLTypeOption) updates) => super.copyWith((message) => updates(message as URLTypeOption)) as URLTypeOption; // ignore: deprecated_member_use
+  $pb.BuilderInfo get info_ => _i;
+  @$core.pragma('dart2js:noInline')
+  static URLTypeOption create() => URLTypeOption._();
+  URLTypeOption createEmptyInstance() => create();
+  static $pb.PbList<URLTypeOption> createRepeated() => $pb.PbList<URLTypeOption>();
+  @$core.pragma('dart2js:noInline')
+  static URLTypeOption getDefault() => _defaultInstance ??= $pb.GeneratedMessage.$_defaultFor<URLTypeOption>(create);
+  static URLTypeOption? _defaultInstance;
+
+  @$pb.TagNumber(1)
+  $core.String get data => $_getSZ(0);
+  @$pb.TagNumber(1)
+  set data($core.String v) { $_setString(0, v); }
+  @$pb.TagNumber(1)
+  $core.bool hasData() => $_has(0);
+  @$pb.TagNumber(1)
+  void clearData() => clearField(1);
+}
+
+class URLCellData extends $pb.GeneratedMessage {
+  static final $pb.BuilderInfo _i = $pb.BuilderInfo(const $core.bool.fromEnvironment('protobuf.omit_message_names') ? '' : 'URLCellData', createEmptyInstance: create)
+    ..aOS(1, const $core.bool.fromEnvironment('protobuf.omit_field_names') ? '' : 'url')
+    ..aOS(2, const $core.bool.fromEnvironment('protobuf.omit_field_names') ? '' : 'content')
+    ..hasRequiredFields = false
+  ;
+
+  URLCellData._() : super();
+  factory URLCellData({
+    $core.String? url,
+    $core.String? content,
+  }) {
+    final _result = create();
+    if (url != null) {
+      _result.url = url;
+    }
+    if (content != null) {
+      _result.content = content;
+    }
+    return _result;
+  }
+  factory URLCellData.fromBuffer($core.List<$core.int> i, [$pb.ExtensionRegistry r = $pb.ExtensionRegistry.EMPTY]) => create()..mergeFromBuffer(i, r);
+  factory URLCellData.fromJson($core.String i, [$pb.ExtensionRegistry r = $pb.ExtensionRegistry.EMPTY]) => create()..mergeFromJson(i, r);
+  @$core.Deprecated(
+  'Using this can add significant overhead to your binary. '
+  'Use [GeneratedMessageGenericExtensions.deepCopy] instead. '
+  'Will be removed in next major version')
+  URLCellData clone() => URLCellData()..mergeFromMessage(this);
+  @$core.Deprecated(
+  'Using this can add significant overhead to your binary. '
+  'Use [GeneratedMessageGenericExtensions.rebuild] instead. '
+  'Will be removed in next major version')
+  URLCellData copyWith(void Function(URLCellData) updates) => super.copyWith((message) => updates(message as URLCellData)) as URLCellData; // ignore: deprecated_member_use
+  $pb.BuilderInfo get info_ => _i;
+  @$core.pragma('dart2js:noInline')
+  static URLCellData create() => URLCellData._();
+  URLCellData createEmptyInstance() => create();
+  static $pb.PbList<URLCellData> createRepeated() => $pb.PbList<URLCellData>();
+  @$core.pragma('dart2js:noInline')
+  static URLCellData getDefault() => _defaultInstance ??= $pb.GeneratedMessage.$_defaultFor<URLCellData>(create);
+  static URLCellData? _defaultInstance;
+
+  @$pb.TagNumber(1)
+  $core.String get url => $_getSZ(0);
+  @$pb.TagNumber(1)
+  set url($core.String v) { $_setString(0, v); }
+  @$pb.TagNumber(1)
+  $core.bool hasUrl() => $_has(0);
+  @$pb.TagNumber(1)
+  void clearUrl() => clearField(1);
+
+  @$pb.TagNumber(2)
+  $core.String get content => $_getSZ(1);
+  @$pb.TagNumber(2)
+  set content($core.String v) { $_setString(1, v); }
+  @$pb.TagNumber(2)
+  $core.bool hasContent() => $_has(1);
+  @$pb.TagNumber(2)
+  void clearContent() => clearField(2);
+}
+
--- a/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/url_type_option.pbenum.dart
+++ b/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/url_type_option.pbenum.dart
@ -0,0 +1,7 @@
+///
+//  Generated code. Do not modify.
+//  source: url_type_option.proto
+//
+// @dart = 2.12
+// ignore_for_file: annotate_overrides,camel_case_types,unnecessary_const,non_constant_identifier_names,library_prefixes,unused_import,unused_shown_name,return_of_invalid_type,unnecessary_this,prefer_final_fields
+
--- a/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/url_type_option.pbjson.dart
+++ b/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/url_type_option.pbjson.dart
@ -0,0 +1,31 @@
+///
+//  Generated code. Do not modify.
+//  source: url_type_option.proto
+//
+// @dart = 2.12
+// ignore_for_file: annotate_overrides,camel_case_types,unnecessary_const,non_constant_identifier_names,library_prefixes,unused_import,unused_shown_name,return_of_invalid_type,unnecessary_this,prefer_final_fields,deprecated_member_use_from_same_package
+
+import 'dart:core' as $core;
+import 'dart:convert' as $convert;
+import 'dart:typed_data' as $typed_data;
+@$core.Deprecated('Use uRLTypeOptionDescriptor instead')
+const URLTypeOption$json = const {
+  '1': 'URLTypeOption',
+  '2': const [
+    const {'1': 'data', '3': 1, '4': 1, '5': 9, '10': 'data'},
+  ],
+};
+
+/// Descriptor for `URLTypeOption`. Decode as a `google.protobuf.DescriptorProto`.
+final $typed_data.Uint8List uRLTypeOptionDescriptor = $convert.base64Decode('Cg1VUkxUeXBlT3B0aW9uEhIKBGRhdGEYASABKAlSBGRhdGE=');
+@$core.Deprecated('Use uRLCellDataDescriptor instead')
+const URLCellData$json = const {
+  '1': 'URLCellData',
+  '2': const [
+    const {'1': 'url', '3': 1, '4': 1, '5': 9, '10': 'url'},
+    const {'1': 'content', '3': 2, '4': 1, '5': 9, '10': 'content'},
+  ],
+};
+
+/// Descriptor for `URLCellData`. Decode as a `google.protobuf.DescriptorProto`.
+final $typed_data.Uint8List uRLCellDataDescriptor = $convert.base64Decode('CgtVUkxDZWxsRGF0YRIQCgN1cmwYASABKAlSA3VybBIYCgdjb250ZW50GAIgASgJUgdjb250ZW50');
--- a/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/url_type_option.pbserver.dart
+++ b/frontend/app_flowy/packages/flowy_sdk/lib/protobuf/flowy-grid/url_type_option.pbserver.dart
@ -0,0 +1,9 @@
+///
+//  Generated code. Do not modify.
+//  source: url_type_option.proto
+//
+// @dart = 2.12
+// ignore_for_file: annotate_overrides,camel_case_types,unnecessary_const,non_constant_identifier_names,library_prefixes,unused_import,unused_shown_name,return_of_invalid_type,unnecessary_this,prefer_final_fields,deprecated_member_use_from_same_package
+
+export 'url_type_option.pb.dart';
+
--- a/frontend/rust-lib/Cargo.lock
+++ b/frontend/rust-lib/Cargo.lock
@ -953,6 +953,7 @@ dependencies = [
 "strum_macros",
 "tokio",
 "tracing",
+ "url",
 ]

 [[package]]
--- a/frontend/rust-lib/flowy-grid/Cargo.toml
+++ b/frontend/rust-lib/flowy-grid/Cargo.toml
@ -35,6 +35,7 @@ serde = { version = "1.0", features = ["derive"] }
 serde_json = {version = "1.0"}
 serde_repr = "0.1"
 indexmap = {version = "1.8.1", features = ["serde"]}
+url = { version = "2"}

 [dev-dependencies]
 flowy-test = { path = "../flowy-test" }
--- a/frontend/rust-lib/flowy-grid/src/event_handler.rs
+++ b/frontend/rust-lib/flowy-grid/src/event_handler.rs
@ -263,7 +263,7 @@ pub(crate) async fn update_cell_handler(
    Ok(())
 }

-#[tracing::instrument(level = "debug", skip(data, manager), err)]
+#[tracing::instrument(level = "trace", skip(data, manager), err)]
 pub(crate) async fn get_date_cell_data_handler(
    data: Data<CellIdentifierPayload>,
    manager: AppData<Arc<GridManager>>,
@ -272,7 +272,7 @@ pub(crate) async fn get_date_cell_data_handler(
    let editor = manager.get_grid_editor(&params.grid_id)?;
    match editor.get_field_meta(&params.field_id).await {
        None => {
-            tracing::error!("Can't find the corresponding field with id: {}", params.field_id);
+            tracing::error!("Can't find the date field with id: {}", params.field_id);
            data_result(DateCellData::default())
        }
        Some(field_meta) => {
@ -350,7 +350,7 @@ pub(crate) async fn get_select_option_handler(
    let editor = manager.get_grid_editor(&params.grid_id)?;
    match editor.get_field_meta(&params.field_id).await {
        None => {
-            tracing::error!("Can't find the corresponding field with id: {}", params.field_id);
+            tracing::error!("Can't find the select option field with id: {}", params.field_id);
            data_result(SelectOptionCellData::default())
        }
        Some(field_meta) => {
--- a/frontend/rust-lib/flowy-grid/src/protobuf/model/mod.rs
+++ b/frontend/rust-lib/flowy-grid/src/protobuf/model/mod.rs
@ -19,6 +19,9 @@ pub use row_entities::*;
 mod cell_entities;
 pub use cell_entities::*;

+mod url_type_option;
+pub use url_type_option::*;
+
 mod checkbox_type_option;
 pub use checkbox_type_option::*;

--- a/frontend/rust-lib/flowy-grid/src/protobuf/model/text_type_option.rs
+++ b/frontend/rust-lib/flowy-grid/src/protobuf/model/text_type_option.rs
@ -26,7 +26,7 @@
 #[derive(PartialEq,Clone,Default)]
 pub struct RichTextTypeOption {
    // message fields
-    pub format: ::std::string::String,
+    pub data: ::std::string::String,
    // special fields
    pub unknown_fields: ::protobuf::UnknownFields,
    pub cached_size: ::protobuf::CachedSize,
@ -43,30 +43,30 @@ impl RichTextTypeOption {
        ::std::default::Default::default()
    }

-    // string format = 1;
+    // string data = 1;


-    pub fn get_format(&self) -> &str {
-        &self.format
+    pub fn get_data(&self) -> &str {
+        &self.data
    }
-    pub fn clear_format(&mut self) {
-        self.format.clear();
+    pub fn clear_data(&mut self) {
+        self.data.clear();
    }

    // Param is passed by value, moved
-    pub fn set_format(&mut self, v: ::std::string::String) {
-        self.format = v;
+    pub fn set_data(&mut self, v: ::std::string::String) {
+        self.data = v;
    }

    // Mutable pointer to the field.
    // If field is not initialized, it is initialized with default value first.
-    pub fn mut_format(&mut self) -> &mut ::std::string::String {
-        &mut self.format
+    pub fn mut_data(&mut self) -> &mut ::std::string::String {
+        &mut self.data
    }

    // Take field
-    pub fn take_format(&mut self) -> ::std::string::String {
-        ::std::mem::replace(&mut self.format, ::std::string::String::new())
+    pub fn take_data(&mut self) -> ::std::string::String {
+        ::std::mem::replace(&mut self.data, ::std::string::String::new())
    }
 }

@ -80,7 +80,7 @@ impl ::protobuf::Message for RichTextTypeOption {
            let (field_number, wire_type) = is.read_tag_unpack()?;
            match field_number {
                1 => {
-                    ::protobuf::rt::read_singular_proto3_string_into(wire_type, is, &mut self.format)?;
+                    ::protobuf::rt::read_singular_proto3_string_into(wire_type, is, &mut self.data)?;
                },
                _ => {
                    ::protobuf::rt::read_unknown_or_skip_group(field_number, wire_type, is, self.mut_unknown_fields())?;
@ -94,8 +94,8 @@ impl ::protobuf::Message for RichTextTypeOption {
    #[allow(unused_variables)]
    fn compute_size(&self) -> u32 {
        let mut my_size = 0;
-        if !self.format.is_empty() {
-            my_size += ::protobuf::rt::string_size(1, &self.format);
+        if !self.data.is_empty() {
+            my_size += ::protobuf::rt::string_size(1, &self.data);
        }
        my_size += ::protobuf::rt::unknown_fields_size(self.get_unknown_fields());
        self.cached_size.set(my_size);
@ -103,8 +103,8 @@ impl ::protobuf::Message for RichTextTypeOption {
    }

    fn write_to_with_cached_sizes(&self, os: &mut ::protobuf::CodedOutputStream<'_>) -> ::protobuf::ProtobufResult<()> {
-        if !self.format.is_empty() {
-            os.write_string(1, &self.format)?;
+        if !self.data.is_empty() {
+            os.write_string(1, &self.data)?;
        }
        os.write_unknown_fields(self.get_unknown_fields())?;
        ::std::result::Result::Ok(())
@ -145,9 +145,9 @@ impl ::protobuf::Message for RichTextTypeOption {
        descriptor.get(|| {
            let mut fields = ::std::vec::Vec::new();
            fields.push(::protobuf::reflect::accessor::make_simple_field_accessor::<_, ::protobuf::types::ProtobufTypeString>(
-                "format",
-                |m: &RichTextTypeOption| { &m.format },
-                |m: &mut RichTextTypeOption| { &mut m.format },
+                "data",
+                |m: &RichTextTypeOption| { &m.data },
+                |m: &mut RichTextTypeOption| { &mut m.data },
            ));
            ::protobuf::reflect::MessageDescriptor::new_pb_name::<RichTextTypeOption>(
                "RichTextTypeOption",
@ -165,7 +165,7 @@ impl ::protobuf::Message for RichTextTypeOption {

 impl ::protobuf::Clear for RichTextTypeOption {
    fn clear(&mut self) {
-        self.format.clear();
+        self.data.clear();
        self.unknown_fields.clear();
    }
 }
@ -183,8 +183,8 @@ impl ::protobuf::reflect::ProtobufValue for RichTextTypeOption {
 }

 static file_descriptor_proto_data: &'static [u8] = b"\
-    \n\x16text_type_option.proto\",\n\x12RichTextTypeOption\x12\x16\n\x06for\
-    mat\x18\x01\x20\x01(\tR\x06formatb\x06proto3\
+    \n\x16text_type_option.proto\"(\n\x12RichTextTypeOption\x12\x12\n\x04dat\
+    a\x18\x01\x20\x01(\tR\x04datab\x06proto3\
 ";

 static file_descriptor_proto_lazy: ::protobuf::rt::LazyV2<::protobuf::descriptor::FileDescriptorProto> = ::protobuf::rt::LazyV2::INIT;
--- a/frontend/rust-lib/flowy-grid/src/protobuf/model/url_type_option.rs
+++ b/frontend/rust-lib/flowy-grid/src/protobuf/model/url_type_option.rs
@ -0,0 +1,403 @@
+// This file is generated by rust-protobuf 2.25.2. Do not edit
+// @generated
+
+// https://github.com/rust-lang/rust-clippy/issues/702
+#![allow(unknown_lints)]
+#![allow(clippy::all)]
+
+#![allow(unused_attributes)]
+#![cfg_attr(rustfmt, rustfmt::skip)]
+
+#![allow(box_pointers)]
+#![allow(dead_code)]
+#![allow(missing_docs)]
+#![allow(non_camel_case_types)]
+#![allow(non_snake_case)]
+#![allow(non_upper_case_globals)]
+#![allow(trivial_casts)]
+#![allow(unused_imports)]
+#![allow(unused_results)]
+//! Generated file from `url_type_option.proto`
+
+/// Generated files are compatible only with the same version
+/// of protobuf runtime.
+// const _PROTOBUF_VERSION_CHECK: () = ::protobuf::VERSION_2_25_2;
+
+#[derive(PartialEq,Clone,Default)]
+pub struct URLTypeOption {
+    // message fields
+    pub data: ::std::string::String,
+    // special fields
+    pub unknown_fields: ::protobuf::UnknownFields,
+    pub cached_size: ::protobuf::CachedSize,
+}
+
+impl<'a> ::std::default::Default for &'a URLTypeOption {
+    fn default() -> &'a URLTypeOption {
+        <URLTypeOption as ::protobuf::Message>::default_instance()
+    }
+}
+
+impl URLTypeOption {
+    pub fn new() -> URLTypeOption {
+        ::std::default::Default::default()
+    }
+
+    // string data = 1;
+
+
+    pub fn get_data(&self) -> &str {
+        &self.data
+    }
+    pub fn clear_data(&mut self) {
+        self.data.clear();
+    }
+
+    // Param is passed by value, moved
+    pub fn set_data(&mut self, v: ::std::string::String) {
+        self.data = v;
+    }
+
+    // Mutable pointer to the field.
+    // If field is not initialized, it is initialized with default value first.
+    pub fn mut_data(&mut self) -> &mut ::std::string::String {
+        &mut self.data
+    }
+
+    // Take field
+    pub fn take_data(&mut self) -> ::std::string::String {
+        ::std::mem::replace(&mut self.data, ::std::string::String::new())
+    }
+}
+
+impl ::protobuf::Message for URLTypeOption {
+    fn is_initialized(&self) -> bool {
+        true
+    }
+
+    fn merge_from(&mut self, is: &mut ::protobuf::CodedInputStream<'_>) -> ::protobuf::ProtobufResult<()> {
+        while !is.eof()? {
+            let (field_number, wire_type) = is.read_tag_unpack()?;
+            match field_number {
+                1 => {
+                    ::protobuf::rt::read_singular_proto3_string_into(wire_type, is, &mut self.data)?;
+                },
+                _ => {
+                    ::protobuf::rt::read_unknown_or_skip_group(field_number, wire_type, is, self.mut_unknown_fields())?;
+                },
+            };
+        }
+        ::std::result::Result::Ok(())
+    }
+
+    // Compute sizes of nested messages
+    #[allow(unused_variables)]
+    fn compute_size(&self) -> u32 {
+        let mut my_size = 0;
+        if !self.data.is_empty() {
+            my_size += ::protobuf::rt::string_size(1, &self.data);
+        }
+        my_size += ::protobuf::rt::unknown_fields_size(self.get_unknown_fields());
+        self.cached_size.set(my_size);
+        my_size
+    }
+
+    fn write_to_with_cached_sizes(&self, os: &mut ::protobuf::CodedOutputStream<'_>) -> ::protobuf::ProtobufResult<()> {
+        if !self.data.is_empty() {
+            os.write_string(1, &self.data)?;
+        }
+        os.write_unknown_fields(self.get_unknown_fields())?;
+        ::std::result::Result::Ok(())
+    }
+
+    fn get_cached_size(&self) -> u32 {
+        self.cached_size.get()
+    }
+
+    fn get_unknown_fields(&self) -> &::protobuf::UnknownFields {
+        &self.unknown_fields
+    }
+
+    fn mut_unknown_fields(&mut self) -> &mut ::protobuf::UnknownFields {
+        &mut self.unknown_fields
+    }
+
+    fn as_any(&self) -> &dyn (::std::any::Any) {
+        self as &dyn (::std::any::Any)
+    }
+    fn as_any_mut(&mut self) -> &mut dyn (::std::any::Any) {
+        self as &mut dyn (::std::any::Any)
+    }
+    fn into_any(self: ::std::boxed::Box<Self>) -> ::std::boxed::Box<dyn (::std::any::Any)> {
+        self
+    }
+
+    fn descriptor(&self) -> &'static ::protobuf::reflect::MessageDescriptor {
+        Self::descriptor_static()
+    }
+
+    fn new() -> URLTypeOption {
+        URLTypeOption::new()
+    }
+
+    fn descriptor_static() -> &'static ::protobuf::reflect::MessageDescriptor {
+        static descriptor: ::protobuf::rt::LazyV2<::protobuf::reflect::MessageDescriptor> = ::protobuf::rt::LazyV2::INIT;
+        descriptor.get(|| {
+            let mut fields = ::std::vec::Vec::new();
+            fields.push(::protobuf::reflect::accessor::make_simple_field_accessor::<_, ::protobuf::types::ProtobufTypeString>(
+                "data",
+                |m: &URLTypeOption| { &m.data },
+                |m: &mut URLTypeOption| { &mut m.data },
+            ));
+            ::protobuf::reflect::MessageDescriptor::new_pb_name::<URLTypeOption>(
+                "URLTypeOption",
+                fields,
+                file_descriptor_proto()
+            )
+        })
+    }
+
+    fn default_instance() -> &'static URLTypeOption {
+        static instance: ::protobuf::rt::LazyV2<URLTypeOption> = ::protobuf::rt::LazyV2::INIT;
+        instance.get(URLTypeOption::new)
+    }
+}
+
+impl ::protobuf::Clear for URLTypeOption {
+    fn clear(&mut self) {
+        self.data.clear();
+        self.unknown_fields.clear();
+    }
+}
+
+impl ::std::fmt::Debug for URLTypeOption {
+    fn fmt(&self, f: &mut ::std::fmt::Formatter<'_>) -> ::std::fmt::Result {
+        ::protobuf::text_format::fmt(self, f)
+    }
+}
+
+impl ::protobuf::reflect::ProtobufValue for URLTypeOption {
+    fn as_ref(&self) -> ::protobuf::reflect::ReflectValueRef {
+        ::protobuf::reflect::ReflectValueRef::Message(self)
+    }
+}
+
+#[derive(PartialEq,Clone,Default)]
+pub struct URLCellData {
+    // message fields
+    pub url: ::std::string::String,
+    pub content: ::std::string::String,
+    // special fields
+    pub unknown_fields: ::protobuf::UnknownFields,
+    pub cached_size: ::protobuf::CachedSize,
+}
+
+impl<'a> ::std::default::Default for &'a URLCellData {
+    fn default() -> &'a URLCellData {
+        <URLCellData as ::protobuf::Message>::default_instance()
+    }
+}
+
+impl URLCellData {
+    pub fn new() -> URLCellData {
+        ::std::default::Default::default()
+    }
+
+    // string url = 1;
+
+
+    pub fn get_url(&self) -> &str {
+        &self.url
+    }
+    pub fn clear_url(&mut self) {
+        self.url.clear();
+    }
+
+    // Param is passed by value, moved
+    pub fn set_url(&mut self, v: ::std::string::String) {
+        self.url = v;
+    }
+
+    // Mutable pointer to the field.
+    // If field is not initialized, it is initialized with default value first.
+    pub fn mut_url(&mut self) -> &mut ::std::string::String {
+        &mut self.url
+    }
+
+    // Take field
+    pub fn take_url(&mut self) -> ::std::string::String {
+        ::std::mem::replace(&mut self.url, ::std::string::String::new())
+    }
+
+    // string content = 2;
+
+
+    pub fn get_content(&self) -> &str {
+        &self.content
+    }
+    pub fn clear_content(&mut self) {
+        self.content.clear();
+    }
+
+    // Param is passed by value, moved
+    pub fn set_content(&mut self, v: ::std::string::String) {
+        self.content = v;
+    }
+
+    // Mutable pointer to the field.
+    // If field is not initialized, it is initialized with default value first.
+    pub fn mut_content(&mut self) -> &mut ::std::string::String {
+        &mut self.content
+    }
+
+    // Take field
+    pub fn take_content(&mut self) -> ::std::string::String {
+        ::std::mem::replace(&mut self.content, ::std::string::String::new())
+    }
+}
+
+impl ::protobuf::Message for URLCellData {
+    fn is_initialized(&self) -> bool {
+        true
+    }
+
+    fn merge_from(&mut self, is: &mut ::protobuf::CodedInputStream<'_>) -> ::protobuf::ProtobufResult<()> {
+        while !is.eof()? {
+            let (field_number, wire_type) = is.read_tag_unpack()?;
+            match field_number {
+                1 => {
+                    ::protobuf::rt::read_singular_proto3_string_into(wire_type, is, &mut self.url)?;
+                },
+                2 => {
+                    ::protobuf::rt::read_singular_proto3_string_into(wire_type, is, &mut self.content)?;
+                },
+                _ => {
+                    ::protobuf::rt::read_unknown_or_skip_group(field_number, wire_type, is, self.mut_unknown_fields())?;
+                },
+            };
+        }
+        ::std::result::Result::Ok(())
+    }
+
+    // Compute sizes of nested messages
+    #[allow(unused_variables)]
+    fn compute_size(&self) -> u32 {
+        let mut my_size = 0;
+        if !self.url.is_empty() {
+            my_size += ::protobuf::rt::string_size(1, &self.url);
+        }
+        if !self.content.is_empty() {
+            my_size += ::protobuf::rt::string_size(2, &self.content);
+        }
+        my_size += ::protobuf::rt::unknown_fields_size(self.get_unknown_fields());
+        self.cached_size.set(my_size);
+        my_size
+    }
+
+    fn write_to_with_cached_sizes(&self, os: &mut ::protobuf::CodedOutputStream<'_>) -> ::protobuf::ProtobufResult<()> {
+        if !self.url.is_empty() {
+            os.write_string(1, &self.url)?;
+        }
+        if !self.content.is_empty() {
+            os.write_string(2, &self.content)?;
+        }
+        os.write_unknown_fields(self.get_unknown_fields())?;
+        ::std::result::Result::Ok(())
+    }
+
+    fn get_cached_size(&self) -> u32 {
+        self.cached_size.get()
+    }
+
+    fn get_unknown_fields(&self) -> &::protobuf::UnknownFields {
+        &self.unknown_fields
+    }
+
+    fn mut_unknown_fields(&mut self) -> &mut ::protobuf::UnknownFields {
+        &mut self.unknown_fields
+    }
+
+    fn as_any(&self) -> &dyn (::std::any::Any) {
+        self as &dyn (::std::any::Any)
+    }
+    fn as_any_mut(&mut self) -> &mut dyn (::std::any::Any) {
+        self as &mut dyn (::std::any::Any)
+    }
+    fn into_any(self: ::std::boxed::Box<Self>) -> ::std::boxed::Box<dyn (::std::any::Any)> {
+        self
+    }
+
+    fn descriptor(&self) -> &'static ::protobuf::reflect::MessageDescriptor {
+        Self::descriptor_static()
+    }
+
+    fn new() -> URLCellData {
+        URLCellData::new()
+    }
+
+    fn descriptor_static() -> &'static ::protobuf::reflect::MessageDescriptor {
+        static descriptor: ::protobuf::rt::LazyV2<::protobuf::reflect::MessageDescriptor> = ::protobuf::rt::LazyV2::INIT;
+        descriptor.get(|| {
+            let mut fields = ::std::vec::Vec::new();
+            fields.push(::protobuf::reflect::accessor::make_simple_field_accessor::<_, ::protobuf::types::ProtobufTypeString>(
+                "url",
+                |m: &URLCellData| { &m.url },
+                |m: &mut URLCellData| { &mut m.url },
+            ));
+            fields.push(::protobuf::reflect::accessor::make_simple_field_accessor::<_, ::protobuf::types::ProtobufTypeString>(
+                "content",
+                |m: &URLCellData| { &m.content },
+                |m: &mut URLCellData| { &mut m.content },
+            ));
+            ::protobuf::reflect::MessageDescriptor::new_pb_name::<URLCellData>(
+                "URLCellData",
+                fields,
+                file_descriptor_proto()
+            )
+        })
+    }
+
+    fn default_instance() -> &'static URLCellData {
+        static instance: ::protobuf::rt::LazyV2<URLCellData> = ::protobuf::rt::LazyV2::INIT;
+        instance.get(URLCellData::new)
+    }
+}
+
+impl ::protobuf::Clear for URLCellData {
+    fn clear(&mut self) {
+        self.url.clear();
+        self.content.clear();
+        self.unknown_fields.clear();
+    }
+}
+
+impl ::std::fmt::Debug for URLCellData {
+    fn fmt(&self, f: &mut ::std::fmt::Formatter<'_>) -> ::std::fmt::Result {
+        ::protobuf::text_format::fmt(self, f)
+    }
+}
+
+impl ::protobuf::reflect::ProtobufValue for URLCellData {
+    fn as_ref(&self) -> ::protobuf::reflect::ReflectValueRef {
+        ::protobuf::reflect::ReflectValueRef::Message(self)
+    }
+}
+
+static file_descriptor_proto_data: &'static [u8] = b"\
+    \n\x15url_type_option.proto\"#\n\rURLTypeOption\x12\x12\n\x04data\x18\
+    \x01\x20\x01(\tR\x04data\"9\n\x0bURLCellData\x12\x10\n\x03url\x18\x01\
+    \x20\x01(\tR\x03url\x12\x18\n\x07content\x18\x02\x20\x01(\tR\x07contentb\
+    \x06proto3\
+";
+
+static file_descriptor_proto_lazy: ::protobuf::rt::LazyV2<::protobuf::descriptor::FileDescriptorProto> = ::protobuf::rt::LazyV2::INIT;
+
+fn parse_descriptor_proto() -> ::protobuf::descriptor::FileDescriptorProto {
+    ::protobuf::Message::parse_from_bytes(file_descriptor_proto_data).unwrap()
+}
+
+pub fn file_descriptor_proto() -> &'static ::protobuf::descriptor::FileDescriptorProto {
+    file_descriptor_proto_lazy.get(|| {
+        parse_descriptor_proto()
+    })
+}
--- a/frontend/rust-lib/flowy-grid/src/protobuf/proto/text_type_option.proto
+++ b/frontend/rust-lib/flowy-grid/src/protobuf/proto/text_type_option.proto
@ -1,5 +1,5 @@
 syntax = "proto3";

 message RichTextTypeOption {
-    string format = 1;
+    string data = 1;
 }
--- a/frontend/rust-lib/flowy-grid/src/protobuf/proto/url_type_option.proto
+++ b/frontend/rust-lib/flowy-grid/src/protobuf/proto/url_type_option.proto
@ -0,0 +1,9 @@
+syntax = "proto3";
+
+message URLTypeOption {
+    string data = 1;
+}
+message URLCellData {
+    string url = 1;
+    string content = 2;
+}
--- a/frontend/rust-lib/flowy-grid/src/services/field/field_builder.rs
+++ b/frontend/rust-lib/flowy-grid/src/services/field/field_builder.rs
@ -94,6 +94,7 @@ pub fn default_type_option_builder_from_type(field_type: &FieldType) -> Box<dyn
        FieldType::SingleSelect => SingleSelectTypeOption::default().into(),
        FieldType::MultiSelect => MultiSelectTypeOption::default().into(),
        FieldType::Checkbox => CheckboxTypeOption::default().into(),
+        FieldType::URL => URLTypeOption::default().into(),
    };

    type_option_builder_from_json_str(&s, field_type)
@ -107,6 +108,7 @@ pub fn type_option_builder_from_json_str(s: &str, field_type: &FieldType) -> Box
        FieldType::SingleSelect => Box::new(SingleSelectTypeOptionBuilder::from_json_str(s)),
        FieldType::MultiSelect => Box::new(MultiSelectTypeOptionBuilder::from_json_str(s)),
        FieldType::Checkbox => Box::new(CheckboxTypeOptionBuilder::from_json_str(s)),
+        FieldType::URL => Box::new(URLTypeOptionBuilder::from_json_str(s)),
    }
 }

@ -119,5 +121,6 @@ pub fn type_option_builder_from_bytes<T: Into<Bytes>>(bytes: T, field_type: &Fie
        FieldType::SingleSelect => Box::new(SingleSelectTypeOptionBuilder::from_protobuf_bytes(bytes)),
        FieldType::MultiSelect => Box::new(MultiSelectTypeOptionBuilder::from_protobuf_bytes(bytes)),
        FieldType::Checkbox => Box::new(CheckboxTypeOptionBuilder::from_protobuf_bytes(bytes)),
+        FieldType::URL => Box::new(URLTypeOptionBuilder::from_protobuf_bytes(bytes)),
    }
 }
--- a/frontend/rust-lib/flowy-grid/src/services/field/type_options/mod.rs
+++ b/frontend/rust-lib/flowy-grid/src/services/field/type_options/mod.rs
@ -3,6 +3,7 @@ mod date_type_option;
 mod number_type_option;
 mod selection_type_option;
 mod text_type_option;
+mod url_type_option;
 mod util;

 pub use checkbox_type_option::*;
@ -10,3 +11,4 @@ pub use date_type_option::*;
 pub use number_type_option::*;
 pub use selection_type_option::*;
 pub use text_type_option::*;
+pub use url_type_option::*;
--- a/frontend/rust-lib/flowy-grid/src/services/field/type_options/number_type_option.rs
+++ b/frontend/rust-lib/flowy-grid/src/services/field/type_options/number_type_option.rs
@ -736,14 +736,10 @@ mod tests {
    ) {
        assert_eq!(
            type_option
-                .decode_cell_data(data(cell_data), field_type, field_meta)
+                .decode_cell_data(cell_data, field_type, field_meta)
                .unwrap()
                .content,
            expected_str.to_owned()
        );
    }
-
-    fn data(s: &str) -> String {
-        s.to_owned()
-    }
 }
--- a/frontend/rust-lib/flowy-grid/src/services/field/type_options/text_type_option.rs
+++ b/frontend/rust-lib/flowy-grid/src/services/field/type_options/text_type_option.rs
@ -27,7 +27,7 @@ impl TypeOptionBuilder for RichTextTypeOptionBuilder {
 #[derive(Debug, Clone, Default, Serialize, Deserialize, ProtoBuf)]
 pub struct RichTextTypeOption {
    #[pb(index = 1)]
-    pub format: String,
+    data: String, //It's not used.
 }
 impl_type_option!(RichTextTypeOption, FieldType::RichText);

--- a/frontend/rust-lib/flowy-grid/src/services/field/type_options/url_type_option.rs
+++ b/frontend/rust-lib/flowy-grid/src/services/field/type_options/url_type_option.rs
@ -0,0 +1,101 @@
+use crate::impl_type_option;
+use crate::services::field::{BoxTypeOptionBuilder, TypeOptionBuilder};
+use crate::services::row::{CellContentChangeset, CellDataOperation, DecodedCellData};
+use bytes::Bytes;
+use flowy_derive::ProtoBuf;
+use flowy_error::{FlowyError, FlowyResult};
+use flowy_grid_data_model::entities::{
+    CellMeta, FieldMeta, FieldType, TypeOptionDataDeserializer, TypeOptionDataEntry,
+};
+
+use serde::{Deserialize, Serialize};
+
+#[derive(Default)]
+pub struct URLTypeOptionBuilder(URLTypeOption);
+impl_into_box_type_option_builder!(URLTypeOptionBuilder);
+impl_builder_from_json_str_and_from_bytes!(URLTypeOptionBuilder, URLTypeOption);
+
+impl TypeOptionBuilder for URLTypeOptionBuilder {
+    fn field_type(&self) -> FieldType {
+        self.0.field_type()
+    }
+
+    fn entry(&self) -> &dyn TypeOptionDataEntry {
+        &self.0
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, ProtoBuf)]
+pub struct URLTypeOption {
+    #[pb(index = 1)]
+    data: String, //It's not used.
+}
+impl_type_option!(URLTypeOption, FieldType::URL);
+
+impl CellDataOperation<String, String> for URLTypeOption {
+    fn decode_cell_data<T>(
+        &self,
+        encoded_data: T,
+        decoded_field_type: &FieldType,
+        _field_meta: &FieldMeta,
+    ) -> FlowyResult<DecodedCellData>
+    where
+        T: Into<String>,
+    {
+        if !decoded_field_type.is_url() {
+            return Ok(DecodedCellData::default());
+        }
+
+        let cell_data = encoded_data.into();
+        Ok(DecodedCellData::from_content(cell_data))
+    }
+
+    fn apply_changeset<C>(&self, changeset: C, _cell_meta: Option<CellMeta>) -> Result<String, FlowyError>
+    where
+        C: Into<CellContentChangeset>,
+    {
+        let changeset = changeset.into();
+        Ok(changeset.to_string())
+    }
+}
+
+#[derive(Clone, Debug, Default, Serialize, Deserialize, ProtoBuf)]
+pub struct URLCellData {
+    #[pb(index = 1)]
+    pub url: String,
+
+    #[pb(index = 2)]
+    pub content: String,
+}
+
+#[cfg(test)]
+mod tests {
+    use crate::services::field::FieldBuilder;
+    use crate::services::field::URLTypeOption;
+    use crate::services::row::CellDataOperation;
+    use flowy_grid_data_model::entities::{FieldMeta, FieldType};
+
+    #[test]
+    fn url_type_option_format_test() {
+        let type_option = URLTypeOption::default();
+        let field_type = FieldType::URL;
+        let field_meta = FieldBuilder::from_field_type(&field_type).build();
+        assert_equal(&type_option, "123", "123", &field_type, &field_meta);
+    }
+
+    fn assert_equal(
+        type_option: &URLTypeOption,
+        cell_data: &str,
+        expected_str: &str,
+        field_type: &FieldType,
+        field_meta: &FieldMeta,
+    ) {
+        assert_eq!(
+            type_option
+                .decode_cell_data(cell_data, field_type, field_meta)
+                .unwrap()
+                .content,
+            expected_str.to_owned()
+        );
+    }
+}
--- a/frontend/rust-lib/flowy-grid/src/services/row/cell_data_operation.rs
+++ b/frontend/rust-lib/flowy-grid/src/services/row/cell_data_operation.rs
@ -133,6 +133,7 @@ pub fn apply_cell_data_changeset<T: Into<CellContentChangeset>>(
        FieldType::SingleSelect => SingleSelectTypeOption::from(field_meta).apply_changeset(changeset, cell_meta),
        FieldType::MultiSelect => MultiSelectTypeOption::from(field_meta).apply_changeset(changeset, cell_meta),
        FieldType::Checkbox => CheckboxTypeOption::from(field_meta).apply_changeset(changeset, cell_meta),
+        FieldType::URL => URLTypeOption::from(field_meta).apply_changeset(changeset, cell_meta),
    }?;

    Ok(TypeOptionCellData::new(s, field_meta.field_type.clone()).json())
@ -178,6 +179,9 @@ pub fn decode_cell_data<T: Into<String>>(
            FieldType::Checkbox => field_meta
                .get_type_option_entry::<CheckboxTypeOption>(t_field_type)?
                .decode_cell_data(encoded_data, s_field_type, field_meta),
+            FieldType::URL => field_meta
+                .get_type_option_entry::<URLTypeOption>(t_field_type)?
+                .decode_cell_data(encoded_data, s_field_type, field_meta),
        };
        Some(data)
    };
--- a/shared-lib/flowy-grid-data-model/src/entities/grid.rs
+++ b/shared-lib/flowy-grid-data-model/src/entities/grid.rs
@ -880,6 +880,7 @@ pub enum FieldType {
    SingleSelect = 3,
    MultiSelect = 4,
    Checkbox = 5,
+    URL = 6,
 }

 impl std::default::Default for FieldType {
@ -937,6 +938,10 @@ impl FieldType {
        self == &FieldType::MultiSelect
    }

+    pub fn is_url(&self) -> bool {
+        self == &FieldType::URL
+    }
+
    pub fn is_select_option(&self) -> bool {
        self == &FieldType::MultiSelect || self == &FieldType::SingleSelect
    }
--- a/shared-lib/flowy-grid-data-model/src/protobuf/model/grid.rs
+++ b/shared-lib/flowy-grid-data-model/src/protobuf/model/grid.rs
@ -8231,6 +8231,7 @@ pub enum FieldType {
    SingleSelect = 3,
    MultiSelect = 4,
    Checkbox = 5,
+    URL = 6,
 }

 impl ::protobuf::ProtobufEnum for FieldType {
@ -8246,6 +8247,7 @@ impl ::protobuf::ProtobufEnum for FieldType {
            3 => ::std::option::Option::Some(FieldType::SingleSelect),
            4 => ::std::option::Option::Some(FieldType::MultiSelect),
            5 => ::std::option::Option::Some(FieldType::Checkbox),
+            6 => ::std::option::Option::Some(FieldType::URL),
            _ => ::std::option::Option::None
        }
    }
@ -8258,6 +8260,7 @@ impl ::protobuf::ProtobufEnum for FieldType {
            FieldType::SingleSelect,
            FieldType::MultiSelect,
            FieldType::Checkbox,
+            FieldType::URL,
        ];
        values
    }
@ -8380,10 +8383,10 @@ static file_descriptor_proto_data: &'static [u8] = b"\
    ld_id\x18\x03\x20\x01(\tR\x07fieldId\x126\n\x16cell_content_changeset\
    \x18\x04\x20\x01(\tH\0R\x14cellContentChangesetB\x1f\n\x1done_of_cell_co\
    ntent_changeset**\n\x0cMoveItemType\x12\r\n\tMoveField\x10\0\x12\x0b\n\
-    \x07MoveRow\x10\x01*d\n\tFieldType\x12\x0c\n\x08RichText\x10\0\x12\n\n\
+    \x07MoveRow\x10\x01*m\n\tFieldType\x12\x0c\n\x08RichText\x10\0\x12\n\n\
    \x06Number\x10\x01\x12\x0c\n\x08DateTime\x10\x02\x12\x10\n\x0cSingleSele\
    ct\x10\x03\x12\x0f\n\x0bMultiSelect\x10\x04\x12\x0c\n\x08Checkbox\x10\
-    \x05b\x06proto3\
+    \x05\x12\x07\n\x03URL\x10\x06b\x06proto3\
 ";

 static file_descriptor_proto_lazy: ::protobuf::rt::LazyV2<::protobuf::descriptor::FileDescriptorProto> = ::protobuf::rt::LazyV2::INIT;
--- a/shared-lib/flowy-grid-data-model/src/protobuf/proto/grid.proto
+++ b/shared-lib/flowy-grid-data-model/src/protobuf/proto/grid.proto
@ -168,4 +168,5 @@ enum FieldType {
    SingleSelect = 3;
    MultiSelect = 4;
    Checkbox = 5;
+    URL = 6;
 }