feat: properly handle isDisabled prop [BBEE-797] (#1816)

feat: properly handle isDisabled props within RichText, Markdown, SingleLine and MultipleLine editos
contentful · Dec 9, 2024 · b1531d2 · b1531d2
1 parent b8b66f9
commit b1531d2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/packages/markdown/src/MarkdownEditor.tsx b/packages/markdown/src/MarkdownEditor.tsx
@@ -42,11 +42,11 @@ export interface MarkdownEditorProps {
 
   previewComponents?: PreviewComponents;
   onReady?: Function;
+  isDisabled?: boolean;
 }
 
 export function MarkdownEditor(
   props: MarkdownEditorProps & {
-    disabled: boolean;
     value: string | null | undefined;
     saveValueToSDK: Function;
     externalReset?: number;
@@ -78,9 +78,9 @@ export function MarkdownEditor(
 
   React.useEffect(() => {
     if (editor) {
-      editor.setReadOnly(props.disabled);
+      editor.setReadOnly(!!props.isDisabled);
     }
-  }, [editor, props.disabled]);
+  }, [editor, props.isDisabled]);
 
   React.useEffect(() => {
     // Received new props from external
@@ -90,7 +90,7 @@ export function MarkdownEditor(
     }
   }, [props.value, props.externalReset, editor]);
 
-  const isActionDisabled = editor === null || props.disabled || selectedTab !== 'editor';
+  const isActionDisabled = editor === null || props.isDisabled || selectedTab !== 'editor';
 
   const direction = props.sdk.locales.direction[props.sdk.field.locale] ?? 'ltr';
 
@@ -126,7 +126,7 @@ export function MarkdownEditor(
         direction={direction}
         onReady={(editor) => {
           editor.setContent(props.value ?? '');
-          editor.setReadOnly(props.disabled);
+          editor.setReadOnly(!!props.isDisabled);
           setEditor(editor);
           editor.events.onChange((value: string) => {
             // Trim empty lines
@@ -161,12 +161,13 @@ export function MarkdownEditorConnected(props: MarkdownEditorProps) {
       debounce={300}
       field={props.sdk.field}
       isInitiallyDisabled={props.isInitiallyDisabled}
+      isDisabled={props.isDisabled}
     >
       {({ value, disabled, setValue, externalReset }) => (
         <MarkdownEditor
           {...props}
           value={value}
-          disabled={disabled}
+          isDisabled={disabled}
           saveValueToSDK={setValue}
           externalReset={externalReset}
         />

diff --git a/packages/multiple-line/src/MultipleLineEditor.tsx b/packages/multiple-line/src/MultipleLineEditor.tsx
@@ -32,10 +32,12 @@ export interface MultipleLineEditorProps {
    * sdk.locales
    */
   locales: LocalesAPI;
+
+  isDisabled?: boolean;
 }
 
 export function MultipleLineEditor(props: MultipleLineEditorProps) {
-  const { field, locales, isInitiallyDisabled, withCharValidation } = props;
+  const { field, locales, isInitiallyDisabled, withCharValidation, isDisabled } = props;
 
   const constraints = ConstraintsUtils.fromFieldValidations(
     field.validations,
@@ -45,7 +47,11 @@ export function MultipleLineEditor(props: MultipleLineEditorProps) {
   const direction = locales.direction[field.locale] || 'ltr';
 
   return (
-    <FieldConnector<string> field={field} isInitiallyDisabled={isInitiallyDisabled}>
+    <FieldConnector<string>
+      field={field}
+      isInitiallyDisabled={isInitiallyDisabled}
+      isDisabled={isDisabled}
+    >
       {({ errors, disabled, value, setValue }) => {
         return (
           <div data-test-id="multiple-line-editor">

diff --git a/packages/rich-text/src/RichTextEditor.tsx b/packages/rich-text/src/RichTextEditor.tsx
@@ -113,7 +113,15 @@ export const ConnectedRichTextEditor = (props: ConnectedRichTextProps) => {
 };
 
 const RichTextEditor = (props: RichTextProps) => {
-  const { sdk, isInitiallyDisabled, onAction, restrictedMarks, onChange, ...otherProps } = props;
+  const {
+    sdk,
+    isInitiallyDisabled,
+    onAction,
+    restrictedMarks,
+    onChange,
+    isDisabled,
+    ...otherProps
+  } = props;
   const isEmptyValue = React.useCallback(
     (value) => !value || deepEquals(value, Contentful.EMPTY_DOCUMENT),
     []
@@ -132,6 +140,7 @@ const RichTextEditor = (props: RichTextProps) => {
       field={sdk.field}
       isInitiallyDisabled={isInitiallyDisabled}
       isEmptyValue={isEmptyValue}
+      isDisabled={isDisabled}
     >
       {({ lastRemoteValue, disabled, setValue }) => (
         <ConnectedRichTextEditor