diff --git a/src/components/EditorWidgets/Markdown/MarkdownControl/RawEditor/index.js b/src/components/EditorWidgets/Markdown/MarkdownControl/RawEditor/index.js index eed87f89..0438dac6 100644 --- a/src/components/EditorWidgets/Markdown/MarkdownControl/RawEditor/index.js +++ b/src/components/EditorWidgets/Markdown/MarkdownControl/RawEditor/index.js @@ -1,4 +1,5 @@ import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; import React from 'react'; import { Editor as Slate } from 'slate-react'; import Plain from 'slate-plain-serializer'; @@ -50,12 +51,13 @@ export default class RawEditor extends React.Component { }; render() { - const { className } = this.props; + const { className, field } = this.props; return (
buttons.includes(button.type)); + } + + renderToolbarButton(button) { + const { type, label, icon, onClick, isActive, disabled } = button; + return ; + } + + renderToolbarDropdown() { + const { plugins, disabled, onSubmit } = this.props; + + return ( +
+ + } + > + {plugins && plugins.toList().map((plugin, idx) => ( + onSubmit(plugin.get('id'))} /> + ))} + +
+ ); + } + + renderToolbarToggle() { + const { onToggleMode, rawMode, plugins, - onAddAsset, - getAsset, disabled, - onSubmit, - className, + className } = this.props; - const { activePlugin } = this.state; - /** * Because the toggle labels change font weight for active/inactive state, * we need to set estimated widths for them to maintain position without @@ -57,132 +104,43 @@ export default class Toolbar extends React.Component { const toggleOnLabelWidth = '70px'; return ( -
+
+ + {toggleOffLabel} + + + + {toggleOnLabel} + +
+ ); + } + + render() { + return ( +
- - - - - - - - - - -
- - } - > - {plugins && plugins.toList().map((plugin, idx) => ( - onSubmit(plugin.get('id'))} /> - ))} - -
-
-
- - {toggleOffLabel} - - - - {toggleOnLabel} - + {this.getToolbarButtonsList().map((toolbarButton) => this.renderToolbarButton(toolbarButton))} + {this.renderToolbarDropdown()}
+ {this.renderToolbarToggle()}
); } diff --git a/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/index.js b/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/index.js index 6f445182..4a96e334 100644 --- a/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/index.js +++ b/src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/index.js @@ -1,4 +1,5 @@ import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; import React, { Component } from 'react'; import { get, isEmpty, debounce } from 'lodash'; import { Map } from 'immutable'; @@ -33,6 +34,7 @@ export default class Editor extends Component { onMode: PropTypes.func.isRequired, className: PropTypes.string.isRequired, value: PropTypes.string, + field: ImmutablePropTypes.map }; constructor(props) { @@ -189,7 +191,7 @@ export default class Editor extends Component { } render() { - const { onAddAsset, getAsset, className } = this.props; + const { onAddAsset, getAsset, className, field } = this.props; return (
@@ -206,6 +208,7 @@ export default class Editor extends Component { onSubmit={this.handlePluginAdd} onAddAsset={onAddAsset} getAsset={getAsset} + buttons={field.get('buttons')} />
); @@ -69,6 +71,7 @@ export default class MarkdownControl extends React.Component { getAsset={getAsset} className={classNameWrapper} value={value} + field={field} />
);