diedsmiling/material-ui-markdown-editor

React.js Markdown editor component based on material-ui

material-ui-markdown-editor's Issues

Make possibility to set the component for image DIalog

There should be a possibility to sect custom component for image dialog. That will give more flexibility, so one can build interface for image uploading.

Cant use MarkdownEditor Component

It looks like this project is using an outdated CodeMirror or React version but I can't get my project to load when I import the MarkdownEditor Component. I get the following error:

TypeError: Cannot read property 'func' of undefined
./node_modules/react-codemirror/lib/Codemirror.js
node_modules/react-codemirror/lib/Codemirror.js:12
9 | var CodeMirror = React.createClass({
10 | displayName: 'CodeMirror',
11 | propTypes: {

12 | onChange: React.PropTypes.func,
13 | onFocusChange: React.PropTypes.func,
14 | options: React.PropTypes.object,
15 | path: React.PropTypes.string,
View compiled

The above error occurred in the <IconMenu> component (Double react ?)

Hello, I'm trying to use the markdown material in an application and every time the component is returned I get the following error, I've tried everything but I can not figure it out the cause.
im ussing a stepper, but, the same error apears when i use without a stepper.

code of Markdown.js

import React from 'react';

import MarkdownEditor from 'material-ui-markdown-editor'

import 'codemirror/lib/codemirror.css' // import codemirror styles 

import 'material-ui-markdown-editor/dist/MarkdownEditor/codemirrorOverride.css' // import override styles 

export const Markdown = () => {
    return(
      <MarkdownEditor
      title="Foo"
      code="# Fancy markdown editor!"
    />
    )
}

invariant.js:42 Uncaught Error: Element ref was specified as a string (iconMenuContainer) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner). at invariant (invariant.js:42) at coerceRef (react-dom.development.js:6736) at reconcileSingleElement (react-dom.development.js:7532) at reconcileChildFibers (react-dom.development.js:7635) at reconcileChildrenAtExpirationTime (react-dom.development.js:7756) at reconcileChildren (react-dom.development.js:7747) at finishClassComponent (react-dom.development.js:7881) at updateClassComponent (react-dom.development.js:7850) at beginWork (react-dom.development.js:8225) at performUnitOfWork (react-dom.development.js:10224) at workLoop (react-dom.development.js:10288) at HTMLUnknownElement.callCallback (react-dom.development.js:542) at Object.invokeGuardedCallbackDev (react-dom.development.js:581) at invokeGuardedCallback (react-dom.development.js:438) at renderRoot (react-dom.development.js:10366) at performWorkOnRoot (react-dom.development.js:11014) at performWork (react-dom.development.js:10967) at batchedUpdates (react-dom.development.js:11086) at batchedUpdates (react-dom.development.js:2330) at dispatchEvent (react-dom.development.js:3421)

The above error occurred in the <IconMenu> component: in IconMenu in DropDown in div in ToolbarSection in div in ToolbarGroup in div in Toolbar in ToolbarPanel in div in MarkdownEditor (at Markdown.js:7) in Markdown (at Create.js:346) in div (at Create.js:345) in div (created by StepContent) in div (created by ExpandTransitionChild) in div (created by ExpandTransitionChild) in ExpandTransitionChild (created by TransitionGroup) in div (created by TransitionGroup) in TransitionGroup (created by ExpandTransition) in ExpandTransition (created by ExpandTransition) in ExpandTransition (created by StepContent) in div (created by StepContent) in StepContent (at Create.js:344) in div (created by Step) in Step (at Create.js:342) in div (created by Stepper) in Stepper (at Create.js:277) in div (at Create.js:272) in div (created by CardText) in CardText (at Create.js:267) in div (created by Card) in div (created by Paper) in Paper (created by Card) in Card (at Create.js:262) in Create (created by Route) in Route (created by PrivateRoute) in PrivateRoute (at App.js:66) in div (at App.js:63) in div (at App.js:61) in Router (created by BrowserRouter) in BrowserRouter (at App.js:60) in div (at App.js:59) in MuiThemeProvider (at App.js:58) in div (at App.js:57) in App (at index.js:7)

TypeError: Cannot read property 'prepareStyles' of undefined

Toolbar.render
node_modules/material-ui-markdown-editor/node_modules/material-ui/Toolbar/Toolbar.js:82
  79 |     noGutter = _props.noGutter,
  80 |     style = _props.style,
  81 |     other = (0, _objectWithoutProperties3.default)(_props, ['children', 'className', 'noGutter', 'style']);
> 82 | var prepareStyles = this.context.muiTheme.prepareStyles;
  83 | 
  84 | var styles = getStyles(this.props, this.context);
  85 | 

Highlight selected heading in dropdown

When cursor is at Heading, selected heading should be highlighted in the dropdown, not just the dropdown trigger. It will be easier to understand, that selecting item from dropdown list will cancel the heading formatting.