Cropping stickers with a secondary Pintura instance

We can use the willRenderShapeControls property to add a crop button above a sticker shape.

<style>
    /* style of sticker editor modal */
    .pintura-sticker-editor {
        --editor-modal-overlay-opacity: 0.65;
        --editor-modal-border-radius: 1.5rem;
        --editor-max-width: 40rem;
        --editor-max-height: 50rem;
    }
</style>

<script type="module">
    import { openDefaultEditor, createNode } from './pintura.js';

    // Open the default image editor in a modal
    const editor = openDefaultEditor({
        src: './my-image.jpeg',

        // Available stickers
        stickers: [
            './sticker-one.svg',
            './sticker-two.svg',
            './sticker-three.svg',
        ],

        // Manipulate shape controls menu
        willRenderShapeControls: (controls, selectedShapeId) => {
            controls[0][3].push(
                // Add an Edit button
                createNode('Button', 'my-button', {
                    label: 'Edit',
                    onclick: () => {
                        // Find the currently selected shape
                        const shape = editor.imageAnnotation.find(
                            (shape) => shape.id === selectedShapeId
                        );

                        // Create our sticker editor and use the current backgroundImage as src
                        const stickerEditor = openDefaultEditor({
                            class: 'pintura-sticker-editor',
                            src: shape.backgroundImage,
                        });

                        // Update the shape when the sticker is edited
                        stickerEditor.on('process', ({ dest }) => {
                            shape.backgroundImage = URL.createObjectURL(dest);
                            editor.imageAnnotation = editor.imageAnnotation;
                        });
                    },
                })
            );
            return controls;
        },
    });

    // Show resulting image preview
    editor.on('process', ({ dest }) => {
        const preview = new Image();
        preview.src = URL.createObjectURL(dest);
        document.body.appendChild(preview);
    });
</script>