"Hacking" the Bubble editor for better UX

Tips
1

Hi all,

Wanted to share a quick hack/fix to something that frequently frustrates and slows me down while working in Bubble.

When working with long texts in workflows, the floating property editor is quite difficult to work in.

My solution: A resizable property editor

Before:

image
image615×798 41.6 KB

After:
2023-01-26 19-21-22 (1)

image
image1075×903 31.3 KB

To do this in your own editor, popup the developer console, and copy and paste this code.

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/interactjs/dist/interact.min.js';
document.head.appendChild(script);


(function(){
    let style = `<style>

.section {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
width: 100% !important;
}

.property-editor-2 .row, .slidable-palette .row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.prop-row-contents {
    display: flex;
    flex-wrap: wrap;
}

.bb-code-button, .show-doc-btn {
margin-left: auto;
}

.long-text-composer {
    width: 100%;
    min-width: 300px;
}

.caption.LongText {
    min-width: 100%;
}

.property-editor-2 .row .body, .slidable-palette .row .body{
flex: 2;
}

.composer.hover_fade_out {
    width: 100%;
}

.spot.property-editor-control.mandatory.no-editor.composer-dropdown-long {
    width: 100%;
}

.short-text-composer {
width: 100%
}

input.TextBox.property-editor-control.mandatory {
    width: 100%;
}

.component-checkbox.property-editor-control {
    float: right;
}
.spot.property-editor-control.optional.no-editor.composer-dropdown-long {
    width: 100%;
}

.row[prop_name=condition] {
width: 100%;
}

.section[section_name="Position2"] {
  flex-direction: row;
justify-content: space-between;
}


.entry {
    width: 100% !important;
}

.text-composer.property-editor-control.short-text-composer {
    width: 100% !important;
}

.editor.button {
    width: 100%;
}

.composer-dropdown .spot.composer-dropdown-mid_extra_large {
    width: 100%;
}

.row.tiny {
    height: 18px;
}

.composer-dropdown .spot.composer-dropdown-extra_extra_large {
    width: 100%;
}

.condition-from-style {
    width: 100%;
}

.state.section {
    display: block;
}

.composer.hover_fade_out {
    width: 100% !important;
}

.condition {
    width: 100%;
}

.add-new-property-rule {
    width: 100% !important;
}

.section[section_name="Border"] {
  display: block;
  width: 100%;
}



.section[section_name="Responsive"] {
  display: block;
  width: 100%;
}

.section[section_name="Margins"] {
  display: block;
  width: 100%;
}

.section[section_name="PaddingFields"] {
  display: block;
  width: 100%;
}


.section[section_name="SizingPreviews"] {
  display: block;
  width: 100%;
}


.section[section_name="ElementMetaActions"] {
  display: block;
  width: 100%;
}

.section[section_name="Font"] {
  display: block;
  width: 100%;
}

.rows .state .property-rules .row {
flex-direction: row;
width: 100%;
}

.rows .state .property-rules .row .prop-row-contents {
    width: 100%;
}

.delete-state-property-container, .delete-transition-container {
    align-self:center;
}

.rows .state .property-rules .row .body .long-text-composer, .rows .state .property-rules .row .body .MultilineTextBox {


}

.row[prop_name=link_color] .composer-color, .row[prop_name=font_color] .composer-color, .row[prop_name=icon_color] 
.composer-color, .rows[node_type=PoweredByBubble] .row[prop_name=text_color] .composer-color, .section[section_name=AddToAnyContent] 
.row[prop_name=icons_color] .composer-color, .section[section_name=InputContent] .row[prop_name=border_color] .composer-color, .section[section_name=InputContent] 
.row[prop_name=background_color] .composer-color, .section[section_name=InputContent] .row[prop_name=handle_color] .composer-color, .section[section_name=InputContent] 
.row[prop_name=range_area_color] .composer-color {
width: 100%
}

.rows .state .property-rules .row .caption {
    width: max-content;
    white-space: nowrap;
    overflow: visible;
}

.editor.dropdown {
    float: right;
}

.composer-dropdown .spot.composer-dropdown-mid_extra_large {
    width: 100%;
min-width: 168px;
}

.spot.property-editor-control.optional.no-editor.composer-dropdown-long {
    width: 100%;
    min-width: 168px;
}


</style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();

image
image1454×902 63 KB

And then this code.

interact('.property-editor-2')
  .resizable({
    // resize from all edges and corners
    edges: { left: true, right: false, bottom: false, top: false },

    listeners: {
      move (event) {
        var target = event.target
        var x = (parseFloat(target.getAttribute('data-x')) || 0)

        // update the element's style
        target.style.width = event.rect.width + 'px'

      }
    },
    modifiers: [
      // keep the edges inside the parent
      interact.modifiers.restrictEdges({
        outer: 'parent'
      }),

      // minimum size
      interact.modifiers.restrictSize({
        min: { width: 340, height: 50 }
      })
    ],

    inertia: true
  })
  .draggable({
    listeners: { move: window.dragMoveListener },
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ]
  })

Must be done in two steps, since we need to allow time for the library to load that we added in step 1.

25 Likes
2

Aye we out here

1 Like
3

Very very cool!! Thanks

1 Like
4

Works perfectly. Now just have to find a way to do this quickly.

2 Likes
5

Wow! This is great.

Like @christo1 said, now we need to find out how we can repeat it quickly as and when we need. Maybe some Chrome plugin?

2 Likes
6

I also noticed it does not allow resize of conditionals nor if you drill down e.g Arbitary text - this pop-up does not resize. I’ll take what I can get though, so thanks again for sharing.

7

@christo1 Yeah I didn’t test that part too well. I just updated my post with a fix for the conditionals. And yes, I tried making that popup resizable as well, but it was quite buggy. Maybe I will give it another shot.

@mghatiya Good idea, a chrome plugin would work!

8

That’s awesome. Thank you so much. The Chrome plugin is a great idea as well.

1 Like
9

After seeing lots of people using Chrome extensions having their apps or functionality break whenever Bubble does a non version update…you really should put a disclaimer that things may or may not break.

So Bubble beginners understand the risk of any potential problems with your hack and not flood the forums or bug reports thinking it’s a problem with Bubble’s editor.

10

Very cool. :+1: :+1: :+1:

1 Like
11

@tim12333 Great job, thank you for adding value to bubble :slight_smile:

1 Like
12

Another one to absolutely improve your editor performance, deactivate the issue monitor by adding this URL parameter:
&issues_off=true

:warning: Make sure to remove it before pushing live as it won’t prevent you to push if you have errors

13

Yep this is definitely a use at your own risk hack. Bubble can silently break it.

I would consider adding on to this with more improvements & officially supporting it, but supposedly Bubble’s editor redesign is around the corner… although I’ve heard that for years, so who knows :man_shrugging:

1 Like