Editor shows [object Object] instead of text

[peteole]

trafficstars

Hi, I am using this markdown editor and generally, it works amazingly (thanks :) ) However there is a strange issue with it: At the first rendering, the editor side renders strange symbols in the form of [object Object] instead of the actual text: The bad symbols are not selectable, instead when trying to copy them, the correct text is displayed. Also changing something in the editor immediately fixes the problem. This is how the element looks like in dev tools:

And here is the react component I am using to render it:

import loadable from '@loadable/component';
const MDEditor = loadable(() => import('@uiw/react-md-editor'))
import { useState } from "react"
import { Link, useNavigate, useParams } from "react-router-dom"
import { useAddImageMutation, useAddProjectTagMutation, useDeleteProjectMutation, useGetProjectByIdQuery, useRemoveImageMutation, useRemoveProjectTagMutation, useUpdateImageDescriptionMutation, useUpdateProjectDescriptionMutation, useUpdateProjectNameMutation } from "../schemas"
import Button from "../shared/Button"
import Input from "../shared/Input"
import "./projectEditor.css"
import useConfig from "../config";
import TagSelector from '../shared/tagSelector/TagSelector';


export const ProjectEditor: React.FC = props => {
    const params = useParams()
    const projectId = params["id"]
    const config = useConfig()
    const [description, setDescription] = useState<string | null>(localStorage.getItem("description#" + projectId))
    const projectData = useGetProjectByIdQuery({
        variables: { id: projectId || "" }, onCompleted: (data) => {
            setDescription(data?.getProject?.description || "")
        }
    })
...
    const [updateProjectDescription] = useUpdateProjectDescriptionMutation()
    if (!projectId) {
        return <Link to="/">Invalid URL! Go home</Link>
    }
    if (!projectData.data?.getProject) {
        return <Link to="/">Invalid Project ID! Go home</Link>
    }
    return (
        <div className="project-editor">
            <h1>Edit project "{projectData.data?.getProject?.name}"</h1>
            ...
            {description !== null && <div className="project-editor-component">
                <h2>Description</h2>
                <MDEditor value={description} preview={config.view == "mobile" ? "edit" : undefined}
                    onChange={(newDescription) => {
                        setDescription(newDescription || null)
                    }}
                />
                <Button onClick={() => {
                    const newDescription = description || ""
                    setDescription(null)
                    updateProjectDescription({ variables: { newDescription, projectId: projectId } })
                        .then((res) => {
                            if (res.data?.projectMutation?.updateDescription) {
                                projectData.refetch().then(() => {
                                    setDescription(newDescription)
                                })
                            } else {
                                alert(res.errors?.join(""))
                                setDescription(newDescription)
                            }
                        }).catch((r) => {
                            alert("Could not update description")
                            setDescription(newDescription)
                        })

                }}>Save</Button>

            </div>}
          ...
        </div>
    )
}

Interestingly this issue only occurs in the bundle and not in the dev mode (vitejs) which makes it hard to debug. Am I doing something wrong or is this an actual bug?

[jaywcjlove]

https://codesandbox.io/embed/markdown-editor-for-react-izdd6?fontsize=14&hidenavigation=1&theme=dark

Provide an example via codesandbox.io?

@peteole

[peteole]

Unfortunately it's not that easy. Even in my local development setup, I cannot reproduce the bug. However it occurs consistently on the website I'm building. I have been trying to track down the issue for a while now and I am pretty sure that the value I pass into the "value" property of the editor really is a string and not a strange object. Also, the textarea shows the correct value, but the "pre" element does not: Once triggering a rerender by changing something in the textarea fixes the rendering issues.

Could I ask you to try it out on my website? I am afraid the issue is so "fragile" that it's very hard to reproduce in the code sandbox (since it does not even occur if the code is not bundled in the dev setup)? I do not know enough how the library works so I did not manage to track down the issue myself, but maybe you can! Or we can have a zoom session and track it down together? My url is huddle.hsg.fs.tum.de. To see the issue, the following steps are necessary:

1. create an account
2. create a project on the account page
3. Add a description to the project (this is where the markdown editor is used)
4. Click save
5. reload the page

Also here is the full code in case that helps.

[jaywcjlove]

There is no way to run your example. @peteole

Example: https://codesandbox.io/embed/fancy-currying-jyqzqo?fontsize=14&hidenavigation=1&theme=dark

[jaywcjlove]

Are you sure it's not vite's problem? Upgrade the vite version? @peteole

[TheDevMinerTV]

We have the same issue.

Repository: https://github.com/battleBit-Community-Servers/BBModules-Frontend Demo page: https://modules.battlebit.community/module/6 (you might have to open multiple tabs, hard-reloading the current tab doesn't seem to replicate it) with no errors in the console.

[RainOrigami]

It is very inconsistent. Sometimes it loads fine, other times it's all [object Object] in code blocks.

https://github.com/uiwjs/react-md-editor/assets/51454971/4494af08-cca7-4900-beab-109f0b0ee17b

[jaywcjlove]

https://codesandbox.io/p/sandbox/long-bird-5r9mnf?file=%2Fsrc%2FApp.tsx%3A2%2C46

@TheDevMinerTV I can't reproduce your error

[RainOrigami]

https://codesandbox.io/p/sandbox/long-bird-5r9mnf?file=%2Fsrc%2FApp.tsx%3A2%2C46

@TheDevMinerTV I can't reproduce your error

the issue occurs with code blocks (```), not with just # test

it also never occurs while being ON the page that loads the markdown (eg. mashing F5 does not trigger it). it only occurs when you load the page in a new tab, see my video as an example.

[jaywcjlove]

@TheDevMinerTV I still can't reproduce the error -> https://codesandbox.io/p/sandbox/long-bird-5r9mnf?file=%2Fsrc%2FApp.tsx%3A2%2C46