v8.73.0

Interface methods

A list of methods to update the editor UI.

Name Description
updateImagePreview(src) Updates the current image preview while retaining history state. Doesn't replace the image source file.
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 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 history entries.
history.getCollapsed() Returns the current array of 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 JavaScript API have two additional methods.

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

showTextInput

Opens a text input popover.

// `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>`,
        },
    }
);