diff --git a/src/components/Widgets/MarkdownControl.js b/src/components/Widgets/MarkdownControl.js index a4c6f22a..a315cb80 100644 --- a/src/components/Widgets/MarkdownControl.js +++ b/src/components/Widgets/MarkdownControl.js @@ -1,16 +1,21 @@ import React, { PropTypes } from 'react'; import RawEditor from './MarkdownControlElements/RawEditor'; import VisualEditor from './MarkdownControlElements/VisualEditor'; +import { processEditorPlugins } from './richText'; import { connect } from 'react-redux'; import { switchVisualMode } from '../../actions/editor'; class MarkdownControl extends React.Component { - constructor(props) { - super(props); + constructor(props, context) { + super(props, context); this.useVisualEditor = this.useVisualEditor.bind(this); this.useRawEditor = this.useRawEditor.bind(this); } + componentWillMount() { + processEditorPlugins(this.context.plugins.editor); + } + useVisualEditor() { this.props.switchVisualMode(true); } @@ -70,6 +75,10 @@ MarkdownControl.propTypes = { value: PropTypes.node, }; +MarkdownControl.contextTypes = { + plugins: PropTypes.object, +}; + export default connect( state => ({ editor: state.editor }), { switchVisualMode } diff --git a/src/components/Widgets/MarkdownControlElements/VisualEditor/BlockTypesMenu.js b/src/components/Widgets/MarkdownControlElements/VisualEditor/BlockTypesMenu.js index 0912ce60..946b486e 100644 --- a/src/components/Widgets/MarkdownControlElements/VisualEditor/BlockTypesMenu.js +++ b/src/components/Widgets/MarkdownControlElements/VisualEditor/BlockTypesMenu.js @@ -88,15 +88,17 @@ export default class BlockTypesMenu extends Component { renderBlockTypeButton(type, icon) { const onClick = e => this.handleBlockTypeClick(e, type); return ( - + ); } renderMenu() { + const { plugins } = this.props; if (this.state.expanded) { return (
{this.renderBlockTypeButton('hr', 'dot-3')} + {plugins.map(plugin => this.renderBlockTypeButton(plugin.id, plugin.icon))} { + const markdownRule = MarkupIt.Rule(plugin.id) + .regExp(plugin.pattern, function(state, match) { return plugin.fromBlock(match); }) + .toText(function(state, token) { return plugin.toBlock(token.getData()); }); + + const htmlRule = MarkupIt.Rule(plugin.id) + .regExp(plugin.pattern, function(state, match) { return plugin.fromBlock(match); }) + .toText(function(state, token) { return plugin.toPreview(token.getData()); }); + + const nodeRenderer = (props) => { + /* eslint react/prop-types: 0 */ + const { node, state } = props; + const isFocused = state.selection.hasEdgeIn(node); + const className = isFocused ? 'plugin active' : 'plugin'; + return ( +
+ +
+ ); + }; + + augmentedMarkdownSyntax.addInlineRules(markdownRule); + augmentedHTMLSyntax.addInlineRules(htmlRule); + nodes[plugin.id] = nodeRenderer; + }); + + processedPlugins = plugins; +} + +function getPlugins() { + return processedPlugins.map(plugin => ( + { id: plugin.id, icon: plugin.icon } + )).toArray(); +} + +function getNodes() { + return nodes; +} + +function getSyntaxes() { + return { markdown: augmentedMarkdownSyntax, html:augmentedHTMLSyntax }; +} + +export { processEditorPlugins, getNodes, getSyntaxes, getPlugins };