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 { IconButton } from "@mui/joy";
import Icon from "@/components/Icon"; import Icon from "@/components/Icon";
import OverflowTip from "@/components/kit/OverflowTip";
import { useTagStore } from "@/store/module"; import { useTagStore } from "@/store/module";
interface Props { interface Props {
@@ -18,13 +19,13 @@ const TagSelector = (props: Props) => {
{tags.length > 0 ? ( {tags.length > 0 ? (
tags.map((tag) => { tags.map((tag) => {
return ( return (
<span <div
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" 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)} onClick={() => onTagSelectorClick(tag)}
key={tag} key={tag}
> >
#{tag} <OverflowTip>#{tag}</OverflowTip>
</span> </div>
); );
}) })
) : ( ) : (

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

@@ -1,6 +1,7 @@
import classNames from "classnames"; import classNames from "classnames";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import getCaretCoordinates from "textarea-caret"; import getCaretCoordinates from "textarea-caret";
import OverflowTip from "@/components/kit/OverflowTip";
import { useTagStore } from "@/store/module"; import { useTagStore } from "@/store/module";
import { EditorRefActions } from "."; import { EditorRefActions } from ".";
@@ -8,6 +9,7 @@ type Props = {
editorRef: React.RefObject<HTMLTextAreaElement>; editorRef: React.RefObject<HTMLTextAreaElement>;
editorActions: React.ForwardedRef<EditorRefActions>; editorActions: React.ForwardedRef<EditorRefActions>;
}; };
type Position = { left: number; top: number; height: number }; type Position = { left: number; top: number; height: number };
const TagSuggestions = ({ editorRef, editorActions }: Props) => { const TagSuggestions = ({ editorRef, editorActions }: Props) => {
@@ -53,7 +55,6 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
}; };
const matchedTags = tagsRef.current.filter((tag) => customMatches(tag, input)); const matchedTags = tagsRef.current.filter((tag) => customMatches(tag, input));
return matchedTags.slice(0, 5); return matchedTags.slice(0, 5);
})(); })();
@@ -113,7 +114,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
if (!isVisibleRef.current || !position) return null; if (!isVisibleRef.current || !position) return null;
return ( return (
<div <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 }} style={{ left: position.left, top: position.top + position.height }}
> >
{suggestionsRef.current.map((tag, i) => ( {suggestionsRef.current.map((tag, i) => (
@@ -125,7 +126,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
i === selected ? "bg-zinc-300 dark:bg-zinc-700" : "" i === selected ? "bg-zinc-300 dark:bg-zinc-700" : ""
)} )}
> >
#{tag} <OverflowTip>#{tag}</OverflowTip>
</div> </div>
))} ))}
</div> </div>