Why are the images in my html wrapped by html-object?

[Bubble2]

📝 Provide detailed reproduction steps (if any)

1. Add GeneralHtmlSupport plugin
2. Set data as an HTML string
3. Some codes are as follows

import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor, Bold, Underline, Essentials, Italic, Mention, Paragraph, Undo, GeneralHtmlSupport, FontColor, FontBackgroundColor, HtmlComment, SpecialCharacters, SpecialCharactersEssentials } from 'ckeditor5';
import { SpecialCharactersEmoji } from './features'
import enTranslations from 'ckeditor5/translations/en.js';
import zhCnTranslations from 'ckeditor5/translations/zh-cn.js';
import 'ckeditor5/ckeditor5.css';

<CKEditor
    editor={ClassicEditor}
    data={value}
    onChange={(event, editor) => {
      onChange(editor.data.get());
    }}
    config={{
      toolbar: {
        items: ['bold', "underline", 'italic', 'fontColor', 'fontBackgroundColor', "specialCharacters", "undo", "redo"],
      },
      plugins: [
        Bold, Underline, Essentials, Italic, Mention, Paragraph, Undo, FontColor, FontBackgroundColor, GeneralHtmlSupport, 
        SpecialCharacters,
        SpecialCharactersEmoji,
        SpecialCharactersEssentials,
      ],
      htmlSupport: {
        allow: [
          // Enables all HTML features.
          {
            name: /.*/,
            attributes: true,
            classes: true,
            styles: true,
          },
        ],
        disallow: [
          {
            attributes: [
              { key: /.*/, value: /data:(?!image\/(png|jpeg|gif|webp))/i },
            ],
          },
        ],
      },
      translations: [enTranslations, zhCnTranslations],
      language: localStorage.getItem("lang") == "CN" ? "zh-cn" : "en",
    }}
    className={styles.richEditorHeight}
    onBlur={() => setRichFirst(true)}
    onFocus={() => setRichFirst(false)}
  />

✔️ Expected result

❌ Actual result

❓ Possible solution

The original image tags in the red box have an additional html-object added to them. I don’t know why this html object is added. At the same time, an extra layer of p tags is wrapped around it. Can these additional things be removed?

[Reinmar]

You didn't enable the image feature. If the image feature was enabled, it would pick up the <img> elements and handle them itself.

Since you don't have the image feature and you have GHS configured to handle all elements, it kicks in as a backup. It picks up those elements which weren't handled by any other editor plugin and handle them itself. However, at this point it does not know what an image is and how to handle it, apart from knowing that it's a kind of an object. 

Out of curiosity: Why did you configure the editor to not enable images natively?

[Bubble2]

You didn't enable the image feature. If the image feature was enabled, it would pick up the <img> elements and handle them itself.

Since you don't have the image feature and you have GHS configured to handle all elements, it kicks in as a backup. It picks up those elements which weren't handled by any other editor plugin and handle them itself. However, at this point it does not know what an image is and how to handle it, apart from knowing that it's a kind of an object. 

Out of curiosity: Why did you configure the editor to not enable images natively?

Because I don't know that you need to add the Image attribute to display an image, and I don't think you need to add the Table attribute to display a table.

[Reinmar]

Because I don't know that you need to add the Image attribute to display an image, and I don't think you need to add the Table attribute to display a table.

Thanks for sharing this. It will help us a lot if you could tell us a bit about your onboarding path. This is: what did you do (which parts of the ecosystem did you visit) to create the setup that you posted here in the ticket?

We have just deployed a completely new documentation and changed a lot in how you setup CKEditor so we're probably missing something.

[CKEditorBot]

The issue lacks the feedback we asked for two weeks. Hence, 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).