TypeError: text is undefined about react-md-editor

[jaywcjlove]

@ifbarrera

<Form.Item
  name="editor"
+   initialValue="test"
>
  <MDEditor value={"sample value"} autoFocus={0} />
</Form.Item>

[an-lee]

Got the same issue when upgrade to 2.1.8 from 2.1.2. Also using with antd form component.

Solved by providing an initialValue.

[jaywcjlove]

@Formalibus Upgrade v2.1.8

[Formalibus]

@Formalibus Upgrade v2.1.8

I was actually at v2.1.8 then this error occured
I am on v2.1.2 it's working

[jaywcjlove]

Can you provide an example?
@Formalibus

[Formalibus]

here my imports

here I call it
<div className="row markdownEditor">
<div className="col-sm">
<MDEditor preview="edit" height="730" onChange={setContent} />
</div>
<div className="col-sm">
<MDEditor.Markdown source={content} />
</div>
</div>
now it working on v2.1.2

[Formalibus]

now I updated md editor

and got this

TypeError: text is undefined
matchGrammar
C:/Users/Udodelighed/react_lessons/destination_pamir/node_modules/prismjs/prism.js:887

884 |
885 | var str = currentNode.value;
886 |

887 | if (tokenList.length > text.length) {
| ^ 888 | // Something went terribly wrong, ABORT, ABORT!
889 | return;
890 | }

tokenize
C:/Users/Udodelighed/react_lessons/destination_pamir/node_modules/prismjs/prism.js:655

652 | var tokenList = new LinkedList();
653 | addAfter(tokenList, tokenList.head, text);
654 |

655 | matchGrammar(text, tokenList, grammar, tokenList.head, 0);
| ^ 656 |
657 | return toArray(tokenList);
658 | },

highlight
C:/Users/Udodelighed/react_lessons/destination_pamir/node_modules/prismjs/prism.js:613

610 | language: language
611 | };
612 | _.hooks.run('before-tokenize', env);

613 | env.tokens = _.tokenize(env.code, env.grammar);
| ^ 614 | .hooks.run('after-tokenize', env);
615 | return Token.stringify(.util.encode(env.tokens), env.language);
616 | },

highlight
C:/src/components/TextArea/index.tsx:36

33 | const [value, setValue] = useState(props.value);
34 | const highlight = () => {
35 | const pre = preElm.current;

36 | const html = Prism.highlight(value as string, Prism.languages.markdown, 'markdown');
| ^ 37 | pre!.innerHTML = ${html}<br />;
38 | };
39 | useEffect(() => {

./node_modules/@uiw/react-md-editor/lib/esm/components/TextArea/index.js/webpack_exports.default</<
C:/src/components/TextArea/index.tsx:51

48 | }
49 | }, [props.value]);
50 |

51 | useEffect(() => highlight(), [value]);
| ^ 52 | useEffect(() => {
53 | if (props.autoFocus && textElm.current) {
54 | textElm.current.focus();

[jaywcjlove]

@Formalibus I cannot help you resolve the error.

Project example ? Put it in the repositories?

[Formalibus]

no need, thanks )))
just wanted to notify about issue
if you want I can close an issue

[jaywcjlove]

:(

[ifbarrera]

Hi, I'm also getting this error on 2.1.8, react v. 16.14.0.

Usage:

import MDEditor from '@uiw/react-md-editor';

<MDEditor value={"sample value"} autoFocus={0} />

Error:

[jaywcjlove]

@ifbarrera https://codesandbox.io/s/markdown-editor-for-react-forked-2fzdr

[ifbarrera]

@jaywcjlove updated your code sandbox: https://codesandbox.io/s/markdown-editor-for-react-forked-19hfr?file=/index.js

Seems to be related to having MDEditor as part of a form, and setting its value with React.useEffect.

In my app, I use React.useEffect to pre-populate a previously saved value.

[ifbarrera]

You can't dynamically change initialValue or defaultValue on forms based on state. https://ant.design/docs/react/faq#It-doesn't-work-when-I-change-defaultValue-dynamically

This is why I use the React.useEffect hook.

[jaywcjlove]

@ifbarrera https://ant.design/components/form/#components-form-demo-customized-form-controls

[an-lee]

btw, for 2.1.8 version, the props autoFocus seems not working. It always auto focus even autoFocus={false} is set. @jaywcjlove