diff --git a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js b/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js index 87ff6aefae88..71600750bccd 100644 --- a/packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js +++ b/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 && ( diff --git a/packages/decap-cms-core/src/components/Editor/EditorControlPane/Widget.js b/packages/decap-cms-core/src/components/Editor/EditorControlPane/Widget.js index 555cae3b0e2d..666053a42ab7 100644 --- a/packages/decap-cms-core/src/components/Editor/EditorControlPane/Widget.js +++ b/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, }); } } diff --git a/packages/decap-cms-widget-code/src/CodeControl.js b/packages/decap-cms-widget-code/src/CodeControl.js index 165d88d94bf4..e9bad7f07081 100644 --- a/packages/decap-cms-widget-code/src/CodeControl.js +++ b/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); }; diff --git a/packages/decap-cms-widget-object/src/ObjectControl.js b/packages/decap-cms-widget-object/src/ObjectControl.js index 0d4ae18c44c9..9a74e1b8290b 100644 --- a/packages/decap-cms-widget-object/src/ObjectControl.js +++ b/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} /> ); }