niuware / mui-rte Goto Github PK
View Code? Open in Web Editor NEWMaterial-UI Rich Text Editor and Viewer
License: MIT License
Material-UI Rich Text Editor and Viewer
License: MIT License
works for "bold", "italic", "unordered/ordered list"
Hi, currently the API says you can pass toolbar={false}
, but it will only hide the toolbar if readOnly
is true
and toolbar
is false
, we should be able to edit without the toolbar.
Just wondering we a feature can be added to resize image in the editor itself, something similar to 'https://www.draft-js-plugins.com/plugin/resizeable'.
I have been trying to update the value of my MUIRTE using the following code.
const change = (state) => {
const currentSelection = state.getSelection()
const content_state = state.getCurrentContent()
const newEditorState = EditorState.forceSelection(content_state, currentSelection)
const final = JSON.stringify(convertToRaw(newEditorState))
setEditorState(final)
}
But I am unable to do so and I am getting this error in the console
Uncaught TypeError: editorState.getImmutable is not a function
I am using the forceSelection because it helps in removing the cursor reset error in the MUIRichTextEditor component. As answered in this post: https://stackoverflow.com/questions/43868815/how-to-stop-draftjs-cursor-jumping-to-beginning-of-text
Please help!
Is it possible to Position the toolbar at the bottom?
Hey there. First of all thanks for this package, it was really straightforward to integrate with our current MUI-based codebase.
I've been going through the source code and noticed that the styles are hardcoded. I think it would be really handy if we could provide custom classes
prop with the supported keys(i.e. container, editor, etc.).
Also it would be really helpful if the EditorControls component had its own class.
i am trying to pass the text inside mui-rte to the state using onChange where I have passed handleChange function which takes a prop and changes that value to the state. However, it is giving this error TypeError: Cannot read property 'value' of
undefined``
Here is my code:
const [Ques, setQues] = useState({
answer: '',
question: ''
});
const handleChange = prop => event => {
setQues({ ...Ques, [prop]: event.target.value });
console.log(event.target.value);
};
<MUIRichTextEditor
label="Start Typing ..."
controls={[
'title',
'bold',
'italic',
'underline',
'strikethrough',
'highlight',
'undo',
'redo',
'save'
]}
value={Ques.answer}
onChange={handleChange('answer')}
className="p-1"
/>
```Any suggestion would be highly appreciated.
Hi. Awesome package, this is working really nicely in my project.
I have come across a minor thing, in which I see some console warnings where id is coming out as undefined for each button.
[DOM] Found 9 elements with non-unique id #undefined: (More info: https://goo.gl/9p2vKq)
<button class="MuiButtonBase-root MuiIconButton-root" tabindex="0" type="button" id="undefined" aria-label="Bold">…</button>
<button class="MuiButtonBase-root MuiIconButton-root" tabindex="0" type="button" id="undefined" aria-label="Italic">…</button>
...
Hi,
when I try compile project with "noUnusedParameters": true,
, I get error in
ERROR in ..\node_modules\mui-rte\src\MUIRichTextEditor.tsx(178,62)
TS6133: 'contentState' is declared but its value is never read.
When aliasing an URL in chrome the alias is removed when you press space or enter. When starting to type again the first character of the word will have the href tag on it, but not the whole word.
It looks like this
Only the Y becomes clickable after we try to write the name again after it has been removed.
This behavior does not exists in Firefox, edge dev or edge.
I'm not sure if this is a mui-rte issue or a draftjs issue though.
When trying to select an inline style (i.e. bold and italic) without any text selected, button is not marked. I'm unable to figure out what's causing this. This does not appear to be a problem in Draft.js demo on their official site. Are you able to help or point me in the right direction?
Hey, that component is quite nice.
There is just one thing, I don't get:
I download some data and want to show it in your component. The format is ok. But when render my view the first time, I have no data, so the default value is empty. When I am getting the data and update my state, my view is rerender (as it should) but your component is still empty. Do you know how I could fix it?
I have been trying to change the styling of the toolbar but failing to pull it down below the textfield, how can I achieve this.
Is there functionally for inserting text via a button push?
the Title control ultimately maps to a H2 tag if I convert the content to html. How does one add additional header tags. I tried creating a custom block, but there doesn't seem to be a way to specify the style for something like draft-js-export-html to render additional header tags. Everything comes out as a paragraph tag.
eg:
<MUIRichTextEditor
controls={["header-one"]}
customControls={[
{
name: "header-one",
type: "block",
icon: <TitleIcon />,
style: 'header-one',
blockWrapper: <h1/>
}
/>
How to make editor receive focus on tab?
I found this answer related to draft.js but I don't know if it would be possible to do something similar with mui-rte.
Is it possible to override IconButton in the toolbar? May be CustomControl should propagate all of the props to IconButton so we can replace component in there (I would like to be able to insert something completely custom in there).
Is there a way to set the toolbar button as small using the Material UI size
attribute?
Thank you for putting this put there it is really helpful.
I am not sure if this is happening only for me but links are relative.
In the example below, the link will open to: www.localhost:3000/www.github.com
I suspect it can be fixed by pre-pending the href with '//' in the Link component:
const Link: React.FC<ILinkProps> = (props: ILinkProps) => {
const { url } = props.contentState.getEntity(props.entityKey).getData()
return (
<a
href={`//${url}`}
Currently it is impossible to change value of MUIRichTextEditor after it's load. Sometimes I need to change value of MUIRichTextEditor after load. Because I receive some external data, that I need to set as MUIRichTextEditor value. Can you add feature to update value after first load.
I haven't seen examples of generating a menu from a custom control, so I'm curious to see a code example on to implement a menu.
typing is fine
Hi guys
you have support for decorators already but it does not work with draft decorators liek this one
https://github.com/SamyPesse/draft-js-prism
may be you can remove
props.decorators.forEach(deco => decorators.push({
strategy: (contentBlock: any, callback: any) => {
findDecoWithRegex(deco.regex, contentBlock, callback)
},
component: deco.component
}))
wrap current decorators in example folder in simpledecorator
and allow to use draft decorators directly?
If I have a text in my database (an HTML markup), how can I load it into this component?
I couldn't find documentation on how to convert it!
I use readOnly
prop to display contents but it does not show up in server render.
Did I miss something? Please help. SEO is very important to us.
Hi,
I am trying to use mui-rte in a next js project. Whenever i try to assign a value to the value prop i am getting the following error:
Unexpected token a in JSON at position 0
SyntaxError: Unexpected token a in JSON at position 0
at JSON.parse ()
at useEditorState (/Users/user/dev/test/mui-rte-test/node_modules/mui-rte/dist/index.js:1:14383)
at /Users/user/dev/test/mui-rte-test/node_modules/mui-rte/dist/index.js:1:14629
at useReducer (/Users/user/dev/test/mui-rte-test/node_modules/react-dom/cjs/react-dom-server.node.development.js:1361:57)
at Object.useState (/Users/user/dev/test/mui-rte-test/node_modules/react-dom/cjs/react-dom-server.node.development.js:1299:10)
at Object.useState (/Users/user/dev/test/mui-rte-test/node_modules/react/cjs/react.development.js:1637:21)
at Object.MUIRichTextEditor [as render] (/Users/user/dev/test/mui-rte-test/node_modules/mui-rte/dist/index.js:1:14602)
at ReactDOMServerRenderer.render (/Users/user/dev/test/mui-rte-test/node_modules/react-dom/cjs/react-dom-server.node.development.js:3795:44)
at ReactDOMServerRenderer.read (/Users/user/dev/test/mui-rte-test/node_modules/react-dom/cjs/react-dom-server.node.development.js:3565:29)
at renderToString (/Users/user/dev/test/mui-rte-test/node_modules/react-dom/cjs/react-dom-server.node.development.js:4296:27)
at render (/Users/user/dev/test/mui-rte-test/node_modules/next/dist/next-server/server/render.js:81:16)
at Object.renderPage (/Users/user/dev/test/mui-rte-test/node_modules/next/dist/next-server/server/render.js:346:16)
at Function.getInitialProps (/Users/user/dev/test/mui-rte-test/.next/server/static/development/pages/_document.js:485:19)
at Object.loadGetInitialProps (/Users/user/dev/test/mui-rte-test/node_modules/next/dist/next-server/lib/utils.js:59:29)
at Object.renderToHTML (/Users/user/dev/test/mui-rte-test/node_modules/next/dist/next-server/server/render.js:350:36)
at async DevServer.renderToHTML (/Users/user/dev/test/mui-rte-test/node_modules/next/dist/next-server/server/next-server.js:703:24)
Any idea what is going on?
Appreciate this project!!!
M
It would be useful to have an id
property to pass to draft-js
editor. In this way it can be used in combination with htmlFor
for better accessibility and for testing.
I'm currently using version 3.9.2 of @material-ui/core which the package.json of the latest version of this library suggests should be compatible. However I get the error:
Module not found: Can't resolve '@material-ui/core/ButtonGroup' in '/mnt/c/git/hivemind.on-demand.web/node_modules/mui-rte/dist'
What version of this library would be compatible with 3.x of @material-ui/core?
I understand that one way of doing so is to add a custom control and use the onClick on that control to get the state of the editor, is there another way to get the state of the editor, why can' t I get the state of the editor?? Please help out. Also please let me know how to make this editor a controlled input, I can give the value from the change and the onChange is hooked up to the state, whenever I try this, the editor starts typing in reverse and I am unable to fix that.
Hi again.
I wanted to add a custom draft-js mention plugin and realized that there is no option for that.
It would be really helpful to be able to pass plugins
prop.
Hi @niuware , thank you for your wonderful rich text editor package. I would like to know how do I check if MUIRichTextEditor is empty or not, because even if it is empty, there is some default object already created there.
Hi @niuware, I have been using mui-rte in a Material UI dialog box. When I start to write the cursor is at the beginning, but when I write few words, then, the cursor again moves to the beginning. Therefore, I have to constantly move the cursor to write a sentence. I think onChange method is creating a problem, however, I cannot figure out what is causing the problem? Your help is highly appreciated.
Code:
const [post, setPost] = useState({
content: '',
answer_errors: {},
open: false,
errors: null
});
const handleChange = prop => event => {
setPost({
...post,
[prop]: JSON.stringify(convertToRaw(event.getCurrentContent()))
});
};
<MUIRichTextEditor
label="Write your aswer..."
controls={[
'bold',
'italic',
'underline',
'highlight',
'link',
'media',
'numberList',
'bulletList',
'quote'
]}
inlineToolbar={true}
onChange={handleChange('content')}
value={post.content}
/>;
Hi,
I installed the module in my react typescript project and I am getting typescript error within the mui-rte source code.
Below is my tsconfig.
{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react", "noImplicitAny": false }, "include": [ "src" ] }
I am trying to reset the editor using the following commands:
const editorState = EditorState.createEmpty();
const updateEditorState = EditorState.set(editorState);
I read the document for reset in the examples folder and it does not work.
Also in the demo I tried using the clear icon to remove text with and without selecting the text, it does not work, can someone please look into this or help out, I really need this.
Compilation error when noImplicitReturns
is set.
node_modules/mui-rte/src/MUIRichTextEditor.tsx:411:21 - error TS7030: Not all code paths return a value.
411 blockRenderer = (contentBlock: ContentBlock) => {
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Hello, at first thank you for this MUI/Draft.js library.
At first I stumbled on a bug ..
I wonder how to use (or create) the link embedded control ? You provide it but I cannot figure how to use it. The button link doesn't do anything.
... then I find out (maybe why).
You provide a basic example on Codesandbox which is on mui-rte 1.11.0. I think that the bug is related to this last version. cf. : https://codesandbox.io/s/mui-rte-basic-ypfdo?fontsize=14
We figure out that v. 1.9.3 works fine. The bug must lies somewhere in the toolbar (cf. release note 1.10), I think that maybe the popover position isn't correctly initialized.
Have a nice day.
Nice work.
Do you have plans to add clipboard paste support for images that will auto-upload to a configured URL? As a bonus if there were a configuration for direct integration with an S3 bucket without needing to host or use a Lambda as an intermediary, that would be nice.
EDIT:
Could we add handlePastedFiles to TDraftEditorProps?
That should allow me to pass a function to MUIRichTextEditor in my render that can handle the upload of the pasted image to S3 then insert it into the editor as a normal image reference to a URL.
What do you think?
Here's a sample handler I found:
handlePastedFiles (files) {
let state = this.state.editorState;
files.forEach( item => {
this.uploadFile(item).then(res => {
const contentStateWithEntity = state.getCurrentContent().createEntity('IMAGE', 'IMMUTABLE', { src: res.data })
const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
const editorStateWithEntity = EditorState.set(state, {
currentContent: contentStateWithEntity
});
const newEditorState = AtomicBlockUtils.insertAtomicBlock(
editorStateWithEntity,
entityKey,
' '
);
const newState = EditorState.forceSelection(
newEditorState,
newEditorState.getCurrentContent().getSelectionAfter()
)
this.setState({editorState: newState})
})
})
}
```
Thanks in advance,
Rob
While typing, you cannot control text until you click the Save button. It would be better to have an onChange function.
two cases:
Thanks!
Editor is giving warning to update DraftJS on react as 'componentWillUpdate' has been renamed in the react version 17.x and is not recommended for use.
Hi, i try use this library but i have problem with cursor. I have render method where i render MUIRichTextEditor
. I have state, which control what i have into textEditor. I try add onChange callback but when i try update my state every time when i write something in textEditor, cursor move to first position.
Do you have any idea how can i fix it? I don't want to use save callBack.
Code here
export default class TextEditor extends React.Component {
state = {
editorState: '',
}
setEditorState(editorState) {
this.setState({
editorState: draftToHtml(convertToRaw(editorState.getCurrentContent())));
})
}
getEditorValue() {
const contentHTML = convertFromHTML(this.state.editorState);
const state = ContentState.createFromBlockArray(contentHTML.contentBlocks, contentHTML.entityMap);
return JSON.stringify(convertToRaw(state))
}
render() {
return (
<MUIRichTextEditor
controls={['title', 'bold', 'numberList', 'bulletList', 'undo', 'redo']}
label="Test"
onChange={::this.setEditorState}
value={this.getEditorValue()}
/>
)
}
I notice when you import MUI components, you are doing import { XXX } from '@material-ui/core'
. This will result in the whole MUI package to be built into the bundle.
This should be updated to import XXX from '@material-ui/core/XXX'
.
I want to force editor to fit 100% of the available height. When I add more lines it pushes height over that limit. How is it possible to force it to stay within the limit?
Please pass the keyBindingFn prop to draft Editor. Thank you.
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.