How to satisfy strict CSP in Workflow Designer?

If you enforce a strict Content Security Policy (CSP) and disallow inline styles or styles injected via JavaScript, use the no-CSS-in-JS entrypoint. In this mode the designer styles are loaded from a separate CSS file.

Solution

1. Import the designer from @optimajet/workflow-designer/no-css.
2. Include @optimajet/workflow-designer/dist/workflowdesigner.min.css as a separate stylesheet.

Examples for each package are below.

JavaScript/TypeScript (core package)

import WorkflowDesigner from "@optimajet/workflow-designer/no-css";
import "@optimajet/workflow-designer/dist/workflowdesigner.min.css";

const designer = new WorkflowDesigner({
    apiurl: '',
    name: 'wfe',
    language: 'en',
    renderTo: 'root',
    graphwidth: window.innerWidth,
    graphheight: window.innerHeight,
    customLocalization: [el]
});

If you include styles in HTML, use an external stylesheet:

<link
  rel="stylesheet"
  href="/node_modules/@optimajet/workflow-designer/dist/workflowdesigner.min.css"
/>

React

import WorkflowDesigner from '@optimajet/workflow-designer-react/no-css';;

export function DesignerPage() {
  return <WorkflowDesigner {...props} />;
}

Angular

import { WorkflowDesignerNoCssModule } from "@optimajet/workflow-designer-angular/no-css";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    WorkflowDesignerNoCssModule
  ],
})

Add the CSS to angular.json:

{
  "styles": [
    "node_modules/@optimajet/workflow-designer-angular/workflowdesigner.min.css"
  ]
}

Then use the component in your template:

<workflow-designer
  [schemeCode]="schemeCode"
  [processId]="processId"
  [designerConfig]="designerConfig"
></workflow-designer>