Fix imports

This commit is contained in:
Nate Kelley 2025-08-01 22:45:15 -06:00
parent 9a4561e953
commit c1e33fb1d2
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
19 changed files with 142 additions and 136 deletions

View File

@ -10,6 +10,7 @@ import {
} from '../icons/NucleoIconOutlined';
import { cn } from '@/lib/utils';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
@ -30,6 +31,7 @@ function DropdownMenuTrigger({
function DropdownMenuContent({
className,
sideOffset = 4,
style,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
return (
@ -41,6 +43,7 @@ function DropdownMenuContent({
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
className
)}
style={{ ...THEME_RESET_STYLE, ...style }}
{...props}
/>
</DropdownMenuPrimitive.Portal>

View File

@ -3,7 +3,7 @@
import { cn } from '@/lib/utils';
import { ThemesStyle } from './ThemeStyles';
import { DEFAULT_THEME_STYLE } from './themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
interface ThemeWrapperProps extends React.ComponentProps<'div'> {
defaultTheme?: string;
@ -12,9 +12,7 @@ interface ThemeWrapperProps extends React.ComponentProps<'div'> {
export function ThemeWrapper({ children, className, defaultTheme }: ThemeWrapperProps) {
return (
<>
<div
style={DEFAULT_THEME_STYLE}
className={cn('themes-wrapper w-full antialiased', className)}>
<div style={THEME_RESET_STYLE} className={cn('themes-wrapper w-full antialiased', className)}>
{children}
</div>

View File

@ -1,106 +1,4 @@
export const FONT_BASE_THEME = {
'--font-heading': 'ui-sans-serif, -apple-system, BlinkMacSystemFont',
'--font-sans': 'ui-sans-serif, -apple-system, BlinkMacSystemFont',
'--font-mono':
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
'--spacing': '0.25rem',
'--breakpoint-xl': '80rem',
'--breakpoint-2xl': '96rem',
'--container-sm': '24rem',
'--container-lg': '32rem',
'--container-2xl': '42rem',
'--container-3xl': '48rem',
'--text-xs': '0.75rem',
'--text-xs--line-height': 'calc(1 / 0.75)',
'--text-sm': '0.875rem',
'--text-sm--line-height': 'calc(1.25 / 0.875)',
'--text-base': '1rem',
'--text-base--line-height': 'calc(1.5 / 1)',
'--text-lg': '1.125rem',
'--text-lg--line-height': 'calc(1.75 / 1.125)',
'--text-xl': '1.25rem',
'--text-xl--line-height': 'calc(1.75 / 1.25)',
'--text-2xl': '1.5rem',
'--text-2xl--line-height': 'calc(2 / 1.5)',
'--text-3xl': '1.875rem',
'--text-3xl--line-height': 'calc(2.25 / 1.875)',
'--text-4xl': '2.25rem',
'--text-4xl--line-height': 'calc(2.5 / 2.25)',
'--text-5xl': '3rem',
'--text-5xl--line-height': '1',
'--font-weight-light': '300',
'--font-weight-normal': '400',
'--font-weight-medium': '500',
'--font-weight-semibold': '600',
'--font-weight-bold': '700',
'--font-weight-extrabold': '800',
'--tracking-tighter': '-0.05em',
'--tracking-tight': '-0.025em',
'--tracking-widest': '0.1em',
'--leading-tight': '1.25',
'--leading-normal': '1.5',
'--leading-relaxed': '1.625',
'--leading-loose': '2'
};
export const DEFAULT_COLOR_THEME = {
id: 'default-shadcn',
dark: {
accent: '240 3.7% 15.9%',
'accent-foreground': '0 0% 98%',
background: '240 10% 3.9%',
border: '240 3.7% 15.9%',
brand: '213.3 93.9% 67.8%',
card: '240 10% 3.9%',
'card-foreground': '0 0% 98%',
destructive: '0 62.8% 30.6%',
'destructive-foreground': '0 0% 98%',
foreground: '0 0% 98%',
highlight: '48 96% 53%',
input: '240 3.7% 15.9%',
muted: '240 3.7% 15.9%',
'muted-foreground': '240 5% 64.9%',
popover: '240 10% 3.9%',
'popover-foreground': '0 0% 98%',
primary: '0 0% 98%',
'primary-foreground': '240 5.9% 10%',
ring: '240 4.9% 83.9%',
secondary: '240 3.7% 15.9%',
'secondary-foreground': '0 0% 98%'
},
light: {
accent: '240 4.8% 95.9%',
'accent-foreground': '240 5.9% 10%',
background: '0 0% 100%',
border: '240 5.9% 90%',
brand: '217.2 91.2% 59.8%',
card: '0 0% 100%',
'card-foreground': '240 10% 3.9%',
destructive: '0 84.2% 60.2%',
'destructive-foreground': '0 0% 98%',
foreground: '240 10% 3.9%',
highlight: '47.9 95.8% 53.1%',
input: '240 5.9% 90%',
muted: '240 4.8% 95.9%',
'muted-foreground': '240 3.8% 46.1%',
popover: '0 0% 100%',
'popover-foreground': '240 10% 3.9%',
primary: '240 5.9% 10%',
'primary-foreground': '0 0% 98%',
ring: '240 10% 3.9%',
secondary: '240 4.8% 95.9%',
'secondary-foreground': '240 5.9% 10%'
},
name: 'Default'
} as const;
export const DEFAULT_THEME_STYLE = {
...DEFAULT_COLOR_THEME,
...FONT_BASE_THEME,
fontFamily: 'var(--font-sans), "Inter", sans-serif',
fontSynthesisWeight: 'normal' as 'none',
fontVariationSettings: 'normal'
} as React.CSSProperties;
import { THEME_RESET_COLORS } from '@/styles/theme-reset';
const _THEMES = {
ayu: {
@ -253,7 +151,7 @@ const _THEMES = {
},
name: 'Default Palette'
},
'default-shadcn': DEFAULT_COLOR_THEME,
'default-shadcn': THEME_RESET_COLORS,
dune: {
id: 'dune',
dark: {
@ -608,7 +506,7 @@ export function themeColorsToCssVariables(colors: Record<string, string>): Recor
// `${cssVars["--primary"]} / ${100 - key * 20}%`
// }
return { ...cssVars, ...FONT_BASE_THEME };
return { ...cssVars };
}
export function themeColorNameToCssVariable(name: string) {

View File

@ -23,6 +23,7 @@ import {
} from '@/components/ui/dropdown-menu';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
const items = [
{
@ -62,7 +63,7 @@ export function AlignToolbarButton(props: DropdownMenuProps) {
</ToolbarButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-0" align="start">
<DropdownMenuContent className="min-w-0" align="start" style={THEME_RESET_STYLE}>
<DropdownMenuRadioGroup
value={value}
onValueChange={(value) => {

View File

@ -22,7 +22,7 @@ import {
ContextMenuTrigger
} from '@/components/ui/context-menu';
import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
type Value = 'askAI' | null;
@ -92,7 +92,7 @@ export function BlockContextMenu({ children }: { children: React.ReactNode }) {
</ContextMenuTrigger>
<ContextMenuContent
className="w-64"
style={DEFAULT_THEME_STYLE}
style={THEME_RESET_STYLE}
onCloseAutoFocus={(e) => {
e.preventDefault();
editor.getApi(BlockSelectionPlugin).blockSelection.focus();

View File

@ -32,7 +32,7 @@ import { type TDiscussion, discussionPlugin } from '../plugins/discussion-kit';
import { EditorContainer } from '../EditorContainer';
import { Editor } from '../Editor';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
export interface TComment {
id: string;
@ -335,7 +335,7 @@ function CommentMoreDropdown(props: {
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-48"
style={DEFAULT_THEME_STYLE}
style={THEME_RESET_STYLE}
onCloseAutoFocus={(e) => {
if (selectedEditCommentRef.current) {
onCloseAutoFocus?.();

View File

@ -19,7 +19,7 @@ import {
import { EditorStatic } from './EditorStatic';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { useBusterNotifications } from '@/context/BusterNotifications';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
const editor = useEditorRef();
@ -194,7 +194,7 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
</ToolbarButton>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
<DropdownMenuContent align="start" style={THEME_RESET_STYLE}>
<DropdownMenuGroup>
<DropdownMenuItem onSelect={exportToHtml}>Export as HTML</DropdownMenuItem>
<DropdownMenuItem onSelect={exportToPdf}>Export as PDF</DropdownMenuItem>

View File

@ -26,7 +26,7 @@ import {
import { cn } from '@/lib/utils';
import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
export function FontColorToolbarButton({
children,
@ -106,7 +106,7 @@ export function FontColorToolbarButton({
</ToolbarButton>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
<DropdownMenuContent align="start" style={THEME_RESET_STYLE}>
<ColorPicker
color={selectedColor || color}
clearColor={clearColor}

View File

@ -19,7 +19,7 @@ import {
} from '@/components/ui/dropdown-menu';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
type ImportType = 'html' | 'markdown';
@ -78,7 +78,7 @@ export function ImportToolbarButton(props: DropdownMenuProps) {
</ToolbarButton>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
<DropdownMenuContent align="start" style={THEME_RESET_STYLE}>
<DropdownMenuGroup>
<DropdownMenuItem
onSelect={() => {

View File

@ -27,7 +27,7 @@ import { cva } from 'class-variance-authority';
import { useComposedRef, useEditorRef } from 'platejs/react';
import { cn } from '@/lib/utils';
import { DEFAULT_THEME_STYLE, FONT_BASE_THEME } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
type FilterFn = (
item: { value: string; group?: string; keywords?: string[]; label?: string },
@ -238,7 +238,7 @@ const InlineComboboxContent: typeof ComboboxPopover = ({ className, style, ...pr
className
)}
{...props}
style={{ ...DEFAULT_THEME_STYLE, ...style }}
style={{ ...THEME_RESET_STYLE, ...style }}
/>
</Portal>
);

View File

@ -39,6 +39,7 @@ import {
import { insertBlock, insertInlineElement } from './transforms';
import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
type Group = {
group: string;
@ -223,6 +224,7 @@ export function InsertToolbarButton(props: DropdownMenuProps) {
<DropdownMenuContent
className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto"
style={THEME_RESET_STYLE}
align="start">
{groups.map(({ group, items: nestedItems }) => (
<ToolbarMenuGroup key={group} label={group}>

View File

@ -21,7 +21,7 @@ import {
ToolbarSplitButtonPrimary,
ToolbarSplitButtonSecondary
} from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
export function BulletedListToolbarButton() {
const editor = useEditorRef();
@ -52,7 +52,7 @@ export function BulletedListToolbarButton() {
<ToolbarSplitButtonSecondary />
</DropdownMenuTrigger>
<DropdownMenuContent align="start" alignOffset={-32} style={DEFAULT_THEME_STYLE}>
<DropdownMenuContent align="start" alignOffset={-32} style={THEME_RESET_STYLE}>
<DropdownMenuGroup>
<DropdownMenuItem
onClick={() =>

View File

@ -35,7 +35,7 @@ import {
ToolbarSplitButtonPrimary,
ToolbarSplitButtonSecondary
} from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
const MEDIA_CONFIG: Record<
string,
@ -130,7 +130,7 @@ export function MediaToolbarButton({
onClick={(e) => e.stopPropagation()}
align="start"
alignOffset={-32}
style={DEFAULT_THEME_STYLE}>
style={THEME_RESET_STYLE}>
<DropdownMenuGroup>
<DropdownMenuItem onSelect={() => openFilePicker()}>
{currentConfig.icon}

View File

@ -16,7 +16,7 @@ import {
} from '@/components/ui/dropdown-menu';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
export function ModeToolbarButton(props: DropdownMenuProps) {
const editor = useEditorRef();
@ -55,7 +55,7 @@ export function ModeToolbarButton(props: DropdownMenuProps) {
</ToolbarButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-[180px]" align="start" style={DEFAULT_THEME_STYLE}>
<DropdownMenuContent className="min-w-[180px]" align="start" style={THEME_RESET_STYLE}>
<DropdownMenuRadioGroup
value={value}
onValueChange={(newValue) => {

View File

@ -17,7 +17,7 @@ import {
} from '@/components/ui/dropdown-menu';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
export function MoreToolbarButton(props: DropdownMenuProps) {
const editor = useEditorRef();
@ -34,7 +34,7 @@ export function MoreToolbarButton(props: DropdownMenuProps) {
<DropdownMenuContent
className="ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto"
align="start"
style={DEFAULT_THEME_STYLE}>
style={THEME_RESET_STYLE}>
<DropdownMenuGroup>
<DropdownMenuItem
onSelect={() => {

View File

@ -100,7 +100,7 @@ import {
ToolbarGroup,
ToolbarMenuGroup
} from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
export const TableElement = withHOC(
TableProvider,
function TableElement({ children, ...props }: PlateElementProps<TTableElement>) {
@ -281,7 +281,7 @@ function TableBordersDropdownMenuContent(
return (
<DropdownMenuContent
className="min-w-[220px]"
style={DEFAULT_THEME_STYLE}
style={THEME_RESET_STYLE}
onCloseAutoFocus={(e) => {
e.preventDefault();
editor.tf.focus();

View File

@ -45,7 +45,7 @@ import {
import { cn } from '@/lib/utils';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
export function TableToolbarButton(props: DropdownMenuProps) {
const tableSelected = useEditorSelector(
@ -68,7 +68,7 @@ export function TableToolbarButton(props: DropdownMenuProps) {
<DropdownMenuContent
className="flex w-[180px] min-w-0 flex-col"
align="start"
style={DEFAULT_THEME_STYLE}>
style={THEME_RESET_STYLE}>
<DropdownMenuGroup>
<DropdownMenuSub>
<DropdownMenuSubTrigger className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50">

View File

@ -35,7 +35,7 @@ import {
import { getBlockType, setBlockType } from './transforms';
import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
import { THEME_RESET_STYLE } from '@/styles/theme-reset';
const turnIntoItems = [
{
@ -146,7 +146,7 @@ export function TurnIntoToolbarButton(props: DropdownMenuProps) {
<DropdownMenuContent
className="ignore-click-outside/toolbar min-w-0"
style={DEFAULT_THEME_STYLE}
style={THEME_RESET_STYLE}
onCloseAutoFocus={(e) => {
e.preventDefault();
editor.tf.focus();

View File

@ -0,0 +1,104 @@
import React from 'react';
export const FONT_BASE_THEME = {
'--font-heading': 'ui-sans-serif, -apple-system, BlinkMacSystemFont',
'--font-sans': 'ui-sans-serif, -apple-system, BlinkMacSystemFont',
'--font-mono':
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
'--spacing': '0.25rem',
'--breakpoint-xl': '80rem',
'--breakpoint-2xl': '96rem',
'--container-sm': '24rem',
'--container-lg': '32rem',
'--container-2xl': '42rem',
'--container-3xl': '48rem',
'--text-xs': '0.75rem',
'--text-xs--line-height': 'calc(1 / 0.75)',
'--text-sm': '0.875rem',
'--text-sm--line-height': 'calc(1.25 / 0.875)',
'--text-base': '1rem',
'--text-base--line-height': 'calc(1.5 / 1)',
'--text-lg': '1.125rem',
'--text-lg--line-height': 'calc(1.75 / 1.125)',
'--text-xl': '1.25rem',
'--text-xl--line-height': 'calc(1.75 / 1.25)',
'--text-2xl': '1.5rem',
'--text-2xl--line-height': 'calc(2 / 1.5)',
'--text-3xl': '1.875rem',
'--text-3xl--line-height': 'calc(2.25 / 1.875)',
'--text-4xl': '2.25rem',
'--text-4xl--line-height': 'calc(2.5 / 2.25)',
'--text-5xl': '3rem',
'--text-5xl--line-height': '1',
'--font-weight-light': '300',
'--font-weight-normal': '400',
'--font-weight-medium': '500',
'--font-weight-semibold': '600',
'--font-weight-bold': '700',
'--font-weight-extrabold': '800',
'--tracking-tighter': '-0.05em',
'--tracking-tight': '-0.025em',
'--tracking-widest': '0.1em',
'--leading-tight': '1.25',
'--leading-normal': '1.5',
'--leading-relaxed': '1.625',
'--leading-loose': '2'
};
export const THEME_RESET_COLORS = {
id: 'default-shadcn',
dark: {
accent: '240 3.7% 15.9%',
'accent-foreground': '0 0% 98%',
background: '240 10% 3.9%',
border: '240 3.7% 15.9%',
brand: '213.3 93.9% 67.8%',
card: '240 10% 3.9%',
'card-foreground': '0 0% 98%',
destructive: '0 62.8% 30.6%',
'destructive-foreground': '0 0% 98%',
foreground: '0 0% 98%',
highlight: '48 96% 53%',
input: '240 3.7% 15.9%',
muted: '240 3.7% 15.9%',
'muted-foreground': '240 5% 64.9%',
popover: '240 10% 3.9%',
'popover-foreground': '0 0% 98%',
primary: '0 0% 98%',
'primary-foreground': '240 5.9% 10%',
ring: '240 4.9% 83.9%',
secondary: '240 3.7% 15.9%',
'secondary-foreground': '0 0% 98%'
},
light: {
accent: '240 4.8% 95.9%',
'accent-foreground': '240 5.9% 10%',
background: '0 0% 100%',
border: '240 5.9% 90%',
brand: '217.2 91.2% 59.8%',
card: '0 0% 100%',
'card-foreground': '240 10% 3.9%',
destructive: '0 84.2% 60.2%',
'destructive-foreground': '0 0% 98%',
foreground: '240 10% 3.9%',
highlight: '47.9 95.8% 53.1%',
input: '240 5.9% 90%',
muted: '240 4.8% 95.9%',
'muted-foreground': '240 3.8% 46.1%',
popover: '0 0% 100%',
'popover-foreground': '240 10% 3.9%',
primary: '240 5.9% 10%',
'primary-foreground': '0 0% 98%',
ring: '240 10% 3.9%',
secondary: '240 4.8% 95.9%',
'secondary-foreground': '240 5.9% 10%'
},
name: 'Default'
} as const;
export const THEME_RESET_STYLE = {
...FONT_BASE_THEME,
fontFamily: 'var(--font-sans), "Inter", sans-serif',
fontSynthesisWeight: 'normal' as 'none',
fontVariationSettings: 'normal'
} as React.CSSProperties;