Hello I am trying to implement react markdown editor and I have used Jed Watson's http://jedwatson.github.io/react-md-editor/
But the problem is that, I am getting the error attached. Any thoughts what I am missing :(.. Has anyone encountered similar issue ?
import Editor from 'react-md-editor';
state = {
code: '# React Markdown '
}
updateCode = (newCode) => {
this.setState({
code: newCode
});
}
Render:
<Editor value={this.state.code} onChange={this.updateCode} />
That's because of PropTypes are deprecated since React 15.5.0, and the editor PropTypes usage is incompatible with the editor's React version.
After 15.5.0, they are moved to their own package, and we should use them as follows:
// After (15.5)
import React from 'react';
import PropTypes from 'prop-types';
The repo / package you're using looks abandoned, but there's already submitted PR, that you can use: https://github.com/JedWatson/react-md-editor/pull/17
However, it's on your own to choose - should you fork the repo or use another React Markdown project.
Here are some alternatives:
https://github.com/andrerpena/react-mde
https://github.com/OpusCapita/react-markdown
Related
I tried to install mavonEditor as markdown editor for my latest vue3.js app and also used vite for building vue.js apps.
First of all, I followed the document of mavonEditor, mavon component is not defined.
I installed mavon-editor(v2.10.4) using by npm.
And then, change the main.js like below.
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/tailwind.css";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
createApp(App).use(mavon).mount("#app");
and I tried to use editor component to App.vue like that.
<template>
<div>
<mavon-editor v-model="value" />
</div>
</template>
<script>
import { ref } from "#vue/reactivity";
export default {
setup() {
const value = ref("its my first mavon editor!");
return { value };
},
};
</script>
Open the browser(Chrome), but any items wasn't show.
Instead of editor, that error occurred in console.
Uncaught ReferenceError: mavon is not defined
I really want to know how to correctly use mavon-editor in Vue3.js.
Does anyone help me, please?
you can add this
app.use(mavonEditor)
and remove mavon from
createApp(App).use(mavon).mount("#app");
hope this help you solve the problem
We have recently updated our website's npm packages (react-intl version 4.5.1) and we are using react-intl. The problem is, that we used the FormattedHTMLMessage component which doesn't seem to be working anymore. If I visit the page now there are elements with classnames displayed in the text.
We display the text via props:
import React from "react";
import {
FormattedMessage as FM,
FormattedHTMLMessage as FHM
} from "react-intl";
export default props => {
return(
...
<p className="fs-18 white-space-pre-line">
<FM id={props.descriptionKey} />
</p>
...
);
};
and in the .json file for the text it looks like this:
textDescription: "Sometext <span class='font-tilde-bold h3'>Sometext</span> Sometext"
Is there any good alternative or should we generally use another approach?
FormattedHTMLMessage was removed in version 4.
You can see in upgrade guild v3 -> v4.
I am trying to integrate GrapesJS Feature with my React APP.
I get an error while implementing like `Uncaught TypeError: Cannot read property 'forEach' of undefined grapesjs react`
I would like to have a feature like in this URL
https://grapesjs.com/demo.html
npm i grapesjs-react
import React, {Component} from 'react';
import GEditor from 'grapesjs-react';
class GEditorExample extends Component {
render() {
return (
<GEditor/>
);
}
}
export default GEditorExample;
How can I get this feature for my react app to build HTML Web Builder.
Any help would be great.
Thank You.*
You've to specify the blocks prop to , this block will be added to the editor by blockmanager.add method of grapes-js.
If there is no need for a block, try giving an empty array, like:
<GEditor id="gjs" blocks={[]} />
if You pass blocks to GEditor, It will work.
See the sample code below
import React, {Component} from 'react';
import GEditor from 'grapesjs-react';
class GEditorExample extends Component {
render() {
return (
<GEditor id="geditor" blocks={[]}/>
);
}
}
export default GEditorExample;
Which version of grapesjs-react are you using?
I configured the default value for blocks props:
GEditor.defaultProps = {
blockManager: {},
blocks: [],
components: [],
newsletter: false,
plugins: [],
storageManager: {},
styleManager: {},
webpage: false,
};
Try to update the package to the newest version if you still got this error.
I have been looking for a good integrator for a while. Currently, my solution is to use <iframe> to load GrapeJS from an external file server. For example: using an iframe inside a React component like this:
<iframe height="100%" src={`http://127.0.0.1:8081/templateId=${templateId} title="Build your own template" width="100%" />
I know it's not a good solution, but currently its the only method I found to be workable with my problem.
I am building a Material-UI text editor using draft.js and wrapping all the functionality in Material-UI components.
I've gotten comfortable using ~3.9 but for this project decided to update to 4.0. Maybe I'm missing something here but this usually works for me with no issues
const styles = theme => ({
paper: {
paddingBottom: theme.spacing(2)
},
...
})
import { withStyles } from "#material-ui/styles"
...
export class EditorComponent extends Component {
...
render() {
const { classes } = this.props
}
}
export default withStyles(styles, { withTheme: true })(EditorComponent)
This works while running in a webpack-dev-server but when I build to javascript and attempt to import it into another project and use it I get this error in the console...
Uncaught TypeError: theme.spacing is not a function
I can't seem to find anything relevant googling this issue.
Here is the repo if looking at my build script would help
https://github.com/jrdn91/material-ui-rte
Turns out that pulling in withStyles or makeStyles etc. from #material-ui/styles does not include the default theme. There are wrapped version of these included in #material-ui/core/styles which do include the default theme.
So changing from import { withStyles } from "#material-ui/styles" to import { withStyles } from "#material-ui/core/styles" will fix this issue.
Referenced from this page
https://material-ui.com/customization/default-theme/#material-ui-core-styles-vs-material-ui-styles
I'm testing a React component using Jest. The test runs fine, but I get a few console.warn messages that are very annoying. I'm not using either PropTypes or createClass myself, so I'm suspecting this comes from some library. Is there some way to figure out where they are coming from, or suppress them?
PASS src/__tests__/title.test.ts
● Console
console.warn node_modules/react/lib/lowPriorityWarning.js:40
Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see
console.warn node_modules/react/lib/lowPriorityWarning.js:40
Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see
The test looks like this
import { shallow } from "enzyme";
import * as React from "react";
import {Title} from "../components/title";
describe("Testing title component", () => {
it("renders", () => {
const titleElement: React.ReactElement<{}> = React.createElement(Title);
const component = shallow(titleElement);
const text = component.text();
expect(text).toBe("test");
});
});
and the component looks like this
import * as React from "react";
export class Title extends React.Component<{}, {}> {
constructor(props: {}) {
super(props);
}
public render(): React.ReactElement<{}> {
return <p>test</p>;
}
}
Importing using * (import * as) access all the props on React, including PropTypes and createClass, which is eventually causing the warnings.
Try to write import React from 'react' instead.
https://github.com/airbnb/enzyme/issues/1065