Cannot set right align of all added images by default

[archasek]

The API has changed since #8502, hasn't it? I think so, as docs are different than the code provided in this issue.
Docs article

I cannot set the default style options for images - side / alignRight / alignBlockRight in my case (I don't know what's the difference between them, but nevermind).

Even if it's active / highlighted, the image is not aligned to the right.

I want it to also work when I do editor.data.set('<img>') - for all newly added html elements from code.

        image: {
            styles: {
                options: [
                    'alignLeft', 'alignRight',
                    'alignCenter', 'alignBlockLeft', 'alignBlockRight',
                    'block',
                    {
                        name: 'inline',
                        isDefault: false,
                    },
                    {
                        name: 'side',
                        isDefault: true,
                    },
                ],
            },

I tried many ways but nothing works.

My full config:

ClassicEditor
    .create(editorElement, {
        plugins: [
            Autoformat,
            Base64UploadAdapter,
            BlockQuote,
            Bold,
            Essentials,
            Heading,
            Image,
            ImageBlockEditing,
            ImageCaption,
            ImageInlineEditing,
            ImageResize,
            ImageStyle,
            ImageToolbar,
            ImageUpload,
            Italic,
            Link,
            List,
            MediaEmbed,
            Paragraph,
            PasteFromOffice,
            SourceEditing,
            Table,
            TableToolbar,
            TextTransformation,
            Underline,
            WordCount,
            GeneralHtmlSupport,
        ],
        toolbar: [
            'heading',
            '|',
            'bold',
            'italic',
            'underline',
            'link',
            'bulletedList',
            'numberedList',
            '|',
            'outdent',
            'indent',
            '|',
            'imageUpload',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo',
            'redo',
            'sourceEditing',
        ],
        // @ts-expect-error
        htmlSupport: {
            allow: [
                {
                    name: 'img',
                    classes: true,
                    attributes: true,
                }
            ],
        },
        language: 'en',
        image: {
            styles: {
            styles: {
                options: [
                    {
                        name: 'alignRight',
                        isDefault: true,
                    },
                ],
            },
            toolbar: [
                'imageTextAlternative',
                'imageStyle:alignRight',
            ],
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        }
    })
    .then(ckeditor => {
        editor = ckeditor;

        // editor.execute('imageStyle', { value: 'alignRight' });
    })
    .catch(error => {
        console.error(error);
    });

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).

[PushyPants]

For anyone seeing this down the road. There still seems to be no way to set the default alignment of images. I managed a workaround by listening to the image events imageInsert or imageUpload, depending on your use case, and then programmatically fire the alignment command. It seems to work ok but needs a bit of a 'wait' to be more reliable.

ClassicEditor
    .create(document.querySelector('#editor'), {
        plugins: [/.../ ],
        toolbar: [/.../],
    })
    .then(editor => {
      const commands = editor.commands;
      const imageUpload = commands.get("imageUpload");
      const imageStyle = commands.get("imageStyle");

      imageUpload.on("execute", async () => {
        setTimeout(() => imageStyle.execute("imageStyle:alignLeft"), 100);
      });
    });