Feat: multi content authoring (#4139)

packages/netlify-cms-widget-markdown/src/MarkdownControl/RawEditor.js

@@ -38,7 +38,16 @@ export default class RawEditor extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    return !this.state.value.equals(nextState.value);
+    return (
+      !this.state.value.equals(nextState.value) ||
+      nextProps.value !== Plain.serialize(nextState.value)
+    );
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setState({ value: Plain.deserialize(this.props.value) });
+    }
   }
 
   componentDidMount() {

packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js

@@ -121,7 +121,9 @@ export default class Editor extends React.Component {
   };
 
   shouldComponentUpdate(nextProps, nextState) {
-    return !this.state.value.equals(nextState.value);
+    const raw = nextState.value.document.toJS();
+    const markdown = slateToMarkdown(raw, { voidCodeBlock: this.codeBlockComponent });
+    return !this.state.value.equals(nextState.value) || nextProps.value !== markdown;
   }
 
   componentDidMount() {
@@ -131,6 +133,14 @@ export default class Editor extends React.Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setState({
+        value: createSlateValue(this.props.value, { voidCodeBlock: !!this.codeBlockComponent }),
+      });
+    }
+  }
+
   handleMarkClick = type => {
     this.editor.toggleMark(type).focus();
   };
@@ -178,7 +188,7 @@ export default class Editor extends React.Component {
   };
 
   render() {
-    const { onAddAsset, getAsset, className, field, isShowModeToggle, t } = this.props;
+    const { onAddAsset, getAsset, className, field, isShowModeToggle, t, isDisabled } = this.props;
     return (
       <div
         css={coreCss`
@@ -202,6 +212,7 @@ export default class Editor extends React.Component {
             hasBlock={this.hasBlock}
             isShowModeToggle={isShowModeToggle}
             t={t}
+            disabled={isDisabled}
           />
         </EditorControlBar>
         <ClassNames>

packages/netlify-cms-widget-markdown/src/MarkdownControl/index.js

@@ -71,6 +71,7 @@ export default class MarkdownControl extends React.Component {
       getEditorComponents,
       resolveWidget,
       t,
+      isDisabled,
     } = this.props;
 
     const { mode, pendingFocus } = this.state;
@@ -90,6 +91,7 @@ export default class MarkdownControl extends React.Component {
           resolveWidget={resolveWidget}
           pendingFocus={pendingFocus && this.setFocusReceived}
           t={t}
+          isDisabled={isDisabled}
         />
       </div>
     );