Editor

Draggable groups the looks like in Notion

This is a boring paragraph.

And another draggable paragraph.

Let’s finish with a boring paragraph.

HTML:

This is a boring paragraph.

And another draggable paragraph.

Let’s finish with a boring paragraph.

Text:

<div data-type="group"><p>This is a boring paragraph.</p></div><div data-type="group"><p>And another draggable paragraph.</p></div><div data-type="group"><p>Let’s finish with a boring paragraph.</p></div>

Hilite groups

This is a boring paragraph.

And another paragraph.

Let’s finish with a boring paragraph.

HTML:

This is a boring paragraph.

And another paragraph.

Let’s finish with a boring paragraph.

Text:

<div data-type="group" style="background-color: blue"><p>This is a boring paragraph.</p></div><div data-type="group"><p>And another paragraph.</p></div><div data-type="group" style="background-color: green"><p>Let’s finish with a boring paragraph.</p></div>

Simple create nested groups

This is a boring paragraph.

And another paragraph.

And a nested paragraph.

But can we go deeper?

Let’s finish with a boring paragraph.

HTML:

This is a boring paragraph.

And another paragraph.

And a nested paragraph.

But can we go deeper?

Let’s finish with a boring paragraph.

Text:

<p>This is a boring paragraph.</p><div data-type="group"><p>And another paragraph.</p><div data-type="group"><p>And a nested paragraph.</p><div data-type="group"><p>But can we go deeper?</p></div></div></div><p>Let’s finish with a boring paragraph.</p>