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 tooltip style (#856)

Browse source
This commit is contained in:
Lucas.Xu 2024-08-06 17:14:06 +08:00 • committed by GitHub
commit 4c4cc415d5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 195 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -74,6 +74,13 @@ class _DesktopEditorState extends State<DesktopEditor> {
...textDirectionItems,
...alignmentItems,
],
tooltipBuilder: (context, message, child) {
return Tooltip(
message: message,
preferBelow: false,
child: child,
);
},
editorState: editorState,
textDirection: widget.textDirection,
editorScrollController: editorScrollController,

3
lib/src/editor/toolbar/desktop/floating_toolbar.dart
View file

@ -31,6 +31,7 @@ class FloatingToolbar extends StatefulWidget {
required this.textDirection,
required this.child,
this.style = const FloatingToolbarStyle(),
this.tooltipBuilder,
});
final List<ToolbarItem> items;
@ -39,6 +40,7 @@ class FloatingToolbar extends StatefulWidget {
final TextDirection? textDirection;
final Widget child;
final FloatingToolbarStyle style;
final ToolbarTooltipBuilder? tooltipBuilder;
@override
State<FloatingToolbar> createState() => _FloatingToolbarState();
@ -192,6 +194,7 @@ class _FloatingToolbarState extends State<FloatingToolbar>
toolbarElevation: widget.style.toolbarElevation,
toolbarShadowColor: widget.style.toolbarShadowColor,
textDirection: widget.textDirection ?? Directionality.of(context),
tooltipBuilder: widget.tooltipBuilder,
);
return _toolbarWidget!;
}

37
lib/src/editor/toolbar/desktop/floating_toolbar_widget.dart
View file

