Caramella App (Using ProseMirror)


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 :slight_smile:

I hope it would come from you :slight_smile: Cheers!

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;

Regards Frederik

Nice! Congratulations.

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

Thanks @frederik!

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.

Thanks @marijn!

I’ll pass it to our JS team. What file in what folder should these lines go in?

Congrats, video and product look slick!

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.

@wes-r thanks! I’ll ask them.