binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: replace prettier with oxfmt (#8676)

Browse source
This commit is contained in:
sriram veeraghanta 2026-03-02 20:40:50 +05:30 • committed by GitHub
parent 9ee73d57ef
commit 41abaffc6e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1008 changed files with 4046 additions and 4027 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/editor/src/core/components/editors/document/collaborative-editor.tsx
View file

@ -110,7 +110,7 @@ function CollaborativeDocumentEditorInner(props: ICollaborativeDocumentEditorPro
<div
className={cn(
"transition-opacity duration-200",
showContentSkeleton && !isLoading && "opacity-0 pointer-events-none"
showContentSkeleton && !isLoading && "pointer-events-none opacity-0"
)}
>
<PageRenderer

4
packages/editor/src/core/components/editors/document/page-renderer.tsx
View file

@ -61,7 +61,7 @@ export function PageRenderer(props: Props) {
} = props;
return (
<div
className={cn("frame-renderer flex-grow w-full", {
className={cn("frame-renderer w-full flex-grow", {
"wide-layout": displayConfig.wideLayout,
})}
>
@ -82,7 +82,7 @@ export function PageRenderer(props: Props) {
editor={titleEditor}
id={id + "-title"}
tabIndex={tabIndex}
className="no-scrollbar placeholder-placeholder bg-transparent tracking-[-2%] font-bold text-[2rem] leading-[2.375rem] w-full outline-none p-0 border-none resize-none rounded-none"
className="no-scrollbar placeholder-placeholder w-full resize-none rounded-none border-none bg-transparent p-0 text-[2rem] leading-[2.375rem] font-bold tracking-[-2%] outline-none"
/>
</EditorContainer>
</div>

2
packages/editor/src/core/components/editors/editor-container.tsx
View file

@ -168,7 +168,7 @@ export function EditorContainer(props: Props) {
onClick={handleContainerClick}
onMouseLeave={handleContainerMouseLeave}
className={cn(
`editor-container cursor-text relative line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
`editor-container relative cursor-text line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
{
"active-editor": editor?.isFocused && editor?.isEditable,
},

12
packages/editor/src/core/components/links/link-edit-view.tsx
View file

@ -23,11 +23,11 @@ type InputViewProps = {
function InputView({ label, value, placeholder, onChange, autoFocus }: InputViewProps) {
return (
<div className="flex flex-col gap-1">
<label className="inline-block font-semibold text-11 text-placeholder">{label}</label>
<label className="inline-block text-11 font-semibold text-placeholder">{label}</label>
<input
placeholder={placeholder}
onClick={(e) => e.stopPropagation()}
className="w-[280px] outline-none bg-layer-1 text-primary text-13 border border-strong rounded-md p-2"
className="w-[280px] rounded-md border border-strong bg-layer-1 p-2 text-13 text-primary outline-none"
value={value}
onChange={(e) => onChange(e.target.value)}
autoFocus={autoFocus}
@ -138,7 +138,7 @@ export function LinkEditView({ viewProps }: LinkEditViewProps) {
return (
<div
onKeyDown={handleKeyDown}
className="shadow-md rounded-sm p-2 flex flex-col gap-3 bg-layer-1 border-subtle border-2 animate-in fade-in translate-y-1"
className="shadow-md animate-in fade-in flex translate-y-1 flex-col gap-3 rounded-sm border-2 border-subtle bg-layer-1 p-2"
style={{
transition: "all 0.1s cubic-bezier(.55, .085, .68, .53)",
}}
@ -146,10 +146,10 @@ export function LinkEditView({ viewProps }: LinkEditViewProps) {
>
<InputView label="URL" placeholder="Enter or paste URL" value={localUrl} onChange={setLocalUrl} autoFocus />
<InputView label="Text" placeholder="Enter Text to display" value={localText} onChange={handleTextChange} />
<div className="mb-1 bg-strong h-[1px] w-full gap-2" />
<div className="flex text-13 text-secondary gap-2 items-center">
<div className="bg-strong mb-1 h-[1px] w-full gap-2" />
<div className="flex items-center gap-2 text-13 text-secondary">
<Link2Off size={14} className="inline-block" />
<button onClick={removeLink} className="cursor-pointer hover:text-placeholder transition-colors">
<button onClick={removeLink} className="cursor-pointer transition-colors hover:text-placeholder">
Remove Link
</button>
</div>

10
packages/editor/src/core/components/links/link-preview.tsx
View file

@ -30,27 +30,27 @@ export function LinkPreview({
return (
<div
className="absolute left-0 top-0 max-w-max animate-in fade-in translate-y-1"
className="animate-in fade-in absolute top-0 left-0 max-w-max translate-y-1"
style={{
transition: "all 0.2s cubic-bezier(.55, .085, .68, .53)",
}}
>
<div className="shadow-md items-center rounded-sm p-2 flex gap-3 bg-layer-1 border-subtle border-2 text-tertiary text-11">
<div className="shadow-md flex items-center gap-3 rounded-sm border-2 border-subtle bg-layer-1 p-2 text-11 text-tertiary">
<GlobeIcon width={14} height={14} className="inline-block" />
<p>{url?.length > 40 ? url.slice(0, 40) + "..." : url}</p>
<div className="flex gap-2">
<button onClick={copyLinkToClipboard} className="cursor-pointer hover:text-primary transition-colors">
<button onClick={copyLinkToClipboard} className="cursor-pointer transition-colors hover:text-primary">
<CopyIcon width={14} height={14} className="inline-block" />
</button>
{editor.isEditable && (
<>
<button
onClick={() => switchView("LinkEditView")}
className="cursor-pointer hover:text-primary transition-colors"
className="cursor-pointer transition-colors hover:text-primary"
>
<EditIcon width={14} height={14} className="inline-block" />
</button>
<button onClick={removeLink} className="cursor-pointer hover:text-primary transition-colors">
<button onClick={removeLink} className="cursor-pointer transition-colors hover:text-primary">
<Link2Off size={14} className="inline-block" />
</button>
</>

4
packages/editor/src/core/components/menus/ai-menu.tsx
View file

@ -88,8 +88,8 @@ export function AIFeaturesMenu(props: Props) {
return (
<div
className={cn("opacity-0 pointer-events-none fixed inset-0 size-full z-10 transition-opacity", {
"opacity-100 pointer-events-auto": isPopupVisible,
className={cn("pointer-events-none fixed inset-0 z-10 size-full opacity-0 transition-opacity", {
"pointer-events-auto opacity-100": isPopupVisible,
})}
>
<div ref={menuRef} className="z-10">

4
packages/editor/src/core/components/menus/block-menu.tsx
View file

@ -223,8 +223,8 @@ export function BlockMenu(props: Props) {
}}
className={cn(
"max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-subtle bg-surface-1 p-1.5 shadow-raised-200",
"transition-all duration-300 transform origin-top-right",
isAnimatedIn ? "opacity-100 scale-100" : "opacity-0 scale-75"
"origin-top-right transform transition-all duration-300",
isAnimatedIn ? "scale-100 opacity-100" : "scale-75 opacity-0"
)}
{...getFloatingProps()}
>

2
packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx
View file

@ -75,7 +75,7 @@ export function TextAlignmentSelector(props: Props) {
item.command();
}}
className={cn(
"size-7 grid place-items-center rounded-sm text-tertiary hover:bg-layer-1 active:bg-layer-1 transition-colors",
"grid size-7 place-items-center rounded-sm text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
{
"bg-layer-1 text-primary": item.isActive(),
}

16
packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
View file

@ -42,7 +42,7 @@ export function BubbleMenuColorSelector(props: Props) {
<>
<span>Color</span>
<span
className={cn("flex-shrink-0 size-6 grid place-items-center rounded-sm border-[0.5px] border-strong", {
className={cn("grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong", {
"bg-surface-1": !activeBackgroundColor,
})}
style={{
@ -64,15 +64,15 @@ export function BubbleMenuColorSelector(props: Props) {
getFloatingProps={getFloatingProps}
getReferenceProps={getReferenceProps}
>
<section className="mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 space-y-2 shadow-raised-200">
<section className="mt-1 space-y-2 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200">
<div className="space-y-1.5">
<p className="text-11 text-tertiary font-semibold">Text colors</p>
<p className="text-11 font-semibold text-tertiary">Text colors</p>
<div className="flex items-center gap-2">
{COLORS_LIST.map((color) => (
<button
key={color.key}
type="button"
className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
style={{
backgroundColor: color.textColor,
}}
@ -81,7 +81,7 @@ export function BubbleMenuColorSelector(props: Props) {
))}
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
onClick={() => TextColorItem(editor).command({ color: undefined })}
>
<Ban className="size-4" />
@ -89,13 +89,13 @@ export function BubbleMenuColorSelector(props: Props) {
</div>
</div>
<div className="space-y-1.5">
<p className="text-11 text-tertiary font-semibold">Background colors</p>
<p className="text-11 font-semibold text-tertiary">Background colors</p>
<div className="flex items-center gap-2">
{COLORS_LIST.map((color) => (
<button
key={color.key}
type="button"
className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
style={{
backgroundColor: color.backgroundColor,
}}
@ -104,7 +104,7 @@ export function BubbleMenuColorSelector(props: Props) {
))}
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
onClick={() => BackgroundColorItem(editor).command({ color: undefined })}
>
<Ban className="size-4" />

16
packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
View file

@ -53,7 +53,7 @@ export function BubbleMenuLinkSelector(props: Props) {
classNames={{
buttonContainer: "h-full",
button: cn(
"h-full flex items-center gap-1 px-3 text-13 font-medium text-tertiary hover:bg-layer-1 active:bg-layer-1 rounded-sm whitespace-nowrap transition-colors",
"flex h-full items-center gap-1 rounded-sm px-3 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
{
"bg-layer-1": context.open,
"text-primary": editor.isActive(CORE_EXTENSIONS.CUSTOM_LINK),
@ -65,14 +65,14 @@ export function BubbleMenuLinkSelector(props: Props) {
menuButton={
<>
Link
<LinkIcon className="shrink-0 size-3" />
<LinkIcon className="size-3 shrink-0" />
</>
}
options={options}
>
<div className="w-60 mt-1 rounded-md bg-surface-1 shadow-raised-200">
<div className="mt-1 w-60 rounded-md bg-surface-1 shadow-raised-200">
<div
className={cn("flex rounded-sm border-[0.5px] border-strong transition-colors", {
className={cn("flex rounded-sm border-[0.5px] border-strong transition-colors", {
"border-danger-strong": error,
})}
>
@ -81,7 +81,7 @@ export function BubbleMenuLinkSelector(props: Props) {
type="url"
placeholder="Enter or paste a link"
onClick={(e) => e.stopPropagation()}
className="flex-1 border-r-[0.5px] border-strong bg-surface-1 py-2 px-1.5 text-11 outline-none placeholder:text-placeholder rounded-sm"
className="flex-1 rounded-sm border-r-[0.5px] border-strong bg-surface-1 px-1.5 py-2 text-11 outline-none placeholder:text-placeholder"
defaultValue={editor.getAttributes("link").href || ""}
onKeyDown={(e) => {
setError(false);
@ -96,7 +96,7 @@ export function BubbleMenuLinkSelector(props: Props) {
{editor.getAttributes("link").href ? (
<button
type="button"
className="grid place-items-center rounded-xs p-1 text-danger-primary hover:bg-danger-subtle-hover transition-all"
className="grid place-items-center rounded-xs p-1 text-danger-primary transition-all hover:bg-danger-subtle-hover"
onClick={(e) => {
unsetLinkEditor(editor);
e.stopPropagation();
@ -108,7 +108,7 @@ export function BubbleMenuLinkSelector(props: Props) {
) : (
<button
type="button"
className="h-full aspect-square grid place-items-center p-1 rounded-xs text-tertiary hover:bg-layer-1 transition-all"
className="grid aspect-square h-full place-items-center rounded-xs p-1 text-tertiary transition-all hover:bg-layer-1"
onClick={(e) => {
e.stopPropagation();
handleLinkSubmit();
@ -119,7 +119,7 @@ export function BubbleMenuLinkSelector(props: Props) {
)}
</div>
{error && (
<p className="text-11 text-danger-primary my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
<p className="animate-in fade-in slide-in-from-top-0 pointer-events-none my-1 px-2 text-11 text-danger-primary">
Please enter a valid URL
</p>
)}

8
packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
View file

@ -65,7 +65,7 @@ export function BubbleMenuNodeSelector(props: Props) {
classNames={{
buttonContainer: "h-full",
button: cn(
"h-full flex items-center gap-1 px-3 text-13 font-medium text-tertiary hover:bg-layer-1 active:bg-layer-1 rounded-sm whitespace-nowrap transition-colors",
"flex h-full items-center gap-1 rounded-sm px-3 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
{
"bg-layer-1": context.open,
}
@ -74,14 +74,14 @@ export function BubbleMenuNodeSelector(props: Props) {
menuButton={
<>
<span>{activeItem?.name}</span>
<ChevronDownIcon className="shrink-0 size-3" />
<ChevronDownIcon className="size-3 shrink-0" />
</>
}
options={options}
getFloatingProps={getFloatingProps}
getReferenceProps={getReferenceProps}
>
<section className="w-48 max-h-[90vh] mt-1 flex flex-col overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200">
<section className="mt-1 flex max-h-[90vh] w-48 flex-col overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200">
{items.map((item) => (
<button
key={item.name}
@ -102,7 +102,7 @@ export function BubbleMenuNodeSelector(props: Props) {
<item.icon className="size-3 flex-shrink-0" />
<span>{item.name}</span>
</div>
{activeItem.name === item.name && <CheckIcon className="size-3 text-tertiary flex-shrink-0" />}
{activeItem.name === item.name && <CheckIcon className="size-3 flex-shrink-0 text-tertiary" />}
</button>
))}
</section>

4
packages/editor/src/core/components/menus/bubble-menu/root.tsx
View file

@ -192,7 +192,7 @@ export function EditorBubbleMenu(props: Props) {
{!isSelecting && (
<div
ref={menuRef}
className="flex py-2 divide-x divide-subtle-1 rounded-lg border border-subtle bg-surface-1 shadow-raised-200 overflow-x-scroll horizontal-scrollbar scrollbar-xs"
className="horizontal-scrollbar flex scrollbar-xs divide-x divide-subtle-1 overflow-x-scroll rounded-lg border border-subtle bg-surface-1 py-2 shadow-raised-200"
>
<div className="px-2">
<BubbleMenuNodeSelector editor={editor} />
@ -217,7 +217,7 @@ export function EditorBubbleMenu(props: Props) {
e.stopPropagation();
}}
className={cn(
"size-7 grid place-items-center rounded-sm text-tertiary hover:bg-layer-1 active:bg-layer-1 transition-colors",
"grid size-7 place-items-center rounded-sm text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
{
"bg-layer-1 text-primary": editorState[item.key],
}

2
packages/editor/src/core/extensions/callout/block.tsx
View file

@ -36,7 +36,7 @@ export function CustomCalloutBlock(props: CustomCalloutNodeViewProps) {
return (
<NodeViewWrapper
key={node.attrs[ECalloutAttributeNames.ID]}
className="editor-callout-component group/callout-node relative bg-layer-3 rounded-lg text-primary p-4 my-2 flex items-start gap-4 transition-colors duration-500 break-words"
className="editor-callout-component group/callout-node relative my-2 flex items-start gap-4 rounded-lg bg-layer-3 p-4 break-words text-primary transition-colors duration-500"
style={{
backgroundColor: activeBackgroundColor,
}}

16
packages/editor/src/core/extensions/callout/color-selector.tsx
View file

@ -28,9 +28,9 @@ export function CalloutBlockColorSelector(props: Props) {
return (
<div
className={cn("opacity-0 pointer-events-none absolute top-2 right-2 z-10 transition-opacity", {
"group-hover/callout-node:opacity-100 group-hover/callout-node:pointer-events-auto": !disabled,
"opacity-100 pointer-events-auto": isOpen,
className={cn("pointer-events-none absolute top-2 right-2 z-10 opacity-0 transition-opacity", {
"group-hover/callout-node:pointer-events-auto group-hover/callout-node:opacity-100": !disabled,
"pointer-events-auto opacity-100": isOpen,
})}
contentEditable={false}
>
@ -42,7 +42,7 @@ export function CalloutBlockColorSelector(props: Props) {
e.stopPropagation();
}}
className={cn(
"flex items-center gap-1 h-full whitespace-nowrap py-1 px-2.5 text-13 font-medium text-tertiary hover:bg-layer-1-hover active:bg-layer-1-active rounded-sm transition-colors",
"flex h-full items-center gap-1 rounded-sm px-2.5 py-1 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1-hover active:bg-layer-1-active",
{
"bg-layer-1": isOpen,
}
@ -50,16 +50,16 @@ export function CalloutBlockColorSelector(props: Props) {
disabled={disabled}
>
<span className="text-12">Color</span>
<ChevronDownIcon className="flex-shrink-0 size-3" />
<ChevronDownIcon className="size-3 flex-shrink-0" />
</button>
{isOpen && (
<section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200 animate-in fade-in slide-in-from-top-1">
<section className="animate-in fade-in slide-in-from-top-1 absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200">
<div className="flex items-center gap-2">
{COLORS_LIST.map((color) => (
<button
key={color.key}
type="button"
className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
style={{
backgroundColor: color.backgroundColor,
}}
@ -68,7 +68,7 @@ export function CalloutBlockColorSelector(props: Props) {
))}
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1-hover transition-colors"
className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1-hover"
onClick={() => handleColorSelect(null)}
>
<Ban className="size-4" />

4
packages/editor/src/core/extensions/callout/logo-selector.tsx
View file

@ -42,8 +42,8 @@ export function CalloutBlockLogoSelector(props: Props) {
closeOnSelect={true}
isOpen={isOpen}
handleToggle={handleOpen}
className="flex-shrink-0 grid place-items-center"
buttonClassName={cn("flex-shrink-0 size-8 grid place-items-center rounded-lg text-primary", {
className="grid flex-shrink-0 place-items-center"
buttonClassName={cn("grid size-8 flex-shrink-0 place-items-center rounded-lg text-primary", {
"hover:bg-layer-1-hover": !disabled,
})}
label={<Logo logo={logoValue} size={18} type="lucide" />}

6
packages/editor/src/core/extensions/code/code-block-node-view.tsx
View file

@ -45,12 +45,12 @@ export function CodeBlockComponent({ node }: Props) {
};
return (
<NodeViewWrapper key={attrs[ECodeBlockAttributeNames.ID]} className="code-block relative group/code">
<NodeViewWrapper key={attrs[ECodeBlockAttributeNames.ID]} className="code-block group/code relative">
<Tooltip tooltipContent="Copy code">
<button
type="button"
className={cn(
"group/button hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-layer-1 border border-subtle transition duration-150 ease-in-out backdrop-blur-sm",
"group/button absolute top-2 right-2 z-10 hidden size-8 items-center justify-center rounded-md border border-subtle bg-layer-1 backdrop-blur-sm transition duration-150 ease-in-out group-hover/code:flex",
{
"bg-success-subtle hover:bg-success-subtle-1 active:bg-success-subtle-1": copied,
}
@ -65,7 +65,7 @@ export function CodeBlockComponent({ node }: Props) {
</button>
</Tooltip>
<pre className="bg-layer-3 text-primary rounded-lg p-4 my-2">
<pre className="my-2 rounded-lg bg-layer-3 p-4 text-primary">
<NodeViewContent as="code" className="whitespace-pre-wrap" />
</pre>
</NodeViewWrapper>

14
packages/editor/src/core/extensions/custom-image/components/block.tsx
View file

@ -245,7 +245,7 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
}}
>
{showImageLoader && (
<div className="animate-pulse bg-layer-1 rounded-md" style={{ width: size.width, height: size.height }} />
<div className="animate-pulse rounded-md bg-layer-1" style={{ width: size.width, height: size.height }} />
)}
<img
ref={imageRef}
@ -294,7 +294,7 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
// hide the image while the background calculations of the image loader are in progress (to avoid flickering) and show the loader until then
hidden: showImageLoader,
"read-only-image": !editor.isEditable,
"blur-sm opacity-80 loading-image": !resolvedImageSrc,
"loading-image opacity-80 blur-sm": !resolvedImageSrc,
})}
style={{
width: size.width,
@ -320,13 +320,13 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
/>
)}
{selected && displayedImageSrc === resolvedImageSrc && (
<div className="absolute inset-0 size-full bg-accent-primary/30 pointer-events-none" />
<div className="pointer-events-none absolute inset-0 size-full bg-accent-primary/30" />
)}
{showImageResizer && (
<>
<div
className={cn(
"absolute inset-0 border-2 border-accent-strong pointer-events-none rounded-md transition-opacity duration-100 ease-in-out",
"pointer-events-none absolute inset-0 rounded-md border-2 border-accent-strong transition-opacity duration-100 ease-in-out",
{
"opacity-100": isResizing,
"opacity-0 group-hover/image-component:opacity-100": !isResizing,
@ -335,10 +335,10 @@ export function CustomImageBlock(props: CustomImageBlockProps) {
/>
<div
className={cn(
"absolute bottom-0 translate-y-1/2 size-4 rounded-full bg-accent-primary border-2 border-white transition-opacity duration-100 ease-in-out",
"absolute bottom-0 size-4 translate-y-1/2 rounded-full border-2 border-white bg-accent-primary transition-opacity duration-100 ease-in-out",
{
"opacity-100 pointer-events-auto": isResizing,
"opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto":
"pointer-events-auto opacity-100": isResizing,
"pointer-events-none opacity-0 group-hover/image-component:pointer-events-auto group-hover/image-component:opacity-100":
!isResizing,
"left-0 -translate-x-1/2 cursor-nesw-resize": nodeAlignment === "right",
"right-0 translate-x-1/2 cursor-nwse-resize": nodeAlignment !== "right",

2
packages/editor/src/core/extensions/custom-image/components/node-view.tsx
View file

@ -138,7 +138,7 @@ export function CustomImageNodeView(props: CustomImageNodeViewProps) {
return (
<NodeViewWrapper key={node.attrs[ECustomImageAttributeNames.ID]}>
<div className="p-0 mx-0 my-2" data-drag-handle ref={imageComponentRef}>
<div className="mx-0 my-2 p-0" data-drag-handle ref={imageComponentRef}>
{shouldShowBlock && !hasDuplicationFailed ? (
<CustomImageBlock
editorContainer={editorContainer}

12
packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
View file

@ -36,24 +36,24 @@ export function ImageAlignmentAction(props: Props) {
}, [isDropdownOpen, toggleToolbarViewStatus]);
return (
<div ref={dropdownRef} className="h-full relative">
<div ref={dropdownRef} className="relative h-full">
<Tooltip disabled={isTouchDevice} tooltipContent="Align">
<button
type="button"
className="h-full flex items-center gap-1 text-white/60 hover:text-white transition-colors"
className="flex h-full items-center gap-1 text-white/60 transition-colors hover:text-white"
onClick={() => setIsDropdownOpen((prev) => !prev)}
>
{activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
<ChevronDownIcon className="flex-shrink-0 size-2" />
{activeAlignmentDetails && <activeAlignmentDetails.icon className="size-3 flex-shrink-0" />}
<ChevronDownIcon className="size-2 flex-shrink-0" />
</button>
</Tooltip>
{isDropdownOpen && (
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-black/80 flex items-center gap-2 px-2 rounded-sm">
<div className="absolute top-full left-1/2 mt-0.5 flex h-7 -translate-x-1/2 items-center gap-2 rounded-sm bg-black/80 px-2">
{IMAGE_ALIGNMENT_OPTIONS.map((option) => (
<Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
<button
type="button"
className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
className="grid h-full flex-shrink-0 place-items-center text-white/60 transition-colors hover:text-white"
onClick={() => {
handleChange(option.value);
setIsDropdownOpen(false);

2
packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
View file

@ -20,7 +20,7 @@ export function ImageDownloadAction(props: Props) {
<button
type="button"
onClick={() => window.open(src, "_blank")}
className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
className="grid h-full flex-shrink-0 place-items-center text-white/60 transition-colors hover:text-white"
aria-label="Download image"
>
<Download className="size-3" />

22
packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
View file

@ -199,8 +199,8 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
return (
<div
className={cn("fixed inset-0 size-full z-50 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
"opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
className={cn("pointer-events-none fixed inset-0 z-50 size-full bg-black/90 opacity-0 transition-opacity", {
"editor-image-full-screen-modal pointer-events-auto opacity-100": isFullScreenEnabled,
"cursor-default": !isDragging,
"cursor-grabbing": isDragging,
})}
@ -211,15 +211,15 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
<div
ref={modalRef}
onMouseDown={(e) => e.target === modalRef.current && handleClose()}
className="relative size-full grid place-items-center overflow-hidden"
className="relative grid size-full place-items-center overflow-hidden"
>
<button
type="button"
onClick={handleClose}
className="absolute top-10 right-10 size-8 grid place-items-center"
className="absolute top-10 right-10 grid size-8 place-items-center"
aria-label="Close image viewer"
>
<CloseIcon className="size-8 text-white/60 hover:text-white transition-colors" />
<CloseIcon className="size-8 text-white/60 transition-colors hover:text-white" />
</button>
<img
ref={setImageRef}
@ -237,7 +237,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}}
onMouseDown={handleMouseDown}
/>
<div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-subtle-1 py-2 divide-x divide-subtle-1 bg-black">
<div className="fixed bottom-10 left-1/2 flex -translate-x-1/2 items-center justify-center gap-1 divide-x divide-subtle-1 rounded-md border border-subtle-1 bg-black py-2">
<div className="flex items-center">
<button
type="button"
@ -248,13 +248,13 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}
handleMagnification("decrease");
}}
className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
className="grid size-6 place-items-center text-white/60 transition-colors duration-200 hover:text-white disabled:text-white/30"
disabled={magnification <= MIN_ZOOM}
aria-label="Zoom out"
>
<Minus className="size-4" />
</button>
<span className="text-13 w-12 text-center text-white">{Math.round(100 * magnification)}%</span>
<span className="w-12 text-center text-13 text-white">{Math.round(100 * magnification)}%</span>
<button
type="button"
onClick={(e) => {
@ -264,7 +264,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
}
handleMagnification("increase");
}}
className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
className="grid size-6 place-items-center text-white/60 transition-colors duration-200 hover:text-white disabled:text-white/30"
disabled={magnification >= MAX_ZOOM}
aria-label="Zoom in"
>
@ -275,7 +275,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
<button
type="button"
onClick={() => window.open(downloadSrc, "_blank")}
className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
className="grid size-8 flex-shrink-0 place-items-center text-white/60 transition-colors duration-200 hover:text-white"
aria-label="Download image"
>
<Download className="size-4" />
@ -285,7 +285,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
<button
type="button"
onClick={() => window.open(src, "_blank")}
className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
className="grid size-8 flex-shrink-0 place-items-center text-white/60 transition-colors duration-200 hover:text-white"
aria-label="Open image in new tab"
>
<NewTabIcon className="size-4" />

2
packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
View file

@ -53,7 +53,7 @@ export function ImageFullScreenActionRoot(props: Props) {
e.stopPropagation();
setIsFullScreenEnabled(true);
}}
className="flex-shrink-0 h-full grid place-items-center text-on-color/60 hover:text-on-color transition-colors"
className="grid h-full flex-shrink-0 place-items-center text-on-color/60 transition-colors hover:text-on-color"
aria-label="View image in full screen"
>
<Maximize className="size-3" />

4
packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
View file

@ -37,9 +37,9 @@ export function ImageToolbarRoot(props: Props) {
<>
<div
className={cn(
"absolute top-1 right-1 h-7 z-20 bg-black/80 rounded-sm flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
"pointer-events-none absolute top-1 right-1 z-20 flex h-7 items-center gap-2 rounded-sm bg-black/80 px-2 opacity-0 transition-opacity group-hover/image-component:pointer-events-auto group-hover/image-component:opacity-100",
{
"opacity-100 pointer-events-auto": shouldShowToolbar,
"pointer-events-auto opacity-100": shouldShowToolbar,
}
)}
>

2
packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
View file

@ -59,7 +59,7 @@ export function ImageUploadStatus(props: Props) {
if (uploadStatus === undefined) return null;
return (
<div className="absolute top-1 right-1 z-20 bg-black/60 rounded-sm text-11 font-medium w-10 text-center">
<div className="absolute top-1 right-1 z-20 w-10 rounded-sm bg-black/60 text-center text-11 font-medium">
{displayStatus}%
</div>
);

14
packages/editor/src/core/extensions/custom-image/components/uploader.tsx
View file

@ -211,15 +211,15 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
return (
<div
className={cn(
"image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-tertiary bg-layer-3 border border-dashed transition-all duration-200 ease-in-out cursor-default",
"image-upload-component flex cursor-default items-center justify-start gap-2 rounded-lg border border-dashed bg-layer-3 px-2 py-3 text-tertiary transition-all duration-200 ease-in-out",
{
"border-subtle": !(selected && editor.isEditable && !isErrorState),
"hover:text-secondary hover:bg-layer-3-hover cursor-pointer": editor.isEditable && !isErrorState,
"cursor-pointer hover:bg-layer-3-hover hover:text-secondary": editor.isEditable && !isErrorState,
"bg-layer-3-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
"text-accent-secondary bg-accent-primary/10 hover:bg-accent-primary/10 hover:text-accent-secondary":
"bg-accent-primary/10 text-accent-secondary hover:bg-accent-primary/10 hover:text-accent-secondary":
selected && editor.isEditable && !isErrorState,
"text-danger-primary bg-danger-subtle cursor-default": isErrorState,
"hover:text-danger-primary hover:bg-danger-subtle-hover": isErrorState && editor.isEditable,
"cursor-default bg-danger-subtle text-danger-primary": isErrorState,
"hover:bg-danger-subtle-hover hover:text-danger-primary": isErrorState && editor.isEditable,
"bg-danger-subtle-selected": isErrorState && selected,
"hover:bg-danger-subtle-active": isErrorState && selected && editor.isEditable,
}
@ -236,13 +236,13 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
}}
>
<ImageIcon className="size-4" />
<div className="text-14 font-medium flex-1">{getDisplayMessage()}</div>
<div className="flex-1 text-14 font-medium">{getDisplayMessage()}</div>
{hasDuplicationFailed && editor.isEditable && (
<button
type="button"
onClick={handleRetryClick}
className={cn(
"flex items-center gap-1 px-2 py-1 font-medium text-danger-primary rounded-md transition-all duration-200 ease-in-out hover:bg-danger-subtle-hover",
"flex items-center gap-1 rounded-md px-2 py-1 font-medium text-danger-primary transition-all duration-200 ease-in-out hover:bg-danger-subtle-hover",
{
"hover:bg-danger-subtle-hover": selected,
}

10
packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
View file

@ -130,9 +130,9 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
<div
ref={dropdownContainerRef}
className={cn(
"relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2 opacity-0 invisible transition-opacity",
"invisible relative max-h-80 w-[14rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 opacity-0 shadow-raised-200 transition-opacity",
{
"opacity-100 visible": isVisible,
"visible opacity-100": isVisible,
}
)}
style={{
@ -156,7 +156,7 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
id={`emoji-item-${index}`}
type="button"
className={cn(
"flex items-center gap-2 w-full rounded-sm px-2 py-1.5 text-13 text-left truncate text-secondary hover:bg-layer-1-hover transition-colors duration-150",
"flex w-full items-center gap-2 truncate rounded-sm px-2 py-1.5 text-left text-13 text-secondary transition-colors duration-150 hover:bg-layer-1-hover",
{
"bg-layer-1-hover": isSelected,
}
@ -164,7 +164,7 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
onClick={() => selectItem(index)}
onMouseEnter={() => setSelectedIndex(index)}
>
<span className="size-5 grid place-items-center flex-shrink-0 text-14">{item.emoji}</span>
<span className="grid size-5 flex-shrink-0 place-items-center text-14">{item.emoji}</span>
<span className="flex-grow truncate">
<span className="font-medium">:{item.name}:</span>
</span>
@ -172,7 +172,7 @@ export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
);
})
) : (
<div className="text-center text-13 text-placeholder py-2">No emojis found</div>
<div className="py-2 text-center text-13 text-placeholder">No emojis found</div>
)}
</div>
</>

8
packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
View file

@ -146,7 +146,7 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
/>
<div
ref={dropdownContainer}
className="relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2"
className="relative max-h-80 w-[14rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
style={{
zIndex: 100,
}}
@ -172,7 +172,7 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
id={`mention-item-${sectionIndex}-${itemIndex}`}
type="button"
className={cn(
"flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1-hover",
"flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1-hover",
{
"bg-layer-1-hover": isSelected,
}
@ -189,9 +189,9 @@ export const MentionsListDropdown = forwardRef(function MentionsListDropdown(pro
})
}
>
<span className="size-5 grid place-items-center flex-shrink-0">{item.icon}</span>
<span className="grid size-5 flex-shrink-0 place-items-center">{item.icon}</span>
{item.subTitle && (
<h5 className="whitespace-nowrap text-11 text-tertiary flex-shrink-0">{item.subTitle}</h5>
<h5 className="flex-shrink-0 text-11 whitespace-nowrap text-tertiary">{item.subTitle}</h5>
)}
<p className="flex-grow truncate">{item.title}</p>
</button>

4
packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx
View file

@ -54,7 +54,7 @@ export function CommandMenuItem(props: Props) {
type="button"
id={`item-${sectionIndex}-${itemIndex}`}
className={cn(
"flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-13 text-left truncate text-secondary hover:bg-layer-1-hover",
"flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-13 text-secondary hover:bg-layer-1-hover",
{
"bg-layer-1-hover": isSelected,
}
@ -62,7 +62,7 @@ export function CommandMenuItem(props: Props) {
onClick={onClick}
onMouseEnter={onMouseEnter}
>
<span className="size-5 grid place-items-center flex-shrink-0" style={item.iconContainerStyle}>
<span className="grid size-5 flex-shrink-0 place-items-center" style={item.iconContainerStyle}>
{item.icon}
</span>
<p className="flex-grow truncate text-12">{query ? highlightMatch(item.title, query) : item.title}</p>

2
packages/editor/src/core/extensions/slash-commands/command-menu.tsx
View file

@ -137,7 +137,7 @@ export const SlashCommandsMenu = forwardRef(function SlashCommandsMenu(props: Sl
<div
id="slash-command"
ref={commandListContainer}
className="relative max-h-80 min-w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2"
className="relative max-h-80 min-w-[12rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
style={{
zIndex: 100,
}}

16
packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
View file

@ -49,23 +49,23 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
<Disclosure.Button
as="button"
type="button"
className="flex items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
>
{({ open }) => (
<>
<span className="flex items-center gap-2">
<Palette className="shrink-0 size-3" />
<Palette className="size-3 shrink-0" />
Color
</span>
<ChevronRightIcon
className={cn("shrink-0 size-3 transition-transform duration-200", {
className={cn("size-3 shrink-0 transition-transform duration-200", {
"rotate-90": open,
})}
/>
</>
)}
</Disclosure.Button>
<Disclosure.Panel className="p-1 space-y-2 mb-1.5">
<Disclosure.Panel className="mb-1.5 space-y-2 p-1">
{/* <div className="space-y-1.5">
<p className="text-11 text-tertiary font-semibold">Text colors</p>
<div className="flex items-center flex-wrap gap-2">
@ -90,13 +90,13 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
</div>
</div> */}
<div className="space-y-1">
<p className="text-11 text-tertiary font-semibold">Background colors</p>
<div className="flex items-center flex-wrap gap-2">
<p className="text-11 font-semibold text-tertiary">Background colors</p>
<div className="flex flex-wrap items-center gap-2">
{COLORS_LIST.map((color) => (
<button
key={color.key}
type="button"
className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
style={{
backgroundColor: color.backgroundColor,
}}
@ -108,7 +108,7 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
))}
<button
type="button"
className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1-hover transition-colors"
className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1-hover"
onClick={() => {
handleBackgroundColorChange(editor, null);
onSelect(null);

6
packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
View file

@ -224,14 +224,14 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
return (
<>
<div className="table-col-handle-container absolute z-20 top-0 left-0 flex justify-center items-center w-full -translate-y-1/2">
<div className="table-col-handle-container absolute top-0 left-0 z-20 flex w-full -translate-y-1/2 items-center justify-center">
<button
ref={refs.setReference}
{...getReferenceProps()}
type="button"
onMouseDown={handleMouseDown}
className={cn("px-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
"!opacity-100 bg-accent-primary border-accent-strong": isDropdownOpen,
className={cn("rounded-sm border border-strong-1 bg-layer-1 px-1 transition-all duration-200 outline-none", {
"border-accent-strong bg-accent-primary !opacity-100": isDropdownOpen,
"hover:bg-layer-1-hover": !isDropdownOpen,
})}
>

8
packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
View file

@ -75,7 +75,7 @@ export function ColumnOptionsDropdown(props: Props) {
<>
<button
type="button"
className="flex items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -84,7 +84,7 @@ export function ColumnOptionsDropdown(props: Props) {
}}
>
<div className="flex-grow truncate">Header column</div>
<ToggleRight className="shrink-0 size-3" />
<ToggleRight className="size-3 shrink-0" />
</button>
<hr className="my-2 border-subtle" />
<TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
@ -92,7 +92,7 @@ export function ColumnOptionsDropdown(props: Props) {
<button
key={item.key}
type="button"
className="flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
className="flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -100,7 +100,7 @@ export function ColumnOptionsDropdown(props: Props) {
onClose();
}}
>
<item.icon className="shrink-0 size-3" />
<item.icon className="size-3 shrink-0" />
<div className="flex-grow truncate">{item.label}</div>
</button>
))}

8
packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
View file

@ -223,18 +223,18 @@ export function RowDragHandle(props: RowDragHandleProps) {
return (
<>
<div className="table-row-handle-container absolute z-20 top-0 left-0 flex justify-center items-center h-full -translate-x-1/2">
<div className="table-row-handle-container absolute top-0 left-0 z-20 flex h-full -translate-x-1/2 items-center justify-center">
<button
ref={refs.setReference}
{...getReferenceProps()}
type="button"
onMouseDown={handleMouseDown}
className={cn("py-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
"!opacity-100 bg-accent-primary border-accent-strong": isDropdownOpen,
className={cn("rounded-sm border border-strong-1 bg-layer-1 py-1 transition-all duration-200 outline-none", {
"border-accent-strong bg-accent-primary !opacity-100": isDropdownOpen,
"hover:bg-layer-1-hover": !isDropdownOpen,
})}
>
<Ellipsis className="size-4 text-primary rotate-90" />
<Ellipsis className="size-4 rotate-90 text-primary" />
</button>
</div>
{isDropdownOpen && (

8
packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
View file

@ -75,7 +75,7 @@ export function RowOptionsDropdown(props: Props) {
<>
<button
type="button"
className="flex items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -84,7 +84,7 @@ export function RowOptionsDropdown(props: Props) {
}}
>
<div className="flex-grow truncate">Header row</div>
<ToggleRight className="shrink-0 size-3" />
<ToggleRight className="size-3 shrink-0" />
</button>
<hr className="my-2 border-subtle" />
<TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
@ -92,7 +92,7 @@ export function RowOptionsDropdown(props: Props) {
<button
key={item.key}
type="button"
className="flex items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
className="flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -100,7 +100,7 @@ export function RowOptionsDropdown(props: Props) {
onClose();
}}
>
<item.icon className="shrink-0 size-3" />
<item.icon className="size-3 shrink-0" />
<div className="flex-grow truncate">{item.label}</div>
</button>
))}

4
packages/editor/src/core/helpers/common.ts
View file

@ -19,10 +19,10 @@ type EditorClassNameArgs = {
export const getEditorClassNames = ({ noBorder, borderOnFocus, containerClassName }: EditorClassNameArgs) =>
cn(
"w-full max-w-full sm:rounded-lg focus:outline-none focus:border-0",
"w-full max-w-full focus:border-0 focus:outline-none sm:rounded-lg",
{
"border border-subtle-1": !noBorder,
"focus:border border-strong": borderOnFocus,
"border-strong focus:border": borderOnFocus,
},
containerClassName
);

5
packages/editor/src/core/helpers/insert-empty-paragraph-at-node-boundary.ts
View file

@ -11,10 +11,7 @@ import { CORE_EXTENSIONS } from "@/constants/extension";
type Direction = "up" | "down";
export const insertEmptyParagraphAtNodeBoundaries: (
direction: Direction,
nodeType: string
) => KeyboardShortcutCommand =
export const insertEmptyParagraphAtNodeBoundaries: (direction: Direction, nodeType: string) => KeyboardShortcutCommand =
(direction, nodeType) =>
({ editor }) => {
try {

2
packages/editor/src/core/props.ts
View file

@ -21,7 +21,7 @@ export const CoreEditorProps = (props: TArgs): EditorProps => {
return {
attributes: {
class: cn(
"prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none",
"prose-brand prose-headings:font-display font-default max-w-full prose focus:outline-none",
editorClassName
),
},