CKEditor toolbar icon error "Cannot read properties of undefined (reading 'pencil')"

Created on 30 July 2025, 2 months ago

Problem/Motivation

Due to a recent change in CKEditor how icons are imported/used the grid toolbar is no longer working. The error and missing icon causes the toolbar to fail to load correctly and it cannot be clicked on. Attached are screenshots of the error, and the toolbar with missing icon/text.

Steps to reproduce

  • Drupal Version: 10.5.1
  • USWDS CKEditor Integration Version: 3.1.5

I've tested on Drupal 10.4.8 and this issue is not present.

  1. Edit any node that contains a grid, or add a grid to any node
  2. When loading the editor the error will be displayed in the dev console and the toolbar will load "empty" and cannot be clicked to open the modal

For reference, this issue also appears in the embedded content module: https://www.drupal.org/project/embedded_content/issues/3533539 πŸ› Uncaught CKEditorError: Cannot read properties of undefined (reading 'pencil') Active

Proposed resolution

The following changes are applied to uswds_ckeditor_integration/js/ckeditor5_plugins/uswds_grid/src/toolbar.js

change line 1 (and insert)

import { Plugin } from 'ckeditor5/src/core';
import { IconPencil } from '@ckeditor/ckeditor5-icons';

change line 48 (now line 49) to

icon: IconPencil,

With this change in place the toolbar loads correctly and permits opening of the modal.

πŸ› Bug report
Status

Active

Version

3.1

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States chrislarrycarl

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