From d95cb133e3de84dad78441825f0fdbcff2cc393e Mon Sep 17 00:00:00 2001 From: zbeyens Date: Sat, 28 Dec 2024 03:15:31 +0000 Subject: [PATCH] fix --- package.json | 2 +- pnpm-lock.yaml | 12 +- .../plate-ui/fixed-toolbar-buttons.tsx | 2 + .../plate-ui/font-size-toolbar-button.tsx | 150 ++++++++++++++++++ .../plate-ui/indent-list-toolbar-button.tsx | 12 +- .../plate-ui/insert-dropdown-menu.tsx | 29 ++-- .../plate-ui/media-toolbar-button.tsx | 3 +- src/components/plate-ui/toolbar.tsx | 46 +++--- 8 files changed, 208 insertions(+), 48 deletions(-) create mode 100644 src/components/plate-ui/font-size-toolbar-button.tsx diff --git a/package.json b/package.json index fe9e13e..2200f50 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "@udecode/plate-emoji": "41.0.0", "@udecode/plate-excalidraw": "41.0.0", "@udecode/plate-floating": "41.0.0", - "@udecode/plate-font": "41.0.0", + "@udecode/plate-font": "41.0.12", "@udecode/plate-heading": "41.0.0", "@udecode/plate-highlight": "41.0.0", "@udecode/plate-horizontal-rule": "41.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ba57923..af7cfbe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -117,8 +117,8 @@ importers: specifier: 41.0.0 version: 41.0.0(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0) '@udecode/plate-font': - specifier: 41.0.0 - version: 41.0.0(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0) + specifier: 41.0.12 + version: 41.0.12(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0) '@udecode/plate-heading': specifier: 41.0.0 version: 41.0.0(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0) @@ -1715,10 +1715,10 @@ packages: slate-hyperscript: '>=0.66.0' slate-react: '>=0.111.0' - '@udecode/plate-font@41.0.0': - resolution: {integrity: sha512-Jl/y4Q32RGSvD6qMU09WR5xGEy94iu9AVhA9g41k/4sQQkDVSbgBGCY9czPFUnN97d2jSmcRpBEoj7RE+j7lFQ==} + '@udecode/plate-font@41.0.12': + resolution: {integrity: sha512-voD6P7o4lfCcq/msOLL6tcYBbYwFEbhoeY99AXBmnL2CxqZhHbM5BfKbK4D2AhAM0DXY630V66XOrG5mXjVcug==} peerDependencies: - '@udecode/plate-common': '>=41.0.0' + '@udecode/plate-common': '>=41.0.5' react: '>=16.8.0' react-dom: '>=16.8.0' slate: '>=0.112.0' @@ -5974,7 +5974,7 @@ snapshots: slate-hyperscript: 0.100.0(slate@0.112.0) slate-react: 0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0) - '@udecode/plate-font@41.0.0(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0)': + '@udecode/plate-font@41.0.12(@udecode/plate-common@41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0)': dependencies: '@udecode/plate-common': 41.0.5(@types/react@18.3.12)(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.25.0)(slate-dom@0.111.0(slate@0.112.0))(slate-history@0.110.3(slate@0.112.0))(slate-hyperscript@0.100.0(slate@0.112.0))(slate-react@0.112.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate-dom@0.111.0(slate@0.112.0))(slate@0.112.0))(slate@0.112.0) lodash: 4.17.21 diff --git a/src/components/plate-ui/fixed-toolbar-buttons.tsx b/src/components/plate-ui/fixed-toolbar-buttons.tsx index 8ea968f..8ad418e 100644 --- a/src/components/plate-ui/fixed-toolbar-buttons.tsx +++ b/src/components/plate-ui/fixed-toolbar-buttons.tsx @@ -42,6 +42,7 @@ import { ColorDropdownMenu } from './color-dropdown-menu'; import { CommentToolbarButton } from './comment-toolbar-button'; import { EmojiDropdownMenu } from './emoji-dropdown-menu'; import { ExportToolbarButton } from './export-toolbar-button'; +import { FontSizeToolbarButton } from './font-size-toolbar-button'; import { RedoToolbarButton, UndoToolbarButton } from './history-toolbar-button'; import { BulletedIndentListToolbarButton, @@ -88,6 +89,7 @@ export function FixedToolbarButtons() { + diff --git a/src/components/plate-ui/font-size-toolbar-button.tsx b/src/components/plate-ui/font-size-toolbar-button.tsx new file mode 100644 index 0000000..4338957 --- /dev/null +++ b/src/components/plate-ui/font-size-toolbar-button.tsx @@ -0,0 +1,150 @@ +'use client'; +import { useState } from 'react'; + +import { cn } from '@udecode/cn'; +import { type TElement, getAboveNode, getMarks } from '@udecode/plate-common'; +import { + focusEditor, + useEditorPlugin, + useEditorSelector, +} from '@udecode/plate-common/react'; +import { BaseFontSizePlugin, toUnitLess } from '@udecode/plate-font'; +import { FontSizePlugin } from '@udecode/plate-font/react'; +import { HEADING_KEYS } from '@udecode/plate-heading'; +import { Minus, Plus } from 'lucide-react'; + +import { Popover, PopoverContent, PopoverTrigger } from './popover'; +import { ToolbarButton } from './toolbar'; + +const DEFAULT_FONT_SIZE = '16'; + +const FONT_SIZE_MAP = { + [HEADING_KEYS.h1]: '36', + [HEADING_KEYS.h2]: '24', + [HEADING_KEYS.h3]: '20', +} as const; + +const FONT_SIZES = [ + '8', + '9', + '10', + '12', + '14', + '16', + '18', + '24', + '30', + '36', + '48', + '60', + '72', + '96', +] as const; + +export function FontSizeToolbarButton() { + const [inputValue, setInputValue] = useState(DEFAULT_FONT_SIZE); + const [isFocused, setIsFocused] = useState(false); + const { api, editor } = useEditorPlugin(BaseFontSizePlugin); + + const cursorFontSize = useEditorSelector((editor) => { + const marks = getMarks(editor); + const fontSize = marks?.[FontSizePlugin.key]; + + if (fontSize) { + return toUnitLess(fontSize as string); + } + + const [node] = + getAboveNode(editor, { + at: editor.selection?.focus, + }) || []; + + return node?.type && node.type in FONT_SIZE_MAP + ? FONT_SIZE_MAP[node.type as keyof typeof FONT_SIZE_MAP] + : DEFAULT_FONT_SIZE; + }, []); + + const handleInputChange = () => { + const newSize = toUnitLess(inputValue); + + if (Number.parseInt(newSize) < 1 || Number.parseInt(newSize) > 100) { + focusEditor(editor); + + return; + } + if (newSize !== toUnitLess(cursorFontSize)) { + api.fontSize.setMark(`${newSize}px`); + } + + focusEditor(editor); + }; + + const handleFontSizeChange = (delta: number) => { + const newSize = Number(displayValue) + delta; + api.fontSize.setMark(`${newSize}px`); + focusEditor(editor); + }; + + const displayValue = isFocused ? inputValue : cursorFontSize; + + return ( +
+ handleFontSizeChange(-1)}> + + + + + + { + setIsFocused(false); + handleInputChange(); + }} + onChange={(e) => setInputValue(e.target.value)} + onFocus={() => { + setIsFocused(true); + setInputValue(toUnitLess(cursorFontSize)); + }} + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.preventDefault(); + handleInputChange(); + } + }} + data-plate-focus="true" + type="text" + /> + + e.preventDefault()} + > + {FONT_SIZES.map((size) => ( + + ))} + + + + handleFontSizeChange(1)}> + + +
+ ); +} diff --git a/src/components/plate-ui/indent-list-toolbar-button.tsx b/src/components/plate-ui/indent-list-toolbar-button.tsx index c1d809a..e9ead8c 100644 --- a/src/components/plate-ui/indent-list-toolbar-button.tsx +++ b/src/components/plate-ui/indent-list-toolbar-button.tsx @@ -41,15 +41,16 @@ export function NumberedIndentListToolbarButton() { ); return ( - + { + onClick={() => toggleIndentList(editor, { listStyleType: ListStyleType.Decimal, - }); - }} + }) + } data-state={pressed ? 'on' : 'off'} + tooltip="Numbered List" > @@ -128,7 +129,7 @@ export function BulletedIndentListToolbarButton() { ); return ( - + { @@ -137,6 +138,7 @@ export function BulletedIndentListToolbarButton() { }); }} data-state={pressed ? 'on' : 'off'} + tooltip="Bulleted List" > diff --git a/src/components/plate-ui/insert-dropdown-menu.tsx b/src/components/plate-ui/insert-dropdown-menu.tsx index b53ca0a..e9ac6a5 100644 --- a/src/components/plate-ui/insert-dropdown-menu.tsx +++ b/src/components/plate-ui/insert-dropdown-menu.tsx @@ -19,6 +19,10 @@ import { TocPlugin } from '@udecode/plate-heading/react'; import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react'; import { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list'; import { LinkPlugin } from '@udecode/plate-link/react'; +import { + EquationPlugin, + InlineEquationPlugin, +} from '@udecode/plate-math/react'; import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react'; import { TablePlugin } from '@udecode/plate-table/react'; import { TogglePlugin } from '@udecode/plate-toggle/react'; @@ -40,6 +44,7 @@ import { PilcrowIcon, PlusIcon, QuoteIcon, + RadicalIcon, SquareIcon, TableIcon, TableOfContentsIcon, @@ -192,12 +197,12 @@ const groups: Group[] = [ label: '3 columns', value: 'action_three_columns', }, - // { - // focusEditor: false, - // icon: , - // label: 'Equation', - // value: EquationPlugin.key, - // }, + { + focusEditor: false, + icon: , + label: 'Equation', + value: EquationPlugin.key, + }, ].map((item) => ({ ...item, onSelect: (editor, value) => { @@ -219,12 +224,12 @@ const groups: Group[] = [ label: 'Date', value: DatePlugin.key, }, - // { - // focusEditor: false, - // icon: , - // label: 'Inline Equation', - // value: InlineEquationPlugin.key, - // }, + { + focusEditor: false, + icon: , + label: 'Inline Equation', + value: InlineEquationPlugin.key, + }, ].map((item) => ({ ...item, onSelect: (editor, value) => { diff --git a/src/components/plate-ui/media-toolbar-button.tsx b/src/components/plate-ui/media-toolbar-button.tsx index fa9689a..25a3e8c 100644 --- a/src/components/plate-ui/media-toolbar-button.tsx +++ b/src/components/plate-ui/media-toolbar-button.tsx @@ -114,9 +114,8 @@ export function MediaToolbarButton({ } }} pressed={openState.open} - tooltip={currentConfig.tooltip} > - + {currentConfig.icon} diff --git a/src/components/plate-ui/toolbar.tsx b/src/components/plate-ui/toolbar.tsx index 1d27f55..38d2064 100644 --- a/src/components/plate-ui/toolbar.tsx +++ b/src/components/plate-ui/toolbar.tsx @@ -170,28 +170,30 @@ export const ToolbarSplitButton = React.forwardRef< ); }); -export const ToolbarSplitButtonPrimary = React.forwardRef< - React.ElementRef, - Omit, 'value'> ->(({ children, className, size, variant, ...props }, ref) => { - return ( - - {children} - - ); -}); +export const ToolbarSplitButtonPrimary = withTooltip( + React.forwardRef< + React.ElementRef, + Omit, 'value'> + >(({ children, className, size, variant, ...props }, ref) => { + return ( + + {children} + + ); + }) +); export const ToolbarSplitButtonSecondary = React.forwardRef< HTMLButtonElement,