Error when several instances of same language on the page

Created on 17 November 2023, about 1 year ago
Updated 13 February 2024, 10 months ago

Problem/Motivation

If there are several blocks of the same code on the same page, highlight will fail.

The error on console is

Uncaught TypeError: languages.map is not a function

Steps to reproduce

  1. Create a content.
  2. Add several blocks of code of the same language, i.e., two language-html blocks, two language-css and two language-php
  3. Apparently the code will be highlighted, but there are errors on the console and plugins such as copy won't work.

Proposed resolution

The reason is that drupalSettings.highlightJsLanguages evaluates to an object, not an array, and as such the .map method is not available.

This happens because this code (array_unique) will create an associative array of non-consequential indexes when there are several instances of the same code.

      'drupalSettings' => [
        'enableCopyButton' => $enable_copy_button,
        'highlightJsLanguages' => array_unique($languages),
      ],

I.e, the resulting associative array might end up as something like this:

[
  '0' => 'html',
  '4' => 'javascript',
  '12' => 'php'
]

This gets evaluated to an object, not an awway, when converting to js:

{
  "0" : "html",
  "4" : "javascript",
  "12" : "php"
}

And thus the error happens.

The solution could be either to use an iterator that will work both over arrays and objects or ensure that the PHP array is not associative (indexes are numeric and sequential starting from zero) in order to be converted to a regular javascript array.

Remaining tasks

User interface changes

None

API changes

None

Data model changes

None

πŸ› Bug report
Status

Fixed

Version

1.1

Component

Code

Created by

πŸ‡ͺπŸ‡ΈSpain idiaz.roncero Madrid

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

Merge Requests

Comments & Activities

Production build 0.71.5 2024