diedsmiling / material-ui-markdown-editor Goto Github PK
View Code? Open in Web Editor NEWReact.js Markdown editor component based on material-ui
License: MIT License
React.js Markdown editor component based on material-ui
License: MIT License
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)
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 |
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
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.