npm package: @ibm/bamoe-standalone-bpmn-editor
Description: <!--   IBM Confidential   PID 5900-AR4   Copyright IBM Corp. 2025 -->
Latest version: 9.4.0-ibm-0006

<!--
  IBM Confidential
  PID 5900-AR4
  Copyright IBM Corp. 2025
-->

## BAMOE Standalone BPMN Editor

### Description

This library provides standalone BPMN Editor (one all-in-one JavaScript file) that can be embedded into any web application.

A comprehensive API is also provided for setup and interaction with the Editor.

### Installation

- To add it to your `package.json` file:

  - `npm install @ibm/bamoe-standalone-bpmn-editor`

- To import the library:

  - `import * as BpmnEditor from "@ibm/bamoe-standalone-bpmn-editor/dist"`

### Usage

Here is an example on how to open the BPMN Editor:

```typescript
const editor = BpmnEditor.open({
  container: document.getElementById("bpmn-editor-container"),
  initialContent: Promise.resolve(""),
  initialFileNormalizedPosixPathRelativeToTheWorkspaceRoot: "model.bpmn",
  readOnly: false,
  resources: new Map([
    [
      "MyDecisionModel.dmn",
      {
        contentType: "text",
        content: Promise.resolve(""),
      },
    ],
  ]),
});
```

Available parameters:

- `container`: HTML element in which the Editor will be appended to.
- `initialContent`: Promise to a BPMN model content. Can be empty. Examples:
  - `Promise.resolve("")`
  - `Promise.resolve("<BPMN_XML_CONTENT_DIRECTLY_HERE>")`
  - `fetch("MyBpmnModel.bpmn").then(content => content.text())`
- `initialFileNormalizedPosixPathRelativeToTheWorkspaceRoot`: The POSIX path relative to the workspace root (`/` by default), including the file name. The path is useful to locate the file in the workspace, espcially in relation to other resources (defined by the `resources` parameters). Examples:
  - `model.bpmn`
  - `myPath/model.bpmn`
  - `parent/child/filename.bpmn`
- `readOnly` (optional, defaults to `false`): Use `false` to allow content edition, and `true` for read-only mode, in which the Editor will not allow changes.
- `origin` (optional, defaults to `*` when accessing the application with the `file` protocol, `window.location.origin` otherwise): If for some reason your application needs to change this parameter, you can use it.
- `onError` (optional, defaults to `() => {}`): If there's an error opening the Editor, this function will be called.

* `resources` (optional, defaults to `[]`): Map of resources that will be provided for the Editor. This can be used, for instance, to provide Decision models for the BPMN Editor. Each entry in the map has the resource POSIX path (similar to the `initialFileNormalizedPosixPathRelativeToTheWorkspaceRoot` parameter) as its key and an object containing the `content-type` (`text` or `binary`) and the resource `content` (Promise similar to the `initialContent` parameter) as its value. Resources located in a parent directory (in relation to the current content path, defined by the `initialFileNormalizedPosixPathRelativeToTheWorkspaceRoot`) won't be listed to be used in Business Rule Tasks.

The returned object will contain the methods needed to manipulate the Editor:

- `getContent(): Promise<string>`: Returns a Promise containing the Editor content.
- `setContent(normalizedPosixPathRelativeToTheWorkspaceRoot: string, content: string): Promise<void>`: Sets the content of the Editor. The returning Promise will be rejected if setting the content fails.
- `getPreview(): Promise<string>`: Returns a Promise containing the SVG string of the current diagram.
- `subscribeToContentChanges(callback: (isDirty: boolean) => void): (isDirty: boolean) => void`: Setup a callback to be called on every content change in the Editor. Returns the same callback to be used for unsubscription.
- `unsubscribeToContentChanges(callback: (isDirty: boolean) => void): void`: Unsubscribes the passed callback from content changes.
- `markAsSaved(): void`: Resets the Editor state, signalizing that its content is saved. This will also fire the subscribed callbacks of content changes.
- `undo(): void`: Undo the last change in the Editor. This will also fire the subscribed callbacks of content changes.
- `redo(): void`: Redo the last undone change in the Editor. This will also fire the subscribed callbacks of content changes.
- `close(): void`: Closes the Editor.
- `envelopeApi: MessageBusClientApi<KogitoEditorEnvelopeApi>`: Advanced Editor API. See more details in [MessageBusClientApi](https://github.com/apache/incubator-kie-tools/blob/main/packages/envelope-bus/src/api/index.ts#L91-L95) and [KogitoEditorEnvelopeApi](https://github.com/apache/incubator-kie-tools/blob/main/packages/editor/src/api/KogitoEditorEnvelopeApi.ts#L52-L60).