Add a placeholder for toggle

This commit is contained in:
Nate Kelley 2025-09-09 21:48:35 -06:00 committed by Wells Bunker
parent 68eaacea67
commit 8729374d70
No known key found for this signature in database
GPG Key ID: DB16D6F2679B78FC
1 changed files with 10 additions and 1 deletions

View File

@ -1,6 +1,6 @@
import { useToggleButton, useToggleButtonState } from '@platejs/toggle/react';
import type { PlateElementProps } from 'platejs/react';
import { PlateElement } from 'platejs/react';
import { PlateElement, useElement, useElementSelector } from 'platejs/react';
import { Button } from '@/components/ui/buttons';
import { ChevronRight } from '@/components/ui/icons';
import { cn } from '@/lib/classMerge';
@ -9,6 +9,7 @@ export function ToggleElement(props: PlateElementProps) {
const element = props.element;
const state = useToggleButtonState(element.id as string);
const { buttonProps, open } = useToggleButton(state);
const hasContent = element.children.some((child) => child.text);
return (
<PlateElement {...props} className="pl-6">
@ -24,6 +25,14 @@ export function ToggleElement(props: PlateElementProps) {
</div>
}
/>
{!hasContent && (
<span
contentEditable={false}
className="absolute top-0 left-6.5 select-none text-text-tertiary pointer-events-none"
>
Type here...
</span>
)}
{props.children}
</PlateElement>
);