prosemirror.css is not in the editor whitespace 'pre-wrap'

[gokulramdev]

I am work around with track change requirement, I have one issue white space if user delete after white space they behave different in chrome browser if i work around firefox it working,I think the major issue white-space:'pre-wrap' how can i use in the nytimes -prosemirror
The functionality worked in firefox but it make issue in chrome related browser
chrome view
screen-capture.webm

Firebox view
screen-recorder-tue-sep-10-2024-13-11-52.webm

I am trying apply this css it won't be worked

.ProseMirror {
border: 2px solid #00008b;
border-radius: 0.25rem;
padding: 1rem;
outline: none;
font-family: Arial;
font-weight: 500;
font-size: 18px;
display: block;
word-wrap: break-word;
white-space: pre-wrap;
white-space: break-spaces;
}

.ProseMirror pre {
white-space: pre-wrap;
}

This my code https://github.com/gokulramdev/prosemirror-trackchanges

[tilgovi]

The difference seems to have nothing to do with CSS or react-prosemirror to me. The transaction that prosemirror-view generates is different in Chrome vs Firefox, but I can't say why. In Firefox, it creates a step that replaces the "r" character with "" (empty). In Chrome, it creates a step that replaces "r editor!" with " editor!".

Both of these are valid, in some sense, but your trackedTransaction() logic seems to get confused by it.

You could make a reproduction example using plain prosemirror-view, without React, and file a bug upstream on prosemirror-view. Or maybe there's a way you can work around it in your code.

Without spending more time digging, I can't see any way react-prosemirror is involved here, though.

[gokulramdev]

when I am trying load the prosemirror view it's not fully loaded in the editor it's casuing an warning message

ProseMirror expects the CSS white-space property to be set, preferably to 'pre-wrap'. It is recommended to load style/prosemirror.css from the prosemirror-view package.
overrideMethod @ console.js:288
checkCSS @ index.js:4774
flush @ index.js:4696
(anonymous) @ index.js:4552
setTimeout
flushSoon @ index.js:4551
webpack_modules../node_modules/prosemirror-view/dist/index.js.handlers.beforeinput @ index.js:3784
webpack_modules../node_modules/prosemirror-view/dist/index.js.view.dom.addEventListener.view.input.eventHandlers. @ index.js:3050
Show 1 more frame
Show less

can you help or guide how to load the css in the editor @tilgovi