From f31b4c380da53dc2d4ad373a0e03baa72c8f8d42 Mon Sep 17 00:00:00 2001 From: Hamza HADJ AISSA Date: Tue, 30 Jul 2024 11:58:24 +0100 Subject: [PATCH] fix: corrected toggle calls for Superscript and Subscript --- .changeset/dull-dryers-sip.md | 9 +++++++++ .../playground-more-dropdown-menu.tsx | 4 ++-- .../default/plate-ui/more-dropdown-menu.tsx | 8 ++++---- .../src/hooks/useHTMLInputCursorState.ts | 20 ++++++++++++++----- .../src/createRemoveEmptyNodesPlugin.ts | 2 +- packages/plate-utils/src/useFormInputProps.ts | 13 ++++++------ packages/selection/src/queries/index.ts | 2 +- .../src/queries/getTableColumnCount.spec.tsx | 4 ++-- .../plate-ui/more-dropdown-menu.tsx | 8 ++++---- 9 files changed, 45 insertions(+), 25 deletions(-) create mode 100644 .changeset/dull-dryers-sip.md diff --git a/.changeset/dull-dryers-sip.md b/.changeset/dull-dryers-sip.md new file mode 100644 index 0000000000..af0d7c92f9 --- /dev/null +++ b/.changeset/dull-dryers-sip.md @@ -0,0 +1,9 @@ +--- +'@udecode/plate-normalizers': patch +'@udecode/plate-utils': patch +'@udecode/plate-selection': patch +'@udecode/plate-combobox': patch +'@udecode/plate-table': patch +--- + +fix: corrected toggle calls for Superscript and Subscript diff --git a/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx b/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx index ece1669f6a..ea686c43d5 100644 --- a/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx +++ b/apps/www/src/components/plate-ui/playground-more-dropdown-menu.tsx @@ -67,7 +67,7 @@ export function PlaygroundMoreDropdownMenu(props: DropdownMenuProps) { { toggleMark(editor, { - clear: MARK_SUBSCRIPT, + clear: [MARK_SUBSCRIPT, MARK_SUPERSCRIPT], key: MARK_SUPERSCRIPT, }); focusEditor(editor); @@ -80,7 +80,7 @@ export function PlaygroundMoreDropdownMenu(props: DropdownMenuProps) { { toggleMark(editor, { - clear: MARK_SUPERSCRIPT, + clear: [MARK_SUPERSCRIPT, MARK_SUBSCRIPT], key: MARK_SUBSCRIPT, }); focusEditor(editor); diff --git a/apps/www/src/registry/default/plate-ui/more-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/more-dropdown-menu.tsx index 1aef721eb3..1ba3af0c1b 100644 --- a/apps/www/src/registry/default/plate-ui/more-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/more-dropdown-menu.tsx @@ -35,8 +35,8 @@ export function MoreDropdownMenu(props: DropdownMenuProps) { { toggleMark(editor, { - clear: MARK_SUPERSCRIPT, - key: MARK_SUBSCRIPT, + clear: [MARK_SUBSCRIPT, MARK_SUPERSCRIPT], + key: MARK_SUPERSCRIPT, }); focusEditor(editor); }} @@ -48,8 +48,8 @@ export function MoreDropdownMenu(props: DropdownMenuProps) { { toggleMark(editor, { - clear: MARK_SUBSCRIPT, - key: MARK_SUPERSCRIPT, + clear: [MARK_SUPERSCRIPT, MARK_SUBSCRIPT], + key: MARK_SUBSCRIPT, }); focusEditor(editor); }} diff --git a/packages/combobox/src/hooks/useHTMLInputCursorState.ts b/packages/combobox/src/hooks/useHTMLInputCursorState.ts index 8ef10f0f61..2060a989ff 100644 --- a/packages/combobox/src/hooks/useHTMLInputCursorState.ts +++ b/packages/combobox/src/hooks/useHTMLInputCursorState.ts @@ -1,4 +1,10 @@ -import { type RefObject, useCallback, useEffect, useState, useMemo } from 'react'; +import { + type RefObject, + useCallback, + useEffect, + useMemo, + useState, +} from 'react'; import type { ComboboxInputCursorState } from '../types'; @@ -12,6 +18,7 @@ export const useHTMLInputCursorState = ( // Wait for events to finish processing setTimeout(() => { if (!ref.current) return; + const { selectionEnd, selectionStart, value } = ref.current; setAtStart(selectionStart === 0); setAtEnd(selectionEnd === value.length); @@ -45,8 +52,11 @@ export const useHTMLInputCursorState = ( }; }, [recomputeCursorState, ref]); - return useMemo(() => ({ - atStart, - atEnd, - }), [atStart, atEnd]); + return useMemo( + () => ({ + atEnd, + atStart, + }), + [atStart, atEnd] + ); }; diff --git a/packages/normalizers/src/createRemoveEmptyNodesPlugin.ts b/packages/normalizers/src/createRemoveEmptyNodesPlugin.ts index af9e6b944c..2595b79293 100644 --- a/packages/normalizers/src/createRemoveEmptyNodesPlugin.ts +++ b/packages/normalizers/src/createRemoveEmptyNodesPlugin.ts @@ -6,7 +6,7 @@ export interface RemoveEmptyNodesPlugin { types?: string | string[]; } -export const KEY_REMOVE_EMPTY_NODES = 'removeEmptyNodes' +export const KEY_REMOVE_EMPTY_NODES = 'removeEmptyNodes'; /** @see {@link withRemoveEmptyNodes} */ export const createRemoveEmptyNodesPlugin = diff --git a/packages/plate-utils/src/useFormInputProps.ts b/packages/plate-utils/src/useFormInputProps.ts index cdf20ccf18..c9fd5c82b6 100644 --- a/packages/plate-utils/src/useFormInputProps.ts +++ b/packages/plate-utils/src/useFormInputProps.ts @@ -1,7 +1,7 @@ interface InputProps { /** - * Should we activate the onKeyDownCapture handler to preventDefault when - * the user presses enter? + * Should we activate the onKeyDownCapture handler to preventDefault when the + * user presses enter? */ preventDefaultOnEnterKeydown?: boolean; } @@ -10,8 +10,9 @@ interface InputProps { * Hook to allow the user to spread a set of predefined props to the Div wrapper * of an Input element * - * @param param0 an options object which can be expanded to add further functionality - * @returns a props object which can be spread onto the element + * @param param0 An options object which can be expanded to add further + * functionality + * @returns A props object which can be spread onto the element */ export const useFormInputProps = (options?: InputProps) => { // Nothing provided to just return an empty object which can still be spread. @@ -33,8 +34,8 @@ export const useFormInputProps = (options?: InputProps) => { * By calling preventDefault we short circuit the form's submission thus * allowing the user to continue filling in the other fields * - * @param e The original event which was provided by the VDOM - * implement their own behaviour on this event + * @param e The original event which was provided by the VDOM implement their + * own behaviour on this event */ const handleEnterKeydownCapture = ( e: React.KeyboardEvent diff --git a/packages/selection/src/queries/index.ts b/packages/selection/src/queries/index.ts index 1372569caf..867c9bd8b8 100644 --- a/packages/selection/src/queries/index.ts +++ b/packages/selection/src/queries/index.ts @@ -3,4 +3,4 @@ */ export * from './getSelectedBlocks'; -export * from "./isNodeBlockSelected"; +export * from './isNodeBlockSelected'; diff --git a/packages/table/src/queries/getTableColumnCount.spec.tsx b/packages/table/src/queries/getTableColumnCount.spec.tsx index 6965069ce8..009edb8f25 100644 --- a/packages/table/src/queries/getTableColumnCount.spec.tsx +++ b/packages/table/src/queries/getTableColumnCount.spec.tsx @@ -1,6 +1,6 @@ +import type { TElement } from '@udecode/slate'; import { getTableColumnCount } from './getTableColumnCount'; -import { TElement } from '@udecode/slate'; describe('getTableColumnCount', () => { it('should return 0 if tableNode has no children', () => { @@ -54,4 +54,4 @@ describe('getTableColumnCount', () => { const result = getTableColumnCount(tableNode); expect(result).toBe(3); }); -}); \ No newline at end of file +}); diff --git a/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx index 78729ac458..6c14ad527a 100644 --- a/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/more-dropdown-menu.tsx @@ -33,8 +33,8 @@ export function MoreDropdownMenu(props: DropdownMenuProps) { { toggleMark(editor, { - key: MARK_SUBSCRIPT, - clear: MARK_SUPERSCRIPT, + clear: [MARK_SUBSCRIPT, MARK_SUPERSCRIPT], + key: MARK_SUPERSCRIPT, }); focusEditor(editor); }} @@ -46,8 +46,8 @@ export function MoreDropdownMenu(props: DropdownMenuProps) { { toggleMark(editor, { - key: MARK_SUPERSCRIPT, - clear: MARK_SUBSCRIPT, + clear: [MARK_SUPERSCRIPT, MARK_SUBSCRIPT], + key: MARK_SUBSCRIPT, }); focusEditor(editor); }}