> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Editor de Código

> Controla o modo de preview do Editor de Código, detectando se a página está rodando dentro do iframe do editor e gerenciando a seção ativa.

Módulo Vuex que gerencia o estado do Editor de Código. Detecta se a loja está sendo visualizada dentro do iframe do editor, bloqueia navegação em modo preview e escuta mensagens do editor para atualizar parâmetros em tempo real.

## Getters

| Getter          |    Tipo   | Descrição                                                                        |
| :-------------- | :-------: | :------------------------------------------------------------------------------- |
| `isPreview`     | `Boolean` | `true` quando a página está sendo visualizada em modo preview (`?preview=true`). |
| `isIframe`      | `Boolean` | `true` quando a página está rodando dentro do iframe do editor de temas.         |
| `activeSection` |  `String` | Alias da seção atualmente selecionada no editor.                                 |

## Actions

| Action             | Parâmetros        | Descrição                                                                  |
| :----------------- | :---------------- | :------------------------------------------------------------------------- |
| `load`             | —                 | Inicializa os listeners de clique em links para o modo preview e iframe.   |
| `focusOnSection`   | `section: String` | Faz scroll até a seção com a classe correspondente ao alias informado.     |
| `updateParams`     | `params: Array`   | Recebe parâmetros do editor e notifica o iframe pai para limpar os params. |
| `setActiveSection` | `section: String` | Define a seção ativa no editor.                                            |

## Uso

```js theme={"system"}
import { mapGetters } from 'vuex';

export default {
    computed: {
        ...mapGetters('preview', ['isIframe', 'isPreview']),
    },

    methods: {
        handleAction() {
            // Bloqueia ações que não devem ocorrer dentro do editor
            if (this.isIframe) return;

            this.$redirectTo('/checkout');
        },
    },
};
```