Merge pull request #3346 from yf-yang/expose-slate-onchange

feat: expose onValueChange and onSelectionChange from Slate component

.changeset/rich-clouds-attack.md

@@ -0,0 +1,6 @@
+---
+"@udecode/plate-core": patch
+"@udecode/slate-react": patch
+---
+
+feat: expose onValueChange and onSelectionChange from Slate component, following https://github.com/ianstormtaylor/slate/pull/5526

packages/core/src/client/components/Plate.tsx

@@ -21,7 +21,14 @@ export interface PlateProps<
 > extends Partial<
     Pick<
       PlateStoreState<V, E>,
-      'editor' | 'id' | 'primary' | 'readOnly' | 'value'
+      | 'editor'
+      | 'id'
+      | 'onChange'
+      | 'onSelectionChange'
+      | 'onValueChange'
+      | 'primary'
+      | 'readOnly'
+      | 'value'
     >
   > {
   children: React.ReactNode;
@@ -69,9 +76,6 @@ export interface PlateProps<
    */
   normalizeInitialValue?: boolean;
 
-  /** Controlled callback called when the editor state changes. */
-  onChange?: (value: V) => void;
-
   plugins?: PlatePlugin[];
   renderElement?: TEditableProps['renderElement'];
   renderLeaf?: TEditableProps['renderLeaf'];
@@ -91,6 +95,8 @@ function PlateInner<
   maxLength,
   normalizeInitialValue: shouldNormalizeInitialValue,
   onChange,
+  onSelectionChange,
+  onValueChange,
   plugins: pluginsProp,
   primary,
   readOnly,
@@ -149,6 +155,10 @@ function PlateInner<
       editorRef={editorRef as PlateStoreState['editorRef']}
       id={id}
       onChange={onChange as PlateStoreState['onChange']}
+      onSelectionChange={
+        onSelectionChange as PlateStoreState['onSelectionChange']
+      }
+      onValueChange={onValueChange as PlateStoreState['onValueChange']}
       plugins={editor.plugins as any}
       primary={primary}
       rawPlugins={pluginsProp}

packages/core/src/client/hooks/useSlateProps.ts

@@ -21,6 +21,8 @@ export const useSlateProps = <V extends Value>({
   const value = usePlateSelectors(id).value();
   const setValue = usePlateActions(id).value();
   const onChangeProp = usePlateSelectors(id).onChange();
+  const onValueChangeProp = usePlateSelectors(id).onValueChange();
+  const onSelectionChangeProp = usePlateSelectors(id).onSelectionChange();
 
   const onChange = React.useCallback(
     (newValue: V) => {
@@ -35,13 +37,25 @@ export const useSlateProps = <V extends Value>({
     [editor, setValue, onChangeProp]
   );
 
+  const onValueChange = React.useMemo(
+    () => onValueChangeProp,
+    [onValueChangeProp]
+  );
+
+  const onSelectionChange = React.useMemo(
+    () => onSelectionChangeProp,
+    [onSelectionChangeProp]
+  );
+
   return React.useMemo(() => {
     return {
       editor,
       initialValue: value,
       key: editor.key,
       onChange,
+      onSelectionChange,
+      onValueChange,
       value,
     };
-  }, [editor, onChange, value]);
+  }, [editor, onChange, onSelectionChange, onValueChange, value]);
 };

packages/core/src/client/stores/plate/createPlateStore.ts

@@ -36,6 +36,8 @@ export const createPlateStore = <
   id,
   isMounted = false,
   onChange = null,
+  onSelectionChange = null,
+  onValueChange = null,
   plugins = [],
   primary = true,
   rawPlugins = [],
@@ -56,6 +58,8 @@ export const createPlateStore = <
       id,
       isMounted,
       onChange,
+      onSelectionChange,
+      onValueChange,
       plugins,
       primary,
       rawPlugins,

packages/core/src/shared/types/PlateStore.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { Value } from '@udecode/slate';
+import type { TSelection, Value } from '@udecode/slate';
 
 import type { PlateId } from '../../client';
 import type { PlateEditor } from './PlateEditor';
@@ -60,6 +60,12 @@ export type PlateStoreState<
   /** Controlled callback called when the editor state changes. */
   onChange: (value: V) => void;
 
+  /** Controlled callback called when the editor.selection changes. */
+  onSelectionChange: (selection: TSelection) => void;
+
+  /** Controlled callback called when the editor.children changes. */
+  onValueChange: (value: V) => void;
+
   /**
    * Whether the editor is primary. If no editor is active, then PlateController
    * will use the first-mounted primary editor.

packages/slate-react/src/types/SlateProps.ts

@@ -7,6 +7,8 @@ import type { ReactEditor } from 'slate-react';
 export interface SlateProps extends UnknownObject {
   children: React.ReactNode;
   editor: ReactEditor;
-  onChange: (value: SlateProps['value']) => void;
-  value: TDescendant[];
+  initialValue: TDescendant[];
+  onChange?: (value: TDescendant[]) => void;
+  onSelectionChange?: (selection: Selection) => void;
+  onValueChange?: (value: TDescendant[]) => void;
 }