RichText Issues

[ninahorne]

Bug Report

There are a three issues I'm having with the RichText editor:

1. Sometimes when I click on one of the elements buttons (like ordered list, etc) an error occurs that breaks the whole form.
2. The area you have to click to focus the RichText editor is really small (one line)
3. You cannot highlight text in the RichText editor with your mouse (for copying, pasting, etc)

Expected Behavior

1. Click any button without breaking errors
2. That the whole RichText area be clickable to focus the cursor
3. That you can highlight text with your mouse in the RichText editor

Current Behavior

1. Here the error that occurs:

Uncaught (in promise) Error: Cannot find a descendant at path [0,0,0,0] in node: {"children":[{"type":"ul","children":[{"children":[{"text":""}],"type":"li"}]}],"operations":[{"type":"set_selection","properties":{"anchor":{"path":[0,0],"offset":0},"focus":{"path":[0,0],"offset":0}},"newProperties":{"anchor":{"path":[0,0,0],"offset":0},"focus":{"path":[0,0,0],"offset":0}}},{"type":"set_node","path":[0],"properties":{},"newProperties":{"type":"li"}},{"type":"insert_node","path":[1],"node":{"type":"ul","children":[]}},{"type":"move_node","path":[0],"newPath":[1,0]}],"selection":{"anchor":{"path":[0,0,0,0],"offset":0},"focus":{"path":[0,0,0,0],"offset":0}},"marks":null,"history":{"undos":[[{"type":"set_selection","properties":{"focus":{"path":[0,0],"offset":6}},"newProperties":{"focus":{"path":[0,0],"offset":0}}}],[{"type":"remove_text","path":[0,0],"offset":0,"text":"next steps"}],[{"type":"set_node","path":[0],"properties":{},"newProperties":{"type":"li"}},{"type":"insert_node","path":[1],"node":{"type":"ol","children":[]}},{"type":"move_node","path":[0],"newPath":[1,0]}],[{"type":"move_node","path":[0,0],"newPath":[1]},{"type":"remove_node","path":[0],"node":{"type":"ol","children":[]}},{"type":"insert_node","path":[1],"node":{"type":"ul","children":[]}},{"type":"move_node","path":[0],"newPath":[1,0]}],[{"type":"move_node","path":[0,0],"newPath":[1]},{"type":"remove_node","path":[0],"node":{"type":"ul","children":[]}},{"type":"set_node","path":[0],"properties":{"type":"li"},"newProperties":{}},{"type":"set_selection","properties":{"anchor":{"path":[0,0],"offset":0},"focus":{"path":[0,0],"offset":0}},"newProperties":{"anchor":{"path":[0,0,0],"offset":0},"focus":{"path":[0,0,0],"offset":0}}},{"type":"set_node","path":[0],"properties":{},"newProperties":{"type":"li"}},{"type":"insert_node","path":[1],"node":{"type":"ul","children":[]}},{"type":"move_node","path":[0],"newPath":[1,0]}]],"redos":[]},"blurSelection":{"anchor":{"path":[0,0,0],"offset":0},"focus":{"path":[0,0,0],"offset":0}}} at Object.get (index.es.js:2403:1) at Object.leaf (index.es.js:2481:1) at Object.leaf (index.es.js:1175:1) at Object.marks (index.es.js:1262:1) at isLeafActive (isActive.js:3:20) at LeafButton (Button.js:11:25) at renderWithHooks (react-dom.development.js:14985:1) at updateFunctionComponent (react-dom.development.js:17356:1) at beginWork (react-dom.development.js:19063:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)

2 & 3 seem pretty self explanatory.

Detailed Description

here's package.json

{ "name": "admin-panel", "description": "WWG Admin CMS", "version": "1.0.0", "main": "dist/server.js", "license": "MIT", "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:dev": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js", "test:e2e": "./node_modules/.bin/cypress open", "test:unit": "jest", "test:unit:watch": "jest --watch", "start:dev": "yarn install:prod && yarn serve:dev", "start": "yarn install:prod && yarn serve", "install:prod": "yarn install --prod --non-interactive --network-timeout 1000000000 --no-progress", "serve": "PAYLOAD_CONFIG_PATH=/home/site/wwwroot/dist/payload.config.js NODE_ENV=production node dist/server.js" }, "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@mui/material": "^5.4.0", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^12.1.2", "algoliasearch": "^4.13.0", "axios": "^0.23.0", "cloudinary": "^1.28.1", "coa": "^2.0.2", "cypress": "^9.2.0", "dotenv": "^8.2.0", "escape-html": "^1.0.3", "express": "^4.17.1", "jest": "^27.4.7", "jsonwebtoken": "^8.5.1", "lodash": "^4.17.21", "mandrill-nodemailer-transport": "^1.2.1", "nodemailer": "^6.7.3", "payload": "^0.15.0", "react-dom": "^17.0.2", "slugify": "^1.6.5", "streamifier": "^0.1.1", "styled-components": "^5.3.1", "svgo": "^2.8.0", "twilio": "^3.71.1", "webpack": "^5.58.2" }, "devDependencies": { "@babel/preset-env": "^7.16.7", "@babel/preset-react": "^7.16.7", "@babel/preset-typescript": "^7.16.7", "@types/escape-html": "^1.0.1", "@types/express": "^4.17.9", "@types/jest": "^27.4.0", "@types/nodemailer": "^6.4.4", "@types/react": "^17.0.38", "@types/react-dom": "^17.0.11", "@types/streamifier": "^0.1.0", "@types/styled-components": "^5.1.15", "babel": "^6.23.0", "babel-jest": "^27.4.6", "cross-env": "^7.0.3", "nodemon": "^2.0.14", "ts-jest": "^27.1.2", "ts-node": "^9.1.1", "typescript": "^4.1.3" } } Ï

[jmikrut]

Hey @ninahorne — we just released 0.15.1 which fixes items 2 and 3 from your list but we are having trouble recreating item 1.

By any chance, do you have reproduction steps that we could use, on 0.15.1, to try and test with?

[ninahorne]

Yes! this is resolved in 0.15.1. Thank you!. I'll let you know if I encounter number 1 again and try to help you recreate

[ninahorne]

I still appear to be having this issue. It works fine at first, but after a few saves, I have to reload the form to get it to allow me to select text.

[jmikrut]

Super weird. Ok - we're going to look into this a bit more.

Thanks for letting us know!

[DanRibbens]

In my testing I was able to recreate the issue while the toast was active after saving. That only lasts a few seconds, so I am not sure if this is the problem you're talking about or not. I found this in a dependency and I'm wondering if this is the source of the problem: fkhadra/react-toastify#550

I am updating react-toastify for now and I'm hoping that is the entirety of the issue for this one. If not we can reopen of course...

[DanRibbens]

I hope this is all we're up against here, if you're able to have a problem highlighting text after the validation toast is dismissed, than this issue is something different from what I found and fixed in the PR #522.

We'll get this released shortly and you can reopen if needed.

[ninahorne]

Just wanted to update and let you know that I think the issues I was experience had to do with React hitting its max rendering depth. I was using useWatchForm in a bunch of components and i think it overloaded the system.

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.