Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: link menu overflow in right #478

Merged
merged 5 commits into from
Sep 20, 2023
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 57 additions & 17 deletions lib/src/editor/toolbar/desktop/items/link/link_toolbar_item.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:appflowy_editor/src/editor/toolbar/desktop/items/link/link_menu.dart';
import 'package:flutter/material.dart';

const _menuWidth = 300;
const _hasTextHeight = 244;
const _noTextHeight = 150;

final linkItem = ToolbarItem(
id: 'editor.link',
group: 4,
Expand Down Expand Up @@ -35,7 +39,6 @@ void showLinkMenu(
) {
// Since link format is only available for single line selection,
// the first rect(also the only rect) is used as the starting reference point for the [overlay] position
final rect = editorState.selectionRects().first;

// get link address if the selection is already a link
String? linkText;
Expand All @@ -46,22 +49,7 @@ void showLinkMenu(
);
}

// should abstract this logic to a method
// ----
final left = rect.left + 10;
double? top;
double? bottom;
final offset = rect.center;
final editorOffset = editorState.renderBox!.localToGlobal(Offset.zero);
final editorHeight = editorState.renderBox!.size.height;
final threshold =
editorOffset.dy + editorHeight - (linkText != null ? 244 : 150);
if (offset.dy > threshold) {
bottom = editorOffset.dy + editorHeight - rect.top - 5;
} else {
top = rect.bottom + 5;
}
// ----
final (left, top, right, bottom) = getPosition(editorState, linkText);

// get node, index and length for formatting text when the link is removed
final node = editorState.getNodeAtPath(selection.end.path);
Expand All @@ -84,6 +72,7 @@ void showLinkMenu(
top: top,
bottom: bottom,
left: left,
right: right,
dismissCallback: () => keepEditorFocusNotifier.value -= 1,
builder: (context) {
return LinkMenu(
Expand Down Expand Up @@ -120,3 +109,54 @@ void showLinkMenu(

Overlay.of(context).insert(overlay!);
}

(double? left, double? top, double? right, double? bottom) getPosition(
sun-jiao marked this conversation as resolved.
Show resolved Hide resolved
EditorState editorState,
String? linkText,
) {
final rect = editorState.selectionRects().first;

double? left, right, top, bottom;
final offset = rect.center;
final editorOffset = editorState.renderBox!.localToGlobal(Offset.zero);
final editorWidth = editorState.renderBox!.size.width;
(left, right) = getLength(
editorWidth,
offset.dx,
editorOffset.dx,
_menuWidth,
rect.left,
rect.right,
);

final editorHeight = editorState.renderBox!.size.height;
(top, bottom) = getLength(
editorHeight,
offset.dy,
editorOffset.dy,
linkText != null ? _hasTextHeight : _noTextHeight,
rect.top,
rect.bottom,
);

return (left, top, right, bottom);
}

(double? start, double? end) getLength(
sun-jiao marked this conversation as resolved.
Show resolved Hide resolved
editorLength,
offsetD,
editorOffsetD,
menuLength,
rectStart,
rectEnd,
) {
final threshold = editorOffsetD + editorLength - _menuWidth;
double? start, end;
if (offsetD > threshold) {
end = editorOffsetD + editorLength - rectStart - 5;
} else {
start = rectEnd + 5;
}

return (start, end);
}