usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-11-10 01:10:52 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: add overflow tips to tag

Browse source
This commit is contained in:
Steven 2023-11-17 08:22:47 +08:00
parent 8bc117bce9
commit 0bb0407f46
2 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/src/components/MemoEditor/ActionButton/TagSelector.tsx
View file

@ -1,5 +1,6 @@
import { IconButton } from "@mui/joy";
import Icon from "@/components/Icon";
import OverflowTip from "@/components/kit/OverflowTip";
import { useTagStore } from "@/store/module";
interface Props {
@ -18,13 +19,13 @@ const TagSelector = (props: Props) => {
{tags.length > 0 ? (
tags.map((tag) => {
return (
<span
className="w-auto max-w-full truncate text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0"
<div
className="w-auto max-w-full text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0"
onClick={() => onTagSelectorClick(tag)}
key={tag}
>
#{tag}
</span>
<OverflowTip>#{tag}</OverflowTip>
</div>
);
})
) : (

7
web/src/components/MemoEditor/Editor/TagSuggestions.tsx
View file

@ -1,6 +1,7 @@
import classNames from "classnames";
import { useEffect, useRef, useState } from "react";
import getCaretCoordinates from "textarea-caret";
import OverflowTip from "@/components/kit/OverflowTip";
import { useTagStore } from "@/store/module";
import { EditorRefActions } from ".";
@ -8,6 +9,7 @@ type Props = {
editorRef: React.RefObject<HTMLTextAreaElement>;
editorActions: React.ForwardedRef<EditorRefActions>;
};
type Position = { left: number; top: number; height: number };
const TagSuggestions = ({ editorRef, editorActions }: Props) => {
@ -53,7 +55,6 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
};
const matchedTags = tagsRef.current.filter((tag) => customMatches(tag, input));
return matchedTags.slice(0, 5);
})();
@ -113,7 +114,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
if (!isVisibleRef.current || !position) return null;
return (
<div
className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] rounded font-mono shadow bg-zinc-200 dark:bg-zinc-600"
className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-zinc-200 dark:bg-zinc-600"
style={{ left: position.left, top: position.top + position.height }}
>
{suggestionsRef.current.map((tag, i) => (
@ -125,7 +126,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
i === selected ? "bg-zinc-300 dark:bg-zinc-700" : ""
)}
>
#{tag}
<OverflowTip>#{tag}</OverflowTip>
</div>
))}
</div>