☰

Bubble Editor Enhancements

Enhances Bubble.io editor: Data Type/Option Sets/Attributes (layout, colors). Modal dialogs - full keyboard support (Enter/Esc, Tab nav). Toggleable canvas padding. Ctrl+N for hinted "Create a new..." buttons.

作者
kibermaks
日安装量
0
总安装量
1
评分
0 0 0
版本
2025.05.10-04
创建于
2025-05-10
更新于
2025-05-10
大小
28.6 KB
许可证
MIT
适用于

Bubble.io Editor Enhancements

This script offers several enhancements for the Bubble.io visual editor, aiming to improve keyboard accessibility for modal dialogs, provide quick creation shortcuts, refine data table layouts, and offer editor canvas layout options.

It's shared with the community in the hope that it's useful for fellow Bubble developers.

Key Features:

1. Keyboard Navigation and Shortcuts for Modals & Actions

This section focuses on reducing mouse usage for common editor tasks:

  • Initiate "Create New..." Actions with Ctrl+N:
    • Press Ctrl+N to click buttons like "Create a new field", "Create a new attribute".
    • Visual Cue: The 'N' in these target buttons is underlined as a shortcut reminder.
    • This shortcut avoids conflicts by not activating if an input field is focused or if a modal is already open.
  • Full Keyboard Control Within Modals:
    • Focus: Modals like "Create New Field/Attribute" generally auto-focus the first input (e.g., "Field Name").
    • Tab Navigation: Use Tab and Shift+Tab to navigate between "Field Name", "Field Type" (dropdown auto-opens), "Is this a list?" checkbox, and the "Create" button.
    • Dropdowns & Checkboxes: Interact with the "Field Type" dropdown (activate with Tab) and toggle the "Is this a list?" checkbox with Spacebar when focused.
    • Confirm/Cancel: Use Enter for the primary action (e.g., "Create", "DELETE") and Escape to "Cancel" in dialogs and confirmation popups.

Intended Benefit: To make common data and attribute management tasks faster and more efficient by allowing a more keyboard-centric workflow.

2. Data Table & Option Set Layout Adjustments

These changes aim to improve the readability and space utilization of data definition tables:

  • Improved Use of Available Width:
    • Column layouts in Data Type definitions (e.g., "Field Name", "Field Type", "Default value") are adjusted to make better use of horizontal space, rather than having short inputs followed by unused areas.
  • Alternating Row Colors:
    • Custom (non-built-in) fields in Data Types and attributes in Option Sets now have alternating background colors for easier visual distinction between rows.
  • General Spacing: Some minor spacing adjustments are included.

Intended Benefit: To make viewing and managing data structures clearer and potentially reduce visual strain.

3. Editor Canvas Layout Option (Toggleable)

  • Right-Aligned Canvas:
    • Provides an option to shift the main editor canvas slightly to the right. This consolidates most of the "empty" workspace to the left side of the canvas.
  • Rationale for Properties Editor Placement:
    • This can be useful for users who keep the floatable Properties editor undocked. Placing it on the created left-side space, next to the Elements Tree, can reduce mouse travel compared to placing it on the far right of the screen.
  • Toggleable via Tampermonkey Menu:
    • This canvas alignment can be turned ON or OFF using a command in the Tampermonkey extension menu (Toggle Canvas Right Padding). The preference is saved.

Intended Benefit: To offer an alternative layout that some users might find more ergonomic for their specific workflow with the Properties editor.

How to Use:

  1. Install a user script manager extension (e.g., Tampermonkey).
  2. Click the "Install this script" button on Greasy Fork.
  3. The script should automatically run on Bubble editor pages (https://*.bubble.io/page*). You may need to refresh your Bubble editor page if it was already open during installation.

Notes:

  • This is a user-created script that modifies the Bubble editor's front-end. Please use it with the understanding that it's not an official Bubble feature.
  • Bubble.io updates could potentially affect how this script functions, particularly CSS selectors for styling or button identification.
  • If you experience issues, try disabling the script first to check if it's related. The DEBUG_MODE flag at the top of the script can be set to true for console logs, which might be helpful for troubleshooting.

Author: Kibermaks ([email protected])

Feedback, suggestions, or reports of issues are welcome.