fix: //issues/6812 show code widget content if initially hidden (#7131)

Co-authored-by: Anze Demsar <[email protected]>

Author: hip3r

packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js

@@ -147,6 +147,7 @@ class EditorControl extends React.Component {
     isFieldDuplicate: PropTypes.func,
     isFieldHidden: PropTypes.func,
     locale: PropTypes.string,
+    isParentListCollapsed: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -210,6 +211,7 @@ class EditorControl extends React.Component {
       isFieldDuplicate,
       isFieldHidden,
       locale,
+      isParentListCollapsed,
     } = this.props;
 
     const widgetName = field.get('widget');
@@ -332,6 +334,7 @@ class EditorControl extends React.Component {
               isFieldHidden={isFieldHidden}
               isLoadingAsset={isLoadingAsset}
               locale={locale}
+              isParentListCollapsed={isParentListCollapsed}
             />
             {fieldHint && (
               <ControlHint active={isSelected || this.state.styleActive} error={hasErrors}>

packages/decap-cms-core/src/components/Editor/EditorControlPane/Widget.js

@@ -72,6 +72,7 @@ export default class Widget extends Component {
     isFieldDuplicate: PropTypes.func,
     isFieldHidden: PropTypes.func,
     locale: PropTypes.string,
+    isParentListCollapsed: PropTypes.bool,
   };
 
   shouldComponentUpdate(nextProps) {
@@ -298,6 +299,7 @@ export default class Widget extends Component {
       isFieldDuplicate,
       isFieldHidden,
       locale,
+      isParentListCollapsed,
     } = this.props;
 
     return React.createElement(controlComponent, {
@@ -350,6 +352,7 @@ export default class Widget extends Component {
       isFieldDuplicate,
       isFieldHidden,
       locale,
+      isParentListCollapsed,
     });
   }
 }

packages/decap-cms-widget-code/src/CodeControl.js

@@ -68,6 +68,7 @@ export default class CodeControl extends React.Component {
     forID: PropTypes.string.isRequired,
     classNameWrapper: PropTypes.string.isRequired,
     widget: PropTypes.object.isRequired,
+    isParentListCollapsed: PropTypes.bool,
   };
 
   keys = this.getKeys(this.props.field);
@@ -83,9 +84,16 @@ export default class CodeControl extends React.Component {
     lastKnownValue: this.valueIsMap() ? this.props.value?.get(this.keys.code) : this.props.value,
   };
 
+  visibility = {
+    isInvisibleOnInit: this.props.isParentListCollapsed === true,
+    isRefreshedAfterInvisible: false,
+  };
+
   shouldComponentUpdate(nextProps, nextState) {
     return (
-      !isEqual(this.state, nextState) || this.props.classNameWrapper !== nextProps.classNameWrapper
+      !isEqual(this.state, nextState) ||
+      this.props.classNameWrapper !== nextProps.classNameWrapper ||
+      (this.visibility.isInvisibleOnInit && !this.visibility.isRefreshedAfterInvisible)
     );
   }
 
@@ -97,6 +105,14 @@ export default class CodeControl extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
     this.updateCodeMirrorProps(prevState);
+    // when initially hidden and then shown, codeMirror content is not visible
+    if (
+      this.visibility.isInvisibleOnInit &&
+      !this.visibility.isRefreshedAfterInvisible &&
+      !this.props.listCollapsed
+    ) {
+      this.refreshCodeMirrorInstance();
+    }
   }
 
   updateCodeMirrorProps(prevState) {
@@ -107,6 +123,13 @@ export default class CodeControl extends React.Component {
     }
   }
 
+  refreshCodeMirrorInstance() {
+    if (this.cm?.getWrapperElement().offsetHeight) {
+      this.cm.refresh();
+      this.visibility.isRefreshedAfterInvisible = true;
+    }
+  }
+
   getLanguageByName = name => {
     return languages.find(lang => lang.name === name);
   };

packages/decap-cms-widget-object/src/ObjectControl.js

@@ -40,6 +40,7 @@ export default class ObjectControl extends React.Component {
     hasError: PropTypes.bool,
     t: PropTypes.func,
     locale: PropTypes.string,
+    collapsed: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -87,6 +88,7 @@ export default class ObjectControl extends React.Component {
       isFieldDuplicate,
       isFieldHidden,
       locale,
+      collapsed,
     } = this.props;
 
     if (field.get('widget') === 'hidden') {
@@ -116,6 +118,7 @@ export default class ObjectControl extends React.Component {
         isFieldDuplicate={isFieldDuplicate}
         isFieldHidden={isFieldHidden}
         locale={locale}
+        isParentListCollapsed={collapsed}
       />
     );
   }