Payload CMS - alternative rich text editor using rich-markdown-editor

MarkdownField.ts

import React, { useCallback, FunctionComponent } from 'react'
import { useField } from 'payload/components/forms'
import { Field } from 'payload/types'
import Editor from 'rich-markdown-editor'

// Make sure to never re-render the editor, since it tracks the value on its own.
const MemorizedEditor = React.memo(Editor, (prev, next) => prev.id === next.id)

type FieldWithPath = Field & { path?: string }

export const MarkdownField: FunctionComponent<FieldWithPath> = (
  props: FieldWithPath
) => {
  const { path, admin } = props
  const { value, setValue } = useField<string>({ path })
  const valueWasLoaded = Boolean(value) // Don't render the editor before the value had a chance to load!

  const onChange = useCallback(
    (getValue) => {
      const newValue = getValue().replace(/^\s*\\/gm, '')
      setValue(newValue)
    },
    [path]
  )

  const topLevelStyle: React.CSSProperties = {
    ...((admin as any)?.style ?? {}),
    marginBottom: '60px',
  }
  return (
    <div style={topLevelStyle} className="field-type markdown">
      {valueWasLoaded && (
        <MemorizedEditor
          id={`markdown-field-${path.replace(/W/g, '-')}`}
          defaultValue={value}
          onChange={onChange}
        />
      )}
    </div>
  )
}

package.json

{
  "name": "xxxx",
  "description": "xxxx",
  "version": "xxxx",
  "main": "dist/server.js",
  "license": "UNLICENSED",
  "engines": {
    "node": ">=14.18.1"
  },
  "scripts": {
    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
    "build:server": "tsc",
    "build": "yarn build:payload && yarn build:server",
    "serve": "PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
    "generate:types": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types"
  },
  "dependencies": {
    "JSONStream": "^1.3.5",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-http-proxy": "^1.6.3",
    "google-auth-library": "^7.11.0",
    "payload": "^0.14.0",
    "rich-markdown-editor": "^11.21.3",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "@types/express": "^4.17.9",
    "@types/express-http-proxy": "^1.6.3",
    "cross-env": "^7.0.3",
    "nodemon": "^2.0.6",
    "prettier": "^2.5.1",
    "ts-node": "^9.1.1",
    "typescript": "^4.1.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "strict": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "jsx": "react",
  },
  "ts-node": {
    "transpileOnly": true
  }
}