fix: broken rich text onChange prop (#1740)

* fix: broken rich text onChange prop

* chore: remove accidental code

* refactor: resolve comments

* refactor: make handler look nicer

packages/rich-text/src/RichTextEditor.tsx

@@ -20,20 +20,38 @@ import { SyncEditorChanges } from './SyncEditorChanges';
 import Toolbar from './Toolbar';
 import StickyToolbarWrapper from './Toolbar/components/StickyToolbarWrapper';
 
-type ConnectedProps = {
+type RichTextProps = {
  sdk: FieldAppSDK;
+ isInitiallyDisabled: boolean;
  onAction?: RichTextTrackingActionHandler;
+ restrictedMarks?: string[];
+ // For passing down to connected editor, some refactoring needed
  minHeight?: string | number;
  maxHeight?: string | number;
  value?: Contentful.Document;
  isDisabled?: boolean;
- onChange?: (doc: Contentful.Document) => unknown;
  isToolbarHidden?: boolean;
  actionsDisabled?: boolean;
+ /**
+ * @deprecated Use `sdk.field.onValueChanged` instead
+ */
+ onChange?: (doc: Contentful.Document) => unknown;
+};
+
+type ConnectedRichTextProps = {
+ sdk: FieldAppSDK;
+ onAction?: RichTextTrackingActionHandler;
+ onChange?: (doc: Contentful.Document) => unknown;
  restrictedMarks?: string[];
+ minHeight?: string | number;
+ maxHeight?: string | number;
+ value?: Contentful.Document;
+ isDisabled?: boolean;
+ isToolbarHidden?: boolean;
+ actionsDisabled?: boolean;
 };
 
-export const ConnectedRichTextEditor = (props: ConnectedProps) => {
+export const ConnectedRichTextEditor = (props: ConnectedRichTextProps) => {
  const { sdk, onAction, restrictedMarks } = props;
 
  const id = getContentfulEditorId(sdk);
@@ -90,14 +108,18 @@ export const ConnectedRichTextEditor = (props: ConnectedProps) => {
  );
 };
 
-type Props = ConnectedProps & { isInitiallyDisabled: boolean };
-
-const RichTextEditor = (props: Props) => {
- const { sdk, isInitiallyDisabled, onAction, restrictedMarks, ...otherProps } = props;
+const RichTextEditor = (props: RichTextProps) => {
+ const { sdk, isInitiallyDisabled, onAction, restrictedMarks, onChange, ...otherProps } = props;
  const isEmptyValue = React.useCallback(
  (value) => !value || deepEquals(value, Contentful.EMPTY_DOCUMENT),
  []
  );
+ React.useEffect(() => {
+ if (!onChange) {
+ return;
+ }
+ return sdk.field.onValueChanged(onChange);
+ }, [onChange, sdk.field]);
 
  const id = getContentfulEditorId(props.sdk);
  return (