SILVER
/
NODEDC_TASKMANAGER
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: локальный emoji popup для комментариев деталей задач

This commit is contained in:
DCCONSTRUCTIONS 2026-04-22 20:40:13 +03:00
parent 55549219ff
commit 2ec2a4fcd3
4 changed files with 323 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
plane-src/apps/web/core/components/editor/lite-text/toolbar.tsx
View File

@ -4,7 +4,7 @@
* See the LICENSE file for details.
*/
import React, { useEffect, useState, useCallback } from "react";
import React, { useEffect, useState, useCallback, useMemo } from "react";
import { ArrowUp, Paperclip, SmilePlus } from "lucide-react";
import type { LucideIcon } from "lucide-react";
@ -17,6 +17,7 @@ import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import { GlobeIcon, LockIcon } from "@plane/propel/icons";
import type { ISvgIcons } from "@plane/propel/icons";
import { Popover } from "@plane/propel/popover";
import { Tooltip } from "@plane/propel/tooltip";
// constants
import { cn } from "@plane/utils";
@ -58,12 +59,177 @@ const COMMENT_ACCESS_SPECIFIERS: TCommentAccessType[] = [
];
const toolbarItems = TOOLBAR_ITEMS.lite;
const EMOJI_ITEM: ToolbarMenuItem<"emoji"> = {
itemKey: "emoji",
renderKey: "emoji",
name: "Emoji",
icon: SmilePlus,
editors: ["lite", "document"],
const COMMENT_RECENT_EMOJI_STORAGE_KEY = "nodedc-comment-emoji-recent";
const COMMENT_RECENT_EMOJI_LIMIT = 8;
const COMMENT_EMOJIS = [
"😀",
"😃",
"😄",
"😁",
"😆",
"😅",
"🤣",
"😂",
"🙂",
"😉",
"😊",
"😇",
"🥰",
"😍",
"🤩",
"😘",
"😗",
"😚",
"😋",
"😛",
"😜",
"🤪",
"🫠",
"🤗",
"🤔",
"🫡",
"🤝",
"👏",
"🙌",
"👍",
"👎",
"🔥",
"💯",
"✨",
"🎉",
"❤️",
"🧡",
"💛",
"💚",
"💙",
"💜",
"🤍",
"🤎",
"🖤",
"😎",
"🤓",
"🥳",
"😴",
"🤯",
"😬",
"😌",
"🥲",
"😭",
"😡",
"🤮",
"🤢",
"🤡",
"👀",
"🙏",
"👌",
"✅",
"❌",
];
const readRecentCommentEmojis = (storageKey: string) => {
if (typeof window === "undefined") return [];
try {
const value = window.localStorage.getItem(storageKey);
if (!value) return [];
const parsed = JSON.parse(value);
return Array.isArray(parsed) ? parsed.filter((emoji): emoji is string => typeof emoji === "string") : [];
} catch {
return [];
}
};
const writeRecentCommentEmoji = (storageKey: string, emoji: string, limit: number) => {
if (typeof window === "undefined") return [];
const next = [emoji, ...readRecentCommentEmojis(storageKey).filter((value) => value !== emoji)].slice(0, limit);
try {
window.localStorage.setItem(storageKey, JSON.stringify(next));
} catch {
return next;
}
return next;
};
type CompactCommentEmojiPickerProps = {
isOpen: boolean;
onEmojiSelect: (emoji: string) => void;
onOpenChange: (value: boolean) => void;
};
const CompactCommentEmojiPicker: React.FC<CompactCommentEmojiPickerProps> = ({
isOpen,
onEmojiSelect,
onOpenChange,
}) => {
const [recentEmojis, setRecentEmojis] = useState<string[]>(() =>
readRecentCommentEmojis(COMMENT_RECENT_EMOJI_STORAGE_KEY)
);
const handleEmojiSelect = useCallback(
(emoji: string) => {
setRecentEmojis(
writeRecentCommentEmoji(COMMENT_RECENT_EMOJI_STORAGE_KEY, emoji, COMMENT_RECENT_EMOJI_LIMIT)
);
onEmojiSelect(emoji);
onOpenChange(false);
},
[onEmojiSelect, onOpenChange]
);
const mainEmojis = useMemo(
() => COMMENT_EMOJIS.filter((emoji) => !recentEmojis.includes(emoji)),
[recentEmojis]
);
const renderEmojiButton = (emoji: string, isRecent = false) => (
<button
key={`${isRecent ? "recent" : "main"}-${emoji}`}
type="button"
onMouseDown={(event) => event.preventDefault()}
onClick={() => handleEmojiSelect(emoji)}
className={cn(
"grid place-items-center rounded-[14px] text-[1.35rem] leading-none transition-colors hover:bg-layer-1",
isRecent ? "size-9" : "h-9 w-9"
)}
>
{emoji}
</button>
);
return (
<Popover open={isOpen} onOpenChange={onOpenChange}>
<Popover.Button className="outline-none">
<Tooltip tooltipContent="Emoji">
<div className="grid size-10 place-items-center rounded-[16px] bg-layer-1/85 text-secondary transition-colors hover:bg-layer-1 focus-visible:outline-none">
<SmilePlus className="h-4 w-4" strokeWidth={2} />
</div>
</Tooltip>
</Popover.Button>
<Popover.Panel
positionerClassName="z-50"
className="nodedc-dropdown-surface my-1 w-[22rem] overflow-hidden rounded-[20px] p-3"
side="top"
align="start"
sideOffset={8}
data-prevent-outside-click="true"
onMouseDown={(event) => event.stopPropagation()}
onClick={(event) => event.stopPropagation()}
>
<div className="max-h-80 overflow-y-auto pr-1">
{recentEmojis.length > 0 && (
<div className="mb-2 flex flex-wrap gap-1.5 border-b border-subtle/60 pb-2">
{recentEmojis.map((emoji) => renderEmojiButton(emoji, true))}
</div>
)}
<div className="grid grid-cols-8 gap-1.5">{mainEmojis.map((emoji) => renderEmojiButton(emoji))}</div>
</div>
</Popover.Panel>
</Popover>
);
};
export function IssueCommentToolbar(props: Props) {
@ -83,6 +249,7 @@ export function IssueCommentToolbar(props: Props) {
} = props;
// State to manage active states of toolbar items
const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
// Function to update active states
const updateActiveStates = useCallback(() => {
@ -125,15 +292,11 @@ export function IssueCommentToolbar(props: Props) {
<Paperclip className="h-4 w-4" strokeWidth={2} />
</button>
</Tooltip>
<Tooltip tooltipContent="Emoji">
<button
type="button"
onClick={() => executeCommand(EMOJI_ITEM)}
className="grid size-10 place-items-center rounded-[16px] bg-layer-1/85 text-secondary transition-colors hover:bg-layer-1 focus-visible:outline-none"
>
<SmilePlus className="h-4 w-4" strokeWidth={2} />
</button>
</Tooltip>
<CompactCommentEmojiPicker
isOpen={isEmojiPickerOpen}
onOpenChange={setIsEmojiPickerOpen}
onEmojiSelect={(emoji) => editorRef?.setEditorValueAtCursorPosition(emoji)}
/>
</div>
{showSubmitButton && (
<button

11
plane-src/packages/editor/src/core/components/menus/menu-items.ts
View File

@ -27,6 +27,7 @@ import {
MinusSquare,
Palette,
AlignCenter,
SmilePlus,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";
import { LinkIcon } from "@plane/propel/icons";
@ -37,6 +38,7 @@ import {
insertHorizontalRule,
insertImage,
insertTableCommand,
openEmojiPicker,
setLinkEditor,
setText,
setTextAlign,
@ -255,6 +257,14 @@ export const TextAlignItem = (editor: Editor): EditorMenuItem<"text-align"> => (
icon: AlignCenter,
});
export const EmojiItem = (editor: Editor): EditorMenuItem<"emoji"> => ({
key: "emoji",
name: "Emoji",
isActive: () => false,
command: () => openEmojiPicker(editor),
icon: SmilePlus,
});
export const getEditorMenuItems = (editor: Editor | null): EditorMenuItem<TEditorCommands>[] => {
if (!editor) return [];
@ -282,5 +292,6 @@ export const getEditorMenuItems = (editor: Editor | null): EditorMenuItem<TEdito
TextColorItem(editor),
BackgroundColorItem(editor),
TextAlignItem(editor),
EmojiItem(editor),
] as EditorMenuItem<TEditorCommands>[];
};

140
plane-src/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
View File

@ -4,20 +4,68 @@
* See the LICENSE file for details.
*/
import { useEffect, useRef } from "react";
import { useEffect, useRef, useState, useCallback } from "react";
import { EmojiPicker } from "frimousse";
import { cn } from "../../utils";
type EmojiRootProps = {
onChange: (value: string) => void;
categoryHeadersHidden?: boolean;
recentEmojiLimit?: number;
recentEmojiStorageKey?: string;
recentEmojisHidden?: boolean;
searchPlaceholder?: string;
searchDisabled?: boolean;
searchHidden?: boolean;
skinToneSelectorHidden?: boolean;
};
const readRecentEmojis = (storageKey: string) => {
if (typeof window === "undefined") return [];
try {
const value = window.localStorage.getItem(storageKey);
if (!value) return [];
const parsed = JSON.parse(value);
return Array.isArray(parsed) ? parsed.filter((emoji): emoji is string => typeof emoji === "string") : [];
} catch {
return [];
}
};
const writeRecentEmojis = (storageKey: string, emoji: string, limit: number) => {
if (typeof window === "undefined") return [];
const next = [emoji, ...readRecentEmojis(storageKey).filter((value) => value !== emoji)].slice(0, limit);
try {
window.localStorage.setItem(storageKey, JSON.stringify(next));
} catch {
return next;
}
return next;
};
export function EmojiRoot(props: EmojiRootProps) {
const { onChange, searchPlaceholder = "Search", searchDisabled = false } = props;
const {
onChange,
categoryHeadersHidden = false,
recentEmojiLimit = 12,
recentEmojiStorageKey = "nodedc-recent-emojis",
recentEmojisHidden = true,
searchPlaceholder = "Search",
searchDisabled = false,
searchHidden = false,
skinToneSelectorHidden = false,
} = props;
const searchWrapperRef = useRef<HTMLDivElement>(null);
const [recentEmojis, setRecentEmojis] = useState<string[]>(() => readRecentEmojis(recentEmojiStorageKey));
useEffect(() => {
if (searchHidden) return;
const focusInput = () => {
const searchWrapper = searchWrapperRef.current;
if (searchWrapper) {
@ -29,41 +77,83 @@ export function EmojiRoot(props: EmojiRootProps) {
}
};
focusInput();
}, []);
}, [searchHidden]);
const handleEmojiSelect = useCallback(
(emoji: string) => {
if (!recentEmojisHidden) {
setRecentEmojis(writeRecentEmojis(recentEmojiStorageKey, emoji, recentEmojiLimit));
}
onChange(emoji);
},
[onChange, recentEmojiLimit, recentEmojiStorageKey, recentEmojisHidden]
);
return (
<EmojiPicker.Root
data-slot="emoji-picker"
className="isolate flex h-full w-full flex-col rounded-md border-none p-2"
onEmojiSelect={(val) => onChange(val.emoji)}
onEmojiSelect={(val) => handleEmojiSelect(val.emoji)}
>
<div className="sticky top-0 z-10 flex items-center justify-between gap-2 bg-surface-1 px-1.5 py-2 [&>[data-slot='emoji-picker-search-wrapper']]:flex-grow [&>[data-slot='emoji-picker-search-wrapper']]:p-0">
<div ref={searchWrapperRef} data-slot="emoji-picker-search-wrapper" className="p-2">
<EmojiPicker.Search
placeholder={searchPlaceholder}
disabled={searchDisabled}
className="block h-full w-full flex-grow-0 rounded-md border-[0.5px] border-subtle bg-transparent p-0 px-3 py-2 text-16 placeholder-(--text-color-placeholder) focus:border-accent-strong focus:outline-none"
/>
{(!searchHidden || !skinToneSelectorHidden) && (
<div className="sticky top-0 z-10 flex items-center justify-between gap-2 bg-surface-1 px-1.5 py-2 [&>[data-slot='emoji-picker-search-wrapper']]:flex-grow [&>[data-slot='emoji-picker-search-wrapper']]:p-0">
{!searchHidden && (
<div ref={searchWrapperRef} data-slot="emoji-picker-search-wrapper" className="p-2">
<EmojiPicker.Search
placeholder={searchPlaceholder}
disabled={searchDisabled}
className="block h-full w-full flex-grow-0 rounded-md border-[0.5px] border-subtle bg-transparent p-0 px-3 py-2 text-16 placeholder-(--text-color-placeholder) focus:border-accent-strong focus:outline-none"
/>
</div>
)}
{!skinToneSelectorHidden && (
<EmojiPicker.SkinToneSelector
data-slot="emoji-picker-skin-tone-selector"
className="hover:bg-accent mx-2 mb-1.5 size-8 flex-shrink-0 rounded-md bg-surface-1 text-16"
/>
)}
</div>
<EmojiPicker.SkinToneSelector
data-slot="emoji-picker-skin-tone-selector"
className="hover:bg-accent mx-2 mb-1.5 size-8 flex-shrink-0 rounded-md bg-surface-1 text-16"
/>
</div>
)}
{!recentEmojisHidden && recentEmojis.length > 0 && (
<div className="border-b border-subtle/60 px-2 pb-2 pt-1">
<div className="flex flex-wrap gap-1.5">
{recentEmojis.map((emoji) => (
<button
key={emoji}
type="button"
onClick={() => handleEmojiSelect(emoji)}
className="flex size-8 items-center justify-center rounded-md text-16 transition-colors hover:bg-layer-1"
>
{emoji}
</button>
))}
</div>
</div>
)}
<EmojiPicker.Viewport data-slot="emoji-picker-content" className={cn("relative flex-1 outline-none")}>
<EmojiPicker.List
data-slot="emoji-picker-list"
className={cn("pb-2 select-none")}
components={{
CategoryHeader: ({ category, ...props }) => (
<div
data-slot="emoji-picker-list-category-header"
className="bg-surface-1 px-3 pb-1.5 text-11 font-medium text-tertiary"
{...props}
>
{category.label}
</div>
),
CategoryHeader: categoryHeadersHidden
? ({ ...props }) => (
<div
data-slot="emoji-picker-list-category-header"
className="pointer-events-none h-0 overflow-hidden p-0 text-[0]"
aria-hidden="true"
{...props}
/>
)
: ({ category, ...props }) => (
<div
data-slot="emoji-picker-list-category-header"
className="bg-surface-1 px-3 pb-1.5 text-11 font-medium text-tertiary"
{...props}
>
{category.label}
</div>
),
Row: ({ children, ...props }) => (
<div data-slot="emoji-picker-list-row" className="scroll-my-1.5 px-1.5" {...props}>
{children}

18
plane-src/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
View File

@ -16,16 +16,22 @@ export interface EmojiReactionPickerProps {
isOpen: boolean;
handleToggle: (value: boolean) => void;
buttonClassName?: string;
categoryHeadersHidden?: boolean;
closeOnSelect?: boolean;
disabled?: boolean;
dropdownClassName?: string;
label: React.ReactNode;
onChange: (emoji: string) => void;
placement?: TPlacement;
recentEmojiLimit?: number;
recentEmojiStorageKey?: string;
recentEmojisHidden?: boolean;
searchDisabled?: boolean;
searchHidden?: boolean;
searchPlaceholder?: string;
side?: TSide;
align?: TAlign;
skinToneSelectorHidden?: boolean;
}
export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
@ -33,16 +39,22 @@ export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
isOpen,
handleToggle,
buttonClassName,
categoryHeadersHidden = false,
closeOnSelect = true,
disabled = false,
dropdownClassName,
label,
onChange,
placement = "bottom-start",
recentEmojiLimit = 12,
recentEmojiStorageKey,
recentEmojisHidden = true,
searchDisabled = false,
searchHidden = false,
searchPlaceholder = "Search",
side = "bottom",
align = "start",
skinToneSelectorHidden = false,
} = props;
// side and align calculations
@ -78,9 +90,15 @@ export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
>
<div className="h-80 overflow-hidden overflow-y-auto">
<EmojiRoot
categoryHeadersHidden={categoryHeadersHidden}
onChange={handleEmojiChange}
recentEmojiLimit={recentEmojiLimit}
recentEmojiStorageKey={recentEmojiStorageKey}
recentEmojisHidden={recentEmojisHidden}
searchHidden={searchHidden}
searchPlaceholder={searchPlaceholder}
searchDisabled={searchDisabled}
skinToneSelectorHidden={skinToneSelectorHidden}
/>
</div>
</Popover.Panel>