# utils/difftochanges

module

<a id="interfaces">

## Interfaces

<a id="interface-DeleteChange">

### `DeleteChange`

<a id="interface-InsertChange">

### `InsertChange`

<a id="type-definitions">

## Type Definitions

<a id="typedef-Change">

### `Change`

<a id="functions">

## Functions

<a id="function-diffToChanges">

### `diffToChanges( diff, output ) → Array<Change<T>>`

Creates a set of changes which need to be applied to the input in order to transform it into the output. This function can be used with strings or arrays.

```typescript
const input = Array.from( 'abc' );
const output = Array.from( 'xaby' );
const changes = diffToChanges( diff( input, output ), output );

changes.forEach( change => {
	if ( change.type == 'insert' ) {
		input.splice( change.index, 0, ...change.values );
	} else if ( change.type == 'delete' ) {
		input.splice( change.index, change.howMany );
	}
} );

input.join( '' ) == output.join( '' ); // -> true
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/difftochanges.ts#L38)

#### Type parameters

* `T`

  The type of output array element.

#### Parameters

* `diff: readonly Array<DiffResult>`

  Result of [`diff`](module_utils_diff.md#constant-diff).

* `output: ArrayLike<T>`

  The string or array which was passed as diff's output.

#### Returns

* `Array<Change<T>>`

  Set of changes (insert or delete) which need to be applied to the input in order to transform it into the output.

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)