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.

Sign up for GitHub

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

Jump to bottom

[CARE-2935] Fix - Make sure the trigger character is only detected in the same node #556

Merged
merged 2 commits into from
Jul 19, 2024
Merged

[CARE-2935] Fix - Make sure the trigger character is only detected in the same node #556

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a1559d2
Hide mentions dropdown with CSS if no options available
kudlajz Jul 18, 2024
e94475f
Return null if trigger point can't be found in the current selection
kudlajz Jul 18, 2024
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
4 changes: 4 additions & 0 deletions packages/slate-editor/src/extensions/mentions/components/MentionsDropdown.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
padding: $spacing-half 0 !important; // override editor's ul styling
margin: 0 !important; // override editor's ul styling

&.hidden {
display: none;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've noticed a bug where the mentions dropdown was still rendered even if it doesn't have any options.
Screenshot 2024-07-18 at 17 30 21

I've tried not rendering the dropdown at all if options.length === 0 but that would make the dropdown sometime appear positioned incorrectly.

}

.Item {
// override ".editor-email-campaign ul li" styling
margin: 0 !important;
Expand Down
4 changes: 3 additions & 1 deletion packages/slate-editor/src/extensions/mentions/components/MentionsDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,9 @@ export const MentionsDropdown = <V extends object>({
return (
<ul
{...popper.attributes.popper}
className={classNames(styles.MentionsDropdown, 'dropdown-menu')}
className={classNames(styles.MentionsDropdown, 'dropdown-menu', {
[styles.hidden]: options.length === 0,
})}
onMouseDown={(event) => event.preventDefault()}
ref={suggestionsPanelRef}
role="menu"
Expand Down
15 changes: 13 additions & 2 deletions packages/slate-editor/src/extensions/mentions/lib/getWordAfterTrigger.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface Result {
text: string;
}

function getStartOfTriggerLocation(editor: Editor, at: Point, trigger: string): Point {
function getStartOfTriggerLocation(editor: Editor, at: Point, trigger: string): Point | null {
/**
* We need the part of `trigger.length` characters before because the `Editor.before` with
* unit=word ignores punctuation, and the `trigger` will most likely be a punctuation character.
Expand All @@ -25,6 +25,12 @@ function getStartOfTriggerLocation(editor: Editor, at: Point, trigger: string):
pointOfWordStart &&
Editor.before(editor, pointOfWordStart, { distance: trigger.length, unit: 'character' });

// `pointOfWordStart` can still point to the previous node, even if `at` is already pointing to the
// node after it. If that is the case, we simply stop looking for the trigger location.
if (at.path[0] !== pointOfWordStart?.path[0]) {
return null;
}

/**
* `Editor.before` returns undefined if there is no destination location.
* For example, when calling `Editor.before` when the cursor is at the start of the editor,
Expand Down Expand Up @@ -84,7 +90,12 @@ export function getWordAfterTrigger(
* 1. `editor` state: This is @person<cursor /> (in the process of typing a mention)
* 2. `textRange` matches "@person"
*/
const textRange = Editor.range(editor, at, getStartOfTriggerLocation(editor, at, trigger));
const triggerStart = getStartOfTriggerLocation(editor, at, trigger);
if (!triggerStart) {
return null;
}

const textRange = Editor.range(editor, at, triggerStart);

/**
* The text might match something before `trigger`, so we should not
Expand Down
Loading