feat(widget-markdown): add option mode (#4112) (#4217)

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

@@ -90,7 +90,7 @@ export default class RawEditor extends React.Component {
   }, 150);
 
   handleToggleMode = () => {
-    this.props.onMode('visual');
+    this.props.onMode('rich_text');
   };
 
   processRef = ref => {
@@ -98,7 +98,7 @@ export default class RawEditor extends React.Component {
   };
 
   render() {
-    const { className, field, t } = this.props;
+    const { className, field, isShowModeToggle, t } = this.props;
     return (
       <RawEditorContainer>
         <EditorControlBar>
@@ -107,6 +107,7 @@ export default class RawEditor extends React.Component {
             buttons={field.get('buttons')}
             disabled
             rawMode
+            isShowModeToggle={isShowModeToggle}
             t={t}
           />
         </EditorControlBar>
@@ -139,5 +140,6 @@ RawEditor.propTypes = {
   className: PropTypes.string.isRequired,
   value: PropTypes.string,
   field: ImmutablePropTypes.map.isRequired,
+  isShowModeToggle: PropTypes.bool.isRequired,
   t: PropTypes.func.isRequired,
 };

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

@@ -64,6 +64,7 @@ export default class Toolbar extends React.Component {
     editorComponents: ImmutablePropTypes.list,
     onToggleMode: PropTypes.func.isRequired,
     rawMode: PropTypes.bool,
+    isShowModeToggle: PropTypes.bool.isRequired,
     plugins: ImmutablePropTypes.map,
     onSubmit: PropTypes.func,
     onAddAsset: PropTypes.func,
@@ -100,6 +101,7 @@ export default class Toolbar extends React.Component {
       onLinkClick,
       onToggleMode,
       rawMode,
+      isShowModeToggle,
       plugins,
       disabled,
       onSubmit,
@@ -252,15 +254,17 @@ export default class Toolbar extends React.Component {
             </ToolbarDropdownWrapper>
           )}
         </div>
-        <ToolbarToggle>
-          <ToolbarToggleLabel isActive={!rawMode} offPosition>
-            {t('editor.editorWidgets.markdown.richText')}
-          </ToolbarToggleLabel>
-          <StyledToggle active={rawMode} onChange={onToggleMode} />
-          <ToolbarToggleLabel isActive={rawMode}>
-            {t('editor.editorWidgets.markdown.markdown')}
-          </ToolbarToggleLabel>
-        </ToolbarToggle>
+        {isShowModeToggle && (
+          <ToolbarToggle>
+            <ToolbarToggleLabel isActive={!rawMode} offPosition>
+              {t('editor.editorWidgets.markdown.richText')}
+            </ToolbarToggleLabel>
+            <StyledToggle active={rawMode} onChange={onToggleMode} />
+            <ToolbarToggleLabel isActive={rawMode}>
+              {t('editor.editorWidgets.markdown.markdown')}
+            </ToolbarToggleLabel>
+          </ToolbarToggle>
+        )}
       </ToolbarContainer>
     );
   }

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

@@ -116,6 +116,7 @@ export default class Editor extends React.Component {
     value: PropTypes.string,
     field: ImmutablePropTypes.map.isRequired,
     getEditorComponents: PropTypes.func.isRequired,
+    isShowModeToggle: PropTypes.bool.isRequired,
     t: PropTypes.func.isRequired,
   };
 
@@ -177,7 +178,7 @@ export default class Editor extends React.Component {
   };
 
   render() {
-    const { onAddAsset, getAsset, className, field, t } = this.props;
+    const { onAddAsset, getAsset, className, field, isShowModeToggle, t } = this.props;
     return (
       <div
         css={coreCss`
@@ -199,6 +200,7 @@ export default class Editor extends React.Component {
             hasMark={this.hasMark}
             hasInline={this.hasInline}
             hasBlock={this.hasBlock}
+            isShowModeToggle={isShowModeToggle}
             t={t}
           />
         </EditorControlBar>

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import RawEditor from './RawEditor';
 import VisualEditor from './VisualEditor';
+import { List } from 'immutable';
 
 const MODE_STORAGE_KEY = 'cms.md-mode';
 
@@ -34,9 +35,14 @@ export default class MarkdownControl extends React.Component {
   constructor(props) {
     super(props);
     editorControl = props.editorControl;
+    const preferredMode = localStorage.getItem(MODE_STORAGE_KEY) ?? 'rich_text';
+
     _getEditorComponents = props.getEditorComponents;
     this.state = {
-      mode: localStorage.getItem(MODE_STORAGE_KEY) || 'visual',
+      mode:
+        this.getAllowedModes().indexOf(preferredMode) !== -1
+          ? preferredMode
+          : this.getAllowedModes()[0],
       pendingFocus: false,
     };
   }
@@ -52,6 +58,8 @@ export default class MarkdownControl extends React.Component {
     this.setState({ pendingFocus: false });
   };
 
+  getAllowedModes = () => this.props.field.get('modes', List(['rich_text', 'raw'])).toArray();
+
   render() {
     const {
       onChange,
@@ -66,11 +74,13 @@ export default class MarkdownControl extends React.Component {
     } = this.props;
 
     const { mode, pendingFocus } = this.state;
+    const isShowModeToggle = this.getAllowedModes().length > 1;
     const visualEditor = (
       <div className="cms-editor-visual" ref={this.processRef}>
         <VisualEditor
           onChange={onChange}
           onAddAsset={onAddAsset}
+          isShowModeToggle={isShowModeToggle}
           onMode={this.handleMode}
           getAsset={getAsset}
           className={classNameWrapper}
@@ -88,6 +98,7 @@ export default class MarkdownControl extends React.Component {
         <RawEditor
           onChange={onChange}
           onAddAsset={onAddAsset}
+          isShowModeToggle={isShowModeToggle}
           onMode={this.handleMode}
           getAsset={getAsset}
           className={classNameWrapper}
@@ -98,6 +109,6 @@ export default class MarkdownControl extends React.Component {
         />
       </div>
     );
-    return mode === 'visual' ? visualEditor : rawEditor;
+    return mode === 'rich_text' ? visualEditor : rawEditor;
   }
 }

packages/netlify-cms-widget-markdown/src/schema.js

@@ -23,5 +23,13 @@ export default {
       },
     },
     editor_components: { type: 'array', items: { type: 'string' } },
+    modes: {
+      type: 'array',
+      items: {
+        type: 'string',
+        enum: ['raw', 'rich_text'],
+      },
+      minItems: 1,
+    },
   },
 };

website/content/docs/widgets/markdown.md

@@ -15,6 +15,7 @@ _Please note:_ If you want to use your markdown editor to fill a markdown file c
   - `minimal`: accepts a boolean value, `false` by default. Sets the widget height to minimum possible.
   - `buttons`: an array of strings representing the formatting buttons to display (all shown by default). Buttons include: `bold`, `italic`, `code`, `link`, `heading-one`, `heading-two`, `heading-three`, `heading-four`, `heading-five`, `heading-six`, `quote`, `bulleted-list`, and `numbered-list`.
   - `editor_components`: an array of strings representing the names of editor components to display (all shown by default). The `image` and `code-block` editor components are included with Netlify CMS by default, but others may be [created and registered](/docs/custom-widgets/#registereditorcomponent).
+  - `modes`: an array of strings representing the names of allowed editor modes. Possible modes are `raw` and `rich_text`. If both modes are allowed, they can be toggled via a toggle button in the toolbar.
 - **Example:**
 
   ```yaml