diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx index 9b9010abb4..cbaa4a40c3 100644 --- a/apps/www/content/docs/components/changelog.mdx +++ b/apps/www/content/docs/components/changelog.mdx @@ -11,9 +11,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver ## October 2024 #15 -### October 27 #15.6 +### October 31 #15.6 - Fixed and modified some styles in emoji and color picker +- Remove `Icons` file dependency. All icons are now imported from `lucide-react`. ### October 26 #15.5 diff --git a/apps/www/content/docs/components/installation/manual.mdx b/apps/www/content/docs/components/installation/manual.mdx index 8622d60f82..ee35d4c6c5 100644 --- a/apps/www/content/docs/components/installation/manual.mdx +++ b/apps/www/content/docs/components/installation/manual.mdx @@ -19,6 +19,8 @@ Add the following dependencies to your project: npm install @udecode/cn tailwindcss-animate class-variance-authority tailwind-merge lucide-react ``` +We use icons from [Lucide](https://lucide.dev). You can use any icon library you want. + ### Configure tailwind.config.js Here's what demo `tailwind.config.js` looks like: @@ -37,14 +39,6 @@ Add the following to your `styles/globals.css` file. You can learn more about us open /> -### Add icons - -Add the icons you'll use in `components/icons.tsx`: - - - -We use icons from [Lucide](https://lucide.dev). You can use any icon library you want. - ### Add components You can now start adding components to your project. diff --git a/apps/www/content/docs/components/installation/next.mdx b/apps/www/content/docs/components/installation/next.mdx index dcc0cdfded..2dd08a123a 100644 --- a/apps/www/content/docs/components/installation/next.mdx +++ b/apps/www/content/docs/components/installation/next.mdx @@ -35,14 +35,6 @@ Which color would you like to use as base color? › Slate Do you want to use CSS variables for colors? › no / yes ``` -### Add icons - -Add the icons you'll use in `components/icons.tsx`: - - - -We use icons from [Lucide](https://lucide.dev). You can use any icon library you want. - ### Add components You can now start adding components to your project. diff --git a/apps/www/content/docs/components/installation/vite.mdx b/apps/www/content/docs/components/installation/vite.mdx index a98e91bcdb..1ebbdde5c3 100644 --- a/apps/www/content/docs/components/installation/vite.mdx +++ b/apps/www/content/docs/components/installation/vite.mdx @@ -109,14 +109,6 @@ Which color would you like to use as base color? › Slate Do you want to use CSS variables for colors? › no / yes ``` -### Add icons - -Add the icons you'll use in `components/icons.tsx`: - - - -We use icons from [Lucide](https://lucide.dev). You can use any icon library you want. - ### Add components You can now start adding components to your project. diff --git a/apps/www/src/components/icons.tsx b/apps/www/src/components/icons.tsx index 4ca84a6d27..a4e2c8a368 100644 --- a/apps/www/src/components/icons.tsx +++ b/apps/www/src/components/icons.tsx @@ -2,7 +2,6 @@ import React from 'react'; import type { IconProps } from '@radix-ui/react-icons/dist/types'; -import { cva } from 'class-variance-authority'; import { type LucideIcon, type LucideProps, @@ -101,96 +100,6 @@ import { export type Icon = LucideIcon; -const borderAll = (props: LucideProps) => ( - - - -); - -const borderBottom = (props: LucideProps) => ( - - - -); - -const borderLeft = (props: LucideProps) => ( - - - -); - -const borderNone = (props: LucideProps) => ( - - - -); - -const borderRight = (props: LucideProps) => ( - - - -); - -const borderTop = (props: LucideProps) => ( - - - -); - const discord = (props: LucideProps) => ( ( ); -export const DoubleColumnOutlined = (props: LucideProps) => ( - - - -); - -export const ThreeColumnOutlined = (props: LucideProps) => ( - - - -); - -export const RightSideDoubleColumnOutlined = (props: LucideProps) => ( - - - -); - -export const LeftSideDoubleColumnOutlined = (props: LucideProps) => ( - - - -); - -export const DoubleSideDoubleColumnOutlined = (props: LucideProps) => ( - - - -); - const LayoutIcon = (props: LucideProps) => ( ( ); export const Icons = { - LayoutIcon, add: Plus, ai: Sparkles, alignCenter: AlignCenter, @@ -403,12 +221,6 @@ export const Icons = { bg: PaintBucket, blockquote: Quote, bold: Bold, - borderAll, - borderBottom, - borderLeft, - borderNone, - borderRight, - borderTop, check: Check, chevronDown: ChevronDown, chevronLeft: ChevronLeft, @@ -433,8 +245,6 @@ export const Icons = { dependency: Link, discord, done: Check, - doubleColumn: DoubleColumnOutlined, - doubleSideDoubleColumn: DoubleSideDoubleColumnOutlined, download: DownloadIcon, downloadCloud: DownloadCloud, dragHandle: GripVertical, @@ -460,7 +270,6 @@ export const Icons = { italic: Italic, kbd: Keyboard, laptop: Laptop, - leftSideDoubleColumn: LeftSideDoubleColumnOutlined, lineHeight: WrapText, link: Link2, makeLonger: ListPlus, @@ -480,7 +289,6 @@ export const Icons = { radix, react, refresh: RotateCcw, - rightSideDoubleColumn: RightSideDoubleColumnOutlined, row: RectangleHorizontal, search: Search, settings: Settings, @@ -497,7 +305,6 @@ export const Icons = { table: Table, tailwind, text: Text, - threeColumn: ThreeColumnOutlined, todo: Square, translate: Languages, trash: Trash, @@ -520,17 +327,3 @@ export const Icons = { viewing: Eye, yarn, }; - -export const iconVariants = cva('', { - defaultVariants: {}, - variants: { - size: { - md: 'mr-2 size-6', - sm: 'mr-2 size-4', - }, - variant: { - menuItem: 'mr-2 size-5', - toolbar: 'size-5', - }, - }, -}); diff --git a/apps/www/src/components/plate-ui/playground-fixed-toolbar-buttons.tsx b/apps/www/src/components/plate-ui/playground-fixed-toolbar-buttons.tsx index 8b41b7b03c..f638a2254b 100644 --- a/apps/www/src/components/plate-ui/playground-fixed-toolbar-buttons.tsx +++ b/apps/www/src/components/plate-ui/playground-fixed-toolbar-buttons.tsx @@ -28,10 +28,18 @@ import { import { ImagePlugin } from '@udecode/plate-media/react'; import { TablePlugin } from '@udecode/plate-table/react'; import { TogglePlugin } from '@udecode/plate-toggle/react'; -import { SparklesIcon } from 'lucide-react'; +import { + BaselineIcon, + BoldIcon, + Code2Icon, + ItalicIcon, + PaintBucketIcon, + SparklesIcon, + StrikethroughIcon, + UnderlineIcon, +} from 'lucide-react'; import { CheckPlugin } from '@/components/context/check-plugin'; -import { Icons, iconVariants } from '@/components/icons'; import { AIToolbarButton } from '@/registry/default/plate-ui/ai-toolbar-button'; // import { AIToolbarButton } from '@/registry/default/plate-ui/ai-toolbar-button'; import { AlignDropdownMenu } from '@/registry/default/plate-ui/align-dropdown-menu'; @@ -94,7 +102,7 @@ export function PlaygroundFixedToolbarButtons() { nodeType={BoldPlugin.key} tooltip="Bold (⌘+B)" > - + @@ -103,7 +111,7 @@ export function PlaygroundFixedToolbarButtons() { nodeType={ItalicPlugin.key} tooltip="Italic (⌘+I)" > - + @@ -112,7 +120,7 @@ export function PlaygroundFixedToolbarButtons() { nodeType={UnderlinePlugin.key} tooltip="Underline (⌘+U)" > - + @@ -121,7 +129,7 @@ export function PlaygroundFixedToolbarButtons() { nodeType={StrikethroughPlugin.key} tooltip="Strikethrough (⌘+⇧+M)" > - + @@ -130,7 +138,7 @@ export function PlaygroundFixedToolbarButtons() { nodeType={CodePlugin.key} tooltip="Code (⌘+E)" > - + @@ -139,9 +147,7 @@ export function PlaygroundFixedToolbarButtons() { nodeType={FontColorPlugin.key} tooltip="Text Color" > - + @@ -150,7 +156,7 @@ export function PlaygroundFixedToolbarButtons() { nodeType={FontBackgroundColorPlugin.key} tooltip="Highlight Color" > - + diff --git a/apps/www/src/components/plate-ui/playground-floating-toolbar-buttons.tsx b/apps/www/src/components/plate-ui/playground-floating-toolbar-buttons.tsx index c648c0f60a..aa82b5252e 100644 --- a/apps/www/src/components/plate-ui/playground-floating-toolbar-buttons.tsx +++ b/apps/www/src/components/plate-ui/playground-floating-toolbar-buttons.tsx @@ -10,10 +10,16 @@ import { import { CommentsPlugin } from '@udecode/plate-comments/react'; import { useEditorReadOnly } from '@udecode/plate-common/react'; import { LinkPlugin } from '@udecode/plate-link/react'; -import { SparklesIcon } from 'lucide-react'; +import { + BoldIcon, + Code2Icon, + ItalicIcon, + SparklesIcon, + StrikethroughIcon, + UnderlineIcon, +} from 'lucide-react'; import { CheckPlugin } from '@/components/context/check-plugin'; -import { Icons } from '@/components/icons'; import { AIToolbarButton } from '@/registry/default/plate-ui/ai-toolbar-button'; // import { AIToolbarButton } from '@/registry/default/plate-ui/ai-toolbar-button'; import { CommentToolbarButton } from '@/registry/default/plate-ui/comment-toolbar-button'; @@ -46,7 +52,7 @@ export function PlaygroundFloatingToolbarButtons() { - + @@ -55,7 +61,7 @@ export function PlaygroundFloatingToolbarButtons() { nodeType={ItalicPlugin.key} tooltip="Italic (⌘+I)" > - + @@ -64,7 +70,7 @@ export function PlaygroundFloatingToolbarButtons() { nodeType={UnderlinePlugin.key} tooltip="Underline (⌘+U)" > - + @@ -73,13 +79,13 @@ export function PlaygroundFloatingToolbarButtons() { nodeType={StrikethroughPlugin.key} tooltip="Strikethrough (⌘+⇧+M)" > - + - + diff --git a/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx index 2e84e785a9..9f9b5c7283 100644 --- a/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-insert-dropdown-menu.tsx @@ -21,10 +21,31 @@ import { LinkPlugin, triggerFloatingLink } from '@udecode/plate-link/react'; import { insertMedia } from '@udecode/plate-media'; import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; import { TablePlugin, insertTable } from '@udecode/plate-table/react'; +import { + Columns2Icon, + FileCodeIcon, + FilmIcon, + Heading1Icon, + Heading2Icon, + Heading3Icon, + Heading4Icon, + Heading5Icon, + Heading6Icon, + ImageIcon, + Link2Icon, + ListIcon, + ListOrderedIcon, + MinusIcon, + PenToolIcon, + PilcrowIcon, + PlusIcon, + QuoteIcon, + TableIcon, + TableOfContentsIcon, +} from 'lucide-react'; import { CheckPlugin } from '@/components/context/check-plugin'; import { settingsStore } from '@/components/context/settings-store'; -import { Icons } from '@/components/icons'; import { useMyEditorRef } from '@/registry/default/lib/plate-types'; import { DropdownMenu, @@ -42,85 +63,85 @@ const items = [ items: [ { description: 'Paragraph', - icon: Icons.paragraph, + icon: PilcrowIcon, label: 'Paragraph', value: ParagraphPlugin.key, }, { description: 'Heading 1', - icon: Icons.h1, + icon: Heading1Icon, label: 'Heading 1', value: HEADING_KEYS.h1, }, { description: 'Heading 2', - icon: Icons.h2, + icon: Heading2Icon, label: 'Heading 2', value: HEADING_KEYS.h2, }, { description: 'Heading 3', - icon: Icons.h3, + icon: Heading3Icon, label: 'Heading 3', value: HEADING_KEYS.h3, }, { description: 'Heading 4', - icon: Icons.h4, + icon: Heading4Icon, label: 'Heading 4', value: HEADING_KEYS.h4, }, { description: 'Heading 5', - icon: Icons.h5, + icon: Heading5Icon, label: 'Heading 5', value: HEADING_KEYS.h5, }, { description: 'Heading 6', - icon: Icons.h6, + icon: Heading6Icon, label: 'Heading 6', value: HEADING_KEYS.h6, }, { description: 'Table', - icon: Icons.table, + icon: TableIcon, label: 'Table', value: TablePlugin.key, }, { description: 'Bulleted list', - icon: Icons.ul, + icon: ListIcon, label: 'Bulleted list', value: 'ul', }, { description: 'Numbered list', - icon: Icons.ol, + icon: ListOrderedIcon, label: 'Numbered list', value: 'ol', }, { description: 'Quote (⌘+⇧+.)', - icon: Icons.blockquote, + icon: QuoteIcon, label: 'Quote', value: BlockquotePlugin.key, }, { description: 'Divider (---)', - icon: Icons.hr, + icon: MinusIcon, label: 'Divider', value: HorizontalRulePlugin.key, }, { description: 'Columns', - icon: Icons.LayoutIcon, + icon: Columns2Icon, label: 'Columns', value: ColumnPlugin.key, }, { description: 'Table of Contents', - icon: Icons.h3, + icon: TableOfContentsIcon, label: 'Table of Contents', value: TocPlugin.key, }, @@ -131,25 +152,25 @@ const items = [ items: [ { description: 'Code (```)', - icon: Icons.codeblock, + icon: FileCodeIcon, label: 'Code', value: CodeBlockPlugin.key, }, { description: 'Image', - icon: Icons.image, + icon: ImageIcon, label: 'Image', value: ImagePlugin.key, }, { description: 'Embed', - icon: Icons.embed, + icon: FilmIcon, label: 'Embed', value: MediaEmbedPlugin.key, }, { description: 'Excalidraw', - icon: Icons.excalidraw, + icon: PenToolIcon, label: 'Excalidraw', value: ExcalidrawPlugin.key, }, @@ -160,7 +181,7 @@ const items = [ items: [ { description: 'Link', - icon: Icons.link, + icon: Link2Icon, label: 'Link', value: LinkPlugin.key, }, @@ -177,7 +198,7 @@ export function PlaygroundInsertDropdownMenu(props: DropdownMenuProps) { - + diff --git a/apps/www/src/components/plate-ui/playground-mode-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-mode-dropdown-menu.tsx index 9aacee46ca..c665046654 100644 --- a/apps/www/src/components/plate-ui/playground-mode-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-mode-dropdown-menu.tsx @@ -8,8 +8,8 @@ import { useEditorRef, usePlateStore, } from '@udecode/plate-common/react'; +import { EyeIcon, PenIcon, PenLineIcon } from 'lucide-react'; -import { Icons } from '@/components/icons'; import { DropdownMenu, DropdownMenuContent, @@ -29,19 +29,19 @@ export function PlaygroundModeDropdownMenu(props: DropdownMenuProps) { const item = { editing: ( <> - + Editing ), suggesting: ( <> - + Suggesting ), viewing: ( <> - + Viewing ), diff --git a/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx index 1f11624020..075212185c 100644 --- a/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx @@ -10,8 +10,14 @@ import { collapseSelection } from '@udecode/plate-common'; import { focusEditor, useEditorRef } from '@udecode/plate-common/react'; import { HighlightPlugin } from '@udecode/plate-highlight/react'; import { KbdPlugin } from '@udecode/plate-kbd/react'; +import { + HighlighterIcon, + KeyboardIcon, + MoreHorizontalIcon, + SubscriptIcon, + SuperscriptIcon, +} from 'lucide-react'; -import { Icons } from '@/components/icons'; import { DropdownMenu, DropdownMenuContent, @@ -29,7 +35,7 @@ export function PlaygroundMoreDropdownMenu(props: DropdownMenuProps) { - + @@ -44,7 +50,7 @@ export function PlaygroundMoreDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + Highlight @@ -55,7 +61,7 @@ export function PlaygroundMoreDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + Keyboard input @@ -68,7 +74,7 @@ export function PlaygroundMoreDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + Superscript {/* (⌘+,) */} @@ -81,7 +87,7 @@ export function PlaygroundMoreDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + Subscript {/* (⌘+.) */} diff --git a/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx index c867e1f050..3ef48b9e5e 100644 --- a/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-turn-into-dropdown-menu.tsx @@ -21,9 +21,17 @@ import { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list'; import { IndentListPlugin } from '@udecode/plate-indent-list/react'; import { unwrapList } from '@udecode/plate-list'; import { ListPlugin } from '@udecode/plate-list/react'; +import { + Heading1Icon, + Heading2Icon, + Heading3Icon, + ListIcon, + ListOrderedIcon, + PilcrowIcon, + QuoteIcon, +} from 'lucide-react'; import { CheckPlugin } from '@/components/context/check-plugin'; -import { Icons } from '@/components/icons'; import { useMyEditorRef } from '@/registry/default/lib/plate-types'; import { DropdownMenu, @@ -39,63 +47,63 @@ import { ToolbarButton } from '@/registry/default/plate-ui/toolbar'; const items = [ { description: 'Paragraph', - icon: Icons.paragraph, + icon: PilcrowIcon, label: 'Paragraph', plugin: HeadingPlugin, value: ParagraphPlugin.key, }, { description: 'Heading 1', - icon: Icons.h1, + icon: Heading1Icon, label: 'Heading 1', plugin: HeadingPlugin, value: HEADING_KEYS.h1, }, { description: 'Heading 2', - icon: Icons.h2, + icon: Heading2Icon, label: 'Heading 2', plugin: HeadingPlugin, value: HEADING_KEYS.h2, }, { description: 'Heading 3', - icon: Icons.h3, + icon: Heading3Icon, label: 'Heading 3', plugin: HeadingPlugin, value: HEADING_KEYS.h3, }, { description: 'Bulleted list', - icon: Icons.ul, + icon: ListIcon, label: 'Bulleted list', plugin: ListPlugin, value: 'ul', }, { description: 'Numbered list', - icon: Icons.ol, + icon: ListOrderedIcon, label: 'Numbered list', plugin: ListPlugin, value: 'ol', }, { description: 'Bulleted list', - icon: Icons.ul, + icon: ListIcon, label: 'Bulleted list', plugin: IndentListPlugin, value: ListStyleType.Disc, }, { description: 'Numbered list', - icon: Icons.ol, + icon: ListOrderedIcon, label: 'Numbered list', plugin: IndentListPlugin, value: ListStyleType.Decimal, }, { description: 'Quote (⌘+⇧+.)', - icon: Icons.blockquote, + icon: QuoteIcon, label: 'Quote', plugin: BlockquotePlugin, value: BlockquotePlugin.key, diff --git a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx index e3280d0ebb..cc0064dfad 100644 --- a/apps/www/src/registry/default/example/cards/cards-toolbar.tsx +++ b/apps/www/src/registry/default/example/cards/cards-toolbar.tsx @@ -13,8 +13,16 @@ import { } from '@udecode/plate-font/react'; import { ListStyleType } from '@udecode/plate-indent-list'; import { ImagePlugin } from '@udecode/plate-media/react'; +import { + BaselineIcon, + BoldIcon, + Code2Icon, + ItalicIcon, + PaintBucketIcon, + StrikethroughIcon, + UnderlineIcon, +} from 'lucide-react'; -import { Icons, iconVariants } from '@/components/icons'; import { AlignDropdownMenu } from '@/registry/default/plate-ui/align-dropdown-menu'; import { ColorDropdownMenu } from '@/registry/default/plate-ui/color-dropdown-menu'; import { CommentToolbarButton } from '@/registry/default/plate-ui/comment-toolbar-button'; @@ -52,29 +60,29 @@ export function CardsToolbar() { - + - + - + - + - + @@ -83,13 +91,13 @@ export function CardsToolbar() { nodeType={FontColorPlugin.key} tooltip="Text Color" > - + - + diff --git a/apps/www/src/registry/default/example/mode-toggle.tsx b/apps/www/src/registry/default/example/mode-toggle.tsx index fbdd5b9f1e..a60fa954b9 100644 --- a/apps/www/src/registry/default/example/mode-toggle.tsx +++ b/apps/www/src/registry/default/example/mode-toggle.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; +import { MoonIcon, SunIcon } from 'lucide-react'; import { useTheme } from 'next-themes'; -import { Icons } from '@/components/icons'; import { useMounted } from '@/registry/default/hooks/use-mounted'; import { Button } from '@/registry/default/plate-ui/button'; @@ -21,9 +21,9 @@ export default function ModeToggle() { onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} > {mounted && theme === 'dark' ? ( - + ) : ( - + )} Toggle theme diff --git a/apps/www/src/registry/default/plate-ui/align-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/align-dropdown-menu.tsx index 38369324c8..7d6857f98f 100644 --- a/apps/www/src/registry/default/plate-ui/align-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/align-dropdown-menu.tsx @@ -8,8 +8,12 @@ import { useAlignDropdownMenu, useAlignDropdownMenuState, } from '@udecode/plate-alignment/react'; - -import { Icons, iconVariants } from '@/components/icons'; +import { + AlignCenterIcon, + AlignJustifyIcon, + AlignLeftIcon, + AlignRightIcon, +} from 'lucide-react'; import { DropdownMenu, @@ -23,19 +27,19 @@ import { ToolbarButton } from './toolbar'; const items = [ { - icon: Icons.alignLeft, + icon: AlignLeftIcon, value: 'left', }, { - icon: Icons.alignCenter, + icon: AlignCenterIcon, value: 'center', }, { - icon: Icons.alignRight, + icon: AlignRightIcon, value: 'right', }, { - icon: Icons.alignJustify, + icon: AlignJustifyIcon, value: 'justify', }, ]; @@ -47,7 +51,7 @@ export function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) { const openState = useOpenState(); const IconValue = items.find((item) => item.value === radioGroupProps.value)?.icon ?? - Icons.alignLeft; + AlignLeftIcon; return ( @@ -64,7 +68,7 @@ export function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) { > {items.map(({ icon: Icon, value: itemValue }) => ( - + ))} diff --git a/apps/www/src/registry/default/plate-ui/column-group-element.tsx b/apps/www/src/registry/default/plate-ui/column-group-element.tsx index 58c43da209..3970d1a920 100644 --- a/apps/www/src/registry/default/plate-ui/column-group-element.tsx +++ b/apps/www/src/registry/default/plate-ui/column-group-element.tsx @@ -11,17 +11,9 @@ import { useColumnState, useDebouncePopoverOpen, } from '@udecode/plate-layout/react'; -import { Delete } from 'lucide-react'; +import { type LucideProps, Delete } from 'lucide-react'; import { useReadOnly } from 'slate-react'; -import { - DoubleColumnOutlined, - DoubleSideDoubleColumnOutlined, - LeftSideDoubleColumnOutlined, - RightSideDoubleColumnOutlined, - ThreeColumnOutlined, -} from '@/components/icons'; - import { Button } from './button'; import { PlateElement } from './plate-element'; import { Popover, PopoverAnchor, PopoverContent } from './popover'; @@ -98,3 +90,93 @@ export function ColumnFloatingToolbar({ children }: React.PropsWithChildren) { ); } + +const DoubleColumnOutlined = (props: LucideProps) => ( + + + +); + +const ThreeColumnOutlined = (props: LucideProps) => ( + + + +); + +const RightSideDoubleColumnOutlined = (props: LucideProps) => ( + + + +); + +const LeftSideDoubleColumnOutlined = (props: LucideProps) => ( + + + +); + +const DoubleSideDoubleColumnOutlined = (props: LucideProps) => ( + + + +); diff --git a/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx index ab200e2962..781d2a5538 100644 --- a/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/insert-dropdown-menu.tsx @@ -12,9 +12,14 @@ import { useEditorRef, } from '@udecode/plate-common/react'; import { HEADING_KEYS } from '@udecode/plate-heading'; -import { Plus } from 'lucide-react'; - -import { Icons } from '@/components/icons'; +import { + Heading1Icon, + Heading2Icon, + Heading3Icon, + PilcrowIcon, + Plus, + QuoteIcon, +} from 'lucide-react'; import { DropdownMenu, @@ -32,31 +37,31 @@ const items = [ items: [ { description: 'Paragraph', - icon: Icons.paragraph, + icon: PilcrowIcon, label: 'Paragraph', value: ParagraphPlugin.key, }, { description: 'Heading 1', - icon: Icons.h1, + icon: Heading1Icon, label: 'Heading 1', value: HEADING_KEYS.h1, }, { description: 'Heading 2', - icon: Icons.h2, + icon: Heading2Icon, label: 'Heading 2', value: HEADING_KEYS.h2, }, { description: 'Heading 3', - icon: Icons.h3, + icon: Heading3Icon, label: 'Heading 3', value: HEADING_KEYS.h3, }, { description: 'Quote (⌘+⇧+.)', - icon: Icons.blockquote, + icon: QuoteIcon, label: 'Quote', value: BlockquotePlugin.key, }, diff --git a/apps/www/src/registry/default/plate-ui/slash-input-element.tsx b/apps/www/src/registry/default/plate-ui/slash-input-element.tsx index 2a40d51fa7..b5d5265a23 100644 --- a/apps/www/src/registry/default/plate-ui/slash-input-element.tsx +++ b/apps/www/src/registry/default/plate-ui/slash-input-element.tsx @@ -9,8 +9,15 @@ import { AIChatPlugin } from '@udecode/plate-ai/react'; import { DatePlugin } from '@udecode/plate-date/react'; import { HEADING_KEYS } from '@udecode/plate-heading'; import { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list'; - -import { Icons } from '@/components/icons'; +import { + CalendarIcon, + Heading1Icon, + Heading2Icon, + Heading3Icon, + ListIcon, + ListOrderedIcon, + SparklesIcon, +} from 'lucide-react'; import { InlineCombobox, @@ -33,35 +40,35 @@ interface SlashCommandRule { const rules: SlashCommandRule[] = [ { focusEditor: false, - icon: Icons.ai, + icon: SparklesIcon, value: 'AI', onSelect: (editor) => { editor.getApi(AIChatPlugin).aiChat.show(); }, }, { - icon: Icons.h1, + icon: Heading1Icon, value: 'Heading 1', onSelect: (editor) => { editor.tf.toggle.block({ type: HEADING_KEYS.h1 }); }, }, { - icon: Icons.h2, + icon: Heading2Icon, value: 'Heading 2', onSelect: (editor) => { editor.tf.toggle.block({ type: HEADING_KEYS.h2 }); }, }, { - icon: Icons.h3, + icon: Heading3Icon, value: 'Heading 3', onSelect: (editor) => { editor.tf.toggle.block({ type: HEADING_KEYS.h3 }); }, }, { - icon: Icons.ul, + icon: ListIcon, keywords: ['ul', 'unordered list'], value: 'Bulleted list', onSelect: (editor) => { @@ -71,7 +78,7 @@ const rules: SlashCommandRule[] = [ }, }, { - icon: Icons.ol, + icon: ListOrderedIcon, keywords: ['ol', 'ordered list'], value: 'Numbered list', onSelect: (editor) => { @@ -81,7 +88,7 @@ const rules: SlashCommandRule[] = [ }, }, { - icon: Icons.add, + icon: CalendarIcon, keywords: ['inline', 'date'], value: 'Date', onSelect: (editor) => { diff --git a/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx index e618cfc8c2..b937959ca2 100644 --- a/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/table-dropdown-menu.tsx @@ -26,8 +26,6 @@ import { Trash, } from 'lucide-react'; -import { iconVariants } from '@/components/icons'; - import { DropdownMenu, DropdownMenuContent, @@ -64,7 +62,7 @@ export function TableDropdownMenu(props: DropdownMenuProps) { > - +
Table @@ -75,7 +73,7 @@ export function TableDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + Insert table - + Delete table @@ -94,9 +92,7 @@ export function TableDropdownMenu(props: DropdownMenuProps) { - + Column @@ -108,7 +104,7 @@ export function TableDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + Insert column after - + Delete column @@ -127,9 +123,7 @@ export function TableDropdownMenu(props: DropdownMenuProps) { - + Row @@ -141,7 +135,7 @@ export function TableDropdownMenu(props: DropdownMenuProps) { focusEditor(editor); }} > - + Insert row after - + Delete row diff --git a/apps/www/src/registry/default/plate-ui/table-element.tsx b/apps/www/src/registry/default/plate-ui/table-element.tsx index 4abab9121a..11b1552e9b 100644 --- a/apps/www/src/registry/default/plate-ui/table-element.tsx +++ b/apps/www/src/registry/default/plate-ui/table-element.tsx @@ -27,8 +27,6 @@ import { import { type LucideProps, Combine, Delete, Ungroup } from 'lucide-react'; import { useReadOnly, useSelected } from 'slate-react'; -import { iconVariants } from '@/components/icons'; - import { Button } from './button'; import { DropdownMenu, @@ -67,28 +65,28 @@ export const TableBordersDropdownMenuContent = withRef< checked={hasBottomBorder} onCheckedChange={getOnSelectTableBorder('bottom')} > - +
Bottom Border
- +
Top Border
 - +
Left Border
 - +
Right Border
 @@ -98,14 +96,14 @@ export const TableBordersDropdownMenuContent = withRef< checked={hasNoBorders} onCheckedChange={getOnSelectTableBorder('none')} > - +
No Border
- +
Outside Borders
 diff --git a/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx index 1532695b56..b9d6417bc8 100644 --- a/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/turn-into-dropdown-menu.tsx @@ -14,8 +14,15 @@ import { } from '@udecode/plate-common/react'; import { HEADING_KEYS } from '@udecode/plate-heading'; import { ListStyleType, toggleIndentList } from '@udecode/plate-indent-list'; - -import { Icons } from '@/components/icons'; +import { + Heading1Icon, + Heading2Icon, + Heading3Icon, + ListIcon, + ListOrderedIcon, + PilcrowIcon, + QuoteIcon, +} from 'lucide-react'; import { DropdownMenu, @@ -31,43 +38,43 @@ import { ToolbarButton } from './toolbar'; const items = [ { description: 'Paragraph', - icon: Icons.paragraph, + icon: PilcrowIcon, label: 'Paragraph', value: ParagraphPlugin.key, }, { description: 'Heading 1', - icon: Icons.h1, + icon: Heading1Icon, label: 'Heading 1', value: HEADING_KEYS.h1, }, { description: 'Heading 2', - icon: Icons.h2, + icon: Heading2Icon, label: 'Heading 2', value: HEADING_KEYS.h2, }, { description: 'Heading 3', - icon: Icons.h3, + icon: Heading3Icon, label: 'Heading 3', value: HEADING_KEYS.h3, }, { description: 'Quote (⌘+⇧+.)', - icon: Icons.blockquote, + icon: QuoteIcon, label: 'Quote', value: BlockquotePlugin.key, }, { description: 'Bulleted list', - icon: Icons.ul, + icon: ListIcon, label: 'Bulleted list', value: ListStyleType.Disc, }, { description: 'Numbered list', - icon: Icons.ol, + icon: ListOrderedIcon, label: 'Numbered list', value: ListStyleType.Decimal, },