mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 16:56:22 +02:00
feat(editor): add reserveToolbarSpace option to enhance toolbar visibility management
This commit is contained in:
parent
0381632bc2
commit
a1d3356bf5
5 changed files with 36 additions and 4 deletions
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue