feat(editor): add reserveToolbarSpace option to enhance toolbar visibility management

This commit is contained in:
Anish Sarkar 2026-04-23 20:13:29 +05:30
parent 0381632bc2
commit a1d3356bf5
5 changed files with 36 additions and 4 deletions

View file

@ -11,12 +11,15 @@ interface EditorSaveContextValue {
isSaving: boolean;
/** Whether the user can toggle between editing and viewing modes */
canToggleMode: boolean;
/** Whether fixed-toolbar space should be reserved even when controls are hidden */
reserveToolbarSpace: boolean;
}
export const EditorSaveContext = createContext<EditorSaveContextValue>({
hasUnsavedChanges: false,
isSaving: false,
canToggleMode: false,
reserveToolbarSpace: false,
});
export function useEditorSave() {

View file

@ -44,6 +44,8 @@ export interface PlateEditorProps {
isSaving?: boolean;
/** Whether edit/view mode toggle UI should be available in toolbars. */
allowModeToggle?: boolean;
/** Reserve fixed-toolbar vertical space even when controls are hidden. */
reserveToolbarSpace?: boolean;
/** Start the editor in editing mode instead of viewing mode. Ignored when readOnly is true. */
defaultEditing?: boolean;
/**
@ -94,6 +96,7 @@ export function PlateEditor({
hasUnsavedChanges = false,
isSaving = false,
allowModeToggle = true,
reserveToolbarSpace = false,
defaultEditing = false,
preset = "full",
extraPlugins = [],
@ -185,8 +188,9 @@ export function PlateEditor({
hasUnsavedChanges,
isSaving,
canToggleMode,
reserveToolbarSpace,
}),
[onSave, hasUnsavedChanges, isSaving, canToggleMode]
[onSave, hasUnsavedChanges, isSaving, canToggleMode, reserveToolbarSpace]
);
return (

View file

@ -9,12 +9,19 @@ import { FixedToolbarButtons } from "@/components/ui/fixed-toolbar-buttons";
function ConditionalFixedToolbar() {
const readOnly = useEditorReadOnly();
const { onSave, hasUnsavedChanges, canToggleMode } = useEditorSave();
const { onSave, hasUnsavedChanges, canToggleMode, reserveToolbarSpace } = useEditorSave();
const hasVisibleControls =
!readOnly || canToggleMode || (!!onSave && hasUnsavedChanges && !readOnly);
if (!hasVisibleControls) return null;
if (!hasVisibleControls) {
if (!reserveToolbarSpace) return null;
return (
<FixedToolbar className="pointer-events-none opacity-0">
<div className="h-8 w-full" />
</FixedToolbar>
);
}
return (
<FixedToolbar>