Quick actions in visual builder

[cruxcode]

What is Quick Actions?

Each component has some frequently used options from styles, custom, callbacks etc. This set of frequently used options for each component is referred to as quick actions. For example, quick actions for TextBox would be custom.text (the text content inside the TextBox).

What is Quick Actions Panel?

The Quick Actions Panel appears close to the component inside the canvas itself.

Plan of action to implement Quick Actions Panel

1. Create a map of CSS property name and the component that's used to edit the value in the styles panel.

const StylePanelMap: {[propertyName: string]: React.FC<any>} = {
  border: EditBorderComponent,
  width: EditWidthComponent,
}

2. Add quickActions field to ReactComponentManifestSchema

type ReactComponentManifestSchema = {
...
quickActions: {
  styles: string[],
  custom: string[]
}

3. Create a QuickActions overlay component in atri-app-core package. This QuickActions component takes in the ReactComponentManifestSchema["quickActions"] from a component's manifest and displays the EditComponent for each ReactComponentManifestSchema["quickActions"]. Whenever, a Quick Action is edited, it will be sent to the pwa-builder-manager.

4. Handle message from atri-app-core in pwa-builder-manager.