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

chore: update tag selector

Browse source
This commit is contained in:
Steven 2024-01-13 16:26:42 +08:00
parent 4a407668bc
commit 6db7ad76da
5 changed files with 60 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/package.json
View file

@ -13,6 +13,7 @@
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@matejmazur/react-katex": "^3.1.3",
"@mui/base": "5.0.0-beta.31",
"@mui/joy": "5.0.0-beta.22",
"@reduxjs/toolkit": "^1.9.7",
"axios": "^1.6.5",

3
web/pnpm-lock.yaml
View file

@ -17,6 +17,9 @@ dependencies:
'@matejmazur/react-katex':
specifier: ^3.1.3
version: 3.1.3(katex@0.16.9)(react@18.2.0)
'@mui/base':
specifier: 5.0.0-beta.31
version: 5.0.0-beta.31(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
'@mui/joy':
specifier: 5.0.0-beta.22
version: 5.0.0-beta.22(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)

4
web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
View file

@ -67,15 +67,13 @@ const MarkdownMenu = (props: Props) => {
slots={{ root: IconButton }}
slotProps={{
root: {
className:
"flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow",
size: "sm",
},
}}
>
<Icon.SquareSlash className="w-5 h-5 mx-auto" />
</MenuButton>
<Menu className="text-sm" size="sm">
<Menu className="text-sm" size="sm" placement="bottom-start">
<MenuItem onClick={handleCodeBlockClick}>
<Icon.Code2 className="w-4 h-auto" />
<span>Code block</span>

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

@ -1,16 +1,19 @@
import { IconButton } from "@mui/joy";
import { useEffect } from "react";
import { ClickAwayListener } from "@mui/base/ClickAwayListener";
import { Dropdown, IconButton, Menu, MenuButton } from "@mui/joy";
import { useEffect, useState } from "react";
import Icon from "@/components/Icon";
import OverflowTip from "@/components/kit/OverflowTip";
import { useTagStore } from "@/store/module";
import { EditorRefActions } from "../Editor";
interface Props {
onTagSelectorClick: (tag: string) => void;
editorRef: React.RefObject<EditorRefActions>;
}
const TagSelector = (props: Props) => {
const { onTagSelectorClick } = props;
const { editorRef } = props;
const tagStore = useTagStore();
const [open, setOpen] = useState(false);
const tags = tagStore.state.tags;
useEffect(() => {
@ -23,32 +26,50 @@ const TagSelector = (props: Props) => {
})();
}, []);
const handleTagClick = (tag: string) => {
editorRef.current?.insertText(`#${tag} `);
};
return (
<IconButton
className="relative group flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 hover:shadow"
size="sm"
>
<Icon.Hash className="w-5 h-5 mx-auto" />
<div className="hidden flex-row justify-start items-start flex-wrap absolute top-7 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-100 dark:bg-zinc-700 group-hover:flex">
{tags.length > 0 ? (
tags.map((tag) => {
return (
<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-200 dark:hover:bg-zinc-800 shrink-0"
onClick={() => onTagSelectorClick(tag)}
key={tag}
>
<OverflowTip>#{tag}</OverflowTip>
</div>
);
})
) : (
<p className="italic text-sm ml-2" onClick={(e) => e.stopPropagation()}>
No tags found
</p>
)}
</div>
</IconButton>
<Dropdown open={open} onOpenChange={(_, isOpen) => setOpen(isOpen)}>
<MenuButton
slots={{ root: IconButton }}
slotProps={{
root: {
size: "sm",
},
}}
>
<Icon.Hash className="w-5 h-5 mx-auto" />
</MenuButton>
<Menu className="relative text-sm" size="sm" placement="bottom-start">
<ClickAwayListener
onClickAway={() => {
setOpen(false);
}}
>
{tags.length > 0 ? (
<div className="flex-row justify-start items-start flex-wrap px-1 max-w-[12rem] h-auto max-h-48 overflow-y-auto font-mono">
{tags.map((tag) => {
return (
<div
className="inline-block w-auto max-w-full cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 shrink-0"
onClick={() => handleTagClick(tag)}
key={tag}
>
<OverflowTip>#{tag}</OverflowTip>
</div>
);
})}
</div>
) : (
<p className="italic mx-1" onClick={(e) => e.stopPropagation()}>
No tag found
</p>
)}
</ClickAwayListener>
</Menu>
</Dropdown>
);
};

22
web/src/components/MemoEditor/index.tsx
View file

@ -1,6 +1,6 @@
import { Select, Option, Button, IconButton, Divider } from "@mui/joy";
import { uniqBy } from "lodash-es";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import React, { useEffect, useMemo, useRef, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import useLocalStorage from "react-use/lib/useLocalStorage";
@ -335,10 +335,6 @@ const MemoEditor = (props: Props) => {
});
};
const handleTagSelectorClick = useCallback((tag: string) => {
editorRef.current?.insertText(`#${tag} `);
}, []);
const handleEditorFocus = () => {
editorRef.current?.focus();
};
@ -368,20 +364,12 @@ const MemoEditor = (props: Props) => {
>
<Editor ref={editorRef} {...editorConfig} />
<div className="relative w-full flex flex-row justify-between items-center pt-2" onFocus={(e) => e.stopPropagation()}>
<div className="flex flex-row justify-start items-center">
<TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
<IconButton
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
size="sm"
onClick={handleUploadFileBtnClick}
>
<div className="flex flex-row justify-start items-center opacity-80">
<TagSelector editorRef={editorRef} />
<IconButton size="sm" onClick={handleUploadFileBtnClick}>
<Icon.Image className="w-5 h-5 mx-auto" />
</IconButton>
<IconButton
className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
size="sm"
onClick={handleAddMemoRelationBtnClick}
>
<IconButton size="sm" onClick={handleAddMemoRelationBtnClick}>
<Icon.Link className="w-5 h-5 mx-auto" />
</IconButton>
<MarkdownMenu editorRef={editorRef} />