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,
},