What is @ckeditor/ckeditor5-utils?
@ckeditor/ckeditor5-utils is a utility library for CKEditor 5 that provides a variety of helper functions and classes to facilitate common tasks such as DOM manipulation, event handling, and data structures.
What are @ckeditor/ckeditor5-utils's main functionalities?
Event Handling
The EmitterMixin class allows you to add event handling capabilities to your classes. In this example, we create a class that extends EmitterMixin, instantiate it, and then set up an event listener for 'myEvent'. When 'myEvent' is fired, the listener logs a message to the console.
const { EmitterMixin } = require('@ckeditor/ckeditor5-utils');
class MyClass extends EmitterMixin() {}
const myInstance = new MyClass();
myInstance.on('myEvent', () => {
console.log('myEvent was fired!');
});
myInstance.fire('myEvent');
DOM Manipulation
The createElement function simplifies the process of creating and configuring DOM elements. In this example, we create a <div> element with a class and id, and then append it to the document body.
const { createElement } = require('@ckeditor/ckeditor5-utils');
const div = createElement(document, 'div', {
class: 'my-class',
id: 'my-id'
});
document.body.appendChild(div);
Data Structures
The Collection class provides a way to manage a collection of items. In this example, we create a new collection, add items to it, and then retrieve an item by its id.
const { Collection } = require('@ckeditor/ckeditor5-utils');
const collection = new Collection();
collection.add({ id: 1, name: 'Item 1' });
collection.add({ id: 2, name: 'Item 2' });
console.log(collection.get(1)); // { id: 1, name: 'Item 1' }
Other packages similar to @ckeditor/ckeditor5-utils
lodash
Lodash is a popular utility library that provides a wide range of functions for common programming tasks such as manipulating arrays, objects, and strings. Compared to @ckeditor/ckeditor5-utils, Lodash offers a broader set of utilities but does not include CKEditor-specific features like event handling and DOM manipulation.
jquery
jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal and manipulation, event handling, and animation. While jQuery offers powerful DOM manipulation and event handling capabilities similar to @ckeditor/ckeditor5-utils, it is a larger library and includes many features that may not be necessary for all projects.
eventemitter3
EventEmitter3 is a high-performance event emitter for Node.js and the browser. It provides a simple and efficient way to handle events, similar to the EmitterMixin in @ckeditor/ckeditor5-utils. However, EventEmitter3 focuses solely on event handling and does not include other utilities like DOM manipulation or data structures.
42.0.2 (July 25, 2024)
We are happy to announce the release of CKEditor 5 v42.0.2.
Release highlights
This is a patch release that includes the following bug fixes for new installation methods introduced in v42.0.0:
- Fixed type definitions for the imports used in the optimized build (see #16684).
- Fixed minor issues with the
ckeditor5-editor.css
, ckeditor5-content.css
, and other optimized style sheets (see #16703). - Fixed issues with installing and loading the CKEditor 5 packages using Yarn PnP (see #16646).
- Fixed issues with loading CSS and translation files with older bundlers, such as Vite 2 and Vite 3 (see #16638).
Additionally, we fixed some performance issues in the track changes plugin. The editing experience was heavily affected if there were many (hundreds or more) suggestions in the document. This was a regression introduced in v41.0.0.
Bug fixes
- ckeditor5: Changed the path to the types in the
package.json
. See #16684. (commit) - ckeditor5: Updated the
exports
field in package.json
to fix issues with loading CSS and translations in older bundlers. See #16638. (commit) - ckeditor5-premium-features: Changed the path to the types in the
package.json
. - ckeditor5-premium-features: Updated the
exports
field in package.json
to fix issues with loading CSS and translations in older bundlers. - Added dependencies used in the new
dist
folder as production dependencies
instead of devDependencies
. Related to #16646. (commit)
Other changes
- track-changes: Performance fixes for scenarios where hundreds of suggestions exist in the document.
Released packages
Check out the Versioning policy guide for more information.
<details>
<summary>Released packages (summary)</summary>
Other releases:
</details>