@ -10,6 +10,12 @@ const floatingToolbarContainerKey =
@visibleForTesting
const floatingToolbarItemPrefixKey = 'appflowy_editor_floating_toolbar_item';
typedef ToolbarTooltipBuilder = Widget Function(
BuildContext context,
String message,
Widget child,
);
class FloatingToolbarWidget extends StatefulWidget {
const FloatingToolbarWidget({
super.key,
@ -21,6 +27,7 @@ class FloatingToolbarWidget extends StatefulWidget {
required this.items,
required this.editorState,
required this.textDirection,
this.tooltipBuilder,
});
final List<ToolbarItem> items;
@ -31,6 +38,7 @@ class FloatingToolbarWidget extends StatefulWidget {
final Color? toolbarShadowColor;
final EditorState editorState;
final TextDirection textDirection;
final ToolbarTooltipBuilder? tooltipBuilder;
@override
State<FloatingToolbarWidget> createState() => _FloatingToolbarWidgetState();
@ -57,21 +65,22 @@ class _FloatingToolbarWidgetState extends State<FloatingToolbarWidget> {
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
textDirection: widget.textDirection,
children: activeItems
.mapIndexed(
(index, item) => Center(
key: Key(
'${floatingToolbarItemPrefixKey}_${item.id}_$index',
),
child: item.builder!(
context,
widget.editorState,
widget.toolbarActiveColor,
widget.toolbarIconColor,
),
children: activeItems.mapIndexed(
(index, item) {
return Center(
key: Key(
'${floatingToolbarItemPrefixKey}_${item.id}_$index',
),
)
.toList(growable: false),
child: item.builder!(
context,
widget.editorState,
widget.toolbarActiveColor,
widget.toolbarIconColor,
widget.tooltipBuilder,
),
);
},
).toList(growable: false),
),
),
),

21
lib/src/editor/toolbar/desktop/items/alignment_toolbar_items.dart
View file

@ -28,19 +28,24 @@ class _AlignmentToolbarItem extends ToolbarItem {
id: 'editor.$id',
group: 6,
isActive: onlyShowInTextType,
builder: (context, editorState, highlightColor, iconColor) {
builder: (
context,
editorState,
highlightColor,
iconColor,
tooltipBuilder,
) {
final selection = editorState.selection!;
final nodes = editorState.getNodesInSelection(selection);
final isHighlight = nodes.every(
(n) => n.attributes[blockComponentAlign] == align,
);
return SVGIconItemWidget(
final child = SVGIconItemWidget(
iconName: 'toolbar/$name',
isHighlight: isHighlight,
highlightColor: highlightColor,
iconColor: iconColor,
tooltip: getTooltipText(id),
onPressed: () => editorState.updateNode(
selection,
(node) => node.copyWith(
@ -51,6 +56,16 @@ class _AlignmentToolbarItem extends ToolbarItem {
),
),
);
if (tooltipBuilder != null) {
return tooltipBuilder(
context,
getTooltipText(id),
child,
);
}
return child;
},
);
}

15
lib/src/editor/toolbar/desktop/items/bulleted_list_toolbar_item.dart
View file

@ -4,16 +4,15 @@ final ToolbarItem bulletedListItem = ToolbarItem(
id: 'editor.bulleted_list',
group: 3,
isActive: onlyShowInSingleSelectionAndTextType,
builder: (context, editorState, highlightColor, iconColor) {
builder: (context, editorState, highlightColor, iconColor, tooltipBuilder) {
final selection = editorState.selection!;
final node = editorState.getNodeAtPath(selection.start.path)!;
final isHighlight = node.type == 'bulleted_list';
return SVGIconItemWidget(
final child = SVGIconItemWidget(
iconName: 'toolbar/bulleted_list',
isHighlight: isHighlight,
highlightColor: highlightColor,
iconColor: iconColor,
tooltip: AppFlowyEditorL10n.current.bulletedList,
onPressed: () => editorState.formatNode(
selection,
(node) => node.copyWith(
@ -21,5 +20,15 @@ final ToolbarItem bulletedListItem = ToolbarItem(
),
),
);
if (tooltipBuilder != null) {
return tooltipBuilder(
context,
AppFlowyEditorL10n.current.bulletedList,
child,
);
}
return child;
},
);

16
lib/src/editor/toolbar/desktop/items/color/highlight_color_toolbar_item.dart
View file

@ -5,7 +5,7 @@ ToolbarItem buildHighlightColorItem({List<ColorOption>? colorOptions}) {
id: 'editor.highlightColor',
group: 4,
isActive: onlyShowInTextType,
builder: (context, editorState, highlightColor, iconColor) {
builder: (context, editorState, highlightColor, iconColor, tooltipBuilder) {
String? highlightColorHex;
final selection = editorState.selection!;
@ -16,12 +16,12 @@ ToolbarItem buildHighlightColorItem({List<ColorOption>? colorOptions}) {
return highlightColorHex != null;
});
});
return SVGIconItemWidget(
final child = SVGIconItemWidget(
iconName: 'toolbar/highlight_color',
isHighlight: isHighlight,
highlightColor: highlightColor,
iconColor: iconColor,
tooltip: AppFlowyEditorL10n.current.highlightColor,
onPressed: () {
bool showClearButton = false;
nodes.allSatisfyInSelection(selection, (delta) {
@ -47,6 +47,16 @@ ToolbarItem buildHighlightColorItem({List<ColorOption>? colorOptions}) {
);
},
);
if (tooltipBuilder != null) {
return tooltipBuilder(
context,
AppFlowyEditorL10n.current.highlightColor,
child,
);
}
return child;
},
);
}

16
lib/src/editor/toolbar/desktop/items/color/text_color_toolbar_item.dart
View file

@ -7,7 +7,7 @@ ToolbarItem buildTextColorItem({
id: 'editor.textColor',
group: 4,
isActive: onlyShowInTextType,
builder: (context, editorState, highlightColor, iconColor) {
builder: (context, editorState, highlightColor, iconColor, tooltipBuilder) {
String? textColorHex;
final selection = editorState.selection!;
final nodes = editorState.getNodesInSelection(selection);
@ -17,12 +17,12 @@ ToolbarItem buildTextColorItem({
return (textColorHex != null);
});
});
return SVGIconItemWidget(
final child = SVGIconItemWidget(
iconName: 'toolbar/text_color',
isHighlight: isHighlight,
highlightColor: highlightColor,
iconColor: iconColor,
tooltip: AppFlowyEditorL10n.current.textColor,
onPressed: () {
bool showClearButton = false;
nodes.allSatisfyInSelection(
@ -51,6 +51,16 @@ ToolbarItem buildTextColorItem({
);
},
);
if (tooltipBuilder != null) {
return tooltipBuilder(
context,
AppFlowyEditorL10n.current.textColor,
child,
);
}
return child;
},
);
}

22
lib/src/editor/toolbar/desktop/items/format_toolbar_items.dart
View file

@ -32,7 +32,13 @@ class _FormatToolbarItem extends ToolbarItem {
id: 'editor.$id',
group: 2,
isActive: onlyShowInTextType,
builder: (context, editorState, highlightColor, iconColor) {
builder: (
context,
editorState,
highlightColor,
iconColor,
tooltipBuilder,
) {
final selection = editorState.selection!;
final nodes = editorState.getNodesInSelection(selection);
final isHighlight = nodes.allSatisfyInSelection(selection, (delta) {
@ -40,14 +46,24 @@ class _FormatToolbarItem extends ToolbarItem {
(attributes) => attributes[name] == true,
);
});
return SVGIconItemWidget(
final child = SVGIconItemWidget(
iconName: 'toolbar/$name',
isHighlight: isHighlight,
highlightColor: highlightColor,
iconColor: iconColor,
tooltip: getTooltipText(id),
onPressed: () => editorState.toggleAttribute(name),
);
if (tooltipBuilder != null) {
return tooltipBuilder(
context,
getTooltipText(id),
child,
);
}
return child;
},
);
}

21
lib/src/editor/toolbar/desktop/items/heading_toolbar_items.dart
View file

@ -12,18 +12,23 @@ class _HeadingToolbarItem extends ToolbarItem {
id: 'editor.h$level',
group: 1,
isActive: onlyShowInSingleSelectionAndTextType,
builder: (context, editorState, highlightColor, iconColor) {
builder: (
context,
editorState,
highlightColor,
iconColor,
tooltipBuilder,
) {
final selection = editorState.selection!;
final node = editorState.getNodeAtPath(selection.start.path)!;
final isHighlight =
node.type == 'heading' && node.attributes['level'] == level;
final delta = (node.delta ?? Delta()).toJson();
return SVGIconItemWidget(
final child = SVGIconItemWidget(
iconName: 'toolbar/h$level',
isHighlight: isHighlight,
highlightColor: highlightColor,
iconColor: iconColor,
tooltip: levelToTooltips(level),
onPressed: () => editorState.formatNode(
selection,
(node) => node.copyWith(
@ -41,6 +46,16 @@ class _HeadingToolbarItem extends ToolbarItem {
),
),
);
if (tooltipBuilder != null) {
return tooltipBuilder(
context,
levelToTooltips(level),
child,
);
}
return child;
},
);

12
lib/src/editor/toolbar/desktop/items/icon_item_widget.dart
View file

@ -11,7 +11,6 @@ class SVGIconItemWidget extends StatelessWidget {
required this.isHighlight,
required this.highlightColor,
this.iconColor,
this.tooltip,
this.onPressed,
});
@ -22,7 +21,6 @@ class SVGIconItemWidget extends StatelessWidget {
final bool isHighlight;
final Color highlightColor;
final Color? iconColor;
final String? tooltip;
final VoidCallback? onPressed;
@override
@ -49,15 +47,7 @@ class SVGIconItemWidget extends StatelessWidget {
),
);
}
if (tooltip != null) {
child = Tooltip(
textAlign: TextAlign.center,
preferBelow: false,
message: tooltip,
waitDuration: const Duration(milliseconds: 500),
child: child,
);
}
return SizedBox(
width: size.width,
height: size.height,

15
lib/src/editor/toolbar/desktop/items/link/link_toolbar_item.dart
View file

@ -11,7 +11,7 @@ final linkItem = ToolbarItem(
id: 'editor.link',
group: 4,
isActive: onlyShowInSingleSelectionAndTextType,
builder: (context, editorState, highlightColor, iconColor) {
builder: (context, editorState, highlightColor, iconColor, tooltipBuilder) {
final selection = editorState.selection!;
final nodes = editorState.getNodesInSelection(selection);
final isHref = nodes.allSatisfyInSelection(selection, (delta) {
@ -20,16 +20,25 @@ final linkItem = ToolbarItem(
);
});
return SVGIconItemWidget(
final child = SVGIconItemWidget(
iconName: 'toolbar/link',
isHighlight: isHref,
highlightColor: highlightColor,
iconColor: iconColor,
tooltip: AppFlowyEditorL10n.current.link,
onPressed: () {
showLinkMenu(context, editorState, selection, isHref);
},
);
if (tooltipBuilder != null) {
return tooltipBuilder(
context,
AppFlowyEditorL10n.current.link,
child,
);
}
return child;
},
);

15
lib/src/editor/toolbar/desktop/items/numbered_list_toolbar_item.dart
View file

@ -4,16 +4,15 @@ final ToolbarItem numberedListItem = ToolbarItem(
id: 'editor.numbered_list',
group: 3,
isActive: onlyShowInSingleSelectionAndTextType,
builder: (context, editorState, highlightColor, iconColor) {
builder: (context, editorState, highlightColor, iconColor, tooltipBuilder) {
final selection = editorState.selection!;
final node = editorState.getNodeAtPath(selection.start.path)!;
final isHighlight = node.type == 'numbered_list';
return SVGIconItemWidget(
final child = SVGIconItemWidget(
iconName: 'toolbar/numbered_list',
isHighlight: isHighlight,
highlightColor: highlightColor,
iconColor: iconColor,
tooltip: AppFlowyEditorL10n.current.numberedList,
onPressed: () => editorState.formatNode(
selection,
(node) => node.copyWith(
@ -21,5 +20,15 @@ final ToolbarItem numberedListItem = ToolbarItem(
),
),
);
if (tooltipBuilder != null) {
return tooltipBuilder(
context,
AppFlowyEditorL10n.current.numberedList,
child,
);
}
return child;
},
);

15
lib/src/editor/toolbar/desktop/items/paragraph_toolbar_item.dart
View file

@ -4,17 +4,16 @@ final ToolbarItem paragraphItem = ToolbarItem(
id: 'editor.paragraph',
group: 1,
isActive: onlyShowInSingleSelectionAndTextType,
builder: (context, editorState, highlightColor, iconColor) {
builder: (context, editorState, highlightColor, iconColor, tooltipBuilder) {
final selection = editorState.selection!;
final node = editorState.getNodeAtPath(selection.start.path)!;
final isHighlight = node.type == 'paragraph';
final delta = (node.delta ?? Delta()).toJson();
return SVGIconItemWidget(
final child = SVGIconItemWidget(
iconName: 'toolbar/text',
isHighlight: isHighlight,
highlightColor: highlightColor,
iconColor: iconColor,
tooltip: AppFlowyEditorL10n.current.text,
onPressed: () => editorState.formatNode(
selection,
(node) => node.copyWith(
@ -29,5 +28,15 @@ final ToolbarItem paragraphItem = ToolbarItem(
),
),
);
if (tooltipBuilder != null) {
return tooltipBuilder(
context,
AppFlowyEditorL10n.current.text,
child,
);
}
return child;
},
);

2
lib/src/editor/toolbar/desktop/items/placeholder_toolbar_item.dart
View file

@ -7,7 +7,7 @@ final ToolbarItem placeholderItem = ToolbarItem(
id: placeholderItemId,
group: -1,
isActive: (editorState) => true,
builder: (_, __, ___, ____) {
builder: (_, __, ___, ____, _____) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 5),
child: Container(

15
lib/src/editor/toolbar/desktop/items/quote_toolbar_item.dart
View file

@ -4,16 +4,15 @@ final ToolbarItem quoteItem = ToolbarItem(
id: 'editor.quote',
group: 3,
isActive: onlyShowInSingleSelectionAndTextType,
builder: (context, editorState, highlightColor, iconColor) {
builder: (context, editorState, highlightColor, iconColor, tooltipBuilder) {
final selection = editorState.selection!;
final node = editorState.getNodeAtPath(selection.start.path)!;
final isHighlight = node.type == 'quote';
return SVGIconItemWidget(
final child = SVGIconItemWidget(
iconName: 'toolbar/quote',
isHighlight: isHighlight,
highlightColor: highlightColor,
iconColor: iconColor,
tooltip: AppFlowyEditorL10n.current.quote,
onPressed: () => editorState.formatNode(
selection,
(node) => node.copyWith(
@ -21,5 +20,15 @@ final ToolbarItem quoteItem = ToolbarItem(
),
),
);
if (tooltipBuilder != null) {
return tooltipBuilder(
context,
AppFlowyEditorL10n.current.quote,
child,
);
}
return child;
},
);

21
lib/src/editor/toolbar/desktop/items/text_direction_toolbar_items.dart
View file

@ -28,18 +28,23 @@ class _TextDirectionToolbarItem extends ToolbarItem {
id: 'editor.$id',
group: 7,
isActive: onlyShowInTextType,
builder: (context, editorState, highlightColor, iconColor) {
builder: (
context,
editorState,
highlightColor,
iconColor,
tooltipBuilder,
) {
final selection = editorState.selection!;
final nodes = editorState.getNodesInSelection(selection);
final isHighlight = nodes.every(
(n) => n.attributes[blockComponentTextDirection] == name,
);
return SVGIconItemWidget(
final child = SVGIconItemWidget(
iconName: 'toolbar/$iconName',
isHighlight: isHighlight,
highlightColor: highlightColor,
iconColor: iconColor,
tooltip: getTooltipText(id),
onPressed: () => editorState.updateNode(
selection,
(node) => node.copyWith(
@ -50,6 +55,16 @@ class _TextDirectionToolbarItem extends ToolbarItem {
),
),
);
if (tooltipBuilder != null) {
return tooltipBuilder(
context,
getTooltipText(id),
child,
);
}
return child;
},
);
}

1
lib/src/render/toolbar/toolbar_item.dart
View file

@ -31,6 +31,7 @@ class ToolbarItem {
EditorState editorState,
Color highlightColor,
Color? iconColor,
ToolbarTooltipBuilder? tooltipBuilder,
)? builder;
// deprecated

103
lib/src/render/toolbar/toolbar_widget.dart
View file

@ -1,103 +0,0 @@
import 'package:appflowy_editor/src/editor_state.dart';
import 'package:appflowy_editor/src/flutter/overlay.dart';
import 'package:appflowy_editor/src/render/toolbar/toolbar_item.dart';
import 'package:appflowy_editor/src/render/toolbar/toolbar_item_widget.dart';
import 'package:flutter/material.dart' hide Overlay, OverlayEntry;
mixin ToolbarMixin<T extends StatefulWidget> on State<T> {
void hide();
}
class ToolbarWidget extends StatefulWidget {
const ToolbarWidget({
super.key,
required this.editorState,
required this.layerLink,
required this.offset,
required this.highlightColor,
this.iconColor,
required this.items,
this.alignment = Alignment.topLeft,
});
final EditorState editorState;
final LayerLink layerLink;
final Offset offset;
final Color highlightColor;
final Color? iconColor;
final List<ToolbarItem> items;
final Alignment alignment;
@override
State<ToolbarWidget> createState() => _ToolbarWidgetState();
}
class _ToolbarWidgetState extends State<ToolbarWidget> with ToolbarMixin {
OverlayEntry? _listToolbarOverlay;
@override
Widget build(BuildContext context) {
return Positioned(
top: widget.offset.dx,
left: widget.offset.dy,
child: CompositedTransformFollower(
link: widget.layerLink,
showWhenUnlinked: true,
offset: widget.offset,
followerAnchor: widget.alignment,
child: _buildToolbar(context, widget.highlightColor, widget.iconColor),
),
);
}
@override
void hide() {
_listToolbarOverlay?.remove();
_listToolbarOverlay = null;
}
Widget _buildToolbar(
BuildContext context,
Color highlightColor,
Color? iconColor,
) {
return Material(
borderRadius: BorderRadius.circular(8.0),
child: Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: SizedBox(
height: 32.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: widget.items
.map(
(item) => Center(
child: item.builder?.call(
context,
widget.editorState,
highlightColor,
iconColor,
) ??
item.itemBuilder?.call(context, widget.editorState) ??
ToolbarItemWidget(
item: item,
isHighlight: item.highlightCallback
?.call(widget.editorState) ??
false,
onPressed: () {
item.handler?.call(widget.editorState, context);
widget.editorState.service.keyboardService
?.enable();
},
),
),
)
.toList(growable: false),
),
),
),
);
}
}