mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
feat: render emoji from shortcut title
This commit is contained in:
@@ -22,6 +22,7 @@
|
|||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"copy-to-clipboard": "^3.3.3",
|
"copy-to-clipboard": "^3.3.3",
|
||||||
"dayjs": "^1.11.13",
|
"dayjs": "^1.11.13",
|
||||||
|
"emoji-regex": "^10.4.0",
|
||||||
"fuse.js": "^7.0.0",
|
"fuse.js": "^7.0.0",
|
||||||
"highlight.js": "^11.11.1",
|
"highlight.js": "^11.11.1",
|
||||||
"i18next": "^24.2.0",
|
"i18next": "^24.2.0",
|
||||||
|
8
web/pnpm-lock.yaml
generated
8
web/pnpm-lock.yaml
generated
@@ -47,6 +47,9 @@ importers:
|
|||||||
dayjs:
|
dayjs:
|
||||||
specifier: ^1.11.13
|
specifier: ^1.11.13
|
||||||
version: 1.11.13
|
version: 1.11.13
|
||||||
|
emoji-regex:
|
||||||
|
specifier: ^10.4.0
|
||||||
|
version: 10.4.0
|
||||||
fuse.js:
|
fuse.js:
|
||||||
specifier: ^7.0.0
|
specifier: ^7.0.0
|
||||||
version: 7.0.0
|
version: 7.0.0
|
||||||
@@ -1954,6 +1957,9 @@ packages:
|
|||||||
electron-to-chromium@1.5.76:
|
electron-to-chromium@1.5.76:
|
||||||
resolution: {integrity: sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==}
|
resolution: {integrity: sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==}
|
||||||
|
|
||||||
|
emoji-regex@10.4.0:
|
||||||
|
resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
|
||||||
|
|
||||||
emoji-regex@8.0.0:
|
emoji-regex@8.0.0:
|
||||||
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
|
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
|
||||||
|
|
||||||
@@ -5386,6 +5392,8 @@ snapshots:
|
|||||||
|
|
||||||
electron-to-chromium@1.5.76: {}
|
electron-to-chromium@1.5.76: {}
|
||||||
|
|
||||||
|
emoji-regex@10.4.0: {}
|
||||||
|
|
||||||
emoji-regex@8.0.0: {}
|
emoji-regex@8.0.0: {}
|
||||||
|
|
||||||
emoji-regex@9.2.2: {}
|
emoji-regex@9.2.2: {}
|
||||||
|
@@ -1,4 +1,5 @@
|
|||||||
import { Dropdown, Menu, MenuButton, MenuItem, Tooltip } from "@mui/joy";
|
import { Dropdown, Menu, MenuButton, MenuItem, Tooltip } from "@mui/joy";
|
||||||
|
import EmojiRegex from "emoji-regex";
|
||||||
import { Edit3Icon, MoreVerticalIcon, TrashIcon, PlusIcon } from "lucide-react";
|
import { Edit3Icon, MoreVerticalIcon, TrashIcon, PlusIcon } from "lucide-react";
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import { userServiceClient } from "@/grpcweb";
|
import { userServiceClient } from "@/grpcweb";
|
||||||
@@ -11,6 +12,8 @@ import { cn } from "@/utils";
|
|||||||
import { useTranslate } from "@/utils/i18n";
|
import { useTranslate } from "@/utils/i18n";
|
||||||
import showCreateShortcutDialog from "../CreateShortcutDialog";
|
import showCreateShortcutDialog from "../CreateShortcutDialog";
|
||||||
|
|
||||||
|
const emojiRegex = EmojiRegex();
|
||||||
|
|
||||||
const ShortcutsSection = observer(() => {
|
const ShortcutsSection = observer(() => {
|
||||||
const t = useTranslate();
|
const t = useTranslate();
|
||||||
const user = useCurrentUser();
|
const user = useCurrentUser();
|
||||||
@@ -40,16 +43,20 @@ const ShortcutsSection = observer(() => {
|
|||||||
<div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
|
<div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
|
||||||
{shortcuts.map((shortcut) => {
|
{shortcuts.map((shortcut) => {
|
||||||
const selected = memoFilterStore.shortcut === shortcut.id;
|
const selected = memoFilterStore.shortcut === shortcut.id;
|
||||||
|
const maybeEmoji = shortcut.title.split(" ")[0];
|
||||||
|
const emoji = emojiRegex.test(maybeEmoji) ? maybeEmoji : undefined;
|
||||||
|
const title = emoji ? shortcut.title.replace(emoji, "") : shortcut.title;
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={shortcut.id}
|
key={shortcut.id}
|
||||||
className="shrink-0 w-full text-sm rounded-md leading-6 flex flex-row justify-between items-center select-none gap-2 text-gray-600 dark:text-gray-400 dark:border-zinc-800"
|
className="shrink-0 w-full text-sm rounded-md leading-6 flex flex-row justify-between items-center select-none gap-2 text-gray-600 dark:text-gray-400 dark:border-zinc-800"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className={cn("truncate cursor-pointer dark:opacity-80", selected && "text-primary font-medium underline")}
|
className={cn("truncate cursor-pointer dark:opacity-80", selected && "text-primary font-medium")}
|
||||||
onClick={() => (selected ? memoFilterStore.setShortcut(undefined) : memoFilterStore.setShortcut(shortcut.id))}
|
onClick={() => (selected ? memoFilterStore.setShortcut(undefined) : memoFilterStore.setShortcut(shortcut.id))}
|
||||||
>
|
>
|
||||||
{shortcut.title}
|
{emoji && <span className="text-base mr-1">{emoji}</span>}
|
||||||
|
{title.trim()}
|
||||||
</span>
|
</span>
|
||||||
<Dropdown>
|
<Dropdown>
|
||||||
<MenuButton slots={{ root: "div" }}>
|
<MenuButton slots={{ root: "div" }}>
|
||||||
|
Reference in New Issue
Block a user