Froala 4.2.1 release: Word Counter Type definitions, new API options, and More

Say hello to the Froala Editor V4.2.1! We are thrilled to introduce a range of exciting features and enhancements that will take your editing experience to the next level. In this blog post, we will delve into the key highlights of this new release, including type definitions for the Word Counter plugin, new API options for preserving tab spaces, Track Changes feature enhancements, and bug fixes. Let’s explore what’s new with this update.

Key Features of the New Release

Enhancements for the Word Counter plugin

Froala 4.2 introduced the Word Counter plugin to highlight the word count at the bottom toolbar of the editor. This helps in tracking the number of words in your content. This release continues to build on this feature by providing type definitions for the word counter, ensuring a more seamless integration. Additionally, we fixed a bug that was happening when trying to limit the content using the wordCounterMax API option.

Type Definitions for Word Counter:

In this release, we have incorporated type definitions for the Word Counter. With this integration, the expected data types are explicitly defined, enhancing predictability and reducing the likelihood of errors. This acts as a form of self-documentation, clarifying the required types for each variable. These improvements contribute to a more efficient and error-resistant development process, giving the following benefits to the developers:

1. Enhanced Error Detection: By incorporating type definitions, developers can identify and rectify potential errors at an early stage through static type checking. This proactive approach aids in mitigating common programming mistakes, ultimately leading to more robust and reliable applications. This means that if you accidentally set one of the Word Counter options to the wrong type, TypeScript will raise a compile-time error. For example, the wordCounterMax API option accepts integers; if you set wordCounterMax to a string, TypeScript will raise a compile-time error. This proactive approach helps in avoiding common programming mistakes and ensures the reliability of applications.
2. Improved Development Efficiency: The inclusion of type definitions enables advanced IDE features like code completion, streamlining the development process, and enhancing the overall developer experience.
   For example, as you start typing “wordCounterM…“, your IDE will suggest “wordCounterMax“, ensuring you pick the correct option without constantly referring to the documentation.
   This efficiency boost can accelerate the implementation of new features and improvements.
3. Simplified Maintainability: If a developer tries to expand the Word Counter plugin functionality, managing various data types can become complex. Type definitions serve as a roadmap for understanding the data flow within the plugin, facilitating smoother transitions and minimizing bugs during updates and modifications.

Using type definitions in this manner not only promotes code clarity but also fosters a more robust and reliable development process for the Word Counter plugin integration.

wordCounterMax Bug Fix

The Word Counter plugin introduced the wordCounterMax API option to restrict the number of words in the editor. However, in version 4.2, this feature had a flaw where it only allowed entering one character in the last permitted word. For instance, setting wordCounterMax to “2” would let users input one full word and the initial letter of the second word. By updating to V4.2.1, this issue has been resolved, ensuring that the wordCounterMax API option now functions correctly by restricting the input to the specified word limit without allowing partial words. This fix enhances the overall user experience by accurately enforcing the word count limit set by the developers.

new FroalaEditor('.selector', {
   wordCounterMax: 140
});

New API Option For The Default Font Family and Styles

The Froala V4.2.1 introduces the fontFamilyDefaultSelection and fontSizeDefaultSelection options. These options allow developers to apply a default custom font family and size to the editor content.

To use the fontFamilyDefaultSelection option, developers have to provide the fontFamily property accordingly (in case the asked defaultFontFamily doesn’t belong to the default font-family options).

By setting this option, the editor will add a new  <style id="default-styles"> tag to the webpage <head>. It will contain the default font size and family style for the Froala editor. The class name defined in that style tag will be added to the HTML element defined in the editor.$el property. As a result, all the elements inside the editor can inherit the defined default styles.

new FroalaEditor('#froala-editor',  {
fontFamilyDefaultSelection : "Dosis",
fontSizeDefaultSelection : "30"
});

This feature simplifies the process of customizing the font styles within the editor, offering greater flexibility in design choices.

Tab Spaces Preservation Feature

Starting from Froala V4.2.1, users can now enjoy enhanced control over the preservation of tab spaces (\t character) defined in the initialization content.

By default, tab spaces are removed when content is rendered in the editor. To retain the spaces, set the newly preserveTabSpaces option to true. When preserveTabSpaces is true, the \t character is replaced with the number of spaces specified by the user using the tabSpaces option. If no number of tabSpaces is specified, \t is replaced with 4 spaces, enabling the visualization of tab spaces in the user interface.

new FroalaEditor('#froala-editor',  {
preserveTabSpaces : true,
tabSpaces : 3
});

This feature offers a significant advantage for users such as:

• Improved Content Formatting
  By enabling the preserveTabSpaces option in Froala V4.2.1, users can maintain the intended layout and alignment of their text, especially when dealing with content where precise spacing is crucial. This ensures that the visual representation of the content remains true to the original formatting, enhancing readability and clarity.
