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

refactor: remove KbdPlugin and MoreToolbarButton, and add Superscript and Subscript options to InsertToolbarButton for cleaner toolbar functionality

Browse source
This commit is contained in:
Anish Sarkar 2026-02-17 01:50:09 +05:30
parent 841e764729
commit df3f724caf
6 changed files with 24 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

5
surfsense_web/components/ui/fixed-toolbar-buttons.tsx
View file

@ -23,7 +23,6 @@ import { InsertToolbarButton } from './insert-toolbar-button';
import { LinkToolbarButton } from './link-toolbar-button';
import { MarkToolbarButton } from './mark-toolbar-button';
import { ModeToolbarButton } from './mode-toolbar-button';
import { MoreToolbarButton } from './more-toolbar-button';
import { ToolbarButton, ToolbarGroup } from './toolbar';
import { TurnIntoToolbarButton } from './turn-into-toolbar-button';
@ -102,10 +101,6 @@ export function FixedToolbarButtons() {
<LinkToolbarButton />
</ToolbarGroup>
<ToolbarGroup>
<MoreToolbarButton />
</ToolbarGroup>
{/* Save button — appears when in editing mode with unsaved changes */}
{onSave && hasUnsavedChanges && (
<ToolbarGroup>

4
surfsense_web/components/ui/floating-toolbar-buttons.tsx
View file

@ -14,7 +14,6 @@ import { useEditorReadOnly } from 'platejs/react';
import { LinkToolbarButton } from './link-toolbar-button';
import { MarkToolbarButton } from './mark-toolbar-button';
import { MoreToolbarButton } from './more-toolbar-button';
import { ToolbarGroup } from './toolbar';
import { TurnIntoToolbarButton } from './turn-into-toolbar-button';
@ -57,9 +56,6 @@ export function FloatingToolbarButtons() {
<LinkToolbarButton />
</ToolbarGroup>
<ToolbarGroup>
<MoreToolbarButton />
</ToolbarGroup>
</>
);
}

24
surfsense_web/components/ui/insert-toolbar-button.tsx
View file

@ -19,6 +19,8 @@ import {
QuoteIcon,
RadicalIcon,
SquareIcon,
SubscriptIcon,
SuperscriptIcon,
TableIcon,
} from 'lucide-react';
import { KEYS } from 'platejs';
@ -156,6 +158,28 @@ const groups: Group[] = [
},
})),
},
{
group: 'Marks',
items: [
{
icon: <SuperscriptIcon />,
label: 'Superscript',
value: KEYS.sup,
},
{
icon: <SubscriptIcon />,
label: 'Subscript',
value: KEYS.sub,
},
].map((item) => ({
...item,
onSelect: (editor: PlateEditor, value: string) => {
editor.tf.toggleMark(value, {
remove: value === KEYS.sup ? KEYS.sub : KEYS.sup,
});
},
})),
},
];
export function InsertToolbarButton(props: DropdownMenuProps) {

19
surfsense_web/components/ui/kbd-node.tsx
View file

@ -1,19 +0,0 @@
'use client';
import * as React from 'react';
import type { PlateLeafProps } from 'platejs/react';
import { PlateLeaf } from 'platejs/react';
export function KbdLeaf(props: PlateLeafProps) {
return (
<PlateLeaf
{...props}
as="kbd"
className="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]"
>
{props.children}
</PlateLeaf>
);
}

108
surfsense_web/components/ui/more-toolbar-button.tsx
View file

@ -1,108 +0,0 @@
'use client';
import * as React from 'react';
import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
import { insertInlineEquation } from '@platejs/math';
import {
InfoIcon,
KeyboardIcon,
MoreHorizontalIcon,
RadicalIcon,
SubscriptIcon,
SuperscriptIcon,
} from 'lucide-react';
import { KEYS } from 'platejs';
import { useEditorRef } from 'platejs/react';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { ToolbarButton } from './toolbar';
export function MoreToolbarButton(props: DropdownMenuProps) {
const editor = useEditorRef();
const [open, setOpen] = React.useState(false);
return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild>
<ToolbarButton pressed={open} tooltip="Insert">
<MoreHorizontalIcon />
</ToolbarButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto"
align="start"
>
<DropdownMenuGroup>
<DropdownMenuItem
onSelect={() => {
editor.tf.toggleMark(KEYS.kbd);
editor.tf.collapse({ edge: 'end' });
editor.tf.focus();
}}
>
<KeyboardIcon />
Keyboard input
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => {
editor.tf.toggleMark(KEYS.sup, {
remove: KEYS.sub,
});
editor.tf.focus();
}}
>
<SuperscriptIcon />
Superscript
{/* (⌘+,) */}
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => {
editor.tf.toggleMark(KEYS.sub, {
remove: KEYS.sup,
});
editor.tf.focus();
}}
>
<SubscriptIcon />
Subscript
{/* (⌘+.) */}
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => {
insertInlineEquation(editor);
editor.tf.focus();
}}
>
<RadicalIcon />
Equation
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => {
editor.tf.insertNodes(
editor.api.create.block({ type: KEYS.callout }),
{ select: true }
);
editor.tf.focus();
}}
>
<InfoIcon />
Callout
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
);
}