diff --git a/surfsense_web/components/editor/plugins/basic-marks-kit.tsx b/surfsense_web/components/editor/plugins/basic-marks-kit.tsx index d2fe62817..4190efc29 100644 --- a/surfsense_web/components/editor/plugins/basic-marks-kit.tsx +++ b/surfsense_web/components/editor/plugins/basic-marks-kit.tsx @@ -5,7 +5,6 @@ import { CodePlugin, HighlightPlugin, ItalicPlugin, - KbdPlugin, StrikethroughPlugin, SubscriptPlugin, SuperscriptPlugin, @@ -14,7 +13,6 @@ import { import { CodeLeaf } from '@/components/ui/code-node'; import { HighlightLeaf } from '@/components/ui/highlight-node'; -import { KbdLeaf } from '@/components/ui/kbd-node'; export const BasicMarksKit = [ BoldPlugin, @@ -37,5 +35,4 @@ export const BasicMarksKit = [ node: { component: HighlightLeaf }, shortcuts: { toggle: { keys: 'mod+shift+h' } }, }), - KbdPlugin.withComponent(KbdLeaf), ]; diff --git a/surfsense_web/components/ui/fixed-toolbar-buttons.tsx b/surfsense_web/components/ui/fixed-toolbar-buttons.tsx index 7fef1c443..c3b421a63 100644 --- a/surfsense_web/components/ui/fixed-toolbar-buttons.tsx +++ b/surfsense_web/components/ui/fixed-toolbar-buttons.tsx @@ -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() { - - - - {/* Save button — appears when in editing mode with unsaved changes */} {onSave && hasUnsavedChanges && ( diff --git a/surfsense_web/components/ui/floating-toolbar-buttons.tsx b/surfsense_web/components/ui/floating-toolbar-buttons.tsx index 525ff5e2f..e819ee91c 100644 --- a/surfsense_web/components/ui/floating-toolbar-buttons.tsx +++ b/surfsense_web/components/ui/floating-toolbar-buttons.tsx @@ -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() { - - - ); } diff --git a/surfsense_web/components/ui/insert-toolbar-button.tsx b/surfsense_web/components/ui/insert-toolbar-button.tsx index 420d05b69..452110df5 100644 --- a/surfsense_web/components/ui/insert-toolbar-button.tsx +++ b/surfsense_web/components/ui/insert-toolbar-button.tsx @@ -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: , + label: 'Superscript', + value: KEYS.sup, + }, + { + icon: , + 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) { diff --git a/surfsense_web/components/ui/kbd-node.tsx b/surfsense_web/components/ui/kbd-node.tsx deleted file mode 100644 index 65ca86d34..000000000 --- a/surfsense_web/components/ui/kbd-node.tsx +++ /dev/null @@ -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 ( - - {props.children} - - ); -} diff --git a/surfsense_web/components/ui/more-toolbar-button.tsx b/surfsense_web/components/ui/more-toolbar-button.tsx deleted file mode 100644 index c24a242d7..000000000 --- a/surfsense_web/components/ui/more-toolbar-button.tsx +++ /dev/null @@ -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 ( - - - - - - - - - - { - editor.tf.toggleMark(KEYS.kbd); - editor.tf.collapse({ edge: 'end' }); - editor.tf.focus(); - }} - > - - Keyboard input - - - { - editor.tf.toggleMark(KEYS.sup, { - remove: KEYS.sub, - }); - editor.tf.focus(); - }} - > - - Superscript - {/* (⌘+,) */} - - { - editor.tf.toggleMark(KEYS.sub, { - remove: KEYS.sup, - }); - editor.tf.focus(); - }} - > - - Subscript - {/* (⌘+.) */} - - - { - insertInlineEquation(editor); - editor.tf.focus(); - }} - > - - Equation - - - { - editor.tf.insertNodes( - editor.api.create.block({ type: KEYS.callout }), - { select: true } - ); - editor.tf.focus(); - }} - > - - Callout - - - - - ); -}