diff --git a/apps/www/public/registry/styles/default/emoji-dropdown-menu.json b/apps/www/public/registry/styles/default/emoji-dropdown-menu.json index 5b3018a1c4..913006a462 100644 --- a/apps/www/public/registry/styles/default/emoji-dropdown-menu.json +++ b/apps/www/public/registry/styles/default/emoji-dropdown-menu.json @@ -8,27 +8,27 @@ "name": "emoji-dropdown-menu.tsx" }, { - "content": "import type { ReactNode } from 'react';\n\nimport * as Popover from '@radix-ui/react-popover';\n\ntype EmojiToolbarDropdownProps = {\n children: ReactNode;\n control: ReactNode;\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n};\n\nexport function EmojiToolbarDropdown({\n children,\n control,\n isOpen,\n setIsOpen,\n}: EmojiToolbarDropdownProps) {\n return (\n \n {control}\n\n \n {children}\n \n \n );\n}\n", + "content": "import React, { type ReactNode } from 'react';\n\nimport * as Popover from '@radix-ui/react-popover';\n\ntype EmojiToolbarDropdownProps = {\n children: ReactNode;\n control: ReactNode;\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n};\n\nexport function EmojiToolbarDropdown({\n children,\n control,\n isOpen,\n setIsOpen,\n}: EmojiToolbarDropdownProps) {\n return (\n \n {control}\n\n \n {children}\n \n \n );\n}\n", "name": "emoji-toolbar-dropdown.tsx" }, { - "content": "import React from 'react';\n\nimport type { EmojiCategoryList } from '@udecode/plate-emoji';\n\nimport { Clock } from 'lucide-react';\n\nexport const emojiCategoryIcons: Record<\n EmojiCategoryList,\n { outline: React.ReactElement; solid: React.ReactElement }\n> = {\n activity: {\n outline: (\n \n basketball_line\n \n \n \n \n \n ),\n solid: (\n \n \n \n ),\n },\n\n custom: {\n outline: (\n \n \n \n ),\n solid: (\n \n \n \n ),\n },\n\n flags: {\n outline: (\n \n \n \n ),\n solid: (\n \n \n \n ),\n },\n\n foods: {\n outline: (\n \n \n \n ),\n solid: (\n \n \n \n ),\n },\n\n frequent: {\n outline: ,\n solid: (\n \n \n \n ),\n },\n\n nature: {\n outline: (\n \n \n \n \n ),\n solid: (\n \n \n \n ),\n },\n\n objects: {\n outline: (\n \n \n \n \n ),\n solid: (\n \n \n \n ),\n },\n\n people: {\n outline: (\n \n \n \n \n ),\n solid: (\n \n \n \n ),\n },\n\n places: {\n outline: (\n \n \n \n \n ),\n solid: (\n \n \n \n ),\n },\n\n symbols: {\n outline: (\n \n \n \n ),\n solid: (\n \n \n \n ),\n },\n};\n\nexport const emojiSearchIcons = {\n delete: (\n \n \n \n ),\n\n loupe: (\n \n \n \n ),\n};\n", + "content": "import type React from 'react';\n\nimport type { EmojiCategoryList } from '@udecode/plate-emoji';\n\nimport {\n AppleIcon,\n ClockIcon,\n CompassIcon,\n DeleteIcon,\n FlagIcon,\n LeafIcon,\n LightbulbIcon,\n MusicIcon,\n SearchIcon,\n SmileIcon,\n StarIcon,\n} from 'lucide-react';\n\nexport const emojiCategoryIcons: Record<\n EmojiCategoryList,\n { outline: React.ReactElement; solid: React.ReactElement }\n> = {\n activity: {\n outline: (\n \n \n \n \n \n \n ),\n // Needed to add another solid variant - outline will be used for now\n solid: (\n \n \n \n \n \n \n ),\n },\n\n custom: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n flags: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n foods: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n frequent: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n nature: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n objects: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n people: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n places: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n\n symbols: {\n outline: ,\n // Needed to add another solid variant - outline will be used for now\n solid: ,\n },\n};\n\nexport const emojiSearchIcons = {\n delete: ,\n\n loupe: ,\n};\n", "name": "emoji-icons.tsx" }, { - "content": "import { cn } from '@udecode/cn';\nimport { EmojiSettings, type UseEmojiPickerType } from '@udecode/plate-emoji';\n\nimport { EmojiPickerContent } from './emoji-picker-content';\nimport { EmojiPickerNavigation } from './emoji-picker-navigation';\nimport { EmojiPickerPreview } from './emoji-picker-preview';\nimport { EmojiPickerSearchAndClear } from './emoji-picker-search-and-clear';\nimport { EmojiPickerSearchBar } from './emoji-picker-search-bar';\n\nexport function EmojiPicker({\n clearSearch,\n emoji,\n emojiLibrary,\n focusedCategory,\n handleCategoryClick,\n hasFound,\n i18n,\n icons,\n isSearching,\n onMouseOver,\n onSelectEmoji,\n refs,\n searchResult,\n searchValue,\n setSearch,\n settings = EmojiSettings,\n visibleCategories,\n}: UseEmojiPickerType) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport { EmojiSettings, type UseEmojiPickerType } from '@udecode/plate-emoji';\n\nimport { EmojiPickerContent } from './emoji-picker-content';\nimport { EmojiPickerNavigation } from './emoji-picker-navigation';\nimport { EmojiPickerPreview } from './emoji-picker-preview';\nimport { EmojiPickerSearchAndClear } from './emoji-picker-search-and-clear';\nimport { EmojiPickerSearchBar } from './emoji-picker-search-bar';\n\nexport function EmojiPicker({\n clearSearch,\n emoji,\n emojiLibrary,\n focusedCategory,\n handleCategoryClick,\n hasFound,\n i18n,\n icons,\n isSearching,\n onMouseOver,\n onSelectEmoji,\n refs,\n searchResult,\n searchValue,\n setSearch,\n settings = EmojiSettings,\n visibleCategories,\n}: UseEmojiPickerType) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n", "name": "emoji-picker.tsx" }, { - "content": "import { memo, useCallback } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n type Emoji,\n EmojiSettings,\n type GridRow,\n type UseEmojiPickerType,\n} from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n UseEmojiPickerType,\n | 'emojiLibrary'\n | 'i18n'\n | 'isSearching'\n | 'onMouseOver'\n | 'onSelectEmoji'\n | 'refs'\n | 'searchResult'\n | 'settings'\n | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n emoji: Emoji;\n index: number;\n onMouseOver: (emoji?: Emoji) => void;\n onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n row: GridRow;\n} & Pick;\n\nconst Button = memo(\n ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n return (\n onSelect(emoji)}\n onMouseEnter={() => onMouseOver(emoji)}\n onMouseLeave={() => onMouseOver()}\n tabIndex={-1}\n type=\"button\"\n >\n \n \n {emoji.skins[0].native}\n \n \n );\n }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n ({ emojiLibrary, onMouseOver, onSelectEmoji, row }: RowOfButtonsProps) => (\n
\n {row.elements.map((emojiId, index) => (\n \n ))}\n
\n )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n emojiLibrary,\n i18n,\n isSearching = false,\n onMouseOver,\n onSelectEmoji,\n refs,\n searchResult,\n settings = EmojiSettings,\n visibleCategories,\n}: EmojiPickerContentProps) {\n const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n const isCategoryVisible = useCallback(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (categoryId: any) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n return visibleCategories.has(categoryId)\n ? // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n visibleCategories.get(categoryId)\n : false;\n },\n [visibleCategories]\n );\n\n const EmojiList = useCallback(() => {\n return emojiLibrary\n .getGrid()\n .sections()\n .map(({ id: categoryId }) => {\n const section = emojiLibrary.getGrid().section(categoryId);\n const { buttonSize } = settings;\n\n return (\n \n
\n {i18n.categories[categoryId]}\n
\n \n {isCategoryVisible(categoryId) &&\n section\n .getRows()\n .map((row: GridRow) => (\n \n ))}\n \n \n );\n });\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.categories,\n isCategoryVisible,\n onSelectEmoji,\n onMouseOver,\n settings,\n ]);\n\n const SearchList = useCallback(() => {\n return (\n
\n
\n {i18n.searchResult}\n
\n
\n {searchResult.map((emoji: Emoji, index: number) => (\n \n ))}\n
\n
\n );\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.searchResult,\n searchResult,\n onSelectEmoji,\n onMouseOver,\n ]);\n\n return (\n \n
\n {isSearching ? SearchList() : EmojiList()}\n
\n \n );\n}\n", + "content": "import { memo, useCallback } from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n type Emoji,\n EmojiSettings,\n type GridRow,\n type UseEmojiPickerType,\n} from '@udecode/plate-emoji';\n\nexport type EmojiPickerContentProps = Pick<\n UseEmojiPickerType,\n | 'emojiLibrary'\n | 'i18n'\n | 'isSearching'\n | 'onMouseOver'\n | 'onSelectEmoji'\n | 'refs'\n | 'searchResult'\n | 'settings'\n | 'visibleCategories'\n>;\n\nexport type EmojiButtonProps = {\n emoji: Emoji;\n index: number;\n onMouseOver: (emoji?: Emoji) => void;\n onSelect: (emoji: Emoji) => void;\n};\n\nexport type RowOfButtonsProps = {\n row: GridRow;\n} & Pick;\n\nconst Button = memo(\n ({ emoji, index, onMouseOver, onSelect }: EmojiButtonProps) => {\n return (\n onSelect(emoji)}\n onMouseEnter={() => onMouseOver(emoji)}\n onMouseLeave={() => onMouseOver()}\n tabIndex={-1}\n type=\"button\"\n >\n \n \n {emoji.skins[0].native}\n \n \n );\n }\n);\nButton.displayName = 'Button';\n\nconst RowOfButtons = memo(\n ({ emojiLibrary, onMouseOver, onSelectEmoji, row }: RowOfButtonsProps) => (\n
\n {row.elements.map((emojiId, index) => (\n \n ))}\n
\n )\n);\nRowOfButtons.displayName = 'RowOfButtons';\n\nexport function EmojiPickerContent({\n emojiLibrary,\n i18n,\n isSearching = false,\n onMouseOver,\n onSelectEmoji,\n refs,\n searchResult,\n settings = EmojiSettings,\n visibleCategories,\n}: EmojiPickerContentProps) {\n const getRowWidth = settings.perLine.value * settings.buttonSize.value;\n\n const isCategoryVisible = useCallback(\n (categoryId: any) => {\n return visibleCategories.has(categoryId)\n ? visibleCategories.get(categoryId)\n : false;\n },\n [visibleCategories]\n );\n\n const EmojiList = useCallback(() => {\n return emojiLibrary\n .getGrid()\n .sections()\n .map(({ id: categoryId }) => {\n const section = emojiLibrary.getGrid().section(categoryId);\n const { buttonSize } = settings;\n\n return (\n \n
\n {i18n.categories[categoryId]}\n
\n \n {isCategoryVisible(categoryId) &&\n section\n .getRows()\n .map((row: GridRow) => (\n \n ))}\n \n \n );\n });\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.categories,\n isCategoryVisible,\n onSelectEmoji,\n onMouseOver,\n settings,\n ]);\n\n const SearchList = useCallback(() => {\n return (\n
\n
\n {i18n.searchResult}\n
\n
\n {searchResult.map((emoji: Emoji, index: number) => (\n \n ))}\n
\n
\n );\n }, [\n emojiLibrary,\n getRowWidth,\n i18n.searchResult,\n searchResult,\n onSelectEmoji,\n onMouseOver,\n ]);\n\n return (\n \n
\n {isSearching ? SearchList() : EmojiList()}\n
\n \n );\n}\n", "name": "emoji-picker-content.tsx" }, { - "content": "import type {\n EmojiCategoryList,\n IEmojiFloatingLibrary,\n UseEmojiPickerType,\n} from '@udecode/plate-emoji';\n\nimport { cn } from '@udecode/cn';\n\nexport type EmojiPickerNavigationProps = {\n onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n UseEmojiPickerType,\n 'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\nconst getBarProperty = (\n emojiLibrary: IEmojiFloatingLibrary,\n focusedCategory?: EmojiCategoryList\n) => {\n let width = 0;\n let position = 0;\n\n if (focusedCategory) {\n width = 100 / emojiLibrary.getGrid().size;\n position = focusedCategory\n ? emojiLibrary.indexOf(focusedCategory) * 100\n : 0;\n }\n\n return { position, width };\n};\n\nexport function EmojiPickerNavigation({\n emojiLibrary,\n focusedCategory,\n i18n,\n icons,\n onClick,\n}: EmojiPickerNavigationProps) {\n const { position, width } = getBarProperty(emojiLibrary, focusedCategory);\n\n return (\n \n
\n {emojiLibrary\n .getGrid()\n .sections()\n .map(({ id }) => (\n onClick(id)}\n title={i18n.categories[id]}\n type=\"button\"\n >\n {icons.categories[id].outline}\n \n ))}\n \n
\n \n );\n}\n", + "content": "import type {\n EmojiCategoryList,\n IEmojiFloatingLibrary,\n UseEmojiPickerType,\n} from '@udecode/plate-emoji';\n\nimport { cn } from '@udecode/cn';\n\nimport { Button } from './button';\n\nexport type EmojiPickerNavigationProps = {\n onClick: (id: EmojiCategoryList) => void;\n} & Pick<\n UseEmojiPickerType,\n 'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'\n>;\n\nconst getBarProperty = (\n emojiLibrary: IEmojiFloatingLibrary,\n focusedCategory?: EmojiCategoryList\n) => {\n let width = 0;\n let position = 0;\n\n if (focusedCategory) {\n width = 100 / emojiLibrary.getGrid().size;\n position = focusedCategory\n ? emojiLibrary.indexOf(focusedCategory) * 100\n : 0;\n }\n\n return { position, width };\n};\n\nexport function EmojiPickerNavigation({\n emojiLibrary,\n focusedCategory,\n i18n,\n icons,\n onClick,\n}: EmojiPickerNavigationProps) {\n const { position, width } = getBarProperty(emojiLibrary, focusedCategory);\n\n return (\n \n
\n {emojiLibrary\n .getGrid()\n .sections()\n .map(({ id }) => (\n onClick(id)}\n size=\"icon\"\n title={i18n.categories[id]}\n type=\"button\"\n variant=\"ghost\"\n >\n {icons.categories[id].outline}\n \n ))}\n \n
\n \n );\n}\n", "name": "emoji-picker-navigation.tsx" }, { - "content": "import type { UseEmojiPickerType } from '@udecode/plate-emoji';\n\nexport type EmojiPickerPreviewProps = Pick<\n UseEmojiPickerType,\n 'emoji' | 'hasFound' | 'i18n' | 'isSearching'\n>;\n\nexport type EmojiPreviewProps = Pick;\n\nexport type NoEmojiPreviewProps = Pick;\n\nexport type PickAnEmojiPreviewProps = NoEmojiPreviewProps;\n\nfunction EmojiPreview({ emoji }: EmojiPreviewProps) {\n return (\n
\n
\n {emoji?.skins[0].native}\n
\n
\n
\n {emoji?.name}\n
\n
{`:${emoji?.id}:`}
\n
\n
\n );\n}\n\nfunction NoEmoji({ i18n }: NoEmojiPreviewProps) {\n return (\n
\n
😢
\n
\n
\n {i18n.searchNoResultsTitle}\n
\n
\n {i18n.searchNoResultsSubtitle}\n
\n
\n
\n );\n}\n\nfunction PickAnEmoji({ i18n }: PickAnEmojiPreviewProps) {\n return (\n
\n
☝️
\n
\n
\n {i18n.pick}\n
\n
\n
\n );\n}\n\nexport function EmojiPickerPreview({\n emoji,\n hasFound = true,\n i18n,\n isSearching = false,\n ...props\n}: EmojiPickerPreviewProps) {\n const showPickEmoji = !emoji && !(isSearching && !hasFound);\n const showNoEmoji = isSearching && !hasFound;\n const showPreview = emoji;\n\n return (\n <>\n {showPreview && }\n {showPickEmoji && }\n {showNoEmoji && }\n \n );\n}\n", + "content": "import type { UseEmojiPickerType } from '@udecode/plate-emoji';\n\nexport type EmojiPickerPreviewProps = Pick<\n UseEmojiPickerType,\n 'emoji' | 'hasFound' | 'i18n' | 'isSearching'\n>;\n\nexport type EmojiPreviewProps = Pick;\n\nexport type NoEmojiPreviewProps = Pick;\n\nexport type PickAnEmojiPreviewProps = NoEmojiPreviewProps;\n\nfunction EmojiPreview({ emoji }: EmojiPreviewProps) {\n return (\n
\n
\n {emoji?.skins[0].native}\n
\n
\n
{emoji?.name}
\n
{`:${emoji?.id}:`}
\n
\n
\n );\n}\n\nfunction NoEmoji({ i18n }: NoEmojiPreviewProps) {\n return (\n
\n
😢
\n
\n
\n {i18n.searchNoResultsTitle}\n
\n
{i18n.searchNoResultsSubtitle}
\n
\n
\n );\n}\n\nfunction PickAnEmoji({ i18n }: PickAnEmojiPreviewProps) {\n return (\n
\n
☝️
\n
\n
{i18n.pick}
\n
\n
\n );\n}\n\nexport function EmojiPickerPreview({\n emoji,\n hasFound = true,\n i18n,\n isSearching = false,\n ...props\n}: EmojiPickerPreviewProps) {\n const showPickEmoji = !emoji && !(isSearching && !hasFound);\n const showNoEmoji = isSearching && !hasFound;\n const showPreview = emoji;\n\n return (\n <>\n {showPreview && }\n {showPickEmoji && }\n {showNoEmoji && }\n \n );\n}\n", "name": "emoji-picker-preview.tsx" }, { diff --git a/apps/www/public/registry/styles/default/media-toolbar-button.json b/apps/www/public/registry/styles/default/media-toolbar-button.json index 895d0fcc35..9a56269a81 100644 --- a/apps/www/public/registry/styles/default/media-toolbar-button.json +++ b/apps/www/public/registry/styles/default/media-toolbar-button.json @@ -4,7 +4,7 @@ ], "files": [ { - "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n type ELEMENT_IMAGE,\n useMediaToolbarButton,\n} from '@udecode/plate-media';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MediaToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType?: typeof ELEMENT_IMAGE;\n }\n>(({ nodeType, ...rest }, ref) => {\n const { props } = useMediaToolbarButton({ nodeType });\n\n return (\n \n \n \n );\n});\n", + "content": "import React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport {\n type ELEMENT_IMAGE,\n type ELEMENT_MEDIA_EMBED,\n useMediaToolbarButton,\n} from '@udecode/plate-media';\n\nimport { Icons } from '@/components/icons';\n\nimport { ToolbarButton } from './toolbar';\n\nexport const MediaToolbarButton = withRef<\n typeof ToolbarButton,\n {\n nodeType?: typeof ELEMENT_IMAGE | typeof ELEMENT_MEDIA_EMBED;\n }\n>(({ nodeType, ...rest }, ref) => {\n const { props } = useMediaToolbarButton({ nodeType });\n\n return (\n \n \n \n );\n});\n", "name": "media-toolbar-button.tsx" } ],