halkyon-days/appflowy-editor
Watch
1
0
Fork
You've already forked appflowy-editor
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: support customizing max width

Browse source
This commit is contained in:
Lucas.Xu 2024-09-18 13:49:41 +08:00
commit 0a0154ff7d
3 changed files with 25 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

3
example/lib/pages/desktop_editor.dart
View file

@ -129,7 +129,8 @@ class _DesktopEditorState extends State<DesktopEditor> {
fontWeight: FontWeight.w500,
),
),
padding: const EdgeInsets.symmetric(horizontal: 200.0),
padding: const EdgeInsets.symmetric(horizontal: 40),
maxWidth: 640,
);
}

21
lib/src/editor/editor_component/entry/page_block_component.dart
View file

@ -63,7 +63,11 @@ class PageBlockComponent extends BlockComponentStatelessWidget {
children: [
if (header != null) header!,
...items.map(
(e) => Padding(
(e) => Container(
constraints: BoxConstraints(
maxWidth:
editorState.editorStyle.maxWidth ?? double.infinity,
),
padding: editorState.editorStyle.padding,
child: editorState.renderer.build(context, e),
),
@ -97,11 +101,16 @@ class PageBlockComponent extends BlockComponentStatelessWidget {
);
}
return Padding(
padding: editorState.editorStyle.padding,
child: editorState.renderer.build(
context,
items[index - (header != null ? 1 : 0)],
return Center(
child: Container(
constraints: BoxConstraints(
maxWidth: editorState.editorStyle.maxWidth ?? double.infinity,
),
padding: editorState.editorStyle.padding,
child: editorState.renderer.build(
context,
items[index - (header != null ? 1 : 0)],
),
),
);
},

8
lib/src/editor/editor_component/style/editor_style.dart
View file

@ -21,11 +21,15 @@ class EditorStyle {
this.defaultTextDirection,
this.enableHapticFeedbackOnAndroid = true,
this.textScaleFactor = 1.0,
this.maxWidth,
});
// The padding of the editor.
final EdgeInsets padding;
// The max width of the editor.
final double? maxWidth;
// The cursor color
final Color cursorColor;
@ -82,6 +86,7 @@ class EditorStyle {
this.defaultTextDirection,
this.cursorWidth = 2.0,
this.textScaleFactor = 1.0,
this.maxWidth,
}) : padding = padding ?? const EdgeInsets.symmetric(horizontal: 100),
cursorColor = cursorColor ?? const Color(0xFF00BCF0),
selectionColor =
@ -112,6 +117,7 @@ class EditorStyle {
this.cursorWidth = 2.0,
this.enableHapticFeedbackOnAndroid = true,
this.textScaleFactor = 1.0,
this.maxWidth,
}) : padding = padding ?? const EdgeInsets.symmetric(horizontal: 20),
cursorColor = cursorColor ?? const Color(0xFF00BCF0),
dragHandleColor = dragHandleColor ?? const Color(0xFF00BCF0),
@ -138,6 +144,7 @@ class EditorStyle {
bool? enableHapticFeedbackOnAndroid,
double? cursorWidth,
double? textScaleFactor,
double? maxWidth,
}) {
return EditorStyle(
padding: padding ?? this.padding,
@ -157,6 +164,7 @@ class EditorStyle {
enableHapticFeedbackOnAndroid ?? this.enableHapticFeedbackOnAndroid,
cursorWidth: cursorWidth ?? this.cursorWidth,
textScaleFactor: textScaleFactor ?? this.textScaleFactor,
maxWidth: maxWidth ?? this.maxWidth,
);
}
}