🤌 Rich text editor with real-time collaboration (Tiptap)

[rico.trevisan]

@satreoscar

the “hardbreak” way to create a new line while staying in the same <p> is not working. (screenshots)

cc: @stefan3

Could expand a bit on what you want? I want to make sure I understand.

The Hardbreak extension is already installed – I think it’s one of the ‘core’ libraries. You can already use it with the keyboard shortcuts.
What I can do is:

1. expose the only setting that it offers – keepMarks (docs) – but I’m not even sure what it does.
2. add the action to explicitly create a hardbreak.

Is that enough?

---

same but as a video

[rico.trevisan]

Could you share a bit more so that we can troubleshoot this together?

Here’s an overview of the changes.

[rico.trevisan]

Release 3.21.3 – HardBreak controls

• you can now turn on / off keepMarks
• you can trigger a hardBreak with an action
• you can always use a hard break with keyboard shortcuts

demo:

[macsparrow]

For sure! Thank you for the overview, that’s helpful. I think what I’m seeing is the opposite to the expected action. This is the CSS I have in the “base div CSS” field, just to do the overarching formatting.

/* main body */
} 
flex-grow: 1;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
line-height: 1.4;
padding-left: 12px;
padding-right: 12px;

/* code body */
} 
.tiptap {
  code {
    margin-top: 0;
  }
  pre {
    background: black;
    border-radius: 0.5rem;
    color: var(white);
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    line-height: 1.2;
   
 code {
      background: none;
      color: white;
      font-size: 16px;
      padding: 0;
}

And here are examples of the outputs I’m seeing in the different versions:

v3.20.2

v.3.20.3

[rico.trevisan]

You don’t need that .tiptap class. I got this working on my demo page.

flex-grow: 1;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
line-height: 1.4;
padding-left: 12px;
padding-right: 12px;

code {
    margin-top: 0;
    background: none;
    color: white;
    font-size: 16px;
    padding: 0;
}

pre {
    background: black;
    border-radius: 0.5rem;
    color: var(white);
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    line-height: 1.2;
}

[rico.trevisan]

FYI: I’ve updated the course with 2 more lessons:

• publishing and versioning
• bullet points

(and I nudged the price up)

get it here: https://indiecourses.com/catalog/build-a-bubbleio-plugin-tiptap-rich-text-editor-3C8d14sCCJfcqSLz7lw8D2

[macsparrow]

Yep it was my janky CSS causing the problem. Got it all fixed now. Appreciate your help!!

[satreoscar]

Hey Rico, I forgot to mention that I was not typing content and trying to do hardbreaks, but displaying an existing text (with “Content is JSON?” enabled)

Here is what my Python code looks like to create the text (backend) :

As you can see, I add {“type”: “paragraph”} to create spacings.

I first did with {“type”: “hardBreak”}, but it did nothing : the next word stayed in the same line

[nealbo]

Absolutely incredible plugin! The amount of customisation available let’s me tailor this perfectly.

But, being greedy(!), one thing I’d like to request is the ability to add “undo” and “redo” buttons. I see that TipTap has this functionality, and in fact in the plugin I can do “Ctrl+z” and “Ctrl+shift+z” to do it that way, but the ability to tie this to buttons would be amazing.

[rico.trevisan]

Indeed it’s there. I think I just have to expose some extra options.

[ben57]

Hey, I agree with all the people above who talk about how good this plugin is. +100 from me.

I’ve come across a weird edge case that I was hoping you might be able to advise me on. Basically I have a repeating group of tasks on the left, when I click on a task it sets the value of group surrounding the TipTap plugin on the right. So the task detail displays in the TipTap text area. Every time the user selects a new task the right panel updates.

I have auto binding turned on and so as the user types the changes are saved.

The problem is, when the user makes a change and then clicks on a new task before the auto binding has completed it’s save action the text is saved into the wrong (e.g. newly selected) task and I lose the users old data.

In production this happens all the time, and I’m getting lots and lots of complaint about it.

Any idea how I can fix this?

[rico.trevisan]

Oh, that sucks.

Could the following work:

1. user makes changes to the Task Detail pane (a Tiptap editor), autobinding has not saved yet
2. user clicks on the next task, that sets the next_task state to that task_id
3. Tiptap doesn’t change the document yet
4. When autobinding actually saves it, it triggers an event
5. That event changes the Task Detail pane to the task_id and clears that state.

Do you think that would work?

[ben57]

Yeah that sounds perfect, thanks for the speedy response.

Does the ‘on auto-bind save’ event exist?

Otherwise that sounds great (I kind of wish I’d thought of it haha)

[rico.trevisan]

Try this out: Tiptap with autobind and switching | Loom
editor link: Tiptap-demo | Bubble Editor
demo: https://tiptap-demo.bubbleapps.io/version-test/tiptap-auto-rg?debug_mode=true

[ben57]

Works perfectly

Thank-you!

For anyone else who comes across this and finds it useful, don’t miss the TipTap Enabled / Not Enabled Toggle which is key to making it work smoothly.

[justinbc4]

Love the plugin! It is extremely useful, especially for those who prefer to have their text editors look identical to the content they produce (much like Substack or Medium).

I do have a question regarding image captions. I see Tiptap has an “unofficial” figure extension which would permit this functionality (see Figure Extension | Tiptap Editor Docs), but I’m having trouble with importing a new module within my Bubble app and applying the imported extension to your plugin. Captions are often important for blogs with less capital to spend on images from Getty or Shutterstock, as you must include proper attribution for licensed and copyrighted works.

I guess my question is whether this is a feasible feature that could be implemented?