From da391064aa0ef774094bd52351789d8b14365b86 Mon Sep 17 00:00:00 2001 From: Henit Chobisa Date: Thu, 2 Nov 2023 19:31:25 +0530 Subject: [PATCH] [FIX] Minor bug fixes in `MentionList` and `MentionNode` UI (#2600) * fix: removed text color in peek view * fix: fixed list view UI bugs and node view colors * feat: update imports in suggestions for mentionSuggestion type * fix: updated mention list css * fix: updated mention node UI according to the design provided * style: update the mentions dropdown UI * style: mentioned users UI in the editor --------- Co-authored-by: Aaryan Khandelwal --- .../core/src/ui/mentions/MentionList.tsx | 153 ++++++++++-------- .../core/src/ui/mentions/mentionNodeView.tsx | 53 +++--- .../editor/core/src/ui/mentions/suggestion.ts | 2 +- .../issue-peek-overview/issue-detail.tsx | 2 +- web/styles/editor.css | 24 --- 5 files changed, 115 insertions(+), 119 deletions(-) diff --git a/packages/editor/core/src/ui/mentions/MentionList.tsx b/packages/editor/core/src/ui/mentions/MentionList.tsx index 0591b2421..e8bee47d1 100644 --- a/packages/editor/core/src/ui/mentions/MentionList.tsx +++ b/packages/editor/core/src/ui/mentions/MentionList.tsx @@ -1,111 +1,122 @@ -import { Editor } from '@tiptap/react'; +import { Editor } from "@tiptap/react"; import React, { forwardRef, + useCallback, useEffect, useImperativeHandle, useState, -} from 'react' +} from "react"; -import { IMentionSuggestion } from '../../types/mention-suggestion'; +import { IMentionSuggestion } from "../../types/mention-suggestion"; interface MentionListProps { items: IMentionSuggestion[]; - command: (item: { id: string, label: string, target: string, redirect_uri: string }) => void; + command: (item: { + id: string; + label: string; + target: string; + redirect_uri: string; + }) => void; editor: Editor; } // eslint-disable-next-line react/display-name const MentionList = forwardRef((props: MentionListProps, ref) => { - const [selectedIndex, setSelectedIndex] = useState(0) + const [selectedIndex, setSelectedIndex] = useState(0); + const selectItem = (index: number) => { - const item = props.items[index] + const item = props.items[index]; + + console.log(props.command); if (item) { - props.command({ id: item.id, label: item.title, target: "users", redirect_uri: item.redirect_uri }) + props.command({ + id: item.id, + label: item.title, + target: "users", + redirect_uri: item.redirect_uri, + }); } - } + }; const upHandler = () => { - setSelectedIndex(((selectedIndex + props.items.length) - 1) % props.items.length) - } + setSelectedIndex( + (selectedIndex + props.items.length - 1) % props.items.length, + ); + }; const downHandler = () => { - setSelectedIndex((selectedIndex + 1) % props.items.length) - } + setSelectedIndex((selectedIndex + 1) % props.items.length); + }; const enterHandler = () => { - selectItem(selectedIndex) - } + selectItem(selectedIndex); + }; useEffect(() => { - setSelectedIndex(0) - }, [props.items]) + setSelectedIndex(0); + }, [props.items]); useImperativeHandle(ref, () => ({ onKeyDown: ({ event }: { event: KeyboardEvent }) => { - if (event.key === 'ArrowUp') { - upHandler() - return true + if (event.key === "ArrowUp") { + upHandler(); + return true; } - if (event.key === 'ArrowDown') { - downHandler() - return true + if (event.key === "ArrowDown") { + downHandler(); + return true; } - if (event.key === 'Enter') { - enterHandler() - return true + if (event.key === "Enter") { + enterHandler(); + return false; } - return false + return false; }, - })) + })); - return ( - props.items && props.items.length !== 0 ?
- { props.items.length ? props.items.map((item, index) => ( -
selectItem(index)}> - {item.avatar ?
- {item.title} -
: -
- {item.title.charAt(0)} -
- } -
-

{item.title}

-

- {item.subtitle} -

-
+ return props.items && props.items.length !== 0 ? ( +
+ {props.items.length ? ( + props.items.map((item, index) => ( +
selectItem(index)} + > +
+ {item.avatar && item.avatar.trim() !== "" ? ( + {item.title} + ) : ( +
+ {item.title[0]} +
+ )}
- ) - ) - :
No result
- } -
: <> - ) -}) +
+

{item.title}

+ {/*

{item.subtitle}

*/} +
+
+ )) + ) : ( +
No result
+ )} +
+ ) : ( + <> + ); +}); -MentionList.displayName = "MentionList" +MentionList.displayName = "MentionList"; -export default MentionList \ No newline at end of file +export default MentionList; diff --git a/packages/editor/core/src/ui/mentions/mentionNodeView.tsx b/packages/editor/core/src/ui/mentions/mentionNodeView.tsx index 09fba3aa1..331c701e2 100644 --- a/packages/editor/core/src/ui/mentions/mentionNodeView.tsx +++ b/packages/editor/core/src/ui/mentions/mentionNodeView.tsx @@ -1,32 +1,41 @@ /* eslint-disable react/display-name */ // @ts-nocheck -import { NodeViewWrapper } from '@tiptap/react' -import { cn } from '../../lib/utils' -import React from 'react' -import { useRouter } from 'next/router' -import { IMentionHighlight } from '../../types/mention-suggestion' +import { NodeViewWrapper } from "@tiptap/react"; +import { cn } from "../../lib/utils"; +import { useRouter } from "next/router"; +import { IMentionHighlight } from "../../types/mention-suggestion"; // eslint-disable-next-line import/no-anonymous-default-export -export default props => { - - const router = useRouter() - const highlights = props.extension.options.mentionHighlights as IMentionHighlight[] +export default (props) => { + const router = useRouter(); + const highlights = props.extension.options + .mentionHighlights as IMentionHighlight[]; const handleClick = () => { - if (!props.extension.options.readonly){ - router.push(props.node.attrs.redirect_uri) + if (!props.extension.options.readonly) { + router.push(props.node.attrs.redirect_uri); } - } + }; return ( - - @{ props.node.attrs.label } + + + @{props.node.attrs.label} + - ) -} - - + ); +}; diff --git a/packages/editor/core/src/ui/mentions/suggestion.ts b/packages/editor/core/src/ui/mentions/suggestion.ts index 56d3bfce3..b4bbc53a6 100644 --- a/packages/editor/core/src/ui/mentions/suggestion.ts +++ b/packages/editor/core/src/ui/mentions/suggestion.ts @@ -3,7 +3,7 @@ import { Editor } from "@tiptap/core"; import tippy from 'tippy.js' import MentionList from './MentionList' -import { IMentionSuggestion } from './mentions'; +import { IMentionSuggestion } from '../../types/mention-suggestion'; const Suggestion = (suggestions: IMentionSuggestion[]) => ({ items: ({ query }: { query: string }) => suggestions.filter(suggestion => suggestion.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5), diff --git a/web/components/issues/issue-peek-overview/issue-detail.tsx b/web/components/issues/issue-peek-overview/issue-detail.tsx index 2243c0497..33b735fb8 100644 --- a/web/components/issues/issue-peek-overview/issue-detail.tsx +++ b/web/components/issues/issue-peek-overview/issue-detail.tsx @@ -140,7 +140,7 @@ export const PeekOverviewIssueDetails: FC = (props) =
{errors.name ? errors.name.message : null} - + div > p { .ProseMirror table * .is-empty::before { opacity: 0; } - - -.items { - position: absolute; - max-height: 40vh; - background: rgb(var(--color-background-100)); - border-radius: 0.5rem; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1); - color: rgb(var(--color-text-100)); - font-size: 0.9rem; - overflow: auto; -} - -.item { - background: transparent; - border: 1px solid transparent; - border-radius: 0.4rem; - text-align: left; - cursor: pointer; -} - -.item.is-selected { - border-color: rgb(var(--color-border-200)); -}