> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Actions Examples

## Article: Actions Examples

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/editor-react-components/manifest-reference/editor-element/actions/actions-examples.md

## Article Content:

# Actions Examples
<blockquote class="caution">

__Alpha:__
Editor React Components are currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.

</blockquote>


This article provides practical examples of using native actions, custom actions, and display filters in your component manifests.

## Renaming native actions

A simple override that changes the labels without changing the behavior:

```json
{
  "editorElement": {
    "selector": ".collapsible-text",
    "displayName": "Collapsible Text",
    "actions": {
      "settings": {
        "displayName": "Text Settings",
        "execution": {
          "actionType": "data",
          "data": {
            "dataItemKey": "text"
          }
        }
      },
      "design": {
        "displayName": "Text Design",
        "execution": {
          "actionType": "cssProperty",
          "cssProperty": {
            "cssPropertyKey": "backgroundColor"
          }
        }
      }
    }
  }
}
```

<!-- TODO: Uncomment when custom panels are supported
## Hide a native action and replace it with a custom action

If your component has image data but you manage media through a custom panel instead:

```json
{
  "editorElement": {
    "actions": {
      "media": {
        "hidden": true
      }
    },
    "customActions": {
      "manageMedia": {
        "displayName": "Manage Media",
        "execution": {
          "actionType": "panel",
          "panel": {
            "panelType": "panelId",
            "panelId": "d4e5f6a7-b8c9-7d8e-1f0a-2b3c4d5e6f7a"
          }
        }
      }
    }
  }
}
```

## Custom panel action

The SvgImage component adds a "Change Colors" button that opens a dedicated color-editing panel:

```json
{
  "editorElement": {
    "selector": ".wixui-svg-image",
    "displayName": "Vector Art",
    "customActions": {
      "vectorArtColors": {
        "displayName": "Change Colors",
        "execution": {
          "actionType": "panel",
          "panel": {
            "panelType": "panelId",
            "panelId": "c0b164d9-cd88-41d3-a45e-51b14c54c3ea"
          }
        }
      }
    },
    "data": {
      "svgId": {
        "dataType": "vectorArt",
        "disableDeletion": true
      },
      "link": {
        "dataType": "link"
      }
    },
    "cssCustomProperties": {
      "fill": { "cssPropertyType": "fill" },
      "stroke": { "cssPropertyType": "stroke" }
    }
  }
}
```

## Inline panel action

The following example opens an inline panel that loads content from a URL:

```json
{
  "editorElement": {
    "customActions": {
      "colorSettings": {
        "displayName": "Color Settings",
        "execution": {
          "actionType": "panel",
          "panel": {
            "panelType": "inline",
            "inline": {
              "displayName": "Color Settings",
              "contentType": "url",
              "url": "https://example.com/color-panel.html",
              "size": {
                "height": 300,
                "width": "MEDIUM"
              }
            }
          }
        }
      }
    }
  }
}
```
-->

## Event action

The TemplateContainer component adds a "Settings" custom action that dispatches an event to the editor script:

```json
{
  "editorElement": {
    "customActions": {
      "templateContainerSettings": {
        "displayName": "Settings",
        "execution": {
          "actionType": "event",
          "event": {
            "event": "templateContainerSettingsAction"
          }
        }
      }
    }
  }
}
```

## Forward action

<!-- TODO: when refElements are supported, add here -->

The Button component surfaces its child AnimatedIcon's customization panel. The AnimatedIcon is a ref element with `selectable: false`, so users can't select it directly. The forward action lets the parent Button expose the icon's editing UI.

When using `actionName: "custom"`, the target element must have a matching `customActions` entry in its own manifest. In this case, the AnimatedIcon component defines `customActions.animatedIcon` which the forward action invokes.

