uiwjs / react-markdown-editor

A markdown editor with preview, implemented with React.js and TypeScript.
https://uiwjs.github.io/react-markdown-editor
MIT License
327 stars 32 forks source link

Multiple Errors - CodeMirror plugin crashed + provider is not a function #194

Open petrkrizek opened 1 year ago

petrkrizek commented 1 year ago

Hi, first of all thanks for the good work.

I use basic example, app is run with razzle.

const [markdownVal, setMarkdownVal] = useState(code)
  return (
    <MarkdownEditor
      value={markdownVal}
      onChange={(value) => {
        setMarkdownVal(value)
      }}
    />
  )

On load I get error

CodeMirror plugin crashed: TypeError: tags is not iterable
    at HighlightStyle.style (index.js:232:29)
    at highlightTags (index.js:249:33)
    at HighlightBuilder.highlightRange (index.js:297:22)
    at highlightTree (index.js:267:13)
    at TreeHighlighter.buildDeco (index.js:1664:26)
    at new TreeHighlighter (index.js:1646:33)
    at ViewPlugin.create (index.js:1850:42)
    at PluginInstance.update (index.js:1869:44)
    at new EditorView (index.js:6199:20)
    at useCodeMirror.ts:123:29
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)
    at commitPassiveMountEffects (react-dom.development.js:24866:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:3)
    at flushPassiveEffects (react-dom.development.js:26984:14)
    at react-dom.development.js:26769:9
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)

which is discussed here https://discuss.codemirror.net/t/highlighting-that-seems-ignored-in-cm6/4320/15

On editor click I get

index.js:2813 Uncaught TypeError: provider is not a function or its return value is not iterable
    at EditorState.languageDataAt (index.js:2813:32)
    at CompletionState.update (index.js:683:19)
    at StateField.update [as updateF] (index.js:819:38)
    at Object.update (index.js:1795:34)
    at EditorState.computeSlot (index.js:2627:94)
    at ensureAddr (index.js:2031:25)
    at new EditorState (index.js:2564:13)
    at EditorState.applyTransaction (index.js:2627:9)
    at get state [as state] (index.js:2278:29)
    at EditorView.update (index.js:6278:24)
    at EditorView._dispatch (index.js:6193:59)
    at EditorView.dispatch (index.js:6259:14)
    at MouseSelection.select (index.js:3590:23)
    at MouseSelection.move (index.js:3571:14)

which is in node_modules/@codemirror/state/dist/index:2811

If I patch these, it will start working, however more errors show up when typing e.g. <div in editor..

Any ideas?

jaywcjlove commented 1 year ago

https://codesandbox.io/embed/react-markdown-editor-ybpce?file=/src/App.js

image

@petrkrizek I have no way to reproduce your error