CKEditor 5 JS error when editing certain content

Created on 23 October 2023, 8 months ago
Updated 7 November 2023, 8 months ago

Problem/Motivation

With the latest update here https://www.drupal.org/project/entity_embed/issues/3272732 Drupal 10 & CKEditor 5 readiness Fixed I believe a bug was introduced with the loading of the Ckeditor 5 interface when a text format with the embed entities functionality enabled.

When I start a node creation page for any content with Ckeditor 5 field using a format that has the ability to embed entities the editor fails to load. When I switch to a format on that textarea that doesn't embed entities the editor loads. Also if I disable the embed entities ability in my format that is broken, and save it, the editor loads again for that format. The error I receive on the front end in the browser console is the following:

ckeditor5.js?s2yxym:201 TypeError: Cannot read properties of null (reading 'getAttribute')
    at Object.callback (drupalentity.js?s2yxym:1:6039)
    at i.create (ckeditor5-dll.js?v=35.4.0:5:416819)
    at ckeditor5-dll.js?v=35.4.0:5:439488
    at Array.map (<anonymous>)
    at X.fillFromConfig (ckeditor5-dll.js?v=35.4.0:5:439398)
    at $.register (ckeditor5-dll.js?v=35.4.0:5:555056)
    at s.afterInit (drupalentity.js?s2yxym:1:6609)

Not sure if anyone else is getting this issue. Hope this helps. Kind of a blocking issue for me to update a client site to Drupal 10. As they won't be able to manage any of their embedded media in any content without this patch. If I can help give any more context let me know.

My site is running Drupal 9 still and is in the process of being upgraded to Drupal 10 with this issue.
Others form the issue linked above are stating having this issue in drupal 10 as well.

This is also effecting users that may have employed a patch to the 1.4.0 version of the module in anticipation of this being included in the next version.

This is my first issue submission. Hopefully i did this correctly.

Steps to reproduce

  1. Create a text format with "Display embedded entities" enabled.
  2. Create a content type with a text format field using the new text format.
  3. Create new content of this content type.
  4. Notice Ckeditor 5 interface not loading.

Proposed resolution

