YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases 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
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>