• Enhanced Code Readability
  For developers and users working with code blocks or technical documentation, preserving tab spaces is essential for maintaining the integrity and readability of the code. With the ability to retain tab characters intact, the code structure is preserved, making it easier to identify and understand different sections of the codebase. This feature simplifies the process of reviewing and editing code within the editor, leading to improved code quality and efficiency.
• Customizable Tab Space Conversion
  The flexibility offered by the tabSpaces option allows users to customize the conversion of tab characters to spaces according to their preferences. By specifying the number of spaces to replace each tab character, users can tailor the display of content to suit their individual needs.
• Consistent User Interface Experience
  The standardization of tab space representation across different content types maintains a cohesive user experience, regardless of the original formatting. This ensures a consistent and visually appealing user interface.

The ability to preserve tab spaces in Froala V4.2.1 offers users a valuable feature that enhances content formatting, code readability, customization options, and user interface consistency. This functionality not only improves the editing experience but also empowers users to create and manage content more effectively within the editor environment.

Track Changes Feature Improvements

With Froala, you can keep track of all the changes you make to your content in the editor using the Track Changes plugin. You can enable this plugin using the pluginsEnabled option if you want to use it, as it is not enabled by default. With Track Changes enabled, any text or image additions are shown with a yellow highlight, and changes that are intended to be deleted are highlighted in red with a strikethrough. Later, you can accept your changes or reject them.

In this release, we improved the Track Changes feature and fixed some bugs related to this feature. This includes:

• Using the ‘Ctrl + X’ keys for multiline cut and paste works as expected when you paste the content again inside the editor.

Tracking changes in your documents is now more intuitive and efficient, providing a clearer overview of the edits made by collaborators. Stay in control of your content revisions with improved tracking capabilities that streamline the editing process.

Bug Fixes

In addition to the new features and enhancements, this release also includes essential bug fixes to ensure a smoother and more reliable editing experience. We have addressed various issues reported by our users to enhance the overall performance and stability of Froala Editor. These include:

• Resolving the issue of the editor jumping unexpectedly when pasting large content into the editor and subsequently performing actions like scrolling or inserting content that influences the iframe’s height (e.g., pressing Enter) aims to ensure the editor can manage pasted content and changes to the iframe’s height smoothly. This provides a consistent and predictable user experience without any disruptive jumping.
• Resolving the problem where the font format resets when toggling in and out of table rows using the Tab key with the “keepTextFormatOnTable” setting enabled.

With this, we highlighted the new features and bug fixes in Froala V4.2.1. Your feedback is invaluable to us, and we are committed to delivering a top-notch editing solution.

How Can I Update?

Don’t miss out on the benefits of the latest Froala 4.2.1 release. Update today and experience the enhanced editing features and improvements.

If you are using a plain JavaScript library or other framework, check the get started page to know the proper way of downloading the latest Froala Editor release and how to include it in your project based on your preferred method.

If you are using a plain JavaScript library or other framework, follow the table below to learn how to download the latest Froala Editor release and how to include it in your project based on your preferred method.

<!-- Include Editor stylesheet-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Include Editor JavaScript file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>

<!-- Include Editor stylesheet-->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!-- Include Editor JavaScript file-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

npm install froala-editor

<!--

Replace the {download-folder-path} in the following example with the path to the folder containing the stylesheet file e.g.

../css/froala_editor.pkgd.min.js

-->

<link href="{download-folder-path}/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<!--

Replace the {download-folder-path} with the path to the folder containing the JS file e.g.

../js/froala_editor.pkgd.min.js

-->

<script type="text/javascript" src="{download-folder-path}/froala_editor.pkgd.min.js"></script>

bower install froala-wysiwyg-editor

For Froala Editor Version 2 Users:

Follow this migration guide to get step-by-step instructions on how to upgrade from version 2.

Try The Latest Froala Editor

Explore a variety of examples that demonstrate the functionality of the Froala HTML Editor.

Support and Feedback

We are dedicated to always offering the best possible experience for all our users. We believe this release, meant to enhance Typescript support, is a stepping stone towards that commitment. We encourage you to try this improved Typescript support and give us your valuable feedback. Your input is crucial for delivering continuous enhancement in meeting your evolving needs. Thank you for being a valuable part of our vibrant and growing community.
We would like to hear what you think of the latest release! Join us on our GitHub Community to chat with our product manager, developers, and other members of the Froala team.

Change Log

• Please visit the release notes for a complete list of changes.

Get Started

• You can download and start using Froala in less than five minutes following our get started guide.

Technical Questions

• If you have a technical question, you can check whether we have already answered it in our help center. If not, contact our Support team.