We announced Caramella app (It is a modern publishing app using ProseMirror).
Check it here and let us know what you think:
Now one problem we are having before launching Caramella is that we need ProseMirror to put a class on every empty P element in the edit area as the user type (we need to apply a special style to every empty line ). and that class and style should be there all the time, and should be realtime as we type and make new line breaks, Maybe just like “.empty” on every P that has BR only inside it.
Our team does not want to touch the ProseMirror code at all for update-ability, so they are telling me that it needs to come from the developers of ProseMirror. I am the one doing the CSS and responsible for styling these empty lines
Hi Bandar, the video looks great. Here’s what I did for CSS styling. In our case there’s an option to have a ¶ in every empty paragraph. The display: block was needed so chrome would still render a cursor in that line. This is with ProseMirror 0.10.x, so results may vary. You can easily inspect the code rendered by ProseMirror to see if this would work though.
p br[pm-ignore="trailing-break"]::before {
content: "\00b6";
opacity: 0.5;
display:block;
}
This is one of the use cases that node views were invented for. Here’s a crude example of how you could write a custom view for paragraphs that maintains a class like this:
nodeViews: { // As an option to EditorView
paragraph(node) {
let dom = document.createElement("p"), empty = node.content.size == 0
if (empty) dom.classList.add("empty")
return {
dom: dom,
contentDOM: dom,
update(newNode) {
if (!newNode.sameMarkup(node)) return false
let newEmpty = node.content.size == 0
if (newEmpty != empty) {
if (empty = newEmpty) dom.classList.add("empty")
else dom.classList.remove("empty")
}
return true
}
}
}
}
It is not only the need to style these empty lines, but also to know the “not empty lines” in order, like i want to know the first filled line and the second filled line even if the user made 5 empty lines between them. A class on empty lines (or on filled lines) is what i really need.
I am giving a special style also for the 1st filled line, the 2nd filled line, the 3rd and so on… not the normal paragraph stuff. I know i didn’t explain it properly in my 1st post, sorry.
NodeViews are one of the Editor Props that can be passed into your Editor View. Your JS team that put together the ProseMirror project should know where they initiated the Editor View.