```json
{
  "editorElement": {
    "selector": ".button",
    "displayName": "Button",
    "elements": {
      "label": {
        "elementType": "inlineElement",
        "inlineElement": {
          "selector": ".label",
          "displayName": "Label",
          "cssProperties": {
            "font": {},
            "color": {}
          }
        }
      },
      "animatedIcon": {
        "elementType": "refElement",
        "refElement": {
          "displayName": "Icon",
          "selector": ".animated-icon",
          "type": "wixEditorElements.AnimatedIcon",
          "behaviors": {
            "selectable": false,
            "removable": true
          }
        }
      }
    },
    "customActions": {
      "animatedIcon": {
        "displayName": "Customize Icon",
        "execution": {
          "actionType": "forward",
          "forward": {
            "elementPath": ".self.animatedIcon",
            "actionName": "custom",
            "custom": "animatedIcon"
          }
        }
      }
    }
  }
}
```

## Native action overrides with custom actions

The Slideshow component overrides `manageItems` to manage slides, and adds a custom forward action for the navigation icon:

```json
{
  "editorElement": {
    "selector": ".slideshow",
    "displayName": "Slideshow",
    "data": {
      "slides": {
        "dataType": "arrayItems",
        "displayName": "Slides",
        "arrayItems": {
          "data": {
            "items": {
              "name": { "dataType": "text" },
              "content": {
                "dataType": "container",
                "container": {
                  "selector": ".slide",
                  "containerType": "simple"
                }
              }
            }
          }
        }
      },
      "autoplay": {
        "dataType": "booleanValue",
        "displayName": "Autoplay",
        "defaultValue": false
      }
    },
    "actions": {
      "manageItems": {
        "displayName": "Manage Slides",
        "execution": {
          "actionType": "data",
          "data": {
            "dataItemKey": "slides"
          }
        }
      }
    },
    "customActions": {
      "animatedIcon": {
        "displayName": "Navigation Icon",
        "execution": {
          "actionType": "forward",
          "forward": {
            "elementPath": ".self.navigationButtons.animatedIcon",
            "actionName": "custom",
            "custom": "animatedIcon"
          }
        }
      }
    }
  }
}
```

## CSS property and display group actions

Quick-access buttons for specific styling controls:

```json
{
  "editorElement": {
    "cssProperties": {
      "backgroundColor": {
        "displayName": "Background",
        "defaultValue": "#ffffff"
      }
    },
    "cssCustomProperties": {
      "shadowIntensity": {
        "cssPropertyType": "number",
        "displayName": "Shadow Intensity",
        "defaultValue": "0.1"
      },
      "animationSpeed": {
        "cssPropertyType": "number",
        "displayName": "Animation Speed",
        "defaultValue": "0.3"
      }
    },
    "displayGroups": {
      "visualEffects": {
        "displayName": "Visual Effects",
        "groupType": "cssDataType",
        "cssDataType": {
          "items": ["shadowIntensity", "animationSpeed"]
        }
      }
    },
    "customActions": {
      "editBackground": {
        "displayName": "Background",
        "execution": {
          "actionType": "cssProperty",
          "cssProperty": {
            "cssPropertyKey": "backgroundColor"
          }
        }
      },
      "visualEffects": {
        "displayName": "Visual Effects",
        "execution": {
          "actionType": "displayGroup",
          "displayGroup": {
            "displayGroupKey": "visualEffects"
          }
        }
      }
    }
  }
}
```

## Display filters

The following example uses `hide` to remove specific actions and data items from the editor:

```json
{
  "editorElement": {
    "displayFilters": {
      "data": {
        "hide": ["svg", "isDecorative"]
      },
      "actions": {
        "hide": ["media", "design"]
      }
    }
  }
}
```

The following example uses `show` to allow only the `settings` and `design` actions to be visible:

```json
{
  "editorElement": {
    "displayFilters": {
      "actions": {
        "show": ["settings", "design"]
      }
    }
  }
}
```

<!-- Perhaps we should link to the sections in the other articles for each of the example -->