# Interface methods

A list of methods to update the editor UI.

| Name                                           | Description                                                                                             |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| [updateImagePreview(src)](#updateimagepreview) | Updates the current image preview while retaining history state. Doesn't replace the image source file. |
| [showTextInput()](#showtextinput)              | Shows a text input popover at a given location.                                                         |
| hideTextInput()                                | Hides the text input popover.                                                                           |
| close()                                        | Triggers 'close' event. When using openModal this will trigger the modal to hide and auto destruct.     |
| destroy()                                      | Destroy editor instance.                                                                                |

The editor instance exposes a `history` property which we can use to navigate the interaction history programmatically.

| Name                         | Description                                                                                                                                                                  |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| history.undo()               | Undo action.                                                                                                                                                                 |
| history.redo()               | Redo action.                                                                                                                                                                 |
| history.revert()             | Revert actions. Will run willRevert.                                                                                                                                         |
| history.length               | The total number of history entries.                                                                                                                                         |
| history.index                | Current location in history entries.                                                                                                                                         |
| history.write(imageState?)   | Write new [imageState](../../image-editor/properties/#imagestate) to history entries, if no imageState is passed this will push the current imageState to the history stack. |
| history.get()                | Returns the current array of [imageState](../../image-editor/properties/#imagestate) history entries.                                                                        |
| history.getCollapsed()       | Returns the current array of [imageState](../../image-editor/properties/#imagestate) history entries up to the active index.                                                 |
| history.set(imageStates\[\]) | Sets the history array, combined with history.get() this enables fully restoring of a previous image editing session.                                                        |

Instances created with the [openEditor](../exports/#openeditor) JavaScript API have two additional methods.

| Name   | Description      |
| ------ | ---------------- |
| show() | Show the editor. |
| hide() | Hide the editor. |

## updateImagePreview

Updates the current image preview while retaining history state. This method doesn't replace the image source file.

This function is useful when we're using a third-party service to apply image effects (for example background removal) that offers a preview of the effect at a lower price point.

we'd first request a preview, and then when we're happy with the result we can apply the full effect in the [preprocessImageSource](../../image-editor/exports/#preprocessimagesource) step.

## showTextInput

Opens a text input popover.

```js
// `editor` is a reference to a Pintura instance

editor.showTextInput(
    // handle confirm, receives entered text
    (text) => {},

    // handle cancel, receives error if something went wrong
    (err) => {},

    // options to customize the control
    {
        // position
        align: 'top',
        justify: 'center',

        // input
        text: 'Current text',
        placeholder: 'Type something',

        // buttons
        buttonConfirm: {
            // shows label by default
            label: 'Generate',
        },

        buttonCancel: {
            // don't show label
            hideLabel: true,

            // label to use
            label: 'Cancel',

            // icon to add
            icon: `<g stroke="currentColor" stroke-width="2">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
            </g>`,
        },
    }
);
```