uiwjs / react-markdown-editor Goto Github PK

I tried adding an inline image like this to my markdown, but it doesn't display.

![png tester2](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHoAAABkCAYAAABJhSQPAAAACXBIWXMAAAsTAAALEwEAmpwYAAADf0lEQVR42u3dW2vTYBzH8eeUPDm0adN2adeddNMpo2ObXoypsDvFd+WbEfRSUUHvxIFOEXG7UEFR5xybulO3tU3XpF4JIiJ43Pw/v+8LKP3nQ54nIaTlC2fOXGKIfAKHANAI0AjQCNAI0AjQCNAI0AjQgEaARoBGgEaARoBGgEaARoBGgAY0AjQCNAI0AjQCNAI0AjQCNKARoBGgEaARoNE/T+EQHL4SwXhsCbnrKWvHU3bdV3rHV3rPlXrPkbqppY5tYXUkVx3JZSo4Z4wxkXa7KukmKul2dDvdd+Mk9ltJ7DeTGNAHXFML+Slnu6slnVkpOfm1og5bttC/8lmp4LwtuGhbzGo40t1kFs7ogyjljNV9ZS9V3OB11Su97XUrWLqJFFtcLEdu9vmRTPSq3+vDHk2oli3k66qXWzie7V8r6AIuxogty+/KbvbxydzActmJcNVNrIYW6uloED0ay4/i9opg64GlH4yHgwe57wL6L/YhtN17k4Xh95HT8z99b0D/xBl891Rx5DDuv4D+AzW1kHMThaFnRzOD//McgP5BT0aD6N5UYYzCLID+Th/ztnPzXFSr+ypDZSZAf3MvPF/LVw/7rRKgf6NtX9nXZsvjW1krS3E+QDPGXgz64e2ZngnKMxoPfXeqMPh0NBimPqex0G3FxfXZythKSZdMmNdI6B1XWlcu9J1uauGYMrNx0OuBpS9f7JsxbW6joD+EtnvlfHXaxFVMABnQpJZrk5GNgN51pDJxTzYKuiM5v3q+epoh2tA3zkUn91zpgpkw9P3xfHWp4pZBTBj6bcXNUnwCBeivatlCXpstY1+mDn1nuucYWIlDv+z3cm+qbi9YCUO3FRe3zkZTICUOPV8L+8BJHLruKevJiWAEnMSh5ybDI6AkDr2VUfbLAR/LNnXo+Vo4AEbi0E0t5IshH9DUoRdHggiEBkA/rOWPg5A49GpBeynHD+KRh148lsUjSOrQKWfs2dHMEPiIQ28ElgM6A6Df9Ho50BkA/arfw20VdeiUM7ZW1EXQEYduaIl3uk2A3sjhQswI6PWc7YHNAOjNwAK0CdBbGUAbAb3r4RUbI6BbWtpgMwC6rbgFNgOgv/z1DyIOLdJuF2wGQNud7j7YDIB24qQNNgOgM42kCTYDoPO7+w2wGQAd1gFtBHRxuw1oE6AL2/stsBkA7cVJB2w/32c7r8DNq/e3jAAAAABJRU5ErkJggg==)

You need some special plugin to be able to view it.
Thanks

This is my sample code.

App,tsx

import MarkdownEditor from "@uiw/react-markdown-editor";
import { useState } from "react";

function App() {
  const [value, setValue] = useState("***hello***");
  return (
    <div className='App'>
      <MarkdownEditor
        value={value}
        onChange={(value, viewUpdate) => {
          setValue(value);
        }}
        renderPreview={() => <div />}
      />
    </div>
  );
}

export default App;

package.json

{
  "name": "resizeobserver",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.39",
    "@types/react": "^18.2.16",
    "@types/react-dom": "^18.2.7",
    "@uiw/react-markdown-editor": "^5.11.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

When I run and double click on the top right tile, the program crashes with this error

Uncaught runtime errors:
×
ERROR
ResizeObserver loop limit exceeded
    at handleError (http://localhost:3000/static/js/bundle.js:52748:58)
    at http://localhost:3000/static/js/bundle.js:52767:7

Toolbar is hidden only when hideToolbar is set to false, so the name is confusing.

Headers doesn’t seems to be generating id when rendering as HTML hence the bookmarks are not working, is there any workaround for bookmarks to work?

[@uiw/react-md-editor": "3.0.8"]

Hi Kenny,

Thank you for the great work on this. Starting to use it in a project. Curious if you are tinkering with removing the unsafe lifecycles calls (componentWillMount, componentDidMount, componentDidUpdate)? I am happy to take that on if you have not already started the work?

Thanks//cbs

I am currently wrapping for use in an internal project

The wrapper is very simple (in its early stages) and shown below

const MarkdownTextarea: FunctionComponent<MarkdownTextareaProps> = ({ invalid, ...props }) => {
    const classes = useStyles();

    return (
        <MarkdownEditor height={400} visible={true} {...props} />
    );
};

We are testing this wrapper using

    const [value, setValue] = useState<string>("# This is a textarea")
    return (<MarkdownTextarea value={value} onChange={action('onChange')} />)

When validating in story book I see the following error which seems to repeat every 500ms.

MarkdownTextarea/Default/error: (5) ["Uncaught TypeError: Cannot read property 'apply' of undefined", "http://localhost:9090/vendors~main.1a2cfcd6df914474ab0d.hot-update.js", 5350, 61, TypeError]
0: "Uncaught TypeError: Cannot read property 'apply' of undefined"
1: "http://localhost:9090/vendors~main.1a2cfcd6df914474ab0d.hot-update.js"
2: 5350
3: 61
4: TypeError

Any guidance and advice in helping to troubleshoot this would be appreciated

How can i insert a specific string at the current cursor position using the custom toolbar feature?

Is theme a method to get current cursor position and insert text? thank you!

this is my code, and it doesn't work properly.

please give me some advice, Thank you!

    execute: (mirror: ReactCodeMirrorRef) => {
      const { view, state, editor } = mirror
      if (!view || !state || !editor) {
        return
      }
      // NOTE: how to get current position of cursor?
      const lineInfo = view.state.doc.lineAt(view.state.selection.main.from)
      console.log(lineInfo)
      const insert = `![image title](image url)`
      view.dispatch({
        changes: {
          from: lineInfo.from,
          to: lineInfo.from + insert.length,
          insert,
        },
        selection: { anchor: lineInfo.from },
      })
    },

I've set data-color-mode="dark" on the root <html> but the editor is still in light mode.

Looking through the source css I don't see any references to the data-color-mode.

How is dark mode supposed to work?

source code is here is you are interested

你好 请问这个问题如何解决？

Found this, #38 but what does it mean? Can someone please explain.

^^

After updating to v5.11.2 CSS imports are broken:
Module not found: Can't resolve '@uiw/react-markdown-editor/markdown-editor.css'

On v5.11.1 we have no issues.

The imports we have on our code are like this:

import '@uiw/react-markdown-editor/markdown-editor.css';
import '@uiw/react-markdown-preview/markdown.css';

I set my project with Webpack-5 and typescript. I got this error first time I rendered the <MDEditor /> without "value" prop.

I checked the documentation and looks like "value" prop is the only required prop but I did not get typescript warning. Typescript gives me warning for other packages's required props so ts configuration in my project is correct. I though this might be a bug.

I use MarkdownEditor like this:

<MarkdownEditor
  value={this.state.note}
  onBlur={this.updateMarkdown}
  visible={false}
  height={500}
  ref={this.markdownEditor}
/>

When this.state.note is changed (transitioning to undefined and then to a new string value),
the editor text and the preview are updated correctly but longer lines of the editor text will
overlap with the preview.

I want to hide Preview but not works.
toolbarsMode={["fullscreen"]}

But it shows approx 10px of preview on right and preview button is hidden
previewProps={{
style:{display:none}
}}
same result not hiding completely

I set focus into the editor using this solution: #189 (comment) . However, as for anchor I use anchor: view.state.doc.length. And if editor contains more text, than its height, in this case I need it to be automatically scrolled to the bottom (and at the same time to the last symbol position). Any ideas how to achieve this? Thank you in advance!

When using this component with Next.js, I am facing this error. Specifically at lines like these.

error - ./node_modules/@uiw/react-markdown-editor/lib/esm/components/CodeMirror/codemirror.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm

Perhaps we can expose an export that is unstyled and one that is styled?

1. Expose UnstyledComponents

...
export default UnstyledComponent

2. Expose a module which has styles also imported.

import UnstyledComponent from ...
import styles from ...

export default ...

Is there a way to know when the user switches from normal to full screen mode?
Thanks

• bold

above doesn't change to bolded text

How to spread preview on the whole width (not the half of editor) by default?

Thank you in advance!

Hi, the text overflow from the defined height, and after scrolling it the cursor position gets some padding. As shown here

I am using the latest version of @uiw/react-markdown-editor 5.11.1
react 18.2.0

Is there a callback event for switching between edit mode and preview mode? I found that the toolbar can still be operated to insert data in preview mode, so I need the callback event for mode switching to obtain the current mode status and set the display and hiding of the toolbar based on the transition.

1. When I import the editor as follows, the preview is not show, How to control preview from ts code
2. Is it possible to only enable preview mode without editing, Instead of using <MarkdownEditor.Markdown />

const [markdown, setMarkdown] = useState("");
<MarkdownEditor
            height="300px"
            value={markdown}
            onChange={(value) => {
              setMarkdown(value);
            }}
          />

• 编辑器、预览视图同步滚动
• 隐藏编辑器(全窗口预览)
• 顶部工具栏 插入表格 、插入表情、上传图片(剪切板图片上传)、上传文件
• 快捷键支持
• 更多自定扩展

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Datasource	Name	Replacement PR?
npm	@babel/plugin-proposal-private-property-in-object

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @testing-library/react to v16

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

no matter window get larger or smaller, the height reduced always.
browser: chrome (I tried on safari and firefox as well, same issue)

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

const [mark, setMark] = useState('Enter Text Here');
const [visible, setVisible] = useState(true);
<div>
    <label htmlFor="body">
        Body:
    </label>
    <MarkdownEditor
        value={mark}
        visible={visible}
        onChange={(value, viewUpdate) => setMark(value)}
        height="500px"
    />
</div>

In the above code, when ever I start typing because of state update, the cursor moves out of the markdown window, so how can i type continuously?

As the title says, does it sanitizes the output HTML or do we have to use third party library like DOMPurify?

Apologizes if it has been already answered somewhere.

when i using react18 and using this as a component
const Editorx = ({ file }) => {
<MarkdownEditor value={file.content} onChange={(editor, data, value) => setContent(value)}>
}
than it give me a error
Uncaught TypeError: Cannot read properties of undefined (reading 'setSize')
it really spend me a lot of time to save this problem.and when i useing react under 18 .it works!

setting tabIndex attribute / prop on Markdown editor component like this:

              <MarkdownEditor
                value={value}
                tabIndex="0"
                onChange={onChange}
              />

it doesn't set it when rendered inside the app. Setting tabIndex manually in devtools makes it work as expected

Thank you for this awesome component! Please tell, how to remove toolbar at all?

I tried passing empty array, however right icons (switch to fullscreen and preview) still remain.
<MarkdownEditor value={markdown} onChange={(value, viewUpdate) => setMarkdown(value)} toolbars={[]} />

Hi I am using this great library and may I ask if we can have an image command that allows uploading image from local? Suppose we have a server that can we can upload the image to. The button can then receive a callback that return an image_url to be used in the editor like ![description](image_url).

When I implement the basic example in a newly created react app, it creates two separate text fields inside the editor.
This is really weird.
It looks like this:

Toolbar section

| 1 | #this is a text field which can be edited
| 1 | #this is another text field which is also editable

Try on https://uiwjs.github.io/react-markdown-editor/ with a very long document (Let's say you duplicate the content until it reaches 1000 lines), the editor becomes slower and slower. If you double or triple the lines, it becomes very unresponsive. Type something and it shows up after some seconds.

I tested the same contents on https://codemirror.net/try/?example=Markdown%20code%20block%20highlighting. It does not have the same problem. I guess the issue stays in this library's implementation.

Note that I tested with Preview OFF, plus under an incognito Chrome window.

I'm trying to use this package with the ModuleFederation microfrontend approach.

From a container app, I retrieve a component that uses this package. While testing the component with Storybook in the same project, it works well. However, when I attempt to use the same component, I encounter the following error:

TypeError: Cannot read properties of undefined (reading 'DEBUG')
    at Function.load (webpack://app/./node_modules/debug/src/browser.js?:228:17)
    at setup (webpack://app/./node_modules/debug/src/common.js?:269:33)
    at eval (webpack://app/./node_modules/debug/src/browser.js?:256:91)
    at ./node_modules/debug/src/browser.js (https://localhost:8085/vendors-node_modules_uiw_react-markdown-editor_esm_index_js.js:433:1)
    at __webpack_require__ (https://localhost:8085/componentsFederations.js:340:33)
    at fn (https://localhost:8085/componentsFederations.js:673:21)
    at eval (webpack://app/./node_modules/micromark/dev/lib/create-tokenizer.js?:5:63)
    at ./node_modules/micromark/dev/lib/create-tokenizer.js (https://localhost:8085/vendors-node_modules_uiw_react-markdown-editor_esm_index_js.js:3255:1)
    at __webpack_require__ (https://localhost:8085/componentsFederations.js:340:33)
    at fn (https://localhost:8085/componentsFederations.js:673:21)

I just use:

 <MarkdownEditor
                        height={300}
                        value={text}
                        onChange={(value, viewUpdate) =>
                            onChange('textName', value)
                        }
                        toolbars={[
                            'undo',
                            'redo',
                            'bold',
                            'header',
                            'italic',
                            'underline',
                            'strike',
                            'blockquote',
                            'link',
                        ]}
                        toolbarsMode={['preview']}
                    />

How can I get content normally ? I mean without for example **'s, ##'s ...

Uncaught TypeError: string.split is not a function
at splitLinesAuto (codemirror.js:681)
at Doc.splitLines (codemirror.js:6461)
at Doc. (codemirror.js:6115)
at Doc.setValue (codemirror.js:3940)

Having the following issue: when number of characters in line is more, than its width - the whole editor is being increased. Any ideas how to make just auto line wrapping? Video demo: https://somup.com/c3jviXUlmF . Component is styled like this. Version 5.2.0

<MarkdownEditor style={{ height: "150px", overflow: "scroll", padding: "8px", }} value={markdown} onChange={(value, viewUpdate) => { setMarkdown(value); }} />

Is there a way of disabling the fullscreen option on the right side? Couldn't find one.

look this:

The value previewed on the right is old. How to solve this problem

Hi, can you take a look at this example?
https://codesandbox.io/s/tender-dew-fwwcf?file=/src/App.js

Here all values added from start.

I think it's from the wrong position of cursor after input anything.

How to make editor focused (active with cursor in it) on component load? I guess I should do that with useEffect, however nor using refs, neigher getting element from document did not work for me:

1. write text.
2. onBlur from the editor.
3. do some other action in the page

Is there any kind of default code toolbar or does it have to be made custom?

If not are their any references I can go off of?

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?

Hello,
I want to wrap text to new line just like vs code.
I have given the fixed height to the editor but didn't find wrapText option

Thanks

我可以只使用预览功能吗？
是否有提供了相关的配置