Breaking Change T1155003
Visible to All Users

The Ace code editor requires registering CSS files manually

What Changed

In v23.1, we upgraded ace.js to v1.4.13 (the lowest version supported) and enabled the useStrictCSP option for our Web Report Designer and Web Dashboard components (Expression Editor) and the Query Builder control (Custom Query Editor). You now need to manually register CSS files for the Ace editor in your application to ensure that the Expression Editor is serialized correctly.

Reasons for Change

The Ace library is required for intelligent code completion in the Expression Editor and Filter Editor. To be able to remove the unsafe-inline directive from Content Security Policy (CSP), we updated the Ace version to 1.4.13 and enabled the useStrictCSP option.

Impact on Existing Apps

The change affects the following components:

How to Update Existing Apps

Follow the steps below to update your application based on the platform.

ASP.NET Core Applications

If you do not bundle resources, add the following styles to your page:

HTML
<link href="/node_modules/ace-builds/css/ace.css" rel="stylesheet" /> <!-- light theme --> <link href="/node_modules/ace-builds/css/theme/dreamweaver.css" rel="stylesheet" /> <!-- dark theme --> <link href="/node_modules/ace-builds/css/theme/ambiance.css" rel="stylesheet" />

Note that ace.css references images, so make sure the ".png" and ".svg" files from the node_modules/ace-builds/css/ folder are placed in the same folder as ace.css when you run the application.

To bundle resources, reference the CSS files in the bundleconfig.json file.

If you load the modules with the setModuleUrl function, remove the following lines:

JavaScript
aceConfig.setModuleUrl('ace/theme/dreamweaver', '@Url.Content("~/js/ace/theme-dreamweaver.js")'); aceConfig.setModuleUrl('ace/theme/ambiance', '@Url.Content("~/js/ace/theme-ambiance.js")');

You can add two themes to your application. It doesn't affect the work of the component.

MVC and Web Forms Applications

If you integrate libraries into your application manually, (without the ThirdParty option), reference the following files on your page:

Razor
<link href="CSS/Ace/ace.css" rel="stylesheet" /> <!-- light theme --> <link href="CSS/Ace/theme/dreamweaver.css" rel="stylesheet" /> <!-- dark theme --> <link href="CSS/Ace/theme/ambiance.css" rel="stylesheet" />

You can find the required CSS file from the following directory:

C:\Program Files\DevExpress 23.1\Components\Sources\DevExpress.Web.Resources\Css\Ace

You can add two themes to your application. It doesn't affect the work of the component.

Angular Applications

For the Report Designer component in Angular, add the following styles to the application:

TypeScript
@Component({ styleUrls: [ '../../../node_modules/ace-builds/css/ace.css', // light theme '../../../node_modules/ace-builds/css/theme/dreamweaver.css', // dark theme '../../../node_modules/ace-builds/css/theme/ambiance.css', ] })

For the Web Dashboard, add the following styles to the styles.css file:

CSS
@import url("../node_modules/ace-builds/css/ace.css"); @import url("../node_modules/ace-builds/css/theme/dreamweaver.css"); @import url("../node_modules/ace-builds/css/theme/ambiance.css");

You can add two themes to your application. It doesn't affect the component.

React Applications

Add the following styles to the styles.css file:

CSS
@import url("../node_modules/ace-builds/css/ace.css"); @import url("../node_modules/ace-builds/css/theme/dreamweaver.css"); @import url("../node_modules/ace-builds/css/theme/ambiance.css");

You can add two themes to your application. It doesn't affect the component.

Vue Applications

Add the following styles to the main.js file:

JavaScript
import "ace-builds/css/ace.css"; import "ace-builds/css/theme/dreamweaver.css"; import "ace-builds/css/theme/ambiance.css";

You can add two themes to your application. It doesn't affect the component.

Dashboard Component for Blazor

For the Dashboard Component for Blazor, reference the following stylesheets (in the _Layout.cshtml file in a Blazor Server application or in the index.html file in a Blazor WebAssembly Application):

HTML
<head> <!-- ... --> <!-- ace --> <link href="_content/DevExpress.Blazor.Dashboard/ace.css" rel="stylesheet" /> <link href="_content/DevExpress.Blazor.Dashboard/ace-theme-dreamweaver.css" rel="stylesheet" /> <link href="_content/DevExpress.Blazor.Dashboard/ace-theme-ambiance.css" rel="stylesheet" /> <!-- /ace --> <!-- ... --> </head>

You can add two themes to your application. It doesn't affect the component.

How to Revert to Previous Behavior

You can't revert to the previous behavior.

See Also

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.