Look into the Javascript to determine where the issue lies in loading the interface.

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇺🇸United States Deasly

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Deasly
  • 🇺🇸United States Deasly
  • 🇮🇳India sahilgidwani Jaipur

    I am also getting this issue.

  • 🇺🇸United States bnjmnm Ann Arbor, MI
    • Note that the CKEditor 5 functionality for Entity Embed requires Drupal 10.
    • The current steps to reproduce are ones that were performed many times by the developers and reviewers without issue. More importantly, they are steps performed by the module's automated tests. This isn't to discredit what is being reported, but we will need additional information beyond these general steps in order to reproduce the issue. It is safe to say that over the course of developing CKEditor5 Support, a text format was created that embeds entities and content was created that uses this feature. What might be different? What is the full configuration of the text formats (filters, plugins, etc)? What versions of entity embed/embed are in use? What markup is in the textarea (if any)
    • Can you reproduce this issue on a new Drupal install?
  • 🇺🇸United States Deasly

    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
    
  • 🇺🇸United States bnjmnm Ann Arbor, MI

    Based on the text format, the drupal-entity tag allowed HTML is missing several attributes necessary for it to work with CKEditor 5. I see <drupal-entity data-entity-type data-entity-substitution data-embed-button> in the editor config, but significantly more attributes are required.

    <drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-view-mode data-align data-caption data-embed-button data-langcode alt title>

    This allowed attributes config should have been generated automatically on the switch to CKEditor 5 - functionality that is tested in \Drupal\Tests\entity_embed\Kernel\UpgradePathTest

    By any chance are you did you make the switch to using Entity Embed & CKEditor 5 prior to the Oct 20 using a patch/branch? In other words, was the switch done on code created so prior to Drupal 10 & CKEditor 5 readiness Fixed being merged? That would explain why the allowed attributes aren't quite right, as well as the specific attribute related errors thrown in CKEditor 5's code.

  • 🇺🇸United States trackleft2

    Deasly has a point, the last recommendation I saw for upgrading to CKEditor5 was to upgrade from CKEditor 4 before Drupal 10.

    https://www.drupal.org/project/drupal/releases/10.1.0-beta1

    Sites using CKEditor 4 should upgrade to CKEditor 5 in Drupal 9.4 or 9.5 before updating to Drupal 10

  • 🇺🇸United States Deasly

    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"

  • 🇺🇸United States Deasly

    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.

  • 🇺🇸United States Deasly

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

    constants set:

          const element = editor.model.document.selection.getSelectedElement();
          const uuid = element.getAttribute('drupalEntityEntityUuid');

    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;
        });
  • 🇺🇸United States trackleft2

    @Deasly have you tried updating your config?

    We use config_import_single to import single config files: https://www.drupal.org/project/config_import_single . Or you could use the config_sync UI for this.

    As bnjmnm mentioned, there is an issue with your editor.editor.full_html.yml config. (We had the same issue)

    Specifically this line

    - '<drupal-entity data-entity-type data-entity-substitution data-embed-button>'
    

    It needs to be this instead

    - '<drupal-entity data-entity-type data-entity-uuid data-entity-embed-display data-entity-embed-display-settings data-view-mode data-align data-caption data-embed-button data-langcode alt title>'
    

    Do you think ckeditor5 might be stripping those attributes since your config says not to allow them? Specifically these two?

    data-entity-type 
    data-entity-uuid 
    
  • 🇺🇸United States Deasly

    @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?

  • @bnjmnm opened merge request.
  • Status changed to Needs review 8 months ago
  • 🇺🇸United States bnjmnm Ann Arbor, MI

    Opened MR that handles the absence of an element more gracefully. As noted in #12 - this callback is set up to be invoked when an element is selected. While it's not clear why it would run otherwise, it's easy enough to find those instances and exit early to avoid JS errors.

  • 🇺🇸United States trackleft2

    I've imported your config into my site, with all of the dependencies, and now I see an error, are you patching https://www.drupal.org/project/video_embed_field ? That module is not compatible with CKEditor5 AFAICT.

  • 🇺🇸United States Deasly

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

  • 🇺🇸United States Deasly

    @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.

  • 🇦🇺Australia geoffreyr

    Using the MR as a patch to fix the same problem. +1 agree on fixed, but there might be a few more people who might want to test it before RTBC.

  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    "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 plugins must be built ("compiled" if you will) against a specific version of CKEditor 5. @bnjmnm built it specifically against Drupal 10.1.

    The tests are also passing specifically on 10.1: https://git.drupalcode.org/project/entity_embed/-/jobs/201725

    You may say "but the tests are also passing on 9.5", and you'd be right: https://git.drupalcode.org/project/entity_embed/-/jobs/201724

    But that's ignoring the fact that the CKEditor 5 tests are skipped on Drupal 9: https://git.drupalcode.org/project/entity_embed/-/blame/ac6f2fe13b18f5f5...

    @Dave Reid: this is something I mentioned briefly last Friday, and I should've emphasized it more. So to bring clarity to this situation now as well as in the future, I created 📌 Test against current core minor (10.1), previous (10.0) and next (10.2) RTBC .

    @siddharthjain: Can you please share the markup on which it was crashing prior to applying @bnjmnm's https://git.drupalcode.org/project/entity_embed/-/merge_requests/26 MR? 🙏 It sounds like you actually have invalid Entity Embed markup … and I wonder how that is even possible 🤔😅

  • 🇮🇳India siddharthjain_7998

    @Wim Leers Actually I am not able to recreate the issue after removing patch again and it is working fine, btw specifically what markup were you referring?

  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    The markup that you were editing.

    The reason you cannot reproduce it anymore is most likely that you've modified the invalid markup and the Entity Embed CKEditor 5 JS plugin now generated the correct markup for you 😅

  • 🇩🇪Germany dercheffe Sersheim, Germany

    Using the MR https://git.drupalcode.org/project/entity_embed/-/merge_requests/26 as a patch on the latest dev of entity_embed on D9.5. It solves the issue and the editor renders great! thank you @bnjmnm

  • 🇩🇪Germany dercheffe Sersheim, Germany

    Possible to get a new stable release of entity_embed with with the MR included 🙏? It's a real release blocker for me and the EOL of D9.5 is here (and I'm still on CKEditor 4 because of this issue 🙈)

  • +1 for stable release - this is a blocker for d10. Ty all.

  • Status changed to RTBC 8 months ago
  • 🇩🇪Germany dercheffe Sersheim, Germany

    Tested from several people - so we can change the issue status? 🙂

  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    Do all of these sites have such invalid markup? 😳 Quoting myself from #22:

    The reason you cannot reproduce it anymore is most likely that you've modified the invalid markup and the Entity Embed CKEditor 5 JS plugin now generated the correct markup for you 😅

    Can y'all please share the markup which is causing Entity Embed HEAD to crash? 🙏

  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺
  • 🇺🇸United States Deasly

    @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 witch is to generic in my opinion.

  • 🇩🇪Germany dercheffe Sersheim, Germany

    This is my non-rendering markup code with following configuration:

    • PHP 8.1
    • Entity embed dev version with no patch applied
    • Drupal 9.5 with ckeditor 5 enabled
    <p>Krankenhäuser haben Betten und Betten benötigen Matratzen. Nur gut wenn man unter den TheMall - Partnern auch einen Hersteller für medizinische und Dekubitus - Matratzen hat.</p>&#13;
    &#13;
    <p>Auf eine dringende Anfrage aus der Ukraine konnten wir sofort die nötigen Hebel in Bewegung setzen und die <a href="https://youlife.rocks/the-mall/mall-shop/breckle-matratzenwerk-weida-gmbh">Breckle Matratzenwerk Weida GmbH</a> fertigte für uns 10 Matratzen mit Schutzbezügen für den klinischen Bereich. Diese wurde innerhalb kürzester Zeit im Outlet-Store der Firma in Benningen angeliefert. Dort nahm sie unser Robert von der Firma <a href="https://speidel.net/unternehmen-2/">Speidel GmbH</a> in Empfang, um diese direkt zur <a href="https://www.skp-gmbh.com/de/Startseite.1.html">SKP GmbH</a> in Mühlacker zu bringen. SKP fertigt Reinigungsanlagen für Zeltplanen und hatte eine große Maschine im Versand. Unsere Matrazen wurden direkt an den LKW geliefert und verließen noch am selben Tag zusammen mit weiteren Spenden Mühlacker in Richtung Zwischenlager Polen.</p>&#13;
    &#13;
    <drupal-entity data-caption="Freuen sich helfen zu können: SKP Juniorchefin Anna Segiet und Robert Iglewski von Speidel" data-embed-button="embed_erlebnis_magazin_media" data-entity-embed-display="view_mode:media.yl_hero_image" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="0aab16e4-0755-42d1-8807-b00a18237097" data-langcode="de"></drupal-entity><p>Es ist wirklich grandios, was alles möglich ist. Unser Dank gilt allen beteiligten Firmen, sowie der <a href="https://muehlacker-enzkreis.rotary.de/">Rotary Hilfe e.V. Mühlacker-Enzkreis</a> für Ihre Unterstützung.</p>&#13;
    &#13;
    <p>Ihr wollt auch unterstützen und sicher sein, daß die Hilfe richtig ankommt?</p>&#13;
    
  • 🇩🇪Germany dercheffe Sersheim, Germany

    After upgrade to D10.1 with this test installation it renders correctly now suddenly without the patch 😳
    Its very weird.

    But would it harm to include the patch anyway?

  • 🇺🇸United States damondt

    Can confirm patch works, no longer can be sure of problematic markup since it's been said that ckeditor fixes it with this patch

  • 🇬🇧United Kingdom marcelovani London

    @Wim, in my case, the error was happening when creating new content. The entire toolbar was missing because of the js error.

  • 🇩🇪Germany dercheffe Sersheim, Germany

    Ok, did another test run with my local installation here.
    My starting point:

    • Desktop environment: Ubuntu Linux 23.10 with Firefox 119
    • Local dev environment: DDEV with PHP 8.1
    • Entity embed dev version with no patch applied
    • Drupal 9.5 with ckeditor 5 enabled
    • Contributed ckeditor 4 module (still) enabled

    What I did next:

    1. Switching all ckeditor 4 text fomats to ckeditor 5 (taking care about screen messages from upgrade path)
    2. Deinstalling ckeditor 4 contrib module with drush and composer

    Result: Now the markup was messed up like in my comment #31 and shown in a normal textarea-field. Ckeditor didn't render.

    Then I performed upgrade from D9.5 to D10.1 with composer and "drush updb".

    Result: Now ckedior worked probably
    Result 2: The creation of new content worked like a charm too.

    Conclusion:
    I suggest to make a new (alpha/beta/stable ?) release of the current dev version. Perhaps a new branch making sense due to ckeditor 5 compatibility.

  • 🇺🇸United States Dave Reid Nebraska 🇺🇸

    Dave Reid made their first commit to this issue’s fork.

  • Status changed to Fixed 8 months ago
  • 🇺🇸United States Dave Reid Nebraska 🇺🇸

    MR looked good and merged into 8.x-1.x. Thanks all for testing. Tagging a release shortly here.

  • 🇧🇪Belgium Wim Leers Ghent 🇧🇪🇪🇺

    It seems like this simply didn't work correctly on 10.0 — see #3396568-3: Test against current core minor (10.1), previous (10.0) and next (10.2) . That explains #32 too 😊👍

    The test coverage Dave just merged in #3396568 will avoid future confusion around this! 👍

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.69.0 2024