Update editors imports

apps/web/.eslintrc.json

@@ -17,7 +17,8 @@
     "@typescript-eslint/ban-ts-comment": "off",
     "no-console": "off",
     "react/no-array-index-key": "off",
-    "react-hooks/exhaustive-deps": "off"
+    "react-hooks/exhaustive-deps": "off",
+    "@next/next/no-img-element": "off"
   },
   "overrides": [
     {

apps/web/src/components/ui/report/DynamicReportEditor.tsx

@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic';
+import { ReportEditorSkeleton } from './ReportEditorSkeleton';
+import { ReportEditor } from './ReportEditor';
+
+// export const DynamicReportEditor = dynamic(
+//   () => import('@/components/ui/report/ReportEditor').then((mod) => mod.ReportEditor),
+//   {
+//     ssr: false,
+//     loading: () => <ReportEditorSkeleton />
+//   }
+// );
+
+const DynamicReportEditor = ReportEditor;
+
+export default DynamicReportEditor;

apps/web/src/components/ui/report/DynamticEditor.tsx

@@ -1,12 +0,0 @@
-import dynamic from 'next/dynamic';
-import { ReportEditorSkeleton } from './ReportEditorSkeleton';
-
-export const DynamicReportEditor = dynamic(
-  () => import('@/components/ui/report/ReportEditor').then((mod) => mod.ReportEditor),
-  {
-    ssr: false,
-    loading: () => <ReportEditorSkeleton />
-  }
-);
-
-export default DynamicReportEditor;

apps/web/src/components/ui/report/ThemeWrapper/useThemesConfig.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { THEMES, FONT_BASE_THEME, type Theme } from './themes';
+import { THEMES, type Theme } from './themes';
 
 const useThemesConfigStore = create<{
   activeTheme: Theme;
@@ -13,5 +13,5 @@ export function useThemesConfig() {
   const activeTheme = useThemesConfigStore((state) => state.activeTheme);
   const setActiveTheme = useThemesConfigStore((state) => state.setActiveTheme);
 
-  return { activeTheme, setActiveTheme, allThemes: THEMES, FONT_BASE_THEME };
+  return { activeTheme, setActiveTheme, allThemes: THEMES };
 }

apps/web/src/components/ui/report/elements/BlockListStatic.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 
-import type { RenderStaticNodeWrapper, SlateRenderElementProps, TListElement } from 'platejs';
+import type {
+  RenderStaticNodeWrapper,
+  RenderStaticNodeWrapperProps,
+  SlateRenderElementProps,
+  TListElement
+} from 'platejs';
 
 import { isOrderedList } from '@platejs/list';
 import { Check } from '@/components/ui/icons';
@@ -23,7 +28,7 @@ const config: Record<
 export const BlockListStatic: RenderStaticNodeWrapper = (props) => {
   if (!props.element.listStyleType) return;
 
-  return (props) => <List {...props} />;
+  return List;
 };
 
 function List(props: SlateRenderElementProps) {

apps/web/src/components/ui/report/elements/CalloutNodeStatic.tsx

@@ -1,17 +1,21 @@
 import * as React from 'react';
 
-import type { SlateElementProps } from 'platejs';
+import type { SlateElementProps, TCalloutElement } from 'platejs';
 
 import { SlateElement } from 'platejs';
 
 import { cn } from '@/lib/utils';
 
-export function CalloutElementStatic({ children, className, ...props }: SlateElementProps) {
+export function CalloutElementStatic({
+  children,
+  className,
+  ...props
+}: SlateElementProps<TCalloutElement>) {
   return (
     <SlateElement
       className={cn('bg-muted my-1 flex rounded-sm p-4 pl-3', className)}
       style={{
-        backgroundColor: props.element.backgroundColor as any
+        backgroundColor: props.element.backgroundColor as string
       }}
       {...props}>
       <div className="flex w-full gap-2 rounded-md">
@@ -21,7 +25,7 @@ export function CalloutElementStatic({ children, className, ...props }: SlateEle
             fontFamily:
               '"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols'
           }}>
-          <span data-plate-prevent-deserialization>{(props.element.icon as any) || '💡'}</span>
+          <span data-plate-prevent-deserialization>{props.element.icon || '💡'}</span>
         </div>
         <div className="w-full">{children}</div>
       </div>

apps/web/src/components/ui/report/elements/MediaImageNodeStatic.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
 
-import type {
+import type { SlateElementProps, TCaptionProps, TImageElement, TResizableProps } from 'platejs';
-  SlateElementProps,
-  TCaptionProps,
-  TImageElement,
-  TResizableProps,
-} from 'platejs';
 
 import { NodeApi, SlateElement } from 'platejs';
 
@@ -19,16 +14,10 @@ export function ImageElementStatic(
   return (
     <SlateElement {...props} className="py-2.5">
       <figure className="group relative m-0 inline-block" style={{ width }}>
-        <div
+        <div className="relative max-w-full min-w-[92px]" style={{ textAlign: align }}>
-          className="relative max-w-full min-w-[92px]"
-          style={{ textAlign: align }}
-        >
           <img
-            className={cn(
+            className={cn('w-full max-w-full cursor-default object-cover px-0', 'rounded-sm')}
-              'w-full max-w-full cursor-default object-cover px-0',
+            alt={(props.attributes as unknown as { alt: string }).alt}
-              'rounded-sm'
-            )}
-            alt={(props.attributes as any).alt}
             src={url}
           />
           {caption && (

apps/web/src/components/ui/report/plugins/suggestion-kit.tsx

@@ -8,7 +8,7 @@ import {
   isSlateElement,
   isSlateString
 } from 'platejs';
-import { toTPlatePlugin } from 'platejs/react';
+import { toTPlatePlugin, type RenderNodeWrapper } from 'platejs/react';
 
 import { BlockSuggestion } from '../elements/BlockSuggestion';
 import { SuggestionLeaf, SuggestionLineBreak } from '../elements/SuggestionNode';
@@ -77,7 +77,8 @@ export const suggestionPlugin = toTPlatePlugin<SuggestionConfig>(
     }
   },
   render: {
-    belowNodes: SuggestionLineBreak as any,
+    // @ts-expect-error - TODO: fix this
+    belowNodes: SuggestionLineBreak,
     node: SuggestionLeaf,
     belowRootNodes: ({ api, element }) => {
       if (!api.suggestion!.isBlockSuggestion(element)) {

apps/web/src/components/ui/toolbar/Toolbar.tsx

@@ -13,7 +13,7 @@ import {
   DropdownMenuSeparator
 } from '@/components/ui/dropdown-menu';
 import { Separator } from '@/components/ui/separator';
-import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 
 export const Toolbar = React.forwardRef<
@@ -210,6 +210,8 @@ export const ToolbarSplitButtonSecondary = React.forwardRef<
   );
 });
 
+ToolbarSplitButtonSecondary.displayName = 'ToolbarSplitButtonSecondary';
+
 export const ToolbarToggleItem = React.forwardRef<
   React.ElementRef<typeof ToolbarPrimitive.ToggleItem>,
   React.ComponentProps<typeof ToolbarPrimitive.ToggleItem> &
@@ -223,6 +225,8 @@ export const ToolbarToggleItem = React.forwardRef<
   );
 });
 
+ToolbarToggleItem.displayName = 'ToolbarToggleItem';
+
 export const ToolbarGroup = ({ children, className }: React.ComponentProps<'div'>) => {
   return (
     <div className={cn('group/toolbar-group', 'relative hidden has-[button]:flex', className)}>
@@ -363,3 +367,5 @@ export const ToolbarButton = React.forwardRef<
     </WithTooltip>
   );
 });
+
+ToolbarButton.displayName = 'ToolbarButton';