CKEditor 5 JS error when editing certain content

I want to comment on your first two points then follow up with any information that i can to help resolve the issue.

• "Note that the CKEditor 5 functionality for Entity Embed requires Drupal 10" If the Ckeditor 5 functionality is made for Drupal 10 only why apply a merge to a module that is compatible with [Works with Drupal: ^9.3 || ^10]? That to me just doesn't make any sense can you please clarify?
• Ckeditor 5 is installable on Drupal 9. The Upgrade status module requires you either install the ckeditor4 contrib module that will eventually have an EOL or install and update to the Ckeditor 5 module now and get it over with. So I assume there will be a lot of people doing the same thing as I did and maybe having this issue.
• The patch (https://git.drupalcode.org/project/entity_embed/-/merge_requests/12.diff) was working on Drupal 9 prior to October 4 because I have a site patched with it currently and is working without issues on a site configured exactly the same.

My Environment:
Using Drupal 9, Entity embed 1.4.0 with a patch from (https://git.drupalcode.org/project/entity_embed/-/merge_requests/12.diff), and the embed module at 1.7 i am getting my above stated issue.

I have not yet installed on a fresh install. Sorry I didn't make this clear on the above but this is happening on an existing drupal install ckeditor 4 converted to ckeditor 5. And creating new content on a blank WYSIWYG Field. I'm including configs below for a format that has this issue.

Including a text format configs with issues (hope this helps):

editor.editor.full_html.yml

uuid: 67bcada1-004c-4501-92a3-45bc5e2e20e9
langcode: en
status: true
dependencies:
  config:
    - filter.format.full_html
  module:
    - ckeditor5
format: full_html
editor: ckeditor5
settings:
  toolbar:
    items:
      - sourceEditing
      - '|'
      - undo
      - redo
      - '|'
      - '|'
      - bulletedList
      - numberedList
      - insertTable
      - blockQuote
      - horizontalLine
      - '|'
      - link
      - drupalMedia
      - videoEmbed
      - code
      - '-'
      - heading
      - style
      - bold
      - italic
      - underline
      - strikethrough
      - superscript
      - subscript
      - removeFormat
      - '|'
      - alignment
      - indent
      - outdent
      - '|'
  plugins:
    ckeditor5_heading:
      enabled_headings:
        - heading2
        - heading3
        - heading4
        - heading5
        - heading6
    ckeditor5_style:
      styles:
        -
          label: 'Accent Color'
          element: '<span class="color-accent">'
        -
          label: 'Paragraph: Small'
          element: '<p class="type-small">'
        -
          label: 'Paragraph: Default'
          element: '<p class="type-base">'
        -
          label: 'Paragraph: Large'
          element: '<p class="type-large">'
        -
          label: 'Paragraph: Larger'
          element: '<p class="type-large-x">'
        -
          label: 'Paragraph: Largest'
          element: '<p class="type-large-xx">'
        -
          label: 'Text: Small'
          element: '<span class="type-small">'
        -
          label: 'Text: Default'
          element: '<span class="type-base">'
        -
          label: 'Text: Large'
          element: '<span class="type-large">'
        -
          label: 'Text: Larger'
          element: '<span class="type-large-x">'
        -
          label: 'Text: Largest'
          element: '<span class="type-large-xx">'
        -
          label: 'Button (Primary)'
          element: '<a class="button">'
        -
          label: 'Button (Secondary)'
          element: '<a class="button button--secondary">'
        -
          label: 'Full Width'
          element: '<img class="image-full-width">'
        -
          label: 'Callout Box'
          element: '<div class="callout">'
        -
          label: 'Callout Box (Light)'
          element: '<div class="callout callout--light">'
        -
          label: 'Two Columns'
          element: '<div class="two-column">'
    ckeditor5_sourceEditing:
      allowed_tags:
        - '<cite id class>'
        - '<code id class>'
        - '<dl id class>'
        - '<dt id class>'
        - '<dd id class>'
        - '<b id class>'
        - '<i id class>'
        - '<col id class>'
        - '<colgroup id class>'
        - '<span id title>'
        - '<img id name title align alt src border height width data-entity-type data-entity-uuid data-entity-substitution data-align data-picture-align data-picture-mapping data-caption>'
        - '<div id title align>'
        - '<em id class>'
        - '<strong id class>'
        - '<blockquote id cite class>'
        - '<li id class>'
        - '<h2 id class>'
        - '<h3 id class>'
        - '<h4 id class>'
        - '<h5 id class>'
        - '<h6 id class>'
        - '<br id class>'
        - '<ul id type class>'
        - '<ol id type class>'
        - '<u id class>'
        - '<s id class>'
        - '<sup id class>'
        - '<sub id class>'
        - '<hr id class>'
        - '<table id align bgcolor border cellpadding cellspacing frame rules summary width title class>'
        - '<caption id class>'
        - '<tbody id align charoff valign title class>'
        - '<thead id align charoff valign title class>'
        - '<tfoot id align charoff valign title class>'
        - '<th id abbr align bgcolor charoff height nowrap="nowrap" scope valign width title class>'
        - '<td id abbr align bgcolor charoff height nowrap="nowrap" scope valign width title class>'
        - '<tr id align bgcolor charoff valign title class>'
        - '<a hreflang name target>'
        - '<drupal-entity data-entity-type data-entity-substitution data-embed-button>'
        - '<p id title align>'
    ckeditor5_list:
      reversed: true
      startIndex: true
    ckeditor5_alignment:
      enabled_alignments:
        - left
        - center
        - right
        - justify
    media_media:
      allow_view_mode_override: true
    editor_advanced_link_link:
      enabled_attributes:
        - aria-label
        - class
        - id
        - rel
        - target
        - title
    linkit_extension:
      linkit_enabled: true
      linkit_profile: administrator_profile
    video_embed_wysiwyg_video_embed:
      defaults:
        children:
          autoplay: false
          responsive: true
          width: '854'
          height: '480'
image_upload:
  status: false
  scheme: public
  directory: media/full-html-inline-images
  max_size: ''
  max_dimensions:
    width: null
    height: null

filter.format.full_html.yml

uuid: b186f24f-9381-4c37-9539-7655fced4ed9
langcode: en
status: true
dependencies:
  config:
    - core.entity_view_mode.media.full
    - core.entity_view_mode.media.media_library
    - core.entity_view_mode.media.preview_view
    - core.entity_view_mode.media.scale_full_size_original
    - core.entity_view_mode.media.scale_stretch_100_percent
  module:
    - blazy
    - editor
    - entity_embed
    - linkit
    - media
    - shortcode
    - slick
    - video_embed_wysiwyg
name: 'Full HTML'
format: full_html
weight: -10
filters:
  filter_html:
    id: filter_html
    provider: filter
    status: true
    weight: -49
    settings:
      allowed_html: '<br id class> <p class="type-small type-base type-large type-large-x type-large-xx text-align-left text-align-center text-align-right text-align-justify" id title align> <h2 id class> <h3 id class> <h4 id class> <h5 id class> <h6 id class> <span class="color-accent type-small type-base type-large type-large-x type-large-xx" id title> <a class hreflang name target href aria-label title id rel data-entity-type data-entity-uuid data-entity-substitution> <img class="image-full-width" id name title align alt src border height width data-entity-type data-entity-uuid data-entity-substitution data-align data-picture-align data-picture-mapping data-caption> <div class="callout callout--light two-column text-align-left text-align-center text-align-right text-align-justify" id title align> <cite id class> <code id class> <dl id class> <dt id class> <dd id class> <b id class> <i id class> <col id class> <colgroup id class> <em id class> <strong id class> <blockquote id cite class> <li id class> <ul id type class> <ol id type class reversed start> <u id class> <s id class> <sup id class> <sub id class> <hr id class> <table id align bgcolor border cellpadding cellspacing frame rules summary width title class> <caption id class> <tbody id align charoff valign title class> <thead id align charoff valign title class> <tfoot id align charoff valign title class> <th id abbr align bgcolor charoff height nowrap="nowrap" scope valign width title class rowspan colspan> <td id abbr align bgcolor charoff height nowrap="nowrap" scope valign width title class rowspan colspan> <tr id align bgcolor charoff valign title class> <drupal-entity data-entity-type data-entity-substitution data-embed-button> <drupal-media data-entity-type data-entity-uuid alt data-view-mode data-align>'
      filter_html_help: false
      filter_html_nofollow: true
  filter_html_image_secure:
    id: filter_html_image_secure
    provider: filter
    status: false
    weight: -38
    settings: {  }
  filter_autop:
    id: filter_autop
    provider: filter
    status: true
    weight: -43
    settings: {  }
  filter_align:
    id: filter_align
    provider: filter
    status: true
    weight: -48
    settings: {  }
  filter_caption:
    id: filter_caption
    provider: filter
    status: false
    weight: -39
    settings: {  }
  filter_url:
    id: filter_url
    provider: filter
    status: true
    weight: -44
    settings:
      filter_url_length: 72
  shortcode_corrector:
    id: shortcode_corrector
    provider: shortcode
    status: true
    weight: -46
    settings: {  }
  shortcode:
    id: shortcode
    provider: shortcode
    status: true
    weight: -47
    settings:
      link_box: '0'
      gmap_embed: '1'
      view_result_count: '0'
      video_embed: '1'
      date_embed: '1'
  editor_file_reference:
    id: editor_file_reference
    provider: editor
    status: false
    weight: -36
    settings: {  }
  filter_html_escape:
    id: filter_html_escape
    provider: filter
    status: false
    weight: -37
    settings: {  }
  filter_htmlcorrector:
    id: filter_htmlcorrector
    provider: filter
    status: false
    weight: -40
    settings: {  }
  video_embed_wysiwyg:
    id: video_embed_wysiwyg
    provider: video_embed_wysiwyg
    status: true
    weight: -45
    settings: {  }
  entity_embed:
    id: entity_embed
    provider: entity_embed
    status: true
    weight: -42
    settings: {  }
  linkit:
    id: linkit
    provider: linkit
    status: true
    weight: -50
    settings:
      title: false
  blazy_filter:
    id: blazy_filter
    provider: blazy
    status: false
    weight: -35
    settings:
      media_switch: ''
      hybrid_style: ''
      box_style: ''
      box_media_style: ''
      box_caption: ''
      filter_tags:
        img: img
        iframe: iframe
      use_data_uri: '0'
  slick_filter:
    id: slick_filter
    provider: slick
    status: false
    weight: -34
    settings:
      caption:
        alt: '0'
        title: '0'
      optionset: default
      layout: ''
      background: false
      box_caption: ''
      box_caption_custom: ''
      box_media_style: ''
      loading: ''
      responsive_image_style: ''
      box_style: ''
      image_style: ''
      media_switch: ''
      ratio: ''
      thumbnail_style: ''
      grid: ''
      grid_medium: ''
      grid_small: ''
      style: ''
      skin: ''
      overridables:
        arrows: '0'
        autoplay: '0'
        dots: '0'
        draggable: '0'
        infinite: '0'
        mouseWheel: '0'
        randomize: '0'
        variableWidth: '0'
      optionset_thumbnail: ''
      skin_thumbnail: ''
      thumbnail_caption: ''
      thumbnail_effect: ''
      thumbnail_position: ''
      override: false
      preserve_keys: false
      visible_items: null
  media_embed:
    id: media_embed
    provider: media
    status: true
    weight: -41
    settings:
      default_view_mode: default
      allowed_view_modes:
        default: default
        full: full
        media_library: media_library
        preview_view: preview_view
        scale_full_size_original: scale_full_size_original
        scale_stretch_100_percent: scale_stretch_100_percent
      allowed_media_types:
        audio_local: audio_local
        document: document
        image: image
        video: video
        video_local: video_local

I started the upgrade Friday night Oct 20th for this site. I didn't make the editor switch until this Monday the 23rd.

I added those attributes and the problem still persists. The Ckeditor 5 interface is still not loading for text formats using the entity embed functionality.

I created two patches applied to the 1.4 version of the module. One from the version of the patch that is working since Oct 4th and one patch off all the changes since then that aren't working for me up to the merge.

Attached are those patches. I am trying to figure out which "getAttribute" call is causing the issue I see from what I can see changed in the patch (entity_embed_oct_24_2023__changes_since_oct_4_not_working.patch). This is usually, from what I'm reading, occurring on a null element. So if something in the interface doesn't exist that's why we are getting this error.

it looks like everything is built into this file (drupalentity.js) so that's where I'm looking. and there appear to be 18 new instances from the Oct 4 patch on of calls to "getAttribute"

I found the offending line in "drupalentity.js"

It is minified so i just went through to find out which "getAttribute" call is causing the problem.

If i change the following in drupalentity.js it fixes the problem error on my end:

o=n.getAttribute("drupalEntityEntityUuid"),s=n.getAttribute("drupalEntityEntityType"),

- to -

o="",s="",

just feeding it an empty string to those values the interface comes back when i reload the page.

Now for what those do atm i still need to look. If anyone has any ideas please chime in.

Next update. That code exists as such in "entity_embed/js/ckeditor5_plugins/drupalentity/src/toolbar.js" line 60.

constants set:

      const uuid = element.getAttribute('drupalEntityEntityUuid');
      const type = element.getAttribute('drupalEntityEntityType');

in this function being run on load:

editor.ui.componentFactory.add('editEmbeddedEntity', (locale) => {
      const button = new ButtonView(locale);
      const element = editor.model.document.selection.getSelectedElement();
      const uuid = element.getAttribute('drupalEntityEntityUuid');
      const type = element.getAttribute('drupalEntityEntityType');
      const editUrl = Drupal.url(`entity-embed/edit-embedded/${type}/${uuid}`)

      button.set({
        isEnabled: true,
        label: Drupal.t('Edit the embedded entity (opens in new tab)'),
        icon: icons.cog,
        tooltip: true,
      });

      // Ping the edit url and disable the button if the user does not have
      // access. Because this is async, there's a moment where the button is
      // clickable even if they don't have access, but the destination will
      // remain inaccessible.
      fetch(editUrl)
        .then((res) => {
          if (!res.ok) {
            button.set({
              label: Drupal.t(`You do not have the permissions needed to edit this ${type}.`),
              isEnabled: false,
            });
          }
      });

      this.listenTo(button, 'execute', () => {
        window.open(editUrl, '_blank');
      });

      return button;
    });

@trackleft2 I stated above in earlier comments that i set the above configuration on my side and the issues still persists.

I also stated above that this is new content (add not edit) and there are no embedded entities in the content so there is nothing to strip out. When creating this new node with and empty textarea this js fires off immediately and no Ckeditor 5 interface ever shows.

If i switch to a format that doesn't allow for embedded entities the Ckeditor interface loads fine. So this is a problem of JS running in the load of the format that i highlighted in my above comments.

This code is running on NULL right at load of the creation page and it shouldn't be or at least there should be some sort of empty detection because at this point there is nothing is selected, and nothing to select. So of course its going to be null and fire off a JS error when NULL is returned:

const element = editor.model.document.selection.getSelectedElement();

how could there be a "editor.model.document.selection" when nothing has been selected yet when the page loads?

Yup I've patched video embed field with the patch at https://www.drupal.org/project/video_embed_field/issues/3311063#comment-...
Gets the module into position to work with ckeditor 5.

@bnjmnm I have 8.x-1.x-dev installed on the site and patched with your merge and its working perfectly.
@bnjmnm & @trackleft2 Thank so much for your help! I'm back in business. Thank you for taking your time to help me out. I really appreciate it.

@Wim Leers I would have not changed the title because in my case this was happening when no content or markup was in place. A fresh node. If you would please change the title back so that others may still find the issue easier and we can get this merged in? You removed the core context of the issue title in which the Interface was not loading before this patch... And people are more likely to search on the instance of the interface not loading than the knowledge of it being just JS error which is to generic in my opinion.