niuware / mui-rte Goto Github PK

Is there functionally for inserting text via a button push?

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()}
                  />
             )
       }

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.

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!

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.

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 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.

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.

if material-iu used in my project is older then material-ui used in mui-rte i see warning in console

this means mui/styles is included twice and this will most likely break server side rendering

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?

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,
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.

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.

Is there a way to set the toolbar button as small using the Material UI size attribute?

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/>
          }                            
/>

While typing, you cannot control text until you click the Save button. It would be better to have an onChange function.

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 found this answer related to draft.js but I don't know if it would be possible to do something similar with mui-rte.

How to limit Max Length of Draft js

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.

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 have been trying to change the styling of the toolbar but failing to pull it down below the textfield, how can I achieve this.

Hi guys thanks for this lib. I want to report a bug. Chrome shows these warnings when I have two rtes on page

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).

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!

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.

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' ofundefined``

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.

typing is fine

Stack trace:

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.

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

I want to inline the label and the rte. So I tried using a flexbox however that causes the rte to overflow rather than new line.

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.

Is it possible to Position the toolbar at the bottom?

two cases:

1. how do I focus the editor when it is mounted?
2. how do I focus the editor when I click on certain area?

Thanks!

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}`}

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?

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 @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.

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'.

How to make editor receive focus on tab?

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

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.

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,

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" ] }

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.

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) => {
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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?