eslint

templates/plate-playground-template/.eslintrc.js

@@ -14,8 +14,14 @@ module.exports = {
     '@next/next/no-html-link-for-pages': 'off',
     'prettier/prettier': ['warn', { ...prettierConfig }],
     'react/jsx-key': 'off',
+    'react/display-name': 'off',
     'tailwindcss/classnames-order': 'warn',
-    'tailwindcss/no-custom-classname': 'error',
+    'tailwindcss/no-custom-classname': [
+      'error',
+      {
+        whitelist: ['ignore-click-outside/toolbar'],
+      },
+    ],
     'unused-imports/no-unused-imports': 'warn',
     'unused-imports/no-unused-vars': [
       'warn',

templates/plate-playground-template/src/components/plate-ui/block-selection.tsx

@@ -1,5 +1,7 @@
 import { useBlockSelected } from '@udecode/plate-selection/react';
-import { type VariantProps, cva } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+import type { VariantProps } from 'class-variance-authority';
 
 const blockSelectionVariants = cva(
   'pointer-events-none absolute inset-0 z-[1] bg-brand/[.13] transition-opacity',

templates/plate-playground-template/src/components/plate-ui/blockquote-element.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-
 import { cn, withRef } from '@udecode/cn';
 
 import { PlateElement } from './plate-element';

templates/plate-playground-template/src/components/plate-ui/calendar.tsx

@@ -1,10 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { DayPicker } from 'react-day-picker';
-
 import { cn } from '@udecode/cn';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
 
 import { buttonVariants } from './button';
 

templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx

@@ -1,9 +1,6 @@
 'use client';
 
-/* eslint-disable unicorn/prefer-export-from */
-
 import React, { useState } from 'react';
-
 import { cn } from '@udecode/cn';
 import {
   useCodeBlockCombobox,

templates/plate-playground-template/src/components/plate-ui/code-block-element.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-
 import { cn, withRef } from '@udecode/cn';
 import { useCodeBlockElementState } from '@udecode/plate-code-block/react';
 

templates/plate-playground-template/src/components/plate-ui/code-line-element.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-
 import { withRef } from '@udecode/cn';
 
 import { PlateElement } from './plate-element';

templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx

@@ -1,15 +1,15 @@
 'use client';
 
 import React from 'react';
-
-import type { TCommentText } from '@udecode/plate-comments';
-
 import { cn } from '@udecode/cn';
 import {
   useCommentLeaf,
   useCommentLeafState,
 } from '@udecode/plate-comments/react';
-import { type PlateLeafProps, PlateLeaf } from '@udecode/plate-common/react';
+import { PlateLeaf } from '@udecode/plate-common/react';
+
+import type { TCommentText } from '@udecode/plate-comments';
+import type { PlateLeafProps } from '@udecode/plate-common/react';
 
 export function CommentLeaf({
   className,

templates/plate-playground-template/src/components/plate-ui/draggable.tsx

@@ -2,20 +2,14 @@
 'use client';
 
 import React from 'react';
-
-import type { TEditor } from '@udecode/plate-common';
-import type { DropTargetMonitor } from 'react-dnd';
-
 import { cn, withRef } from '@udecode/cn';
 import {
-  type PlateElementProps,
   MemoizedChildren,
   useEditorPlugin,
   useEditorRef,
   withHOC,
 } from '@udecode/plate-common/react';
 import {
-  type DragItemNode,
   DraggableProvider,
   useDraggable,
   useDraggableGutter,
@@ -34,6 +28,11 @@ import {
   TooltipTrigger,
 } from './tooltip';
 
+import type { DropTargetMonitor } from 'react-dnd';
+import type { TEditor } from '@udecode/plate-common';
+import type { PlateElementProps } from '@udecode/plate-common/react';
+import type { DragItemNode } from '@udecode/plate-dnd';
+
 export interface DraggableProps extends PlateElementProps {
   /**
    * Intercepts the drop handling. If `false` is returned, the default drop

templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useCallback, useState } from 'react';
-
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import {
   cn,

templates/plate-playground-template/src/components/plate-ui/editor.tsx

@@ -61,7 +61,11 @@ const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
     ref
   ) => {
     return (
-      <div id="scroll_container" className="ignore-click-outside/toolbar relative w-full" ref={ref}>
+      <div
+        id="scroll_container"
+        className="ignore-click-outside/toolbar relative w-full"
+        ref={ref}
+      >
         <PlateContent
           aria-disabled={disabled}
           className={cn(

templates/plate-playground-template/src/components/plate-ui/emoji-dropdown-menu.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
-
-import {
-  type EmojiDropdownMenuOptions,
-  useEmojiDropdownMenuState,
-} from '@udecode/plate-emoji/react';
+import { useEmojiDropdownMenuState } from '@udecode/plate-emoji/react';
 
 import { Icons } from '@/components/icons';
 
@@ -12,6 +8,8 @@ import { EmojiPicker } from './emoji-picker';
 import { EmojiToolbarDropdown } from './emoji-toolbar-dropdown';
 import { ToolbarButton } from './toolbar';
 
+import type { EmojiDropdownMenuOptions } from '@udecode/plate-emoji/react';
+
 type EmojiDropdownMenuProps = {
   options?: EmojiDropdownMenuOptions;
 } & React.ComponentPropsWithoutRef<typeof ToolbarButton>;

templates/plate-playground-template/src/components/plate-ui/emoji-icons.tsx

@@ -1,7 +1,3 @@
-import type React from 'react';
-
-import type { EmojiCategoryList } from '@udecode/plate-emoji';
-
 import {
   AppleIcon,
   ClockIcon,
@@ -16,6 +12,9 @@ import {
   XIcon,
 } from 'lucide-react';
 
+import type React from 'react';
+import type { EmojiCategoryList } from '@udecode/plate-emoji';
+
 export const emojiCategoryIcons: Record<
   EmojiCategoryList,
   {

templates/plate-playground-template/src/components/plate-ui/emoji-input-element.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo, useState } from 'react';
-
 import { withRef } from '@udecode/cn';
 import { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';
 

templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx

@@ -1,10 +1,10 @@
 import { memo, useCallback } from 'react';
+import { cn } from '@udecode/cn';
+import { EmojiSettings } from '@udecode/plate-emoji';
 
+import type { Emoji, GridRow } from '@udecode/plate-emoji';
 import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';
 
-import { cn } from '@udecode/cn';
-import { type Emoji, type GridRow, EmojiSettings } from '@udecode/plate-emoji';
-
 export type EmojiPickerContentProps = Pick<
   UseEmojiPickerType,
   | 'emojiLibrary'

templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx

@@ -1,11 +1,4 @@
 import { useMemo } from 'react';
-
-import type { EmojiCategoryList } from '@udecode/plate-emoji';
-import type {
-  IEmojiFloatingLibrary,
-  UseEmojiPickerType,
-} from '@udecode/plate-emoji/react';
-
 import { cn } from '@udecode/cn';
 
 import { Button } from './button';
@@ -16,6 +9,12 @@ import {
   TooltipTrigger,
 } from './tooltip';
 
+import type { EmojiCategoryList } from '@udecode/plate-emoji';
+import type {
+  IEmojiFloatingLibrary,
+  UseEmojiPickerType,
+} from '@udecode/plate-emoji/react';
+
 export type EmojiPickerNavigationProps = {
   onClick: (id: EmojiCategoryList) => void;
 } & Pick<

templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-and-clear.tsx

@@ -1,10 +1,10 @@
-import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';
-
 import { cn } from '@udecode/cn';
 
 import { Button } from './button';
 import { emojiSearchIcons } from './emoji-icons';
 
+import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';
+
 export type EmojiPickerSearchAndClearProps = Pick<
   UseEmojiPickerType,
   'clearSearch' | 'i18n' | 'searchValue'

templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-bar.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-
 import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';
 
 export type EmojiPickerSearchBarProps = {

templates/plate-playground-template/src/components/plate-ui/emoji-picker.tsx

@@ -1,7 +1,4 @@
 import React from 'react';
-
-import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';
-
 import { cn } from '@udecode/cn';
 import { EmojiSettings } from '@udecode/plate-emoji';
 
@@ -11,6 +8,8 @@ import { EmojiPickerPreview } from './emoji-picker-preview';
 import { EmojiPickerSearchAndClear } from './emoji-picker-search-and-clear';
 import { EmojiPickerSearchBar } from './emoji-picker-search-bar';
 
+import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';
+
 export function EmojiPicker({
   clearSearch,
   emoji,

templates/plate-playground-template/src/components/plate-ui/emoji-toolbar-dropdown.tsx

@@ -1,7 +1,8 @@
-import React, { type ReactNode } from 'react';
-
+import React from 'react';
 import * as Popover from '@radix-ui/react-popover';
 
+import type { ReactNode } from 'react';
+
 type EmojiToolbarDropdownProps = {
   children: ReactNode;
   control: ReactNode;

templates/plate-playground-template/src/components/plate-ui/excalidraw-element.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { withRef } from '@udecode/cn';
 import { useExcalidrawElement } from '@udecode/plate-excalidraw/react';
 

templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import React from 'react';
-
 import { cn, withRef } from '@udecode/cn';
 import {
   useComposedRef,
@@ -10,7 +9,6 @@ import {
   useEventEditorSelectors,
 } from '@udecode/plate-common/react';
 import {
-  type FloatingToolbarState,
   flip,
   offset,
   useFloatingToolbar,
@@ -20,6 +18,8 @@ import { LinkPlugin } from '@udecode/plate-link/react';
 
 import { Toolbar } from './toolbar';
 
+import type { FloatingToolbarState } from '@udecode/plate-floating';
+
 export const FloatingToolbar = withRef<
   typeof Toolbar,
   {

templates/plate-playground-template/src/components/plate-ui/heading-element.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { withRef, withVariants } from '@udecode/cn';
 import { cva } from 'class-variance-authority';
 

templates/plate-playground-template/src/components/plate-ui/highlight-leaf.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { cn, withRef } from '@udecode/cn';
 import { PlateLeaf } from '@udecode/plate-common/react';
 

templates/plate-playground-template/src/components/plate-ui/hr-element.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { cn, withRef } from '@udecode/cn';
 import { useFocused, useSelected } from 'slate-react';
 

templates/plate-playground-template/src/components/plate-ui/image-element.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { cn, withRef } from '@udecode/cn';
 import { withHOC } from '@udecode/plate-common/react';
 import { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react';
@@ -9,9 +8,9 @@ import { Caption, CaptionTextarea } from './caption';
 import { MediaPopover } from './media-popover';
 import { PlateElement } from './plate-element';
 import {
+  mediaResizeHandleVariants,
   Resizable,
   ResizeHandle,
-  mediaResizeHandleVariants,
 } from './resizable';
 
 export const ImageElement = withHOC(

templates/plate-playground-template/src/components/plate-ui/link-element.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-
-import type { TLinkElement } from '@udecode/plate-link';
-
 import { cn, withRef } from '@udecode/cn';
 import { useElement } from '@udecode/plate-common/react';
 import { useLink } from '@udecode/plate-link/react';
 
 import { PlateElement } from './plate-element';
 
+import type { TLinkElement } from '@udecode/plate-link';
+
 export const LinkElement = withRef<typeof PlateElement>(
   ({ children, className, ...props }, ref) => {
     const element = useElement<TLinkElement>();

templates/plate-playground-template/src/components/plate-ui/list-element.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { withRef, withVariants } from '@udecode/cn';
 import { cva } from 'class-variance-authority';
 

templates/plate-playground-template/src/components/plate-ui/media-embed-element.tsx

@@ -1,20 +1,19 @@
 import React from 'react';
-import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import { Tweet } from 'react-tweet';
-
 import { cn, withRef } from '@udecode/cn';
 import { withHOC } from '@udecode/plate-common/react';
 import { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media';
 import { MediaEmbedPlugin, useMediaState } from '@udecode/plate-media/react';
 import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import { Tweet } from 'react-tweet';
 
 import { Caption, CaptionTextarea } from './caption';
 import { MediaPopover } from './media-popover';
 import { PlateElement } from './plate-element';
 import {
+  mediaResizeHandleVariants,
   Resizable,
   ResizeHandle,
-  mediaResizeHandleVariants,
 } from './resizable';
 
 export const MediaEmbedElement = withHOC(