After searching this forum, I learned that the <br class="Prosemirror-trailingBreak" /> only exists in the editing view in order to provide consistent editing experience in different browsers.
I wish there’s an explanation about that because people like me will question about it’s existence.
If there’s already one, please guide me.
Thanks
<br> nodes in empty text blocks (or after trailing actual-content <br> nodes) are a traditional kludge in contenteditable elements. They prevent the browser from collapsing the empty block (which would make it invisible and hard to interact with) and avoid a number of weird browser behaviors (such as not being able to put the cursor after a trailing <br> node that’s actually part of the content). In many situations, native editing actions (such as creating a new block with enter) will insert these too.
Since a library like ProseMirror is dependent on the browser for some of its cursor motion and editing behavior, and the browser expects these to exist, the library makes sure they exist without actually polluting the real document with them, by treating them as part of the editable-surface-rendering behavior.
A few quick questions on the trailing page break:
First, where in the core code is it defined? Drop cursor or gap cursor? And does it use css in the core css files to add anything or is that just the name provided? I prefer to change the name of it to something a bit different.
Second, in my specific case I have a paragraph type that is bounded by parentheses, and I very effectively use the css :before and :after to add those parentheses which are not a part of the document text. But, when it is first added (having no content), it appears on screen like:
( )
Instead of:
(|) //with a blinking caret between the parens
Obviously the :after ) is laid out after the trailing break as it is in fact an after.
Is it possible to augment the trailing break to instead maybe be a 0px wide div and maybe add a to the content of the after to make it look correct with empty content?
It seems I should be able to make this work somehow if I can alter what is inserted for empty paragraphs, or at least to play around with it if I can do something of my own for those specific paragraph types I am working on.
It’s not a page break. It’s a line break.
These are rendered by prosemirror-view.
No. To serve its purpose it has to be a regular <br> element.
Of course, just a typo saying page break.
To accomplish what I want, a paragraph surrounded by ( and ), do I then have to have it in the DOM as actual characters? The before and after method works great with these paragraphs that have content but just not with no content.
I don’t know. Browsers sometimes fail to draw the cursor next to pseudo-elements like this, I guess that’s what happening for you. I don’t have a workaround for you.
I was thinking a blank space with no width might do it as it is a real thing in the DOM, but obviously I can’t use the following to accomplish that:
const newTextNode = state.schema.text(htmltoinsert);
Since the text is just text, not html. How can I insert html content in the new node I am creating, in place of the trailing break? Maybe that will look on screen like there is nothing when in fact there is a 0 width blank space.