Clicking an item in the library should NOT insert it into the page

Created on 23 May 2025, 13 days ago

Overview

Clicking on most (but not all e.g. Code components which open the code editor) things in the library immediately inserts them into the page (either at the top or under the currently selected component).

I propose that we remove that behaviour as it frequently leads to accidentally adding things to the page.

Instead, a new "Add to canvas" option should be added to the context menu for all items in the library (except Code components in the "Code" section which cannot be).

The wording "Add to canvas" is TBC.

Proposed resolution

The first step in this, unfortunately, requires a bit of clean up and rationalisation. As the number of different types of thing in the library has increased, the way that we render items into it has grown organically and has become complex and very much not easy to edit!

The following library items have a context menu

  • Exposed Code components
  • Sections
  • Overrides

The following library items do not have a context menu but should

  • Components
  • Dynamic Components

Consistently have a context menu for all items, but allow the contents and actions in the menu to be variable based on the type of item.

Remove the click handler from items in the library and instead allow insertion to be handled via the context menu (or drag and drop of course).

User interface changes

How the context menu should look for e.g. a Section:

Note the Label at the top confirming the name of the item the menu is spawned from. Note Delete is in red. Not all items in the library have the same options. SDC components for instance will just have "Add to canvas" as they cannot be deleted from the UI.

Feature request
Status

Active

Version

0.0

Component

User interface

Created by

🇬🇧United Kingdom jessebaker

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jessebaker
  • 🇫🇮Finland lauriii Finland

    +1 that it's pretty annoying that clicking the component adds them to a page.

    Could we use the clicking of a component to open the component in the code editor? It's pretty annoying to have to right click components to edit them. I realize the + button to indicate opening the library doesn't necessarily make sense with this so we may want to get some opinions from the design team.

  • 🇬🇧United Kingdom jessebaker

    Just for clarity, are you referring to Exposed Code Components in #3 @lauriii? Clicking Code Components that have not yet been exposed already does open the editor.

  • 🇫🇮Finland lauriii Finland

    Yep, that's what I'm referring. Same pattern would apply in future for Sections and no-code components.

  • 🇫🇮Finland lauriii Finland

    The components load really fast but I definitely still see the loading animation briefly even if I wait for bunch of time before:

Production build 0.71.5 2024