Unable to edit markdown field after updating to 5.0.0

[coyotefather]

After updating to 5.0.0, markdown fields in Sanity Studio are no longer editable. It also shows a grey square to the right and a string of Xs. The field in the screenshot was added after updating to 5.0.0 and had no content within it.

To Reproduce

Steps to reproduce the behavior:

1. Uodate ti 5.0.0 from version 4.x
2. Attempt to a document that has a markdown field

Expected behavior

Clicking into the field allows one to edit it.

Screenshots

Which versions of Sanity are you using?

@sanity/cli (global) 3.57.2 (up to date)
@sanity/color-input 3.1.1 (up to date)
@sanity/icons 3.4.0 (up to date)
@sanity/image-url 1.0.2 (up to date)
@sanity/vision 3.57.2 (up to date)
sanity 3.57.2 (up to date)

What operating system are you using?

Mac OS 14.6.1

Which versions of Node.js / npm are you running?

NPM 10.8.2
Node.js 20.17.0

Additional context:

This is a NextJS app router project. Here are the dependencies in my package.json:

"dependencies": {
    "@mdi/js": "^7.4.47",
    "@mdi/react": "^1.6.1",
    "@nextui-org/react": "^2.4.6",
    "@nextui-org/system": "^2.2.5",
    "@nextui-org/theme": "^2.2.9",
    "@reduxjs/toolkit": "^2.2.7",
    "@sanity/color-input": "^3.1.1",
    "@sanity/icons": "^3.4.0",
    "@sanity/image-url": "^1.0.2",
    "@sanity/vision": "^3.54.0",
    "@types/react-transition-group": "^4.4.10",
    "algoliasearch": "^4.24.0",
    "clsx": "^2.0.0",
    "easymde": "^2.18.0",
    "framer-motion": "^11.3.8",
    "next": "^14.2.9",
    "next-sanity": "^9.4.7",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-instantsearch": "^7.13.1",
    "react-instantsearch-nextjs": "^0.3.11",
    "react-markdown": "^9.0.1",
    "react-redux": "^9.1.2",
    "react-transition-group": "^4.4.5",
    "remark-extended-table": "^2.0.2",
    "remark-gfm": "^4.0.0",
    "remark-heading-id": "^1.0.1",
    "sanity": "^3.57.2",
    "sanity-algolia": "^1.1.0",
    "sanity-plugin-markdown": "^4.1.2",
    "styled-components": "^6.1.12",
    "use-debounce": "^10.0.3"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.14",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/remark-heading-id": "^1.0.0",
    "eslint": "^8",
    "eslint-config-next": "^14.2.5",
    "postcss": "^8",
    "tailwindcss": "^3.4.11",
    "typescript": "^5"
  }

[coyotefather]

I resolved this today by adding import 'easymde/dist/easymde.min.css' to my layout.tsx file (I'm using route groups so I can use more than one root layout - this keeps my embedded studio cleaner). I didn't think I needed to import the CSS since this is an app router NextJS project, but maybe I misunderstood the installation instructions? It didn't present an issue until this version, though.

[jaymehta20]

@coyotefather Hi there! Could you please share the location where you added that import? When I try to add the same thing, I get a module not found error, even though I have the sanity-plugin-markdown installed. Thanks a bunch!

  "name": "nextjs-15",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "packageManager": "pnpm@9.12.3",
  "overrides": {
    "react": "$react",
    "react-dom": "$react-dom"
  },
  "dependencies": {
    "@radix-ui/react-icons": "^1.3.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@sanity/image-url": "1",
    "@sanity/vision": "3",
    "@tailwindcss/typography": "^0.5.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.454.0",
    "next": "15.0.2",
    "next-auth": "5.0.0-beta.25",
    "next-sanity": "^9.8.8",
    "react": "19.0.0-rc-02c0e824-20241028",
    "react-dom": "19.0.0-rc-02c0e824-20241028",
    "sanity": "3",
    "sanity-plugin-markdown": "^5.0.0",
    "styled-components": "6",
    "tailwind-merge": "^2.5.4",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "15.0.2",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}```

[coyotefather]

I'm using multiple root layouts, if it matters:

I'm also using NextJS 14 at the moment - just noting any differences.