apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-26 09:16:22 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(editor): add mode toggle functionality and improve editor state management

Browse source
This commit is contained in:
Anish Sarkar 2026-04-23 19:52:55 +05:30
parent 9317b3f9fc
commit 06b509213c
3 changed files with 116 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

5
surfsense_web/components/editor/plate-editor.tsx
View file

@ -42,6 +42,8 @@ export interface PlateEditorProps {
hasUnsavedChanges?: boolean;
/** Whether a save is in progress */
isSaving?: boolean;
/** Whether edit/view mode toggle UI should be available in toolbars. */
allowModeToggle?: boolean;
/** Start the editor in editing mode instead of viewing mode. Ignored when readOnly is true. */
defaultEditing?: boolean;
/**
@ -91,6 +93,7 @@ export function PlateEditor({
onSave,
hasUnsavedChanges = false,
isSaving = false,
allowModeToggle = true,
defaultEditing = false,
preset = "full",
extraPlugins = [],
@ -174,7 +177,7 @@ export function PlateEditor({
}, [html, markdown, editor]);
// When not forced read-only, the user can toggle between editing/viewing.
const canToggleMode = !readOnly;
const canToggleMode = !readOnly && allowModeToggle;
const contextProviderValue = useMemo(
() => ({

24
surfsense_web/components/editor/plugins/fixed-toolbar-kit.tsx
View file

@ -1,19 +1,33 @@
"use client";
import { createPlatePlugin } from "platejs/react";
import { useEditorReadOnly } from "platejs/react";
import { useEditorSave } from "@/components/editor/editor-save-context";
import { FixedToolbar } from "@/components/ui/fixed-toolbar";
import { FixedToolbarButtons } from "@/components/ui/fixed-toolbar-buttons";
function ConditionalFixedToolbar() {
const readOnly = useEditorReadOnly();
const { onSave, hasUnsavedChanges, canToggleMode } = useEditorSave();
const hasVisibleControls =
!readOnly || canToggleMode || (!!onSave && hasUnsavedChanges && !readOnly);
if (!hasVisibleControls) return null;
return (
<FixedToolbar>
<FixedToolbarButtons />
</FixedToolbar>
);
}
export const FixedToolbarKit = [
createPlatePlugin({
key: "fixed-toolbar",
render: {
beforeEditable: () => (
<FixedToolbar>
<FixedToolbarButtons />
</FixedToolbar>
),
beforeEditable: () => <ConditionalFixedToolbar />,
},
}),
];